:root{
  --bg:#0a0909;
  --bg2:#100e0e;
  --fg:#ecebe8;
  --mute:#8d8a86;
  --dim:#55524f;
  --line:rgba(236,235,232,.13);
  --line2:rgba(236,235,232,.07);
  --red:oklch(0.60 0.22 27);
  --red-a:oklch(0.60 0.22 27 / .35);
  --sans:'Geist','Noto Sans JP',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --jp:'Noto Sans JP','Geist',sans-serif;
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;scrollbar-width:thin;scrollbar-color:#2a2727 var(--bg)}
body{font-family:var(--sans);font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

/* ---------- fixed chrome ---------- */
.chrome{position:fixed;inset:0;pointer-events:none;z-index:50}
.chrome > *{pointer-events:auto}
.mark{position:absolute;left:var(--pad);top:22px;font:400 12px/1 var(--mono);letter-spacing:.14em;display:flex;gap:10px;align-items:center}
.mark i{width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 10px var(--red);opacity:.55;transition:opacity .5s ease,box-shadow .5s ease,transform .5s ease}
.mark i.flash{opacity:1;transform:scale(calc(1 + .3 * var(--fs,1)));box-shadow:0 0 6px #fff,0 0 14px var(--red),0 0 28px var(--red);transition-duration:.06s}
.nav{position:absolute;right:var(--pad);top:22px;display:flex;gap:clamp(14px,2.4vw,36px);font:400 11px/1 var(--mono);letter-spacing:.18em}
.nav a{color:var(--mute);transition:color .3s;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--red);transition:right .4s}
.nav a:hover,.nav a.on{color:var(--fg)}
.nav a:hover::after,.nav a.on::after{right:0}
.skip{position:absolute;left:var(--pad);bottom:22px;font:400 10px/1 var(--mono);letter-spacing:.18em;color:var(--mute);transition:opacity .5s}
.skip:hover{color:var(--fg)}

/* ---------- intro ---------- */
#intro{position:relative;height:520vh}
.autoplay{position:absolute;right:var(--pad);bottom:22px;display:flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);color:var(--mute);padding:9px 14px;font:400 10px/1 var(--mono);letter-spacing:.2em;cursor:pointer;pointer-events:auto;transition:color .3s,border-color .3s}
.autoplay:hover,.autoplay.on{color:var(--fg);border-color:oklch(0.6 0.22 27 / .6)}
.autoplay .pl{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.autoplay .pz{width:7px;height:9px;border-left:2px solid var(--red);border-right:2px solid var(--red)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#070606}
.viewport{position:absolute;inset:0;perspective:900px;perspective-origin:50% 46%}
.world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.curtain{pointer-events:none}
.o{position:absolute;left:0;top:0;transform-style:preserve-3d}

.floor{background:
  repeating-linear-gradient(to bottom, rgba(236,235,232,.10) 0 1px, transparent 1px 160px),
  linear-gradient(to right, transparent 0 calc(50% - .5px), rgba(236,235,232,.10) calc(50% - .5px) calc(50% + .5px), transparent 0),
  linear-gradient(to bottom, #050404, #0d0b0b);
}
.wall{background:
  repeating-linear-gradient(to right, rgba(236,235,232,.07) 0 1px, transparent 1px 320px),
  repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), rgba(236,235,232,.05) calc(25% - 1px) 25%),
  linear-gradient(#080707,#0b0909);
}
.floor,.wall{-webkit-mask-image:var(--mask);mask-image:var(--mask)}
.edge{background:linear-gradient(to bottom,transparent,var(--red) 50%,transparent);filter:drop-shadow(0 0 6px var(--red))}
.streak{background:linear-gradient(to bottom,transparent,oklch(0.68 0.24 27) 60%,#fff 98%,transparent);box-shadow:0 0 18px 2px var(--red-a)}
.wallglow{background:linear-gradient(to top, var(--red-a), transparent 40%);opacity:.5}

.endwall{background:radial-gradient(ellipse at 50% 70%, oklch(0.45 0.2 27 / .55), transparent 60%), #060505;border-top:1px solid var(--line2)}

.act-floor{font:200 120px/1 var(--sans);letter-spacing:.06em;color:var(--fg);white-space:nowrap;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.act-floor small{font:400 22px/1 var(--mono);letter-spacing:.3em;color:var(--red)}
.act-floor .rule{width:100%;height:1px;background:var(--line)}

.panel{border:1px solid var(--line);background:#0a0909;overflow:hidden}
.panel canvas{display:block;width:100%;height:100%}
.panel .panel-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.panel .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;font:400 11px/1.3 var(--mono);letter-spacing:.14em;color:var(--fg);background:linear-gradient(transparent,rgba(0,0,0,.7))}
.panel .cap span:last-child{color:var(--mute)}
.panel .scan{position:absolute;inset:0;background:var(--bg);transform-origin:top}

.liv{display:flex;flex-direction:column;align-items:center}
.liv .head{border-radius:50%;background:#030202;box-shadow:0 0 0 1px oklch(0.6 0.22 27 / .8),0 0 40px 6px var(--red-a)}
.liv .body{background:#030202;border-radius:46% 46% 6% 6% / 30% 30% 4% 4%;box-shadow:0 0 0 1px oklch(0.6 0.22 27 / .55),0 -10px 60px 6px var(--red-a)}
.liv .liv-img{display:block;object-fit:contain;filter:brightness(.82) contrast(1.05) drop-shadow(0 0 1px oklch(0.6 0.22 27 / .9)) drop-shadow(0 0 22px oklch(0.6 0.22 27 / .45))}
.liv .lbl{display:none;margin-top:18px;font:400 13px/1 var(--mono);letter-spacing:.4em;color:var(--fg)}
.halo{border-radius:50%;background:radial-gradient(circle, oklch(0.55 0.22 27 / .55), transparent 65%)}

.frag{border:1px solid var(--line);background:rgba(10,9,9,.85);overflow:hidden}
.frag canvas{display:block;width:100%;height:100%}
.frag .cap{position:absolute;left:10px;bottom:9px;right:10px;font:400 10px/1.3 var(--mono);letter-spacing:.14em;display:flex;justify-content:space-between}
.frag .cap em{font-style:normal;color:var(--mute)}
.frag.txt{background:transparent;border:none;border-top:1px solid var(--red);padding-top:10px;font:400 11px/1.6 var(--mono);letter-spacing:.12em;color:var(--mute)}
.frag.txt b{display:block;color:var(--fg);font-weight:400}

/* overlays */
.ov{position:absolute;inset:0;pointer-events:none}
#noise{width:100%;height:100%;image-rendering:pixelated;mix-blend-mode:screen;opacity:0}
#parts{width:100%;height:100%}
.vign{background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.75))}
.hlines i{position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:center}
.hlines i.r{background:oklch(0.6 0.22 27 / .7)}

.logo{font:300 clamp(18px,6.4vw,104px)/1 var(--sans);letter-spacing:.04em;white-space:nowrap}
.logo .c{color:var(--red)}
.logo .e{font-weight:200}
.logo sup{font-size:.28em;vertical-align:top;position:relative;top:.25em;margin-left:.08em;font-weight:400}
.logo-img{margin:0;line-height:0}
.logo-img img{display:block;width:clamp(260px,52vw,820px);height:auto;filter:drop-shadow(0 0 28px oklch(0.6 0.22 27 / .28))}
#ov-final .logo-img img{width:clamp(240px,44vw,700px)}
#ov-logo,#ov-final,#ov-lines,#hud-act{will-change:opacity,transform}
.panel,.frag,.act-floor{will-change:transform,opacity}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.sub{font:400 11px/1 var(--mono);letter-spacing:.42em;color:var(--mute)}
.enter{font:300 clamp(13px,1.2vw,16px)/1 var(--sans);letter-spacing:.6em;padding-left:.6em}
#ov-final .enter-jp{margin-top:-14px}
#ov-final .enter-btn{margin-top:4px}
.enter-jp{font:200 clamp(14px,1.5vw,20px)/2.2 'Noto Serif JP',serif;letter-spacing:.18em;color:var(--fg);padding:0 var(--pad);text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.enter-btn{pointer-events:auto;margin-top:16px;display:inline-flex;gap:14px;align-items:center;border:1px solid var(--line);padding:14px 26px;font:400 11px/1 var(--mono);letter-spacing:.28em;transition:border-color .3s,background .3s}
.enter-btn:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}
.enter-btn i{width:18px;height:1px;background:var(--red)}

.hud-act{display:none !important}
.hud-act-old{position:absolute;left:var(--pad);bottom:56px;font:400 11px/1.7 var(--mono);letter-spacing:.18em;color:var(--mute)}
.hud-act b{display:block;font:300 28px/1.1 var(--sans);letter-spacing:.06em;color:var(--fg);margin-bottom:4px}
.hud-act b span{color:var(--red)}
.rail{position:absolute;right:var(--pad);top:50%;height:40vh;transform:translateY(-50%);width:1px;background:var(--line);pointer-events:auto}
.rail .fill{position:absolute;left:0;top:0;width:1px;background:var(--red)}
.rail button{position:absolute;right:-4px;width:9px;height:9px;border:1px solid var(--mute);background:#070606;transform:translateY(-50%) rotate(45deg);cursor:pointer;padding:0}
.rail button.on{border-color:var(--red);background:var(--red)}
.rail button span{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:right center;font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--mute);white-space:nowrap}
.cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font:400 10px/1 var(--mono);letter-spacing:.32em;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:12px}
.cue i{width:1px;height:36px;background:linear-gradient(var(--red),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- content sections ---------- */
.sec{position:relative;padding:clamp(96px,14vw,200px) var(--pad);border-top:1px solid var(--line);background:var(--bg)}
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:var(--pad);align-items:end;margin-bottom:clamp(56px,8vw,120px)}
.idx{font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--mute);display:flex;gap:16px;align-items:center}
.idx i{width:28px;height:1px;background:var(--red)}
.h2{font:200 clamp(44px,8vw,132px)/.92 var(--sans);letter-spacing:-.01em}
.lead{font:300 15px/2 var(--jp);color:var(--mute);max-width:34em;text-wrap:pretty}
.tbd{font-family:var(--mono);font-size:.82em;letter-spacing:.06em;color:var(--red);border:1px dashed oklch(0.6 0.22 27 / .5);padding:1px 6px;white-space:nowrap}

.acts{border-top:1px solid var(--line)}
/* reel collage */
.reel{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g,24px);row-gap:clamp(48px,7vw,110px);align-items:start;margin-bottom:clamp(80px,10vw,160px);--g:clamp(14px,1.6vw,24px)}
.clip{margin:0;margin-top:var(--y,0);will-change:translate}
.clip .frame{position:relative;overflow:hidden;background:#0c0a0a;border:1px solid var(--line2)}
.clip .m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.88) contrast(1.05) saturate(.9);animation:kb1 24s ease-in-out infinite alternate;transform-origin:50% 50%}
.clip .kb1{animation-name:kb1}.clip .kb2{animation-name:kb2}.clip .kb3{animation-name:kb3}.clip .kb4{animation-name:kb4}
@keyframes kb1{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-3%,-2%)}}
@keyframes kb2{from{transform:scale(1.14) translate(2%,1%)}to{transform:scale(1.04) translate(-1%,-1%)}}
@keyframes kb3{from{transform:scale(1.06) translate(0,2%)}to{transform:scale(1.18) translate(0,-2%)}}
@keyframes kb4{from{transform:scale(1.1) translate(-2%,0)}to{transform:scale(1.1) translate(2%,0)}}
.clip .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.6}
.clip .tc{position:absolute;left:10px;top:10px;z-index:2;display:flex;align-items:center;gap:7px;font:400 9.5px/1 var(--mono);letter-spacing:.14em;color:rgba(236,235,232,.85);text-shadow:0 0 6px rgba(0,0,0,.8)}
.clip .tc i{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}
.clip figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font:400 10px/1 var(--mono);letter-spacing:.18em}
.clip figcaption em{font-style:normal;color:var(--mute)}
.clip:hover .m{filter:brightness(1) contrast(1.05) saturate(1)}
.acts-compact{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.act-c{padding:clamp(28px,3vw,44px) clamp(16px,2vw,32px) clamp(28px,3vw,44px) 0;border-right:1px solid var(--line)}
.act-c + .act-c{padding-left:clamp(16px,2vw,32px)}
.act-c:last-child{border-right:none}
.act-c .n{font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--red);margin-bottom:22px}
.act-c h3{font:200 clamp(32px,3.4vw,56px)/1 var(--sans);letter-spacing:.02em;margin-bottom:14px}
.act-c p{font:300 14px/2 var(--jp);color:var(--mute)}
.act-row{display:grid;grid-template-columns:120px 1fr 1.25fr;gap:var(--pad);padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line);align-items:start}
.act-row .n{font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--red);padding-top:12px}
.act-row h3{font:200 clamp(36px,4.6vw,72px)/1 var(--sans);letter-spacing:.02em;margin-bottom:24px}
.act-row p{font:300 14px/2 var(--jp);color:var(--mute);margin-top:14px}
.act-row .img{aspect-ratio:16/9;border:1px solid var(--line);position:relative;overflow:hidden}
.act-row .img canvas{width:100%;height:100%;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.act-row:hover .img canvas{transform:scale(1.03)}
.img .ph{position:absolute;left:12px;bottom:10px;font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--mute)}

