@charset "UTF-8";
/* MOON OS — pastel-neon cyberpunk skin.
   The older stylesheets are loaded inside @layer legacy (see index.html), so every
   rule here wins without specificity fights. Colours come from the tokens below;
   layout that the legacy files change per breakpoint is left alone on purpose. */

@property --iris{syntax:'<percentage>';inherits:false;initial-value:0%}

body{
  --c-bg:#f3efff;--c-bg-2:#fbf9ff;
  --c-surface:rgba(255,255,255,.66);
  --c-border:rgba(108,82,214,.22);--c-border-strong:rgba(108,82,214,.46);
  --c-text:#261f4d;--c-muted:#635b88;
  --c-accent:#6a4bea;--c-pink:#c93f97;--c-mint:#0a8f72;--c-sky:#1f7fcc;--c-lemon:#f0b53a;
  --c-glow:rgba(106,75,234,.3);--c-shadow:rgba(72,50,150,.22);
  --holo:linear-gradient(100deg,#a594ff,#ff9bdc,#ffe08a,#7de8c8,#8ccbff,#a594ff);
  --holo-text:linear-gradient(100deg,#6a4bea,#c93f97,#c9801a,#0a8f72,#1f7fcc,#6a4bea);
  --nebula:radial-gradient(60vw 55vh at 88% 6%,rgba(160,130,255,.32),transparent 70%),radial-gradient(55vw 55vh at 2% 42%,rgba(255,150,215,.26),transparent 70%),radial-gradient(60vw 50vh at 72% 96%,rgba(120,235,205,.28),transparent 70%);
  --hero-shade:linear-gradient(0deg,rgba(243,239,255,.97) 0%,rgba(243,239,255,.72) 22%,rgba(243,239,255,.06) 66%),linear-gradient(90deg,rgba(243,239,255,.42),transparent 55%);
  --hero-shade-m:linear-gradient(0deg,#f3efff 0%,#f3efff 63%,transparent 82%);
  --music-grad:linear-gradient(125deg,#e4d1ff,#ffd5e6 60%,#c4f5e9);
  --pink:#ffd3ee;--mint:#c4f8e6;--lavender:#e6deff;
  --ink:var(--c-text);--muted:var(--c-muted);--paper:var(--c-bg);--purple:var(--c-accent);--line:var(--c-border);
  --display:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
  --tech:'Unbounded','DotGothic16',sans-serif;
  --corners:
    linear-gradient(var(--c-mint),var(--c-mint)) left top/18px 2px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) left top/2px 18px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) right top/18px 2px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) right top/2px 18px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) left bottom/18px 2px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) left bottom/2px 18px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) right bottom/18px 2px no-repeat,
    linear-gradient(var(--c-mint),var(--c-mint)) right bottom/2px 18px no-repeat;
  color:var(--c-text);background:var(--c-bg);
}
body.site-night{
  --c-bg:#080717;--c-bg-2:#121030;
  --c-surface:rgba(26,21,66,.56);
  --c-border:rgba(185,165,255,.2);--c-border-strong:rgba(185,165,255,.46);
  --c-text:#f3efff;--c-muted:#aea7d6;
  --c-accent:#b9a5ff;--c-pink:#ff9be0;--c-mint:#8dffd9;--c-sky:#8fd3ff;--c-lemon:#fff09a;
  --c-glow:rgba(160,130,255,.45);--c-shadow:rgba(0,0,0,.6);
  --holo:linear-gradient(100deg,#b9a5ff,#ff9be0,#fff09a,#8dffd9,#8fd3ff,#b9a5ff);
  --holo-text:var(--holo);
  --nebula:radial-gradient(60vw 55vh at 88% 6%,rgba(120,80,255,.24),transparent 70%),radial-gradient(55vw 55vh at 2% 42%,rgba(255,110,200,.13),transparent 70%),radial-gradient(60vw 50vh at 72% 96%,rgba(60,220,190,.12),transparent 70%);
  --hero-shade:linear-gradient(0deg,#080717 0%,rgba(8,7,23,.86) 24%,rgba(8,7,23,.12) 62%,rgba(8,7,23,.32) 100%),linear-gradient(90deg,rgba(8,7,23,.6),transparent 58%);
  --hero-shade-m:linear-gradient(0deg,#080717 0%,#080717 63%,transparent 84%);
  --music-grad:linear-gradient(125deg,#2c2070,#5b2a6e 60%,#1b4b58);
  --pink:rgba(255,155,224,.17);--mint:rgba(141,255,217,.15);--lavender:rgba(185,165,255,.14);
}
html{scrollbar-color:#a594ff transparent}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--nebula)}
#space-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
h1,h2,h3{font-family:var(--display)}
::selection{background:#ff9be0;color:#1a1440}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--c-accent)}
.skip{background:var(--c-bg-2);color:var(--c-text)}

/* ── boot sequence ─────────────────────────────── */
html.boot-pending::before{content:'';position:fixed;inset:0;z-index:199;background:#07061a;animation:boot-failsafe 0s 5s forwards}
.moon-boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(70vw 60vh at 50% 40%,#231a5e,transparent 70%),#07061a;color:#e9e2ff;cursor:pointer}
.moon-boot-inner{width:min(430px,calc(100% - 56px));text-align:center}
.moon-boot img{width:min(300px,70%);margin:0 auto 30px;filter:drop-shadow(0 0 30px rgba(185,165,255,.55));animation:boot-logo 1.6s ease-in-out infinite alternate}
.moon-boot-title{font:10px var(--mono);letter-spacing:3px;color:#b9a5ff}
.moon-boot-bar{height:3px;margin:16px 0 12px;border-radius:3px;background:rgba(185,165,255,.18);overflow:hidden}
.moon-boot-bar>i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--boot,0));background:linear-gradient(90deg,#b9a5ff,#ff9be0,#fff09a,#8dffd9);box-shadow:0 0 14px #ff9be0}
.moon-boot-row{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1.5px;color:#8dffd9}
.moon-boot-log{min-height:54px;margin-top:20px;font:10px/1.8 var(--mono);letter-spacing:1px;color:#aea7d6;text-align:left}
.moon-boot-log b{font-weight:400;color:#8dffd9}
.moon-boot-skip{margin-top:26px;font:9px var(--mono);letter-spacing:2px;color:#7d76a8}
.moon-boot.is-done{pointer-events:none;-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + .6%));mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + .6%));animation:boot-iris .85s cubic-bezier(.7,0,.25,1) forwards}
body.is-booted .hero-copy>*{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) both}
body.is-booted .hero-copy>:nth-child(2){animation-delay:.1s}
body.is-booted .hero-copy>:nth-child(3){animation-delay:.2s}
body.is-booted .hero-copy>:nth-child(4){animation-delay:.3s}
body.is-booted .hero-transmission.music-card{animation:rise-in .9s .4s cubic-bezier(.2,.8,.2,1) both}

/* ── signal bar + header ───────────────────────── */
.signal-bar{position:relative;background:#07061a;color:#cfc6ff}
.signal-bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--holo);background-size:200% 100%;animation:holo-pan 9s linear infinite;opacity:.8}
.status-dot{background:#8dffd9;box-shadow:0 0 10px #8dffd9;animation:blink 2.4s ease-in-out infinite}
.moon-age{display:inline-flex;align-items:center;gap:9px}
.moon-icon{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:#2b2560;box-shadow:0 0 0 1px rgba(207,198,255,.45);overflow:hidden}
.moon-icon::after{content:'';position:absolute;inset:0;border-radius:50%;background:#fff09a;translate:var(--moon-shift,0) 0}
.site-header{background:color-mix(in srgb,var(--c-bg) 70%,transparent);border-bottom-color:var(--c-border);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.site-header.is-scrolled{box-shadow:0 10px 40px -18px var(--c-shadow)}
.brand img{filter:drop-shadow(0 0 14px rgba(160,140,255,.35))}
nav>a{letter-spacing:.3px}
nav>a:not(.nav-social)::after{height:2px;background:var(--holo)}
.nav-social{border-color:var(--c-mint);background:var(--mint);color:var(--c-text);border-radius:30px;box-shadow:0 0 20px -6px var(--c-mint);transition:box-shadow .25s,transform .25s}
.nav-social:hover{box-shadow:0 0 26px -2px var(--c-mint);transform:translateY(-1px)}
.language-switch{background:var(--c-surface);border-color:var(--c-border-strong)}
.language-switch button{color:var(--c-muted)}
.language-switch button[aria-pressed=true]{background:var(--c-accent);color:var(--c-bg)}
.site-header .menu-toggle,.menu-toggle{border-color:var(--c-border-strong);color:var(--c-text)}
.page-progress{background:var(--holo);box-shadow:0 0 16px #ff9be0}

/* ── hero ──────────────────────────────────────── */
.immersive-hero.hero{background:var(--c-bg)}
.panorama::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(8,7,23,.1) 0 1px,transparent 1px 3px)}
.panorama>img{filter:saturate(1.08)}
.panorama>img.changing{opacity:.75;filter:saturate(1.8) hue-rotate(35deg) contrast(1.15);animation:scene-glitch .38s steps(1) infinite}
.panorama[aria-busy=true]::after{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(141,255,217,.35),rgba(255,155,224,.3),transparent);animation:scan-sweep .5s linear infinite}
.panorama-shade{background:var(--hero-shade)}
.hud-frame{position:absolute;inset:14px 14px 101px;z-index:1;pointer-events:none;background:var(--corners);opacity:.85;overflow:hidden}
.hud-frame::before{content:'';position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,transparent,rgba(141,255,217,.1) 80%,rgba(141,255,217,.32));border-bottom:1px solid rgba(141,255,217,.5);animation:hud-scan 7s cubic-bezier(.5,0,.5,1) infinite}
.hud-side{position:absolute;right:16px;top:50%;writing-mode:vertical-rl;translate:0 -50%;display:flex;gap:18px;font:9px var(--mono);letter-spacing:2px;color:var(--c-text);opacity:.8;white-space:nowrap}
.hud-side b{font-weight:400;color:var(--c-mint)}
.hero-hud{color:var(--c-text);z-index:2}
.hero-hud>span{background:color-mix(in srgb,var(--c-bg) 58%,transparent);border-color:var(--c-border-strong)}
.hero-hud .status-dot{background:var(--c-pink);box-shadow:0 0 10px var(--c-pink)}
.immersive-hero .eyebrow,.section-heading .eyebrow,.connect-section .section-wrap>.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.immersive-hero .eyebrow::before,.section-heading .eyebrow::before,.connect-section .section-wrap>.eyebrow::before{content:'';width:6px;height:6px;flex-shrink:0;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.immersive-hero h1{font-weight:900;color:var(--c-text);filter:drop-shadow(0 0 22px var(--c-glow))}
.hero-gradient{background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 7s linear infinite}
.immersive-hero .hero-description{color:var(--c-text);opacity:.9}
.immersive-hero .button{position:relative;border:0;background:var(--holo);background-size:220% 100%;color:#17123a;font-weight:800;box-shadow:0 0 34px -6px #ff9be0,inset 0 0 0 1px rgba(255,255,255,.5);animation:holo-pan 6s linear infinite}
.immersive-hero .button:hover{transform:translateY(-2px);box-shadow:0 0 46px -2px #ff9be0,inset 0 0 0 1px rgba(255,255,255,.7)}
.scene-console{background:color-mix(in srgb,var(--c-bg) 62%,transparent);border-top-color:var(--c-border-strong);z-index:2}
.console-cross{color:var(--c-mint);animation:spin 14s linear infinite}
.scene-switcher{background:var(--lavender);border-color:var(--c-border)}
.scene-switcher button>span{color:inherit;opacity:.65}
.scene-switcher button[aria-pressed=true]{background:var(--c-accent);color:var(--c-bg);box-shadow:0 0 22px -4px var(--c-accent)}
.scene-next{border-color:var(--c-border-strong);animation:nudge 1.8s ease-in-out infinite}

/* ── music player ──────────────────────────────── */
.hero-transmission.music-card{background:color-mix(in srgb,var(--c-bg-2) 82%,transparent);border-color:var(--c-border-strong);box-shadow:0 12px 40px -12px var(--c-shadow),0 0 30px -14px var(--c-accent)}
.music-flyout{background:color-mix(in srgb,var(--c-bg-2) 94%,transparent);border-color:var(--c-border-strong);box-shadow:0 14px 50px -10px var(--c-shadow),0 0 30px -12px var(--c-accent)}
.music-bars,.music-expand-arrow{color:var(--c-pink)}
.hero-transmission.music-card .music-status,.music-flyout .music-status,.music-clock,.music-volume output,.music-disclosure[open]>summary>.music-kicker,.music-flyout>.music-kicker{color:var(--c-muted)}
.music-transport button{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border-strong)}
.music-transport button:hover{background:var(--lavender)}
.music-transport [data-music-play]{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}
.music-transport [data-music-play]:hover{background:var(--c-pink);border-color:var(--c-pink)}
.music-seek input[type=range]{background-image:linear-gradient(90deg,var(--c-accent) var(--range-fill),var(--c-border-strong) var(--range-fill))}
.music-volume input[type=range]{background-image:linear-gradient(to top,var(--c-accent) var(--range-fill),var(--c-border-strong) var(--range-fill))}
.music-seek input[type=range]::-webkit-slider-thumb,.music-volume input[type=range]::-webkit-slider-thumb{background:var(--c-accent);border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-bg-2),0 0 10px var(--c-accent)}
.music-seek input[type=range]::-moz-range-thumb,.music-volume input[type=range]::-moz-range-thumb{background:var(--c-accent);border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-bg-2)}
[data-music-mute]{color:var(--c-accent)}
[data-music-mute]:hover,[data-music-mute].is-muted{background:var(--lavender);border-color:var(--c-border)}
.music-footer a{color:var(--c-accent);border-bottom-color:var(--c-border-strong)}
.music-footer a:hover{color:var(--c-pink)}
.music-flyout-close{border-color:var(--c-border-strong);color:var(--c-muted)}
.has-error .music-status{color:var(--c-pink)}

/* ── marquee ───────────────────────────────────── */
.marquee{width:104%;margin-left:-2%;rotate:-1.1deg;background:color-mix(in srgb,var(--c-bg) 60%,transparent);border-block-color:var(--c-border-strong);padding:18px 0;position:relative;z-index:1}
.marquee>div{font:900 26px var(--tech);letter-spacing:1px;color:transparent;-webkit-text-stroke:1px var(--c-accent)}
.marquee span{color:var(--c-pink);-webkit-text-stroke:0;text-shadow:0 0 16px var(--c-pink)}

/* ── section headings ──────────────────────────── */
main{counter-reset:sec}
main>section:not(.hero,.anime-hero,.orbit-scene,.lab-hero,.explode-scene,.crawl-scene,.game-specs-wrap){counter-increment:sec}
.lab-page .section-heading::before{display:none}
.section-heading::before{content:counter(sec,decimal-leading-zero);position:absolute;right:-6px;top:-78px;z-index:-1;font:900 170px/1 var(--tech);letter-spacing:-8px;color:transparent;-webkit-text-stroke:1px var(--c-border-strong);opacity:.55;pointer-events:none}
.section-heading h2{font-size:clamp(25px,3.5vw,46px);font-weight:900;letter-spacing:-.5px;line-height:1.35}
.section-heading h2>span,.connect-heading h2>span{background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}
.section-glyph{color:var(--c-pink);animation:spin 18s linear infinite;text-shadow:0 0 24px var(--c-pink)}
.heading-note{color:var(--c-muted)}
.outline-label,.gallery-section .outline-label{border-color:var(--c-border-strong);background:color-mix(in srgb,var(--c-bg) 60%,transparent);color:var(--c-text)}
.text-link{border-bottom-color:var(--c-border-strong)}

/* ── world ─────────────────────────────────────── */
.world-photo{border-color:var(--c-border-strong);box-shadow:0 0 0 1px var(--c-border),0 40px 90px -40px var(--c-glow)}
.world-photo::after{inset:12px;box-shadow:none;background:var(--corners);z-index:1}
.world-photo::before{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 49%,transparent 63%)}
.location-tag,.character-number,.journal-image>span:not(.record),.gallery-item>span{background:color-mix(in srgb,var(--c-bg) 80%,transparent);color:var(--c-text);border-color:var(--c-border-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.world-copy h3{font-weight:900}
.world-copy>p{color:var(--c-muted)}
.world-note{border-block-color:var(--c-border)}
.world-note b{color:var(--c-accent)}
.world-note img{filter:drop-shadow(0 0 10px var(--c-glow))}
.world-copy .world-sign{color:var(--c-accent)}
.world-facts{border:0;padding:0;gap:14px}
.world-facts>div,.world-facts>div:first-child,.world-facts>div:last-child{position:relative;padding:18px 20px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.world-facts>div::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--holo)}
.world-facts span{color:var(--c-accent)}

/* ── characters ────────────────────────────────── */
.characters-section{background:linear-gradient(180deg,transparent,var(--lavender) 30%,var(--pink) 70%,transparent);border-color:transparent}
.character{background:var(--c-surface);border-color:var(--c-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.character:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 40px 90px -40px var(--c-glow)}
.character-image{background:var(--c-bg-2)}
.character-image::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 22%,rgba(255,155,224,.6) 38%,rgba(255,240,154,.5) 46%,rgba(141,255,217,.6) 54%,rgba(143,211,255,.6) 62%,transparent 78%);background-size:260% 260%;background-position:var(--mx,50%) var(--my,50%);mix-blend-mode:soft-light;opacity:0;transition:opacity .45s}
.character:hover .character-image::before{opacity:1}
.character-image::after{content:'';position:absolute;inset:10px;z-index:1;pointer-events:none;background:var(--corners);opacity:.9}
.character-number{z-index:2}
.character-role,.pyonpy .character-role{z-index:2;background:color-mix(in srgb,var(--c-bg) 78%,transparent);color:var(--c-mint);border-color:var(--c-mint);box-shadow:0 0 16px -4px var(--c-mint);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pyonpy .character-role{color:var(--c-pink);border-color:var(--c-pink);box-shadow:0 0 16px -4px var(--c-pink)}
.english-name{font:700 10px var(--tech);letter-spacing:3px;color:var(--c-accent)}
.character-info h3{font-weight:900}
.character-info h3>span{color:var(--c-pink);text-shadow:0 0 16px var(--c-pink)}
.character-info>p,.profile-more{color:var(--c-muted)}
dt{color:var(--c-accent)}
.character summary{border-top-color:var(--c-border)}
.profile-dream{background:linear-gradient(115deg,var(--mint),var(--lavender));color:var(--c-text);border-color:var(--c-border)}
.profile-qa>details{background:var(--c-surface)}
.character-talk{background:var(--lavender);border-color:var(--c-border-strong);color:var(--c-text)}
.character-talk:hover{box-shadow:0 0 22px -6px var(--c-accent)}
.character-talk::before{color:var(--c-mint)}
.speech-bubble{background:linear-gradient(120deg,var(--mint),var(--lavender));border-color:var(--c-border-strong)}
.speech-bubble small{color:var(--c-accent)}
.speech-bubble>span::after{color:var(--c-mint)}
.character-footnote{color:var(--c-muted)}
.model-sheet{position:relative;display:flex;align-items:center;gap:16px;width:100%;margin:0 0 22px;padding:10px 16px 10px 10px;border:1px solid var(--c-border-strong);border-radius:14px;background:var(--corners),var(--lavender);background-origin:border-box;text-align:left;overflow:hidden;transition:border-color .3s,box-shadow .3s,translate .3s}
.model-sheet:hover{border-color:var(--c-mint);box-shadow:0 0 26px -8px var(--c-mint);translate:0 -2px}
.model-sheet img{width:118px;height:84px;flex-shrink:0;object-fit:cover;border-radius:8px;border:1px solid var(--c-border-strong);background:#fff}
.model-sheet::after{content:'';position:absolute;left:10px;top:10px;width:118px;height:30px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(141,255,217,.45),transparent);animation:sheet-scan 2.8s linear infinite}
.model-sheet small{display:block;font:700 9px var(--tech);letter-spacing:2.5px;color:var(--c-accent)}
.model-sheet b{display:block;margin-top:5px;font-size:13px;font-weight:700;line-height:1.5}
.model-sheet i{margin-left:auto;font-style:normal;font-size:20px;color:var(--c-mint)}
@keyframes sheet-scan{from{translate:0 -30px}to{translate:0 84px}}
@media(max-width:560px){.model-sheet img{width:96px;height:68px}.model-sheet::after{width:96px}.model-sheet b{font-size:12px}}

/* ── Moonians TV + journal ─────────────────────── */
.tv-feature{background:var(--c-surface);border-color:var(--c-border-strong);box-shadow:0 50px 110px -60px var(--c-glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tv-feature-header .eyebrow,.tv-feature-caption .eyebrow{color:var(--c-accent)}
.tv-feature-header .eyebrow::before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#ff6fae;box-shadow:0 0 10px #ff6fae;animation:blink 1.2s steps(2) infinite}
.tv-logo{filter:drop-shadow(0 0 18px rgba(160,140,255,.3))}
.tv-intro{color:var(--c-muted)}
.tv-channel-link{border:0;background:var(--holo);background-size:220% 100%;color:#17123a;box-shadow:0 0 30px -8px #ff9be0;animation:holo-pan 7s linear infinite}
.tv-channel-link:hover{box-shadow:0 0 40px -4px #ff9be0}
.tv-channel-link>span:first-child{background:#17123a;color:#fff}
.tv-screen{background:#07061a;border-color:var(--c-border-strong);box-shadow:0 0 0 1px var(--c-border),0 0 70px -20px var(--c-accent)}
.tv-screen:not([data-tv-state=watch])::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(8,7,23,.12) 0 1px,transparent 1px 3px),var(--corners);background-origin:content-box;padding:10px}
.tv-poster{background:var(--c-bg-2)}
.tv-start{border:0;background:var(--holo);color:#17123a;box-shadow:0 0 0 0 rgba(255,155,224,.6),0 8px 40px rgba(8,7,23,.5);animation:pulse-ring 2.2s ease-out infinite}
.tv-start:hover{background:var(--holo);scale:1.06}
.tv-feature-caption>a{color:var(--c-accent);border-bottom-color:var(--c-border-strong)}
.journal-image{border-color:var(--c-border-strong);background:var(--c-bg-2)}
.journal-card:hover .journal-image{box-shadow:0 0 0 1px var(--c-accent),0 30px 70px -35px var(--c-glow)}
.journal-card:hover .journal-image>img,.gallery-item:hover>img{animation:rgb-split .42s steps(2) 1}
.journal-meta{color:var(--c-accent)}
.journal-card h3{font-weight:800}
.journal-card>p{color:var(--c-muted)}
.music-image{background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,255,255,.14) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.14) 20px),var(--music-grad)}
.record{box-shadow:0 0 50px -8px var(--c-accent)}
.record>span{background:#8dffd9;color:#17123a}
.music-note{color:var(--c-pink);text-shadow:0 0 20px var(--c-pink)}

/* ── gallery ───────────────────────────────────── */
.gallery-section{background:linear-gradient(180deg,transparent,var(--mint) 45%,transparent);border-color:transparent}
.gallery-item{border-color:var(--c-border-strong);background:var(--c-bg-2)}
.gallery-item:hover,.social-gallery-card:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 30px 70px -35px var(--c-glow)}
.social-gallery-card>span{background:color-mix(in srgb,var(--c-bg) 84%,transparent)}
.social-gallery-card small{color:var(--c-muted)}
.social-gallery-card>span>b{color:var(--c-mint)}

/* ── history / flight log ──────────────────────── */
.big-year{font:900 50px/1.15 var(--tech);letter-spacing:-1px;color:transparent;-webkit-text-stroke:1.5px var(--c-accent);filter:drop-shadow(0 0 18px var(--c-glow))}
.big-year>span{color:var(--c-pink);-webkit-text-stroke:0}
.history-aside>p{color:var(--c-muted)}
.history-list{position:relative;padding-left:30px}
.history-list::before,.history-list::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--c-border)}
.history-list::after{background:linear-gradient(180deg,#b9a5ff,#ff9be0,#8dffd9);box-shadow:0 0 12px #ff9be0;transform-origin:top;scale:1 var(--trace,0)}
.history-row{position:relative;border-top-color:var(--c-border)}
.history-row::before{content:'';position:absolute;left:-31px;top:33px;width:10px;height:10px;border-radius:50%;background:var(--c-bg);border:2px solid var(--c-mint);box-shadow:0 0 12px var(--c-mint);z-index:1}
.history-row time,.archive-list time{color:var(--c-accent)}
.history-row h3{font-weight:800}
.history-row p{color:var(--c-muted)}
.history-row a{color:var(--c-accent);border-bottom-color:var(--c-border-strong)}
.category{border-color:currentColor}
.category.mint{color:var(--c-mint)}
.category.pink{color:var(--c-pink)}
.archive-list small,.archive-intro,.source-note{color:var(--c-muted)}

/* ── connect ───────────────────────────────────── */
.connect-section{background:linear-gradient(180deg,transparent,var(--lavender) 40%,var(--pink) 100%);border-color:transparent}
.connect-section::before{inset:auto -20% 0;height:330px;opacity:.55;background-image:linear-gradient(var(--c-border-strong) 1px,transparent 1px),linear-gradient(90deg,var(--c-border-strong) 1px,transparent 1px);background-size:64px 64px;transform:perspective(420px) rotateX(64deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);animation:grid-run 2.6s linear infinite}
.connect-section .eyebrow{color:var(--c-accent)}
.connect-heading h2{font-size:clamp(31px,5.2vw,66px);font-weight:900;letter-spacing:-1px;line-height:1.3}
.connect-heading>span{color:var(--c-accent);text-shadow:0 0 30px var(--c-accent)}
.connect-description{color:var(--c-muted)}
.social-grid>a{position:relative;background:var(--c-surface);border-color:var(--c-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.social-grid>a:hover{transform:translateY(-4px);border-color:transparent;background:linear-gradient(var(--c-bg-2),var(--c-bg-2)) padding-box,var(--holo) border-box;box-shadow:0 0 34px -8px var(--c-accent)}
.social-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--c-border-strong);border-radius:13px;background:var(--lavender);color:var(--c-accent);font-size:19px;transition:color .25s,box-shadow .25s}
.social-grid>a:hover .social-icon{color:var(--c-mint);box-shadow:0 0 18px -4px var(--c-mint)}
.social-grid b{font:700 13px var(--tech);letter-spacing:.5px}
.social-grid small{color:var(--c-muted)}
.social-grid>a>span:last-child{color:var(--c-accent);transition:translate .25s}
.social-grid>a:hover>span:last-child{translate:3px -3px}
.shop-banner{border-color:var(--c-border-strong);box-shadow:0 0 0 1px var(--c-border),0 30px 70px -35px var(--c-glow)}
.shop-banner:hover{box-shadow:0 0 0 1px var(--c-accent),0 0 50px -12px var(--c-accent)}
.related-links>a{color:var(--c-accent);border-bottom-color:var(--c-border-strong)}
.moon-message{position:relative}
.moon-message>span,.moon-message>span:last-child{color:var(--c-accent);text-shadow:0 0 24px var(--c-accent)}
.moon-message b{font-family:var(--display);font-weight:900;font-size:24px}
.moon-signature{position:relative;width:min(340px,72%);margin:26px auto 0;rotate:-4deg;background:var(--holo-text);background-size:220% 100%;-webkit-mask:url(assets/signature.png) center/contain no-repeat;mask:url(assets/signature.png) center/contain no-repeat;animation:holo-pan 9s linear infinite}
.moon-signature.sig-wait{clip-path:inset(0 100% 0 0)}
.moon-signature.is-signing{animation:holo-pan 9s linear infinite,sign-in 2.4s cubic-bezier(.5,0,.3,1) both}
@keyframes sign-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
body.motion-paused .moon-signature.sig-wait{clip-path:none}

/* ── footer ────────────────────────────────────── */
footer{position:relative;overflow:hidden;background:transparent;border-top:1px solid var(--c-border)}
.footer-top{border-bottom-color:var(--c-border)}
.footer-top p>span,.footer-bottom{color:var(--c-muted)}
.back-top{background:var(--lavender);border-color:var(--c-border-strong);transition:box-shadow .25s,translate .25s}
.back-top:hover{translate:0 -3px;box-shadow:0 0 22px -4px var(--c-accent)}
.footer-giant{margin:26px 0 -4vw;font:900 clamp(40px,11.6vw,190px)/.9 var(--tech);letter-spacing:-.05em;text-align:center;white-space:nowrap;background:var(--holo);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55;-webkit-mask-image:linear-gradient(#000 15%,transparent 92%);mask-image:linear-gradient(#000 15%,transparent 92%);animation:holo-pan 12s linear infinite;user-select:none;cursor:default}

/* ── dock, dialogs, toast ──────────────────────── */
.site-dock{background:color-mix(in srgb,var(--c-bg-2) 78%,transparent);border-color:var(--c-border-strong);box-shadow:0 14px 44px -12px var(--c-shadow),0 0 34px -14px var(--c-accent),inset 0 1px 0 rgba(255,255,255,.14)}
.site-dock::before{background:var(--holo)}
.site-dock{transition:translate .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
@media(min-width:561px){body.at-top .site-dock:not(:focus-within){translate:0 130%;opacity:0;pointer-events:none}}
.site-dock button:hover,.site-dock button[aria-pressed=true]{background:var(--lavender);color:var(--c-accent)}
.dock-key{border-color:var(--c-border-strong);color:var(--c-muted)}
.stamp-count{background:var(--c-accent);color:var(--c-bg)}
.site-dock [data-action=music].is-playing{background:var(--mint)}
.music-dock-light{background:#8dffd9;box-shadow:0 0 8px #8dffd9}
.fx-dialog{background:var(--c-bg-2);color:var(--c-text);border-color:var(--c-border-strong);box-shadow:0 0 0 1px var(--c-border),0 0 90px -20px var(--c-accent),0 40px 140px rgba(4,3,14,.55)}
.fx-dialog.music-consent{height:max-content}
.fx-dialog::backdrop{background:rgba(6,5,20,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fx-dialog-top>span,.consent-kicker,.passport-label{color:var(--c-accent)}
.fx-close{border-color:var(--c-border-strong)}
.guide-title,.music-consent h2,.passport-card h2{font-family:var(--display);font-weight:900}
.guide-search{background:var(--c-surface);border-color:var(--c-border-strong)}
.guide-search>span{color:var(--c-accent)}
.guide-search:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--lavender),0 0 24px -6px var(--c-accent)}
.guide-results>a:hover,.guide-results>a:focus-visible{background:var(--lavender);border-color:var(--c-border-strong)}
.guide-results>a>span:first-child{color:var(--c-mint)}
.guide-help,.passport-privacy,.consent-note{color:var(--c-muted)}
.passport-card{border-color:var(--c-border-strong);background:radial-gradient(ellipse at 100% 0,var(--mint),transparent 60%),linear-gradient(125deg,var(--lavender),var(--pink))}
.passport-card::after{color:var(--c-accent);opacity:.14}
.passport-card>p,.passport-progress{color:var(--c-muted)}
.passport-id{border-top-color:var(--c-border-strong)}
.passport-stamp{background:var(--c-surface);color:var(--c-muted);border-color:var(--c-border-strong)}
.passport-stamp.collected{color:var(--c-accent);background:var(--lavender);border-color:var(--c-accent);box-shadow:inset 0 0 0 4px var(--c-bg-2),0 0 20px -5px var(--c-accent)}
.passport-stamp.collected:nth-child(2n){color:var(--c-mint);background:var(--mint);border-color:var(--c-mint);box-shadow:inset 0 0 0 4px var(--c-bg-2),0 0 20px -5px var(--c-mint)}
.passport-download,.music-consent-actions .music-allow{border:0;background:var(--holo);color:#17123a;font-weight:700;box-shadow:0 0 28px -8px #ff9be0}
.music-consent-actions .music-allow:hover{background:var(--holo);box-shadow:0 0 38px -4px #ff9be0}
.music-consent-actions button{border-color:var(--c-border-strong)}
.music-consent-actions .music-decline:hover{background:var(--lavender)}
.consent-moon{background:linear-gradient(135deg,var(--lavender),var(--mint));color:var(--c-accent);border-color:var(--c-border-strong);box-shadow:0 0 34px -8px var(--c-accent)}
.explore-toast{background:color-mix(in srgb,var(--c-bg-2) 92%,transparent);color:var(--c-text);border-color:var(--c-border-strong);box-shadow:0 10px 40px -10px var(--c-shadow),0 0 26px -10px var(--c-accent)}
.explore-toast>span:first-child{color:var(--c-mint)}
dialog#photo-dialog{background:rgba(7,6,22,.96)}
dialog#photo-dialog::backdrop{background:rgba(7,6,22,.92)}

/* ── cursor, orbit rail, click sparks ──────────── */
.cursor-aura{background:radial-gradient(circle,rgba(150,120,255,.2),transparent 65%)}
.site-night .cursor-aura{background:radial-gradient(circle,rgba(185,165,255,.13),transparent 65%);mix-blend-mode:screen}
.cursor-ring{position:fixed;left:0;top:0;z-index:95;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--c-accent);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,border-color .25s,background .25s;will-change:transform}
.cursor-ring.is-visible{opacity:.9}
.cursor-ring.is-hot{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--c-mint);background:rgba(141,255,217,.08)}
.click-spark{position:fixed;z-index:96;pointer-events:none;font-size:13px;line-height:1;color:var(--spark,#ff9be0);text-shadow:0 0 10px currentColor;animation:spark-out .7s ease-out forwards}
.orbit-rail{position:fixed;right:16px;top:50%;z-index:30;translate:0 -50%;display:none;flex-direction:column;align-items:center;gap:13px}
.orbit-rail::before{content:'';position:absolute;top:34px;bottom:26px;left:50%;width:1px;margin-left:-.5px;background:var(--c-border-strong)}
.rail-moon{position:relative;width:20px;height:20px;border-radius:50%;background:var(--c-bg-2);box-shadow:0 0 0 1px var(--c-border-strong);overflow:hidden}
.rail-moon::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--c-lemon);translate:calc((1 - var(--progress,0))*-100%) 0}
.orbit-rail a{position:relative;z-index:1;display:block;width:9px;height:9px;border-radius:50%;background:var(--c-bg);border:1px solid var(--c-border-strong);transition:scale .25s,background .25s,box-shadow .25s,border-color .25s}
.orbit-rail a::after{content:attr(aria-label);position:absolute;right:20px;top:50%;translate:6px -50%;padding:4px 10px;border:1px solid var(--c-border-strong);border-radius:20px;background:var(--c-bg-2);color:var(--c-text);font-size:10px;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.orbit-rail a:hover::after,.orbit-rail a:focus-visible::after{opacity:1;translate:0 -50%}
.orbit-rail a:hover{scale:1.4;border-color:var(--c-mint)}
.orbit-rail a.is-current{scale:1.5;background:var(--c-mint);border-color:var(--c-mint);box-shadow:0 0 14px var(--c-mint)}
.rail-percent{font:8px var(--mono);letter-spacing:1px;color:var(--c-muted)}
.orbit-rail{transition:opacity .35s}
body.at-top .orbit-rail{opacity:0;pointer-events:none}
@media(min-width:1180px) and (pointer:fine){.orbit-rail{display:flex}}

/* ── low-gravity easter egg ────────────────────── */
body.low-gravity :is(.character,.journal-card,.gallery-item,.social-grid>a,.world-photo,.tv-feature,.world-facts>div,.shop-banner){animation:low-g 3.2s ease-in-out infinite alternate}
body.low-gravity :is(.character,.gallery-item,.social-grid>a):nth-child(2n){animation-delay:-1.4s;animation-duration:3.9s}
body.low-gravity :is(.gallery-item,.social-grid>a):nth-child(3n){animation-delay:-2.3s}

/* ── theme switch: circular reveal ─────────────── */
::view-transition-old(root){animation:none;z-index:0}
::view-transition-new(root){z-index:1;animation:theme-reveal .75s cubic-bezier(.65,0,.25,1) both}

/* ── sources page ──────────────────────────────── */
.sources-page{padding:34px 34px 40px;border:1px solid var(--c-border-strong);border-radius:22px;background:var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 110px -60px var(--c-glow)}
.sources-page a{color:var(--c-accent)}
.sources-page h2{color:var(--c-text)}

@keyframes boot-failsafe{to{visibility:hidden}}
@keyframes boot-logo{to{scale:1.04;filter:drop-shadow(0 0 44px rgba(255,155,224,.6))}}
@keyframes boot-iris{to{--iris:100%}}
@keyframes rise-in{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes holo-pan{to{background-position:-220% 0}}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{rotate:360deg}}
@keyframes nudge{50%{translate:0 4px}}
@keyframes hud-scan{0%{top:-120px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes scan-sweep{from{translate:0 -100%}to{translate:0 480%}}
@keyframes scene-glitch{0%{clip-path:inset(0 0 0 0);translate:0 0}20%{clip-path:inset(12% 0 58% 0);translate:-14px 0}40%{clip-path:inset(48% 0 22% 0);translate:12px 0}60%{clip-path:inset(0 0 0 0);translate:-5px 0}80%{clip-path:inset(72% 0 6% 0);translate:9px 0}}
@keyframes rgb-split{0%{filter:drop-shadow(5px 0 0 rgba(255,60,190,.7)) drop-shadow(-5px 0 0 rgba(60,255,220,.7));translate:-3px 0}50%{filter:drop-shadow(-4px 0 0 rgba(255,60,190,.7)) drop-shadow(4px 0 0 rgba(60,255,220,.7));translate:3px 0}100%{filter:none;translate:0 0}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,155,224,.6),0 8px 40px rgba(8,7,23,.5)}100%{box-shadow:0 0 0 26px rgba(255,155,224,0),0 8px 40px rgba(8,7,23,.5)}}
@keyframes grid-run{to{background-position:0 64px,0 0}}
@keyframes spark-out{to{translate:var(--sx) var(--sy);rotate:160deg;scale:.2;opacity:0}}
@keyframes low-g{from{translate:0 0;rotate:0deg}to{translate:0 -20px;rotate:1.2deg}}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,100%))}to{clip-path:circle(150vmax at var(--vt-x,50%) var(--vt-y,100%))}}

@media(max-width:1050px){.hud-side{display:none}}
@media(max-width:800px){.moon-age{display:none}.marquee>div{font-size:20px}.section-heading::before{font-size:110px;top:-52px;letter-spacing:-5px}.hud-frame{inset:12px 12px 102px}.big-year{font-size:36px}.history-list{padding-left:24px}.history-list::before,.history-list::after{left:3px}.history-row::before{left:-27px}}
@media(max-width:560px){
  .panorama-shade{background:var(--hero-shade-m)}
  .panorama::before{height:335px;inset:0 0 auto}
  .hud-frame{inset:9px 9px auto;height:300px}
  .hud-frame::before{display:none}
  .marquee{padding:13px 0}.marquee>div{font-size:15px}
  .section-heading::before{font-size:78px;top:-34px;right:0;letter-spacing:-3px}
  .world-facts{gap:10px}
  .world-facts>div,.world-facts>div:first-child,.world-facts>div:last-child{padding:14px 16px}
  .big-year{font-size:30px}.big-year>span{font-size:14px}
  .history-row::before{top:28px}
  .moon-message b{font-size:19px}
  .social-icon{width:40px;height:40px}
  .connect-section::before{height:220px;background-size:44px 44px}
  .sources-page{padding:24px 20px 30px;margin:30px 14px}
}
body.motion-paused .cursor-ring,body.motion-paused .hud-frame::before{display:none}
@media(prefers-reduced-motion:reduce){.cursor-ring,.hud-frame::before{display:none}html.boot-pending::before{display:none}}

/* ── home: 4 scenes, 3 journal cards ───────────── */
.journal-grid-secondary{grid-template-columns:repeat(3,1fr);gap:26px}
.journal-grid-secondary .journal-image{height:250px}
.anime-teaser .journal-image>img{object-position:center 30%}
.anime-teaser-play{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:46px;height:46px;padding-left:3px;border-radius:50%;background:var(--holo);color:#17123a;font-size:15px;box-shadow:0 0 26px -4px #ff9be0}
@media(max-width:900px){.journal-grid-secondary{grid-template-columns:1fr 1fr}.journal-grid-secondary .journal-image{height:210px}}
@media(max-width:560px){
  .journal-grid-secondary{grid-template-columns:1fr}.journal-grid-secondary .journal-image{height:230px}
  .immersive-hero.hero{padding-bottom:158px}
  .scene-switcher{grid-template-columns:1fr 1fr}
  .scene-switcher button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 5px}
  .scene-switcher button>span{display:inline;margin:0}
}

/* ── 3D anime theater page ─────────────────────── */
.anime-page{padding-bottom:0}
.anime-back{display:inline-flex;gap:8px;align-items:center;margin-right:6px;padding:8px 16px;border:1px solid var(--c-border-strong);border-radius:30px;background:var(--c-surface);font-size:11px;font-weight:700;transition:box-shadow .25s,border-color .25s}
.anime-back:hover{border-color:var(--c-mint);box-shadow:0 0 22px -6px var(--c-mint)}
.anime-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(680px,calc(100svh - 110px));padding:150px 0 70px;overflow:hidden}
.anime-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;animation:slow-zoom 26s ease-in-out infinite alternate}
.anime-hero-shade{position:absolute;inset:0;z-index:-1;background:var(--hero-shade),repeating-linear-gradient(0deg,rgba(8,7,23,.1) 0 1px,transparent 1px 3px)}
.anime-hero h1{font-size:clamp(38px,5.6vw,78px);font-weight:900;line-height:1.25;letter-spacing:-1.5px;margin:18px 0 0;filter:drop-shadow(0 0 22px var(--c-glow))}
.anime-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.anime-lead{margin:20px 0 26px;font-size:14px;line-height:2}
.anime-cta{border:0;border-radius:50px;background:var(--holo);background-size:220% 100%;color:#17123a;font-weight:800;box-shadow:0 0 34px -6px #ff9be0;animation:holo-pan 6s linear infinite}
.anime-cta:hover{transform:translateY(-2px);box-shadow:0 0 46px -2px #ff9be0}
.anime-page .anime-hero-copy>*{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) both}
.anime-page .anime-hero-copy>:nth-child(2){animation-delay:.1s}
.anime-page .anime-hero-copy>:nth-child(3){animation-delay:.2s}
.anime-page .anime-hero-copy>:nth-child(4){animation-delay:.3s}
.episode-feature{display:grid;grid-template-columns:1.65fr 1fr;gap:38px;align-items:start;padding:22px;border:1px solid var(--c-border-strong);border-radius:26px;background:var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 110px -60px var(--c-glow)}
.episode-screen{position:relative;border:1px solid var(--c-border-strong);border-radius:16px;overflow:hidden;background:#07061a;box-shadow:0 0 70px -20px var(--c-accent)}
.episode-screen video{display:block;width:100%;height:auto;aspect-ratio:864/496;background:#07061a}
.episode-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:96px;height:96px;padding-left:6px;border-radius:50%;background:var(--holo);color:#17123a;font-size:30px;animation:pulse-ring 2.2s ease-out infinite}
.episode-play[hidden]{display:none}
.episode-play:hover{scale:1.07}
.episode-info{padding:8px 8px 8px 0}
.episode-number{display:flex;align-items:center;gap:12px;font:700 10px var(--tech);letter-spacing:3px;color:var(--c-accent)}
.episode-chip{padding:4px 11px;border:1px solid currentColor;border-radius:30px;font:700 10px 'Noto Sans JP',sans-serif;letter-spacing:1px}
.episode-chip.is-live{color:var(--c-mint);background:var(--mint);box-shadow:0 0 16px -4px var(--c-mint)}
.episode-info h3{font-size:clamp(28px,3.2vw,42px);font-weight:900;margin:10px 0 14px}
.episode-info>p{font-size:13px;line-height:2;color:var(--c-muted)}
.episode-info .episode-quote{margin-top:12px;font-family:var(--display);font-size:15px;font-weight:800;color:var(--c-pink)}
.episode-info .episode-meta{margin-top:14px;font:10px var(--mono);letter-spacing:1px;color:var(--c-accent)}
.episode-still{width:100%;margin-top:20px;border:1px solid var(--c-border-strong);border-radius:14px}
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.soon-card{padding:14px 14px 22px;border:1px dashed var(--c-border-strong);border-radius:20px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.soon-art{position:relative;display:grid;place-items:center;aspect-ratio:16/10;margin-bottom:18px;border-radius:12px;overflow:hidden;background:#07061a url(assets/anime/pastel-stage.jpg) center/cover}
.soon-art::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(8,7,23,.2) 0 1px,transparent 1px 3px),linear-gradient(rgba(8,7,23,.62),rgba(8,7,23,.62));backdrop-filter:blur(7px) saturate(.7);-webkit-backdrop-filter:blur(7px) saturate(.7)}
.soon-art::after{content:'';position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,transparent,rgba(141,255,217,.2),transparent);animation:scan-sweep 3.4s linear infinite}
.soon-card:nth-child(2) .soon-art::after{animation-delay:-1.1s}.soon-card:nth-child(3) .soon-art::after{animation-delay:-2.2s}
.soon-stamp{position:relative;z-index:1;padding:9px 22px;border:1.5px solid #8dffd9;border-radius:6px;color:#8dffd9;font:400 17px var(--mono);letter-spacing:6px;rotate:-5deg;text-shadow:0 0 14px #8dffd9;box-shadow:0 0 22px -6px #8dffd9,inset 0 0 22px -10px #8dffd9;animation:blink 2.6s ease-in-out infinite}
.soon-card h3{font-size:20px;font-weight:900;margin:8px 4px 6px}
.soon-card>p:last-child{margin:0 4px;font-size:12px;color:var(--c-muted)}
.soon-card .episode-number{margin:0 4px}
.cast-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:860px;margin:0 auto}
.cast-card{display:flex;align-items:center;gap:22px;padding:16px;border:1px solid var(--c-border);border-radius:22px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s,translate .3s}
.cast-card:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 30px 70px -35px var(--c-glow);translate:0 -4px}
.cast-card img{width:150px;height:200px;object-fit:cover;object-position:center 12%;border-radius:14px;border:1px solid var(--c-border-strong)}
.cast-card h3{font-size:24px;font-weight:900;margin:4px 0}
.cast-card p{font-size:12px;color:var(--c-muted)}
.anime-follow{margin-top:54px;text-align:center;font-size:13px;line-height:2.4;color:var(--c-muted)}
@keyframes slow-zoom{to{scale:1.08}}
@media(max-width:900px){.episode-feature{grid-template-columns:1fr;gap:22px;padding:14px}.episode-info{padding:4px 8px 10px}.episode-still{display:none}.soon-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .anime-hero{min-height:560px;padding:200px 0 46px}
  .anime-hero-shade{background:linear-gradient(0deg,var(--c-bg) 0%,color-mix(in srgb,var(--c-bg) 86%,transparent) 42%,transparent 78%)}
  .anime-lead{font-size:12px}.anime-lead br{display:none}
  .anime-back{padding:7px 11px;font-size:10px;margin-right:0}
  .episode-play{width:68px;height:68px;font-size:22px}
  .soon-grid{grid-template-columns:1fr;gap:16px}
  .cast-grid{grid-template-columns:1fr;gap:14px}
  .cast-card img{width:110px;height:150px}
}


/* ── scroll-scrubbed orbit scene ───────────────── */
.orbit-scene{position:relative;margin-top:-1px;background:#04060f;color:#f3efff;--c-text:#f3efff;--c-muted:#b3bcdc;--c-accent:#8fd3ff;--c-mint:#8dffd9;--c-border-strong:rgba(143,211,255,.45);--holo-text:linear-gradient(100deg,#8fd3ff,#8dffd9,#b9a5ff,#ff9be0,#8fd3ff)}
.orbit-scene.is-scrub{height:340vh}
.orbit-sticky{position:relative;overflow:hidden;padding:90px 0}
.orbit-scene.is-scrub .orbit-sticky{position:sticky;top:0;height:100svh;padding:0}
.orbit-bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(46px) saturate(1.5) brightness(.5);opacity:0;transition:opacity .8s}
.orbit-scene.is-ready .orbit-bg{opacity:1}
.orbit-sticky::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,15,.82),rgba(4,6,15,.2) 60%,rgba(4,6,15,.55)),repeating-linear-gradient(0deg,rgba(4,6,15,.14) 0 1px,transparent 1px 3px)}
.orbit-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;height:100%}
.orbit-copy .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:rgba(4,6,15,.5);color:var(--c-accent)}
.orbit-copy .eyebrow::before{content:'';width:6px;height:6px;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.orbit-steps{display:grid}
.orbit-step{grid-area:1/1;opacity:0;translate:0 26px;filter:blur(8px);pointer-events:none;transition:opacity .6s,translate .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.orbit-step.is-active{opacity:1;translate:0 0;filter:none;pointer-events:auto}
.orbit-title{font-family:var(--display);font-size:clamp(30px,4.4vw,62px);font-weight:900;line-height:1.3;letter-spacing:-1px;filter:drop-shadow(0 0 24px rgba(63,208,255,.35))}
.orbit-title>span{display:block;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 8s linear infinite}
.orbit-step>p:not(.orbit-title){margin-top:20px;font-size:14px;line-height:2.1;color:var(--c-muted)}
.orbit-hint{display:none;align-items:center;gap:14px;margin-top:44px;font:9px var(--mono);letter-spacing:3px;color:var(--c-accent)}
.orbit-scene.is-scrub .orbit-hint{display:flex}
.orbit-hint i{display:block;width:70px;height:1px;background:linear-gradient(90deg,var(--c-accent),transparent);animation:hint-slide 1.8s ease-in-out infinite}
.orbit-screen{position:relative;height:min(76svh,740px);aspect-ratio:9/16;border:1px solid var(--c-border-strong);border-radius:22px;overflow:hidden;background:#04060f;box-shadow:0 0 0 1px rgba(143,211,255,.14),0 0 110px -24px rgba(63,208,255,.65)}
.orbit-scene:not(.is-scrub) .orbit-screen{height:auto;width:min(360px,100%)}
.orbit-poster,.orbit-canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.orbit-scene:not(.is-scrub) .orbit-poster{position:static;height:auto}
.orbit-canvas{opacity:0}
.orbit-scene.is-ready .orbit-canvas{opacity:1}
.orbit-hud{position:absolute;inset:0;pointer-events:none;font:9px var(--mono);letter-spacing:1.5px;color:#dff6ff;background:var(--corners);background-origin:content-box;padding:10px;text-shadow:0 0 8px rgba(4,6,15,.9)}
.orbit-hud>span{position:absolute}
.orbit-rec{left:24px;top:22px;display:flex;align-items:center;gap:7px}
.orbit-rec i{width:7px;height:7px;border-radius:50%;background:#ff6fae;box-shadow:0 0 10px #ff6fae;animation:blink 1.2s steps(2) infinite}
.orbit-angle{right:24px;top:22px;color:var(--c-mint)}
.orbit-frame{left:24px;bottom:30px}
.orbit-bar{left:24px;right:24px;bottom:20px;height:2px;background:rgba(223,246,255,.22)}
.orbit-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--orbit,0));background:linear-gradient(90deg,#8fd3ff,#8dffd9);box-shadow:0 0 10px #8dffd9}
.orbit-scene:not(.is-scrub) .orbit-hud{display:none}
.orbit-scene:not(.is-scrub) .orbit-step:not(.is-active){display:none}
@keyframes hint-slide{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@media(max-width:860px){
  .orbit-scene.is-scrub{height:300vh}
  .orbit-layout{grid-template-columns:1fr;gap:26px}
  .orbit-scene.is-scrub .orbit-layout{display:block;position:static;z-index:auto;width:100%}
  .orbit-scene.is-scrub .orbit-screen{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .orbit-scene.is-scrub .orbit-copy{position:absolute;left:20px;right:20px;bottom:118px;z-index:2}
  .orbit-scene.is-scrub .orbit-sticky::after{z-index:1;background:linear-gradient(0deg,rgba(4,6,15,.94) 4%,rgba(4,6,15,.6) 34%,transparent 62%),repeating-linear-gradient(0deg,rgba(4,6,15,.12) 0 1px,transparent 1px 3px)}
  .orbit-scene.is-scrub .orbit-bg{display:none}
  .orbit-hud{padding:12px 10px 100px;top:60px}
  .orbit-rec{top:16px}.orbit-angle{top:16px}
  .orbit-frame,.orbit-bar{display:none}
  .orbit-copy .eyebrow{margin-bottom:14px}
  .orbit-title{font-size:clamp(28px,8.6vw,44px)}
  .orbit-step>p:not(.orbit-title){margin-top:12px;font-size:12px;line-height:1.9}
  .orbit-hint{margin-top:18px}
  .orbit-scene:not(.is-scrub) .orbit-screen{margin:0 auto}
}

/* ── interactive 3D Pyonpy ─────────────────────── */
.pyonpy-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;margin-top:32px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:radial-gradient(60% 80% at 28% 60%,var(--lavender),transparent 70%),var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;box-shadow:0 50px 110px -60px var(--c-glow)}
.pyonpy-stage[hidden]{display:none}
.pyonpy-view{position:relative;height:500px;cursor:grab;background:repeating-linear-gradient(0deg,transparent 0 39px,var(--c-border) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--c-border) 39px 40px);-webkit-mask-image:radial-gradient(70% 70% at 50% 55%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 55%,#000 40%,transparent 100%)}
.pyonpy-view:active{cursor:grabbing}
.pyonpy-view canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.pyonpy-stage.is-ready .pyonpy-view canvas{opacity:1}
.pyonpy-status{position:absolute;inset:0;display:grid;place-items:center;font:11px var(--mono);letter-spacing:2px;color:var(--c-accent);animation:blink 1.6s ease-in-out infinite}
.pyonpy-status[hidden]{display:none}
.pyonpy-panel{padding:40px 44px 40px 10px}
.pyonpy-panel .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;color:var(--c-accent)}
.pyonpy-panel .eyebrow::before{content:'';width:6px;height:6px;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.pyonpy-panel h3{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.35}
.pyonpy-panel h3>span{display:block;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}
.pyonpy-panel>p:not(.eyebrow){margin-top:14px;font-size:13px;line-height:2;color:var(--c-muted)}
.pyonpy-motions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pyonpy-motions button{padding:10px 18px;border:1px solid var(--c-border-strong);border-radius:30px;background:var(--lavender);color:var(--c-text);font-size:12px;font-weight:700;transition:translate .2s,box-shadow .2s,border-color .2s,background .2s}
.pyonpy-motions button:hover:not(:disabled){translate:0 -2px;border-color:var(--c-mint);box-shadow:0 0 20px -6px var(--c-mint)}
.pyonpy-motions button[aria-pressed=true]{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent);box-shadow:0 0 22px -4px var(--c-accent)}
.pyonpy-motions button:disabled{opacity:.45;cursor:default}
.pyonpy-stage.has-error .pyonpy-status{animation:none;padding:0 24px;text-align:center;letter-spacing:0;font-family:inherit;color:var(--c-muted)}
@media(max-width:800px){.pyonpy-stage{grid-template-columns:1fr}.pyonpy-view{height:400px}.pyonpy-panel{padding:0 24px 30px}}
@media(max-width:560px){.pyonpy-view{height:360px}.pyonpy-panel{padding:0 20px 26px}.pyonpy-motions button{padding:9px 14px;font-size:11px}}

/* ── home: four journal cards ──────────────────── */
.journal-grid-secondary{grid-template-columns:repeat(4,1fr);gap:22px}
.journal-grid-secondary .journal-image{height:230px}
@media(max-width:1100px){.journal-grid-secondary{grid-template-columns:1fr 1fr}.journal-grid-secondary .journal-image{height:240px}}
@media(max-width:560px){.journal-grid-secondary{grid-template-columns:1fr}}

/* ── Karakuri Pyonpy build log page ────────────── */
.lab-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:center;padding-block:70px 30px}
.lab-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent)}
.lab-hero h1{margin-top:18px;font-size:clamp(34px,5vw,70px);font-weight:900;line-height:1.25;letter-spacing:-1.5px;filter:drop-shadow(0 0 22px var(--c-glow))}
.lab-page .lab-hero-copy>*{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) both}
.lab-page .lab-hero-copy>:nth-child(2){animation-delay:.1s}.lab-page .lab-hero-copy>:nth-child(3){animation-delay:.2s}.lab-page .lab-hero-copy>:nth-child(4){animation-delay:.3s}
.lab-specs{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.lab-specs li{position:relative;padding:14px 18px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);overflow:hidden}
.lab-specs li::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--holo)}
.lab-specs span{display:block;font:9px var(--mono);letter-spacing:1.5px;color:var(--c-accent)}
.lab-specs b{display:block;margin-top:5px;font-size:13px}
.lab-hero-photo{position:relative;margin:0;rotate:2deg;border:1px solid var(--c-border-strong);border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--c-border),0 50px 110px -50px var(--c-glow)}
.lab-hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lab-hero-photo::after{content:'';position:absolute;inset:12px;pointer-events:none;background:var(--corners)}
.lab-hero-photo figcaption{position:absolute;left:18px;bottom:18px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:5px;background:color-mix(in srgb,var(--c-bg) 80%,transparent);font:9px var(--mono);letter-spacing:1.5px}
.lab-log{position:relative;display:grid;gap:26px;padding-left:34px}
.lab-log::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,#8dffd9,#b9a5ff,#ff9be0);box-shadow:0 0 12px rgba(185,165,255,.6)}
.lab-entry{position:relative;padding:26px 28px 28px;border:1px solid var(--c-border);border-radius:20px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lab-entry::before{content:'';position:absolute;left:-34px;top:32px;width:12px;height:12px;border-radius:50%;background:var(--c-bg);border:2px solid var(--c-mint);box-shadow:0 0 12px var(--c-mint)}
.lab-entry-next{border-style:dashed}
.lab-entry-next::before{border-color:var(--c-pink);box-shadow:0 0 12px var(--c-pink);animation:blink 1.6s ease-in-out infinite}
.lab-entry header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--c-accent)}
.lab-entry-id{font:700 10px var(--tech);letter-spacing:3px}
.lab-entry time{font:11px var(--mono);letter-spacing:1px;color:var(--c-muted)}
.lab-entry h3{margin:12px 0 8px;font-size:clamp(20px,2.4vw,28px);font-weight:900}
.lab-entry>p{max-width:640px;font-size:13px;line-height:2;color:var(--c-muted)}
.lab-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.lab-photos button{padding:0;border:1px solid var(--c-border-strong);border-radius:12px;overflow:hidden;background:var(--c-bg-2);cursor:zoom-in;transition:translate .25s,box-shadow .25s,border-color .25s}
.lab-photos button:hover{translate:0 -3px;border-color:var(--c-mint);box-shadow:0 0 24px -8px var(--c-mint)}
.lab-photos img{width:100%;aspect-ratio:3/4;object-fit:cover}
.lab-video{display:flex;align-items:flex-end;gap:16px;margin-top:20px}
.lab-video video{width:min(260px,60%);height:auto;border:1px solid var(--c-border-strong);border-radius:14px;background:#07061a}
.lab-video span{font:10px var(--mono);letter-spacing:1px;color:var(--c-accent)}
.lab-zoom{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:56px 16px 24px;border:0;background:rgba(7,6,22,.96)}
.lab-zoom[open]{display:grid;place-items:center}
.lab-zoom img{max-width:100%;max-height:calc(100dvh - 90px);width:auto;height:auto;border-radius:10px}
.lab-zoom-close{position:absolute;top:16px;right:18px;padding:8px 16px;border:1px solid var(--c-border-strong);border-radius:25px;background:transparent;color:#fff;font-size:12px}
@media(max-width:860px){.lab-hero{grid-template-columns:1fr;gap:34px;padding-block:44px 10px}.lab-hero-photo{max-width:360px;margin-inline:auto}.lab-photos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lab-log{padding-left:24px}.lab-log::before{left:3px}.lab-entry{padding:20px 18px 22px}.lab-entry::before{left:-27px}.lab-specs li{padding:11px 14px}.lab-specs b{font-size:12px}}

/* ── exploded CAD view (Karakuri Pyonpy) ───────── */
.explode-scene{position:relative}
.explode-scene[hidden]{display:none}
.explode-scene.is-scrub{height:380vh}
.explode-sticky{position:relative;height:78svh;min-height:520px;overflow:hidden;background:radial-gradient(60% 60% at 62% 50%,var(--lavender),transparent 70%)}
.explode-scene.is-scrub .explode-sticky{position:sticky;top:0;height:100svh}
.explode-sticky::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 47px,var(--c-border) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,var(--c-border) 47px 48px);-webkit-mask-image:radial-gradient(70% 70% at 60% 50%,#000 20%,transparent 90%);mask-image:radial-gradient(70% 70% at 60% 50%,#000 20%,transparent 90%);opacity:.7}
.explode-view{position:absolute;inset:0}
.explode-view canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s}
.explode-scene.is-ready .explode-view canvas{opacity:1}
.explode-status{position:absolute;inset:0;display:grid;place-items:center;font:11px var(--mono);letter-spacing:2px;color:var(--c-accent);animation:blink 1.6s ease-in-out infinite}
.explode-status[hidden]{display:none}
.explode-layout{position:relative;z-index:1;display:flex;align-items:center;height:100%;pointer-events:none}
.explode-copy{width:min(500px,46%);pointer-events:auto}
.explode-copy .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent)}
.explode-copy .eyebrow::before{content:'';width:6px;height:6px;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.explode-steps{display:grid}
.explode-step{grid-area:1/1;opacity:0;translate:0 26px;filter:blur(8px);transition:opacity .6s,translate .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.explode-step.is-active{opacity:1;translate:0 0;filter:none}
.explode-title{font-family:var(--display);font-size:clamp(26px,3.1vw,44px);font-weight:900;line-height:1.3;letter-spacing:-1px;filter:drop-shadow(0 0 22px var(--c-glow))}
.explode-title>span{display:block;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 8s linear infinite}
.explode-step>p:not(.explode-title){margin-top:18px;font-size:14px;line-height:2.1;color:var(--c-muted)}
.explode-xray{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:12px 22px;border:1px solid var(--c-border-strong);border-radius:30px;background:var(--c-surface);color:var(--c-text);font-size:12px;font-weight:700;opacity:.35;pointer-events:none;transition:opacity .4s,box-shadow .25s,border-color .25s,background .25s}
.explode-scene.is-built .explode-xray,.explode-scene.is-static .explode-xray{opacity:1;pointer-events:auto}
.explode-xray:hover{border-color:var(--c-mint);box-shadow:0 0 24px -6px var(--c-mint)}
.explode-xray[aria-pressed=true]{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent);box-shadow:0 0 26px -4px var(--c-accent)}
.explode-hud{position:absolute;left:0;right:0;bottom:44px;z-index:1;display:flex;align-items:center;gap:18px;width:min(1240px,calc(100% - 100px));margin:0 auto;font:9px var(--mono);letter-spacing:2px;color:var(--c-accent)}
.explode-percent{color:var(--c-mint)}
.explode-bar{flex:1;height:2px;background:var(--c-border-strong)}
.explode-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--build,0));background:linear-gradient(90deg,#b9a5ff,#ff9be0,#8dffd9);box-shadow:0 0 10px #ff9be0}
.explode-scene.has-error .explode-status{animation:none;letter-spacing:0;font-family:inherit;color:var(--c-muted)}
@media(max-width:860px){
  .explode-scene.is-scrub{height:340vh}
  .explode-layout{align-items:flex-end;padding-bottom:92px}
  .explode-copy{width:100%}
  .explode-copy .eyebrow{margin-bottom:12px}
  .explode-title{font-size:clamp(26px,7.6vw,40px)}
  .explode-step>p:not(.explode-title){margin-top:10px;font-size:12px;line-height:1.9}
  .explode-xray{margin-top:16px;padding:10px 18px}
  .explode-hud{bottom:40px;width:calc(100% - 40px)}
  .explode-sticky::after{content:'';position:absolute;inset:auto 0 0;height:56%;pointer-events:none;background:linear-gradient(0deg,var(--c-bg) 8%,color-mix(in srgb,var(--c-bg) 70%,transparent) 55%,transparent)}
}

/* ══ motion kit (picked from the catalogue) ══════ */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}

