/* Submission portal — the signed-in pages keep the night sky of the front door:
   dark surfaces, one blue light, status colours only for status. */
.pt{
  --p-bg:#070A11; --p-card:rgba(255,255,255,.035); --p-line:rgba(255,255,255,.09); --p-line2:rgba(255,255,255,.16);
  --p-ink:#EEF2F9; --p-mut:#8B94A6; --p-faint:#5C6474; --p-acc:#7DA2FF; --p-acc2:#3D6BF0;
  --p-pass:#4ADE9C; --p-fail:#FF8A7E; --p-wait:#F5B95C;
  min-height:100vh;color:var(--p-ink);font-size:14px;
  background:radial-gradient(1200px 520px at 50% -140px,rgba(61,107,240,.22),rgba(7,10,17,0) 70%),var(--p-bg);
}
.pt a{color:var(--p-acc)} .pt a:hover{color:#fff}
.pt .mut{color:var(--p-mut)} .pt .mono{font-family:var(--mono);letter-spacing:.04em}
.pt .ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.pt-nav{position:sticky;top:0;z-index:40;height:60px;padding:0 28px;display:flex;align-items:center;gap:24px;
  background:rgba(7,10,17,.78);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--p-line)}
.pt-nav>*{flex-shrink:0;white-space:nowrap} .pt-nav>.grow{flex:1 1 0}
.pt-nav a{font-size:13.5px;color:var(--p-mut);position:relative;line-height:60px}
.pt-nav a:hover,.pt-nav a.on{color:#fff}
.pt-nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--p-acc);box-shadow:0 0 12px var(--p-acc)}
/* a page just unlocked: the tab drops in, glows gold, and a ring of light spreads from it a few times */
.pt-nav a.pt-unlock{color:#FFE2A8;animation:ptUnlock .9s cubic-bezier(.2,.9,.3,1.35) both,ptUnlockGlow 1.6s ease-in-out .9s 3;text-shadow:0 0 10px rgba(255,200,110,.75)}
.pt-nav a.pt-unlock::before{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:2.4;transform:translate(-50%,-50%);border-radius:999px;pointer-events:none;
  border:1px solid rgba(255,214,140,.7);box-shadow:0 0 14px rgba(255,200,110,.55);animation:ptUnlockRing 1.6s ease-out .5s 3 both}
@keyframes ptUnlock{0%{opacity:0;transform:translateY(-14px) scale(.5);filter:blur(5px)}65%{opacity:1;transform:translateY(2px) scale(1.15);filter:blur(0)}100%{transform:none}}
@keyframes ptUnlockGlow{50%{text-shadow:0 0 18px rgba(255,210,130,1),0 0 4px #fff}}
@keyframes ptUnlockRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@media (prefers-reduced-motion:reduce){.pt-nav a.pt-unlock,.pt-nav a.pt-unlock::before{animation:none}}
.pt-brand{display:inline-flex;align-items:center;gap:9px;color:#fff!important;font-weight:600;font-size:15px!important;margin-right:8px}
.pt-me{font-size:13px;color:var(--p-mut);max-width:180px;overflow:hidden;text-overflow:ellipsis}
.pt-ghost{height:30px;padding:0 12px;border:1px solid var(--p-line2);border-radius:999px;background:transparent;color:var(--p-mut);font-size:12.5px;cursor:pointer;transition:color .2s,border-color .2s}
.pt-ghost:hover{color:#fff;border-color:rgba(190,208,255,.6)}

.pt-main{max-width:960px;margin:0 auto;padding:44px 24px 96px}
.pt-main.wide{max-width:1120px}   /* forests and the profile: every other page has the same width */
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.pt-head h1{margin:0;font-size:clamp(24px,3.4vw,32px);font-weight:650;letter-spacing:-.4px;line-height:1.3}
.pt-head p{margin:8px 0 0;color:var(--p-mut);font-size:14.5px;max-width:640px}
.pt-back{display:inline-block;margin-bottom:14px;font-size:13px;color:var(--p-mut)!important}
.pt-back:hover{color:#fff!important}

.pt-card>p:last-child,.pt-card>.mut:last-child{margin-bottom:0}
.pt-card{background:var(--p-card);border:1px solid var(--p-line);border-radius:14px;padding:22px 24px;margin-bottom:16px}
.pt-card.glow{border-color:rgba(125,162,255,.4);box-shadow:0 0 48px rgba(61,107,240,.16)}
.pt-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pt-sec h2{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.pt-sec h2 em{font-style:normal;font:500 11.5px var(--mono);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--p-acc);border:1px solid rgba(125,162,255,.45)}
.pt-quick{display:flex;gap:8px}
.pt-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.pt-two .pt-card{margin-bottom:0}

.pt-btn{height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--p-line2);background:rgba(255,255,255,.04);color:var(--p-ink)!important;font:500 13.5px var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s}
.pt-btn:hover:not(:disabled){background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.pt-btn.pri{background:var(--p-acc2);border-color:var(--p-acc2);color:#fff!important}
.pt-btn.pri:hover:not(:disabled){background:#4E79F5;border-color:#4E79F5;box-shadow:0 0 28px rgba(61,107,240,.5)}
.pt-btn:disabled{opacity:.55;cursor:default}
.pt-btn.sm{height:30px;padding:0 12px;font-size:12.5px}
.pt-btn.big{height:44px;padding:0 28px;font-size:15px}

.pt-field{display:block;margin-bottom:16px}
.pt-field .k,.pt-kv .k{display:block;font-size:12.5px;color:var(--p-mut);margin-bottom:6px}
.pt-field .h{display:block;font-size:12px;color:var(--p-faint);margin-top:5px}
.pt input:not([type=file]):not([type=checkbox]):not([type=radio]),.pt textarea{width:100%;font:inherit;font-size:14px;color:var(--p-ink);background:rgba(0,0,0,.28);border:1px solid var(--p-line2);border-radius:8px;padding:9px 12px;transition:border-color .2s,box-shadow .2s}
.pt textarea{line-height:1.7;resize:vertical;display:block}
.pt input:not([type=radio]):not([type=checkbox]):focus,.pt textarea:focus{outline:none;border-color:var(--p-acc);box-shadow:0 0 0 3px rgba(125,162,255,.18)}
.pt input::placeholder{color:var(--p-faint)}
.pt-note{padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.7;margin:0 0 14px;background:rgba(125,162,255,.09);border:1px solid rgba(125,162,255,.28);color:#C9D7FA}
.pt-note .pt-spam{color:#FFD166;font-weight:700}
.pt-note .pt-notelinks{display:block;font-size:12px}
.pt-note .pt-notelinks a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pt-note.bad{background:rgba(255,138,126,.08);border-color:rgba(255,138,126,.32);color:#FFC2BB}
.pt-needlogin h2{margin:0 0 12px;font-size:18px} .pt-needlogin p{margin:0 0 8px;line-height:1.75} .pt-needlogin .pt-actions{margin-top:16px}
.pt-wait,.pt-empty{padding:56px 0;text-align:center;color:var(--p-mut)}
.pt-empty p{margin:0 0 16px}
.pt-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px}

/* which of the two sites this is */
.pt-inline input[type=email]{max-width:320px}
.pt-empty .pt-fine{margin-top:18px}

/* sign in */
/* sign in: the front page's forest turned away to the right and back, dimmed and out of reach; the form
   swings in from the left in the front page's type, both at once so nothing waits on the forest */
.fh .fh-gl{transition:filter .9s cubic-bezier(.25,.7,.2,1)}
.fh.login .fh-gl{pointer-events:none;filter:brightness(.55) saturate(.75)}
.fh .fh-copy,.fh .fh-foot{transition:opacity .3s,transform .3s}
.fh.login .fh-copy,.fh.login .fh-foot{opacity:0;transform:translateX(-24px);pointer-events:none;animation:none}
.fh.login .fh-copy *{pointer-events:none}
.fh-nav>*{transition:opacity .3s}
.fh.login .fh-nav>:not(.fh-brand){opacity:0;pointer-events:none}
.lg-shade{opacity:0;transition:opacity .6s}
.fh.login .lg-shade{opacity:1}
.lg-panel .fh-eye,.lg-panel .fh-k,.lg-panel .fh-m{animation:none}
.lg-swing{transform-origin:0 50%;animation:lgIn .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes lgIn{from{opacity:0;transform:perspective(900px) translateX(-48px) rotateY(28deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lg-swing{animation:none}}
.lg-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,4,10,.85) 0,rgba(2,4,10,.5) 28%,rgba(2,4,10,0) 50%),linear-gradient(180deg,rgba(2,4,10,.55),rgba(2,4,10,0) 90px)}
.lg-panel{position:absolute;z-index:2;left:clamp(24px,5.5vw,88px);top:50%;transform:translateY(-50%);width:min(380px,calc(100% - 48px));max-height:calc(100% - 100px);overflow:auto;scrollbar-width:none}
.lg .fh-m{font-size:clamp(28px,3vw,40px)}
.lg-invited{margin:14px 0 0;font-size:13px;line-height:1.8;color:rgba(154,166,191,.8);letter-spacing:.02em}
.lg-form{margin-top:30px}
.lg .pt-field{margin-bottom:14px}
.lg .pt-field .k{font-size:12px;letter-spacing:.08em;color:rgba(154,166,191,.75);margin-bottom:7px}
.lg .pt-kk{display:flex;justify-content:space-between;align-items:baseline}
.lg .pt-field .k .pt-link{font-size:12px;color:rgba(125,162,255,.8)}
.lg input:not([type=checkbox]){width:100%;height:44px;padding:0 14px;font:inherit;font-size:14px;color:#F4F7FC;background:rgba(2,4,10,.55);border:1px solid rgba(255,255,255,.12);border-radius:10px;backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.lg input:focus{outline:none;border-color:rgba(125,162,255,.7);box-shadow:0 0 0 3px rgba(125,162,255,.14),0 0 24px rgba(125,162,255,.18)}
.lg-google{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;cursor:pointer;
  font:500 13.5px var(--sans);letter-spacing:.04em;color:rgba(244,247,252,.92);background:rgba(2,4,10,.5);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.lg-google:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.lg-google:disabled{opacity:.4;cursor:not-allowed}
.lg .pt-or{margin:18px 0 12px;color:rgba(92,104,131,.95)}
.lg .pt-or::before,.lg .pt-or::after{background:rgba(255,255,255,.08)}
.lg-go{width:100%;justify-content:center;margin-top:8px;height:44px;cursor:pointer;font-family:var(--sans)}
.lg-go:disabled{opacity:.5;cursor:default}
.lg-alt{margin:22px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(154,166,191,.7)}
.lg-alt a{color:rgba(125,162,255,.85);cursor:pointer}
.lg-alt a:hover{color:#fff}
.lg-alt .lg-sep{flex:1}
.lg-alt .lg-sep~a{color:rgba(154,166,191,.55)}
@media (max-width:760px), (orientation:portrait){
  .lg-shade{background:linear-gradient(0deg,rgba(2,4,10,.97) 62%,rgba(2,4,10,0) 80%),linear-gradient(180deg,rgba(2,4,10,.55),rgba(2,4,10,0) 90px)}
  .lg-panel{left:16px;right:16px;width:auto;top:auto;bottom:0;transform:none;max-height:72%;padding-bottom:28px}
}
.pt-fine{text-align:center;font-size:12.5px;color:var(--p-faint);margin-top:14px}
.pt-tabs{display:flex;gap:4px;padding:4px;margin-bottom:20px;background:rgba(0,0,0,.3);border-radius:10px}
.pt-tabs button{flex:1;height:34px;border:0;border-radius:7px;background:transparent;color:var(--p-mut);font:500 13px var(--sans);cursor:pointer}
.pt-tabs button.on{background:rgba(255,255,255,.1);color:#fff}
.pt-tabs.line{background:none;padding:0;gap:26px;border-bottom:1px solid var(--p-line);border-radius:0}
.pt-tabs.line a{white-space:nowrap;flex-shrink:0;padding:0 2px 12px;font-size:14px;color:var(--p-mut);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
.pt-tabs.line a.on{color:#fff;border-color:var(--p-acc)}
.pt-tabs.line em{font:500 11px var(--mono);font-style:normal;padding:1px 7px;border-radius:999px;background:var(--p-acc2);color:#fff}
.pt-tabs.line em.q{background:rgba(255,255,255,.1);color:var(--p-mut)}
.pt-teams{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
.pt-teams .k{font-size:12.5px;color:var(--p-faint);margin-right:4px}
.pt-teams a{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid var(--p-line2);border-radius:10px;background:var(--p-card);color:var(--p-ink)}
.pt-teams a span{font-size:12px;color:var(--p-mut)}
.pt-teams a:hover{border-color:var(--p-acc);color:#fff}
.pt-teams a.on{border-color:var(--p-acc);background:rgba(125,162,255,.14);box-shadow:inset 0 0 0 1px var(--p-acc)}
.pt-teams a.on span{color:var(--p-acc)}

/* what the submitter allows */
.pt-allow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pt-check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--p-line);background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .2s,background .2s}
.pt-check:hover{border-color:rgba(125,162,255,.45)}
.pt-check.on{border-color:var(--p-acc);background:rgba(61,107,240,.12)}
.pt-check input{margin-top:3px;accent-color:var(--p-acc2);width:16px;height:16px;flex-shrink:0}
.pt-check b{display:block;font-size:13.5px;font-weight:600;color:#E3E8F2}
.pt-check .h{display:block;font-size:12px;color:var(--p-mut);margin-top:3px;line-height:1.6}
.pt-fine.left{text-align:left;margin:-6px 0 14px}
.pt-list + .pt-fine.left{margin-top:10px}
.pt-allowed{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9}
.pt-allowed .yes{color:var(--p-pass)} .pt-allowed .no{color:var(--p-mut)}

.pt-check.terms{margin:2px 0 16px;cursor:default}
.pt-terms-h{margin:0 0 12px;font-size:17px;font-weight:600}
.pt-terms{margin:0 0 18px;line-height:1.85;color:#C9CFDA;font-size:14px}

/* results read in the page */
.pt-results{display:flex;flex-direction:column;gap:10px}
.pt-result{border:1px solid var(--p-line);border-radius:10px;background:rgba(0,0,0,.2);overflow:hidden}
.pt-result.open{border-color:rgba(125,162,255,.45)}
.pt-result-hd{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 4px}
.pt-result-name{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--p-ink);font:inherit;font-size:13.5px;text-align:left;padding:4px 8px;cursor:pointer}
.pt-result-name:disabled{cursor:default}
.pt-result-name .ell{flex:1}
.pt-chev{font-size:12px;color:var(--p-acc);white-space:nowrap}
.pt-view{border-top:1px solid var(--p-line);padding:16px}
.pt-pages canvas,.pt-pages img{display:block;width:100%;height:auto;margin:0 auto 12px;border-radius:4px;background:#fff}
.pt-doc{max-width:760px;margin:0 auto;color:#DDE3EE;font-size:15px;line-height:1.85;word-break:break-word}
.pt-doc h1,.pt-doc h2,.pt-doc h3,.pt-doc h4{color:#fff;line-height:1.4;margin:1.4em 0 .6em}
.pt-doc h1{font-size:22px} .pt-doc h2{font-size:19px} .pt-doc h3{font-size:16.5px} .pt-doc h4{font-size:15px}
.pt-doc p,.pt-doc ul,.pt-doc ol{margin:.7em 0} .pt-doc li{margin:.25em 0}
.pt-doc a{color:var(--p-acc)}
.pt-doc blockquote{margin:1em 0;padding:4px 14px;border-left:3px solid rgba(125,162,255,.5);color:#B9C3D6}
.pt-doc code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px}
.pt-doc pre{background:rgba(0,0,0,.35);padding:12px 14px;border-radius:8px;overflow-x:auto;white-space:pre-wrap}
.pt-doc pre code{background:none;padding:0}
.pt-doc table{display:block;overflow-x:auto;border-collapse:collapse;margin:1em 0;font-size:13.5px;line-height:1.6}
.pt-doc th,.pt-doc td{border:1px solid var(--p-line2);padding:6px 10px;vertical-align:top}
.pt-doc th{background:rgba(255,255,255,.05);color:#fff}
.pt-doc img{max-width:100%}
@media (max-width:760px){.pt-view{padding:10px}.pt-doc{font-size:15px}}

/* the flow chart */
.pt-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 26px}
.pt-stage{position:relative;min-height:116px;text-align:left;padding:13px 14px 14px;border-radius:12px;border:1px solid var(--p-line);background:rgba(255,255,255,.025);
  color:var(--p-mut);font:inherit;display:flex;flex-direction:column;gap:5px;transition:border-color .2s,background .2s,box-shadow .25s,transform .2s,opacity .2s}
/* the arrow to the next stage sits in the gap; none after the last of a row */
.pt-stage:not(:last-child)::after{content:'';position:absolute;left:calc(100% + 6px);top:50%;width:13px;height:1px;background:var(--p-line2);box-shadow:none;
  -webkit-mask:none;transition:background .2s}
.pt-stage:not(:last-child)::before{content:'';position:absolute;left:calc(100% + 13px);top:calc(50% - 3px);width:6px;height:6px;border:solid var(--p-line2);border-width:1px 1px 0 0;transform:rotate(45deg);transition:border-color .2s}
.pt-stage:nth-child(5n)::after,.pt-stage:nth-child(5n)::before{display:none}
.pt-stage.next::after{background:var(--p-acc);box-shadow:0 0 10px var(--p-acc)} .pt-stage.next::before{border-color:var(--p-acc)}
.pt-stage .n{font:500 11px var(--mono);color:var(--p-faint)}
.pt-stage b{font-size:14.5px;font-weight:600;color:#C7CFDD}
.pt-stage .s{font-size:12px;line-height:1.55}
.pt-stage .mark{position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--p-line2);color:transparent}
.pt-flow.pick .pt-stage{cursor:pointer}
.pt-flow.pick .pt-stage:hover{border-color:rgba(125,162,255,.5);transform:translateY(-2px)}
.pt-flow.pick .pt-stage.on{border-color:var(--p-acc);background:rgba(61,107,240,.16);box-shadow:0 0 34px rgba(61,107,240,.3),inset 0 0 0 1px rgba(125,162,255,.25)}
.pt-flow.pick .pt-stage.on b{color:#fff} .pt-flow.pick .pt-stage.on .s{color:#B4C2DE} .pt-flow.pick .pt-stage.on .n{color:var(--p-acc)}
.pt-flow.pick .pt-stage.on .mark{background:var(--p-acc2);border-color:var(--p-acc2);color:#fff}
/* following a task */
.pt-flow:not(.pick) .pt-stage.off{opacity:.3}
.pt-flow:not(.pick) .pt-stage.off .mark{display:none}
.pt-stage.wait b{color:#C7CFDD}
.pt-stage.done{border-color:rgba(74,222,156,.45);background:rgba(74,222,156,.07)}
.pt-stage.done b{color:#fff} .pt-stage.done .mark{background:rgba(74,222,156,.2);border-color:var(--p-pass);color:var(--p-pass)}
.pt-stage.run{border-color:var(--p-acc);background:rgba(61,107,240,.18);box-shadow:0 0 40px rgba(61,107,240,.38);animation:ptGlow 2.4s ease-in-out infinite}
.pt-stage.run b{color:#fff} .pt-stage.run .s{color:#B4C2DE} .pt-stage.run .mark{border-color:var(--p-acc)}
.pt-stage .pulse{width:8px;height:8px;border-radius:50%;background:var(--p-acc);box-shadow:0 0 0 0 rgba(125,162,255,.7);animation:ptPulse 1.6s infinite}
@keyframes ptPulse{to{box-shadow:0 0 0 9px rgba(125,162,255,0)}}
@keyframes ptGlow{50%{box-shadow:0 0 56px rgba(61,107,240,.6)}}
@media (prefers-reduced-motion:reduce){.pt-stage.run,.pt-stage .pulse{animation:none}}
.pt-needs{margin-top:18px;padding:14px 16px;border-radius:10px;background:rgba(245,185,92,.07);border:1px solid rgba(245,185,92,.25);font-size:13px}
.pt-needs .k{display:block;color:var(--p-wait);margin-bottom:8px}
.pt-needs div{display:flex;gap:12px;padding:3px 0} .pt-needs b{flex:0 0 110px;font-weight:500;color:#fff} .pt-needs div span{color:#C9CFDA}

/* files */
.pt-drop{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px;border:1px dashed var(--p-line2);border-radius:10px;color:var(--p-mut);font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;margin-bottom:10px}
.pt-drop:hover,.pt-drop.over{border-color:var(--p-acc);background:rgba(61,107,240,.1);color:#fff}
.pt-files{margin-bottom:14px}
.pt-file{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;margin-bottom:6px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--p-line);font:inherit;font-size:13px;color:var(--p-ink);text-align:left}
.pt-file .ell{flex:1}
.pt-file.link{cursor:pointer;transition:border-color .2s,background .2s} .pt-file.link:hover{border-color:var(--p-acc);background:rgba(61,107,240,.12)}
.pt-file .tagx{font-size:11.5px;padding:1px 8px;border-radius:999px;border:1px solid var(--p-line2);color:var(--p-mut)}
.pt-x{border:0;background:none;color:var(--p-mut);cursor:pointer;display:grid;place-items:center;padding:2px} .pt-x:hover{color:#fff}

/* lists */
.pt-list{display:flex;flex-direction:column;gap:8px}
.pt-row{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;background:var(--p-card);border:1px solid var(--p-line);color:var(--p-ink)!important;transition:border-color .2s,background .2s,transform .2s}
/* members indented under whoever invited them (admin page) */
.pt-row[style*='--d']{margin-left:calc(var(--d) * 22px)}
a.pt-row:hover{border-color:rgba(125,162,255,.5);background:rgba(61,107,240,.08);transform:translateX(2px)}
.pt-row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--p-ink)!important}
.pt-row .main b{font-size:14.5px;font-weight:600} .pt-row .main .mut{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row .now{font-size:12.5px;color:var(--p-acc)}
.pt-row .num{font-family:var(--mono);font-size:12px}
.pt-badge{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;white-space:nowrap;border:1px solid var(--p-line2);color:var(--p-mut)}
.pt-badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pt-badge.wait{color:var(--p-wait);border-color:rgba(245,185,92,.35)}
.pt-badge.queue{color:#C7B5FF;border-color:rgba(199,181,255,.35)}
.pt-badge.run{color:var(--p-acc);border-color:rgba(125,162,255,.45)} .pt-badge.run i{animation:ptPulse 1.6s infinite}
.pt-badge.pass{color:var(--p-pass);border-color:rgba(74,222,156,.4)}
.pt-badge.fail{color:var(--p-fail);border-color:rgba(255,138,126,.4)}
.pt-inline{display:flex;gap:10px;margin:18px 0}
.pt-inline input{max-width:320px}

/* one task */
.pt-steps{display:flex;align-items:center;margin-bottom:6px}
.pt-steps .st{flex:1;display:flex;align-items:center;gap:10px;color:var(--p-faint);font-size:13px;position:relative}
.pt-steps .st:not(:last-child)::after{content:'';flex:1;height:1px;background:var(--p-line2);margin-right:12px}
.pt-steps .st i{width:24px;height:24px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font:500 11.5px var(--mono);font-style:normal;border:1px solid var(--p-line2)}
.pt-steps .st.past{color:var(--p-ink)} .pt-steps .st.past i{border-color:var(--p-pass);color:var(--p-pass)} .pt-steps .st.past::after{background:var(--p-pass)}
.pt-steps .st.now{color:#fff} .pt-steps .st.now i{background:var(--p-acc2);border-color:var(--p-acc2);color:#fff;box-shadow:0 0 18px rgba(61,107,240,.7)}
.pt-steps.stopped{opacity:.4} .pt-steps .st span{white-space:nowrap}
.pt-say{margin:14px 0 0;color:#C9CFDA}
.pt-card .pt-note{margin:14px 0 0}
.pt-kv{margin-bottom:16px} .pt-kv p{margin:0;white-space:pre-wrap;word-break:break-word;line-height:1.75}
.pt-log{display:flex;flex-direction:column;font-size:13px}
.pt-log div{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--p-line)} .pt-log div:last-child{border:0}
.pt-log .num{font-family:var(--mono);font-size:12px;flex-shrink:0}
/* Agent messages carry long paths and ids; let them wrap instead of widening the page on phones. */
.pt-card{min-width:0;overflow-wrap:anywhere}
.pt-log div>span:last-child{min-width:0}
html,body{overflow-x:clip}

/* the system map on the public page links into workbench screens the portal does not have */
.pt-about .p-link{display:none}

@media (max-width:1000px) and (min-width:761px){
  .pt-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-stage:nth-child(5n)::after,.pt-stage:nth-child(5n)::before{display:block}
  .pt-stage:nth-child(3n)::after,.pt-stage:nth-child(3n)::before{display:none}
}
@media (max-width:760px){
  .pt-nav{padding:0 14px;gap:11px;overflow-x:auto;scrollbar-width:none} .pt-nav a{font-size:13px} .pt-nav::-webkit-scrollbar{display:none} .pt-brand span{display:none} .pt-brand{margin-right:0}
  .pt-nav>.grow{min-width:0} .pt-ghost{padding:0 10px}
  .pt-main{padding:28px 16px 72px} .pt-card{padding:18px 16px}
  .pt .hide-s{display:none} .pt .show-s{display:inline} .pt .show-s-flex{display:flex;justify-content:center;gap:12px;margin-top:8px}
  .pt .pt-why{flex-wrap:nowrap;gap:6px;font-size:12px} .pt .pt-why b{margin-right:2px} .pt .pt-why span{padding:2px 8px;white-space:nowrap} .pt-two{grid-template-columns:1fr}
  .pt-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pt-stage::after,.pt-stage::before{display:none!important}
  .pt-row{flex-wrap:wrap;gap:10px} .pt-row .main{flex-basis:100%}
  .pt-inline{flex-wrap:wrap} .pt-inline input:not([type=checkbox]){flex:1 1 100%;max-width:none} .pt-inline .pt-btn{margin-left:auto}
  .pt-tabs.line{gap:20px;overflow-x:auto;scrollbar-width:none} .pt-tabs.line::-webkit-scrollbar{display:none}
  .pt-row[style*='--d']{margin-left:calc(var(--d) * 10px)}
  .pt-steps .st span{display:none} .pt-steps .st.now span{display:inline}
  .pt input:not([type=file]):not([type=checkbox]):not([type=radio]),.pt textarea{font-size:16px}
  .pt-needs div{flex-direction:column;gap:2px} .pt-needs b{flex:none}
  .pt-allow{grid-template-columns:1fr}
}
/* agent logins */
.pt-give{margin-top:16px;padding-top:16px;border-top:1px solid var(--p-line)}
.pt-give p{margin:0 0 10px;line-height:1.75;color:#C9CFDA;font-size:13.5px}
.pt-give .pt-actions{justify-content:flex-end;gap:10px;margin-top:10px}
.pt-login{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pt-login .mono{font-size:13px;word-break:break-all}
.pt-login.info em.tag{font:500 11.5px var(--sans);font-style:normal;padding:2px 9px;border-radius:999px;border:1px solid var(--p-line2);background:transparent;color:var(--p-mut)}
/* subscription or API key, when connecting an agent */
.pt-seg{display:inline-flex;gap:2px;padding:3px;margin:0 0 12px;border:1px solid var(--p-line2);border-radius:999px}
.pt-seg button{appearance:none;border:0;background:transparent;color:var(--p-mut);font:500 13px var(--sans);padding:6px 16px;border-radius:999px;cursor:pointer}
.pt-seg button.on{background:rgba(125,162,255,.16);color:var(--p-ink)}
.pt-give-key .pt-inline{margin:10px 0}
.pt-give .pt-give-key .pt-actions:first-child{justify-content:flex-start;margin-top:0}
.pt-give-key .pt-inline input{max-width:420px;flex:1}
.pt-logins{display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-width:0}
.pt-login.sm{gap:8px;font-size:12px} .pt-login.sm .mono{font-size:11.5px;color:var(--p-mut)} .pt-login.sm .pt-badge{height:20px;font-size:11px}
.pt-steps-list{margin:4px 0 14px;padding-left:22px;line-height:1.8;color:#C9CFDA;font-size:13.5px} .pt-steps-list li{margin-bottom:8px;padding-left:2px}
.pt-mockbar{margin:8px 0 4px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--p-line);font:12.5px/1.5 var(--mono);color:#DDE4F0;word-break:break-all}
.pt-steps-list .pt-actions{justify-content:flex-start;margin:8px 0 4px} .pt-steps-list .pt-inline{margin:8px 0 4px;flex-wrap:wrap} .pt-steps-list .pt-inline input{flex:1;min-width:160px;font-family:var(--mono)}
.pt-loginrow{padding:12px 0;border-top:1px solid var(--p-line)} .pt-loginrow:first-of-type{border-top:0;padding-top:4px}
.pt-loginrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .pt-loginrow .pt-login.info{flex:1 1 360px;min-width:0}
.pt-loginact{display:flex;gap:6px;flex-shrink:0} .pt-loginact .pt-ghost{height:28px;padding:0 10px;font-size:12.5px}
.pt-loginrow>.pt-note,.pt-loginrow>.pt-fine,.pt-loginrow>.pt-give{flex-basis:100%;margin-bottom:0}
.pt-sec h2 em.q{font:500 11px var(--mono);font-style:normal;padding:1px 7px;border-radius:999px;border:1px solid var(--p-line2);color:var(--p-mut);margin-left:6px}
.show-s-flex{display:none}
.pt-why{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;font-size:13px}
.pt-why b{font-weight:600;color:#E3E8F2;margin-right:4px} .pt-why span{padding:3px 10px;border-radius:999px;border:1px solid rgba(74,222,156,.35);color:var(--p-pass)}
/* the hypothesis–evidence forest of a member's research projects */
.pt-forest{display:block;width:100%;height:520px;border:1px solid var(--p-line2);border-radius:12px;background:#02040A;margin-top:4px}
.pt-forest.tall{height:min(78vh,820px);margin-bottom:18px}
.pt-link{font-size:13px;color:var(--p-acc);text-decoration:none;white-space:nowrap}
.show-s{display:none}
.pt-stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--p-line)}
.pt-stats div{display:flex;flex-direction:column;gap:2px} .pt-stats dt{font-size:12px;color:var(--p-mut)} .pt-stats dd{margin:0;font:600 15px var(--mono);color:var(--p-ink)}

.pt-gpu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.pt-gpu div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--p-line2);border-radius:12px;background:rgba(61,107,240,.08)}
.pt-gpu b{font:700 26px/1.25 var(--sans);color:#fff} .pt-gpu span{font-size:13px;color:var(--p-mut)}
@media (max-width:760px){.pt-gpu{grid-template-columns:1fr}.pt-gpu b{font-size:22px}}
.pt-sec h2 em.tag{width:auto;height:22px;padding:0 10px;border-radius:999px;font:500 12px var(--sans);background:transparent;color:var(--p-mut);border-color:var(--p-line2);display:inline-grid;margin-left:8px;vertical-align:middle}
.pt-who{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--p-mut)} .pt-who b{margin-left:8px;color:var(--p-ink);font-weight:600}
.pt-dim{display:inline-flex;margin:0 0 10px} .pt-dim button{flex:none;padding:0 18px}
/* account and invitations */
a.pt-link{cursor:pointer}
.pt-card-h{margin:0 0 18px;font-size:16px;font-weight:600}
.pt-invited{font-size:14px;color:var(--p-ink);margin:0 0 14px}
.pt-tick{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--p-mut);white-space:nowrap;cursor:pointer}
.pt-tick input{accent-color:var(--p-acc2)}
.pt-row.off{opacity:.55}
.pt-card.acct .pt-sec{margin-bottom:12px}
.pt-prow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--p-line);font-size:14px}
.pt-sec+.pt-prow,.pt-sub+.pt-prow{border-top:0}
.pt-prow .k{width:76px;flex-shrink:0;color:var(--p-mut);font-size:13px}
.pt-prow .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--p-ink)}
.pt-edit{display:flex;flex-direction:column;gap:10px;padding:2px 0 14px}
.pt-edit .pt-actions{margin-top:2px}
.pt-link-box{font:12.5px/1.6 var(--mono);background:rgba(0,0,0,.35);border:1px solid var(--p-line);border-radius:8px;padding:10px 12px;word-break:break-all;color:#DDE4F0;user-select:all}
.pt-actions.left{justify-content:flex-start;gap:10px;margin-top:12px}
.pt-sub{margin:18px 0 2px;font-size:13px;color:var(--p-mut)}

/* the study (study.js): questions, adjudication cards, the teaching card */
.st-box .pt-sec{align-items:baseline}
.st-qs{display:flex;flex-direction:column;gap:18px}
.st-q{padding:14px 16px;border:1px solid var(--p-line);border-radius:10px;background:rgba(0,0,0,.18)}
.st-q-h{display:flex;gap:10px;align-items:flex-start}
.st-q-h em{font-style:normal;font:500 11.5px var(--mono);min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--p-acc);border:1px solid rgba(125,162,255,.45)}
.st-q-h p{margin:1px 0 12px;line-height:1.75;color:#DDE3EE}
.st-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.st-opts button{min-height:34px;padding:6px 14px;border-radius:999px;border:1px solid var(--p-line2);background:rgba(255,255,255,.03);color:var(--p-ink);font:inherit;font-size:13.5px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.st-opts button:hover{border-color:rgba(125,162,255,.5)}
.st-opts button.on{border-color:var(--p-acc);background:rgba(61,107,240,.22);color:#fff}
.st-opts.sm button{min-height:30px;font-size:12.5px;padding:4px 12px}
.st-conf{display:flex;align-items:center;gap:12px;margin:2px 0 10px;font-size:12.5px;color:var(--p-mut)}
.st-conf input{flex:1;max-width:320px;accent-color:var(--p-acc2)}
.st-conf b{min-width:40px;color:var(--p-ink);font:500 13px var(--mono)}
.pt input.st-why{margin-top:2px}
.st-send{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:4px}
.st-two{display:block;margin-bottom:10px} .st-two span{display:block;font-size:12.5px;color:var(--p-mut);margin-bottom:5px}
.st-mark{font-size:13px;white-space:nowrap} .st-mark.yes{color:var(--p-pass)} .st-mark.no{color:var(--p-fail)}
@media (max-width:760px){.st-send{flex-direction:column;align-items:stretch}}
.st-wait{font-size:12px;padding:2px 9px;border-radius:999px;color:var(--p-wait);border:1px solid rgba(245,185,92,.45);white-space:nowrap}
.st-q.case{border-color:rgba(245,185,92,.35);background:rgba(245,185,92,.04)}
/* Google sign-in on the login card */
.pt-btn.pt-google,.pt-btn.pt-google:hover{width:100%;justify-content:center;gap:10px;background:#fff!important;color:#1f1f1f!important;border:1px solid #dadce0;margin:4px 0 0;font-weight:600}
.pt-btn.pt-google:disabled{opacity:.45;cursor:not-allowed}
.pt-or{display:flex;align-items:center;gap:12px;margin:16px 0 6px;font-size:12px;color:var(--p-faint)}
.pt-or::before,.pt-or::after{content:"";flex:1;height:1px;background:var(--p-line)}
.pt-badcode{color:#FFC2BB;margin-top:-8px}
/* admin people list: username in bold, real name beside it, e-mail below */
.pt-row .main.who{min-width:180px}
.pt-row.person{flex-wrap:wrap;row-gap:10px}
.pt-row.person>:not(.main):not(.pt-logins){white-space:nowrap;flex-shrink:0}
.pt-row.person .pt-logins{order:9;flex-basis:100%;align-items:flex-start;gap:6px;padding-top:10px;border-top:1px solid var(--p-line)}
.pt-row.person .pt-login.sm{flex-wrap:nowrap} .pt-row.person .pt-login.sm .mono{white-space:nowrap;word-break:normal}
.pt-row .main.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-row .main.who .nm{margin-left:10px;font-weight:400;font-size:13.5px;color:var(--p-mut)}

/* the gate (study.js): three tiers, rising in weight, a progress bar and the unlock */
.st-hero{border-color:rgba(125,162,255,.45);box-shadow:0 0 60px rgba(61,107,240,.18)}
.st-brief{margin:0 0 18px;padding:12px 16px;border-radius:10px;border-left:3px solid var(--p-acc);background:rgba(61,107,240,.08)}
.st-brief summary{cursor:pointer;font-weight:600;color:#fff;font-size:14px}
.st-brief p{margin:.55em 0 0;line-height:1.8;color:#CBD5E8;font-size:13.5px}
.st-tier{margin:0 0 18px;padding:14px;border-radius:14px;border:1px solid var(--p-line);transition:border-color .3s,box-shadow .3s}
.st-tier-h{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.st-tier-h b{font-size:15px;color:#E3E8F2} .st-tier-h p{margin:3px 0 0;font-size:12.5px;line-height:1.7;color:var(--p-mut)}
.st-tier-n{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:600 13px var(--mono);color:var(--p-mut);border:1px solid var(--p-line2)}
.st-q{transition:border-color .25s,background .25s}
.st-opts button{transition:border-color .2s,background .2s,transform .12s,box-shadow .2s}
.st-opts button:active{transform:scale(.97)}
@keyframes st-pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.st-go{height:42px;padding:0 22px;font-size:14.5px;background:linear-gradient(90deg,#3D6BF0,#6C8CFF)!important;border:0!important;box-shadow:0 6px 22px rgba(61,107,240,.4)}
.st-go:disabled{background:rgba(255,255,255,.06)!important;box-shadow:none;color:var(--p-mut)!important}
@keyframes st-fade{from{opacity:0}to{opacity:1}}
@keyframes st-rise{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@media (max-width:760px){.st-tier{padding:10px}}
@media (prefers-reduced-motion:reduce){.st-opts button.on{animation:none}}

/* the gate as three groups (study.js): the step bar, cards coming in, a group cleared, the acceptance intro */
.st-gate{scroll-margin-top:76px;position:relative}
.st-brief{margin:0 0 16px;padding:12px 16px;border-radius:10px;border-left:3px solid var(--p-acc);background:rgba(61,107,240,.08)}
.st-brief b{display:block;color:#fff;font-size:14px;margin-bottom:2px}
.st-brief p{margin:.5em 0 0;line-height:1.8;color:#CBD5E8;font-size:13.5px}
.st-peek{margin:0 0 12px;background:none;border:0;padding:0;color:var(--p-acc);font:inherit;font-size:12.5px;cursor:pointer}
.st-tier{animation:st-rise .45s cubic-bezier(.2,.9,.3,1.1) both}
.st-qs .st-q{animation:st-card .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes st-card{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.st-go.ready{animation:st-ready 1.6s ease-in-out infinite}
@keyframes st-ready{0%,100%{box-shadow:0 6px 22px rgba(61,107,240,.4),0 0 0 0 rgba(125,162,255,.5)}50%{box-shadow:0 6px 22px rgba(61,107,240,.4),0 0 0 9px rgba(125,162,255,0)}}
@media (prefers-reduced-motion:reduce){.st-go.ready{animation:none}}
/* phone: each agent login is one line (vendor, label, status) with the account hint below it, cut to the width */
@media (max-width:760px){
  .pt-row.person .pt-logins{align-items:stretch}
  .pt-row.person .pt-login.sm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center}
  .pt-row.person .pt-login.sm>span:not(.mono):not(.pt-badge){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pt-row.person .pt-login.sm .pt-badge{grid-column:3;grid-row:1}
  .pt-row.person .pt-login.sm .mono{grid-column:1/-1;grid-row:2;overflow:hidden;text-overflow:ellipsis}
  .pt-forestpage .pt-head{margin-bottom:12px} .pt-forestpage .pt-head p{display:none}
  .pt-forest.tall{margin-bottom:14px}
}

/* the check, round three (study.js): a slider that fills, the constellation, crisp steps, feedback */
.pt .st-conf input.st-range[type=range]{-webkit-appearance:none;appearance:none;flex:1;max-width:340px;height:6px;padding:0;border:0;border-radius:999px;box-shadow:none;
  background:linear-gradient(90deg,#3D6BF0,#7DA2FF var(--v),rgba(255,255,255,.12) var(--v));cursor:pointer}
.pt .st-conf input.st-range[type=range]:focus{box-shadow:none;outline:none}
.st-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--p-acc2);box-shadow:0 0 12px rgba(125,162,255,.7);transition:transform .15s}
.st-range:active::-webkit-slider-thumb{transform:scale(1.18)}
.st-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--p-acc2)}
.st-done-line{margin:0;text-align:center;color:#C9D7FA;font-size:14px;animation:st-card .4s ease-out both}
.st-tier .st-count{margin-left:auto;font:500 12px var(--mono);color:var(--p-mut);white-space:nowrap}
.st-tier.leaving{animation:st-leave .22s ease-in both}
@keyframes st-leave{to{opacity:0;transform:translateX(-24px)}}
.st-tier{animation:st-enter .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes st-enter{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.st-qs .st-q{animation:st-card .32s cubic-bezier(.2,.9,.3,1) both}
.st-q .st-q-h em{transition:background .2s,color .2s,border-color .2s}
.st-q.ok .st-q-h em{animation:none}
.st-deep{margin-top:4px;animation:st-card .25s ease-out both}
.st-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--p-mut)}
.st-src span{margin-right:4px}
.st-src button{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--p-line2);background:transparent;color:var(--p-mut);font:inherit;font-size:12px;cursor:pointer;transition:all .15s}
.st-src button.on{color:#1d1500;background:var(--p-wait);border-color:var(--p-wait)}
.st-fb textarea{margin-top:10px}
.st-fb.sent p{margin:0;text-align:center;color:var(--p-mut)}
.st-stars{display:flex;gap:4px}
.st-stars button{font-size:24px;line-height:1;background:none;border:0;padding:2px;color:rgba(255,255,255,.18);cursor:pointer;transition:color .15s,transform .12s}
.st-stars button.on{color:var(--p-wait);text-shadow:0 0 12px rgba(245,185,92,.6)}
.st-stars button:active{transform:scale(.88)}
@media (max-width:760px){.st-sky{height:120px}.st-sky-labels span{font-size:11px}}
@media (prefers-reduced-motion:reduce){.st-tier,.st-tier.leaving,.st-qs .st-q,.st-deep{animation:none}}

/* the check, round four: each step has its own colour (--h, the same as its cluster in the sky), and the
   sky of the two forests stays pinned under the bar while the questions scroll beneath it */
/* the step colour; outside the check (the expectation on the submit form) the site's blue */
.pt{--h:125,162,255}
.st-gate{--h:96,208,255;scroll-margin-top:60px}
.st-gate.s2{--h:182,140,255} .st-gate.s3{--h:245,185,92}
.st-tier{border-color:rgba(var(--h),.32);background:linear-gradient(180deg,rgba(var(--h),.07),rgba(var(--h),.015) 220px);box-shadow:0 0 50px rgba(var(--h),.07)}
.st-tier-n{color:rgb(var(--h));border-color:rgba(var(--h),.6);box-shadow:0 0 14px rgba(var(--h),.25)}
.st-tier-h b{color:#fff}
.st-q{background:rgba(0,0,0,.22)}
.st-q.ok{border-color:rgba(var(--h),.45);background:linear-gradient(90deg,rgba(var(--h),.06),rgba(0,0,0,.2) 60%)}
.st-q-h em{color:rgb(var(--h));border-color:rgba(var(--h),.45)}
.st-q.ok .st-q-h em{color:#070a12;background:rgb(var(--h));border-color:rgb(var(--h));box-shadow:0 0 12px rgba(var(--h),.6)}
.st-opts button:hover{border-color:rgba(var(--h),.6);background:rgba(var(--h),.06)}
.st-opts button.on{border-color:rgb(var(--h));background:rgba(var(--h),.18);color:#fff;box-shadow:0 0 0 1px rgba(var(--h),.35),0 0 22px rgba(var(--h),.32);animation:st-pop .3s cubic-bezier(.2,.9,.3,1.3)}
.st-q.case{border-color:rgba(var(--h),.3);background:rgba(var(--h),.03)}
.st-src button.on{color:#070a12;background:rgb(var(--h));border-color:rgb(var(--h))}
.pt .st-conf input.st-range[type=range]{background:linear-gradient(90deg,rgba(var(--h),.5),rgb(var(--h)) var(--v),rgba(255,255,255,.12) var(--v))}
.st-range::-webkit-slider-thumb{border-color:rgb(var(--h));box-shadow:0 0 12px rgba(var(--h),.7)}
.st-go{background:linear-gradient(90deg,rgb(var(--h)),rgba(var(--h),.72))!important;color:#070a12!important;font-weight:600;box-shadow:0 6px 24px rgba(var(--h),.35)}
@keyframes st-ready{0%,100%{box-shadow:0 6px 24px rgba(var(--h),.35),0 0 0 0 rgba(var(--h),.55)}50%{box-shadow:0 6px 24px rgba(var(--h),.35),0 0 0 10px rgba(var(--h),0)}}
.st-brief{border-left-color:rgb(var(--h));background:rgba(var(--h),.06)} .st-peek{color:rgb(var(--h))}
/* the sky (study.js): a pinned HUD over two particle forests, after the front page and the system map */
.st-sky{position:sticky;top:60px;z-index:6;height:300px;margin:-6px -10px 16px;border-radius:16px;overflow:hidden;background:#04060c;
  border:1px solid rgba(150,170,220,.14);box-shadow:0 20px 34px -16px rgba(0,0,0,.9),inset 0 0 80px rgba(61,107,240,.06)}
.st-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.st-sky canvas.st-comets{position:fixed;inset:0;width:100vw;height:100vh;z-index:70;pointer-events:none}
.st-hud-top{position:absolute;inset:0 0 auto;height:58px;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid rgba(150,170,220,.09);
  background:linear-gradient(180deg,rgba(4,6,12,.92),rgba(4,6,12,.4));pointer-events:none}
.st-hud-title{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.st-hud-title small{font:500 9.5px var(--mono);letter-spacing:.22em;color:rgba(170,185,220,.55)}
.st-hud-title b{font-size:17px;font-weight:750;letter-spacing:.06em;color:#fff} .st-hud-title em{font-style:normal;color:rgb(var(--h));text-shadow:0 0 18px rgba(var(--h),.6)}
.st-hud-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);white-space:nowrap;overflow:hidden}
.st-hud-live .chip{flex:none;padding:1px 6px;border-radius:3px;font-size:9.5px;letter-spacing:.1em;color:#04060c;background:rgb(var(--h));box-shadow:0 0 10px rgba(var(--h),.55);animation:st-blink 2s steps(2) infinite}
.st-hud-live .tick{overflow:hidden;text-overflow:ellipsis} .st-hud-live .tick.tick{animation:st-type .5s steps(18) both}
@keyframes st-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes st-blink{50%{opacity:.55}}
.st-hud-num{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.st-hud-num b{font:700 26px var(--mono);letter-spacing:-.02em;color:#fff;text-shadow:0 0 22px rgba(var(--h),.45);min-width:3.1em;text-align:right}
.st-hud-num small{font:500 11px var(--mono);color:rgba(170,185,220,.6)} .st-hud-num i{font-style:normal;color:#fff}
.st-hud-tabs{position:absolute;inset:auto 0 0;height:40px;display:flex;align-items:stretch;gap:0;padding:0 10px;border-top:1px solid rgba(150,170,220,.09);background:linear-gradient(0deg,rgba(4,6,12,.92),rgba(4,6,12,.35));pointer-events:none}
.st-hud-tabs span{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;letter-spacing:.06em;color:rgba(var(--h),.5);border-bottom:2px solid transparent;transition:color .4s,border-color .4s,background .4s}
.st-hud-tabs i{font:600 10px var(--mono);font-style:normal;opacity:.8}
.st-hud-tabs span.now{color:#fff;border-bottom-color:rgb(var(--h));background:linear-gradient(0deg,rgba(var(--h),.16),transparent)}
.st-hud-tabs span.now i{color:rgb(var(--h))}
.st-hud-tabs span.done{color:rgb(var(--h))} .st-hud-tabs span.done i::before{content:'✓ '}
.st-callout{position:absolute;left:0;top:0;min-width:150px;max-width:240px;padding:7px 10px 8px;border-radius:6px;background:rgba(6,9,18,.86);border:1px solid rgba(var(--h),.6);
  box-shadow:0 0 24px rgba(var(--h),.25);backdrop-filter:blur(6px);pointer-events:none;opacity:0;transition:opacity .25s;display:flex;flex-direction:column;gap:2px}
.st-callout.on{opacity:1}
.st-callout small{font:500 9.5px var(--mono);letter-spacing:.08em;color:rgb(var(--h))}
.st-callout b{font-size:12.5px;color:#fff} .st-callout span{font-size:11px;color:rgba(210,220,240,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-callout span:empty{display:none}
@media (max-width:760px){
  .st-sky{height:228px;margin:-4px -6px 14px;border-radius:14px}
  .st-hud-top{gap:10px;padding:0 12px} .st-hud-title small{display:none} .st-hud-title b{font-size:15px}
  .st-hud-num b{font-size:20px;min-width:0} .st-hud-num small{display:none}
  /* narrow: the chip sits above the line, which may wrap to two lines rather than be cut */
  .st-hud-live{flex-direction:column;align-items:flex-start;gap:3px;font:500 11px/1.3 var(--sans);white-space:normal}
  .st-hud-live .chip{font-size:8.5px;padding:0 5px} .st-hud-live .tick{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
  .st-hud-tabs span{font-size:11px;gap:4px;letter-spacing:0}
  .st-callout{min-width:0;max-width:150px;padding:5px 8px 6px} .st-callout small{font-size:8.5px;letter-spacing:0} .st-callout b{font-size:11px} .st-callout span{display:none}
}
@media (prefers-reduced-motion:reduce){.st-hud-live .chip,.st-hud-live .tick.tick{animation:none}}
.st-careful{margin-right:8px;padding:1px 8px;border-radius:4px;font-weight:600;color:#1d1300;background:rgb(var(--h));box-shadow:0 0 14px rgba(var(--h),.45)}
.st-send .st-back{margin-right:auto}
.st-sky.finished .st-hud-title em{animation:st-glow 2.6s ease-in-out both}
@keyframes st-glow{50%{text-shadow:0 0 28px rgba(255,226,180,.95),0 0 6px #fff;color:#fff}}
@media (max-width:760px){.st-send .st-back{margin-right:0;order:3}}
@media (prefers-reduced-motion:reduce){.st-sky.finished .st-hud-title em{animation:none}}

/* careful-answer prompts (study.js): the point in question, and a slider not yet set */
.st-q.warn{border-color:rgba(245,185,92,.85)!important;box-shadow:0 0 0 3px rgba(245,185,92,.18);animation:st-nudge .4s ease-out}
@keyframes st-nudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.st-conf.unset b{color:var(--p-faint);font:inherit;font-size:12px;min-width:56px}
.pt .st-conf.unset input.st-range[type=range]::-webkit-slider-thumb{background:var(--p-line2);border-color:var(--p-mut);box-shadow:none}

/* onboarding and the alignment after submitting (study.js) */
.st-onb .pt-field .st-opts{margin-bottom:0}
.st-onb-q{margin-top:6px;padding-top:16px;border-top:1px solid var(--p-line)}
.st-onb-q .st-tier-h,.st-align .st-tier-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.st-onb-q .st-tier-h p{margin:4px 0 0;font-size:13px;color:var(--p-mut)}
.st-onb-q .st-count{margin-left:auto;font:500 12px var(--mono);color:var(--p-mut)}
.st-onb .st-qs,.st-align .st-qs{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.st-firsthand{margin-top:4px}
.st-reading{display:flex;align-items:center;gap:7px;padding:22px 4px 10px;color:var(--p-mut);font-size:13.5px}
.st-reading span{margin-left:6px}
.st-reading i{width:7px;height:7px;border-radius:50%;background:rgb(var(--h));box-shadow:0 0 10px rgba(var(--h),.7);animation:st-read 1.2s ease-in-out infinite}
.st-reading i:nth-child(2){animation-delay:.15s} .st-reading i:nth-child(3){animation-delay:.3s}
@keyframes st-read{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.st-reading i{animation:none;opacity:.7}}
.pt-doc{max-width:720px}
.pt-doc section{padding:22px 0;border-top:1px solid var(--p-line)}
.pt-doc h2{margin:0 0 12px;font-size:17px;font-weight:620}
.pt-doc p{margin:0;color:var(--p-mut);font-size:14.5px;line-height:1.75}
.pt-doc ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pt-doc li{display:grid;grid-template-columns:110px 1fr;gap:16px;font-size:14.5px;line-height:1.75}
.pt-doc li b{font-weight:560;color:var(--p-ink)} .pt-doc li span{color:var(--p-mut)}
@media(max-width:560px){.pt-doc li{grid-template-columns:1fr;gap:2px}}

/* the first step of a submission: two modes, each drawn as a constellation */
.pt-modepick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pt-mode{--m:125,162,255;position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;margin:0;color:var(--p-ink)!important;transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.2,.9,.3,1.3),opacity .18s,filter .18s}
.pt-mode-goal{--m:255,200,87}
.pt-mode:hover,.pt-mode:focus-visible{border-color:rgba(var(--m),.7);box-shadow:0 0 0 1px rgba(var(--m),.35),0 14px 60px rgba(var(--m),.22);transform:translateY(-4px) scale(1.012)}
.pt-modepick:hover .pt-mode:not(:hover),.pt-modepick.picked .pt-mode:not(.on){opacity:.5;filter:saturate(.35) brightness(.8)}
.pt-mode::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(var(--m),.16) 50%,transparent 65%);transform:translateX(-120%)}
.pt-mode:hover::after{transform:translateX(120%);transition:transform .55s ease-out}
.pt-mode.on{animation:pt-pick .42s cubic-bezier(.2,.9,.3,1)}
.pt-modepick.picked .pt-mode:not(.on){transform:translateY(8px) scale(.97)}
@keyframes pt-pick{0%{transform:translateY(-4px) scale(1.012)}22%{transform:scale(.975)}55%{transform:scale(1.035);box-shadow:0 0 0 2px rgba(var(--m),.8),0 0 90px rgba(var(--m),.5)}100%{transform:scale(1.02);box-shadow:0 0 0 1px rgba(var(--m),.6),0 0 60px rgba(var(--m),.3)}}
.pt-sky{display:block;width:100%;aspect-ratio:16/11;background:radial-gradient(110% 80% at 50% 100%,rgba(var(--m),.14),rgba(7,10,17,0) 65%),#05070d;border-bottom:1px solid var(--p-line)}
.pt-mode-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pt-mode-body h2{margin:0;font-size:18px;font-weight:650}
.pt-mode-body .pt-mode-tag{margin:4px 0 10px;color:rgb(var(--m));font-size:13.5px;font-weight:500}
.pt-mode-body p{margin:0;color:#C3CADB;font-size:13.5px;line-height:1.8;flex:1}
.pt-mode-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;height:58px;border-top:1px solid rgba(var(--m),.5);background:linear-gradient(90deg,rgba(var(--m),.16),rgba(var(--m),.32),rgba(var(--m),.16));color:#fff;font-size:17px;letter-spacing:.06em;transition:background .18s,color .18s,letter-spacing .18s}
.pt-mode-go i{font-style:normal;font-size:20px;transition:transform .18s cubic-bezier(.2,.9,.3,1.4)}
.pt-mode-go::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-100%);animation:pt-glint 3.2s ease-in-out infinite}
.pt-mode-goal .pt-mode-go::before{animation-delay:1.6s}
.pt-mode:hover .pt-mode-go,.pt-mode.on .pt-mode-go{background:rgb(var(--m));color:#070A11;letter-spacing:.12em}
.pt-mode:hover .pt-mode-go i{transform:translateX(6px)}
@keyframes pt-glint{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pt-modetip{margin:18px 2px 0;color:var(--p-mut);font-size:13px;line-height:1.8}
.pt-modechip{--m:125,162,255;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:16px;border-radius:10px;border:1px solid rgba(var(--m),.45);background:rgba(var(--m),.1);font-size:13px;animation:pt-arrive .9s ease-out}
.pt-modechip.pt-mode-goal{--m:255,200,87}
.pt-modechip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(var(--m),.35) 50%,transparent 70%);transform:translateX(120%);animation:pt-sweep .7s ease-out}
@keyframes pt-arrive{0%{box-shadow:0 0 0 2px rgba(var(--m),.7),0 0 60px rgba(var(--m),.45);transform:scale(1.02)}100%{box-shadow:0 0 0 0 rgba(var(--m),0);transform:none}}
@keyframes pt-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.pt-modechip b{margin-right:10px;font-size:14px;color:#fff}
.pt-modechip span{color:var(--p-mut)}
/* the results once the check before them ends: they arrive lit, with the sweep a picked mode gets, and stay lit */
.pt-card.pt-unlock{--m:125,162,255;position:relative;overflow:hidden;animation:pt-unlock 1.4s cubic-bezier(.2,.9,.3,1) both}
.pt-card.pt-unlock::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(var(--m),.35) 50%,transparent 70%);transform:translateX(-120%);animation:pt-sweep .9s ease-out .35s}
@keyframes pt-unlock{0%{opacity:0;transform:translateY(10px) scale(.985)}25%{opacity:1;transform:scale(1.012);box-shadow:0 0 0 2px rgba(var(--m),.85),0 0 90px rgba(var(--m),.5)}100%{transform:none;box-shadow:0 0 0 1px rgba(var(--m),.55),0 0 60px rgba(var(--m),.28)}}
@media (prefers-reduced-motion:reduce){.pt-card.pt-unlock,.pt-card.pt-unlock::after{animation:none}.pt-card.pt-unlock{box-shadow:0 0 0 1px rgba(var(--m),.55),0 0 60px rgba(var(--m),.28)}}
@media (prefers-reduced-motion:reduce){.pt-mode-go::before{animation:none;display:none}.pt-mode,.pt-mode.on,.pt-modechip,.pt-modechip::after,.pt-mode:hover::after{animation:none;transition:none}}
@media (max-width:720px){.pt-modepick{grid-template-columns:1fr}}

/* statistics (admin): mode keys share the chart's two validated hues, goal a diamond and result a circle */
.ps-modes{display:grid;gap:0}
.ps-key{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--p-faint)}
.ps-key.goal{background:#b8862a;border-radius:1px;transform:rotate(45deg)} .ps-key.result{background:#6f8fe6}
.ps-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.ps-tile{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--p-line);border-radius:10px;min-width:0}
.ps-tile .k{font-size:12px;color:var(--p-mut)} .ps-tile b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums} .ps-tile .mut{font-size:11.5px}
.ps-seg{display:flex;gap:2px;padding:3px;background:rgba(0,0,0,.3);border-radius:8px}
.ps-seg button{height:26px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--p-mut);font:500 12.5px var(--sans);cursor:pointer}
.ps-seg button.on{background:rgba(255,255,255,.1);color:#fff}
.ps-chart{position:relative;max-width:640px}
.ps-chart svg{width:100%;height:auto;display:block}
.ps-grid{stroke:rgba(255,255,255,.07);stroke-width:1} .ps-diag{stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:4 4}
.ps-tick{fill:var(--p-faint);font:11px var(--mono)} .ps-axis{fill:var(--p-mut);font-size:11.5px}
.ps-dot{stroke:var(--p-bg);stroke-width:2} .ps-dot.goal{fill:#b8862a} .ps-dot.result{fill:#6f8fe6} .ps-dot.none{fill:var(--p-faint)}
.ps-hit{cursor:default} .ps-hit:hover .ps-dot{stroke:#fff}
.ps-tip{position:absolute;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;background:#121826;border:1px solid var(--p-line2);border-radius:8px;padding:7px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;white-space:nowrap;z-index:2}
.ps-tip span{color:var(--p-mut)}
.ps-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:12px}
.ps-table{overflow-x:auto;margin:0 -8px}
.ps-table+.pt-fine{margin-top:16px}
.ps-table table{border-collapse:collapse;width:100%;font-size:12.5px}
.ps-table th{font-weight:500;color:var(--p-mut);text-align:left;padding:8px 8px;border-bottom:1px solid var(--p-line);white-space:nowrap}
.ps-table td{padding:9px 8px;border-bottom:1px solid var(--p-line);white-space:nowrap}
.ps-table td:first-child{white-space:normal;min-width:140px}
.ps-table .n{text-align:right;font-variant-numeric:tabular-nums}

/* lighting the tree (study.js): a map of stars that light up, one point read in full below, the
   feedback item as steps, reports with files */
.st-gate.s4{--h:120,220,160}
.st-tree{--h:255,200,130}
.st-map{position:relative;margin:-6px -10px 14px;border-radius:16px;overflow:hidden;border:1px solid rgba(150,170,220,.14);
  background:radial-gradient(ellipse at 50% 0%,rgba(61,107,240,.14),transparent 60%),radial-gradient(1px 1px at 12% 30%,rgba(200,215,255,.5),transparent),
  radial-gradient(1px 1px at 72% 18%,rgba(200,215,255,.4),transparent),radial-gradient(1px 1px at 38% 78%,rgba(200,215,255,.35),transparent),
  radial-gradient(1px 1px at 88% 66%,rgba(200,215,255,.4),transparent),#04060c;box-shadow:inset 0 0 80px rgba(61,107,240,.06)}
.st-map-hud{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.st-map-hud small{display:block;font:500 9.5px var(--mono);letter-spacing:.22em;color:rgba(170,185,220,.55)}
.st-map-hud b{font-size:17px;font-weight:750;letter-spacing:.06em;color:#fff} .st-map-hud em{font-style:normal;color:rgb(var(--h));text-shadow:0 0 18px rgba(var(--h),.6)}
.st-map-num{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.st-map-num b{font:700 28px var(--mono);color:#fff;text-shadow:0 0 22px rgba(var(--h),.5)} .st-map-num span{font:500 13px var(--mono);color:rgba(200,210,235,.6)}
.st-map-num small{margin-left:6px;font-size:12px;color:rgba(200,210,235,.7)}
.st-map .st-bar{margin:4px 18px 0}
.st-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.st-bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(255,196,120,.6),rgb(255,220,160));box-shadow:0 0 12px rgba(255,200,130,.6);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.st-stagegrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
.st-mapcol{position:sticky;top:68px;z-index:4}
.st-map{display:flex;flex-direction:column;height:min(640px,calc(100vh - 92px));min-height:420px;margin:0}
.st-canvas{position:relative;flex:1;min-height:0;touch-action:none}
.st-canvas canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st-readcol{min-width:0;position:sticky;top:68px;max-height:calc(100vh - 84px);overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(150,170,220,.25) transparent}
.st-insts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.st-inst{position:relative;height:148px;border-radius:12px;border:1px solid rgba(150,170,220,.14);background:linear-gradient(180deg,rgba(10,14,26,.95),#04060c);overflow:hidden}
.st-inst canvas{position:absolute;inset:22px 0 18px;width:100%;height:calc(100% - 40px)}
.st-inst-h,.st-inst-f{position:absolute;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font:500 9.5px var(--mono);letter-spacing:.14em;color:rgba(170,185,220,.6);pointer-events:none}
.st-inst-h{top:7px} .st-inst-f{bottom:6px;letter-spacing:.06em}
.st-inst .chip{font-style:normal;padding:0 6px;border-radius:3px;color:#04060c;background:rgb(255,200,130);letter-spacing:.08em}
.st-map{height:min(520px,calc(100vh - 250px))}
.st-intro{margin-top:0}
.st-readcol .st-detail{margin-top:0}
.st-readcol .st-split{grid-template-columns:1fr}
.st-readcol .st-two{grid-template-columns:1fr}
@media (max-width:980px){.st-insts{display:none}.st-readcol{position:static;max-height:none;overflow:visible;padding-right:0}.st-stagegrid{grid-template-columns:1fr;gap:12px}.st-mapcol{top:56px}.st-map{height:300px;min-height:0}
  .st-map-hud{padding:10px 14px 4px}.st-map .st-bar{margin:2px 14px 0}.st-legend{padding:4px 14px 10px;gap:10px;font-size:10.5px}}
@media (max-width:560px){.st-map{height:250px}.st-legend .split,.st-legend .unclear{display:none}}
.st-legend{display:flex;flex-wrap:wrap;gap:14px;padding:6px 18px 14px;font-size:11.5px;color:rgba(200,210,235,.6)}
.st-legend span{display:flex;align-items:center;gap:6px} .st-legend i{width:9px;height:9px;border-radius:50%;background:#141a28;border:1px solid #55607a}
.st-legend .lit i{background:rgb(255,214,150);box-shadow:0 0 8px rgba(255,200,130,.8);border-color:transparent} .st-legend .checked i{background:rgb(125,162,255);border-color:transparent}
.st-legend .rejected i{background:rgb(240,110,100);border-color:transparent} .st-legend .unclear i{border:1px dashed rgb(245,185,92)} .st-legend .split i{border-radius:1px;transform:rotate(45deg);width:8px;height:8px}
.st-fly{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:80;pointer-events:none;
  background:radial-gradient(circle,#fff 0,rgb(255,214,150) 40%,rgba(255,190,110,0) 75%);box-shadow:0 0 16px 4px rgba(255,200,130,.6)}
.st-detail{margin-top:6px;padding:18px 20px;border-radius:12px;border:1px solid var(--p-line);background:rgba(0,0,0,.2);animation:st-card .35s cubic-bezier(.2,.9,.3,1) both}
.st-detail.lit{border-color:rgba(255,206,140,.45);background:linear-gradient(180deg,rgba(255,200,130,.06),rgba(0,0,0,.2) 160px)}
.st-detail-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;margin-bottom:6px}
.st-kind{font:600 10.5px var(--mono);letter-spacing:.12em;color:rgb(var(--h))}
.st-pos{margin-left:auto;font-family:var(--mono)}
.st-tag{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.06);color:var(--p-mut)}
.st-detail.lit .st-tag{color:#1d1300;background:rgb(255,214,150)}
.st-title{margin:4px 0 10px;font-size:19px;font-weight:700;color:#fff;letter-spacing:.02em}
.st-read{max-width:68ch;font-size:15px;line-height:1.9;color:#DCE2EE}
.st-read p{margin:0 0 8px} .st-read ul{margin:6px 0 0;padding-left:20px} .st-read li{margin:4px 0}
.st-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-split > div{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--p-line)}
.st-split b{display:block;margin:4px 0 6px;color:#fff;font-size:14.5px} .st-split .st-read{font-size:13.5px;line-height:1.8}
.st-reps{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.st-rep{padding:10px 12px;border-radius:10px;border:1px solid var(--p-line);background:rgba(255,255,255,.02);font-size:13.5px;line-height:1.75;color:#C9D1DF}
.st-rep-h{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:4px} .st-rep-h b{color:#fff;font-size:13px}
.st-rep p{margin:2px 0} .st-rep .st-k{margin-right:8px}
.st-rep-f{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.st-detail-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .st-skip{margin-left:auto}
.st-light{display:flex;flex-direction:column;gap:10px}
.st-stepper{display:flex;gap:4px;margin:0;padding:0;list-style:none;counter-reset:s}
.st-stepper li{flex:1}
.st-stepper button{width:100%;display:flex;align-items:center;gap:7px;padding:8px 6px;border:0;border-bottom:2px solid rgba(255,255,255,.08);background:none;color:var(--p-mut);font:inherit;font-size:12.5px;cursor:pointer}
.st-stepper button:disabled{cursor:default;opacity:.45}
.st-stepper i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:600 10.5px var(--mono);border:1px solid var(--p-line2)}
.st-stepper .now button{color:#fff;border-bottom-color:rgb(var(--h))} .st-stepper .now i{border-color:rgb(var(--h));color:rgb(var(--h));box-shadow:0 0 10px rgba(var(--h),.4)}
.st-stepper .done i{background:rgb(var(--h));color:#140c00;border-color:rgb(var(--h))}
.st-stage{padding:6px 2px 2px;animation:st-card .3s cubic-bezier(.2,.9,.3,1) both}
.st-ask{margin:0 0 10px;color:#E3E8F2;font-size:14.5px;line-height:1.75} .st-ask.sub{font-size:13px;color:var(--p-mut);margin-top:6px}
.st-evs{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.st-evs-h{font:600 10.5px var(--mono);letter-spacing:.1em;color:rgba(200,210,235,.6)}
.st-evi{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.025);font-size:13px;line-height:1.7;color:#C9D1DF}
.st-evi span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer} .st-evi:hover span{-webkit-line-clamp:unset}
.st-w{flex:none;font:600 11px var(--mono);padding:1px 6px;border-radius:4px;color:#0f1a10;background:rgb(120,220,160)} .st-w.neg{background:rgb(240,110,100)}
.st-next{display:flex;justify-content:flex-end}
.st-panel{margin:14px 0 2px;padding:14px 16px;border-radius:12px;border:1px solid rgba(var(--h),.35);background:rgba(var(--h),.04);animation:st-card .3s ease-out both}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-report textarea,.st-report input:not([type=file]){width:100%}
.st-claim-t{color:#fff;font-size:15px}
.st-full{margin:-4px 0 10px 32px;font-size:12.5px;color:var(--p-mut)} .st-full summary{cursor:pointer} .st-full .st-read{margin-top:8px;font-size:13.5px}
@media (max-width:760px){.st-map{margin:-4px -6px 12px}.st-split,.st-two{grid-template-columns:1fr}.st-stepper button{font-size:0;justify-content:center}.st-stepper i{font-size:10.5px}
  .st-map-num b{font-size:22px}.st-skip{margin-left:0}.st-full{margin-left:0}}
@media (prefers-reduced-motion:reduce){.st-n.flash .halo,.st-stage,.st-detail,.st-panel{animation:none}.st-bar i{transition:none}}
.st-teach .st-card{border:1px solid var(--p-line);border-radius:8px;margin-top:8px;overflow:hidden}
.st-card-h{width:100%;text-align:left;padding:10px 12px;background:rgba(255,255,255,.02);border:0;color:#DDE3EE;font:inherit;font-size:13.5px;cursor:pointer}
.st-card.seen .st-card-h{color:var(--p-mut)}
.st-card-b{padding:4px 14px 10px;font-size:13px;line-height:1.8;color:#C9D1DF}
@media (max-width:760px){.st-node{margin-left:calc(var(--d) * 10px)}.st-acts{margin-left:0}}
@media (prefers-reduced-motion:reduce){.st-step{animation:none}.st-bar i{transition:none}}

/* ---------------------------------------------------------------- answering rule, round check, batches, explanations */
.st-own{margin:0 0 14px;padding:9px 12px;border-left:2px solid var(--p-acc);background:rgba(125,162,255,.06);border-radius:0 8px 8px 0;font-size:13px;line-height:1.7;color:#C9D1DF}
.st-round{margin:4px 0 14px;padding:12px 14px;border:1px dashed rgba(125,162,255,.35);border-radius:12px}
.st-round p{margin:4px 0 8px;font-size:13px;color:var(--p-mut)}
.st-k{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-acc)}
.st-batches{margin-top:6px}
.st-batch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px}
.st-batch .st-opts{margin:0}
.st-more{height:30px;font-size:12.5px;margin-top:8px}
.st-explain{margin:14px 0 4px;padding:14px 16px;border:1px solid rgba(245,185,92,.3);border-radius:12px;background:linear-gradient(180deg,rgba(245,185,92,.07),rgba(245,185,92,.02))}
.st-explain .st-k{color:var(--p-wait)}
.st-explain.held{border-style:dashed;background:none}
.st-explain.held p{margin:6px 0 0;color:var(--p-mut);font-size:13px}
.st-echeck{margin-top:12px;padding-top:12px;border-top:1px solid var(--p-line)}
.st-echeck p{margin:6px 0 10px;font-size:13.5px}
.st-echeck.ok{color:var(--p-pass);font-size:13px}
.st-echeck.miss{color:var(--p-wait);font-size:13px}
@media (max-width:760px){.st-batch{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the two profiles (hud.js) */
.hud{--hc:94,200,255;--mc:255,176,72;font-family:var(--sans)}
.hud .mono,.hud-chip,.hud-live,.hud-k,.hud-lv,.hud-who{font-family:var(--mono)}
.hud-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.hud-chip{font-size:11.5px;letter-spacing:.08em;padding:5px 11px;border:1px solid var(--p-line2);border-radius:6px;color:var(--p-mut);background:rgba(0,0,0,.25)}
.hud-chip b{color:#fff;font-weight:600;margin:0 2px}
.hud-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.14em;color:#FF7A7A;padding:5px 11px;border:1px solid rgba(255,122,122,.4);border-radius:6px;background:rgba(255,80,80,.08)}
.hud-live i{width:7px;height:7px;border-radius:50%;background:#FF5A5A;box-shadow:0 0 10px #FF5A5A;animation:hud-blink 1.2s steps(2) infinite}
@keyframes hud-blink{50%{opacity:.2}}
.hud-arena{position:relative;height:440px;border:1px solid var(--p-line);border-radius:16px;overflow:hidden;margin-bottom:16px;
  background:radial-gradient(520px 300px at 22% 50%,rgba(var(--hc),.12),transparent 70%),radial-gradient(520px 300px at 78% 50%,rgba(var(--mc),.1),transparent 70%),
    linear-gradient(180deg,rgba(5,8,15,.9),rgba(3,5,10,.98))}
.hud-arena::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.hud-stage{position:absolute;inset:0;width:100%;height:100%}
.hud-tag{position:absolute;top:18px;display:flex;flex-direction:column;gap:6px;z-index:1}
.hud-tag.left{left:20px}
.hud-tag.right{right:20px;align-items:flex-end}
.hud-who{font-size:11px;letter-spacing:.22em;color:rgba(var(--hc),.9)}
.hud-tag.right .hud-who,.hud-tag.right .hud-lv{color:rgba(var(--mc),.9)}
.hud-lv{font-size:10px;letter-spacing:.3em;color:rgba(var(--hc),.7);margin-bottom:-2px}
.hud-dots{display:block}
.hud-xp{width:150px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.hud-xp i{display:block;height:100%;background:linear-gradient(90deg,rgba(var(--hc),.4),rgb(var(--hc)));box-shadow:0 0 12px rgb(var(--hc));animation:hud-grow 1.4s cubic-bezier(.2,.8,.2,1)}
.hud-xp.ai i{background:linear-gradient(90deg,rgba(var(--mc),.4),rgb(var(--mc)));box-shadow:0 0 12px rgb(var(--mc))}
@keyframes hud-grow{from{width:0}}
.hud-sub{font-size:11.5px;color:var(--p-mut)}
.hud-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;z-index:1}
.hud-mid b{font:600 30px var(--mono);color:#fff;text-shadow:0 0 18px rgba(125,162,255,.6)}
.hud-k{font-size:10.5px;letter-spacing:.14em;color:var(--p-mut)}
.hud-flow{position:absolute;left:50%;transform:translateX(-50%);font:500 11px var(--mono);letter-spacing:.08em;z-index:1;white-space:nowrap}
.hud-flow.up{top:22%;color:rgba(var(--hc),.85)}
.hud-flow.down{bottom:20%;color:rgba(var(--mc),.85)}
.hud-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.hud-panel{position:relative;border:1px solid var(--p-line);border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.hud-panel h3{margin:0 0 12px;font:500 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--p-mut)}
.hud-panel.human{border-color:rgba(var(--hc),.25);box-shadow:inset 0 1px 0 rgba(var(--hc),.15)}
.hud-panel.machine{border-color:rgba(var(--mc),.25);box-shadow:inset 0 1px 0 rgba(var(--mc),.15)}
.hud-panel.human h3{color:rgba(var(--hc),.9)} .hud-panel.machine h3{color:rgba(var(--mc),.9)}
.hud-stat{margin-bottom:11px}
.hud-stat-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#C9D1DF;margin-bottom:5px}
.hud-stat-h b{font:600 13px var(--mono)}
.hud-bar{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.hud-bar i{height:7px;border-radius:2px;background:rgba(255,255,255,.06)}
.hud-bar i.on{animation:hud-seg .5s backwards}
@keyframes hud-seg{from{opacity:0;transform:scaleY(.2)}}
.hud-note{display:block;font-size:11px;color:var(--p-faint);margin-top:4px}
.hud-yours{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid rgba(var(--mc),.35);background:rgba(var(--mc),.06)}
.hud-yours>span:first-child{font:500 11px var(--mono);letter-spacing:.14em;color:rgba(var(--mc),.9)}
.hud-yours b{font:600 26px var(--mono);color:#fff;text-shadow:0 0 14px rgba(var(--mc),.8)}
.hud-yours>span:last-child{font-size:12px;color:var(--p-mut)}
.hud-trace{width:100%;height:190px;display:block}
.hud-legend{display:flex;gap:16px;font:500 11px var(--mono);margin-top:6px}
.hud-legend span::before{content:'';display:inline-block;width:14px;height:2px;margin-right:6px;vertical-align:middle;background:currentColor}
.hud-legend .h{color:rgb(var(--hc))} .hud-legend .m{color:rgb(var(--mc))} .hud-legend .s{color:rgba(var(--mc),.55)}
.hud-log{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto}
.hud-line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.04);animation:hud-in .4s backwards}
@keyframes hud-in{from{opacity:0;transform:translateX(-8px)}}
.hud-line .mono{color:var(--p-faint);font-size:11px}
.hud-line em{font-style:normal;color:var(--p-mut)}
.hud-line i{font:600 10px var(--mono);font-style:normal;letter-spacing:.1em;padding:2px 7px;border-radius:4px;color:#fff;background:rgba(255,255,255,.08)}
.hud-line i.t-LIT,.hud-line i.t-HIT{background:rgba(74,222,156,.18);color:var(--p-pass)}
.hud-line i.t-MISS,.hud-line i.t-REJ{background:rgba(255,138,126,.16);color:var(--p-fail)}
.hud-line i.t-LV{background:rgba(var(--hc),.18);color:rgb(var(--hc))}
.hud-quests{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.hud-quest{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 14px;border:1px solid var(--p-line2);border-radius:10px;color:var(--p-ink)!important;background:rgba(0,0,0,.2);transition:border-color .2s,transform .2s}
.hud-quest:hover{border-color:rgba(var(--hc),.6);transform:translateY(-2px)}
.hud-quest .hud-k{grid-column:1/-1}
.hud-quest i{grid-row:2/4;grid-column:2;align-self:center;font-style:normal;color:rgb(var(--hc))}
.hud-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--p-line2);border-radius:12px;
  color:var(--p-ink)!important;font-size:13px;background:linear-gradient(90deg,rgba(94,200,255,.08),rgba(255,176,72,.06))}
.hud-strip b{font:600 13px var(--mono)} .hud-strip b.h{color:rgb(94,200,255)} .hud-strip b.m{color:rgb(255,176,72)}
.hud-strip .hud-live{padding:3px 6px}
.hud-strip .sep{color:var(--p-faint)}
.hud-strip .go{margin-left:auto;color:var(--p-acc)}
@media (max-width:760px){
  .hud-arena{height:380px}
  .hud-cols{grid-template-columns:1fr}
  .hud-tag{top:12px}.hud-tag.left{left:12px}.hud-tag.right{right:12px}
  .hud-xp{width:96px}.hud-sub{display:none}
  .hud-flow{display:none}
  .hud-mid{top:auto;bottom:14px;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){.hud-live i,.hud-xp i,.hud-bar i.on,.hud-line{animation:none}}

/* ---------------------------------------------------------------- control mode and the command console */
.st-control{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-control button{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--p-line2);background:rgba(255,255,255,.02);color:var(--p-ink);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.st-control button b{font-size:14.5px}
.st-control button span{font-size:12.5px;line-height:1.65;color:var(--p-mut)}
.st-control button:hover{border-color:rgba(125,162,255,.5)}
.st-control button.on{border-color:var(--p-acc);background:rgba(61,107,240,.14);box-shadow:0 0 0 1px rgba(125,162,255,.3),0 0 24px rgba(61,107,240,.18)}
.st-command .pt-sec h2{display:flex;align-items:center;gap:10px}
.st-livedot{width:8px;height:8px;border-radius:50%;background:var(--p-pass);box-shadow:0 0 10px var(--p-pass);animation:hud-blink 1.4s steps(2) infinite}
.st-cmd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;margin-top:6px}
.st-feed{position:relative;max-height:560px;overflow:auto;padding-right:6px}
.st-feed>.st-k,.st-guide>.st-k{display:block;margin-bottom:10px}
.st-step{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:8px 0;position:relative}
.st-step::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--p-line)}
.st-step i{width:9px;height:9px;margin:5px 0 0 2px;border-radius:50%;background:var(--p-bg);border:1.5px solid var(--p-acc);position:relative;z-index:1}
.st-step p{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:#C9D1DF}
.st-step span.mut{font:11px var(--mono)}
.st-step.new{animation:st-stepin .9s ease-out}
.st-step.new i{background:var(--p-acc);box-shadow:0 0 12px var(--p-acc)}
@keyframes st-stepin{from{opacity:0;transform:translateY(-6px);background:rgba(125,162,255,.12)}}
.st-cmd-side{display:flex;flex-direction:column;gap:14px}
.st-ask-live{padding:14px 16px;border-radius:12px;border:1px solid rgba(245,185,92,.45);background:linear-gradient(180deg,rgba(245,185,92,.09),rgba(245,185,92,.02));box-shadow:0 0 28px rgba(245,185,92,.08);animation:st-stepin .6s ease-out}
.st-ask-live .st-k{color:var(--p-wait)}
.st-ask-live .st-k.sub{display:block;margin:10px 0 6px;color:var(--p-mut)}
.st-ask-h{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.st-ask-live>p{margin:8px 0 12px;font-size:14px;line-height:1.7}
.st-ask-live textarea{margin-top:4px}
.st-due{position:relative;margin-top:12px;height:22px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.st-due i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(245,185,92,.15),rgba(245,185,92,.35));transition:width 1s linear}
.st-due.low i{background:linear-gradient(90deg,rgba(255,138,126,.18),rgba(255,138,126,.4))}
.st-due span{position:relative;display:block;padding:3px 10px;font:11.5px var(--mono);color:#E8DCC4}
.st-missed{margin:0;padding:10px 12px;border-radius:10px;border:1px dashed var(--p-line2);font-size:12.5px;color:var(--p-mut)}
.st-answered{display:flex;flex-direction:column;gap:4px}
.st-answered div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;padding:6px 10px;border-radius:8px;background:rgba(74,222,156,.05)}
.st-answered .st-k.ok{color:var(--p-pass)}
.st-answered b{font-weight:500;color:#fff}
.st-guide{padding:14px 16px;border-radius:12px;border:1px solid var(--p-line2);background:rgba(0,0,0,.18)}
.st-guide .st-send{margin-top:8px}
.st-gitem{margin-top:12px;padding-top:12px;border-top:1px solid var(--p-line)}
.st-gq{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;font-size:13px}
.st-gq p{margin:0;line-height:1.6}
.st-gq .mut{font:11px var(--mono)}
.st-ga{margin:8px 0 0 22px;padding:8px 12px;border-left:2px solid var(--p-line2);font-size:12.5px}
.st-ga p{margin:4px 0 0;color:#C9D1DF;line-height:1.6}
.st-ga.ok{border-color:var(--p-pass)} .st-ga.ok .st-k{color:var(--p-pass)}
.st-ga.wait{display:flex;align-items:center;gap:6px;color:var(--p-mut)}
.st-ga.wait i{width:4px;height:4px;border-radius:50%;background:var(--p-acc);animation:hud-blink 1s steps(2) infinite}
.st-ga.wait i:nth-of-type(2){animation-delay:.33s} .st-ga.wait i:nth-of-type(3){animation-delay:.66s}
@media (max-width:860px){.st-cmd-grid,.st-control{grid-template-columns:1fr}.st-feed{max-height:340px}}
@media (prefers-reduced-motion:reduce){.st-step.new,.st-ask-live,.st-livedot,.st-ga.wait i{animation:none}}

/* stage progress bars on the task page (PORTAL_CONFIG.stageBars) */
.pt-barrow{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.pt-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.pt-bar i{display:block;height:100%;border-radius:3px;background:var(--p-acc);transition:width .6s ease}
.pt-stage.done .pt-bar i{background:var(--p-pass)}
.pt-stage.run .pt-bar i{box-shadow:0 0 10px var(--p-acc)}
.pt-barrow em{font:500 11px var(--mono);font-style:normal;color:var(--p-faint);min-width:32px;text-align:right}
.pt-row .pt-barrow{flex:none;width:130px;margin-top:0;padding-top:0}     /* a task's overall share in a list row (team leads) */
/* how to work with the AI scientist (a second layer under the research mode): two wide run timelines, stacked */
.pt-ctl-ctx{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;font-size:13px;color:var(--p-mut)}
.pt-ctl-ctx b{color:#fff;font-weight:600} .pt-ctl-ctx i{font-style:normal;color:var(--p-faint)}
.pt-ctlpick{display:flex;flex-direction:column;gap:14px}
.pt-ctl{--m:125,162,255;display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:196px;align-items:stretch;padding:0;margin:0;border-radius:12px;border:1px solid var(--p-line);
  background:linear-gradient(90deg,rgba(var(--m),.07),rgba(4,7,14,.6) 40%);font:inherit;text-align:left;color:var(--p-ink);cursor:pointer;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s,opacity .18s,filter .18s}
.pt-ctl-command{--m:255,200,87}
.pt-ctl:hover,.pt-ctl:focus-visible{border-color:rgba(var(--m),.65);box-shadow:inset 3px 0 0 rgb(var(--m)),0 10px 40px rgba(var(--m),.14)}
.pt-ctlpick:hover .pt-ctl:not(:hover),.pt-ctlpick.picked .pt-ctl:not(.on){opacity:.5;filter:saturate(.4)}
.pt-ctl.on{box-shadow:inset 3px 0 0 rgb(var(--m)),0 0 0 1px rgba(var(--m),.6)}
.pt-ctl-text{display:flex;flex-direction:column;padding:16px 20px;border-right:1px solid var(--p-line)}
.pt-ctl-text small{font:600 10px var(--mono);letter-spacing:.22em;color:rgb(var(--m))}
.pt-ctl-text h2{margin:4px 0 8px;font-size:19px;font-weight:650}
.pt-ctl-text ul{margin:0;padding:0 0 0 16px;color:#C3CADB;font-size:12.5px;line-height:1.65;flex:1;min-height:0}
.pt-ctl-go{margin-top:8px;font-size:13.5px;color:rgb(var(--m));letter-spacing:.04em} .pt-ctl-go i{font-style:normal;transition:transform .18s;display:inline-block}
.pt-ctl:hover .pt-ctl-go i{transform:translateX(5px)}
.pt-ctl-sky{position:relative;min-width:0}
.pt-ctl-sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:760px){.pt-ctl{grid-template-columns:1fr;height:auto}.pt-ctl-sky{height:160px}.pt-ctl-text{border-right:0;border-bottom:1px solid var(--p-line)}}
@media (prefers-reduced-motion:reduce){.pt-ctl{transition:none}}

/* the results once the check before them ends: they arrive lit, with the sweep a picked mode gets, and stay lit */
.pt-card.pt-unlock{--m:125,162,255;position:relative;overflow:hidden;animation:pt-unlock 1.4s cubic-bezier(.2,.9,.3,1) both}
.pt-card.pt-unlock::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(var(--m),.35) 50%,transparent 70%);transform:translateX(-120%);animation:pt-sweep .9s ease-out .35s}
@keyframes pt-unlock{0%{opacity:0;transform:translateY(10px) scale(.985)}25%{opacity:1;transform:scale(1.012);box-shadow:0 0 0 2px rgba(var(--m),.85),0 0 90px rgba(var(--m),.5)}100%{transform:none;box-shadow:0 0 0 1px rgba(var(--m),.55),0 0 60px rgba(var(--m),.28)}}
@media (prefers-reduced-motion:reduce){.pt-card.pt-unlock,.pt-card.pt-unlock::after{animation:none}.pt-card.pt-unlock{box-shadow:0 0 0 1px rgba(var(--m),.55),0 0 60px rgba(var(--m),.28)}}
@media (prefers-reduced-motion:reduce){.pt-mode-go::before{animation:none;display:none}.pt-mode,.pt-mode.on,.pt-modechip,.pt-modechip::after,.pt-mode:hover::after{animation:none;transition:none}}
@media (max-width:720px){.pt-modepick{grid-template-columns:1fr}}

/* before the first meeting: the two hands fill the dark window; the name and the way out sink into it */
.pt-gate{background:transparent!important;border-bottom:0!important;backdrop-filter:none!important}
.pt-gate .pt-brand{color:var(--p-mut)!important;font-weight:500;transition:color .2s}
.pt-gate .pt-brand:hover{color:#fff!important}
.pt-gate .pt-ghost{border-color:transparent;color:var(--p-faint)}
.pt-gate .pt-ghost:hover{border-color:transparent;color:var(--p-ink)}
.fm{background:#04070F;min-height:100vh}   /* the hands picture's own ground, so it has no edge */
.fm .pt-gate{position:fixed;left:0;right:0;top:0;z-index:5}
.fm .pa-scene{position:fixed;inset:0;height:auto;margin:0;border:0;border-radius:0;background:transparent}
.fm .pa-scene::after{display:none}
.fm .pa-hud-top{display:none}
.fm .pt-main{padding-top:88px}
/* the way in: the first screen fades as its hands are taken over and carried beside the questions (one
   drawing, see GestureHands), and the card opens from the line of light between them */
.fm-first{transition:opacity .3s}
.fm-q .fm-first{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fm-q .st-onb{animation:none}}
/* signing in: the screen sinks into the dark of the first page, which then rises out of it */
html.ais-dim::after{content:'';position:fixed;inset:0;z-index:100;background:#04070F;pointer-events:none;animation:aisDim .6s ease both}
html.ais-undim::after{animation:aisUndim var(--undim,1.6s) cubic-bezier(.4,0,.2,1) both}
@keyframes aisDim{from{opacity:0}to{opacity:1}}
@keyframes aisUndim{from{opacity:1}to{opacity:0}}
/* the answers sent: the card folds back into its line of light, the hands return to the middle, and the
   one next step rises quietly under them */
.fm-home{position:relative;z-index:0}
.fm-q.fm-closing .st-onb{animation:fmClose .45s cubic-bezier(.4,0,.6,1) both}
@keyframes fmClose{from{clip-path:inset(0 0 0 0 round 14px);opacity:1}to{clip-path:inset(49% 0 49% 0 round 14px);opacity:0}}
.fm-next{position:fixed;left:50%;bottom:8vh;z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:16px;cursor:pointer;white-space:nowrap;
  padding:16px 34px 16px 40px;border-radius:999px;overflow:hidden;isolation:isolate;
  font-size:17px;font-weight:500;letter-spacing:.32em;color:#E9EDF5!important;text-decoration:none!important;
  background:linear-gradient(90deg,rgba(232,178,92,.10),rgba(8,12,24,.55) 50%,rgba(90,160,255,.12));backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 26px -6px rgba(232,178,92,.35),0 0 26px -6px rgba(90,160,255,.35);
  opacity:0;animation:fmNext .45s ease .2s forwards,fmBreath 4.2s ease-in-out 1s infinite;
  transition:box-shadow .35s,background .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
/* a gold-to-blue rim, the two hands' colours meeting in one ring */
.fm-next::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(90deg,#E8B25C,rgba(255,255,255,.25) 50%,#5AA0FF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* a band of light crosses it on hover */
.fm-next::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);opacity:0}
.fm-next .fm-arrow{display:inline-block;letter-spacing:0;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fm-next:hover{color:#fff!important;transform:translateX(-50%) translateY(-2px);
  background:linear-gradient(90deg,rgba(232,178,92,.22),rgba(14,20,36,.6) 50%,rgba(90,160,255,.24));
  box-shadow:0 0 0 1px rgba(255,255,255,.06),-14px 0 40px -6px rgba(232,178,92,.6),14px 0 40px -6px rgba(90,160,255,.6)}
.fm-next:hover::after{animation:fmSweep .9s ease}
.fm-next:hover .fm-arrow{transform:translateX(6px)}
.fm-next:active{transform:translateX(-50%) translateY(0) scale(.98)}
@keyframes fmSweep{from{left:-40%;opacity:1}to{left:110%;opacity:1}}
@keyframes fmBreath{50%{box-shadow:0 0 0 1px rgba(255,255,255,.05),-6px 0 34px -4px rgba(232,178,92,.5),6px 0 34px -4px rgba(90,160,255,.5)}}
.fm-next:hover{animation-play-state:running,paused}
/* pressed with no subscription: the light tries to come on, flickers out, and the button jolts; it then waits unlit */
.fm-why{position:fixed;left:50%;bottom:calc(8vh - 44px);z-index:5;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;
  text-align:center;font-size:13px;line-height:1.5;color:rgba(214,222,236,.82);animation:fmWhy .5s ease both}
.fm-why a{color:#9cc0ff;white-space:nowrap;cursor:pointer}
@keyframes fmWhy{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.fm-next.fm-fail{animation:fmJolt .5s cubic-bezier(.36,.07,.19,.97) both;pointer-events:none}
.fm-next.fm-fail::before{animation:fmFlicker 1s steps(1,end) both}
.fm-next.fm-fail::after{animation:fmSweepDie .7s ease-out both}
.fm-next.fm-fail,.fm-next.fm-off{opacity:1}
.fm-next.fm-off{animation:none;color:rgba(233,237,245,.5)!important;background:rgba(10,13,22,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.04);transition:color .8s,background .8s,box-shadow .8s}
.fm-next.fm-off::before{filter:grayscale(1) brightness(.55);opacity:.7;transition:filter .8s,opacity .8s}
.fm-next.fm-off:hover{color:rgba(233,237,245,.72)!important;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 22px -8px rgba(255,255,255,.25)}
@keyframes fmJolt{10%,90%{transform:translateX(calc(-50% - 2px))}20%,80%{transform:translateX(calc(-50% + 4px))}30%,50%,70%{transform:translateX(calc(-50% - 7px))}40%,60%{transform:translateX(calc(-50% + 7px))}100%{transform:translateX(-50%)}}
@keyframes fmFlicker{0%{filter:brightness(2.2)}8%{filter:brightness(.4)}14%{filter:brightness(1.8)}22%{filter:brightness(.3)}30%{filter:brightness(1.3)}38%,100%{filter:grayscale(1) brightness(.55);opacity:.7}}
@keyframes fmSweepDie{0%{left:-40%;opacity:1}60%{left:30%;opacity:.6}100%{left:40%;opacity:0}}
/* pressed with one connected: the button's light gathers for a breath, then it lets go and fades, its
   light gone up toward the hands (start-burst.js) */
.fm-next.fm-go{opacity:1;animation:fmGo .7s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
@keyframes fmGo{0%{transform:translateX(-50%) scale(1);filter:brightness(1)}
  30%{transform:translateX(-50%) scale(1.03);filter:brightness(1.35);box-shadow:0 0 0 1px rgba(255,255,255,.18),-14px 0 44px -6px rgba(232,178,92,.7),14px 0 44px -6px rgba(90,160,255,.7)}
  100%{transform:translateX(-50%) scale(.97);filter:brightness(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.fm-next{animation:fmNext .01s forwards}.fm-next:hover::after{animation:none}}
@keyframes fmNext{to{opacity:1}}
/* the first meeting is all dark, down to the page behind it: when the questions go and the page shortens, nothing light shows */
html:has(.fm),html:has(.fm) body{background:#04070F}
/* a task's places: overview, command, lighting, forest */
.pt-taskviews{margin:-8px 0 22px}
.pt-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--p-pass);box-shadow:0 0 8px var(--p-pass);margin:0 2px 0 6px;vertical-align:middle;font-style:normal;animation:ptLive 1.6s ease-in-out infinite}
.pt-viewlinks{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.pt-viewlinks .pt-live{margin:0 6px 1px 0}
@keyframes ptLive{50%{opacity:.35}}
.lg-esc{margin:26px 0 0;font:400 10.5px var(--mono);letter-spacing:.06em;color:rgba(154,166,191,.45)}
.lg-esc kbd{font:inherit;padding:0 5px;margin-right:6px;border:1px solid rgba(154,166,191,.28);border-radius:3px}
@media (hover:none){.lg-esc{display:none}}

/* language picker (js/lang-menu.js): a pill that opens a dark list placed in <body> */
.lang-menu{position:relative;display:inline-flex;background:transparent;font-family:inherit;align-items:center;gap:6px;height:30px;padding:0 10px 0 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#A3ACBD;font-size:12.5px;line-height:1;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:color .2s,border-color .2s}
.lang-menu:hover,.lang-menu:focus-visible,.lang-menu.open{color:#fff;border-color:rgba(190,208,255,.6)}
.lang-menu svg{flex-shrink:0}
.lang-menu i{font-style:normal;font-size:9px;opacity:.7;transition:transform .2s}
.lang-menu.open i{transform:rotate(180deg)}
.lang-menu:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(125,162,255,.25)}
.lang-list{position:fixed;z-index:1000;margin:0;padding:5px;list-style:none;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:rgba(13,17,27,.94);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(61,107,240,.06),0 0 36px rgba(61,107,240,.12);animation:lang-in .14s ease-out}
.lang-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;height:34px;padding:0 12px;border-radius:8px;
  color:#A3ACBD;font-size:13px;cursor:pointer;outline:none;transition:background .15s,color .15s}
.lang-list li:hover,.lang-list li:focus-visible{background:rgba(125,162,255,.1);color:#fff}
.lang-list li.on{color:#fff}
.lang-list li b{font-weight:500;font-size:12px;color:#7DA2FF}
@keyframes lang-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fh-nav .lang-menu{pointer-events:auto;height:28px}
/* where the picker sits quietly: on the sign-in form and in the first meeting's dark */
.lg-alt .lang-menu,.pt-gate .lang-menu{height:26px;border-color:transparent;color:rgba(154,166,191,.55)}
.lg-alt .lang-menu:hover,.pt-gate .lang-menu:hover,.lg-alt .lang-menu.open,.pt-gate .lang-menu.open{color:#fff;border-color:rgba(255,255,255,.16)}
/* 知芽's entrance: a page unlocked, said with a small tag that pops up beside it and floats away */
.sprout-unlock{position:fixed;z-index:2147483002;display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;pointer-events:none;
  font:600 13.5px/1 "Noto Sans SC","IBM Plex Sans",system-ui,sans-serif;letter-spacing:.06em;color:#FFE6B0;white-space:nowrap;
  background:linear-gradient(90deg,rgba(60,42,14,.92),rgba(26,22,30,.92));border:1px solid rgba(255,206,120,.65);
  box-shadow:0 0 22px rgba(255,190,90,.45),inset 0 0 10px rgba(255,210,140,.18);animation:sproutUnlock 3.6s cubic-bezier(.2,.9,.3,1.2) both}
.sprout-unlock svg{flex:none;filter:drop-shadow(0 0 4px rgba(255,210,130,.9))}
@keyframes sproutUnlock{0%{opacity:0;transform:translate(-20%,16px) scale(.4)}14%{opacity:1;transform:translate(0,0) scale(1.12)}22%{transform:scale(1)}
  75%{opacity:1;transform:translate(0,-26px)}100%{opacity:0;transform:translate(0,-60px) scale(.94)}}
html.sprout-quiet .sprout-fx{visibility:hidden!important}
/* pointing at the menu, the words sit beside 知芽's body instead of over its head (and over the menu) */
/* the bubble's tail, aimed at 知芽 from whichever edge faces it (set by sprout.js: data-tail, --tail) */
.sprout-bubble::after{content:'';position:absolute;width:11px;height:11px;background:inherit;border:inherit;border-width:0 1px 1px 0;
  backdrop-filter:none;pointer-events:none}
.sprout-bubble[data-tail=bottom]::after{left:var(--tail);bottom:-6px;transform:translateX(-50%) rotate(45deg)}
.sprout-bubble[data-tail=top]::after{left:var(--tail);top:-6px;transform:translateX(-50%) rotate(225deg)}
.sprout-bubble[data-tail=left]::after{top:var(--tail);left:-6px;transform:translateY(-50%) rotate(135deg)}
.sprout-bubble[data-tail=right]::after{top:var(--tail);right:-6px;transform:translateY(-50%) rotate(-45deg)}
/* what 知芽 points at: a breathing gold ring, a ripple going out */
.sprout-spot{position:fixed;z-index:2147482990;pointer-events:none;border:1.5px solid rgba(255,206,120,.95);
  box-shadow:0 0 0 3px rgba(255,190,90,.18),0 0 22px rgba(255,190,90,.55),inset 0 0 12px rgba(255,200,120,.25);animation:sproutSpot 1.6s ease-in-out infinite}
.sprout-spot::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid rgba(255,206,120,.8);animation:sproutRipple 1.6s ease-out infinite}
.sprout-spot.out{opacity:0;transition:opacity .25s}
@keyframes sproutSpot{0%,100%{box-shadow:0 0 0 3px rgba(255,190,90,.14),0 0 16px rgba(255,190,90,.4),inset 0 0 10px rgba(255,200,120,.18)}50%{box-shadow:0 0 0 4px rgba(255,190,90,.28),0 0 30px rgba(255,190,90,.75),inset 0 0 14px rgba(255,200,120,.3)}}
@keyframes sproutRipple{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.18,1.5);opacity:0}}
/* a tag from 知芽 lands in the menu: the tab flashes gold as it takes it in */
.pt-nav a.pt-arrive{animation:ptArrive .9s ease-out}
@keyframes ptArrive{0%{color:#fff;text-shadow:0 0 14px #FFD58A,0 0 28px rgba(255,190,90,.9)}100%{text-shadow:0 0 0 transparent}}

/* 知芽's entrance: a line waits for a tap with a small bobbing mark in the bubble's corner, as dialogue boxes in games do */
.sprout-cue{position:absolute;right:12px;bottom:9px;width:0;height:0;border-style:solid;border-width:6px 5px 0 5px;border-color:currentColor transparent transparent transparent;opacity:.6;animation:sproutCue .9s ease-in-out infinite}
@keyframes sproutCue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

/* a menu tab 知芽 points at: its words glow gold, with a gold bar beneath that breathes */
.pt-nav a.sprout-lit{color:#FFE2A8!important;animation:sproutLit 1.6s ease-in-out infinite}
.pt-nav a.sprout-lit::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#FFD58A 20%,#FFD58A 80%,transparent);box-shadow:0 0 12px rgba(255,200,110,.9);animation:sproutLitBar 1.6s ease-in-out infinite}
@keyframes sproutLit{0%,100%{text-shadow:0 0 6px rgba(255,200,110,.45)}50%{text-shadow:0 0 14px rgba(255,200,110,.95),0 0 26px rgba(255,180,80,.45)}}
@keyframes sproutLitBar{0%,100%{opacity:.55;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1)}}
html.sprout-side .sprout-bubble{max-width:300px!important}

/* 知芽 being carried: the page under it is not selected */
html.sprout-grab, html.sprout-grab *{user-select:none!important;-webkit-user-select:none!important}
/* 知芽's entrance is a cut scene: nothing of it can be picked up */
html.sprout-scene .sprout-pet, html.sprout-scene .sprout-pet *{pointer-events:none!important}