/* testnet — Liquid Glass theme (light + dark) */
@font-face{font-family:"Inter";src:url("/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0218-021B,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jbmono-latin.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:20px; --r-sm:12px;
  /* light */
  --bg:#eef1f6; --text:#14181f; --muted:#596270; --line:rgba(20,30,50,.10); --grid:rgba(20,30,50,.08);
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.72); --glass-in:rgba(240,243,248,.75);
  --edge:rgba(255,255,255,.85); --edge-out:rgba(20,30,50,.08);
  --shadow:0 10px 30px rgba(30,45,80,.10),0 1px 2px rgba(30,45,80,.06);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --down:#0a7fd0; --up:#d9502a; --lat:#3a8f12; --jit:#a86d00; --bad:#d23b3f; --ok:#22863a;
  --cta:#77fb4c; --cta-ink:#121316; --ring:#0a7fd0;
  --b1:rgba(56,189,248,.45); --b2:rgba(255,138,92,.38); --b3:rgba(119,251,76,.32);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1e1e1e; --text:#e8e8e8; --muted:#a6a6a6; --line:rgba(255,255,255,.08); --grid:rgba(255,255,255,.07);
  --glass:rgba(45,45,48,.52); --glass-2:rgba(55,55,58,.66); --glass-in:rgba(30,30,32,.55);
  --edge:rgba(255,255,255,.10); --edge-out:rgba(0,0,0,.25);
  --shadow:0 14px 40px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --down:#3cc8ff; --up:#ff8a5c; --lat:#8be04e; --jit:#e7c062; --bad:#ff7b7f; --ok:#6fdc8c;
  --ring:#3cc8ff;
  --b1:rgba(60,200,255,.22); --b2:rgba(255,138,92,.18); --b3:rgba(139,224,78,.14);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#1e1e1e; --text:#e8e8e8; --muted:#a6a6a6; --glass:rgba(45,45,48,.52); color-scheme:dark } }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:15px/1.45 var(--font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;transition:background-color .4s var(--ease),color .4s var(--ease)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:12.5px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ambient light */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(70px);will-change:transform}
.ambient .b1{background:radial-gradient(circle,var(--b1),transparent 65%);left:-14vmax;top:-18vmax;animation:drift1 26s var(--ease) infinite alternate}
.ambient .b2{background:radial-gradient(circle,var(--b2),transparent 65%);right:-16vmax;top:8vmax;animation:drift2 32s var(--ease) infinite alternate}
.ambient .b3{background:radial-gradient(circle,var(--b3),transparent 65%);left:20vmax;bottom:-26vmax;animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vmax,18vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(14vmax,-16vmax) scale(1.1)}}
body.testing .ambient i{animation-duration:9s,11s,13s}

/* glass */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--edge);box-shadow:var(--shadow),var(--hi),0 0 0 1px var(--edge-out)}

/* header */
.top{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:10px max(16px,calc(50% - 604px));border-bottom:1px solid transparent;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.top.scrolled{background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-bottom-color:var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.16),inset 0 -1px 0 var(--edge-out)}
.top.scrolled .icon-btn{box-shadow:0 6px 18px rgba(0,0,0,.18),var(--hi),0 0 0 1px var(--edge-out)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em;min-height:44px}
.top-actions{display:flex;gap:10px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease)}
.icon-btn:active{transform:scale(.95)}
.i-sun,.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:block}
:root:not([data-theme="dark"]) .i-moon{display:block}
.flag{border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:14px;z-index:1001;background:var(--glass-2)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:10px;cursor:pointer;text-align:left;font-size:14px}
.menu button:hover,.menu button[aria-current="true"]{background:var(--line)}

main{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:10px 16px 48px}

/* hero */
.hero{border-radius:28px;padding:20px 26px 20px;margin:10px 0 18px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 40%);opacity:.6}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;position:relative}
.hero-status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;min-height:24px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.dot.run{background:var(--down);box-shadow:0 0 0 0 var(--down);animation:pulse 1.4s var(--ease) infinite}
.dot.done{background:var(--ok)} .dot.err{background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--down) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.hero-ip{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-size:13px;color:var(--muted);background:var(--glass-in);border:1px solid var(--edge);border-radius:14px;padding:6px 12px;min-height:44px;cursor:pointer;text-align:left;transition:transform .2s var(--ease)}
.hero-ip:active{transform:scale(.98)}
.hero-ip .ip{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--text)}
.hero-ip .ip.sm{font-size:13px}
.pill{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--line);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--ok)} .pill.bad{color:var(--bad)}
td .pill{margin-left:6px}

.hero-main{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 36px;align-items:center;margin:10px 0 14px;position:relative}
.gauge{position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:0 auto -9%;padding:22px}
.gauge svg{width:100%;height:100%;display:block;overflow:visible}
.g-track{fill:none;stroke:var(--line);stroke-width:14;stroke-linecap:round}
.g-fill{opacity:0;fill:none;stroke:var(--down);stroke-width:14;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset .45s var(--ease),stroke .4s var(--ease);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--down) 55%,transparent))}
.gauge.upload .g-fill{stroke:var(--up);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--up) 55%,transparent))}
.gauge.latency .g-fill{stroke:var(--lat);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--lat) 55%,transparent))}
.g-ticks text{fill:var(--muted);font-size:10.5px;font-family:var(--font);font-variant-numeric:tabular-nums}
.g-ticks line{stroke:var(--muted);opacity:.5;stroke-width:1.4}
.g-center{position:absolute;inset:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:6px;text-align:center}
.big-label{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.big-num{font-size:clamp(54px,9vw,78px);font-weight:250;line-height:1.02;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--down);transition:color .4s var(--ease)}
.gauge.upload .big-num{color:var(--up)} .gauge.latency .big-num{color:var(--lat)}
.big-unit{font-size:16px;color:var(--muted);font-weight:500}