/* 1. headlines arrive piece by piece */
.section-heading.revealed h2{animation:word-in .9s cubic-bezier(.2,.8,.2,1) both}
.section-heading.revealed h2>span{animation:holo-pan 9s linear infinite,word-in .9s .24s cubic-bezier(.2,.8,.2,1) both}
body.is-booted .hero-line,.anime-page .hero-line{display:inline-block;animation:word-in 1s .15s cubic-bezier(.2,.8,.2,1) both}
body.is-booted .hero-line.hero-gradient,.anime-page .hero-line.hero-gradient{animation:holo-pan 7s linear infinite,word-in 1s .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes word-in{from{opacity:0;filter:blur(14px);translate:0 .35em}}

/* 2. rotating word */
.word-rotator{margin-top:52px;font:900 clamp(21px,3vw,40px)/1.5 var(--display);text-align:center;letter-spacing:-.5px}
.rotator-slot{display:inline-block;height:1.5em;padding:0 .12em;overflow:hidden;vertical-align:bottom}
.rotator-slot b{display:block;height:1.5em;font-weight:900;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:translate .6s cubic-bezier(.7,0,.2,1)}

/* 3. liquid glass */
.hero-transmission.music-card,.hero-hud>span,.site-dock,.music-flyout,.anime-back,.explore-toast{background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 55%),color-mix(in srgb,var(--c-bg-2) 52%,transparent);border-color:rgba(255,255,255,.3);backdrop-filter:blur(22px) saturate(1.9);-webkit-backdrop-filter:blur(22px) saturate(1.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07),0 16px 44px -16px var(--c-shadow)}

