:root{
  --bg:#f5f4f0;--card:#fff;--ink:#12151a;--soft:#4a525e;--muted:#6b7480;--line:#dcdad3;
  --panel:#0e1116;--panel2:#161a21;--panel3:#1d232c;--pline:#2a313b;--digit:#f4f7fb;--pmuted:#8d97a5;
  --accent:#ff5b1f;--accent2:#ff7a45;--go:#16a34a;--stop:#dc2626;--best:#2ee6a6;--worst:#ff6b81;--warn:#f5b301;
  --radius:14px;--wrap:1180px;
  color-scheme:light;
}
:root[data-theme=dark]{--bg:#0b0d11;--card:#12161c;--ink:#e9edf2;--soft:#b5bdc8;--muted:#8d97a5;--line:#252b34;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b0d11;--card:#12161c;--ink:#e9edf2;--soft:#b5bdc8;--muted:#8d97a5;--line:#252b34;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(16px,3.5vw)}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;z-index:99;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.2) blur(6px)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.4px;margin-right:auto;color:var(--ink)}
.brand svg{width:28px;height:28px}
.brand span{color:var(--accent)}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--soft);padding:7px 10px;border-radius:9px}
.nav a:hover,.nav a[aria-current]{background:var(--card);color:var(--ink)}
.theme-btn{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:6px 10px;cursor:pointer;font-size:13px;color:var(--soft)}

/* ---------- page head ---------- */
.head{padding:28px 0 8px}
.head h1{font-size:clamp(26px,3.6vw,40px);line-height:1.08;letter-spacing:-1px;margin:0}
.head p{margin:10px 0 0;color:var(--soft);max-width:70ch;font-size:17px}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted)}

