:root{
  --ground:#E7ECF4;--cloth:#fff;--cloth-2:#DFE6F1;--ink:#101A2E;--muted:#56668A;--hair:#C3CEE1;
  --persimmon:#C26A1E;--celadon:#1F7A75;--madder:#93406A;--accent:#C26A1E;--accent-soft:rgba(194,106,30,.12);
  --grid-line:rgba(16,26,46,.10);--consumed:rgba(16,26,46,.34);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ground:#0A1020;--cloth:#141E33;--cloth-2:#1C283F;--ink:#E9E3D6;--muted:#8B99B8;--hair:#27344F;
  --persimmon:#E2963C;--celadon:#47B0A9;--madder:#C86E95;--accent:#E2963C;--accent-soft:rgba(226,150,60,.14);
  --grid-line:rgba(233,227,214,.10);--consumed:rgba(233,227,214,.30);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 Karla,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:900px;margin:0 auto;padding:28px 20px 72px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
h1{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:44px;font-weight:700;letter-spacing:-.03em;margin:0}
.date{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.goal{border:1px solid var(--accent);background:var(--accent-soft);border-radius:3px;padding:11px 14px;font-size:14.5px;margin:14px 0 0}
.grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:26px;align-items:start;margin-top:18px}
@media(max-width:780px){.grid{grid-template-columns:1fr}}
.panel{background:var(--cloth);border:1px solid var(--hair);border-radius:4px;padding:18px}
.coach{display:flex;gap:9px;align-items:center;min-height:40px;border:1px solid var(--hair);background:var(--cloth-2);border-radius:3px;padding:8px 12px;font-size:14px;margin-bottom:10px}
.coach .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.coach.warn{border-color:var(--accent);background:var(--accent-soft)}
canvas{width:100%;aspect-ratio:1;display:block;touch-action:none;cursor:pointer}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
button{font:600 14px Karla,sans-serif;padding:9px 15px;border-radius:3px;border:1px solid var(--hair);background:var(--cloth);color:var(--ink);cursor:pointer}
button:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--ground)}
button[disabled]{opacity:.45;cursor:default}
.scorebox{border:1px solid var(--hair);background:var(--cloth-2);border-radius:3px;padding:14px 16px}
.lab{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.score{font-family:"Familjen Grotesk",sans-serif;font-size:42px;font-weight:700;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}
.score.zero{color:var(--muted)}
.work{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);margin-top:6px}
.work .bad{color:var(--accent);font-weight:700}
.legs{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.leg{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;font-size:14px}
.leg.dead{opacity:.55}
.sw{width:12px;height:12px;border-radius:2px}
.leg .n{font-family:"JetBrains Mono",monospace;font-weight:700}
.lb{margin-top:16px;border:1px solid var(--hair);border-radius:4px;overflow:hidden;background:var(--cloth)}
.lbhead{display:flex;justify-content:space-between;padding:10px 14px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair)}
.lbrow{display:grid;grid-template-columns:38px 1fr auto;gap:10px;padding:8px 14px;font-size:14px;border-bottom:1px solid var(--hair)}
.lbrow:last-child{border-bottom:0}
.lbrow .r{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted)}
.lbrow .s{font-family:"JetBrains Mono",monospace;font-weight:700}
.lbrow.me{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.lbrow.me .r,.lbrow.me .n{font-weight:700;color:var(--ink)}
.lbgap{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:12.5px;color:var(--muted);background:var(--cloth-2);border-bottom:1px solid var(--hair)}
.lbgap::before,.lbgap::after{content:"";flex:1;border-top:1px dashed var(--hair)}
.lbfoot{padding:12px 14px;font-size:13.5px;color:var(--muted);background:var(--cloth-2)}
.lbfoot b{color:var(--ink)}
.namerow{display:flex;gap:8px;margin-top:12px}
input[type=text]{flex:1;font:14px Karla,sans-serif;padding:9px 11px;border:1px solid var(--hair);border-radius:3px;background:var(--cloth);color:var(--ink)}
.key{margin-top:12px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.err{color:var(--madder);font-size:13.5px;margin-top:8px;min-height:18px}

.modes{display:flex;gap:0;border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-bottom:10px}
.mode{flex:1;border:0;border-radius:0;background:var(--cloth-2);color:var(--muted);padding:10px;font:600 14px Karla,sans-serif;cursor:pointer;border-bottom:2px solid transparent}
.mode.on{background:var(--cloth);color:var(--ink);border-bottom-color:var(--accent)}
.mode:hover{color:var(--ink)}
.lb.dim{opacity:.4;pointer-events:none}

.sharebox{margin-top:12px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:3px;padding:12px 14px}
.sharehead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
#sharestatus{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
#sharecopy{padding:5px 12px;font-size:13px}
#sharetext{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--ink);user-select:all;-webkit-user-select:all}

.lbtabs{display:flex;border-bottom:1px solid var(--hair)}
.lbtab{flex:1;border:0;border-radius:0;background:var(--cloth-2);color:var(--muted);padding:9px;font:600 13px Karla,sans-serif;cursor:pointer;border-bottom:2px solid transparent}
.lbtab.on{background:var(--cloth);color:var(--ink);border-bottom-color:var(--accent)}
.lbtab:hover{color:var(--ink)}
.lbrow .d{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.lbrow{grid-template-columns:38px 1fr auto}