/* 4. rotating light ring on one button */
.tv-channel-link{position:relative;isolation:isolate;background:transparent;color:var(--c-text);animation:none;box-shadow:0 0 34px -10px var(--c-pink)}
.tv-channel-link::before{content:'';position:absolute;inset:-2px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--spin),transparent 0 52%,#8dffd9,#ff9be0,#fff09a,transparent 96%);animation:ring-spin 2.8s linear infinite}
.tv-channel-link::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--c-bg-2)}
.tv-channel-link:hover{box-shadow:0 0 44px -6px var(--c-pink)}
.tv-channel-link>span:first-child{background:var(--c-accent);color:var(--c-bg)}
@keyframes ring-spin{to{--spin:360deg}}

/* 5. magnetic buttons */
.is-magnetic{transition:translate .28s cubic-bezier(.2,.8,.2,1)}

/* 6. night lens on the album photo */
.night-lens{position:absolute;inset:0;z-index:1;pointer-events:none;background-size:cover;background-position:center 42%;filter:brightness(.62) saturate(2.2) hue-rotate(-32deg) contrast(1.2);opacity:0;transition:opacity .35s;-webkit-mask:radial-gradient(circle 120px at var(--x,50%) var(--y,50%),#000 62%,transparent 100%);mask:radial-gradient(circle 120px at var(--x,50%) var(--y,50%),#000 62%,transparent 100%)}
.gallery-moon:hover .night-lens{opacity:1}
.gallery-moon.has-lens:hover>img{transform:none;animation:none}
.gallery-moon>span{z-index:2}

/* 7. pointer parallax */
.anime-hero-bg{inset:-26px;width:calc(100% + 52px);height:calc(100% + 52px)}
[data-depth]{transition:translate .25s ease-out}

/* 8. stacking log cards */
.lab-log.can-stack .lab-entry{position:sticky;top:calc(92px + var(--i,0) * 16px);background:var(--c-bg-2);transform-origin:top center;transition:scale .2s linear,filter .2s linear;box-shadow:0 -18px 40px -24px var(--c-shadow)}
.lab-log.can-stack{gap:34px;padding-bottom:40px}

/* 9. ink that lights up as you scroll */
.ink{--lit:1;background:linear-gradient(90deg,var(--c-text) calc(var(--lit) * 100%),color-mix(in srgb,var(--c-muted) 32%,transparent) calc(var(--lit) * 100% + 7%));-webkit-background-clip:text;background-clip:text;color:transparent}

/* 10. second marquee row, running the other way */
.marquee{display:grid;gap:8px}
.marquee>.marquee-rev{animation-direction:reverse;-webkit-text-stroke:1px var(--c-pink)}
.marquee>.marquee-rev span{color:var(--c-mint);text-shadow:0 0 16px var(--c-mint)}

/* 12. depth carousel of the four scenes */
.world-layout.has-carousel .world-photo{display:none}
.scene-carousel{min-width:0}
.scene-cards{position:relative;height:460px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.scene-card{position:absolute;left:13%;top:0;width:74%;height:100%;padding:0;border:1px solid var(--c-border-strong);border-radius:var(--radius);overflow:hidden;background:var(--c-bg-2);transition:translate .7s cubic-bezier(.3,.8,.2,1),scale .7s cubic-bezier(.3,.8,.2,1),opacity .7s,filter .7s,box-shadow .7s}
.scene-card img{width:100%;height:100%;object-fit:cover}
.scene-card .location-tag{left:14px;bottom:14px;transition:opacity .4s}
.scene-card[data-slot="0"]{z-index:3;box-shadow:0 0 0 1px var(--c-border),0 40px 90px -40px var(--c-glow)}
.scene-card[data-slot="1"]{z-index:2;translate:30% 0;scale:.78;opacity:.6;filter:blur(1.5px) saturate(.8)}
.scene-card[data-slot="3"]{z-index:2;translate:-30% 0;scale:.78;opacity:.6;filter:blur(1.5px) saturate(.8)}
.scene-card[data-slot="2"]{z-index:1;scale:.6;opacity:0;pointer-events:none}
.scene-card:not([data-slot="0"]) .location-tag{opacity:0}
.scene-carousel-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}
.scene-carousel-nav button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--c-border-strong);border-radius:50%;background:var(--lavender);color:var(--c-text);font-size:17px;transition:box-shadow .25s,border-color .25s}
.scene-carousel-nav button:hover{border-color:var(--c-mint);box-shadow:0 0 20px -6px var(--c-mint)}
.scene-dots{display:flex;gap:8px}
.scene-dots i{width:7px;height:7px;border-radius:50%;background:var(--c-border-strong);transition:background .3s,scale .3s,box-shadow .3s}
.scene-dots i.is-on{background:var(--c-mint);scale:1.4;box-shadow:0 0 10px var(--c-mint)}

