/* The two working surfaces of a run, the command console and lighting the forest, break out of the
   page's reading column to use the screen: wide enough for three columns on a desktop, each column
   scrolling on its own so long runs never push the rest down. Reading text keeps a reading width. */
.pt-main.stage{max-width:1640px;padding-left:32px;padding-right:32px}
.pt-main.stage .pt-head p{max-width:760px}

/* ---------------------------------------------------------------- command */
.st-command{padding:0;overflow:hidden;background:linear-gradient(180deg,rgba(10,14,24,.96),rgba(7,10,17,.98));border-color:rgba(150,170,220,.14)}
.st-cmd-hud{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 22px;border-bottom:1px solid rgba(150,170,220,.1);
  background:radial-gradient(600px 120px at 0 0,rgba(74,222,156,.08),transparent 70%)}
.st-cmd-title{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.st-cmd-title small{display:flex;align-items:center;gap:8px;font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--p-pass)}
.st-cmd-title b{font-size:19px;font-weight:700;letter-spacing:.06em;color:#fff}
.st-cmd-stats{display:flex;gap:0;min-width:0}
.st-cmd-stats span{display:flex;flex-direction:column;gap:2px;padding:0 20px;border-left:1px solid rgba(150,170,220,.1);min-width:0}
.st-cmd-stats small{font:500 10px var(--mono);letter-spacing:.14em;color:var(--p-faint);white-space:nowrap}
.st-cmd-stats b{font:600 24px/1.1 var(--mono);color:var(--p-ink)} .st-cmd-stats b i{font-style:normal;font-size:13px;color:var(--p-faint)}
.st-cmd-stats b.txt{font:600 15px/1.6 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.st-cmd-stats span.hot b{color:var(--p-wait);text-shadow:0 0 14px rgba(245,185,92,.6)}
.st-command .st-cmd-intro{margin:0;padding:12px 22px 0}
.st-command .st-cmd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:0;margin:12px 0 0;border-top:1px solid rgba(150,170,220,.08)}
.st-col{display:flex;flex-direction:column;min-width:0;height:min(680px,calc(100vh - 210px));min-height:440px;border-left:1px solid rgba(150,170,220,.08)}
.st-col:first-child{border-left:0}
.st-col-h{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font:500 11px var(--mono);letter-spacing:.14em;color:var(--p-mut);border-bottom:1px solid rgba(150,170,220,.06)}
.st-col-b{flex:1;min-height:0;overflow-y:auto;padding:12px 18px 18px;scrollbar-width:thin;scrollbar-color:rgba(150,170,220,.25) transparent}
.st-hot{color:var(--p-wait);animation:hud-blink 1.6s steps(2) infinite}
.st-command .st-feed{max-height:none;overflow:visible;padding:0}
.st-command .st-step span.mut em{font-style:normal;color:var(--p-acc)}
.st-command .st-step p{font-size:13px}
.st-asks{background:radial-gradient(500px 260px at 50% 0,rgba(245,185,92,.05),transparent 70%)}
.st-asks .st-col-b{display:flex;flex-direction:column;gap:14px}
.st-empty-ask{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--p-faint);font-size:12.5px}
.st-empty-ask i{width:46px;height:46px;border-radius:50%;border:1px dashed rgba(245,185,92,.35);box-shadow:inset 0 0 16px rgba(245,185,92,.12);animation:hud-blink 3s steps(2) infinite}
.st-empty-ask p{max-width:260px;margin:0;line-height:1.7}
.st-command .st-answered{gap:6px}
.st-command .st-answered>.st-k{color:var(--p-pass)}
.st-command .st-answered div{grid-template-columns:minmax(0,1fr) auto}
.st-command .st-guide{padding:0;border:0;border-left:1px solid rgba(150,170,220,.08);border-radius:0;background:none}
.st-guide-form{padding:12px 18px;border-bottom:1px solid rgba(150,170,220,.06);background:rgba(0,0,0,.15)}
.st-guide-form textarea{margin-top:8px}
.st-command .st-gitem:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------------------------------------------------------------- lighting the forest */
.pt-main.stage .st-tree{padding:18px}
.pt-main.stage .st-tree .st-stagegrid{grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr);gap:18px}
.pt-main.stage .st-tree .st-map{height:min(720px,calc(100vh - 200px))}
.pt-main.stage .st-tree .st-insts{grid-template-columns:1fr 1fr}
.pt-main.stage .st-tree .st-readcol{display:flex;flex-direction:column;height:calc(min(720px,calc(100vh - 200px)) + 170px);max-height:calc(100vh - 84px);overflow:hidden;padding:0;
  border-radius:14px;border:1px solid rgba(150,170,220,.12);background:rgba(0,0,0,.18)}
