:root{--color-bg:#f4efe4;--color-surface:#fffdf7;--color-ink:#1b2a4a;--color-ink-rgb:27, 42, 74;--color-accent:#b8863d;--color-danger:#b3261e;--color-muted:#8a8a8a;--font-display:"Playfair Display", Georgia, serif;--font-body:"Lora", Georgia, serif}*{-webkit-tap-highlight-color:#0000;box-sizing:border-box}body{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-user-select:none;background-color:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);background-attachment:fixed;width:100%;height:100%;margin:0;padding:0;font-size:12px}.picker-row{align-items:center;gap:10px;padding:14px 14px 0;display:flex}#starting-note-section{text-align:center;flex:1;min-width:0}#interval-section{flex:0 0 33.333%;min-width:0}.playback-overlay{opacity:0;justify-content:center;align-items:center;width:100%;height:100px;margin-top:8px;transition:opacity .5s ease-in-out;display:flex}.playback-overlay--visible{opacity:1}.playback-overlay .svg-canvas{height:100%}.playback-overlay .playback-error{width:100%}.svg-canvas{text-indent:-9999px;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:contain;width:100%;height:100px;display:block}.playback-error{background:var(--color-danger);color:#fff;text-align:center;margin:0;padding:6px 10px;font-size:11px}.piano{width:100%;max-width:320px;margin:0 auto}.piano-svg{width:100%;height:auto;display:block}.piano-key{cursor:pointer;transition:fill .15s,transform .1s}.piano-key--disabled,.piano-key--disabled:hover{cursor:not-allowed}.piano-key--white:not(.piano-key--selected){fill:url(#ivory-grad);stroke:var(--color-accent);stroke-width:.6px}.piano-key--black:not(.piano-key--selected){fill:url(#ebony-grad)}.piano-key--selected.piano-key--white,.piano-key--selected.piano-key--black{fill:var(--color-accent)}.piano-key--selected{transform:translateY(1.5px)}.piano-key:focus{outline:none}.piano-key:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.piano-key-label{font-size:7px;font-family:var(--font-body);fill:var(--color-muted);pointer-events:none}.piano-caption{font-size:12px;font-family:var(--font-display);color:var(--color-ink);margin:8px 0 0}.flex-container{flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;list-style:none;display:flex}.intervalBlk{border:none;border-bottom:1px solid rgba(var(--color-ink-rgb), .25);color:var(--color-ink);font-family:var(--font-display);cursor:pointer;background:0 0;align-items:center;gap:10px;padding:9px 2px;font-size:1em;font-weight:700;display:flex}.intervalBlk.disabled,.intervalBlk.disabled:hover{cursor:not-allowed}.intervalBlk.isplaying{color:var(--color-accent)}.span-diagram{flex:none;width:40px;height:10px}.span-track{stroke:rgba(var(--color-ink-rgb), .3);stroke-width:1px}.span-dot{fill:rgba(var(--color-ink-rgb), .65)}.span-dot--end{fill:var(--color-accent)}.intervalBlk.isplaying .span-dot--end{fill:var(--color-ink)}.interval-label{text-align:left;flex:1}#tune-notes-container{width:100%}.tune-note-container{flex-flow:wrap;width:100%;margin:0;padding:0;list-style:none;display:flex}.tune-note-block{color:rgba(var(--color-ink-rgb), .6);font-family:var(--font-display);text-align:center;cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;padding:8px 4px 6px;font-size:1em;font-weight:700}.tune-note-block.selected{border-bottom-color:var(--color-ink);color:var(--color-ink)}.tune-note-block.disabled,.tune-note-block.disabled:hover{cursor:not-allowed}#tune-notes-section{margin-top:14px}.offline-download{text-align:center;margin:20px 0 0;padding:0 20px}.offline-download--muted{color:rgba(var(--color-ink-rgb), .55);font-size:11px}.offline-download__button{background:var(--color-surface);color:var(--color-ink);border:1px solid rgba(var(--color-ink-rgb), .2);font-family:var(--font-display);cursor:pointer;border-radius:20px;padding:8px 20px;font-size:12px;font-weight:700}.offline-download__button:hover{background:var(--color-bg)}.offline-download__hint{color:rgba(var(--color-ink-rgb), .6);margin:8px 0 0;font-size:11px}.offline-download__hint--error{color:var(--color-danger)}.offline-download__hint--done{color:var(--color-ink);font-size:12px;font-weight:700}.offline-download__bar{background:rgba(var(--color-ink-rgb), .15);border-radius:5px;width:100%;max-width:260px;height:8px;margin:0 auto;overflow:hidden}.offline-download__bar-fill{background:var(--color-accent);height:100%;transition:width .15s}.offline-clear{text-align:center;margin:10px 0 0}.offline-clear__button{color:rgba(var(--color-ink-rgb), .6);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;padding:4px;font-size:11px;text-decoration:underline}.offline-clear__button:hover{color:var(--color-ink)}.offline-clear__hint{color:rgba(var(--color-ink-rgb), .6);text-align:center;margin:10px 0 0;font-size:11px}.offline-clear__hint--done{color:var(--color-ink);font-weight:700}.offline-clear__hint--error{color:var(--color-danger);margin-top:4px}