/* 13. star trail */
.trail-spark{position:fixed;z-index:94;pointer-events:none;font-size:15px;line-height:1;color:var(--spark,#ff9be0);text-shadow:0 0 10px currentColor;animation:trail-fall .9s ease-out forwards}
@keyframes trail-fall{to{translate:var(--sx) 56px;rotate:150deg;scale:.3;opacity:0}}

/* 14. film-opening crawl */
.crawl-scene{position:relative;padding:20px 0 0}
.crawl-text{max-width:560px;margin:0 auto;padding:40px 24px;font:900 clamp(20px,2.8vw,34px)/1.9 var(--display);text-align:center;color:var(--c-lemon)}
.crawl-text p+p{margin-top:1.4em}
body:not(.motion-paused) .crawl-stage{position:relative;height:min(62svh,460px);overflow:hidden;perspective:340px;-webkit-mask-image:linear-gradient(transparent,#000 42%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 42%,#000 92%,transparent)}
body:not(.motion-paused) .crawl-text{position:absolute;left:0;right:0;top:100%;padding-block:0;transform-origin:50% 100%;transform:rotateX(40deg);text-shadow:0 0 24px rgba(255,240,154,.45);animation:crawl-up 26s linear infinite}
@keyframes crawl-up{to{top:-190%}}

@media(max-width:800px){.scene-cards{height:400px}}
@media(max-width:560px){.scene-cards{height:320px}.scene-card{left:9%;width:82%}.scene-card[data-slot="1"]{translate:24% 0}.scene-card[data-slot="3"]{translate:-24% 0}.word-rotator{margin-top:36px}.marquee{gap:5px}}

/* ── merry friends ─────────────────────────────── */
.friends{margin-top:70px}
.friends-head{max-width:720px;margin-bottom:30px}
.friends-head .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent)}
.friends-head .eyebrow::before{content:'';width:6px;height:6px;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.friends-head h3{font-size:clamp(24px,3vw,38px);font-weight:900;line-height:1.4}
.friends-head h3>span{background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}
.friends-head>p:last-child{margin-top:14px;font-size:13px;line-height:2.1;color:var(--c-muted)}
.friend{display:flex;flex-direction:column;min-width:0;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:border-color .35s,box-shadow .35s,translate .35s}
.friend:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 40px 90px -40px var(--c-glow);translate:0 -4px}
.friend-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c-bg-2)}
.friend-image>img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:scale .6s}
.friend:hover .friend-image>img{scale:1.04}
.friend-image::after{content:'';position:absolute;inset:10px;pointer-events:none;background:var(--corners);opacity:.9}
.friend-role{position:absolute;right:14px;bottom:14px;z-index:1;padding:5px 12px;border:1px solid var(--c-pink);border-radius:30px;background:color-mix(in srgb,var(--c-bg) 78%,transparent);color:var(--c-pink);font-size:11px;font-weight:700;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 16px -4px var(--c-pink)}
.friend-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.friend-body h4{margin:4px 0 10px;font-family:var(--display);font-size:22px;font-weight:900;line-height:1.4}
.friend-body>p{font-size:12px;line-height:2;color:var(--c-muted)}
.friend-body .model-sheet{margin:18px 0 0}
.friend-body>.model-sheet:last-child{margin-top:auto;padding-top:10px}
.friend-grid .friend-body>p{margin-bottom:18px}
.friend-lead{flex-direction:row;margin-bottom:26px}
.friend-lead .friend-image{flex:0 0 42%;aspect-ratio:auto;min-height:420px}
.friend-lead .friend-image>img{object-position:center 30%}
.friend-lead .friend-body{padding:34px 36px;justify-content:center}
.friend-lead h4{font-size:clamp(28px,3vw,40px)}
.friend-lead .friend-body>p{font-size:13px}
.friend-lead dl{margin-block:22px 0}
.friend-lead .model-sheet{margin-top:24px}
.friend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1100px){.friend-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.friend-lead{flex-direction:column}.friend-lead .friend-image{flex:none;min-height:0;aspect-ratio:1}.friend-lead .friend-body{padding:24px 22px 26px}}
@media(max-width:560px){.friends{margin-top:50px}.friend-grid{grid-template-columns:1fr;gap:18px}.friends-head>p:last-child br{display:none}}
/* The Kabukicho photo is portrait: frame the two of them in the wide hero. */
@media(min-width:561px){.panorama>img[src*="kabukicho-duo"]{object-position:50% 66%}}

