:root{color-scheme:dark;--bg:#101519;--panel:#1a2329;--muted:#aab9c1;--green:#6fed9e;--cyan:#68cff8;--gold:#f5c666;font-family:system-ui,sans-serif;color:#f2f6f7;background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;min-height:44px;border:1px solid #43545f;border-radius:10px;background:#25333c;color:inherit;padding:10px 15px}button{cursor:pointer;font-weight:650}button:hover{border-color:var(--cyan)}button:disabled{opacity:.4;cursor:default}a{color:var(--cyan)}button.primary{background:var(--green);border-color:var(--green);color:#10281a}header{max-width:1600px;margin:auto;display:flex;align-items:center;gap:22px;padding:16px 24px;border-bottom:1px solid #2d3d45}header a{text-decoration:none;font-weight:700}header button{margin-left:auto}.eyebrow{letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--green)}main{max-width:1600px;margin:auto;padding:24px}h1{font-size:clamp(27px,3vw,42px);margin:0 0 8px;letter-spacing:-.04em}h2{margin:8px 0 12px;font-size:23px}p{line-height:1.5;margin:10px 0;color:var(--muted)}.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:24px 0}.toolbar label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.toolbar select{max-width:280px;color:#fff}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.view{min-width:0}.stage{position:relative;background:#080d10;border:1px solid #33434c;border-radius:16px;overflow:hidden;aspect-ratio:8/5;display:grid;place-items:center}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:manipulation}canvas:focus-visible{outline:3px solid var(--cyan);outline-offset:-4px}.empty{position:absolute;text-align:center;max-width:420px;padding:24px;pointer-events:none}.big-ring{display:inline-grid;place-items:center;border:3px solid var(--green);box-shadow:0 0 30px #6fed9e22;width:72px;height:72px;border-radius:50%;font-weight:800;font-size:28px;color:var(--green)}.source{position:absolute;left:16px;top:16px;padding:7px 10px;border-radius:6px;background:#0c161ce6;font-size:11px;font-weight:800;letter-spacing:.1em}.live-status{display:flex;align-items:center;gap:10px;padding:18px 0 0}.live-status strong{font-size:19px}.live-status>span{width:12px;height:12px;border-radius:50%;background:var(--gold);flex-shrink:0}.live-status>span.ready{background:var(--green);box-shadow:0 0 15px #6fed9e55}.card{background:var(--panel);border:1px solid #33434c;border-radius:14px;padding:20px;margin-bottom:14px}.card>button{margin:5px 3px 0 0}.muted{font-size:12px}.placement{display:flex;align-items:center;gap:10px;border-top:1px solid #34444d;padding:12px 0}.ball-chip{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f6c746;color:#151b1f;font-size:12px;font-weight:800}.ball-chip.cue{background:#eee}.placement strong{font-size:14px}.placement small{display:block;color:var(--muted)}.placement.correct strong{color:var(--green)}.stats{display:flex;justify-content:space-between;gap:12px}.stats strong{display:block;font-size:22px}.stats span{display:block;font-size:11px;color:var(--muted);max-width:85px}.actions{display:flex;gap:8px}.actions button{flex:1}.calibration,#demoControls{padding:16px 0}.calibration button,#demoControls button{margin:4px}#demoControls span{display:block;color:var(--gold);font-size:12px;margin:8px}.help{margin-top:20px;border-top:1px solid #33434c;padding:20px 0}.help summary{cursor:pointer;font-weight:700;min-height:44px}.help p{max-width:900px}#exitTv{position:fixed;right:16px;bottom:16px;z-index:10}.tv header,.tv .intro,.tv .toolbar,.tv .help{display:none}.tv main{max-width:none;padding:18px}.tv .workspace{grid-template-columns:minmax(0,1fr) 280px}.tv .source{font-size:14px}.tv .live-status strong{font-size:25px}[hidden]{display:none!important}@media(max-width:850px){main{padding:16px}header{padding:12px 16px;gap:12px}.workspace,.tv .workspace{grid-template-columns:1fr}.toolbar{gap:8px}.toolbar label{flex:1}.toolbar select{width:100%;max-width:100%}.toolbar label:nth-child(3){flex-basis:100%}.toolbar>button{flex:1}.source{font-size:9px;top:10px;left:10px}.card{padding:16px}.intro p{font-size:14px}.empty h2{font-size:18px}.empty p{font-size:12px}.big-ring{width:48px;height:48px;font-size:20px}header>.eyebrow{display:none}}

.shot-help { margin:14px 0; border:1px solid #43545f; border-radius:10px; overflow:hidden; }
.shot-help summary { padding:12px; min-height:44px; cursor:pointer; font-weight:700; color:var(--green); }
.shot-help summary:focus-visible { outline:2px solid var(--cyan); outline-offset:-3px; }
#shotHelpContent { padding:0 12px 12px; }
.shot-help-diagrams { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.shot-help figure { margin:0; padding:8px 4px; text-align:center; border-radius:8px; background:#10191e; }
.shot-help h3 { font-size:12px; margin:0 0 6px; }
.shot-help svg { display:block; width:100%; max-width:104px; margin:auto; }
.shot-help figcaption { font-size:12px; line-height:1.35; font-weight:650; }
.shot-help small { display:block; margin-top:5px; color:var(--muted); font-size:10px; font-weight:400; }
.shot-help p { font-size:13px; line-height:1.5; margin:10px 0 0; }
.shot-help p.muted { font-size:11px; }
.shot-help b { color:#f2f6f7; }