.pt-main.stage .st-tree .st-intro{margin:0;padding:12px 18px;border-bottom:1px solid rgba(150,170,220,.08);font-size:12px}
.pt-main.stage .st-tree .st-detail{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0;background:none;animation:none}
.pt-main.stage .st-tree .st-detail.lit{background:linear-gradient(180deg,rgba(255,200,130,.05),transparent 200px)}
.pt-main.stage .st-tree .st-detail-h{padding:14px 18px 0}
.pt-main.stage .st-tree .st-detail>:not(.st-detail-h):not(.st-detail-a){padding-left:18px;padding-right:18px}
.pt-main.stage .st-tree .st-detail{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(150,170,220,.25) transparent}
.pt-main.stage .st-tree .st-detail-a{position:sticky;bottom:0;margin-top:auto;padding:12px 18px;border-top:1px solid rgba(150,170,220,.1);background:linear-gradient(0deg,rgba(9,12,20,.98),rgba(9,12,20,.9));backdrop-filter:blur(6px)}
.pt-main.stage .st-tree .st-split{grid-template-columns:1fr 1fr;gap:10px}
.pt-main.stage .st-tree .st-split>div{font-size:13px}

@media (max-width:1099px){
  .st-command .st-cmd-grid{grid-template-columns:1fr 1fr} .st-asks{grid-column:1/-1;order:-1;height:auto;min-height:0}
  .st-cmd-stats span{padding:0 12px} .st-cmd-stats b.txt{max-width:140px}
}
@media (max-width:760px){
  .st-cmd-hud{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}
  .st-cmd-stats{flex-wrap:wrap;row-gap:10px} .st-cmd-stats span{padding:0 12px 0 0;border-left:0}
  .st-command .st-cmd-grid{grid-template-columns:1fr} .st-col{height:auto;min-height:0;max-height:none;border-left:0;border-top:1px solid rgba(150,170,220,.08)}
  .st-col-b{max-height:420px}
}
@media (prefers-reduced-motion:reduce){.st-hot,.st-empty-ask i{animation:none}}

/* the 3D map's hint */
.st-map-hint{position:absolute;right:14px;bottom:10px;font:500 10.5px var(--mono);letter-spacing:.08em;color:rgba(170,185,220,.45);pointer-events:none}

/* long claims fold to a few lines; a click opens them */
.st-clamp{position:relative;max-height:7.6em;overflow:hidden;cursor:pointer;transition:max-height .35s ease}
.st-clamp.long{max-height:9.6em}
.st-clamp::after{content:'展开';position:absolute;left:0;right:0;bottom:0;height:3.2em;display:flex;align-items:flex-end;justify-content:flex-end;padding-right:2px;
  font:500 11px var(--mono);letter-spacing:.08em;color:var(--p-acc);background:linear-gradient(0deg,rgba(9,12,20,.98) 30%,rgba(9,12,20,0))}