/* A friend whose only picture is small: show it at a modest size on a grid backdrop. */
.friend-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.friend-image-mini{display:grid;place-items:center;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--c-border) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--c-border) 23px 24px),var(--c-bg-2)}
.friend-image-mini>img{width:62%;height:auto;object-fit:contain;border-radius:18px;border:1px solid var(--c-border-strong);box-shadow:0 0 50px -12px var(--c-accent)}
@media(max-width:1100px){.friend-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.friend-grid{grid-template-columns:1fr}}
.friend-grid .model-sheet{gap:10px;padding:8px 10px 8px 8px}
.friend-grid .model-sheet img{width:60px;height:44px}
.friend-grid .model-sheet::after{left:8px;top:8px;width:60px}
.friend-grid .model-sheet small{font-size:8px;letter-spacing:1.5px}
.friend-grid .model-sheet b{font-size:11px;margin-top:2px}
.friend-grid .model-sheet i{display:none}

.friend-body>.friend-note{margin:0;padding:12px 14px;border:1px solid var(--c-border);border-radius:12px;background:var(--lavender);font-size:11px;line-height:1.9;color:var(--c-text)}
.friend-note b{display:block;margin-bottom:4px;font:9px var(--mono);letter-spacing:1.5px;color:var(--c-accent)}

