.collection{position:absolute;inset:0;z-index:4;pointer-events:none;color:#f6f0ff;--collection-accent:#9b8bc8}
.collection button,.collection a{pointer-events:auto}.brand-bar{position:absolute;top:28px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between}.brand-home{border-radius:0;width:156px;height:auto;padding:0}.brand-home img{width:156px;height:auto}.brand-caption{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#bbb1cf}.hero-intro{position:absolute;top:15%;width:100%;text-align:center;padding:0 24px}.hero-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.25em;color:#bfb0d6;margin:0 0 17px}.hero-intro h1{font-size:clamp(35px,4.5vw,70px);font-weight:500;line-height:1.06;letter-spacing:-.055em;margin:0}.hero-intro h1 em{font-style:normal;color:var(--collection-accent);transition:color .7s}.hero-subtitle{font-size:13px;color:#a89ab8;letter-spacing:.035em;margin:16px 0 0}.collar-drag{position:absolute;left:0;right:0;top:33%;bottom:24%;pointer-events:auto;touch-action:pan-y;cursor:grab}.collar-drag:active{cursor:grabbing}.color-panel{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);width:min(520px,90%);text-align:center;pointer-events:auto}.color-heading{display:flex;align-items:center;justify-content:center;gap:24px}.color-heading>div{min-width:245px}.color-heading h2{font-weight:400;letter-spacing:-.03em;font-size:29px;margin:6px 0}.color-count{font-size:9px;letter-spacing:.2em;color:#9b8ba8}.color-heading button{border:1px solid #d7c6ed36;flex-shrink:0;transition:background .2s,transform .2s}.color-heading button:hover{background:#ddd3ff15;transform:scale(1.06)}.color-heading button svg{width:18px;height:18px}.color-mood{font-size:11px;color:#a99ab9;margin:8px 0 16px}.swatches{display:flex;justify-content:center;gap:11px}.swatches button{width:29px;height:29px;border:1px solid transparent;background:none;position:relative}.swatches button:after{content:'';width:17px;height:17px;border-radius:50%;background:var(--swatch);border:1px solid #ffffff26;box-shadow:inset 0 2px 4px #fff2}.swatches button[aria-pressed=true]{border-color:#d6c4ed;box-shadow:0 0 16px #e2c7ff15}.explore-link{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);width:auto;height:auto;border-radius:0;display:flex;gap:15px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#d0c2e1;white-space:nowrap}.explore-link svg{width:15px;height:15px}.collection-active #chapters,.collection-active #replay{opacity:0;pointer-events:none}.collection-active .track{opacity:.35}#scroll-hint{display:none}.stage{background:radial-gradient(ellipse at 50% 53%,#312344 0%,#171221 44%,#09080e 78%)}
@media(max-width:759px){.brand-bar{top:22px;left:22px;right:22px}.brand-home,.brand-home img{width:132px}.brand-caption{font-size:8px;max-width:95px;text-align:right;line-height:1.7}.hero-intro{top:16%}.hero-intro h1{font-size:40px}.hero-subtitle{max-width:250px;margin:14px auto;font-size:12px;line-height:1.6}.hero-eyebrow{font-size:8px}.color-panel{bottom:12%}.color-heading h2{font-size:25px}.color-heading>div{min-width:205px}.color-heading{gap:4px}.color-mood{font-size:10px}.explore-link{bottom:32px;font-size:9px}.collar-drag{top:34%;bottom:33%}}
@media(max-height:600px){.brand-bar{top:16px}.hero-intro{top:16%}.hero-intro h1{font-size:32px}.hero-eyebrow,.hero-subtitle,.color-mood{display:none}.color-panel{bottom:11%}.color-heading h2{font-size:22px}.color-heading>div{min-width:210px}.color-heading{gap:12px}.color-count{font-size:8px}.swatches{gap:7px}.swatches button{width:24px;height:24px}.swatches button:after{width:14px;height:14px}.explore-link{bottom:12px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.collection *{transition:none!important}}
/* Explicit interaction layers: the swipe surface never covers the color controls. */
.brand-bar,.hero-intro{z-index:2}.collar-drag{z-index:1;top:29%;bottom:27%}.color-panel{z-index:3}.explore-link{z-index:3}.color-panel button{position:relative;pointer-events:auto;touch-action:manipulation}.swatches button{width:38px;height:38px}.swatches button:after{width:20px;height:20px}.color-heading button{width:46px;height:46px}
#assembled-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;width:max-content;max-width:80%;text-align:center;opacity:0;visibility:hidden;color:#c5b7d9}
#assembled-color{display:block;font-size:13px;letter-spacing:.03em;margin-bottom:13px}#continue-explore{display:flex;align-items:center;justify-content:center;gap:12px;width:auto;height:auto;padding:10px 20px;border:1px solid #b9a9d345;border-radius:30px;font:12px Arial,sans-serif;color:#eee5fb;background:#b4a4d40b}#continue-explore svg{width:15px;height:15px}#assembled-hint small{display:block;font-size:9px;letter-spacing:.09em;margin-top:12px;color:#8d819f}
@media(min-width:760px){.hero-intro{top:13%}.hero-intro h1{font-size:clamp(35px,4.4vw,68px)}.color-panel{bottom:8%}.color-mood{margin-bottom:10px}}
@media(max-width:759px){.swatches{gap:8px}.swatches button{width:36px;height:36px}.color-panel{bottom:11%}#assembled-hint{bottom:88px}.collar-drag{top:33%;bottom:36%}}
@media(max-height:600px){.color-panel{bottom:10%}.hero-intro{top:15%}.hero-intro h1{font-size:32px}.swatches button{width:33px;height:33px}.swatches button:after{width:17px;height:17px}}
/* Pick the rendered collar anywhere on the stage; controls remain above this surface. */
.collar-drag{inset:0;top:0;bottom:0;touch-action:pan-y}