#slots{align-items:stretch}.slot{position:relative;flex:1 1 0;min-width:180px;max-width:240px;display:flex;flex-direction:column}.family-active{max-width:1100px;margin:0 auto}.family-head{padding:0 .25rem .7rem}.family-step{font-family:var(--font-ui);font-size:.72rem;color:var(--art-gold);letter-spacing:.12em;text-transform:uppercase}.family-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:stretch}.family-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .95rem;background:var(--art-bg-secondary);border:1px solid var(--art-border);color:var(--art-white);font-family:var(--font-ui);font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:border-color .18s,background .18s,transform .12s}.family-chip:hover{border-color:var(--art-gold);background:#b89d4f0f;transform:translateY(-1px)}.family-chip-dot{display:inline-block;width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff2e}.family-chip-name{white-space:nowrap}.family-locked-inline{display:inline-flex;align-items:center;gap:.7rem;padding:.5rem .6rem .5rem .9rem;background:var(--art-bg-secondary);border:1px solid var(--art-border);border-left:3px solid var(--art-gold)}.family-locked-chip{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui);font-size:.9rem;color:var(--art-white)}.family-locked-count{font-family:var(--font-ui);font-size:.7rem;color:var(--art-gray);margin-left:.2rem}.family-reset-btn{border:1px solid var(--art-border);background:transparent;color:var(--art-gray);width:26px;height:26px;font-family:var(--font-ui);font-size:1rem;cursor:pointer;line-height:1;padding:0;transition:color .15s,border-color .15s,background .15s}.family-reset-btn:hover{color:var(--art-white);border-color:var(--art-gold);background:#b89d4f1a}.tile-locked{display:flex;flex-direction:column;height:100%;background:var(--art-bg-secondary);border:1px solid var(--art-border);box-shadow:0 4px 16px #00000059;transition:transform .2s,box-shadow .2s}.tile-locked:hover{transform:translateY(-3px);box-shadow:0 10px 28px #00000073}.tile-swatch{position:relative;aspect-ratio:1;overflow:hidden}.tile-swatch:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14;pointer-events:none}.tile-number{position:absolute;top:10px;left:12px;font-family:var(--font-heading);font-size:.85rem;font-weight:400;color:#ffffffb3;letter-spacing:.12em;text-shadow:0 1px 4px rgba(0,0,0,.6)}.unlock-btn{position:absolute;top:10px;right:10px;width:26px;height:26px;border:none;background:#00000059;backdrop-filter:blur(4px);color:#fffffff2;font-family:var(--font-ui);font-size:1rem;cursor:pointer;padding:0;line-height:1;border-radius:50%;opacity:0;transition:opacity .18s,background .18s,transform .18s}.tile-locked:hover .unlock-btn{opacity:1}.unlock-btn:hover{background:#0009;transform:scale(1.1)}.tile-plaque{padding:.9rem .95rem 1rem;border-top:1px solid rgba(255,255,255,.06)}.tile-name{font-family:var(--font-heading);font-size:1rem;color:var(--art-white);line-height:1.2;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-hex{font-family:monospace;font-size:.72rem;color:var(--art-gold);letter-spacing:.08em}.tile-disabled{flex:1;display:flex;align-items:center;justify-content:center;min-height:280px;border:1px dashed rgba(255,255,255,.1);background:#ffffff04}.tile-disabled-num{font-family:var(--font-heading);font-size:2.4rem;color:#ffffff1f;letter-spacing:.1em}.tile-active{position:relative;background:var(--art-bg-secondary);border:1px solid var(--art-gold);box-shadow:0 0 0 1px #b89d4f26,0 14px 38px #0000008c;padding:.8rem 0 1.5rem;display:flex;flex-direction:column;align-items:stretch}.tile-active-num{position:absolute;top:10px;left:14px;font-family:var(--font-heading);font-size:.85rem;font-weight:400;color:var(--art-gold);letter-spacing:.12em;z-index:2}.tile-empty{display:flex;align-items:center;justify-content:center;min-height:280px;padding:1.2rem}.tile-empty p{text-align:center;font-family:var(--font-ui);font-size:.78rem;color:var(--art-gray);line-height:1.5}.tile-active-count{position:absolute;top:12px;right:14px;font-family:var(--font-ui);font-size:.62rem;color:var(--art-gray);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;z-index:2}.drum-container{position:relative;height:220px;margin:.6rem 0 .7rem}.drum-scroller{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.drum-scroller::-webkit-scrollbar{display:none}.drum-spacer{height:88px}.drum-row{height:44px;display:flex;align-items:center;gap:.6rem;padding:0 1.6rem 0 1rem;cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;filter:blur(0);transition:filter .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1)}.drum-row.is-near{filter:blur(.6px);transform:scale(.97);transform-origin:left center}.drum-row.is-far{filter:blur(1.4px);transform:scale(.93);transform-origin:left center}.drum-row.is-active .drum-name{color:var(--art-white);letter-spacing:.02em}.drum-row.is-active .drum-hex{color:var(--art-gold)}.drum-row.is-active .drum-swatch{width:32px;height:32px;box-shadow:0 0 0 1px #fff3,0 4px 14px #00000080}.drum-swatch{display:inline-block;width:24px;height:24px;flex-shrink:0;border-radius:2px;transition:width .22s,height .22s,box-shadow .22s}.drum-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.drum-name{font-family:var(--font-ui);font-size:.78rem;color:#ffffffd9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;transition:color .2s}.drum-hex{font-family:monospace;font-size:.62rem;color:#ffffff80;letter-spacing:.06em;margin-top:.1rem;transition:color .2s}.drum-visor{position:absolute;left:6px;right:20px;top:88px;height:44px;pointer-events:none;z-index:3}.drum-visor:before{content:"";position:absolute;inset:3px;background:#ffffff0a;pointer-events:none}.visor-corner{position:absolute;width:9px;height:9px;border:1.5px solid var(--art-gold);opacity:.9;pointer-events:none}.visor-tl{top:0;left:0;border-right:none;border-bottom:none}.visor-tr{top:0;right:0;border-left:none;border-bottom:none}.visor-bl{bottom:0;left:0;border-right:none;border-top:none}.visor-br{bottom:0;right:0;border-left:none;border-top:none}.drum-dial{position:absolute;right:4px;top:10px;bottom:10px;width:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}.dial-tick{display:block;width:8px;height:1px;background:#ffffff2e;transition:width .18s,background .18s,height .18s}.dial-tick.is-near{width:10px;background:#ffffff73}.dial-tick.is-active{width:14px;height:2px;background:var(--art-gold);box-shadow:0 0 6px #b89d4f99}.drum-pick-btn{position:absolute;right:8px;top:110px;transform:translateY(-50%);width:22px;height:22px;padding:0;background:transparent;border:1px solid var(--art-gold);color:var(--art-gold);cursor:pointer;z-index:5;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .12s,background .18s,color .18s,border-color .18s}.drum-container:hover .drum-pick-btn,.drum-pick-btn:hover{opacity:1;pointer-events:auto}.drum-pick-btn:hover{transform:translateY(-50%) scale(1.1);background:#b89d4f1f}.drum-pick-btn:active,.drum-pick-btn.is-committing{background:var(--art-gold);color:var(--art-bg);border-color:var(--art-gold);transform:translateY(-50%) scale(.96)}.final-bar{border:1px solid var(--art-border);background:var(--art-bg-secondary);padding:1rem 1.2rem;margin-bottom:2.5rem}.final-bar-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.final-strip{display:flex;flex:1 1 220px;min-width:200px;height:48px;border:1px solid rgba(255,255,255,.1)}.final-actions{display:flex;flex-wrap:wrap;gap:.45rem}.action-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;background:var(--art-bg);border:1px solid var(--art-border);color:var(--art-gold);font-family:var(--font-ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.action-btn:hover{background:#b89d4f1a;border-color:var(--art-gold)}.action-btn.restart-btn{color:var(--art-gray)}.action-btn.restart-btn:hover{color:var(--art-white)}.action-btn.refine-btn{background:var(--art-gold);color:var(--art-bg);border-color:var(--art-gold)}.action-btn.refine-btn:hover{background:#d4b765;color:var(--art-bg)}.exp-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:.75rem;border-bottom:1px solid var(--art-border)}.exp-row-label{font-family:var(--font-ui);font-size:.65rem;color:var(--art-gray);text-transform:uppercase;letter-spacing:.08em;align-self:center;white-space:nowrap}.exp-title{font-family:var(--font-heading);font-size:1rem;color:var(--art-gold);letter-spacing:.02em}.exp-subtitle{font-family:var(--font-ui);font-size:.65rem;color:var(--art-gray);text-transform:uppercase;letter-spacing:.08em}.exp-panel{margin:0;padding:1.25rem 1.5rem;background:var(--art-bg-secondary);border:1px solid var(--art-border);display:flex;flex-direction:column;gap:1rem}.exp-btn-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.exp-btn{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .85rem;background:transparent;border:1px solid var(--art-border);color:var(--art-gray);cursor:pointer;transition:all .2s;white-space:nowrap}.exp-btn:hover{border-color:var(--art-gold);color:var(--art-gold);background:#b89d4f0f}#exp-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(1rem);background:var(--art-gold);color:var(--art-bg);font-family:var(--font-ui);font-size:.8rem;padding:.55rem 1.4rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;letter-spacing:.04em}.exp-toast-show{opacity:1!important;transform:translate(-50%) translateY(0)!important}@media(max-width:700px){#slots{gap:.6rem}.slot{flex:1 1 calc(50% - .3rem)!important;min-width:0!important;max-width:none!important}.tile-disabled,.tile-empty{min-height:200px}.exp-panel{padding:1rem}}