.friend-body>.friend-note+.model-sheet{margin-top:14px}
.friend-image>img[src*="yanabisu"]{object-position:center 35%}


/* ── game page ─────────────────────────────────── */
.journal-grid-secondary{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.game-hero .anime-hero-bg{object-position:50% 30%}
.game-hero h1{font-size:clamp(34px,5.2vw,74px)}
.game-subtitle{font-size:.52em;letter-spacing:0}
.game-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.game-free{font:11px var(--mono);letter-spacing:1.5px;color:var(--c-mint)}
.game-specs-wrap{margin-top:-34px;position:relative;z-index:2}
.game-specs{justify-content:center}
.game-specs li{flex:1 1 150px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.game-star{width:96px;height:auto;filter:drop-shadow(0 0 26px var(--c-lemon));animation:levitate 5s ease-in-out infinite}
.game-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:46px;align-items:center}
.game-story-art{position:relative;margin:0;border:1px solid var(--c-border-strong);border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--c-border),0 40px 90px -40px var(--c-glow)}
.game-story-art::after{content:'';position:absolute;inset:12px;pointer-events:none;background:var(--corners)}
.game-story-text p{font-size:14px;line-height:2.1;color:var(--c-muted)}
.game-story-text p+p{margin-top:14px}
.game-story-text .game-quote{margin-top:22px;font-family:var(--display);font-size:clamp(18px,2vw,24px);font-weight:900;color:var(--c-pink);text-shadow:0 0 22px var(--c-pink)}
.game-cast{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.game-cast .friend-image>img{object-position:center 10%}
.game-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.world-card{position:relative;padding:18px 20px 22px;border:1px solid var(--c-border);border-radius:20px;background:radial-gradient(70% 60% at 50% 30%,var(--lavender),transparent 70%),var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transition:border-color .3s,box-shadow .3s,translate .3s}
.world-card:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 30px 70px -35px var(--c-glow);translate:0 -4px}
.world-card img{display:block;width:100%;height:200px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 14px 22px rgba(4,3,14,.5));transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.world-card:hover img{scale:1.07}
.world-card h3{margin:8px 0 4px;font-size:20px;font-weight:900}
.world-card>p:last-child{font-size:12px;color:var(--c-muted)}
.world-card-final{border-color:var(--c-pink);background:radial-gradient(70% 60% at 50% 30%,var(--pink),transparent 70%),var(--c-surface)}
.world-card-final .episode-number{color:var(--c-pink)}
.game-map{position:relative;margin:30px 0 0;border:1px solid var(--c-border-strong);border-radius:var(--radius);overflow:hidden}
.game-map figcaption{position:absolute;left:18px;bottom:18px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:5px;background:color-mix(in srgb,var(--c-bg) 80%,transparent);font:9px var(--mono);letter-spacing:1.5px}
.game-howto{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px;align-items:start}
.game-keys{border:1px solid var(--c-border);border-radius:18px;background:var(--c-surface);overflow-x:auto}
.game-keys table{width:100%;border-collapse:collapse;font-size:13px}
.game-keys th,.game-keys td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--c-border)}
.game-keys tr:last-child>*{border-bottom:0}
.game-keys thead th{font:9px var(--mono);letter-spacing:1.5px;color:var(--c-accent)}
.game-keys tbody th{font-weight:700}
.game-keys td{font-family:var(--mono);color:var(--c-muted)}
.game-tips{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.game-tips li{position:relative;padding:14px 16px 14px 42px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-surface);font-size:13px;line-height:1.9}
.game-tips li::before{content:'✦';position:absolute;left:16px;top:14px;color:var(--c-mint)}
.game-final-cta{margin-top:40px;text-align:center}
@media(max-width:1000px){.game-cast{grid-template-columns:1fr 1fr}.game-worlds{grid-template-columns:1fr 1fr}.game-story,.game-howto{grid-template-columns:1fr;gap:26px}}
@media(max-width:560px){.game-specs-wrap{margin-top:-18px}.game-specs li{flex-basis:40%}.game-worlds{grid-template-columns:1fr 1fr;gap:12px}.world-card{padding:12px 12px 16px}.world-card img{height:120px}.world-card h3{font-size:15px}.game-cast{gap:14px}.game-cast .friend-body{padding:16px}.game-cast .friend-body h4{font-size:18px}.game-star{width:64px}.game-keys th,.game-keys td{padding:11px 12px;font-size:12px}}

