/* Self-hosted fonts first (@import must precede all rules) — no external font CDN,
   so the CSP can forbid third-party origins. See public/fonts/fonts.css. */
@import url("/fonts/fonts.css");
/* AOS Mission Control — design system seeded from the ratified PIF-instance prototype
   (AOS design.md: black-first, #FCD100, Oswald/Inter, line icons, .note reserved for findings). */
:root{
  --bg:#000;--surface:#242424;--line:#3a3a3a;--txt:#FFF;--dim:#808080;
  --accent:#FCD100;--accent-ink:#000;--success:#1E9E5A;--warning:#C8861E;--danger:#C8372B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:17px/1.65 "Inter",-apple-system,sans-serif}
h1{font-family:"Oswald",sans-serif;font-weight:700;font-size:28px;text-transform:uppercase;margin:8px 0 4px}
h2{font-family:"Oswald",sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.03em;margin:56px 0 18px}
h2 .n{color:var(--accent);margin-right:8px}
h3{font-family:"Oswald",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.04em;margin:22px 0 8px;color:var(--accent);display:flex;align-items:center;gap:14px}
h3::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--accent) 0%,rgba(252,209,0,.10) 100%);border-radius:1px}
/* drill-in nav: back button + settings pinned bottom + community blink (Phil 2026-07-10) */
.sidebar{display:flex;flex-direction:column;scrollbar-width:none}
body.nosb .sidebar{display:none}
body.nosb main{padding-left:104px}
.sidebar::-webkit-scrollbar{display:none}
.navback{display:flex;align-items:center;width:calc(100% - 20px);margin:0 10px 8px;background:none;border:1px solid var(--line);border-radius:7px;cursor:pointer;padding:9px 12px;color:var(--accent);font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.navback:hover{border-color:var(--accent);background:rgba(252,209,0,.06)}
.navback[hidden]{display:none}
.glabel svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-right:2px}
.settingsarea{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.settingsarea .navitem svg{opacity:.75}
@keyframes navblink{0%,100%{background:transparent}25%,75%{background:rgba(252,209,0,.28)}50%{background:rgba(252,209,0,.08)}}
.navitem.blinking{animation:navblink .5s ease-in-out 3}
.kcard .kbody{padding:6px 20px 16px}
.kcard .kbody table{margin:6px 0 4px}
.kbody code{background:#1a1a1a;border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:13.5px;color:var(--accent)}
/* card headers get the same yellow extender as h3s (Phil 2026-07-10 — "8 Systems" card etc.) */
.khead b{display:flex;align-items:center;gap:14px;flex:1}
.khead b::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--accent) 0%,rgba(252,209,0,.10) 100%);border-radius:1px}
/* Plays board status chips */
.pstatus{border:1px solid var(--line);border-radius:50px;background:none;cursor:pointer;padding:3px 12px;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#9a9a9a;white-space:nowrap}
.pstatus.next-up{color:#b4b4b4}
.pstatus.in-motion{color:var(--accent);border-color:rgba(252,209,0,.6);background:rgba(252,209,0,.07)}
.pstatus.done{color:var(--success);border-color:rgba(30,158,90,.55);background:rgba(30,158,90,.08)}
.pstatus:not([disabled]):hover{border-color:var(--accent)}
.pstatus[disabled]{cursor:default}
.prank{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#000;font-family:"Oswald",sans-serif;font-weight:700;font-size:12px}
p{margin:8px 0}
.dim{color:var(--dim);font-size:15px}
.sub{color:var(--dim);font-size:15.5px}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
th{color:var(--dim);text-align:left;font-weight:600;border-bottom:1px solid #5a5a5a;padding:8px 10px;vertical-align:middle;text-transform:uppercase;font-size:12px;letter-spacing:.09em;font-family:"Oswald",sans-serif}
td{border-bottom:1px solid #5a5a5a;padding:9px;vertical-align:middle}
.card{margin:8px 0 38px}
.note{background:var(--surface);border-left:4px solid var(--accent);border-radius:4px;padding:16px 20px;margin:22px 0}
ul{margin:8px 0 8px 20px} li{margin:5px 0} li::marker{color:var(--accent)}
b{color:var(--txt)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.tag{display:inline-block;background:#111;border:1px solid var(--line);color:var(--dim);border-radius:3px;padding:1px 8px;font-size:10.5px;margin-left:6px;vertical-align:middle;letter-spacing:.05em;text-transform:uppercase;font-family:"Oswald",sans-serif}
.tag.ok{color:var(--success);border-color:var(--success)}
.tag.red{color:var(--danger);border-color:var(--danger)}
.tag.draft{color:var(--warning);border-color:var(--warning)}
.mark{color:var(--warning);font-size:11px;letter-spacing:.02em}
.sample{opacity:.92}
.grade{display:inline-block;width:30px;height:30px;border-radius:4px;text-align:center;line-height:30px;font-family:"Oswald",sans-serif;font-weight:700;font-size:16px}
.gA{background:#123B26;color:#4ADE80}.gB{background:#1E3A2F;color:#9BE8B0}
.gC{background:#3B3012;color:#FCD100}.gD{background:#3B1D12;color:#F87171}
.gF{background:#3B1212;color:#F87171}

/* ===== chrome — per the ratified split mock-up (report-vs-mc-visual-split.html, MC frame) ===== */
.statusbar{display:flex;align-items:center;gap:14px;background:#0a0a0a;border-bottom:1px solid var(--line);padding:8px 16px;font-size:13px;color:var(--dim);position:sticky;top:0;z-index:20}
.statusbar .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success)}
.statusbar b{color:var(--txt);font-weight:600}
.statusbar .spacer{flex:1}
.statusbar .chip{border:1px solid var(--line);border-radius:3px;padding:1px 8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-family:"Oswald",sans-serif;color:var(--accent)}
.statusbar .chip-demo{border-color:#FCD100;color:#FCD100}
.statusbar button{background:none;border:1px solid var(--line);color:var(--dim);border-radius:3px;padding:2px 10px;font:11px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.statusbar button:hover{color:var(--accent);border-color:var(--accent)}
#sbtoggle{font-size:14px;padding:1px 9px;line-height:1.4}
.layout{display:flex;min-height:calc(100vh - 35px)}
.sidebar{width:250px;flex-shrink:0;background:#0d0d0d;border-right:1px solid var(--line);padding:20px 0 40px;position:sticky;top:35px;height:calc(100vh - 35px);overflow-y:auto}
.sidebar .brand{padding:0 18px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.sidebar .brand .mcmark{width:38px;height:38px;flex-shrink:0}
.sidebar .brand .kicker{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;font-size:10.5px;font-weight:700;font-family:"Oswald",sans-serif}
.sidebar .brand h1{font-size:15px;margin:2px 0 0;line-height:1.1}
.sidebar .brand .bsub{font-size:12px;color:var(--dim)}
.glabel{display:flex;align-items:center;gap:9px;width:calc(100% - 12px);margin:14px 6px 2px;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:9px 12px;color:#b9b9b9;font:14px/1.35 "Inter",sans-serif;font-weight:500;text-align:left}
.glabel:hover{color:var(--accent);border-color:rgba(252,209,0,.5)}
.glabel svg{stroke:var(--accent)}
.glabel .chev{margin-left:auto;color:var(--accent);font-size:13px}
.glabel:hover{color:var(--accent)}
.glabel .tri{transition:transform .15s;font-size:9px}
.glabel.collapsed .tri{transform:rotate(-90deg)}
.navitem{display:flex;align-items:center;gap:9px;width:calc(100% - 12px);margin:1px 6px;text-align:left;background:none;border:none;border-radius:6px;color:#b9b9b9;font:14px/1.35 "Inter",sans-serif;font-weight:500;padding:8px 12px;cursor:pointer}
.navitem svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navitem:hover{background:#161616;color:#fff}
.navitem.active{background:#1c1c1c;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.navitem .mini{display:none}
.navitem .soon{margin-left:auto;font-size:9.5px;color:#666;border:1px solid #333;border-radius:3px;padding:0 5px;text-transform:uppercase;letter-spacing:.06em;font-family:"Oswald",sans-serif}
main{flex:1;padding:36px 88px 90px;min-width:0}
.panel{display:none}
.panel.active{display:block}
.panelhead{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:42px}

/* KPI Board cards (ratified KPI-v2 format) */
.kchipbar{display:flex;align-items:center;gap:8px;margin:0 0 18px}
.kchipin{background:#111;border:1px solid var(--line);color:var(--accent);border-radius:4px;padding:4px 10px;font:700 12px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;width:110px}
.kchipin:focus{outline:none;border-color:var(--accent)}
.kcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 42px;background:#0c0c0c}
.khead{display:flex;align-items:center;gap:10px;padding:11px 16px}
.khead .n{color:var(--accent);font-family:"Oswald",sans-serif;font-weight:700;font-size:15px}
.khead b{font-family:"Oswald",sans-serif;font-weight:600;font-size:14.5px;text-transform:uppercase;letter-spacing:.04em}
.kadd{margin-left:auto;background:#161616;border:1px solid var(--line);color:#cfcfcf;border-radius:5px;padding:3px 10px;font:600 11px "Inter",sans-serif;cursor:pointer;white-space:nowrap}
.kadd:hover{color:var(--accent);border-color:var(--accent)}
.kgrid-h,.krow{display:grid;grid-template-columns:minmax(180px,1fr) minmax(110px,.6fr) minmax(110px,.6fr) 44px;align-items:center;border-top:1px solid #202020}
.kgrid-h{background:#101010;color:#6a6a6a;font:600 10.5px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em}
.kgrid-h div{padding:7px 16px}
.kcell{padding:9px 16px;font-size:13.5px;color:#d6d6d6;min-width:0;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
.kcell.kname{color:#fff;font-weight:500}
.kcell[data-id]{cursor:pointer;border-radius:4px}
.kcell[data-id]:hover{background:#161616}
.kempty{color:#4a4a4a}
.kedit{width:100%;background:#111;border:1px solid var(--accent);color:#fff;border-radius:4px;padding:4px 8px;font:13.5px "Inter",sans-serif}
.kedit:focus{outline:none}
.kact{display:flex;justify-content:center}
.karch,.krestore{background:none;border:none;color:#4a4a4a;cursor:pointer;font-size:12px;padding:4px 6px}
.karch:hover{color:var(--danger)}
.krestore:hover{color:var(--success)}
.karchived .kcell{color:#5c5c5c}
.karchtoggle{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid #202020;color:#5c5c5c;padding:8px 16px;font:600 10.5px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.karchtoggle:hover{color:#b9b9b9}

/* live controls */
.togglewrap{display:flex;gap:6px}
.toggle{background:#111;border:1px solid var(--line);color:var(--dim);border-radius:4px;width:34px;height:30px;font-size:15px;cursor:pointer}
.toggle.on{color:var(--success);border-color:var(--success)}
.toggle.off{color:var(--danger);border-color:var(--danger)}
.toggle[disabled]{opacity:.45;cursor:default}
.kpiin{background:#111;border:1px solid var(--line);color:var(--txt);border-radius:4px;padding:5px 8px;font:13.5px "Inter",sans-serif;width:110px}
.kpiin:focus{outline:none;border-color:var(--accent)}
.savedflash{color:var(--success);font-size:11px;margin-left:8px;opacity:0;transition:opacity .3s}
.savedflash.show{opacity:1}

/* ===== login ===== */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.loginbox{width:360px;background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:34px 32px 30px}
.loginbox .mcmark{width:56px;height:56px;margin:0 auto 14px;display:block}
.loginbox .kicker{color:var(--accent);letter-spacing:.22em;text-transform:uppercase;font-size:10.5px;font-weight:700;font-family:"Oswald",sans-serif;text-align:center}
.loginbox .aoslogo{display:block;width:190px;margin:2px auto 0}
.loginbox h1{font-size:22px;text-align:center;margin:4px 0 20px}
.loginbox label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-family:"Oswald",sans-serif;margin:14px 0 5px}
.loginbox input{width:100%;background:#111;border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:10px 12px;font:14.5px "Inter",sans-serif}
.loginbox input:focus{outline:none;border-color:var(--accent)}
.loginbox button{width:100%;margin-top:22px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:5px;padding:11px;font:700 14px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.loginbox button:hover{filter:brightness(1.08)}
.loginerr{color:var(--danger);font-size:13px;margin-top:12px;text-align:center;min-height:18px}
.loginfoot{color:#555;font-size:11px;text-align:center;margin-top:18px}
@media(max-width:760px){.layout{flex-direction:column}.sidebar{position:static;width:100%;height:auto}main{padding:22px 18px 60px}}

/* ===== presentation layer (grill 2026-07-12): header block · notes · explainer modal ===== */
.panelhead .why{color:#b9b9b9;font-size:14.5px;margin-top:6px}
.whatis{margin-top:12px;background:none;border:1px solid var(--line);color:var(--accent);border-radius:4px;padding:4px 12px;font:600 11.5px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.whatis:hover{border-color:var(--accent)}
.notesblock{margin:-24px 0 40px}
.notestoggle{background:none;border:1px dashed var(--line);color:var(--dim);border-radius:5px;padding:5px 14px;font:600 11.5px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.notestoggle:hover{color:var(--accent);border-color:var(--accent)}
.ncount{color:var(--accent)}
.notesbody{border:1px dashed var(--line);border-radius:6px;padding:14px 18px;margin-top:8px;background:rgba(255,255,255,.015)}
.noterow{border-bottom:1px solid #202020;padding:8px 0}
.noterow:last-child{border-bottom:none}
.ntext{font-size:14.5px;white-space:pre-wrap}
.nmeta{color:#6a6a6a;font-size:11.5px;margin-top:3px;display:flex;align-items:center;gap:8px}
.npromote{background:none;border:none;color:var(--accent);font:600 11px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0}
.npromote:hover{text-decoration:underline}
.npromote[disabled]{opacity:.5;cursor:default}
.noteform{display:flex;gap:10px;margin-top:12px;align-items:flex-start}
.noteform textarea{flex:1;background:#111;border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:8px 10px;font:14px/1.5 "Inter",sans-serif;resize:vertical}
.noteform textarea:focus{outline:none;border-color:var(--accent)}
.noteform button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:5px;padding:8px 14px;font:700 12px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.modalbox{position:relative;max-width:720px;width:100%;max-height:84vh;overflow-y:auto;background:#101010;border:1px solid var(--line);border-radius:10px;padding:30px 34px}
.modalclose{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--dim);font-size:26px;cursor:pointer;line-height:1}
.modalclose:hover{color:var(--accent)}
.modalcontent h2{margin-top:0}

/* ===== curated sample tour (decision 8) ===== */
.tourstart{background:var(--accent);color:var(--accent-ink);border:none;border-radius:6px;padding:12px 26px;font:700 15px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.tourstart:hover{filter:brightness(1.08)}
.tourbar{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:16px;background:#0a0a0a;border-top:2px solid var(--accent);padding:12px 24px}
.tourcap{flex:1;font-size:14.5px;color:#e8e8e8}
.tourdots{color:var(--dim);font:700 12px "Oswald",sans-serif;letter-spacing:.1em}
.tourbar button{background:none;border:1px solid var(--line);color:#cfcfcf;border-radius:4px;padding:6px 14px;font:600 12px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.tourbar .tournext{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.tourbar button:hover{border-color:var(--accent)}
.tourbar button[disabled]{opacity:.4;cursor:default}

/* hidden attr must beat the display:flex above */
.modal[hidden],.tourbar[hidden]{display:none}

/* ===== one-page daily thread (grill 2026-07-12 round 2) ===== */
.homewheel{display:block;max-width:920px;margin:0 auto}
/* Brand orbit line: the outer ring draws itself on once (game-feel, matches the
   round4 canted-orbit reference). pathLength normalizes the dash to the ellipse
   perimeter so the sweep is even. Reduced-motion shows it fully drawn, no sweep. */
@media (prefers-reduced-motion: no-preference){
  .worbit-ring{stroke-dasharray:100;stroke-dashoffset:100;animation:worbit-draw 1.15s cubic-bezier(.22,1,.36,1) .1s forwards}
  @keyframes worbit-draw{to{stroke-dashoffset:0}}
}
/* Orbit node hover — subtle lift so the wheel feels alive (game-feel sprint).
   Transform on the <g>; text stays crisp. Reduced-motion drops the transition. */
.homewheel g{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .homewheel g{transition:transform .14s ease}
  .homewheel g:hover{transform:translateY(-3px)}
}
.wheelcap{text-align:center;margin-top:2px}

/* ===== COMMAND CONSOLE frame (Mock 9, 2026-08-26) =========================
   The orbit sits inside a console: HUD corner brackets, a live telemetry rail
   on the left, a per-System status rail on the right. Every colour reads a
   TOKEN (--accent/--dim/--line/--success/--warning/--danger), never a literal,
   so the PIF brand theme (body.brand, index.js themeCss) reskins it for free.
   Below 1200px the rails have no gutter to live in, so they go and the orbit
   takes the full width — same call the mockup makes. */
/* The console reserves side GUTTERS for the rails and lets the orbit keep the
   full centre width. The rails are absolutely positioned INTO those gutters
   rather than being grid columns, because taking 168px+168px out of the orbit's
   flow shrank the SVG from 920px to 584px — at that scale the node labels
   rendered at ~5.5 CSS px, which is unreadable. Charter rule: readability wins
   ties; flatten the treatment before shrinking the content. */
/* The console bleeds out into main's 88px side padding (negative margin, clawed
   back as padding) so the rails get gutters WITHOUT taxing the orbit's width.
   Without this the 1014px content column had to fund 2×168px of rail out of the
   orbit, dropping the SVG to 632px and the node labels to ~5.5 CSS px. */
.hsec.console{position:relative;margin:0 -76px 54px;padding:34px 96px 12px;
  border:1px solid rgba(252,209,0,.10);border-radius:12px;  /* fallback for pre-color-mix browsers; token version below wins where supported */
  border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:12px;
  background:radial-gradient(1200px 620px at 50% 44%,rgba(252,209,0,.03) 0%,transparent 62%),#070708;  /* fallback for pre-color-mix browsers; token version below wins where supported */
  background:radial-gradient(1200px 620px at 50% 44%,color-mix(in srgb,var(--accent) 3%,transparent) 0%,transparent 62%),#070708}
.cstage{position:relative}
/* The orbit keeps .homewheel's own 920px max-width and centres in the console;
   the rails are absolutely positioned over the leftover space at each edge, so
   they cost the SVG nothing. (Grid columns here shrank it to 584px and drove the
   node labels down to ~5.5 CSS px — unreadable.) */
.corbit{min-width:0}
.crail{position:absolute;top:50%;transform:translateY(-50%);width:160px}
.crail-l{left:-88px}
.crail-r{right:-88px}
/* corner HUD brackets — 2px accent Ls at the console's four corners */
/* Derived from --accent (never a literal) so the client-brand theme reskins the
   frame with everything else — under body.brand the PIF palette repaints --accent
   and a hardcoded yellow bracket would be the one piece left behind. */
.cbracket{position:absolute;width:34px;height:34px;
  border:2px solid rgba(252,209,0,.50);  /* fallback for pre-color-mix browsers; token version below wins where supported */
  border:2px solid color-mix(in srgb,var(--accent) 50%,transparent);
  pointer-events:none;opacity:.8}
.cbracket.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.cbracket.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.cbracket.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.cbracket.br{bottom:12px;right:12px;border-left:none;border-top:none}
/* rails */
.crail{min-width:0}
.crail-head{display:flex;align-items:center;gap:7px;font-family:"Oswald",sans-serif;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:#6a6a6a;padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid rgba(252,209,0,.12);  /* fallback for pre-color-mix browsers; token version below wins where supported */
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.cled{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--success);color:var(--success);
  box-shadow:0 0 6px currentColor}
.cled.amber{background:var(--warning);color:var(--warning)}
.creadout{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.03)}
.creadout .ck{font-family:"Oswald",sans-serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a}
.creadout .cv{font-family:"Oswald",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:#9a9a9a;
  text-align:right;overflow-wrap:anywhere}
.creadout .cv.hi{color:var(--accent)}
.creadout .cv.ok{color:var(--success)}
.crail-note{margin-top:10px;font-size:8.5px;line-height:1.55;letter-spacing:.04em;color:#5c5c5c}
.csys{display:flex;align-items:center;gap:8px;padding:5.5px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.csys .cidx{font-family:"Oswald",sans-serif;font-size:9.5px;color:#6a6a6a;width:12px;text-align:right;flex:0 0 auto}
.csys .cnm{font-family:"Oswald",sans-serif;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#9a9a9a;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#3a3a3a;color:#3a3a3a;box-shadow:0 0 6px currentColor}
.cdot.a{background:var(--success);color:var(--success)}
.cdot.c{background:var(--warning);color:var(--warning)}
.cdot.d{background:var(--danger);color:var(--danger)}
/* the orbit core + rings pick up the console's yellow glow */
.worbit-core{filter:drop-shadow(0 0 26px rgba(252,209,0,.18))}  /* fallback for pre-color-mix browsers; token version below wins where supported */
.worbit-core{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 18%,transparent))}
.worbit-ring{filter:drop-shadow(0 0 10px rgba(252,209,0,.18))}  /* fallback for pre-color-mix browsers; token version below wins where supported */
.worbit-ring{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 18%,transparent))}
.worbit-pip{filter:drop-shadow(0 0 7px rgba(252,209,0,.85))}  /* fallback for pre-color-mix browsers; token version below wins where supported */
.worbit-pip{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 85%,transparent))}
/* Below 1200px there is no gutter left for the rails to sit in, so they go and
   the orbit takes the whole console — the same call the Mock 9 reference makes. */
/* Mid widths (rails visible, gutters tight): cap the orbit so its left/right
   cards stay out of the rails. Measured: at 1280-1440 the full 920px orbit ran
   nodes 7/8 up to 73px INTO the left rail (overlap probe, 5 widths); at 780px
   the ~13px node labels scale to ~11px — above the legibility floor, and the
   charter says flatten before colliding. Above 1600px there is real gutter and
   the cap lifts. */
@media (max-width:1600px){
  .hsec.console .homewheel{max-width:780px}
}
/* Below 1400px even the 780px cap collides with the left rail (measured 60px of
   card-over-rail at 1280, 17px at 1366) — there is no honest layout with both,
   so the rails go and the orbit takes the room. 1200 was the first guess; the
   overlap probe moved it. */
@media (max-width:1400px){
  .crail{display:none}
  .hsec.console{margin:0 0 54px;padding:30px 14px 8px}
  .hsec.console .homewheel{max-width:920px}
}
@media (prefers-reduced-motion: no-preference){
  /* entry: brackets draw in, rails fade up. Capped at 300ms per the charter,
     staggered so the frame assembles corner-first then rails. */
  .cbracket{opacity:0;animation:mc-bracketin 240ms var(--ease-out) both}
  .cbracket.tl{animation-delay:40ms}.cbracket.tr{animation-delay:80ms}
  .cbracket.bl{animation-delay:120ms}.cbracket.br{animation-delay:160ms}
  @keyframes mc-bracketin{from{opacity:0;transform:scale(.86)}to{opacity:.8;transform:none}}
  .crail{animation:mc-railin 260ms var(--ease-out) both;animation-delay:200ms}
  @keyframes mc-railin{from{opacity:0}to{opacity:1}}
  /* ambient: the core breathes and the status LED blinks. Both are brand
     ambience on non-interactive chrome (charter allows ambient loops); they die
     entirely under reduced motion via the block below. */
  .worbit-core{animation:mc-corebreath 4.5s var(--ease-in-out) 1.2s infinite}
  @keyframes mc-corebreath{
    0%,100%{filter:drop-shadow(0 0 26px rgba(252,209,0,.16))}  /* fallback for pre-color-mix browsers; token version below wins where supported */
    0%,100%{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 16%,transparent))}
    50%{filter:drop-shadow(0 0 40px rgba(252,209,0,.30))}  /* fallback for pre-color-mix browsers; token version below wins where supported */
    50%{filter:drop-shadow(0 0 40px color-mix(in srgb,var(--accent) 30%,transparent))}}
  .cled{animation:mc-blink 2.4s var(--ease-in-out) infinite}
  .cled.amber{animation-delay:.6s}
  @keyframes mc-blink{0%,42%,100%{opacity:1}50%,92%{opacity:.25}}
}
@media (prefers-reduced-motion: reduce){
  /* a pip parked mid-ring reads as a bug rather than a design — hide it */
  .worbit-pip{display:none}
  .cbracket,.crail{opacity:.8;animation:none}
  .crail{opacity:1}
  .worbit-core,.cled{animation:none}
}
.hsec{margin:0 0 54px}
.hsec h2{margin:0 0 14px}
.hmore{margin:10px 0 0}
.hmore summary{cursor:pointer;color:var(--dim);font:600 12.5px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:6px 0}
.hmore summary:hover{color:var(--accent)}
.homecapture{margin:0 0 14px}
.homelist{border:1px dashed var(--line);border-radius:6px;padding:10px 18px;background:rgba(255,255,255,.015)}
.wgrade.gA rect{fill:#123B26}.wgrade.gA text{fill:#4ADE80}
.wgrade.gB rect{fill:#1E3A2F}.wgrade.gB text{fill:#9BE8B0}
.wgrade.gC rect{fill:#3B3012}.wgrade.gC text{fill:#FCD100}
.wgrade.gD rect{fill:#3B1D12}.wgrade.gD text{fill:#F87171}
.wgrade.gF rect{fill:#3B1212}.wgrade.gF text{fill:#F87171}
/* Ungraded System: the box holds its place on the node, dim and empty, until the
   baseline stamps. No letter, no grade colour: an empty slot reads as "not scored
   yet", where a coloured box would read as a grade the client has not been given. */
.wgrade.gNone rect{fill:none;stroke:#3a3a3a;stroke-width:1;stroke-dasharray:3 2.5;opacity:.75}

/* ===== mockup design language port (grill 2026-07-12 decision 20) =====
   Phil prefers the reports-page look: road-stripe chrome, yellow table headers,
   accent-edged cards. Applied as accents — tool scanability preserved. */
.stripe{height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 48px,transparent 48px 84px)}
th{color:var(--accent);border-bottom:2px solid var(--accent);font-weight:600}
.kcard{border-left:4px solid var(--accent);border-radius:4px 10px 10px 4px}
.panelhead .kickline{color:var(--accent);letter-spacing:.24em;text-transform:uppercase;font-size:11px;font-weight:700;font-family:"Oswald",sans-serif;margin-bottom:6px}
.note,.notesbody{border-left:4px solid var(--accent)}
.notesbody{border-style:solid;border-width:1px 1px 1px 4px;border-color:var(--line) var(--line) var(--line) var(--accent)}
.xvid{width:100%;border-radius:8px;border:1px solid var(--line);margin-bottom:18px;display:block;background:#000}
/* featured explainer video at the top of a deliverable panel (Phil 2026-07-13) */
.featvid{width:100%;border-radius:10px;border:1px solid var(--line);margin:0 0 36px;display:block;background:#000}
/* scratch pad (random thoughts — the Notebook stays Mission-Control-focused) */
.scratchcapture{margin:0 0 16px}
.scratchlist{border:1px dashed var(--line);border-radius:6px;padding:10px 18px;background:rgba(255,255,255,.015)}

/* ---- rocket loading overlay (Phil 2026-07-13 — interim delight while panels load) ----
   Shown by app.js showLoader()/hideLoader() around async panel loads. >150ms to appear,
   300ms minimum once shown. Uses the ratified mc-mark rocket; themed via var(--accent). */
.mcloader{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .15s ease}
.mcloader.on{opacity:1;pointer-events:auto}
.mcloader .mcldr{display:flex;flex-direction:column;align-items:center;gap:2px}
/* the mark + its streak overlay rise together as one unit */
.mcloader .mcldr-mark{position:relative;width:64px;height:64px;animation:mcldr-rise 1.4s ease-in-out infinite}
.mcloader .mcldr-rocket{width:64px;height:64px;display:block}
.mcloader .mcldr-trail{width:2px;height:46px;border-radius:2px;
  background:linear-gradient(180deg,rgba(252,209,0,.45) 0%,rgba(252,209,0,.12) 60%,transparent 100%);
  animation:mcldr-fade 1.4s ease-in-out infinite}
.mcloader .mcldr-txt{margin-top:14px;font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
@keyframes mcldr-rise{0%,100%{transform:translateY(5px)}50%{transform:translateY(-7px)}}
@keyframes mcldr-fade{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){
  .mcloader{transition:none}
  .mcloader .mcldr-mark,.mcloader .mcldr-trail{animation:none}
  .mcloader .mcldr-trail{display:none}
}

/* ---- M2 "Fast Burst" working-state streaks (mark-motion-5.html variant M2) ----
   Three streaks stream BACKWARD along the mark's 135° axis: 0.62s loop, linear,
   staggered 0 / -0.2s / -0.4s (the pacing Phil picked). The overlay SVG sits
   exactly atop the <img> mark in the same 48×48 user space — mc-mark.svg itself
   is ratified and untouched. The CENTRE streak (.s1) starts where the exhaust
   would be, so its keyframe is CLAMPED: it begins at rest and only ever travels
   backward, never sliding forward into the rocket.
   Streaks are a WORKING state: visible only while body.mcworking is set, which
   the loader lifecycle owns (show → on, hide → off). The loader's own 150ms
   delay means a fast fetch never flashes them. */
.mcstreaks{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
.mcstrk{opacity:0}
.mcmark-wrap{position:relative;display:inline-block;flex-shrink:0;line-height:0}
.mcmark-wrap .mcmark{display:block}
@media (prefers-reduced-motion: no-preference){
  body.mcworking .mcmark-wrap .mcstrk,.mcloader.on .mcstrk{
    animation-name:mc-stream;animation-duration:.62s;animation-timing-function:linear;
    animation-iteration-count:infinite;will-change:transform,opacity}
  body.mcworking .mcmark-wrap .mcstrk.s1,.mcloader.on .mcstrk.s1{animation-name:mc-stream-center}
  .mcstrk.s0{animation-delay:0s}
  .mcstrk.s1{animation-delay:-.2s}
  .mcstrk.s2{animation-delay:-.4s}
  @keyframes mc-stream{
    0%{transform:translate(3.9px,-3.9px);opacity:0}
    18%{opacity:1}
    82%{opacity:1}
    100%{transform:translate(-3.9px,3.9px);opacity:0}}
  @keyframes mc-stream-center{
    0%{transform:translate(0,0);opacity:0}
    22%{opacity:1}
    80%{opacity:1}
    100%{transform:translate(-6.5px,6.5px);opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  /* no streaming at all — the mark's own static streaks already read as the brand */
  .mcstrk{animation:none!important;transform:none!important;opacity:0}
}

/* ============================================================================
   GAME-FEEL SPRINT (2026-07-14, consolidation grill rulings 5/11/12)
   Bar: AWARD-TIER interaction design, not default CSS. HARD guardrails: fast
   (UI motion capped at 300ms; the ONLY sanctioned exceptions are the count-up
   ~900ms and the celebration glow/ring ~600ms), no jank, no layout thrash,
   clarity-first, no sound.
   EVERY animated rule lives inside @media (prefers-reduced-motion: no-preference).

   MOTION SYSTEM — one named vocabulary, no ad-hoc curves. Three canonical
   easing tokens (the award-tier set); the semantic aliases below map onto them
   so call sites read intent while sharing one curve vocabulary.
     --ease-out     decelerate-to-rest — reveals, settles, count-up feel
     --ease-in-out  symmetric — presses, in/out state changes
     --spring       pop with overshoot — buttons, chips, checkmarks
   Semantic aliases: --mc-spring/--mc-spring-lo → spring, --mc-smooth → ease-out,
   --mc-snap → ease-in-out. Durations capped so the whole app feels instant.
   ============================================================================ */
:root{
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  /* semantic aliases (map onto the three canonical curves above) */
  --mc-spring:var(--spring);
  --mc-spring-lo:var(--spring);
  --mc-smooth:var(--ease-out);
  --mc-snap:var(--ease-in-out);
  --mc-t-press:90ms; --mc-t-hover:150ms; --mc-t-pop:200ms; --mc-t-reveal:300ms;
}

/* --- Phase 2: micro-interactions (award-tier) ----------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* Interactive controls: spring-eased hover/press. Transform + shadow only —
     never a property that reflows. */
  .statusbar button,.navback,.whatis,.notestoggle,.noteform button,
  .tourstart,.tourbar button,.pstatus,.kadd,.priadd button,.priresolve,
  .primove,.runstart,.runform button,.loginbox button,.karchtoggle,
  .npromote,.tickpause{
    transition:transform var(--mc-t-hover) var(--ease-out),
      box-shadow var(--mc-t-hover) var(--ease-out),
      background-color var(--mc-t-hover) var(--ease-out),
      border-color var(--mc-t-hover) var(--ease-out),
      color var(--mc-t-hover) var(--ease-out);
  }
  /* hover: -1px lift + shadow lift (150ms ease-out, set on the base rule) */
  .statusbar button:hover,.navback:hover,.whatis:hover,.notestoggle:hover,
  .tourbar button:not([disabled]):hover,.kadd:hover,.priadd button:hover,
  .karchtoggle:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(252,209,0,.14)}
  .noteform button:hover,.tourstart:hover,.runform button:hover,
  .loginbox button:hover,.priresolve:hover,.runstart:hover{
    transform:translateY(-1px);box-shadow:0 4px 16px rgba(252,209,0,.22)}
  /* press: scale(.96) + shadow shrink, snapped down fast so the click is physical */
  .statusbar button:active,.navback:active,.whatis:active,.notestoggle:active,
  .noteform button:active,.tourstart:active,.tourbar button:active,
  .pstatus:not([disabled]):active,.kadd:active,.priadd button:active,
  .priresolve:active,.primove:active,.runstart:active,.runform button:active,
  .loginbox button:active,.karchtoggle:active,.npromote:active{
    transform:scale(.96);box-shadow:0 1px 4px rgba(252,209,0,.10);
    transition-duration:var(--mc-t-press);transition-timing-function:var(--ease-in-out)}

  /* Status chips get a lift on hover (-1px, shared button curve). */
  .pstatus:not([disabled]):hover{transform:translateY(-1px);
    box-shadow:0 3px 12px rgba(252,209,0,.18)}

  /* ── HERO: Action Items check-off — a CHOREOGRAPHED 3-beat sequence, not one
     animation. app.js drives the beats by toggling classes with the timings
     below (press 80ms → check pop w/ overshoot 180ms → row settle 240ms).
     Total ~500ms but each beat is short; the eye reads three distinct moments. */

  /* beat 1 — press-down: the chip depresses (feedback the tap registered) */
  .pstatus.mc-press{transform:translateY(1px) scale(.94);
    transition:transform 80ms var(--mc-snap)}

  /* beat 2 — check pop: the chip springs up past 1.0 then settles, and a
     checkmark glyph pops in over it (the satisfying "it's done" beat) */
  .pstatus.mc-pop{animation:mc-chippop 180ms var(--mc-spring) both}
  @keyframes mc-chippop{
    0%{transform:translateY(1px) scale(.94)}
    55%{transform:translateY(0) scale(1.18)}
    100%{transform:none}}
  /* SVG stroke-draw checkmark (tech 2): the check DRAWS itself on via dashoffset
     — a stroke that writes, not a glyph that scales. Only the chip pop overshoots
     (one bouncy element per interaction); the check uses plain ease-out. */
  .mc-check{position:absolute;pointer-events:none;z-index:5;width:20px;height:20px;
    animation:mc-checkfade 280ms var(--ease-out) both}
  .mc-check path{stroke:var(--success);stroke-width:3;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:24;stroke-dashoffset:24;
    animation:mc-checkdraw 200ms var(--ease-out) both}
  @keyframes mc-checkdraw{to{stroke-dashoffset:0}}
  @keyframes mc-checkfade{0%,72%{opacity:1}100%{opacity:0}}

  /* celebration ring (tech 9): an expanding box-shadow ring blooms out from the
     chip and fades, ONCE, when an action lands on done. Pairs with the check
     draw. box-shadow is a compositor-cheap paint here (single element). */
  .pstatus.mc-ring{animation:mc-ring 600ms var(--ease-out) both}
  @keyframes mc-ring{
    0%{box-shadow:0 0 0 0 rgba(30,158,90,.55)}
    100%{box-shadow:0 0 0 24px rgba(30,158,90,0)}}

  /* beat 2 (row) — a light sweep of accent passes across the row, left→right,
     using a moving gradient rather than a flat flash */
  tr.mc-advance{animation:mc-rowsweep 240ms var(--mc-smooth) both}
  @keyframes mc-rowsweep{
    0%{background:linear-gradient(90deg,rgba(252,209,0,.28),rgba(252,209,0,0) 40%)}
    100%{background:linear-gradient(90deg,rgba(252,209,0,0),rgba(252,209,0,0))}}

  /* beat 3 — settle: a row that landed on done eases the success tint out
     (settles into place rather than snapping clear) */
  tr.mc-settled{animation:mc-settle 240ms var(--mc-smooth) both}
  @keyframes mc-settle{
    0%{background:rgba(30,158,90,.22)}
    100%{background:transparent}}

  /* Form success — a soft success ring blooms and fades (spring bloom, smooth
     fade) rather than a linear pulse. */
  form.mc-success{animation:mc-formbloom 300ms var(--mc-smooth) both}
  @keyframes mc-formbloom{
    0%{box-shadow:0 0 0 0 rgba(30,158,90,0)}
    35%{box-shadow:0 0 0 3px rgba(30,158,90,.4)}
    100%{box-shadow:0 0 0 8px rgba(30,158,90,0)}}

  /* --- Phase 3: HUD reveals + celebrations (award-tier) ------------------ */
  /* Panel switch: each top-level child WIPES up under a clip-path reveal (a HUD
     panel materializing) with a slight rise, staggered (max ~5 steps). Not a
     plain fade — the content is revealed edge-first. */
  .panel.mc-reveal > .panelhead,
  .panel.mc-reveal > .hsec,
  .panel.mc-reveal > .kcard{
    animation:mc-wipeup var(--mc-t-reveal) var(--mc-smooth) both;
    animation-delay:calc(var(--mc-i,0) * 40ms);
  }
  @keyframes mc-wipeup{
    0%{opacity:0;transform:translateY(10px);
      clip-path:inset(0 0 100% 0)}
    60%{opacity:1}
    100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

  /* 1px accent edge-sweep runs along each revealed section header underline —
     a bright line races left→right as the section lands. */
  .panel.mc-reveal .hsec > h2::after{
    background:linear-gradient(90deg,var(--accent) 0%,rgba(252,209,0,.10) 100%);
    background-size:220% 100%;
    animation:mc-edgesweep 260ms var(--mc-smooth) both;
    animation-delay:calc(var(--mc-i,0) * 40ms + 100ms)}
  @keyframes mc-edgesweep{
    0%{background-position:120% 0;filter:brightness(1.7)}
    100%{background-position:0 0;filter:brightness(1)}}

  /* Grade-improvement celebration — one confident beat: a spring scale-up of the
     grade chip + a green glow bloom that eases out. Not fireworks. */
  .wgrade.mc-grade-up{animation:mc-gradeup 900ms var(--mc-smooth) both;
    transform-box:fill-box;transform-origin:center}
  @keyframes mc-gradeup{
    0%{filter:drop-shadow(0 0 0 rgba(74,222,128,0));transform:scale(1)}
    22%{filter:drop-shadow(0 0 8px rgba(74,222,128,.95));transform:scale(1.16)}
    45%{transform:scale(1)}
    100%{filter:drop-shadow(0 0 0 rgba(74,222,128,0));transform:scale(1)}}
}

/* Count-up cells never reflow: reserve space with tabular figures. */
.mc-count{font-variant-numeric:tabular-nums}
/* the check-off host cell needs positioning context for the .mc-check glyph */
td:has(> .pstatus),.pstatus{position:relative}

/* --- Phase 5: mission ticker ---------------------------------------------
   The road-stripe stays a stripe (6px, road-stripe gradient from .stripe). The
   ticker overlays small, dim-on-yellow, single-line text that truncates. Not
   prominent — a subtle rotating call-out, never a marquee. */
/* The ticker row keeps the road-stripe motif via a striped bottom border, but
   the text sits on a solid accent band so it stays legible (dim-black on plain
   yellow reads; dim-black over the black stripe segments does not). Height grows
   just enough for a single small line; #stripe-plain keeps the pure 6px stripe
   for instances with no ticker content. */
#ticker{height:auto;position:relative;display:flex;align-items:center;
  padding:3px 14px;overflow:hidden;background:var(--accent);
  border-bottom:3px solid #000;
  background-image:repeating-linear-gradient(90deg,transparent 0 44px,rgba(0,0,0,.14) 44px 52px)}
#ticker[hidden]{display:none}
/* masked edge fade — the call-out text feathers out at both ends rather than
   hard-clipping at the ellipsis edge (award-tier ticker treatment). */
.tickitem{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:700 10.5px/1.4 "Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#000;opacity:1;transition:opacity .5s var(--ease-out);
  /* the crossfading ticker text is the one moving element that earns a
     will-change hint (ref: will-change on the ticker track only). This ticker
     crossfades rather than translating a marquee, so the hint is on opacity. */
  will-change:opacity;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tickitem.fading{opacity:0}
.tickitem .tickby{color:rgba(0,0,0,.55);font-weight:700;margin-left:8px}
.tickpause{flex-shrink:0;margin-left:10px;background:rgba(0,0,0,.2);border:none;
  color:#000;border-radius:3px;padding:1px 6px;font-size:8px;line-height:1.6;
  cursor:pointer;letter-spacing:.5px}
.tickpause:hover{background:rgba(0,0,0,.32)}
@media (prefers-reduced-motion: reduce){
  .tickitem{transition:none}
}

/* GLOBAL reduced-motion kill-switch (belt-and-suspenders). Every game-feel rule
   already lives under (prefers-reduced-motion: no-preference), so this is a
   redundant hard stop for any animated class that slips out of that guard.
   Scoped to the app's animated classes rather than a bare `*` so it never
   fights layout or the loader's intentional display toggles. */
@media (prefers-reduced-motion: reduce){
  .statusbar button,.navback,.whatis,.notestoggle,.noteform button,.tourstart,
  .tourbar button,.pstatus,.kadd,.priadd button,.priresolve,.primove,.runstart,
  .runform button,.loginbox button,.karchtoggle,.npromote,.tickpause,
  .pstatus.mc-press,.pstatus.mc-pop,.mc-check,tr.mc-advance,tr.mc-settled,
  form.mc-success,.panel.mc-reveal > .panelhead,.panel.mc-reveal > .hsec,
  .panel.mc-reveal > .kcard,
  .panel.mc-reveal .hsec > h2::after,.wgrade.mc-grade-up,.homewheel .worbit-node{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Utility classes replacing inline style="" attributes, which the CSP (style-src
   'self' + nonce) blocks. Same declarations as the attributes they replaced. */
.svg-doorway{max-width:860px;display:block;margin:0 auto}
.mt0{margin-top:0}
.center-10{text-align:center;margin-top:10px}
.center-18{text-align:center;margin-top:18px}
.fill-current{fill:currentColor}
.span-all{grid-column:1/-1}