/* ---------- instrument ---------- */
.tool{background:var(--panel);color:var(--digit);border-radius:22px;padding:clamp(14px,2.4vw,26px);margin:18px 0 8px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 50px -24px rgba(0,0,0,.55);position:relative}
.tool:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center;padding:4vh 4vw;overflow:auto}
.tool:fullscreen .face{min-height:52vh}
.tool:fullscreen .readout{font-size:min(22vw,34vh)}
.face{position:relative;border-radius:16px;background:radial-gradient(120% 140% at 50% 0%,#1a2029 0%,#10141a 55%,#0c0f13 100%);border:1px solid var(--pline);padding:18px 18px 16px;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden}
.face-top{display:flex;justify-content:space-between;gap:10px;font:700 11px/1 system-ui;letter-spacing:1.4px;text-transform:uppercase;color:var(--pmuted)}
.state-dot{display:inline-flex;align-items:center;gap:7px}
.state-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pmuted)}
[data-state=running] .state-dot:before{background:var(--best);box-shadow:0 0 10px var(--best)}
[data-state=paused] .state-dot:before{background:var(--warn)}
[data-state=countin] .state-dot:before{background:var(--accent)}
.readout{display:block;font-weight:650;font-size:clamp(58px,13.5vw,168px);line-height:1.02;letter-spacing:-.035em;margin:12px 0 6px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.readout small{font-size:.5em;color:var(--accent2);letter-spacing:-.02em}
.readout i{font-style:normal;font-size:.22em;color:var(--pmuted);margin-left:.3em;letter-spacing:0;vertical-align:.6em}
.lapline{display:flex;justify-content:center;gap:14px;color:var(--pmuted);font-size:15px;font-variant-numeric:tabular-nums}
.lapline b{color:var(--digit)}
.countin{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,15,19,.92);font-size:clamp(90px,20vw,220px);font-weight:800;color:var(--accent)}
.tool.flash .face{animation:flash .35s ease-out}
@keyframes flash{from{box-shadow:0 0 0 3px var(--best) inset}to{box-shadow:0 0 0 0 transparent inset}}
.tool.alarm .face{animation:alarm 1.2s ease-out}
@keyframes alarm{0%,40%{background:#5b1d0a}100%{}}

.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0}
.controls.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{appearance:none;border:1px solid var(--pline);background:var(--panel3);color:var(--digit);border-radius:14px;padding:16px 10px;font-weight:700;font-size:18px;cursor:pointer;transition:transform .06s,background .15s}
.btn:hover{background:#252c37}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.38;cursor:default}
.btn.go{background:var(--go);border-color:var(--go);color:#fff}
.btn.go:hover{background:#15803d}
.btn.go.stop,.btn.stop{background:var(--stop);border-color:var(--stop)}
.btn.go.stop:hover{background:#b91c1c}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.sm{padding:9px 12px;font-size:14px;border-radius:10px}
.btn.ghost{background:transparent}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 18px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--pline)}
.opt label,.opt .lbl{display:block;font:700 10.5px/1.3 system-ui;letter-spacing:1.2px;text-transform:uppercase;color:var(--pmuted);margin-bottom:7px}
.opt select,.opt input[type=text],.opt input[type=number],.opt input:not([type]){width:100%;background:var(--panel2);border:1px solid var(--pline);border-radius:10px;padding:9px 10px;color:var(--digit)}
.seg{display:flex;background:var(--panel2);border:1px solid var(--pline);border-radius:11px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;color:var(--pmuted);border-radius:8px;padding:8px 4px;font-weight:700;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.toggles{display:flex;flex-wrap:wrap;gap:8px 16px}
.toggles label{display:inline-flex;align-items:center;gap:7px;font:600 14px/1.2 system-ui;letter-spacing:0;text-transform:none;color:var(--digit);margin:0;cursor:pointer}
.toggles input{accent-color:var(--accent);width:16px;height:16px}
.note-s{font-size:12.5px;color:var(--pmuted);margin:6px 0 0}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.kbd{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;color:var(--pmuted);font-size:13px}
kbd{display:inline-block;min-width:22px;text-align:center;border:1px solid var(--pline);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font:600 12px/1.5 ui-monospace,Consolas,monospace;color:var(--digit);background:var(--panel2)}

/* ---------- laps ---------- */
.laps{margin:16px 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--pline);border:1px solid var(--pline);border-radius:12px;overflow:hidden}
.stats div{background:var(--panel2);padding:12px 14px}
.stats b{display:block;font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.stats span{display:block;font:700 10px/1.3 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted);margin-top:4px}
.ltable{width:100%;border-collapse:collapse;margin:12px 0 0;font-variant-numeric:tabular-nums;font-size:15px}
.ltable th{text-align:left;font:700 10.5px/1.3 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted);padding:8px 10px;border-bottom:1px solid var(--pline)}
.ltable td{padding:9px 10px;border-bottom:1px solid #1f252e}
.ltable .n{text-align:right;white-space:nowrap}
.ltable th.n{text-align:right}
.ltable tr.best td{color:var(--best)}
.ltable tr.worst td{color:var(--worst)}
.ltable .delta{color:var(--pmuted)}
.ltable .tag{font:700 10px/1 system-ui;letter-spacing:1px;text-transform:uppercase;color:inherit;white-space:nowrap}
.lap-scroll{max-height:420px;overflow:auto}

/* ---------- content ---------- */
.content{padding:26px 0 40px}
.grid2{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:36px;align-items:start}
.grid2>*{min-width:0}
.prose{max-width:72ch}
.prose h2{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.5px;line-height:1.2;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:22px 0 6px}
.prose p,.prose li{color:var(--soft)}
.prose strong{color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;margin:8px 0 18px;font-size:14.5px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.tscroll{overflow-x:auto}
.faq details{border:1px solid var(--line);background:var(--card);border-radius:12px;margin:0 0 8px}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--accent);font-weight:800}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0;padding:0 16px 14px;color:var(--soft)}
.side{display:grid;gap:14px;position:sticky;top:80px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h3{margin:0 0 8px;font-size:15px}
.card p{margin:0;color:var(--soft);font-size:14px}
.links a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;font-size:14.5px}
.links a:last-child{border-bottom:0}
.links a span{color:var(--muted);font-weight:400;font-size:13px;text-align:right}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0 0}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);color:inherit}
.tile b{display:block;font-size:16.5px;letter-spacing:-.2px}
.tile span{display:block;color:var(--soft);font-size:14px;margin-top:4px;line-height:1.45}
.tile i{font-style:normal;display:inline-block;font:700 10px/1 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;text-decoration:none}
.chip:hover,.chip[aria-current]{border-color:var(--accent);color:var(--accent)}
.disclosure{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding:6px 12px;margin:0 0 16px}
.buy{display:inline-block;margin-top:10px;font-weight:700;font-size:14px}
.codebox{width:100%;min-height:96px;font:13px/1.5 ui-monospace,Consolas,monospace;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:32px 0 40px;margin-top:20px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:26px}
.foot-grid b{display:block;color:var(--ink);font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px}
.foot-grid a{display:block;text-decoration:none;padding:3px 0;color:var(--soft)}
.foot-grid a:hover{color:var(--accent)}
.foot small{display:block;margin-top:22px}