.hero-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.phases li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--glass-in);border:1px solid var(--edge);font-size:13.5px;color:var(--muted);min-width:0;white-space:nowrap;transition:color .3s var(--ease),border-color .3s var(--ease)}
.phases li span{overflow:hidden;text-overflow:ellipsis}
.phases i{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid currentColor;opacity:.6}
.phases li.active{color:var(--text);border-color:color-mix(in srgb,var(--down) 50%,transparent)}
.phases li.active i{border-color:var(--down);background:var(--down);opacity:1;animation:pulse 1.4s var(--ease) infinite}
.phases li.done{color:var(--text)} .phases li.done i{background:var(--ok);border-color:var(--ok);opacity:1}
.minis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mini{padding:10px 12px;border-radius:14px;background:var(--glass-in);border:1px solid var(--edge);min-width:0}
.mini-k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.mini-v{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px}
.mini-v small,.m-v small{font-size:.62em;color:var(--muted);font-weight:500;margin-left:3px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--muted);flex:none}
.sw.down{background:var(--down)} .sw.up{background:var(--up)} .sw.lat{background:var(--lat)} .sw.jit{background:var(--jit)}
.progress{height:6px;border-radius:6px;overflow:hidden;background:var(--line);position:relative}
.progress-bar{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--lat),var(--down),var(--up));transition:width .4s var(--ease)}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:12px;position:relative}
.engines{display:flex;gap:4px 18px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;user-select:none;min-height:44px;position:relative}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.tg{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background .25s var(--ease);flex:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.toggle input:checked+.tg{background:var(--down)} .toggle input:checked+.tg::after{transform:translateX(18px)}
.toggle input:focus-visible+.tg{outline:2px solid var(--ring);outline-offset:2px}
.hero-btns{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.saved-note{font-size:13px;color:var(--muted)}
.btn{font-size:14px;font-weight:600;background:var(--glass-2);border:1px solid var(--edge);border-radius:14px;padding:0 18px;min-height:44px;white-space:nowrap;cursor:pointer;box-shadow:var(--hi);transition:transform .15s var(--ease),background-color .2s var(--ease)}
.btn:hover{background:var(--glass-in)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--cta);color:var(--cta-ink);border-color:transparent;box-shadow:0 8px 22px rgba(119,251,76,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary.stop{background:var(--glass-2);color:var(--text);border-color:var(--edge);box-shadow:var(--hi)}

/* metric cards */
.cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin-bottom:18px}
.card.m{border-radius:18px;padding:12px 13px 11px;min-width:0;transition:transform .3s var(--ease)}
.card.m:hover{transform:translateY(-2px)}
.m-k{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-v{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;margin-top:3px;white-space:nowrap;letter-spacing:-.01em}
.m-v.down{color:var(--down)} .m-v.up{color:var(--up)}
.m-s{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade{display:inline-grid;place-items:center;min-width:38px;height:30px;border-radius:9px;padding:0 6px;font-size:18px;color:#121316;background:var(--muted)}
.g-Ap,.g-A{background:#6fdc8c} .g-B{background:#b5dd5a} .g-C{background:#e7c062} .g-D{background:#f0a05a} .g-F{background:#ff7b7f}

/* panels */
.panel{border-radius:var(--r);padding:18px 20px 16px;margin-bottom:18px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:10px}
.panel h2{font-size:16px;margin:0;font-weight:650;letter-spacing:-.01em}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;align-items:center}
.legend>span{display:flex;gap:6px;align-items:center}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.grid2>.panel{margin-bottom:18px}
.chart{width:100%;min-height:60px;position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .empty{color:var(--muted);font-size:13px;padding:22px 0;text-align:center}
.ax text{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ax line{stroke:var(--grid)}
.tip{position:absolute;pointer-events:none;background:var(--glass-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--edge);box-shadow:var(--shadow);padding:6px 9px;border-radius:10px;font-size:12px;white-space:nowrap;z-index:5}

.scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.score{padding:10px 12px;border-radius:14px;background:var(--glass-in);border:1px solid var(--edge);min-width:0}
.sc-k{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-v{font-size:17px;font-weight:650;margin:1px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.sc-bar i{height:6px;border-radius:4px;background:var(--line);transition:background-color .4s var(--ease)}
.score[data-c="0"] .sc-bar i:nth-child(-n+1){background:#ff7b7f}
.score[data-c="1"] .sc-bar i:nth-child(-n+2){background:#f0a05a}
.score[data-c="2"] .sc-bar i:nth-child(-n+3){background:#e7c062}
.score[data-c="3"] .sc-bar i:nth-child(-n+4){background:#b5dd5a}
.score[data-c="4"] .sc-bar i:nth-child(-n+5){background:#6fdc8c}

.tscroll{overflow-x:auto}
table.kv{width:100%;border-collapse:collapse;font-size:13.5px}
table.kv th{text-align:left;font-weight:500;color:var(--muted);padding:7px 12px 7px 0;width:42%;vertical-align:top}
table.kv td{padding:7px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
table.kv tr+tr>*{border-top:1px solid var(--line)}
table.cmp th{width:auto} table.cmp td{text-align:right;padding-left:10px}
table.cmp thead th{font-weight:650;color:var(--text);text-align:right} table.cmp thead th:first-child{text-align:left}
.mono{font-family:var(--mono);font-size:12.5px}

.share{display:flex;flex-direction:column;gap:12px}
.field{padding:0 12px;border-radius:14px;background:var(--glass-in);border:1px solid var(--edge)}
.field input{width:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;min-height:44px;outline:none}
.share-btns{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.share p{margin:2px 0 0}

.update-bar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:3000;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:16px;font-size:14px;background:var(--glass-2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;border-radius:14px;font-size:14px;z-index:3000;background:var(--glass-2)}

/* launch screen */
html[data-view="launch"] #hero,html[data-view="launch"] #metricCards,html[data-view="launch"] main>.panel,html[data-view="launch"] main>.grid2{display:none}
html[data-view="test"] #launch{display:none}
.launch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:calc(100dvh - 140px);text-align:center;padding:20px 0}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.scan{position:relative;width:min(240px,64vw);aspect-ratio:1;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--text);
  background:radial-gradient(circle at 35% 30%,var(--glass-2),var(--glass) 60%);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--edge);box-shadow:var(--shadow),var(--hi),0 0 60px color-mix(in srgb,var(--down) 22%,transparent);view-transition-name:dial;transition:transform .35s var(--ease)}
.scan span{font-size:clamp(34px,9vw,46px);font-weight:750;letter-spacing:.16em;margin-left:.16em}
.scan::before{content:"";position:absolute;inset:-7px;border-radius:50%;padding:7px;background:conic-gradient(from var(--a),var(--lat),var(--down),var(--up),var(--lat));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite}
.scan::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--down) 45%,transparent);animation:ring 2.4s var(--ease) infinite}
.scan:hover{transform:scale(1.04)} .scan:active{transform:scale(.96)}
.scan:focus-visible{outline:3px solid var(--ring);outline-offset:10px}
@keyframes spin{to{--a:360deg}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--down) 40%,transparent)}100%{box-shadow:0 0 0 34px transparent}}
.launch-hint{margin:6px 0 0;color:var(--muted);font-size:15px}
.launch-ip{margin:0;font-family:var(--mono);font-size:14px;color:var(--muted);min-height:20px}
.gauge{view-transition-name:dial}
::view-transition-group(dial){animation-duration:.75s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
html.vt-scan::view-transition-old(root){animation:vt-out .35s cubic-bezier(.16,1,.3,1) both}
html.vt-scan::view-transition-new(root){animation:vt-in .6s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes vt-out{to{opacity:0;transform:scale(.98)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
html.scan-anim #hero{animation:vt-in .6s var(--ease) both}

/* share dialog */
.modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(10,12,16,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal-card{width:min(480px,100%);border-radius:22px;padding:20px 20px 16px;background:var(--glass-2)}
.modal-card h2{font-size:17px;margin:0 0 12px}
.modal-foot{display:flex;justify-content:flex-end}

/* entrance */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1100px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.m-v{font-size:24px}}
@media (max-width:900px){
  .grid2{grid-template-columns:minmax(0,1fr);gap:0}
  .hero-main{grid-template-columns:minmax(0,1fr)}
  .gauge{max-width:280px}
}
@media (max-width:560px){
  .hero{padding:16px 14px;border-radius:24px}
  .cards{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.m-v{font-size:21px}
  .scores{grid-template-columns:minmax(0,1fr);gap:8px}
  .score{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px}
  .score .sc-v{margin:0;font-size:15px}
  .score .sc-bar{grid-column:1/-1;margin-top:4px}
  .minis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:16px 14px}
  .hero-foot{flex-direction:column;align-items:stretch}
  .hero-btns{justify-content:space-between}
  .saved-note{display:none}
  .btn.primary{flex:1}
  .share-btns .btn{padding:0 14px}
  .phases{gap:6px}.phases li{padding:9px 8px;gap:6px;font-size:13px}
}
@media (pointer:coarse){input,select,textarea,.field input{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-2)}}