:root{color-scheme:dark;--bg: #14151f;--panel: #1f2233;--panel-2: #272b40;--text: #e8eaf2;--muted: #9aa0b8;--accent: #5cc8ff;--green: #4cd970;--red: #ff6b6b;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100dvh}body{background:var(--bg);color:var(--text)}.app{max-width:520px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 12px 24px;display:flex;flex-direction:column;gap:12px}.app-header{display:flex;align-items:center;justify-content:space-between}.app-header h1{margin:0;font-size:1.5rem;letter-spacing:.5px}.header-actions{display:flex;gap:6px}.header-actions button{background:var(--panel-2);border:none;color:var(--text);font-size:1.1rem;width:40px;height:40px;border-radius:10px;cursor:pointer}.board{position:relative;width:100%;aspect-ratio:1 / 1}.blip{position:absolute;pointer-events:none;border-radius:50%;transform-origin:center;animation:blip .85s ease-out forwards}.blip-good{background:radial-gradient(circle,rgba(80,220,120,.95) 0%,rgba(80,220,120,.45) 38%,transparent 60%)}.blip-bad{background:radial-gradient(circle,rgba(255,80,80,.95) 0%,rgba(255,80,80,.45) 38%,transparent 60%)}.blip-alt{background:radial-gradient(circle,rgba(90,200,255,.85) 0%,rgba(90,200,255,.35) 38%,transparent 60%)}.blip-hint{background:radial-gradient(circle,rgba(80,220,120,.95) 0%,rgba(80,220,120,.45) 38%,transparent 60%);animation-duration:1.5s}.blip-guide{background:radial-gradient(circle,rgba(90,200,255,.9) 0%,rgba(90,200,255,.4) 38%,transparent 60%);animation-duration:1.5s}@keyframes blip{0%{transform:scale(.15);opacity:0}30%{opacity:1}to{transform:scale(1.1);opacity:0}}.panel{background:var(--panel);border-radius:12px;padding:14px;min-height:64px;display:flex;flex-direction:column;gap:12px}.statsbar{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--muted)}.statsbar-err{color:var(--red);font-weight:600}.hint{text-align:center;font-size:.9rem}.muted{color:var(--muted)}.error-hint{text-align:center;background:#ff6b6b24;color:var(--red);border:1px solid rgba(255,107,107,.4);border-radius:8px;padding:10px;font-size:.95rem}.error-hint strong{color:#fff}.summary h2{margin:0 0 4px;font-size:1.15rem;text-align:center}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{background:var(--panel-2);border-radius:10px;padding:12px 6px;text-align:center}.stat-value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:.72rem;color:var(--muted);margin-top:2px}.btn-primary{width:100%;padding:14px;font-size:1rem;font-weight:600;color:#04121a;background:var(--accent);border:none;border-radius:10px;cursor:pointer}.btn-primary:active{transform:scale(.99)}.summary-actions{display:flex;gap:10px}.summary-actions .btn-primary{width:auto;flex:2}.btn-secondary{flex:1;padding:14px;font-size:1rem;font-weight:600;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:10px;cursor:pointer}.btn-secondary:active{transform:scale(.99)}.play-controls{display:flex;gap:10px}.play-controls .btn-secondary{flex:1}.btn-skip{align-self:center;background:none;border:none;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer;padding:4px}.play-row{display:flex;align-items:center;gap:10px}.play-row .statsbar{flex:1}.btn-hint{background:var(--panel-2);border:1px solid #3a3f58;color:var(--text);border-radius:8px;padding:8px 10px;font-size:.85rem;cursor:pointer;white-space:nowrap}.btn-hint:disabled{opacity:.4;cursor:default}.tone-good{color:var(--green)}.tone-ok{color:#ffd166}.tone-bad{color:var(--red)}.grade{text-align:center;font-weight:700;font-size:1rem;padding:4px}.grade-good{color:var(--green)}.grade-ok{color:#ffd166}.grade-bad{color:var(--red)}.best-worst{display:flex;flex-direction:column;gap:6px;font-size:.9rem}.best-worst span{font-weight:700;margin-right:4px}.modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.modal{background:var(--panel);width:100%;max-width:480px;max-height:86dvh;overflow-y:auto;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:0;font-size:1.2rem}.modal-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer}.modal section{display:flex;flex-direction:column;gap:8px}.modal h3{margin:0;font-size:.95rem;color:var(--muted)}.note{margin:0;font-size:.8rem;color:var(--muted)}.segmented{display:flex;gap:6px}.seg{flex:1;padding:10px;border-radius:8px;border:1px solid #3a3f58;background:var(--panel-2);color:var(--text);cursor:pointer}.seg.active{background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:600}.checklist{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto}.check{display:flex;align-items:center;gap:10px;font-size:.9rem}.check em{color:var(--muted);font-style:normal}.check input,.row input[type=number]{accent-color:var(--accent)}.row{display:flex;align-items:center;gap:10px;font-size:.9rem}.row.disabled{opacity:.4}.row input[type=number]{width:64px;padding:6px;border-radius:6px;border:1px solid #3a3f58;background:var(--panel-2);color:var(--text)}