html[lang="en"] .st-clamp::after{content:'more'}
.st-clamp.open{max-height:none} .st-clamp.open::after{display:none}
.st-clamp p{margin:4px 0;font-size:13px;line-height:1.75;color:#C9D1DF}

/* command: the stage strip, the running light on the timeline, ring countdowns */
.st-cmd-stages{display:flex;gap:3px;margin-top:8px}
.st-cmd-stages i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.08)}
.st-cmd-stages i.done{background:rgba(74,222,156,.55)}
.st-cmd-stages i.now{background:var(--p-pass);box-shadow:0 0 8px var(--p-pass);animation:hud-blink 1.4s steps(2) infinite}
.st-rail{position:relative}
.st-rail::before{content:'';position:absolute;left:24px;top:18px;bottom:0;width:1px;background:linear-gradient(180deg,rgba(125,162,255,.5),rgba(125,162,255,.05))}
.st-rail::after{content:'';position:absolute;left:23px;top:0;width:3px;height:70px;border-radius:2px;background:linear-gradient(180deg,transparent,#9CC8FF,transparent);
  box-shadow:0 0 12px #7DA2FF;animation:st-run 4.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes st-run{from{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(520px);opacity:0}}
.st-command .st-step::before{display:none}
.st-command .st-step:first-child i{background:var(--p-acc);box-shadow:0 0 0 4px rgba(125,162,255,.15),0 0 14px var(--p-acc)}
.st-command .st-step:hover{background:rgba(125,162,255,.04);border-radius:8px}
.st-command .st-due{display:grid;grid-template-columns:44px auto 1fr;align-items:center;gap:10px;height:auto;margin-top:12px;background:none;overflow:visible}
.st-ring{width:44px;height:44px;transform:rotate(-90deg)}
.st-ring circle{fill:none;stroke-width:3}
.st-ring .bg{stroke:rgba(255,255,255,.08)} .st-ring .fg{stroke:var(--p-wait);stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(245,185,92,.7));transition:stroke-dashoffset 1s linear}
.st-due.low .st-ring .fg{stroke:var(--p-fail);filter:drop-shadow(0 0 5px rgba(255,138,126,.8))}
.st-command .st-due b{font:600 20px var(--mono);color:var(--p-wait)} .st-command .st-due.low b{color:var(--p-fail)}
.st-command .st-due span{padding:0;font:12px var(--sans);color:var(--p-mut)}
@media (prefers-reduced-motion:reduce){.st-rail::after,.st-cmd-stages i.now{animation:none}}

/* the WebGL map: a 2D layer on top carries the names and takes the pointer */
.st-gl canvas{position:absolute;inset:0;width:100%;height:100%}
.st-gl .st-gl-over{cursor:grab}
.st-gl-tools{position:absolute;right:14px;top:12px;z-index:2;display:flex;gap:8px}
.st-gl-spin{height:26px;padding:0 11px;border-radius:999px;border:1px solid rgba(150,170,220,.25);background:rgba(5,8,16,.6);color:rgba(170,182,210,.6);font:500 11.5px var(--mono);cursor:pointer}
.st-gl-spin.on{color:#FFD696;border-color:rgba(255,214,150,.55);background:rgba(255,214,150,.08)}
.st-gl-spin:hover{color:#fff}
.st-gl-home{position:relative;height:26px;padding:0 11px;border-radius:999px;border:1px solid rgba(150,170,220,.25);background:rgba(5,8,16,.6);
  color:var(--p-mut);font:500 11px var(--mono);letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(6px)}
.st-gl-home:hover{color:#fff;border-color:rgba(255,214,150,.6)}

/* command: the run timeline */
.st-mission-wrap{position:relative;padding:10px 22px 4px;border-bottom:1px solid rgba(150,170,220,.08);background:linear-gradient(180deg,rgba(125,162,255,.04),transparent)}
.st-mission{width:100%;height:96px}
.st-mission svg{display:block;overflow:visible}
.st-m-cd{font:600 11px var(--mono)}
.st-m-head{filter:drop-shadow(0 0 5px #fff);animation:hud-blink 1.4s steps(2) infinite}
.st-m-lab{font:500 11px var(--sans);letter-spacing:.02em}
.st-m-time{font:500 10px var(--mono);fill:var(--p-faint)}
.st-m-now{animation:hud-blink 1.6s ease-in-out infinite}
.st-m-ask{animation:st-stepin .6s ease-out}
.st-m-key{position:absolute;left:22px;top:8px;display:flex;gap:14px;font:500 10.5px var(--mono);color:var(--p-faint)}
.st-m-key span{display:flex;align-items:center;gap:6px}
.st-m-key i{display:inline-block}
.st-m-key .tk{width:1px;height:9px;background:rgba(220,230,250,.7)} .st-m-key .fl{width:0;height:0;border-left:8px solid #F5B95C;border-top:4px solid transparent;border-bottom:4px solid transparent}
.st-m-key .gd{width:7px;height:7px;background:#4ADE9C;transform:rotate(45deg)} .st-m-key .nw{width:2px;height:10px;background:#4ADE9C}
@media (max-width:760px){.st-m-key{display:none}.st-mission-wrap{padding:8px 12px 2px}}
@media (prefers-reduced-motion:reduce){.st-m-now,.st-m-ask{animation:none}}

/* onboarding and alignment scenes (meet-fx.js), in the results gate's style */
.mf-box{position:relative;height:clamp(240px,26vw,320px);margin:6px 0 16px;border-radius:14px;overflow:hidden;border:1px solid rgba(150,170,220,.14);
  background:radial-gradient(70% 90% at 50% 60%,rgba(40,52,90,.35),rgba(4,6,12,0) 70%),#05070d}
.mf-box canvas{position:absolute;inset:0;width:100%;height:100%}
.mf-hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:18px;height:54px;padding:0 18px;border-bottom:1px solid rgba(150,170,220,.09);background:linear-gradient(180deg,rgba(4,6,12,.85),rgba(4,6,12,0))}
.mf-title{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.mf-title small{font:500 9.5px var(--mono);letter-spacing:.22em;color:rgba(170,185,220,.55)}
.mf-title b{font-size:16px;font-weight:700;letter-spacing:.06em;color:#fff} .mf-title em{font-style:normal;color:#FFC08A;text-shadow:0 0 16px rgba(255,190,130,.6)}
.mf-live{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font:500 11.5px var(--mono);color:rgba(210,220,240,.78)}
.mf-live .chip{flex:none;padding:1px 6px;border-radius:3px;font-size:9.5px;letter-spacing:.1em;color:#04060c;background:#96C0FF;box-shadow:0 0 10px rgba(150,192,255,.55);animation:st-blink 2s steps(2) infinite}
.mf-tick{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@keyframes mf-in{from{opacity:0;transform:translateY(3px)}}
.mf-num{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.mf-num b{font:700 24px var(--mono);color:#fff;text-shadow:0 0 20px rgba(255,190,130,.45)} .mf-num small{font:500 11px var(--mono);color:rgba(170,185,220,.6)} .mf-num i{font-style:normal;color:#fff}
/* the onboarding scene keeps its place while it docks as a small window under the header */
.mf-spot{height:clamp(280px,30vw,380px);margin:6px 0 16px}
.mf-spot>.mf-box{height:100%;margin:0}
.mf-box.mf-dock{position:fixed;top:76px;right:14px;width:clamp(210px,calc((100vw - 912px) / 2 - 30px),280px);height:min(360px,calc(100vh - 100px));z-index:60;box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 1px rgba(255,190,130,.18);animation:mf-dock .35s cubic-bezier(.2,.8,.2,1)}
.mf-dock .mf-hud{height:34px;padding:0 12px;gap:10px}
.mf-dock .mf-live,.mf-dock .mf-title small{display:none}
.mf-dock .mf-title b{font-size:13px} .mf-dock .mf-num b{font-size:16px}
@keyframes mf-dock{from{opacity:0;transform:translateY(-8px) scale(.97)}}
@media (max-width:760px){.mf-live{display:none}.mf-box{height:220px}.mf-spot{height:260px}}
@media (prefers-reduced-motion:reduce){.mf-live .chip,.mf-tick{animation:none}}

/* the two hands either side of the onboarding questions, fixed in the window behind the page */
.mf-hands{position:fixed;inset:0;z-index:3;pointer-events:none}   /* over the card: the threads run round the question, never across its text */
.mf-hands canvas{position:absolute;inset:0;width:100%;height:100%}
.st-onb{position:relative;z-index:1}

/* the alignment's hourglass carried on as a slim strip under the header, as wide as the questions (meet-fx.js) */
.mf-strip{position:fixed;top:60px;left:50%;transform:translate(-50%,-8px);width:min(912px,calc(100vw - 48px));height:54px;z-index:20;pointer-events:none;opacity:0;isolation:isolate;
  border:1px solid rgba(150,170,220,.16);border-top:0;border-radius:0 0 12px 12px;background:#070a12;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.8);transition:opacity .3s,transform .3s}
.mf-strip.on{opacity:1;transform:translate(-50%,0)}
.mf-strip canvas{position:absolute;inset:0;width:100%;height:100%}
.mf-strip-t{position:absolute;left:16px;top:0;bottom:0;display:flex;align-items:center;gap:14px;white-space:nowrap}
.mf-strip-t b{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:#fff} .mf-strip-t em{font-style:normal;color:#FFC08A}
.mf-strip-t span{font:500 11px var(--mono);color:rgba(170,185,220,.7)} .mf-strip-t i{font-style:normal;color:#fff;font-weight:700}
@media (max-width:760px){.mf-strip{top:56px}}

/* the alignment one point at a time under its scene (study.js Align) */
.st-steps{display:flex;align-items:center;gap:8px;margin:2px 0 14px;flex-wrap:wrap}
.st-stepdot{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;border:1px solid var(--p-line2);background:transparent;color:var(--p-mut);font:600 11.5px var(--mono);cursor:pointer;transition:all .2s}
.st-stepdot i{font-style:normal}
.st-stepdot.ok{border-color:rgba(255,190,130,.55);color:#FFC08A;background:rgba(255,190,130,.08)}
.st-stepdot.on{border-color:#96C0FF;color:#fff;background:rgba(150,192,255,.16);box-shadow:0 0 0 3px rgba(150,192,255,.12)}
.st-stepdot.warn{border-color:var(--p-fail);color:var(--p-fail)}
.st-stepdot.end{font-family:inherit;font-weight:500}
.st-one{animation:st-one .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes st-one{from{opacity:0;transform:translateX(14px)}}
.st-onenav{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
@media (prefers-reduced-motion:reduce){.st-one{animation:none}}
.st-endnote{margin:4px 0 12px;font-size:13.5px;color:#C9D1DF}
.st-more-d{border:1px solid var(--p-line);border-radius:10px;padding:10px 14px} .st-more-d summary{cursor:pointer;color:var(--p-mut);font-size:13px}
.st-more-d[open] summary{margin-bottom:10px}

/* the alignment: the scene and the point being checked side by side, the points as a row under them (GlassFx) */
.st-alignrow{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:6px}
.mf-glass{display:flex;flex-direction:column;min-height:340px;border-radius:14px;overflow:hidden;border:1px solid rgba(150,170,220,.14);background:radial-gradient(90% 70% at 50% 55%,rgba(20,28,48,.55),#05070d)}
.mf-glass-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(150,170,220,.09)}
.mf-glass-h b{font-size:15px;color:#fff;letter-spacing:.05em} .mf-glass-h em{font-style:normal;color:#FFC08A}
.mf-glass-h span{font:500 11px var(--mono);color:rgba(200,210,235,.75)}
.mf-glass-c{position:relative;flex:1}
.mf-glass-c canvas{position:absolute;inset:0;width:100%;height:100%}
.st-alignmain{display:flex;flex-direction:column;justify-content:center;padding:18px 20px;border-radius:14px;border:1px solid var(--p-line);background:rgba(8,11,20,.55)}
.st-alignmain .st-q{border:0;background:transparent;padding:0;box-shadow:none}
.st-ledger{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.st-ledger li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;border:1px solid var(--p-line);cursor:pointer;transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.st-ledger li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--p-line2)}
.st-ledger li i{font:600 10.5px var(--mono);font-style:normal;color:var(--p-faint)}
.st-ledger li b{font-size:12.5px;font-weight:500;color:var(--p-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ledger li em{font-style:normal;font-size:11px;min-height:14px}
.st-ledger li.now{border-color:#96C0FF;background:rgba(150,192,255,.08)}
.st-ledger li:not(.open) b{color:#fff}
.st-ledger li.agree::before,.st-ledger li.done::before{background:#FFC08A} .st-ledger li.agree em,.st-ledger li.done em{color:#FFC08A}
.st-ledger li.differ::before{background:#FF8A5C} .st-ledger li.differ em{color:#FF8A5C}
@media (max-width:900px){.st-alignrow{grid-template-columns:1fr}.mf-glass{min-height:260px}}

/* the small map: quiet in the top left corner, the emptiest part of the view; a little clearer under the pointer */
.st-mm{position:absolute;left:14px;top:12px;z-index:2;width:128px;height:128px;opacity:.6;transition:opacity .25s;overflow:visible}
.st-mm:hover{opacity:1}
.st-mm-bg{fill:rgba(5,8,16,.55);stroke:rgba(150,170,220,.18);stroke-width:1px;vector-effect:non-scaling-stroke}
.st-mm-cam path{fill:rgba(150,180,255,.07);stroke:none}
.st-mm-e line{stroke-width:1.2px;vector-effect:non-scaling-stroke}
.st-mm-e .hit,.st-mm-n .hit{stroke:transparent;fill:transparent;stroke-width:9px}
.st-mm-e,.st-mm-n{cursor:pointer}
.st-mm-e:hover line:not(.hit){stroke:#fff!important}
.st-mm-n:hover circle:not(.hit){fill:#fff!important}
.st-mm-e.on line:not(.hit){stroke-width:2.2px}
.st-mm-ping circle{fill:none;stroke:#FFE2B4;stroke-width:1.5px;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:stMmPing 1.2s ease-out both}
.st-mm-ping circle+circle{animation-delay:.35s}
@keyframes stMmPing{from{transform:scale(1);opacity:1}to{transform:scale(3.6);opacity:0}}
@media (max-width:700px){.st-mm{width:96px;height:96px}}