/* One portrait field, six sections, native document scrolling. */
body.home-active{--home-top:78px;--home-left:206px;--home-nav-height:0px}
body.home-active .topbar{position:sticky;top:var(--home-nav-height);z-index:30;background:#0c0b12f5;backdrop-filter:blur(16px)}
body.home-active>.sidebar{z-index:40}
#homeView{--home-reveal:0;--home-height:calc(100svh - var(--home-top,78px));position:relative;isolation:isolate;max-width:none;padding:0;margin:0}
.home-section{position:relative;z-index:2;min-height:var(--home-height);padding:clamp(60px,8vh,110px) clamp(28px,5vw,100px) 96px;scroll-margin-top:var(--home-top,78px)}
.home-backdrop{position:fixed;inset:var(--home-top,78px) 0 0 var(--home-left,206px);z-index:0;overflow:hidden;background:#08070d;pointer-events:none;isolation:isolate}
.kol-wall-stage{position:absolute;inset:0;overflow:hidden;opacity:1;transform:none}
.kol-wall-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#100b1888,transparent 25%,transparent 75%,#100b1877),linear-gradient(90deg,#100b1844,transparent 30%,transparent 70%,#100b1844)}
/* Overscan the masked blur inside its clipped parent to cover fractional device pixels. */
.home-glass{--glass-tail:240px;position:absolute;inset:0 -2px auto;height:calc(100% + var(--glass-tail));pointer-events:none;background:linear-gradient(115deg,#090612eb,#110a1ee0 55%,#0b0716db);backdrop-filter:blur(6px);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--glass-tail)),#000d calc(100% - var(--glass-tail)*.55),transparent 100%);transform:translateY(var(--glass-offset,0px));will-change:transform}
/* Anchor rows to the viewport so adding a row cannot shift the whole wall. */
.kol-wall{position:absolute;left:-15%;top:-60px;width:130%;display:flex;flex-direction:column;gap:18px;transform:rotate(-7deg);transform-origin:50% 0}
.kol-marquee-row{width:100%;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.portraits-revealed .kol-marquee-row,.portraits-revealed .kol-portrait{cursor:grab}
.kol-marquee-row.is-dragging,.kol-marquee-row.is-dragging .kol-portrait{cursor:grabbing}
.kol-marquee-row:is(.is-dragging,.is-gliding) .kol-marquee-track{animation-play-state:paused}
.kol-marquee-row.is-dragging .kol-portrait{animation-play-state:paused}.kol-marquee-track{display:flex;width:max-content;animation:kol-drift 95s linear infinite;animation-delay:calc(var(--row-phase,0) * -95s);will-change:transform}
.kol-marquee-row:nth-child(even) .kol-marquee-track{animation-direction:reverse;animation-duration:115s;animation-delay:calc(var(--row-phase,0) * -115s)}
.kol-marquee-row:nth-child(3n) .kol-marquee-track{animation-duration:105s;animation-delay:calc(var(--row-phase,0) * -105s)}
.kol-marquee-group{display:flex;gap:18px;padding-right:18px;flex-shrink:0;min-width:calc((100vw - var(--home-left,206px))*1.3);justify-content:space-around}
.kol-portrait{position:relative;display:block;flex-shrink:0;width:190px;height:190px;aspect-ratio:1;border:0;border-radius:18px;overflow:visible;background:transparent;box-shadow:none;transition:border-color .2s;--portrait-tilt:0deg;transform:rotate(var(--portrait-tilt));animation:kol-float var(--portrait-duration,6s) ease-in-out var(--portrait-delay,0s) infinite}
.kol-portrait:nth-child(3n){--portrait-tilt:3deg}.kol-portrait:nth-child(3n + 1){--portrait-tilt:-3deg}
.kol-portrait:focus-visible{outline:3px solid #f4eaff;outline-offset:-4px}
.kol-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kol-portrait-initial{display:grid;place-items:center;height:100%;font:36px 'Space Grotesk',sans-serif;color:#e1c5ff}
.kol-portrait-name{position:absolute;inset:auto 0 0;padding:25px 12px 10px;background:linear-gradient(transparent,#10091cf0);font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.kol-window.is-inactive .kol-portrait,.kol-window.is-paused .kol-portrait{animation-play-state:paused}
.home-view.portraits-revealed .home-backdrop{pointer-events:auto}
.home-final-actions{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.home-motion-control{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:5;visibility:hidden;pointer-events:none}.portraits-revealed .home-motion-control{visibility:visible;pointer-events:auto}
.home-motion-control button{display:grid;place-items:center;width:var(--home-action-height,50px);height:var(--home-action-height,50px);padding:0;background:transparent;border:0;border-radius:8px;color:#f5efff;box-shadow:none;transition:color .18s}
.home-motion-control button:not(:disabled):is([data-motion-hover],[data-motion-press]){color:#d5b5ff}
.home-motion-control button:not(:disabled):is([data-motion-hover],[data-motion-press]) svg{transform:scale(1.08)}
.home-motion-control button svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px #08040db3);transition:transform .18s}
@media(prefers-reduced-motion:reduce){.home-motion-control button svg{transition:none}}
.home-motion-control button:disabled{color:#d0c5da}
.home-hero{display:flex;align-items:center;justify-content:center;text-align:center}
.home-intro{position:relative;max-width:900px;padding:20px 0}
.home-intro .eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:2.2px;color:#d0b4f3}
.home-intro h1{font-size:clamp(54px,6.8vw,106px);line-height:1.02;font-weight:600;letter-spacing:-4px;margin:28px 0 24px;color:#f5efff;text-shadow:0 4px 40px #09070f80}
.home-intro h1>span:not(.pop-word){color:#c4a5ff}
.home-intro h1>.pop-word{color:#f5efff}
.home-intro h1>span:not(.pop-word) .pop-word{background:linear-gradient(110deg,#e0cfff,#b78afc);background-clip:text;-webkit-text-fill-color:transparent}
.home-intro>p{max-width:490px;margin:auto;color:#c8bdd5;font-size:18px;line-height:1.8}
.home-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px;margin:30px 0}
.home-view .primary{min-height:50px;padding:14px 23px;gap:16px;background:#c4a5ff;color:#1b102e;border:1px solid #dac5ff;font-size:13px;box-shadow:0 4px 32px #ac74fa20}
.home-view .primary:hover{background:#e0cbff}.home-secondary{display:flex;gap:13px;align-items:center;font-size:13px;color:#e2d6ee;min-height:44px}
.home-credits,.home-credit-platforms{display:flex;align-items:center;justify-content:center;gap:24px}
.home-signature{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.1px;color:#b19ec4;min-height:26px;white-space:nowrap}
.home-signature .solana-mark{width:17px}.meteora-mark{display:block;flex-shrink:0;object-fit:contain}.home-signature .meteora-mark{width:26px;height:26px;margin-left:-4px;margin-right:-5px}
.home-scroll-cue{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;min-width:120px;min-height:48px;font-size:11px;letter-spacing:.8px;color:#d1b8e9}
.scroll-arrow{display:block;font-size:42px;line-height:1;animation:home-cue 2.2s ease-in-out infinite}.home-scroll-cue:hover{color:#fff}
.home-story{position:relative;z-index:2;scroll-margin-top:var(--home-top,78px)}
.story-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.story-copy{max-width:470px;justify-self:center;width:100%}
.story-scene:nth-of-type(even) .story-copy{grid-column:2;grid-row:1}.story-scene:nth-of-type(even) .story-art{grid-column:1;grid-row:1}
.story-index{display:flex;align-items:center;gap:18px;font:16px 'Space Grotesk',sans-serif;color:#dcc4fa}.story-index>span{font:10px 'DM Sans',sans-serif;letter-spacing:2px;color:#c0a6d7}
.story-copy h3{font-size:clamp(32px,4vw,62px);font-weight:500;line-height:1.07;letter-spacing:-1.8px;margin:24px 0}
.story-copy>p{color:#d0c2dd;font-size:16px;line-height:1.85;max-width:440px}
.story-detail{display:inline-block;margin-top:24px;font-size:12px;color:#ddbbff;line-height:1.7}
.story-art{position:relative;min-width:0;width:100%;max-width:520px;justify-self:center;height:360px;border:1px solid #a17bce4d;border-radius:28px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 55%,#8851bd44,transparent 70%),#1b1125bd;box-shadow:0 30px 90px #09041155,inset 0 1px #ffffff0a;backdrop-filter:blur(12px)}
/* Scroll activates a choreographed sequence: word focus, then separate pieces. */
.pop-word{display:inline-block;transform-origin:50% 60%}
.pop-ready [data-pop-item],.pop-ready[data-pop-item],.pop-ready .pop-word{opacity:0}
.pop-active [data-pop-item],.pop-active[data-pop-item]{animation:persona-piece-pop .72s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--pop-delay,0ms)}
.pop-active .pop-word{animation:persona-word-pop .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--pop-delay,0ms) + var(--word-delay,0ms))}
.pop-ready [data-pop-item]:has(:focus-visible),.pop-ready [data-pop-item]:focus-visible,.pop-ready a:focus-visible,.pop-ready [data-pop-text]:has(:focus-visible) .pop-word{opacity:1;animation:none;filter:none;scale:1}
@keyframes persona-word-pop{0%{opacity:0;filter:blur(7px);scale:.84}65%{opacity:1;filter:blur(0);scale:1.025}100%{opacity:1;filter:blur(0);scale:1}}
@keyframes persona-piece-pop{0%{opacity:0;filter:blur(5px);scale:.62}68%{opacity:1;filter:blur(0);scale:1.045}100%{opacity:1;filter:blur(0);scale:1}}
.home-section.home-create{padding-inline:24px}
.home-create{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;pointer-events:none;padding-top:42px;padding-bottom:44px;gap:28px}

.home-create h2{font-size:clamp(32px,3.4vw,48px);font-weight:500;letter-spacing:-1.2px;line-height:1.18;margin:0;color:#f3e9ff;text-shadow:0 4px 30px #10071888;}
.home-view .home-create .primary{pointer-events:auto;color:#fff;background:var(--glass-panel-background);border-color:var(--glass-panel-border);backdrop-filter:var(--glass-panel-filter);-webkit-backdrop-filter:var(--glass-panel-filter);box-shadow:var(--glass-panel-shadow);text-shadow:none}
.home-view .home-create .primary:hover{background:rgba(39,28,52,.82);border-color:rgba(185,152,210,.55)}
.kol-wall-empty{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:13px;line-height:1.5;color:#e6d7f5;background:#181020de;border:1px solid #b996d733;box-shadow:0 8px 24px #09061126;backdrop-filter:blur(10px);padding:12px 18px;border-radius:18px;max-width:min(350px,100%);margin:auto}
.kol-wall-empty button{min-height:36px;padding:5px 8px;color:#d7b9fa}
@keyframes kol-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes kol-float{0%,100%{transform:translateY(-2px) rotate(calc(var(--portrait-tilt) - .8deg))}50%{transform:translateY(2px) rotate(calc(var(--portrait-tilt) + .8deg))}}
@keyframes home-cue{0%,100%{transform:translateY(-3px);opacity:.75}50%{transform:translateY(9px);opacity:1}}

.wallet-ready{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #3e304c;border-radius:12px;background:#16101d;max-width:860px;margin:0 auto 34px}
.wallet-ready[hidden]{display:none}
.wallet-ready-icon{font-size:26px;color:#b99bd9;flex-shrink:0}
.wallet-ready>div{flex:1;min-width:0}.wallet-ready strong{font-size:12px;font-weight:500;color:#dfd0ed}
.wallet-ready p{font-size:12px;line-height:1.65;color:#a798b3;margin:5px 0 0}
.wallet-ready button{flex-shrink:0;font-size:12px;min-height:44px;color:#d0b4ee}
.wallet-ready[data-state="connected"]{border-color:#385448}
.wallet-ready-compact{margin:0 0 24px;padding:12px 16px;gap:12px}.wallet-ready-compact .wallet-ready-icon{font-size:21px}

.art-caption{position:absolute;top:23px;left:24px;right:24px;text-align:center;font-size:10px;font-weight:500;letter-spacing:1.4px;color:#c3aed4}
.persona-orbit,.coin-orbit{position:absolute;width:240px;height:240px;border:1px solid #af7ee72b;border-radius:50%;left:calc(50% - 120px);top:50px}
.identity-tile{position:absolute;left:calc(50% - 58px);top:92px;width:116px;height:140px;border:1px solid #a77fd0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(145deg,#593876,#251733);box-shadow:0 16px 32px #0004;color:#e2c8ff}
.tile-main{transform:rotate(-5deg)}.tile-main>span:last-child{font-size:12px}.identity-symbol{font-size:54px}.tile-back{transform:translate(-90px,10px) rotate(-18deg);background:#21172e;color:#806093;font-size:42px;border-color:#594068}.tile-side{transform:translate(90px,10px) rotate(18deg);background:#271a34;color:#9e79b4;font-size:42px;border-color:#594068}
.art-chip{position:absolute;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;border:1px solid #614475;background:#21152eef;border-radius:10px;font-size:12px;font-weight:500;color:#eee2f7;box-shadow:0 8px 22px #0003;white-space:nowrap}
.art-chip i{height:6px;width:6px;background:#a9d9bf;border-radius:50%}.recipient-chip{bottom:36px;left:50%;transform:translateX(-50%)}
.story-token{position:absolute;left:calc(50% - 63px);top:87px;width:126px;height:126px;border-radius:50%;border:6px double #d5b5f1;background:linear-gradient(135deg,#ad7dde,#53376e);display:grid;place-items:center;font-size:65px;color:#eddbff;box-shadow:0 12px 48px #ae70df22,inset 0 0 20px #e7c4ff30}
.orbit-a{transform:rotateX(58deg) rotate(-25deg)}.orbit-b{transform:rotateY(58deg) rotate(25deg)}.coin-chip{top:198px;left:50%;transform:translateX(-50%);gap:18px}.coin-chip span{font-size:10px;color:#d2bddf;letter-spacing:.8px}.approval-chip{bottom:26px;left:50%;transform:translateX(-50%);border:0;background:transparent;box-shadow:none;color:#d2bddf}
.story-reward-art{height:360px}.reward-source{position:absolute;top:66px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:500;color:#eee2f7;display:flex;gap:12px;align-items:center}.reward-source>span{font-size:24px}.reward-branches{position:absolute;top:100px;left:50%;height:28px;border-left:1px solid #9666b9}
.reward-destinations{position:absolute;left:50%;width:65%;max-width:280px;transform:translateX(-50%);top:128px;display:grid;grid-template-columns:1fr}.reward-tile{padding:20px 8px;text-align:center;border:1px solid #755091;background:linear-gradient(135deg,#362244,#21172e);border-radius:14px}.reward-tile>span{display:block;line-height:1.4;font-size:10px;font-weight:500;letter-spacing:1px;color:#d2bddf}.reward-tile strong{display:block;font:34px 'Space Grotesk',sans-serif;color:#e6c9ff;margin:12px 0 8px}.reward-tile strong>span{font-size:20px;color:#bca0d1}.reward-tile small{font-size:18px}.reward-tile p{font-size:12px;line-height:1.4;color:#d2bddf;margin:0}.reward-recipient{bottom:22px;left:50%;transform:translateX(-50%);padding:9px 13px}

/* Screen-sized chapters may expand when content or text zoom needs more room. */
@media(max-width:1100px){.home-section{padding-inline:36px}.story-scene{gap:30px}.story-copy h3{font-size:40px}.story-copy>p{font-size:15px}.home-intro h1{font-size:clamp(54px,8vw,82px)}}
@media(max-width:740px){body.home-active{--home-top:calc(var(--mobile-nav-height,64px) + var(--mobile-topbar-height,48px));--home-left:0px;--home-nav-height:var(--mobile-nav-height,64px)}body.home-active>.sidebar{position:sticky;top:0}.home-section{padding:40px 22px 86px}.home-intro{padding:8px 0}.home-intro h1{font-size:clamp(44px,9vw,68px);letter-spacing:-2.5px;margin:24px 0}.home-intro .eyebrow{font-size:9px;letter-spacing:1.4px}.home-intro>p{font-size:16px;max-width:370px}.home-actions{gap:22px;margin:25px 0}.home-credits,.home-credit-platforms{gap:18px}.home-signature{font-size:8px;letter-spacing:.6px}.home-view .primary{min-height:46px;font-size:12px;padding:12px 18px}.home-secondary{font-size:12px}.story-scene{grid-template-columns:1fr;align-content:center;gap:24px}.story-scene:nth-of-type(even) .story-copy,.story-scene:nth-of-type(even) .story-art{grid-column:auto;grid-row:auto}.story-copy{max-width:520px}.story-copy h3{font-size:32px;margin:16px 0}.story-copy>p{font-size:14px;line-height:1.75}.story-index{font-size:13px;gap:14px}.story-index>span{font-size:9px}.story-detail{font-size:11px;margin-top:14px}.story-art{height:280px}.art-caption{top:16px;font-size:10px}.identity-tile{top:63px;height:130px;width:110px;left:calc(50% - 55px)}.persona-orbit,.coin-orbit{top:24px;width:224px;height:224px;left:calc(50% - 112px)}.recipient-chip{bottom:27px}.story-token{top:58px;width:116px;height:116px;left:calc(50% - 58px)}.coin-chip{top:163px}.approval-chip{bottom:18px}.story-reward-art{height:285px}.reward-source{top:45px}.reward-branches{top:93px;height:22px}.reward-destinations{top:115px;left:14px;right:14px;gap:10px}.reward-tile{padding:15px 5px}.reward-tile strong{font-size:28px;margin:8px 0}.reward-recipient{bottom:15px;padding:7px 10px}.home-create h2{font-size:clamp(26px,7.2vw,32px);letter-spacing:-.8px}.home-scroll-cue{bottom:20px;font-size:10px}.kol-wall{gap:14px}.kol-marquee-group{gap:14px;padding-right:14px}.kol-portrait{border-radius:14px}.wallet-ready{flex-wrap:wrap;padding:16px;gap:10px}.wallet-ready>div{flex-basis:calc(100% - 40px)}.wallet-ready button{margin-left:36px;min-height:36px}}
@media(min-width:741px) and (orientation:portrait){.story-scene{grid-template-columns:1fr;align-content:center;gap:36px}.story-copy{max-width:520px}.story-scene:nth-of-type(even) .story-copy,.story-scene:nth-of-type(even) .story-art{grid-column:auto;grid-row:auto}.home-intro h1{font-size:80px}}
@media(max-height:650px){.home-hero{padding-top:30px;padding-bottom:80px}.home-intro h1{font-size:clamp(40px,7vw,62px);margin:16px 0}.home-intro>p{font-size:15px}.home-actions{margin:18px 0}.home-intro .eyebrow{font-size:9px}.home-create{padding-block:36px 85px}}
@media(prefers-reduced-motion:reduce){html:has(body.home-active){scroll-behavior:auto}.kol-marquee-track,.kol-portrait,.scroll-arrow{animation:none}.pop-word,[data-pop-item]{animation:none!important;opacity:1!important;filter:none!important;scale:1!important}}

/* Native snapping settles each chapter inside the persistent navigation. */
html:has(body.home-active){scroll-snap-type:y mandatory;scroll-padding-top:var(--home-top,78px)}
.home-section{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}
.home-story{scroll-margin-top:0}

@media(max-width:740px){.home-section.home-create{--home-action-height:46px;padding:24px 16px 38px}}
@media(max-width:360px){.home-create .primary{padding-inline:12px;gap:10px}}
@media(prefers-reduced-motion:reduce){.home-create h2{opacity:1;translate:none}}

@media(max-width:1100px){.kol-portrait{width:165px;height:165px}}
@media(max-width:740px){.kol-portrait{width:140px;height:140px}.home-glass{--glass-tail:180px}}

/* Persona reverse faces exist in HTML before the KOL request starts. */
.kol-portrait{perspective:850px;background:transparent}
.kol-placeholder{pointer-events:none}
.kol-card-turn{border-radius:inherit;position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(0deg)}
.kol-card-back,.kol-card-front{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;box-shadow:0 10px 30px #0005;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kol-card-back{transform:rotateY(0deg)}
.kol-card-back::after,.kol-directory-back::after,.kol-directory-placeholder::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(45deg,transparent 12%,#c6a2ed08 32%,#dcc6fb24 50%,#c6a2ed08 68%,transparent 88%);opacity:0;animation:kol-back-shimmer 2.8s linear calc(var(--shimmer-delay,0s) + var(--shimmer-row-offset,0s)) infinite}
/* Soft scattered phases keep loading organic without changing the flip order. */
.kol-portrait:nth-child(12n+1),#characterList>:nth-child(12n+1){--shimmer-delay:-0.18s}
.kol-portrait:nth-child(12n+2),#characterList>:nth-child(12n+2){--shimmer-delay:-1.72s}
.kol-portrait:nth-child(12n+3),#characterList>:nth-child(12n+3){--shimmer-delay:-0.83s}
.kol-portrait:nth-child(12n+4),#characterList>:nth-child(12n+4){--shimmer-delay:-2.41s}
.kol-portrait:nth-child(12n+5),#characterList>:nth-child(12n+5){--shimmer-delay:-1.19s}
.kol-portrait:nth-child(12n+6),#characterList>:nth-child(12n+6){--shimmer-delay:-0.46s}
.kol-portrait:nth-child(12n+7),#characterList>:nth-child(12n+7){--shimmer-delay:-2.08s}
.kol-portrait:nth-child(12n+8),#characterList>:nth-child(12n+8){--shimmer-delay:-1.43s}
.kol-portrait:nth-child(12n+9),#characterList>:nth-child(12n+9){--shimmer-delay:-2.64s}
.kol-portrait:nth-child(12n+10),#characterList>:nth-child(12n+10){--shimmer-delay:-0.99s}
.kol-portrait:nth-child(12n+11),#characterList>:nth-child(12n+11){--shimmer-delay:-1.94s}
.kol-portrait:nth-child(12n+12),#characterList>:nth-child(12n+12){--shimmer-delay:-0.64s}
.kol-marquee-row:nth-child(3n+2){--shimmer-row-offset:-.77s}
.kol-marquee-row:nth-child(3n){--shimmer-row-offset:-1.61s}
.kol-portrait.shimmer-done .kol-card-back::after,.kol-portrait-card.shimmer-done .kol-directory-back::after{animation:none;opacity:0}
.kol-window:is(.is-inactive,.is-paused) .kol-card-back::after{animation-play-state:paused}
@keyframes kol-back-shimmer{0%{transform:translate3d(-100%,100%,0);opacity:0}18%,72%{opacity:1}100%{transform:translate3d(100%,-100%,0);opacity:0}}
@media(prefers-reduced-motion:reduce){.kol-card-back::after,.kol-directory-back::after,.kol-directory-placeholder::after{animation:none!important;opacity:0}}
.kol-card-front{background:#21132f;transform:rotateY(180deg)}
.kol-portrait.is-face-up .kol-card-turn{transform:rotateY(180deg);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.kol-portrait.is-face-up .kol-card-turn{transition:none}}

/* A single, clear invitation to scroll on the welcome chapter. */
.home-hero{padding-bottom:140px}
.home-hero .home-credits{margin-top:32px}
.home-hero .home-scroll-cue{bottom:30px;gap:12px;min-width:180px;padding:8px 18px;font-size:18px;font-weight:600;letter-spacing:.4px;color:#eee2ff;text-shadow:0 0 24px #b786ff55;border-radius:16px}
.home-hero .scroll-arrow{font-weight:400;color:#c8a7ff}
.home-hero .home-scroll-cue:hover .scroll-arrow{color:#eee2ff}
.home-hero .home-scroll-cue:focus-visible{outline:2px solid #c4a5ff;outline-offset:5px}
@media(max-width:740px){.home-hero .home-scroll-cue{bottom:24px;font-size:17px}.home-hero .home-credits{margin-top:26px}}


/* Keep all content reachable if a chapter exceeds the available screen height. */
html:has(body.home-active.home-overflow){scroll-snap-type:none}
@media(max-width:740px){html:has(body.home-active){--home-top:calc(var(--mobile-nav-height,64px) + var(--mobile-topbar-height,48px))}}
@media(max-width:740px){
 .home-hero{padding:28px 22px 116px}
 /* Scope the override to the welcome title; the shared mobile h1 uses !important. */
 .home-intro #homeTitle{font-size:clamp(42px,11.2vw,64px)!important;line-height:1.04;letter-spacing:-2px;margin:22px 0}
 .home-intro>p{font-size:15px;line-height:1.65;max-width:330px}
 .home-hero .home-credits{margin-top:24px}
 .home-hero .home-scroll-cue{bottom:20px;font-size:16px;gap:8px}
 .story-scene{padding:24px 22px 100px;gap:20px}
 .story-copy h3{font-size:30px;line-height:1.1;margin:12px 0}
 .story-copy>p{margin:0;font-size:14px;line-height:1.6}
 .story-detail{margin-top:12px}
 .story-scene>.home-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);min-width:48px;min-height:48px;justify-content:center}
 .home-scroll-cue:focus-visible{outline:2px solid #c4a5ff;outline-offset:4px;border-radius:12px}
 .story-art{height:210px;border-radius:22px}
 .art-caption{top:12px}
 .persona-orbit,.coin-orbit{top:22px;width:168px;height:168px;left:calc(50% - 84px)}
 .identity-tile{top:42px;width:86px;height:106px;left:calc(50% - 43px);gap:6px;border-radius:15px}
 .identity-symbol{font-size:42px}
 .tile-back{transform:translate(-72px,8px) rotate(-18deg)}
 .tile-side{transform:translate(72px,8px) rotate(18deg)}
 .recipient-chip{bottom:14px;padding:9px 13px}
 .story-token{top:34px;width:100px;height:100px;left:calc(50% - 50px);font-size:52px}
 .coin-chip{top:125px;padding:9px 13px}
 .approval-chip{bottom:8px;padding:6px 10px}
 .story-reward-art{height:210px}
 .reward-source{top:32px;font-size:12px;gap:8px}
 .reward-source>span{font-size:20px}
 .reward-branches{top:60px;height:15px}
 .reward-destinations{top:75px;left:50%;right:auto;width:65%;gap:0}
 .reward-tile{padding:6px;border-radius:14px}
 .reward-tile strong{font-size:32px;line-height:1.2;margin:3px 0}
 .reward-recipient{bottom:10px;padding:6px 10px;font-size:11px}
}
@media(max-width:740px) and (max-height:700px){
 /* A denser portrait wall adds roughly one row without shrinking the page text. */
 .kol-portrait{width:112px;height:112px;border-radius:12px}
 .kol-wall{gap:10px}
 .kol-marquee-group{gap:10px;padding-right:10px}
 .home-hero{padding-top:20px;padding-bottom:110px}
 .home-intro #homeTitle{margin:18px 0}
 .home-hero .home-credits{margin-top:20px}
 .story-scene{padding-top:20px;padding-bottom:96px;gap:16px}
 .story-copy h3{font-size:28px;margin:10px 0}
 .story-detail{margin-top:8px}
 .story-art{height:196px}
 .identity-tile{top:34px;height:100px}
 .story-token{top:28px;width:92px;height:92px;left:calc(50% - 46px)}
 .coin-chip{top:113px}
 .reward-source{top:29px}
 .reward-branches{top:55px;height:13px}
 .reward-destinations{top:68px}
 .reward-recipient{bottom:8px;padding:4px 10px}
}

/* If startup fails or is unusually slow, show readable content without a late replay. */
html[data-home-motion="static"] #homeView .pop-word,html[data-home-motion="static"] #homeView [data-pop-item]{animation:none!important;opacity:1!important;filter:none!important;scale:1!important}


/* Large portrait tablets have room for a fuller scale than compact layouts. */
@media(min-width:741px) and (max-width:1100px) and (min-height:900px) and (orientation:portrait){
 .kol-portrait{width:clamp(190px,22vw,220px);height:clamp(190px,22vw,220px);border-radius:20px}
 .kol-portrait-name{font-size:12px}
 .home-create{--home-action-height:56px}
 .home-create h2{font-size:clamp(36px,4.2vw,44px)}
 .home-view .primary{min-height:56px;padding:16px 27px;font-size:15px}
 .home-intro h1{font-size:clamp(84px,9.5vw,100px)}
 .home-intro>p{font-size:20px;max-width:540px}
 .story-copy{max-width:580px}
 .story-copy h3{font-size:46px}
 .story-copy>p{font-size:18px;max-width:520px}
 .story-detail{font-size:14px}
}

.kol-directory-placeholder{position:relative}
#characterList[data-motion-active="false"] :is(.kol-directory-back,.kol-directory-placeholder)::after,
#characterList[data-motion-active="false"]>.kol-directory-placeholder::after,
#characterList>.kol-portrait-card[data-motion-visible="false"] .kol-directory-back::after{animation-play-state:paused}