/* ── game page: boss profiles, enemies, cut-out portraits ── */
.friend-cutout{background:radial-gradient(70% 60% at 50% 45%,var(--lavender),transparent 72%),var(--c-bg-2)}
.friend-image.friend-cutout>img{object-fit:contain;object-position:center;padding:22px 14px 30px;filter:drop-shadow(0 14px 22px rgba(4,3,14,.45))}
.world-card .episode-number{flex-wrap:wrap;gap:8px}
.world-place{padding:2px 9px;border:1px solid var(--c-border-strong);border-radius:20px;font:700 10px 'Noto Sans JP',sans-serif;letter-spacing:.5px;color:var(--c-text)}
.world-card h3{margin:10px 0 2px}
.world-card>.world-title{font-size:11px;color:var(--c-accent)}
.world-quote{margin-top:10px;font-family:var(--display);font-size:13px;font-weight:800;line-height:1.7;color:var(--c-pink)}
.world-more{margin-top:14px;border-top:1px solid var(--c-border)}
.world-more>summary{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font-size:11px;color:var(--c-muted)}
.world-more>summary span{font-size:15px;color:var(--c-mint)}
.world-more dl{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 0}
.world-more dt{font:9px var(--mono);letter-spacing:1px}
.world-more dd{margin:3px 0 0;font-size:12px;font-weight:500;line-height:1.8}
.game-enemies{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.enemy-card{display:flex;align-items:center;gap:16px;min-width:0;padding:16px 18px;border:1px solid var(--c-border);border-radius:18px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s,translate .3s}
.enemy-card:hover{border-color:var(--c-mint);box-shadow:0 0 30px -10px var(--c-mint);translate:0 -3px}
.enemy-card img{flex:0 0 104px;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(4,3,14,.45));transition:rotate .4s cubic-bezier(.2,.8,.2,1),scale .4s}
.enemy-card:hover img{rotate:-6deg;scale:1.08}
.enemy-card>div{min-width:0}
.enemy-card h3{margin:2px 0 4px;font-size:18px;font-weight:900}
.enemy-place{display:inline-block;padding:1px 9px;border:1px solid var(--c-border-strong);border-radius:20px;font-size:10px;color:var(--c-muted)}
.enemy-card .world-quote{margin-top:8px;font-size:12px}
.enemy-card>div>p:last-child{margin-top:6px;font-size:11px;line-height:1.8;color:var(--c-muted)}
@media(max-width:1000px){.game-enemies{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.game-enemies{grid-template-columns:1fr}.enemy-card img{flex-basis:84px;width:84px;height:84px}.world-quote{font-size:12px}}

/* ── more pages in the navigation ──────────────── */
.site-header #main-nav{gap:22px}
@media(max-width:1280px) and (min-width:1001px){.site-header #main-nav{gap:14px;font-size:11px}.site-header .nav-social{padding:8px 12px}.site-header .brand{width:140px}}
.page-nav{display:flex;align-items:center;gap:6px;margin-right:4px;padding:5px;border:1px solid var(--c-border-strong);border-radius:30px;background:var(--c-surface);font-size:11px;font-weight:700}
.page-nav a{padding:7px 14px;border-radius:24px;white-space:nowrap;transition:background .2s,color .2s}
.page-nav a:hover{background:var(--lavender)}
.page-nav a[aria-current=page]{background:var(--c-accent);color:var(--c-bg)}
.page-nav a::after{display:none}
@media(max-width:760px){.anime-page .site-header{flex-wrap:wrap;row-gap:10px}.page-nav{order:5;width:100%;justify-content:space-between;gap:2px;margin:0;font-size:10px}.page-nav a{flex:1;padding:7px 4px;text-align:center}}

/* ── home: game feature ────────────────────────── */
.game-feature{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;margin-bottom:36px;border:1px solid var(--c-border-strong);border-radius:24px;background:var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;box-shadow:0 50px 110px -60px var(--c-glow)}
.game-feature-art{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:56% 50%}
.game-feature-body{padding:34px 36px}
.game-feature .eyebrow{font-size:9px;color:var(--c-accent);margin-bottom:14px}
.game-feature h3{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.3}
.game-feature h3>span{display:block;margin-top:4px;font-size:.5em;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}
.game-feature-body>p:not(.eyebrow){margin-top:14px;font-size:13px;line-height:2;color:var(--c-muted)}
.game-feature-specs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.game-feature-specs li{padding:4px 12px;border:1px solid var(--c-mint);border-radius:30px;font-size:11px;font-weight:700;color:var(--c-mint)}
.game-feature-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px}
@media(max-width:860px){.game-feature{grid-template-columns:1fr}.game-feature-art{min-height:0;aspect-ratio:16/9}.game-feature-body{padding:24px 22px 28px}}

/* ── game hero: copy at the top, play movie beside it ── */
.game-hero{align-items:flex-start;min-height:0;padding:64px 0 96px}
.game-hero-grid{display:grid;grid-template-columns:minmax(0,auto) clamp(300px,31vw,470px);justify-content:start;gap:48px;align-items:end}
.anime-page .game-hero-grid>*{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) both}
.anime-page .game-hero-grid>.game-play-video{animation-delay:.35s}
.game-hero-text>*+*{margin-top:0}
.game-play-video{position:relative;display:block;border:1px solid var(--c-border-strong);border-radius:18px;overflow:hidden;background:#07061a;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 70px -18px var(--c-accent),0 30px 60px -30px rgba(4,3,14,.8);transition:translate .3s,box-shadow .3s,border-color .3s}
.game-play-video:hover{translate:0 -4px;border-color:var(--c-mint);box-shadow:0 0 0 1px var(--c-mint),0 0 80px -14px var(--c-mint),0 30px 60px -30px rgba(4,3,14,.8)}
.game-play-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.game-play-video::after{content:'';position:absolute;inset:8px;pointer-events:none;background:var(--corners)}
.game-play-tag{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:7px;padding:4px 10px;border-radius:20px;background:rgba(8,7,23,.72);font:9px var(--mono);letter-spacing:1.5px;color:#fff}
.game-play-tag i{width:6px;height:6px;border-radius:50%;background:#ff6fae;box-shadow:0 0 8px #ff6fae;animation:blink 1.2s steps(2) infinite}
.game-play-go{position:absolute;right:12px;bottom:12px;padding:7px 14px;border-radius:30px;background:var(--holo);color:#17123a;font-size:11px;font-weight:800;opacity:0;translate:0 6px;transition:opacity .25s,translate .25s}
.game-play-video:hover .game-play-go,.game-play-video:focus-visible .game-play-go{opacity:1;translate:0 0}
@media(max-width:860px){.game-hero{padding:40px 0 70px}.game-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}.game-hero h1{font-size:clamp(28px,8.4vw,54px)}.game-hero .hero-line{white-space:normal}.game-cta-row{gap:12px}.game-play-video{max-width:520px}.game-play-go{opacity:1;translate:0 0}}

/* ── character portraits with name logos ───────── */
.character-image{height:auto;aspect-ratio:16/10}
.ranpyon .character-image>img,.pyonpy .character-image>img{object-position:center}
.character-logo{position:absolute;left:4%;bottom:5%;z-index:2;width:46%;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(4,3,14,.55));transition:scale .5s cubic-bezier(.2,.8,.2,1),rotate .5s}
.character-logo img{display:block;width:100%;height:auto}
.character:hover .character-logo{scale:1.05;rotate:-2deg}
@media(max-width:560px){.character-logo{width:52%}}

/* ── lab hub: projects and story reels ─────────── */
.lab-hub{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:end}
.lab-projects{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lab-project{position:relative;display:block;border:1px solid var(--c-border-strong);border-radius:20px;overflow:hidden;background:var(--c-bg-2);box-shadow:0 40px 90px -50px var(--c-glow);transition:translate .35s,border-color .35s,box-shadow .35s}
.lab-project:hover{translate:0 -6px;border-color:var(--c-mint);box-shadow:0 0 0 1px var(--c-mint),0 0 50px -14px var(--c-mint)}
.lab-project img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:scale .6s}
.lab-project:hover img{scale:1.05}
.lab-project::after{content:'';position:absolute;inset:10px;pointer-events:none;background:var(--corners)}
.lab-project-body{position:absolute;left:0;right:0;bottom:0;display:grid;gap:6px;justify-items:start;padding:46px 16px 16px;background:linear-gradient(transparent,rgba(8,7,23,.92) 55%);color:#f3efff}
.lab-project-body .big-label{font:700 9px var(--tech);letter-spacing:2.5px;color:#8dffd9}
.lab-project-body b{font-family:var(--display);font-size:17px;font-weight:900;line-height:1.4}
.lab-project-section .lab-specs{margin-bottom:34px}
.lab-project-head{padding-block:90px 34px}
.lab-project-head .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent)}
.lab-project-head .eyebrow::before{content:'';width:6px;height:6px;background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);animation:blink 1.4s steps(2) infinite}
.lab-project-head h2{font-size:clamp(25px,3.5vw,46px);font-weight:900;line-height:1.35}
.lab-project-head h2>span{background:var(--holo-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lab-project-head>p:not(.eyebrow){max-width:640px;margin:14px 0 22px;font-size:13px;line-height:2.1;color:var(--c-muted)}
.reel-chapters{display:grid;gap:26px}
.reel-chapter{padding:24px 0 24px 26px;border:1px solid var(--c-border);border-radius:22px;background:var(--c-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.reel-chapter header{padding-right:26px}
.reel-chapter .big-label{font:700 10px var(--tech);letter-spacing:3px;color:var(--c-accent)}
.reel-chapter h3{margin:8px 0 4px;font-size:clamp(20px,2.4vw,28px);font-weight:900}
.reel-chapter header p{font-size:13px;line-height:1.9;color:var(--c-muted)}
.reel-rail{display:flex;gap:16px;margin-top:20px;padding:4px 26px 12px 0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--c-accent) transparent}
.reel{flex:0 0 196px;margin:0;scroll-snap-align:start}
.reel-media{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:1px solid var(--c-border-strong);border-radius:16px;overflow:hidden;background:#07061a;box-shadow:0 0 40px -18px var(--c-accent);transition:translate .3s,border-color .3s,box-shadow .3s}
.reel:hover .reel-media{translate:0 -4px;border-color:var(--c-mint);box-shadow:0 0 44px -12px var(--c-mint)}
.reel-media video,.reel-media img{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
button.reel-media{cursor:zoom-in}
.reel-media::after{content:'';position:absolute;inset:8px;pointer-events:none;background:var(--corners);opacity:.8}
.reel-tag{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:20px;background:rgba(8,7,23,.75);font:9px var(--mono);letter-spacing:1.5px;color:#fff}
.reel figcaption{margin-top:10px;font-size:12px;font-weight:700;line-height:1.7}
.reel-chapter-next{padding:24px 26px;border-style:dashed}
@media(max-width:860px){.lab-hub{grid-template-columns:1fr}.lab-projects{max-width:520px}.lab-project-head{padding-block:60px 26px}}
@media(max-width:560px){.reel{flex-basis:158px}.reel-chapter{padding:18px 0 18px 18px}.reel-chapter header,.reel-rail{padding-right:18px}.reel figcaption{font-size:11px}.lab-project-body b{font-size:14px}}

/* ── capsule: the finished piece ───────────────── */
.capsule-complete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;margin-bottom:28px;padding:22px;border:1px solid var(--c-mint);border-radius:26px;background:radial-gradient(60% 80% at 15% 50%,var(--mint),transparent 70%),var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--c-border),0 0 70px -24px var(--c-mint)}
.capsule-complete-video{position:relative;width:min(300px,34vw);border:1px solid var(--c-border-strong);border-radius:18px;overflow:hidden;background:#07061a;box-shadow:0 0 60px -18px var(--c-accent)}
.capsule-complete-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.capsule-complete-body h3{margin:12px 0 16px;font-size:clamp(28px,3.6vw,48px);font-weight:900;line-height:1.3}
.capsule-complete-body h3>span{display:block;background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}
.capsule-complete-body>p{max-width:560px;font-size:14px;line-height:2.1;color:var(--c-muted)}
.capsule-complete-body>p+p{margin-top:8px}
.capsule-complete-body .game-quote{margin-top:18px;font-family:var(--display);font-size:clamp(17px,2vw,22px);font-weight:900;color:var(--c-pink);text-shadow:0 0 22px var(--c-pink)}
.capsule-complete-body .episode-meta{margin-top:14px;font:10px var(--mono);letter-spacing:1px;color:var(--c-accent)}
@media(max-width:700px){.capsule-complete{grid-template-columns:1fr;gap:22px;padding:16px}.capsule-complete-video{width:min(260px,70%);margin:0 auto}}

/* ── lab: three projects, capsule 02 stage block ── */
.lab-hub{grid-template-columns:1fr;gap:34px}
.lab-projects{grid-template-columns:repeat(3,1fr)}
.lab-project img{aspect-ratio:4/3}
.capsule-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-color:var(--c-pink);background:radial-gradient(60% 80% at 15% 50%,var(--pink),transparent 70%),var(--c-surface);box-shadow:0 0 0 1px var(--c-border),0 0 70px -24px var(--c-pink)}
.capsule-stage-photo{position:relative;border:1px solid var(--c-border-strong);border-radius:18px;overflow:hidden}
.capsule-stage-photo img{display:block;width:100%;height:auto}
.capsule-stage-photo::after{content:'';position:absolute;inset:10px;pointer-events:none;background:var(--corners)}
@media(max-width:860px){.lab-projects{grid-template-columns:1fr 1fr;max-width:none}.capsule-stage{grid-template-columns:1fr}}
@media(max-width:560px){.lab-projects{grid-template-columns:1fr}}

/* home: game journal card keeps the logo and Pyonpy in a square crop */
.journal-image>img.journal-game-art{object-position:100% 45%}

/* ── floating music player ─────────────────────── */
.music-card.music-float{position:fixed;z-index:34;right:18px;left:auto;bottom:calc(max(17px,env(safe-area-inset-bottom)) + 88px);margin:0;flex:none;width:218px;max-width:calc(100vw - 24px);padding:10px 38px 10px 14px;transform:none;animation:none;transition:width .3s cubic-bezier(.2,.8,.2,1),padding .3s}
.music-card.music-float.is-expanded{width:min(360px,calc(100vw - 24px));padding:16px 18px;max-height:calc(100dvh - 140px);overflow:auto}
.music-card.music-float[hidden],.music-bubble[hidden]{display:none}
body .hero-transmission.music-card.music-float{animation:none;opacity:1;transform:none;translate:none}
.music-float-hide{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--c-border-strong);border-radius:50%;background:transparent;color:var(--c-muted);font-size:14px;line-height:1}
.music-float-hide:hover{color:var(--c-pink);border-color:var(--c-pink)}
.music-float.is-expanded .music-disclosure>summary{padding-right:44px}
.music-float .music-expand-arrow{right:0}
.music-float.is-expanded .music-expand-arrow{right:30px}
.music-float .music-footer{gap:14px}
.music-bubble{position:fixed;z-index:34;right:18px;bottom:calc(max(17px,env(safe-area-inset-bottom)) + 88px);display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--c-border-strong);border-radius:50%;background:color-mix(in srgb,var(--c-bg-2) 80%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--c-accent);font-size:18px;box-shadow:0 12px 34px -12px var(--c-shadow),0 0 26px -10px var(--c-accent)}
.music-bubble .music-dock-light{display:none;position:absolute;top:6px;right:6px}
.music-bubble.is-playing .music-dock-light{display:block}
.music-bubble.is-playing{border-color:var(--c-mint);color:var(--c-mint)}
.music-lyric{margin:10px 0 2px;padding:12px 14px;border:1px solid var(--c-border);border-radius:14px;background:color-mix(in srgb,var(--c-bg) 50%,transparent);min-height:74px;display:grid;align-content:center;gap:4px}
.music-card .music-lyric p,.music-flyout .music-lyric p{margin:0;font-family:var(--display);font-size:15px;font-weight:900;line-height:1.5;color:var(--c-text)}
.music-card .music-lyric [data-music-lyric],.music-flyout .music-lyric [data-music-lyric]{background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.music-lyric [data-music-lyric].is-in{animation:lyric-in .35s cubic-bezier(.2,.8,.2,1)}
.music-card .music-lyric .music-lyric-next,.music-flyout .music-lyric .music-lyric-next{font-family:inherit;font-size:10px;font-weight:500;color:var(--c-muted);min-height:15px}
@keyframes lyric-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:560px){.music-card.music-float,.music-bubble{right:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 84px)}.music-card.music-float{width:204px}}
@media(prefers-reduced-motion:reduce){.music-lyric [data-music-lyric].is-in{animation:none}}

/* ── music page ────────────────────────────────── */
.music-hero{padding-block:70px 10px}
.music-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent)}
.music-hero h1{margin-top:18px;font-size:clamp(34px,5vw,70px);font-weight:900;line-height:1.25;letter-spacing:-1.5px;filter:drop-shadow(0 0 22px var(--c-glow))}
.music-hero .anime-lead{margin-block:18px 26px}
.track{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;padding:28px;border:1px solid var(--c-border-strong);border-radius:26px;background:radial-gradient(70% 90% at 0% 0%,var(--lavender),transparent 70%),var(--c-surface);box-shadow:0 0 0 1px var(--c-border),0 0 80px -30px var(--c-accent)}
.track-side{display:grid;gap:16px;align-content:start}
.track-jacket{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--c-border-strong);border-radius:20px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,255,255,.08) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.08) 20px),linear-gradient(135deg,var(--lavender),var(--pink) 55%,var(--mint))}
.track-jacket::after{content:'';position:absolute;inset:10px;pointer-events:none;background:var(--corners)}
.track-disc{display:grid;place-items:center;width:62%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0b0920 0 3px,#1a1638 3px 5px);box-shadow:0 0 0 2px rgba(255,255,255,.25),0 20px 50px -20px #000}
.track-disc>span{display:grid;place-items:center;width:38%;aspect-ratio:1;border-radius:50%;background:var(--holo);color:#17123a;font-size:26px}
.is-current-track .track-disc{animation:record-spin 6s linear infinite}
.track-jacket-note{position:absolute;left:16px;bottom:14px;font:700 8px var(--tech);letter-spacing:2px;color:var(--c-text);opacity:.8}
.track-play{justify-content:center;width:100%;padding:16px 22px;font-size:15px;cursor:pointer}
.track-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0;font-size:11px;color:var(--c-muted)}
.track-meta a{margin-left:auto;color:var(--c-accent);border-bottom:1px solid var(--c-border-strong)}
.track-downloads{display:grid;gap:10px;padding-top:16px;border-top:1px dashed var(--c-border-strong)}
.track-downloads .big-label,.track-lyrics .big-label{font:700 9px var(--tech);letter-spacing:2.5px;color:var(--c-mint)}
.track-download-main{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--c-mint);border-radius:16px;color:var(--c-text);transition:background .2s,box-shadow .2s,translate .2s}
.track-download-main:hover{background:var(--mint);translate:0 -2px;box-shadow:0 0 30px -10px var(--c-mint)}
.track-download-main>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-mint);color:#0b0920;font-weight:900}
.track-download-main b{display:block;font-size:14px}
.track-download-main small{font-size:10px;color:var(--c-muted)}
.track-download-more{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.track-download-more a{display:inline-block;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:30px;font-size:11px;color:var(--c-muted);transition:color .2s,border-color .2s}
.track-download-more a:hover{color:var(--c-text);border-color:var(--c-accent)}
.track-download-note{margin:0;font-size:10px;color:var(--c-muted)}
.track-lyrics{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-width:0}
.track-lyrics-hint{margin:0;font-size:11px;color:var(--c-muted)}
.lyrics-list{position:relative;display:grid;gap:2px;align-content:start;max-height:620px;overflow-y:auto;padding:14px 10px 40px;border:1px solid var(--c-border);border-radius:18px;background:color-mix(in srgb,var(--c-bg) 45%,transparent);scrollbar-width:thin}
.lyrics-list button{display:block;width:100%;padding:7px 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-family:var(--display);font-size:clamp(15px,1.5vw,19px);font-weight:800;line-height:1.6;color:var(--c-muted);cursor:pointer;transition:color .25s,background .25s,translate .25s}
.lyrics-list button:hover{color:var(--c-text);background:var(--lavender)}
.lyrics-list button.is-current{color:var(--c-text);background:color-mix(in srgb,var(--c-accent) 22%,transparent);translate:6px 0;text-shadow:0 0 18px var(--c-accent)}
.lyric-gap{display:block;height:18px}
.track-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.track-slot{display:grid;gap:8px;padding:26px;border:1px dashed var(--c-border-strong);border-radius:20px;color:var(--c-muted)}
.track-slot .big-label{font:700 9px var(--tech);letter-spacing:2.5px;color:var(--c-accent)}
.track-slot b{font-family:var(--display);font-size:18px}
.music-page main{padding-bottom:120px}
@media(max-width:860px){.track{grid-template-columns:1fr;padding:20px}.track-jacket{max-width:300px;margin-inline:auto;width:100%}.lyrics-list{max-height:420px}}
@media(max-width:560px){.track-slots{grid-template-columns:1fr}.music-hero{padding-block:40px 0}}
.track-timeline{display:grid;gap:4px}
.track-timeline input[type=range]{--range-fill:0%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:0;border:0;background:linear-gradient(90deg,var(--c-accent) var(--range-fill),var(--c-border-strong) var(--range-fill)) center/100% 5px no-repeat;border-radius:5px;cursor:pointer;touch-action:pan-y}
.track-timeline input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--c-text);box-shadow:0 0 0 3px var(--c-accent),0 0 14px var(--c-accent)}
.track-timeline input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:0;background:var(--c-text);box-shadow:0 0 0 3px var(--c-accent),0 0 14px var(--c-accent)}
.track-timeline input[type=range]:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.track-time{display:flex;justify-content:space-between;margin:0;font:700 10px var(--tech);letter-spacing:1px;color:var(--c-muted)}
.track-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:stretch}
.track-controls-main{display:grid;gap:14px;align-content:center;min-width:0}
.track-volume{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;width:48px;padding:8px 0 6px;border:1px solid var(--c-border-strong);border-radius:16px;background:color-mix(in srgb,var(--c-bg) 45%,transparent)}
.track-volume>label{display:flex;flex:1;min-height:0}
.track-volume input[type=range]{--range-fill:30%;display:block;appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:24px;height:auto;min-height:56px;flex:1;margin:0;border:0;background:linear-gradient(to top,var(--c-accent) var(--range-fill),var(--c-border-strong) var(--range-fill)) center/4px 100% no-repeat;border-radius:5px;cursor:pointer;touch-action:none}
.track-volume input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--c-text);box-shadow:0 0 0 3px var(--c-accent),0 0 12px var(--c-accent)}
.track-volume input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:0;background:var(--c-text);box-shadow:0 0 0 3px var(--c-accent),0 0 12px var(--c-accent)}
.track-volume input[type=range]:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.track-volume output{font:700 9px var(--tech);letter-spacing:.5px;color:var(--c-muted)}
.track-volume [data-music-mute]{display:grid;place-items:center;width:28px;height:24px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--c-text);cursor:pointer}
.track-volume [data-music-mute]:hover{background:var(--lavender)}
.track-volume [data-music-mute] svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.track-volume [data-music-mute] svg path:first-child{fill:currentColor}
.track-volume [data-music-mute].is-muted .speaker-wave{opacity:.25}
.track-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.track-compact{grid-template-columns:1fr;gap:18px;align-content:start}
.track-info{display:grid;gap:6px}
.track-info .big-label{margin:0;font:700 9px var(--tech);letter-spacing:2.5px;color:var(--c-mint)}
.track-info h3{margin:0;font-family:var(--display);font-size:clamp(17px,1.8vw,22px);line-height:1.35}
.track-info p:last-child{margin:0;font-size:12px;color:var(--c-muted)}
.track-compact .track-side{order:2}.track-compact .track-info{order:1}
.track-compact .track-jacket{max-width:260px;width:100%;margin-inline:auto}
.track-jacket img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lyrics-static p{margin:0;padding:6px 12px;font-family:var(--display);font-size:clamp(15px,1.5vw,19px);font-weight:800;line-height:1.6;color:var(--c-text)}
.lyrics-part{display:block;margin:14px 12px 2px;font:700 9px var(--tech);letter-spacing:2.5px;color:var(--c-mint)}
.lyrics-part:first-child{margin-top:0}
.track-jacket.has-art::after{display:none}
.is-current-track .track-jacket.has-art{box-shadow:0 0 40px -8px var(--c-accent)}
@media(max-width:860px){.track-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.is-current-track .track-disc{animation:none}}
.bgm-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bgm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px;border:1px solid var(--c-border-strong);border-radius:16px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);transition:border-color .2s,box-shadow .2s}
.bgm-row.is-current-track{border-color:var(--c-accent);box-shadow:0 0 24px -10px var(--c-accent)}
.bgm-play{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--c-accent);border-radius:50%;background:transparent;color:var(--c-text);font-size:14px;cursor:pointer}
.bgm-play:hover,.bgm-row.is-current-track .bgm-play{background:var(--c-accent);color:var(--c-bg)}
.bgm-play:focus-visible,.bgm-download:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.bgm-body{display:grid;gap:2px;min-width:0}
.bgm-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.bgm-title small{font:700 9px var(--tech);letter-spacing:2px;color:var(--c-mint)}
.bgm-title b{font-family:var(--display);font-size:14px;line-height:1.4}
.bgm-row .track-timeline{gap:0}
.bgm-row .track-timeline input[type=range]{height:18px}
.bgm-download{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--c-border-strong);border-radius:999px;color:var(--c-text);font:700 11px var(--tech);letter-spacing:1px;text-decoration:none;white-space:nowrap}
.bgm-download:hover{border-color:var(--c-accent)}
.bgm-download small{font-size:9px;color:var(--c-muted)}
@media(max-width:560px){.bgm-row{grid-template-columns:auto minmax(0,1fr);padding:12px}.bgm-download{grid-column:2;justify-self:start}}