/* ---------- tool-specific ---------- */
.big-input{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.big-input label{font:700 10.5px/1.2 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted)}
.big-input input{width:100%;font-size:28px;font-weight:700;text-align:center;background:var(--panel2);border:1px solid var(--pline);border-radius:12px;padding:10px 6px;color:var(--digit);font-variant-numeric:tabular-nums;margin-top:6px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.presets button{border:1px solid var(--pline);background:var(--panel2);color:var(--digit);border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.presets button:hover,.presets button[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.progress{height:8px;background:var(--panel3);border-radius:99px;overflow:hidden;margin:14px 0 0}
.progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px}
.phase{font:800 clamp(22px,4vw,40px)/1 system-ui;letter-spacing:2px;text-transform:uppercase}
.tool[data-phase=work] .face{background:radial-gradient(120% 140% at 50% 0%,#3a1608 0%,#1d0d06 60%,#120805 100%)}
.tool[data-phase=work] .phase{color:var(--accent)}
.tool[data-phase=rest] .face{background:radial-gradient(120% 140% at 50% 0%,#0b2a3a 0%,#081820 60%,#060f14 100%)}
.tool[data-phase=rest] .phase{color:#5cc8ff}
.tool[data-phase=prep] .phase{color:var(--warn)}
.tool[data-phase=done] .phase{color:var(--best)}
.tool.done .face{animation:alarm 1.2s ease-out infinite}
.multi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.runner{background:var(--panel2);border:1px solid var(--pline);border-radius:14px;padding:12px}
.runner[data-state=running]{border-color:var(--best)}
.runner[data-state=finished]{border-color:var(--accent)}
.runner input.name{width:100%;background:transparent;border:0;border-bottom:1px dashed var(--pline);color:var(--digit);font-weight:700;font-size:15px;padding:2px 0}
.runner .t{font-size:40px;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:6px 0;line-height:1.05}
.runner .t small{font-size:.55em;color:var(--accent2)}
.runner .sub{font-size:13px;color:var(--pmuted);min-height:1.4em;font-variant-numeric:tabular-nums}
.runner .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.runner .place{float:right;font:800 12px/1 system-ui;background:var(--accent);color:#fff;border-radius:6px;padding:4px 6px}
.splits-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.splits-table td,.splits-table th{padding:8px 10px;border-bottom:1px solid #1f252e;text-align:right;white-space:nowrap}
.splits-table td:first-child,.splits-table th:first-child{text-align:left;white-space:normal}
.splits-table th{font:700 10.5px/1.3 system-ui;letter-spacing:1px;text-transform:uppercase;color:var(--pmuted)}
.splits-table tr.cur td{background:#1a2230}
.ahead{color:var(--best)}.behind{color:var(--worst)}.gold{color:#ffd166!important;font-weight:700}
.cube-face{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.scramble{font:600 clamp(16px,2.4vw,22px)/1.5 ui-monospace,Consolas,monospace;letter-spacing:.5px;color:var(--digit);margin:0 0 6px;word-spacing:4px}
.tool[data-cube=hold] .readout{color:var(--stop)}
.tool[data-cube=ready] .readout{color:var(--best)}
.tool[data-cube=inspect] .readout{color:var(--warn)}
.chess{display:grid;grid-template-rows:1fr auto 1fr;gap:10px;height:min(78vh,720px)}
.chess .side-btn{border:0;border-radius:18px;background:var(--panel2);color:var(--digit);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums;touch-action:manipulation;user-select:none}
.chess .side-btn .t{font-size:clamp(54px,13vw,130px);font-weight:700;letter-spacing:-2px;line-height:1}
.chess .side-btn .m{font-size:13px;color:var(--pmuted);font-weight:600}
.chess .side-btn.active{background:var(--accent);color:#fff}
.chess .side-btn.active .m{color:#ffe1d3}
.chess .side-btn.low .t{color:#ffe14d}
.chess .side-btn.flag{background:var(--stop);color:#fff}
.chess .top-side{transform:rotate(180deg)}
.chess .mid{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.react{min-height:340px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;user-select:none;touch-action:manipulation;padding:20px;transition:background .05s}
.react h2{font-size:clamp(28px,5vw,52px);margin:0;letter-spacing:-1px}
.react p{margin:8px 0 0;color:inherit;opacity:.85}
.react[data-s=idle]{background:#1d4ed8}
.react[data-s=wait]{background:#b91c1c}
.react[data-s=go]{background:#16a34a}
.react[data-s=early]{background:#a16207}
.react[data-s=result]{background:#1e293b}
.speech-face{transition:background .3s}
.tool[data-card=green] .face{background:#0f7a3a}
.tool[data-card=yellow] .face{background:#b98900}
.tool[data-card=red] .face{background:#a3161a}
.tool[data-card=over] .face{animation:alarm 1s ease-out infinite;background:#a3161a}
.ts-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.ts-table th,.ts-table td{padding:7px 9px;border-bottom:1px solid #1f252e;text-align:right;white-space:nowrap}
.ts-table th:first-child,.ts-table td:first-child{text-align:left}
.ts-table th{font:700 10px/1.3 system-ui;letter-spacing:1px;text-transform:uppercase;color:var(--pmuted)}
.ts-table tr.cur td{background:#1a2230}
.ts-table input{width:70px;background:var(--panel2);border:1px solid var(--pline);border-radius:6px;color:var(--digit);padding:4px 6px;text-align:right}
.scroll-x{overflow-x:auto}
.bars14{display:flex;align-items:flex-end;gap:5px;height:120px;margin:12px 0 0;border-bottom:1px solid var(--pline)}
.bars14 div{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.bars14 div.today{background:var(--best)}
.bars-lbl{display:flex;gap:5px;font-size:10.5px;color:var(--pmuted);margin-top:4px}
.bars-lbl span{flex:1;text-align:center}
.mini-wrap{padding:10px}
.mini .readout{font-size:clamp(40px,16vw,96px)}
.mini .opts,.mini .laps,.mini .kbd{display:none}
.mini-credit{display:block;text-align:center;font-size:12px;color:var(--pmuted);margin-top:8px}
.mini-credit a{color:var(--pmuted)}


/* ---------- stopwatch depth ---------- */
.opts.primary{grid-template-columns:minmax(0,2.2fr) minmax(180px,1fr) minmax(170px,.9fr)}
.opt.wide{min-width:0}
.seg6 button{padding:8px 2px;font-size:12.5px;white-space:nowrap}
.held{font:800 10.5px/1 system-ui;letter-spacing:1.3px;text-transform:uppercase;color:var(--panel);background:var(--warn);padding:4px 7px;border-radius:5px}
.grp{border:1px solid var(--pline);border-radius:12px;background:var(--panel2);margin:10px 0 0}
.grp>summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--digit)}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:after{content:"+";color:var(--accent);font-weight:800;font-size:18px}
.grp[open]>summary:after{content:"–"}
.grp .body{padding:2px 14px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 20px}
.grp .body.diag,.grp .body.hist{display:block}
.grp .opt select,.grp .opt input[type=text],.grp .opt input[type=number]{background:var(--panel);}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:6px}
.pair input,.pair select{width:100%;background:var(--panel);border:1px solid var(--pline);border-radius:10px;padding:9px 10px;color:var(--digit)}
.note-s b{color:var(--digit)}
.note-s a{color:var(--accent2)}
.diag dl{margin:0;display:grid;gap:1px;background:var(--pline);border:1px solid var(--pline);border-radius:10px;overflow:hidden}
.diag dl div{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(0,1.4fr);gap:12px;background:var(--panel);padding:9px 12px;font-size:13.5px}
.diag dt{color:var(--pmuted);font-weight:700}
.diag dd{margin:0;font-variant-numeric:tabular-nums}
.lapchart{width:100%;height:140px;display:block;background:var(--panel2);border:1px solid var(--pline);border-radius:12px;margin-top:12px}
.lapchart .b{fill:#3e4a5b}.lapchart .b.best{fill:var(--best)}.lapchart .b.worst{fill:var(--worst)}
.lapchart .avg{stroke:var(--accent2);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.lapchart .tgt{stroke:#ffd166;stroke-width:2;vector-effect:non-scaling-stroke}
.chart-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--pmuted);margin:6px 0 0}
.chart-key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.k-best{background:var(--best)}.k-worst{background:var(--worst)}.k-avg{background:var(--accent2)}.k-tgt{background:#ffd166}
.lapnote{width:100%;min-width:90px;background:transparent;border:0;border-bottom:1px dashed var(--pline);color:var(--digit);padding:2px 0;font-size:13.5px}
.lapnote:focus{outline:none;border-bottom-color:var(--accent)}
.ltable td.ahead,.ltable .ahead{color:var(--best)}
.ltable td.behind{color:var(--worst)}
.lapline .ahead{color:var(--best)}.lapline .behind{color:var(--worst)}
.hist-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--pline);font-size:14px}
.hist-row .hist-act{display:flex;gap:6px}
@media (max-width:900px){.opts.primary{grid-template-columns:1fr 1fr}.opts.primary .opt.wide{grid-column:1/-1}}
@media (max-width:700px){.ltable .c-prev,.ltable .c-clock,.ltable .c-speed{display:none}}
@media (max-width:560px){
  .seg6{flex-wrap:wrap}.seg6 button{flex:1 0 30%}
  .opts.primary{grid-template-columns:1fr}
  .ltable .c-note{display:none}
  .hist-row{grid-template-columns:1fr auto;}
  .diag dl div{grid-template-columns:1fr}
}

@media (max-width:860px){
  .grid2{grid-template-columns:1fr}
  .side{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .top{position:static}
}
@media (max-width:560px){
  .top .wrap{gap:8px;padding-top:8px;padding-bottom:8px;min-height:0}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:6px 9px}
  .theme-btn{font-size:12px;padding:5px 8px}
  #sw-fmtlabel{display:none}
  .head{padding-top:18px}
  .controls .btn{font-size:16px;padding:14px 6px}
  .foot-grid{grid-template-columns:1fr}
  .ltable .delta,.ltable .tag{display:none}
  .chess .top-side .t{font-size:clamp(48px,16vw,110px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- faces ---------- */
/* contain a face in a fixed-height tile */
.fit{container-type:size;display:grid;place-items:center}
.fit>.fh{width:min(100cqw,calc(100cqh * var(--r,1)));max-width:none}

/* ---------- face player ---------- */
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.line:hover{background:var(--card);color:var(--ink)}
.player{padding:clamp(12px,2vw,22px)}
.pl-stage{background:radial-gradient(120% 100% at 50% 0,#171b22,#0d1015);border-radius:16px;padding:clamp(12px,3vw,32px);display:grid;place-items:center;min-height:220px}
.pl-stage .fh-cap{color:var(--digit)}
.pl-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 0 0}
.pl-bar .seg{min-width:min(100%,360px)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.pl-act{display:flex;gap:8px;flex-wrap:wrap}
.pl-act .btn{padding:12px 22px;font-size:16px}
.pl-pick h2{font-size:15px;margin:22px 0 0;color:var(--digit);letter-spacing:-.2px}
.player:fullscreen{display:flex;flex-direction:column;border-radius:0;padding:2vh 2vw;background:#0b0d11;overflow:auto}
.player:fullscreen .pl-stage{flex:1;background:transparent;border-radius:0;container-type:size;padding:0}
.player:fullscreen .pl-stage>.fh{width:min(100cqw,calc(100cqh * var(--r,1)));max-width:none}
.player:fullscreen .pl-opts,.player:fullscreen .pl-pick,.player:fullscreen .toolbar{display:none}
.player:fullscreen .pl-bar{justify-content:center}

/* picker */
.picker{display:block}
.pk-g{font:700 10.5px/1 system-ui;letter-spacing:1.4px;text-transform:uppercase;color:var(--pmuted);margin:16px 0 8px}
.pk-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.pk{border:1px solid var(--pline);background:var(--panel2);border-radius:12px;padding:6px 6px 8px;cursor:pointer;color:var(--digit);display:flex;flex-direction:column;gap:5px;font:inherit;transition:border-color .12s}
.pk:hover{border-color:#47515f}
.pk[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,91,31,.4)}
.pk .th{display:grid;height:66px;pointer-events:none}
.pk-n{font:600 12px/1.2 system-ui;text-align:center}
.pk-none{font:700 20px system-ui;color:var(--digit);display:grid;place-items:center;height:100%}

/* gallery */
.gal-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 6px}
.gal-bar .lbl{font:700 11px/1 system-ui;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.gal-bar .seg{min-width:min(100%,340px);background:var(--panel)}
.gal-g h2{margin:28px 0 4px;font-size:22px;letter-spacing:-.4px}
.gal-g>p{margin:0 0 12px;color:var(--soft);max-width:70ch}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gcard{display:flex;flex-direction:column;gap:6px;background:var(--panel);color:var(--digit);border-radius:16px;padding:12px;text-decoration:none;border:1px solid var(--pline);transition:transform .15s,border-color .15s}
.gcard:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--digit)}
.gthumb{height:170px;border-radius:10px;background:rgba(255,255,255,.025)}
.gcard b{font-size:16px;letter-spacing:-.2px}
.gtag{font-size:12.5px;color:var(--pmuted);line-height:1.4;min-height:2.8em}
.gcard i{font-style:normal;font:700 10px/1 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent2)}

/* embed studio + embed box */
.studio{padding:clamp(12px,2vw,22px)}
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start;color:var(--digit)}
.est>*{min-width:0}
.est-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 16px}
.est-type{text-align:left;border:1px solid var(--pline);background:var(--panel2);border-radius:12px;padding:10px 12px;color:var(--digit);cursor:pointer;font:inherit}
.est-type b{display:block;font-size:13.5px}
.est-type span{display:block;font-size:11.5px;color:var(--pmuted);line-height:1.35;margin-top:3px}
.est-type[aria-checked=true]{border-color:var(--accent);background:#241a14}
.est-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px;align-content:start}
.est-f[hidden]{display:none}
.est-f>label{display:block;font:700 10.5px/1.3 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted);margin-bottom:6px}
.est-f select,.est-f input[type=text],.est-f input[type=datetime-local]{width:100%;background:var(--panel2);border:1px solid var(--pline);border-radius:10px;padding:9px 10px;color:var(--digit);font:inherit}
.est-f>.est-chk{display:flex;align-items:center;gap:8px;font:600 14px/1.3 system-ui;letter-spacing:0;text-transform:none;color:var(--digit);margin:0;cursor:pointer}
.est-f input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.est-sw{display:flex;flex-wrap:wrap;gap:6px}
.est-sw button{width:30px;height:30px;border-radius:50%;border:2px solid var(--pline);cursor:pointer;color:var(--digit);font:700 9px system-ui;background:var(--panel2);padding:0}
.est-sw button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.est-stage{background:repeating-conic-gradient(#1a1d23 0 25%,#14171c 0 50%) 0 0/20px 20px;border:1px solid var(--pline);border-radius:14px;padding:12px;display:grid;place-items:center;min-height:200px}
.est-frame{width:100%;margin:0 auto}
.est-frame iframe{display:block;width:100%;border:0;background:transparent}
.est-size{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:10px 0 0;color:var(--pmuted);font-size:13px}
.est-size label{font:700 10.5px/1 system-ui;letter-spacing:1.1px;text-transform:uppercase}
.est-size input{accent-color:var(--accent);width:100%}
.est-code{margin:12px 0 0}
.est-tabs{display:flex;gap:4px;margin:0 0 8px;flex-wrap:wrap}
.est-tabs button{border:1px solid var(--pline);background:var(--panel2);color:var(--pmuted);border-radius:9px;padding:7px 12px;cursor:pointer;font:700 12.5px system-ui}
.est-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.est-code textarea{width:100%;background:#07090c;border:1px solid var(--pline);border-radius:10px;color:#cfe3da;font:12.5px/1.5 ui-monospace,Consolas,monospace;padding:10px;resize:vertical}
.est-act{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.est-note{font-size:12.5px;color:var(--pmuted);margin:8px 0 0}
.embed-box{margin:22px 0 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(14px,2.2vw,24px)}
.embed-box h2{margin:0 0 6px;font-size:21px;letter-spacing:-.4px}
.embed-box>p{color:var(--soft);margin:0 0 16px;max-width:76ch}
.embed-box .est{background:var(--panel);border-radius:14px;padding:16px}
.prose code{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font:13px ui-monospace,Consolas,monospace;color:var(--ink)}
@media (max-width:900px){.est{grid-template-columns:1fr}}

/* ---------- faces on the stopwatch and countdown ---------- */
.face .skin{display:block;margin:8px auto 4px;width:100%}
.face[data-skin] .readout{display:none}
.face[data-skin]{padding-top:12px}
.grp summary span{color:var(--accent2);font-weight:600;margin-left:8px;font-size:13px}
.face-pick .picker{margin:0}
.face[data-skin] #sw-fmtlabel,.face[data-skin] #cd-ends{display:none}
.face .skin .fh{max-width:min(100%,calc(58vh * var(--r,1)))}

/* ---------- pomodoro, world clock, scoreboard, swim clock, time check ---------- */
.pm-task{margin:2px 0 0;color:var(--digit);font-size:15px;opacity:.85;text-align:center}
#pm .skin{margin-top:6px}

.wc-bar{align-items:end;margin:0 0 4px}
.wc-travel input{width:100%;accent-color:var(--accent)}
.wc-travel label b{color:var(--accent2);margin-left:6px;text-transform:none;letter-spacing:0;font-size:13px}
.wc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.wc-card{position:relative;background:var(--panel2);border:1px solid var(--pline);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;color:var(--digit);min-width:0}
.wc-card[data-night="1"]{background:#0e1119}
.wc-th{height:150px}
.wc-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.wc-meta b{font-size:18px;letter-spacing:-.3px}
.wc-country{color:var(--pmuted);font-size:12.5px}
.wc-when{font-size:14px}
.wc-off{color:var(--accent2);font-size:12.5px;font-weight:700}
.wc-x{position:absolute;top:8px;right:8px;border:0;background:rgba(255,255,255,.07);color:var(--pmuted);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px}
.wc-x:hover{background:rgba(255,255,255,.16);color:#fff}
.wc-empty{color:var(--pmuted);padding:24px;text-align:center}
.emb-tool .wc-card{background:#12151b}

.sb-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:stretch}
.sb-team,.sb-mid{background:#08090c;border:1px solid var(--pline);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;align-items:center;min-width:0}
.sb-name{width:100%;text-align:center;background:transparent;border:0;border-bottom:1px dashed var(--pline);color:#ffb000;font:800 clamp(15px,2.4vw,26px)/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;padding:2px 0}
.sb-name:focus{outline:none;border-bottom-color:#ffb000}
.sb-score{font:800 clamp(64px,13vw,180px)/1 ui-monospace,Consolas,monospace;color:#ffb000;text-shadow:0 0 .1em rgba(255,176,0,.7);letter-spacing:-.03em;margin:auto 0}
.sb-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sb-btns button,.sb-per button{border:1px solid var(--pline);background:var(--panel3);color:var(--digit);border-radius:10px;padding:8px 12px;font:700 14px system-ui;cursor:pointer;min-width:42px}
.sb-btns button:hover,.sb-per button:hover{background:#2a323d}
.sb-per{display:flex;gap:12px;align-items:center;font:800 13px system-ui;letter-spacing:2px;color:#ffb000}
.sb-per b{font-size:28px}
.sb-clock,.sb-shot{width:100%}
.sb-shotwrap{width:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.sb-shotwrap[hidden]{display:none}
.sb-shot{max-width:60%}
.sb.horn .sb-board{animation:alarm 1s ease-out}
.sb:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:3vh 3vw;background:#04050a}
.sb:fullscreen #sb-setup{display:none}
.sb:fullscreen .sb-board{flex:1}
@media (max-width:700px){.sb-board{grid-template-columns:1fr 1fr}.sb-mid{grid-column:1/-1;order:-1}}

.swm-wrap{position:relative}
.swm-lead{position:absolute;inset:0;display:grid;place-items:center;font:800 min(34cqw,220px)/1 system-ui;color:var(--accent);background:rgba(10,12,16,.86);border-radius:16px}
#swm .pl-stage{padding:clamp(8px,2vw,24px)}
.swm-info{text-align:center;color:var(--pmuted);margin:10px 0 0;font-variant-numeric:tabular-nums}
#swm:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:2vh 3vw;background:#04050a}
#swm:fullscreen .pl-stage{flex:1;container-type:size;background:transparent;padding:0}
#swm:fullscreen .pl-stage>.fh{width:min(100cqw,calc(100cqh * var(--r,1)));max-width:none}
#swm:fullscreen .opts,#swm:fullscreen .toolbar,#swm:fullscreen .kbd{display:none}

.ts2-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ts2-pair .lbl{display:block;font:700 10.5px/1 system-ui;letter-spacing:1.2px;text-transform:uppercase;color:var(--pmuted);margin:0 0 6px}
.ts2-face{background:#07090c;border:1px solid var(--pline);border-radius:14px;padding:10px;min-width:0}
.ts2-result{display:flex;gap:18px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
.ts2-off{font:800 clamp(34px,7vw,72px)/1 ui-sans-serif,system-ui,sans-serif;color:var(--accent2);letter-spacing:-.03em}
.ts2-result b{font-size:20px}
.ts2-result p{margin:4px 0 0;color:var(--pmuted);max-width:56ch}
#ts2 .stats{margin-top:12px;background:var(--pline);border-color:var(--pline)}
#ts2 .stats>div{background:var(--panel2)}
#ts2 .stats b{color:var(--digit)}
#ts2 .stats span{color:var(--pmuted)}
@media (max-width:560px){.ts2-pair{grid-template-columns:1fr}}

/* tools hub groups */
.hub-h{margin:34px 0 12px;font-size:1.15rem}