/* A restrained, cinematic home. Motion follows scroll rather than a timer. */
#home{overflow:clip;background:#f3f7f5}
body[data-page="home"] .topbar{background:#07120ff2;border-color:#ffffff12;color:#d6e6dc;backdrop-filter:blur(18px)}
body[data-page="home"] .topbar .brand strong{color:#e3f0e7}body[data-page="home"] .topbar .brand strong>span{color:#8bafa0}body[data-page="home"] nav a{color:#92ac9f}body[data-page="home"] nav a.active{color:#e3f3e8;border-color:#a6f6cc}body[data-page="home"] .top-link{color:#b6e8cd}body[data-page="home"] .brand-profile{width:38px;height:38px}
.reading-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:50;pointer-events:none;background:#a6f6cc;transform:scaleX(var(--reading-progress,0));transform-origin:left;opacity:0}body[data-page="home"] .reading-progress{opacity:1}
.hero-scroll{height:155svh;min-height:1060px;position:relative;background:#000000}
.stage{position:sticky;top:88px;height:calc(100svh - 88px);min-height:620px;max-height:none;background:#000000;clip-path:inset(0 round calc(var(--hero-p,0) * 22px));will-change:clip-path}
.stage-content{padding:50px 64px 100px;max-width:1500px;position:relative;z-index:2;justify-content:center;translate:0 calc(var(--hero-p,0) * -75px);opacity:calc(1 - var(--hero-p,0) * .75);will-change:translate,opacity}
.stage h1{font-size:clamp(60px,7.2vw,108px);font-weight:700;letter-spacing:-.065em;line-height:1.08}.stage h1 em{color:#b2efcc}.stage-overline{font-size:11px;letter-spacing:.18em;color:#97b6a5;margin:0 0 26px;animation:none}.stage-intro{font-size:15px;line-height:1.9;max-width:460px;margin:28px 0 32px!important}.stage-kicker{top:30px;left:64px;right:64px;font-size:10px;letter-spacing:.16em;color:#799488;z-index:2}.stage .primary{background:#c4f1d6;color:#123c27;box-shadow:none;padding:15px 26px}.stage .secondary{background:transparent;border-color:#ffffff35;padding:15px 26px}.stage-tags{margin-top:30px;color:#738f81}.stage-content>h1,.stage-intro,.stage-content>.button-row,.stage-tags{animation:none}
.stage-slides{translate:0 calc(var(--hero-p,0) * 55px);opacity:calc(1 - var(--hero-p,0) * .2);will-change:translate}.stage-grain{background:radial-gradient(ellipse at 8% 95%,#77c9a71a,transparent 45%)}.stage-shade{background:linear-gradient(90deg,#000000 2%,#000000e6 28%,#00000040 58%,transparent 82%),linear-gradient(0deg,#000000 0%,transparent 20%)}
.stage-switcher{bottom:105px;right:50px;background:#07140f80;border-radius:5px;padding:8px 12px;border-color:#ffffff20}.stage-switcher button{border-radius:3px}.stage-switcher button.is-current{background:#c4f1d6}.stage-switcher>span{font-size:9px;letter-spacing:.1em}.stage-bottom{left:64px;right:64px;bottom:28px;font-size:9px;color:#7e9a8b;opacity:calc(1 - var(--hero-p,0) * .7)}
.stage-chapter{position:absolute;left:52%;top:18%;display:flex;align-items:flex-start;gap:15px;color:#a5c6b6;opacity:calc(.65 - var(--hero-p,0) * .6);z-index:1}.stage-chapter>span{font-size:10px;line-height:1.7;border-top:1px solid #779b87;padding-top:7px;min-width:32px}.stage-chapter b{display:block;font-size:12px;line-height:1.6;font-weight:500;letter-spacing:.14em}
.motion-strip{position:relative;z-index:3;background:#c4f1d6;padding:17px 0}.motion-strip>div{animation:none;transform:translateX(calc(var(--strip-shift,0) * -1px));font-size:20px;letter-spacing:-.02em;will-change:transform}.motion-strip b{font-size:18px}
.proof-section{position:relative;padding-block:100px;gap:70px}.proof-poster{border-radius:6px;padding:8px;box-shadow:0 28px 65px #16382b18;transform:translateY(calc(var(--travel,0) * 32px)) rotate(calc(var(--travel,0) * -3deg));will-change:transform}.proof-poster:hover{transform:translateY(calc(var(--travel,0) * 32px)) rotate(0)}.proof-poster img{border-radius:2px}.proof-options button{border-radius:4px}.proof-options img{border-radius:2px}.proof-copy h2{letter-spacing:-.065em}.proof-copy .proof-caption{font-size:13px}
#home .home-effects{padding-top:65px;padding-bottom:95px}.effect-showcase{gap:60px}.effect-view{border-radius:7px;box-shadow:0 18px 55px #144b3a0a}.home-features{margin-top:75px;gap:26px}.home-features article{border-top-color:#9cb9a9}.detail-section{background:#e3eee7;padding-block:85px}.detail-art>button{border-radius:6px;box-shadow:0 20px 50px #17483514;transform:translateY(calc(var(--travel,0) * 25px));will-change:transform}.detail-options>button{border-radius:5px}.detail-options>button.active{background:#123b2d;border-color:#123b2d}.detail-options>button:hover:not(.active){transform:translateX(3px)}
.home-community{background:#0b2820}.community-story{padding-block:95px;gap:55px}.look-one{transform:translateY(calc(-8px + var(--travel,0) * 40px)) rotate(calc(-4deg + var(--travel,0) * 2deg))}.look-two{transform:translateY(calc(8px - var(--travel,0) * 40px)) rotate(calc(4deg - var(--travel,0) * 2deg))}.look-card{border-radius:6px;will-change:transform}.look-card img{border-radius:2px}.look-card:hover{transform:translateY(-6px) rotate(0)}.story-signature{opacity:.75}#home .home-community h2{font-size:clamp(42px,5vw,70px)}.home-finale{padding-block:100px 120px}.finale-cover{transform:translateY(calc(var(--travel,0) * 25px)) rotate(4deg);border-radius:4px}
/* Progressive entrances remain visible if JavaScript is unavailable. */
#home .reveal-ready{opacity:1;transform:none}.scroll-reveal{opacity:var(--enter,1);translate:0 calc((1 - var(--enter,1)) * 38px);will-change:opacity,translate}.scroll-reveal:nth-child(2){--enter-delay:.06}.scroll-reveal:nth-child(3){--enter-delay:.12}
@media(max-width:1050px){.stage-content{padding-inline:40px}.stage h1{font-size:clamp(58px,7.4vw,88px)}.stage-kicker,.stage-bottom{left:40px;right:40px}.stage-chapter{left:53%;top:15%}.stage-switcher{right:32px}.proof-section{gap:35px}}
@media(max-width:720px){body[data-page="home"] .topbar{background:#07120ff5}.hero-scroll{height:130svh;min-height:960px}.stage{top:100px;height:calc(100svh - 100px);min-height:740px}.stage-content{min-height:0;padding:85px 24px 75px;justify-content:flex-start}.stage h1{font-size:clamp(49px,12vw,72px);line-height:1.12}.stage-overline{font-size:9px;margin:0 0 20px}.stage-intro{font-size:13px;line-height:1.9;margin:24px 0!important;max-width:310px}.stage-kicker{left:24px;right:24px;top:22px;font-size:8px}.stage-chapter{left:auto;right:24px;top:45px;gap:7px}.stage-chapter>span{min-width:18px;font-size:8px}.stage-chapter b{font-size:8px;line-height:1.4}.stage-content .button{padding:11px 16px;font-size:11px}.stage-tags{margin-top:22px;font-size:9px}.stage-shade{background:linear-gradient(180deg,#000000 0%,#000000 30%,#00000099 47%,transparent 73%,#000000 100%),linear-gradient(90deg,#00000033,transparent)}.stage-slides .stage-avatar{top:72%;height:68%;left:63%}.stage-switcher{left:24px;right:auto;bottom:62px;padding:6px 10px}.stage-bottom{left:24px;right:24px;bottom:19px}.stage-bottom>span:last-child{font-size:7px}.stage-bottom a{font-size:8px}.motion-strip{padding:13px 0}.motion-strip>div{font-size:16px}.proof-section{padding-block:50px;gap:30px}.proof-poster{transform:translateY(calc(var(--travel,0) * 14px)) rotate(calc(var(--travel,0) * -1deg))}.detail-section{padding-block:50px}.detail-art>button{transform:none}.community-story{padding-block:55px;gap:35px}.look-one{transform:translateY(calc(-4px + var(--travel,0) * 16px)) rotate(-3deg)}.look-two{transform:translateY(calc(4px - var(--travel,0) * 16px)) rotate(3deg)}#home .home-community h2{font-size:40px}.home-finale{padding-block:60px 85px}.scroll-reveal{translate:0 calc((1 - var(--enter,1)) * 24px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto;min-height:0}.stage{position:relative;top:0;clip-path:none}.stage-content,.stage-slides,.scroll-reveal{translate:none;opacity:1}.motion-strip>div,.proof-poster,.detail-art>button,.look-card,.finale-cover{transform:none!important}.stage-chapter,.stage-bottom{opacity:1}html{scroll-behavior:auto}.reading-progress{display:none}}

/* The composition is anchored to a central stage, not the monitor edges. */
.stage-slides{width:min(100%,1680px);left:0;right:0;margin-inline:auto}
.stage-slides .stage-avatar{height:min(100%,1000px)}
.stage-bottom{left:0;right:0;max-width:1372px;width:calc(100% - 128px);margin-inline:auto}
.stage-switcher{right:max(50px,calc((100% - 1372px)/2))}
.stage-chapter{left:calc(50% - 10px)}
@media(min-width:1900px){.stage h1{font-size:108px}.stage-content{max-width:1500px}.stage-shade{background:linear-gradient(90deg,#000000 0%,#000000ee calc(50% - 550px),#00000050 53%,transparent 72%),linear-gradient(0deg,#000000,transparent 20%)}.stage-chapter{top:20%}}
@media(min-aspect-ratio:21/9) and (min-width:1200px){.hero-scroll{height:150svh;min-height:950px}.stage{min-height:580px}.stage-content{padding-top:45px;padding-bottom:90px}.stage h1{font-size:clamp(68px,8.5vh,108px)}.stage-intro{margin:24px 0 28px!important}.stage-chapter{top:17%}.stage-slides .stage-avatar{height:min(105%,1000px)}}
@media(max-width:1050px){.stage-bottom{width:calc(100% - 80px)}.stage-switcher{right:32px}.stage-chapter{left:53%}}
@media(max-width:720px){.stage-slides{width:100%;margin:0}.stage-slides .stage-avatar{height:68%}.stage-bottom{width:calc(100% - 48px)}.stage-switcher{left:24px;right:auto}.stage-chapter{left:auto;right:24px}}

/* Continuous ticker and deterministic scroll transforms. */
.stage{clip-path:none;will-change:auto;border-radius:0}
.motion-strip>div{display:flex;width:max-content;min-width:0;transform:none;animation:marquee 48s linear infinite}
.marquee-group{display:block;flex:none;min-width:100vw;white-space:nowrap}
.motion-strip:hover>div{animation-play-state:running}
.scroll-reveal,.proof-poster,.look-card,.detail-art>button,.finale-cover{transition:none}
@media(prefers-reduced-motion:reduce){.motion-strip>div{animation:none!important}}
/* The next section follows the scene directly, with no artificial pinning spacer. */
.hero-scroll{height:auto;min-height:0;background:#000}
.stage{position:relative;top:0;overflow:hidden;overflow:clip;clip-path:inset(0);border-radius:0}
@media(max-width:720px){.hero-scroll{height:auto;min-height:0}.stage{top:0}}
@media(min-aspect-ratio:21/9) and (min-width:1200px){.hero-scroll{height:auto;min-height:0}}

/* Closing scene: one composed image and a clear next step. */
.home-finale{padding-block:72px!important}
.finale-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;background:#06110d;border:1px solid #19372b;border-radius:12px;color:#eaf4ed}
.finale-copy{position:relative;z-index:2;padding:62px 0 36px 58px;min-width:0}
#home .finale-copy .eyebrow{font-size:10px;letter-spacing:.16em;color:#8fb29f;margin-bottom:26px}
#home .finale-copy h2{font-size:clamp(32px,3.4vw,48px);line-height:1.23;letter-spacing:-.055em}
#home .finale-copy h2 em{color:#b5e7c9}
.home-finale .finale-copy p{font-size:14px;color:#a0b8aa;line-height:1.9;margin:22px 0 28px}
.finale-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.home-finale .finale-actions .primary{background:#c4f1d6;color:#193c29;border-radius:5px;padding:13px 20px;box-shadow:none;font-size:13px}
.finale-actions .primary:hover{background:#dcfae7}
.finale-actions a>span{margin-left:15px}
.finale-shop{font-size:12px;color:#c1d5c8;white-space:nowrap;border-bottom:1px solid #526c5c;padding-block:8px}
.finale-meta{margin-top:44px;padding-top:18px;border-top:1px solid #ffffff1c;display:flex;justify-content:space-between;gap:16px;color:#6f9480;font-size:9px;letter-spacing:.08em}
.finale-visual{position:relative;min-height:440px;background:#000;overflow:hidden}
.finale-visual img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:72% center;max-width:none;opacity:.94}
.finale-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06110d,transparent 38%),linear-gradient(0deg,#06110dcc,transparent 32%);pointer-events:none}
.finale-visual-label{position:absolute;z-index:1;bottom:32px;right:32px;color:#acbdb2;font-size:9px;letter-spacing:.16em;line-height:1.8;text-align:right}
body[data-page="home"] .footer{padding-block:26px;border-top-color:#ccdcd3}
@media(max-width:1050px){.finale-panel{grid-template-columns:1.25fr 1fr}.finale-copy{padding:42px 0 28px 32px}.finale-actions{gap:14px}.finale-meta{margin-top:32px}.finale-visual{min-height:430px}}
@media(max-width:720px){.home-finale{padding-block:36px!important}.finale-panel{grid-template-columns:1fr}.finale-copy{padding:32px 26px 24px}.finale-copy h2{font-size:32px!important}.home-finale .finale-copy p{font-size:13px;margin:20px 0 24px}.finale-meta{margin-top:26px;font-size:8px}.finale-actions{gap:16px}.finale-visual{min-height:0;height:280px}.finale-visual img{object-position:70% 40%}.finale-visual:after{background:linear-gradient(180deg,#06110d,transparent 32%),linear-gradient(0deg,#06110dbb,transparent 45%)}.finale-visual-label{right:24px;bottom:20px;font-size:8px}}
@media(max-width:360px){.finale-copy{padding-inline:22px}.finale-copy h2{font-size:28px!important}.finale-meta{flex-direction:column;gap:5px}.finale-visual{height:240px}}

.detail-options .detail-thumb{width:44px;height:44px;aspect-ratio:1;object-fit:contain;flex:none;border-radius:5px;box-shadow:0 0 0 1px #b7d5ca}
@media(max-width:720px){.detail-options>button{gap:9px}.detail-options .detail-thumb{width:34px;height:34px}.detail-options>button>div{min-width:0}.detail-options strong{font-size:11px}.detail-options small{font-size:9px}}
.detail-options strong,.detail-options small{word-break:keep-all;overflow-wrap:anywhere}

/* Display only the portrait area of the requested poster; retain its original file. */
.stage-slides .stage-portrait-six{height:min(105%,1000px);width:auto;aspect-ratio:.52;left:74%;top:65%;translate:-50% -50%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.stage-portrait-six>img{position:absolute;left:0;top:0;width:auto;height:100%;max-width:none;object-fit:contain}
@media(max-width:720px){.stage-slides .stage-portrait-six{height:68%;top:83%;left:65%}}
.stage-slides .stage-portrait-six{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent);mask-composite:intersect}

/* Genuine alpha cutout: no poster viewport, edge mask or rectangular haze. */
.stage-slides .stage-portrait-six{height:min(112%,1050px);width:auto;aspect-ratio:auto;left:75%;top:65%;translate:-50% -50%;mask-image:none;overflow:visible;object-fit:contain;filter:drop-shadow(0 10px 36px #00000025)}
.finale-visual img{transform:scaleX(-1)}
.stage-grain{background:radial-gradient(ellipse at 76% 48%,#91cdbd0f,transparent 42%),radial-gradient(ellipse at 8% 95%,#77c9a715,transparent 45%)}
@media(max-width:720px){.stage-slides .stage-portrait-six{height:68%;top:83%;left:65%}}

/* A bounded feature explorer: list scroll and click share a single selection. */
.detail-board{align-items:start}
.detail-picker{height:var(--detail-height,650px);min-width:0;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.detail-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#5d8172;font-size:11px;flex:none;padding:0 4px 6px;border-bottom:1px solid #bad3c5}
.detail-picker-head>span:first-child{color:#277763;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.detail-picker-head>span:last-child>span{margin-left:8px}
.detail-picker .detail-options{position:relative;min-height:0;flex:1;display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;align-content:start;overflow-y:auto;overflow-x:hidden;padding:2px 8px 2px 2px;gap:8px;scroll-behavior:smooth;scroll-padding-block:2px}
.detail-picker .detail-options>button{min-height:80px;flex:none;transform:none}
.detail-picker .detail-options>button:hover:not(.active){transform:none}
.detail-picker .detail-options:focus-visible{outline-offset:-2px}
.detail-description p{min-height:3.7em}
/* Original captured pixels, identical scale and framing in both states. */
.ingame-comparison-scene{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(ellipse at 55% 30%,#162c23,#040907 80%)}
.ingame-comparison-scene :is(#compare-image,.ingame-before-layer){position:absolute;max-width:none;width:190%;height:auto;left:-68%;top:-14%;margin:0;object-fit:fill;transform:none;transition:none}
.ingame-state{position:absolute;left:20px;bottom:18px;color:#b5cfbf;background:#06110dc9;border:1px solid #8baa9633;padding:5px 9px;border-radius:4px;font-size:9px;letter-spacing:.14em;pointer-events:none}
@media(max-width:720px){.detail-picker{order:-1;width:100%;height:min(var(--detail-height,480px),320px)}.detail-picker-head{font-size:10px}.detail-picker .detail-options{grid-template-columns:1fr}.detail-picker .detail-options>button{min-height:70px;padding:12px 14px;gap:14px}.detail-picker .detail-options strong{font-size:13px}.detail-picker .detail-options small{font-size:10px}.detail-picker .detail-options .detail-thumb{width:42px;height:42px}.ingame-comparison-scene{aspect-ratio:1}.ingame-comparison-scene :is(#compare-image,.ingame-before-layer){width:220%;left:-91%;top:-8%}.ingame-state{left:14px;bottom:14px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.detail-picker .detail-options{scroll-behavior:auto}}

.detail-picker .detail-options{--scroll-track:#dce9e2;--scroll-thumb:#89b19f;--scroll-hover:#3f816a;--scroll-active:#1c674f}

/* A quiet playlist, with one clearly selected feature. */
.detail-picker{padding:16px 14px 14px;border:1px solid #c1d6c8;border-radius:12px;background:#d9e9df}
.detail-picker-head{padding:0 6px 12px;border-color:#bcd2c2}
.detail-picker .detail-options{gap:5px;padding:2px 8px 2px 2px}
.detail-picker .detail-options>button{position:relative;border:1px solid transparent;background:#e7f0e9;padding:14px 16px;border-radius:7px;box-shadow:none;transition:background .22s,border-color .22s,box-shadow .22s;color:#567367}
.detail-picker .detail-options>button strong{font-weight:500;font-size:14px;color:#466759}
.detail-picker .detail-options>button small{color:#6e8779}
.detail-picker .detail-options>button .detail-thumb{opacity:.65;filter:saturate(.6);box-shadow:none;transition:opacity .22s,filter .22s}
.detail-picker .detail-options>button[data-queue-distance="2"],.detail-picker .detail-options>button[data-queue-distance="3"]{background:#dfebe2}
.detail-picker .detail-options>button[data-queue-distance="3"] .detail-thumb{opacity:.45;filter:saturate(.3)}
.detail-picker .detail-options>button[data-queue-distance="3"] strong{color:#647e6e}
.detail-picker .detail-options>button.active{background:#153f30;border-color:#153f30;box-shadow:0 5px 16px #153f301a;color:#e5f6e9}
.detail-picker .detail-options>button.active:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:0 3px 3px 0;background:#a8efc2}
.detail-picker .detail-options>button.active strong{color:#f1fcf4;font-weight:700}
.detail-picker .detail-options>button.active small{color:#b3d8c0}
.detail-picker .detail-options>button.active .detail-thumb{opacity:1;filter:none;box-shadow:0 0 0 1px #c5f0d64d}
.detail-picker .detail-options>button:hover:not(.active),.detail-picker .detail-options>button:focus-visible:not(.active){background:#f4faf5;border-color:#9bbbA7;box-shadow:0 2px 8px #153f3008}
.detail-picker .detail-options>button:hover .detail-thumb,.detail-picker .detail-options>button:focus-visible .detail-thumb{opacity:1;filter:none}
.detail-picker .detail-options>button>b{font-size:17px;color:#92aa9a;font-weight:400}
.detail-picker .detail-options>button.active>b{font-size:0;display:flex;gap:3px;align-items:center;width:17px;height:19px;color:#a8efc2}
.detail-picker .detail-options>button.active>b:before,.detail-picker .detail-options>button.active>b:after{content:"";display:block;width:3px;border-radius:2px;background:currentColor}
.detail-picker .detail-options>button.active>b:before{height:9px;box-shadow:6px -3px 0 currentColor}
.detail-picker .detail-options>button.active>b:after{height:18px;margin-left:6px}
@media(max-width:720px){.detail-picker{padding:12px 10px 10px;border-radius:10px}.detail-picker .detail-options>button{padding:12px 13px}.detail-picker .detail-options>button strong{font-size:13px}.detail-picker .detail-options>button>b{display:block}}

/* Five complete rows at desktop; three legible rows on small screens. */
.detail-picker .detail-options{grid-auto-rows:var(--detail-row-height,96px);scroll-snap-type:y mandatory}
.detail-picker .detail-options>button{height:var(--detail-row-height,96px);min-height:0;scroll-snap-align:start;scroll-snap-stop:always}

/* Five floating covers, not a boxed tab list. */
.detail-picker{background:transparent;border:0;border-radius:0;padding:0;overflow:visible;gap:8px}
.detail-picker-head{padding:0 10px 14px;border:0;color:#718b7c}
.detail-picker .detail-options{display:block;position:relative;overflow:visible;padding:0;scroll-snap-type:none;scroll-behavior:auto;isolation:isolate}
.detail-picker .detail-options>button{position:absolute;left:0;top:50%;width:100%;height:112px;min-height:0;margin:0;padding:20px 24px;display:flex;align-items:center;gap:20px;border:1px solid #b7d2c1;border-radius:9px;background:#f2f7f1;transform-origin:center;translate:0 -50%;transform:translateY(var(--queue-y,0px)) scale(var(--queue-scale,1));opacity:var(--queue-opacity,1);z-index:var(--queue-z,1);box-shadow:0 3px 0 #c8ded0;transition:transform .42s cubic-bezier(.22,.7,.25,1),opacity .32s,background .25s,box-shadow .3s;will-change:transform,opacity;scroll-snap-align:none}
.detail-picker .detail-options>button[data-queue-offset="0"]{--queue-y:0px;--queue-scale:1;--queue-opacity:1;--queue-z:5;box-shadow:0 18px 35px #183e3221,0 0 0 5px #dce9e0;background:#153f30}
.detail-picker .detail-options>button[data-queue-offset="-1"]{--queue-y:-88px;--queue-scale:.88;--queue-opacity:.62;--queue-z:4}
.detail-picker .detail-options>button[data-queue-offset="1"]{--queue-y:88px;--queue-scale:.88;--queue-opacity:.62;--queue-z:4}
.detail-picker .detail-options>button[data-queue-offset="-2"]{--queue-y:-151px;--queue-scale:.77;--queue-opacity:.32;--queue-z:3}
.detail-picker .detail-options>button[data-queue-offset="2"]{--queue-y:151px;--queue-scale:.77;--queue-opacity:.32;--queue-z:3}
.detail-picker .detail-options>button.queue-hidden{visibility:hidden;opacity:0;pointer-events:none;--queue-scale:.7}
.detail-picker .detail-options>button:not(.active):hover,.detail-picker .detail-options>button:not(.active):focus-visible{transform:translateY(var(--queue-y,0px)) scale(calc(var(--queue-scale,1) + .025));background:#f9fcf7;box-shadow:0 6px 18px #183e3212}
.detail-picker .detail-options>button .detail-thumb{width:50px;height:50px;opacity:1;filter:none;border-radius:5px}
.detail-picker .detail-options>button strong{font-size:15px;color:#416554}
.detail-picker .detail-options>button small{font-size:11px;color:#6e8a77}
.detail-picker .detail-options>button.active:before{top:24px;bottom:24px}
@media(max-width:1050px) and (min-width:721px){.detail-picker .detail-options>button{padding:16px;gap:14px}.detail-picker .detail-options>button strong{font-size:13px}}
@media(max-width:720px){.detail-picker{height:370px;max-height:var(--detail-height,500px);padding:0;gap:0}.detail-picker-head{font-size:9px;padding:0 6px 8px}.detail-picker .detail-options>button{height:82px;padding:14px 16px;gap:14px}.detail-picker .detail-options>button strong{font-size:13px}.detail-picker .detail-options>button small{font-size:10px}.detail-picker .detail-options>button .detail-thumb{width:40px;height:40px}.detail-picker .detail-options>button[data-queue-offset="-1"]{--queue-y:-66px}.detail-picker .detail-options>button[data-queue-offset="1"]{--queue-y:66px}.detail-picker .detail-options>button[data-queue-offset="-2"]{--queue-y:-113px}.detail-picker .detail-options>button[data-queue-offset="2"]{--queue-y:113px}.detail-picker .detail-options>button.active:before{top:17px;bottom:17px}}
@media(prefers-reduced-motion:reduce){.detail-picker .detail-options>button{transition:none;will-change:auto}}

/* Align both visual columns, with no empty first-selection half. */
.detail-board{grid-template-columns:minmax(0,480px) minmax(0,480px);justify-content:center;gap:64px}
.detail-art>button{max-width:none;width:100%}
.detail-description{max-width:none}
.detail-art{gap:20px}
.detail-picker{position:relative;height:var(--detail-height,480px);gap:0;margin:0}
.detail-picker-head{position:absolute;bottom:-30px;left:0;right:0;padding:0 4px;font-size:10px}
.detail-picker .detail-options{height:100%;flex:none;width:100%}
.detail-picker .detail-options>button{height:104px;padding:18px 22px}
.detail-picker .detail-options>button[data-queue-offset="-1"]{--queue-y:-78px}
.detail-picker .detail-options>button[data-queue-offset="1"]{--queue-y:78px}
.detail-picker .detail-options>button[data-queue-offset="-2"]{--queue-y:-139px}
.detail-picker .detail-options>button[data-queue-offset="2"]{--queue-y:139px}
.detail-picker .detail-options>button>b{display:none!important}
.detail-section .section-heading{margin-bottom:32px}
@media(max-width:1050px) and (min-width:721px){.detail-board{gap:36px}.detail-picker .detail-options>button{height:90px;padding:14px 16px;gap:12px}.detail-picker .detail-options>button[data-queue-offset="-1"]{--queue-y:-67px}.detail-picker .detail-options>button[data-queue-offset="1"]{--queue-y:67px}.detail-picker .detail-options>button[data-queue-offset="-2"]{--queue-y:-119px}.detail-picker .detail-options>button[data-queue-offset="2"]{--queue-y:119px}}
@media(max-width:720px){.detail-board{gap:44px}.detail-picker{height:340px;max-height:none}.detail-picker-head{bottom:-22px;font-size:9px}.detail-picker .detail-options>button{height:82px;padding:14px 16px;gap:14px}.detail-picker .detail-options>button[data-queue-offset="-1"]{--queue-y:-62px}.detail-picker .detail-options>button[data-queue-offset="1"]{--queue-y:62px}.detail-picker .detail-options>button[data-queue-offset="-2"]{--queue-y:-108px}.detail-picker .detail-options>button[data-queue-offset="2"]{--queue-y:108px}.detail-art>button{max-width:390px}.detail-description{max-width:390px}}
.detail-section>.wrap{max-width:1120px}
.detail-art>button{transform:none!important;will-change:auto}

/* Preserve original outfit and blend the source edge into the hero. */
.stage-slides .stage-avatar[data-stage-image]{mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}

/* Closing campaign: typography, portrait and a single strong accent. */
.home-finale{padding-block:48px 56px!important}
.finale-panel{position:relative;isolation:isolate;min-height:530px;grid-template-columns:1fr 1fr;background:#091b15;overflow:hidden;border-radius:4px;border:1px solid #173f32}
.finale-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 40%,#387c544d,transparent 56%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#b5f1ce0a 25%);pointer-events:none}
.finale-campaign{position:absolute;inset:30px 24px auto auto;width:55%;z-index:0;pointer-events:none}
.finale-campaign>span{display:block;color:#9cb8a5;font-size:9px;letter-spacing:.25em;margin-bottom:15px;text-align:right}
.finale-campaign strong{display:block;font-size:clamp(78px,9vw,142px);line-height:.82;font-weight:900;letter-spacing:-.08em;color:#b8f3c925;white-space:nowrap}
.finale-campaign i{font-style:normal;color:transparent;-webkit-text-stroke:1px #b8f3c959}
.finale-copy{position:relative;z-index:3;padding:62px 0 36px 48px;align-self:center}
.finale-copy .eyebrow{display:flex;align-items:center;gap:9px;color:#baf3cc;letter-spacing:.18em;font-size:10px}
.finale-live-dot{width:6px;height:6px;border-radius:50%;background:#bbf4cc;box-shadow:0 0 12px #baf3cc}
.finale-copy h2{font-size:clamp(34px,3.7vw,54px)!important;line-height:1.24;letter-spacing:-.055em;margin-top:28px}
.home-finale .finale-copy p{max-width:350px;font-size:14px;line-height:1.9;margin:22px 0 28px;color:#a2b9aa}
.finale-actions{align-items:center;gap:22px}.finale-actions .primary{border-radius:3px;background:#c0f8d0;padding:17px 22px;box-shadow:none;font-size:13px}
.finale-meta{margin-top:34px;padding-top:18px;max-width:410px;color:#86a58f}
.finale-visual{position:absolute;inset:0 0 0 44%;background:transparent;min-height:0;z-index:1;overflow:visible}
.finale-visual img{height:115%;width:auto;max-width:none;left:45%;top:10%;object-fit:contain;transform:translateX(-50%);opacity:1;mask-image:linear-gradient(#000 0%,#000 75%,transparent 99%)}
.finale-visual:after{background:linear-gradient(90deg,#091b15,transparent 20%),linear-gradient(0deg,#091b15,transparent 22%)}
.finale-orbit{position:absolute;width:400px;height:400px;border:1px solid #a8e8bd33;border-radius:50%;left:8%;top:15%;transform:rotate(-20deg) scaleX(1.25)}
.finale-sticker{position:absolute;z-index:3;right:25px;top:51%;padding:17px 20px;background:#c0f8d0;color:#123522;font-size:13px;line-height:1.25;font-weight:800;letter-spacing:-.03em;transform:rotate(8deg);box-shadow:5px 5px 0 #03120b66}.finale-sticker b{font-size:26px;display:block;text-align:right}
.finale-visual-label{z-index:4;bottom:26px;right:26px;color:#a1b6a7;font-size:8px}
@media(min-width:1800px){.finale-panel{min-height:570px}.finale-campaign strong{font-size:155px}}
@media(max-width:1050px) and (min-width:721px){.finale-copy{padding-left:32px}.finale-sticker{right:16px;font-size:11px}.finale-visual img{left:56%}.finale-campaign{width:50%}.finale-campaign strong{font-size:90px}.finale-actions{gap:14px;flex-wrap:wrap}}
@media(max-width:720px){.finale-panel{min-height:760px;display:block}.finale-copy{padding:32px 26px 0}.finale-copy h2{font-size:36px!important}.finale-campaign{top:auto;bottom:38px;right:22px;width:90%}.finale-campaign strong{font-size:92px}.finale-campaign>span{display:none}.finale-meta{margin-top:24px}.finale-visual{inset:auto 0 0 0;height:350px}.finale-visual img{height:130%;left:52%;top:0}.finale-visual:after{background:linear-gradient(0deg,#091b15,transparent 22%)}.finale-orbit{width:250px;height:250px;left:15%;top:10%}.finale-sticker{top:42%;right:20px;font-size:11px;padding:12px 15px}.finale-visual-label{bottom:16px;right:20px;font-size:7px}.finale-actions{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:no-preference){.finale-sticker{animation:finale-sticker-drift 7s ease-in-out infinite}@keyframes finale-sticker-drift{50%{transform:translateY(-7px) rotate(5deg)}}}

/* Give the opening and ending distinct portraits. */
.stage-slides .stage-original-silver{height:min(100%,1000px);left:74%;top:43%;translate:-72.4% -32.4%;mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}
@media(max-width:720px){.stage-slides .stage-original-silver{height:72%;left:62%;top:70%}}
/* Remove hard vertical overlay seams beside the campaign lettering. */
.finale-panel:before{background:radial-gradient(ellipse at 80% 40%,#387c544d,transparent 56%)}
.finale-visual:after{background:linear-gradient(0deg,#091b15,transparent 22%)}
.finale-campaign strong{padding:3px 6px 8px;overflow:visible}
/* Match the opening silver portrait's head scale to the gold portrait. */
.stage-slides .stage-original-silver{height:min(116%,1160px);left:74%;top:41%;translate:-72.4% -32.4%}
@media(max-width:720px){.stage-slides .stage-original-silver{height:83.5%;left:62%;top:68%}}

/* Stable carousel controls: no content-dependent width or moving hit targets. */
.stage-switcher{display:grid;grid-template-columns:40px 40px minmax(0,1fr) 40px;gap:8px;width:330px;height:58px;padding:8px 10px;z-index:5;transform:none;translate:none}
.stage-switcher button{width:40px;height:40px;min-width:40px;display:grid;place-items:center;flex:none;transform:none!important;transition:background .2s,border-color .2s;color:#bad1c3}
.stage-switcher>span{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;font-size:8px;letter-spacing:.06em}
.stage-switcher #stage-pause{border:1px solid #ffffff25;background:#ffffff06}
.stage-switcher #stage-pause:hover{background:#c4f1d622;border-color:#c4f1d6}
.play-glyph{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;margin-left:3px}
.pause-glyph{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
@media(max-width:720px){.stage-switcher{width:min(330px,calc(100% - 48px));height:58px;padding:8px 10px;grid-template-columns:40px 40px minmax(0,1fr) 40px;bottom:62px;left:24px;right:auto}.stage-switcher button{width:40px;height:40px}.stage-switcher>span{font-size:7px;min-width:0}}

/* Scroll comparison: identical image geometry, opacity-only transition. */
.ingame-comparison-scene .ingame-before-layer{z-index:0;opacity:1}
.ingame-comparison-scene .ingame-after-layer{z-index:1;opacity:0;transition:opacity .75s cubic-bezier(.2,.7,.2,1)!important}
.ingame-comparison-scene.is-after .ingame-after-layer{opacity:1}
.ingame-comparison-scene .ingame-state{z-index:2}
@media(prefers-reduced-motion:reduce){.ingame-comparison-scene .ingame-after-layer{transition:none!important}}

/* Registered before/after layers: scroll controls opacity, never image size. */
.unity-scene .scroll-before,.home-features .scroll-before{z-index:0;pointer-events:none}
.unity-scene .scroll-after,.home-features .scroll-after{z-index:1;transition:opacity .12s linear!important}
.home-features .scroll-before,.home-features .scroll-after{position:absolute!important}
@media(prefers-reduced-motion:reduce){.unity-scene .scroll-after,.home-features .scroll-after{transition:none!important}}

/* Community collective: editorial type with restrained Y2K chrome accents. */
#home .home-community{position:relative;isolation:isolate;overflow:hidden;background:#09251d;border-block:1px solid #b9edcb25}
.community-story{position:relative;z-index:1;grid-template-columns:.85fr 1.2fr;gap:55px;padding-block:105px 100px;align-items:center}
.community-deco{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 78% 44%,#77b89b22,transparent 54%)}
.community-word{position:absolute;right:5%;top:25px;font-family:Georgia,serif;font-size:clamp(68px,8.5vw,138px);line-height:.85;letter-spacing:-.07em;color:#cef1de15}
.community-word i{font-weight:400;font-style:italic;color:transparent;-webkit-text-stroke:1px #c1e4d833}
.community-star{position:absolute;left:44%;top:17%;font-size:90px;line-height:1;background:linear-gradient(140deg,#f7fff9 10%,#7d9b8e 30%,#e2f9ed 47%,#789b8b 56%,#c7f2d5 80%);background-clip:text;color:transparent;transform:rotate(12deg)}
.community-orbit{position:absolute;right:-70px;top:24%;width:740px;height:320px;border:1px solid #c8edda2b;border-radius:50%;transform:rotate(-22deg)}
#home .home-community h2{font-size:clamp(44px,4.6vw,66px);line-height:1.28;letter-spacing:-.065em}
#home .home-community h2 em{color:#b9f3d0}
.community-story>.reveal>p{font-size:14px;line-height:1.95;max-width:340px;color:#adccba}
.community-story .primary{border-radius:3px;background:#bdf4d1;color:#143f2e;padding:15px 23px;box-shadow:4px 4px 0 #bdedce22}
.community-story .eyebrow{font-size:10px;letter-spacing:.2em}
.community-story .story-signature{border-top:1px solid #c8ead52b;padding-top:20px;max-width:320px;margin-top:28px}
.look-pair{position:relative;gap:0;align-items:center;padding:50px 0 25px;min-width:0}
.look-card{position:relative;flex:1;min-width:0;border-radius:3px;border:5px solid #dcece4;background:#dcece4;box-shadow:0 20px 45px #0005}
.look-one{z-index:2;margin-right:-22px;transform:translateY(calc(-15px + var(--travel,0) * 14px)) rotate(-8deg)}
.look-two{z-index:1;transform:translateY(calc(22px - var(--travel,0) * 14px)) rotate(7deg)}
.look-card img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.look-card span{padding:9px 7px;color:#35624d;font-size:8px;letter-spacing:.05em}
.community-sticker{position:absolute;z-index:4;left:32%;bottom:0;padding:15px 20px;background:#c7f6d5;color:#153c2c;transform:rotate(-7deg);font-family:var(--font-ui);font-size:12px;font-weight:800;line-height:1.2;box-shadow:4px 5px 0 #0004}
.community-sticker b{display:block;text-align:right;font-size:24px;line-height:1;margin-top:6px}
.community-catalog{position:absolute;z-index:4;right:5px;top:3px;font-size:9px;letter-spacing:.15em;line-height:1.7;color:#b3d4c0;text-align:right}
@media(max-width:1050px){.community-story{gap:30px;grid-template-columns:.9fr 1.1fr}.community-star{left:42%;font-size:60px}.community-sticker{font-size:10px;left:28%}}
@media(max-width:720px){.community-story{grid-template-columns:1fr;gap:30px;padding-block:55px 65px}.community-word{font-size:82px;right:-12px;top:30px}.community-star{left:auto;right:18px;top:27%;font-size:56px}.community-orbit{width:450px;height:230px;top:60%;right:-110px}#home .home-community h2{font-size:43px}.look-pair{max-width:430px;width:100%;padding:35px 7px 45px;margin:auto}.look-one{margin-right:-14px}.community-catalog{top:0;font-size:8px}.community-sticker{bottom:9px;left:29%;font-size:10px;padding:12px 15px}.community-story .story-signature{margin-top:24px}}
/* Gentle motion cues: hit areas remain stable. */
.look-card{transition:box-shadow .25s,border-color .25s}
.look-card:hover,.look-card:focus-visible{border-color:#bdf4d1;box-shadow:0 24px 55px #0006,0 0 0 2px #bdf4d155}
.look-card img,.proof-poster img,.detail-art>button img{transition:filter .3s ease}
.look-card:hover img,.proof-poster:hover img,.detail-art>button:hover img{filter:brightness(1.07)}
.community-story .primary,.finale-actions .primary{position:relative;overflow:hidden}
.community-story .primary:after,.finale-actions .primary:after{content:"↗";display:inline-block;margin-left:14px;transition:translate .25s}
.community-story .primary:hover:after,.community-story .primary:focus-visible:after,.finale-actions .primary:hover:after,.finale-actions .primary:focus-visible:after{translate:2px -2px}
.finale-actions .primary:after{content:none}
.finale-actions .primary>span,.top-link>span{display:inline-block;transition:translate .25s}
.finale-actions .primary:hover>span,.top-link:hover>span{translate:2px -2px}
.proof-poster>span b{display:inline-block;transition:rotate .3s}
.proof-poster:hover>span b,.proof-poster:focus-visible>span b{rotate:90deg}
.compare-controls button{transition:background .2s,border-color .2s,box-shadow .2s}
.compare-controls button:hover{box-shadow:0 0 0 3px #179b8b12}
.stage-switcher button{position:relative}
.stage-switcher button:hover,.stage-switcher button:focus-visible{box-shadow:inset 0 0 0 1px #c4f1d6,0 0 10px #c4f1d61a}
@media(prefers-reduced-motion:no-preference){
.community-star{animation:community-star-float 8s ease-in-out infinite}
.community-sticker{animation:community-sticker-float 6s ease-in-out infinite}
.community-story .story-signature img{animation:brand-bob 7s ease-in-out infinite}
.finale-live-dot{animation:live-glow 3.5s ease-in-out infinite}
@keyframes community-star-float{50%{transform:translateY(-8px) rotate(22deg)}}
@keyframes community-sticker-float{50%{transform:translateY(-5px) rotate(-4deg)}}
@keyframes brand-bob{50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes live-glow{50%{box-shadow:0 0 3px #baf3cc;opacity:.6}}
}
@media(prefers-reduced-motion:reduce){.look-card,.look-card img,.proof-poster img,.detail-art>button img,.compare-controls button{transition:none}.community-star,.community-sticker,.story-signature img,.finale-live-dot{animation:none!important}}