/* YughX Bedrock portfolio: design system and screens. Pure ASCII.
   Every size is a multiple of the texel unit t set by ui/scale.js. */

@font-face { font-family: 'Tiny5'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/tiny5-400-latin.woff2?v=23) format('woff2'); }
/* YX Pixel: our own pixel font for every label, made by the UI font tool in tools. One font pixel is fu (one texel at the label size). */
@font-face { font-family: 'YX Pixel'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/yx-pixel.ttf?v=23) format('truetype'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/notosans-400-latin.woff2?v=23) format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/notosans-700-latin.woff2?v=23) format('woff2'); }
@font-face { font-family: 'Noto Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/notosansmono-400-latin.woff2?v=23) format('woff2'); }

:root {
  --t: 2px;
  --ctl: 24;
  --ctl-h: calc(var(--ctl) * var(--t));

  --edge: #1e1e1f; --n90: #242425; --n80: #313233; --n70: #48494a; --n60: #58585a;
  --divider: #292a2b; --header: #e6e8eb; --header-hover: #f4f6f9; --header-rule: #b1b2b5;
  --track: #8c8d90;

  --tx: #ffffff; --tx-dim: #d0d1d4; --tx-dimmest: #b1b2b5; --tx-off: #58585a; --tx-on-light: #1e1e1f;

  --pri: #3c8527; --pri-hi: #639d52; --pri-bev: #50913d; --pri-cor: #73a764; --pri-lip: #1d4d13;
  --pri-h: #2a641c; --pri-h-hi: #7fa277; --pri-h-bev: #6a9260; --pri-h-cor: #a6bea0;
  --pri-p: #1d4d13; --pri-p-hi: #4a7142; --pri-p-bev: #345f2b; --caret: #6cc349;

  --sec: #d0d1d4; --sec-hi: #ecedee; --sec-bev: #e3e3e5; --sec-cor: #eeeeef; --sec-lip: #58585a;
  --sec-h: #b1b2b5; --sec-h-hi: #e0e0e1; --sec-h-cor: #f3f3f3;
  --sec-p: #b1b2b5; --sec-p-hi: #c1c1c4; --sec-p-bev: #b9babc;

  --neu: #48494a; --neu-hi: #6d6d6e; --neu-bev: #5a5b5c; --neu-cor: #7b7c7d; --neu-lip: #313233;
  --neu-h: #58585a; --neu-h-hi: #9b9b9c; --neu-h-bev: #8a8a8b;
  --neu-p: #313233; --neu-p-hi: #5a5b5c; --neu-p-bev: #464747;

  --dst: #ca3636; --dst-hi: #d55e5e; --dst-bev: #cf4a4a; --dst-cor: #d96e6e; --dst-lip: #ad1d1d; --dst-h: #c02d2d;
  --inf: #2e6be5; --inf-hi: #5889ea; --inf-bev: #4379e8; --inf-cor: #6a96ec; --inf-lip: #193b7e; --inf-h: #2050a7;

  --tint-green: #a0e081; --tint-red: #ff8080; --tint-yellow: #ffe866; --tint-blue: #8cb3ff; --gold: #ffd783;

  --c-border: #131313; --c-hi: #f7f7f7; --c-face: #c6c6c6; --c-shade: #656465; --c-shade2: #4c4c4c; --c-text: #4c4c4c;
  --c-g-hi: #17cd07; --c-g-face: #218306; --c-g-shade: #004e00;
  /* Featured title button (the coloured row). Change these four together. */
  --feat: #7345e5; --feat-hi: #8f6aea; --feat-lo: #4a1cac; --feat-h: #5d2cc6;

  --tooltip: #181a1b; --toast: #212121; --toast-rim: #555555;
  --slot-face: rgba(0, 0, 0, 0.7); --slot-hi: #929292; --slot-lo: #686868; --slot-sel: #d7d7d7;
  --inv-face: #d2d6dc; --inv-hi: #ffffff; --inv-lo: #999fa9; --inv-edge: #181a1b; --inv-text: #353535;
  --islot-face: #a7adb6; --islot-top: #686868; --islot-left: #929292; --islot-lo: #ffffff;

  --logo-face: #ffb02b; --logo-hi: #ffc95e; --logo-lo: #e09918; --logo-side: #7a4806; --logo-under: #5e3704; --ink: #05070a;

  --font-head: 'Tiny5', 'YX Pixel', ui-monospace, monospace;
  --font-ui: 'YX Pixel', ui-monospace, monospace;
  --font-body: 'Noto Sans', system-ui, sans-serif;
  --font-mono: 'Noto Sans Mono', ui-monospace, monospace;
  --fu: 2px; --fs: 2px;
  --fs-small: calc(8 * var(--fs));
  --fs-ui: calc(8 * var(--fu));
  --fs-head: max(18px, calc(12 * var(--t)));
  --fs-big: calc(16 * var(--fu));
  --fs-body: clamp(15px, calc(6 * var(--t)), 18px);

  --press: 50ms ease-out;
  --route: 275ms ease-in-out;
  --fade: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
html, body { background: #1e1e1f; color: var(--tx); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* No fi or fl ligatures (the pixel faces draw them like A); important beats every font shorthand. */
*, *::before, *::after { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0 !important; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
.px, .ui, button, .hud, .tc, .title { -webkit-user-select: none; user-select: none; }
.px, .ui, .cb, .eb, .chip, .tab, .snav button, .hb h1, .nametag, .splash, .keycap, .toast, .hud, .title, .t-banner, .foot-strip, .ifoot, .ptile, .arow, .sv-row, .wrow, .wcard { -webkit-font-smoothing: none; font-smooth: never; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ic { width: calc(10 * var(--t)); height: calc(10 * var(--t)); flex: none; display: block; shape-rendering: crispEdges; }
.ic16 { width: calc(16 * var(--t)); height: calc(16 * var(--t)); }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
:focus { outline: none; }
:focus-visible, html.kbnav :focus { outline: var(--t) solid #fff; outline-offset: 0; }
.skip { position: fixed; left: calc(5 * var(--t)); top: calc(5 * var(--t)); z-index: 90; transform: translateY(-300%); background: var(--sec); color: var(--tx-on-light); padding: calc(3 * var(--t)) calc(6 * var(--t)); font: var(--fs-ui)/1.25 var(--font-ui); border: var(--t) solid var(--edge); text-decoration: none; }
.skip:focus { transform: none; }

/* Layers */
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--fade); touch-action: none; z-index: 0; }
#world.on { opacity: 1; }
.poster { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #8db7ef; transition: opacity var(--fade); }
.poster.off { opacity: 0; pointer-events: none; }
.poster::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: #8a5a32; border-top: calc(6 * var(--t)) solid #5d9c3c; }
.poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 38%; height: 14%; background: #7fa66b; clip-path: polygon(0 60%, 8% 60%, 8% 30%, 20% 30%, 20% 50%, 34% 50%, 34% 10%, 46% 10%, 46% 40%, 62% 40%, 62% 20%, 76% 20%, 76% 55%, 90% 55%, 90% 35%, 100% 35%, 100% 100%, 0 100%); }
/* Image above the placeholder hills. */
.poster img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity var(--fade); }
.poster img.ok { opacity: 1; }
.poster-dim { position: fixed; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--fade); }
#app { position: fixed; inset: 0; z-index: 2; }
#screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; }
.enter-fade { animation: pfIn 400ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.leave-fade { animation: pfOut 400ms cubic-bezier(0.215, 0.61, 0.355, 1) both; pointer-events: none; }
.enter-slide { animation: pfSlideIn var(--route) both; }
.enter-back { animation: pfSlideBack var(--route) both; }
.leave-slide { animation: pfOut var(--route) both; pointer-events: none; }
@keyframes pfIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pfOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pfSlideIn { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }
@keyframes pfSlideBack { from { opacity: 0; transform: translateX(-8%); } to { opacity: 1; transform: none; } }
html.rm .enter-fade, html.rm .enter-slide, html.rm .enter-back { animation: pfIn 150ms linear both; }
html.rm .leave-fade, html.rm .leave-slide { animation: pfOut 150ms linear both; }
.panel-in { animation: pfSlideIn var(--route) both; }
html.rm .panel-in { animation: pfIn 150ms linear both; }

/* Classic button (release 26.52 title look): 1t border, 1t light top and left
   with a brighter corner texel, 1t shade right, 2t shade bottom. Hover and a
   finger down turn it green; a held mouse button swaps light and shade and
   drops the label 1t. Every press fires on release. */
.cb { --cf: var(--c-face); --ch: var(--c-hi); --cc: #fefefe; --cs: var(--c-shade); --cs2: var(--c-shade2); --cbd: var(--c-border); --ct: var(--c-text);
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--t));
  height: calc(var(--bh, 30) * var(--t)); min-width: 0; padding: 0 calc(6 * var(--t)) calc(2 * var(--t));
  border: var(--t) solid var(--cbd); background: var(--cf); color: var(--ct); text-decoration: none; white-space: nowrap;
  font: 400 var(--fs-ui)/1 var(--font-ui); letter-spacing: 0;
  box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--cs2), inset 0 calc(-2 * var(--t)) 0 var(--cs), inset calc(-1 * var(--t)) 0 0 var(--cs), inset var(--t) var(--t) 0 var(--ch); }
.cb::before { content: ""; position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); background: var(--cc); pointer-events: none; }
.cb .ic { color: currentColor; }
.cb > span { overflow: hidden; text-overflow: ellipsis; }
.cb-feat { --cf: var(--feat); --ch: var(--feat-hi); --cc: var(--feat-hi); --cs: var(--feat-lo); --cs2: var(--feat-lo); --ct: #fff; }
.cb-green { --cf: var(--pri); --ch: var(--pri-hi); --cc: var(--pri-hi); --cs: var(--pri-lip); --cs2: var(--pri-lip); --ct: #fff; }
@media (hover: hover) {
  .cb:hover { --cf: var(--c-g-face); --ch: var(--c-g-hi); --cc: var(--c-g-hi); --cs: var(--c-g-shade); --cs2: var(--c-g-shade); --cbd: #fff; --ct: #fff; }
  .cb-feat:hover { --cf: var(--feat-h); --ch: var(--feat-hi); --cc: var(--feat-hi); --cs: var(--feat-lo); --cs2: var(--feat-lo); }
}
.cb.is-down, .cb:focus-visible, html.kbnav .cb:focus { --cf: var(--c-g-face); --ch: var(--c-g-hi); --cc: var(--c-g-hi); --cs: var(--c-g-shade); --cs2: var(--c-g-shade); --cbd: #fff; --ct: #fff; outline: none; }
.cb-feat.is-down, .cb-feat:focus-visible, html.kbnav .cb-feat:focus { --cf: var(--feat-h); --ch: var(--feat-hi); --cc: var(--feat-hi); --cs: var(--feat-lo); --cs2: var(--feat-lo); }
html[data-input="pointer"] .cb.is-down { --cc: var(--cs); box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--ch), inset calc(-1 * var(--t)) 0 0 var(--ch), inset var(--t) var(--t) 0 var(--cs); padding-top: var(--t); padding-bottom: var(--t); }
.cb[aria-disabled="true"] { --cf: #8b8b8b; --ch: #a9a9a9; --cc: #a9a9a9; --cs: #5c5c5c; --cs2: #4a4a4a; --ct: #3a3a3a; --cbd: var(--c-border); cursor: default; }
/* Disabled stays grey when focused or pressed. */
.cb[aria-disabled="true"]:focus-visible, html.kbnav .cb[aria-disabled="true"]:focus, .cb[aria-disabled="true"].is-down { --cf: #8b8b8b; --ch: #a9a9a9; --cc: #a9a9a9; --cs: #5c5c5c; --cs2: #4a4a4a; --ct: #3a3a3a; --cbd: #fff; }
html[data-title-style="modern"] .title .cb.pc { display: none; }
html:not([data-title-style="modern"]) .title .eb.alt { display: none; }

/* Elevated button (Ore UI) */
.eb { --f: var(--sec); --hi: var(--sec-hi); --bev: var(--sec-bev); --lip: var(--sec-lip); --tc: var(--tx-on-light);
  --fh: var(--sec-h); --hih: var(--sec-h-hi); --bevh: var(--sec-bev);
  --fp: var(--sec-p); --hip: var(--sec-p-hi); --bevp: var(--sec-p-bev);
  position: relative; display: inline-flex; height: var(--ctl-h); min-width: var(--ctl-h); padding: 0; border: 0; background: none; color: var(--tc); text-decoration: none; vertical-align: top; }
.eb > .f { position: relative; top: 0; flex: 1 1 auto; height: 100%; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--t));
  padding: 0 calc(5 * var(--t)) calc(2 * var(--t)); border: var(--t) solid var(--edge); background: var(--f);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--lip), inset 0 calc(-3 * var(--t)) 0 var(--bev), inset calc(-1 * var(--t)) 0 0 var(--bev), inset var(--t) var(--t) 0 var(--hi);
  font: 400 var(--fs-ui)/1 var(--font-ui); letter-spacing: 0; white-space: nowrap; overflow: hidden; transition: top var(--press); }
.eb > .f > span { overflow: hidden; text-overflow: ellipsis; }
.eb-wide { display: flex; width: 100%; }
.eb-pri { --f: var(--pri); --hi: var(--pri-hi); --bev: var(--pri-bev); --lip: var(--pri-lip); --tc: #fff; --fh: var(--pri-h); --hih: var(--pri-h-hi); --bevh: var(--pri-h-bev); --fp: var(--pri-p); --hip: var(--pri-p-hi); --bevp: var(--pri-p-bev); }
.eb-neu { --f: var(--neu); --hi: var(--neu-hi); --bev: var(--neu-bev); --lip: var(--neu-lip); --tc: #fff; --fh: var(--neu-h); --hih: var(--neu-h-hi); --bevh: var(--neu-h-bev); --fp: var(--neu-p); --hip: var(--neu-p-hi); --bevp: var(--neu-p-bev); }
.eb-dst { --f: var(--dst); --hi: var(--dst-hi); --bev: var(--dst-bev); --lip: var(--dst-lip); --tc: #fff; --fh: var(--dst-h); --hih: var(--dst-cor); --bevh: var(--dst-bev); --fp: var(--dst-lip); --hip: var(--dst-bev); --bevp: var(--dst-h); }
.eb-inf { --f: var(--inf); --hi: var(--inf-hi); --bev: var(--inf-bev); --lip: var(--inf-lip); --tc: #fff; --fh: var(--inf-h); --hih: var(--inf-cor); --bevh: var(--inf-bev); --fp: var(--inf-lip); --hip: var(--inf-h); --bevp: var(--inf-h); }
.eb-pri > .f, .eb-head > .f { font-family: var(--font-head); text-transform: uppercase; }
@media (hover: hover) { .eb:hover > .f { background: var(--fh); --hi: var(--hih); --bev: var(--bevh); } }
.eb:active > .f, .eb.is-down > .f, .eb[aria-pressed="true"].latch > .f { top: calc(2 * var(--t)); height: calc(100% - 2 * var(--t)); padding-bottom: 0; background: var(--fp);
  box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--bevp), inset calc(-1 * var(--t)) 0 0 var(--bevp), inset var(--t) var(--t) 0 var(--hip); }
.eb:focus-visible, html.kbnav .eb:focus { outline: none; }
.eb:focus-visible > .f, html.kbnav .eb:focus > .f { outline: var(--t) solid #fff; outline-offset: 0; }
.eb[aria-disabled="true"] { --f: var(--sec-h); --hi: var(--sec-h); --bev: var(--sec-h); --lip: var(--track); --tc: var(--tx-off); --fh: var(--sec-h); --hih: var(--sec-h); --fp: var(--sec-h); --hip: var(--sec-h); --bevp: var(--sec-h); cursor: default; }
.eb[aria-disabled="true"] > .f { border-color: var(--n60); top: 0; height: 100%; padding-bottom: calc(2 * var(--t)); }
.eb-sq { width: calc(22 * var(--t)); }
.eb-sq > .f { padding: 0 0 calc(2 * var(--t)); }
.eb .ic { color: currentColor; }
.eb-big { height: max(var(--ctl-h), calc(30 * var(--t))); }
.eb-big > .f { font-size: var(--fs-ui); }

/* Flat buttons and rows */
.fb { display: flex; align-items: center; gap: calc(4 * var(--t)); width: 100%; min-height: var(--ctl-h); padding: calc(3 * var(--t)) calc(5 * var(--t)); border: var(--t) solid var(--edge); background: var(--neu); color: #fff; text-align: left; text-decoration: none;
  box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--neu-bev), inset calc(-1 * var(--t)) 0 0 var(--neu-bev), inset var(--t) var(--t) 0 var(--neu-hi); font: 400 var(--fs-ui)/1.25 var(--font-ui); }
@media (hover: hover) { .fb:hover { background: var(--neu-h); } }
.fb.is-down, .fb:active { background: var(--neu-p); box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--neu-p-bev), inset var(--t) var(--t) 0 var(--neu-p-hi); }
.fb[aria-current="true"], .fb.sel { background: var(--n60); }

/* Toggle */
.tg { position: relative; flex: none; width: calc(30 * var(--t)); height: var(--ctl-h); padding: 0; border: 0; background: none; }
.tg-box { position: absolute; left: 0; right: 0; top: calc(var(--ctl-h) / 2 - 9 * var(--t)); height: calc(18 * var(--t)); border: var(--t) solid var(--edge); display: flex; }
.tg-half { flex: 1; position: relative; }
.tg-on { background: var(--pri); box-shadow: inset 0 var(--t) 0 var(--pri-hi), inset 0 calc(-1 * var(--t)) 0 #4f913c; }
.tg-off { background: var(--track); box-shadow: inset 0 var(--t) 0 #97989b; }
.tg-on::after { content: ""; position: absolute; left: 50%; top: 30%; bottom: 30%; width: var(--t); margin-left: calc(-0.5 * var(--t)); background: #fff; }
.tg-off::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(6 * var(--t)); height: calc(6 * var(--t)); margin: calc(-3 * var(--t)) 0 0 calc(-3 * var(--t)); border: var(--t) solid var(--n90); }
.tg-knob { position: absolute; top: calc(var(--ctl-h) / 2 - 10 * var(--t)); left: 0; width: 50%; height: calc(19 * var(--t)); border: var(--t) solid var(--edge); background: var(--sec);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--sec-lip), inset 0 calc(-3 * var(--t)) 0 var(--sec-bev), inset var(--t) var(--t) 0 var(--sec-hi); transition: left 80ms ease-out; }
.tg[aria-checked="true"] .tg-knob { left: 50%; }
@media (hover: hover) { .tg:hover .tg-knob { background: var(--sec-h); } }
.tg:focus-visible, html.kbnav .tg:focus { outline: none; }
.tg:focus-visible .tg-box, html.kbnav .tg:focus .tg-box { outline: var(--t) solid #fff; }

/* Slider */
.sl { width: 100%; height: var(--ctl-h); margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
.sl::-webkit-slider-runnable-track { height: calc(5 * var(--t)); border-top: var(--t) solid var(--edge); border-bottom: var(--t) solid var(--edge); border-left: var(--t) solid var(--edge); border-right: var(--t) solid var(--edge);
  background: var(--track) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%233c8527'/%3E%3C/svg%3E") 0 0 / var(--p) 100% no-repeat; box-shadow: inset 0 var(--t) 0 rgba(255,255,255,0.25), inset 0 calc(-1 * var(--t)) 0 rgba(0,0,0,0.15); }
.sl::-webkit-slider-thumb { -webkit-appearance: none; width: calc(16 * var(--t)); height: var(--ctl-h); margin-top: calc(var(--ctl-h) / -2 + 1.5 * var(--t)); border: var(--t) solid var(--edge); background: var(--sec); border-radius: 0;
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--sec-lip), inset 0 calc(-3 * var(--t)) 0 var(--sec-bev), inset var(--t) var(--t) 0 var(--sec-hi); }
.sl::-moz-range-track { height: calc(3 * var(--t)); border: var(--t) solid var(--edge); background: var(--track); }
.sl::-moz-range-progress { height: calc(3 * var(--t)); border: var(--t) solid var(--edge); background: var(--pri); }
.sl::-moz-range-thumb { width: calc(14 * var(--t)); height: calc(var(--ctl-h) - 2 * var(--t)); border: var(--t) solid var(--edge); border-radius: 0; background: var(--sec); box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--sec-lip), inset var(--t) var(--t) 0 var(--sec-hi); }
@media (hover: hover) { .sl:hover::-webkit-slider-thumb { background: var(--sec-h); } }
.sl:focus-visible, html.kbnav .sl:focus { outline: none; }
.sl:focus-visible::-webkit-slider-thumb, html.kbnav .sl:focus::-webkit-slider-thumb { outline: var(--t) solid #fff; }

/* Segmented control */
.seg { display: flex; width: 100%; }
.seg button { flex: 1 1 0; min-width: 0; height: calc(var(--ctl-h) + 3 * var(--t)); margin-left: calc(-1 * var(--t)); padding: 0 calc(3 * var(--t)) calc(2 * var(--t)); border: var(--t) solid var(--edge); background: var(--sec); color: var(--tx-on-light);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--sec-lip), inset var(--t) var(--t) 0 var(--sec-hi); font: 400 var(--fs-ui)/1.25 var(--font-ui); position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button:first-child { margin-left: 0; }
.seg button[aria-checked="true"] { background: var(--pri); color: #fff; box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--pri-lip), inset var(--t) var(--t) 0 var(--pri-hi); }
.seg button[aria-checked="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: calc(5 * var(--t)); height: var(--t); background: #fff; }
@media (hover: hover) { .seg button:hover { background: var(--sec-h); } .seg button[aria-checked="true"]:hover { background: var(--pri-h); } }
.seg button.is-down { padding-top: calc(2 * var(--t)); padding-bottom: 0; box-shadow: inset var(--t) var(--t) 0 rgba(0,0,0,0.15); }
.seg button:focus-visible, html.kbnav .seg button:focus { outline-offset: calc(-2 * var(--t)); z-index: 1; }

/* Dropdown and text fields */
.dd { position: relative; width: 100%; }
.dd select { width: 100%; height: var(--ctl-h); -webkit-appearance: none; appearance: none; padding: 0 calc(16 * var(--t)) calc(2 * var(--t)) calc(5 * var(--t)); border: var(--t) solid var(--edge); border-radius: 0; background: var(--sec); color: var(--tx-on-light);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--sec-lip), inset var(--t) var(--t) 0 var(--sec-hi); font: 400 var(--fs-ui)/1 var(--font-ui); cursor: pointer; }
.dd .ic { position: absolute; right: calc(5 * var(--t)); top: calc(50% - 6 * var(--t)); color: var(--tx-on-light); pointer-events: none; }
.dd select:focus-visible, html.kbnav .dd select:focus { outline: var(--t) solid #fff; }
.field { display: flex; flex-direction: column; gap: calc(2 * var(--t)); }
.field label, .lbl { font: 400 var(--fs-ui)/1.25 var(--font-ui); color: #fff; }
.tf { width: 100%; min-height: calc(24 * var(--t)); padding: calc(5 * var(--t)) calc(6 * var(--t)) calc(4 * var(--t)) calc(7 * var(--t)); border: var(--t) solid var(--edge); border-radius: 0; background: var(--n80); color: #fff;
  box-shadow: inset 0 calc(2 * var(--t)) 0 var(--n90); font: 400 var(--fs-body)/1.4 var(--font-body); caret-color: var(--caret); }
.tf::placeholder { color: var(--tx-dimmest); opacity: 1; }
textarea.tf { min-height: calc(60 * var(--t)); resize: vertical; }
.tf:focus-visible, html.kbnav .tf:focus, .tf:focus { outline: var(--t) solid #fff; }
.err { color: var(--tint-red); font: 400 var(--fs-small)/1.5 var(--font-ui); min-height: 1em; }
.count { color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); text-align: right; }

/* Header bar */
.hb { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: calc(24 * var(--t)); padding: 0 0 calc(2 * var(--t)); background: var(--header); box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--header-rule); color: var(--tx-on-light); }
.hb h1 { font: 400 var(--fs-head)/1 var(--font-head); text-transform: uppercase; text-align: center; max-width: calc(100% - 64 * var(--t)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-back { position: absolute; left: 0; top: 0; bottom: calc(2 * var(--t)); width: max(var(--ctl-h), calc(26 * var(--t))); display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--tx-on-light); }
@media (hover: hover) { .hb-back:hover { background: var(--header-hover); } }
.hb-back.is-down { background: var(--header-rule); }
.hb-back:focus-visible, html.kbnav .hb-back:focus { outline-offset: calc(-1 * var(--t)); }

/* Top tabs */
.tabs { display: flex; align-items: flex-end; gap: 0; position: relative; }
.tabs-list { display: flex; flex: 1; min-width: 0; }
.tab { flex: 1 1 0; min-width: 0; position: relative; height: max(var(--ctl-h), calc(21 * var(--t))); display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--t)); padding: 0 calc(4 * var(--t)) calc(2 * var(--t));
  border: var(--t) solid var(--edge); margin-left: calc(-1 * var(--t)); background: var(--neu); color: #fff; white-space: nowrap;
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--neu-lip), inset 0 calc(-3 * var(--t)) 0 var(--neu-bev), inset var(--t) var(--t) 0 var(--neu-hi); font: 400 var(--fs-ui)/1 var(--font-ui); }
.tab:first-child { margin-left: 0; }
.tab > span { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .tab:hover { background: var(--neu-h); } }
.tab[aria-selected="true"] { background: var(--n80); padding-bottom: 0; box-shadow: inset var(--t) var(--t) 0 var(--neu-p-hi); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: calc(3 * var(--t)); height: var(--t); background: #fff; }
.tab:focus-visible, html.kbnav .tab:focus { outline-offset: calc(-2 * var(--t)); z-index: 1; }
.tab-key { flex: none; align-self: center; margin: 0 calc(2 * var(--t)); }
html[data-pointer="coarse"] .tab-key { display: none; }
html[data-layout="tall"] .tabs-list { overflow-x: auto; scrollbar-width: none; }
html[data-layout="tall"] .tabs-list::-webkit-scrollbar { display: none; }
html[data-layout="tall"] .tab { flex: 1 0 auto; }

/* Side nav */
.snav { display: flex; flex-direction: column; background: var(--n80); border: var(--t) solid var(--edge); padding: calc(2 * var(--t)) 0; }
.snav button { display: flex; align-items: center; gap: calc(4 * var(--t)); min-height: max(var(--ctl-h), calc(24 * var(--t))); padding: 0 calc(6 * var(--t)); border: 0; background: none; color: #fff; text-align: left; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.snav button[aria-selected="true"] { background: var(--n70); }
@media (hover: hover) { .snav button:hover { background: var(--n60); } }
.snav button:focus-visible, html.kbnav .snav button:focus { outline-offset: calc(-1 * var(--t)); }
.snav .grp { margin: calc(4 * var(--t)) calc(6 * var(--t)) calc(2 * var(--t)); padding-bottom: calc(2 * var(--t)); border-bottom: var(--t) solid var(--divider); color: var(--tx-dim); font: 400 var(--fs-small)/1.25 var(--font-ui); }
html[data-layout="tall"] .snav { flex-direction: row; overflow-x: auto; padding: 0; scrollbar-width: none; }
html[data-layout="tall"] .snav button { flex: 1 0 auto; white-space: nowrap; }

/* Panels, chips, misc */
.pnl { background: var(--n70); border: var(--t) solid var(--edge); }
.card { background: var(--n80); border: var(--t) solid var(--edge); }
.well { background: var(--n90); border: var(--t) solid var(--edge); }
.pad { padding: calc(6 * var(--t)); }
.chip { display: inline-flex; align-items: center; gap: calc(2 * var(--t)); min-height: calc(11 * var(--t)); padding: calc(1 * var(--t)) calc(3 * var(--t)); background: var(--n80); color: #fff; font: 400 var(--fs-small)/1.25 var(--font-ui); white-space: nowrap; }
.chip-green { background: var(--tint-green); color: var(--edge); }
.chip-red { background: var(--tint-red); color: var(--edge); }
.chip-yellow { background: var(--tint-yellow); color: var(--edge); }
.chip-blue { background: var(--tint-blue); color: var(--edge); }
.chip-gold { background: var(--gold); color: var(--edge); }
.chips { display: flex; flex-wrap: wrap; gap: calc(2 * var(--t)); }
.grp-head { display: flex; align-items: flex-end; margin: calc(8 * var(--t)) 0 calc(3 * var(--t)); border-bottom: calc(2 * var(--t)) solid var(--tint, var(--tint-green)); }
.grp-head .chip { font-size: var(--fs-ui); padding: calc(2 * var(--t)) calc(5 * var(--t)); background: var(--tint, var(--tint-green)); color: var(--edge); }
.grp-head.blue { --tint: var(--tint-blue); }
.grp-head.yellow { --tint: var(--tint-yellow); }
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: calc(12 * var(--t)); height: calc(12 * var(--t)); padding: 0 calc(3 * var(--t)) var(--t); border: var(--t) solid var(--edge); background: var(--sec); color: var(--tx-on-light);
  box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--sec-lip), inset var(--t) var(--t) 0 var(--sec-hi); font: 400 var(--fs-small)/1 var(--font-ui); white-space: nowrap; }
.info { display: flex; gap: calc(4 * var(--t)); align-items: flex-start; padding: calc(5 * var(--t)) calc(6 * var(--t)); background: rgba(0, 0, 0, 0.8); border: var(--t) solid var(--edge); color: #fff; }
.info > .ic { color: var(--tint-yellow); margin-top: calc(1 * var(--t)); }
.tip { position: absolute; padding: calc(4 * var(--t)) calc(5 * var(--t)); background: var(--tooltip); color: #fff; font: 400 var(--fs-ui)/1.25 var(--font-ui);
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% var(--t), 100% calc(100% - var(--t)), calc(100% - var(--t)) 100%, var(--t) 100%, 0 calc(100% - var(--t)), 0 var(--t)); }
.nametag { display: inline-block; padding: var(--t) calc(3 * var(--t)); background: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; font: 400 var(--fs-ui)/1.25 var(--font-ui); text-shadow: var(--t) var(--t) 0 #3f3f3f;
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% var(--t), 100% calc(100% - var(--t)), calc(100% - var(--t)) 100%, var(--t) 100%, 0 calc(100% - var(--t)), 0 var(--t)); }
.nametag small { display: block; color: var(--tx-dim); font-size: var(--fs-small); text-shadow: none; }
html[data-solid="1"] .nametag, html[data-solid="1"] .t-name, html[data-solid="1"] .foot-strip > *, html[data-solid="1"] .hud-box, html[data-solid="1"] .chat p, html[data-solid="1"] .ifoot > *, html[data-solid="1"] .feat-note, html[data-solid="1"] .overlay > span { background: #000; }
html[data-solid="1"] .scr-body > p.dim, html[data-solid="1"] .scr-body > .body.dim, html[data-solid="1"] .scr-body > .sh, html[data-solid="1"] .toolbar + p { background: #000; }
.xp { position: relative; height: calc(5 * var(--t)); border: var(--t) solid #0e1110; background: #1b2a20; box-shadow: inset 0 var(--t) 0 #273329, inset 0 calc(-1 * var(--t)) 0 #13201a; }
.xp > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #aeee7a; box-shadow: inset 0 var(--t) 0 #74a74a, inset 0 calc(-1 * var(--t)) 0 #699843; transition: width 200ms linear; }
.pings { display: inline-flex; align-items: flex-end; gap: calc(1 * var(--t)); height: calc(8 * var(--t)); }
.pings i { width: calc(2 * var(--t)); background: var(--n60); }
.pings i:nth-child(1) { height: 25%; } .pings i:nth-child(2) { height: 50%; } .pings i:nth-child(3) { height: 75%; } .pings i:nth-child(4) { height: 100%; }
.pings.on i { background: #5bd16a; }
.pings.off i { display: none; }
.pings.off .ic { display: block; color: #ff5555; width: calc(8 * var(--t)); height: calc(8 * var(--t)); }
.pings .ic { display: none; }
.live-dot { display: inline-block; width: calc(4 * var(--t)); height: calc(4 * var(--t)); background: #5bd16a; border: var(--t) solid var(--edge); flex: none; box-sizing: content-box; }
.thumb { position: relative; overflow: hidden; border: var(--t) solid var(--edge); background: #3f6e9e; aspect-ratio: 16 / 9; }
.thumb::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #8a5a32; border-top: calc(5 * var(--t)) solid #5d9c3c; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 200ms; }
.thumb img.ok { opacity: 1; }
.thumb .ph { position: absolute; left: 0; right: 0; top: 18%; text-align: center; color: rgba(255,255,255,0.85); font: 400 var(--fs-small)/1.25 var(--font-ui); padding: 0 calc(3 * var(--t)); }
.thumb img.ok + .ph { display: none; }
.lead { font-size: calc(var(--fs-body) * 1.08); color: #fff; }
.dim { color: var(--tx-dim); }
.dimmest { color: var(--tx-dimmest); }
.body p + p { margin-top: calc(4 * var(--t)); }
.body, .prose { max-width: 68ch; }
.sh { font: 400 var(--fs-head)/1.1 var(--font-head); text-transform: uppercase; color: #fff; margin: calc(8 * var(--t)) 0 calc(4 * var(--t)); }
.sh:first-child { margin-top: 0; }
.sh-sm { font: 400 var(--fs-ui)/1.25 var(--font-ui); color: var(--tx-dim); margin: calc(6 * var(--t)) 0 calc(3 * var(--t)); }
.stack { display: flex; flex-direction: column; gap: calc(4 * var(--t)); }
.row { display: flex; align-items: center; gap: calc(4 * var(--t)); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
.ext-ic { opacity: 0.85; }

/* Expander */
.exp { border: var(--t) solid var(--edge); background: var(--n80); }
.exp > button { display: flex; align-items: center; gap: calc(4 * var(--t)); width: 100%; min-height: var(--ctl-h); padding: calc(3 * var(--t)) calc(5 * var(--t)); border: 0; background: var(--neu); color: #fff; text-align: left;
  box-shadow: inset 0 calc(-1 * var(--t)) 0 var(--neu-bev), inset var(--t) var(--t) 0 var(--neu-hi); font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.exp > button .ic { transition: transform 150ms; }
.exp > button[aria-expanded="true"] .ic.chev { transform: rotate(90deg); }
@media (hover: hover) { .exp > button:hover { background: var(--neu-h); } }
.exp > button small { display: block; color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); margin-top: var(--t); }
.exp > button:focus-visible, html.kbnav .exp > button:focus { outline-offset: calc(-1 * var(--t)); }
.exp-body { padding: calc(6 * var(--t)); }
.step { display: grid; grid-template-columns: max-content 1fr; gap: calc(3 * var(--t)) calc(5 * var(--t)); align-items: start; }
.step + .step { margin-top: calc(4 * var(--t)); }
.step .chip { min-width: calc(30 * var(--t)); justify-content: center; margin-top: calc(1 * var(--t)); }
html[data-layout="tall"] .step { grid-template-columns: 1fr; }
html[data-layout="tall"] .step .chip { justify-self: start; }

/* Modal and drawer */
dialog { padding: 0; border: 0; background: none; color: #fff; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.md { width: min(calc(100vw - 16 * var(--t)), calc(260 * var(--t))); max-height: calc(100dvh - 16 * var(--t)); margin: auto; display: flex; flex-direction: column; background: var(--n80); border: var(--t) solid var(--edge); }
.md.wide { width: min(calc(100vw - 12 * var(--t)), calc(420 * var(--t))); }
.md-head { display: flex; align-items: center; gap: calc(4 * var(--t)); padding: calc(7 * var(--t)) calc(8 * var(--t)) calc(3 * var(--t)); }
.md-head h2 { flex: 1; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.md-body { padding: calc(3 * var(--t)) calc(8 * var(--t)) calc(8 * var(--t)); overflow: auto; overscroll-behavior: contain; }
.md-foot { display: flex; gap: calc(4 * var(--t)); padding: calc(6 * var(--t)) calc(8 * var(--t)); border-top: var(--t) solid var(--edge); background: var(--n80); box-shadow: 0 calc(-1 * var(--t)) 0 #2a2b2c; }
.md-foot > * { flex: 1 1 0; min-width: 0; }
.md-x { margin: calc(-4 * var(--t)) calc(-4 * var(--t)) 0 0; }
dialog.drawer { margin: 0 0 0 auto; height: 100%; max-height: 100dvh; width: min(100vw, calc(200 * var(--t))); }
dialog.drawer[open] { animation: drIn var(--route) both; }
dialog.drawer.closing { animation: drOut 200ms ease-in both; }
@keyframes drIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drOut { from { transform: none; } to { transform: translateX(100%); } }
html.rm dialog.drawer[open], html.rm dialog.drawer.closing { animation: none; }
.dr { height: 100%; display: flex; flex-direction: column; background: var(--n80); border-left: var(--t) solid var(--edge); }
.dr .md-body { flex: 1; padding-top: calc(6 * var(--t)); padding-bottom: max(calc(8 * var(--t)), env(safe-area-inset-bottom)); }
dialog.viewer .md { width: min(calc(100vw - 8 * var(--t)), calc(560 * var(--t))); }
.viewer-img { background: #000; border: var(--t) solid var(--edge); touch-action: pan-y; }
.viewer-img img { width: 100%; max-height: 62dvh; object-fit: contain; margin: auto; }
.pre { margin: 0; white-space: pre-wrap; font: 400 calc(var(--fs-body) * 0.85)/1.5 var(--font-mono); color: var(--tx-dim); }

/* Toasts */
.toasts { position: fixed; left: 50%; top: max(calc(4 * var(--t)), env(safe-area-inset-top)); z-index: 60; transform: translateX(-50%); width: min(calc(100vw - 8 * var(--t)), calc(170 * var(--t))); pointer-events: none; }
.toast { position: relative; display: flex; align-items: center; gap: calc(5 * var(--t)); width: 100%; padding: calc(5 * var(--t)) calc(6 * var(--t)) calc(7 * var(--t)); border: 0; background: var(--toast); color: #fff; text-align: left; pointer-events: auto;
  box-shadow: inset 0 0 0 var(--t) #000, inset 0 0 0 calc(3 * var(--t)) var(--toast-rim);
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% var(--t), 100% calc(100% - var(--t)), calc(100% - var(--t)) 100%, var(--t) 100%, 0 calc(100% - var(--t)), 0 var(--t));
  animation: toastIn 400ms linear both; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.toast.out { animation: toastOut 400ms linear both; }
.toast .ti { flex: none; width: calc(18 * var(--t)); height: calc(18 * var(--t)); display: grid; place-items: center; background: var(--n80); border: var(--t) solid #000; }
.toast b { display: block; font-weight: 400; }
.toast small { display: flex; align-items: center; gap: calc(2 * var(--t)); color: var(--tx-dim); font-size: var(--fs-ui); }
.toast .bar { position: absolute; left: calc(3 * var(--t)); right: calc(3 * var(--t)); bottom: calc(3 * var(--t)); height: calc(3 * var(--t)); background: var(--n80); }
.toast .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--inf); transform-origin: left; animation: toastBar linear both; }
@keyframes toastIn { from { transform: translateY(calc(var(--td, -1) * (100% + 8 * var(--t)))); } to { transform: none; } }
@keyframes toastOut { from { transform: none; } to { transform: translateY(calc(var(--td, -1) * (100% + 8 * var(--t)))); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html.rm .toast { animation: pfIn 200ms linear both; }
html.rm .toast.out { animation: pfOut 200ms linear both; }

/* Item sprites (assets/ui/items.png, 16 x 16 cells) and block items
   (assets/ui/blocks.png, 64 x 64 cells shown at 16t), our own art. The k
   property scales by whole numbers; x, y and sw come from ui/icons.js. */
.it { flex: none; display: block; width: calc(16 * var(--k, 1) * var(--t)); height: calc(16 * var(--k, 1) * var(--t)); background: url(assets/ui/items.png?v=23) no-repeat;
  background-size: calc(var(--sw) * 16 * var(--k, 1) * var(--t)) auto; background-position: calc(var(--x) * -16 * var(--k, 1) * var(--t)) calc(var(--y) * -16 * var(--k, 1) * var(--t)); image-rendering: pixelated; }
.it.blk { background-image: url(assets/ui/blocks.png?v=23); }
.it.xpo { width: calc(7 * var(--t)); height: calc(7 * var(--t)); background-size: calc(var(--sw) * 16 * var(--t)) auto; background-position: calc(var(--x) * -16 * var(--t)) calc(var(--y) * -16 * var(--t)); }
.islot { --k: 1; flex: none; width: calc(18 * var(--k) * var(--t)); height: calc(18 * var(--k) * var(--t)); display: grid; place-items: center; background: var(--islot-face);
  box-shadow: inset 0 calc(var(--k) * var(--t)) 0 var(--islot-top), inset calc(var(--k) * var(--t)) 0 0 var(--islot-left), inset calc(-1 * var(--k) * var(--t)) calc(-1 * var(--k) * var(--t)) 0 var(--islot-lo); }
.k2 { --k: 2; }
[data-tex] { background-size: calc(16 * var(--t)) calc(16 * var(--t)); image-rendering: pixelated; }
[data-tex="grass"] { background-image: url(assets/ui/tile-grass.png?v=23); }
[data-tex="grasstop"] { background-image: url(assets/ui/tile-grasstop.png?v=23); }
[data-tex="dirt"] { background-image: url(assets/ui/tile-dirt.png?v=23); }
[data-tex="stone"] { background-image: url(assets/ui/tile-stone.png?v=23); }
[data-tex="planks"] { background-image: url(assets/ui/tile-planks.png?v=23); }
[data-tex="darkplanks"] { background-image: url(assets/ui/tile-darkplanks.png?v=23); }
[data-tex="bricks"] { background-image: url(assets/ui/tile-bricks.png?v=23); }
[data-tex="stonebricks"] { background-image: url(assets/ui/tile-stonebricks.png?v=23); }
[data-tex="sand"] { background-image: url(assets/ui/tile-sand.png?v=23); }
[data-tex="nexus"] { background-image: url(assets/ui/tile-nexus.png?v=23); }
[data-tex="breeze"] { background-image: url(assets/ui/tile-breeze.png?v=23); }
[data-tex="logside"] { background-image: url(assets/ui/tile-logside.png?v=23); }
[data-tex="leaves"] { background-image: url(assets/ui/tile-leaves.png?v=23); }
[data-tex="board"] { background-image: url(assets/ui/tile-board.png?v=23); }
[data-tex="cobble"] { background-image: url(assets/ui/tile-cobble.png?v=23); }

/* Scrollbars */
.scroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--header) var(--n90); }
.scroll::-webkit-scrollbar { width: calc(4 * var(--t)); height: calc(4 * var(--t)); }
.scroll::-webkit-scrollbar-track { background: var(--n90); }
.scroll::-webkit-scrollbar-thumb { background: var(--header); }

/* Title screen (release 26.52 layout). ui/screens/title.js places every block
   in whole texels with inline left, top, width and height; these rules draw. */
.title { color: #fff; }
.title-col { position: absolute; inset: 0; }
.title .tp { position: absolute; display: flex; z-index: 1; }
.title .tp > .cb, .title .tp > .eb { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; }
.title .tp > .eb > .f { padding-left: calc(2 * var(--t)); padding-right: calc(2 * var(--t)); }
.title .logo-wrap { display: block; }
.title .t-gear { padding: 0 0 calc(2 * var(--t)); }
.logo { display: flex; flex-direction: column; align-items: center; }
.logo img { width: 100%; height: auto; image-rendering: pixelated; }
.logo span { margin-top: calc(2 * var(--t)); font: 400 calc(6 * var(--t))/calc(8 * var(--t)) var(--font-head); color: #fff; text-shadow: var(--t) var(--t) 0 #404040; letter-spacing: calc(0.5 * var(--t)); white-space: nowrap; }
.splash { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.splash > span { position: absolute; left: 0; top: 0; color: #ffff00; text-shadow: var(--t) var(--t) 0 #404000; font: 400 calc(8 * var(--fu))/1.25 var(--font-ui); white-space: pre; text-align: center; transform: translate(-50%, -50%) rotate(-20deg); animation: splashPulse 1s infinite; }
@keyframes splashPulse {
  0% { transform: translate(-50%, -50%) rotate(-20deg) scale(1); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  50% { transform: translate(-50%, -50%) rotate(-20deg) scale(0.94); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  100% { transform: translate(-50%, -50%) rotate(-20deg) scale(1); }
}
html.rm .splash > span { animation: none; }
.t-stack { flex-direction: column; gap: calc(2 * var(--t)); }
.title .t-stack > .cb, .title .t-stack > .eb { flex: none; height: calc(var(--bh) * var(--t)); }
/* The Plugins banner: our own picture, a dark label, the yellow tag with its
   notched tail over the top right corner, the small YughX over the left edge. */
.t-banner { position: relative; flex: none; height: calc(var(--bh) * var(--t)); padding: 0; border: var(--t) solid var(--c-border); color: #1e1e1f; overflow: visible;
  background: #9fd0ff url(assets/ui/banner-plugins.png?v=23) 50% 100% / calc(180 * var(--t)) calc(28 * var(--t)) no-repeat; image-rendering: pixelated; font: 400 var(--fs-ui)/1 var(--font-ui); }
.t-banner .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: calc(6 * var(--t)); }
.t-banner .tag { position: absolute; right: calc(-5 * var(--t)); top: calc(-5 * var(--t)); height: calc(12 * var(--t)); display: flex; align-items: center; padding: 0 calc(3 * var(--t)); background: #1e1e1f; color: #ffcc22; white-space: nowrap; z-index: 2; }
.t-banner .tag::after { content: ""; position: absolute; left: 100%; top: calc(2 * var(--t)); width: calc(6 * var(--t)); height: calc(12 * var(--t)); background: url(assets/ui/tag-tail.png?v=23) 0 0 / 100% 100%; image-rendering: pixelated; }
.t-banner .fig { position: absolute; left: calc(-9 * var(--t)); bottom: calc(-4 * var(--t)); width: calc(16 * var(--t)); height: calc(32 * var(--t)); max-width: none; image-rendering: pixelated; pointer-events: none; z-index: 2; }
@media (hover: hover) { .t-banner:hover { border-color: #fff; box-shadow: 0 0 0 var(--t) #fff; } }
.t-banner.is-down, .t-banner:focus-visible, html.kbnav .t-banner:focus { border-color: #fff; box-shadow: 0 0 0 var(--t) #fff; outline: none; }
html[data-input="pointer"] .t-banner.is-down .lab { padding-top: var(--t); }
/* Promo card (the 26.52 wiki left column): blue pixel ribbon, picture, button. */
.t-card { display: block; }
.t-card .rib { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 calc(4 * var(--t)) var(--t); border: var(--t) solid #0f2a63; background: var(--inf); color: #fff; font: 400 var(--fs-ui)/calc(10 * var(--fu)) var(--font-ui); text-shadow: var(--t) var(--t) 0 #193b7e; text-align: center; overflow: hidden;
  box-shadow: inset var(--t) var(--t) 0 #6a96ec, inset calc(-1 * var(--t)) calc(-1 * var(--t)) 0 #2050a7;
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% var(--t), 100% 100%, 0 100%, 0 var(--t)); }
.t-card .thumb { flex: none; border-top: 0; aspect-ratio: auto; }
.t-card > .cb, .t-card > .eb { flex: none; }
.t-chip { display: flex; align-items: center; gap: calc(2 * var(--t)); }
.feat-note { padding: calc(2 * var(--t)) calc(3 * var(--t)); background: rgba(0, 0, 0, 0.75); color: #fff; font: 400 var(--fs-small)/1.5 var(--font-ui); }
.title .t-bell { padding: 0 0 calc(2 * var(--t)); }
.t-bell .it { pointer-events: none; }
.t-dot { position: absolute; right: calc(-3 * var(--t)); top: calc(-3 * var(--t)); width: calc(6 * var(--t)); height: calc(6 * var(--t)); background: #f01e1e; box-shadow: inset calc(-1 * var(--t)) calc(-1 * var(--t)) 0 #a50f0f; pointer-events: none; }
.title .t-prof { justify-content: flex-start; padding-left: calc(2 * var(--t)); }
.t-prof .face { flex: none; width: calc(18 * var(--t)); height: calc(18 * var(--t)); max-width: none; border: var(--t) solid var(--c-border); image-rendering: pixelated; }
.t-name { align-items: center; justify-content: center; padding: calc(2 * var(--t)) calc(3 * var(--t)); font: 400 var(--fs-ui)/1 var(--font-ui); color: #fff; background: rgba(0, 0, 0, 0.55); text-shadow: var(--t) var(--t) 0 #1e1e1f; white-space: nowrap; pointer-events: none;
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% var(--t), 100% calc(100% - var(--t)), calc(100% - var(--t)) 100%, var(--t) 100%, 0 calc(100% - var(--t)), 0 var(--t)); }
.slot { position: relative; touch-action: none; background: none; }
.slot > img { position: absolute; left: 50%; bottom: 4%; height: 88%; width: auto; max-width: none; transform: translateX(-50%); image-rendering: pixelated; transition: opacity 300ms; pointer-events: none; }
.slot.live > img { opacity: 0; }
.foot-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(10 * var(--t)); display: flex; justify-content: space-between; align-items: flex-end; gap: calc(4 * var(--t)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font: 400 var(--fs-small)/calc(8 * var(--fs)) var(--font-ui); pointer-events: none; }
.foot-strip > * { background: rgba(0, 0, 0, 0.6); padding: var(--t) calc(2 * var(--t)); pointer-events: auto; color: #fff; }
.foot-strip .ver { white-space: nowrap; }
body > .foot-strip { display: none; }
html[data-layout="tall"] .title { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
html[data-layout="tall"] .title-col { position: relative; inset: auto; }
html[data-layout="tall"] .foot-strip { height: auto; flex-direction: column; align-items: stretch; gap: calc(2 * var(--t)); padding: 0; line-height: calc(11 * var(--fs)); }
html[data-layout="tall"] .foot-strip .ver { align-self: flex-end; }

/* Inner screens */
.scr { display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.scr-body { flex: 1; min-height: 0; padding: calc(6 * var(--t)) calc(8 * var(--t)) 0; }
html[data-layout="tall"] .scr-body { padding: calc(4 * var(--t)) calc(4 * var(--t)) 0; }
.split { display: grid; grid-template-columns: minmax(0, var(--lw, 36%)) minmax(0, 1fr); gap: calc(6 * var(--t)); align-items: start; }
html[data-layout="tall"] .split { grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--t)); }
.content { background: var(--n70); border: var(--t) solid var(--edge); padding: calc(6 * var(--t)); min-width: 0; }
html[data-layout="tall"] .content { padding: calc(5 * var(--t)); }
.ifoot { margin: calc(10 * var(--t)) 0 0; padding: calc(4 * var(--t)) 0 max(calc(6 * var(--t)), env(safe-area-inset-bottom)); color: var(--tx-dimmest); font: 400 var(--fs-small)/1.5 var(--font-ui); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(1 * var(--t)) calc(6 * var(--t)); }
.ifoot > * { background: rgba(0, 0, 0, 0.55); padding: 0 calc(2 * var(--t)); }
.ifoot a { color: #fff; }
.toolbar { display: flex; align-items: center; gap: calc(4 * var(--t)); margin: calc(4 * var(--t)) 0; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

/* Profile */
.pf-card { display: flex; flex-direction: column; gap: 0; }
.charwin { position: relative; height: calc(120 * var(--t)); border: var(--t) solid var(--edge); }
.charwin .slot { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(72 * var(--t)); transform: translateX(-50%); }
html[data-layout="tall"] .charwin { height: calc(100 * var(--t)); }
html[data-layout="tall"] .charwin .slot { width: calc(60 * var(--t)); }
.pf-info { background: var(--n80); border: var(--t) solid var(--edge); border-top: 0; padding: calc(5 * var(--t)) calc(6 * var(--t)); display: flex; flex-direction: column; gap: calc(3 * var(--t)); }
.pf-tag { font: 400 var(--fs-head)/1 var(--font-head); }
.status { display: flex; gap: calc(3 * var(--t)); align-items: baseline; }
.status .live-dot { transform: translateY(calc(-1 * var(--t))); }
.pf-actions { display: flex; flex-direction: column; gap: calc(3 * var(--t)); margin-top: calc(3 * var(--t)); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(4 * var(--t)); }
html[data-layout="tall"] .tiles { grid-template-columns: minmax(0, 1fr); }
.tile { background: var(--n80); border: var(--t) solid var(--edge); padding: calc(5 * var(--t)); }
.tile h3 { font: 400 var(--fs-ui)/1.25 var(--font-ui); margin-bottom: calc(2 * var(--t)); }
.inv { background: var(--inv-face); border: var(--t) solid var(--inv-edge); box-shadow: inset var(--t) var(--t) 0 var(--inv-hi), inset calc(-2 * var(--t)) calc(-2 * var(--t)) 0 var(--inv-lo); padding: calc(6 * var(--t)); color: var(--inv-text); display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(120 * var(--t)), 1fr)); gap: calc(5 * var(--t)); }
html[data-layout="tall"] .inv { grid-template-columns: minmax(0, 1fr); padding: calc(4 * var(--t)); }
.inv-card { align-content: start; display: grid; grid-template-columns: auto 1fr; gap: calc(2 * var(--t)) calc(5 * var(--t)); align-items: start; }
.inv-card .islot { grid-row: span 2; }
.inv-card h3 { font: 400 var(--fs-ui)/1.25 var(--font-ui); color: var(--inv-text); }
.inv-card h3 small { display: block; font-size: var(--fs-small); color: #555a62; }
.inv-card .chips { grid-column: 2; }
.inv-card .chip { background: #3a3d42; color: #fff; }
.tl { display: flex; flex-direction: column; gap: calc(2 * var(--t)); }
.tl li { display: grid; grid-template-columns: calc(60 * var(--t)) 1fr; gap: calc(5 * var(--t)); align-items: start; padding: calc(3 * var(--t)) calc(4 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); }
.tl li.big { font-weight: 700; }
.tl .chip { justify-content: center; }
html[data-layout="tall"] .tl li { grid-template-columns: 1fr; gap: calc(2 * var(--t)); }
html[data-layout="tall"] .tl .chip { justify-self: start; }
.orow { padding: calc(4 * var(--t)) calc(5 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); }
.orow + .orow { border-top: 0; }
.orow h3 { font: 400 var(--fs-ui)/1.25 var(--font-ui); margin-bottom: var(--t); }

/* Projects */
.wl { display: flex; flex-direction: column; gap: calc(4 * var(--t)); }
.wrow { display: flex; align-items: stretch; min-height: calc(43 * var(--t)); background: var(--neu); border: var(--t) solid var(--edge); color: #fff; text-decoration: none; box-shadow: inset var(--t) var(--t) 0 var(--neu-hi), inset 0 calc(-1 * var(--t)) 0 var(--neu-bev); }
@media (hover: hover) { .wrow:hover { background: var(--neu-h); } }
.wrow.is-down { background: var(--neu-p); }
.wrow:focus-visible, html.kbnav .wrow:focus { outline-offset: 0; }
.wrow .thumb { flex: none; width: calc(60 * var(--t)); align-self: center; margin: calc(4 * var(--t)); }
.wrow .mid { flex: 1; min-width: 0; padding: calc(4 * var(--t)) calc(2 * var(--t)); display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--t)); }
.wrow .nm { font: 400 var(--fs-ui)/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .meta { flex: none; align-self: center; text-align: right; color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); padding: 0 calc(5 * var(--t)); max-width: 30%; }
.open-seg { flex: none; width: calc(28 * var(--t)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--t)); border-left: var(--t) solid var(--edge); font: 400 var(--fs-small)/1 var(--font-ui); }
html[data-layout="tall"] .wrow .meta { display: none; }
html[data-layout="tall"] .wrow .thumb { width: calc(50 * var(--t)); }
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4 * var(--t)); }
html[data-layout="tall"] .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wcard { display: flex; flex-direction: column; background: var(--neu); border: var(--t) solid var(--edge); color: #fff; text-decoration: none; }
@media (hover: hover) { .wcard:hover { background: var(--neu-h); } }
.wcard .thumb { border: 0; border-bottom: var(--t) solid var(--edge); }
.wcard .ov { position: absolute; left: calc(2 * var(--t)); bottom: calc(2 * var(--t)); right: calc(2 * var(--t)); z-index: 1; }
.wcard .cap { display: flex; align-items: center; gap: calc(3 * var(--t)); padding: calc(3 * var(--t)) 0 calc(3 * var(--t)) calc(4 * var(--t)); }
.wcard .cap > div { flex: 1; min-width: 0; }
.wcard .nm { font: 400 var(--fs-ui)/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcard .open-seg { width: calc(22 * var(--t)); align-self: stretch; }
.pd-left { display: flex; flex-direction: column; gap: calc(4 * var(--t)); }
.pd-card { display: flex; flex-direction: column; gap: calc(3 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); padding: calc(4 * var(--t)) calc(5 * var(--t)); }
.pd-card p { margin: 0; }
.pd-name { font: 400 calc(12 * var(--fu))/1.25 var(--font-ui); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(70 * var(--t)), 1fr)); gap: calc(3 * var(--t)); margin: calc(5 * var(--t)) 0; }
.fact { background: var(--n80); border: var(--t) solid var(--edge); padding: calc(4 * var(--t)) calc(5 * var(--t)); }
.fact b { display: block; font: 400 var(--fs-big)/1.1 var(--font-ui); color: #fff; word-break: break-word; }
.fact span { color: var(--tx-dim); font-size: 0.92em; line-height: 1.35; display: block; margin-top: var(--t); }
.lbl-row { color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); text-transform: uppercase; margin-bottom: var(--t); }
.checks li { display: flex; gap: calc(4 * var(--t)); align-items: center; padding: calc(3 * var(--t)) 0; }
.checks .ic { color: var(--tint-green); }
.media { display: flex; gap: calc(4 * var(--t)); overflow-x: auto; padding-bottom: calc(2 * var(--t)); }
.media button { flex: none; width: calc(90 * var(--t)); padding: 0; border: 0; background: none; text-align: left; color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.media button .thumb { margin-bottom: calc(2 * var(--t)); }
.media button:focus-visible .thumb, html.kbnav .media button:focus .thumb { outline: var(--t) solid #fff; }
.also li { margin-top: calc(4 * var(--t)); }
.vers { display: grid; gap: calc(3 * var(--t)); }
.vers .chips { margin-top: var(--t); }

/* Diagrams */
.dg { margin: calc(6 * var(--t)) 0; background: var(--n80); border: var(--t) solid var(--edge); padding: calc(5 * var(--t)); }
.dg-title { font: 400 var(--fs-ui)/1.25 var(--font-ui); margin-bottom: calc(4 * var(--t)); }
.layer { display: flex; align-items: center; gap: calc(4 * var(--t)); padding: calc(3 * var(--t)) calc(5 * var(--t)); background: var(--neu); border: var(--t) solid var(--edge); }
.layer + .layer { border-top: 0; }
.layer.ours { box-shadow: inset calc(2 * var(--t)) 0 0 var(--pri); }
.layer > div { flex: 1; min-width: 0; }
.layer b { display: block; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.layer span { display: block; color: var(--tx-dim); font-size: 0.88em; line-height: 1.35; }
.dg-foot { margin-top: calc(4 * var(--t)); color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.net { display: flex; flex-direction: column; align-items: stretch; gap: calc(3 * var(--t)); }
.net-box { background: var(--neu); border: var(--t) solid var(--edge); padding: calc(3 * var(--t)) calc(5 * var(--t)); text-align: center; }
.net-box b { display: block; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.net-box span { color: var(--tx-dim); font-size: 0.88em; }
.net-arrow { align-self: center; color: #fff; }
.net-regions { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: calc(2 * var(--t)); }
.net-reg { border: var(--t) solid var(--edge); background: var(--n90); padding: calc(3 * var(--t)); box-shadow: inset 0 calc(3 * var(--t)) 0 var(--rt, var(--tint-blue)); padding-top: calc(5 * var(--t)); }
.net-reg b { display: block; text-align: center; font: 400 var(--fs-ui)/1.2 var(--font-head); margin-bottom: calc(2 * var(--t)); }
.net-reg i { display: block; font-style: normal; text-align: center; background: var(--neu); border: var(--t) solid var(--edge); margin-top: var(--t); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.net-link { width: calc(10 * var(--t)); border-top: calc(2 * var(--t)) dashed var(--tint-yellow); }
.net-linklbl { text-align: center; color: var(--tint-yellow); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.net-shared { background: var(--neu); border: var(--t) solid var(--edge); padding: calc(3 * var(--t)) calc(5 * var(--t)); }
.net-shared > b { display: block; text-align: center; font: 400 var(--fs-ui)/1.2 var(--font-head); margin-bottom: calc(2 * var(--t)); }
.net-shared ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--t)); }
.net-shared li { background: var(--n90); border: var(--t) solid var(--edge); padding: calc(2 * var(--t)); text-align: center; font: 400 var(--fs-small)/1.5 var(--font-ui); }
.net-shared li span { display: block; color: var(--tx-dim); }
html[data-layout="tall"] .net-regions { grid-template-columns: 1fr; }
html[data-layout="tall"] .net-link { width: auto; height: calc(6 * var(--t)); border-top: 0; border-left: calc(2 * var(--t)) dashed var(--tint-yellow); justify-self: center; }
html[data-layout="tall"] .net-shared ul { grid-template-columns: 1fr; }
.tc-chart .bars { display: flex; flex-direction: column; gap: calc(5 * var(--t)); position: relative; }
.tc-row { display: grid; grid-template-columns: calc(52 * var(--t)) 1fr; gap: calc(4 * var(--t)); align-items: center; }
html[data-layout="tall"] .tc-row { grid-template-columns: 1fr; gap: var(--t); }
.tc-row > span { font: 400 var(--fs-small)/1.25 var(--font-ui); color: var(--tx-dim); }
.tc-track { padding-right: calc(34 * var(--t)); }
.tc-in { position: relative; display: flex; flex-direction: column; gap: var(--t); }
.tc-bar { position: relative; height: calc(7 * var(--t)); min-width: calc(1 * var(--t)); border: var(--t) solid var(--edge); }
.tc-bar.b { background: var(--dst); }
.tc-bar.a { background: var(--pri); }
.tc-bar em { position: absolute; left: calc(100% + 3 * var(--t)); top: 50%; transform: translateY(-50%); font: 400 var(--fs-small)/1 var(--font-ui); font-style: normal; white-space: nowrap; color: #fff; }
.tc-budget { position: absolute; top: calc(-2 * var(--t)); bottom: calc(-2 * var(--t)); border-left: calc(1 * var(--t)) dashed var(--tint-yellow); pointer-events: none; }
.tc-legend { display: flex; flex-wrap: wrap; gap: calc(3 * var(--t)) calc(8 * var(--t)); margin-top: calc(5 * var(--t)); font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--tx-dim); }
.tc-legend i { display: inline-block; width: calc(6 * var(--t)); height: calc(6 * var(--t)); border: var(--t) solid var(--edge); vertical-align: middle; margin-right: calc(2 * var(--t)); }
.code { background: var(--n90); border: var(--t) solid var(--edge); margin: calc(6 * var(--t)) 0 0; }
.code .fn { padding: calc(2 * var(--t)) calc(5 * var(--t)); background: var(--n80); border-bottom: var(--t) solid var(--edge); font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--tx-dim); }
.code pre { margin: 0; padding: calc(5 * var(--t)); overflow-x: auto; font: 400 calc(var(--fs-body) * 0.85)/1.55 var(--font-mono); color: #e8e8e8; }
.cap-txt { margin-top: calc(3 * var(--t)); color: var(--tx-dim); font-size: 0.9em; }

/* Servers */
.sv-list { display: flex; flex-direction: column; background: var(--n90); border: var(--t) solid var(--edge); padding: calc(2 * var(--t)) calc(3 * var(--t)) calc(4 * var(--t)); }
.sv-grp { margin: calc(5 * var(--t)) calc(2 * var(--t)) calc(2 * var(--t)); color: var(--tx-dim); font: 400 var(--fs-small)/1.25 var(--font-ui); }
.sv-row { display: flex; align-items: center; gap: calc(4 * var(--t)); width: 100%; padding: calc(4 * var(--t)); border: var(--t) solid transparent; background: none; color: #fff; text-align: left; text-decoration: none; }
.sv-row[aria-current="true"] { background: var(--n70); border-color: var(--edge); box-shadow: inset var(--t) var(--t) 0 var(--neu-hi); }
@media (hover: hover) { .sv-row:hover { background: var(--n80); } .sv-row[aria-current="true"]:hover { background: var(--n60); } }
.sv-row .sq { flex: none; width: calc(16 * var(--t)); height: calc(16 * var(--t)); display: grid; place-items: center; border: var(--t) solid var(--edge); background: var(--sq, var(--n90)); color: var(--edge); }
.sv-row .mid { flex: 1; min-width: 0; }
.sv-row b { display: block; font: 400 var(--fs-ui)/1.25 var(--font-ui); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-row small { display: block; color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-row .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--t); font: 400 var(--fs-small)/1.25 var(--font-ui); color: var(--tx-dim); }
.sv-detail { background: var(--n70); border: var(--t) solid var(--edge); }
.sv-banner { border: 0; border-bottom: var(--t) solid var(--edge); }
.sv-banner .pat { position: absolute; inset: 0; display: grid; place-items: center; background: #24435a url(assets/ui/tile-grasstop.png?v=23) 0 0 / calc(16 * var(--t)) calc(16 * var(--t)); image-rendering: pixelated; font: 400 var(--fs-head)/1 var(--font-head); text-shadow: var(--t) var(--t) 0 #000; }
.sv-bar { display: flex; align-items: center; gap: calc(5 * var(--t)); flex-wrap: wrap; padding: calc(5 * var(--t)) calc(6 * var(--t)); border-bottom: var(--t) solid var(--edge); background: var(--n80); font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.sv-bar .eb { margin-left: auto; min-width: calc(80 * var(--t)); }
html[data-layout="tall"] .sv-bar .eb { margin-left: 0; width: 100%; }
.sv-rows .orow { border-left: 0; border-right: 0; background: var(--n70); display: flex; align-items: center; gap: calc(4 * var(--t)); }
.sv-rows .orow > div { flex: 1; min-width: 0; }
.sv-rows .orow b { display: block; font-weight: 400; color: #fff; word-break: break-word; }
.sv-rows .orow small { display: block; color: var(--tx-dim); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.sv-actions { display: flex; gap: calc(4 * var(--t)); flex-wrap: wrap; padding: calc(5 * var(--t)) calc(6 * var(--t)); }
.join-row { display: flex; align-items: center; gap: calc(4 * var(--t)); padding: calc(4 * var(--t)); background: var(--n90); border: var(--t) solid var(--edge); margin-top: calc(3 * var(--t)); }
.join-row > div { flex: 1; min-width: 0; }
.join-row b { display: block; font: 400 var(--fs-ui)/1.25 var(--font-ui); }

/* Plugins */
.filters { display: flex; gap: calc(2 * var(--t)); overflow-x: auto; padding: var(--t) var(--t) calc(3 * var(--t)); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
html[data-layout="wide"] .filters, html[data-pointer="fine"] .filters { flex-wrap: wrap; overflow-x: visible; }
.filters button { flex: none; height: max(var(--ctl-h), calc(18 * var(--t))); padding: 0 calc(5 * var(--t)) calc(2 * var(--t)); border: var(--t) solid var(--edge); background: var(--neu); color: #fff; font: 400 var(--fs-small)/1 var(--font-ui);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--neu-lip), inset var(--t) var(--t) 0 var(--neu-hi); white-space: nowrap; }
.filters button[aria-checked="true"] { background: var(--pri); box-shadow: inset 0 calc(-2 * var(--t)) 0 var(--pri-lip), inset var(--t) var(--t) 0 var(--pri-hi); }
@media (hover: hover) { .filters button:hover { background: var(--neu-h); } .filters button[aria-checked="true"]:hover { background: var(--pri-h); } }
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(4 * var(--t)); }
html[data-layout="tall"] .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ptiles > li { display: flex; }
.ptile { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; border: var(--t) solid var(--edge); background: var(--n90); color: #fff; text-align: left; min-width: 0; }
@media (hover: hover) { .ptile:hover { background: var(--n70); border-color: #fff; } }
.ptile.is-down { background: var(--n80); border-color: #fff; }
.pt-art { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; width: 100%; border-bottom: var(--t) solid var(--edge); background-color: var(--n80); box-shadow: inset 0 0 0 calc(80 * var(--t)) rgba(0, 0, 0, 0.18); }
.pt-txt { padding: calc(3 * var(--t)) calc(4 * var(--t)) calc(4 * var(--t)); display: flex; flex-direction: column; gap: calc(2 * var(--t)); min-width: 0; width: 100%; }
.pt-txt b { font: 400 var(--fs-ui)/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-txt small { color: var(--tx-dim); font: 400 var(--fs-small)/1.25 var(--font-ui); }

/* Achievements */
.ach-card .top { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--t)); padding: calc(8 * var(--t)) calc(6 * var(--t)) calc(5 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); flex-wrap: wrap; text-align: center; }
.ach-card .pct { font: 400 calc(32 * var(--fu))/1 var(--font-ui); }
.ach-card .top p { flex-basis: 100%; font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.ach-stat { display: flex; align-items: center; gap: calc(5 * var(--t)); padding: calc(4 * var(--t)) calc(6 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); border-top: 0; }
.ach-stat small { display: block; color: var(--tx-dim); font: 400 var(--fs-small)/1.25 var(--font-ui); }
.ach-stat b { display: block; font: 400 var(--fs-ui)/1.5 var(--font-ui); }
.ach-list { display: flex; flex-direction: column; gap: calc(3 * var(--t)); }
.arow { display: flex; align-items: center; gap: calc(5 * var(--t)); padding: calc(4 * var(--t)); background: var(--neu); border: var(--t) solid var(--edge); }
.arow:focus { outline: none; }
.arow.flash { animation: flash 1.2s steps(2) 1; }
@keyframes flash { 0%, 100% { outline: var(--t) solid #fff; } 50% { outline: var(--t) solid transparent; } }
.atile { position: relative; flex: none; width: calc(80 * var(--t)); aspect-ratio: 16 / 9; display: grid; place-items: center; background-color: #24323b; border: var(--t) solid var(--edge); }
.atile.lock { box-shadow: inset 0 0 0 calc(40 * var(--t)) rgba(0, 0, 0, 0.55); }
.atile.lock .it { opacity: 0.5; }
.atile .lk { position: absolute; right: calc(2 * var(--t)); bottom: calc(2 * var(--t)); color: #fff; }
.atile.gold::before, .atile.gold::after { content: ""; position: absolute; inset: calc(-1 * var(--t)); border: var(--t) solid var(--gold); clip-path: polygon(0 0, 22% 0, 22% 30%, 0 30%, 0 0, 0 70%, 22% 70%, 22% 100%, 0 100%, 0 70%); }
.atile.gold::after { transform: scaleX(-1); }
.arow .mid { flex: 1; min-width: 0; }
.arow b { display: block; font: 400 var(--fs-ui)/1.25 var(--font-ui); font-weight: 400; }
.arow p { color: var(--tx-dim); font-size: 0.92em; line-height: 1.4; margin-top: var(--t); }
.arow .date { color: var(--tx-dimmest); font: 400 var(--fs-small)/1.5 var(--font-ui); margin-top: var(--t); }
.arow .date .d { background: var(--n80); padding: 0 var(--t); }
.arow .date .pg { color: var(--tx-dim); font-family: var(--font-body); font-size: 0.9em; }
.arow .pts { flex: none; display: flex; align-items: center; gap: calc(2 * var(--t)); font: 400 var(--fs-ui)/1 var(--font-ui); }
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3 * var(--t)); }
html[data-layout="tall"] .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agrid .arow { flex-direction: column; align-items: stretch; text-align: left; }
.agrid .atile { width: 100%; }
.agrid .pts { align-self: flex-start; }
html[data-layout="tall"] .arow .atile { width: calc(48 * var(--t)); }
html[data-layout="tall"] .ach-list .atile .islot { --k: 1; }

/* Contact */
.ct-card { display: flex; flex-direction: column; gap: calc(3 * var(--t)); align-items: flex-start; }
.ct-face { width: calc(32 * var(--t)); height: calc(32 * var(--t)); border: var(--t) solid var(--edge); image-rendering: pixelated; }
.ct-big { font: 400 var(--fs-big)/1.1 var(--font-ui); }
.ct-sec { margin-bottom: calc(6 * var(--t)); }
.ct-btns { display: flex; gap: calc(4 * var(--t)); flex-wrap: wrap; margin-top: calc(4 * var(--t)); }
.ct-btns .eb { min-width: calc(90 * var(--t)); }
html[data-layout="tall"] .ct-btns .eb { width: 100%; }
.form { display: flex; flex-direction: column; gap: calc(5 * var(--t)); }
.links li + li { margin-top: calc(2 * var(--t)); }

/* Settings */
.set-head { padding: calc(4 * var(--t)) 0 calc(5 * var(--t)); border-bottom: var(--t) solid var(--n80); }
.set-head h2 { font: 400 var(--fs-head)/1.1 var(--font-head); text-transform: uppercase; }
.srow { padding: calc(5 * var(--t)) 0; border-bottom: var(--t) solid var(--n80); }
.srow .row { justify-content: space-between; }
.srow h3 { font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.srow .help { color: var(--tx-dim); font-size: 0.92em; line-height: 1.4; margin-top: var(--t); }
.srow .val { font: 400 var(--fs-ui)/1 var(--font-ui); }
.srow .sl, .srow .seg, .srow .dd { margin-top: calc(3 * var(--t)); }
.srow .txt { color: var(--tx-dim); }

/* Play: loading, notice, HUD, pause */
.play { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.play > * { pointer-events: auto; }
.load { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: calc(8 * var(--t)); background: none; }
.load-panel { width: min(92%, calc(290 * var(--t))); padding: calc(8 * var(--t)) calc(10 * var(--t)); background: var(--n80); border: var(--t) solid var(--edge); text-align: center; }
.load-panel h2 { font: 400 var(--fs-head)/1.2 var(--font-head); margin-bottom: calc(6 * var(--t)); }
.load-panel .xp { width: 90%; margin: 0 auto; }
.load-panel .tipline { margin-top: calc(6 * var(--t)); color: var(--tx-dim); min-height: 3em; }
.load-panel .tipline b { color: #fff; font-weight: 400; font-family: var(--font-ui); }
.tr-lines { text-align: left; margin-top: calc(6 * var(--t)); }
.tr-lines li { opacity: 0; transition: opacity 300ms; margin-top: calc(2 * var(--t)); color: var(--tx-dim); }
.tr-lines li.on { opacity: 1; }
.load-panel .eb { margin-top: calc(6 * var(--t)); }
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; color: #fff; font: 400 var(--fs-ui)/1.25 var(--font-ui); text-shadow: var(--t) var(--t) 0 #3f3f3f; }
.crosshair { position: absolute; left: 50%; top: 50%; width: calc(9 * var(--t)); height: calc(9 * var(--t)); transform: translate(-50%, -50%); mix-blend-mode: difference; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #fff; }
.crosshair::before { left: calc(4 * var(--t)); top: 0; width: var(--t); height: 100%; }
.crosshair::after { top: calc(4 * var(--t)); left: 0; height: var(--t); width: 100%; }
html[data-input="touch"] .crosshair, html.touch:not([data-input="gamepad"]):not([data-input="keyboard"]) .crosshair { display: none; }
.hotbar { position: absolute; left: 50%; bottom: max(calc(2 * var(--t)), env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; pointer-events: auto; }
.hslot { position: relative; width: var(--hs); height: var(--hs); padding: 0; border: 0; display: grid; place-items: center; background: var(--slot-face); box-shadow: inset var(--t) var(--t) 0 var(--slot-hi), inset calc(-1 * var(--t)) calc(-1 * var(--t)) 0 var(--slot-lo), inset 0 0 0 calc(2 * var(--t)) var(--slot-lo); --hs: max(calc(20 * var(--t)), 32px); }
/* Touch slots are 44 px high. Nine of them need 396 px across, so a narrower phone held upright gives each one a ninth of the width, edge to edge. */
html[data-pointer="coarse"] .hslot { --hs: max(calc(20 * var(--t)), 44px); width: min(var(--hs), calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) / 9)); }
.hslot canvas { width: calc(var(--hs) * 0.62); height: calc(var(--hs) * 0.62); image-rendering: pixelated; }
.hslot.sel::after { content: ""; position: absolute; inset: calc(-1 * var(--t)); border: var(--t) solid var(--slot-sel); box-shadow: 0 0 0 var(--t) #000, inset 0 0 0 var(--t) #000; }
.hud-name { position: absolute; left: 50%; bottom: calc(max(calc(20 * var(--t)), 40px) + 10 * var(--t)); transform: translateX(-50%); white-space: nowrap; transition: opacity 300ms; }
.hud-hint { position: absolute; left: 50%; bottom: calc(max(calc(20 * var(--t)), 40px) + 24 * var(--t)); transform: translateX(-50%); white-space: nowrap; text-shadow: none; display: flex; gap: calc(4 * var(--t)); align-items: center; }
.hud-box { background: rgba(0, 0, 0, 0.5); padding: var(--t) calc(3 * var(--t)); }
.hud-tl { position: absolute; left: max(calc(3 * var(--t)), env(safe-area-inset-left)); top: max(calc(3 * var(--t)), env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--t); }
.chat { position: absolute; left: max(calc(3 * var(--t)), env(safe-area-inset-left)); bottom: calc(max(calc(20 * var(--t)), 40px) + 14 * var(--t)); max-width: min(60%, calc(200 * var(--t))); display: flex; flex-direction: column; gap: var(--t); }
.chat p { background: rgba(0, 0, 0, 0.5); padding: var(--t) calc(3 * var(--t)); transition: opacity 1s; }
.chat.fade p { opacity: 0; }
html[data-input="touch"] .chat, html.touch .chat { bottom: auto; top: calc(max(calc(20 * var(--t)), 44px) + 10 * var(--t) + env(safe-area-inset-top)); }
/* touch chat sits where play toasts drop in, so it steps down while one shows */
html.in-play[data-input="touch"]:has(#toasts .toast) .chat, html.in-play.touch:has(#toasts .toast) .chat { transform: translateY(calc(34 * var(--t))); }
.overlay { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: none; border: 0; padding: 0; color: #fff; }
.overlay > span { background: rgba(0, 0, 0, 0.7); padding: calc(5 * var(--t)) calc(10 * var(--t)); border: var(--t) solid var(--edge); font: 400 var(--fs-ui)/1.25 var(--font-ui); }
.pause { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--t)); padding: calc(8 * var(--t)); }
.pause-col { width: min(100%, calc(150 * var(--t))); display: flex; flex-direction: column; gap: calc(4 * var(--t)); }
.pause-col h2 { font: 400 var(--fs-head)/1.2 var(--font-head); text-align: center; margin-bottom: calc(4 * var(--t)); text-shadow: var(--t) var(--t) 0 #3f3f3f; }
.pause-col .cb { --bh: 30; width: 100%; }
.pause .slot { width: calc(70 * var(--t)); height: calc(120 * var(--t)); }
html[data-layout="tall"] .pause .slot { display: none; }
.rotate { position: fixed; left: 50%; top: 30%; z-index: 8; transform: translateX(-50%); width: min(90vw, calc(160 * var(--t))); pointer-events: none; }
.rotate .md-x { margin: 0; pointer-events: auto; }
html:not([data-layout="tall"]) .rotate { display: none; }
.dbg { position: fixed; right: 4px; bottom: 4px; z-index: 80; margin: 0; padding: 4px 6px; background: rgba(0,0,0,0.7); color: #e8e8e8; font: 11px/1.35 ui-monospace, Menlo, monospace; pointer-events: none; white-space: pre; }

/* Touch controls */
.tc { position: fixed; inset: 0; z-index: 4; touch-action: none; -webkit-touch-callout: none; }
.tc-look { position: absolute; inset: 0; touch-action: none; }
.tc-zone { position: absolute; left: 0; bottom: 0; width: 46vw; max-width: 340px; height: 60vh; max-height: 340px; touch-action: none; }
.tc-stick { position: absolute; left: max(calc(24 * var(--t)), env(safe-area-inset-left)); bottom: max(calc(30 * var(--t)), 16px); width: max(calc(107 * var(--t)), 120px); aspect-ratio: 1; display: grid; place-items: center; border: var(--t) solid rgba(255, 255, 255, 0.45); background: rgba(208, 209, 212, 0.12); }
.tc-knob { width: 42%; aspect-ratio: 1; background: rgba(208, 209, 212, 0.55); border: var(--t) solid rgba(30, 30, 31, 0.8); box-shadow: inset 0 calc(-2 * var(--t)) 0 rgba(88, 88, 90, 0.8), inset var(--t) var(--t) 0 rgba(255, 255, 255, 0.6); }
.tc-stick.active .tc-knob { background: rgba(236, 237, 238, 0.8); }
.tc-dpad { position: absolute; left: max(calc(18 * var(--t)), env(safe-area-inset-left)); bottom: max(calc(26 * var(--t)), 16px); width: max(calc(107 * var(--t)), 150px); aspect-ratio: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: calc(2 * var(--t)); touch-action: none; }
.tc[data-layout="joystick"] .tc-dpad, .tc[data-layout="dpad"] .tc-zone { display: none; }
.tc-d { display: grid; place-items: center; background: rgba(72, 73, 74, 0.45); border: var(--t) solid rgba(30, 30, 31, 0.7); box-shadow: inset var(--t) var(--t) 0 rgba(255, 255, 255, 0.25); color: #fff; }
.tc-d.down, .tc-c.on { background: rgba(236, 237, 238, 0.6); color: var(--edge); }
.tc-ul, .tc-ur { visibility: hidden; }
.tc-dpad.fwd .tc-ul, .tc-dpad.fwd .tc-ur { visibility: visible; }
.tc-c { background: rgba(72, 73, 74, 0.28); }
.tc-gap { pointer-events: none; }
.tc-btn { position: absolute; width: max(calc(42 * var(--t)), 52px); height: max(calc(42 * var(--t)), 52px); padding: 0; display: grid; place-items: center; background: rgba(72, 73, 74, 0.5); border: var(--t) solid rgba(30, 30, 31, 0.75); color: #fff;
  box-shadow: inset 0 calc(-2 * var(--t)) 0 rgba(30, 30, 31, 0.5), inset var(--t) var(--t) 0 rgba(255, 255, 255, 0.3); touch-action: none; }
.tc-btn .ic { width: 45%; height: 45%; }
.tc-btn.down, .tc-btn.on { background: rgba(236, 237, 238, 0.65); color: var(--edge); }
.tc { --tcb: max(calc(42 * var(--t)), 52px); --tcg: calc(3 * var(--t)); --tcr: max(calc(12 * var(--t)), calc(8px + env(safe-area-inset-right))); --tcs: max(calc(12 * var(--t)), calc(8px + env(safe-area-inset-bottom))); }
.tc-sneak { right: var(--tcr); bottom: var(--tcs); }
.tc-jump { right: var(--tcr); bottom: calc(var(--tcs) + var(--tcb) + var(--tcg)); }
.tc-sprint { right: calc(var(--tcr) + var(--tcb) + var(--tcg)); bottom: calc(var(--tcs) + (var(--tcb) + var(--tcg)) / 2); }
.tc-top { position: absolute; left: 50%; top: max(calc(3 * var(--t)), env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: calc(2 * var(--t)); }
.tc-top button { width: max(calc(20 * var(--t)), 44px); height: max(calc(20 * var(--t)), 44px); padding: 0; display: grid; place-items: center; border: var(--t) solid var(--edge); background: rgba(208, 209, 212, 0.85); color: var(--edge);
  box-shadow: inset 0 calc(-2 * var(--t)) 0 rgba(88, 88, 90, 0.9), inset var(--t) var(--t) 0 rgba(255, 255, 255, 0.8); }
.tc-top button.down { background: rgba(177, 178, 181, 0.95); }
.tc-hold { position: absolute; width: max(calc(20 * var(--t)), 40px); height: max(calc(20 * var(--t)), 40px); transform: translate(-50%, -50%) scale(0.4); color: rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; }
.tc-hold .ic { width: 100%; height: 100%; }
.tc-hold.on { opacity: 0.9; transform: translate(-50%, -50%) scale(1); transition: transform 350ms linear, opacity 100ms; }
.tc-hold.breaking { opacity: 0; transition: opacity 80ms; }
html.rm .tc-hold.on { transition: none; }

/* Fallback panels */
.fail { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.fail .md { margin: 0; }
noscript .ns { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center; background: #1e1e1f; color: #fff; font: 16px/1.5 system-ui, sans-serif; }
noscript .ns img { width: min(80vw, 432px); image-rendering: pixelated; }
noscript .ns a { color: #fff; }
.rot-l { transform: rotate(-45deg); }
.rot-r { transform: rotate(45deg); }
.tc-d .ic { width: 40%; height: 40%; }
.tc-bar em { background: var(--n80); padding: 0 var(--t); z-index: 1; }
html[data-layout="tall"] .sv-actions .eb { width: 100%; }
.cpy { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
html.in-play .toasts { top: calc(max(calc(20 * var(--t)), 44px) + 8 * var(--t) + env(safe-area-inset-top)); }
html[data-layout="tall"] .tc { --tcs: calc(60px + 6 * var(--t) + env(safe-area-inset-bottom)); }
html[data-layout="tall"] .tc-stick, html[data-layout="tall"] .tc-dpad { bottom: calc(64px + 6 * var(--t) + env(safe-area-inset-bottom)); }
html.clean #app, html.clean #play, html.clean .toasts, html.clean #titleFoot, html.clean .skip, html.clean .dbg { display: none !important; }
/* Toasts sit low on inner screens so they clear the nav, tabs and headers. */
html:not(.in-play):has(#screens > .screen:not(.title)) .toasts, html:not(.in-play):has(#screens > .screen:not(.title)) .toasts[popover] { top: auto; bottom: calc(10 * var(--t) + env(safe-area-inset-bottom)); --td: 1; }
.toasts[popover] { margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; inset: auto; left: 50%; top: max(calc(4 * var(--t)), env(safe-area-inset-top)); height: auto; }
html.in-play .toasts[popover] { top: calc(max(calc(20 * var(--t)), 44px) + 8 * var(--t) + env(safe-area-inset-top)); }
.exp-body .chip:not(.chip-red):not(.chip-yellow):not(.chip-green):not(.chip-blue), .tl .chip:not(.chip-yellow), .orow .chip:not([class*="chip-"]) { background: var(--n60); }
.ctl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--t)); align-items: start; }
.ctl-tab { width: 100%; border-collapse: collapse; }
.ctl-tab caption { caption-side: top; text-align: left; padding-bottom: calc(3 * var(--t)); margin: 0; }
.ctl-tab th { width: 42%; text-align: left; font-weight: 400; vertical-align: top; padding: calc(2 * var(--t)) calc(4 * var(--t)) calc(2 * var(--t)) 0; }
.ctl-tab th .chip { max-width: 100%; white-space: normal; }
.ctl-tab td { padding: calc(2 * var(--t)) 0; vertical-align: top; line-height: 1.35; }
.ctl-one { margin-top: calc(5 * var(--t)); }
.chk { gap: calc(3 * var(--t)); margin-top: calc(5 * var(--t)); cursor: pointer; }
.chk input { width: calc(10 * var(--t)); height: calc(10 * var(--t)); accent-color: var(--pri); }
.md .chip:not([class*="chip-"]) { background: var(--n60); }
html.kbnav [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
html[data-xwide="1"] .ptiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }