:root{--color-bg:#0f0f0f;--color-surface:#1a1a1a;--color-surface-raised:#222;--color-border:#2e2e2e;--color-text-primary:#e8e8e8;--color-text-muted:#666;--color-accent:#d4843e;--color-accent-dim:#7a4a20;--color-toggle-active:#d4843e;--color-toggle-inactive:#2e2e2e;--color-marker-playback:#d4843e;--color-marker-pitch-in-tune:#4ec9a0;--color-marker-pitch-out-of-tune:#e05a5a;--color-btn-bg:#2a2a2a;--color-btn-hover:#383838;--color-btn-active:#d4843e;--color-btn-active-text:#0f0f0f;--radius-sm:4px;--radius-md:6px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:40px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:auto}body{background-color:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.4}#app{align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-md);flex-direction:column;min-width:max-content;min-height:100%;display:flex}#app-title{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);font-size:15px;font-weight:500}.toggle-row-section{justify-content:center;width:100%;display:flex}#toggle-row-container{flex-direction:column;align-items:stretch;gap:0;display:flex;position:relative}#playback-marker,#pitch-marker{pointer-events:none;visibility:hidden;width:100%;height:20px;position:relative;overflow:visible}#playback-marker:after,#pitch-marker:after{top:0;left:var(--marker-x,-999px);font-size:16px;line-height:1;position:absolute;transform:translate(-50%)}#playback-marker:after{content:"↓";color:var(--color-marker-playback);top:2px}#pitch-marker:after{content:"↑";transition:left .12s linear;top:auto;bottom:2px}#pitch-marker.in-tune:after{color:var(--color-marker-pitch-in-tune)}#pitch-marker.out-of-tune:after{color:var(--color-marker-pitch-out-of-tune)}#toggle-row{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm);flex-direction:row;gap:2px;display:flex}.toggle-label{align-items:center;gap:var(--spacing-xs);cursor:pointer;padding:var(--spacing-sm) var(--spacing-xs);border-radius:var(--radius-sm);-webkit-user-select:none;user-select:none;flex-direction:column;min-width:44px;transition:background-color .12s;display:flex}.toggle-label:hover{background-color:var(--color-surface-raised)}.toggle-label input[type=checkbox].interval-toggle{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.toggle-label .note-name{color:var(--color-text-primary);letter-spacing:.02em;font-size:13px;font-weight:600}.toggle-label .interval-label{color:var(--color-text-muted);letter-spacing:.03em;font-size:11px}.toggle-label:has(input[type=checkbox].interval-toggle:checked){background-color:var(--color-accent-dim)}.toggle-label:has(input[type=checkbox].interval-toggle:checked) .note-name{color:var(--color-accent)}.toggle-label:has(input[type=checkbox].interval-toggle:checked) .interval-label{color:var(--color-accent);opacity:.75}.controls-row{align-items:center;gap:var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;max-width:700px;padding:var(--spacing-sm) var(--spacing-md);flex-flow:wrap;display:flex}.control-group{align-items:center;gap:var(--spacing-sm);flex-direction:row;display:flex}.control-label{color:var(--color-text-muted);white-space:nowrap;font-size:12px}select,input[type=number]{appearance:none;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;outline:none;padding:5px 10px;font-family:inherit;font-size:13px;transition:border-color .12s,background-color .12s}select:hover,input[type=number]:hover{border-color:var(--color-text-muted)}select:focus,input[type=number]:focus{border-color:var(--color-accent)}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;padding-right:26px}input[type=number]{text-align:right;width:72px}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}button{appearance:none;background-color:var(--color-btn-bg);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;outline:none;padding:6px 18px;font-family:inherit;font-size:13px;font-weight:500;transition:background-color .12s,border-color .12s,color .12s}button:hover{background-color:var(--color-btn-hover);border-color:var(--color-text-muted)}button:focus{border-color:var(--color-accent)}button:active,button.is-playing{background-color:var(--color-btn-active);color:var(--color-btn-active-text);border-color:var(--color-btn-active)}#play-btn,.autoplay-row #autoplay-btn{min-width:110px;margin-left:auto}.pitch-trainer-row .pitch-trainer-label{align-items:center;gap:var(--spacing-sm);cursor:pointer;color:var(--color-text-primary);-webkit-user-select:none;user-select:none;font-size:13px;display:flex}.pitch-trainer-row .pitch-trainer-label input[type=checkbox]#pitch-trainer-toggle{appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface-raised);cursor:pointer;flex-shrink:0;width:16px;height:16px;transition:background-color .12s,border-color .12s;position:relative}.pitch-trainer-row .pitch-trainer-label input[type=checkbox]#pitch-trainer-toggle:checked{background-color:var(--color-accent);border-color:var(--color-accent)}.pitch-trainer-row .pitch-trainer-label input[type=checkbox]#pitch-trainer-toggle:checked:after{content:"";border:2px solid #0f0f0f;border-top:none;border-left:none;width:4px;height:8px;position:absolute;top:2px;left:5px;transform:rotate(45deg)}.pitch-trainer-row .pitch-trainer-label input[type=checkbox]#pitch-trainer-toggle:focus{border-color:var(--color-accent)}