:root {
  --bg:#05080d; --ink:#e6eef6; --dim:#8a9bab; --amber:#ffb545;
  --cyan:#58e0ff; --red:#ff5b57; --green:#6ef2b0; --line:rgba(140,170,190,.20);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:Inter,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
  --pad:clamp(18px,3vw,44px);
}
* { box-sizing:border-box }
html,body { height:100%; width:100% }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none; touch-action:manipulation }
a { color:var(--cyan); text-underline-offset:3px }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
button:disabled { opacity:.25; cursor:default }
button:focus-visible,a:focus-visible,select:focus-visible { outline:2px solid var(--cyan); outline-offset:4px }
[hidden] { display:none!important }
#stage { position:fixed; inset:0; z-index:0; pointer-events:none }
#scene { position:fixed; display:block; pointer-events:auto; touch-action:none; cursor:grab }
.vignette { position:absolute; inset:0; background:radial-gradient(100% 90% at 65% 45%,transparent 45%,rgba(0,0,0,.3)); pointer-events:none }
.scan { position:absolute; inset:0; opacity:.025; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(120,200,255,.3) 0 1px,transparent 1px 4px) }
.grain { display:none }
#app { pointer-events:none; position:relative; z-index:2; height:100dvh; display:grid; gap:24px;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left)) }
.hud-top { pointer-events:auto; padding-right:52px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); min-width:0 }
.hud-left,.hud-right { display:flex; gap:12px; align-items:center; min-width:0 }
.hud-left { flex-shrink:1 }
.hud-right { flex-shrink:0 }
.tag { flex-shrink:0; font:10px var(--mono); letter-spacing:.12em; color:var(--amber); border:1px solid rgba(255,181,69,.35); padding:7px 10px; white-space:nowrap }
.sep { width:16px; height:1px; background:var(--line); flex-shrink:0 }
.chapter { font:10px var(--mono); letter-spacing:.10em; color:var(--dim); white-space:nowrap }
.asof { font:9px var(--mono); color:var(--dim); border-inline-start:1px solid var(--line); padding-inline-start:12px; white-space:nowrap }
.chip,.langselect { font:10px var(--mono); color:var(--dim); border:1px solid var(--line); padding:9px 10px; border-radius:3px; white-space:nowrap; transition:color .2s,border-color .2s,background .2s }
.chip:hover,.langselect:hover { color:var(--ink); border-color:rgba(140,170,190,.5); background:rgba(140,170,190,.05) }
.chip[aria-pressed="false"] { color:var(--dim) }
.langwrap { position:relative; display:inline-flex; min-width:0 }
.langselect { appearance:none; background:#0a111b; color:var(--ink); padding-inline-end:25px; max-width:150px; width:128px; cursor:pointer }
.langselect option { background:#0a111b; color:var(--ink) }
.caret { position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%); font-size:9px; color:var(--amber); pointer-events:none }
.panel { pointer-events:auto; touch-action:pan-y; align-self:center; width:min(39vw,560px); min-width:0; max-width:100%; max-height:100%; overflow:auto;
  padding:4px 18px 12px 0; scrollbar-width:thin; scrollbar-color:#284354 transparent; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch }
.kicker { font:9px var(--mono); color:var(--amber); letter-spacing:.16em; margin:0 0 22px; overflow-wrap:anywhere }
.stamp { font:500 clamp(36px,4.4vw,64px)/1 var(--mono); letter-spacing:-.06em; margin:0 0 14px; color:rgba(150,175,195,.35) }
h1#title { font-size:clamp(25px,2.8vw,43px); font-weight:750; line-height:1.22; letter-spacing:-.035em; text-wrap:balance; margin:0 0 22px; overflow-wrap:anywhere }
.lede { font-size:14px; color:#bfceda; line-height:1.9; margin:0 0 22px; overflow-wrap:anywhere }
.points { list-style:none; padding:0; margin:0; display:grid; gap:12px }
.points li { position:relative; padding-inline-start:15px; color:#8fa6b8; font-size:12px; line-height:1.8; overflow-wrap:anywhere }
.points li::before { content:""; position:absolute; inset-inline-start:0; top:.85em; width:5px; height:2px; background:var(--cyan) }
.points b { color:#d5e2eb; font-weight:600 }
.points em { color:var(--amber); font-style:normal }
.points code { font: .95em var(--mono) }
.metric { display:flex; gap:14px; align-items:baseline; margin:24px 0 0; padding-top:18px; border-top:1px solid var(--line) }
#metric-val { font:600 clamp(28px,3.5vw,48px)/1 var(--mono); letter-spacing:-.06em; color:var(--amber) }
#metric-label { font:9px/1.6 var(--mono); letter-spacing:.08em; color:var(--dim); overflow-wrap:anywhere }
.hud-bottom { pointer-events:auto; display:grid; grid-template-columns:1fr auto; gap:14px 20px; align-items:center; min-width:0; padding-top:8px }
.rail { grid-column:1/-1; display:grid; grid-template-columns:repeat(34,minmax(0,1fr)); gap:5px; width:100%; min-width:0 }
.tick { width:100%; min-width:0; height:20px; position:relative; padding:0 }
.tick::after { content:""; position:absolute; left:0; right:0; top:9px; height:2px; background:rgba(140,170,190,.25); transition:background .2s,height .2s,top .2s }
.tick[aria-current="true"]::after { background:var(--amber); top:7px; height:5px }
.tick:hover::after { background:var(--cyan) }
.nav { grid-column:2; grid-row:2; display:flex; gap:8px }
.navbtn { min-width:44px; min-height:44px; font:10px var(--mono); letter-spacing:.08em; padding:12px 16px; border:1px solid var(--line); border-radius:3px; color:var(--dim); transition:background .2s,border-color .2s }
.navbtn:hover { border-color:#7893a5; color:var(--ink) }
.navbtn.primary { display:flex; align-items:center; gap:12px; background:var(--amber); border-color:var(--amber); color:#0a0d12; font-weight:700 }
.navbtn.primary:hover { background:#ffc670 }
.next-arrow { font-size:15px }
.hint { grid-column:1; grid-row:2; font:9px/1.7 var(--mono); color:#658093; letter-spacing:.04em; margin:0 }
.more { grid-row:3; grid-column:1/-1; color:var(--amber); font:10px var(--mono); text-align:center }
.entry-locked #app { visibility:hidden; pointer-events:none }
.cover { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px;
  background:radial-gradient(ellipse at 50% 47%,#101e2b 0%,#080f18 36%,#05080d 72%);
  transition:opacity .32s,visibility .32s; contain:layout paint }
.cover.hidden { opacity:0; visibility:hidden; pointer-events:none }
.entry-control { width:min(82vw,72dvh,380px); aspect-ratio:1; display:block; padding:0; border:0; border-radius:50%; color:var(--amber); touch-action:manipulation }
.entry-control:disabled { opacity:1; cursor:progress }
.entry-control:focus-visible { outline:1px solid var(--amber); outline-offset:8px }
.entry-art { display:block; width:100%; height:100%; overflow:visible }
.entry-key { transform:translate(251px,251px) rotate(-135deg) }
.entry-turn { transform-origin:70px 0; transform-box:view-box }
.entry-shackle { transform-origin:212px 140px; transform-box:view-box }
.entry-retry,.entry-signal { opacity:0 }
.entry-error .entry-lock,.entry-error .entry-key { opacity:.15 }
.entry-error .entry-retry { opacity:1 }
.unlocking .entry-key { animation:key-insert 1.15s cubic-bezier(.4,0,.2,1) both }
.unlocking .entry-turn { animation:key-turn 1.15s cubic-bezier(.4,0,.2,1) both }
.unlocking .entry-shackle { animation:shackle-open 1.15s cubic-bezier(.2,.7,.2,1) both }
.unlocking .entry-trace { animation:lock-trace 1.15s ease-out both }
.unlocking .entry-signal { animation:unlock-signal 1.15s ease-out both }
.entry-waiting .entry-orbit { animation:entry-wait 4s linear infinite; transform-origin:180px 180px }
.entry-asleep * { animation-play-state:paused!important }
@keyframes key-insert {
  0% { transform:translate(251px,251px) rotate(-135deg); opacity:1 }
  27%,68% { transform:translate(232px,232px) rotate(-135deg); opacity:1 }
  100% { transform:translate(267px,267px) rotate(-135deg); opacity:0 }
}
@keyframes key-turn { 0%,28% { transform:rotate(0) } 58%,100% { transform:rotate(-55deg) } }
@keyframes shackle-open { 0%,55% { transform:translateY(0) rotate(0) } 83%,100% { transform:translateY(-20px) rotate(-24deg) } }
@keyframes lock-trace { 0% { stroke-dashoffset:700; opacity:.3 } 85%,100% { stroke-dashoffset:0; opacity:.75 } }
@keyframes unlock-signal { 0%,75% { opacity:0; transform:translateY(5px) } 95%,100% { opacity:1; transform:translateY(0) } }
@keyframes entry-wait { to { transform:rotate(360deg) } }
.drawer { pointer-events:auto; position:fixed; inset-block:0; inset-inline-end:0; z-index:30; width:min(460px,96vw); background:rgba(7,14,23,.98); backdrop-filter:blur(20px);
  border-inline-start:1px solid var(--line); padding:28px; overflow:auto; transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.7,.2,1); visibility:hidden }
.drawer.open { transform:none!important; visibility:visible }
.drawer-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:24px }
.drawer-head h3 { font:11px var(--mono); letter-spacing:.15em; color:var(--amber); margin:0 }
#source-list { list-style:none; padding:0; margin:0; display:grid; gap:20px }
#source-list li { border-bottom:1px solid var(--line); padding-bottom:16px; font:11px/1.8 var(--mono); color:var(--dim); overflow-wrap:anywhere }
#source-list b { display:block; color:var(--ink); font:600 13px/1.7 var(--sans); margin-bottom:6px }
#source-list span { display:block; margin-top:5px }
#source-list em { color:var(--amber); font-style:normal }
.drawer-foot { font:10px/1.9 var(--mono); color:var(--dim); margin-top:24px; overflow-wrap:anywhere }
.panel.swap > * { animation:rise .6s cubic-bezier(.16,.7,.25,1) both }
.panel.swap h1 { animation-delay:.04s }
.panel.swap .lede { animation-delay:.08s }
.panel.swap .points { animation-delay:.12s }
.panel.swap .metric { animation-delay:.16s }
@keyframes rise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@media (max-width:1100px) { .asof { display:none } .panel { width:40vw } }
@media (max-width:1099px) and (min-height:561px) {
  :root { --pad:20px }
  #app { gap:12px; padding-bottom:12px }
  .hud-top { padding-bottom:10px }
  .panel { width:100%; align-self:end; max-height:min(45dvh,480px); padding:16px 18px;
    background:linear-gradient(150deg,rgba(5,11,18,.38),rgba(5,11,18,.70));
    border:1px solid rgba(140,170,190,.16); border-radius:14px; contain:paint;
    text-shadow:0 1px 8px rgba(0,0,0,.9) }
  .points li { color:#b9cad6 }
  .kicker { margin-bottom:10px }
  .stamp { font-size:28px; margin-bottom:8px }
  h1#title { font-size:clamp(23px,4vw,34px); margin-bottom:14px }
  .lede { font-size:13px; line-height:1.8; margin-bottom:14px }
  .points { gap:8px }
  .points li { font-size:12px; line-height:1.75 }
  .metric { margin-top:15px; padding-top:12px }
  #metric-val { font-size:30px }
  .hint { display:none }
  .nav { grid-column:2 }
  .hud-bottom { gap:5px 12px }
  .more { grid-column:1; grid-row:2; text-align:start }
  .rail { gap:4px }
}
@media (max-width:560px) {
  :root { --pad:18px }
  .hud-top { flex-wrap:wrap; gap:10px }
  .hud-left,.hud-right { width:100%; justify-content:space-between; gap:10px }
  .hud-left { justify-content:start; min-height:36px }
  .hud-right { gap:8px }
  .hud-right .langwrap { flex:1 }
  .langselect { width:100%; max-width:none }
  .hud-right .chip { flex-shrink:0 }
  .tag { font-size:9px; padding:5px 8px }
  .chapter { font-size:9px }
  .panel { max-height:max(150px,min(45dvh,calc(100dvh - 340px))); padding:14px }
  .kicker { font-size:8px; letter-spacing:.1em }
  h1#title { font-size:25px }
  .stamp { font-size:24px }
  .chip,.langselect { font-size:10px; min-height:32px }
  .rail { gap:3px }
}
@media (max-height:560px) and (min-width:641px) {
  :root { --pad:14px }
  #app { gap:10px; padding-bottom:10px }
  .hud-top { padding-bottom:8px }
  .panel { width:43vw; align-self:center; padding:12px; max-height:100%;
    background:rgba(5,11,18,.58); border:1px solid var(--line); border-radius:12px }
  .stamp { font-size:24px; margin-bottom:7px }
  .kicker { margin-bottom:8px; font-size:8px }
  h1#title { font-size:23px; margin-bottom:10px }
  .lede { font-size:12px; line-height:1.7; margin-bottom:10px }
  .points { gap:6px }
  .points li { font-size:11px; line-height:1.6 }
  .metric { margin-top:12px; padding-top:10px }
  #metric-val { font-size:28px }
  .hud-bottom { gap:4px 14px }
  .navbtn { min-height:36px; padding:8px 12px }
  .hint { font-size:8px }
  .more { position:absolute; bottom:24px; left:25%; font-size:9px }
}
@media (max-height:560px) and (max-width:640px) {
  #app { gap:8px; padding-top:10px; padding-bottom:8px }
  .hud-top { gap:5px; padding-bottom:6px }
  .panel { width:100%; align-self:end; max-height:40dvh; padding:10px; background:rgba(5,11,18,.58); border:1px solid var(--line); border-radius:12px }
  .stamp { display:none }
  .kicker { margin-bottom:6px }
  h1#title { font-size:21px; margin-bottom:10px }
  .lede,.points li { font-size:11px; line-height:1.6 }
  .points { gap:6px }
  .hint { display:none }
  .hud-bottom { gap:2px }
  .more { grid-row:2; grid-column:1; text-align:start }
}
html[dir="rtl"] .panel { justify-self:end; padding:4px 0 12px 18px }
html[dir="rtl"] .drawer { transform:translateX(-102%) }
html[dir="rtl"] .next-arrow { transform:scaleX(-1) }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important }
  .scan { display:none }
}
body.still *,body.still *::before,body.still *::after { animation:none!important; transition:none!important }
body.still .cover { display:none }


@media (prefers-reduced-motion:reduce) { .unlocking .entry-key { opacity:0 } .unlocking .entry-shackle { transform:translateY(-20px) rotate(-24deg) } }

.repo-link { position:fixed; z-index:25; top:calc(var(--pad) + env(safe-area-inset-top)); right:calc(var(--pad) + env(safe-area-inset-right));
  display:grid; place-items:center; width:38px; height:36px; border:1px solid var(--line); border-radius:4px; color:var(--dim); background:rgba(6,13,21,.6); transition:color .2s,border-color .2s }
.repo-link svg { width:20px; height:20px }
.repo-link:hover { color:var(--ink); border-color:var(--cyan) }
@media (min-width:900px) and (max-width:1099px) and (min-height:561px) and (min-aspect-ratio:6/5) {
  .panel { width:38vw; align-self:center; max-height:100%; padding:4px 14px 12px 0; border:0; border-radius:0; background:none; text-shadow:none }
}
@media (max-width:1099px) and (min-height:561px) { html[dir="rtl"] .panel { padding:16px 18px } }