.chars{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.char{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 18px 22px;position:relative}
.char .pic{aspect-ratio:3/4;position:relative;overflow:hidden;background:#0c0a0a;margin-bottom:18px}
.char .pic canvas{width:100%;height:100%;display:block}
.char .sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:52%;height:78%;display:flex;flex-direction:column;align-items:center}
.char .sil .h{width:38%;aspect-ratio:1;border-radius:50%;background:#030202;box-shadow:0 0 0 1px oklch(0.6 0.22 27 / .6),0 0 30px oklch(0.6 0.22 27 / .35)}
.char .sil .b{flex:1;width:100%;margin-top:6%;background:#030202;border-radius:46% 46% 0 0 / 26% 26% 0 0;box-shadow:0 0 0 1px oklch(0.6 0.22 27 / .45)}
.char .k{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--mute)}
.char h4{font:300 26px/1.1 var(--sans);letter-spacing:.06em;margin:10px 0 10px}
.char p{font:300 13px/1.9 var(--jp);color:var(--mute)}
.char .char-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:brightness(.92) contrast(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.char:hover .char-img{transform:scale(1.03)}
.char.main .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,9,.55),transparent 35%);pointer-events:none}
.char.main h4{font-size:44px;font-weight:200}

.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:stretch}
.world-vis{aspect-ratio:4/5;border:1px solid var(--line);position:relative;overflow:hidden}
.world-vis canvas{width:100%;height:100%;display:block}
.defs{border-top:1px solid var(--line)}
.def{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.def dt{font:400 11px/1.6 var(--mono);letter-spacing:.2em;color:var(--mute)}
.def dd{font:300 15px/1.9 var(--jp)}
.def dd .big{display:block;font:200 clamp(32px,3.6vw,56px)/1 var(--sans);letter-spacing:.02em;margin-bottom:12px}
.def dd .big b{color:var(--red);font-weight:200}

.watch-frame{aspect-ratio:16/9;border:1px solid var(--line);position:relative;overflow:hidden;cursor:pointer}
.watch-frame canvas{width:100%;height:100%;display:block}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px}
.play .ring{width:96px;height:96px;border-radius:50%;border:1px solid rgba(236,235,232,.4);display:flex;align-items:center;justify-content:center;transition:border-color .4s,transform .6s}
.play .ring i{width:0;height:0;border-left:14px solid var(--fg);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.watch-frame:hover .ring{border-color:var(--red);transform:scale(1.06)}
.play span{font:400 10px/1 var(--mono);letter-spacing:.3em;color:var(--mute)}
.watch-meta{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin-top:0}
.watch-meta div{padding:26px 0;border-right:1px solid var(--line);padding-right:20px}
.watch-meta div + div{padding-left:24px}
.watch-meta div:last-child{border-right:none}
.watch-meta dt{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--mute);margin-bottom:14px}
.watch-meta dd{font:300 15px/1.6 var(--jp)}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:clamp(64px,8vw,120px);flex-wrap:wrap}
.cta-row .logo{font-size:clamp(28px,4.4vw,64px)}
.btn{display:inline-flex;align-items:center;gap:16px;padding:18px 30px;border:1px solid var(--red);font:400 11px/1 var(--mono);letter-spacing:.28em;transition:background .3s}
.btn:hover{background:var(--red)}
.btn i{width:22px;height:1px;background:currentColor}

footer{padding:40px var(--pad) 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:400 10px/1.8 var(--mono);letter-spacing:.18em;color:var(--dim)}

