@layer base, page;
@font-face {
  font-family: "Inter Fallback";
  src: url("../../assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: url("../../assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
/* The app's own tokens (GlassTheme.swift), on every recreated window. */
.win {

  /* Grounds */
  --canvas: #05070a;
  --stage-top: #0b0e13;
  --charcoal: #16191f;
  --surface: #12151a;

  /* Ink. Text stays ink; hue belongs to marks and to light. */
  --ink: #f3f5f8;
  --ink-2: rgba(232, 237, 245, 0.66);
  --ink-3: rgba(232, 237, 245, 0.42);
  --hair: rgba(255, 255, 255, 0.075);
  --hair-2: rgba(255, 255, 255, 0.13);
  --raised: rgba(255, 255, 255, 0.06);
  --raised-2: rgba(255, 255, 255, 0.095);
  --well: rgba(0, 0, 0, 0.28);

  /* Resource hues as RGB triplets: rgb(var(--c-cpu)) or rgb(var(--c-cpu) / .2) */
  --c-accent: 60 195 227;
  --c-accent-soft: 127 220 242;
  --c-cpu: 0 166 195;
  --c-gpu: 145 113 233;
  --c-memory: 200 131 30;
  --c-disk: 32 170 110;
  --c-network: 55 126 227;
  --c-neural: 236 84 130;
  --c-cache: 108 120 135;
  --c-good: 48 209 88;
  --c-warning: 255 214 10;
  --c-serious: 255 159 10;
  --c-critical: 255 90 79;
  --c-brand-blue: 87 168 255;
  --c-brand-orange: 255 92 33;

  /* The light of the room: key and fill. Sections and pages override these. */
  --k: var(--c-accent);
  --f: var(--c-gpu);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Fallback", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Fallback", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono Fallback", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* A recreated window is a picture of the app. Nothing a page sets may leak into it.
   A mockup's style.css is scoped to stop at every window (see build.mjs), so its rules never match inside one.
   What is left is inheritance: every inherited text property starts again here, and the window carries its own tokens.
   The rules below give the elements inside the site's reset, which the screens were drawn with. */
.win {
  color-scheme: dark;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; text-wrap: wrap;
  white-space: normal; overflow-wrap: normal; word-break: normal; line-break: auto; hyphens: manual; tab-size: 8;
  font-style: normal; font-variant: normal; font-feature-settings: normal; font-variation-settings: normal; font-kerning: auto;
  font-stretch: normal; font-optical-sizing: auto; font-size-adjust: none; font-synthesis: weight style;
  direction: ltr; list-style: none; text-rendering: auto; text-align-last: auto; text-underline-offset: auto;
  -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0;
  /* Custom properties the app's rules read with a fallback: a page's own --x or --tint must not arrive here. */
  --tint: initial; --p: initial; --rk: initial; --sx: initial; --hz: initial; --sky: initial; --hue: initial; --cols: initial;
  --x: initial; --y: initial; --w: initial; --rx: initial; --lv: initial; --ma-turn: initial; --ma-cols: initial;
}
.win :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
.win :where(ul, ol) { padding: 0; list-style: none; }
.win :where(img, svg) { display: block; max-width: 100%; }
.win :where(a) { color: inherit; text-decoration: none; }
.win :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }

/* mock.css */
@property --u{syntax: "<length>"; inherits: true; initial-value: 1px;}
.win{--dw: 1440; --dh: 900;
  --u: calc(100cqw / var(--dw));
  position: relative; width: 100%; aspect-ratio: var(--dw) / var(--dh);
  display: grid; grid-template-columns: calc(258 * var(--u)) minmax(0, 1fr);
  border-radius: calc(13 * var(--u)); overflow: hidden; isolation: isolate;
  background: var(--canvas); color: var(--ink);
  font: 400 calc(13 * var(--u))/1.3 var(--font); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; cursor: default;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.6) inset;}
.win *,.win *::before,.win *::after{box-sizing: border-box;}
.win svg{display: block; overflow: visible;}
.win .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; stroke-width: 1.5;}
.win .num{font-variant-numeric: tabular-nums;}
.win .mono{font-family: var(--font-mono); font-variant-numeric: tabular-nums;}
.win-ground{position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 38%, transparent 56%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(circle calc(880 * var(--u)) at 26% 122%, rgb(var(--k) / 0.07), transparent),
    radial-gradient(circle calc(640 * var(--u)) at 106% 16%, rgb(var(--f) / 0.11), transparent),
    radial-gradient(circle calc(980 * var(--u)) at 60% -14%, rgb(var(--k) / 0.18), transparent),
    var(--canvas);}
.win .sb{position: relative; display: flex; flex-direction: column; min-height: 0;
  background: radial-gradient(ellipse 100% calc(240 * var(--u)) at 20% 0, rgb(var(--k) / 0.16), transparent), var(--charcoal);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.07) inset;}
.win .sb-lights{height: calc(38 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding-left: calc(14 * var(--u)); flex: none;}
.win .sb-lights i{width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.25) inset;}
.win .sb-lights i:nth-child(2){background: #febc2e;}
.win .sb-lights i:nth-child(3){background: #28c840;}
.win .sb-lights .sb-rail{margin-left: auto; margin-right: calc(12 * var(--u)); color: rgba(255, 255, 255, 0.55);}
.win .sb-lights .sb-rail .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u));}
.win .sb-brand{display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)); margin: 0 calc(8 * var(--u)) calc(6 * var(--u)); flex: none;}
.win .sb-brand img{width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); filter: drop-shadow(0 calc(5 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(11 * var(--u)) rgb(var(--k) / 0.35));}
.win .sb-word{display: flex; align-items: baseline; font: 700 calc(16 * var(--u))/1 var(--font-display); letter-spacing: calc(-0.2 * var(--u)); color: rgba(255, 255, 255, 0.92);}
.win .sb-word .l{color: rgb(var(--c-brand-blue)); font-weight: 600; margin-right: calc(0.5 * var(--u));}
.win .sb-word .s{color: rgb(var(--c-brand-orange)); font-weight: 600; margin-right: calc(1 * var(--u));}
.win .sb-tag{margin-top: calc(3 * var(--u)); font: 500 calc(11 * var(--u))/1.2 var(--font); color: rgba(255, 255, 255, 0.5); white-space: nowrap;}
.win .sb-scroll{flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .sb-sec{display: flex; align-items: center; justify-content: space-between; padding: calc(13 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u)); font: 600 calc(10.5 * var(--u))/1.2 var(--font); letter-spacing: calc(0.8 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, 0.32); flex: none;}
.win .sb-sec.first{padding-top: calc(6 * var(--u)); color: rgba(255, 255, 255, 0.5);}
.win .sb-sec .state{display: flex; align-items: center; gap: calc(7 * var(--u)); font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.55);}
.win .sb-row{position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(28 * var(--u)); margin: 0 calc(8 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); color: rgba(255, 255, 255, 0.72); flex: none;}
.win .sb-row .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(3 * var(--u));}
.win .sb-row .t{flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .sb-row .v{position: relative; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .sb-row .v .lv{position: absolute; right: 0; bottom: calc(-4 * var(--u)); width: calc(34 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(255, 255, 255, 0.08); overflow: hidden;}
.win .sb-row .v .lv i{display: block; height: 100%; border-radius: calc(2 * var(--u)); background: rgb(var(--tint, var(--c-accent)));}
.win .sb-row .b{font: 600 calc(10.5 * var(--u))/1 var(--font); padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: calc(99 * var(--u)); background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .sb-row .rec{width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(var(--c-critical));}
.win .sb-row.on{color: rgba(255, 255, 255, 0.92); font-weight: 600; background: linear-gradient(90deg, rgb(var(--rk, var(--k)) / 0.26), rgba(255, 255, 255, 0.05));}
.win .sb-row.on::before{content: ""; position: absolute; left: 0; top: calc(6 * var(--u)); width: calc(3 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--rk, var(--k))); box-shadow: 0 0 calc(4 * var(--u)) rgb(var(--rk, var(--k)) / 0.7);}
.win .sb-row.on .ic{color: rgb(var(--rk, var(--k))); stroke-width: 1.8;}
.win .sb-row.on .v{color: rgba(255, 255, 255, 0.7);}
.win .sb-row.on .b{background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92);}
.win .sb-row.dim{opacity: 0.4;}
.win .sb-mac{margin: 0 calc(10 * var(--u)) calc(6 * var(--u)); padding: calc(11 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset; flex: none;}
.win .sb-mac b{display: flex; align-items: center; gap: calc(7 * var(--u)); font: 600 calc(12 * var(--u))/1.2 var(--font); color: rgba(255, 255, 255, 0.92);}
.win .sb-mac span{display: block; margin-top: calc(5 * var(--u)); font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.5);}
.win .sb-settings{border-top: 1px solid rgba(255, 255, 255, 0.07); padding: calc(6 * var(--u)) 0 calc(8 * var(--u)); flex: none;}
.win .sb-settings .sb-row{height: calc(30 * var(--u));}
.win.rail{grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr);}
.win.rail .sb-brand{margin: 0 0 calc(6 * var(--u)); justify-content: center;}
.win.rail .sb-brand > div,.win.rail .sb-sec,.win.rail .sb-mac,.win.rail .sb-row .t,.win.rail .sb-row .b,.win.rail .sb-lights .sb-rail{display: none;}
.win.rail .sb-row{flex-direction: column; justify-content: center; gap: calc(1 * var(--u)); height: calc(38 * var(--u)); padding: 0;}
.win.rail .sb-row .v{font-size: calc(9.5 * var(--u));}
.win.rail .sb-row .v .lv{display: none;}
.win.rail .sb-sep{height: 1px; margin: calc(5 * var(--u)) calc(16 * var(--u)); background: rgba(255, 255, 255, 0.09); flex: none;}
.win .main{position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) calc(32 * var(--u)); min-width: 0; min-height: 0;}
.win .tb{display: flex; align-items: center; gap: calc(14 * var(--u)); min-height: calc(64 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .tb-icon{width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, rgb(var(--k) / 0.26), var(--raised)); box-shadow: 0 0 0 1px rgb(var(--k) / 0.3) inset, 0 0 calc(9 * var(--u)) rgb(var(--k) / 0.4);}
.win .tb-icon .ic{width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 1.7;}
.win .tb-title{min-width: 0;}
.win .tb-title b{display: block; font: 600 calc(22 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.5 * var(--u)); white-space: nowrap;}
.win .tb-title span{display: block; margin-top: calc(1 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .tb-space{flex: 1;}
.win .jump{display: flex; align-items: center; gap: calc(7 * var(--u)); width: calc(196 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--ink-2); font-size: calc(12 * var(--u)); flex: none;}
.win .jump .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u));}
.win .jump span{flex: 1; white-space: nowrap;}
.win .key{font: 500 calc(10.5 * var(--u))/1 var(--font); padding: calc(3 * var(--u)) calc(5 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--ink-2); white-space: nowrap;}
.win .seg{display: inline-flex; padding: calc(2 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; flex: none;}
.win .seg span{position: relative; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(6 * var(--u)); font: 500 calc(12 * var(--u))/1.3 var(--font); color: var(--ink); white-space: nowrap;}
.win .seg span + span:not(.on)::before{content: ""; position: absolute; left: calc(-0.5 * var(--u)); top: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: 1px; background: var(--hair-2);}
.win .seg span.on{background: rgb(var(--c-accent) / 0.92); color: #fff; font-weight: 600; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.3);}
.win .seg span.on + span::before{display: none;}
.win .seg span.off{color: var(--ink-3);}
.win .seg.small span{padding: calc(3 * var(--u)) calc(10 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .caps{display: inline-flex; align-items: center; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; flex: none;}
.win .cap{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); min-width: calc(30 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(99 * var(--u)); font: 500 calc(12 * var(--u))/1 var(--font); color: var(--ink-2); white-space: nowrap; justify-content: center;}
.win .cap .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u));}
.win .cap.on{background: var(--raised-2); color: var(--ink);}
.win .cap.rec{color: rgb(var(--c-critical));}
.win .cap-sep{width: 1px; height: calc(16 * var(--u)); margin: 0 calc(2 * var(--u)); background: var(--hair-2);}
.win .pg{position: relative; min-height: 0; overflow: hidden; padding: calc(16 * var(--u)) calc(22 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(16 * var(--u));}
.win .pg > *{flex: none;}
.win .pg .grow{flex: 1 1 0; min-height: 0;}
.win .row{display: flex; gap: calc(16 * var(--u)); min-width: 0;}
.win .row > *{min-width: 0;}
.win .col{display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-width: 0; min-height: 0;}
.win .f1{flex: 1 1 0;}
.win .f2{flex: 2 1 0;}
.win .f3{flex: 3 1 0;}
.win .sp{flex: 1;}
.win .deck{display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(22 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; border-top: 1px solid var(--hair);}
.win .deck .it{display: flex; align-items: center; gap: calc(5 * var(--u));}
.win .deck .it .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-2);}
.win .deck .live{color: var(--ink); font-weight: 600;}
.win .deck .lt{display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(7 * var(--u)); color: var(--ink-2);}
.win .deck .lt.on{background: var(--raised-2); color: var(--ink);}
.win .deck .lt .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .deck .lt em{font-style: normal; color: var(--ink-2);}
.win .dot{display: inline-block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; flex: none; background: rgb(var(--tint, var(--c-good))); box-shadow: 0 0 calc(3 * var(--u)) rgb(var(--tint, var(--c-good)) / 0.6);}
.win .dot.s{width: calc(6 * var(--u)); height: calc(6 * var(--u)); box-shadow: none;}
.win .caps-l{font: 600 calc(10 * var(--u))/1.2 var(--font); letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; color: var(--ink-2); white-space: nowrap;}
.win .eyb{font: 600 calc(10.5 * var(--u))/1.2 var(--font); letter-spacing: calc(0.8 * var(--u)); text-transform: uppercase; color: var(--ink-3); white-space: nowrap;}
.win .tc{font: 400 calc(10.5 * var(--u))/1.2 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .sec2{color: var(--ink-2);}
.win .sec3{color: var(--ink-3);}
.win .t11{font-size: calc(11 * var(--u));}
.win .t12{font-size: calc(12 * var(--u));}
.win .t13{font-size: calc(13 * var(--u));}
.win .t15{font-size: calc(15 * var(--u));}
.win .w5{font-weight: 500;}
.win .w6{font-weight: 600;}
.win .nowrap{white-space: nowrap;}
.win .clip{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.win .tr{text-align: right;}
.win .chip{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); min-height: calc(20 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(6 * var(--u)); font: 500 calc(11 * var(--u))/1.2 var(--font); color: var(--ink); white-space: nowrap;
  background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .chip .dot{width: calc(6 * var(--u)); height: calc(6 * var(--u)); box-shadow: none; background: var(--ink-2);}
.win .chip .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 1.8;}
.win .chip.st{background: rgb(var(--tint) / 0.11); box-shadow: 0 0 0 1px rgb(var(--tint) / 0.35) inset;}
.win .chip.st .dot{background: rgb(var(--tint));}
.win .chip.st .ic{color: rgb(var(--tint));}
.win .good{--tint: var(--c-good);}
.win .warning{--tint: var(--c-warning);}
.win .serious{--tint: var(--c-serious);}
.win .critical{--tint: var(--c-critical);}
.win .info{--tint: var(--c-accent);}
.win .t-cpu{--tint: var(--c-cpu);}
.win .t-gpu{--tint: var(--c-gpu);}
.win .t-memory{--tint: var(--c-memory);}
.win .t-disk{--tint: var(--c-disk);}
.win .t-network{--tint: var(--c-network);}
.win .t-neural{--tint: var(--c-neural);}
.win .t-cache{--tint: var(--c-cache);}
.win .t-accent{--tint: var(--c-accent);}
.win .pill{display: inline-flex; align-items: center; gap: calc(7 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: calc(99 * var(--u)); font: 500 calc(11.5 * var(--u))/1 var(--font); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; white-space: nowrap;}
.win .notice{display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(12 * var(--u)); background: rgb(var(--tint) / 0.1); box-shadow: 0 0 0 1px rgb(var(--tint) / 0.32) inset;}
.win .notice > .ic{color: rgb(var(--tint)); width: calc(13 * var(--u)); height: calc(13 * var(--u));}
.win .linkbtn{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); color: rgb(var(--c-accent)); white-space: nowrap;}
.win .linkbtn .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .cardfoot{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u));}
.win .facts{display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .kv{display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); align-items: baseline;}
.win .kv dt{color: var(--ink-2); white-space: nowrap; margin: 0;}
.win .kv dd{margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}
.win .kv.left dd{text-align: left;}
.win .empty{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding: calc(28 * var(--u)) calc(16 * var(--u)); text-align: center; color: var(--ink-2); font-size: calc(12 * var(--u));}
.win .empty .ic{width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--ink-3); margin-bottom: calc(4 * var(--u));}
.win .empty b{font: 600 calc(14 * var(--u))/1.3 var(--font); color: var(--ink);}
.win .sld{position: relative; height: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.14); min-width: calc(60 * var(--u)); flex: 1;}
.win .sld i{position: absolute; left: 0; top: 0; bottom: 0; border-radius: calc(4 * var(--u)); background: rgb(var(--c-accent)); width: var(--p, 50%);}
.win .sld::after{content: ""; position: absolute; top: 50%; left: var(--p, 50%); width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.5);}
.win .stp{display: inline-flex; flex-direction: column; width: calc(15 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair-2) inset; align-items: center; justify-content: center; flex: none;}
.win .stp .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: var(--ink-2);}
.win .bar{display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;}
.win .bar > *{flex: none;}
.win .bar > .sp,.win .bar > .grow{flex: 1 1 0; min-width: 0;}
.win .lblc{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap;}
.win.bare{display: block; background: none; box-shadow: none; overflow: visible; border-radius: 0;}
.win .card{position: relative; border-radius: calc(16 * var(--u)); padding: calc(16 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42);}
.win .card::before,.win .stage::before,.win .sheet::before{content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 26%, rgba(255, 255, 255, 0.04) 72%, rgb(var(--k) / 0.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.win .card.hero{box-shadow: 0 0 0 1px rgb(var(--k) / 0.26) inset, 0 calc(14 * var(--u)) calc(22 * var(--u)) rgb(var(--k) / 0.16), 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42);}
.win .card.recessed{background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.14)); box-shadow: none;}
.win .card.recessed::before{opacity: 0.45;}
.win .card.flush{padding: 0; overflow: hidden;}
.win .card-h{display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(12 * var(--u)); min-width: 0;}
.win .card-h b{font: 600 calc(14 * var(--u))/1.25 var(--font); letter-spacing: calc(-0.1 * var(--u)); white-space: nowrap;}
.win .card-h .sub{font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}
.win .card-h .glyph{width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; background: rgb(var(--tint, var(--k)) / 0.16); color: rgb(var(--tint, var(--k))); flex: none;}
.win .well{border-radius: calc(9 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .hr{height: 0; border-top: 1px solid var(--hair);}
.win .stage{position: relative; display: grid; grid-template-columns: calc(280 * var(--u)) minmax(0, 1fr) calc(250 * var(--u)); min-height: calc(264 * var(--u)); border-radius: calc(22 * var(--u)); overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0, rgb(var(--f) / 0.12), transparent),
    radial-gradient(ellipse 78% 78% at 52% -6%, rgb(var(--k) / 0.21), transparent),
    linear-gradient(180deg, var(--stage-top), var(--canvas));
  box-shadow: 0 calc(16 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.34);}
.win .stage::before{background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), var(--hair) 40%, var(--hair)); z-index: 2;}
.win .stage.two{grid-template-columns: calc(280 * var(--u)) minmax(0, 1fr);}
.win .stage.wide{grid-template-columns: minmax(0, 1fr);}
.win .stage.drained{filter: saturate(0.55);}
.win .stage-lead{padding: calc(22 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0;}
.win .stage-center{padding: calc(18 * var(--u)) 0 calc(22 * var(--u)); display: flex; align-items: center; justify-content: center; min-width: 0;}
.win .stage-trail{padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(16 * var(--u)); min-width: 0;}
.win .stage-eye{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .stage-title{font: 600 calc(21 * var(--u))/1.22 var(--font-display); letter-spacing: calc(-0.4 * var(--u));}
.win .stage-sub{font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .stage-chips{display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: auto;}
.win .stage.rec{padding: calc(24 * var(--u)) 0;}
.win .stage .lbx{position: absolute; left: 0; right: 0; height: calc(24 * var(--u)); background: #000; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); color: rgba(255, 255, 255, 0.74); font: 600 calc(10 * var(--u))/1 var(--font); letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; z-index: 1;}
.win .stage .lbx.top{top: 0;}
.win .stage .lbx.bot{bottom: 0;}
.win .stage .lbx .m{font: 400 calc(10.5 * var(--u))/1 var(--font-mono); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;}
.win .stage .lbx .recdot{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: rgb(var(--c-critical)); box-shadow: 0 0 0 calc(3 * var(--u)) rgb(var(--c-critical) / 0.25);}
.win .ro{min-width: 0;}
.win .ro .lbl{font: 600 calc(10 * var(--u))/1.2 var(--font); letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; color: var(--ink-2); white-space: nowrap;}
.win .ro .val{display: flex; align-items: baseline; gap: calc(5 * var(--u)); margin-top: calc(4 * var(--u)); white-space: nowrap;}
.win .ro .val b{font: 500 calc(22 * var(--u))/1.1 var(--font-display); letter-spacing: calc(-0.5 * var(--u)); font-variant-numeric: tabular-nums;}
.win .ro .val u{text-decoration: none; font: 500 calc(12 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .ro .val em{margin-left: auto; font: 400 calc(11 * var(--u))/1 var(--font); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .ro.large .val b{font-weight: 300; font-size: calc(34 * var(--u)); letter-spacing: calc(-1.2 * var(--u));}
.win .ro .acc{margin-top: calc(6 * var(--u));}
.win .hero-num{display: flex; align-items: baseline; gap: calc(3 * var(--u)); font: 300 calc(44 * var(--u))/1 var(--font-display); letter-spacing: calc(-1.76 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .hero-num u{text-decoration: none; font: 500 calc(14 * var(--u))/1 var(--font); letter-spacing: 0; color: var(--ink-2);}
.win .lg{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); white-space: nowrap;}
.win .lg i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .lg i.none{background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .lg span{color: var(--ink-2);}
.win .lg b{font-weight: 600; font-variant-numeric: tabular-nums;}
.win .lgs{display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(14 * var(--u));}
.win .meter{position: relative; height: calc(6 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; overflow: hidden; display: flex;}
.win .meter i{display: block; height: 100%; background: rgb(var(--tint, var(--k))); box-shadow: 0 0 calc(6 * var(--u)) rgb(var(--tint, var(--k)) / 0.5);}
.win .meter.thin{height: calc(3 * var(--u)); box-shadow: none;}
.win .meter.tall{height: calc(12 * var(--u)); border-radius: calc(12 * var(--u));}
.win .meter.tall i{box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent 46%), rgb(var(--tint));}
.win .meter i.hatch{background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(5 * var(--u))); box-shadow: none;}
.win .strip{display: flex; gap: calc(3 * var(--u));}
.win .strip i{flex: 1; height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .strip i.on{background: rgb(var(--tint)); box-shadow: 0 0 calc(6 * var(--u)) rgb(var(--tint) / 0.55);}
.win .btn{display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: calc(7 * var(--u)); font: 500 calc(12 * var(--u))/1 var(--font); color: var(--ink); white-space: nowrap;
  background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.25); flex: none;}
.win .btn .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .btn.primary{background: rgb(var(--c-accent) / 0.95); color: #04222b; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 0 calc(12 * var(--u)) rgb(var(--c-accent) / 0.35);}
.win .btn.danger{background: rgb(var(--c-critical) / 0.16); color: rgb(255 138 128); box-shadow: 0 0 0 1px rgb(var(--c-critical) / 0.45) inset;}
.win .btn.ghost{background: transparent; box-shadow: none; color: rgb(var(--c-accent)); padding: 0 calc(4 * var(--u));}
.win .btn.big{height: calc(30 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(13 * var(--u)); border-radius: calc(8 * var(--u));}
.win .btn.off{opacity: 0.38;}
.win .sw{position: relative; width: calc(38 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(99 * var(--u)); background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; flex: none; display: inline-block;}
.win .sw::after{content: ""; position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.4);}
.win .sw.on{background: rgb(var(--c-accent));}
.win .sw.on::after{left: calc(18 * var(--u));}
.win .sw.mini{width: calc(26 * var(--u)); height: calc(15 * var(--u));}
.win .sw.mini::after{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .sw.mini.on::after{left: calc(13 * var(--u));}
.win .cb{width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; display: inline-grid; place-items: center; flex: none;}
.win .cb.on{background: rgb(var(--c-accent)); box-shadow: none;}
.win .cb.on::after{content: ""; width: calc(7 * var(--u)); height: calc(4 * var(--u)); border-left: calc(1.6 * var(--u)) solid #fff; border-bottom: calc(1.6 * var(--u)) solid #fff; transform: translateY(calc(-1 * var(--u))) rotate(-45deg);}
.win .cb.mixed{background: rgb(var(--c-accent)); box-shadow: none;}
.win .cb.mixed::after{content: ""; width: calc(7 * var(--u)); height: calc(1.6 * var(--u)); background: #fff;}
.win .rb{width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; display: inline-grid; place-items: center; flex: none;}
.win .rb.on{background: rgb(var(--c-accent)); box-shadow: none;}
.win .rb.on::after{content: ""; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #fff;}
.win .fld{display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; font-size: calc(12 * var(--u)); color: var(--ink-3); min-width: 0;}
.win .fld .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--ink-2);}
.win .fld b{font-weight: 400; color: var(--ink); white-space: nowrap;}
.win .fld.focus{box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.7) inset, 0 0 0 calc(3 * var(--u)) rgb(var(--c-accent) / 0.22);}
.win .sel{display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair-2) inset; font: 500 calc(12 * var(--u))/1 var(--font); color: var(--ink); white-space: nowrap; flex: none;}
.win .sel .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--ink-2);}
.win .sel.acc{color: rgb(var(--c-accent));}
.win .tbl{width: 100%; display: flex; flex-direction: column; min-height: 0;}
.win .tr-h,.win .tr-r{display: grid; align-items: center; column-gap: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)); grid-template-columns: var(--cols);}
.win .tr-h{height: calc(28 * var(--u)); font: 600 calc(10.5 * var(--u))/1 var(--font); letter-spacing: calc(0.4 * var(--u)); text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--hair); white-space: nowrap;}
.win .tr-h span{display: flex; align-items: center; gap: calc(4 * var(--u)); min-width: 0;}
.win .tr-h span.sorted{color: var(--ink);}
.win .tr-h span.r,.win .tr-r > .r{justify-content: flex-end; text-align: right;}
.win .tr-h .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2;}
.win .tr-r{height: calc(30 * var(--u)); font-size: calc(12.5 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.04);}
.win .tr-r > *{min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;}
.win .tr-r.on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.2), rgb(var(--c-accent) / 0.08)); box-shadow: calc(2 * var(--u)) 0 0 rgb(var(--c-accent)) inset;}
.win .tr-r .nm{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .tr-r .nm b{font-weight: 500; overflow: hidden; text-overflow: ellipsis;}
.win .tr-r .nm small{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .tr-r .cellbar{position: relative; overflow: visible;}
.win .tr-r .cellbar i{position: absolute; left: 0; right: 0; bottom: calc(-5 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(255, 255, 255, 0.07);}
.win .tr-r .cellbar i::after{content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: calc(2 * var(--u)); background: rgb(var(--tint, var(--c-accent)));}
.win .tr-r .disc{width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--ink-3); flex: none;}
.win .appi{width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); flex: none; display: grid; place-items: center; font: 700 calc(9 * var(--u))/1 var(--font); color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(160deg, hsl(var(--hue, 200) 62% 54%), hsl(calc(var(--hue, 200) + 28) 58% 34%)); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.25) inset, 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.4);}
.win .appi.sys{background: linear-gradient(160deg, #5d6673, #353b45);}
.win .appi.lg{width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(20 * var(--u));}
.win .appi.md{width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(13 * var(--u));}
.win .scrim{position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(2, 4, 7, 0.46); -webkit-backdrop-filter: blur(calc(5 * var(--u))) saturate(0.7); backdrop-filter: blur(calc(5 * var(--u))) saturate(0.7);}
.win .sheet{position: relative; width: calc(760 * var(--u)); max-width: 86%; border-radius: calc(18 * var(--u)); padding: calc(22 * var(--u));
  background: linear-gradient(180deg, #1b2028, #12151a); box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6);}
.win .sheet.danger{box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.7), 0 0 0 calc(1.5 * var(--u)) rgb(var(--c-critical) / 0.42) inset, 0 0 calc(14 * var(--u)) rgb(var(--c-critical) / 0.4);}
.win .sheet h4{margin: 0; font: 600 calc(17 * var(--u))/1.25 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .sheet p{margin: calc(6 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); line-height: 1.45; color: var(--ink-2);}
.win .sheet-foot{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(18 * var(--u));}
.win .pop{position: absolute; z-index: 6; border-radius: calc(12 * var(--u)); padding: calc(6 * var(--u)); background: rgba(28, 32, 40, 0.96); box-shadow: 0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; -webkit-backdrop-filter: blur(calc(20 * var(--u))); backdrop-filter: blur(calc(20 * var(--u)));}
.win .pop .mi{display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); white-space: nowrap;}
.win .pop .mi.on{background: rgb(var(--c-accent) / 0.9); color: #fff;}
.win .pop .mi .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .pop .mi .key{margin-left: auto; background: none; box-shadow: none; color: inherit; opacity: 0.6; padding: 0 0 0 calc(16 * var(--u));}
.win .pop .sepr{height: 0; margin: calc(5 * var(--u)) calc(9 * var(--u)); border-top: 1px solid var(--hair-2);}
.win .pop .mh{padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(3 * var(--u)); font: 600 calc(10.5 * var(--u))/1 var(--font); letter-spacing: calc(0.4 * var(--u)); text-transform: uppercase; color: var(--ink-3);}
.win .itile{width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7.3 * var(--u)); display: inline-grid; place-items: center; flex: none; font-size: calc(13.5 * var(--u)); color: var(--ink-2); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .itile .ic{width: 1em; height: 1em;}
.win .itile.tinted{color: rgb(var(--tint)); background: rgb(var(--tint) / 0.14); box-shadow: 0 0 0 1px rgb(var(--tint) / 0.3) inset;}
.win .basket{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u));}
.win .basket.on{box-shadow: calc(3 * var(--u)) 0 0 rgb(var(--c-accent)) inset, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42);}
.win .basket-s{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .basket-s > div{display: flex; align-items: baseline; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .basket-s b{font: 600 calc(12.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .basket-s span{font-size: calc(11.5 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .basket-s small{font-size: calc(11 * var(--u)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .basket .btn{height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u));}
.win .basket:not(.on) .btn.primary{background: var(--raised-2); color: var(--ink-3); box-shadow: 0 0 0 1px var(--hair-2) inset; font-weight: 500;}
.win .sheet.rv{width: calc(760 * var(--u)); max-width: none; height: calc(620 * var(--u)); padding: 0; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 60% -10%, rgb(var(--k) / 0.16), transparent), linear-gradient(180deg, #10141a, #07090d);}
.win .rv-head{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); flex: none;}
.win .rv-title{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .rv-title b{font: 600 calc(17 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .rv-title span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .rv-body{flex: 1; min-height: 0; padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .rv-intro{margin: 0; font-size: calc(12 * var(--u)); line-height: 1.45; color: var(--ink-2);}
.win .rv-list{flex: 1; min-height: 0; border-radius: calc(12 * var(--u)); overflow: hidden;}
.win .rv-lh{display: flex; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .rv-row{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u));}
.win .rv-row.div{border-top: 1px solid var(--hair);}
.win .rv-t{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .rv-t b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .rv-t b.refused{color: rgb(var(--c-serious));}
.win .rv-t code{font: 400 calc(11.5 * var(--u))/1.35 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere;}
.win .rv-t em{font: 400 calc(11 * var(--u))/1.3 var(--font); font-style: normal; color: rgb(var(--c-serious));}
.win .rv-size{padding-top: calc(4 * var(--u)); font: 500 calc(12 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .rv-note{display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .rv-note .ic{color: rgb(var(--c-accent));}
.win .rv-foot{flex: none; padding: calc(14 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); background: rgba(255, 255, 255, 0.042); border-top: 1px solid var(--hair);}
.win .rv-ready{display: flex; align-items: baseline; gap: calc(6 * var(--u));}
.win .rv-ready b{font: 600 calc(12.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .rv-ready span{font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .rv-actions{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .rv-danger{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgb(var(--c-critical) / 0.07); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--c-critical) / 0.42) inset, 0 0 calc(14 * var(--u)) rgb(var(--c-critical) / 0.3);}
.win .rv-danger > span{display: flex; align-items: center; gap: calc(6 * var(--u)); font: 500 calc(12 * var(--u))/1.2 var(--font); color: rgb(var(--c-critical)); white-space: nowrap;}
.win .rv-fineRow{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .rv-fine{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .rv-result{display: flex; align-items: center; gap: calc(9 * var(--u)); font: 500 calc(14 * var(--u))/1.3 var(--font);}
.win .rv-ok{width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgb(var(--tint)); color: #06110a;}
.win .rv-ok .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.4;}
.win .sett{display: grid; grid-template-columns: calc(208 * var(--u)) minmax(0, 1fr); gap: calc(18 * var(--u)); align-items: start; min-height: 0; flex: 1 1 0;}
.win .srail{padding: calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, 0.045); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .srail-search{display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(9 * var(--u)); margin-bottom: calc(4 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(255, 255, 255, 0.06); font-size: calc(12.5 * var(--u)); color: var(--ink-3);}
.win .srail-search .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-2);}
.win .srail-row{display: flex; align-items: center; gap: calc(9 * var(--u)); min-height: calc(44 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(10 * var(--u));}
.win .srail-row > .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(4 * var(--u)); color: var(--ink-2);}
.win .srail-row > div{min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .srail-row b{font: 600 calc(12.5 * var(--u))/1.2 var(--font); white-space: nowrap;}
.win .srail-row span{font-size: calc(10.5 * var(--u)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .srail-row.on{background: rgb(var(--c-accent) / 0.14);}
.win .srail-row.on > .ic{color: rgb(var(--c-accent));}
.win .srail-foot{padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--ink-3);}
.win .sdetail{min-width: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u));}
.win .sdetail-h{display: flex; flex-direction: column; gap: calc(3 * var(--u)); margin-bottom: calc(2 * var(--u));}
.win .sdetail-h b{font: 600 calc(21 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.3 * var(--u));}
.win .sdetail-h span{font-size: calc(12.5 * var(--u)); color: var(--ink-2);}
.win .scols{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(14 * var(--u)); align-items: start;}
.win .scols > div{display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-width: 0;}
.win .scard{padding: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, 0.045); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0;}
.win .scard-h{display: flex; align-items: baseline; gap: calc(8 * var(--u)); min-width: 0; flex-wrap: wrap;}
.win .scard-h b{font: 600 calc(13 * var(--u))/1.25 var(--font); white-space: nowrap;}
.win .scard-h span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .scard-h .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); align-self: center; color: var(--ink-2);}
.win .srow{display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(28 * var(--u));}
.win .srow > div:first-child{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .srow b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .srow span{font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .shair{height: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);}
.win .chart{width: 100%; height: 100%;}
.win .chart path,.win .chart polyline,.win .chart line,.win .chart circle{vector-effect: non-scaling-stroke;}
.win .chart .ln{fill: none; stroke: rgb(var(--tint, var(--k))); stroke-width: calc(1.5 * var(--u)); stroke-linejoin: round; stroke-linecap: round;}
.win .chart .ar{fill: rgb(var(--tint, var(--k)) / 0.16); stroke: none;}
.win .chart .gr{stroke: rgba(255, 255, 255, 0.06); stroke-width: 1px;}
.win .chart .ax{stroke: rgba(255, 255, 255, 0.14); stroke-width: 1px;}
.win .chart .now{fill: #fff; stroke: rgb(var(--tint, var(--k))); stroke-width: calc(1.5 * var(--u));}
.win .chart .cur{stroke: rgba(255, 255, 255, 0.5); stroke-width: 1px; stroke-dasharray: 2 2;}
.win .sparkbox{position: relative;}
.win .sparkbox .nowdot{position: absolute; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--tint, var(--k))), 0 0 calc(8 * var(--u)) rgb(var(--tint, var(--k)) / 0.8);}
.win .sparkbox[data-live] svg,.win .mirrorbox svg{overflow: hidden;}
.win .sparkbox[data-live] .nowdot{transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);}
.win .depth{-webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.55), #000 46%); mask: linear-gradient(90deg, rgba(0, 0, 0, 0.55), #000 46%);}
.win .dial{position: relative; aspect-ratio: 1;}
.win .dial svg{width: 100%; height: 100%;}
.win .dial .trk{fill: none; stroke: rgba(0, 0, 0, 0.36);}
.win .dial .bez{fill: none; stroke: url(#bezel); stroke-width: 1;}
.win .dial .arc{fill: none; stroke-linecap: round; filter: drop-shadow(0 0 calc(5 * var(--u)) rgb(var(--tint) / 0.6)); stroke: rgb(var(--tint));}
.win .dial .arc2{opacity: 0.55; filter: none;}
.win .dial .tick{stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-linecap: round;}
.win .dial .tick.minor{stroke: rgba(255, 255, 255, 0.16);}
.win .dial .spk{stroke-width: 2.4; stroke-linecap: round;}
.win .dial .lens{position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(3 * var(--u));
  background: radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015) 60%, rgba(0, 0, 0, 0.3)); box-shadow: 0 calc(10 * var(--u)) calc(13 * var(--u)) rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.24) inset;}
.win .heat{display: grid; gap: calc(3 * var(--u));}
.win .heat i{border-radius: calc(4 * var(--u)); aspect-ratio: 1; background: var(--h0);}
.win{--h0: #0f1a1f; --h1: #0c2328; --h2: #05343d; --h3: #004957; --h4: #005e71; --h5: #007890; --h6: #0091ad; --h7: #00abc8; --h8: #3bc4e0; --h9: #7adff7;}
.win .h0{background: var(--h0) !important;}
.win .h1{background: var(--h1) !important;}
.win .h2{background: var(--h2) !important;}
.win .h3{background: var(--h3) !important;}
.win .h4{background: var(--h4) !important;}
.win .h5{background: var(--h5) !important;}
.win .h6{background: var(--h6) !important;}
.win .h7{background: var(--h7) !important;}
.win .h8{background: var(--h8) !important;}
.win .h9{background: var(--h9) !important; box-shadow: 0 0 calc(6 * var(--u)) rgb(122 223 247 / 0.5);}
.win .hl-ring{position: absolute; z-index: 9; border-radius: calc(10 * var(--u)); pointer-events: none;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgb(var(--c-accent)), 0 0 0 calc(6 * var(--u)) rgb(var(--c-accent) / 0.22), 0 0 calc(22 * var(--u)) rgb(var(--c-accent) / 0.55);}
.win .hl-ring::after{content: attr(data-n); position: absolute; left: calc(-11 * var(--u)); top: calc(-11 * var(--u)); min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(99 * var(--u)); display: grid; place-items: center;
  background: rgb(var(--c-accent)); color: #03222b; font: 700 calc(11.5 * var(--u))/1 var(--font); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.5);}
.win .hl-ring[data-n=""]::after{display: none;}

/* mock-files-b.css */
.win .btn.fb-sm{height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11 * var(--u)); gap: calc(5 * var(--u));}
.win .btn.fb-sm .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .btn.fb-icon{width: calc(24 * var(--u)); padding: 0;}
.win .fb-pick{display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); white-space: nowrap; flex: none;}
.win .fb-pick .sel{flex: 1; height: calc(20 * var(--u)); justify-content: space-between; border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .fb-w225{width: calc(225 * var(--u));}
.win .fb-w210{width: calc(210 * var(--u));}
.win .fb-note{display: flex; align-items: baseline; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2); min-width: 0;}
.win .fb-note .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); align-self: flex-start; margin-top: calc(2 * var(--u)); color: var(--ink-3);}
.win .fb-faint{color: var(--ink-3);}
.win .fb-note.fb-faint{color: var(--ink-3);}
.win .fb-t11{font-size: calc(11 * var(--u));}
.win .fb-inset{padding: 0 calc(4 * var(--u));}
.win .fb-inset2{padding: 0 calc(2 * var(--u));}
.win .fb-hug{align-self: flex-start; width: fit-content; max-width: 100%;}
.win .fb-fine{margin: 0; font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-3);}
.win .dot.fb-quiet{background: var(--ink-3); box-shadow: none;}
.win .fb-ok{width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: rgb(var(--c-good)); color: #06110a;}
.win .fb-ok .ic{width: calc(8 * var(--u)); height: calc(8 * var(--u)); stroke-width: 2.6;}
.win .fb-caption{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .fb-caption .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .fb-reveal{width: calc(22 * var(--u)); height: calc(16 * var(--u)); display: grid; place-items: center; flex: none; color: var(--ink-2);}
.win .fb-reveal .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u));}
.win .fb-bands{display: flex; flex-direction: column; min-width: 0; min-height: 0;}
.win .fb-band-h{flex: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .fb-band-h > b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .fb-bands > .fb-band-h + *{flex: 1 1 0; min-height: 0; overflow: hidden;}
.win .fb-title{display: flex; align-items: baseline; gap: calc(8 * var(--u)); min-width: 0;}
.win .fb-title b{font: 600 calc(14 * var(--u))/1.25 var(--font); white-space: nowrap;}
.win .fb-title span:not(.btn){font-size: calc(11.5 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-title .btn{align-self: center;}
.win .fb-t15 b{font-size: calc(15 * var(--u));}
.win .fb-sub{font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .fb-sub.fb-faint{color: var(--ink-3);}
.win .fb-sub.fb-t115{font-size: calc(11.5 * var(--u));}
.win .fb-row{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .fb-rows{display: flex; flex-direction: column;}
.win .fb-rows > *{flex: none;}
.win .fb-foot{display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(38 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;}
.win .fb-split{display: flex; gap: calc(14 * var(--u)); min-width: 0;}
.win .fb-side{width: calc(330 * var(--u)); flex: none;}
.win .fb-side .fb-band-h:has(> .fb-title:only-child){padding: calc(10 * var(--u)) calc(14 * var(--u));}
.win .fb-side-v{width: calc(341 * var(--u));}
.win .fb-main{flex: 1 1 0; min-width: 0;}
.win .fb-grp,.win .fb-refrow,.win .fb-app{position: relative;}
.win .fb-grp.on,.win .fb-refrow.on,.win .fb-app.on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.46) inset;}
.win .fb-grp.on::before,.win .fb-refrow.on::before,.win .fb-app.on::before{content: ""; position: absolute; left: calc(1 * var(--u)); top: calc(9 * var(--u)); bottom: calc(9 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--c-accent)); box-shadow: 0 0 calc(5 * var(--u)) rgb(var(--c-accent) / 0.55);}
.win .stage.fb-lstage{grid-template-columns: calc(176 * var(--u)) minmax(0, 1fr) calc(276 * var(--u)); min-height: calc(164 * var(--u));}
.win .fb-lstage .stage-lead{gap: calc(5 * var(--u));}
.win .fb-lstage .stage-lead .hero-num{margin-top: calc(2 * var(--u));}
.win .fb-lstage .stage-center{align-items: flex-start;}
.win .fb-lstage .stage-trail{justify-content: flex-start; gap: calc(9 * var(--u));}
.win .fb-search{width: 100%; padding: 0 calc(10 * var(--u));}
.win .fb-lens{display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(17 * var(--u)); border-radius: calc(16 * var(--u));
  background: radial-gradient(ellipse 75% 150% at 50% -25%, rgb(var(--k) / 0.14), transparent), rgba(0, 0, 0, 0.34);
  box-shadow: 0 0 0 1px var(--hair-2) inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.4);}
.win .fb-lens > .ic{width: calc(19 * var(--u)); height: calc(19 * var(--u)); color: var(--ink-2);}
.win .fb-lens b{flex: 1; font: 300 calc(22 * var(--u))/1 var(--font-display); letter-spacing: calc(-0.2 * var(--u)); white-space: nowrap;}
.win .fb-clear{width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink-2); color: #0b0e13;}
.win .fb-clear .ic{width: calc(8 * var(--u)); height: calc(8 * var(--u)); stroke-width: 2.8;}
.win .fb-lens .key{height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); display: inline-flex; align-items: center; font-size: calc(11 * var(--u)); color: var(--ink-3); background: var(--raised);}
.win .fb-source{display: flex; align-items: center; gap: calc(6 * var(--u)); width: fit-content; margin-top: calc(9 * var(--u)); padding: 0 calc(5 * var(--u)); font: 400 calc(10.5 * var(--u))/1.3 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-source code{min-width: calc(48 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(4 * var(--u)); font: inherit; background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-kind{display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u));}
.win .fb-kind .btn + .btn{margin-left: calc(-2 * var(--u));}
.win .fb-chips{display: flex; flex-wrap: wrap; gap: calc(6 * var(--u));}
.win .fb-ctl{display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .fb-ctl .lblc{font-size: calc(11.5 * var(--u));}
.win .fb-results{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;}
.win .tbl.fb-tbl{flex: 1 1 0; min-height: 0; overflow: hidden;}
.win .tbl.fb-tbl > *{flex: none;}
.win .fb-ki{display: inline-flex; flex: none; color: rgb(var(--tint));}
.win .fb-hit{color: inherit; border-radius: calc(2 * var(--u)); background: rgb(var(--c-accent) / 0.3);}
.win .fb-insp{width: calc(280 * var(--u)); flex: none; padding: calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .fb-insp-h{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .fb-insp-h > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .fb-insp-h b{font: 600 calc(13.5 * var(--u))/1.25 var(--font); overflow-wrap: anywhere;}
.win .fb-insp-h > div span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .fb-where{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .fb-where code{font: 400 calc(11 * var(--u))/1.4 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere;}
.win .fb-insp .kv{gap: calc(7 * var(--u)) calc(14 * var(--u));}
.win .fb-insp .kv dd{font-weight: 400;}
.win .fb-insp-b{display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .fb-insp-b > div{display: flex; gap: calc(6 * var(--u));}
.win .fb-insp-b > div .btn{flex: 1 1 0; padding: 0 calc(4 * var(--u));}
.win .stage.fb-dstage{grid-template-columns: calc(292 * var(--u)) minmax(0, 1fr) calc(272 * var(--u)); min-height: calc(168 * var(--u));}
.win .fb-dstage .stage-lead{padding: calc(18 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u)); gap: 0;}
.win .fb-dstage .stage-center{padding: calc(18 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)); align-items: flex-start;}
.win .fb-dstage .stage-trail{padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); justify-content: flex-start; gap: calc(9 * var(--u));}
.win .fb-hero{display: flex; align-items: baseline; align-items: last baseline; gap: calc(10 * var(--u)); margin-top: calc(9 * var(--u));}
.win .fb-hero > b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .fb-hero .hero-num u{font-size: calc(14.4 * var(--u));}
.win .meter.fb-shares{height: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); gap: calc(1.5 * var(--u));}
.win .meter.fb-shares i{border-radius: calc(1.5 * var(--u)); box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 50%), rgb(var(--tint));}
.win .meter.fb-shares i:last-child{opacity: 0.55;}
.win .fb-hero-d{margin-top: calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .fb-hero-d small{font-size: calc(11 * var(--u)); color: var(--ink-3); white-space: nowrap; overflow: hidden;}
.win .fb-pipe{width: 100%; display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .fb-steps{display: flex; align-items: stretch; height: calc(112 * var(--u));}
.win .fb-step{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(13 * var(--u));}
.win .fb-step > *{flex: none;}
.win .fb-step > .sp{flex: 1 1 0;}
.win .fb-step-h{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .fb-step-h .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: 0 calc(1.5 * var(--u)); color: var(--ink-2);}
.win .fb-step-h b{flex: 1; font: 500 calc(12 * var(--u))/1.2 var(--font); white-space: nowrap;}
.win .fb-step-h b + .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin: 0; color: var(--ink-3); stroke-width: 2.2;}
.win .fb-step.on .fb-step-h b{font-weight: 600;}
.win .fb-step.on .fb-step-h .ic:first-child{color: var(--ink);}
.win .fb-step-f{display: flex; align-items: baseline; gap: calc(5 * var(--u)); white-space: nowrap;}
.win .fb-step-f b{font: 500 calc(20 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.4 * var(--u)); font-variant-numeric: tabular-nums;}
.win .fb-step-f span{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .fb-step-l{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-step-s{display: flex; align-items: center; gap: calc(5 * var(--u)); font: 500 calc(11 * var(--u))/1.2 var(--font); white-space: nowrap;}
.win .fb-mark{width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; flex: none; background: var(--ink-3);}
.win .fb-mark.good{background: rgb(var(--c-good));}
.win .fb-mark.fb-hollow{width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: none; border: 1px dashed var(--ink-2);}
.win .fb-step.fb-lit{background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.035)), rgb(var(--k) / 0.04); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 calc(6 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / 0.35);}
.win .fb-step.fb-lit.on{background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.035)), rgb(var(--k) / 0.13); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--k) / 0.85) inset, 0 0 calc(12 * var(--u)) rgb(var(--k) / 0.42), 0 calc(6 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / 0.35);}
.win .fb-step.fb-dim{background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-step.fb-dim > *{opacity: 0.78;}
.win .fb-step.fb-dashed{padding: calc(9 * var(--u)); border: 1px dashed var(--hair-2);}
.win .fb-step.fb-dashed.on{padding: calc(8.5 * var(--u)); border: calc(1.5 * var(--u)) dashed rgb(var(--k) / 0.75); background: rgb(var(--k) / 0.06);}
.win .fb-link{position: relative; width: calc(26 * var(--u)); height: calc(5 * var(--u)); flex: none; align-self: center;}
.win .fb-link::before{content: ""; position: absolute; left: 0; right: calc(5 * var(--u)); top: calc(2 * var(--u)); height: 1px; background: var(--hair-2);}
.win .fb-link::after{content: ""; position: absolute; right: 0; top: 0; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: rgb(60 66 76);}
.win .fb-link.fb-lit::before{background: rgb(var(--k) / 0.7);}
.win .fb-link.fb-lit::after{background: rgb(var(--k));}
.win .fb-note.fb-cap{font-size: calc(11 * var(--u));}
.win .fb-sel{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .fb-sel > div{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .fb-sel > div > span:not(.hero-num){font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-sel .hero-num u{font-size: calc(12.6 * var(--u));}
.win .fb-filters{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .fb-filters > div{display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); min-height: calc(22 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .fb-filters em{font-style: normal; color: var(--ink-3);}
.win .fb-filters .sel{height: calc(22 * var(--u));}
.win .fb-actions{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .fb-actions .lblc{margin: 0 calc(2 * var(--u));}
.win .fb-roles{flex: 1000 1 0; min-width: 0; margin-left: calc(-14 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); color: var(--ink-2);}
.win .fb-roles > .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .fb-roles .chip{color: var(--ink-2);}
.win .card.fb-unver{border: 1px dashed var(--hair-2);}
.win .card.fb-unver::before{display: none;}
.win .fb-list{display: flex; flex-direction: column; padding: calc(5 * var(--u)) 0;}
.win .fb-list > *{flex: none;}
.win .fb-grp{display: flex; flex-direction: column; gap: calc(3 * var(--u)); margin: 0 calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); border-radius: calc(9 * var(--u));}
.win .fb-grp b{font: 500 calc(12 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums;}
.win .fb-grp span{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .fb-grp .meter{margin-top: calc(3 * var(--u));}
.win .fb-grp + .fb-grp::after{content: ""; position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); top: calc(-0.5 * var(--u)); border-top: 1px solid var(--hair);}
.win .fb-grp.on::after,.win .fb-grp.on + .fb-grp::after{display: none;}
.win .fb-file{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .fb-file > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .fb-file b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .fb-file div span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .fb-file .cb{margin-top: calc(1 * var(--u));}
.win .fb-main .fb-band-h{padding: calc(13 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u));}
.win .fb-ev{flex: none; display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin: calc(12 * var(--u)) calc(16 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-ev-l{display: flex; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .fb-ev-l > :first-child{flex: none; align-self: flex-start; margin-top: calc(1.5 * var(--u));}
.win .fb-ev-l > .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-2);}
.win .fb-ev-l b{font-weight: 600; color: var(--ink);}
.win .fb-ev-l.fb-faint{color: var(--ink-3);}
.win .fb-warn{display: inline-flex; color: rgb(var(--c-serious));}
.win .fb-warn .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .fb-copy{position: relative; display: grid; grid-template-columns: calc(12 * var(--u)) calc(16 * var(--u)) minmax(0, 1fr) calc(78 * var(--u)) calc(96 * var(--u)) calc(76 * var(--u)) calc(22 * var(--u)); column-gap: calc(10 * var(--u)); align-items: start; padding: calc(8 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .fb-copy.fb-copy-h{align-items: center; padding: calc(7 * var(--u)) calc(16 * var(--u));}
.win .fb-copy-h > :nth-child(4){text-align: right;}
.win .fb-copy.fb-kept::before,.win .fb-copy.fb-cut::before{content: ""; position: absolute; left: calc(21.5 * var(--u)); top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 0.16);}
.win .fb-stop{position: relative; justify-self: center; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(4.5 * var(--u)); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.32) inset;}
.win .fb-kept .fb-stop{width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin-top: calc(3 * var(--u)); background: rgb(var(--k)); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(255 255 255 / 0.85) inset, 0 0 calc(6 * var(--u)) rgb(var(--k) / 0.7);}
.win .fb-cut{background: rgb(var(--c-critical) / 0.06);}
.win .fb-copy .cb{margin-top: calc(1 * var(--u));}
.win .fb-copy-t{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .fb-copy-t b{font: 500 calc(12.5 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-copy-t span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere;}
.win .fb-copy-s{text-align: right; font: 500 calc(12 * var(--u))/1.35 var(--font); font-variant-numeric: tabular-nums;}
.win .fb-copy-m{font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-keep{display: inline-flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(22 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(7 * var(--u)); font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2); background: var(--raised); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .fb-keep.on{color: var(--ink); background: rgb(var(--c-good) / 0.1); box-shadow: 0 0 0 1px rgb(var(--c-good) / 0.35) inset;}
.win .fb-keep i{width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: rgb(var(--c-good));}
.win .fb-skip{font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .fb-path{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; font: 400 calc(11.5 * var(--u))/1 var(--font-mono); color: var(--ink-2); white-space: nowrap;}
.win .fb-path .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--ink-3);}
.win .fb-source2{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .fb-source2 b{font: 500 calc(11.5 * var(--u))/1.3 var(--font); color: var(--ink-2);}
.win .fb-source2 span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .fb-refrow{display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0 calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(9 * var(--u));}
.win .fb-refrow .itile{font-size: calc(12.5 * var(--u));}
.win .fb-refrow > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .fb-refrow b{font: 500 calc(12 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-refrow > div span{font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap; overflow: hidden;}
.win .fb-refrow em{flex: none; padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--raised); font: 500 calc(11 * var(--u))/1 var(--font); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .fb-top{align-items: flex-start;}
.win .fb-top > div{display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0;}
.win .fb-top b{font-size: calc(13 * var(--u));}
.win .fb-top span:not(.btn){color: var(--ink-2);}
.win .fb-main .fb-band-h:has(.fb-top){padding: calc(10 * var(--u)) calc(14 * var(--u));}
.win .fb-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); padding: calc(14 * var(--u));}
.win .fb-tile{display: flex; flex-direction: column; gap: calc(7 * var(--u)); min-width: 0; padding: calc(8 * var(--u)); border-radius: calc(13 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-thumb{position: relative; height: calc(138 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-ref .fb-thumb{box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.55) inset;}
.win .fb-thumb .chip{position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); background: linear-gradient(rgb(var(--c-accent) / 0.16), rgb(var(--c-accent) / 0.16)), rgb(9 13 18 / 0.66);}
.win .fb-tile-t{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .fb-tile-t b{font: 500 calc(12 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-tile-t code{font: 400 calc(10.5 * var(--u))/1.25 var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden;}
.win .fb-tile-b{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .fb-tile-b > span:first-child{font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .card.fb-review{display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); box-shadow: none;}
.win .fb-review b{font: 600 calc(10.5 * var(--u))/1.2 var(--font); letter-spacing: calc(0.8 * var(--u)); text-transform: uppercase; color: var(--ink-3); white-space: nowrap;}
.win .fb-review span{font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .fb-ph{position: relative; display: block; height: 100%; aspect-ratio: 4 / 3; border-radius: calc(3 * var(--u)); overflow: hidden;
  background:
    radial-gradient(circle at var(--sx, 71%) 19%, rgb(255 247 226 / 0.96) 0 3.4%, rgb(255 234 188 / 0.42) 6%, transparent 15%),
    linear-gradient(180deg, hsl(var(--sky, 207) 66% 56%), hsl(var(--sky, 207) 76% 80%) var(--hz, 46%), hsl(205 58% 47%) var(--hz, 46%), hsl(202 54% 36%) 72%);}
.win .fb-ph i,.win .fb-ph::after{position: absolute; display: block; left: calc(var(--rx, 0%) - 10%); right: -10%; bottom: 0;}
.win .fb-ph i:nth-child(1){left: 0; right: 0; bottom: auto; top: var(--hz, 46%); height: 16%; background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.2) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(4 * var(--u)));
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 var(--sx, 71%), transparent 98%); mask: linear-gradient(90deg, transparent 38%, #000 var(--sx, 71%), transparent 98%);}
.win .fb-ph i:nth-child(2){height: 40%;
  background: linear-gradient(180deg, transparent, rgb(60 30 10 / 0.18)), linear-gradient(90deg, #efe4cf 0 12%, #e6c9a8 12% 26%, #f5eddd 26% 42%, #d8dee4 42% 54%, #edd9b9 54% 70%, #f6eedd 70% 85%, #e4ccab 85%);
  clip-path: polygon(0 38%, 12% 38%, 12% 20%, 26% 20%, 26% 44%, 42% 44%, 42% 12%, 54% 12%, 54% 32%, 70% 32%, 70% 46%, 85% 46%, 85% 24%, 100% 24%, 100% 100%, 0 100%);}
.win .fb-ph i:nth-child(3){height: 54%;
  background: repeating-linear-gradient(90deg, rgb(70 24 8 / 0.26) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(3.5 * var(--u))), linear-gradient(180deg, #d9794a, #a54a2b);
  clip-path: polygon(-1% 56%, 6% 34%, 13% 56%, 11% 43%, 19% 22%, 27% 43%, 25% 60%, 34% 38%, 43% 60%, 41% 37%, 48% 14%, 55% 37%, 53% 52%, 62% 30%, 71% 52%, 69% 62%, 77.5% 42%, 86% 62%, 84% 46%, 92.5% 26%, 101% 46%,
    84% 46%, 86% 62%, 69% 62%, 71% 52%, 53% 52%, 55% 37%, 41% 37%, 43% 60%, 25% 60%, 27% 43%, 11% 43%, 13% 56%);}
.win .fb-ph::after{content: ""; height: 15%;
  background: repeating-linear-gradient(98deg, rgb(70 24 8 / 0.3) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(5 * var(--u))), linear-gradient(180deg, #c8643c, #8f3b21);
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%); box-shadow: none;}
.win .card.fb-bar{padding: 0; border-radius: calc(16 * var(--u)); box-shadow: none;}
.win .fb-bar-r{display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));}
.win .fb-bar-r .fb-caption{margin-right: calc(4 * var(--u));}
.win .fb-bar-s{display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .fb-bar-s span{white-space: nowrap;}
.win .fb-apps{width: calc(340 * var(--u)); flex: none;}
.win .fb-apps .fb-band-h{padding: calc(12 * var(--u));}
.win .fb-apps .lblc{font-size: calc(11.5 * var(--u));}
.win .fb-applist{display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(4 * var(--u)) 0;}
.win .fb-app{display: grid; grid-template-columns: calc(32 * var(--u)) minmax(0, 1fr) auto; grid-template-rows: calc(16 * var(--u)) calc(14 * var(--u)); column-gap: calc(10 * var(--u)); row-gap: calc(3 * var(--u)); align-items: center; align-content: center; height: calc(48 * var(--u)); flex: none; margin: 0 calc(6 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(10 * var(--u));}
.win .fb-app .appi{grid-row: 1 / 3; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(15 * var(--u));}
.win .fb-app-n{display: flex; align-items: center; gap: calc(5 * var(--u)); min-width: 0;}
.win .fb-app-n b{font: 500 calc(12 * var(--u))/1.3 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-app-s{font: 500 calc(11.5 * var(--u))/1.3 var(--font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;}
.win .fb-app-v{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .meter.fb-sizebar{width: calc(60 * var(--u)); height: calc(4 * var(--u)); justify-self: end;}
.win .meter.fb-sizebar i{border-radius: calc(4 * var(--u)); background: linear-gradient(90deg, rgb(var(--tint) / 0.5), rgb(var(--tint))); box-shadow: 0 0 calc(3 * var(--u)) rgb(var(--tint) / 0.6);}
.win .fb-foot.fb-plain{min-height: 0; padding: calc(8 * var(--u)) calc(12 * var(--u));}
.win .fb-inspector{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;}
.win .fb-portrait{position: relative; flex: none; display: flex; align-items: center; min-height: calc(172 * var(--u)); padding: calc(16 * var(--u)) 0; overflow: hidden; border-bottom: 1px solid var(--hair);
  background: radial-gradient(ellipse 60% 120% at 100% 0, rgb(var(--f) / 0.1), transparent), linear-gradient(180deg, rgb(11 14 19 / 0.72), rgb(5 7 10 / 0.78));}
.win .fb-ident{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(6 * var(--u)) 0 calc(20 * var(--u));}
.win .fb-ident-e{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .fb-ident > b{margin-top: calc(6 * var(--u)); font: 600 calc(24 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.4 * var(--u)); white-space: nowrap;}
.win .fb-ident-id{margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .fb-ident-p{margin-top: calc(1 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .fb-quietbtn{display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font: 500 calc(11 * var(--u))/1.4 var(--font); color: var(--ink-2);}
.win .fb-quietbtn .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .fb-facts{margin-top: calc(11 * var(--u)); display: flex; gap: calc(18 * var(--u));}
.win .fb-facts > div{display: flex; flex-direction: column; gap: calc(2 * var(--u)); white-space: nowrap;}
.win .fb-facts span{font: 600 calc(10 * var(--u))/1.2 var(--font); letter-spacing: calc(0.7 * var(--u)); text-transform: uppercase; color: var(--ink-3);}
.win .fb-facts b{font: 600 calc(12.5 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums;}
.win .fb-portrait::after{content: ""; position: absolute; right: calc(230 * var(--u)); top: calc(16 * var(--u)); bottom: calc(16 * var(--u)); width: calc(320 * var(--u)); pointer-events: none;
  background:
    linear-gradient(90deg, transparent 10%, rgb(var(--k) / 0.5) 34%, rgb(var(--k) / 0.5) 66%, transparent 90%) 0 66% / 100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.03)) 0 68.4% / 100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.05)) 0 74.8% / 100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)) 0 85.6% / 100% 1px no-repeat,
    repeating-conic-gradient(from 93deg at 50% 66%, rgb(255 255 255 / 0.07) 0 0.45deg, transparent 0.45deg 8.7deg);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(180deg, transparent 65.5%, #000 65.5%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(180deg, transparent 65.5%, #000 65.5%); mask-composite: intersect;}
.win .fb-pool{position: relative; width: calc(136 * var(--u)); flex: none; align-self: stretch; display: grid; place-items: center;}
.win .fb-pool::before{content: ""; position: absolute; left: 50%; top: 50%; width: calc(260 * var(--u)); height: calc(176 * var(--u)); margin: calc(-96 * var(--u)) 0 0 calc(-130 * var(--u)); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--k) / 0.22), transparent);}
.win .fb-pool::after{content: ""; position: absolute; left: 50%; top: 50%; width: calc(150 * var(--u)); height: calc(34 * var(--u)); margin: calc(24 * var(--u)) 0 0 calc(-75 * var(--u)); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--k) / 0.5), transparent 72%);}
.win .fb-pool .appi{position: relative; z-index: 1; grid-area: 1 / 1; width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(19 * var(--u)); font-size: calc(38 * var(--u)); transform: translateY(calc(-8 * var(--u))); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgb(255 255 255 / 0.25) inset, 0 calc(8 * var(--u)) calc(10 * var(--u)) rgb(0 0 0 / 0.5);}
.win .fb-pool .appi + .appi{z-index: 0; transform: translateY(calc(73 * var(--u))) scaleY(-1); box-shadow: none; -webkit-mask: linear-gradient(0deg, rgb(0 0 0 / 0.26), transparent 62%); mask: linear-gradient(0deg, rgb(0 0 0 / 0.26), transparent 62%);}
.win .fb-print{width: calc(296 * var(--u)); flex: none; margin: 0 calc(20 * var(--u)) 0 calc(6 * var(--u)); display: flex; flex-direction: column;}
.win .fb-print-h{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .fb-print-h > span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-print-n{display: flex; align-items: baseline; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u));}
.win .fb-print-n > em{font-size: calc(11.5 * var(--u)); font-style: normal; color: var(--ink-3);}
.win .meter.fb-tube{height: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); margin-top: calc(8 * var(--u));}
.win .meter.fb-tube i{box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent 46%), rgb(var(--tint));}
.win .fb-print-l{margin-top: calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .fb-print-l > div{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25; white-space: nowrap;}
.win .fb-print-l i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); flex: none; background: rgb(var(--tint));}
.win .fb-print-l span{color: var(--ink-2);}
.win .fb-print-l b{font-weight: 600; font-variant-numeric: tabular-nums;}
.win .fb-insbody{flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;}
.win .fb-choose{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: calc(12 * var(--u)) calc(14 * var(--u)) 0; border: 1px solid var(--hair); border-bottom: 0; border-radius: calc(13 * var(--u)) calc(13 * var(--u)) 0 0; background: rgb(255 255 255 / 0.036);}
.win .fb-choose > *{flex: none;}
.win .fb-choose-h{display: flex; flex-direction: column;}
.win .fb-choose-h .fb-title b{font-size: calc(12.5 * var(--u));}
.win .fb-choose-h .fb-title span:not(.btn){color: var(--ink-2);}
.win .fb-choose-h .fb-sub{margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .fb-choose-h .fb-row{margin-top: calc(10 * var(--u));}
.win .fb-choose-h .fb-fine{margin: calc(8 * var(--u)) 0 calc(2 * var(--u));}
.win .fb-item{padding: calc(9 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .fb-item > div{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .fb-item-h{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .fb-item-h b{font: 500 calc(12.5 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .fb-item-h span:last-child{font: 500 calc(12 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-item-d{display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding-left: calc(22 * var(--u));}
.win .fb-item-d > span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere;}
.win .fb-item-d > em{font-size: calc(11 * var(--u)); line-height: 1.3; font-style: normal; color: var(--ink-3);}
.win .fb-item-d > div{display: flex; margin-top: calc(1 * var(--u));}
.win .fb-choose > .fb-item{border-bottom: 1px solid var(--hair);}
.win .fb-choose > .fb-related{flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; margin-top: calc(12 * var(--u));}
.win .fb-related > *{flex: none;}
.win .fb-related .fb-item{border-top: 0;}
.win .fb-cat{display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(12 * var(--u)) 0 calc(1 * var(--u)); border-top: 1px solid var(--hair);}
.win .fb-related > .fb-cat:first-child{padding-top: 0; border-top: 0;}
.win .fb-cat .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .fb-cat b{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .fb-cat span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .fb-aside{width: calc(316 * var(--u)); flex: none; display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .fb-aside > *{flex: none;}
.win .fb-sub-card{display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(13 * var(--u)); background: rgb(255 255 255 / 0.036); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-sub-card > b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .fb-sub-card > span{margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35;}
.win .fb-sub-card > p{margin: calc(8 * var(--u)) 0 0; font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .fb-disc{display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(12 * var(--u));}
.win .fb-disc .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: var(--ink-2); stroke-width: 2.2;}
.win .fb-caution{display: flex; align-items: flex-start; gap: calc(7 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgb(var(--c-serious) / 0.06); box-shadow: 0 0 0 1px rgb(var(--c-serious) / 0.24) inset; font-size: calc(11 * var(--u)); line-height: 1.35; color: rgb(var(--c-serious));}
.win .fb-caution .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(2 * var(--u));}
.win .fb-insfoot{flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--hair); background: rgb(255 255 255 / 0.03);}
.win .fb-explain{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .fb-explain > .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(1 * var(--u)); color: rgb(var(--c-accent));}
.win .fb-explain > div{display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); min-width: 0;}
.win .fb-explain p{margin: 0; font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .fb-explain span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .fb-leftovers .fb-band-h{padding: calc(11 * var(--u)) calc(14 * var(--u));}
.win .fb-left{position: relative; display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .fb-left.on::before{content: ""; position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(1 * var(--u)); bottom: calc(1 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06));}
.win .fb-left > *{position: relative;}
.win .fb-left-h{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .fb-left-h b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .fb-left-h .fb-caption{font-size: calc(11 * var(--u));}
.win .fb-left-d{display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); padding-left: calc(22 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .fb-proof,.win .fb-alarm{display: flex; align-items: center; gap: calc(5 * var(--u));}
.win .fb-proof .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: rgb(var(--c-accent));}
.win .fb-alarm{color: rgb(var(--c-serious));}
.win .fb-alarm .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .fb-updates .fb-band-h{padding: calc(10 * var(--u)) calc(14 * var(--u));}
.win .fb-updates .fb-title b{font-size: calc(13 * var(--u));}
.win .fb-updrows{padding: calc(4 * var(--u)) 0;}
.win .fb-upd{position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u));}
.win .fb-upd + .fb-upd::after{content: ""; position: absolute; left: calc(76 * var(--u)); right: 0; top: 0; border-top: 1px solid var(--hair);}
.win .fb-upd.on::before{content: ""; position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(1 * var(--u)); bottom: calc(1 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06));}
.win .fb-upd > *{position: relative;}
.win .fb-upd > div{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .fb-upd > div b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .fb-upd > div span{font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-3);}
.win .fb-ver{display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font: 400 calc(12 * var(--u))/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .fb-ver span{color: var(--ink-2);}
.win .fb-ver b{font-weight: 500;}
.win .fb-ver .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--ink-3); stroke-width: 2;}
.win .fb-foot.fb-updfoot{padding: calc(10 * var(--u)) calc(14 * var(--u)); gap: calc(10 * var(--u));}

/* mock-investigate.css */
.win .btn.iv-sm{height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); gap: calc(4 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11 * var(--u));}
.win .btn.iv-sm .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 1.8;}
.win .iv-pick{display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2); white-space: nowrap; flex: none;}
.win .iv-pick .sel{flex: 1; justify-content: space-between; min-width: 0;}
.win .fld.iv-tf{height: calc(22 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(12 * var(--u)); flex: none; box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .fld.iv-tf.iv-grow{flex: 1 1 0;}
.win .fld.iv-tf.iv-n90{width: calc(90 * var(--u)); font-variant-numeric: tabular-nums;}
.win .fld.iv-tf.iv-w95{width: calc(95 * var(--u));}
.win .iv-mono{width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; flex: none; font: 600 calc(11 * var(--u))/1 var(--font); font-style: normal; color: var(--ink-2); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .iv-mono.iv-lg{width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(8.6 * var(--u)); font-size: calc(14.7 * var(--u));}
.win .iv-chip{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); min-height: calc(20 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); font: 500 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2); white-space: nowrap; background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; flex: none;}
.win .iv-chip i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint));}
.win .iv-chip .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 1.8;}
.win .iv-lgd{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .iv-lgd i{width: calc(12 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .iv-lgd.iv-sq i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.5 * var(--u));}
.win .iv-lgd.iv-ink i{background: rgba(243, 245, 248, 0.55);}
.win .iv-badge .ic{stroke-width: 1.7;}
.win .notice.iv-banner{margin-bottom: calc(-6 * var(--u));}
.win .card.iv-card{display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .iv-ch{display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0;}
.win .iv-ch > div{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(20 * var(--u));}
.win .iv-ch b{font: 600 calc(14 * var(--u))/1.25 var(--font); letter-spacing: calc(-0.1 * var(--u)); white-space: nowrap;}
.win .iv-ch p{margin: 0; font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-3);}
.win .iv-line{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .iv-note{font-size: calc(11 * var(--u)); line-height: 1.32; color: var(--ink-2);}
.win .iv-note.iv-wide{font-size: calc(11.5 * var(--u));}
.win .iv-fine{font-size: calc(10.5 * var(--u)); line-height: 1.32; color: var(--ink-3);}
.win .iv-dim{color: var(--ink-2);}
.win .iv-w600{width: calc(600 * var(--u)); flex: none;}
.win .iv-w360{width: calc(360 * var(--u)); flex: none;}
.win .iv-tiles{display: flex; gap: calc(8 * var(--u));}
.win .iv-tile{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(11 * var(--u));}
.win .iv-tile small{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .iv-tile b{font: 600 calc(17 * var(--u))/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-tile u{text-decoration: none; margin-left: calc(3 * var(--u)); font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .iv-expl{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .iv-expl > .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-top: calc(1 * var(--u)); color: rgb(var(--c-accent));}
.win .iv-expl > div{min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .iv-expl b{font: 600 calc(12 * var(--u))/1.3 var(--font);}
.win .iv-expl span{font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .stage.iv-hs{grid-template-columns: calc(288 * var(--u)) minmax(0, 1fr); min-height: calc(268 * var(--u));}
.win .stage.iv-hs .stage-center{padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)); align-items: stretch; justify-content: flex-start;}
.win .iv-lead{display: flex; flex-direction: column; align-items: flex-start; min-width: 0;}
.win .iv-num{display: flex; align-items: baseline; gap: calc(3 * var(--u)); margin-top: calc(6 * var(--u)); font: 300 calc(46 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-1.84 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-num b{font-weight: 300;}
.win .iv-num u{text-decoration: none; font: 500 calc(19 * var(--u))/1 var(--font); letter-spacing: 0; color: var(--ink-2);}
.win .iv-scale{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(2 * var(--u));}
.win .iv-scale.iv-stack{flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u));}
.win .iv-longeye .stage-eye{gap: calc(6 * var(--u));}
.win .iv-longeye .caps-l{letter-spacing: calc(1.2 * var(--u));}
.win .iv-longeye .tc{letter-spacing: calc(-0.3 * var(--u));}
.win .iv-lead .stage-title{margin-top: calc(11 * var(--u));}
.win .iv-lead .stage-sub{margin-top: calc(6 * var(--u));}
.win .iv-chips{display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u));}
.win .iv-chips.iv-flat{margin-top: 0;}
.win .iv-hc{width: 100%; min-width: 0; display: flex; flex-direction: column;}
.win .iv-hh{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(24 * var(--u)); white-space: nowrap;}
.win .iv-hh > b{font: 600 calc(12.5 * var(--u))/1.2 var(--font);}
.win .iv-hh > b + span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .iv-film{margin-top: calc(2 * var(--u));}
.win .iv-film-r{display: flex; gap: calc(7 * var(--u)); padding-top: calc(18 * var(--u));}
.win .iv-plot{position: relative; flex: 1; min-width: 0; height: calc(112 * var(--u));
  background: linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)) top / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13)) bottom / 100% 1px no-repeat;}
.win .iv-plot .chart .ln{stroke-width: calc(1.6 * var(--u));}
.win .iv-plot .chart .ar{fill: rgb(var(--tint) / 0.18);}
.win .iv-axis{width: calc(34 * var(--u)); height: calc(112 * var(--u)); flex: none; display: flex; flex-direction: column; justify-content: space-between; font-size: calc(10 * var(--u)); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-clocks{display: flex; justify-content: space-between; margin: calc(9 * var(--u)) calc(41 * var(--u)) 0 0;}
.win .iv-stem{position: absolute; bottom: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.26);}
.win .iv-stem.on{border-left-color: rgba(255, 255, 255, 0.5);}
.win .iv-pk{position: absolute; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--tint)) inset; z-index: 1;}
.win .iv-flag{position: absolute; bottom: calc(-7.5 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-left: calc(-7.5 * var(--u)); border-radius: 50%; display: grid; place-items: center; z-index: 2;
  font: 600 calc(9 * var(--u))/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .iv-flag.on{background: rgb(var(--tint)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;}
.win .iv-ph{position: absolute; top: calc(-22 * var(--u)); bottom: 0; width: calc(68 * var(--u)); margin-left: calc(-34 * var(--u));}
.win .iv-ph::before{content: ""; position: absolute; left: 50%; top: calc(18 * var(--u)); bottom: 0; width: calc(1.5 * var(--u)); margin-left: calc(-0.75 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 calc(5 * var(--u)) rgb(var(--tint) / 0.6);}
.win .iv-ph b{position: absolute; top: calc(1.5 * var(--u)); left: 50%; transform: translateX(-50%); height: calc(15 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(99 * var(--u)); display: grid; place-items: center;
  font: 500 calc(10 * var(--u))/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .iv-ph i{position: absolute; left: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin: calc(-6.5 * var(--u)) 0 0 calc(-6.5 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgb(var(--tint) / 0.35)); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.92) inset, 0 0 calc(6 * var(--u)) rgb(var(--tint) / 0.6);}
.win .iv-ph i::after{content: ""; position: absolute; inset: calc(4.5 * var(--u)); border-radius: 50%; background: rgb(var(--tint));}
.win .iv-transport{margin-top: calc(9 * var(--u)); display: flex; flex-direction: column; gap: calc(7 * var(--u));}
.win .iv-transport > div{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .iv-transport > div:last-child{min-height: calc(28 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .iv-sld{position: relative; flex: 1; min-width: calc(120 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.14);}
.win .iv-sld i{position: absolute; left: 0; top: 0; bottom: 0; width: calc(calc(6 * var(--u)) + (100% - calc(12 * var(--u))) * var(--f)); border-radius: calc(4 * var(--u)); background: rgb(var(--c-accent));}
.win .iv-sld::after{content: ""; position: absolute; top: calc(-4 * var(--u)); left: calc((100% - calc(12 * var(--u))) * var(--f)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.5);}
.win .iv-pos{font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .card.iv-peaks{display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u));}
.win .iv-peaks-h{flex: 1 1 0; min-width: calc(180 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-peaks-h b{font: 600 calc(14 * var(--u))/1.25 var(--font); letter-spacing: calc(-0.1 * var(--u));}
.win .iv-peaks-h span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .iv-chaps{width: calc(720 * var(--u)); flex: none; display: flex; gap: calc(8 * var(--u));}
.win .iv-chap{flex: 1 1 0; min-width: 0; min-height: calc(38 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .iv-chap > i{width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; flex: none; font: 600 calc(10.5 * var(--u))/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-2); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .iv-chap > span{min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .iv-chap b{font: 600 calc(12.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-chap small{font: 400 calc(10.5 * var(--u))/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap;}
.win .iv-chap.on{background: rgb(var(--c-accent) / 0.16); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--c-accent) / 0.7) inset, 0 0 calc(7 * var(--u)) rgb(var(--c-accent) / 0.4);}
.win .iv-chap.on > i{background: rgb(var(--c-accent)); color: #fff; box-shadow: none;}
.win .iv-src-h{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .iv-src-h b{flex: 1; font: 600 calc(15 * var(--u))/1.25 var(--font);}
.win .iv-src-l{margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-src-n{margin-top: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .iv-src-m{display: flex; gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); padding-top: calc(11 * var(--u)); border-top: 1px solid var(--hair);}
.win .iv-src-m > div{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-src-m .iv-lgd{font-size: calc(11.5 * var(--u));}
.win .iv-src-m b{font: 600 calc(19 * var(--u))/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-src-m u{text-decoration: none; margin-left: calc(3 * var(--u)); font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .iv-src-m small{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-wt-h,.win .iv-wt-r{display: grid; grid-template-columns: minmax(0, 1fr) calc(96 * var(--u)) calc(90 * var(--u)) calc(100 * var(--u)); column-gap: calc(10 * var(--u)); align-items: center; padding: 0 calc(10 * var(--u));}
.win .iv-wt-h{padding-bottom: calc(6 * var(--u)); font: 600 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-3); border-bottom: 1px solid var(--hair); white-space: nowrap;}
.win .iv-wt-h span + span,.win .iv-wt-r > span + span{text-align: right;}
.win .iv-wt-list{height: calc(320 * var(--u)); overflow: hidden; display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(4 * var(--u)) 0; border-bottom: 1px solid var(--hair);}
.win .iv-wt-r{min-height: calc(40 * var(--u)); padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums; flex: none;}
.win .iv-wt-r.on{background: rgb(var(--c-accent) / 0.12); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.35) inset;}
.win .iv-wt-n{display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;}
.win .iv-wt-n > span{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-wt-n b{font: 500 calc(12.5 * var(--u))/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .iv-wt-n small{font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink-2); white-space: nowrap;}
.win .iv-wt-c{display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u));}
.win .iv-wt-c .meter{width: 100%;}
.win .iv-wt-f{padding-top: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .card.iv-detail{display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .iv-dh{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .iv-dh > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-dh b{font: 600 calc(15 * var(--u))/1.25 var(--font);}
.win .iv-dh small{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .iv-lab{display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));}
.win .iv-plotcol{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .iv-chartbox{display: flex; flex-direction: column; gap: calc(4 * var(--u));}
.win .iv-chart-c{font: 500 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .iv-chart{display: flex; gap: calc(7 * var(--u));}
.win .iv-yax{flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: calc(10.5 * var(--u)); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-cplot{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .iv-cbox{position: relative;
  background: linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)) top / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13)) bottom / 100% 1px no-repeat;}
.win .iv-cbox .chart .ln{stroke-width: calc(2 * var(--u));}
.win .iv-cbox .chart .ar{fill: rgb(var(--tint) / 0.18);}
.win .iv-xax{display: flex; justify-content: space-between; font-size: calc(10.5 * var(--u)); line-height: 1.2; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-cur{position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.6);}
.win .iv-cur::after{content: ""; position: absolute; left: calc(-3.5 * var(--u)); top: var(--y); width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-3 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--tint)), 0 0 calc(8 * var(--u)) rgb(var(--tint));}
.win .iv-scope{display: flex; align-items: center; gap: calc(6 * var(--u)); font: 500 calc(11.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .iv-scope .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .iv-totals{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .iv-totals .iv-lgd{font-size: calc(11.5 * var(--u)); font-variant-numeric: tabular-nums; gap: calc(8 * var(--u));}
.win .iv-pt{display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--hair);}
.win .iv-pt > b{margin-bottom: calc(4 * var(--u)); font: 600 calc(12.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .iv-pt-h,.win .iv-pt-r{display: grid; grid-template-columns: minmax(0, 1fr) calc(90 * var(--u)) calc(100 * var(--u)); column-gap: calc(10 * var(--u)); align-items: center; padding: 0 calc(8 * var(--u));}
.win .iv-pt-h{font: 600 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-3);}
.win .iv-pt-r{min-height: calc(26 * var(--u)); font-size: calc(11.5 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-pt-h span + span,.win .iv-pt-r span + span{text-align: right;}
.win .iv-period{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .iv-grid{align-self: flex-start; display: grid; grid-template-columns: repeat(4, max-content); column-gap: calc(16 * var(--u)); row-gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.25; font-variant-numeric: tabular-nums;}
.win .iv-grid .iv-hd{font: 600 calc(11 * var(--u))/1.25 var(--font); color: var(--ink-2);}
.win .iv-grid .iv-cv{color: var(--ink-2);}
.win .iv-applines{align-self: flex-start; display: flex; flex-direction: column; font-size: calc(11 * var(--u)); line-height: 1.38; font-variant-numeric: tabular-nums;}
.win .iv-card > .lblc{align-self: flex-start;}
.win .iv-card .lblc .cb{width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3.5 * var(--u));}
.win .iv-ctl{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .iv-apps{display: flex; align-items: flex-start; gap: calc(16 * var(--u));}
.win .iv-applist{width: calc(260 * var(--u)); flex: none; display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .iv-applist > div:first-child{height: calc(320 * var(--u)); overflow: hidden; display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .iv-app{display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(7 * var(--u)); border-radius: calc(7 * var(--u)); flex: none;}
.win .iv-app.on{background: var(--raised-2);}
.win .iv-app > span:first-child{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-app b{font: 500 calc(12 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .iv-app small{font-size: calc(10 * var(--u)); line-height: 1.2; color: var(--ink-2);}
.win .iv-app > span:last-child{font-size: calc(11 * var(--u)); font-variant-numeric: tabular-nums;}
.win .iv-pager{display: flex; align-items: center; gap: calc(8 * var(--u)); padding-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-appd{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .iv-appd > .iv-note:nth-child(2){margin-top: calc(-10 * var(--u));}
.win .iv-appname{font: 600 calc(15 * var(--u))/1.25 var(--font);}
.win .stage.iv-ss{grid-template-columns: calc(286 * var(--u)) minmax(0, 1fr) calc(278 * var(--u)); min-height: calc(232 * var(--u));}
.win .stage.iv-ss .stage-center{flex-direction: column; gap: calc(12 * var(--u)); padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u));}
.win .stage.iv-ss .stage-trail{justify-content: flex-start; gap: 0;}
.win .stage.iv-ss .stage-trail .hr{margin: calc(12 * var(--u)) 0;}
.win .iv-recname{font: 500 calc(12 * var(--u))/1.3 var(--font);}
.win .iv-where{display: flex; align-items: flex-start; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-3);}
.win .iv-where span{min-width: 0; overflow-wrap: anywhere;}
.win .iv-where .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(2 * var(--u));}
.win .iv-prompt{font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2); text-align: center;}
.win .iv-lens{position: relative; display: block; width: calc(146 * var(--u)); height: calc(146 * var(--u)); flex: none;}
.win .iv-lens.iv-stop{width: calc(104 * var(--u)); height: calc(104 * var(--u));}
.win .iv-lens svg{position: absolute; inset: 0; width: 100%; height: 100%;}
.win .iv-lens line{stroke: rgba(255, 255, 255, 0.15); stroke-width: calc(1 * var(--u)); stroke-linecap: round; vector-effect: non-scaling-stroke;}
.win .iv-lens line.iv-maj{stroke: rgba(255, 255, 255, 0.3);}
.win .iv-lens-rim{position: absolute; inset: 6%; border-radius: 50%; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 40%, rgb(var(--c-critical) / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.win .iv-lens-face{position: absolute; inset: 11%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding-top: calc(7 * var(--u));
  background: radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 52%, rgba(0, 0, 0, 0.3)); box-shadow: 0 calc(9 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.26) inset;}
.win .iv-lens-face i{width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 52%), rgb(var(--c-critical)); box-shadow: 0 0 0 calc(4 * var(--u)) rgb(var(--c-critical) / 0.22), 0 0 calc(9 * var(--u)) rgb(var(--c-critical) / 0.55);}
.win .iv-lens-face b{font: 600 calc(10.5 * var(--u))/1 var(--font); letter-spacing: calc(1.8 * var(--u)); text-indent: calc(1.8 * var(--u)); text-transform: uppercase; color: var(--ink-2);}
.win .iv-lens.iv-stop .iv-lens-face{gap: calc(8 * var(--u)); padding-top: calc(4 * var(--u));}
.win .iv-lens.iv-stop .iv-lens-face i{width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(4.5 * var(--u)); background: rgb(var(--c-critical)); box-shadow: 0 0 calc(9 * var(--u)) rgb(var(--c-critical) / 0.55);}
.win .iv-lens.iv-stop .iv-lens-face b{font-size: calc(9.5 * var(--u));}
.win .iv-deck{display: flex; align-items: center; gap: calc(26 * var(--u));}
.win .iv-deck > div{display: flex; flex-direction: column; align-items: flex-start; gap: calc(7 * var(--u));}
.win .iv-tc{display: flex; align-items: center; gap: calc(14.5 * var(--u));}
.win .iv-tc i{width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; flex: none; background: rgb(var(--c-critical)); box-shadow: 0 0 0 calc(4 * var(--u)) rgb(var(--c-critical) / 0.25), 0 0 calc(8 * var(--u)) rgb(var(--c-critical) / 0.55);}
.win .iv-tc b{font: 300 calc(66 * var(--u))/1 var(--font-display); letter-spacing: calc(-1.98 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-run-a{font-size: calc(12 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-run-b{font-size: calc(11.5 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-limits{display: flex; flex-direction: column; gap: calc(9 * var(--u));}
.win .iv-limits > div:first-child{display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(3 * var(--u)) calc(8 * var(--u));}
.win .iv-limits .linkbtn{font-size: calc(11.5 * var(--u));}
.win .iv-limits-g{display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)) calc(14 * var(--u));}
.win .iv-limits-g span{display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0;}
.win .iv-limits-g b{font: 600 calc(14 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-limits-g small{font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink-3); white-space: nowrap;}
.win .iv-saved{width: calc(460 * var(--u)); flex: none; align-self: flex-start; display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0;}
.win .iv-rcol{min-width: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u));}
.win .iv-saved-h{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: 0 calc(4 * var(--u));}
.win .iv-saved-h > div{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .iv-saved-h b{font: 600 calc(14 * var(--u))/1.25 var(--font); letter-spacing: calc(-0.1 * var(--u));}
.win .iv-saved-h > span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-3);}
.win .card.iv-reel{display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u));}
.win .card.iv-reel.iv-replay{box-shadow: 0 0 0 1px rgb(var(--k) / 0.42) inset, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42);
  background: linear-gradient(rgb(var(--k) / 0.07), rgb(var(--k) / 0.07)), linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.03));}
.win .iv-reel-h{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .iv-reel-n{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-reel-n b{font: 600 calc(13 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .iv-reel-n span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .iv-reel-a{display: inline-flex; align-items: center; gap: calc(4 * var(--u)); flex: none;}
.win .iv-more{position: relative; display: inline-grid; place-items: center; width: calc(24 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--ink-2);}
.win .iv-more > .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u));}
.win .iv-more.iv-open{background: var(--raised-2); color: var(--ink);}
.win .pop.iv-menu{top: calc(100% + calc(4 * var(--u))); left: 0; min-width: calc(226 * var(--u)); color: var(--ink);}
.win .iv-reel-s{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .iv-reel-s > div:last-child{flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(5 * var(--u));}
.win .iv-rstrip{flex: 1; min-width: 0; height: calc(34 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); border-radius: calc(7 * var(--u)); box-shadow: 0 0 0 1px var(--hair) inset;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25 * var(--u)), var(--hair) calc(25 * var(--u)) calc(calc(25 * var(--u)) + 1px)) 0 calc(5 * var(--u)) / 100% calc(100% - calc(10 * var(--u))) no-repeat, var(--well);}
.win .iv-reel-m{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .iv-reel-c{display: flex; gap: calc(6 * var(--u));}
.win .iv-saved-f{display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: 0 calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3);}
.win .iv-saved-f > div{display: flex; align-items: flex-start; gap: calc(8 * var(--u));}
.win .iv-saved-f > div span:first-child{min-width: 0; overflow-wrap: anywhere;}
.win .iv-plain{font-size: calc(11.5 * var(--u)); color: var(--ink); white-space: nowrap;}
.win .iv-rep-h{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .iv-rep-h > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .iv-rep-h b{font: 600 calc(15 * var(--u))/1.25 var(--font);}
.win .iv-rep-h small{font-size: calc(11.5 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .iv-wellrow{display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums;}
.win .iv-wellrow > .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--ink-3);}
.win .iv-disc{display: flex; align-items: center; gap: calc(6 * var(--u)); font: 600 calc(12.5 * var(--u))/1.2 var(--font);}
.win .iv-disc .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2; color: var(--ink-2);}
.win .iv-ct-h,.win .iv-ct-r{display: grid; grid-template-columns: minmax(0, 1fr) calc(96 * var(--u)) calc(96 * var(--u)) calc(76 * var(--u)); column-gap: calc(12 * var(--u)); align-items: center; padding: 0 calc(8 * var(--u));}
.win .iv-ct-h{padding-bottom: calc(6 * var(--u)); font: 600 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-3); border-bottom: 1px solid var(--hair);}
.win .iv-ct-h span:nth-child(2),.win .iv-ct-h span:nth-child(3),.win .iv-ct-r > :nth-child(2),.win .iv-ct-r > :nth-child(3){text-align: right;}
.win .iv-ct-r{min-height: calc(30 * var(--u)); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums;}
.win .iv-ct-r + .iv-ct-r{background: linear-gradient(var(--hair), var(--hair)) calc(8 * var(--u)) 0 / calc(100% - calc(16 * var(--u))) 1px no-repeat;}
.win .iv-ct-r > :nth-child(2){color: var(--ink-2);}
.win .iv-ct-r b{font-weight: 600;}
.win .iv-pair{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .iv-pair .meter{height: calc(4 * var(--u)); box-shadow: none; background: rgba(255, 255, 255, 0.07);}
.win .iv-pair .meter i{box-shadow: none;}
.win .iv-int{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .iv-int > b{font: 600 calc(12 * var(--u))/1.3 var(--font);}
.win .iv-int > div{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u));}
.win .iv-int > div > span:not(.fld):not(.btn):not(.sp){color: var(--ink-2);}
.win .iv-ranges{display: flex; flex-direction: column; font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-cov{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .iv-cov b{font: 500 calc(12 * var(--u))/1.3 var(--font); font-variant-numeric: tabular-nums;}
.win .iv-cov span{font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .iv-wc-h,.win .iv-wc-r{display: grid; grid-template-columns: minmax(0, 1fr) calc(150 * var(--u)) calc(170 * var(--u)); column-gap: calc(10 * var(--u)); align-items: center; padding: 0 calc(8 * var(--u));}
.win .iv-wc-h{padding-bottom: calc(6 * var(--u)); font: 600 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-3); border-bottom: 1px solid var(--hair);}
.win .iv-wc-h span + span{text-align: right;}
.win .iv-wc-b{display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(4 * var(--u)) 0;}
.win .iv-wc-r{min-height: calc(30 * var(--u)); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums;}
.win .iv-wc-r em{font-style: normal; color: var(--ink-2);}
.win .iv-dv{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .iv-dv > i{position: relative; flex: 1; height: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--well);}
.win .iv-dv > i::before{content: ""; position: absolute; left: 50%; top: calc(-2 * var(--u)); bottom: calc(-2 * var(--u)); width: 1px; background: var(--hair-2);}
.win .iv-dv u{position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 30%), rgb(var(--tint));}
.win .iv-dv u.iv-neg{right: 50%; border-radius: calc(4 * var(--u)) 0 0 calc(4 * var(--u));}
.win .iv-dv u.iv-pos{left: calc(50% + 1px); border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;}
.win .iv-dv > span{width: calc(72 * var(--u)); flex: none; text-align: right;}
.win .iv-dv.t-memory > span{width: calc(80 * var(--u));}
.win .iv-sheet{display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u));}
.win .iv-sheet > div{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .iv-sheet .iv-grow{flex: 1 1 0; min-width: 0;}
.win .iv-sheet > .iv-marks{flex-direction: column; align-items: stretch; gap: calc(10 * var(--u)); min-height: calc(80 * var(--u));}
.win .iv-marks > div{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .iv-marks > div > span:first-child{width: calc(54 * var(--u)); flex: none;}
.win .stage.iv-ds{min-height: calc(216 * var(--u));}
.win .stage.iv-ds .stage-center{padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); align-items: stretch; justify-content: flex-start;}
.win .iv-count{font-size: calc(10.5 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-inc{width: 100%; min-width: 0; display: flex; flex-direction: column;}
.win .iv-inc-h{display: flex; align-items: baseline; gap: calc(12 * var(--u)); min-height: calc(18 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .iv-inc-l{margin-left: auto; display: flex; gap: calc(12 * var(--u)); font-size: calc(11 * var(--u));}
.win .iv-inc-l span{display: inline-flex; align-items: center; gap: calc(5 * var(--u));}
.win .iv-inc-l i{width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: rgb(var(--tint));}
.win .iv-inc-l i.iv-tick{width: calc(2 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--ink-2);}
.win .iv-track{position: relative; height: calc(128 * var(--u)); margin-top: calc(10 * var(--u));}
.win .iv-guide{position: absolute; top: calc(4 * var(--u)); height: calc(89 * var(--u)); width: 1px; background: linear-gradient(180deg, transparent, var(--hair-2));}
.win .iv-qt{position: absolute; top: calc(107 * var(--u)); height: calc(4 * var(--u)); width: 1px; background: var(--hair-2);}
.win .iv-rail{position: absolute; left: 0; right: 0; top: calc(95 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .iv-rail::after{content: ""; position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(1.5 * var(--u)); height: calc(2.5 * var(--u)); border-radius: calc(1.25 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);}
.win .iv-span{position: absolute; top: calc(97 * var(--u)); height: calc(6 * var(--u)); min-width: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint) / 0.62); box-shadow: 0 0 0 1px rgb(var(--tint)) inset;}
.win .iv-span.iv-glow{box-shadow: 0 0 0 1px rgb(var(--tint)) inset, 0 0 calc(7 * var(--u)) rgb(var(--tint) / 0.7);}
.win .iv-dtk{position: absolute; top: calc(91 * var(--u)); height: calc(18 * var(--u)); width: calc(2 * var(--u)); margin-left: calc(-1 * var(--u)); border-radius: calc(1 * var(--u)); background: rgb(var(--tint));}
.win .iv-stm{position: absolute; top: calc(19 * var(--u)); height: calc(72 * var(--u)); width: 1px; background: linear-gradient(180deg, rgb(var(--tint)), rgb(var(--tint) / 0.4));}
.win .iv-ifl{position: absolute; top: 0; height: calc(19 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; font: 600 calc(11 * var(--u))/1 var(--font);
  background: linear-gradient(rgb(var(--tint) / 0.13), rgb(var(--tint) / 0.13)), var(--surface); box-shadow: 0 0 0 1px rgb(var(--tint) / 0.44) inset;}
.win .iv-ifl i{width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; flex: none; background: rgb(var(--tint));}
.win .iv-ifl em{margin-left: calc(-2 * var(--u)); font-style: normal; font-weight: 400; color: var(--ink-2);}
.win .iv-ifl.iv-glow{box-shadow: 0 0 0 1px rgb(var(--tint) / 0.75) inset, 0 0 calc(9 * var(--u)) rgb(var(--tint) / 0.6);}
.win .iv-now{position: absolute; right: calc(-3.5 * var(--u)); top: calc(96.5 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--c-accent));}
.win .iv-ax{position: absolute; top: calc(114 * var(--u)); transform: translateX(-50%); font: 400 calc(10 * var(--u))/1 var(--font-mono); color: var(--ink-3); white-space: nowrap;}
.win .iv-ax.iv-first{transform: none;}
.win .iv-ax.iv-last{transform: translateX(-100%); color: var(--ink-2);}
.win .iv-cnt{display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(8 * var(--u)); padding-top: calc(9 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11 * var(--u)); white-space: nowrap;}
.win .iv-cnt > span{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: var(--ink-2);}
.win .iv-cnt i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint));}
.win .iv-cnt b{font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;}
.win .iv-cnt b.iv-none{color: var(--ink-2);}
.win .iv-cnt .iv-cnote{margin-left: auto; color: var(--ink-3);}
.win .card.iv-tool{display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); box-shadow: none;}
.win .iv-filters{display: inline-flex; align-items: center; gap: calc(10 * var(--u));}
.win .iv-total{font-size: calc(12 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .iv-obs{min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: calc(10 * var(--u));}
.win .iv-obs > div:first-child{display: flex; align-items: baseline; gap: calc(8 * var(--u)); padding: 0 calc(2 * var(--u));}
.win .iv-obs > div:first-child b{font: 600 calc(14 * var(--u))/1.25 var(--font); letter-spacing: calc(-0.1 * var(--u));}
.win .iv-obs > div:first-child span{font-size: calc(11.5 * var(--u)); color: var(--ink-3);}
.win .card.iv-ob{display: flex; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u));}
.win .iv-ob-b{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .iv-ob-t{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .iv-ob-t > div:first-child{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .iv-ob-t b{font: 600 calc(13.5 * var(--u))/1.25 var(--font);}
.win .iv-ob-t > div:first-child > span{display: flex; gap: calc(6 * var(--u));}
.win .iv-ob-t > div:last-child{flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .iv-ob-t > div:last-child span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .iv-ob-t > div:last-child small{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .iv-ob-d{font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .iv-ob-e{font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .iv-ob-f{display: flex; align-items: center; gap: calc(6 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11.5 * var(--u)); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .iv-ob-f > .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .iv-ob-f > span:not(.btn){color: var(--ink-2);}
.win .iv-ob-f > small{font-size: calc(11.5 * var(--u)); color: var(--ink-3);}
.win .iv-ob-f .btn + .btn{margin-left: calc(2 * var(--u));}
.win .iv-rules{display: flex; flex-direction: column;}
.win .iv-rules > .eyb{margin-bottom: calc(4 * var(--u));}
.win .iv-rules > div{display: flex; align-items: flex-start; gap: calc(9 * var(--u)); padding: calc(7 * var(--u)) 0; font-size: calc(12 * var(--u)); line-height: 1.32;}
.win .iv-rules > div + div{border-top: 1px solid var(--hair);}
.win .iv-rules > div > span:last-child{flex: 1; min-width: 0; padding-top: calc(3 * var(--u)); color: var(--ink-2);}
.win .iv-rules b{font-weight: 600; color: var(--ink);}

/* mock-monitor-a.css */
.win .ma-mini{display: flex; align-items: flex-start; gap: calc(7 * var(--u));}
.win .ma-mini-y{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; flex: none; font: 400 calc(10.5 * var(--u))/1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-mini-p{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .ma-mini-x{display: flex; justify-content: space-between; font: 400 calc(10.5 * var(--u))/calc(12 * var(--u)) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-plot{position: relative; border-top: 1px solid rgba(255, 255, 255, 0.055); border-bottom: 1px solid rgba(255, 255, 255, 0.13);}
.win .ma-plot > .sparkbox{position: absolute; left: 0; top: 0;}
.win .ma-plot .chart .ln{stroke-width: calc(1.8 * var(--u));}
.win .ma-dash-h{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .ma-dash-h > div{display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0;}
.win .ma-dash-h > div b{font: 600 calc(17 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .ma-dash-h > div span{font: 400 calc(11.5 * var(--u))/1.25 var(--font); color: var(--ink-3);}
.win .ma-dash-h .pill b{font-weight: 600;}
.win .ma-dgrid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(14 * var(--u));}
.win .ma-dcard{min-width: 0;}
.win .ma-dcard .card-h{gap: calc(8 * var(--u)); margin-bottom: calc(10 * var(--u));}
.win .ma-open{width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink-2); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .ma-open .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 1.9;}
.win .ma-dval{display: flex; align-items: baseline; gap: calc(3 * var(--u)); white-space: nowrap;}
.win .ma-dval b{font: 600 calc(27 * var(--u))/1.1 var(--font-display); letter-spacing: calc(-0.4 * var(--u)); font-variant-numeric: tabular-nums;}
.win .ma-dval u{text-decoration: none; font: 500 calc(13.5 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .ma-ddetail{margin-top: calc(5 * var(--u)); min-height: calc(27 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2);}
.win .ma-dcard .ma-mini{margin-top: calc(14 * var(--u));}
.win .ma-dlegend{display: flex; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u));}
.win .ma-dlegend span{flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: calc(6 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2); white-space: nowrap;}
.win .ma-dlegend i{width: calc(10 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .ma-dfoot{margin-top: calc(8 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .ma-ctiles{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(10 * var(--u));}
.win .ma-ctile{display: flex; flex-direction: column; gap: calc(9 * var(--u)); min-width: 0; padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .ma-ctile > div{display: flex; align-items: baseline; justify-content: space-between; gap: calc(4 * var(--u)); white-space: nowrap;}
.win .ma-ctile > div span{font: 400 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .ma-ctile b{font: 600 calc(15 * var(--u))/1.2 var(--font-display); font-variant-numeric: tabular-nums;}
.win .stage.ma-band{grid-template-columns: calc(396 * var(--u)) minmax(0, 1fr);}
.win .ma-band .stage-lead{padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u)) calc(20 * var(--u)); gap: 0;}
.win .ma-band .stage-center{padding: calc(11 * var(--u)) calc(6 * var(--u)) calc(11 * var(--u)) 0; align-items: flex-start; justify-content: flex-end;}
.win .ma-band-t{margin-top: calc(6 * var(--u)); font: 600 calc(18 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.3 * var(--u)); white-space: nowrap;}
.win .ma-band-s{margin-top: calc(7 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .ma-band-s span{display: flex; align-items: center; gap: calc(6 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-band-s .ic{width: calc(14 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .ma-figs{display: flex;}
.win .ma-fig{width: calc(184 * var(--u)); min-width: 0; padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u)); display: flex; flex-direction: column;
  background: linear-gradient(var(--hair), var(--hair)) left calc(2 * var(--u)) / 1px calc(100% - calc(4 * var(--u))) no-repeat;}
.win .ma-fig-l{display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(13 * var(--u));}
.win .ma-fig-l i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); flex: none; background: rgb(var(--tint)); box-shadow: 0 0 calc(4 * var(--u)) rgb(var(--tint) / 0.55);}
.win .ma-fig-n{display: flex; align-items: baseline; gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); white-space: nowrap;}
.win .ma-fig-n b{font: 300 calc(27 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-1 * var(--u)); font-variant-numeric: tabular-nums;}
.win .ma-fig-n u{text-decoration: none; font: 500 calc(11.5 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .ma-fig-n u.x{margin-left: calc(3 * var(--u));}
.win .ma-fig-s{margin-top: calc(1 * var(--u)); font: 600 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-fig-c{margin-top: calc(1 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2); white-space: nowrap;}
.win .ma-tools{padding: calc(12 * var(--u)); box-shadow: none; display: flex; flex-direction: column; gap: calc(9 * var(--u));}
.win .ma-tools-r{display: flex; align-items: center; gap: calc(14 * var(--u));}
.win .ma-tools-g{display: flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(11.5 * var(--u))/1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-tools .btn{height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .btn .ma-chev{width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: var(--ink-2); stroke-width: 2;}
.win .ma-tools .btn.ma-ib{width: calc(26 * var(--u)); padding: 0;}
.win .ma-sep{width: 1px; height: calc(16 * var(--u)); margin: 0 calc(2 * var(--u)); background: var(--hair-2);}
.win .ma-legend{font: 400 calc(11 * var(--u))/calc(14 * var(--u)) var(--font); color: var(--ink-2);}
.win .ma-split{display: flex; gap: calc(14 * var(--u)); min-width: 0;}
.win .ma-tcard{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;}
.win .ma-th,.win .ma-tr{display: grid; grid-template-columns: var(--ma-cols);}
.win .ma-th{flex: none; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); background: rgba(20, 23, 28, 0.97); border-bottom: 1px solid var(--hair); font: 600 calc(11 * var(--u))/1 var(--font); color: var(--ink-2); white-space: nowrap;}
.win .ma-th > span{display: flex; min-width: 0; padding: 0 calc(8 * var(--u));}
.win .ma-th > span.r{justify-content: flex-end;}
.win .ma-th em{position: relative; display: flex; align-items: center; gap: calc(3 * var(--u)); font-style: normal;}
.win .ma-th .sorted{color: var(--ink);}
.win .ma-th .sorted .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.4;}
.win .ma-th .sorted em::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); background: rgb(var(--c-accent));}
.win .ma-tb{position: relative; flex: 1 1 0; min-height: 0; overflow: hidden;}
.win .ma-tbi{position: absolute; left: 0; right: 0; top: calc(1 * var(--u)); height: calc((100% - calc(1 * var(--u))) * 20 / 19.8); display: flex; flex-direction: column;}
.win .ma-tr{position: relative; flex: 1 1 0; min-height: 0; margin: 0 calc(14 * var(--u)) calc(1 * var(--u)); border-radius: calc(7 * var(--u)); align-items: center; font: 400 calc(13 * var(--u))/1 var(--font);}
.win .ma-tr.z{background: rgba(255, 255, 255, 0.026);}
.win .ma-tr.on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.3), rgb(var(--c-accent) / 0.1)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.62) inset, 0 0 calc(9 * var(--u)) rgb(var(--c-accent) / 0.3);}
.win .ma-tr.on::before{content: ""; position: absolute; left: 0; top: calc(4 * var(--u)); bottom: calc(4 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgb(var(--c-accent));}
.win .ma-tr > span{position: relative; align-self: stretch; display: flex; align-items: center; min-width: 0; padding: 0 calc(8 * var(--u)); white-space: nowrap;}
.win .ma-tr > .r{justify-content: flex-end; font-variant-numeric: tabular-nums;}
.win .ma-tr > .srt{font-weight: 600;}
.win .ma-tr > .na{color: var(--ink-3);}
.win .ma-tr > .r i{position: absolute; right: calc(8 * var(--u)); bottom: calc(2.5 * var(--u)); height: calc(2 * var(--u)); min-width: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); width: calc((100% - calc(15 * var(--u))) * var(--p)); background: rgb(var(--tint) / 0.8);}
.win .ma-nm{gap: calc(7 * var(--u));}
.win .ma-nm b{font-weight: 500; overflow: hidden; text-overflow: ellipsis;}
.win .ma-nm .appi{width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(10 * var(--u));}
.win .ma-nm .appi .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 1.8; color: var(--ink-2);}
.win .ma-insp{flex: none; width: calc(316 * var(--u)); display: flex; flex-direction: column;}
.win .ma-insp-empty{margin: auto; max-width: calc(306 * var(--u)); padding: calc(28 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center;}
.win .ma-insp-empty .ic{width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke-width: 1.1; color: var(--ink-3);}
.win .ma-insp-empty b{font: 500 calc(12.5 * var(--u))/1.3 var(--font);}
.win .ma-insp-empty span{font: 400 calc(11.5 * var(--u))/1.35 var(--font); color: var(--ink-2);}
.win .ma-insp-h{flex: none; display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .ma-insp-h .appi{width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(17 * var(--u));}
.win .ma-insp-n{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .ma-insp-n b{font: 600 calc(15 * var(--u))/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-insp-n span{font: 400 calc(11.5 * var(--u))/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-insp-cpu{flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(1 * var(--u));}
.win .ma-insp-cpu > span:first-child{display: flex; align-items: baseline; gap: calc(2 * var(--u));}
.win .ma-insp-cpu b{font: 300 calc(24 * var(--u))/1.04 var(--font-display); letter-spacing: calc(-0.96 * var(--u)); font-variant-numeric: tabular-nums;}
.win .ma-insp-cpu u{text-decoration: none; font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .ma-insp-s{flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) 0;}
.win .ma-insp-s > *{flex: none;}
.win .ma-trends{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .ma-metric{display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .ma-metric + .ma-trend + .ma-metric{margin-top: calc(2 * var(--u));}
.win .ma-metric i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); flex: none; background: rgb(var(--tint));}
.win .ma-metric b{font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .ma-metric span{flex: 1; min-width: 0; font: 400 calc(10.5 * var(--u))/1.25 var(--font); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;}
.win .ma-metric em{font: 600 calc(12 * var(--u))/1.25 var(--font); font-style: normal; font-variant-numeric: tabular-nums;}
.win .ma-trend{position: relative; height: calc(44 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.13); border-top: 1px solid rgba(255, 255, 255, 0.06); padding-right: calc(4 * var(--u));}
.win .ma-trend > em{position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); padding: calc(1 * var(--u)) calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgb(18 21 26 / 0.78); font: 400 calc(9.5 * var(--u))/1.2 var(--font); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .ma-trend-x{display: flex; justify-content: space-between; font: 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .ma-facts{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(10 * var(--u)) calc(14 * var(--u));}
.win .ma-facts > div{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .ma-facts span{font: 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-3); white-space: nowrap;}
.win .ma-facts b{font: 500 calc(12.5 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-members{flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(4 * var(--u));}
.win .ma-members > *{flex: none;}
.win .ma-members-h{display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(3 * var(--u));}
.win .ma-members-h > span:last-child{font: 400 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-3);}
.win .ma-member{display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .ma-member > .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .ma-member > .ic:last-child{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2;}
.win .ma-member > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .ma-member b{font: 500 calc(12 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-member span{font: 400 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-insp-f{flex: none; display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border-top: 1px solid var(--hair);}
.win .ma-insp-f > div{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .ma-insp-f > div:last-child{gap: calc(12 * var(--u));}
.win .ma-insp-f .btn{height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); border-radius: calc(6 * var(--u));}
.win .ma-insp-f > div:first-child .btn{flex: 1 1 0; min-width: 0; padding: 0 calc(4 * var(--u));}
.win .ma-insp-f .btn.ghost{padding: 0 calc(4 * var(--u));}
.win .btn.ma-force{color: rgb(var(--c-critical));}
.win .ma-rv-h{display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(-4 * var(--u)) 0 0;}
.win .ma-rv-h .itile{width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10.8 * var(--u)); font-size: calc(18 * var(--u)); box-shadow: 0 0 0 1px rgb(var(--tint) / 0.3) inset, 0 0 calc(8 * var(--u)) rgb(var(--tint) / 0.4);}
.win .ma-rv-h > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .ma-rv-h h4{font: 600 calc(20 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.3 * var(--u));}
.win .ma-rv-h > div span{font: 400 calc(11.5 * var(--u))/1.25 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .ma-rv-b{margin: calc(14 * var(--u)) calc(-22 * var(--u)) 0; padding: calc(18 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);}
.win .ma-rv-why{display: flex; align-items: flex-start; gap: calc(9 * var(--u)); font: 400 calc(12.5 * var(--u))/1.3 var(--font); color: var(--ink-2);}
.win .ma-rv-why .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(1 * var(--u));}
.win .ma-rv-intro{font: 400 calc(12 * var(--u))/1.35 var(--font); color: var(--ink-2);}
.win .ma-rv-sec{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .ma-rv-grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(8 * var(--u));}
.win .ma-rv-card{display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .ma-rv-card b{font: 600 calc(12.5 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-rv-card > span{font: 400 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .ma-rv-card code{font: 400 calc(10.5 * var(--u))/1.25 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere;}
.win .ma-rv-card code span{white-space: nowrap;}
.win .ma-rv-card code.q{color: var(--ink-3);}
.win .ma-rv-note{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; font: 400 calc(11.5 * var(--u))/1.35 var(--font); color: var(--ink-2);}
.win .ma-rv-note .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: rgb(var(--c-accent));}
.win .ma-rv-f{display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(14 * var(--u)) 0 calc(-8 * var(--u));}
.win .ma-rv-f > span:first-child{font: 400 calc(12 * var(--u))/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .btn.ma-critical{background: rgb(var(--c-critical)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 0 calc(12 * var(--u)) rgb(var(--c-critical) / 0.35);}
.win .ma-cstage{grid-template-columns: calc(276 * var(--u)) minmax(0, 1fr) calc(326 * var(--u));}
.win .ma-cnotes{display: flex; flex-direction: column; gap: calc(3 * var(--u)); font: 400 calc(10.5 * var(--u))/1.25 var(--font); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .ma-dialbox{position: relative;}
.win .ma-dialbox .spk{transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--ma-turn));}
.win .ma-dialbox .arc2{opacity: 1; filter: drop-shadow(0 0 calc(5 * var(--u)) rgb(var(--tint) / 0.6));}
.win .ma-mark{position: absolute;}
.win .ma-mark.top{left: 50%; bottom: 100%; margin-bottom: calc(-1 * var(--u)); transform: translateX(-50%);}
.win .ma-mark.bot{left: 50%; top: 100%; margin-top: calc(-1 * var(--u)); transform: translateX(-50%);}
.win .ma-mark.right{left: 100%; top: 50%; margin-left: calc(4 * var(--u)); transform: translateY(-50%);}
.win .ma-mark.left{right: 100%; top: 50%; margin-right: calc(4 * var(--u)); transform: translateY(-50%);}
.win .ma-lens-n{font: 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .ma-cparts{display: flex; flex-direction: column; gap: calc(15 * var(--u));}
.win .ma-cpart{display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0;}
.win .ma-cpart-h{display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .ma-cpart-h i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(3 * var(--u)); flex: none; background: rgb(var(--tint));}
.win .ma-cpart.neutral .ma-cpart-h i{background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .ma-cpart-h > span:last-child{margin-left: auto; font: 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .ma-cpart-v{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .ma-cpart-v > span:first-child{flex: none; width: calc(80 * var(--u)); display: flex; align-items: baseline; gap: calc(3 * var(--u)); white-space: nowrap;}
.win .ma-cpart-v b{font: 500 calc(22 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.5 * var(--u)); font-variant-numeric: tabular-nums;}
.win .ma-cpart-v u{text-decoration: none; font: 500 calc(12 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .ma-cpart-v .sparkbox{flex: 1; min-width: 0;}
.win .ma-cpart-s{display: flex; gap: calc(8 * var(--u)); font: 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-range{display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u));}
.win .ma-range .seg{width: calc(220 * var(--u));}
.win .ma-range .seg span{flex: 1; text-align: center;}
.win .ma-range .btn{height: calc(20 * var(--u)); width: calc(24 * var(--u)); padding: 0; border-radius: calc(6 * var(--u));}
.win .ma-range .btn .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2;}
.win .ma-total{--tint: 150 156 166;}
.win .ma-total .ln{stroke: rgb(243 245 248 / 0.55);}
.win .ma-clegend{display: flex; align-items: center; margin-top: calc(10 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2); white-space: nowrap;}
.win .ma-clegend > div{display: flex; align-items: center; gap: calc(16 * var(--u));}
.win .ma-clegend > div span{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .ma-clegend i{width: calc(10 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint));}
.win .ma-clegend .ma-total i{background: rgb(243 245 248 / 0.55);}
.win .ma-clegend em{font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .ma-hint{margin-top: calc(10 * var(--u)); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2);}
.win .ma-ccores{padding-bottom: 0;}
.win .ma-gtiles{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(7 * var(--u));}
.win .ma-gtile{display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; padding: calc(7 * var(--u)) calc(9 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: rgb(var(--c-cpu) / var(--w)); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .ma-gtile > div{display: flex; align-items: baseline; justify-content: space-between; gap: calc(4 * var(--u)); white-space: nowrap;}
.win .ma-gtile span:not(.meter){font: 400 calc(11 * var(--u))/1.2 var(--font); color: var(--ink-2);}
.win .ma-gtile b{font: 600 calc(13 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .ma-cfoot{display: flex; gap: calc(10 * var(--u)); margin: calc(14 * var(--u)) calc(-16 * var(--u)) 0; padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)); border-top: 1px solid var(--hair); font: 400 calc(11 * var(--u))/calc(13.5 * var(--u)) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .ma-jump{place-items: start center; padding-top: calc(86 * var(--u));}
.win .ma-jpanel{width: calc(620 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 calc(22 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.6); overflow: hidden;}
.win .ma-jfield{display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: 1px solid var(--hair); font: 400 calc(16 * var(--u))/1 var(--font);}
.win .ma-jfield > .ic{width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: var(--ink-2);}
.win .ma-jfield b{position: relative; font-weight: 400;}
.win .ma-jfield b::after{content: ""; position: absolute; left: 100%; top: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); margin-left: calc(1 * var(--u)); width: calc(1.5 * var(--u)); border-radius: calc(1 * var(--u)); background: rgb(var(--c-accent));}
.win .ma-jlist{display: flex; flex-direction: column; padding: 0 calc(8 * var(--u)) calc(8 * var(--u));}
.win .ma-jlist > div{display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .ma-jhead{padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); font: 600 calc(10.5 * var(--u))/1.25 var(--font); letter-spacing: calc(0.8 * var(--u)); text-transform: uppercase; color: var(--ink-3);}
.win .ma-jrow{display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(9 * var(--u));}
.win .ma-jrow.on{background: rgb(var(--c-accent) / 0.17);}
.win .ma-jtile{width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; flex: none; background: var(--raised-2); color: var(--ink-2);}
.win .ma-jtile .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 1.7;}
.win .ma-jrow > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .ma-jrow b{font: 600 calc(13 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-jrow > div > span{font: 400 calc(11 * var(--u))/1.25 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .ma-jrow em{flex: none; font: 400 calc(11 * var(--u))/1 var(--font); font-style: normal; color: var(--ink-3);}
.win .ma-jfoot{display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(16 * var(--u)); border-top: 1px solid var(--hair); font: 400 calc(11 * var(--u))/1 var(--font); color: var(--ink-3);}

/* mock-monitor-b.css */
.win .stage.mb-st-mem{grid-template-columns: calc(282 * var(--u)) minmax(0, 1fr) calc(234 * var(--u)); min-height: calc(266 * var(--u));}
.win .stage.mb-st-flow{grid-template-columns: calc(304 * var(--u)) minmax(0, 1fr); min-height: calc(288 * var(--u));}
.win .stage.mb-st-gpu{grid-template-columns: calc(316 * var(--u)) minmax(0, 1fr) calc(256 * var(--u)); min-height: calc(292 * var(--u));}
.win .stage.mb-st-ne{grid-template-columns: calc(312 * var(--u)) minmax(0, 1fr) calc(256 * var(--u)); min-height: calc(292 * var(--u));}
.win .stage.mb-st-hw{grid-template-columns: calc(280 * var(--u)) minmax(0, 1fr) calc(262 * var(--u)); min-height: calc(284 * var(--u));}
.win .mb-st-mem .stage-trail{justify-content: flex-start; gap: calc(18 * var(--u));}
.win .mb-st-gpu .stage-trail{justify-content: flex-start; gap: 0;}
.win .mb-st-ne .stage-trail{gap: 0;}
.win .mb-st-hw .stage-trail{gap: 0;}
.win .mb-n{display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-n u{text-decoration: none; font-family: var(--font); font-weight: 500; letter-spacing: 0; color: var(--ink-2);}
.win .mb-n36{font-size: calc(36 * var(--u)); letter-spacing: calc(-1.44 * var(--u)); gap: calc(2 * var(--u));}
.win .mb-n36 u{font-size: calc(15 * var(--u));}
.win .mb-n40{font-size: calc(40 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); gap: calc(2.4 * var(--u));}
.win .mb-n40 u{font-size: calc(14.4 * var(--u));}
.win .mb-n54{font-size: calc(54 * var(--u)); letter-spacing: calc(-2.16 * var(--u)); gap: calc(3.2 * var(--u));}
.win .mb-n54 u{font-size: calc(19.4 * var(--u));}
.win .mb-n58{font-size: calc(58 * var(--u)); letter-spacing: calc(-2.32 * var(--u)); gap: calc(3.5 * var(--u));}
.win .mb-n58 u{font-size: calc(20.9 * var(--u));}
.win .mb-note{display: block; font-size: calc(10.5 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .mb-note b{font-weight: 600;}
.win .mb-note.mb-q{color: var(--ink-3);}
.win .mb-note.mb-t10{font-size: calc(10 * var(--u));}
.win .mb-note.mb-t11{font-size: calc(11 * var(--u)); line-height: 1.35;}
.win .mb-note.mb-t115{font-size: calc(11.5 * var(--u));}
.win .mb-t8{margin-top: calc(8 * var(--u));}
.win .mb-t2{margin-top: calc(2 * var(--u));}
.win .mb-top4{margin-top: calc(4 * var(--u));}
.win .mb-rule{height: 0; border-top: 1px solid var(--hair); margin: calc(9 * var(--u)) 0; flex: none;}
.win .mb-rule.mb-r12{margin: calc(12 * var(--u)) 0;}
.win .mb-rule.mb-r6{margin: calc(2 * var(--u)) 0 calc(8 * var(--u));}
.win .mb-hr{height: 0; border-top: 1px solid var(--hair); flex: none;}
.win .mb-capt{font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-capsrow{display: flex; align-items: baseline; gap: calc(7 * var(--u));}
.win .mb-ctl{display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0; font-size: calc(12 * var(--u));}
.win .mb-ctl.mb-g8{gap: calc(8 * var(--u));}
.win .mb-ctl.mb-g14{gap: calc(14 * var(--u));}
.win .mb-vdiv{width: 0; height: calc(16 * var(--u)); border-left: 1px solid var(--hair-2); flex: none;}
.win .mb-leadfoot{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .mb-leadfoot b{font: 500 calc(11.5 * var(--u))/1.3 var(--font); color: var(--ink-2);}
.win .mb-clocks{display: flex; flex-direction: column; gap: calc(3 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .meter.mb-m4{height: calc(4 * var(--u)); box-shadow: none;}
.win .meter.mb-m4 i{box-shadow: none;}
.win .meter.mb-m5{height: calc(5 * var(--u));}
.win .meter.mb-m5 i{border-radius: calc(5 * var(--u));}
.win .meter.mb-m8{height: calc(8 * var(--u)); border-radius: calc(8 * var(--u));}
.win .meter.mb-m8 i{border-radius: calc(8 * var(--u));}
.win .card.mb-c{display: flex; flex-direction: column;}
.win .card.mb-c > *{flex: none;}
.win .card.mb-c > .sp{flex: 1 1 0; min-height: 0;}
.win .card.mb-tall{min-height: calc(440 * var(--u));}
.win .mb-sub{margin: calc(-9 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .mb-sub.mb-q{color: var(--ink-3);}
.win .mb-foot{display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin: calc(14 * var(--u)) calc(-16 * var(--u)) calc(-16 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11 * var(--u)); line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .mb-foot .mb-q{color: var(--ink-3);}
.win .mb-explore{display: flex; align-items: flex-end; gap: calc(10 * var(--u));}
.win .mb-explore.mb-center{align-items: center;}
.win .mb-explore > div{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .mb-link{font-size: calc(11 * var(--u)); gap: calc(3 * var(--u));}
.win .mb-link .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2;}
.win .mb-go{width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: rgb(var(--c-accent)); box-shadow: 0 0 0 calc(1.2 * var(--u)) rgb(var(--c-accent)) inset; flex: none;}
.win .mb-go .ic{width: calc(8 * var(--u)); height: calc(8 * var(--u)); stroke-width: 2.4;}
.win .mb-explain{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .mb-explain > .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: rgb(var(--c-accent));}
.win .mb-explain > div{display: flex; flex-direction: column; gap: calc(5 * var(--u)); min-width: 0;}
.win .mb-explain b{display: flex; align-items: center; gap: calc(4 * var(--u)); font: 600 calc(12 * var(--u))/1.3 var(--font);}
.win .mb-explain b .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2.2; color: rgb(var(--c-accent));}
.win .mb-explain span{font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .mb-trend{display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0;}
.win .mb-range{display: flex; align-items: center; gap: calc(10 * var(--u)); align-self: flex-start;}
.win .mb-chev{width: calc(24 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: inline-grid; place-items: center; color: var(--ink); background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair-2) inset; flex: none;}
.win .mb-chev .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2;}
.win .mb-chev.mb-off{opacity: 0.4;}
.win .mb-flip .ic{transform: scaleX(-1);}
.win .mb-chart{display: flex; gap: calc(7 * var(--u)); min-width: 0;}
.win .mb-axis{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; flex: none; font-size: calc(10.5 * var(--u)); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-plotcol{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .mb-plot{position: relative; border-top: 1px solid rgba(255, 255, 255, 0.055); border-bottom: 1px solid rgba(255, 255, 255, 0.13);}
.win .mb-plot > .sparkbox + .sparkbox{position: absolute; left: 0; top: 0;}
.win .mb-plot .chart .ln{stroke-width: calc(1.8 * var(--u));}
.win .mb-mid{position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.055);}
.win .mb-times{display: flex; justify-content: space-between; font-size: calc(10.5 * var(--u)); line-height: calc(12 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-keys{display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .mb-key{display: inline-flex; align-items: center; gap: calc(6 * var(--u));}
.win .mb-key i{width: calc(10 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint));}
.win .mb-count{color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .mb-hint{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .mb-trend.mb-flex{flex: 1 1 0; min-height: 0;}
.win .mb-flex .mb-chart{flex: 1 1 0; min-height: 0;}
.win .mb-flex .mb-axis{margin-bottom: calc(17 * var(--u));}
.win .mb-flex .mb-plot{flex: 1 1 0; min-height: 0;}
.win .mb-flex .mb-plot > .sparkbox{position: absolute; left: 0; top: 0; height: 100% !important;}
.win .mb-zones{display: flex; gap: calc(1.5 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(1 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .mb-zones i{flex: 1; border-radius: calc(1 * var(--u)); background: rgb(var(--tint) / 0.3);}
.win .mb-zones i:first-child{border-radius: calc(4 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)) calc(4 * var(--u));}
.win .mb-zones i:last-child{border-radius: calc(1 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(1 * var(--u));}
.win .mb-zones i.mb-lit{background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 50%), rgb(var(--tint)); box-shadow: 0 0 calc(6 * var(--u)) rgb(var(--tint) / 0.6);}
.win .mb-zl{display: flex; gap: calc(2 * var(--u));}
.win .mb-zl span{flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: calc(5 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink-3); white-space: nowrap;}
.win .mb-zl span::before{content: ""; width: 0; height: 0; margin-bottom: calc(3 * var(--u)); border-left: calc(5 * var(--u)) solid transparent; border-right: calc(5 * var(--u)) solid transparent; border-bottom: calc(6 * var(--u)) solid transparent;}
.win .mb-zl span.mb-lit{color: var(--ink); font-weight: 600;}
.win .mb-zl span.mb-lit::before{border-bottom-color: var(--ink);}
.win .mb-zones.mb-steps{height: calc(7 * var(--u)); margin-top: calc(6 * var(--u));}
.win .mb-zl.mb-steps span{align-items: flex-start; padding-top: calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 500;}
.win .mb-zl.mb-steps span::before{display: none;}
.win .mb-zl.mb-steps span.mb-lit{color: var(--ink-2); font-weight: 600;}
.win .mb-ves{width: 100%; padding: 0 calc(8 * var(--u)); display: flex; flex-direction: column;}
.win .mb-ves-top{display: flex; align-items: baseline; gap: calc(10 * var(--u)); white-space: nowrap; align-self: flex-start;}
.win .mb-ves-top > span:last-child{font-size: calc(13 * var(--u)); color: var(--ink-2);}
.win .mb-brk{position: relative; height: calc(21 * var(--u));}
.win .mb-brk > span{position: absolute; left: calc(1 * var(--u)); top: 0; height: 100%; text-align: center; font-size: calc(10.5 * var(--u)); line-height: calc(13 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .mb-brk > span::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--u)); border: 1px solid var(--hair-2); border-bottom: 0;}
.win .mb-tubewrap{position: relative; margin-top: calc(2 * var(--u));}
.win .meter.mb-v42{height: calc(42 * var(--u)); border-radius: calc(21 * var(--u)); padding: calc(1 * var(--u)); box-shadow: 0 0 0 1px var(--hair) inset, 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4) inset;}
.win .meter.mb-v42 i{border-radius: calc(1.5 * var(--u)); box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.06) 40%, rgb(0 0 0 / 0.16)), rgb(var(--tint));}
.win .meter.mb-v42 i + i{margin-left: calc(2 * var(--u));}
.win .meter.mb-v42 i:first-child{border-radius: calc(20 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)) calc(20 * var(--u));}
.win .meter.mb-v42 i.t-cache{opacity: 0.6;}
.win .mb-tick{position: absolute; bottom: calc(3 * var(--u)); width: 0; height: calc(9 * var(--u)); border-left: 1px solid rgba(255, 255, 255, 0.3);}
.win .mb-scale{position: relative; height: calc(13 * var(--u)); margin-top: calc(5 * var(--u)); font: 400 calc(10 * var(--u))/calc(13 * var(--u)) var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-scale span{position: absolute; top: 0; transform: translateX(-50%);}
.win .mb-scale span:first-child{transform: none;}
.win .mb-scale span:last-child{left: auto !important; right: 0; transform: none;}
.win .mb-vlg{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)) calc(12 * var(--u)); margin-top: calc(11 * var(--u));}
.win .mb-vlg > div{display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0;}
.win .mb-vlg-n{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink-2); white-space: nowrap;}
.win .mb-vlg-n i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .mb-vlg-n i.mb-quiet{opacity: 0.6;}
.win .mb-vlg-n i.mb-hollow{background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .mb-vlg-v{display: flex; align-items: baseline; gap: calc(4 * var(--u)); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .mb-vlg-v b{font: 600 calc(14 * var(--u))/1.2 var(--font);}
.win .mb-vlg-v span{font-size: calc(10 * var(--u)); color: var(--ink-2);}
.win .mb-ro{min-width: 0;}
.win .mb-rohead{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .mb-facts{display: flex; flex-direction: column;}
.win .mb-fact{display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(29 * var(--u)); font-size: calc(12.5 * var(--u)); border-bottom: 1px solid var(--hair); white-space: nowrap;}
.win .mb-fact.mb-last{border-bottom: 0;}
.win .mb-fact i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; flex: none; background: rgb(var(--tint));}
.win .mb-fact i.mb-hollow{background: none; box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ink-2) inset;}
.win .mb-fact i.mb-none{background: none;}
.win .mb-fact span{flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;}
.win .mb-fact b{font-weight: 500; font-variant-numeric: tabular-nums;}
.win .mb-fact em{width: calc(52 * var(--u)); text-align: right; font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .mb-fact.mb-strong span{color: var(--ink); font-weight: 600;}
.win .mb-fact.mb-strong b{font-weight: 600;}
.win .mb-fact-div{height: 0; border-top: 1px solid var(--hair-2); margin: calc(5 * var(--u)) 0;}
.win .mb-wlh{display: flex; gap: calc(8 * var(--u)); margin-bottom: calc(4 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-wl{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(5 * var(--u)) 0; min-width: 0;}
.win .mb-tight .mb-wl{padding: calc(4 * var(--u)) 0;}
.win .mb-wl-m{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .mb-wl-t{display: flex; align-items: baseline; gap: calc(6 * var(--u)); white-space: nowrap; min-width: 0;}
.win .mb-wl-t b{font: 500 calc(12.5 * var(--u))/1.2 var(--font); overflow: hidden; text-overflow: ellipsis;}
.win .mb-wl-t span{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .mb-wl-v{font: 600 calc(12.5 * var(--u))/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-wl-bl{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .mb-wl-bl .meter{flex: 1;}
.win .mb-wl-bl span{font-size: calc(10.5 * var(--u)); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-st-flow .stage-lead{padding: calc(22 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)) calc(26 * var(--u)); gap: 0;}
.win .mb-st-flow .stage-center{padding: calc(15 * var(--u)) 0 calc(13 * var(--u)); align-items: stretch;}
.win .mb-figs{display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u));}
.win .mb-fig{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .mb-fig-r{display: flex; align-items: flex-end; gap: calc(9 * var(--u));}
.win .mb-fig-r > b{font: 300 calc(42 * var(--u))/1 var(--font-display); letter-spacing: calc(-1.68 * var(--u)); font-variant-numeric: tabular-nums;}
.win .mb-fig-u{display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding-bottom: calc(6 * var(--u));}
.win .mb-fig-u > span:first-child{font: 500 calc(13 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .mb-fig-n{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .mb-fig-n i{width: calc(14 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint)); box-shadow: 0 0 0 calc(3 * var(--u)) rgb(var(--tint) / 0.18), 0 0 calc(7 * var(--u)) rgb(var(--tint) / 0.6);}
.win .mb-fig-s{font-size: calc(10.5 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-sent{margin-top: calc(12 * var(--u)); font: 600 calc(16 * var(--u))/1.25 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .mb-flowfoot{display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2); white-space: nowrap;}
.win .mb-flowfoot.mb-stack{flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u));}
.win .mb-hero{width: 100%; display: flex; flex-direction: column; padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u)); min-width: 0;}
.win .mb-hero-h{display: flex; align-items: center; gap: calc(9 * var(--u)); min-height: calc(26 * var(--u)); white-space: nowrap;}
.win .mb-hero-c{font-size: calc(11.5 * var(--u)); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; min-width: 0;}
.win .mb-hero-h .mb-range{gap: calc(6 * var(--u)); flex: none;}
.win .mb-hero-h .mb-chev{width: calc(20 * var(--u)); background: none; box-shadow: none; color: var(--ink-2);}
.win .mb-hero-h .mb-chev + .mb-chev{margin-left: calc(-6 * var(--u));}
.win .mb-fbody{flex: 1; min-height: 0; display: flex; gap: calc(8 * var(--u)); margin-top: calc(11 * var(--u));}
.win .mb-fcol{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .mb-fplot{position: relative; flex: 1; min-height: calc(132 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);}
.win .mb-fplot > .depth{position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.win .mb-fplot > .depth > span{height: 100% !important;}
.win .mb-fplot .chart .ln{stroke-width: calc(1.6 * var(--u));}
.win .mb-fplot .chart .ar{fill: rgb(var(--tint) / 0.2);}
.win .mb-fplot .chart .ax{stroke: rgba(255, 255, 255, 0.34);}
.win .mb-now{position: absolute; right: calc(-3.5 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-3.5 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--tint)), 0 0 calc(8 * var(--u)) rgb(var(--tint) / 0.8);}
.win .mb-ftimes{display: flex; justify-content: space-between; font: 400 calc(10.5 * var(--u))/calc(13 * var(--u)) var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-fscale{display: flex; flex-direction: column; justify-content: space-between; padding-bottom: calc(18 * var(--u)); font: 400 calc(10 * var(--u))/1.25 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;}
.win .mb-fscale span{display: block;}
.win .mb-fline{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(7 * var(--u)); min-height: calc(16 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .mb-fline b{font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .mb-dev{display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(2 * var(--u)) 0 0;}
.win .mb-dev-top{display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u));}
.win .mb-dev-name{display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0;}
.win .mb-dev-name b{font: 600 calc(13 * var(--u))/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .mb-dfacts{display: flex; align-items: flex-start; gap: calc(12 * var(--u)); flex: none;}
.win .mb-dfacts > div{display: flex; flex-direction: column; gap: calc(2 * var(--u)); white-space: nowrap;}
.win .mb-dfacts > div > span{display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .mb-dfacts > div > span .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2;}
.win .mb-dfacts > div > b{font: 500 calc(12.5 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums;}
.win .mb-dfacts > i{width: 0; height: calc(28 * var(--u)); border-left: 1px solid var(--hair);}
.win .mb-strip{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .mb-strip-l{display: flex; justify-content: space-between; font-size: calc(10 * var(--u)); line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .card.mb-sidecard{width: calc(344 * var(--u)); flex: none;}
.win .mb-health{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .mb-pane{height: calc(14 * var(--u)); margin-bottom: calc(-4 * var(--u)); text-align: right; font-size: calc(11.5 * var(--u)); line-height: calc(14 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-wifi{display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .mb-wifi-h{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .mb-wifi-h b{display: flex; align-items: center; gap: calc(6 * var(--u)); font: 600 calc(13 * var(--u))/1.2 var(--font);}
.win .mb-wifi-g{display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(105 * var(--u)), 1fr)); gap: calc(8 * var(--u));}
.win .mb-wifi-g > div{display: flex; flex-direction: column; gap: calc(3 * var(--u)); white-space: nowrap;}
.win .mb-wifi-g span{font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .mb-wifi-g b{font: 500 calc(12.5 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums;}
.win .mb-wifi-g b.mono{font-weight: 600;}
.win .mb-wifi-g > div:first-child span{font-size: calc(11 * var(--u));}
.win .mb-disc{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u));}
.win .mb-disc .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2; color: var(--ink-2);}
.win .mb-ifs{display: flex; flex-direction: column;}
.win .mb-if{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .mb-if:first-child{border-top: 0; padding-top: 0;}
.win .mb-if:last-child{padding-bottom: 0;}
.win .mb-if.mb-down{opacity: 0.72;}
.win .mb-if-n{width: calc(124 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); flex: none;}
.win .mb-if-n b{font: 700 calc(12.5 * var(--u))/1.25 var(--font-mono);}
.win .mb-if-n span{display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .mb-if-n i{width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(var(--c-good)); flex: none;}
.win .mb-if-n i.mb-off{background: var(--ink-3);}
.win .mb-if-s{position: relative; flex: 1; min-width: 0; height: calc(26 * var(--u));}
.win .mb-if-s .chart .ln{stroke-width: calc(1.2 * var(--u));}
.win .mb-idle{position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.22);}
.win .mb-if-c{display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none;}
.win .mb-if-c b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .mb-if-c span{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .mb-w96{min-width: calc(96 * var(--u));}
.win .mb-w104{min-width: calc(104 * var(--u));}
.win .card.mb-na{display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .mb-na > .card-h{margin-bottom: 0;}
.win .mb-na > .mb-sub{margin: calc(-9 * var(--u)) 0 0;}
.win .mb-well{border-radius: calc(10 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; overflow: hidden;}
.win .mb-t2 .tr-r{height: calc(40 * var(--u)); flex: none;}
.win .mb-t2 .tr-h{flex: none;}
.win .mb-split .tbl{overflow: hidden;}
.win .mb-nm2{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .mb-nm2 b{font: 500 calc(12.5 * var(--u))/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.win .mb-nm2 small{font-size: calc(10.5 * var(--u)); line-height: 1.2; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .tr-r > .mb-bc{position: relative; z-index: 0; padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) 0; text-align: right; overflow: visible;}
.win .mb-bc::before{content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: var(--p, 0%); border-radius: calc(4 * var(--u)); background: rgb(var(--tint) / 0.24);}
.win .mb-eye{display: grid; place-items: center; color: var(--ink-2);}
.win .mb-eye .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u));}
.win .mb-pager{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-pager .btn{height: calc(20 * var(--u)); padding: 0 calc(9 * var(--u)); font-size: calc(11 * var(--u));}
.win .mb-pagen{min-width: calc(72 * var(--u)); text-align: center; color: var(--ink);}
.win .mb-notes{display: flex; flex-direction: column; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .mb-notes > div{display: flex; align-items: flex-start; gap: calc(7 * var(--u));}
.win .mb-notes .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(2 * var(--u));}
.win .mb-connpg{display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) 0 calc(14 * var(--u));}
.win .mb-connpg > *{flex: none;}
.win .card.mb-tool{display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); box-shadow: none;}
.win .mb-searches{flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u));}
.win .mb-status{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .card.mb-split{display: grid; grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr); padding: 0; overflow: hidden; flex: 1 1 0; min-height: calc(230 * var(--u));}
.win .mb-apps{min-height: 0; overflow: hidden; border-right: 1px solid var(--hair-2); font-size: calc(12.5 * var(--u));}
.win .mb-apps-in{display: flex; flex-direction: column; margin: calc(8 * var(--u)) calc(12 * var(--u)) 0 calc(8 * var(--u));}
.win .mb-apps em{margin-left: auto; font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .mb-apps-all{display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(7 * var(--u)); flex: none;}
.win .mb-apps-all .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--ink-2);}
.win .mb-apps .eyb{padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); flex: none;}
.win .mb-apps-r{display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; flex: none;}
.win .mb-apps-r span{overflow: hidden; text-overflow: ellipsis;}
.win .mb-apps-r.mb-on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.26), rgb(var(--c-accent) / 0.12)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.4) inset; font-weight: 500;}
.win .mb-apps-r.mb-on em{color: var(--ink);}
.win .mb-mono{font: 400 calc(11.5 * var(--u))/1.2 var(--font-mono);}
.win .card.mb-det{display: flex; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(14 * var(--u));}
.win .mb-det-m{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .mb-det-t{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .mb-det-t b{font: 600 calc(13 * var(--u))/1.25 var(--font); white-space: nowrap;}
.win .mb-det code{font: 400 calc(11 * var(--u))/1.35 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere;}
.win .mb-det-s{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .mb-det-s .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--ink-3);}
.win .mb-det-e{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .mb-fine{font-size: calc(11 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .mb-dialcol{display: flex; flex-direction: column; align-items: center; gap: calc(11 * var(--u));}
.win .mb-coarse{position: relative; display: block;}
.win .mb-dticks{position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;}
.win .mb-dticks line{stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-linecap: round;}
.win .mb-dialkeys{display: flex; gap: calc(12 * var(--u));}
.win .mb-readouts{display: flex; flex-direction: column;}
.win .mb-gpurow{height: calc(284 * var(--u));}
.win .card.mb-freq{width: calc(400 * var(--u)); flex: none;}
.win .mb-wells{display: flex; margin-bottom: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .mb-wells > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); white-space: nowrap;}
.win .mb-wells > div + div{border-left: 1px solid var(--hair);}
.win .mb-wells span{font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-3);}
.win .mb-wells b{display: flex; align-items: baseline; gap: calc(3 * var(--u)); font: 600 calc(17 * var(--u))/1.15 var(--font-display); font-variant-numeric: tabular-nums;}
.win .mb-wells u{text-decoration: none; font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .mb-t28 .tr-r{height: calc(28 * var(--u));}
.win .mb-pn{font-weight: 500;}
.win .tr-r > .mb-pid{color: var(--ink-2);}
.win .tr-r > .mb-gbar{display: flex; align-items: center; gap: calc(8 * var(--u)); overflow: visible;}
.win .mb-gbar .meter{flex: 1;}
.win .mb-gbar b{width: calc(50 * var(--u)); text-align: right; font-weight: 400; font-variant-numeric: tabular-nums;}
.win .mb-sel{max-width: calc(220 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .mb-ne{display: grid; grid-template-columns: calc(148 * var(--u)) calc(226 * var(--u)) calc(148 * var(--u)); column-gap: calc(18 * var(--u)); align-items: center;}
.win .mb-ne-l{display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u)); padding-right: calc(14 * var(--u)); text-align: right;}
.win .mb-ne-l b{font: 600 calc(13 * var(--u))/1.25 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .mb-ne-r{padding-left: calc(16 * var(--u)); border-left: 1px solid var(--hair);}
.win .mb-peak{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .mb-peak > div{margin-top: calc(2 * var(--u));}
.win .mb-w404{width: calc(404 * var(--u)); flex: none;}
.win .mb-chans{display: flex; flex-direction: column;}
.win .mb-chan{display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .mb-chan-h{display: flex; align-items: center; gap: calc(7 * var(--u)); white-space: nowrap;}
.win .mb-chan-h i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .mb-chan-h b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .mb-chan-v{display: flex; align-items: baseline; gap: calc(3 * var(--u)); font: 600 calc(17 * var(--u))/1 var(--font-display); font-variant-numeric: tabular-nums;}
.win .mb-chan-v u{text-decoration: none; font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .mb-chan .mb-trend{gap: calc(8 * var(--u));}
.win .mb-hwc{width: 100%; padding: 0 calc(18 * var(--u)) 0 calc(16 * var(--u)); display: flex; flex-direction: column;}
.win .mb-pw-top{display: flex; align-items: flex-end; justify-content: space-between; gap: calc(14 * var(--u)); margin-top: calc(2 * var(--u));}
.win .mb-pw-notes{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding-bottom: calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .meter.mb-v24{height: calc(24 * var(--u)); margin-top: calc(9 * var(--u)); padding: calc(1 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: 0 0 0 1px var(--hair) inset, 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4) inset;}
.win .meter.mb-v24 i{border-radius: calc(1.5 * var(--u)); box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.06) 42%, rgb(0 0 0 / 0.14)), rgb(var(--tint));}
.win .meter.mb-v24 i + i{margin-left: calc(2 * var(--u));}
.win .meter.mb-v24 i:first-child{border-radius: calc(11 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)) calc(11 * var(--u));}
.win .meter.mb-v24 i:last-child{border-radius: calc(1.5 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)) calc(1.5 * var(--u));}
.win .mb-pw-lg{display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(9 * var(--u)); white-space: nowrap;}
.win .mb-hwrule{height: 0; border-top: 1px solid var(--hair); margin: calc(12 * var(--u)) 0 calc(11 * var(--u));}
.win .mb-temps{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .mb-temps > div{display: flex; gap: calc(16 * var(--u));}
.win .mb-temp{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.win .mb-temp-h{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .mb-temp-h i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .mb-temp-v{display: flex; align-items: baseline; gap: calc(3 * var(--u)); margin-top: calc(5 * var(--u)); font: 400 calc(22 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.5 * var(--u)); font-variant-numeric: tabular-nums;}
.win .mb-temp-v u{text-decoration: none; font: 500 calc(11 * var(--u))/1 var(--font); letter-spacing: 0; color: var(--ink-2);}
.win .mb-temp .meter{margin-top: calc(6 * var(--u));}
.win .mb-temp .mb-note{margin-top: calc(5 * var(--u));}
.win .mb-thermal{display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .mb-thermal-r{display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(22 * var(--u));}
.win .mb-thermal .mb-zones{margin-top: 0;}
.win .mb-thermal .mb-zl{margin-top: calc(-3 * var(--u));}
.win .mb-usages{display: flex; gap: calc(10 * var(--u));}
.win .mb-usage{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.win .mb-usage-v{display: flex; align-items: baseline; gap: calc(3 * var(--u)); margin-top: calc(4 * var(--u)); font: 500 calc(22 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.5 * var(--u)); font-variant-numeric: tabular-nums;}
.win .mb-usage-v u{text-decoration: none; font: 500 calc(12 * var(--u))/1 var(--font); letter-spacing: 0; color: var(--ink-2);}
.win .mb-usage .meter{margin-top: calc(6 * var(--u));}
.win .mb-usage .mb-note{margin-top: calc(5 * var(--u));}
.win .mb-battery{display: flex; flex-direction: column; gap: calc(4 * var(--u));}
.win .mb-battery-r{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .mb-battery-r .mb-usage-v{margin-top: 0;}
.win .mb-tierh{display: flex; gap: calc(14 * var(--u)); padding-bottom: calc(6 * var(--u)); border-bottom: 1px solid var(--hair);}
.win .mb-tierh .eyb:nth-child(3){width: calc(120 * var(--u));}
.win .mb-tierh .eyb:nth-child(4){min-width: calc(196 * var(--u)); text-align: right;}
.win .card.mb-f58{flex: 58 1 0;}
.win .card.mb-f42{flex: 42 1 0;}

/* mock-overview.css */
.win .stage.ov-stage{grid-template-columns: calc(258 * var(--u)) minmax(0, 1fr); min-height: calc(294 * var(--u));}
.win .silimap{width: 100%; padding: 0 calc(22 * var(--u)) 0 calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(7 * var(--u)); align-self: stretch;}
.win .silicap{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .silicap > span:last-child{font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .sili{display: grid; gap: calc(8 * var(--u)); grid-template-columns: minmax(0, 1fr) calc(156 * var(--u)) calc(156 * var(--u)) calc(190 * var(--u)); grid-template-rows: calc(134 * var(--u)) calc(122 * var(--u)); flex: 1;}
.win .sili > :nth-child(1){grid-column: 1; grid-row: 1;}
.win .sili > :nth-child(2){grid-column: 2; grid-row: 1;}
.win .sili > :nth-child(3){grid-column: 3; grid-row: 1;}
.win .sili > :nth-child(4){grid-column: 1 / 3; grid-row: 2; margin-right: calc(56 * var(--u));}
.win .sili > :nth-child(5){grid-column: 2 / 4; grid-row: 2; margin-left: calc(108 * var(--u));}
.win .sili > :nth-child(6){grid-column: 4; grid-row: 1; height: calc(128 * var(--u));}
.win .sili > :nth-child(7){grid-column: 4; grid-row: 2; height: calc(128 * var(--u)); align-self: end;}
.win .sblk{display: flex; flex-direction: column; gap: calc(5 * var(--u)); min-width: 0; padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .sblk > *{flex: none;}
.win .sblk > .sp{flex: 1 1 0; min-height: 0;}
.win .sblk-h{display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0;}
.win .sblk-h i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .sblk-h .note{font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .sblk-row{display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;}
.win .sblk-row.base{align-items: baseline; gap: calc(8 * var(--u));}
.win .sblk-num{display: inline-flex; align-items: baseline; gap: calc(2 * var(--u)); font-family: var(--font-display); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .sblk-num b{font-weight: 300;}
.win .sblk-num u{text-decoration: none; font: 500 0.44em/1 var(--font); letter-spacing: 0; color: var(--ink-2);}
.win .sblk .tiny{display: flex; flex-direction: column; gap: calc(1 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .sblk .tiny span{color: var(--ink-3);}
.win .lgcol{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .lgrow{display: flex; gap: calc(12 * var(--u)); white-space: nowrap;}
.win .lgrow + .lgrow{margin-top: calc(-2 * var(--u));}
.win .prow{display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap;}
.win .prow i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .prow span{color: var(--ink-2); flex: 1;}
.win .prow b{font-weight: 500; font-variant-numeric: tabular-nums;}
.win .cells{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(2 * var(--u));}
.win .cells i{height: calc(11 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--hair);}
.win .meter.m9{height: calc(9 * var(--u)); border-radius: calc(9 * var(--u));}
.win .meter.m13{height: calc(13 * var(--u)); border-radius: calc(13 * var(--u));}
.win .meter.m9 i,.win .meter.m13 i{box-shadow: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.26), transparent 48%), rgb(var(--tint));}
.win .meter.m13 i.t-cache{opacity: 0.7;}
.win .lanes{display: flex; flex-direction: column;}
.win .lane{display: grid; grid-template-columns: calc(236 * var(--u)) minmax(0, 1fr) calc(62 * var(--u)); align-items: center; column-gap: calc(12 * var(--u)); padding: calc(7 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .lane:first-child{border-top: 0; padding-top: 0;}
.win .lane-n{display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .lane-n i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .lane-n b{font: 600 calc(12 * var(--u))/1.2 var(--font);}
.win .lane-n span{font-size: calc(10.5 * var(--u)); color: var(--ink-3);}
.win .lane-v{display: flex; align-items: baseline; gap: calc(7 * var(--u)); margin-top: calc(3 * var(--u)); white-space: nowrap;}
.win .lane-v b{font: 500 calc(17 * var(--u))/1.1 var(--font-display); letter-spacing: calc(-0.3 * var(--u)); font-variant-numeric: tabular-nums;}
.win .lane-v span{font-size: calc(10.5 * var(--u)); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;}
.win .lane-p{position: relative; height: calc(46 * var(--u)); border-radius: calc(6 * var(--u)); background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.06)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;}
.win .lane-s{display: flex; flex-direction: column; justify-content: space-between; height: calc(46 * var(--u)); font: 400 calc(9.5 * var(--u))/1 var(--font-mono); color: var(--ink-3); white-space: nowrap;}
.win .lane-cur{position: absolute; top: calc(-7 * var(--u)); bottom: calc(-7 * var(--u)); width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.6); z-index: 2;}
.win .lane-cur::after{content: ""; position: absolute; left: calc(-3.5 * var(--u)); top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-3 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(var(--tint)), 0 0 calc(8 * var(--u)) rgb(var(--tint));}
.win .toplist{display: flex; flex-direction: column; gap: calc(9 * var(--u));}
.win .toprow{display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;}
.win .toprow .tn{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .toprow .tn b{font: 500 calc(12.5 * var(--u))/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .toprow .tn span{font-size: calc(10.5 * var(--u)); color: var(--ink-3);}
.win .toprow .tv{width: calc(86 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u));}
.win .toprow .tv b{font: 600 calc(12.5 * var(--u))/1 var(--font);}
.win .toprow .tv .meter{width: 100%;}
.win .obs{display: flex; align-items: flex-start; gap: calc(9 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .obs:first-of-type{border-top: 0; padding-top: 0;}
.win .obs > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .obs b{font: 500 calc(12 * var(--u))/1.3 var(--font);}
.win .obs span:not(.chip){font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-2);}

/* mock-settings.css */
.win .sdetail:has(.se-scrolled) > .sdetail-h{display: none;}
.win .se-g6{gap: calc(6 * var(--u));}
.win .se-g8{gap: calc(8 * var(--u));}
.win .se-g10{gap: calc(10 * var(--u));}
.win .se-card .shair{margin-bottom: -1px;}
.win .se-hero{box-shadow: 0 0 0 1px rgb(var(--k) / 0.3) inset, 0 calc(14 * var(--u)) calc(22 * var(--u)) rgb(var(--k) / 0.1);}
.win .se-h{display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;}
.win .se-h.se-top{align-items: flex-start;}
.win .se-ht{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .se-ht b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .se-ht span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .se-tile{width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7 * var(--u)); display: inline-grid; place-items: center; flex: none; color: rgb(var(--c-accent)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .se-tile .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 1.7;}
.win .se-tile.se-s22{width: calc(22 * var(--u)); height: calc(22 * var(--u));}
.win .se-tile.se-quiet{color: var(--ink-2);}
.win .se-g6 > .se-h + .srow,.win .se-notif-c > .srow:first-child{margin-top: calc(6 * var(--u));}
.win .se-g8 > .se-h + .srow{margin-top: calc(4 * var(--u));}
.win .se-card .srow .btn,.win .se-card .srow .sel{font-size: calc(12 * var(--u)); line-height: 1; color: var(--ink);}
.win .se-card .srow .seg span{font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--ink);}
.win .se-card .srow .seg span.on{color: #fff;}
.win .se-card .srow .chip{font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink);}
.win .se-note{margin: 0; font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .se-note.se-fine{font-size: calc(11 * var(--u));}
.win .se-para{margin: 0; font-size: calc(12.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .se-fine{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .se-stamp{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .se-cap{font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .se-cap3{font-size: calc(11.5 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .se-count{font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .se-lbl{font-size: calc(13 * var(--u)); line-height: 1.25; white-space: nowrap;}
.win .se-sub{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .se-line{display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0;}
.win .se-line.se-end{justify-content: flex-end; gap: calc(10 * var(--u));}
.win .se-line.se-wrap{flex-wrap: wrap; gap: calc(8 * var(--u)) calc(12 * var(--u));}
.win .se-line > b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .se-foot{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(24 * var(--u));}
.win .se-foot > span:first-child{font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .se-foot.se-strong > span:first-child{color: var(--ink-2);}
.win .se-check{display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.25; white-space: nowrap;}
.win .se-check.se-dim{color: var(--ink-3);}
.win .se-check.se-dim .cb{opacity: 0.6;}
.win .se-check.se-dim .cb.on{background: rgba(255, 255, 255, 0.28);}
.win .se-disc{display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.25;}
.win .se-disc .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2.2; color: var(--ink-2);}
.win .se-exp{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; min-width: 0;}
.win .se-exp > .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-top: calc(1 * var(--u)); color: rgb(var(--c-accent));}
.win .se-exp > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .se-exp b{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .se-exp span{font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere;}
.win .se-num{display: inline-flex; align-items: center; justify-content: flex-end; width: calc(82 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset; font: 400 calc(12 * var(--u))/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; flex: none;}
.win .se-num.se-narrow{width: calc(76 * var(--u));}
.win .se-num.se-wide{width: calc(110 * var(--u));}
.win .se-unit{width: calc(100 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2); white-space: nowrap; flex: none;}
.win .se-unit.se-narrow{width: calc(88 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .se-box{display: flex; justify-content: center; flex: none;}
.win .se-box.se-end{justify-content: flex-end;}
.win .se-box.se-fill .seg{display: flex; flex: 1;}
.win .se-box.se-fill .seg span{flex: 1 1 0; padding-left: 0; padding-right: 0; text-align: center;}
.win .se-w160{width: calc(160 * var(--u));}
.win .se-w170{width: calc(170 * var(--u));}
.win .se-w180{width: calc(180 * var(--u));}
.win .se-w220{width: calc(220 * var(--u));}
.win .se-w260{width: calc(260 * var(--u));}
.win .se-wfull{width: 100%;}
.win .se-scheme-b{display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(6 * var(--u));}
.win .se-schemes{display: flex; align-items: flex-start; gap: calc(8 * var(--u)); margin: 0 calc(-3 * var(--u));}
.win .se-scheme{flex: 1 1 0; min-width: 0; max-width: calc(176 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(7 * var(--u)); border-radius: calc(11 * var(--u));}
.win .se-scheme.se-on{background: rgb(var(--k) / 0.12); box-shadow: 0 0 0 1px rgb(var(--k) / 0.55) inset, 0 0 calc(9 * var(--u)) rgb(var(--k) / 0.3);}
.win .se-mini{position: relative; display: block; aspect-ratio: 1.62; border-radius: calc(7 * var(--u)); overflow: hidden; box-shadow: 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4);}
.win .se-mini svg{width: 100%; height: 100%;}
.win .se-mini::after{content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;}
.win .se-mini.se-light::after{box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14) inset;}
.win .se-mini-half{position: absolute; inset: 0; clip-path: polygon(0 0, 72% 0, 52% 100%, 0 100%);}
.win .se-scheme-n{display: flex; align-items: center; gap: calc(6 * var(--u)); padding-left: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .se-scheme.se-on .se-scheme-n{color: var(--ink); font-weight: 600;}
.win .se-block{display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u));}
.win .se-readings{display: grid; grid-template-columns: repeat(3, max-content); column-gap: calc(20 * var(--u)); row-gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) 0;}
.win .se-custom{display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u));}
.win .se-stack{display: flex; flex-direction: column; gap: calc(6 * var(--u)); align-self: stretch;}
.win .se-preview{display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u));}
.win .se-bar{display: flex; align-items: center; justify-content: flex-end; gap: calc(10 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(5 * var(--u)); overflow: hidden;}
.win .se-bar-i{display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: calc(22 * var(--u)); flex: none;}
.win .se-bar-i b{font: 700 calc(9.5 * var(--u))/calc(10.5 * var(--u)) var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .se-bar > .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(4 * var(--u)); stroke-width: 1.6;}
.win .se-order{display: flex; align-items: center; gap: calc(6 * var(--u)); align-self: stretch; font-size: calc(12 * var(--u));}
.win .se-order .btn{height: calc(20 * var(--u)); padding: 0 calc(9 * var(--u));}
.win .se-tail{margin-top: calc(-55 * var(--u));}
.win .se-code{display: block; font: 400 calc(10.5 * var(--u))/1.4 var(--font-mono); color: var(--ink); overflow-wrap: anywhere;}
.win .se-sched{display: flex; flex-direction: column;}
.win .se-sched-h{display: flex; align-items: baseline; gap: calc(10 * var(--u)); padding-bottom: calc(6 * var(--u));}
.win .se-sched-h > span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .se-sched-r{display: grid; grid-template-columns: calc(236 * var(--u)) minmax(0, 1fr) calc(80 * var(--u)); column-gap: calc(14 * var(--u)); align-items: center; min-height: calc(36 * var(--u)); border-top: 1px solid var(--hair);}
.win .se-sched-h + .se-sched-r{border-top: 0;}
.win .se-sched-r > div{display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0;}
.win .se-sched-r b{font: 500 calc(12.5 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .se-sched-r > div span{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-3); white-space: nowrap;}
.win .se-sched-r > .se-count{text-align: right;}
.win .se-sched-r.se-axisrow{min-height: 0; border-top: 0; padding-top: calc(4 * var(--u));}
.win .se-axis{display: flex; justify-content: space-between; font-size: calc(11 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .se-track{position: relative; display: block; height: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .se-track i{position: absolute; top: 50%; left: calc(calc(6 * var(--u)) + (100% - calc(12 * var(--u))) * var(--x)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); margin: calc(-2.5 * var(--u)) 0 0 calc(-2.5 * var(--u)); border-radius: 50%; background: rgb(var(--c-accent) / 0.7);}
.win .se-track i:first-child{background: rgb(var(--c-accent));}
.win .se-track.se-dense i{width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin: calc(-1.5 * var(--u)) 0 0 calc(-1.5 * var(--u));}
.win .se-srcs{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u));}
.win .se-src{display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; min-width: 0;}
.win .se-src-h{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(22 * var(--u));}
.win .se-src-h b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-src .srow{padding: calc(2 * var(--u)) 0;}
.win .se-onoff{font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-2);}
.win .se-modemenu{top: calc(180.4 * var(--u)); right: calc(23 * var(--u)); min-width: calc(232 * var(--u));}
.win .se-nocheck{width: calc(12 * var(--u)); flex: none;}
.win .se-about{padding: calc(18 * var(--u)); gap: calc(14 * var(--u));}
.win .se-about-top{display: flex; align-items: center; gap: calc(14 * var(--u));}
.win .se-appicon{position: relative; width: calc(56 * var(--u)); height: calc(56 * var(--u)); flex: none;}
.win .se-appicon::before{content: ""; position: absolute; left: 50%; bottom: calc(-14 * var(--u)); width: calc(104 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-52 * var(--u)); background: radial-gradient(closest-side, rgb(var(--k) / 0.5), transparent);}
.win .se-appicon img{position: relative; display: block; width: calc(56 * var(--u)); height: calc(56 * var(--u)); filter: drop-shadow(0 calc(5 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.45));}
.win .se-about-top > div{display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0;}
.win .se-about-top > div > span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .se-about-top > div > .se-word{display: flex; align-items: baseline; font: 600 calc(20 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.3 * var(--u)); color: var(--ink);}
.win .se-mark{width: calc(10.9 * var(--u)); height: calc(14.1 * var(--u)); margin-right: calc(1.6 * var(--u)); fill: var(--ink); flex: none;}
.win .se-mark .se-slash{fill: rgb(var(--c-brand-orange));}
.win .se-shield{display: flex; align-items: flex-start; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; font-size: calc(12 * var(--u)); line-height: 1.35;}
.win .se-shield .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(1 * var(--u)); color: rgb(var(--c-good)); stroke-width: 1.8;}
.win .se-creator{flex-direction: row; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u));}
.win .se-lf{width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; flex: none; font: 600 calc(13 * var(--u))/1 var(--font); color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / 0.14); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.35) inset;}
.win .se-creator > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .se-creator b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .se-creator > div > span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .se-map{padding: 0 calc(12 * var(--u)) calc(4 * var(--u)); border-radius: calc(12 * var(--u));}
.win .se-map-h{display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(8 * var(--u)); padding: calc(10 * var(--u)) 0 calc(5 * var(--u));}
.win .se-map-h code{font: 400 calc(11 * var(--u))/1.3 var(--font-mono); color: var(--ink-3); white-space: nowrap;}
.win .se-map-r{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(30 * var(--u)); border-top: 1px solid var(--hair);}
.win .se-map-h + .se-map-r{border-top: 0;}
.win .se-map-r span{flex: 1; font-size: calc(12 * var(--u)); color: var(--ink-2);}
.win .se-map-r code{font: 400 calc(11.5 * var(--u))/1.3 var(--font-mono); color: var(--ink); white-space: nowrap;}
.win .se-notif{display: flex; align-items: flex-start; gap: calc(22 * var(--u));}
.win .se-notif-c{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .se-status{display: flex; align-items: center; gap: calc(7 * var(--u)); margin: calc(4 * var(--u)) 0 calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .se-example{width: calc(330 * var(--u)); flex: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u));}
.win .se-banner{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: rgb(18 21 26 / 0.82); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.18);}
.win .se-banner-i{width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, rgb(var(--c-cpu) / 0.75), rgb(var(--c-gpu) / 0.65));}
.win .se-banner-i .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.9;}
.win .se-banner > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .se-banner b{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .se-banner b.se-t{font-size: calc(12.5 * var(--u));}
.win .se-banner > div > span{font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .se-conf{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--raised);}
.win .se-conf .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.2; color: var(--ink-2);}
.win .se-conf b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-conf > span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .se-rulegrid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u));}
.win .se-rule{display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; min-width: 0;}
.win .se-rule-h{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .se-rule-h b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-rule-f{display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .se-rule.se-off .se-rule-f{opacity: 0.5;}
.win .se-rule .se-note{padding-top: calc(2 * var(--u));}
.win .se-rf{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(28 * var(--u));}
.win .se-rf-l{flex: 1; min-width: 0; font-size: calc(12 * var(--u)); color: var(--ink-2);}
.win .se-rf.se-strong .se-rf-l{font: 500 calc(13 * var(--u))/1.25 var(--font); color: var(--ink);}
.win .se-exc{display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u));}
.win .se-exc > .se-line > b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-exc-t{display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .se-exc-t .se-line > b{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .se-exc-t code{font: 400 calc(10.5 * var(--u))/1.3 var(--font-mono); color: var(--ink-2);}
.win .se-exc-t .se-check{font-size: calc(11.5 * var(--u));}
.win .se-shared{font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .btn.se-destructive{color: rgb(255 138 128);}
.win .se-nudge{margin-top: calc(5 * var(--u));}
.win .se-cover{display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u));}
.win .se-cover > div{display: flex; flex-direction: column; gap: calc(4 * var(--u));}
.win .se-cover span{font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .se-halves{display: flex; align-items: flex-start; gap: calc(18 * var(--u));}
.win .se-halves > *{flex: 1 1 0; min-width: 0;}
.win .se-rows{display: flex; flex-direction: column;}
.win .se-rows .srow{padding: calc(6 * var(--u)) 0;}
.win .se-keeps{display: flex; flex-direction: column;}
.win .se-keep{display: grid; grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr) calc(270 * var(--u)); column-gap: calc(16 * var(--u)); align-items: center; min-height: calc(40 * var(--u)); padding: calc(3 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .se-keep:first-child{border-top: 0;}
.win .se-keep > div{display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .se-keep b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-keep > div span{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .se-keep > span{font-size: calc(11.5 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .se-keep.se-axisrow{min-height: 0; padding: 0; border-top: 0;}
.win .se-ticks{position: relative; display: block; height: calc(16 * var(--u)); margin-top: calc(4 * var(--u));}
.win .se-ticks span{position: absolute; top: 0; transform: translateX(-50%); font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .se-ticks span.se-first{transform: none;}
.win .se-ticks span.se-last{transform: translateX(-75%);}
.win .meter.se-m8{height: calc(8 * var(--u)); border-radius: calc(8 * var(--u));}
.win .se-eyb{display: flex;}
.win .se-eyb.se-first{padding-top: calc(2 * var(--u));}
.win .se-cache{display: flex; align-items: flex-start; gap: calc(14 * var(--u));}
.win .se-cache > div{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .se-cache > div:first-child{flex: 1; min-width: 0;}
.win .se-cache > div:last-child{align-items: flex-end;}
.win .se-cache b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .se-cache span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .se-cache > div:last-child b{font: 600 calc(14 * var(--u))/1.2 var(--font);}
.win .se-cache > div:last-child span{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .se-ixs{display: flex; flex-direction: column;}
.win .se-ix{display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(30 * var(--u)); border-top: 1px solid var(--hair);}
.win .se-ix:first-child{border-top: 0;}
.win .se-ix i{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none;}
.win .se-ix span{flex: 1; min-width: 0; font-size: calc(12.5 * var(--u)); color: var(--ink-2);}
.win .se-ix b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-ix.se-total{border-top-color: var(--hair-2);}
.win .se-ix.se-total i{background: none;}
.win .se-ix.se-total span{color: var(--ink); font-weight: 600;}
.win .se-ix.se-total b{font-weight: 600;}
.win .meter.se-stacked{margin: calc(4 * var(--u)) 0; gap: calc(2 * var(--u)); box-shadow: none; background: none;}
.win .meter.se-stacked i{border-radius: calc(2 * var(--u));}
.win .se-excl{display: flex; flex-direction: column; align-items: stretch; gap: calc(12 * var(--u));}
.win .se-excl code{font: 400 calc(11 * var(--u))/1.3 var(--font-mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}
.win .se-intro{margin: 0; padding: 0 calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .se-group{display: flex; padding: 0 calc(4 * var(--u)); margin-bottom: calc(-6 * var(--u));}
.win .se-folders{display: flex; flex-direction: column;}
.win .se-folder{display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding: calc(7 * var(--u)) 0; border-top: 1px solid var(--hair);}
.win .se-folder:first-child{border-top: 0;}
.win .se-folder-r{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .se-folder-r > div{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .se-folder-r b{font: 500 calc(12.5 * var(--u))/1.25 var(--font);}
.win .se-folder-r code{font: 400 calc(11 * var(--u))/1.3 var(--font-mono); color: var(--ink-3); overflow-wrap: anywhere;}
.win .se-folder-r > span{display: flex; align-items: center; gap: calc(6 * var(--u)); padding-top: calc(2 * var(--u)); flex: none;}
.win .se-folder-d{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding-left: calc(36 * var(--u));}

/* mock-storage.css */
.win .st-page{display: flex; flex-direction: column; gap: calc(14 * var(--u));}
.win .st-page > *{flex: none;}
.win .st-page > .st-browse{flex: 1 1 0; min-height: 0;}
.win .st-page > .basket{margin: calc(-8 * var(--u)) 0 calc(10 * var(--u));}
.win .st-hair{height: 0; border-top: 1px solid var(--hair); flex: none;}
.win .st-mono{font: 400 calc(11 * var(--u))/1.3 var(--font-mono); font-variant-numeric: tabular-nums;}
.win .st-fine{margin-bottom: calc(14 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .st-fit{display: flex; flex-flow: column wrap; align-content: flex-start; overflow: hidden;}
.win .st-fit > *{width: 100%; flex: none;}
.win .btn.st-sm{height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11 * var(--u)); gap: calc(5 * var(--u));}
.win .btn.st-sm .ic{width: calc(10.5 * var(--u)); height: calc(10.5 * var(--u));}
.win .st-btns{display: inline-flex; gap: calc(6 * var(--u)); flex: none;}
.win .st-ibtn{width: calc(26 * var(--u)); height: calc(24 * var(--u)); display: inline-grid; place-items: center; border-radius: calc(7 * var(--u)); color: var(--ink-2); flex: none;}
.win .st-ibtn .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 1.7;}
.win .st-off{opacity: 0.38;}
.win .itile.st-ink{color: rgb(var(--tint));}
.win .st-spin{width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none;}
.win .st-spin line{stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round;}
.win .st-sw{width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgb(var(--tint)); flex: none; display: inline-block;}
.win .st-sw.st-hatch{background: repeating-linear-gradient(135deg, rgb(var(--tint) / 0.75) 0 calc(1.2 * var(--u)), transparent calc(1.2 * var(--u)) calc(2.5 * var(--u))), rgb(var(--tint) / 0.2);}
.win .st-sw.st-hollow{background: var(--well); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .st-scanbar{display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(13 * var(--u)); box-shadow: none;}
.win .st-path{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;
  font: 400 calc(11.5 * var(--u))/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; flex: none;}
.win .st-path .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--ink-3);}
.win .st-status{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums;}
.win .st-status b{font-weight: 500; color: var(--ink-2);}
.win .st-status.st-live{gap: calc(7 * var(--u)); color: var(--ink-2);}
.win .st-stage{grid-template-columns: calc(318 * var(--u)) minmax(0, 1fr) calc(236 * var(--u)); min-height: calc(168 * var(--u));}
.win .st-stage .stage-lead{padding: calc(18 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)); gap: 0;}
.win .st-stage .stage-center{padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); align-items: stretch; justify-content: flex-start;}
.win .st-stage .stage-trail{padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)); gap: 0; justify-content: flex-start;}
.win .dot.st-neutral{background: var(--ink-2); box-shadow: none;}
.win .st-hero{display: flex; align-items: baseline; gap: calc(6 * var(--u)); margin-top: calc(4 * var(--u));}
.win .st-hero .hero-num{line-height: 1.16;}
.win .st-hero .hero-num u{font-size: calc(16.5 * var(--u));}
.win .st-ge{font: 300 calc(28 * var(--u))/1 var(--font-display); color: var(--ink-2);}
.win .st-sub{margin-top: calc(1 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--ink-2); white-space: nowrap;}
.win .st-sub b{font-weight: 600; color: var(--ink);}
.win .st-note{margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .st-chips{display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(9 * var(--u));}
.win .st-chiprow{display: inline-flex; gap: calc(6 * var(--u));}
.win .st-shield{width: calc(22 * var(--u)); height: calc(20 * var(--u));}
.win .st-shield .ic{width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u));}
.win .st-items{margin-top: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .st-vessel{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.win .st-vhead{display: flex; align-items: baseline; gap: calc(8 * var(--u));}
.win .st-vhead .linkbtn{font-size: calc(11.5 * var(--u));}
.win .meter.st-tube{height: calc(32 * var(--u)); border-radius: calc(32 * var(--u)); margin-top: calc(10 * var(--u)); flex: none;}
.win .meter.st-tube i.hatch{background: repeating-linear-gradient(135deg, rgb(var(--c-cache) / 0.62) 0 calc(2.2 * var(--u)), transparent calc(2.2 * var(--u)) calc(6 * var(--u))), rgb(var(--c-cache) / 0.16);}
.win .st-scale{position: relative; height: calc(19 * var(--u)); margin: calc(3 * var(--u)) calc(3 * var(--u)) 0; flex: none;}
.win .st-scale span{position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); transform: translateX(-50%);
  font: 400 calc(10.5 * var(--u))/1 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .st-scale span:first-child{transform: none; align-items: flex-start;}
.win .st-scale span:last-child{transform: translateX(-100%); align-items: flex-end;}
.win .st-scale i{width: 1px; height: calc(4 * var(--u)); background: var(--hair-2);}
.win .st-vessel > .sp{min-height: calc(7 * var(--u));}
.win .st-parts{display: flex; align-items: stretch; gap: calc(14 * var(--u)); flex: none;}
.win .st-vpart{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); white-space: nowrap;}
.win .st-vpart > span:first-child{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.2; color: var(--ink-2);}
.win .st-vpart > span:last-child{display: flex; align-items: baseline; gap: calc(5 * var(--u));}
.win .st-vpart b{font: 500 calc(16 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums;}
.win .st-vpart em{font: normal 400 calc(10.5 * var(--u))/1.2 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .st-vdiv{width: 1px; background: var(--hair); flex: none;}
.win .st-racc{display: block; font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .st-stage .ro .acc{margin-top: calc(4 * var(--u));}
.win .st-rhair{display: block; height: 0; border-top: 1px solid var(--hair); margin: calc(10 * var(--u)) 0;}
.win .st-scan{display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(180deg, rgb(var(--c-accent) / 0.08), rgb(var(--c-accent) / 0.025)), linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.24) inset, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.42);}
.win .st-scanhead{display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .st-scanhead b{font: 600 calc(13 * var(--u))/1.2 var(--font); color: var(--ink);}
.win .st-steps{display: flex; gap: calc(14 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .st-steps span{display: inline-flex; align-items: center; gap: calc(7 * var(--u));}
.win .st-steps i{width: calc(26 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--hair-2);}
.win .st-steps .st-done i{background: rgb(var(--c-accent) / 0.55);}
.win .st-steps .on{color: var(--ink); font-weight: 600;}
.win .st-steps .on i{background: rgb(var(--c-accent)); box-shadow: 0 0 calc(6 * var(--u)) rgb(var(--c-accent) / 0.55);}
.win .st-figures{display: flex; align-items: baseline; gap: calc(18 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .st-figures b{font-weight: 600; color: var(--ink);}
.win .st-found{display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25;}
.win .st-found > div{display: flex; align-items: baseline;}
.win .st-found b{font-weight: 600;}
.win .st-foundnote{color: var(--ink-2);}
.win .meter.st-m7{height: calc(7 * var(--u)); border-radius: calc(7 * var(--u));}
.win .st-scanpath{color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .st-scanpath .st-mono{font-size: calc(11.5 * var(--u));}
.win .st-browse{display: flex; flex-direction: column;}
.win .st-browse > *{flex: none;}
.win .st-head{display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));}
.win .st-title{font: 600 calc(13 * var(--u))/1.25 var(--font); white-space: nowrap;}
.win .st-after{font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .st-rank-toggle{display: inline-flex; flex: none;}
.win .st-nav{display: flex; align-items: center; gap: calc(6 * var(--u)); min-height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .st-navbtns{display: inline-flex; gap: calc(2 * var(--u)); margin-right: calc(4 * var(--u));}
.win .st-crumbs{display: inline-flex; align-items: center; gap: calc(2 * var(--u));}
.win .st-crumbs > .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2; color: var(--ink-3); opacity: 0.7;}
.win .st-crumb{padding: calc(3 * var(--u)) calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.25; color: var(--ink-2);}
.win .st-crumb.on{color: var(--ink); font-weight: 600;}
.win .st-count{color: var(--ink-3); margin-right: calc(2 * var(--u));}
.win .st-foot{display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(38 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11 * var(--u)); color: var(--ink-3); white-space: nowrap;}
.win .st-foot .linkbtn{font-size: calc(11 * var(--u));}
.win .st-paging{display: inline-flex; align-items: center; gap: calc(8 * var(--u));}
.win .st-well{border-radius: calc(12 * var(--u)); background: rgba(0, 0, 0, 0.14); box-shadow: 0 0 0 1px var(--hair) inset; overflow: hidden;}
.win .st-browse > .st-tbl{flex: 1 1 0; min-height: 0; margin: calc(12 * var(--u));}
.win .st-tbl{--cols: minmax(0, 1fr) calc(112 * var(--u)) calc(112 * var(--u)) calc(100 * var(--u)) calc(96 * var(--u));}
.win .st-th,.win .st-tr{display: grid; grid-template-columns: var(--cols); align-items: center; padding: 0 calc(10 * var(--u));}
.win .st-th{height: calc(28 * var(--u)); font: 600 calc(11 * var(--u))/1 var(--font); color: var(--ink-2); background: rgb(18 21 26 / 0.94); border-bottom: 1px solid var(--hair-2); white-space: nowrap;}
.win .st-th span{padding: 0 calc(8 * var(--u));}
.win .st-th .r{text-align: right;}
.win .st-tr{position: relative; isolation: isolate; min-height: calc(29 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap;}
.win .st-fit > .st-tr{flex: 1 0 calc(29 * var(--u)); max-height: calc(33 * var(--u));}
.win .st-tr > span{padding: 0 calc(8 * var(--u)); min-width: 0;}
.win .st-tr > .st-nm{display: flex; align-items: center; padding-left: calc(calc(8 * var(--u)) + var(--lv, 0) * calc(17 * var(--u)));}
.win .st-disc{width: calc(13 * var(--u)); display: inline-grid; place-items: center; flex: none; color: var(--ink-3);}
.win .st-disc .ic{width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.2;}
.win .st-fi{width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(3 * var(--u)); display: inline-grid; place-items: center; flex: none; color: rgb(var(--tint));}
.win .st-fi .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.5;}
.win .st-nm b{margin-left: calc(6 * var(--u)); font-weight: 400; overflow: hidden; text-overflow: ellipsis;}
.win .st-tr.st-top .st-fi{color: var(--ink-2);}
.win .st-tr.st-top .st-nm b{font-weight: 600;}
.win .st-tbl.st-list .st-disc{display: none;}
.win .st-num{text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2);}
.win .st-num.st-rank{color: var(--ink);}
.win .st-kind{color: var(--ink-2);}
.win .st-share{display: flex; align-items: center; justify-content: flex-end; gap: calc(7 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .st-share i{position: relative; width: calc(32 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; overflow: hidden; flex: none;}
.win .st-share i::after{content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); min-width: calc(5 * var(--u)); border-radius: calc(5 * var(--u));
  background: rgb(var(--tint)); background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--tint)) 62%, #fff), rgb(var(--tint)));}
.win .st-tr.st-top .st-share i::after{background: var(--ink-3);}
.win .st-tr.on::before{content: ""; position: absolute; z-index: -1; inset: calc(1 * var(--u)) calc(4 * var(--u)); border-radius: calc(8 * var(--u));
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.26), rgb(var(--c-accent) / 0.1)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.55) inset;}
.win .st-tr.on::after{content: ""; position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--c-accent)); box-shadow: 0 0 calc(5 * var(--u)) rgb(var(--c-accent) / 0.7);}
.win .st-map{flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;}
.win .st-map > *{flex: none;}
.win .st-map > .st-tray{flex: 1 1 0; min-height: 0;}
.win .st-tray{position: relative; margin: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--well); overflow: hidden;}
.win .st-tray::after{content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), var(--hair) 50%, rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.win .st-tiles{position: absolute; inset: calc(3 * var(--u));}
.win .st-cell{position: absolute;}
.win .st-cell.on{z-index: 1;}
.win .st-tile{position: absolute; inset: calc(1.5 * var(--u)); border-radius: calc(7 * var(--u)); overflow: hidden; display: flex; flex-direction: column; gap: calc(2 * var(--u));
  background: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.3)), linear-gradient(180deg, rgba(255, 255, 255, 0.085), transparent 40%), linear-gradient(135deg, rgb(var(--tint) / 0.44), rgb(var(--tint) / 0.21));}
.win .st-tile::before{content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgb(var(--tint) / 0.36) 34%, rgba(0, 0, 0, 0.42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.win .st-tile.st-full{padding: calc(7 * var(--u));}
.win .st-tile.st-small{padding: calc(3 * var(--u)) calc(5 * var(--u));}
.win .st-tile.st-hatch{--tint: var(--c-cache);
  background: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.3)), linear-gradient(180deg, rgba(255, 255, 255, 0.085), transparent 40%),
    repeating-linear-gradient(135deg, rgb(var(--c-cache) / 0.12) 0 calc(6 * var(--u)), transparent calc(6 * var(--u)) calc(8.5 * var(--u))), rgb(var(--c-cache) / 0.12);}
.win .st-tile.on{box-shadow: 0 0 0 calc(2 * var(--u)) rgb(var(--c-accent)) inset, 0 0 calc(9 * var(--u)) rgb(var(--c-accent) / 0.6);
  background: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.3)), linear-gradient(180deg, rgba(255, 255, 255, 0.085), transparent 40%),
    linear-gradient(rgb(var(--c-accent) / 0.2), rgb(var(--c-accent) / 0.2)), linear-gradient(135deg, rgb(var(--tint) / 0.44), rgb(var(--tint) / 0.21));}
.win .st-tile.on::before{display: none;}
.win .st-tl{display: flex; align-items: flex-start; gap: calc(4 * var(--u)); flex: none; min-width: 0;}
.win .st-tl .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(2 * var(--u)); stroke-width: 1.9; color: var(--ink-2);}
.win .st-tl b{min-width: 0; font: 600 calc(12 * var(--u))/calc(15 * var(--u)) var(--font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.win .st-tl b.st-one{display: block; white-space: nowrap; text-overflow: ellipsis;}
.win .st-ts{font-size: calc(11 * var(--u)); line-height: calc(13.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;}
.win .st-tp{opacity: 0.8;}
.win .st-tm{font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .st-nest{position: relative; flex: 1 1 0; min-height: 0; margin-top: calc(4 * var(--u));}
.win .st-nb{position: absolute;}
.win .st-nbi{position: absolute; inset: calc(1 * var(--u)); border-radius: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(5 * var(--u)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(10.5 * var(--u)); line-height: calc(13 * var(--u)); color: var(--ink-2);
  background: linear-gradient(rgb(var(--tint) / 0.18), rgb(var(--tint) / 0.18)), rgba(0, 0, 0, 0.34);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55) inset, -1px -1px 0 rgba(255, 255, 255, 0.12) inset;}
.win .st-nbi.st-hatch{background: repeating-linear-gradient(135deg, rgb(var(--c-cache) / 0.5) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(5 * var(--u))), rgb(var(--c-cache) / 0.14);}
.win .st-legend{display: inline-flex; align-items: center; gap: calc(12 * var(--u));}
.win .st-key{display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: var(--ink-2);}
.win .st-types{flex: 1 1 0; min-height: 0; display: flex; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)); overflow: hidden;}
.win .st-typesmain{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u));}
.win .st-typeshead{display: flex; align-items: flex-start; gap: calc(12 * var(--u)); flex: none;}
.win .st-typeshead > span:last-child{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3);}
.win .st-typesmain > .st-typelist{flex: 1 1 0; min-height: 0; gap: calc(2 * var(--u)); padding-right: calc(4 * var(--u));}
.win .st-type{display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); white-space: nowrap;}
.win .st-typelist > .st-type{width: calc(100% - calc(4 * var(--u))); flex: 1 0 calc(34 * var(--u)); max-height: calc(38 * var(--u));}
.win .st-type b{width: calc(112 * var(--u)); font: 500 calc(12 * var(--u))/1.2 var(--font); flex: none;}
.win .st-typen{width: calc(122 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-3); flex: none;}
.win .st-type .meter{flex: 1 1 0;}
.win .meter.st-m8{height: calc(8 * var(--u)); border-radius: calc(8 * var(--u));}
.win .st-types-size{min-width: calc(88 * var(--u)); text-align: right; font: 500 calc(12 * var(--u))/1.2 var(--font); flex: none;}
.win .st-fam{width: calc(280 * var(--u)); flex: none; align-self: flex-start; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .meter.st-m14{height: calc(14 * var(--u)); border-radius: calc(14 * var(--u));}
.win .st-famrows{display: flex; flex-direction: column; gap: calc(7 * var(--u)); font-size: calc(12 * var(--u));}
.win .st-famrows > div{display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap;}
.win .st-famrows span{color: var(--ink-2);}
.win .st-famrows b{font-weight: 500;}
.win .st-fam p{margin: 0; font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-3);}
.win .st-changes{flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); font-size: calc(11.5 * var(--u));}
.win .st-changes > *{flex: none;}
.win .st-chhead{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .st-chleg{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding-left: calc(6 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .st-chleg > div{display: flex; align-items: baseline; gap: calc(6 * var(--u));}
.win .st-chleg b{font-weight: 600; color: var(--ink);}
.win .st-chnav{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .st-textbtn{display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink); white-space: nowrap;}
.win .st-textbtn .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .st-chnav .st-mono{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .st-changes > .st-ctbl{flex: 1 1 0; min-height: 0; background: rgba(0, 0, 0, 0.155);}
.win .st-ctbl{--cols: minmax(0, 1fr) calc(115 * var(--u)) calc(115 * var(--u)) calc(150 * var(--u)) calc(150 * var(--u));}
.win .st-ctbl .st-th{font-weight: 500;}
.win .st-ctbl > .st-tr{min-height: calc(28 * var(--u)); flex-basis: calc(28 * var(--u)); max-height: calc(32 * var(--u));}
.win .st-ctbl > .st-tr.st-two{min-height: calc(44 * var(--u)); flex-basis: calc(44 * var(--u)); max-height: calc(48 * var(--u));}
.win .st-ctbl .st-tr + .st-tr{border-top: 1px solid rgba(255, 255, 255, 0.045);}
.win .st-cn{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .st-cn > span{display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0;}
.win .st-cn .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex: none;}
.win .st-cn b{font-weight: 400; overflow: hidden; text-overflow: ellipsis;}
.win .st-move{color: var(--ink-2); font-size: calc(11.5 * var(--u));}
.win .st-move .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .st-delta{display: flex; align-items: center; justify-content: flex-end; gap: calc(4 * var(--u)); color: rgb(var(--tint)); font-variant-numeric: tabular-nums;}
.win .st-delta .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2;}
.win .st-delta.st-none{color: var(--ink-3);}
.win .st-tr > .st-dbar{position: relative; display: block; height: calc(6 * var(--u)); margin: 0 calc(8 * var(--u)); padding: 0; border-radius: calc(6 * var(--u)); background: var(--well);}
.win .st-dbar::before{content: ""; position: absolute; left: 50%; top: calc(-2 * var(--u)); bottom: calc(-2 * var(--u)); width: 1px; background: var(--hair-2);}
.win .st-dbar i{position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0 calc(1 * var(--u)), transparent calc(1 * var(--u))), rgb(var(--tint));}
.win .st-dbar .st-grew{left: calc(50% + 1px); border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;}
.win .st-dbar .st-shrank{right: 50%; border-radius: calc(3 * var(--u)) 0 0 calc(3 * var(--u));}
.win .st-chnote{line-height: 1.3; color: var(--ink-3);}
.win .st-clean{flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;}
.win .st-clean > *{flex: none;}
.win .st-clean > .st-cleancols{flex: 1 1 0; min-height: 0; display: flex;}
.win .st-cats{width: calc(262 * var(--u)); flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--hair); min-height: 0;}
.win .st-catshead{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--hair); flex: none;}
.win .st-catshead > div{display: flex; align-items: baseline; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .st-catshead b{font: 500 calc(20 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.4 * var(--u));}
.win .st-catshead span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .st-catlist{display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)); overflow: hidden;}
.win .st-cat{position: relative; display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(5.5 * var(--u)) calc(9 * var(--u)) calc(5.5 * var(--u)) calc(10 * var(--u)); border-radius: calc(9 * var(--u)); flex: none;}
.win .st-cat > .ic{width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); margin: 0 calc(2.75 * var(--u)); color: var(--ink-2); stroke-width: 1.6;}
.win .st-cat > div{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u));}
.win .st-cat b{font: 500 calc(12 * var(--u))/calc(14.5 * var(--u)) var(--font); white-space: nowrap;}
.win .st-cat > div > div{display: flex; align-items: baseline; gap: calc(6 * var(--u)); white-space: nowrap;}
.win .st-cat span{font-size: calc(10.5 * var(--u)); line-height: calc(12.5 * var(--u)); color: var(--ink-3);}
.win .st-cat span.num{font-size: calc(11 * var(--u)); font-weight: 500; color: var(--ink-2);}
.win .st-cat.on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.46) inset;}
.win .st-cat.on::before{content: ""; position: absolute; left: calc(1 * var(--u)); top: calc(9 * var(--u)); bottom: calc(9 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--c-accent)); box-shadow: 0 0 calc(5 * var(--u)) rgb(var(--c-accent) / 0.55);}
.win .st-cat.on b{font-weight: 600;}
.win .st-cat.on > .ic{color: var(--ink);}
.win .st-items-col{flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column;}
.win .st-itemshead{display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--hair); flex: none;}
.win .st-caution{display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2); white-space: nowrap;}
.win .st-caution .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .st-filters{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .st-toggles{display: inline-flex; gap: calc(12 * var(--u));}
.win .st-toggles .lblc{font-size: calc(11.5 * var(--u));}
.win .st-items-col > .st-rows{flex: 1 1 0; min-height: 0; padding: calc(4 * var(--u)) 0;}
.win .st-row{position: relative; isolation: isolate; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u));}
.win .st-rows > .st-row{flex: 1 0 auto; max-height: calc(48 * var(--u));}
.win .st-row + .st-row::after{content: ""; position: absolute; left: calc(76 * var(--u)); right: 0; top: 0; border-top: 1px solid var(--hair);}
.win .st-rowt{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .st-rowt b{font: 500 calc(12 * var(--u))/calc(14.5 * var(--u)) var(--font); white-space: nowrap;}
.win .st-rowt .st-mono{font-size: calc(10.5 * var(--u)); line-height: calc(13 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .st-rowsize{font-size: calc(12 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .st-row.on::before{content: ""; position: absolute; z-index: -1; inset: 0 calc(6 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06));}
.win .st-hist{display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding-bottom: calc(16 * var(--u));}
.win .st-hist > *{flex: none;}
.win .st-histhead{display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(14 * var(--u));}
.win .st-histhead b{font: 600 calc(16 * var(--u))/1.25 var(--font);}
.win .st-histhead p{margin: 0; font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .st-histacts{display: flex; gap: calc(10 * var(--u));}
.win .st-hist > .st-histcols{flex: 1 1 0; min-height: 0; display: flex; gap: calc(14 * var(--u));}
.win .st-rclist{width: calc(340 * var(--u)); flex: none; display: flex; flex-direction: column;}
.win .st-rclist > *{flex: none;}
.win .st-rcsearch{padding: calc(12 * var(--u));}
.win .st-rclist > .st-rcrows{flex: 1 1 0; min-height: 0; padding: calc(5 * var(--u)) calc(4 * var(--u)); display: flex; flex-direction: column; overflow: hidden;}
.win .st-rc{position: relative; display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); flex: none;}
.win .st-rc > div{min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .st-rc b{font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .st-rc span{font-size: calc(11 * var(--u)); line-height: 1.25; color: var(--ink-2); white-space: nowrap;}
.win .st-rc > div > div{display: flex; align-items: center; gap: calc(6 * var(--u));}
.win .st-rc > div > div span{font-size: calc(10.5 * var(--u));}
.win .meter.st-m3{width: calc(40 * var(--u)); flex: none; background: rgba(255, 255, 255, 0.1);}
.win .meter.st-m3 i{box-shadow: 0 0 calc(3 * var(--u)) rgb(var(--c-good) / 0.55);}
.win .st-rc.on{background: linear-gradient(90deg, rgb(var(--c-accent) / 0.24), rgb(var(--c-accent) / 0.06)); box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.46) inset;}
.win .st-rc.on::before{content: ""; position: absolute; left: calc(1 * var(--u)); top: calc(9 * var(--u)); bottom: calc(9 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(var(--c-accent)); box-shadow: 0 0 calc(5 * var(--u)) rgb(var(--c-accent) / 0.55);}
.win .st-rcpage{display: flex; align-items: center; padding: calc(8 * var(--u)) calc(12 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .st-rcnote{display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: 0 calc(12 * var(--u)) calc(12 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3;}
.win .st-rcnote span:first-child{display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--ink-2); white-space: nowrap;}
.win .st-rcnote span:last-child{color: var(--ink-3);}
.win .st-rcnote .ic{width: calc(11 * var(--u)); height: calc(11 * var(--u));}
.win .st-rcdetail{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;}
.win .st-rcdetail > *{flex: none;}
.win .st-rchead{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));}
.win .st-rchead > div{display: flex; flex-direction: column; gap: calc(4 * var(--u)); min-width: 0;}
.win .st-rchead b{font: 600 calc(18 * var(--u))/1.25 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .st-rchead > div > span{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .st-rcchips{display: flex; gap: calc(6 * var(--u)); margin-top: calc(5 * var(--u));}
.win .st-rcdetail > .st-rcbody{flex: 1 1 0; min-height: 0; padding: calc(16 * var(--u)); overflow: hidden;}
.win .st-rcinfo{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); margin-bottom: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset; font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .st-rcinfo .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(1 * var(--u)); color: rgb(var(--c-accent));}
.win .st-ri{display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0;}
.win .st-ri + .st-ri{border-top: 1px solid var(--hair);}
.win .st-ri > div{min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.25;}
.win .st-ri b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .st-okmark{width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(2 * var(--u)); border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: rgb(var(--tint)); color: #06110a;}
.win .st-okmark .ic{width: calc(8.5 * var(--u)); height: calc(8.5 * var(--u)); stroke-width: 2.6;}
.win .sheet.st-issues{width: calc(800 * var(--u)); max-width: none; height: calc(620 * var(--u)); padding: calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u));
  background: radial-gradient(ellipse 90% 60% at 60% -10%, rgb(var(--k) / 0.16), transparent), linear-gradient(180deg, #10141a, #07090d);}
.win .st-issues > *{flex: none;}
.win .st-ishead{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .st-ishead > div{display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0;}
.win .st-ishead b{font: 600 calc(18 * var(--u))/1.2 var(--font-display); letter-spacing: calc(-0.2 * var(--u));}
.win .st-ishead > div span{font-size: calc(11.5 * var(--u)); color: var(--ink-3);}
.win .sheet .st-isintro{margin: 0; font-size: calc(12 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .st-isacts{display: flex; align-items: center;}
.win .st-isfilter{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .st-isfilter > span:first-child{font-size: calc(11.5 * var(--u)); color: var(--ink-3);}
.win .st-isfilter .fld{flex: 1 1 0;}
.win .st-issues > .st-isrows{flex: 1 1 0; min-height: 0;}
.win .st-isrow{display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u));}
.win .st-isrow + .st-isrow{border-top: 1px solid var(--hair);}
.win .st-isrow > div{display: flex; align-items: flex-start; gap: calc(10 * var(--u));}
.win .st-isrow .st-mono{font-size: calc(11.5 * var(--u)); font-weight: 500;}
.win .st-isrow > span{font-size: calc(11.5 * var(--u)); color: var(--ink-2);}
.win .st-isfoot{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2);}
.win .pop.st-menu{left: calc(536 * var(--u)); top: calc(616 * var(--u)); min-width: calc(214 * var(--u));}
.win .pop .mi.st-dim{color: var(--ink-3);}

/* mock-thismac.css */
.win .tm-eye .dot{background: var(--ink-2); box-shadow: none;}
.win .tm-small{font-size: calc(11 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .tm-stack{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .sw.tm-sw-s{width: calc(32 * var(--u)); height: calc(18 * var(--u));}
.win .sw.tm-sw-s::after{width: calc(14 * var(--u)); height: calc(14 * var(--u));}
.win .sw.tm-sw-s.on::after{left: calc(16 * var(--u));}
.win .tm-toggle{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .tm-toggle > b{flex: 1; font: 600 calc(14 * var(--u))/1.25 var(--font);}
.win .tm-toggle.tm-s > b{font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-pick{display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap;}
.win .tm-emrow{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .tm-emblem{width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(16 * var(--u)); display: grid; place-items: center; flex: none; color: var(--ink-2); background: rgb(var(--c-accent) / 0.05); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .tm-emblem .ic{width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke-width: 1.4;}
.win .tm-emblem.tm-on{color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / 0.12);}
.win .tm-emblem.tm-acc{color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / 0.1);}
.win .tm-emblem.tm-compact{width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u));}
.win .tm-emblem.tm-compact .ic{width: calc(21 * var(--u)); height: calc(21 * var(--u));}
.win .tm-big{display: flex; flex-direction: column; gap: calc(7 * var(--u));}
.win .tm-big b{font: 600 calc(28 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.6 * var(--u)); white-space: nowrap;}
.win .tm-big span{font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .tm-cut{overflow: hidden; margin-bottom: calc(-2 * var(--u)); border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.win .tm-cut > *{flex-shrink: 0;}
.win .tm-disc{display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(13 * var(--u));}
.win .tm-disc .ic{width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--ink-2); stroke-width: 2.2;}
.win .tm-disc.tm-s{font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-care-stage{grid-template-columns: calc(262 * var(--u)) minmax(0, 1fr) calc(184 * var(--u)); min-height: calc(158 * var(--u));}
.win .tm-care-stage .stage-lead{gap: 0;}
.win .tm-care-stage .stage-trail{gap: calc(9 * var(--u));}
.win .tm-count{display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(9 * var(--u));}
.win .tm-count > b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .tm-count-note{margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .tm-checks{width: 100%; padding: 0 calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(7 * var(--u));}
.win .tm-checks-grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(7 * var(--u)) calc(22 * var(--u));}
.win .tm-caps-gap{margin-top: calc(3 * var(--u));}
.win .tm-check{display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; white-space: nowrap;}
.win .tm-check .dot{width: calc(6 * var(--u)); height: calc(6 * var(--u)); box-shadow: none;}
.win .tm-check .dot:not(.good):not(.serious):not(.info){background: var(--ink-2);}
.win .tm-check em{margin-left: auto; font: 500 calc(11 * var(--u))/1.3 var(--font); color: var(--ink-2);}
.win .tm-ro{display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .tm-ro b{font: 300 calc(24 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.6 * var(--u)); font-variant-numeric: tabular-nums;}
.win .tm-rows{display: flex; flex-direction: column;}
.win .tm-row{position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) 0; min-width: 0;}
.win .tm-row + .tm-row::before{content: ""; position: absolute; left: calc(38 * var(--u)); right: 0; top: 0; border-top: 1px solid var(--hair);}
.win .tm-row.tm-def{padding: calc(7 * var(--u)) 0;}
.win .tm-row-t{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .tm-row-t b{font: 600 calc(12.5 * var(--u))/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .tm-row.tm-def .tm-row-t b{font-weight: 500;}
.win .tm-row-t span{font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .tm-row-t code{font: 400 calc(10.5 * var(--u))/1.3 var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .tm-ibtn{padding: 0 calc(7 * var(--u));}
.win .tm-meta{margin-top: calc(8 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--hair);}
.win .tm-meta > b{display: block; font: 600 calc(12 * var(--u))/1.3 var(--font);}
.win .tm-paging{display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11 * var(--u)); color: var(--ink-3);}
.win .tm-paging b{font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .stage.tm-vol-stage{grid-template-columns: calc(330 * var(--u)) minmax(0, 1fr); min-height: calc(165 * var(--u));}
.win .tm-vol-stage .stage-lead{padding: calc(26 * var(--u));}
.win .tm-vol-stage .stage-title{font-size: calc(23 * var(--u)); letter-spacing: calc(-0.45 * var(--u));}
.win .tm-vol-stage .stage-center{padding: 0;}
.win .tm-vol-center{width: 100%; padding: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .tm-vol-center > span{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .tm-vol{padding: calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .tm-vol-h{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .tm-vol-h > b{font: 600 calc(15 * var(--u))/1.25 var(--font);}
.win .tm-vol-h > .ic{width: calc(16 * var(--u)); height: calc(16 * var(--u));}
.win .tm-perm{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .tm-perm-h{display: flex; align-items: center; gap: calc(8 * var(--u));}
.win .tm-perm-h b{flex: 1; font: 500 calc(12 * var(--u))/1.3 var(--font);}
.win .tm-apps{display: flex; flex-direction: column; gap: calc(12 * var(--u));}
.win .tm-app{display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) 0; min-height: calc(40 * var(--u));}
.win .tm-app-n{min-width: calc(120 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .tm-app-n b{font: 500 calc(13 * var(--u))/1.25 var(--font);}
.win .tm-app-n span{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .tm-app .sld{flex: 0 0 calc(220 * var(--u));}
.win .tm-app-v{width: calc(48 * var(--u)); text-align: right; font-variant-numeric: tabular-nums;}
.win .tm-sheet{display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u));}
.win .tm-sheet > p{margin: 0; font-size: calc(13 * var(--u)); line-height: 1.4; color: var(--ink);}
.win .tm-proc{display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .tm-proc b{font: 500 calc(12 * var(--u))/1.3 var(--font);}
.win .tm-proc span{font-size: calc(11 * var(--u)); color: var(--ink-2); overflow-wrap: anywhere;}
.win .tm-proc small{font-size: calc(10 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.win .tm-init{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .tm-init b{width: calc(44 * var(--u)); text-align: center; font-weight: 400; font-variant-numeric: tabular-nums;}
.win .tm-sheet-status{margin-top: calc(12 * var(--u));}
.win .stage.tm-awake-stage{grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr); min-height: calc(226 * var(--u));}
.win .tm-awake-stage .stage-lead{padding: calc(24 * var(--u)); gap: calc(16 * var(--u));}
.win .tm-awake-stage .stage-center{padding: calc(24 * var(--u));}
.win .tm-well{width: 100%; padding: calc(20 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset; display: flex; flex-direction: column; gap: calc(18 * var(--u));}
.win .tm-dead{display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .tm-dead-l{display: flex; align-items: center; gap: calc(5 * var(--u)); font: 500 calc(11 * var(--u))/1.25 var(--font); color: var(--ink-2);}
.win .tm-dead-l .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .tm-dead > b{font: 600 calc(24 * var(--u))/1.15 var(--font-display); letter-spacing: calc(-0.4 * var(--u)); font-variant-numeric: tabular-nums;}
.win .tm-dead.tm-on > b{font-size: calc(28 * var(--u)); letter-spacing: calc(-0.6 * var(--u));}
.win .tm-dead.tm-compact > b{font-size: calc(20 * var(--u));}
.win .tm-dead.tm-compact.tm-on > b{font-size: calc(23 * var(--u));}
.win .tm-dead > span:last-child{font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .tm-add{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .tm-kcard{padding: calc(20 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u));}
.win .col > .tm-kcard{flex: 1 1 auto;}
.win .tm-kcard > *{max-width: 100%;}
.win .tm-kcard > .tm-stack{align-self: stretch;}
.win .tm-kh{display: flex; align-items: center; gap: calc(7 * var(--u));}
.win .tm-kh .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: rgb(var(--c-accent));}
.win .tm-kh b{font: 600 calc(14 * var(--u))/1.25 var(--font);}
.win .tm-stops{display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); font-size: calc(11 * var(--u));}
.win .tm-stops .tm-pick{font-size: calc(11 * var(--u));}
.win .tm-stops .lblc{font-size: calc(11 * var(--u));}
.win .tm-dim{color: var(--ink-2); line-height: 1.4;}
.win .tm-foot{display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)) 0; font-size: calc(11 * var(--u)); color: var(--ink-2);}
.win .tm-foot > div{display: flex; align-items: center; gap: calc(7 * var(--u));}
.win .tm-foot .ic{width: calc(13 * var(--u)); height: calc(13 * var(--u));}
.win .tm-fields{display: flex; gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u));}
.win .tm-field{flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u));}
.win .tm-field > b{font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-field .fld{height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums;}
.win .tm-fields-note{margin-top: calc(20 * var(--u));}
.win .stage.tm-org-stage{grid-template-columns: calc(340 * var(--u)) minmax(0, 1fr); min-height: calc(252 * var(--u));}
.win .tm-org-stage .stage-lead{padding: calc(24 * var(--u)); gap: calc(16 * var(--u));}
.win .tm-org-stage .stage-center{padding: calc(22 * var(--u));}
.win .tm-org{width: 100%; display: flex; flex-direction: column; gap: calc(16 * var(--u));}
.win .tm-org-sw{display: inline-flex; align-items: center; gap: calc(10 * var(--u)); align-self: flex-start;}
.win .tm-org-sw b{font: 600 calc(14 * var(--u))/1.25 var(--font);}
.win .tm-diagram{display: flex; align-items: flex-start; padding: calc(10 * var(--u)) calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .tm-zone{flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u));}
.win .tm-zone-i{height: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .tm-zone-i .ic{width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6;}
.win .tm-zone > span{font: 500 calc(11 * var(--u))/1.25 var(--font); color: var(--ink-2);}
.win .tm-zdiv{width: calc(10 * var(--u)); height: calc(24 * var(--u)); display: grid; place-items: center; flex: none;}
.win .tm-zdiv i{width: calc(1.5 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--ink-2);}
.win .tm-ctl{width: calc(26 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: center; flex: none; background: var(--raised-2); box-shadow: 0 0 0 1px var(--hair-2) inset;}
.win .tm-ctl .ic{width: calc(16 * var(--u)); height: calc(16 * var(--u));}
.win .tm-acts{display: flex; gap: calc(10 * var(--u));}
.win .tm-hint{font-size: calc(11.5 * var(--u)); line-height: 1.4; color: var(--ink-2);}
.win .tm-cols{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(16 * var(--u)); align-items: start;}
.win .tm-sh{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .tm-sh .itile{color: rgb(var(--c-accent));}
.win .tm-sh .itile .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.6;}
.win .tm-sh > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .tm-sh b{font: 600 calc(13 * var(--u))/1.25 var(--font);}
.win .tm-sh span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .tm-after{display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums;}
.win .tm-rec{width: calc(148 * var(--u)); height: calc(28 * var(--u));}
.win .stage.tm-org-stage.tm-next{min-height: calc(232 * var(--u));}
.win .tm-guide{width: 100%; display: flex; flex-direction: column; gap: calc(10 * var(--u));}
.win .tm-guide-h{display: flex; align-items: center; min-height: calc(22 * var(--u));}
.win .tm-gbar{position: relative; height: calc(30 * var(--u)); margin-bottom: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); display: flex; align-items: center; white-space: nowrap; background: var(--well); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .tm-gmenus{display: flex; align-items: center; gap: calc(15 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(243, 245, 248, 0.5);}
.win .tm-gmenus b{font-weight: 600;}
.win .tm-ggroup{display: flex;}
.win .tm-gslot{position: relative; width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; flex: none; color: rgba(243, 245, 248, 0.86);}
.win .tm-gslot > .ic{width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.6;}
.win .tm-gslot.tm-gctl{width: calc(34 * var(--u)); color: var(--ink);}
.win .tm-gslot.tm-gdiv{width: calc(12 * var(--u));}
.win .tm-gdiv > i{width: calc(1 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(243, 245, 248, 0.65);}
.win .tm-gzones{position: absolute; left: 50%; top: calc(34 * var(--u)); width: 0; height: calc(16 * var(--u)); font: 500 calc(10.5 * var(--u))/calc(16 * var(--u)) var(--font); color: rgba(243, 245, 248, 0.5);}
.win .tm-gzones span{position: absolute; top: 0;}
.win .tm-gzones span:first-child{right: calc(9 * var(--u));}
.win .tm-gzones span:last-child{left: calc(9 * var(--u));}
.win .tm-gzones i{position: absolute; left: calc(-0.5 * var(--u)); top: calc(3 * var(--u)); width: calc(1 * var(--u)); height: calc(10 * var(--u)); background: rgba(243, 245, 248, 0.5);}
.win .tm-gclock{width: calc(40 * var(--u)); text-align: center; font: 500 calc(12.5 * var(--u))/1 var(--font); font-variant-numeric: tabular-nums; color: rgba(243, 245, 248, 0.86);}
.win .tm-steps{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u));}
.win .tm-step{display: flex; align-items: flex-start; gap: calc(9 * var(--u)); padding: calc(8 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--raised); box-shadow: 0 0 0 1px var(--hair) inset;}
.win .tm-step > i{width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--raised-2); font: 600 calc(11 * var(--u))/1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .tm-step > div{min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u));}
.win .tm-step b{font: 600 calc(12.5 * var(--u))/1.25 var(--font);}
.win .tm-step span{font-size: calc(11.5 * var(--u)); line-height: 1.3; color: var(--ink-2);}
.win .tm-facts{display: flex; flex-direction: column; gap: calc(5 * var(--u));}
.win .tm-facts > div{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .tm-facts i{width: calc(16 * var(--u)); display: grid; place-items: center; flex: none; font: 500 calc(11 * var(--u))/1 var(--font); color: var(--ink-3);}
.win .tm-facts .ic{width: calc(12 * var(--u)); height: calc(12 * var(--u));}
.win .tm-cols.tm-even{align-items: stretch;}
.win .tm-cols.grow{grid-template-rows: minmax(0, 1fr);}
.win .tm-tight{gap: calc(6 * var(--u));}
.win .tm-tight .srow{padding: calc(6 * var(--u)) 0; min-height: calc(40 * var(--u));}
.win .tm-bar{position: relative; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(18 * var(--u)); border-radius: calc(9 * var(--u)); display: flex; align-items: center; justify-content: flex-end; gap: calc(16 * var(--u)); color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, rgba(44, 51, 62, 0.86), rgba(27, 32, 40, 0.86)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.36);}
.win .tm-mbr{position: relative; height: calc(22 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; font: 700 calc(9.5 * var(--u))/calc(10.5 * var(--u)) var(--font); font-variant-numeric: tabular-nums;}
.win .tm-mbr > b{display: block; font-weight: 700;}
.win .tm-mbi{position: relative; height: calc(22 * var(--u)); display: grid; place-items: center; flex: none;}
.win .tm-mbi > .ic{width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6;}
.win .tm-bracket{width: calc(23 * var(--u)); height: calc(18 * var(--u));}
.win .tm-mbgroup{display: flex; align-items: center; gap: calc(16 * var(--u));}
.win .tm-mbdiv{width: calc(10 * var(--u)); height: calc(18 * var(--u)); display: grid; place-items: center; flex: none;}
.win .tm-mbdiv i{width: calc(1 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, 0.65);}
.win .tm-mbclock{display: flex; gap: calc(9 * var(--u)); min-width: calc(112 * var(--u)); justify-content: flex-end; font: 500 calc(13 * var(--u))/1 var(--font); font-variant-numeric: tabular-nums;}
.win .tm-pop{position: absolute; z-index: 3; top: calc(100% + calc(12 * var(--u))); left: 50%; width: calc(368 * var(--u)); transform: translateX(-50%); padding: calc(12 * var(--u)); border-radius: calc(13 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u));
  background: var(--surface); color: var(--ink); font: 400 calc(13 * var(--u))/1.3 var(--font); font-variant-numeric: normal; text-align: left; white-space: normal;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 calc(26 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.62), 0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.42);}
.win .tm-pop::before{content: ""; position: absolute; left: 50%; top: calc(-6 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); border-radius: calc(2.5 * var(--u)) 0 0 0; transform: rotate(45deg); background: var(--surface); box-shadow: -1px -1px 0 rgba(255, 255, 255, 0.15);}
.win .tm-tabs{position: relative; display: flex; gap: calc(2 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--well);}
.win .tm-tabs > span{flex: 1 1 0; height: calc(29 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; color: var(--ink-2);}
.win .tm-tabs > span.tm-on{background: var(--raised-2); color: var(--ink);}
.win .tm-tabs .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.8;}
.win .tm-pop-h{display: flex; align-items: baseline;}
.win .tm-pop-h b{flex: 1; font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-pop-h span{font: 500 calc(11.5 * var(--u))/1.25 var(--font); color: var(--ink-2);}
.win .tm-pop-body{display: flex; flex-direction: column; gap: calc(8 * var(--u));}
.win .tm-clock{font: 500 calc(11 * var(--u))/1.25 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums;}
.win .tm-mods{padding: calc(4 * var(--u)) 0; border-radius: calc(10 * var(--u)); background: var(--well);}
.win .tm-mod{display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(31 * var(--u)); padding: 0 calc(10 * var(--u));}
.win .tm-mod > .ic{color: rgb(var(--tint));}
.win .tm-mod > b{width: calc(86 * var(--u)); flex: none; font: 500 calc(12 * var(--u))/1.2 var(--font); white-space: nowrap;}
.win .tm-mod > .tm-sp{width: calc(38 * var(--u)); flex: none; padding-right: calc(4 * var(--u));}
.win .tm-mod > em{margin-left: auto; font: 600 calc(12 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .tm-leaders{padding: calc(11 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--well); display: flex; flex-direction: column; gap: calc(3 * var(--u));}
.win .tm-leaders > b{font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-leaders > .tm-clock{padding-bottom: calc(4 * var(--u));}
.win .tm-leader{display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(28 * var(--u));}
.win .tm-leader .appi{width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4.5 * var(--u)); font-size: calc(8.5 * var(--u));}
.win .tm-leader > b{flex: 1; min-width: 0; font: 500 calc(12 * var(--u))/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.win .tm-leader .meter{width: calc(36 * var(--u)); flex: none;}
.win .tm-leader > em{min-width: calc(70 * var(--u)); text-align: right; font: 600 calc(12 * var(--u))/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;}
.win .tm-leaders > p{margin: 0; padding-top: calc(5 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ink-2);}
.win .tm-inst{padding: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--well); display: flex; flex-direction: column; gap: calc(10 * var(--u));}
.win .tm-inst-top{display: flex; align-items: center; gap: calc(12 * var(--u));}
.win .tm-inst-v{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u));}
.win .tm-inst-v b{font: 600 calc(29 * var(--u))/1.1 var(--font-display); letter-spacing: calc(-0.6 * var(--u)); font-variant-numeric: tabular-nums;}
.win .tm-inst-v span{font: 500 calc(11.5 * var(--u))/1.25 var(--font); color: var(--ink-2);}
.win .tm-inst-top .tm-sp{width: calc(110 * var(--u)); flex: none; padding-right: calc(4 * var(--u));}
.win .tm-inst-rows{display: flex; flex-direction: column; gap: calc(10 * var(--u));}
.win .tm-inst-rows > div{display: flex; font: 500 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-inst-rows span{flex: 1; color: var(--ink-2);}
.win .tm-inst-rows b{font-weight: 500; font-variant-numeric: tabular-nums;}
.win .tm-pa{padding: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--well); display: flex; flex-direction: column; gap: calc(16 * var(--u));}
.win .tm-pa-h{display: flex; align-items: center; gap: calc(10 * var(--u));}
.win .tm-pa-h b{flex: 1; font: 600 calc(12 * var(--u))/1.25 var(--font);}
.win .tm-pa-box{padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--raised-2);}
.win .tm-pa-pick{display: flex; flex-direction: column; align-items: flex-start; gap: calc(7 * var(--u));}
.win .tm-pop-f{display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u));}
.win .tm-pop-f .btn{height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--font);}
.win .tm-pop-f .btn .ic{width: calc(14 * var(--u)); height: calc(14 * var(--u));}
.win .tm-pop-fr{align-self: stretch; display: flex; align-items: center; gap: calc(7 * var(--u));}
.win .tm-gear{width: calc(32 * var(--u)); height: calc(26 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--u));}
.win .tm-gear .ic:last-child{width: calc(8 * var(--u)); height: calc(8 * var(--u)); color: var(--ink-2); stroke-width: 2.4;}
.win .tm-desk{position: absolute; inset: 0;}
.win .tm-orgbars{position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: calc(26 * var(--u));}
.win .tm-orgbar{display: flex; flex-direction: column; gap: calc(9 * var(--u));}
.win .tm-orgbar:first-child{align-self: stretch;}
.win .tm-dmg{position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(14 * var(--u)); bottom: calc(34 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; display: flex; flex-direction: column; background: #1a1d24;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.17), 0 calc(24 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, 0.5), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.35);}
.win .tm-dmg-tb{position: relative; height: calc(30 * var(--u)); padding-left: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); flex: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);}
.win .tm-dmg-tb i{width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.25) inset;}
.win .tm-dmg-tb i:nth-child(2){background: #febc2e;}
.win .tm-dmg-tb i:nth-child(3){background: #28c840;}
.win .tm-dmg-tb b{position: absolute; left: 0; right: 0; text-align: center; font: 600 calc(13 * var(--u))/1 var(--font); color: rgba(255, 255, 255, 0.82);}
.win .tm-dmg-body{flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(30 * var(--u)); padding-bottom: calc(6 * var(--u)); background: radial-gradient(ellipse 70% 90% at 50% 0, rgb(var(--c-accent) / 0.1), transparent);}
.win .tm-dmg-item{width: calc(150 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u));}
.win .tm-dmg-item img{width: calc(120 * var(--u)); height: calc(120 * var(--u)); filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45));}
.win .tm-folder{width: calc(120 * var(--u)); height: calc(120 * var(--u)); filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.4));}
.win .tm-dmg-item span{font: 500 calc(13 * var(--u))/1.2 var(--font); color: #fff; text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.6);}
.win .tm-dmg-go{margin-bottom: calc(26 * var(--u)); color: var(--ink-3);}
.win .tm-dmg-arrow{width: calc(72 * var(--u)); height: calc(24 * var(--u));}

/* How a recreated screen sits on a page. In the low layer "base", so a mockup's own CSS (layer "page") overrides it freely. */
@layer base {
  /* A line icon is as large as the text beside it unless the page says otherwise. */
  .ic { width: 1em; height: 1em; flex: none; }
  .shot { margin: 0; position: relative; }
  .shot-frame { position: relative; border-radius: var(--shot-r, 14px); }
  .shot-pan { container-type: inline-size; width: 100%; }
  .shot figcaption { margin-top: 14px; font-size: 0.8125rem; line-height: 1.45; opacity: 0.6; }
  /* A closer look at one part of a screen. shots.js sets the zoom and offsets from the part it is asked to show. */
  .shot.crop .shot-frame { overflow: hidden; aspect-ratio: var(--crop-ar, var(--crop-ar-auto, 16 / 10)); background: #05070a; }
  .shot.crop .shot-pan { width: calc(var(--zoom, 1) * 100%); margin-left: calc(var(--px, 0) * -100%); margin-top: calc(var(--py, 0) * -100%); }
  .js .shot.crop:not(.ready) .shot-pan { visibility: hidden; }
  /* In an element with the class "step", a picture opens the whole screen it came from. */
  .step .shot { cursor: zoom-in; }
  .shot-zoom { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: rgba(12, 15, 20, 0.86); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13) inset; color: rgba(232, 237, 245, 0.66); font-size: 1rem; cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; }
  .shot-zoom svg { width: 1em; height: 1em; }
  .shot:hover .shot-zoom, .shot-zoom:focus-visible { opacity: 1; color: #f3f5f8; }
  @media (hover: none) { .shot-zoom { opacity: 1; } }
  .zoom { width: min(96vw, 142vh); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: #f3f5f8; overflow: visible; }
  .zoom::backdrop { background: rgba(2, 4, 7, 0.86); }
  .zoom-body .shot { cursor: default; }
  .zoom-close { position: fixed; right: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13) inset; color: #f3f5f8; font: 500 0.8125rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
  /* On a phone a whole window would be too small to read. It is shown larger and can be dragged sideways. */
  @media (max-width: 760px) {
    .zoom { width: 100vw; }
    .shot:not(.crop) .shot-frame { overflow-x: auto; overflow-y: hidden; border-radius: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .shot:not(.crop) .shot-frame::-webkit-scrollbar { display: none; }
    .shot:not(.crop) .shot-pan { width: max(100%, calc(var(--pan, 860) * 1px)); }
  }
}

/* The outside of a window is the page's to style: set --win-shadow and --win-radius on the window or anything around it. */
.win { box-shadow: var(--win-shadow, 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.6) inset); border-radius: var(--win-radius, calc(13 * var(--u))); }
.shot.crop .win { box-shadow: none; border-radius: 0; }
@media (max-width: 760px) { .shot:not(.crop) .win { box-shadow: none; border-radius: 0; } }

/* site.css */
@layer page {
/* Silicon. The chip is the page: a board in solid light, and plates, pads, silkscreen and traces above it.
   How the chip runs is chosen by client/50-chip.js, which says so on <html>:
     (no class)  no script: a plain stacked page
     .nogl       no WebGL2: the chip is a picture
     .gl         the chip is drawn. Then one of:
       .fly      the home page in a desktop window: the whole page flies over the chip
       .rest     a station in a desktop window: the chip lies behind the whole page, the camera resting on one district
       .box      a station on touch or with reduced motion: the chip is drawn inside the station's view
       .band     the home page on a small or touch screen: the chip in a band held at the top, the page read below it
       (none)    the home page with reduced motion: the chip in the opening */

@font-face { font-family: 'Geist'; src: url('./geist.woff2') format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Geist Mono'; src: url('./geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: block; }
@keyframes turn-hint { to { opacity: 0; } }
@keyframes hint { from { background-position: 0 -10px; } to { background-position: 0 24px; } }
@keyframes rail { from { transform: translate3d(0, -70px, 0); } to { transform: translate3d(0, var(--rail-h, 900px), 0); } }
:root:not(.win, .win *) {
  --void: #05070a; --board: #0a0d12; --plate: #0c1117; --plate-2: #111821; --line: #1e2733; --line-2: #2f3b4b;
  --ink: #f3f6fa; --ink-2: #bcc6d3; --ink-3: #8491a3;
  --cpu: #00a6c3; --gpu: #9171e9; --memory: #c8831e; --disk: #20aa6e; --network: #377ee3; --neural: #ec5482; --cache: #6c7887;
  --accent: #3cc3e3; --good: #30d158; --orange: #ff5c21; --blue: #57a8ff;
  --tint: var(--accent);
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --zoom: 1; --chip-h: min(54vh, 600px); --band-h: clamp(236px, 38vh, 470px); --band-h: clamp(236px, 38svh, 470px); --nav: clamp(60px, 3.2vw, 76px); --gut: clamp(18px, 2.2vw, 56px);
  color-scheme: dark;
}
/* In a very large window the sections under the flight are shown larger, as one piece. */
@media (min-width: 2000px) { :root:not(.win, .win *) { --zoom: 1.1; }}
@media (min-width: 2300px) { :root:not(.win, .win *) { --zoom: 1.2; }}
html:not(.win, .win *) { background: var(--void); scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body:not(.win, .win *) { margin: 0; position: relative; min-height: 100vh; background: var(--void); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
  background-image: linear-gradient(rgba(120, 150, 190, 0.07) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(120, 150, 190, 0.07) 1.5px, transparent 1.5px); background-size: 64px 64px; }
*:not(.win, .win *), *:not(.win, .win *)::before, *:not(.win, .win *)::after { box-sizing: border-box; }
h1:not(.win, .win *), h2:not(.win, .win *), h3:not(.win, .win *), p:not(.win, .win *), ul:not(.win, .win *), ol:not(.win, .win *), dl:not(.win, .win *), dd:not(.win, .win *), figure:not(.win, .win *) { margin: 0; }
ul:not(.win, .win *), ol:not(.win, .win *) { padding: 0; list-style: none; }
a:not(.win, .win *) { color: inherit; text-decoration: none; }
button:not(.win, .win *) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img:not(.win, .win *), svg:not(.win, .win *) { display: block; }
:focus-visible:not(.win, .win *) { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr:not(.win, .win *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:not(.win, .win *) { position: fixed; left: 12px; top: 12px; z-index: 90; padding: 10px 14px; background: var(--ink); color: #05070a; font: 600 14px/1 var(--sans); transform: translateY(-200%); }
.skip:focus:not(.win, .win *) { transform: none; }
.ic:not(.win, .win *) { width: 1em; height: 1em; flex: none; }
strong:not(.win, .win *) { font-weight: 600; color: var(--ink); }
kbd:not(.win, .win *), .ui:not(.win, .win *), code:not(.win, .win *) { font: 500 0.86em/1 var(--mono); padding: 0.18em 0.42em; border: 1.5px solid var(--line-2); color: var(--ink); background: var(--plate-2); white-space: nowrap; }
.ui:not(.win, .win *) { font-family: var(--sans); font-weight: 600; }
/* A long label or a path wraps instead of pushing the page wider than the screen. Each line keeps its own box. */
.ui:not(.win, .win *), code:not(.win, .win *) { white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------------------------------------------------------------- the pieces of the language */

/* Silkscreen: the small printed labelling of a board. */
.silk:not(.win, .win *) { display: flex; align-items: center; gap: 0.9em; font: 500 clamp(11.5px, 0.62vw, 15px)/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.silk .idx:not(.win, .win *) { color: var(--tint); font-weight: 600; }
.silk .silk-r:not(.win, .win *) { margin-left: auto; text-align: right; }
.lamp:not(.win, .win *) { width: 7px; height: 7px; flex: none; background: var(--tint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 30%, transparent); }

/* A plate: a solid piece with two cut corners and a lit edge. The two layers follow the same cut. */
.plate:not(.win, .win *), .pad:not(.win, .win *) { position: relative; isolation: isolate; --cut: 16px; --edge: var(--line-2); --fill: var(--plate); --edge-w: 1.5px; }
.plate:not(.win, .win *)::before, .pad:not(.win, .win *)::before, .plate:not(.win, .win *)::after, .pad:not(.win, .win *)::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.plate:not(.win, .win *)::before, .pad:not(.win, .win *)::before { inset: 0; background: var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.plate:not(.win, .win *)::after, .pad:not(.win, .win *)::after { inset: var(--edge-w); background: var(--fill); --c: calc(var(--cut) - var(--edge-w) * 0.4142);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }

/* A pad: something to press. */
.pad:not(.win, .win *) { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0 20px; --cut: 10px; --edge: #46566b; --fill: #10161e;
  font: 600 15px/1 var(--sans); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; cursor: pointer; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s; }
.pad .ic:not(.win, .win *) { font-size: 1.15em; }
.pad:hover:not(.win, .win *), .pad:focus-visible:not(.win, .win *) { --edge: var(--ink); transform: translateY(-2px); }
.pad:active:not(.win, .win *) { transform: translateY(1px); }
.pad.primary:not(.win, .win *) { --edge: #ffb08f; --fill: var(--orange); color: #160700; }
.pad.primary:hover:not(.win, .win *), .pad.primary:focus-visible:not(.win, .win *) { --edge: #fff; --fill: #ff6f3a; }
.pad.small:not(.win, .win *) { min-height: 38px; padding: 0 14px; font-size: 13.5px; --cut: 8px; }
.pad.big:not(.win, .win *) { min-height: 64px; padding: 0 30px; font-size: 18px; --cut: 13px; }
.go:not(.win, .win *) { display: inline-flex; align-items: center; gap: 0.5em; font: 600 14px/1 var(--sans); color: var(--ink); padding: 6px 0; border-bottom: 1.5px solid var(--tint); }
.go .ic:not(.win, .win *) { transition: transform 0.2s; }
.go:hover .ic:not(.win, .win *), .go:focus-visible .ic:not(.win, .win *) { transform: translateX(4px); }
.req:not(.win, .win *) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1.4em; font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.req a:not(.win, .win *) { color: var(--ink); border-bottom: 1.5px solid var(--line-2); }
.req a:hover:not(.win, .win *) { border-color: var(--ink); }
.req span + span:not(.win, .win *), .req span + a:not(.win, .win *) { position: relative; }

.wordmark:not(.win, .win *) { font: 600 clamp(19px, 1.05vw, 24px)/1 var(--sans); letter-spacing: -0.02em; white-space: nowrap; }
.wm-slash:not(.win, .win *) { color: var(--orange); margin: 0 0.02em; }

/* ---------------------------------------------------------------- the bar: a row of labelled pins */

.bar:not(.win, .win *) { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: var(--nav); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  background: rgba(5, 7, 10, 0.92); border-bottom: 1.5px solid var(--line); }
.bar-name:not(.win, .win *) { display: flex; align-items: center; height: 100%; }
.bar-nav:not(.win, .win *) { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.bar-nav a:not(.win, .win *) { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 clamp(11px, 1vw, 20px); font: 500 clamp(12px, 0.62vw, 14.5px)/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); transition: color 0.18s; }
.bar-nav a i:not(.win, .win *) { width: 6px; height: 6px; background: var(--line-2); transition: background-color 0.18s, transform 0.18s; }
.bar-nav a:not(.win, .win *)::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: -1.5px; height: 2.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-nav a:hover:not(.win, .win *), .bar-nav a:focus-visible:not(.win, .win *), .bar-nav a[aria-current]:not(.win, .win *), .bar-nav a[data-over]:not(.win, .win *) { color: var(--ink); }
.bar-nav a:hover i:not(.win, .win *), .bar-nav a[aria-current] i:not(.win, .win *), .bar-nav a[data-over] i:not(.win, .win *) { background: var(--accent); transform: rotate(45deg); }
.bar-nav a[aria-current]:not(.win, .win *)::after, .bar-nav a[data-over]:not(.win, .win *)::after { transform: none; }

main:not(.win, .win *), .foot:not(.win, .win *) { position: relative; z-index: 1; }
/* Until script.js has decided how the page runs, the opening is not shown, so nothing jumps. The head script lifts this after a moment in any case. */
html.pre main:not(.win, .win *) { visibility: hidden; }

/* ---------------------------------------------------------------- the chip */

#chip:not(.win, .win *), .chip-still:not(.win, .win *) { display: none; }
html:not(.js)[data-chip='flight'] .chip-still:not(.win, .win *), html.nogl .chip-still:not(.win, .win *) { display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: var(--chip-h); object-fit: cover; object-position: 50% 50%; }
html.gl #chip:not(.win, .win *) { display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: var(--chip-h); }
html.nogl[data-chip='backdrop'] .chip-still:not(.win, .win *) { display: none; }
html.gl.fly #chip:not(.win, .win *), html.gl.rest #chip:not(.win, .win *) { position: fixed; width: 100vw; height: 100vh; }
html.gl.box #chip:not(.win, .win *), html.gl.band #chip:not(.win, .win *) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
html.nochip #chip:not(.win, .win *) { display: none; }

/* ---------------------------------------------------------------- the opening, as a plain page */

.flight:not(.win, .win *) { position: relative; }
.hero:not(.win, .win *) { padding: calc(var(--nav) + 40px) var(--gut) 48px; }
html.gl .hero:not(.win, .win *), html.nogl .hero:not(.win, .win *), html:not(.js) .hero:not(.win, .win *) { padding-top: calc(var(--chip-h) + 14px); }
.hero-plane:not(.win, .win *) { max-width: 1100px; margin: 0 auto; }
.hero-top:not(.win, .win *) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.hero-top .silk:first-child:not(.win, .win *) { color: var(--accent); }
.hero h1:not(.win, .win *) { font: 700 clamp(2.5rem, 6.4vw, 5.2rem)/0.98 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.hero-lead:not(.win, .win *) { margin-top: 20px; max-width: 46ch; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.38; color: var(--ink-2); text-wrap: pretty; }
.hero-cta:not(.win, .win *) { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hero-cta .pad.primary:not(.win, .win *) { min-height: 56px; padding: 0 24px; font-size: 16.5px; }
.hero-cta .pad:not(.win, .win *) { min-height: 56px; }
.hero-cta .req:not(.win, .win *) { flex-basis: 100%; margin-top: 6px; }

.leaders:not(.win, .win *), .rail:not(.win, .win *), .hint:not(.win, .win *) { display: none; }
/* As a plain page the three readings of the opening sit in a row under the chip. */
.tags:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--gut) 40px; max-width: calc(1100px + var(--gut) * 2); margin: 0 auto; }
.tag:not(.win, .win *) { display: none; }
.tag[data-when~='hero']:not(.win, .win *) { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 3px 12px; padding: 11px 15px 12px; --cut: 9px; --edge: var(--c, var(--line-2)); --fill: #06090c; }
.tag-k:not(.win, .win *) { font: 500 clamp(11px, 0.6vw, 14.5px)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tag b:not(.win, .win *) { font: 600 20px/1.1 var(--mono); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tag-s:not(.win, .win *) { grid-column: 1 / -1; font: 500 clamp(11px, 0.6vw, 14.5px)/1.3 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the four parts, as a plain page */

.part:not(.win, .win *) { --tint: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 56px var(--gut); max-width: calc(2200px + var(--gut) * 2); margin: 0 auto; }
.part-text:not(.win, .win *) { padding: clamp(22px, 2vw, 34px); --edge: color-mix(in srgb, var(--tint) 70%, #fff 0%); --fill: var(--plate); align-self: start; }
.part-text .silk:not(.win, .win *) { margin-bottom: 18px; }
.part-text h2:not(.win, .win *) { font: 650 clamp(1.7rem, 2.3vw, 3.5rem)/1.06 var(--sans); letter-spacing: -0.032em; text-wrap: balance; }
.part-swap:not(.win, .win *) { margin-top: 18px; display: grid; gap: 18px; }
.part-lead:not(.win, .win *) { color: var(--ink-2); font-size: clamp(0.98rem, 1.05vw, 1.5rem); line-height: 1.5; text-wrap: pretty; }
.part-points:not(.win, .win *) { display: grid; gap: 12px; }
.part-points li:not(.win, .win *) { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--ink-2); font-size: clamp(0.95rem, 1vw, 1.45rem); line-height: 1.42; }
.part-points i:not(.win, .win *) { display: grid; place-items: center; width: 26px; height: 26px; font: 600 12px/1 var(--mono); font-style: normal; color: #04070a; background: var(--tint); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.part-text .go:not(.win, .win *) { margin-top: 22px; }
.part-screen:not(.win, .win *) { min-width: 0; --win-radius: 10px; --win-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tint) 75%, #fff 10%), 0 0 0 1px rgba(0, 0, 0, 0.6) inset; }
.screen-cap:not(.win, .win *) { margin-bottom: 12px; color: var(--ink-2); }
@media (min-width: 1100px) { .part:not(.win, .win *) { grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr); gap: 34px; align-items: start; }}

/* ---------------------------------------------------------------- the band: the home page on a small or touch screen

   The chip is held in a band under the bar while the page is read below it. What is being read picks the place,
   and the camera goes there in its own time. The conditions are those under which client/50-chip.js does not fly:
   they are written here as a media query so that the band has its room before the script has run. */

.pan-hint:not(.win, .win *), .turn-hint:not(.win, .win *) { display: none; }
.turn-hint:not(.win, .win *) { position: absolute; z-index: 4; left: 12px; bottom: 10px; gap: 0.6em; margin: 0; color: var(--ink-2); pointer-events: none; transition: opacity 0.5s; text-shadow: 0 1.5px 0 #05070a, 0 -1.5px 0 #05070a, 1.5px 0 0 #05070a, -1.5px 0 0 #05070a; }
.turn-hint .ic:not(.win, .win *) { font-size: 1.5em; color: var(--accent); }
.turn-hint.done:not(.win, .win *) { opacity: 0; }
html.box .turn-hint:not(.win, .win *) { animation: turn-hint 0.6s 9s forwards; }
html.band .turn-hint:not(.win, .win *), html.box .turn-hint:not(.win, .win *) { display: flex; }
/* The readings pinned to the chip in the band. */
html.band .scope .leaders:not(.win, .win *) { display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
html.band .scope .tags:not(.win, .win *) { display: block; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; padding: 0; margin: 0; max-width: none; pointer-events: none; }
html.band .tag:not(.win, .win *) { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 3px 12px; position: absolute; left: 0; top: 0; padding: 8px 13px 9px; white-space: nowrap; opacity: 0; will-change: transform, opacity; --cut: 9px; --edge: var(--c, var(--line-2)); --fill: #06090c; }
html.band .tag-k:not(.win, .win *) { color: var(--c, var(--ink-2)); font-weight: 600; filter: brightness(1.15); }
html.band .tag-s:not(.win, .win *) { color: var(--ink-2); }
/* On a phone a reading is its name and its value, so that it does not cover what it points at. */
@media (max-width: 560px) {
  html.band .tag:not(.win, .win *), html.box .tag:not(.win, .win *) { padding: 6px 10px 7px; gap: 0 9px; --cut: 7px; }
  html.band .tag-s:not(.win, .win *), html.box .tag-s:not(.win, .win *) { display: none; }
  html.band .tag b:not(.win, .win *), html.box .tag b:not(.win, .win *) { font-size: 16px; }}

@media not all and (hover: hover) and (pointer: fine), (max-width: 999.98px), (max-height: 639.98px) {
  html.js:not(.calm, .nogl)[data-chip='flight'] .stage:not(.win, .win *) { display: flex; flex-direction: column; }
  html.js:not(.calm, .nogl)[data-chip='flight'] .scope:not(.win, .win *) { order: -1; position: sticky; top: var(--bar-h, var(--nav)); z-index: 6; height: var(--band-h); margin-top: var(--bar-h, var(--nav)); overflow: hidden; background: #05070a; border-bottom: 1.5px solid var(--line-2); touch-action: pan-y; cursor: grab; }
  html.js:not(.calm, .nogl)[data-chip='flight'] .hero:not(.win, .win *) { padding: 24px var(--gut) 34px; }
  html.js:not(.calm, .nogl)[data-chip='flight'] .part:not(.win, .win *) { padding: 30px var(--gut) 14px; gap: 18px; scroll-margin-top: calc(var(--bar-h, var(--nav)) + var(--band-h)); }
  html.js:not(.calm, .nogl)[data-chip='flight'] .part:last-of-type:not(.win, .win *) { padding-bottom: 40px; }
  /* The app's window is shown at a size that can be read, and pans sideways. */
  html.js[data-chip='flight'] .part-screen .shot-frame:not(.win, .win *) { overflow-x: auto; overflow-y: hidden; border-radius: 0; scrollbar-width: none; overscroll-behavior-x: contain; outline: 1.5px solid color-mix(in srgb, var(--tint) 70%, transparent); }
  html.js[data-chip='flight'] .part-screen .shot-frame:not(.win, .win *)::-webkit-scrollbar { display: none; }
  html.js[data-chip='flight'] .part-screen .shot-pan:not(.win, .win *) { width: max(100%, calc(var(--pan, 1008) * 1px)); }
  html.js[data-chip='flight'] .part-screen:not(.win, .win *) { --win-radius: 0px; --win-shadow: none; }}
@media (max-width: 1040px) {
  html.js[data-chip='flight'] .pan-hint:not(.win, .win *) { display: flex; margin-top: 10px; gap: 0.6em; color: var(--ink-3); }
  html.js[data-chip='flight'] .pan-hint .ic:not(.win, .win *) { font-size: 1.3em; color: var(--tint); }}

/* In the band a part's text rises into place and its screen stands up from the board, once, when it comes into view. */
html.band.anim .part-text.sv:not(.win, .win *) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.band.anim .part-screen.sv:not(.win, .win *) { opacity: 0; transform: perspective(1100px) rotateX(40deg) translate3d(0, 44px, 0) scale(0.95); transform-origin: 50% 100%; }
html.band.anim .part-text.sv.in:not(.win, .win *), html.band.anim .part-screen.sv.in:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* A window too short to hold the band and something to read under it (a phone on its side): the band scrolls with the page. */
@media (max-height: 519.98px) {
  html.js:not(.calm, .nogl)[data-chip='flight'] .scope:not(.win, .win *) { position: relative; top: 0; height: clamp(200px, 62vh, 320px); }}

/* ---------------------------------------------------------------- the flight */

html.fly .flight:not(.win, .win *) { height: calc((var(--total, 9) + 1) * 100vh); }
html.fly .stage:not(.win, .win *) { position: sticky; top: 0; height: 100vh; overflow: hidden; }
html.fly .hero:not(.win, .win *) { position: absolute; inset: 0; padding: 0; pointer-events: none; }
html.fly .hero-plane:not(.win, .win *) { visibility: hidden; position: absolute; left: 0; top: 0; width: 60em; max-width: none; margin: 0; transform-origin: 0 0; pointer-events: auto; font-size: 20px; backface-visibility: hidden; }
html.fly .hero-top:not(.win, .win *) { margin-bottom: 0.9em; gap: 0 2em; }
html.fly .hero-top .silk:not(.win, .win *) { font-size: 0.78em; font-weight: 600; }
html.fly .hero h1:not(.win, .win *) { font-size: 4.5em; line-height: 1; white-space: nowrap; letter-spacing: -0.042em; width: max-content; }
html.fly .hero-lead:not(.win, .win *) { margin-top: 0.62em; max-width: 43em; font-size: 1.42em; line-height: 1.32; color: #d3dbe6; }
html.fly .hero-cta:not(.win, .win *) { margin-top: 1.5em; gap: 0.7em; flex-wrap: nowrap; }
html.fly .hero-cta .pad:not(.win, .win *) { min-height: 3.3em; padding: 0 1.4em; font-size: 1em; --cut: 0.6em; --edge-w: 0.09em; }
html.fly .hero-cta .pad.primary:not(.win, .win *) { font-size: 1.08em; min-height: 3.06em; }
html.fly .hero-cta .req:not(.win, .win *) { flex-basis: auto; margin: 0 0 0 auto; font-size: 0.7em; gap: 0.4em 1.4em; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
html.fly .hero-cta .req a:not(.win, .win *) { border-bottom-width: 0.12em; }

html.fly .leaders:not(.win, .win *) { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders path:not(.win, .win *), .leaders line:not(.win, .win *), .leaders polyline:not(.win, .win *) { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.leaders .ld:not(.win, .win *) { stroke: var(--c, var(--ink)); }
.leaders .dot:not(.win, .win *) { fill: var(--c, var(--ink)); stroke: #05070a; stroke-width: 2; }
.leaders .fr-foot:not(.win, .win *) { fill: color-mix(in srgb, var(--c) 9%, transparent); stroke: var(--c); stroke-width: 1.6; }
.leaders .fr-face:not(.win, .win *) { fill: color-mix(in srgb, var(--c) 7%, transparent); stroke: none; }
.leaders .fr-line:not(.win, .win *) { stroke: var(--c); stroke-width: 1.4; }

html.fly .tags:not(.win, .win *) { display: block; position: absolute; z-index: 3; inset: 0; padding: 0; margin: 0; max-width: none; pointer-events: none; }
html.fly .tag:not(.win, .win *), html.fly .tag[data-when~='hero']:not(.win, .win *) { display: grid; position: absolute; left: 0; top: 0; padding: 8px 13px 9px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
html.fly .tag-k:not(.win, .win *) { color: var(--c, var(--ink-2)); font-weight: 600; filter: brightness(1.15); }
html.fly .tag b:not(.win, .win *) { font-size: clamp(18px, 1.3vw, 30px); }
html.fly .tag-s:not(.win, .win *) { color: var(--ink-2); }

/* The parts are laid over the chip: the text on a plate at the left, the app's screen large at the right. */
html.fly .part:not(.win, .win *) { position: absolute; z-index: 4; inset: 0; display: block; padding: 0; margin: 0; max-width: none; pointer-events: none; visibility: hidden;
  --col: clamp(290px, 21vw, 540px); --railw: 34px; --band: clamp(120px, 17vh, 270px);
  --ww: min(100vw - var(--col) - var(--gut) * 2 - 28px - var(--railw), (100vh - var(--nav) - 44px - var(--band)) * var(--shape), 1760px); }
html.fly .part.on:not(.win, .win *) { visibility: visible; }
html.fly .part-text:not(.win, .win *) { position: absolute; left: var(--gut); top: calc(var(--nav) + 9vh); width: var(--col); pointer-events: auto; will-change: transform, opacity; }
html.fly .part-swap:not(.win, .win *) { display: grid; }
html.fly .part-swap > *:not(.win, .win *) { grid-area: 1 / 1; will-change: transform, opacity; }
html.fly .part-points li:not(.win, .win *) { will-change: transform, opacity; }
html.fly .part-screen:not(.win, .win *) { position: absolute; right: calc(var(--gut) + var(--railw)); top: calc(var(--nav) + 14px); width: var(--ww); transform-origin: 0 0; pointer-events: auto; will-change: transform, opacity; backface-visibility: hidden; }
html.fly .screen-cap:not(.win, .win *) { margin-bottom: 8px; height: 16px; }

/* Narrow or short windows: the text becomes a strip along the bottom and the screen takes the width. */
@media (max-width: 1279px) {
  html.fly .part:not(.win, .win *) { --strip: 112px; --ww: min(100vw - var(--gut) * 2 - var(--railw), (100vh - var(--nav) - 40px - var(--strip) - 22px) * var(--shape)); }
  html.fly .part-text:not(.win, .win *) { left: var(--gut); right: 306px; top: auto; bottom: 12px; width: auto; min-height: var(--strip); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 4px 26px; padding: 14px 18px; --cut: 12px; }
  html.fly .part-text .silk:not(.win, .win *) { grid-column: 1; margin-bottom: 6px; } html.fly .part-text .silk .silk-r:not(.win, .win *) { display: none; }
  html.fly .part-text h2:not(.win, .win *) { grid-column: 1; font-size: 1.12rem; line-height: 1.12; }
  html.fly .part-text .go:not(.win, .win *) { display: none; }
  html.fly .part-swap:not(.win, .win *) { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  html.fly .part-lead:not(.win, .win *) { font-size: 0.86rem; line-height: 1.4; }
  html.fly .part-points:not(.win, .win *) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  html.fly .part-points li:not(.win, .win *) { font-size: 0.78rem; line-height: 1.32; grid-template-columns: 22px 1fr; gap: 8px; }
  html.fly .part-points i:not(.win, .win *) { width: 22px; height: 22px; font-size: 11px; }
  html.fly .part-screen:not(.win, .win *) { right: auto; left: 50%; margin-left: calc(var(--ww) / -2 - var(--railw) / 2); }}

/* Where the flight is: a ruler at the right edge. */
html.fly .rail:not(.win, .win *) { display: flex; flex-direction: column; position: absolute; z-index: 5; right: 8px; top: 50%; transform: translateY(-50%); gap: 0; }
.rail button:not(.win, .win *) { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 9px; height: 44px; padding: 0 4px 0 10px; font: 500 clamp(10.5px, 0.56vw, 13px)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rail button span:not(.win, .win *) { opacity: 0; transform: translateX(6px); transition: opacity 0.2s, transform 0.2s; background: #05070a; padding: 5px 7px; border: 1.5px solid var(--line-2); color: var(--ink); pointer-events: none; }
.rail button i:not(.win, .win *) { font-style: normal; width: 22px; text-align: right; padding-right: 0; transition: color 0.2s; }
.rail button:not(.win, .win *)::after { content: ''; position: absolute; right: -8px; top: 50%; width: 9px; height: 1.5px; background: currentColor; }
.rail button:hover span:not(.win, .win *), .rail button:focus-visible span:not(.win, .win *) { opacity: 1; transform: none; }
.rail button:hover:not(.win, .win *), .rail button.now:not(.win, .win *) { color: var(--ink); }
.rail-now:not(.win, .win *) { position: absolute; right: -8px; top: 0; width: 3px; height: 44px; background: var(--accent); transform-origin: 0 0; will-change: transform; }
html.fly .hint:not(.win, .win *) { opacity: 0; display: flex; align-items: center; gap: 12px; position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; will-change: opacity; }
.hint i:not(.win, .win *) { width: 1.5px; height: 22px; background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 40% no-repeat, var(--line-2); animation: hint 1.6s cubic-bezier(0.6, 0, 0.3, 1) infinite; }

/* ---------------------------------------------------------------- a station: the opening of every page but the home page

   A stop of the flight without the flight: the text on a plate, and beside it (above it on a narrow screen) the view,
   where the chip is seen with the camera resting on one district and its readings pinned to it. */

.station:not(.win, .win *) { --tint: var(--accent); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: var(--nav) var(--gut) 26px; }
.station-view:not(.win, .win *) { display: none; position: relative; grid-row: 1; height: clamp(224px, 37vh, 500px); height: clamp(224px, 37svh, 500px); margin: 0 calc(var(--gut) * -1); overflow: hidden; pointer-events: none; border-bottom: 1.5px solid var(--line-2); }
html.js .station-view:not(.win, .win *) { display: block; }
.station-text:not(.win, .win *) { grid-row: 2; min-width: 0; padding: clamp(22px, 2.3vw, 44px); --cut: clamp(16px, 1.4vw, 26px); --edge: color-mix(in srgb, var(--tint) 75%, transparent); --fill: var(--plate); }
html:not(.js) .station-text:not(.win, .win *) { grid-row: 1; margin-top: 22px; }
.station-text > .silk:not(.win, .win *) { margin-bottom: clamp(14px, 1.4vw, 24px); }
.station h1:not(.win, .win *) { font: 700 clamp(2.2rem, 3.9vw, 6.2rem)/1 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.station-lead:not(.win, .win *) { margin-top: clamp(14px, 1.3vw, 26px); max-width: 44ch; color: var(--ink-2); font-size: clamp(1.04rem, 1.32vw, 1.9rem); line-height: 1.42; text-wrap: pretty; }
.station .tags:not(.win, .win *), .station .leaders:not(.win, .win *) { display: none; }
.station .chip-still:not(.win, .win *) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

html.rest .station .leaders:not(.win, .win *), html.box .station .leaders:not(.win, .win *) { display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
html.rest .station .tags:not(.win, .win *), html.box .station .tags:not(.win, .win *) { display: block; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; padding: 0; margin: 0; max-width: none; pointer-events: none; }
/* In a desktop window the chip is the whole viewport, behind the page, and so are the lines and the readings. */
html.rest .station .leaders:not(.win, .win *), html.rest .station .tags:not(.win, .win *) { position: fixed; width: 100vw; height: 100vh; }
html.rest .station-view:not(.win, .win *) { border-bottom: 0; overflow: visible; }
html.box:not(.calm) .station-view:not(.win, .win *) { pointer-events: auto; touch-action: pan-y; cursor: grab; }
html.rest .tag:not(.win, .win *), html.box .tag:not(.win, .win *) { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 3px 12px; position: absolute; left: 0; top: 0; padding: 8px 13px 9px; white-space: nowrap; opacity: 0; will-change: transform, opacity; --cut: 9px; --edge: var(--c, var(--line-2)); --fill: #06090c; }
html.rest .tag-k:not(.win, .win *), html.box .tag-k:not(.win, .win *) { color: var(--c, var(--ink-2)); font-weight: 600; filter: brightness(1.15); }
html.rest .tag b:not(.win, .win *), html.box .tag b:not(.win, .win *) { font-size: clamp(17px, 1.3vw, 30px); }
html.rest .tag-s:not(.win, .win *), html.box .tag-s:not(.win, .win *) { color: var(--ink-2); }

@media (min-width: 1000px) {
  .station:not(.win, .win *) { grid-template-columns: clamp(340px, 34vw, 880px) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 72px); align-items: start; min-height: clamp(560px, 84svh, 1200px);
    padding: calc(var(--nav) + clamp(22px, 5.5vh, 88px)) var(--gut) clamp(22px, 4vh, 60px) max(calc(var(--gut) * var(--zoom)), calc((100vw - 1640px * var(--zoom)) / 2)); }
  .station-view:not(.win, .win *) { grid-row: 1; grid-column: 2; align-self: stretch; height: auto; min-height: 360px; margin: 0; border-bottom: 0; }
  .station-text:not(.win, .win *), html:not(.js) .station-text:not(.win, .win *) { grid-row: 1; grid-column: 1; margin-top: 0; }
  /* Drawn inside the view, the chip is a plate of its own. */
  html.box .station-view:not(.win, .win *), html.nogl .station-view:not(.win, .win *) { --cut: 26px; background: var(--line-2); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
  html.box .station-view #chip:not(.win, .win *), html.nogl .station-view .chip-still:not(.win, .win *) { left: 1.5px; top: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); clip-path: polygon(25.4px 0, 100% 0, 100% calc(100% - 25.4px), calc(100% - 25.4px) 100%, 0 100%, 0 25.4px); }}

/* ---------------------------------------------------------------- sections after the flight: plates above the board */

.sec:not(.win, .win *) { padding: clamp(36px, 6vh, 80px) 0; scroll-margin-top: var(--nav); zoom: var(--zoom); }
.wrap:not(.win, .win *) { width: min(1640px, 100% - var(--gut) * 2); margin: 0 auto; }
.sec > .wrap:not(.win, .win *) { position: relative; isolation: isolate; padding: clamp(26px, 3.6vw, 68px); }
.sec > .wrap:not(.win, .win *)::before { content: ''; position: absolute; z-index: -1; inset: 0; --cut: clamp(18px, 2.4vw, 40px); background: var(--line-2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sec > .wrap:not(.win, .win *)::after { content: ''; position: absolute; z-index: -1; inset: 1.5px; --cut: calc(clamp(18px, 2.4vw, 40px) - 0.6px); background: #080b0f;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sec-head:not(.win, .win *) { max-width: 980px; }
.sec-head .silk:not(.win, .win *) { margin-bottom: 18px; color: var(--ink-2); }
.sec-head h2:not(.win, .win *), .get h2:not(.win, .win *) { font: 650 clamp(2.1rem, 4.4vw, 4.6rem)/1 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.sec-lead:not(.win, .win *) { margin-top: 20px; max-width: 62ch; color: var(--ink-2); font-size: clamp(1.02rem, 1.25vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }

/* What is inside: the floor plan. Five columns, three rows, four zones. */
.plan:not(.win, .win *) { position: relative; margin-top: clamp(28px, 3.4vw, 56px); padding: 30px 0 0 34px; --cols: 1.12fr 1fr 1.08fr 1fr 1.08fr; }
.plan-x:not(.win, .win *), .plan-y:not(.win, .win *) { position: absolute; display: grid; font: 600 12px/1 var(--mono); color: var(--ink-3); }
.plan-x:not(.win, .win *) { left: 34px; right: 0; top: 0; height: 30px; grid-template-columns: var(--cols); }
.plan-x span:not(.win, .win *) { position: relative; text-align: center; border-left: 1.5px solid var(--line-2); height: 12px; }
.plan-x span:last-child:not(.win, .win *) { border-right: 1.5px solid var(--line-2); }
.plan-x span:not(.win, .win *)::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 6px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1.5px, transparent 1.5px 12.5%); opacity: 0.8; }
.plan-x span:not(.win, .win *) { padding-top: 0; line-height: 12px; } .plan-x span:not(.win, .win *) { color: var(--ink-2); }
.plan-x span:not(.win, .win *)::after { content: ''; }
.plan-y:not(.win, .win *) { left: 0; top: 30px; bottom: 44px; width: 34px; grid-template-rows: repeat(3, 1fr); }
.plan-y span:not(.win, .win *) { display: grid; place-items: center; border-top: 1.5px solid var(--line-2); width: 14px; color: var(--ink-2); }
.plan-y span:last-child:not(.win, .win *) { border-bottom: 1.5px solid var(--line-2); }
.plan-die:not(.win, .win *) { display: grid; grid-template-columns: var(--cols); grid-template-rows: repeat(3, minmax(190px, auto)); gap: 2px; background: #05070a; border: 2px solid #05070a; outline: 1.5px solid var(--line-2); }
.cell:not(.win, .win *) { position: relative; display: flex; flex-direction: column; padding: 46px 20px 18px; background: color-mix(in srgb, var(--tint) 9%, #0b0f15); transition: background-color 0.3s; }
.cell:not(.win, .win *)::before { content: ''; position: absolute; inset: 0; border: 0 solid var(--tint); pointer-events: none; }
.cell.wt:not(.win, .win *)::before { border-top-width: 2.5px; } .cell.wr:not(.win, .win *)::before { border-right-width: 2.5px; } .cell.wb:not(.win, .win *)::before { border-bottom-width: 2.5px; } .cell.wl:not(.win, .win *)::before { border-left-width: 2.5px; }
.cell:hover:not(.win, .win *) { background: color-mix(in srgb, var(--tint) 17%, #0b0f15); }
.cell .ref:not(.win, .win *) { position: absolute; right: 14px; top: 14px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-3); }
.zone-name:not(.win, .win *) { position: absolute; left: 20px; top: 14px; display: flex; align-items: baseline; gap: 10px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--tint); filter: brightness(1.35) saturate(1.1); }
.zone-name small:not(.win, .win *) { font: inherit; font-weight: 500; color: var(--ink-3); filter: none; }
.cell-ic:not(.win, .win *) { font-size: 26px; color: var(--tint); filter: brightness(1.35); margin-bottom: 14px; }
.cell h3:not(.win, .win *) { font: 600 clamp(1.05rem, 1.25vw, 1.3rem)/1.15 var(--sans); letter-spacing: -0.02em; }
.cell p:not(.win, .win *) { margin-top: 7px; color: var(--ink-2); font-size: clamp(0.86rem, 0.95vw, 0.98rem); line-height: 1.4; text-wrap: pretty; }
.ins:not(.win, .win *) { margin-top: auto; padding-top: 16px; }
.ins-cells:not(.win, .win *) { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.ins-cells i:not(.win, .win *) { height: 18px; background: color-mix(in srgb, #7adff7 calc(var(--v) * 100%), #0c2328); transition: background-color 0.5s; }
.ins-cells i.e:not(.win, .win *) { height: 12px; align-self: end; }
.ins-spark svg:not(.win, .win *) { width: 100%; height: 40px; overflow: visible; }
.ins-spark .ln:not(.win, .win *) { fill: none; stroke: var(--tint); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: brightness(1.3); }
.ins-spark .ar:not(.win, .win *) { fill: color-mix(in srgb, var(--tint) 22%, transparent); stroke: none; }
.ins-menu:not(.win, .win *) { display: flex; gap: 14px; }
.ins-menu span:not(.win, .win *) { display: grid; gap: 3px; font: 600 12px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-menu small:not(.win, .win *) { font: inherit; font-weight: 500; font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }
.ins-map:not(.win, .win *) { display: flex; gap: 2px; height: 38px; }
.ins-map i:not(.win, .win *) { min-width: 3px; background: var(--cache); }
.ins-map .f-media:not(.win, .win *) { background: var(--gpu); } .ins-map .f-work:not(.win, .win *) { background: var(--memory); } .ins-map .f-apps:not(.win, .win *) { background: var(--accent); }
.ins-text:not(.win, .win *) { display: flex; align-items: center; gap: 9px; font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); }
.plan-foot:not(.win, .win *) { margin-top: 14px; height: 30px; gap: 26px; }

/* Why it can be trusted: six rules, wired to one rail. */
.rules:not(.win, .win *) { position: relative; overflow: clip; margin-top: clamp(30px, 3.6vw, 60px); padding-bottom: clamp(40px, 5vw, 96px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(60px, 8vw, 150px); row-gap: 22px; }
.rules:not(.win, .win *)::before { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.rules:not(.win, .win *)::after { content: ''; position: absolute; left: calc(50% - 2px); top: 0; width: 4px; height: 70px; background: linear-gradient(transparent, var(--accent) 80%, #fff); }
.rule:not(.win, .win *) { position: relative; }
.rule:nth-child(even):not(.win, .win *) { margin-top: clamp(40px, 5vw, 96px); margin-bottom: clamp(-96px, -5vw, -40px); }
.rule-pad:not(.win, .win *) { position: absolute; top: 35px; width: 14px; height: 14px; }
.rule-pad i:not(.win, .win *) { position: absolute; inset: 0; background: var(--tint); box-shadow: 0 0 0 3px #080b0f, 0 0 0 4.5px var(--tint); }
.rule-pad b:not(.win, .win *) { position: absolute; top: -20px; font: 600 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-2); }
.rule:nth-child(odd) .rule-pad:not(.win, .win *) { right: calc(clamp(60px, 8vw, 150px) / -2 - 7px); } .rule:nth-child(odd) .rule-pad b:not(.win, .win *) { right: 22px; }
.rule:nth-child(even) .rule-pad:not(.win, .win *) { left: calc(clamp(60px, 8vw, 150px) / -2 - 7px); } .rule:nth-child(even) .rule-pad b:not(.win, .win *) { left: 22px; }
.rule:not(.win, .win *)::before { content: ''; position: absolute; top: 41px; height: 2px; background: var(--tint); width: calc(clamp(60px, 8vw, 150px) / 2); }
.rule:nth-child(odd):not(.win, .win *)::before { right: calc(clamp(60px, 8vw, 150px) / -2); }
.rule:nth-child(even):not(.win, .win *)::before { left: calc(clamp(60px, 8vw, 150px) / -2); }
.rule-plate:not(.win, .win *) { padding: clamp(20px, 2vw, 32px); --edge: color-mix(in srgb, var(--tint) 80%, transparent); --fill: color-mix(in srgb, var(--tint) 6%, #0b0f15); }
.rule h3:not(.win, .win *) { display: flex; align-items: center; gap: 14px; font: 650 clamp(1.3rem, 1.9vw, 1.9rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.rule-ic:not(.win, .win *) { display: grid; place-items: center; width: 40px; height: 40px; flex: none; font-size: 21px; color: #04070a; background: var(--tint); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.rule-plate > p:not(.win, .win *) { margin-top: 14px; color: var(--ink-2); font-size: clamp(0.98rem, 1.05vw, 1.1rem); line-height: 1.5; text-wrap: pretty; }
.rule .quote:not(.win, .win *) { margin-top: 18px; padding: 13px 16px 14px; background: #05070a; border-left: 3px solid var(--tint); }
.quote .silk:not(.win, .win *) { --tint: inherit; font-size: 10.5px; margin-bottom: 8px; }
.quote q:not(.win, .win *) { quotes: none; font: 500 clamp(0.95rem, 1.02vw, 1.06rem)/1.35 -apple-system, BlinkMacSystemFont, var(--sans); color: var(--ink); }

/* Guides. */
.guide:not(.win, .win *) { margin-top: clamp(30px, 3.6vw, 56px); display: grid; gap: 30px; }
.guide-card:not(.win, .win *) { padding: clamp(20px, 2vw, 30px); --tint: var(--disk); --edge: var(--disk); align-self: start; }
.guide-card .silk:not(.win, .win *) { margin-bottom: 16px; }
.guide-card h3:not(.win, .win *) { font: 650 clamp(1.5rem, 2vw, 2.1rem)/1.06 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.guide-card > p:not(.silk):not(.win, .win *) { margin-top: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.48; }
.guide-meta:not(.win, .win *) { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.guide-meta dt:not(.win, .win *) { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.guide-meta dd:not(.win, .win *) { margin-top: 6px; font: 600 15px/1 var(--mono); color: var(--ink); }
.guide-ruler:not(.win, .win *) { margin-top: 22px; display: grid; grid-template-columns: repeat(9, 1fr); border-top: 1.5px solid var(--line-2); }
.guide-ruler li:not(.win, .win *) { position: relative; padding-top: 12px; text-align: center; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.guide-ruler li:not(.win, .win *)::before { content: ''; position: absolute; left: calc(50% - 0.75px); top: 0; width: 1.5px; height: 6px; background: var(--line-2); }
.guide-ruler li.on:not(.win, .win *) { color: #04070a; }
.guide-ruler li.on:not(.win, .win *)::after { content: attr(data-n); position: absolute; left: 50%; top: 6px; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; background: var(--disk); color: #04070a; font-weight: 700; }
.guide-ruler li.now.on:not(.win, .win *)::after { background: #fff; }
.guide-card .go:not(.win, .win *) { margin-top: 22px; }
.steps:not(.win, .win *) { position: relative; display: grid; gap: clamp(34px, 4vw, 64px); }
.step:not(.win, .win *) { position: relative; min-width: 0; }
.step-copy:not(.win, .win *) { position: relative; padding-left: 86px; max-width: 900px; min-height: 62px; }
.step-n:not(.win, .win *) { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 62px; height: 62px; font: 600 26px/1 var(--mono); letter-spacing: -0.04em; color: #04070a; background: var(--disk); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.step h3:not(.win, .win *) { font: 650 clamp(1.4rem, 1.9vw, 1.9rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.step .prose:not(.win, .win *) { margin-top: 10px; }
.prose:not(.win, .win *) { color: var(--ink-2); font-size: clamp(1rem, 1.08vw, 1.12rem); line-height: 1.56; }
.prose p + p:not(.win, .win *), .prose ul:not(.win, .win *), .prose p + ul:not(.win, .win *) { margin-top: 0.8em; }
.prose ul:not(.win, .win *) { display: grid; gap: 0.45em; }
.prose li:not(.win, .win *) { position: relative; padding-left: 1.3em; }
.prose li:not(.win, .win *)::before { content: ''; position: absolute; left: 0.1em; top: 0.62em; width: 7px; height: 7px; background: var(--tint); }
.prose a:not(.win, .win *) { color: var(--ink); border-bottom: 1.5px solid var(--tint); }
.step .shot:not(.win, .win *) { margin: 22px 0 0 0; max-width: var(--fit, var(--natural, none)); --shot-r: 0px; outline: 1.5px solid var(--line-2); outline-offset: 0; }
.step .shot-frame:not(.win, .win *) { border-radius: 0; }
.more-guides:not(.win, .win *) { margin-top: clamp(36px, 4vw, 64px); padding-top: 26px; border-top: 1.5px solid var(--line-2); display: grid; gap: 18px; }
.more-guides ul:not(.win, .win *) { display: grid; gap: 0; border-bottom: 1.5px solid var(--line); }
.guide-row:not(.win, .win *) { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 20px; align-items: center; gap: 18px; padding: 16px 6px; border-top: 1.5px solid var(--line); transition: background-color 0.2s, padding 0.2s; }
.guide-row b:not(.win, .win *) { font: 600 clamp(1.02rem, 1.3vw, 1.3rem)/1.2 var(--sans); letter-spacing: -0.02em; }
.guide-row-meta:not(.win, .win *) { font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.guide-row .ic:not(.win, .win *) { color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.guide-row:hover:not(.win, .win *), .guide-row:focus-visible:not(.win, .win *) { background: var(--plate-2); }
.guide-row:hover .ic:not(.win, .win *) { transform: translateX(4px); color: var(--ink); }
.more-guides .pad:not(.win, .win *) { justify-self: start; }
@media (min-width: 1100px) { .guide:not(.win, .win *) { grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr); gap: clamp(30px, 3.4vw, 70px); } .guide-card:not(.win, .win *) { position: sticky; top: calc(var(--nav) + 24px); }}

/* The shared viewer for a whole screen (shots.js), in this page's language. */
.shot-zoom:not(.win, .win *) { right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--line-2); border-radius: 0; background: #080b0f; color: var(--ink); font-size: 17px; }
.shot-zoom:hover:not(.win, .win *), .shot-zoom:focus-visible:not(.win, .win *) { border-color: var(--ink); }
.zoom:not(.win, .win *) { color: var(--ink); }
.zoom-close:not(.win, .win *) { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 0; background: #080b0f; color: var(--ink); font: 600 13.5px/1 var(--sans); }
.zoom-close:hover:not(.win, .win *), .zoom-close:focus-visible:not(.win, .win *) { border-color: var(--ink); }
.zoom .shot:not(.win, .win *) { --win-shadow: 0 0 0 1.5px var(--line-2); }

/* Questions. */
.faq-wrap:not(.win, .win *) { display: grid; gap: 30px; }
.faq-head:not(.win, .win *) { display: grid; gap: 26px; align-content: start; justify-items: start; }
.faq-list:not(.win, .win *) { display: grid; gap: 10px; }
.q:not(.win, .win *) { --tint: var(--accent); --cut: 12px; --edge: var(--line-2); --fill: #0c1117; transition: none; }
.q[open]:not(.win, .win *) { --edge: var(--accent); --fill: #0d141b; }
.q summary:not(.win, .win *) { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 20px 22px; cursor: pointer; list-style: none; }
.q summary:not(.win, .win *)::-webkit-details-marker { display: none; }
.q-n:not(.win, .win *) { font: 600 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--accent); }
.q-t:not(.win, .win *) { font: 600 clamp(1.08rem, 1.4vw, 1.4rem)/1.2 var(--sans); letter-spacing: -0.02em; }
.q-sw:not(.win, .win *) { position: relative; width: 30px; height: 30px; border: 1.5px solid var(--line-2); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, background-color 0.2s; }
.q-sw:not(.win, .win *)::before, .q-sw:not(.win, .win *)::after { content: ''; position: absolute; left: 7px; right: 7px; top: calc(50% - 1px); height: 2px; background: var(--ink); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.q-sw:not(.win, .win *)::after { transform: rotate(90deg); }
.q[open] .q-sw:not(.win, .win *) { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.q[open] .q-sw:not(.win, .win *)::before, .q[open] .q-sw:not(.win, .win *)::after { background: #04070a; }
.q[open] .q-sw:not(.win, .win *)::after { transform: rotate(0deg); }
.q summary:hover .q-sw:not(.win, .win *) { border-color: var(--ink); }
.q-a:not(.win, .win *) { padding: 0 22px 24px 78px; max-width: 78ch; }
@media (min-width: 1100px) { .faq-wrap:not(.win, .win *) { grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 90px); } .faq-head:not(.win, .win *) { position: sticky; top: calc(var(--nav) + 24px); }}

/* Get it. */
.get:not(.win, .win *) { padding-bottom: clamp(60px, 9vh, 120px); }
html.fly .get:not(.win, .win *) { min-height: calc(84vh / var(--zoom)); display: grid; align-items: center; }
html.fly .get-plate:not(.win, .win *) { width: min(100%, 800px); grid-template-columns: minmax(0, 1fr); }
html.fly .get .socket:not(.win, .win *) { width: clamp(120px, 10vw, 170px); }
.sec.get > .wrap:not(.win, .win *) { padding: 0; }
.sec.get > .wrap:not(.win, .win *)::before, .sec.get > .wrap:not(.win, .win *)::after { display: none; }
.get-plate:not(.win, .win *) { display: grid; gap: clamp(24px, 3vw, 60px); align-items: center; padding: clamp(28px, 4vw, 72px); --cut: clamp(18px, 2.4vw, 40px); --edge: var(--orange); --fill: #0a0d11; --edge-w: 2px; }
.socket:not(.win, .win *) { position: relative; width: clamp(150px, 16vw, 250px); aspect-ratio: 1; padding: clamp(20px, 2vw, 32px); border: 1.5px solid var(--line-2); background:
  repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 14px) 14px 5px / calc(100% - 28px) 5px no-repeat,
  repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 14px) 14px calc(100% - 5px) / calc(100% - 28px) 5px no-repeat,
  repeating-linear-gradient(0deg, var(--line-2) 0 3px, transparent 3px 14px) 5px 14px / 5px calc(100% - 28px) no-repeat,
  repeating-linear-gradient(0deg, var(--line-2) 0 3px, transparent 3px 14px) calc(100% - 5px) 14px / 5px calc(100% - 28px) no-repeat, #05070a; }
.socket img:not(.win, .win *) { width: 100%; height: 100%; }
.get-copy .silk:not(.win, .win *) { margin-bottom: 18px; --tint: var(--orange); color: var(--ink-2); }
.get-cta:not(.win, .win *) { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.get .req:not(.win, .win *) { margin-top: 20px; }
@media (min-width: 900px) { .get-plate:not(.win, .win *) { grid-template-columns: auto minmax(0, 1fr); }}

.foot:not(.win, .win *) { border-top: 1.5px solid var(--line-2); background: #05070a; padding: 34px 0 86px; zoom: var(--zoom); }
.foot-grid:not(.win, .win *) { display: grid; gap: 22px; align-items: start; }
.foot-name p:not(.win, .win *) { margin-top: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.foot-sample:not(.win, .win *) { max-width: 46ch; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; padding-left: 14px; border-left: 3px solid var(--accent); }
.foot-links:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.foot-links a:not(.win, .win *) { border-bottom: 1.5px solid var(--line-2); padding-bottom: 3px; }
.foot-links a:hover:not(.win, .win *), .foot-links a:focus-visible:not(.win, .win *) { color: var(--ink); border-color: var(--accent); }
.foot-links li:last-child a:not(.win, .win *) { text-transform: none; letter-spacing: 0.02em; color: var(--ink); }
@media (min-width: 900px) { .foot-grid:not(.win, .win *) { grid-template-columns: auto minmax(0, 1fr) auto; gap: 48px; }}

/* ---------------------------------------------------------------- things that power up when they come into view */

html.anim .rv:not(.win, .win *) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.anim .rv.in:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s); }
html.anim .cell:not(.win, .win *) { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); }
html.anim .plan.in .cell:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.35s ease-out calc(var(--n) * 55ms), transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) calc(var(--n) * 55ms), background-color 0.3s; }
html.anim .plan .cell:not(.win, .win *)::before { opacity: 0; }
html.anim .plan.in .cell:not(.win, .win *)::before { opacity: 1; transition: opacity 0.2s linear calc(var(--n) * 55ms + 0.2s); }
html.anim .rules:not(.win, .win *)::after { animation: rail 5.2s linear infinite; }

@media (max-width: 1099px) {
  .bar-nav:not(.win, .win *) { display: none; }
  .bar .pad:not(.win, .win *) { margin-left: auto; }
  .rules:not(.win, .win *) { grid-template-columns: 1fr; padding-left: 40px; padding-bottom: 0; }
  .rules:not(.win, .win *)::before { left: 11px; } .rules:not(.win, .win *)::after { left: 10px; }
  .rule:nth-child(even):not(.win, .win *) { margin: 0; }
  .rule .rule-pad:not(.win, .win *) { left: -35px !important; right: auto !important; } .rule-pad b:not(.win, .win *) { display: none; }
  .rule:not(.win, .win *)::before { left: -28px !important; right: auto !important; width: 28px !important; }}
@media (max-width: 899px) {
  body:not(.win, .win *) { font-size: 16px; }
  .plan:not(.win, .win *) { padding: 0; --cols: 1fr; }
  .plan-x:not(.win, .win *), .plan-y:not(.win, .win *) { display: none; }
  .plan-die:not(.win, .win *) { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .cell:not(.win, .win *) { grid-area: auto !important; padding-bottom: 20px; }
  .cell:not(.win, .win *)::before { border-width: 0 !important; border-top: 2.5px solid var(--tint) !important; }
  .cell .zone-name small:not(.win, .win *) { display: none; }
  .plan-foot:not(.win, .win *) { height: auto; flex-wrap: wrap; gap: 6px 18px; } .plan-foot .silk-r:not(.win, .win *) { margin-left: 0; }
  .step-copy:not(.win, .win *) { padding-left: 0; } .step-n:not(.win, .win *) { position: static; width: 48px; height: 48px; font-size: 20px; margin-bottom: 12px; }
  .step .shot:not(.win, .win *) { margin-left: 0; } .step:not(.win, .win *)::before { display: none; }
  .guide-row:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; } .guide-row .silk:not(.win, .win *) { grid-column: 1 / -1; } .guide-row-meta:not(.win, .win *) { grid-column: 1 / -1; grid-row: 3; }
  .q summary:not(.win, .win *) { grid-template-columns: 32px minmax(0, 1fr) 30px; padding: 16px; } .q-a:not(.win, .win *) { padding: 0 16px 20px; }
  .pad.big:not(.win, .win *) { min-height: 56px; padding: 0 20px; font-size: 16px; white-space: normal; text-align: left; }}
@media (max-width: 560px) {
  /* Where the chip is a still picture, its three readings share one row. */
  html:not(.band, .fly) .flight .tags:not(.win, .win *) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 28px; }
  html:not(.band, .fly) .flight .tag[data-when~='hero']:not(.win, .win *) { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 11px 11px; }
  html:not(.band, .fly) .flight .tag-s:not(.win, .win *) { display: none; }
  html:not(.band, .fly) .flight .tag b:not(.win, .win *) { font-size: 17px; }
  .hero-cta .pad:not(.win, .win *) { width: 100%; }
  .hero-top .silk + .silk:not(.win, .win *) { display: none; }
  /* The floor plan as a list: one tool a row, its symbol at the left. */
  .plan-die:not(.win, .win *) { grid-template-columns: 1fr; }
  .cell:not(.win, .win *) { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 16px 18px; }
  .cell .ref:not(.win, .win *) { right: 12px; top: 12px; }
  .zone-name:not(.win, .win *) { position: static; grid-column: 1 / -1; margin-bottom: 14px; font-size: 12.5px; }
  .cell-ic:not(.win, .win *) { grid-column: 1; grid-row: span 3; margin: 1px 0 0; font-size: 24px; }
  .cell h3:not(.win, .win *) { grid-column: 2; font-size: 1.12rem; }
  .cell p:not(.win, .win *) { grid-column: 2; margin-top: 4px; font-size: 0.95rem; }
  .cell .ins:not(.win, .win *) { grid-column: 2; margin-top: 0; padding-top: 12px; }
  .sec > .wrap:not(.win, .win *) { padding: 24px 18px 26px; }}

/* Touch: everything that is pressed is at least 44 px tall. */
@media (hover: none), (pointer: coarse) {
  .go:not(.win, .win *) { min-height: 44px; }
  .pad.small:not(.win, .win *) { min-height: 44px; }
  .req a:not(.win, .win *) { display: inline-flex; align-items: center; min-height: 44px; }
  .shot-zoom:not(.win, .win *) { width: 44px; height: 44px; }}

@media (prefers-reduced-motion: reduce) {
  *:not(.win, .win *), *:not(.win, .win *)::before, *:not(.win, .win *)::after { animation: none !important; transition: none !important; }
  .rules:not(.win, .win *)::after { display: none; }}
}
/* site-guides.css */
@layer page {
@keyframes gd-strike { from { opacity: 0.85; } to { opacity: 0; } }
@keyframes gd-answer { 0%, 26%, 52%, 100% { opacity: 0; } 8%, 34%, 60% { opacity: 1; } }
/* Guides. The index is a floor plan of twenty sockets in five zones; a guide is a procedure on the board.
   Everything here is prefixed gd-. Shared pieces (plate, pad, silk, lamp, sec, wrap, steps, step, prose) come from site.css and are used as they are.
   client/61-guides.js says on <html> what it is doing: gd-on (the ruler follows the reader) and gd-anim (things power up as they come into view).
   Without the script every pad is lit and nothing is hidden. With reduced motion nothing moves: what changes, changes at once. */

/* ---------------------------------------------------------------- a guide: what the station says */

.gd-crumb:not(.win, .win *) { padding: 15px 0; margin: -15px 0; color: inherit; transition: color 0.18s; }
.gd-crumb:hover:not(.win, .win *), .gd-crumb:focus-visible:not(.win, .win *) { color: var(--ink); }
.gd-crumb-sep:not(.win, .win *) { color: var(--line-2); margin: 0 -0.3em; }

.gd-facts:not(.win, .win *) { margin-top: clamp(20px, 1.8vw, 38px); padding-top: clamp(16px, 1.3vw, 28px); border-top: 1.5px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 2.6vw, 60px); }
.gd-facts dt:not(.win, .win *) { font: 500 clamp(10.5px, 0.6vw, 14.5px)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gd-facts dd:not(.win, .win *) { margin-top: clamp(7px, 0.55vw, 12px); font: 600 clamp(15px, 1.06vw, 26px)/1.15 var(--mono); letter-spacing: -0.01em; color: var(--ink); }
.gd-facts-ticks:not(.win, .win *) { display: inline-flex; gap: 3px; margin-left: 0.7em; vertical-align: -0.06em; }
.gd-facts-ticks i:not(.win, .win *) { width: clamp(5px, 0.42vw, 9px); height: clamp(11px, 0.8vw, 18px); background: var(--tint); }

.gd-needs:not(.win, .win *) { margin-top: clamp(20px, 1.7vw, 36px); }
.gd-needs .silk:not(.win, .win *) { margin-bottom: clamp(11px, 0.85vw, 18px); color: var(--ink-2); }
.gd-needs ul:not(.win, .win *) { display: grid; gap: clamp(9px, 0.7vw, 14px); }
.gd-needs li:not(.win, .win *) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(11px, 0.8vw, 18px); align-items: start; color: var(--ink-2); font-size: clamp(0.98rem, 1.04vw, 1.5rem); line-height: 1.42; text-wrap: pretty; }
.gd-needs li i:not(.win, .win *) { display: grid; place-items: center; width: 1.5em; height: 1.5em; margin-top: -0.04em; font-size: 1em; color: #04070a; background: var(--tint); clip-path: polygon(0.36em 0, 100% 0, 100% calc(100% - 0.36em), calc(100% - 0.36em) 100%, 0 100%, 0 0.36em); }
.gd-needs li i .ic:not(.win, .win *) { font-size: 0.86em; stroke-width: 2.2; }
.gd-needs .gd-since:not(.win, .win *) { color: var(--ink-3); font-size: clamp(0.92rem, 0.94vw, 1.3rem); }
.gd-needs .gd-since i:not(.win, .win *) { color: var(--tint); background: none; clip-path: none; box-shadow: 0 0 0 1.5px var(--tint) inset; }
.gd-needs a:not(.win, .win *) { color: var(--ink); border-bottom: 1.5px solid var(--tint); }
.gd-start:not(.win, .win *) { margin-top: clamp(22px, 1.9vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.gd-start .pad:not(.win, .win *) { --edge: var(--tint); min-height: clamp(48px, 3vw, 72px); padding: 0 clamp(20px, 1.4vw, 34px); font-size: clamp(15px, 1vw, 23px); --cut: clamp(10px, 0.7vw, 16px); }
.gd-start .pad .ic:not(.win, .win *) { color: var(--tint); }

/* ---------------------------------------------------------------- a guide: the steps */

/* --gd-pad is the plate's own padding, said here so that the dock and a phone's pictures can reach the plate's edge by the same amount. */
.gd-proc > .wrap:not(.win, .win *) { --gd-pad: clamp(26px, 3.6vw, 68px); padding: var(--gd-pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); }

/* The ruler. In a wide window it stays beside the steps; in a narrow one it is the list at their head, and the dock takes over. */
.gd-ruler:not(.win, .win *) { align-self: start; min-width: 0; padding: 20px 18px 16px; --cut: 14px; --edge: color-mix(in srgb, var(--tint) 80%, transparent); --fill: var(--plate); }
.gd-ruler > .silk:not(.win, .win *) { margin-bottom: 10px; color: var(--ink-2); }
.gd-ruler-list:not(.win, .win *) { position: relative; margin: 0 -18px; padding: 0 18px; }
.gd-ruler ol:not(.win, .win *) { position: relative; display: grid; }
/* The rail the ticks sit on, and the part of it already walked. */
.gd-ruler ol:not(.win, .win *)::before, .gd-ruler ol:not(.win, .win *)::after { content: ''; position: absolute; left: 15px; top: var(--gd-top, 22px); bottom: var(--gd-bottom, 22px); width: 2px; background: var(--line-2); }
.gd-ruler ol:not(.win, .win *)::after { background: var(--tint); transform: scaleY(var(--gd-p, 0)); transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gd-ruler a:not(.win, .win *) { position: relative; z-index: 1; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 44px; padding: 7px 8px 7px 0; color: var(--ink-2); font: 500 14px/1.28 var(--sans); letter-spacing: -0.005em; text-wrap: pretty; transition: color 0.18s; }
.gd-tick:not(.win, .win *) { display: grid; place-items: center; width: 32px; height: 26px; font: 600 11.5px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); background: var(--plate); box-shadow: 0 0 0 1.5px var(--line-2) inset; transition: color 0.18s, background-color 0.25s, box-shadow 0.25s; }
.gd-tick .ic:not(.win, .win *) { font-size: 14px; }
.gd-ruler a:focus-visible:not(.win, .win *), .gd-dock a:focus-visible:not(.win, .win *), .gd-dock button:focus-visible:not(.win, .win *), .gd-legend a:focus-visible:not(.win, .win *) { outline-offset: -2px; }
.gd-ruler a:hover:not(.win, .win *), .gd-ruler a:focus-visible:not(.win, .win *) { color: var(--ink); }
.gd-ruler a:hover .gd-tick:not(.win, .win *), .gd-ruler a:focus-visible .gd-tick:not(.win, .win *) { box-shadow: 0 0 0 1.5px var(--ink) inset; color: var(--ink); }
.gd-ruler a.is-done .gd-tick:not(.win, .win *) { color: var(--tint); box-shadow: 0 0 0 1.5px var(--tint) inset; }
.gd-ruler a[aria-current]:not(.win, .win *) { color: var(--ink); font-weight: 600; }
.gd-ruler a[aria-current] .gd-tick:not(.win, .win *) { color: #04070a; background: var(--tint); box-shadow: 0 0 0 1.5px var(--tint) inset; }
/* The mark that slides to the step being read. */
.gd-now:not(.win, .win *) { display: none; position: absolute; z-index: 0; left: 0; top: 0; width: 3px; height: 44px; background: #fff; transform: translate3d(0, var(--gd-y, 0px), 0) scaleY(var(--gd-s, 1)); transform-origin: 0 0; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.gd-on .gd-now:not(.win, .win *) { display: block; }
.gd-ruler .gd-ruler-end:not(.win, .win *) { margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.gd-ruler-end .gd-tick:not(.win, .win *) { background: none; box-shadow: none; color: var(--tint); }

/* The route of the procedure: a trace from each pad into its screen, and from the screen on to the next pad.
   The step draws the trace (::before below its pad, ::after on to the next step). Its text carries the light that runs along it:
   into the pad from the step above, then on from the pad into the screen, as far as the reader has come. */
.gd-steps:not(.win, .win *) { --gd-gap: clamp(34px, 4vw, 64px); gap: var(--gd-gap); }
.gd-step:not(.win, .win *)::before, .gd-step:not(.win, .win *)::after, .gd-step .step-copy:not(.win, .win *)::before, .gd-step .step-copy:not(.win, .win *)::after { content: ''; position: absolute; left: 30px; width: 2px; }
.gd-step:not(.win, .win *)::before, .gd-step:not(.win, .win *)::after { background: var(--line-2); }
.gd-step:not(.win, .win *)::before { top: 60px; bottom: 0; }
.gd-step:not(.win, .win *)::after { top: 100%; height: calc(var(--gd-gap) - 2px); }
.gd-step .step-copy:not(.win, .win *)::before, .gd-step .step-copy:not(.win, .win *)::after { background: var(--tint); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.28s cubic-bezier(0.4, 0, 0.6, 1); }
.gd-step .step-copy:not(.win, .win *)::before { top: calc(var(--gd-gap) * -1); height: calc(var(--gd-gap) - 2px); }
.gd-step .step-copy:not(.win, .win *)::after { top: 60px; bottom: -22px; transition-duration: 0.45s; transition-delay: 0.28s; }
.gd-step.gd-solo .step-copy:not(.win, .win *)::after { bottom: 0; }
.gd-step:last-child:not(.win, .win *)::after, .gd-step.gd-solo:last-child:not(.win, .win *)::before, .gd-step:first-child .step-copy:not(.win, .win *)::before, .gd-step.gd-solo:last-child .step-copy:not(.win, .win *)::after { display: none; }
html.gd-on .gd-step.is-now .step-copy:not(.win, .win *)::before, html.gd-on .gd-step.is-done .step-copy:not(.win, .win *)::before, html.gd-on .gd-step.is-now .step-copy:not(.win, .win *)::after, html.gd-on .gd-step.is-done .step-copy:not(.win, .win *)::after { transform: none; }
.gd-step:not(.win, .win *) { scroll-margin-top: calc(var(--nav) + 22px); }
.gd-step:focus:not(.win, .win *) { outline: none; }
.gd-step h3:not(.win, .win *) { text-wrap: balance; }
.gd-of:not(.win, .win *) { display: none; }
/* The step's number, as a pad. Its light is on while the step is the one being read; without the script every pad is lit. */
.gd-n:not(.win, .win *) { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 62px; height: 62px; isolation: isolate; --c: 12px; }
.gd-n:not(.win, .win *)::before, .gd-n:not(.win, .win *)::after, .gd-n i:not(.win, .win *) { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tint); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.gd-n:not(.win, .win *)::after { inset: 2px; --c: 11.2px; background: #080b0f; }
.gd-n i:not(.win, .win *) { z-index: 0; transition: opacity 0.4s ease-out; }
.gd-n i:not(.win, .win *)::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; }
.gd-n b:not(.win, .win *) { position: relative; z-index: 1; font: 600 26px/1 var(--mono); letter-spacing: -0.04em; color: #04070a; transition: color 0.3s; }
html.gd-on .gd-step:not(.is-now) .gd-n i:not(.win, .win *) { opacity: 0; }
html.gd-on .gd-step:not(.is-now) .gd-n b:not(.win, .win *) { color: var(--tint); filter: brightness(1.3); }
html.gd-on .gd-step.is-done .gd-n i:not(.win, .win *) { opacity: 0.2; }
/* The pad comes on when the light from the step above has reached it. */
html.gd-on .gd-step.is-now .gd-n i:not(.win, .win *), html.gd-on .gd-step.is-now .gd-n b:not(.win, .win *) { transition-delay: 0.2s; }
html.gd-anim .gd-step.is-now .gd-n i:not(.win, .win *)::after { animation: gd-strike 0.7s ease-out 0.2s; }

/* The picture, and under it the strip that says which step it belongs to, how it is shown, and that it opens.
   It is a solid panel: the trace ends at its edge and leaves from the opposite one. */
.gd-step .shot:not(.win, .win *) { cursor: default; background: #05070a; transition: outline-color 0.4s; }
.gd-step .shot:has(> .shot-zoom):not(.win, .win *) { cursor: zoom-in; }
html.gd-on .gd-step.is-now .shot:not(.win, .win *) { outline-color: var(--tint); }
.gd-step .shot figcaption:not(.win, .win *) { margin: 0; opacity: 1; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 2px 16px; min-height: 40px; padding: 4px 168px 4px 14px; border-top: 1.5px solid var(--line-2); background: #05070a; font: 500 11px/1.25 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.gd-cap-n:not(.win, .win *) { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.gd-cap-s:empty:not(.win, .win *) { display: none; }
.gd-step .shot-zoom:not(.win, .win *) { top: auto; right: 0; bottom: 0; width: auto; height: 40px; padding: 0 14px 0 16px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-left: 1.5px solid var(--line-2); background: #05070a; color: var(--ink-2); opacity: 1; font: 600 11px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; cursor: zoom-in; transition: color 0.18s, background-color 0.18s; }
.gd-step .shot-zoom:not(.win, .win *)::before { content: 'Whole screen'; }
.gd-step .shot-zoom svg:not(.win, .win *) { font-size: 15px; }
.gd-step .shot:not(:has(> .shot-zoom)) figcaption:not(.win, .win *) { padding-right: 14px; }
.gd-step .shot:hover .shot-zoom:not(.win, .win *), .gd-step .shot-zoom:hover:not(.win, .win *), .gd-step .shot-zoom:focus-visible:not(.win, .win *) { color: var(--ink); background: var(--plate-2); border-color: var(--line-2); }
.gd-step .shot-zoom:focus-visible:not(.win, .win *) { outline-offset: -3px; }

/* The dock: the ruler for a thumb. Shown only where the ruler cannot stay beside the steps. */
.gd-dock:not(.win, .win *) { display: none; }

/* ---------------------------------------------------------------- a guide: good to know, and where to go next */

.gd-guide .gd-know .sec-head h2:not(.win, .win *), .gd-guide .gd-more .sec-head h2:not(.win, .win *) { font-size: clamp(1.7rem, 2.7vw, 2.9rem); }
.gd-notes:not(.win, .win *) { margin-top: clamp(24px, 2.8vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.gd-note:not(.win, .win *) { padding: clamp(18px, 1.7vw, 28px); --cut: 14px; --edge: color-mix(in srgb, var(--tint) 62%, var(--line-2)); --fill: color-mix(in srgb, var(--tint) 5%, #0b0f15); }
.gd-note .silk:not(.win, .win *) { color: var(--ink-2); font-size: 11px; }
.gd-note h3:not(.win, .win *) { margin-top: 14px; font: 650 clamp(1.14rem, 1.38vw, 1.42rem)/1.15 var(--sans); letter-spacing: -0.025em; text-wrap: balance; }
.gd-note .prose:not(.win, .win *) { margin-top: 10px; font-size: clamp(0.96rem, 1vw, 1.04rem); line-height: 1.52; }
@media (min-width: 1100px) {
  .gd-notes[data-n='4']:not(.win, .win *) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-notes[data-n='5']:not(.win, .win *) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gd-notes[data-n='5'] > li:not(.win, .win *) { grid-column: span 2; }
  .gd-notes[data-n='5'] > li:nth-child(n + 4):not(.win, .win *) { grid-column: span 3; }}

.gd-related:not(.win, .win *) { margin-top: clamp(24px, 2.8vw, 44px); }
.gd-turn:not(.win, .win *) { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gd-turn-a:not(.win, .win *) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'ic silk' 'ic name'; column-gap: 18px; row-gap: 8px; align-items: center; padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.8vw, 28px); --cut: 14px; --edge: var(--line-2); --fill: var(--plate); }
.gd-turn-a .silk:not(.win, .win *) { grid-area: silk; }
.gd-turn-a b:not(.win, .win *) { grid-area: name; font: 600 clamp(1.05rem, 1.4vw, 1.45rem)/1.15 var(--sans); letter-spacing: -0.025em; text-wrap: balance; }
.gd-turn-a > .ic:not(.win, .win *) { grid-area: ic; font-size: 22px; color: var(--tint); transition: transform 0.2s; }
.gd-turn-on:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'silk ic' 'name ic'; }
.gd-turn-a:hover:not(.win, .win *), .gd-turn-a:focus-visible:not(.win, .win *) { --edge: var(--tint); }
.gd-turn-back:hover > .ic:not(.win, .win *), .gd-turn-back:focus-visible > .ic:not(.win, .win *) { transform: translateX(-4px); }
.gd-turn-on:hover > .ic:not(.win, .win *), .gd-turn-on:focus-visible > .ic:not(.win, .win *) { transform: translateX(4px); }

/* ---------------------------------------------------------------- sockets: a guide on the board (the index, and related guides) */

.gd-cells:not(.win, .win *) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; background: #05070a; border: 2px solid #05070a; }
.gd-cell:not(.win, .win *) { position: relative; display: flex; min-width: 0; background: color-mix(in srgb, var(--tint) 9%, #0b0f15); transition: background-color 0.3s; }
.gd-cell:not(.win, .win *)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: var(--tint); pointer-events: none; }
.gd-ref:not(.win, .win *) { position: absolute; z-index: 1; right: 14px; top: 15px; display: flex; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.gd-ref-zone:not(.win, .win *) { color: var(--tint); filter: brightness(1.35) saturate(1.1); font-weight: 600; }
.gd-card:not(.win, .win *) { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 46px 20px 18px; }
.gd-card:focus-visible:not(.win, .win *) { outline-offset: -5px; }
.gd-card h3:not(.win, .win *) { font: 600 clamp(1.08rem, 1.26vw, 1.34rem)/1.14 var(--sans); letter-spacing: -0.022em; text-wrap: balance; }
.gd-card p:not(.win, .win *) { margin-top: 8px; margin-bottom: 18px; color: var(--ink-2); font-size: clamp(0.9rem, 0.96vw, 0.99rem); line-height: 1.42; text-wrap: pretty; }
.gd-meta:not(.win, .win *) { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; font: 500 11.5px/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
/* A pin for every step, along the foot of the socket. They light up in turn when the socket is pointed at. */
.gd-ticks:not(.win, .win *) { margin-top: 12px; display: flex; gap: 3px; }
.gd-ticks i:not(.win, .win *) { width: 16px; height: 6px; background: color-mix(in srgb, var(--tint) 62%, #0b0f15); transition: background-color 0.25s; }
.gd-meta-t:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 2px 16px; min-width: 0; }
.gd-meta .ic:not(.win, .win *) { margin-left: auto; margin-bottom: 1px; font-size: 15px; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.gd-cell:hover:not(.win, .win *), .gd-cell:focus-within:not(.win, .win *) { background: color-mix(in srgb, var(--tint) 17%, #0b0f15); }
.gd-card:hover .gd-ticks i:not(.win, .win *), .gd-card:focus-visible .gd-ticks i:not(.win, .win *) { background: var(--tint); }
.gd-card:hover .gd-meta .ic:not(.win, .win *), .gd-card:focus-visible .gd-meta .ic:not(.win, .win *) { transform: translateX(4px); color: var(--ink); }
.gd-ticks i:nth-child(2):not(.win, .win *) { transition-delay: 35ms; } .gd-ticks i:nth-child(3):not(.win, .win *) { transition-delay: 70ms; } .gd-ticks i:nth-child(4):not(.win, .win *) { transition-delay: 105ms; } .gd-ticks i:nth-child(5):not(.win, .win *) { transition-delay: 140ms; }
.gd-ticks i:nth-child(6):not(.win, .win *) { transition-delay: 175ms; } .gd-ticks i:nth-child(7):not(.win, .win *) { transition-delay: 210ms; } .gd-ticks i:nth-child(8):not(.win, .win *) { transition-delay: 245ms; } .gd-ticks i:nth-child(9):not(.win, .win *) { transition-delay: 280ms; } .gd-ticks i:nth-child(n + 10):not(.win, .win *) { transition-delay: 315ms; }

/* ---------------------------------------------------------------- the index */

.gd-legend:not(.win, .win *) { margin-top: clamp(18px, 1.7vw, 36px); border-top: 1.5px solid var(--line-2); }
.gd-legend a:not(.win, .win *) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'lamp name n go' 'lamp blurb blurb go'; align-items: center; column-gap: clamp(11px, 0.8vw, 16px); row-gap: 3px; min-height: 52px; padding: clamp(9px, 0.7vw, 14px) 4px; border-bottom: 1.5px solid var(--line); transition: background-color 0.2s; }
.gd-legend .lamp:not(.win, .win *) { grid-area: lamp; align-self: start; width: clamp(7px, 0.5vw, 11px); height: clamp(7px, 0.5vw, 11px); margin-top: clamp(7px, 0.52vw, 12px); }
.gd-legend b:not(.win, .win *) { grid-area: name; font: 600 clamp(1rem, 1.1vw, 1.5rem)/1.2 var(--sans); letter-spacing: -0.02em; }
.gd-legend-n:not(.win, .win *) { grid-area: n; font: 500 clamp(10.5px, 0.6vw, 14px)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gd-legend-b:not(.win, .win *) { grid-area: blurb; color: var(--ink-2); font-size: clamp(0.9rem, 0.94vw, 1.3rem); line-height: 1.36; text-wrap: pretty; }
.gd-legend .ic:not(.win, .win *) { grid-area: go; font-size: 16px; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.gd-legend a:hover:not(.win, .win *), .gd-legend a:focus-visible:not(.win, .win *) { background: var(--plate-2); }
.gd-legend a:hover .ic:not(.win, .win *), .gd-legend a:focus-visible .ic:not(.win, .win *) { transform: translateY(3px); color: var(--tint); }

/* The filter stays in reach while the board scrolls under it. Without the script there is nothing to filter with. */
html:not(.js) .gd-field:not(.win, .win *) { display: none; }
.gd-find:not(.win, .win *) { position: sticky; z-index: 6; top: calc(var(--nav) / var(--zoom)); display: flex; align-items: center; gap: 12px 24px; margin: -12px 0 clamp(16px, 1.8vw, 26px); padding: 12px 0; background: #080b0f; border-bottom: 1.5px solid var(--line-2); }
.gd-field:not(.win, .win *) { flex: 0 1 620px; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: #05070a; border: 1.5px solid var(--line-2); color: var(--ink-3); font-size: 18px; cursor: text; transition: border-color 0.18s, color 0.18s; }
.gd-field:focus-within:not(.win, .win *) { border-color: var(--accent); color: var(--accent); }
.gd-field input:not(.win, .win *) { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 500 16px/1.2 var(--sans); appearance: none; -webkit-appearance: none; }
.gd-field input:not(.win, .win *)::placeholder { color: var(--ink-3); opacity: 1; }
.gd-field input:placeholder-shown:not(.win, .win *) { text-overflow: ellipsis; }
.gd-field input:not(.win, .win *)::-webkit-search-cancel-button, .gd-field input:not(.win, .win *)::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.gd-count:not(.win, .win *) { font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.gd-find-note:not(.win, .win *) { margin-left: auto; gap: 22px; white-space: nowrap; }

.gd-die:not(.win, .win *) { display: grid; gap: clamp(26px, 3vw, 44px); }
.gd-zone:not(.win, .win *) { position: relative; min-width: 0; scroll-margin-top: calc(var(--nav) + 96px); }
.gd-zone-head:not(.win, .win *) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; padding-bottom: 14px; }
.gd-zone-head h2:not(.win, .win *) { font: 600 13px/1.2 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--tint); filter: brightness(1.35) saturate(1.1); }
.gd-zone-n:not(.win, .win *) { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gd-zone-head p:not(.win, .win *) { flex-basis: 100%; color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
/* The wall of a zone, in its hue, above the edges of its sockets. */
.gd-zone > .gd-cells:not(.win, .win *)::after { content: ''; position: absolute; z-index: 2; inset: -2px; border: 2.5px solid var(--tint); pointer-events: none; transition: border-color 0.3s; }
.gd-zone > .gd-cells > .gd-cell:not(.win, .win *)::before { display: none; }
/* What the filter leaves out. (On the plan it stays as an empty socket: see below.) */
.gd-cell[hidden]:not(.win, .win *), .gd-zone[hidden]:not(.win, .win *) { display: none; }
.gd-none:not(.win, .win *) { margin-bottom: 18px; padding: 20px 22px; border: 1.5px solid var(--line-2); border-left: 3px solid var(--accent); background: #05070a; color: var(--ink-2); font-size: 1.05rem; }
.gd-none a:not(.win, .win *) { color: var(--ink); border-bottom: 1.5px solid var(--accent); }

@media (min-width: 700px) {
  .gd-cells:not(.win, .win *) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-zone[data-cols='2'] > .gd-cells:not(.win, .win *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* The plan: one die, five columns and four rows, every zone a block of it. */
@media (min-width: 1280px) {
  @supports (grid-template-rows: subgrid) {
    .gd-plan:not(.win, .win *) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: #05070a; border: 2px solid #05070a; outline: 1.5px solid var(--line-2); }
    .gd-plan > .gd-zone:not(.win, .win *) { grid-area: var(--r) / var(--c) / span var(--rs) / span var(--cs); display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
    .gd-plan > .gd-zone > .gd-cells:not(.win, .win *) { grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; border: 0; background: none; }
    .gd-plan > .gd-zone > .gd-cells:not(.win, .win *)::after, .gd-plan > .gd-zone > .gd-cells:not(.win, .win *)::before { inset: 0; }
    .gd-plan .gd-zone-head:not(.win, .win *) { position: absolute; z-index: 3; left: 20px; top: 15px; padding: 0; pointer-events: none; }
    .gd-plan .gd-zone-head h2:not(.win, .win *) { font-size: 11.5px; line-height: 1; }
    .gd-plan .gd-zone-n:not(.win, .win *) { line-height: 1; }
    .gd-plan .gd-zone-head p:not(.win, .win *) { display: none; }
    .gd-plan .gd-card:not(.win, .win *) { min-height: 214px; }
    /* A guide the filter leaves out stays on the plan as an empty socket, so the plan keeps its shape while you type.
       A row without any match folds flat. */
    .gd-plan > .gd-zone[hidden]:not(.win, .win *) { display: grid; }
    .gd-plan .gd-cell[hidden]:not(.win, .win *) { display: flex; min-height: 44px; background: #090c11; pointer-events: none; }
    .gd-plan .gd-cell[hidden] .gd-card:not(.win, .win *) { display: none; }
    .gd-plan .gd-cell[hidden] .gd-ref:not(.win, .win *) { color: var(--line-2); }
    .gd-plan > .gd-zone[hidden] > .gd-cells:not(.win, .win *)::after { border-color: var(--line-2); }
    html .gd-plan.gd-die > .gd-zone[hidden] .gd-zone-head:not(.win, .win *) { opacity: 0.5; }}}

/* ---------------------------------------------------------------- things that power up as they come into view */

html.gd-anim .gd-die .gd-cell:not(.win, .win *) { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); }
html.gd-anim .gd-die.gd-in .gd-cell:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.35s ease-out calc(var(--i) * 40ms), transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) calc(var(--i) * 40ms), background-color 0.3s; }
html.gd-anim .gd-die .gd-zone > .gd-cells:not(.win, .win *)::after, html.gd-anim .gd-die .gd-zone-head:not(.win, .win *) { opacity: 0; }
html.gd-anim .gd-die.gd-in .gd-zone > .gd-cells:not(.win, .win *)::after, html.gd-anim .gd-die.gd-in .gd-zone-head:not(.win, .win *) { opacity: 1; transition: opacity 0.3s linear calc(var(--r, 1) * 160ms + 0.25s), border-color 0.3s; }
html.gd-anim .gd-notes > li:not(.win, .win *), html.gd-anim .gd-related > li:not(.win, .win *), html.gd-anim .gd-turn > a:not(.win, .win *) { opacity: 0; transform: translate3d(0, 20px, 0); }
html.gd-anim .gd-notes.gd-in > li:not(.win, .win *), html.gd-anim .gd-related.gd-in > li:not(.win, .win *), html.gd-anim .gd-turn.gd-in > a:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.45s ease-out var(--gd-d, 0s), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) var(--gd-d, 0s), background-color 0.3s; }
html.gd-anim .gd-in > :nth-child(2):not(.win, .win *) { --gd-d: 70ms; }
html.gd-anim .gd-in > :nth-child(3):not(.win, .win *) { --gd-d: 140ms; }
html.gd-anim .gd-in > :nth-child(4):not(.win, .win *) { --gd-d: 210ms; }
html.gd-anim .gd-in > :nth-child(5):not(.win, .win *) { --gd-d: 280ms; }
html.gd-anim .gd-in > :nth-child(n + 6):not(.win, .win *) { --gd-d: 350ms; }

/* A step is an address (#step-3). The shared entrance moves what it reveals, and a moved step is found a little off its place.
   So the step itself stays where it rests, and its text and its picture do the rising. */
html.anim .gd-step.rv:not(.win, .win *) { transform: none; }
html.anim .gd-step.rv > .step-copy:not(.win, .win *), html.anim .gd-step.rv > .shot:not(.win, .win *) { transform: translate3d(0, 26px, 0); }
html.anim .gd-step.rv.in > .step-copy:not(.win, .win *), html.anim .gd-step.rv.in > .shot:not(.win, .win *) { transform: none; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), outline-color 0.4s, border-color 0.4s; }

/* A zone reached from the list in the station answers: its wall flashes once. */
.gd-zone > .gd-cells:not(.win, .win *)::before { content: ''; position: absolute; z-index: 3; inset: -2px; border: 2.5px solid #fff; opacity: 0; pointer-events: none; }
html.gd-anim .gd-zone:target > .gd-cells:not(.win, .win *)::before { animation: gd-answer 1.4s linear 0.3s; }

/* ---------------------------------------------------------------- wide: the ruler beside the steps */

@media (min-width: 1320px) {
  .gd-proc > .wrap:not(.win, .win *) { grid-template-columns: clamp(238px, 17vw, 286px) minmax(0, 1fr); column-gap: clamp(32px, 3vw, 56px); align-items: start; }
  .gd-ruler:not(.win, .win *) { position: sticky; top: calc((var(--nav) + 22px) / var(--zoom)); max-height: calc((100vh - var(--nav) - 44px) / var(--zoom)); display: flex; flex-direction: column; }
  /* In a short window the list is taller than its room: it scrolls inside the plate, and the script keeps the step being read in view. */
  .gd-ruler-list:not(.win, .win *) { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .gd-ruler-list:not(.win, .win *)::-webkit-scrollbar { display: none; }}

/* ---------------------------------------------------------------- narrow: the dock */

@media (max-width: 1319px) {
  html.gd-on .gd-proc > .wrap:not(.win, .win *) { padding-bottom: 0; }
  html.gd-on .gd-dock:not(.win, .win *) { display: block; position: sticky; z-index: 30; bottom: 0; margin: 0 calc(var(--gd-pad) * -1 + 1.5px); }
  .gd-dock-bar:not(.win, .win *) { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: stretch; height: 62px; background: #05070a; border-top: 2px solid var(--line-2); }
  .gd-dock-go:not(.win, .win *) { display: grid; place-items: center; font-size: 20px; color: var(--ink); border-right: 1.5px solid var(--line-2); }
  .gd-dock-where + .gd-dock-go:not(.win, .win *) { border-right: 0; border-left: 1.5px solid var(--line-2); }
  .gd-dock-go[aria-disabled='true']:not(.win, .win *) { color: var(--line-2); pointer-events: none; }
  .gd-dock-where:not(.win, .win *) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k ic' 't ic'; align-content: center; column-gap: 12px; row-gap: 5px; padding: 0 16px; text-align: left; }
  .gd-dock-k:not(.win, .win *) { grid-area: k; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .gd-dock-k b:not(.win, .win *) { font-weight: 600; color: var(--tint); filter: brightness(1.3); }
  .gd-dock-t:not(.win, .win *) { grid-area: t; font: 600 15px/1.15 var(--sans); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gd-dock-where > .ic:not(.win, .win *) { grid-area: ic; align-self: center; font-size: 18px; color: var(--ink-3); transition: color 0.18s; }
  .gd-dock-where[aria-expanded='true'] > .ic:not(.win, .win *) { color: var(--tint); }
  .gd-dock-ticks:not(.win, .win *) { position: absolute; left: 0; right: 0; top: -2px; height: 2px; display: flex; gap: 2px; background: #05070a; pointer-events: none; }
  .gd-dock-ticks i:not(.win, .win *) { flex: 1; background: var(--line-2); transition: background-color 0.3s; }
  .gd-dock-ticks i.is-done:not(.win, .win *) { background: var(--tint); }
  .gd-dock-ticks i.is-now:not(.win, .win *) { background: #fff; }
  .gd-dock-list:not(.win, .win *) { position: absolute; left: 0; right: 0; bottom: 100%; max-height: min(64svh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 10px; background: #080b0f; border-top: 2px solid var(--tint); }
  .gd-dock-list .silk:not(.win, .win *) { margin-bottom: 10px; color: var(--ink-2); }
  .gd-dock-list ol:not(.win, .win *) { display: grid; }
  .gd-dock-list a:not(.win, .win *) { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 48px; padding: 7px 0; border-top: 1.5px solid var(--line); color: var(--ink-2); font: 500 15.5px/1.25 var(--sans); }
  .gd-dock-list .gd-tick:not(.win, .win *) { width: 34px; height: 28px; background: none; }
  .gd-dock-list a.is-done .gd-tick:not(.win, .win *) { color: var(--tint); box-shadow: 0 0 0 1.5px var(--tint) inset; }
  .gd-dock-list a[aria-current]:not(.win, .win *) { color: var(--ink); font-weight: 600; }
  .gd-dock-list a[aria-current] .gd-tick:not(.win, .win *) { color: #04070a; background: var(--tint); box-shadow: 0 0 0 1.5px var(--tint) inset; }}

@media (max-width: 899px) {
  .gd-step:not(.win, .win *)::before, .gd-step .step-copy:not(.win, .win *)::after { display: none; }
  .gd-step:not(.win, .win *)::after, .gd-step .step-copy:not(.win, .win *)::before { left: 23px; }
  .gd-n:not(.win, .win *) { position: relative; top: 0; width: 48px; height: 48px; --c: 10px; }
  .gd-n:not(.win, .win *)::after { --c: 9.2px; }
  .gd-n b:not(.win, .win *) { font-size: 20px; }
  .gd-step .step-copy:not(.win, .win *) { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
  .gd-step .step-copy > h3:not(.win, .win *), .gd-step .step-copy > .prose:not(.win, .win *) { grid-column: 1 / -1; }
  .gd-step .step-copy > .prose:not(.win, .win *) { margin-top: 0; }
  .gd-of:not(.win, .win *) { display: flex; }
  .gd-step .shot figcaption:not(.win, .win *) { min-height: 44px; }
  .gd-step .shot-zoom:not(.win, .win *) { height: 44px; }
  .gd-turn:not(.win, .win *) { grid-template-columns: 1fr; }
  .gd-turn-a .silk:not(.win, .win *) { white-space: nowrap; }
  .gd-turn-a .silk-r:not(.win, .win *) { display: none; }
  .gd-find-note:not(.win, .win *) { display: none; }
  .gd-field:not(.win, .win *) { flex-basis: 100%; }}

/* A phone: the picture takes the whole width of the plate, so the detail it shows is as wide as it can be. */
@media (max-width: 699px) {
  .gd-step .shot:not(.win, .win *) { margin-left: calc(var(--gd-pad) * -1 + 1.5px); margin-right: calc(var(--gd-pad) * -1 + 1.5px); outline: 0; border-top: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line-2); transition: border-color 0.4s; }
  html.gd-on .gd-step.is-now .shot:not(.win, .win *) { border-color: var(--tint); }
  .gd-step .shot.crop:not([data-ar]):not(.win, .win *) { --crop-ar: 4 / 3; }
  .gd-cap-n:not(.win, .win *) { display: none; }
  .gd-step .shot figcaption:not(.win, .win *) { padding-left: var(--gd-pad); }
  .gd-step .shot-zoom:not(.win, .win *) { padding-right: calc(var(--gd-pad) - 4px); }}

/* A whole screen on a phone. In a step it is as wide as the script found it can be read (--gd-w); opened, it is shown at a size
   that can still be read. Either way it is dragged sideways. */
@media (max-width: 760px) {
  .gd-step .shot:not(.crop) .shot-pan:not(.win, .win *) { width: var(--gd-w, 100%); }
  html[data-page='guide'] .zoom .shot:not(.win, .win *) { --pan: 1008; }}
}
/* site-info.css */
@layer page {
@keyframes in-seat { from { opacity: 0; transform: translate3d(0, -16px, 0) scale(1.14); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes in-power { 0% { opacity: 0; } 30% { opacity: 1; } 48% { opacity: 0.2; } 66%, 100% { opacity: 1; } }
@keyframes in-out { 0% { transform: translate3d(-101%, 0, 0); } 50%, 100% { transform: translate3d(30%, 0, 0); } }
@keyframes in-back { 0% { transform: translate3d(101%, 0, 0); } 50%, 100% { transform: translate3d(-30%, 0, 0); } }
@keyframes in-day { from { opacity: 0.12; transform: scaleY(0.6); } to { opacity: 1; transform: none; } }
@property --in-flash { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes in-here { 0%, 25% { --in-flash: 1; } 100% { --in-flash: 0; } }
/* The reference pages: FAQ, Download, Shortcuts and Privacy. Every class of theirs starts with in-.
   They are built from the pieces of site.css (plates, pads, silkscreen, sections, questions, prose) and add only what they alone need.
   Markup: pages/faq.mjs, download.mjs, shortcuts.mjs, privacy.mjs. Behaviour: client/62-info.js. */

/* ---------------------------------------------------------------- shared by the four pages */

/* A band whose plates stand on the board themselves, with the chip between them. */
.sec.in-open > .wrap:not(.win, .win *) { padding: 0; }
.sec.in-open > .wrap:not(.win, .win *)::before, .sec.in-open > .wrap:not(.win, .win *)::after { display: none; }
.in-sec > .wrap > .sec-head + *:not(.win, .win *) { margin-top: clamp(26px, 3.2vw, 56px); }
.in-sec .sec-head .silk .idx:not(.win, .win *) { filter: brightness(1.2); }

/* What needs script is not offered without it. */
html:not(.js) .in-find:not(.win, .win *), html:not(.js) .in-try:not(.win, .win *), html:not(.js) .in-all:not(.win, .win *), html:not(.js) .in-kb-hint:not(.win, .win *) { display: none; }

/* A shortcut inside a sentence. ⌘ ⇧ ⌥ ⌃ are drawn by the system's font, as they are on the keys themselves. */
.in-k:not(.win, .win *), .in-group .prose kbd:not(.win, .win *) { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI Symbol', sans-serif; font-weight: 600; letter-spacing: 0.08em; }

/* A link inside a sentence that is not prose. */
.in-a:not(.win, .win *), .in-write-plate a:not(.win, .win *), .in-empty a:not(.win, .win *) { color: var(--ink); border-bottom: 1.5px solid var(--tint); }
.in-a:hover:not(.win, .win *), .in-write-plate a:hover:not(.win, .win *), .in-empty a:hover:not(.win, .win *) { border-color: var(--ink); }

/* The sections of a page as pins, under the station's lead: the bar's idea, one level down. */
.in-pins:not(.win, .win *) { margin-top: clamp(18px, 1.7vw, 32px); }
.in-pins ol:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 8px; }
.in-pins a:not(.win, .win *) { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 13px 0 11px; border: 1.5px solid var(--line-2); background: #06090c;
  font: 500 clamp(11.5px, 0.64vw, 14.5px)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: border-color 0.18s, color 0.18s; }
.in-pin-n:not(.win, .win *) { font-weight: 600; color: var(--tint); filter: brightness(1.2); }
.in-pins a:hover:not(.win, .win *), .in-pins a:focus-visible:not(.win, .win *) { border-color: var(--ink); color: var(--ink); }
.in-pins a[aria-current]:not(.win, .win *) { border-color: var(--tint); color: var(--ink); background: color-mix(in srgb, var(--tint) 12%, #06090c); }
.in-pins a[data-none]:not(.win, .win *) { color: var(--ink-3); }
.in-pins a[data-none] .in-pin-n:not(.win, .win *) { color: var(--ink-3); filter: none; }
@media (max-width: 1099px) { .in-pins-wide:not(.win, .win *) { display: none; }}

/* Words beside a figure. */
.in-cols:not(.win, .win *) { display: grid; gap: clamp(26px, 3.4vw, 64px); }
.in-col:not(.win, .win *) { display: grid; gap: 22px; align-content: start; justify-items: start; min-width: 0; }
.in-col > .prose:not(.win, .win *) { max-width: 64ch; }
.in-fig:not(.win, .win *) { min-width: 0; }
@media (min-width: 1000px) { .in-cols:not(.win, .win *) { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start; }}

/* Long literal text, such as a folder's path, wraps instead of pushing the page sideways. */
.in-sec .prose code:not(.win, .win *), .in-card .prose code:not(.win, .win *), .in-group .prose code:not(.win, .win *) { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.in-sec .prose ol:not(.win, .win *), .in-group .prose ol:not(.win, .win *) { display: grid; gap: 0.5em; margin-top: 0.8em; counter-reset: in-n; }
.in-sec .prose ol li:not(.win, .win *), .in-group .prose ol li:not(.win, .win *) { position: relative; padding-left: 2.1em; counter-increment: in-n; }
.in-sec .prose ol li:not(.win, .win *)::before, .in-group .prose ol li:not(.win, .win *)::before { content: counter(in-n); position: absolute; left: 0; top: 0.22em; width: 1.5em; height: 1.5em; display: grid; place-items: center; background: none; border: 1.5px solid var(--tint); color: var(--ink); font: 600 0.72em/1 var(--mono); }
.in-group .prose p + ol:not(.win, .win *), .in-group .prose ol + p:not(.win, .win *), .in-group .prose ul + p:not(.win, .win *) { margin-top: 0.8em; }

/* Numbered steps on one trace. */
.in-steps:not(.win, .win *) { position: relative; display: grid; }
.in-steps:not(.win, .win *)::before { content: ''; position: absolute; left: 23px; top: 30px; bottom: 30px; width: 2px; background: var(--line-2); }
.in-step:not(.win, .win *) { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: clamp(14px, 1.4vw, 22px); align-items: center; padding: 11px 0; }
.in-step-n:not(.win, .win *) { position: relative; display: grid; place-items: center; width: 48px; height: 48px; font: 600 19px/1 var(--mono); letter-spacing: -0.03em; color: #04070a; background: var(--tint);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.in-step p:not(.win, .win *) { color: var(--ink-2); font-size: clamp(1.02rem, 1.12vw, 1.22rem); line-height: 1.48; text-wrap: pretty; max-width: 56ch; }

/* A note beside the main text. */
.in-note:not(.win, .win *) { padding: 14px 18px 16px; background: #05070a; border-left: 3px solid var(--tint); max-width: 64ch; }
.in-note .silk:not(.win, .win *) { margin-bottom: 8px; font-size: 11px; }
.in-note .prose:not(.win, .win *) { font-size: clamp(0.95rem, 1.02vw, 1.06rem); }

/* A screen of the app. */
.in-screen .shot:not(.win, .win *), .in-install .shot:not(.win, .win *) { max-width: var(--fit, var(--natural, none)); --shot-r: 0px; outline: 1.5px solid color-mix(in srgb, var(--tint) 55%, var(--line-2)); outline-offset: 0; }
.in-screen .shot-frame:not(.win, .win *), .in-install .shot-frame:not(.win, .win *) { border-radius: 0; }
.in-screen .screen-cap:not(.win, .win *), .in-install .screen-cap:not(.win, .win *) { font-size: clamp(11px, 0.6vw, 14px); }
.screen-cap [data-release='file']:not(.win, .win *) { text-transform: none; letter-spacing: 0.02em; }
/* One card of the app, close to its real size, at the far end of its column. */
.in-screen.in-one:not(.win, .win *) { width: 100%; max-width: 660px; margin-left: auto; }
/* The whole page of the app, from one edge of the plate to the other. */
.in-screen.in-wide .shot:not(.win, .win *) { max-width: none; }
/* On a phone a screen runs from one edge of its plate to the other, so the app is drawn as large as the phone allows.
   The section is the container the plate's width is worked out from, so this holds whatever the plate's padding is. */
@media (max-width: 560px) {
  .sec.in-sec:not(.win, .win *) { container-type: inline-size; --in-plate: calc(100cqw - var(--gut) * 2 - 3px); }
  .in-sec .in-screen .shot:not(.win, .win *), .in-sec .in-install .shot:not(.win, .win *), .in-sec .in-kb:not(.win, .win *) { width: var(--in-plate); max-width: none; margin-left: calc((100% - var(--in-plate)) / 2); outline: 0; border-block: 1.5px solid color-mix(in srgb, var(--tint) 55%, var(--line-2)); }
  .in-sec .in-kb:not(.win, .win *) { border-inline: 0; }
  .in-screen.in-one:not(.win, .win *) { max-width: none; }}

/* What the numbered rings on a screen mark. */
.in-legend:not(.win, .win *) { display: grid; gap: 10px; }
.in-legend li:not(.win, .win *) { display: flex; align-items: center; gap: 12px; }
.in-legend-n:not(.win, .win *) { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent); color: #04070a; font: 700 12.5px/1 var(--mono); }
.in-legend .ui:not(.win, .win *) { white-space: normal; padding: 0.42em 0.7em; line-height: 1.2; font-size: clamp(0.9rem, 0.95vw, 1.02rem); }

/* The line every list ends on. */
.in-after:not(.win, .win *) { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 2vw, 32px); color: var(--ink); font-size: clamp(1.02rem, 1.15vw, 1.25rem); font-weight: 500; }
.in-sec .go:not(.win, .win *) { margin-top: clamp(20px, 2vw, 32px); }
.in-col .go:not(.win, .win *) { margin-top: 0; }

/* Where to write. */
.in-write:not(.win, .win *) { padding-top: 0; }
.in-write-plate:not(.win, .win *) { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); padding: clamp(18px, 2vw, 32px) clamp(20px, 2.6vw, 48px); --cut: 16px; --fill: #080b0f; color: var(--ink-2); font-size: clamp(1.05rem, 1.35vw, 1.45rem); line-height: 1.4; }
.in-write-ic:not(.win, .win *) { display: grid; place-items: center; width: 44px; height: 44px; flex: none; font-size: 22px; color: #04070a; background: var(--tint); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.in-write-plate a:not(.win, .win *) { overflow-wrap: anywhere; }

/* Plates that power up as they come into view (62-info.js adds .in-rv, then .in-on). */
html.in-anim .in-rv:not(.win, .win *) { opacity: 0; transform: translate3d(0, 22px, 0); }
html.in-anim .in-rv.in-on:not(.win, .win *) { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s); }

/* ---------------------------------------------------------------- download */

/* The app in its socket, and the pad: the last band of the home page, as an opening. */
.in-get:not(.win, .win *) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'socket pad' 'socket meta'; gap: 12px clamp(16px, 1.6vw, 28px); align-items: center; justify-items: start; margin-top: clamp(22px, 2.2vw, 40px); }
.in-get .socket:not(.win, .win *) { grid-area: socket; width: clamp(104px, 8.6vw, 176px); padding: clamp(15px, 1.25vw, 24px); }
/* Here the socket is in use: the app is seated in it and its pins carry power. The same pins as the socket's own, lit. */
.in-get .socket:not(.win, .win *)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  repeating-linear-gradient(90deg, var(--orange) 0 3px, transparent 3px 14px) 14px 5px / calc(100% - 28px) 5px no-repeat,
  repeating-linear-gradient(90deg, var(--orange) 0 3px, transparent 3px 14px) 14px calc(100% - 5px) / calc(100% - 28px) 5px no-repeat,
  repeating-linear-gradient(0deg, var(--orange) 0 3px, transparent 3px 14px) 5px 14px / 5px calc(100% - 28px) no-repeat,
  repeating-linear-gradient(0deg, var(--orange) 0 3px, transparent 3px 14px) calc(100% - 5px) 14px / 5px calc(100% - 28px) no-repeat; }
html.js .in-get .socket img:not(.win, .win *) { animation: in-seat 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both; }
html.js .in-get .socket:not(.win, .win *)::after { animation: in-power 0.6s linear 0.95s both; }
.in-get .pad:not(.win, .win *) { grid-area: pad; align-self: end; }
.in-get-meta:not(.win, .win *) { grid-area: meta; align-self: start; display: grid; gap: 8px; min-width: 0; }
.in-file:not(.win, .win *) { display: flex; align-items: center; gap: 8px; font: 500 clamp(11.5px, 0.62vw, 14px)/1.3 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); overflow-wrap: anywhere; }
.in-file .ic:not(.win, .win *) { font-size: 15px; color: var(--tint); }
.in-get .pad.big:not(.win, .win *) { min-height: clamp(60px, 3.3vw, 88px); padding: 0 clamp(24px, 1.6vw, 42px); font-size: clamp(17px, 1.02vw, 26px); --cut: clamp(12px, 0.7vw, 18px); }
.in-get .req:not(.win, .win *) { font-size: clamp(12px, 0.62vw, 15.5px); }
@media (max-width: 1699px) {
  .in-get:not(.win, .win *) { grid-template-areas: 'socket meta' 'pad pad'; gap: 16px; }
  .in-get .socket:not(.win, .win *) { width: 96px; padding: 14px; }
  .in-get .pad:not(.win, .win *) { width: 100%; align-self: auto; }
  .in-get-meta:not(.win, .win *) { align-self: center; }}

/* What it needs: four readings, like the ones pinned to the chip. */
.in-facts-band:not(.win, .win *) { padding-top: clamp(10px, 2svh, 28px); }
.in-facts:not(.win, .win *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.in-fact:not(.win, .win *) { padding: clamp(16px, 1.5vw, 26px); --cut: 12px; --fill: #080b0f; --edge: var(--line-2); display: grid; gap: 14px; align-content: start; }
.in-fact dt:not(.win, .win *) { color: var(--ink-2); }
.in-fact-ic:not(.win, .win *) { display: grid; place-items: center; width: 26px; height: 26px; font-size: 15px; color: #04070a; background: var(--tint); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.in-fact dd:not(.win, .win *) { display: grid; gap: 8px; }
.in-fact dd b:not(.win, .win *) { font: 600 clamp(1.25rem, 1.75vw, 2.1rem)/1.05 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.in-fact dd small:not(.win, .win *) { font: 500 0.52em/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); }
.in-fact dd span:not(.win, .win *) { color: var(--ink-2); font-size: clamp(0.92rem, 1vw, 1.05rem); line-height: 1.42; text-wrap: pretty; }
@media (min-width: 1000px) { .in-facts:not(.win, .win *) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }}
@media (max-width: 479px) { .in-facts:not(.win, .win *) { grid-template-columns: minmax(0, 1fr); } .in-fact:not(.win, .win *) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }}

/* The version check, drawn: two parts of a board and the two lines between them. */
.in-check:not(.win, .win *) { display: grid; gap: clamp(18px, 1.8vw, 30px); padding: clamp(18px, 2vw, 34px); background: #05070a; border: 1.5px solid var(--line-2); }
.in-check-row:not(.win, .win *) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.in-node:not(.win, .win *) { display: grid; justify-items: center; gap: 6px; width: clamp(104px, 9vw, 148px); padding: 16px 10px 14px; text-align: center; --cut: 12px; --fill: #0c1117; --edge: color-mix(in srgb, var(--tint) 70%, var(--line-2)); }
.in-node img:not(.win, .win *) { width: 52px; height: 52px; }
.in-node-ic:not(.win, .win *) { display: grid; place-items: center; width: 52px; height: 52px; font-size: 30px; color: var(--tint); filter: brightness(1.3); }
.in-node b:not(.win, .win *) { font: 600 14.5px/1.15 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.in-node span:not(.in-node-ic):not(.win, .win *) { font: 500 10.5px/1.25 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.in-lines:not(.win, .win *) { display: grid; gap: 18px; min-width: 0; }
.in-line:not(.win, .win *) { display: grid; gap: 9px; }
/* A line, what is written on it, and the light that travels along it. */
.in-line span:not(.win, .win *) { display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 500 clamp(0.82rem, 0.92vw, 0.98rem)/1.3 var(--sans); color: var(--ink); text-wrap: balance; }
.in-line.back span:not(.win, .win *) { color: var(--ink-2); }
.in-line span .ic:not(.win, .win *) { flex: none; font-size: 15px; color: var(--tint); filter: brightness(1.3); }
.in-line.out span:not(.win, .win *) { justify-content: space-between; }
.in-line i:not(.win, .win *) { position: relative; display: block; height: 2px; background: color-mix(in srgb, var(--tint) 55%, var(--line-2)); overflow: hidden; }
/* The light is as wide as its line and carries its bright end at the front, so a transform alone takes it across. */
.in-line i b:not(.win, .win *) { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent calc(100% - 70px), #fff); transform: translate3d(-101%, 0, 0); will-change: transform; animation: in-out 3s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.in-line.back i b:not(.win, .win *) { background: linear-gradient(270deg, transparent calc(100% - 70px), #fff); transform: translate3d(101%, 0, 0); animation-name: in-back; animation-delay: 1.5s; }
/* Narrow: the two lines run between the parts, and what travels on them is written underneath. */
@media (max-width: 699px) {
  .in-check-row:not(.win, .win *) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'a w1 b' 'a w2 b' 't1 t1 t1' 't2 t2 t2'; }
  .in-check-row > .in-node:first-child:not(.win, .win *) { grid-area: a; }
  .in-check-row > .in-node:last-child:not(.win, .win *) { grid-area: b; }
  .in-lines:not(.win, .win *), .in-line:not(.win, .win *) { display: contents; }
  .in-line.out i:not(.win, .win *) { grid-area: w1; align-self: end; margin-bottom: 9px; }
  .in-line.back i:not(.win, .win *) { grid-area: w2; align-self: start; margin-top: 9px; }
  .in-line.out span:not(.win, .win *) { grid-area: t1; margin-top: 18px; }
  .in-line.back span:not(.win, .win *) { grid-area: t2; margin-top: 10px; }
  .in-line span:not(.win, .win *) { padding: 0; font-size: 0.95rem; }
  .in-line.out span:not(.win, .win *) { flex-direction: row-reverse; justify-content: flex-end; }
  .in-node:not(.win, .win *) { width: 100px; padding: 14px 6px 12px; }}
.in-when:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1.5px solid var(--line); font: 500 clamp(11px, 0.6vw, 13.5px)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.in-when li:not(.win, .win *) { display: flex; align-items: center; gap: 9px; }
.in-when i:not(.win, .win *) { width: 7px; height: 7px; background: var(--tint); }
.in-days:not(.win, .win *) { display: grid; gap: 10px; }
.in-days .silk:not(.win, .win *) { color: var(--ink-2); }
.in-days ol:not(.win, .win *) { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.in-days li:not(.win, .win *) { display: grid; place-items: center; height: clamp(34px, 2.6vw, 48px); font: 600 13px/1 var(--mono); color: #04070a; background: var(--good); }
html.in-anim .in-check.in-on .in-days li:not(.win, .win *) { animation: in-day 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--n) * 90ms + 0.3s) both; }

/* Moving and removing: two plates side by side. */
.in-pair:not(.win, .win *) { display: grid; gap: 14px; }
.in-card:not(.win, .win *) { padding: clamp(22px, 2.6vw, 52px); --cut: clamp(16px, 1.8vw, 30px); --fill: #080b0f; --edge: var(--line-2); display: grid; gap: 18px; align-content: start; scroll-margin-top: calc(var(--nav) + 16px); }
.in-card .silk:not(.win, .win *) { color: var(--ink-2); }
.in-card h2:not(.win, .win *) { font: 650 clamp(1.7rem, 2.6vw, 3rem)/1.04 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.in-card .in-steps:not(.win, .win *) { margin: -4px 0; }
.in-card .go:not(.win, .win *) { justify-self: start; margin-top: 0; }
@media (min-width: 1000px) { .in-pair:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 26px); }}
/* The data folder and the two folders inside it, hanging from one trace. */
.in-tree:not(.win, .win *) { padding: 16px 18px 6px; background: #05070a; border-left: 3px solid var(--tint); }
.in-tree .silk:not(.win, .win *) { margin-bottom: 14px; font-size: 11px; color: var(--ink-2); }
.in-tree code:not(.win, .win *) { padding: 0; border: 0; background: none; white-space: normal; overflow-wrap: anywhere; font-size: clamp(0.84rem, 0.9vw, 0.98rem); line-height: 1.35; color: var(--ink); }
.in-tree .ic:not(.win, .win *) { flex: none; font-size: 18px; color: var(--tint); filter: brightness(1.25); }
.in-tree-root:not(.win, .win *) { display: flex; align-items: flex-start; gap: 10px; }
.in-tree ul:not(.win, .win *) { position: relative; margin: 4px 0 0 8px; }
.in-tree li:not(.win, .win *) { position: relative; display: grid; gap: 3px; padding: 11px 0 11px 30px; color: var(--ink-2); font-size: clamp(0.92rem, 0.98vw, 1.05rem); line-height: 1.4; }
.in-tree li:not(.win, .win *)::before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 22px; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); }
.in-tree li:not(:last-child):not(.win, .win *)::after { content: ''; position: absolute; left: 0; top: 22px; bottom: 0; width: 2px; background: var(--line-2); }
.in-tree-name:not(.win, .win *) { display: flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------------- FAQ */

.in-faq-sec:not(.win, .win *) { padding-top: clamp(10px, 2svh, 28px); }
.in-groups:not(.win, .win *) { display: grid; gap: clamp(14px, 1.6vw, 28px); min-width: 0; scroll-margin-top: calc(var(--nav) + 74px); }

/* The panel beside the answers: the filter, the topics, and the switch that opens everything.
   In a narrow window its parts are simply the first things of the list, and the filter stays under the bar while the list scrolls. */
.in-side:not(.win, .win *) { display: contents; }
.in-side > *:not(.win, .win *) { margin-bottom: 14px; }
.in-find:not(.win, .win *) { position: sticky; z-index: 6; top: calc(var(--nav) + 8px); box-shadow: 0 -9.5px 0 var(--void); display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 15px; border: 1.5px solid var(--line-2); background: #05070a; transition: border-color 0.18s; }
.in-find:focus-within:not(.win, .win *) { border-color: var(--accent); }
.in-find > .ic:not(.win, .win *) { font-size: 19px; color: var(--accent); }
.in-find input:not(.win, .win *) { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: none; color: var(--ink); font: 500 16px/1 var(--sans); letter-spacing: -0.01em; caret-color: var(--accent); appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
.in-find input:not(.win, .win *)::placeholder { color: var(--ink-3); opacity: 1; }
.in-find input:not(.win, .win *)::-webkit-search-cancel-button, .in-find input:not(.win, .win *)::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.in-find-count:not(.win, .win *) { font: 600 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-find-count:empty:not(.win, .win *) { display: none; }
.in-find-clear:not(.win, .win *) { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1.5px solid var(--line-2); font-size: 16px; color: var(--ink-2); }
.in-find-clear[hidden]:not(.win, .win *) { display: none; }
.in-find-clear:hover:not(.win, .win *), .in-find-clear:focus-visible:not(.win, .win *) { border-color: var(--ink); color: var(--ink); }

.in-try:not(.win, .win *) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.in-try span:not(.win, .win *) { margin-right: 4px; }
.in-try button:not(.win, .win *) { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--line-2); background: #080b0f; color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: 0.02em; text-transform: none; transition: border-color 0.18s; }
.in-try button:hover:not(.win, .win *), .in-try button:focus-visible:not(.win, .win *) { border-color: var(--ink); }
.in-try button[aria-pressed='true']:not(.win, .win *) { border-color: var(--accent); background: var(--accent); color: #04070a; }
.in-topics:not(.win, .win *) { padding: 16px 16px 8px; background: #080b0f; border: 1.5px solid var(--line-2); }
.in-topics .silk:not(.win, .win *) { padding-bottom: 12px; border-bottom: 1.5px solid var(--line-2); }
.in-topics a:not(.win, .win *) { display: grid; grid-template-columns: 10px 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1.5px solid var(--line); color: var(--ink-2); transition: color 0.18s; }
.in-topics li:last-child a:not(.win, .win *) { border-bottom: 0; }
.in-topics a i:not(.win, .win *) { width: 8px; height: 8px; background: var(--tint); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.in-topic-n:not(.win, .win *) { font: 600 11.5px/1 var(--mono); color: var(--ink-3); }
.in-topic-t:not(.win, .win *) { font: 550 15.5px/1.2 var(--sans); letter-spacing: -0.012em; }
.in-topics a b:not(.win, .win *) { font: 500 12px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.in-topics a:hover:not(.win, .win *), .in-topics a:focus-visible:not(.win, .win *), .in-topics a[aria-current]:not(.win, .win *) { color: var(--ink); }
.in-topics a:hover i:not(.win, .win *), .in-topics a:focus-visible i:not(.win, .win *), .in-topics a[aria-current] i:not(.win, .win *) { transform: rotate(45deg); }
.in-topics a[aria-current] i:not(.win, .win *) { box-shadow: 0 0 0 3px #080b0f, 0 0 0 4.5px var(--tint); }
.in-topics a[aria-current] .in-topic-n:not(.win, .win *), .in-topics a[aria-current] b:not(.win, .win *) { color: var(--ink); }
.in-topics a[data-none]:not(.win, .win *) { color: var(--ink-3); }
.in-topics a[data-none] i:not(.win, .win *) { background: var(--line-2); }

.in-all:not(.win, .win *) { display: flex; align-items: center; gap: 12px; width: max-content; min-height: 48px; padding: 0 14px 0 9px; border: 1.5px solid var(--line-2); background: #080b0f; color: var(--ink); font: 600 14.5px/1 var(--sans); letter-spacing: -0.005em; transition: border-color 0.18s; }
.in-all:hover:not(.win, .win *), .in-all:focus-visible:not(.win, .win *) { border-color: var(--ink); }
.in-all .q-sw:not(.win, .win *) { width: 28px; height: 28px; }
.in-all[aria-pressed='true'] .q-sw:not(.win, .win *) { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.in-all[aria-pressed='true'] .q-sw:not(.win, .win *)::before, .in-all[aria-pressed='true'] .q-sw:not(.win, .win *)::after { background: #04070a; }
.in-all[aria-pressed='true'] .q-sw:not(.win, .win *)::after { transform: rotate(0deg); }

/* A topic: a plate of its own, in the hue the app gives that part. */
.in-group:not(.win, .win *) { --g: var(--tint); padding: clamp(18px, 2.3vw, 44px); --cut: clamp(16px, 1.8vw, 30px); --fill: #080b0f; --edge: color-mix(in srgb, var(--g) 50%, var(--line-2)); scroll-margin-top: calc(var(--nav) + 74px); }
.in-group-head:not(.win, .win *) { margin-bottom: clamp(16px, 1.6vw, 28px); }
.in-group-head .silk:not(.win, .win *) { color: var(--ink-2); }
.in-group-head .silk .idx:not(.win, .win *) { display: grid; place-items: center; width: 24px; height: 24px; color: #04070a; background: var(--g); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.in-group-head h2:not(.win, .win *) { margin-top: 14px; font: 650 clamp(1.6rem, 2.5vw, 2.9rem)/1.05 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.in-group .q:not(.win, .win *) { --tint: var(--g); scroll-margin-top: calc(var(--nav) + 74px); }
.in-group .q[open]:not(.win, .win *) { --edge: var(--g); }
.in-group .q-n:not(.win, .win *) { color: var(--g); filter: brightness(1.3) saturate(1.1); }
.in-group .q[open] .q-sw:not(.win, .win *) { background: var(--g); border-color: var(--g); }
.in-group .q-t:not(.win, .win *) { font-size: clamp(1.04rem, 1.3vw, 1.3rem); }
.in-group .q summary:not(.win, .win *) { grid-template-columns: 40px minmax(0, 1fr) 30px; padding: 17px 20px; }
.in-group .q-a:not(.win, .win *) { padding: 0 20px 20px 72px; }
/* The question the address points at. */
.in-group .q:target:not(.win, .win *) { --edge: var(--g); }
.in-group .q:not(.win, .win *) { --fill: color-mix(in srgb, var(--g) calc(var(--in-flash, 0) * 30%), #0c1117); }
.in-group .q[open]:not(.win, .win *) { --fill: color-mix(in srgb, var(--g) calc(var(--in-flash, 0) * 30%), #0d141b); }
.in-group .q.in-here:not(.win, .win *) { animation: in-here 1.8s ease-out 1; }
.in-q-link:not(.win, .win *) { margin-top: 1.1em; }
.in-q-link a:not(.win, .win *) { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; border: 0; font: 500 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); transition: color 0.18s; }
.in-q-link a .ic:not(.win, .win *) { font-size: 14px; color: var(--g); }
.in-q-link a:hover:not(.win, .win *), .in-q-link a:focus-visible:not(.win, .win *), .in-q-link a.in-copied:not(.win, .win *) { color: var(--ink); }
.in-empty:not(.win, .win *) { padding: clamp(20px, 2.2vw, 36px); --fill: #080b0f; color: var(--ink-2); font-size: clamp(1.02rem, 1.2vw, 1.25rem); }
.in-empty[hidden]:not(.win, .win *), .in-group[hidden]:not(.win, .win *) { display: none; }

@media (min-width: 1100px) {
  .in-faq:not(.win, .win *) { display: grid; grid-template-columns: minmax(290px, 0.3fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 28px); align-items: start; }
  /* In a window too short for it, the panel scrolls by itself. The padding leaves room for focus rings inside that scroll box. */
  .in-side:not(.win, .win *) { position: sticky; top: calc(var(--nav) + 10px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: calc(100svh / var(--zoom) - var(--nav) - 20px); overflow-y: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
  .in-side:not(.win, .win *)::-webkit-scrollbar { display: none; }
  .in-side > *:not(.win, .win *) { margin-bottom: 0; }
  .in-find:not(.win, .win *) { position: relative; top: auto; box-shadow: none; }
  .in-all:not(.win, .win *) { width: auto; }
  .in-groups:not(.win, .win *), .in-group:not(.win, .win *), .in-group .q:not(.win, .win *) { scroll-margin-top: calc(var(--nav) + 16px); }}
@media (max-width: 899px) {
  .in-group .q summary:not(.win, .win *) { grid-template-columns: 34px minmax(0, 1fr) 30px; padding: 15px 14px; gap: 10px; }
  .in-group .q-a:not(.win, .win *) { padding: 0 14px 18px 14px; }
  .in-group .q-n:not(.win, .win *) { font-size: 11px; }}

/* With reduced motion nothing travels along a line, so the lights are not drawn at all. */
@media (prefers-reduced-motion: reduce) { .in-line i b:not(.win, .win *), .in-net-wire em:not(.win, .win *) { display: none; }}

/* Touch: everything that is pressed is at least 44 px. */
@media (hover: none), (pointer: coarse) {
  .in-find-clear:not(.win, .win *) { width: 44px; height: 44px; }
  .in-q-link a:not(.win, .win *) { min-height: 44px; }
  .in-pins a:not(.win, .win *) { min-height: 44px; }
  .in-try button:not(.win, .win *) { min-height: 44px; padding: 0 16px; }}

/* ---------------------------------------------------------------- shortcuts */

/* A shortcut as keycaps. .in-keys is one combination; every kbd inside it is one key. */
.in-combo:not(.win, .win *) { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px 9px; vertical-align: middle; }
.in-keys:not(.win, .win *) { display: inline-flex; gap: 4px; padding: 0; border: 0; background: none; font: inherit; }
.in-keys kbd:not(.win, .win *) { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border: 1.5px solid #46566b; border-bottom-width: 3px; background: #121a24; color: var(--ink); font: 600 14px/1 var(--mono); letter-spacing: 0; transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.16s; }
.in-keys kbd.w:not(.win, .win *) { font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 9px; }
/* ⌘ ⇧ ⌥ ⌃ and the arrows are drawn by the system's font, as on the keys themselves. */
.in-keys kbd.s:not(.win, .win *), .in-kb i.s:not(.win, .win *) { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI Symbol', sans-serif; font-weight: 500; }
.in-keys kbd.s:not(.win, .win *) { font-size: 16px; }
.in-gesture:not(.win, .win *) { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.in-combo.big .in-keys:not(.win, .win *) { gap: 5px; }
.in-combo.big .in-keys kbd:not(.win, .win *) { min-width: clamp(40px, 2.7vw, 54px); height: clamp(40px, 2.7vw, 54px); font-size: clamp(18px, 1.25vw, 25px); border-bottom-width: 4px; }
.in-combo.big .in-keys kbd.s:not(.win, .win *) { font-size: clamp(20px, 1.4vw, 28px); }

/* The keyboard: fifty-eight quarter keys across. A key that is part of the shortcut on show is solid light. */
.in-kb-grid:not(.win, .win *) { display: grid; gap: clamp(22px, 2.6vw, 48px); }
.in-kb-stage:not(.win, .win *) { min-width: 0; display: grid; gap: 14px; align-content: start; }
.in-kb:not(.win, .win *) { container-type: inline-size; padding: clamp(6px, 1vw, 18px); background: #05070a; border: 1.5px solid var(--line-2); }
/* --q is a quarter of a key. The first row, the function keys, is lower than the others. */
.in-kb-keys:not(.win, .win *) { --q: calc(100cqw / 58); display: grid; grid-template-columns: repeat(58, minmax(0, 1fr)); grid-template-rows: calc(var(--q) * 2.6); grid-auto-rows: calc(var(--q) * 4); }
.in-kb i:not(.win, .win *), .in-kb-arrows:not(.win, .win *) { grid-column: span 4; }
.in-kb i:not(.win, .win *) { display: grid; place-items: center; margin: calc(var(--q) * 0.26); border: 1.5px solid var(--line-2); background: #0c1117; color: var(--ink-2); font: 600 calc(var(--q) * 1.45)/1 var(--mono); font-style: normal; transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.in-kb i.w:not(.win, .win *) { font-size: calc(var(--q) * 0.92); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.in-kb i.s:not(.win, .win *) { font-size: calc(var(--q) * 1.6); }
.in-kb i.off:not(.win, .win *) { color: var(--ink-3); border-color: var(--line); background: #080b0f; }
.in-kb i.fn:not(.win, .win *) { height: calc(var(--q) * 2.2); align-self: end; font-size: calc(var(--q) * 0.8); }
/* On a phone the keys are small: the function keys, which are in no shortcut, lose their legends, and the words on keys are set a little larger. */
@media (max-width: 560px) { .in-kb i.fn.off:not(.win, .win *) { font-size: 0; } .in-kb i.w:not(.win, .win *) { font-size: calc(var(--q) * 1.08); letter-spacing: 0; } .in-kb i:not(.win, .win *) { border-width: 1px; }}
.in-kb-arrows:not(.win, .win *) { grid-column: span 12; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.in-kb-arrows i:not(.win, .win *), .in-kb-arrows i.s:not(.win, .win *) { margin: calc(var(--q) * 0.2); font-size: calc(var(--q) * 1.1); }
.in-kb-arrows i[data-key='left']:not(.win, .win *) { grid-area: 2 / 1; }
.in-kb-arrows i[data-key='up']:not(.win, .win *) { grid-area: 1 / 2; }
.in-kb-arrows i[data-key='down']:not(.win, .win *) { grid-area: 2 / 2; }
.in-kb-arrows i[data-key='right']:not(.win, .win *) { grid-area: 2 / 3; }
.in-kb i.on:not(.win, .win *) { background: var(--accent); border-color: #c9f3ff; color: #04070a; transform: translate3d(0, calc(var(--q) * 0.22), 0); }
.in-kb i.held:not(.win, .win *) { background: var(--orange); border-color: #ffd0bb; color: #160700; transform: translate3d(0, calc(var(--q) * 0.22), 0); }
/* What the keyboard is showing. */
.in-kb-now:not(.win, .win *) { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px); min-height: clamp(60px, 4.4vw, 84px); padding: 10px clamp(12px, 1.2vw, 20px); border: 1.5px solid var(--line-2); background: #080b0f; }
.in-kb-now-keys:not(.win, .win *) { flex: none; display: flex; min-width: calc(clamp(40px, 2.7vw, 54px) * 3 + 10px); }
.in-kb-now-cell:not(.win, .win *) { flex: 1; min-width: 0; display: grid; align-items: center; }
.in-kb-now-cell > *:not(.win, .win *) { grid-area: 1 / 1; }
.in-kb-sizer:not(.win, .win *) { visibility: hidden; }
/* Narrow: the keycaps above their words, so the words have the whole width. */
@media (max-width: 699px) {
  .in-kb-now:not(.win, .win *) { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
  .in-kb-now-keys:not(.win, .win *) { min-width: 0; min-height: 40px; }
  .in-kb-now-cell:not(.win, .win *) { flex: none; width: 100%; align-items: start; }}
.in-kb-now-text:not(.win, .win *) { color: var(--ink-2); font-size: clamp(0.95rem, 1.08vw, 1.2rem); line-height: 1.35; }
.in-kb-now-text b:not(.win, .win *) { color: var(--ink); font-weight: 600; }
.in-kb-side:not(.win, .win *) { display: grid; gap: 16px; align-content: start; }
.in-first:not(.win, .win *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.in-first-key:not(.win, .win *) { display: grid; gap: 14px; justify-items: start; align-content: start; width: 100%; height: 100%; padding: clamp(14px, 1.3vw, 22px); text-align: left; --cut: 12px; --fill: #0c1117; --edge: var(--line-2); transition: none; }
.in-first-key:hover:not(.win, .win *), .in-first-key:focus-visible:not(.win, .win *) { --edge: var(--ink); }
.in-first-key[aria-pressed='true']:not(.win, .win *) { --edge: var(--accent); --fill: color-mix(in srgb, var(--accent) 9%, #0c1117); }
.in-first-key[aria-pressed='true'] .in-keys kbd:not(.win, .win *) { background: var(--accent); border-color: #c9f3ff; color: #04070a; }
.in-first-t:not(.win, .win *) { display: grid; gap: 5px; }
.in-first-t b:not(.win, .win *) { font: 650 clamp(1.1rem, 1.4vw, 1.5rem)/1.1 var(--sans); letter-spacing: -0.025em; color: var(--ink); }
.in-first-t span:not(.win, .win *) { font: 500 clamp(11px, 0.6vw, 13px)/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.in-kb-hint:not(.win, .win *) { display: none; align-items: center; gap: 12px; color: var(--ink-2); font-size: clamp(0.92rem, 1vw, 1.08rem); line-height: 1.5; }
.in-kb-hint .lamp:not(.win, .win *) { --tint: var(--orange); }
@media (hover: hover) and (pointer: fine) { .in-kb-hint:not(.win, .win *) { display: flex; }}
@media (min-width: 1100px) { .in-kb-grid:not(.win, .win *) { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }}

/* Every shortcut, by where it works. */
.in-ref:not(.win, .win *) { display: grid; gap: 14px; }
.in-ref-col:not(.win, .win *) { display: contents; }
.in-ref .in-keygroup:not(.win, .win *) { order: var(--o); }
.in-ref .in-jump-screen:not(.win, .win *) { order: 8; min-width: 0; }
.in-keygroup:not(.win, .win *) { padding: clamp(16px, 1.6vw, 28px) clamp(16px, 1.6vw, 28px) clamp(8px, 0.8vw, 14px); --cut: 14px; --fill: color-mix(in srgb, var(--tint) 5%, #0b0f15); --edge: color-mix(in srgb, var(--tint) 62%, transparent); scroll-margin-top: calc(var(--nav) + 16px); }
.in-keygroup h3:not(.win, .win *) { display: flex; align-items: center; gap: 12px; font: 650 clamp(1.15rem, 1.5vw, 1.6rem)/1.1 var(--sans); letter-spacing: -0.028em; }
.in-keygroup h3 small:not(.win, .win *) { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.in-keytable:not(.win, .win *) { width: 100%; margin-top: 12px; border-collapse: collapse; }
.in-keytable tr:not(.win, .win *) { border-top: 1.5px solid color-mix(in srgb, var(--tint) 16%, var(--line)); transition: opacity 0.2s, background-color 0.2s; }
.in-keytable td:not(.win, .win *) { padding: 11px 0; vertical-align: top; text-align: left; }
.in-keytable td:first-child:not(.win, .win *) { width: 1%; padding-right: clamp(14px, 1.6vw, 28px); white-space: nowrap; }
.in-keytable td:last-child:not(.win, .win *) { padding-top: 15px; }
.in-keytable td b:not(.win, .win *) { display: block; font: 600 clamp(0.98rem, 1.06vw, 1.14rem)/1.25 var(--sans); letter-spacing: -0.012em; color: var(--ink); }
.in-keytable td span:not(.in-combo, .in-gesture, .sr):not(.win, .win *) { display: block; margin-top: 4px; color: var(--ink-2); font-size: clamp(0.9rem, 0.96vw, 1.02rem); line-height: 1.42; text-wrap: pretty; }
.in-keytable tr.in-lit .in-keys kbd:not(.win, .win *) { background: var(--accent); border-color: #c9f3ff; color: #04070a; }
/* Wide enough for the widest of them, so the names of all seven tables start on the same line. */
@media (min-width: 700px) { .in-keytable .in-combo:not(.win, .win *) { min-width: 147px; }}
.in-ref.in-holding .in-keytable tr:not(.win, .win *) { opacity: 0.32; }
.in-ref.in-holding .in-keytable tr.in-match:not(.win, .win *) { opacity: 1; }
.in-ref.in-holding .in-keytable tr.in-match .in-keys kbd:not(.win, .win *) { background: var(--orange); border-color: #ffd0bb; color: #160700; }
@media (min-width: 1000px) {
  .in-ref:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 24px); align-items: start; }
  .in-ref-col:not(.win, .win *) { display: grid; gap: clamp(14px, 1.4vw, 24px); align-content: start; min-width: 0; }
  .in-ref .in-keygroup:not(.win, .win *), .in-ref .in-jump-screen:not(.win, .win *) { order: 0; }}
@media (max-width: 479px) {
  .in-keys kbd:not(.win, .win *) { min-width: 28px; height: 28px; padding: 0 6px; font-size: 13px; }
  .in-keytable td:first-child:not(.win, .win *) { padding-right: 12px; }
  /* The four arrow keys as they sit on the keyboard, so their row leaves the words as much room as the others. */
  .in-keytable .in-arrows:not(.win, .win *) { display: inline-grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
  .in-keytable .in-arrows .in-keys:nth-child(1):not(.win, .win *) { grid-area: 2 / 1; }
  .in-keytable .in-arrows .in-keys:nth-child(2):not(.win, .win *) { grid-area: 1 / 2; }
  .in-keytable .in-arrows .in-keys:nth-child(3):not(.win, .win *) { grid-area: 2 / 2; }
  .in-keytable .in-arrows .in-keys:nth-child(4):not(.win, .win *) { grid-area: 2 / 3; }}

/* ---------------------------------------------------------------- privacy */

/* In short: four plates. */
.in-checks-band:not(.win, .win *) { padding-top: clamp(10px, 2svh, 28px); }
.in-checks:not(.win, .win *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.in-check-card:not(.win, .win *) { padding: clamp(18px, 1.7vw, 30px); --cut: 14px; --fill: color-mix(in srgb, var(--tint) 5%, #0b0f15); --edge: color-mix(in srgb, var(--tint) 70%, transparent); }
.in-check-card h2:not(.win, .win *) { display: flex; align-items: center; gap: 13px; font: 650 clamp(1.2rem, 1.55vw, 1.7rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.in-check-card .rule-ic:not(.win, .win *) { width: 38px; height: 38px; font-size: 20px; }
.in-check-card p:not(.win, .win *) { margin-top: 12px; color: var(--ink-2); font-size: clamp(0.95rem, 1.02vw, 1.1rem); line-height: 1.48; text-wrap: pretty; }
@media (min-width: 620px) { .in-checks:not(.win, .win *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (min-width: 1200px) { .in-checks:not(.win, .win *) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }}

/* A small square mark in front of a statement, and the statement on a plate of its own. */
.in-mark:not(.win, .win *) { display: grid; place-items: center; width: 34px; height: 34px; flex: none; font-size: 18px; color: #04070a; background: var(--tint); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.in-tiles:not(.win, .win *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.in-tile:not(.win, .win *) { display: grid; gap: 16px; align-content: start; padding: clamp(18px, 1.7vw, 30px); --cut: 14px; --fill: color-mix(in srgb, var(--tint) 5%, #0b0f15); --edge: color-mix(in srgb, var(--tint) 62%, transparent); }
.in-tile p:not(.win, .win *) { color: var(--ink-2); font-size: clamp(1rem, 1.08vw, 1.18rem); line-height: 1.5; text-wrap: pretty; }
@media (min-width: 700px) {
  .in-tiles:not(.win, .win *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-reads .in-tile:last-child:not(.win, .win *) { grid-column: 1 / -1; }}
@media (min-width: 1200px) {
  .in-tiles:not(.win, .win *) { gap: 14px; }
  .in-reads:not(.win, .win *) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .in-reads .in-tile:not(.win, .win *) { grid-column: span 2; }
  .in-reads .in-tile:nth-child(n + 4):not(.win, .win *) { grid-column: span 3; }
  .in-exports:not(.win, .win *) { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

/* What it connects to, drawn: the app at one end, one trace down the middle, and a line to each place it reaches.
   --rail is where the trace runs, --wire where a line leaves it, both measured from the left and top of a row. */
.in-net:not(.win, .win *) { --net-gap: 22px; --group-gap: clamp(22px, 2.4vw, 40px); --rail: 10px; --lead: 58px; --wire: 44px; display: grid; gap: var(--net-gap); }
.in-net-app:not(.win, .win *) { position: relative; justify-self: start; }
/* From the app to the trace. On a narrow screen the app sits above it. */
.in-net-app:not(.win, .win *)::after { content: ''; position: absolute; left: var(--rail); top: 100%; width: 2px; height: var(--net-gap); background: color-mix(in srgb, var(--tint) 70%, var(--line-2)); }
.in-net-lines:not(.win, .win *) { display: grid; gap: var(--group-gap); min-width: 0; }
.in-net-group:not(.win, .win *) { position: relative; padding-left: var(--lead); }
.in-net-group:not(.win, .win *)::before { content: ''; position: absolute; left: var(--rail); top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--tint) 70%, var(--line-2)); }
.in-net-group.closed:not(.win, .win *)::before { bottom: calc(var(--group-gap) * -1); }
.in-net-group.open:not(.win, .win *)::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, var(--line-2)) 0 7px, transparent 7px 13px); }
.in-net-say:not(.win, .win *) { color: var(--ink); font-size: clamp(1.02rem, 1.15vw, 1.25rem); font-weight: 500; line-height: 1.4; text-wrap: pretty; max-width: 60ch; }
.in-net-group ul:not(.win, .win *) { display: grid; gap: 12px; margin-top: 14px; }
.in-net-line:not(.win, .win *) { position: relative; }
/* The trace stops at the last line it feeds. */
.in-net-group.open .in-net-line:last-child:not(.win, .win *)::before { content: ''; position: absolute; left: calc(var(--rail) - var(--lead) - 2px); top: calc(var(--wire) + 2px); bottom: -2px; width: 6px; background: #080b0f; }
.in-net-wire:not(.win, .win *) { position: absolute; left: calc(var(--rail) - var(--lead) + 2px); top: var(--wire); width: calc(var(--lead) - var(--rail) - 2px); height: 2px; background: color-mix(in srgb, var(--tint) 70%, var(--line-2)); }
.in-net-wire:not(.win, .win *)::after { content: ''; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; background: var(--tint); }
/* The light of a line runs in a track of its own, so it is cut at the ends of the line and nothing else is. */
.in-net-wire em:not(.win, .win *) { position: absolute; left: 0; top: 0; width: 100%; height: 2px; overflow: hidden; }
.in-net-wire em:not(.win, .win *)::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 40%, #fff); transform: translate3d(-101%, 0, 0); }
.in-net-group.closed .in-net-wire em:not(.win, .win *)::after { animation: in-out 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.in-net-group.closed .in-net-line:nth-child(2) .in-net-wire em:not(.win, .win *)::after { animation-delay: 1.2s; }
/* A switch that is open: the line is broken, and the arm stands away from it. Pressed, it closes and the line carries something once. */
.in-net-group.open .in-net-wire:not(.win, .win *) { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 70%, var(--line-2)) 0 12px, transparent 12px calc(100% - 12px), color-mix(in srgb, var(--tint) 70%, var(--line-2)) calc(100% - 12px)); }
.in-net-group.open .in-net-wire i:not(.win, .win *) { position: absolute; left: 9px; top: -2px; width: 6px; height: 6px; background: var(--tint); }
.in-net-group.open .in-net-wire b:not(.win, .win *) { position: absolute; left: 12px; top: 0; width: calc(100% - 26px); height: 2px; background: var(--tint); filter: brightness(1.25); transform-origin: 0 50%; transform: rotate(-32deg); transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); }
.in-net-group.open .in-net-line:not(.win, .win *) { cursor: pointer; }
.in-net-line.in-shut .in-net-wire b:not(.win, .win *) { transform: none; }
.in-net-line.in-shut .in-net-wire em:not(.win, .win *)::after { animation: in-out 1.5s cubic-bezier(0.5, 0, 0.3, 1) 0.18s 1 both; }
.in-net-line.in-shut .in-net-end:not(.win, .win *) { --edge: var(--tint); }
.in-net-end:not(.win, .win *) { padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 26px); --cut: 12px; --fill: #0c1117; --edge: color-mix(in srgb, var(--tint) 62%, transparent); }
.in-net-group.open .in-net-end:not(.win, .win *) { --edge: color-mix(in srgb, var(--tint) 40%, var(--line-2)); }
.in-net-end .silk:not(.win, .win *) { color: var(--ink-2); margin-bottom: 10px; flex-wrap: wrap; row-gap: 6px; }
.in-net-end .silk .in-mark:not(.win, .win *) { width: 26px; height: 26px; font-size: 15px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.in-net-end .silk .silk-r:not(.win, .win *) { color: var(--tint); filter: brightness(1.3); font-weight: 600; white-space: nowrap; }
.in-net-end > p:not(.silk):not(.win, .win *) { color: var(--ink-2); font-size: clamp(0.98rem, 1.06vw, 1.14rem); line-height: 1.5; text-wrap: pretty; max-width: 70ch; }
@media (min-width: 1000px) {
  .in-net:not(.win, .win *) { --net-gap: clamp(34px, 4vw, 80px); --lead: 72px; --node: 176px; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .in-net-app .in-node:not(.win, .win *) { width: clamp(150px, 12vw, 210px); height: var(--node); align-content: center; padding: 0 14px; }
  .in-net-app .in-node img:not(.win, .win *) { width: clamp(64px, 5vw, 88px); height: clamp(64px, 5vw, 88px); }
  .in-net-app .in-node b:not(.win, .win *) { font-size: clamp(16px, 1.1vw, 20px); }
  /* Beside the lines, the app reaches the trace sideways, and the trace starts where they meet. */
  .in-net-app:not(.win, .win *)::after { left: 100%; top: calc(var(--node) / 2 - 1px); width: calc(var(--net-gap) + var(--rail) + 2px); height: 2px; }
  .in-net-group.closed:not(.win, .win *)::before { top: calc(var(--node) / 2 - 1px); }}

/* Permissions: a table that reads like a pinout, and a card for each row on a phone. */
.in-pinout:not(.win, .win *) { border: 1.5px solid var(--line-2); background: #05070a; }
.in-table:not(.win, .win *) { width: 100%; border-collapse: collapse; text-align: left; }
.in-table thead th:not(.win, .win *) { padding: 13px clamp(14px, 1.5vw, 24px); border-bottom: 1.5px solid var(--line-2); font: 500 clamp(11px, 0.6vw, 13.5px)/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.in-table tbody tr:not(.win, .win *) { border-top: 1.5px solid var(--line); }
.in-table tbody tr:first-child:not(.win, .win *) { border-top: 0; }
.in-table tbody th:not(.win, .win *), .in-table td:not(.win, .win *) { padding: clamp(13px, 1.2vw, 20px) clamp(14px, 1.5vw, 24px); vertical-align: top; font-size: clamp(0.98rem, 1.05vw, 1.14rem); line-height: 1.46; }
.in-table tbody th:not(.win, .win *) { width: 24%; font: 600 clamp(1rem, 1.12vw, 1.22rem)/1.25 var(--sans); letter-spacing: -0.015em; color: var(--ink); }
.in-table td:not(.win, .win *) { color: var(--ink-2); }
.in-table td:last-child:not(.win, .win *) { width: 38%; }
.in-pin:not(.win, .win *) { display: inline-grid; place-items: center; width: 30px; height: 22px; margin-right: 12px; vertical-align: 1px; border: 1.5px solid var(--tint); font: 600 11px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink); }
.in-table tr.in-none th:not(.win, .win *) { color: var(--ink); }
.in-table tr.in-none .in-pin:not(.win, .win *) { border-color: var(--good); background: var(--good); color: #04070a; }
.in-table tr.in-none:not(.win, .win *) { background: color-mix(in srgb, var(--good) 7%, transparent); }
.in-pinout + .in-screen:not(.win, .win *) { margin-top: clamp(22px, 2.4vw, 40px); }
@media (max-width: 699px) {
  .in-pinout:not(.win, .win *) { border: 0; background: none; }
  .in-table:not(.win, .win *), .in-table tbody:not(.win, .win *), .in-table tr:not(.win, .win *), .in-table th:not(.win, .win *), .in-table td:not(.win, .win *) { display: block; width: auto; }
  .in-table thead:not(.win, .win *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .in-table tbody:not(.win, .win *) { display: grid; gap: 10px; }
  .in-table tbody tr:not(.win, .win *) { border: 1.5px solid var(--line-2); background: #05070a; padding: 4px 0 8px; }
  .in-table tbody tr:first-child:not(.win, .win *) { border-top: 1.5px solid var(--line-2); }
  .in-table tbody th:not(.win, .win *), .in-table td:not(.win, .win *) { width: auto; padding: 10px 16px 4px; }
  .in-table td:last-child:not(.win, .win *) { width: auto; }
  .in-table td:not(.win, .win *)::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .in-table tr.in-none:not(.win, .win *) { background: color-mix(in srgb, var(--good) 8%, #05070a); border-color: color-mix(in srgb, var(--good) 60%, var(--line-2)); }}

/* The fences around cleanup. */
.in-fences:not(.win, .win *) { display: grid; gap: 10px; }
.in-fences li:not(.win, .win *) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.5vw, 24px); align-items: center; padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.6vw, 26px); background: #05070a; border-left: 3px solid var(--tint); }
.in-fence-n:not(.win, .win *) { font: 600 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--tint); filter: brightness(1.3); }
.in-fences p:not(.win, .win *) { color: var(--ink); font-size: clamp(1rem, 1.12vw, 1.22rem); line-height: 1.46; text-wrap: pretty; }
@media (min-width: 1000px) { .in-fences:not(.win, .win *) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-fences li:last-child:not(.win, .win *) { grid-column: 1 / -1; }}
}
/* site-pillars.css */
@layer page {
@keyframes pl-flow { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, var(--pl-len, 0px), 0); } }
@keyframes pl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pl-lit { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes pl-pop { from { transform: scale(0.4); } to { transform: none; } }
@keyframes pl-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pl-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pl-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes pl-chip { 0% { transform: scale(0.3); } 55% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes pl-bump { 0% { transform: none; } 35% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes pl-lamp { 0% { opacity: 0.2; } 30% { opacity: 1; } 45% { opacity: 0.2; } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes pl-lift { 0% { opacity: 0; transform: perspective(2200px) translate3d(0, 6%, 0) rotateX(34deg) scale(0.94); } 22% { opacity: 1; } 100% { opacity: 1; transform: perspective(2200px) translate3d(0, 0, 0) rotateX(0deg) scale(1); } }
/* The feature pages (Monitor, Investigate, Files & Apps, This Mac): one district of the board each.

   .pl-open     what the opening adds to the station's plate: four readouts and the jumps to the modules
   .pl-board    the district: the bus and the modules mounted on it
   .pl-bus      the bus as navigation: a column of stops beside the modules, or a strip under the bar on a small screen
   .pl-line     the bus as a trace, running down the page past every module, lit as far as the module being read
   .pl-mod      a module: a plate with its outline, a rail down its left side, its words, and the app's screen
   .pl-screen   the screen. On a desktop the whole window with numbered rings. On a small screen a lens that stays in view
                and moves from part to part while the points are read (client/60-pillars.js)

   Three layouts of a module: stacked with the lens (below 1100px), words above the screen (a tall or narrow desktop window),
   words beside the screen (a wide desktop window). */

/* ---------------------------------------------------------------- the opening */

.pl-open:not(.win, .win *) { container-type: inline-size; margin-top: clamp(20px, 2vw, 36px); }
.pl-readouts:not(.win, .win *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 4cqw, 26px) clamp(14px, 4cqw, 30px); }
.pl-readouts > div:not(.win, .win *) { position: relative; min-width: 0; padding-top: 12px; border-top: 1.5px solid var(--line-2); }
.pl-readouts > div:not(.win, .win *)::before { content: ''; position: absolute; left: 0; top: -1.5px; width: 26px; height: 3px; background: var(--tint); }
.pl-readouts dt:not(.win, .win *) { font: 500 clamp(11px, 1.9cqw, 15px)/1.25 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pl-num:not(.win, .win *) { margin-top: 8px; font: 600 clamp(24px, 8.1cqw, 58px)/1 var(--mono); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-num small:not(.win, .win *) { margin-left: 0.3em; font: 500 0.42em/1 var(--mono); letter-spacing: 0.02em; color: var(--tint); filter: brightness(1.3); }
.pl-note:not(.win, .win *) { margin-top: 8px; color: var(--ink-2); font-size: clamp(0.875rem, 2.6cqw, 1.3rem); line-height: 1.38; text-wrap: pretty; }
@container (min-width: 860px) { .pl-readouts:not(.win, .win *) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pl-num:not(.win, .win *) { font-size: clamp(30px, 4.3cqw, 58px); }}

.pl-jumps:not(.win, .win *) { margin-top: clamp(20px, 5cqw, 34px); }
.pl-jumps ol:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-jumps a:not(.win, .win *) { display: flex; align-items: center; gap: 0.7em; min-height: clamp(44px, 6.6cqw, 54px); padding: 0 0.95em 0 0.8em; border: 1.5px solid var(--line-2); background: #06090c;
  font: 600 clamp(13.5px, 2.1cqw, 17px)/1.1 var(--sans); letter-spacing: -0.005em; color: var(--ink); transition: border-color 0.18s, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pl-jumps a b:not(.win, .win *) { font: 600 0.8em/1 var(--mono); letter-spacing: 0.06em; color: var(--tint); filter: brightness(1.3); }
.pl-jumps a:hover:not(.win, .win *), .pl-jumps a:focus-visible:not(.win, .win *) { border-color: var(--ink); transform: translateY(-2px); }

/* ---------------------------------------------------------------- the district */

.pl-board:not(.win, .win *) { --tint: var(--accent); --pl-strip: 46px; --pl-rail: 34px; --pl-pt: 20px; --pl-pr: 14px; --pl-pb: 22px; --pl-gap: 16px; --pl-sy: calc(var(--pl-pt) + 8px);
  --pl-chip: clamp(24px, 1.34vw, 32px); --pl-ct: 13px; --pl-pg: 0px;
  --pl-hi: color-mix(in srgb, var(--tint) 66%, #fff); position: relative; padding-right: var(--gut); }

/* The bus as navigation. Below 1100px: a strip of stops held under the bar. */
.pl-bus:not(.win, .win *) { position: sticky; top: var(--nav); z-index: 30; height: var(--pl-strip); margin-right: calc(var(--gut) * -1); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  background: #05070a; border-bottom: 1.5px solid var(--line-2); }
.pl-bus:not(.win, .win *)::-webkit-scrollbar { display: none; }
.pl-ladder:not(.win, .win *) { position: relative; display: flex; align-items: stretch; width: max-content; min-width: 100%; height: 100%; padding: 0 calc(var(--gut) - 10px); }
.pl-ladder li:not(.win, .win *) { display: flex; }
.pl-ladder a:not(.win, .win *) { position: relative; display: flex; align-items: center; gap: 8px; min-width: 44px; padding: 0 10px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color 0.2s; }
.pl-ladder a b:not(.win, .win *) { font-weight: 600; color: var(--ink-2); transition: color 0.2s; }
.pl-ladder a:not(.win, .win *)::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--tint); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pl-ladder a:hover:not(.win, .win *), .pl-ladder a:focus-visible:not(.win, .win *), .pl-ladder a[aria-current]:not(.win, .win *) { color: var(--ink); }
.pl-ladder a[aria-current] b:not(.win, .win *) { color: var(--tint); filter: brightness(1.35); }
.pl-ladder a[aria-current]:not(.win, .win *)::after { transform: none; }
.pl-ladder a:focus-visible:not(.win, .win *) { outline-offset: -3px; }
.pl-now:not(.win, .win *) { display: none; }

/* The modules, and the bus as a trace beside them. --pl-bx is where the trace runs, measured from the modules' left edge. */
.pl-mods:not(.win, .win *) { --pl-bx: calc(var(--gut) / -2); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-left: var(--gut); padding: 24px 0 54px; min-width: 0; }
.pl-line:not(.win, .win *) { position: absolute; left: var(--pl-bx); top: 0; bottom: 34px; width: 2px; margin-left: -1px; background: var(--line-2); pointer-events: none; }
.pl-lit:not(.win, .win *) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--pl-hi); transform-origin: 50% 0; transform: scaleY(var(--pl-p, 0)); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pl-flow:not(.win, .win *) { position: absolute; left: -1px; top: 0; width: 4px; height: 64px; background: linear-gradient(transparent, var(--tint) 70%, #fff); opacity: 0; }
html.pl-go .pl-mods.pl-run .pl-flow:not(.win, .win *) { animation: pl-flow 3.6s cubic-bezier(0.5, 0, 0.6, 1) infinite; }
/* Where the bus starts: a pad, and in a desktop window the label printed beside it. */
.pl-line:not(.win, .win *)::before { content: ''; position: absolute; left: -4px; top: 0; width: 10px; height: 10px; background: #05070a; box-shadow: 0 0 0 2px var(--line-2); }
.pl-source:not(.win, .win *) { display: none; }
/* Where the bus ends: the ground symbol. */
.pl-ground:not(.win, .win *) { position: absolute; left: var(--pl-bx); bottom: 16px; width: 14px; height: 16px; margin-left: -7px; pointer-events: none;
  background: linear-gradient(var(--line-2), var(--line-2)) 50% 0 / 100% 2px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 50% 7px / 64% 2px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 50% 14px / 28% 2px no-repeat; }

/* ---------------------------------------------------------------- a module */

.pl-mod:not(.win, .win *) { --cut: 18px; --fill: #080b0f; --edge: color-mix(in srgb, var(--tint) 42%, var(--line-2)); --pl-hi: color-mix(in srgb, var(--tint) 66%, #fff);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "screen" "more"; gap: var(--pl-gap);
  padding: var(--pl-pt) var(--pl-pr) var(--pl-pb) var(--pl-rail); min-width: 0; scroll-margin-top: calc(var(--nav) + var(--pl-strip) + 10px); }

/* Its stop on the bus, and the trace from the stop to the module's own rail. */
.pl-stop:not(.win, .win *) { position: absolute; z-index: 2; left: var(--pl-bx); top: var(--pl-sy); width: 0; height: 0; }
.pl-stop i:not(.win, .win *) { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--tint); box-shadow: 0 0 0 2.5px #05070a, 0 0 0 4px var(--tint); }
.pl-stop:not(.win, .win *)::after { content: ''; position: absolute; left: 0; top: -1px; width: calc(var(--pl-rail) / 2 - var(--pl-bx)); height: 2px; background: var(--tint); transform-origin: 0 50%; }

/* The outline. Until a module is powered it is its footprint, printed on the board: six strokes that follow the plate's cut
   corners. When the module powers up, light runs round them, and then the plate's own edge takes over. */
.pl-edge:not(.win, .win *) { display: none; position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.pl-edge i:not(.win, .win *) { position: absolute; background: var(--line-2); }
.pl-edge i:not(.win, .win *)::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--pl-hi); transform: scale(0); transform-origin: 0 0; }
.pl-edge i:nth-child(1):not(.win, .win *) { left: 0; top: var(--cut); width: calc(var(--cut) * 1.4142); height: 2px; transform-origin: 0 50%; transform: rotate(-45deg); }
.pl-edge i:nth-child(2):not(.win, .win *) { left: var(--cut); right: 0; top: 0; height: 2px; }
.pl-edge i:nth-child(3):not(.win, .win *) { right: 0; top: 0; bottom: var(--cut); width: 2px; }
.pl-edge i:nth-child(4):not(.win, .win *) { left: 0; top: var(--cut); bottom: 0; width: 2px; }
.pl-edge i:nth-child(5):not(.win, .win *) { left: 0; right: var(--cut); bottom: 0; height: 2px; }
.pl-edge i:nth-child(6):not(.win, .win *) { left: calc(100% - var(--cut)); top: 100%; width: calc(var(--cut) * 1.4142); height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: rotate(-45deg); }

/* The words. The rail runs down the left of the module, from the stop's trace to the last point. */
.pl-head:not(.win, .win *) { position: relative; grid-area: head; min-width: 0; }
.pl-head:not(.win, .win *)::before, .pl-more:not(.win, .win *)::before, .pl-points li:not(.win, .win *)::before { content: ''; position: absolute; left: calc(var(--pl-rail) / -2 - 1px); width: 2px; background: var(--tint); transform-origin: 50% 0; }
.pl-head:not(.win, .win *)::before { top: 8px; bottom: calc(var(--pl-gap) * -1); }
/* From the head to the first point, then from each point to the next, and from the last one to the guide the module leads to. */
.pl-more:not(.win, .win *)::before { top: calc(var(--pl-gap) * -1); height: calc(var(--pl-gap) + var(--pl-ct) + var(--pl-chip) / 2); }
.pl-points li:not(.win, .win *)::before { top: calc(var(--pl-ct) + var(--pl-chip) / 2); bottom: calc((var(--pl-pg) + var(--pl-ct) + var(--pl-chip) / 2) * -1); }
.pl-points li:last-child:not(.win, .win *)::before { display: none; }
.pl-points.pl-led li:last-child:not(.win, .win *)::before { display: block; bottom: -40px; }
.pl-head .silk:not(.win, .win *) { margin-bottom: 14px; color: var(--ink-2); }
.pl-head .silk .silk-r:not(.win, .win *) { color: var(--ink-3); }
.pl-head h2:not(.win, .win *) { font: 650 clamp(1.62rem, 6.6vw, 2.5rem)/1.06 var(--sans); letter-spacing: -0.032em; text-wrap: balance; }
.pl-lead:not(.win, .win *) { margin-top: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

.pl-more:not(.win, .win *) { position: relative; grid-area: more; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pl-bare .pl-more:empty:not(.win, .win *) { display: none; }
/* A module without points is its words and its screen. One with a second picture has a row for it. */
.pl-bare:not(.win, .win *) { grid-template-areas: "head" "screen"; }
.pl-two:not(.win, .win *) { grid-template-areas: "head" "screen" "more" "under"; }
.pl-points:not(.win, .win *) { display: flex; flex-direction: column; gap: var(--pl-pg); }
.pl-points li:not(.win, .win *) { position: relative; min-height: var(--pl-chip); color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.pl-points li > i:not(.win, .win *) { position: absolute; left: calc(var(--pl-rail) / -2 - var(--pl-chip) / 2); top: var(--pl-ct); display: grid; place-items: center; width: var(--pl-chip); height: var(--pl-chip); font: 600 calc(var(--pl-chip) * 0.5)/1 var(--mono); font-style: normal; color: var(--pl-hi);
  background: var(--tint); clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%); transition: background-color 0.25s, color 0.25s; }
/* A point the screen shows has a solid number: the same number is on the screen. One it does not show has a hollow one. */
.pl-points li > i:not(.win, .win *)::before { content: ''; position: absolute; z-index: -1; inset: 1.5px; background: #080b0f; clip-path: polygon(24% 0, 100% 0, 100% 76%, 76% 100%, 0 100%, 0 24%); }
.pl-points li.pl-seen > i:not(.win, .win *) { color: #04070a; background: var(--pl-hi); }
.pl-points li.pl-seen > i:not(.win, .win *)::before { display: none; }
.pl-guide-link:not(.win, .win *) { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pl-guide-link:not(.win, .win *)::before { content: ''; position: absolute; left: calc(var(--pl-rail) / -2 - 5px); top: 17px; width: 10px; height: 10px; background: #080b0f; box-shadow: 0 0 0 2px var(--tint); }
.pl-guide-link .go:not(.win, .win *) { min-height: 44px; font-size: clamp(14px, 0.84vw, 19px); }
.pl-guide-meta:not(.win, .win *) { font: 500 clamp(11px, 0.6vw, 14px)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* The screen. */
.pl-screen:not(.win, .win *) { grid-area: screen; min-width: 0; --win-radius: 10px; --win-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tint) 75%, #fff 10%), 0 0 0 1px rgba(0, 0, 0, 0.6) inset; }
.pl-cap:not(.win, .win *) { position: relative; margin-bottom: 12px; color: var(--ink-2); min-width: 0; }
.pl-cap .lamp:not(.win, .win *) { --tint: var(--pl-hi); }
.pl-cap .silk-r:not(.win, .win *) { display: flex; align-items: center; gap: 0.9em; min-width: 0; }
.pl-cap-name:not(.win, .win *) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-step:not(.win, .win *) { display: none; }
.pl-live:not(.win, .win *) { padding: 3px 6px; border: 1.5px solid var(--pl-hi); color: var(--pl-hi); font-weight: 600; letter-spacing: 0.12em; }
.pl-under:not(.win, .win *) { grid-area: under; min-width: 0; }
.pl-under figcaption:not(.win, .win *) { margin-top: 12px; font: 500 clamp(11.5px, 0.62vw, 15px)/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); opacity: 1; }

/* Three closer looks on one module. */
.pl-trio-row:not(.win, .win *) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pl-trio-cell:not(.win, .win *) { min-width: 0; display: grid; align-content: start; gap: 9px; }
.pl-trio-cell.pl-wide:not(.win, .win *) { grid-column: 1 / -1; }
.pl-trio-cell .shot:not(.win, .win *) { outline: 1.5px solid color-mix(in srgb, var(--tint) 60%, var(--line-2)); --shot-r: 0px; }
.pl-trio-cell .shot-frame:not(.win, .win *) { border-radius: 0; }
.pl-trio-name:not(.win, .win *) { color: var(--ink-2); }
/* Below 700px the third look shows the left of its card at a size that can be read, and is as tall as the card.
   (client/20-shots.js frames a closer look anew when a window crosses 700px, and frames one narrower than 520px this way.) */
@media (max-width: 699px) { .pl-trio-cell.pl-wide:not(.win, .win *) { max-width: 519px; } .pl-trio-cell.pl-wide .shot-frame:not(.win, .win *) { aspect-ratio: 1.63 / 1; } .pl-trio .pl-cap .silk-r:not(.win, .win *) { display: none; }}

/* ---------------------------------------------------------------- below 1100px: the screen is read through a lens

   The window is laid out once, large enough to read, and stays in view under the strip while the points pass below it.
   The script moves it with one transform so that the part a point talks about fills the lens. */

@media (max-width: 1099px) {
  .pl-points li:not(.win, .win *) { padding: 14px 0 16px; border-top: 1.5px solid var(--line); color: var(--ink-3); transition: color 0.3s; }
  .pl-points li:last-child:not(.win, .win *) { border-bottom: 1.5px solid var(--line); }
  .pl-points li:not(.win, .win *)::before { bottom: calc((var(--pl-ct) + var(--pl-chip) / 2) * -1 - 1.5px); }
  html:not(.pl-lens) .pl-points li:not(.win, .win *), .pl-points li.pl-at:not(.win, .win *) { color: var(--ink-2); }
  html.pl-lens .pl-points li:not(.pl-at) > i:not(.win, .win *) { background: color-mix(in srgb, var(--tint) 50%, #0b0f15); color: color-mix(in srgb, var(--pl-hi) 70%, #0b0f15); }
  html.pl-lens .pl-points li.pl-seen:not(.pl-at) > i:not(.win, .win *) { color: #04070a; }
  html.pl-lens .pl-points li.pl-at > i:not(.win, .win *) { background: #fff; color: #04070a; }
  html.pl-lens .pl-points li.pl-at:not(.pl-seen) > i:not(.win, .win *) { background: var(--pl-hi); }
  html.pl-lens .pl-points li.pl-at:not(.pl-seen) > i:not(.win, .win *)::before { display: block; }

  html.js .pl-screen[data-pl-view]:not(.win, .win *) { --pl-s0: 0.92; --win-radius: 0px; --win-shadow: none; position: sticky; top: calc(var(--nav) + var(--pl-strip)); z-index: 4; margin: 0 calc(var(--pl-pr) * -1 + 1.5px) 0 calc(var(--pl-rail) * -1 + 1.5px); background: #05070a; }
  html.js .pl-screen[data-pl-view] .pl-cap:not(.win, .win *) { margin: 0; height: 36px; padding: 0 12px; background: #0b1016; border-top: 1.5px solid var(--edge); border-bottom: 1.5px solid var(--edge); gap: 0.8em; }
  /* Held under the strip, the caption is the lamp, the screen's name, and which of the points the lens is on. */
  html.js .pl-screen[data-pl-view] .pl-cap-long:not(.win, .win *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js .pl-screen[data-pl-view] .pl-cap .silk-r:not(.win, .win *) { flex: 1; margin-left: 0; text-align: left; }
  html.js .pl-screen[data-pl-view] .pl-cap-name:not(.win, .win *) { color: var(--ink); }
  html.js .pl-screen[data-pl-view] .pl-step:not(.win, .win *) { display: block; margin-left: auto; min-width: 2.6em; text-align: right; font-weight: 600; color: var(--pl-hi); font-variant-numeric: tabular-nums; }
  html.js .pl-screen[data-pl-view] .pl-step:empty:not(.win, .win *) { display: none; }
  html.js .pl-screen[data-pl-view] .shot-frame:not(.win, .win *) { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 44vh; max-height: 44svh; width: 100%; border-radius: 0; background: #05070a; border-bottom: 1.5px solid var(--edge); touch-action: pan-y; }
  html.js .pl-screen[data-pl-view] .shot-pan:not(.win, .win *) { position: absolute; left: 0; top: 0; width: calc(var(--pl-dw) * var(--pl-s0) * 1px); margin: 0; visibility: visible; transform-origin: 0 0;
    transform: translate(var(--pl-x, 0px), var(--pl-y, 0px)) scale(var(--pl-k, 1)); }
  html.pl-lens .pl-screen[data-pl-view] .shot-pan:not(.win, .win *) { transition: transform 0.85s cubic-bezier(0.3, 0, 0.15, 1); }
  html.pl-lens .pl-screen[data-pl-view].pl-drag .shot-pan:not(.win, .win *) { transition: none; }}
/* A second picture, on a phone: from edge to edge of the module, at a size that can be read, pulled sideways for the rest. */
@media (max-width: 760px) {
  .pl-under:not(.win, .win *) { margin: 0 calc(var(--pl-pr) * -1 + 1.5px) 0 calc(var(--pl-rail) * -1 + 1.5px); }
  .pl-under .shot-frame:not(.win, .win *) { padding: 14px 0 16px; border-radius: 0; background: #05070a; border-top: 1.5px solid var(--edge); border-bottom: 1.5px solid var(--edge); }
  .pl-under figcaption:not(.win, .win *) { padding: 0 var(--pl-pr) 0 calc(var(--pl-rail) - 1.5px); }}
@media (min-width: 600px) and (max-width: 1099px) {
  .pl-board:not(.win, .win *) { --pl-rail: 44px; --pl-pt: 26px; --pl-pr: 22px; --pl-pb: 28px; --pl-gap: 20px; }
  html.js .pl-screen[data-pl-view]:not(.win, .win *) { --pl-s0: 1; }
  html.js .pl-screen[data-pl-view] .shot-frame:not(.win, .win *) { aspect-ratio: 16 / 9; }
  .pl-mods:not(.win, .win *) { gap: 40px; }}
/* A window too short to hold a screen in view above its points: the lens is not held, the points move it when they are tapped. */
@media (max-width: 1099px) and (max-height: 560px) {
  html.js .pl-screen[data-pl-view]:not(.win, .win *) { position: relative; top: auto; }
  .pl-bus:not(.win, .win *) { position: relative; top: auto; }}

/* ---------------------------------------------------------------- from 1100px: a desktop window. Words above the screen. */

@media (min-width: 1100px) {
  /* Tight in a laptop window, so the app's screen is never shown smaller than it can be read; roomy in a large one. */
  .pl-board:not(.win, .win *) { --pl-busw: clamp(44px, 4.4vw - 20px, 76px); --pl-rail: clamp(32px, 4.2vw - 26px, 60px); --pl-pt: clamp(22px, 2.1vw, 46px); --pl-pr: clamp(16px, 3.6vw - 32px, 46px); --pl-pb: clamp(22px, 2.1vw, 46px); --pl-gap: clamp(18px, 1.7vw, 34px);
    --pl-sy: calc(var(--pl-pt) + 9px); --pl-ct: 0.1em; --pl-pg: clamp(14px, 1.2vw, 22px); display: grid; grid-template-columns: var(--pl-busw) minmax(0, 1fr); max-width: 2520px; margin: 0 auto; }

  .pl-bus:not(.win, .win *) { position: relative; top: auto; z-index: 3; height: auto; margin: 0; overflow: visible; background: none; border: 0; }
  .pl-ladder:not(.win, .win *) { --pl-h: 42px; position: sticky; top: max(calc(var(--nav) + 16px), calc(50vh - var(--pl-n) * var(--pl-h) / 2)); display: block; width: auto; min-width: 0; height: auto; margin: clamp(20px, 4vh, 56px) 5px 0; padding: 0; background: #05070a; box-shadow: 0 0 0 1.5px var(--line-2); }
  .pl-ladder li:not(.win, .win *) { display: block; }
  .pl-ladder a:not(.win, .win *) { justify-content: center; height: var(--pl-h); min-width: 0; padding: 0; }
  .pl-ladder a:not(.win, .win *)::after { display: none; }
  .pl-ladder a b:not(.win, .win *) { font-size: clamp(11px, 0.62vw, 13.5px); }
  .pl-ladder li + li a:not(.win, .win *) { border-top: 1.5px solid var(--line); }
  /* The name of a stop, on a flag beside it. */
  .pl-ladder a span:not(.win, .win *) { position: absolute; z-index: 2; left: calc(100% + 9px); top: 50%; padding: 7px 9px; border: 1.5px solid var(--line-2); background: #05070a; color: var(--ink); opacity: 0; transform: translate3d(-6px, -50%, 0); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
  .pl-ladder a:hover span:not(.win, .win *), .pl-ladder a:focus-visible span:not(.win, .win *) { opacity: 1; transform: translate3d(0, -50%, 0); }
  .pl-ladder a[aria-current]:not(.win, .win *) { background: color-mix(in srgb, var(--tint) 16%, #05070a); }
  .pl-now:not(.win, .win *) { display: block; position: absolute; left: 0; top: 0; width: 3px; height: var(--pl-h); background: var(--pl-hi); transform: translate3d(0, calc(var(--pl-at, 0) * var(--pl-h)), 0); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }

  .pl-mods:not(.win, .win *) { --pl-bx: calc(var(--pl-busw) / -2); margin-left: 0; gap: clamp(34px, 6vh, 88px); padding: 44px 0 clamp(60px, 9vh, 120px); }
  .pl-source:not(.win, .win *) { display: flex; position: absolute; left: 0; top: -7px; padding: 5px 9px; background: #05070a; box-shadow: 0 0 0 1.5px var(--line-2); color: var(--ink); }
  .pl-source:not(.win, .win *)::before { content: ''; position: absolute; left: calc(var(--pl-bx) + 9px); top: 50%; width: calc(var(--pl-bx) * -1 - 10px); height: 2px; margin-top: -1px; background: var(--line-2); }
  .pl-source > span:last-child:not(.win, .win *) { color: var(--ink-2); }
  .pl-line:not(.win, .win *) { bottom: 40px; }
  .pl-ground:not(.win, .win *) { bottom: 22px; width: 22px; margin-left: -11px; }
  .pl-stop i:not(.win, .win *) { left: -6px; top: -6px; width: 12px; height: 12px; box-shadow: 0 0 0 3px #05070a, 0 0 0 4.5px var(--tint); }

  .pl-mod:not(.win, .win *) { --cut: clamp(20px, 2.2vw, 40px); grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); grid-template-areas: "head more" "screen screen"; column-gap: calc(var(--pl-rail) + 6px); row-gap: var(--pl-gap);
    scroll-margin-top: calc(var(--nav) + 14px); }
  .pl-two:not(.win, .win *) { grid-template-areas: "head more" "screen screen" "under under"; }
  .pl-bare:not(.win, .win *) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "screen"; }
  .pl-head h2:not(.win, .win *), .pl-lead:not(.win, .win *) { max-width: 46rem; }
  /* The rail goes on down to the lamp of the screen it lights. */
  .pl-head:not(.win, .win *)::before { bottom: calc((var(--pl-gap) + 9px) * -1); }
  .pl-cap:not(.win, .win *)::before { content: ''; position: absolute; right: calc(100% + 6px); top: 50%; width: calc(var(--pl-rail) / 2 - 6px); height: 2px; margin-top: -1px; background: var(--tint); }
  .pl-head h2:not(.win, .win *) { font-size: clamp(1.9rem, 2.8vw, 3.3rem); }
  .pl-lead:not(.win, .win *) { margin-top: clamp(12px, 1.1vw, 22px); font-size: clamp(1rem, 1.12vw, 1.3rem); }
  /* The label line of the module runs on into the points beside it: a trace from "1 of 7" down to the first number. */
  .pl-more:not(.win, .win *) { --pl-mt: calc(clamp(11.5px, 0.62vw, 15px) * 1.3 + 14px); justify-content: space-between; padding-top: var(--pl-mt); }
  .pl-more:not(.win, .win *)::before { left: calc((var(--pl-rail) + 6px) * -1 + 10px); top: calc(clamp(11.5px, 0.62vw, 15px) * 0.65 - 1px); width: calc(var(--pl-rail) / 2 - 3px); height: calc(var(--pl-mt) - clamp(11.5px, 0.62vw, 15px) * 0.65 + 4px);
    background: none; border: solid var(--tint); border-width: 2px 2px 0 0; transform-origin: 0 0; }
  .pl-points li:not(.win, .win *) { font-size: clamp(0.98rem, 1.06vw, 1.24rem); transition: color 0.2s; }
  .pl-points li[data-hot]:not(.win, .win *) { color: var(--ink); }
  .pl-mod[data-pl-hot] .pl-points li.pl-seen:not([data-hot]) > i:not(.win, .win *) { background: color-mix(in srgb, var(--tint) 55%, #0b0f15); }
  .pl-points li.pl-seen[data-hot] > i:not(.win, .win *) { background: #fff; }

  /* The whole window, as large as the module allows. --pl-fit keeps it from being more than a fifth taller than what the
     window of the browser can show at once, but it is never so small that the app cannot be read (0.7 of its real size). */
  .pl-screen:not(.win, .win *), .pl-under:not(.win, .win *) { --pl-fit: calc((100vh - var(--nav) - 46px) * var(--pl-shape) * 1.2); }
  @supports (height: 100svh) { .pl-screen:not(.win, .win *), .pl-under:not(.win, .win *) { --pl-fit: calc((100svh - var(--nav) - 46px) * var(--pl-shape) * 1.2); }}
  .pl-screen:not(.win, .win *) { width: min(100%, max(calc(var(--pl-dw) * 0.7px), var(--pl-fit))); }
  .pl-screen.pl-trio:not(.win, .win *) { width: min(100%, 1760px); }
  /* A second picture is drawn at the scale of the screen above it, with its caption beside it on a short trace. */
  .pl-under:not(.win, .win *) { width: min(100%, max(calc(var(--pl-dw) * 0.7px), var(--pl-fit))); }
  .pl-under .shot:not(.win, .win *) { display: grid; grid-template-columns: calc(var(--pl-uw) / var(--pl-dw) * 100%) minmax(0, 1fr); align-items: center; column-gap: 44px; }
  .pl-under figcaption:not(.win, .win *) { position: relative; margin: 0; max-width: 30ch; }
  .pl-under figcaption:not(.win, .win *)::before { content: ''; position: absolute; right: calc(100% + 10px); top: 50%; width: 24px; height: 2px; margin-top: -1px; background: var(--tint); }
  /* Three in a row. The third is never narrower than 520px, the width at which its whole card is shown. */
  .pl-trio-row:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(520px, 2.2fr); gap: clamp(12px, 1.2vw, 24px); }
  .pl-trio-cell.pl-wide:not(.win, .win *) { grid-column: auto; }

  /* A picture that is not a whole window sits beside the words at any desktop width. */
  .pl-slim:not(.win, .win *) { grid-template-columns: minmax(0, 1fr) minmax(0, min(56%, calc(var(--pl-nat, 760) * 1.25px))); grid-template-rows: auto 1fr; grid-template-areas: "head screen" "more screen"; }
  .pl-slim .pl-head:not(.win, .win *)::before { bottom: calc(var(--pl-gap) * -1); }
  .pl-slim .pl-cap:not(.win, .win *)::before { width: calc(var(--pl-rail) + 6px - 12px); }
  .pl-slim .pl-more:not(.win, .win *) { padding-top: 0; }
  .pl-slim .pl-more:not(.win, .win *)::before { left: calc(var(--pl-rail) / -2 - 1px); top: calc(var(--pl-gap) * -1); width: 2px; height: calc(var(--pl-gap) + var(--pl-ct) + var(--pl-chip) / 2); background: var(--tint); border: 0; }
  .pl-slim .pl-points:not(.win, .win *) { flex: 1; }
  .pl-slim .pl-points li:not(.win, .win *) { flex: 1 1 auto; }
  .pl-slim .pl-screen:not(.win, .win *) { width: min(100%, var(--pl-fit)); justify-self: end; }}

/* ---------------------------------------------------------------- a wide desktop window: words beside the screen */

@media (min-width: 1440px) and (min-aspect-ratio: 4 / 3) {
  .pl-board:not(.win, .win *) { --pl-col: clamp(272px, 21.4vw - 26px, 540px); --pl-cg: clamp(18px, 3.6vw - 32px, 46px); --pl-su: clamp(0.86px, 0.047vw, 1.2px); }
  .pl-mod:not(.win, .win *) { grid-template-columns: var(--pl-col) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head screen" "more screen"; column-gap: var(--pl-cg); }
  .pl-two:not(.win, .win *) { grid-template-rows: auto 1fr auto; grid-template-areas: "head screen" "more screen" "more under"; }
  .pl-bare:not(.win, .win *) { grid-template-columns: var(--pl-col) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head screen"; }
  .pl-head:not(.win, .win *)::before { bottom: calc(var(--pl-gap) * -1); }
  /* One line of labelling across the top of the module: the words' label, a trace, the lamp, the screen's name. */
  .pl-cap:not(.win, .win *)::before, .pl-slim .pl-cap:not(.win, .win *)::before { width: calc(var(--pl-cg) - 12px); }
  .pl-head h2:not(.win, .win *) { font-size: clamp(1.7rem, 2.3vw, 3.5rem); }
  .pl-lead:not(.win, .win *) { font-size: clamp(0.98rem, 1.05vw, 1.5rem); }
  .pl-more:not(.win, .win *) { padding-top: 0; }
  .pl-more:not(.win, .win *)::before, .pl-slim .pl-more:not(.win, .win *)::before { left: calc(var(--pl-rail) / -2 - 1px); top: calc(var(--pl-gap) * -1); width: 2px; height: calc(var(--pl-gap) + var(--pl-ct) + var(--pl-chip) / 2); background: var(--tint); border: 0; }
  /* The points share out the height of the screen beside them, like stops along the rail. */
  .pl-points:not(.win, .win *) { flex: 1; }
  .pl-points li:not(.win, .win *) { flex: 1 1 auto; font-size: clamp(0.95rem, 1vw, 1.45rem); line-height: 1.42; }
  .pl-screen:not(.win, .win *), .pl-under:not(.win, .win *) { width: min(100%, 1760px, max(calc(var(--pl-dw) * 0.7px), var(--pl-fit))); }
  /* A picture that is not a whole window is shown at the scale of the windows around it, so the app is one size down the page.
     Its module is a narrower plate, and the board shows beside it. */
  .pl-slim:not(.win, .win *) { justify-self: start; width: fit-content; max-width: 100%; grid-template-columns: clamp(300px, 26vw, 620px) auto; }
  .pl-slim .pl-screen:not(.win, .win *) { width: min(calc(var(--pl-nat, 760) * var(--pl-su)), var(--pl-fit)); justify-self: start; }}

/* ---------------------------------------------------------------- the rules a page closes on, and its guides */

.pl-guide-list:not(.win, .win *) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.2vw, 52px); }
.pl-guide-list li:not(.win, .win *) { flex: 1 1 calc(33.333% - 12px); min-width: min(100%, 290px); display: flex; }
.pl-guide:not(.win, .win *) { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 10px; padding: clamp(18px, 1.7vw, 28px); --cut: 14px; --edge: color-mix(in srgb, var(--tint) 62%, var(--line-2)); --fill: color-mix(in srgb, var(--tint) 7%, #0b0f15);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pl-guide .silk:not(.win, .win *) { margin-bottom: 6px; color: var(--tint); filter: brightness(1.35) saturate(1.1); }
.pl-guide .silk .silk-r:not(.win, .win *) { color: var(--ink-3); filter: none; }
.pl-guide b:not(.win, .win *) { font: 650 clamp(1.2rem, 1.55vw, 1.6rem)/1.1 var(--sans); letter-spacing: -0.028em; text-wrap: balance; }
.pl-guide-sum:not(.win, .win *) { color: var(--ink-2); font-size: clamp(0.94rem, 1vw, 1.04rem); line-height: 1.45; text-wrap: pretty; }
.pl-guide-ticks:not(.win, .win *) { display: flex; gap: 4px; margin-top: 10px; }
.pl-guide-ticks i:not(.win, .win *) { width: 16px; height: 5px; background: var(--tint); }
.pl-guide .pl-guide-meta:not(.win, .win *) { display: flex; align-items: center; gap: 1.4em; color: var(--ink-2); }
.pl-guide .pl-guide-meta .ic:not(.win, .win *) { margin-left: auto; font-size: 16px; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.pl-guide:hover:not(.win, .win *), .pl-guide:focus-visible:not(.win, .win *) { --edge: var(--ink); transform: translateY(-3px); }
.pl-guide:hover .pl-guide-meta .ic:not(.win, .win *), .pl-guide:focus-visible .pl-guide-meta .ic:not(.win, .win *) { transform: translateX(4px); color: var(--ink); }
.pl-guide-all:not(.win, .win *) { margin-top: clamp(22px, 2.4vw, 36px); }

/* ---------------------------------------------------------------- a module powers up as it arrives, once

   html.pl-go is set before the first paint where motion is welcome; the script adds .pl-on when a module comes into view
   and .pl-done when everything has settled. Without the script, or with reduced motion, a module is simply there. */

html.pl-go .pl-mod .pl-edge:not(.win, .win *) { display: block; }
html.pl-go .pl-mod.pl-done .pl-edge:not(.win, .win *) { display: none; }
/* Not yet powered: the footprint, its pad on the bus and its label, dim. The board shows through. */
html.pl-go .pl-mod:not(.pl-on):not(.win, .win *)::before, html.pl-go .pl-mod:not(.pl-on):not(.win, .win *)::after, html.pl-go .pl-mod:not(.pl-on) .pl-head > :not(.silk):not(.win, .win *), html.pl-go .pl-mod:not(.pl-on) .pl-more > *:not(.win, .win *), html.pl-go .pl-mod:not(.pl-on) .pl-screen:not(.win, .win *), html.pl-go .pl-mod:not(.pl-on) .pl-under:not(.win, .win *) { opacity: 0; }
html.pl-go .pl-mod:not(.pl-on) .pl-head > .silk:not(.win, .win *) { opacity: 0.5; }
html.pl-go .pl-mod:not(.pl-on) .pl-head > .silk .idx:not(.win, .win *) { color: inherit; }
html.pl-go .pl-mod:not(.pl-on) .pl-stop i:not(.win, .win *) { background: #05070a; box-shadow: 0 0 0 2px var(--line-2); }
html.pl-go .pl-mod:not(.pl-on) .pl-stop:not(.win, .win *)::after { background: var(--line-2); }
html.pl-go .pl-mod:not(.pl-on) .pl-head:not(.win, .win *)::before, html.pl-go .pl-mod:not(.pl-on) .pl-more:not(.win, .win *)::before { transform: scaleY(0); }

html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-stop i:not(.win, .win *) { animation: pl-pop 0.34s cubic-bezier(0.2, 1.3, 0.3, 1) both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-stop:not(.win, .win *)::after { animation: pl-x 0.26s cubic-bezier(0.3, 0, 0.2, 1) 0.14s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done):not(.win, .win *)::after { animation: pl-in 0.5s ease-out 0.2s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done):not(.win, .win *)::before { animation: pl-in 0.45s ease-out 0.95s both; }
/* The light runs both ways round from where the trace comes in, and meets at the far corner. */
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge:not(.win, .win *) { animation: pl-out 0.6s ease-in 1.05s forwards; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(1):not(.win, .win *)::before { animation: pl-x 0.07s linear 0.3s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(2):not(.win, .win *)::before { animation: pl-x 0.36s cubic-bezier(0.4, 0, 0.3, 1) 0.37s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(3):not(.win, .win *)::before { animation: pl-y 0.3s cubic-bezier(0.3, 0, 0.2, 1) 0.73s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(4):not(.win, .win *)::before { animation: pl-y 0.36s cubic-bezier(0.4, 0, 0.3, 1) 0.3s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(5):not(.win, .win *)::before { animation: pl-x 0.3s cubic-bezier(0.3, 0, 0.2, 1) 0.66s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-edge i:nth-child(6):not(.win, .win *)::before { animation: pl-x 0.07s linear 0.96s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-head:not(.win, .win *)::before { animation: pl-y 0.5s cubic-bezier(0.3, 0, 0.2, 1) 0.36s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-more:not(.win, .win *)::before { animation: pl-y 0.2s linear 0.72s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-points li:not(.win, .win *)::before { animation: pl-y 0.34s cubic-bezier(0.3, 0, 0.2, 1) both; animation-delay: calc(0.94s + var(--pl-i, 0) * 0.12s); }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-head > *:not(.win, .win *) { animation: pl-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-head > .silk:not(.win, .win *) { animation: pl-lit 0.3s linear 0.3s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-head > :nth-child(2):not(.win, .win *) { animation-delay: 0.46s; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-head > :nth-child(3):not(.win, .win *) { animation-delay: 0.56s; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-more > *:not(.win, .win *) { animation: pl-in 0.3s linear 0.7s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-points li:not(.win, .win *) { animation: pl-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.78s + var(--pl-i, 0) * 0.12s); }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-points li > i:not(.win, .win *) { animation: pl-chip 0.6s cubic-bezier(0.2, 1.2, 0.3, 1) both; animation-delay: calc(0.86s + var(--pl-i, 0) * 0.12s); }
/* A number that is also on the screen flashes as its ring lands there. */
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-points li.pl-seen > i:not(.win, .win *) { animation: pl-chip 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both, pl-bump 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); animation-delay: calc(0.82s + var(--pl-i, 0) * 0.12s), calc(1.36s + var(--pl-i, 0) * 0.16s); }
.pl-points li:nth-child(2):not(.win, .win *) { --pl-i: 1; } .pl-points li:nth-child(3):not(.win, .win *) { --pl-i: 2; } .pl-points li:nth-child(4):not(.win, .win *) { --pl-i: 3; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-guide-link:not(.win, .win *) { animation: pl-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-screen:not(.win, .win *), html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-under:not(.win, .win *) { animation: pl-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-under:not(.win, .win *) { animation-delay: 0.8s; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-cap .lamp:not(.win, .win *) { animation: pl-lamp 0.9s steps(1, end) 1s both; }
/* A screen lifts off the board: it starts lying back and stands up. Only where a pointer says this is a desktop. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-screen:not(.pl-trio) .shot:not(.win, .win *) { animation: pl-lift 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both; transform-origin: 50% 100%; }
  html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-screen:not(.pl-trio):not(.win, .win *) { animation: pl-in 0.3s linear 0.42s both; }
  html.pl-go .pl-mod.pl-on:not(.pl-done) .pl-trio-cell:not(.win, .win *) { animation: pl-lift 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.5s + var(--pl-i, 0) * 0.12s); transform-origin: 50% 100%; }
  .pl-trio-cell:nth-child(2):not(.win, .win *) { --pl-i: 1; } .pl-trio-cell:nth-child(3):not(.win, .win *) { --pl-i: 2; }}

@media (prefers-reduced-motion: reduce) {
  .pl-flow:not(.win, .win *) { display: none; }
  .pl-lit:not(.win, .win *), .pl-now:not(.win, .win *), .pl-ladder a:not(.win, .win *)::after { transition: none; }}
}
/* site-shell.css */
@layer page {
@keyframes sh-run { from { transform: translate3d(0, -50px, 0); } to { transform: translate3d(0, 260px, 0); } }
@keyframes sh-row { from { opacity: 0; transform: translate3d(22px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sh-drop { from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
/* The shell around every page: the tools at the end of the bar, the menu of small windows, the footer and "Search or jump to".
   It loads after site.css, which draws .bar, .bar-nav and .foot. Classes of the shell start with sh-; the palette's start with jump-.
   Behaviour: client/10-site.js. On <html>: .sh-open while the menu is open, .sh-lock while the page behind must not scroll. */

html.sh-lock:not(.win, .win *) { overflow: hidden; scrollbar-gutter: stable; }

/* ---------------------------------------------------------------- the end of the bar: search, download, menu */

/* The bar is a solid piece: at 92% the large headings of the sections showed through it as they passed behind the links. */
.bar:not(.win, .win *) { gap: clamp(12px, 1.5vw, 28px); background: #05070a; }
.sh-tools:not(.win, .win *) { display: flex; align-items: center; gap: 10px; flex: none; }
.bar .sh-tools .pad:not(.win, .win *) { margin-left: 0; }

/* The slot that opens "Search or jump to": a field to look at, a button to press. */
.sh-jump:not(.win, .win *) { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 9px 0 12px; border: 1.5px solid var(--line-2); background: #06090c; color: var(--ink-2);
  font: 500 13.5px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; transition: border-color 0.18s, color 0.18s; }
.sh-jump .ic:not(.win, .win *) { font-size: 16px; color: var(--ink); }
.sh-jump kbd:not(.win, .win *) { padding: 4px 6px; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); border-color: var(--line-2); background: var(--plate-2); }
.sh-jump:hover:not(.win, .win *), .sh-jump:focus-visible:not(.win, .win *) { border-color: var(--ink); color: var(--ink); }
.sh-jump-t:not(.win, .win *) { min-width: 15ch; text-align: left; }
html:not(.js) [data-jump]:not(.win, .win *), [data-jump][hidden]:not(.win, .win *) { display: none; }
/* On the Download page its own pad is lit. */
.bar .sh-get[aria-current]:not(.win, .win *) { --edge: var(--orange); }
@media (max-width: 1579px) { .sh-jump .sh-jump-t:not(.win, .win *) { display: none; } .sh-jump:not(.win, .win *) { padding: 0 8px 0 10px; gap: 8px; }}

/* The menu button: three traces that cross when the menu is open. Only where the links of the bar are hidden. */
.sh-burger:not(.win, .win *) { display: none; place-items: center; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--line-2); background: #06090c; transition: border-color 0.18s; }
.sh-burger span:not(.win, .win *) { display: grid; gap: 5px; width: 18px; }
.sh-burger i:not(.win, .win *) { height: 2px; background: var(--ink); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; }
.sh-burger:hover:not(.win, .win *), .sh-burger:focus-visible:not(.win, .win *) { border-color: var(--ink); }
.sh-burger[aria-expanded='true']:not(.win, .win *) { border-color: var(--accent); }
.sh-burger[aria-expanded='true'] i:nth-child(1):not(.win, .win *) { transform: translate3d(0, 7px, 0) rotate(45deg); }
.sh-burger[aria-expanded='true'] i:nth-child(2):not(.win, .win *) { opacity: 0; transform: scaleX(0.2); }
.sh-burger[aria-expanded='true'] i:nth-child(3):not(.win, .win *) { transform: translate3d(0, -7px, 0) rotate(-45deg); }

@media (max-width: 1099px) {
  .bar .sh-tools:not(.win, .win *) { margin-left: auto; gap: 8px; }
  .sh-jump:not(.win, .win *) { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sh-jump kbd:not(.win, .win *) { display: none; }
  .sh-jump .ic:not(.win, .win *) { font-size: 19px; }
  .bar .sh-get:not(.win, .win *) { min-height: 44px; }
  html.js button.sh-burger:not(.win, .win *), html:not(.js) a.sh-burger-plain:not(.win, .win *) { display: grid; }}
/* Touch, at any width: what is pressed is at least 44 px. */
@media (hover: none), (pointer: coarse) {
  .sh-jump:not(.win, .win *) { height: 44px; }
  .bar .sh-get:not(.win, .win *) { min-height: 44px; }
  .sh-col a:not(.win, .win *) { min-height: 44px; }}
@media (max-width: 379px) { .sh-get:not(.win, .win *) { padding: 0 12px; } .sh-get span:not(.win, .win *) { display: none; }}

/* ---------------------------------------------------------------- the menu: every page on one connector */

.sh-scrim:not(.win, .win *) { position: fixed; z-index: 58; inset: 0; background: rgba(3, 5, 8, 0.8); opacity: 0; visibility: hidden; touch-action: none; transition: opacity 0.28s, visibility 0s 0.28s; }
.sh-menu:not(.win, .win *) { position: fixed; z-index: 59; top: var(--nav); right: 0; bottom: 0; width: min(100%, 440px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #070a0e; border-left: 1.5px solid var(--line-2); visibility: hidden; transform: translate3d(100%, 0, 0);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.34s; }
html.sh-open .sh-scrim:not(.win, .win *) { opacity: 1; visibility: visible; transition: opacity 0.28s, visibility 0s; }
html.sh-open .sh-menu:not(.win, .win *) { visibility: visible; transform: none; transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
@media (min-width: 1100px) { .sh-menu:not(.win, .win *), .sh-scrim:not(.win, .win *) { display: none; }}

.sh-menu-in:not(.win, .win *) { display: flex; flex-direction: column; min-height: 100%; padding: 14px 18px 0; }
.sh-menu-jump:not(.win, .win *) { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; flex: none; padding: 0 12px 0 14px; border: 1.5px solid var(--line-2); background: #05070a; color: var(--ink-2); font: 500 16px/1 var(--sans); text-align: left; }
.sh-menu-jump .ic:not(.win, .win *) { font-size: 19px; color: var(--ink); }
.sh-menu-jump .sh-jump-t:not(.win, .win *) { flex: 1; }
.sh-menu-jump kbd:not(.win, .win *) { padding: 5px 7px; font-size: 11.5px; color: var(--ink-2); }
.sh-menu-jump:hover:not(.win, .win *), .sh-menu-jump:focus-visible:not(.win, .win *) { border-color: var(--ink); color: var(--ink); }
@media (hover: none) { .sh-menu-jump kbd:not(.win, .win *) { display: none; }}

.sh-menu-nav:not(.win, .win *) { position: relative; margin-top: 6px; }
.sh-menu-nav .silk:not(.win, .win *) { margin: 16px 0 6px; color: var(--ink-3); }
.sh-menu-nav ul:not(.win, .win *) { position: relative; }
/* The trace all the rows are wired to, and the light that runs along it while the menu is open. */
.sh-menu-nav ul:not(.win, .win *) { overflow: hidden; }
.sh-menu-nav ul:not(.win, .win *)::before { content: ''; position: absolute; left: 39px; top: 0; bottom: 0; width: 1.5px; background: var(--line-2); }
.sh-menu-nav ul:not(.win, .win *)::after { content: ''; position: absolute; left: 38px; top: 0; width: 3.5px; height: 46px; background: linear-gradient(transparent, var(--accent) 75%, #fff); transform: translate3d(0, -50px, 0); }
html.sh-open .sh-menu-nav ul:not(.win, .win *)::after { animation: sh-run 3.4s linear 0.5s infinite; }
html.sh-open .sh-menu-nav ul + .silk + ul:not(.win, .win *)::after { animation-delay: 2.2s; }
.sh-menu-nav a:not(.win, .win *) { --tint: var(--accent); position: relative; display: grid; grid-template-columns: 24px 14px minmax(0, 1fr) auto 18px; align-items: center; column-gap: 9px; min-height: 50px; padding: 0 4px 0 0;
  border-bottom: 1.5px solid var(--line); color: var(--ink); }
.sh-menu-nav li:first-child a:not(.win, .win *) { border-top: 1.5px solid var(--line); }
.sh-n:not(.win, .win *) { font: 600 11.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.sh-menu-nav a i:not(.win, .win *) { position: relative; z-index: 1; justify-self: center; width: 9px; height: 9px; background: var(--tint); box-shadow: 0 0 0 3px #070a0e; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sh-t:not(.win, .win *) { font: 600 18px/1.15 var(--sans); letter-spacing: -0.02em; }
.sh-reading:not(.win, .win *) { font: 500 12px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-menu-nav a .sh-reading:not(.win, .win *) { grid-column: 4; }
.sh-menu-nav a .ic:not(.win, .win *) { grid-column: 5; font-size: 16px; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.sh-menu-nav a:hover .ic:not(.win, .win *), .sh-menu-nav a:focus-visible .ic:not(.win, .win *) { transform: translateX(3px); color: var(--ink); }
.sh-menu-nav a:hover i:not(.win, .win *), .sh-menu-nav a:focus-visible i:not(.win, .win *) { transform: rotate(45deg); }
.sh-menu-nav a[aria-current]:not(.win, .win *) { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%); }
.sh-menu-nav a[aria-current] i:not(.win, .win *) { transform: rotate(45deg); box-shadow: 0 0 0 3px #070a0e, 0 0 0 4.5px var(--tint); }
.sh-menu-nav a[aria-current] .sh-n:not(.win, .win *) { color: var(--ink); }
.sh-menu-nav a:focus-visible:not(.win, .win *) { outline-offset: -2px; }

.sh-menu-get:not(.win, .win *) { position: sticky; bottom: 0; margin: auto -18px 0; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; background: #070a0e; border-top: 1.5px solid var(--line-2); }
.sh-menu-nav + .sh-menu-get:not(.win, .win *) { margin-top: auto; }
/* In a short window (a phone on its side) the download scrolls with the list instead of covering half of it. */
@media (max-height: 560px) { .sh-menu-get:not(.win, .win *) { position: static; }}
.sh-menu-nav:not(.win, .win *) { padding-bottom: 18px; }
.sh-menu-get .pad:not(.win, .win *) { width: 100%; min-height: 56px; white-space: nowrap; font-size: 17px; }
.sh-menu-more:not(.win, .win *) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; }
.sh-menu-get .req:not(.win, .win *) { gap: 4px 12px; font-size: 10.5px; }
.sh-menu-get .go:not(.win, .win *) { min-height: 44px; padding: 0; font-size: 13.5px; border-bottom: 0; }
.sh-menu-get .go[aria-current]:not(.win, .win *) { color: var(--orange); }

/* Opening: the rows come in one after the other from the side the panel came from. */
html.sh-open .sh-menu-nav li:not(.win, .win *), html.sh-open .sh-menu-jump:not(.win, .win *), html.sh-open .sh-menu-get:not(.win, .win *), html.sh-open .sh-menu-nav .silk:not(.win, .win *) { animation: sh-row 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 26ms + 70ms); }

/* ---------------------------------------------------------------- the footer: the edge of the board */

.sh-foot:not(.win, .win *) { padding: 0 0 calc(26px + env(safe-area-inset-bottom)); border-top: 0; }
/* The connector along the edge: one pin every 14 px, as on the socket of the download band. */
.sh-edge:not(.win, .win *) { height: 30px; border-top: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 14px) 50% 50% / calc(100% - var(--gut) * 2) 12px no-repeat, #070a0e; }
.sh-foot-grid:not(.win, .win *) { display: grid; gap: 34px; padding-top: 38px; align-items: start; }
.sh-foot-id:not(.win, .win *) { display: grid; gap: 14px; justify-items: start; }
.sh-foot-name:not(.win, .win *) { display: inline-flex; align-items: center; min-height: 44px; }
.sh-foot-name .wordmark:not(.win, .win *) { font-size: clamp(24px, 1.5vw, 30px); }
.sh-credit:not(.win, .win *) { margin-top: -12px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.sh-foot .foot-sample:not(.win, .win *) { margin-top: 6px; }
.sh-sample:not(.win, .win *) { flex-wrap: wrap; gap: 6px 0.9em; font-size: 11.5px; color: var(--ink-3); }
.sh-sample .lamp:not(.win, .win *) { --tint: var(--good); }
.sh-sample-now:not(.win, .win *) { display: inline-flex; gap: 0.9em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sh-foot-nav:not(.win, .win *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; outline: 0; scroll-margin-top: calc(var(--nav) + 20px); }
.sh-col h2:not(.win, .win *) { padding-bottom: 10px; border-bottom: 1.5px solid var(--line-2); color: var(--ink-3); font-size: 11.5px; }
.sh-col ul:not(.win, .win *) { display: grid; margin-top: 4px; }
.sh-col a:not(.win, .win *) { --tint: var(--accent); display: flex; align-items: center; gap: 11px; min-height: 44px; color: var(--ink-2); font: 500 15.5px/1.2 var(--sans); letter-spacing: -0.01em; transition: color 0.18s; }
.sh-col a i:not(.win, .win *) { width: 6px; height: 6px; flex: none; background: var(--line-2); transition: background-color 0.18s, transform 0.18s; }
.sh-col a:hover:not(.win, .win *), .sh-col a:focus-visible:not(.win, .win *), .sh-col a[aria-current]:not(.win, .win *) { color: var(--ink); }
.sh-col a:hover i:not(.win, .win *), .sh-col a:focus-visible i:not(.win, .win *), .sh-col a[aria-current] i:not(.win, .win *) { background: var(--tint); transform: rotate(45deg); }
.sh-ver:not(.win, .win *) { margin-left: 2px; padding: 3px 6px; border: 1.5px solid var(--line-2); font: 500 11px/1 var(--mono); color: var(--ink-2); }
.sh-mail:not(.win, .win *) { overflow-wrap: anywhere; }
.sh-col:last-child:not(.win, .win *) { grid-column: 1 / -1; }
.sh-fine:not(.win, .win *) { margin-top: 30px; padding-top: 16px; border-top: 1.5px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 26px; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 640px) { .sh-foot-nav:not(.win, .win *) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh-col:last-child:not(.win, .win *) { grid-column: auto; }}
/* Side by side only where the three columns have room for their longest names on one line. */
@media (min-width: 1280px) {
  .sh-foot-grid:not(.win, .win *) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 120px); padding-top: 46px; }
  .sh-col a:not(.win, .win *) { min-height: 36px; font-size: 15px; }}

/* ---------------------------------------------------------------- search or jump to */

.jump-dialog:not(.win, .win *) { position: fixed; inset: 0; margin: clamp(10px, 11svh, 150px) auto auto; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
  width: min(100% - 20px, clamp(560px, 44vw, 940px)); max-width: none; max-height: none; --fs: clamp(16px, 1.02vw, 22px); }
.jump-dialog:not(.win, .win *)::backdrop { background: rgba(3, 5, 8, 0.82); }
.jump-plate:not(.win, .win *) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(calc(var(--sh-vvh, 100svh) - clamp(10px, 11svh, 150px) - 14px), 46em); --cut: 18px; --edge: var(--accent); --fill: #080b10; --edge-w: 1.5px; font-size: var(--fs); }
.jump-field:not(.win, .win *) { display: flex; align-items: center; gap: 0.75em; padding: 0 0.7em 0 1.1em; height: 3.7em; border-bottom: 1.5px solid var(--line-2); }
.jump-field > .ic:not(.win, .win *) { font-size: 1.3em; color: var(--accent); }
.jump-field input:not(.win, .win *) { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 1.15em/1 var(--sans); letter-spacing: -0.015em; caret-color: var(--accent); appearance: none; -webkit-appearance: none; border-radius: 0; }
.jump-field input:not(.win, .win *)::placeholder { color: var(--ink-3); opacity: 1; }
.jump-field input:not(.win, .win *)::-webkit-search-cancel-button, .jump-field input:not(.win, .win *)::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.jump-close:not(.win, .win *) { display: grid; place-items: center; min-width: 44px; height: 44px; flex: none; color: var(--ink-2); }
.jump-close kbd:not(.win, .win *) { padding: 5px 7px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.jump-close .ic:not(.win, .win *) { display: none; font-size: 20px; }
.jump-close:hover kbd:not(.win, .win *), .jump-close:focus-visible kbd:not(.win, .win *) { border-color: var(--ink); color: var(--ink); }
@media (hover: none) { .jump-close kbd:not(.win, .win *) { display: none; } .jump-close .ic:not(.win, .win *) { display: block; } .jump-close:not(.win, .win *) { border: 1.5px solid var(--line-2); }}

.jump-results:not(.win, .win *) { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.3em 0.5em 0.6em; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.jump-group:not(.win, .win *) { display: flex; align-items: center; gap: 0.9em; padding: 1.15em 0.75em 0.55em; font: 600 0.68em/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.jump-group:not(.win, .win *)::after { content: ''; flex: 1; height: 1.5px; background: var(--line); }
.jump-group b:not(.win, .win *) { font-weight: 500; color: var(--ink-3); order: 2; }
.jump-item:not(.win, .win *) { position: relative; display: grid; grid-template-columns: 2.1em minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 0.8em; row-gap: 0.2em; min-height: 3.2em; padding: 0.5em 0.75em; color: var(--ink-2); scroll-margin: 0.4em 0; }
.jump-mark:not(.win, .win *) { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.1em; height: 2.1em; border: 1.5px solid var(--line-2); color: var(--ink-2); background: #05070a; }
.jump-mark .ic:not(.win, .win *) { font-size: 1.05em; }
.jump-item b:not(.win, .win *) { grid-column: 2; font: 600 0.98em/1.2 var(--sans); letter-spacing: -0.015em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-item span:not(.win, .win *) { grid-column: 2; font: 400 0.8em/1.25 var(--sans); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-item span:empty:not(.win, .win *) { display: none; }
.jump-item em:not(.win, .win *) { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.6em; font: 500 0.66em/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); opacity: 0; }
.jump-item em:not(.win, .win *)::after { content: '↵'; display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 1.5px solid var(--line-2); font-size: 1.25em; color: var(--ink); }
.jump-item[aria-selected='true']:not(.win, .win *) { color: var(--ink); background: #111a24; }
.jump-item[aria-selected='true']:not(.win, .win *)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.jump-item[aria-selected='true'] .jump-mark:not(.win, .win *) { border-color: var(--accent); background: var(--accent); color: #04070a; }
.jump-item[aria-selected='true'] span:not(.win, .win *) { color: var(--ink-2); }
.jump-item[aria-selected='true'] em:not(.win, .win *) { opacity: 1; }
.jump-empty:not(.win, .win *) { padding: 2.2em 0.9em 2em; color: var(--ink-2); font-size: 0.95em; text-align: center; }
.jump-foot:not(.win, .win *) { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.75em 1.1em 0.85em; border-top: 1.5px solid var(--line-2); font: 500 0.7em/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.jump-foot kbd:not(.win, .win *) { padding: 3px 5px; font-size: 0.95em; margin: 0 0.15em; color: var(--ink-2); }
.jump-keys:not(.win, .win *) { display: flex; align-items: center; gap: 0.3em; }
.jump-keys i:not(.win, .win *) { width: 1.5px; height: 1em; margin: 0 0.6em; background: var(--line-2); }
@media (hover: none) { .jump-keys:not(.win, .win *) { display: none; } .jump-item em:not(.win, .win *) { display: none; } .jump-foot:not(.win, .win *) { justify-content: flex-end; }}
@media (max-width: 640px) {
  .jump-dialog:not(.win, .win *) { margin-top: 8px; width: calc(100% - 16px); --fs: 16px; }
  .jump-plate:not(.win, .win *) { max-height: calc(var(--sh-vvh, 100svh) - 16px); --cut: 14px; }
  .jump-field:not(.win, .win *) { height: 58px; padding: 0 7px 0 14px; }
  .jump-field input:not(.win, .win *) { font-size: 17px; }
  .jump-item:not(.win, .win *) { min-height: 54px; }
  .jump-item em:not(.win, .win *) { display: none; }}
/* The palette arrives: the plate first, quickly, so typing is never held up. */
.jump-dialog[open] .jump-plate:not(.win, .win *) { animation: sh-drop 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.jump-dialog[open]:not(.win, .win *)::backdrop { animation: sh-fade 0.2s linear both; }
}
/* inside-guides.css: rules that reach into recreated windows on purpose */
@layer page {
/* Guides: the few rules that reach into a recreated window on purpose.
   The rings that mark the controls of a step look as they do everywhere on the site. What changes is how they arrive: they wait
   until the picture is in view, then each one is drawn clockwise in two strokes, one ring after the other, and its number lands
   as the pen starts. client/61-guides.js adds gd-drawn to the picture and, while a ring is being drawn, gd-pen and the strokes to the ring.
   A stroke is the ring seen through a window that slides open: the window moves one way, the ring inside it the other, so the ring
   stands still and only transform is animated. The strokes live in a box that reaches as far as the ring's glow and clips them,
   so nothing sticks out of a screen that does not clip (the menu bar strips). Sizes are app points (--u), like everything inside a window. */
html.gd-anim .gd-step .shot:not(.gd-drawn) .hl-ring { opacity: 0; }
.gd-step .hl-ring.gd-pen { box-shadow: none !important; }
.gd-step .hl-ring.gd-pen::after { animation: gd-pen-n 0.36s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--gd-k, 0) * 0.42s); }
.gd-pen-w { position: absolute; inset: calc(-34 * var(--u)); overflow: hidden; overflow: clip; pointer-events: none; }
.gd-pen-a, .gd-pen-b { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.gd-pen-a { top: 0; }
.gd-pen-b { bottom: 0; }
.gd-pen-a > b, .gd-pen-b > b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.gd-pen-a > b::before, .gd-pen-b > b::before { content: ''; position: absolute; left: calc(34 * var(--u)); right: calc(34 * var(--u)); height: calc(200% - 68 * var(--u)); border-radius: calc(10 * var(--u));
  box-shadow: 0 0 0 calc(2 * var(--u)) rgb(var(--c-accent)), 0 0 0 calc(6 * var(--u)) rgb(var(--c-accent) / 0.22), 0 0 calc(22 * var(--u)) rgb(var(--c-accent) / 0.55); }
.gd-pen-a > b::before { top: calc(34 * var(--u)); }
.gd-pen-b > b::before { bottom: calc(34 * var(--u)); }
.gd-pen-a, .gd-pen-b > b { animation: gd-pen-l 0.24s cubic-bezier(0.4, 0, 0.6, 1) both; }
.gd-pen-a > b, .gd-pen-b { animation: gd-pen-r 0.24s cubic-bezier(0.4, 0, 0.6, 1) both; }
.gd-pen-a, .gd-pen-a > b { animation-delay: calc(var(--gd-k, 0) * 0.42s); }
.gd-pen-b, .gd-pen-b > b { animation-delay: calc(var(--gd-k, 0) * 0.42s + 0.24s); }
@keyframes gd-pen-l { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes gd-pen-r { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes gd-pen-n { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
}
/* inside-info.css: rules that reach into recreated windows on purpose */
@layer page {
/* Rules of the reference pages that change a recreated window on purpose. Not fenced: keep every selector under .win. */

/* The disk image on the Download page shows the one gesture of installing: the app is carried onto Applications.
   A copy of the icon travels; the original stays where it is, as it does in Finder. */
@media (prefers-reduced-motion: no-preference) {
  .in-install .win [data-part='dmg.app'] { position: relative; }
  .in-install .win [data-part='dmg.app']::after { content: ''; position: absolute; z-index: 2; left: calc(15 * var(--u)); top: 0; width: calc(120 * var(--u)); height: calc(120 * var(--u));
    background: url('./icon-256.png') 50% 50% / contain no-repeat; opacity: 0; pointer-events: none; will-change: transform, opacity; animation: in-drag 5.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
  .in-install .win [data-part='dmg.applications'] .tm-folder { animation: in-drop 5.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .in-install .win [data-part='dmg.arrow'] { animation: in-point 5.4s linear infinite; }
}
@keyframes in-drag {
  0%, 14% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  20% { opacity: 0.92; transform: translate3d(0, calc(-8 * var(--u)), 0) scale(1.05); }
  58% { opacity: 0.92; transform: translate3d(calc(282 * var(--u)), calc(-8 * var(--u)), 0) scale(1.05); }
  66%, 100% { opacity: 0; transform: translate3d(calc(282 * var(--u)), calc(10 * var(--u)), 0) scale(0.5); }
}
@keyframes in-drop { 0%, 59% { transform: none; } 65% { transform: scale(1.09); } 74%, 100% { transform: none; } }
@keyframes in-point { 0%, 18% { opacity: 1; } 26%, 58% { opacity: 0.35; } 68%, 100% { opacity: 1; } }
}
/* inside-pillars.css: rules that reach into recreated windows on purpose */
@layer page {
/* The feature pages: the few rules that reach into a recreated window on purpose.

   1. The numbered rings client/60-pillars.js draws on a screen, one for each point of the module that the screen shows.
      A ring is lit in the module's own hue (--pl-hi, set on .pl-mod) and carries the point's number on the same cut-corner chip
      the point has beside its words, so the two read as one mark. It follows the rounded corners of the app's cards.
      Line widths are real pixels, so a ring is as crisp on a small window as on a large one.
   (The sheet's backdrop is dimmed instead of blurred for the whole site: see inside.css.) */

.pl-screen .win .pl-ring { position: absolute; z-index: 9; pointer-events: none; border-radius: calc(11 * var(--u));
  box-shadow: 0 0 0 2px var(--pl-hi, #7adff7), 0 0 0 3.5px rgba(3, 5, 8, 0.9); transition: opacity 0.25s; }
.pl-screen .win .pl-ring.pl-cut { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* The number. The script gives it the seat where it covers least: --pl-ax and --pl-ay say which point of the ring it hangs from
   (0 left or top, 1 right or bottom), --pl-kx and --pl-ky how far from there, in chips. */
.pl-screen .win .pl-ring::after { content: attr(data-n); position: absolute; left: calc(var(--pl-ax, 0) * 100% + var(--pl-kx, -0.56) * var(--pl-chip, 24px)); top: calc(var(--pl-ay, 0) * 100% + var(--pl-ky, -0.56) * var(--pl-chip, 24px));
  display: grid; place-items: center; width: var(--pl-chip, 24px); height: var(--pl-chip, 24px);
  font: 600 calc(var(--pl-chip, 24px) * 0.5)/1 var(--mono, ui-monospace, monospace); font-style: normal; color: #04070a; background: var(--pl-hi, #7adff7);
  clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%); transition: background-color 0.25s; }
/* The light around a ring that is being pointed at: everything else on the screen steps back. Only its opacity ever changes. */
.pl-screen .win .pl-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 4000px rgba(3, 5, 8, 0.52); opacity: 0; transition: opacity 0.3s; }
@media (max-width: 1099px) { .pl-screen .win .pl-ring::before { box-shadow: 0 0 0 4000px rgba(3, 5, 8, 0.5); } }

/* The point under the pointer, or the point being read on a small screen: its ring stands out and the others step back. */
.pl-mod[data-pl-hot] .win .pl-ring { opacity: 0; }
.pl-mod[data-pl-hot='1'] .win .pl-ring[data-n='1'], .pl-mod[data-pl-hot='2'] .win .pl-ring[data-n='2'], .pl-mod[data-pl-hot='3'] .win .pl-ring[data-n='3'], .pl-mod[data-pl-hot='4'] .win .pl-ring[data-n='4'] {
  opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(3, 5, 8, 0.9); }
.pl-mod[data-pl-hot='1'] .win .pl-ring[data-n='1']::after, .pl-mod[data-pl-hot='2'] .win .pl-ring[data-n='2']::after, .pl-mod[data-pl-hot='3'] .win .pl-ring[data-n='3']::after, .pl-mod[data-pl-hot='4'] .win .pl-ring[data-n='4']::after { background: #fff; }
.pl-mod[data-pl-hot='1'] .win .pl-ring[data-n='1']::before, .pl-mod[data-pl-hot='2'] .win .pl-ring[data-n='2']::before, .pl-mod[data-pl-hot='3'] .win .pl-ring[data-n='3']::before, .pl-mod[data-pl-hot='4'] .win .pl-ring[data-n='4']::before { opacity: 1; }

/* Rings land one after the other once the screen is in place, each as its point's number lights. */
html.pl-go .pl-mod:not(.pl-on) .win .pl-ring { opacity: 0; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .win .pl-ring { animation: pl-ring-in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) 1.34s both; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .win .pl-ring[data-n='2'] { animation-delay: 1.5s; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .win .pl-ring[data-n='3'] { animation-delay: 1.66s; }
html.pl-go .pl-mod.pl-on:not(.pl-done) .win .pl-ring[data-n='4'] { animation-delay: 1.82s; }
@keyframes pl-ring-in { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .pl-screen .win .pl-ring, .pl-screen .win .pl-ring::before, .pl-screen .win .pl-ring::after { transition: none; } }
}
/* inside.css: rules that reach into recreated windows on purpose */
@layer page {
/* Rules that change a recreated window on purpose, on every page. Not fenced: keep every selector under .win.

   A sheet in the app blurs the page behind it (the app's "focus pull"). The site dims that page instead and blurs nothing:
   a guide shows several sheets in one scrolling page, a blurred backdrop is the costliest thing a screen can be asked to scroll,
   and on a display at 1x a blur at this size reads as mud rather than as depth. The page behind stays sharp and steps back. */
.win .scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(3, 5, 8, 0.84) !important; }
}