:root{--primary:#3f51b5;--primary-dark:#303f9f;--accent:#ff4081;--accent-dark:#99264d;--bg:#f3f4f6;--surface:#fff;--white:#fff;--gray:#e5e7eb;--text:#111827;--muted:#6b7280;--radius-sm:10px;--radius:16px;--radius-pill:999px;--shadow-xs:0 1px 2px #0f172a0f;--shadow-sm:0 2px 8px #0f172a14;--shadow-md:0 8px 24px #0f172a1f;--fab-margin:16px;--font:system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}.app{height:100%;height:100dvh;min-height:100%;background:var(--surface);max-width:1100px;min-height:100dvh;box-shadow:var(--shadow-md);grid-template-rows:auto minmax(0,1fr);margin:0 auto;display:grid}.toolbar{background:var(--surface);color:var(--text);height:60px;padding:0 var(--fab-margin);border-bottom:1px solid var(--gray);z-index:10;align-items:center;gap:12px;display:flex;position:relative}.toolbar .title{white-space:nowrap;text-overflow:ellipsis;color:var(--primary-dark);flex:1;font-size:18px;font-weight:600;overflow:hidden}.experimental-badge{color:var(--accent);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:#ff40811f;border-radius:999px;flex:none;padding:2px 8px;font-size:11px;font-weight:700}.icon-button{width:40px;height:40px;color:var(--primary-dark);cursor:pointer;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;margin-left:-8px;padding:0;transition:background .15s;display:inline-flex}.icon-button:hover{background:#303f9f14}.icon-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.menu-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.level-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.icon-button svg{fill:currentColor;width:22px;height:22px}.mic{opacity:.9;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}.toolbar-phrase{color:var(--primary-dark);white-space:nowrap;margin-left:auto;font-size:14px;font-weight:600}.mic svg{width:24px;height:24px;fill:var(--accent)}.screen-area{background:var(--bg);grid-template:minmax(0,1fr)/minmax(0,1fr);min-height:0;display:grid}.screen-area>.screen{grid-area:1/1;min-height:0}.screen-inner{width:100%;max-width:480px;margin:0 auto}.menu-screen,.level-screen{padding:24px 16px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));background:var(--bg);align-content:start;display:grid;overflow-y:auto}.menu-list{gap:12px;display:grid}.menu-card{border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text);font:inherit;text-align:left;box-shadow:var(--shadow-sm);cursor:pointer;border:0;align-items:center;gap:16px;padding:18px 20px;transition:transform .12s,box-shadow .12s;display:flex}.menu-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.menu-card:active{box-shadow:var(--shadow-xs);transform:translateY(0)}.menu-card-copy{flex:1;gap:4px;display:grid}.menu-card-title{color:var(--primary-dark);letter-spacing:-.01em;font-size:18px;font-weight:600}.menu-card-desc{color:var(--muted);font-size:14px;line-height:1.4}.menu-card-arrow{color:var(--accent);font-size:24px;line-height:1}.empty-state{border-radius:var(--radius);background:var(--surface);color:var(--muted);text-align:center;box-shadow:var(--shadow-sm);margin:0;padding:24px}.level-screen{flex-direction:column;display:flex}.level-content{--note-size:48px;flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:24px;min-height:0;display:flex}.phrase-label{color:var(--primary-dark);letter-spacing:-.01em;margin:0;font-size:17px;font-weight:600}.note-circles{min-height:var(--note-size);flex-wrap:wrap;justify-content:center;align-items:center;gap:max(6px,min(2vw,12px));max-width:100%;display:flex}.note-circle{width:var(--note-size);height:var(--note-size);border:clamp(2px, calc(var(--note-size) * .05), 10px) solid var(--gray);background:var(--surface);box-shadow:var(--shadow-xs);border-radius:50%;transition:border-color .15s,transform .15s;position:relative}.note-circle.is-correct{border-color:var(--primary);color:var(--primary)}.note-circle.hint-higher{border-top-color:var(--primary-dark)}.note-circle.hint-lower{border-bottom-color:var(--primary-dark)}.note-circle-icon{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.note-hint{width:55%;height:auto;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;pointer-events:none;position:absolute;left:50%;overflow:visible;transform:translate(-50%)}.note-hint-higher{bottom:calc(100% + 2px)}.note-hint-lower{top:calc(100% + 2px)}.content{gap:var(--fab-margin);padding:var(--fab-margin);background:var(--bg);grid-template-rows:auto 1fr auto;min-height:0;display:grid}.content.calibrating{grid-template-rows:auto auto 1fr}.status-row{color:var(--primary-dark);justify-content:space-between;align-items:center;gap:12px;padding:0 4px;font-size:13px;font-weight:500;display:flex}.status-row .phrase{color:var(--text)}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);grid-template-rows:minmax(0,1fr) auto;min-height:0;display:grid;position:relative;overflow:hidden}#balls{width:100%;min-width:0;height:100%;min-height:0;display:block}.bottom{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px var(--fab-margin);gap:12px;display:grid}.level-wrap{color:var(--muted);grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:13px;display:grid}.val{color:var(--primary-dark);font-variant-numeric:tabular-nums;text-align:right;min-width:52px;font-weight:600}meter#level{border-radius:var(--radius-pill);width:100%;height:8px;overflow:hidden}meter#level::-webkit-meter-bar{background:var(--gray);border-radius:var(--radius-pill);border:none}meter#level::-webkit-meter-optimum-value{background:var(--primary);border-radius:var(--radius-pill)}meter#level::-webkit-meter-suboptimum-value{background:var(--accent);border-radius:var(--radius-pill)}meter#level::-webkit-meter-even-less-good-value{background:var(--accent-dark);border-radius:var(--radius-pill)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-pill);background:var(--gray);cursor:pointer;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--surface);border-radius:50%;width:22px;height:22px;transition:transform .1s;box-shadow:0 2px 6px #ff408159}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.08)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border:2px solid var(--surface);border-radius:50%;width:22px;height:22px}.start-overlay{z-index:100;padding:max(16px,min(5vw,32px));padding-top:calc(clamp(18px, 4.4dvh, 58px) + env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom));text-align:center;background:linear-gradient(180deg, #eef2ff 0%, var(--surface) 100%);color:var(--primary-dark);grid-template-rows:auto minmax(0,1fr) auto;place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0;overflow-y:auto}.welcome-wordmark{width:min(67.5vw,486px);color:var(--primary-dark);grid-row:1;margin:0;line-height:0}.welcome-wordmark-svg{width:100%;height:auto;display:block}.welcome-badge{transform-box:fill-box;transform-origin:50%}@keyframes welcome-badge-jump{0%{transform:translate(0)}35%{transform:translate(4px)}70%{transform:translate(0)}85%{transform:translate(1px)}to{transform:translate(0)}}.welcome-badge.welcome-badge-jumping{animation:.42s ease-out welcome-badge-jump}.welcome-wordmark text{font-family:inherit}.welcome-logo{filter:drop-shadow(0 12px 24px #3f51b52e);grid-row:2;align-self:center;width:min(84vw,46dvh,610px);height:auto;margin:0;display:block;transform:translateY(.57%)}.start-bottom{grid-row:3;justify-items:center;gap:max(8px,min(1.4dvh,16px));width:100%;max-width:360px;display:grid}.start-actions{justify-items:center;gap:max(6px,min(1.2dvh,12px));display:grid;position:relative}.welcome-loading{color:var(--primary-dark);justify-content:center;align-items:center;margin:0;font-size:max(18px,min(4.8vw,20px));font-weight:600;display:none;position:absolute;top:0;bottom:0;left:0;right:0}.start-overlay.is-loading .start-button,.start-overlay.is-loading .start-footer{visibility:hidden}.start-overlay.is-loading .welcome-loading{display:flex}.start-footer{justify-items:center;gap:8px;width:100%;display:grid}.start-overlay.is-hidden{display:none}.start-button{font:inherit;border-radius:var(--radius-pill);background:var(--accent);min-width:max(160px,min(44vw,200px));color:var(--white);cursor:pointer;letter-spacing:.01em;border:0;padding:max(13px,min(2.4dvh,16px)) max(32px,min(9vw,44px));font-size:max(18px,min(4.8vw,20px));font-weight:600;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 20px #ff40814d}.start-button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ff408161}.start-button:active{transform:translateY(1px);box-shadow:0 4px 12px #ff408147}.start-button:disabled{opacity:.6;cursor:default}.start-button:focus-visible{outline:3px solid var(--primary-dark);outline-offset:3px}.install-secondary:focus-visible{outline:3px solid var(--primary-dark);outline-offset:3px}.repeat-button{font:inherit;border-radius:var(--radius-pill);color:var(--primary-dark);cursor:pointer;background:0 0;border:1.5px solid;padding:max(8px,min(1.6dvh,10px)) max(18px,min(5vw,22px));font-size:max(13px,min(3.5vw,15px));font-weight:600;transition:background .15s}.repeat-button:hover{background:#303f9f0f}.repeat-button:active{transform:translateY(1px)}.repeat-button:focus-visible{outline:3px solid var(--primary-dark);outline-offset:3px}.install-secondary{font:inherit;border-radius:var(--radius-pill);color:var(--primary-dark);cursor:pointer;background:0 0;border:1.5px solid;padding:max(8px,min(1.6dvh,10px)) max(18px,min(5vw,22px));font-size:max(13px,min(3.5vw,15px));font-weight:600;transition:background .15s}.install-secondary:hover{background:#303f9f0f}.install-hint{max-width:320px;color:var(--primary-dark);opacity:.72;margin:0;font-size:max(12px,min(3.3vw,13px));line-height:1.4}.build-info{color:var(--primary-dark);opacity:.6;text-align:center;margin:0;font-size:max(11px,min(3vw,12px))}@media (orientation:landscape) and (max-height:560px){.app{max-width:none}.content{grid-template:"status status""card bottom"1fr/1fr minmax(220px,30vw)}.status-row{grid-area:status}.card{grid-area:card}.bottom{grid-area:bottom;align-content:start;overflow-y:auto}}@media (max-height:700px){.start-overlay{padding-top:calc(clamp(12px, 3dvh, 24px) + env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}.welcome-logo{width:min(84vw,42dvh)}.start-bottom,.start-actions,.start-footer{gap:6px}}@media (orientation:landscape) and (max-height:560px){.start-overlay{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:max(16px,min(6vw,48px));padding-left:max(20px,min(6vw,64px));padding-right:max(20px,min(6vw,64px))}.welcome-wordmark{grid-area:1/1;align-self:end;width:min(40vw,300px)}.welcome-logo{grid-area:2/1;align-self:center;width:min(36dvh,240px)}.start-bottom{grid-area:1/2/3;align-self:center}}.level-list{gap:12px;display:grid}.level-card{border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text);box-shadow:var(--shadow-sm);border:0;align-items:center;gap:12px;padding:16px;transition:transform .12s,box-shadow .12s;display:flex}.level-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.level-card-copy{flex:1;gap:4px;display:grid}.level-card-title{color:var(--primary-dark);letter-spacing:-.01em;font-size:17px;font-weight:600}.level-card-desc{color:var(--muted);font-size:13px;line-height:1.4}.level-card-score{color:var(--primary-dark);font-size:12px;font-weight:600}.level-card-actions{align-items:center;gap:8px;display:flex}.level-action{background:var(--bg);width:40px;height:40px;color:var(--primary-dark);cursor:pointer;border:0;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:background .15s;display:inline-flex}.level-action:hover{background:var(--gray)}.level-action svg{fill:currentColor;width:20px;height:20px}.level-action .level-note-icon{width:24px;height:24px}.level-action.level-action--pink-note{color:#ff4081;background:#fff;border:2px solid #ff4081}.level-action.level-action--pink-note .level-note-icon{width:28px;height:28px}.level-footer{justify-content:center;gap:12px;width:100%;display:flex}.level-footer .repeat-button{flex:1;max-width:160px}.level-notes{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.level-bottom{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}input[type=number]{border:1px solid var(--gray);border-radius:var(--radius-sm);width:100%;font:inherit;background:var(--surface);color:var(--text);padding:10px 12px;transition:border-color .15s,box-shadow .15s}input[type=number]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #3f51b526}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.customize-screen{padding:24px 16px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));background:var(--bg);overflow-y:auto}.customize-container{gap:20px;width:100%;max-width:560px;margin:0 auto;display:grid}.customize-form{gap:14px;display:grid}.field{grid-template-rows:auto 1fr;align-items:center;gap:6px;min-height:80px;display:grid}.field-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.field-head .field-label,.field-head .field-value{margin:0;line-height:1.2}.field-label{color:var(--primary-dark);align-self:start;font-size:13px;font-weight:600}.field-value{color:var(--muted);text-align:right;white-space:nowrap;font-size:13px;font-weight:600}.field-input,.field-select{border:1px solid var(--gray);border-radius:var(--radius-sm);width:100%;font:inherit;background:var(--surface);color:var(--text);flex:1;height:44px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}.field-range{flex:1;align-self:center;width:100%;height:44px;margin:4px 0}.primary-button{font:inherit;border-radius:var(--radius-pill);background:var(--accent);color:var(--white);cursor:pointer;letter-spacing:.01em;border:0;margin-top:4px;padding:14px 24px;font-size:16px;font-weight:600;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 20px #ff40814d}.primary-button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ff408161}.primary-button:active{transform:translateY(1px)}.modal-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);gap:12px;width:100%;max-width:320px;padding:20px;display:grid}.modal-title{color:var(--primary-dark);margin:0;font-size:18px;font-weight:600}.modal-message{color:var(--text);margin:0;font-size:14px}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.settings-group{color:var(--primary-dark);letter-spacing:-.01em;text-align:center;margin:20px 0 8px;font-size:18px;font-weight:700}.field-checkbox{align-items:center;gap:.5rem;font-weight:600;display:flex}.abcjs-container svg{width:100%;height:100%}