.rv{opacity:0;transform:translateY(24px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:820px){
  .nav{gap:14px;font-size:9.5px;letter-spacing:.12em}
  .mark span{display:none}
  .sec-head{grid-template-columns:1fr;gap:28px}
  .act-row{grid-template-columns:1fr;gap:18px}
  .reel{grid-template-columns:repeat(6,1fr);row-gap:28px}
  .clip{margin-top:0 !important}
  .clip:nth-child(8n+1){grid-column:1 / -1 !important}
  .clip:nth-child(8n+2){grid-column:1 / span 3 !important}
  .clip:nth-child(8n+3){grid-column:4 / span 3 !important;margin-top:18vw !important}
  .clip:nth-child(8n+4){grid-column:1 / -1 !important}
  .clip:nth-child(8n+5){grid-column:2 / span 2 !important}
  .clip:nth-child(8n+6){grid-column:4 / span 3 !important}
  .clip:nth-child(8n+7){grid-column:1 / span 5 !important}
  .clip:nth-child(8n+8){grid-column:4 / span 3 !important}
  .acts-compact{grid-template-columns:1fr}
  .act-c,.act-c + .act-c{padding:28px 0;border-right:none;border-bottom:1px solid var(--line)}
  .act-row .n{padding-top:0}
  .chars{grid-template-columns:1fr 1fr}
  .char.main{grid-column:1 / -1}
  .world-grid{grid-template-columns:1fr}
  .def{grid-template-columns:1fr;gap:10px}
  .watch-meta{grid-template-columns:1fr}
  .watch-meta div,.watch-meta div + div{border-right:none;border-bottom:1px solid var(--line);padding:20px 0}
  .watch-meta div:last-child{border-bottom:none}
  .rail{height:30vh}
  .rail button span{display:none}
  .hud-act{bottom:60px}
  .hud-act b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ .cue i,.clip .m{animation:none} }

/* ---------- THREE ACTS : film-strip gallery ---------- */
.as{position:relative;background:var(--bg);border-top:1px solid var(--line)}
.as-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.as-lines{position:absolute;inset:0;pointer-events:none}
.as-lines i{position:absolute;left:0;right:0;height:1px;background:var(--line2)}
.as-lines i:nth-child(1){top:12%}.as-lines i:nth-child(2){top:24%}.as-lines i:nth-child(3){top:36%}
.as-lines i:nth-child(4){top:50%;background:oklch(0.6 0.22 27 / .28)}
.as-lines i:nth-child(5){top:64%}.as-lines i:nth-child(6){top:76%}.as-lines i:nth-child(7){top:88%}
.as-head{position:absolute;left:var(--pad);top:clamp(72px,10vh,110px);display:flex;flex-direction:column;gap:16px;z-index:6}
.as-title{font:200 clamp(30px,3.6vw,56px)/1 var(--sans);letter-spacing:.01em}
.as-acts{position:absolute;right:var(--pad);top:clamp(80px,11vh,120px);display:flex;gap:clamp(14px,2vw,28px);z-index:6}
.as-acts button{background:none;border:none;color:var(--mute);font:400 11px/1 var(--mono);letter-spacing:.2em;cursor:pointer;padding:6px 0;position:relative;transition:color .3s}
.as-acts button i{position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);transition:right .5s}
.as-acts button.on{color:var(--fg)}.as-acts button.on i{right:0}
.as-strip{position:absolute;left:0;right:0;top:50%;height:0}
.as-item{position:absolute;left:0;top:0;cursor:pointer;will-change:transform,width,height}
.as-main{position:absolute;inset:0;overflow:hidden;background:#0c0a0a;outline:1px solid rgba(236,235,232,calc(.06 + .1 * var(--e)))}
.as-main img,.as-main canvas,.as-sat img,.as-sat canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.as-main img,.as-main canvas{filter:grayscale(calc(.75 - .75 * var(--e))) brightness(calc(.6 + .35 * var(--e)))}
.as-main::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);opacity:calc(.5 * var(--e))}
.as-yt{position:absolute;inset:0;pointer-events:none}
.as-yt iframe{position:absolute;left:50%;top:50%;width:140%;height:140%;transform:translate(-50%,-50%);border:0}
.as-tc,.as-ph,.as-play{opacity:calc((var(--e) - .7) * 3.4);transition:none}
.as-tc{position:absolute;left:10px;top:10px;z-index:2;display:flex;align-items:center;gap:7px;font:400 9.5px/1 var(--mono);letter-spacing:.14em;color:rgba(236,235,232,.9);text-shadow:0 0 6px #000}
.as-tc i{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);animation:rec 1.6s steps(1) infinite}
.as-ph{position:absolute;right:10px;top:10px;z-index:2;font:400 9px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
.as-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:1px solid rgba(236,235,232,.5);display:flex;align-items:center;justify-content:center;z-index:2;backdrop-filter:blur(2px)}
.as-play i{width:0;height:0;border-left:11px solid var(--fg);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.as-item:hover .as-play{border-color:var(--red)}
.as-sat{position:absolute;overflow:hidden;opacity:calc(var(--e) * .85);pointer-events:none;outline:1px solid var(--line2);background:#0c0a0a}
.as-sat img,.as-sat canvas{filter:grayscale(.4) brightness(.7)}
.as-sat.s1{width:28%;height:38%;left:-26%;top:-12%;transform:translate(calc(-30% * var(--e)),calc(-25% * var(--e)))}
.as-sat.s2{width:26%;height:30%;left:-14%;top:72%;transform:translate(calc(-40% * var(--e)),calc(30% * var(--e)))}
.as-sat.s3{width:22%;height:28%;left:86%;top:-24%;transform:translate(calc(30% * var(--e)),calc(-30% * var(--e)))}
.as-sat.s4{width:18%;height:22%;left:30%;top:104%;transform:translate(0,calc(40% * var(--e)))}
.as-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vh,64px);display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:end;border-top:1px solid var(--line);padding-top:18px;z-index:6}
.as-n{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--red)}
.as-capc b{display:block;font:200 clamp(26px,2.6vw,40px)/1 var(--sans);letter-spacing:.04em;margin-bottom:10px}
.as-capc span{font:300 13px/1.6 var(--jp);color:var(--mute)}
.as-watch{display:inline-flex;align-items:center;gap:12px;font:400 10px/1 var(--mono);letter-spacing:.22em;border:1px solid var(--line);padding:12px 16px;transition:border-color .3s,background .3s;cursor:pointer}
.as-watch i{width:18px;height:1px;background:var(--red)}
.as-watch:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}
.as-watch.off{opacity:.35;cursor:default;pointer-events:none}
.as-hint{position:absolute;left:50%;top:clamp(80px,11vh,120px);transform:translateX(-50%);font:400 9.5px/1 var(--mono);letter-spacing:.3em;color:var(--dim)}
.yt-lb{position:fixed;inset:0;z-index:100;background:rgba(5,4,4,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.yt-lb.open{opacity:1;pointer-events:auto}
.lb-body{width:min(88vw,calc(80vh * 16 / 9));aspect-ratio:16/9;border:1px solid var(--line);background:#000;position:relative}
.lb-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font:400 12px/2.2 var(--mono);letter-spacing:.2em}
.lb-x{position:absolute;top:22px;right:var(--pad);background:none;border:none;color:var(--fg);font:400 11px/1 var(--mono);letter-spacing:.22em;cursor:pointer}
@media (max-width:820px){
  .as-hint{display:none}
  .as-acts{top:auto;bottom:calc(clamp(28px,6vh,64px) + 120px);left:var(--pad);right:auto}
  .as-cap{grid-template-columns:1fr auto;gap:14px}
  .as-n{grid-column:1 / -1}
  .as-sat{display:none}
}

/* ---------- responsive refinements ---------- */
br.sp{display:none}
.menu-btn{display:none}
.stage,.as-stage{height:100vh;height:100dvh}
img{max-width:100%}

/* tablet */
@media (max-width:1100px){
  .chars{grid-template-columns:1fr 1fr}
  .char.main{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end}
  .char.main .pic{margin-bottom:0}
  .world-grid{gap:40px}
}

/* phone */
@media (max-width:820px){
  :root{--pad:20px}
  br.sp{display:inline}
  .mark span{display:inline;font-size:10px;letter-spacing:.12em}
  /* nav → overlay menu */
  .menu-btn{display:flex;position:absolute;right:var(--pad);top:14px;align-items:center;gap:10px;background:none;border:none;color:var(--fg);font:400 10px/1 var(--mono);letter-spacing:.22em;padding:8px 0;min-height:44px;cursor:pointer;z-index:2}
  .menu-btn i{width:18px;height:1px;background:var(--red);box-shadow:0 5px 0 var(--red);transition:transform .3s,box-shadow .3s}
  body.menu-open .menu-btn i{transform:rotate(45deg) translate(2px,2px);box-shadow:none}
  .nav{position:fixed;inset:0;top:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:0 var(--pad);background:rgba(7,6,6,.96);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s;font-size:inherit}
  body.menu-open .nav{opacity:1;pointer-events:auto}
  .nav a{font:200 clamp(40px,12vw,64px)/1.15 var(--sans);letter-spacing:.02em;color:var(--fg);padding:8px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a::after{display:none}
  body.menu-open .chrome .mark{z-index:3;position:absolute}

  /* intro */
  .logo-img img{width:min(78vw,420px)}
  #ov-final .logo-img img{width:min(74vw,400px)}
  .enter-jp{font-size:13.5px;line-height:2.1;letter-spacing:.12em;padding:0 16px}
  #ov-final{gap:18px}
  .cue{bottom:76px}
  .skip{bottom:calc(18px + env(safe-area-inset-bottom))}
  .autoplay{bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 12px;min-height:40px}
  .rail{right:12px}

  /* acts strip */
  .as-head{top:76px;gap:10px}
  .as-title{font-size:30px}
  .as-acts{gap:18px}
  .as-acts button{min-height:40px;padding:10px 0}
  .as-cap{bottom:calc(20px + env(safe-area-inset-bottom));padding-top:14px}
  .as-capc b{font-size:24px;margin-bottom:6px}
  .as-capc span{font-size:12px}
  .as-watch{padding:12px;font-size:9px;letter-spacing:.16em}
  .as-play{width:50px;height:50px;margin:-25px 0 0 -25px}

  /* content */
  .sec{padding:88px var(--pad)}
  .sec-head{margin-bottom:48px}
  .h2{font-size:clamp(44px,13vw,72px)}
  .char.main{display:block}
  .char.main .pic{margin-bottom:18px}
  .char{padding:12px 12px 18px}
  .char h4{font-size:20px}
  .char.main h4{font-size:36px}
  .char p{font-size:12px}
  .world-vis{aspect-ratio:4/3}
  .def dd .big{font-size:36px}
  .watch-frame .play .ring{width:68px;height:68px}
  .play span{font-size:9px;letter-spacing:.2em;text-align:center;padding:0 16px}
  .cta-row{flex-direction:column;align-items:flex-start;gap:28px}
  .cta-row .logo{font-size:clamp(24px,8vw,40px)}
  .btn{width:100%;justify-content:center;min-height:52px}
  footer{flex-direction:column;gap:8px}
  .lb-body{width:94vw}
  .lb-x{top:16px;min-height:44px}
}

/* small phones */
@media (max-width:380px){
  .mark span{display:none}
  .as-cap{grid-template-columns:1fr}
  .as-watch{justify-self:start}
  .chars{grid-template-columns:1fr}
}

/* short landscape screens */
@media (max-height:520px) and (orientation:landscape){
  .as-hint,.cue{display:none}
  .as-head{top:56px;flex-direction:row;align-items:baseline;gap:18px}
  .as-title{font-size:24px}
  .as-acts{top:60px;bottom:auto;right:var(--pad);left:auto}
  .as-cap{bottom:12px;padding-top:10px}
  .as-capc b{font-size:20px}
  .as-capc span{display:none}
  .rail{display:none}
  .enter-jp{font-size:12px;line-height:1.8}
  #ov-final .logo-img img{width:min(44vw,360px)}
}

/* ---------- Three Acts : slider + arrows ---------- */
.as-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.as-stage.dragging,.as-stage.dragging *{cursor:grabbing !important}
.as-strip{cursor:grab}
.as-arrow{position:absolute;top:50%;z-index:7;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid var(--line);background:rgba(10,9,9,.55);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s,opacity .3s,background .3s}
.as-arrow i{width:10px;height:10px;border-top:1px solid var(--fg);border-left:1px solid var(--fg)}
.as-arrow.prev{left:calc(var(--pad) - 6px)}.as-arrow.prev i{transform:translateX(2px) rotate(-45deg)}
.as-arrow.next{right:calc(var(--pad) - 6px)}.as-arrow.next i{transform:translateX(-2px) rotate(135deg)}
.as-arrow:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .14)}
.as-arrow.dis{opacity:.2;pointer-events:none}
.as-slider{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(clamp(28px,6vh,64px) + 96px);display:flex;align-items:center;gap:16px;z-index:7}
.as-slider.single{opacity:.35;pointer-events:none}
.as-sl-l{font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--mute);white-space:nowrap}
.as-track{position:relative;flex:1;height:28px;cursor:pointer;touch-action:none}
.as-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.as-fill{position:absolute;left:0;top:50%;height:1px;background:var(--red);box-shadow:0 0 8px var(--red-a)}
.as-ticks{position:absolute;inset:0}
.as-ticks button{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(45deg);border:1px solid var(--mute);background:var(--bg);padding:0;cursor:pointer}
.as-ticks button:hover{border-color:var(--fg)}
.as-thumb{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;transform:rotate(45deg);background:var(--red);box-shadow:0 0 0 4px rgba(10,9,9,.9),0 0 14px var(--red);cursor:grab;outline:none;transition:transform .2s}
.as-thumb:focus-visible{box-shadow:0 0 0 4px rgba(10,9,9,.9),0 0 0 5px var(--fg)}
.as-track.drag .as-thumb{transform:rotate(45deg) scale(1.25);cursor:grabbing}
@media (max-width:820px){
  .as-arrow{width:44px;height:44px;margin-top:-22px;top:calc(50% + 0px)}
  .as-arrow.prev{left:8px}.as-arrow.next{right:8px}
  .as-slider{bottom:calc(20px + env(safe-area-inset-bottom) + 112px)}
  .as-acts{bottom:calc(20px + env(safe-area-inset-bottom) + 160px)}
}
@media (max-height:520px) and (orientation:landscape){
  .as-slider{bottom:64px}
}