/* ── home: compact character cards, tap for the full profile ── */
.character-grid.is-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.is-cards .character{position:relative;cursor:pointer}
.is-cards .character-image{height:auto;aspect-ratio:16/10}
.is-cards .character-info{padding:20px 22px 22px}
.is-cards .character-info h3{font-size:clamp(20px,2.4vw,28px);margin-bottom:8px}
.is-cards .character-info>p{font-size:12px;line-height:1.9}
.character-open{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 16px;border:1px solid var(--c-border-strong);border-radius:30px;background:color-mix(in srgb,var(--c-bg) 50%,transparent);color:var(--c-text);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,box-shadow .2s}
.character-open span{color:var(--c-mint);font-size:15px;line-height:1}
.character-open::after{content:'';position:absolute;inset:0;z-index:4;border-radius:var(--radius)}
.character:hover .character-open,.character-open:focus-visible{background:var(--lavender);box-shadow:0 0 22px -6px var(--c-accent)}
.is-cards .character-detail{display:none}
.character-dialog{width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-bg-2,#120f26);color:var(--c-text);overflow:hidden}
.character-dialog[open]{display:flex;flex-direction:column}
.character-dialog-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.character-dialog::backdrop{background:rgba(6,5,20,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.character-dialog[open]{animation:character-pop .35s cubic-bezier(.2,.9,.2,1)}
@keyframes character-pop{from{opacity:0;translate:0 24px;scale:.97}}
.character-dialog .character{border:0;border-radius:0;background:transparent;box-shadow:none;cursor:auto}
.character-dialog .character:hover{box-shadow:none}
.character-dialog .character-image{height:auto;aspect-ratio:16/9}
.character-dialog .character-detail{display:block}
.character-dialog-close{position:absolute;top:12px;right:12px;z-index:6;width:40px;height:40px;border:1px solid var(--c-border-strong);border-radius:50%;background:color-mix(in srgb,var(--c-bg) 80%,transparent);color:var(--c-text);font-size:18px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.character-open-lock{overflow:hidden}
@media(max-width:560px){
  .character-grid.is-cards{grid-template-columns:1fr 1fr;gap:12px}
  .is-cards .character-image{aspect-ratio:4/5}
  .is-cards.character-grid .ranpyon .character-image>img{object-position:42% 30%}
  .is-cards.character-grid .pyonpy .character-image>img{object-position:44% 50%}
  .is-cards .character-logo{width:78%;left:8%;bottom:4%}
  .is-cards .character-number{font-size:7px;top:10px;left:10px;padding:3px 6px}
  .is-cards .character-role{font-size:9px;right:8px;top:10px;bottom:auto;padding:4px 8px}
  .is-cards .character-info{padding:14px 12px 14px}
  .is-cards .english-name{font-size:9px;letter-spacing:1px}
  .is-cards .character-info h3{font-size:19px}
  .is-cards .character-info>p{font-size:10px;line-height:1.8}
  .is-cards .character-info>p br{display:none}
  .character-open{width:100%;justify-content:center;padding:8px 10px;font-size:11px}
  .character-dialog{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}
  .character-dialog[open]{animation-name:character-sheet}
  .character-dialog .character-info{padding:22px 20px 30px}
}
@keyframes character-sheet{from{translate:0 100%}}
@media(prefers-reduced-motion:reduce){.character-dialog[open]{animation:none}}

/* ── home: link to the friends page ── */
.friends-teaser{position:relative;display:flex;align-items:center;gap:22px;margin-top:40px;padding:18px 22px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--c-text);text-decoration:none;transition:border-color .3s,box-shadow .3s,translate .3s}
.friends-teaser:hover{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),0 30px 70px -36px var(--c-glow);translate:0 -3px}
.friends-teaser-faces{display:flex;flex:none}
.friends-teaser-faces img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid var(--c-bg-2,#120f26);box-shadow:0 0 0 1px var(--c-border-strong)}
.friends-teaser-faces img+img{margin-left:-18px}
.friends-teaser-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.friends-teaser-copy small{font:10px var(--mono);letter-spacing:1.5px;color:var(--c-accent)}
.friends-teaser-copy b{font-size:clamp(16px,2vw,22px);font-weight:900}
.friends-teaser-copy>span{font-size:12px;color:var(--c-muted)}
.friends-teaser>i{margin-left:auto;font-style:normal;font-size:22px;color:var(--c-mint)}
@media(max-width:560px){.friends-teaser{gap:14px;padding:14px 16px;margin-top:28px}.friends-teaser-faces img{width:44px;height:44px}.friends-teaser-faces img+img{margin-left:-14px}.friends-teaser-copy>span{font-size:10px}}

/* ── friends page ── */
.friends-page-section{padding-top:clamp(40px,7vw,90px)}
.friends-page-section .friends{margin-top:0}
.friends-page-section .friends-head h1{font-size:clamp(28px,4.4vw,52px);font-weight:900;line-height:1.35}
.friends-page-section .friends-head h1>span{background:var(--holo-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo-pan 9s linear infinite}

/* ── sub-page nav: scroll sideways on phones instead of squeezing ── */
@media(max-width:760px){
  .friends-page .site-header{flex-wrap:wrap;row-gap:10px}
  .page-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .page-nav::-webkit-scrollbar{display:none}
  .page-nav a{flex:0 0 auto;padding:7px 13px}
}
.character-dialog .character{animation:none!important;translate:none!important}

/* ── game page: Ranpyon & Pyonpy standing in the dressing room, tap to talk ── */
.duo-scene{display:flex;flex-direction:column}
.duo-stage{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.duo-stage>img{display:block;width:100%;height:auto}
.duo-actor{position:absolute;bottom:4%;z-index:2;height:78%;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 100%;transition:opacity .3s,filter .3s,scale .3s}
.duo-actor img{display:block;height:100%;width:auto;filter:drop-shadow(0 10px 14px rgba(40,20,70,.35))}
.duo-pyon{left:12%;height:66%;animation:duo-idle 2.6s ease-in-out infinite}
.duo-ran{right:12%;animation:duo-idle 2.9s ease-in-out -1.2s infinite}
@keyframes duo-idle{50%{translate:0 -3%}}
@keyframes duo-talk{0%,100%{translate:0 0}50%{translate:0 -5%}}
.duo-actor:focus-visible{outline:2px solid var(--c-mint);outline-offset:4px;border-radius:12px}
.duo-scene.is-talking .duo-actor{opacity:.55;scale:.94;animation:none}
.duo-scene.is-talking .duo-actor.is-speaking{opacity:1;scale:1;animation:duo-talk .5s ease-in-out infinite}
.duo-scene.is-narration .duo-actor{opacity:.75}
.duo-hint{position:absolute;left:50%;top:7%;z-index:3;translate:-50% 0;padding:6px 14px;border:1px solid var(--c-border-strong);border-radius:30px;background:color-mix(in srgb,var(--c-bg) 80%,transparent);color:var(--c-text);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:duo-hint 1.8s ease-in-out infinite}
@keyframes duo-hint{50%{translate:-50% -4px}}
.duo-scene.is-talking .duo-hint{display:none}
.duo-box{position:relative;z-index:2;min-height:118px;padding:16px 20px 18px;border-top:2px solid var(--speaker,#c8b2ff);background:color-mix(in srgb,var(--c-bg-2) 94%,transparent);cursor:pointer;animation:duo-pop .25s ease-out}
.duo-box[hidden]{display:none}
@keyframes duo-pop{from{opacity:0;translate:0 8px}}
.duo-name{margin:0 0 6px;font-size:13px;font-weight:900;color:var(--speaker,#c8b2ff);text-shadow:0 0 14px var(--speaker,#c8b2ff)}
.duo-name:empty{display:none}
.duo-text{margin:0;font-size:14px;line-height:1.9;color:var(--c-text)}
.is-narration .duo-text{color:var(--c-muted);font-style:italic}
.duo-next{position:absolute;right:16px;bottom:10px;font-size:11px;color:var(--speaker,#c8b2ff);opacity:0;animation:duo-blink 1s steps(2) infinite}
.duo-box.is-done:not(.is-last) .duo-next{opacity:1}
@keyframes duo-blink{50%{visibility:hidden}}
.duo-end{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.duo-end[hidden]{display:none}
.duo-end a,.duo-end button{padding:8px 16px;border:1px solid var(--c-border-strong);border-radius:30px;background:var(--lavender);color:var(--c-text);font:inherit;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}
.duo-end a{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}
.duo-scene::after{display:none}
.duo-stage::after{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;background:var(--corners)}
@media(max-width:560px){.duo-box{min-height:104px;padding:12px 14px 16px}.duo-text{font-size:13px;line-height:1.8}.duo-name{font-size:12px}.duo-hint{font-size:10px;padding:5px 11px}.duo-pyon{left:8%}.duo-ran{right:8%}}
@media(prefers-reduced-motion:reduce){.duo-actor,.duo-hint,.duo-scene.is-talking .duo-actor.is-speaking{animation:none}}

/* Phones: the logo in the Moon City picture sits a little right of the image centre, so shift the crop to centre it. */
@media(max-width:560px){.panorama>img[src*="moon-city"]{object-position:54.5% 15%}}

/* ── game page hero: show the key visual and the title logo ── */
.game-hero .anime-hero-shade{background:linear-gradient(90deg,color-mix(in srgb,var(--c-bg) 62%,transparent) 0%,color-mix(in srgb,var(--c-bg) 22%,transparent) 48%,transparent 70%),linear-gradient(0deg,var(--c-bg) 0%,transparent 34%)}
.game-hero .anime-hero-bg{object-position:70% 40%}
.game-title{margin:14px 0 6px!important;line-height:0}
.game-title img{display:block;width:clamp(280px,34vw,540px);height:auto;filter:drop-shadow(0 10px 26px rgba(60,30,120,.45))}
.game-hero .anime-lead{color:var(--c-text);text-shadow:0 1px 12px rgba(10,8,30,.6)}
@media(max-width:860px){
  .game-hero{padding:calc(min(86vw,580px) * .5) 0 56px;background:var(--c-bg)}
  .game-hero .anime-hero-bg{inset:0 0 auto 0;width:100%;height:min(86vw,580px);object-position:62% 50%;animation:none}
  .game-hero .anime-hero-shade{inset:0 0 auto 0;height:min(86vw,580px);background:linear-gradient(0deg,var(--c-bg) 0%,color-mix(in srgb,var(--c-bg) 55%,transparent) 22%,transparent 55%)}
  .game-title{display:flex;justify-content:center;margin:10px 0 18px!important}
  .game-title img{width:min(88%,440px)}
}
.game-guide-link{flex-basis:100%;color:var(--c-accent);font-size:13px;font-weight:800;text-decoration:none}

/* Phones: title logo sits small in the empty sky, left of Pyonpy, so he stays visible. */
@media(max-width:860px){
  .game-hero{padding-top:calc(min(86vw,580px) - 24px)}
  .game-hero .section-wrap,.game-hero .game-hero-grid,.game-hero .game-hero-text{position:static;transform:none;translate:none;filter:none}
  .anime-page .game-hero .game-hero-grid>.game-hero-text{animation:none}
  .game-hero .game-title{position:absolute;z-index:2;top:calc(min(86vw,580px) * .07);left:5%;width:62%;max-width:380px;margin:0!important;justify-content:flex-start}
  .game-hero .game-title img{width:100%}
}