@charset "UTF-8";
@font-face{font-family:"Barlow Condensed";src:url("./fonts/BarlowCondensed-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("./fonts/BarlowCondensed-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#030403;
  --panel:#070907;
  --accent:#76b900;
  --accent-rgb:118,185,0;
  --ink:#ecf0ea;
  --silver:#a2aaa2;
  --muted:#626962;
  --line:rgba(220,229,220,.10);
  color-scheme:dark;
  font-family:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html{background:#020302}
html,body{margin:0;min-height:100%;color:var(--ink)}
body{height:100dvh;overflow:hidden;background:var(--bg);letter-spacing:.075em;transition:background-color .7s ease,color .7s ease}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
button:focus-visible,a:focus-visible,#stage:focus-visible{outline:1px solid var(--accent);outline-offset:5px}

.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.ambient::before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse 54% 76% at 46% 50%,rgba(var(--accent-rgb),.18),transparent 60%);filter:blur(40px);opacity:.9;transition:background .8s ease}
.ambient__halo{position:absolute;inset:10% 20% 4% 17%;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.08) 0,transparent 66%);filter:blur(12px)}
.ambient__scan{position:absolute;inset:0;background:linear-gradient(118deg,transparent 34%,rgba(255,255,255,.018) 48%,transparent 59%),repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.009) 6px);mix-blend-mode:screen}
.ambient__word{position:absolute;inset-inline-start:15vw;top:50%;translate:0 -52%;font-size:clamp(110px,18vw,330px);line-height:.78;letter-spacing:-.065em;color:rgba(255,255,255,.023);white-space:nowrap;text-transform:uppercase;transition:opacity .25s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
body.is-switching .ambient__word{opacity:0;translate:0 -47%}

.topbar{height:70px;position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 34px;border-bottom:1px solid var(--line);background:rgba(2,3,3,.55);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:baseline;gap:15px;text-decoration:none;color:var(--ink);width:max-content}
.brand strong{font-size:25px;font-weight:600;letter-spacing:-.015em}.brand strong span{color:var(--accent);transition:color .5s ease}
.brand small{font-size:8px;letter-spacing:.24em;color:var(--muted)}
.topbar__series{margin:0;font-size:9px;color:#7f8781;letter-spacing:.28em;display:flex;align-items:center;gap:14px}.topbar__series i{display:block;width:32px;height:1px;background:var(--accent)}
.topbar__count{justify-self:end;display:flex;align-items:baseline;gap:5px;margin:0}.topbar__count b{font-size:22px;font-weight:400;color:var(--ink)}.topbar__count span{font-size:10px;color:var(--muted)}

.archive{height:calc(100dvh - 108px);position:relative;z-index:2;display:grid;grid-template-columns:244px minmax(520px,1fr) 290px;max-width:1720px;margin:0 auto}
.archive>*{min-height:0}
.roster{border-inline-end:1px solid var(--line);padding:34px 18px 28px 24px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(5,7,7,.62),rgba(3,4,4,.36));backdrop-filter:blur(14px)}
.roster__heading{padding:0 8px 25px}.roster__heading p{margin:0 0 7px;font-size:11px;letter-spacing:.22em;color:#b8bfba}.roster__heading span{font-size:8px;letter-spacing:.21em;color:var(--muted)}
.roster__list{display:flex;flex:1;min-height:0;flex-direction:column;gap:6px;overflow-y:auto;padding-inline-end:4px;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.28) transparent}
.roster__list::-webkit-scrollbar{width:3px}.roster__list::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.28)}
.roster-item{min-height:72px;display:grid;grid-template-columns:18px 42px minmax(0,1fr) 5px;align-items:center;gap:8px;padding:6px 7px;text-align:start;position:relative;border:1px solid transparent;border-radius:2px;transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.roster-item:hover{background:rgba(255,255,255,.025);transform:translateX(2px)}
.roster-item.is-active{background:linear-gradient(90deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.025));border-color:rgba(var(--accent-rgb),.22)}
.roster-item__index{align-self:start;padding-top:4px;font-size:9px;color:#5c645e;letter-spacing:.14em}.roster-item.is-active .roster-item__index{color:var(--accent)}
.roster-item__portrait{display:block;width:42px;aspect-ratio:2/3;overflow:hidden;background:#060706;box-shadow:0 9px 24px #0008}
.roster-item__portrait img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:saturate(.55) brightness(.72)}
.roster-item:hover img,.roster-item.is-active img{transform:scale(1.035);filter:saturate(1) brightness(.98)}
.roster-item__copy{min-width:0;display:flex;flex-direction:column;gap:5px}.roster-item__copy b{font-size:13px;line-height:1;font-weight:400;letter-spacing:.06em}.roster-item__copy small{font-size:6px;line-height:1.35;letter-spacing:.14em;color:#707872;overflow-wrap:anywhere}.roster-item__signal{width:3px;height:3px;justify-self:end;background:#464d48;box-shadow:none;transition:background .35s ease,box-shadow .35s ease}.roster-item.is-active .roster-item__signal{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.roster__note{margin:auto 8px 0;font-size:7px;line-height:1.5;letter-spacing:.16em;color:#4d554f}.roster__note span{display:inline-block;width:4px;height:4px;margin-inline-end:7px;background:var(--accent);transform:rotate(45deg)}

.display{position:relative;isolation:isolate;min-width:0;overflow:hidden}
.display::before{content:"";position:absolute;left:50%;top:51%;width:min(73vh,680px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.11) 0,rgba(var(--accent-rgb),.028) 46%,transparent 71%);filter:blur(15px);pointer-events:none;transition:background .7s ease}
.display__corner{position:absolute;width:45px;height:45px;pointer-events:none;z-index:3}.display__corner--a{inset-inline-start:23px;top:22px;border-inline-start:1px solid rgba(var(--accent-rgb),.48);border-top:1px solid rgba(var(--accent-rgb),.48)}.display__corner--b{inset-inline-end:23px;bottom:22px;border-inline-end:1px solid rgba(var(--accent-rgb),.28);border-bottom:1px solid rgba(var(--accent-rgb),.28)}
#stage{position:absolute;inset:0;touch-action:none;cursor:grab;z-index:1}
#stage:active{cursor:grabbing}#stage canvas{display:block;width:100%;height:100%;opacity:1;filter:none;transition:opacity .28s ease,filter .28s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
body.is-switching #stage canvas{opacity:.12;filter:blur(10px);transform:scale(.965)}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--accent);font-size:10px;letter-spacing:.28em;padding:30px;text-align:center;white-space:pre-wrap;z-index:5}
#loading i{width:72px;height:1px;position:relative;overflow:hidden;background:rgba(var(--accent-rgb),.15)}#loading i::after{content:"";position:absolute;inset:0;width:42%;background:var(--accent);animation:sync-load 1.1s ease-in-out infinite}
@keyframes sync-load{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
.view-label{position:absolute;inset-inline-start:33px;top:26px;z-index:4;margin:0;font-size:8px;color:#747d76;letter-spacing:.25em;display:flex;align-items:center;gap:10px}.view-label span{width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}.view-label b{font-weight:400}
.stage-hint{position:absolute;inset-inline-start:33px;bottom:28px;z-index:4;color:#69716b;font-size:8px;letter-spacing:.2em;display:flex;align-items:center;gap:10px}.stage-hint__gesture{font-size:15px;color:var(--accent)}.stage-hint i{width:26px;height:1px;background:#62696266}.stage-hint button{font-size:8px;letter-spacing:.2em;color:#9ba39d}
.stage-switch{position:absolute;inset-inline-end:26px;bottom:24px;z-index:4;display:grid;grid-template-columns:34px auto 34px;align-items:center;border:1px solid var(--line);background:#050706aa;backdrop-filter:blur(12px)}
.stage-switch>button{width:34px;height:34px;color:#87908a;font-size:13px;transition:color .2s ease,background .2s ease}.stage-switch>button:hover{color:var(--ink);background:rgba(var(--accent-rgb),.08)}
.stage-switch p{margin:0;min-width:90px;height:34px;padding:0 11px;border-inline:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:9px;font-size:9px;color:var(--muted)}.stage-switch p span{color:var(--accent)}.stage-switch p i{width:12px;height:1px;background:#4c544e}.stage-switch p b{font-weight:400;color:#aeb6b0;letter-spacing:.17em}

.dossier{border-inline-start:1px solid var(--line);padding:46px 31px 28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(12,15,13,.82),rgba(5,7,6,.9));backdrop-filter:blur(18px);position:relative;z-index:4}
.dossier::before{content:"";position:absolute;inset-inline-start:-1px;top:46px;width:1px;height:86px;background:var(--accent)}
.dossier__identity{min-height:0}
.eyebrow{margin:0 0 25px;font-size:9px;letter-spacing:.25em;color:#9ba39d;display:flex;align-items:center;gap:10px}.eyebrow i{width:20px;height:1px;background:#59615b}.eyebrow span:last-child{color:#66706a}
h1{font-size:49px;line-height:.86;letter-spacing:-.035em;font-weight:400;margin:0;max-width:220px;text-wrap:balance}
.description{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;line-height:1.65;letter-spacing:.055em;color:#878f89;margin:22px 0 0;max-width:220px}
dl{margin:39px 0 0;border-top:1px solid var(--line)}
dl div{padding:13px 0 12px;display:grid;grid-template-columns:67px 1fr;border-bottom:1px solid var(--line)}
dt{font-size:8px;letter-spacing:.2em;color:#59615b}dd{margin:0;font-size:10px;letter-spacing:.14em;color:#b9c0bb;overflow-wrap:anywhere}
.actions{display:grid;grid-template-columns:1fr .72fr;border:1px solid var(--line);margin-bottom:23px}.actions button{min-height:42px;font-size:9px;letter-spacing:.15em}.actions button+button{border-inline-start:1px solid var(--line)}.actions .primary{background:var(--ink);color:var(--bg);font-weight:600}.actions .primary span{margin-inline-start:7px}
.interaction>label{display:block;font-size:8px;color:#8f978f;letter-spacing:.2em}.interaction output{float:inline-end;color:var(--accent)}
input[type=range]{display:block;width:100%;height:2px;margin:14px 0 22px;accent-color:var(--accent);cursor:pointer}
.hidden-controls{display:none}.save{width:100%;text-align:start;border-top:1px solid var(--line);padding:17px 0 0;font-size:9px;letter-spacing:.18em;color:#9fa6a1}.save span{float:inline-end;color:var(--accent)}

footer{height:38px;position:relative;z-index:10;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:7px;color:#4e5751;letter-spacing:.22em;background:rgba(2,3,3,.68);backdrop-filter:blur(18px)}footer button{font-size:7px;color:#68716b;letter-spacing:.18em}
dialog{max-width:430px;border:1px solid rgba(var(--accent-rgb),.3);background:#101312;padding:38px;color:var(--ink);line-height:1.8}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}dialog h2{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:30px;line-height:1.35;font-weight:500;letter-spacing:.03em;margin:18px 0}dialog p{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:12px;color:#b1b9b3}.dialog-index{font-family:"Barlow Condensed",sans-serif;font-size:10px;color:var(--accent);letter-spacing:.2em}.fine{font-size:10px;color:#777f79}.close{position:absolute;inset-inline-end:16px;top:8px;font-size:25px;color:var(--accent)}

@media(min-width:1500px){.archive{grid-template-columns:270px minmax(620px,1fr) 320px}.roster{padding-inline:28px 20px}.dossier{padding-inline:36px 38px}h1{font-size:55px}.roster-item__portrait{width:46px}.roster-item{grid-template-columns:20px 46px minmax(0,1fr) 5px;min-height:78px}}
@media(max-width:1120px){.archive{grid-template-columns:194px minmax(430px,1fr) 252px}.roster{padding-inline:14px 10px}.roster-item{grid-template-columns:16px 38px minmax(0,1fr) 4px;gap:7px;min-height:66px}.roster-item__portrait{width:38px}.roster-item__copy b{font-size:12px}.roster-item__copy small{font-size:5.6px}.dossier{padding-inline:24px 22px}h1{font-size:41px}.description{max-width:195px}}
@media(max-width:840px){
  body{height:auto;min-height:100dvh;overflow:auto}
  .ambient__word{inset-inline-start:-5vw;top:40%;font-size:34vw}
  .topbar{height:62px;padding:0 max(18px,env(safe-area-inset-left))}.brand small,.topbar__series{display:none}.topbar__count b{font-size:18px}
  .archive{height:auto;min-height:calc(100dvh - 62px);display:flex;flex-direction:column}
  .roster{order:0;border:0;border-bottom:1px solid var(--line);padding:15px 0 13px;background:rgba(4,6,5,.84);overflow:hidden}
  .roster__heading,.roster__note{display:none}
  .roster__list{display:flex;flex:none;flex-direction:row;gap:10px;overflow-x:auto;overflow-y:hidden;padding-inline:18px;scroll-padding-inline:18px;scroll-snap-type:x mandatory;scrollbar-width:none}.roster__list::-webkit-scrollbar{display:none}
  .roster-item{flex:0 0 calc(72% - 18px);min-height:78px;grid-template-columns:18px 43px minmax(0,1fr) 4px;gap:8px;padding:7px 8px;scroll-snap-align:start}
  .roster-item__portrait{width:43px}.roster-item__copy b{font-size:14px}.roster-item__copy small{font-size:6px}
  .display{order:1;height:72dvh;min-height:570px;border-bottom:1px solid var(--line)}
  #stage{touch-action:pan-y pinch-zoom}
  .dossier{order:2;border:0;padding:34px max(24px,env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));gap:36px}
  .dossier::before{inset-inline-start:24px;top:-1px;width:82px;height:1px}
  .dossier__identity{display:grid;grid-template-columns:1fr 1fr;gap:18px}.eyebrow,h1,.description,dl{grid-column:1/-1}.description{max-width:330px}dl{margin-top:12px}
  .display__corner--a{inset-inline-start:15px}.display__corner--b{inset-inline-end:15px}.view-label,.stage-hint{inset-inline-start:22px}
  .stage-switch{inset-inline-end:18px}
  .stage-switch>button{width:44px;height:44px}
  .stage-switch p{height:44px;min-width:82px}
  .actions button{min-height:48px}
  .save{min-height:44px}
  footer{display:none}
}
@media(max-width:430px){.display{height:68dvh;min-height:540px}.stage-hint{bottom:24px}.stage-hint i,.stage-hint button{display:none}.stage-switch{bottom:20px}.stage-switch p{min-width:76px;padding-inline:7px}.stage-switch>button{width:44px}.roster-item{flex-basis:76%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}