/* per-video segmented slider */
.as-track{display:flex;gap:10px;height:auto;cursor:default;touch-action:auto}
.as-track::before{display:none}
.as-seg{flex:1;min-width:0;background:none;border:none;color:var(--mute);cursor:pointer;padding:10px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:44px;transition:color .3s}
.as-seg .sg-n{font:400 10px/1 var(--mono);letter-spacing:.2em}
.as-seg .sg-bar{position:relative;display:block;width:100%;height:2px;background:var(--line)}
.as-seg .sg-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:var(--red);box-shadow:0 0 8px var(--red-a)}
.as-seg:hover{color:var(--fg)}
.as-seg:hover .sg-bar{background:rgba(236,235,232,.3)}
.as-seg.on{color:var(--fg)}

.as-seg .sg-n{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;line-height:1.35;letter-spacing:.12em;min-height:2.7em;display:flex;align-items:flex-end;text-align:left}
@media (max-width:820px){.as-track{gap:6px}.as-seg .sg-n{font-size:9px;letter-spacing:.06em}}

/* SOUND ON / OFF (kasamacura style) */
.as-sound{position:absolute;left:0;top:0;z-index:8;font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--fg);background:rgba(0,0,0,.45);border:1px solid rgba(236,235,232,.4);padding:9px 14px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,background .3s,border-color .3s,color .3s;backdrop-filter:blur(3px)}
.as-sound.on{opacity:1;pointer-events:auto}
.as-sound:hover{background:var(--red);border-color:var(--red);color:#0b0a09}
.as-sound.active{border-color:var(--red)}
@media (max-width:820px){.as-sound{font-size:10px;padding:8px 11px}}

/* hide YouTube chrome: inline strip */
.as-yt iframe{opacity:0;transition:opacity .8s ease;height:170% !important;width:150% !important;pointer-events:none}
.as-yt iframe.show{opacity:1}
/* hide YouTube chrome: lightbox (crop title bar + logo, block hover UI) */
.yt-lb{flex-direction:column;gap:18px}
.lb-body{overflow:hidden;cursor:pointer}
.lb-crop{position:absolute;inset:0;overflow:hidden}
.lb-crop iframe{position:absolute;left:0;top:-160px;width:100%;height:calc(100% + 320px);border:0;display:block;pointer-events:none;transform:scale(1.02)}
.lb-cover{position:absolute;inset:0;background:#000 center/cover no-repeat;z-index:2;transition:opacity 1s ease;pointer-events:none}
.lb-body.playing .lb-cover{opacity:0}
.lb-state{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:1px solid rgba(236,235,232,.55);z-index:3;opacity:0;transition:opacity .3s;pointer-events:none;display:flex;align-items:center;justify-content:center}
.lb-state::before{content:"";width:0;height:0;border-left:13px solid var(--fg);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.lb-body.paused .lb-state{opacity:1}
.lb-bar{width:min(88vw,calc(80vh * 16 / 9));display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb-title{font:300 clamp(16px,1.6vw,22px)/1 var(--sans);letter-spacing:.04em}
.lb-sound{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--fg);background:rgba(0,0,0,.45);border:1px solid rgba(236,235,232,.4);padding:9px 14px;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.lb-sound:hover{background:var(--red);border-color:var(--red);color:#0b0a09}
@media (max-width:820px){.lb-bar{width:94vw}.lb-crop iframe{top:-90px;height:calc(100% + 180px)}}

/* lightbox title font */
.lb-title{font:200 clamp(18px,1.9vw,26px)/1.2 'Noto Serif JP',serif;letter-spacing:.12em}

.lb-err{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:none;font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--fg);background:rgba(0,0,0,.6);border:1px solid var(--red);padding:11px 16px;white-space:nowrap}
.lb-body.yterr .lb-err{display:block}
.lb-body.yterr .lb-crop{display:none}

/* YouTube側でサムネイル未生成のときのフォールバック */
.as-main img.no-thumb,.as-sat img.no-thumb{opacity:0}
.as-main:has(img.no-thumb){background:radial-gradient(ellipse at 50% 60%,oklch(0.45 0.2 27 / .55),transparent 65%),#0c0a0a}

/* roomier, scrollable per-video bar */
.as-track{gap:clamp(18px,2vw,32px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 4px;scroll-padding:0 40px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.as-track::-webkit-scrollbar{display:none}
.as-seg{flex:0 0 clamp(130px,11vw,180px);padding:12px 0 10px;gap:12px}
.as-seg:first-child{margin-left:36px}.as-seg:last-child{margin-right:36px}
.as-seg .sg-n{white-space:nowrap;min-height:0;display:block;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:.16em}
.as-seg .sg-bar{height:1px}
.as-seg.on .sg-bar{height:2px}
@media (max-width:820px){.as-track{gap:16px}.as-seg{flex-basis:118px}.as-seg .sg-n{font-size:9.5px;letter-spacing:.1em}}

/* SIGNALS: remove ACT labels */
#as-acts{display:none !important}
#as-act{display:none !important}
.as-capc span{font:300 clamp(18px,1.8vw,26px)/1.2 var(--sans);letter-spacing:.04em;color:var(--fg)}

/* PC nav: unselected tabs breathe softly (staggered) */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  @keyframes navBreath{0%,100%{opacity:1}50%{opacity:.38}}
  .nav a:not(.on):not(:hover){animation:navBreath 3.6s ease-in-out infinite}
  .nav a:nth-child(2){animation-delay:-.9s}
  .nav a:nth-child(3){animation-delay:-1.8s}
  .nav a:nth-child(4){animation-delay:-2.7s}
  .nav a.on,.nav a:hover{animation:none;opacity:1}
}

/* random satellites */
.as-sat{opacity:calc(var(--e) * var(--op,.8));transform:translate(calc(var(--dx,0%) * var(--e)),calc(var(--dy,0%) * var(--e)))}

.as-slider,.as-cap{z-index:9}

/* satellites: non-overlapping, clickable */
.as-sat{border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;pointer-events:none;
  opacity:calc(var(--e) * var(--op,.8));transform:translate(calc(var(--ox,0px) * (1 - var(--e))),calc(var(--oy,0px) * (1 - var(--e)))) scale(calc(.85 + .15 * var(--e)));
  transition:outline-color .3s,filter .3s}
.as-item.act .as-sat{pointer-events:auto;cursor:pointer}
.as-sat .sat-t{position:absolute;left:6px;right:6px;bottom:5px;font:400 8.5px/1.2 var(--mono);letter-spacing:.12em;color:var(--fg);text-align:left;opacity:0;transition:opacity .3s;text-shadow:0 0 6px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-item.act .as-sat:hover{opacity:1;outline:1px solid var(--red);z-index:2}
.as-item.act .as-sat:hover img,.as-item.act .as-sat:hover canvas{filter:none}
.as-item.act .as-sat:hover .sat-t{opacity:1}
.as-sat:focus-visible{outline:1px solid var(--fg)}

/* strip thumbnails (right of the active video): brighten on hover */
.as-main img,.as-main canvas{transition:filter .35s ease}
.as-item:not(.act):hover .as-main img,.as-item:not(.act):hover .as-main canvas{filter:grayscale(0) brightness(1.08)}
.as-item:not(.act):hover .as-main{outline-color:var(--red)}
.as-item:not(.act){transition:none}

/* ---------- MUSIC ---------- */
.mu-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.mu-now{display:grid;grid-template-columns:minmax(160px,42%) 1fr;gap:clamp(20px,3vw,40px);align-items:end}
.mu-cover{position:relative;aspect-ratio:1;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,oklch(0.45 0.2 27 / .45),transparent 60%),#0c0a0a;overflow:hidden}
.mu-disc{position:absolute;inset:14%;border-radius:50%;background:repeating-radial-gradient(circle,#0a0909 0 2px,#141111 2px 3px);box-shadow:0 0 0 1px var(--line);animation:muSpin 6s linear infinite;animation-play-state:paused}
.mu-disc::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--red);box-shadow:0 0 18px var(--red)}
.mu.playing .mu-disc{animation-play-state:running}
@keyframes muSpin{to{transform:rotate(360deg)}}
.mu-ph{position:absolute;left:10px;bottom:9px;font:400 9px/1 var(--mono);letter-spacing:.16em;color:var(--mute)}
.mu-k{font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--red)}
.mu-t{font:200 clamp(28px,3vw,46px)/1.05 var(--sans);letter-spacing:.02em;margin:14px 0 10px}
.mu-a{font:400 10px/1.6 var(--mono);letter-spacing:.16em;color:var(--mute)}
.mu-ctrl{display:flex;align-items:center;gap:18px;margin-top:26px}
.mu-play{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(236,235,232,.4);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s}
.mu-play i{width:0;height:0;border-left:12px solid var(--fg);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.mu.playing .mu-play i{width:10px;height:12px;border:0;border-left:3px solid var(--fg);border-right:3px solid var(--fg);margin:0}
.mu-play:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}
.mu-prog{flex:1;min-width:0}
.mu-bar{position:relative;height:14px;cursor:pointer;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.mu-bar i{position:absolute;left:0;top:50%;height:1px;width:0;background:var(--red);box-shadow:0 0 8px var(--red-a)}
.mu-time{display:flex;justify-content:space-between;font:400 10px/1 var(--mono);letter-spacing:.14em;color:var(--mute);margin-top:6px}
.mu-eq{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:22px}
.mu-eq i{flex:1;height:100%;background:linear-gradient(to top,var(--red),oklch(0.6 0.22 27 / .15));transform-origin:bottom;transform:scaleY(.08)}
.mu-list{list-style:none;border-top:1px solid var(--line)}
.mu-list button{width:100%;display:grid;grid-template-columns:44px 1fr auto 28px;gap:16px;align-items:center;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--mute);text-align:left;cursor:pointer;transition:color .3s,padding .4s}
.mu-list .n{font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--dim)}
.mu-list .t{font:300 clamp(16px,1.4vw,20px)/1.3 var(--sans);letter-spacing:.04em}
.mu-list .d{font:400 10px/1 var(--mono);letter-spacing:.14em}
.mu-list .w{display:flex;gap:2px;align-items:flex-end;height:12px;opacity:0}
.mu-list .w i{width:2px;background:var(--red);animation:muW .9s ease-in-out infinite;animation-play-state:paused}
.mu-list .w i:nth-child(1){height:60%}.mu-list .w i:nth-child(2){height:100%;animation-delay:-.3s}.mu-list .w i:nth-child(3){height:40%;animation-delay:-.6s}
@keyframes muW{50%{transform:scaleY(.3)}}
.mu-list button:hover{color:var(--fg);padding-left:8px}
.mu-list button.on{color:var(--fg)}
.mu-list button.on .n{color:var(--red)}
.mu-list button.on .w{opacity:1}
.mu.playing .mu-list button.on .w i{animation-play-state:running}
.mu-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--line)}
.mu-link{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--fg);padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.mu-link:hover{border-color:var(--red)}
@media (max-width:1000px){.mu-grid{grid-template-columns:1fr}}
@media (max-width:560px){.mu-now{grid-template-columns:1fr}.mu-cover{max-width:280px}.mu-list button{grid-template-columns:34px 1fr auto 20px;gap:10px;padding:16px 0}}

.mu-embed{max-width:960px;border:1px solid var(--line);padding:clamp(10px,1.4vw,18px);background:#0c0a0a}
.mu-embed iframe{display:block;border:0;border-radius:12px;width:100%;height:352px}
@media (max-width:560px){.mu-embed iframe{height:232px}}

/* MUSIC — cover grid */
.mu-covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,260px),1fr));gap:clamp(18px,2.4vw,36px)}
.mu-cv{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:14px}
.mu-cv-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);background:#0c0a0a}
.mu-cv-img img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82) saturate(.9);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .4s}
.mu-cv-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1px solid rgba(236,235,232,.6);background:rgba(10,9,9,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.9);transition:opacity .35s,transform .35s,border-color .3s}
.mu-cv-play i{width:0;height:0;border-left:12px solid var(--fg);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.mu-cv:hover .mu-cv-img img{transform:scale(1.04);filter:none}
.mu-cv:hover .mu-cv-play{opacity:1;transform:none;border-color:var(--red)}
.mu-cv:hover .mu-cv-img{border-color:oklch(0.6 0.22 27 / .6)}
.mu-cv-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mu-cv-meta b{font:300 clamp(14px,1.2vw,18px)/1.3 var(--sans);letter-spacing:.04em}
.mu-cv-meta em{font:400 9.5px/1 var(--mono);font-style:normal;letter-spacing:.2em;color:var(--mute)}
.mu-player{position:fixed;inset:0;z-index:100;background:rgba(5,4,4,.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.mu-player.open{opacity:1;pointer-events:auto}
.mu-pl-in{width:min(92vw,640px);position:relative}
.mu-pl-x{position:absolute;right:0;top:-44px;background:none;border:0;color:var(--fg);font:400 11px/1 var(--mono);letter-spacing:.22em;cursor:pointer;min-height:36px}
.mu-pl-body iframe{display:block;border:0;border-radius:12px}
.mu-pl-link{display:inline-block;margin-top:16px;font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute);border-bottom:1px solid transparent;padding:4px 0}
.mu-pl-link:hover{color:var(--fg);border-color:var(--red)}
@media (max-width:560px){.mu-covers{grid-template-columns:1fr 1fr;gap:14px}.mu-cv-play{opacity:1;width:44px;height:44px;margin:-22px 0 0 -22px}}

/* MUSIC player modal: close + back buttons */
.mu-player{z-index:200}
.mu-pl-x{display:none}
.mu-pl-close{position:fixed;top:clamp(16px,3vh,28px);right:var(--pad);width:48px;height:48px;border-radius:50%;border:1px solid rgba(236,235,232,.45);background:rgba(10,9,9,.6);cursor:pointer;z-index:2;transition:border-color .3s,background .3s,transform .4s}
.mu-pl-close span{position:absolute;left:50%;top:50%;width:18px;height:1px;background:var(--fg);transform:translate(-50%,-50%) rotate(45deg)}
.mu-pl-close span+span{transform:translate(-50%,-50%) rotate(-45deg)}
.mu-pl-close:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .18);transform:rotate(90deg)}
.mu-pl-head{margin-bottom:14px}
.mu-pl-t{font:300 clamp(16px,1.6vw,22px)/1.2 var(--sans);letter-spacing:.06em}
.mu-pl-link{display:none}
.mu-pl-foot{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.mu-pl-back{background:none;border:1px solid var(--line);color:var(--fg);font:400 10px/1 var(--mono);letter-spacing:.2em;padding:13px 18px;min-height:44px;cursor:pointer;transition:border-color .3s,background .3s}
.mu-pl-back:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}
@media (max-width:560px){.mu-pl-back{flex:1}}

.mu-cv-meta{flex-wrap:wrap;row-gap:6px}
.mu-cv-art{flex-basis:100%;font:400 10px/1.3 var(--mono);letter-spacing:.16em;color:var(--mute)}

/* MUSIC covers: up to 5 per row */
.mu-covers{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1200px}
.mu-cv-play{width:46px;height:46px;margin:-23px 0 0 -23px}
.mu-cv-meta b{font-size:clamp(13px,1.05vw,16px)}
@media (max-width:1000px){.mu-covers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.mu-covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.mu-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* MUSIC covers: up to 10 per row */
.mu-covers{grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);max-width:none}
.mu-cv{gap:10px}
.mu-cv-play{width:34px;height:34px;margin:-17px 0 0 -17px}
.mu-cv-play i{border-left-width:9px;border-top-width:5px;border-bottom-width:5px;margin-left:2px}
.mu-cv-meta b{font-size:clamp(11px,.85vw,13px);line-height:1.25}
.mu-cv-meta em{font-size:8px;letter-spacing:.14em}
.mu-cv-art{font-size:8.5px;letter-spacing:.1em}
@media (max-width:1400px){.mu-covers{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:1100px){.mu-covers{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:820px){.mu-covers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.mu-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}

.mu-lead{margin-top:clamp(18px,2vw,28px);font:200 clamp(14px,1.3vw,18px)/2 'Noto Serif JP',serif;letter-spacing:.14em;color:var(--fg);opacity:.85}

/* ---------- COLLABORATION ---------- */
.co-lead{margin-top:clamp(18px,2vw,28px);font:200 clamp(14px,1.3vw,18px)/2 'Noto Serif JP',serif;letter-spacing:.14em;opacity:.85}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.co-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,36px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:inherit;transition:background .4s}
a.co-card:hover{background:oklch(0.6 0.22 27 / .06)}
.co-logo{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(236,235,232,.16);background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(236,235,232,.025) 9px 10px);margin-bottom:10px}
.co-logo img{max-width:70%;max-height:60%;object-fit:contain;filter:grayscale(1) brightness(1.6);transition:filter .4s}
.co-card:hover .co-logo img{filter:none}
.co-logo span{font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--dim)}
.co-x{font:300 clamp(15px,1.3vw,19px)/1.4 var(--sans);letter-spacing:.04em}
.co-x i{font-style:normal;color:var(--red);margin:0 .3em}
.co-kind{font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute)}
.co-desc{font:300 13px/1.9 var(--jp);color:var(--mute)}
.co-no{position:absolute;right:clamp(16px,2vw,28px);top:clamp(14px,1.6vw,22px);font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--red)}
@media (max-width:1000px){.co-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.co-grid{grid-template-columns:1fr}}

/* COLLABORATION: name + category only */
.co-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.co-card{gap:12px;padding:clamp(26px,3vw,44px) clamp(20px,2.4vw,36px);justify-content:flex-end;min-height:clamp(150px,14vw,200px)}
.co-name{font:200 clamp(28px,3.2vw,48px)/1.05 var(--sans);letter-spacing:.02em}
.co-kind{font:400 10.5px/1 var(--mono);letter-spacing:.24em;color:var(--mute)}

/* COLLABORATION: back to card layout v1 */
.co-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.co-card.co-card--v1{gap:14px;padding:clamp(20px,2.4vw,36px);justify-content:flex-start;min-height:0}
@media (max-width:1000px){.co-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.co-grid{grid-template-columns:1fr}}

.co-x{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.co-country{font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--red)}

.co-x{justify-content:space-between;width:100%}
.co-country{margin-left:auto}

/* MUSIC more... */
.mu-cv.mu-hide{display:none}
.mu-more-wrap{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}
.mu-more{display:inline-flex;align-items:center;gap:14px;background:none;border:1px solid var(--line);color:var(--fg);font:400 11px/1 var(--mono);letter-spacing:.24em;padding:14px 28px;min-height:44px;cursor:pointer;transition:border-color .3s,background .3s}
.mu-more i{width:8px;height:8px;border-right:1px solid var(--red);border-bottom:1px solid var(--red);transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.mu-more.open i{transform:translateY(2px) rotate(-135deg)}
.mu-more:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}

a.mu-more{text-decoration:none}
a.mu-more i{transform:rotate(-45deg)}
/* MUSIC page */
.music-page .mp-wrap{padding:clamp(110px,14vw,170px) var(--pad) clamp(80px,10vw,140px);min-height:100vh}
.mp-crumb{display:flex;align-items:center;gap:14px;font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--mute);margin-bottom:clamp(36px,5vw,64px)}
.mp-crumb a{color:var(--mute);transition:color .3s}
.mp-crumb a:hover{color:var(--fg)}
.mp-crumb i{width:22px;height:1px;background:var(--red)}
.mp-count{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);margin-top:18px}
.music-page .mu-covers{margin-top:clamp(40px,5vw,72px)}
.mp-foot{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px)}

/* MUSIC covers: circular */
.mu-cv-img{border-radius:50%}
.mu-cv-img img{border-radius:50%}
.mu-cv-meta{justify-content:center;text-align:center}
.mu-cv-meta b{flex-basis:100%}
.mu-cv-art{text-align:center}

/* MUSIC covers: red multiply overlay */
.mu-cv-img::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);mix-blend-mode:multiply;opacity:.85;pointer-events:none;transition:opacity .45s ease}
.mu-cv-img img{filter:grayscale(1) contrast(1.15) brightness(1.05)}
.mu-cv:hover .mu-cv-img::after{opacity:0}
.mu-cv:hover .mu-cv-img img{filter:none}
.mu-cv-play{z-index:2}

/* TOP: covers strictly in one row (extra rows collapsed) */
body:not(.music-page) #music .mu-covers{grid-template-rows:auto;grid-auto-rows:0;row-gap:0;overflow:hidden;padding:4px 2px 2px}
body:not(.music-page) #music .mu-cv.mu-hide{display:flex;visibility:hidden}

/* collab logos (supplied on black): fill the frame, black drops out */
.co-logo:has(img){border-style:solid;border-color:var(--line);background:#000;overflow:hidden}
.co-logo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;mix-blend-mode:screen;filter:brightness(.9);transition:filter .4s,transform 1s cubic-bezier(.2,.7,.2,1)}
.co-card:hover .co-logo img{filter:brightness(1.1);transform:scale(1.03)}

/* tighter spacing between sections */
.sec{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(64px,7vw,110px)}
.sec-head{margin-bottom:clamp(32px,4vw,64px)}
.mu-links{margin-top:clamp(32px,4vw,56px)}
@media (max-width:820px){.sec{padding-top:56px;padding-bottom:56px}.sec-head{margin-bottom:32px}}

/* even tighter section rhythm */
.sec{padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(40px,4.5vw,72px)}
.sec-head{margin-bottom:clamp(22px,2.6vw,40px);gap:clamp(16px,2vw,32px)}
.h2{font-size:clamp(38px,5.4vw,88px)}
.mu-lead,.co-lead{margin-top:clamp(10px,1.2vw,18px)}
.mu-more-wrap{margin-top:clamp(18px,2vw,28px)}
.mu-links{margin-top:clamp(22px,2.6vw,40px);padding-top:18px}
footer{padding-top:28px;padding-bottom:32px}
@media (min-width:821px){footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}footer > span:nth-child(2){text-align:center}footer > span:last-child{text-align:right}}
@media (max-width:820px){.sec{padding-top:40px;padding-bottom:40px}.sec-head{margin-bottom:22px}.h2{font-size:clamp(34px,10vw,56px)}}

.char:not(.main) .char-img{object-position:62% 20%}

/* all character photos same size as Liv */
.chars{grid-template-columns:repeat(4,minmax(0,1fr))}
.char.main{grid-column:auto;display:block}
.char.main .pic{margin-bottom:18px}
.char h4,.char.main h4{font-size:clamp(22px,2vw,32px);font-weight:200}
@media (max-width:1100px){.chars{grid-template-columns:repeat(2,minmax(0,1fr))}.char.main{grid-column:auto;display:block}}
@media (max-width:820px){.chars{grid-template-columns:repeat(2,minmax(0,1fr))}.char.main{grid-column:auto}}
@media (max-width:380px){.chars{grid-template-columns:1fr}}

/* character slider: 4 per group, auto 7s */
.char-slider{overflow:hidden;position:relative}
.char-track{display:flex;transition:transform 1.1s cubic-bezier(.7,0,.2,1);will-change:transform}
.char-page{flex:0 0 100%;min-width:0;align-content:start}
.char-nav{display:flex;align-items:center;gap:18px;margin-top:26px}
.char-arrow{background:none;border:1px solid var(--line);color:inherit;width:44px;height:44px;font:300 16px/1 var(--sans);cursor:pointer;transition:border-color .3s,color .3s}
.char-arrow:hover{border-color:var(--red,#e0182d);color:var(--red,#e0182d)}
.char-dots{display:flex;gap:8px;flex:1}
.char-dot{background:none;border:0;padding:20px 0;cursor:pointer;flex:0 1 72px;position:relative}
.char-dot::before,.char-dot i{content:"";position:absolute;left:0;top:50%;height:2px;width:100%;background:var(--line)}
.char-dot i{width:0;background:var(--red,#e0182d)}
.char-dot.on i{animation:charProg 7s linear forwards}
.char-slider.paused .char-dot.on i{animation-play-state:paused}
@keyframes charProg{from{width:0}to{width:100%}}
.char-count{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--mute)}
.char-count b{color:var(--red,#e0182d);font-weight:400}

/* HUD frame card */
.char .pic{aspect-ratio:683/1024;background:#000;container-type:inline-size}
.char .pic .char-img{inset:1.5% 1.5%;width:97%;height:97%}
.char .pic::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 22%,transparent 36%),linear-gradient(to top,rgba(0,0,0,.55),transparent 18%)}

.char-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;mix-blend-mode:screen;pointer-events:none}
.char-hud{position:absolute;left:7.5%;top:7%;right:22%;z-index:4;pointer-events:none}
.char-hud .hn{font:400 max(14px,6.4cqw)/1.05 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-hud .hl{display:block;height:1px;margin:3.6cqw 0 3.4cqw;background:linear-gradient(90deg,#3fd8e8 0 18%,rgba(255,255,255,.28) 18% 100%)}
.char-hud .hj{font:400 max(11px,5.2cqw)/1.2 var(--jp);color:#fff;letter-spacing:.02em}
.char-hud .hm{font:400 max(9px,3.4cqw)/1 var(--mono);letter-spacing:.18em;color:rgba(255,255,255,.72);margin-top:4.4cqw;text-transform:uppercase}
.char-hud .hm{white-space:nowrap}
.char-hud .hf{display:flex;align-items:center;gap:2.4cqw;margin-top:4.6cqw}
.char-hud .hf img{width:max(14px,5.5cqw);height:max(9px,3.7cqw);object-fit:cover;display:block}
.char-hud .hf b{font:400 max(9px,3.4cqw)/1 var(--mono);color:var(--red,#e0182d);letter-spacing:.2em}
.char-hud .hf i{width:7cqw;height:1px;background:rgba(255,255,255,.35)}
.char-sync{position:absolute;left:6.3%;bottom:6.2%;z-index:4;pointer-events:none;padding:0 0 1.8cqw 3cqw;border-left:2px solid #3fd8e8;font:400 max(10px,4cqw)/1.35 var(--sans);letter-spacing:.06em;color:#fff}
.char-sync div:last-child{font-family:var(--jp)}
.char-sync::after{content:"";position:absolute;left:0;bottom:0;width:120%;height:1px;background:linear-gradient(90deg,#3fd8e8,rgba(63,216,232,.35))}
.char-eq{position:absolute;right:6.8%;bottom:7%;z-index:4;pointer-events:none;display:flex;align-items:flex-end;gap:1.3cqw;height:12cqw;padding-bottom:1px;border-bottom:1px solid #3fd8e8}
.char-eq i{width:max(2px,.9cqw);height:calc(var(--h) / 14 * 100%);background:#3fd8e8;box-shadow:0 0 6px rgba(63,216,232,.7);transform-origin:bottom;animation:charEq 1.4s ease-in-out infinite alternate}
@keyframes charEq{0%{transform:scaleY(1)}50%{transform:scaleY(.45)}100%{transform:scaleY(.85)}}
@media (prefers-reduced-motion:reduce){.char-eq i{animation:none}}
/* hover → HUD on */
.char-frame{opacity:.35;filter:saturate(0);transition:opacity .5s,filter .5s}
.char-eq{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.char-hud{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

.char .pic::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 18%);opacity:0;transition:opacity .5s;display:block}
.char .pic::before{background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 22%,transparent 36%);transition:opacity .5s}
.char:hover .char-frame{opacity:1;filter:none}
.char:hover .char-sync,.char:hover .char-eq{opacity:1;transform:none}
.char:hover .char-hud{opacity:0;transform:translateY(-6px)}
.char:hover .char-eq{transition-delay:.12s}

.char:hover .char-eq i{animation-play-state:running}
.char:hover .pic::before{opacity:0}
.char:hover .pic::after{opacity:1}
@media (hover:none){.char-frame{opacity:1;filter:none}.char-sync,.char-eq{opacity:1;transform:none}.char .pic::after{opacity:1}.char-eq i{animation-play-state:running}}
/* hover zoom-in */
.char .pic .char-img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.char:hover .pic .char-img{transform:scale(1.14);filter:brightness(1) contrast(1.06)}
.char:hover .pic .char-img[src$="char-02.png"]{transform:scale(1.45)}
/* 04 Heoun & Minseo: fill to bottom edge */
.char .pic .char-img[src$="char-03.png"]{object-position:50% 0 !important;transform:scale(1.1);transform-origin:50% 8%}
.char:hover .pic .char-img[src$="char-03.png"]{transform:scale(1.24)}
/* info now lives inside the frame */
.char > .k,.char > h4,.char > p{display:none}
.char .pic,.char.main .pic{margin-bottom:0}
.char{padding:0;border:0}
.chars.char-page{border:0}

/* collaboration lightbox */
.co-lb{position:fixed;inset:0;z-index:120;background:rgba(4,3,3,.92);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:clamp(56px,7vh,90px) var(--pad);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.co-lb.open{opacity:1;visibility:visible;transition:opacity .45s ease}
.co-lb-x{position:absolute;right:var(--pad);top:22px;background:none;border:0;color:var(--mute);font:400 10px/1 var(--mono);letter-spacing:.24em;cursor:pointer;padding:10px 0}
.co-lb-x:hover{color:var(--fg)}
.co-lb-in{display:grid;grid-template-columns:auto minmax(0,440px);gap:clamp(32px,5vw,80px);align-items:center;max-height:100%;transform:translateY(14px);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.co-lb.open .co-lb-in{transform:none}
.co-lb-v{height:min(78vh,820px);aspect-ratio:9/16;background:#000;border:1px solid var(--line);position:relative}
.co-lb-v{overflow:hidden}
.co-lb-v iframe{position:absolute;left:0;top:-60px;width:100%;height:calc(100% + 120px);border:0}
.co-lb-no{font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--red)}
.co-lb-head{display:flex;align-items:center;gap:16px;margin:18px 0 0}
.co-lb-logo{flex:0 0 auto;width:clamp(44px,3.6vw,56px);aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:#000}
.co-lb-logo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}
.co-lb-name{font:200 clamp(24px,2.4vw,36px)/1.1 var(--sans);letter-spacing:.02em;margin:0;min-width:0;overflow-wrap:anywhere}
.co-lb-meta{margin-top:12px;font:400 10.5px/1 var(--mono);letter-spacing:.24em;color:var(--mute)}
.co-lb-meta i{font-style:normal;margin:0 .5em;opacity:.5}
.co-lb-meta span{color:var(--red)}
.co-lb-line{display:block;height:1px;width:64px;background:var(--red);margin:18px 0}
.co-lb-desc{font:300 14px/2 var(--jp);color:var(--mute);margin:0 0 30px}
.co-lb-box{border:1px solid var(--line);background:rgba(255,255,255,.025);margin:0 0 28px;max-height:52vh;display:flex;flex-direction:column}
.co-lb-box-b p{margin:0 0 1.1em}
.co-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;border:1px solid oklch(0.6 0.22 27 / .5);background:oklch(0.6 0.22 27 / .08);padding:14px 16px;margin:6px 0 22px}
.co-code span{flex-basis:100%;font:400 9.5px/1 var(--mono);letter-spacing:.24em;color:var(--red)}
.co-code b{font:400 clamp(17px,1.5vw,21px)/1 var(--mono);letter-spacing:.14em;color:#fff}
.co-copy{margin-left:auto;background:none;border:1px solid var(--line);color:var(--fg);padding:8px 12px;font:400 9.5px/1 var(--mono);letter-spacing:.22em;cursor:pointer;transition:border-color .3s}
.co-copy:hover{border-color:var(--red)}
.co-credit{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font:400 12px/1.6 var(--sans);letter-spacing:.06em}
.co-credit dt{grid-row:span 2;font:400 9.5px/1.9 var(--mono);letter-spacing:.24em;color:var(--mute)}
.co-credit dd{margin:0;grid-column:2}
.co-lb-box-h{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--red)}
.co-lb-box-h i{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.co-lb-box-b{padding:18px;font:300 14px/2 var(--jp);color:var(--fg);opacity:.85;overflow-y:auto;text-align:left}
.co-lb-link{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);padding:14px 24px;font:400 11px/1 var(--mono);letter-spacing:.26em;color:var(--fg);transition:border-color .3s,background .3s}
.co-lb-link i{width:18px;height:1px;background:var(--red)}
.co-lb-link:hover{border-color:var(--red);background:oklch(0.6 0.22 27 / .12)}
.co-lb-yt{display:block;margin-top:18px;font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--mute)}
.co-lb-yt:hover{color:var(--fg)}
@media (max-width:760px){
  .co-lb{align-items:flex-start;overflow-y:auto}
  .co-lb-in{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
  .co-lb-v{height:auto;width:min(78vw,360px)}
  .co-lb-head{justify-content:center}
  .co-lb-line{margin:20px auto}
}

/* intro ACT rail: always visible, directly under the language switcher */
#intro .rail{display:block !important;top:170px;transform:none;height:min(26vh,200px);right:calc(var(--pad) + 4px);z-index:4}
#intro .rail button span{display:block !important}
#intro .rail button{width:11px;height:11px;right:-5px}
#intro .rail button:hover{border-color:var(--red)}
#intro .rail button:hover span,#intro .rail button.on span{color:var(--fg)}
@media (max-width:820px){#intro .rail{top:170px;height:min(24vh,170px)}}
@media (max-height:520px) and (orientation:landscape){#intro .rail{top:140px;height:min(calc(100vh - 190px),150px)}}

/* collaboration: 4 per group + tabs */
#co-grid.co-paged{display:block;border:0}
.co-tabs{display:flex;gap:0;margin-bottom:22px;border-bottom:1px solid var(--line)}
.co-tab{background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;color:var(--mute);padding:14px 22px 14px 0;margin-right:26px;font:400 11px/1 var(--mono);letter-spacing:.2em;cursor:pointer;display:flex;align-items:baseline;gap:12px;transition:color .3s,border-color .3s}
.co-tab em{font-style:normal;font-size:9px;letter-spacing:.24em;opacity:.6}
.co-tab:hover{color:var(--fg)}
.co-tab.on{color:var(--fg);border-bottom-color:var(--red)}
.co-tab.on em{color:var(--red);opacity:1}
.co-page{display:none;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.co-page.on{display:grid;animation:coPageIn .6s cubic-bezier(.2,.7,.2,1)}
.co-page .co-card.rv{opacity:1;transform:none}
@keyframes coPageIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.co-page{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.co-tab{padding-right:10px;margin-right:14px}.co-tab em{display:none}}

/* characters: ALL VIEW toggle */
.char-all{margin-left:auto;display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid var(--line);color:var(--fg);height:44px;padding:0 20px;font:400 11px/1 var(--mono);letter-spacing:.26em;cursor:pointer;transition:border-color .3s,background .3s}
.char-all i{width:12px;height:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:
  linear-gradient(var(--red),var(--red)) 0 0/5px 5px no-repeat,
  linear-gradient(var(--red),var(--red)) 100% 0/5px 5px no-repeat,
  linear-gradient(var(--red),var(--red)) 0 100%/5px 5px no-repeat,
  linear-gradient(var(--red),var(--red)) 100% 100%/5px 5px no-repeat}
.char-all:hover,.char-all[aria-pressed="true"]{border-color:var(--red);background:oklch(0.6 0.22 27 / .1)}
.char-slider.all .char-track,.char-slider.all .char-arrow,.char-slider.all .char-dots,.char-slider.all .char-count{display:none}
.char-slider.all .char-nav{order:2}
.char-slider.all{display:flex;flex-direction:column}
.char-allgrid{animation:coPageIn .6s cubic-bezier(.2,.7,.2,1)}
.char-allgrid[hidden]{display:none}
@media (max-width:480px){.char-all{padding:0 12px;letter-spacing:.18em}}

/* world movie: full width above the definitions */
.world-grid:has(.world-video){grid-template-columns:1fr}
.world-video{aspect-ratio:16/9;cursor:pointer;background:#000}
.world-video .wv-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:filter .5s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.world-video:hover .wv-thumb{filter:brightness(.9);transform:scale(1.02)}
.world-video{cursor:pointer;overflow:hidden}
.world-video.started{cursor:default}
.world-video .wv-play{z-index:4}
.world-video.started .wv-play{opacity:0;pointer-events:none;transition:opacity .4s}
.world-video .wv-sound{opacity:0;pointer-events:none;transition:opacity .4s}
.world-video.started .wv-sound{opacity:1;pointer-events:auto}
.world-video.started:hover .wv-thumb{transform:none}
.wv-frame{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease;pointer-events:none}
.world-video.playing .wv-frame{opacity:1}
/* oversize + crop so YouTube title bar / logo stay outside the frame */
.world-video .wv-frame iframe{position:absolute;inset:auto;left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%);border:0;pointer-events:none;z-index:1}
.wv-bar{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(12px,1.6vw,20px);z-index:5;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s}
.world-video.started .wv-bar{opacity:1;pointer-events:auto}
.world-video .wv-bar .wv-sound{position:static;opacity:1;pointer-events:auto}
.wv-top,.wv-x{background:rgba(5,4,4,.55);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--fg);padding:10px 14px;font:400 10px/1 var(--mono);letter-spacing:.24em;cursor:pointer;transition:border-color .3s}
.wv-top:hover,.wv-x:hover{border-color:var(--red)}
.wv-paused{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(4,3,3,.45);opacity:0;pointer-events:none;transition:opacity .35s}
.wv-paused i{width:clamp(56px,6vw,80px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.55);position:relative}
.wv-paused i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:14px solid var(--red);border-top:9px solid transparent;border-bottom:9px solid transparent}
.wv-paused span{font:400 10px/1 var(--mono);letter-spacing:.26em;color:rgba(255,255,255,.8)}
.world-video.paused .wv-paused{opacity:1}
.world-video.started{cursor:pointer}
@media (max-width:600px){.wv-bar{left:clamp(14px,2vw,24px);flex-wrap:wrap;justify-content:flex-end}.wv-top,.wv-x,.wv-bar .wv-sound{padding:9px 10px;letter-spacing:.16em}}
.wv-sound{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(12px,1.6vw,20px);z-index:4;background:rgba(5,4,4,.55);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--fg);padding:10px 14px;font:400 10px/1 var(--mono);letter-spacing:.24em;cursor:pointer;transition:border-color .3s,color .3s}
.wv-sound:hover,.wv-sound.on{border-color:var(--red)}
.wv-sound.on{color:#fff}
.world-video .wv-cap{z-index:4}
.wv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(5,4,4,.35);backdrop-filter:blur(4px);cursor:pointer;transition:border-color .3s,background .3s}
.wv-play i{position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:16px solid var(--red);border-top:10px solid transparent;border-bottom:10px solid transparent}
.world-video:hover .wv-play{border-color:var(--red);background:oklch(0.6 0.22 27 / .18)}
.wv-cap{position:absolute;left:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);bottom:clamp(12px,1.6vw,20px);display:flex;justify-content:space-between;gap:16px;font:400 10px/1 var(--mono);letter-spacing:.2em;color:rgba(255,255,255,.75);pointer-events:none}
.wv-cap span:first-child{color:var(--red)}
.world-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.world-video.on .wv-play,.world-video.on .wv-cap{display:none}
.world-video.on{cursor:default}

/* world movie: smaller + black letterbox bars */
.world-video{width:min(100%,1080px);margin:0 auto;aspect-ratio:16/10.6;background:#000;border:1px solid var(--line)}
.world-video .wv-thumb,.world-video .wv-frame{top:7.5%;bottom:7.5%;left:0;right:0;width:100%;height:auto}
/* iframe is taller than the frame: YouTube letterboxes the video in the middle and places its
   title bar / logo in the extra top & bottom area, which is cropped away → video itself is not cut */
.world-video .wv-frame iframe{left:0;top:-140px;width:100%;height:calc(100% + 280px);transform:none}
.world-video .wv-paused{top:7.5%;bottom:7.5%}
.world-video .wv-cap{bottom:2.2%}
.world-video .wv-bar{bottom:1.4%}
@media (max-width:600px){.world-video{aspect-ratio:16/12}.world-video .wv-thumb,.world-video .wv-frame,.world-video .wv-paused{top:12.5%;bottom:12.5%}.world-video .wv-bar{bottom:1.5%}}

/* laurel under the brand mark */
/* opening logo: slow fade-in after the prologue */
/* same motion as the prologue lines */
#ov-logo.gate > *{opacity:0;filter:blur(6px);transform:translateY(8px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
#ov-logo.gate.in > *{opacity:1;filter:none;transform:none}

/* WORLD — STORY */
.story{display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:clamp(24px,4vw,64px);margin-top:clamp(64px,8vw,120px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.story-k{display:flex;align-items:center;gap:12px;font:400 11px/1 var(--mono);letter-spacing:.26em;color:var(--mute);align-self:start;position:sticky;top:110px}
.story-k i{width:22px;height:1px;background:var(--red)}
.story-body{max-width:760px}
.story-body p{font:300 clamp(15px,1.15vw,18px)/2.2 'Noto Serif JP',serif;letter-spacing:.06em;color:#d9d6d1;text-wrap:pretty}
.story-body p + p{margin-top:2em}
.story-lead{color:var(--fg) !important}
.story-yr{font:inherit}
.story-err{font:inherit;letter-spacing:.12em;color:var(--red);text-shadow:0 0 14px oklch(0.6 0.22 27 / .45)}
.story-err em{font-style:normal;opacity:.6}
.story-q{color:var(--fg) !important;padding-left:18px;border-left:1px solid var(--red)}

@media (max-width:820px){.story{grid-template-columns:1fr;gap:22px}.story-k{position:static}.story-body p br{display:none}}

/* laurel sits above the "D" of the final logo (logo stays centered) */
.final-logo{position:relative;line-height:0}
/* beside the "D": right edge of laurel touches the logo's left edge, vertically centered */
.final-logo .laurel{position:absolute;right:100%;left:auto;top:50%;bottom:auto;width:clamp(230px,19vw,320px);margin:0 clamp(14px,1.6vw,28px) 0 0;transform:translateY(-55%);pointer-events:none}
.final-logo .laurel img{display:block;width:100%;height:auto}
@media (max-width:820px){.final-logo .laurel{width:min(26vw,120px);margin-right:8px}}

/* news */
.nw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.nw-item{display:grid;grid-template-columns:130px 150px minmax(0,1fr) auto;align-items:baseline;gap:20px;padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--line);color:inherit;transition:background .35s,padding .35s}
.nw-item time{font:400 11px/1.6 var(--mono);letter-spacing:.16em;color:var(--mute)}
.nw-cat{font:400 10px/1.6 var(--mono);letter-spacing:.24em;color:var(--red)}
.nw-t{font:200 clamp(14px,1.2vw,17px)/1.8 'Noto Serif JP',serif;letter-spacing:.08em}
.nw-arr{font-style:normal;font:300 14px/1 var(--sans);color:var(--mute);transition:transform .35s,color .35s}
.nw-item:hover{background:oklch(0.6 0.22 27 / .05);padding-left:14px;padding-right:14px}
.nw-item:hover .nw-arr{color:var(--red);transform:translateX(4px)}
@media (max-width:760px){
  .nw-item{grid-template-columns:auto 1fr auto;gap:8px 14px}
  .nw-t{grid-column:1 / -1;grid-row:2}
  .nw-arr{grid-column:3;grid-row:1}
}

/* platforms: coming soon */
.pf-soon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(48px,7vw,110px) 0;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.pf-soon-k{font:400 10px/1 var(--mono);letter-spacing:.3em;color:var(--mute)}
.pf-soon-t{font:200 clamp(36px,6vw,92px)/1 var(--sans);letter-spacing:.08em}
.pf-soon-t b{font-weight:200;color:var(--red)}
.pf-soon-line{width:64px;height:1px;background:var(--red)}

/* language switcher */
.lang{position:absolute;right:var(--pad);top:52px;font:400 10px/1 var(--mono);letter-spacing:.2em;z-index:3}
#lang-btn{display:flex;align-items:center;gap:8px;background:rgba(5,4,4,.55);border:1px solid var(--line);color:var(--fg);padding:8px 12px;cursor:pointer;font:inherit;letter-spacing:inherit;backdrop-filter:blur(6px);transition:border-color .3s}
#lang-btn:hover,.lang.open #lang-btn{border-color:var(--red,#e0182d)}
#lang-btn i{width:12px;height:12px;border:1px solid currentColor;border-radius:50%;position:relative;opacity:.8}
#lang-btn i::before{content:"";position:absolute;inset:0 3px;border:1px solid currentColor;border-radius:50%}
#lang-btn b{font-weight:400}
#lang-btn .car{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.lang.open #lang-btn .car{transform:rotate(-135deg) translateY(-1px)}
#lang-list{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:rgba(8,7,7,.94);border:1px solid var(--line);backdrop-filter:blur(10px);padding:6px 0;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .3s}
.lang.open #lang-list{opacity:1;transform:none;pointer-events:auto}
#lang-list button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:var(--mute);padding:10px 16px;font:300 13px/1 var(--jp),var(--sans);letter-spacing:.04em;text-align:left;cursor:pointer;transition:color .2s,background .2s}
#lang-list button em{font:400 9px/1 var(--mono);letter-spacing:.2em;font-style:normal;width:20px;color:rgba(255,255,255,.35)}
#lang-list button:hover{color:var(--fg);background:rgba(255,255,255,.04)}
#lang-list button.on{color:var(--fg)}
#lang-list button.on em{color:var(--red,#e0182d)}
html:not([lang="ja"]) .ja-only{display:none}
@media (max-width:820px){.lang{top:62px}}

/* char 02 (green armor): zoom in on the body */
.char .char-img[src$="char-02.png"]{object-position:72% 34%;transform:scale(1.35);transform-origin:72% 34%}
.char:hover .char-img[src$="char-02.png"]{transform:scale(1.4)}

/* char 02: shift left to show more of the glaive */
.char .char-img[src$="char-02.png"]{transform:scale(1.3);object-position:52% 30%;transform-origin:52% 30%}
.char:hover .char-img[src$="char-02.png"]{transform:scale(1.35)}