@font-face{font-family:Oswald;font-style:normal;font-weight:200 700;font-display:swap;src:url(/oswald.woff) format("woff")}:root{--bg: #473144;--bg-deep: #3a2738;--panel: #523a50;--grid: rgba(250, 174, 123, .05);--text: #f6ece6;--dim: #a78f9d;--accent: #faae7b;--off: #ef6f5c;font-family:Oswald,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font-family:inherit}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;user-select:none;-webkit-user-select:none}.app{background:var(--bg);position:relative;display:flex;flex-direction:column;height:100dvh;max-width:460px;margin-inline:auto;padding:max(env(safe-area-inset-top),16px) 20px max(env(safe-area-inset-bottom),20px);overflow:hidden}.app.start{align-items:center;justify-content:center;text-align:center;gap:20px}.logo-mark{width:160px;height:auto}.hint{color:var(--dim);font-weight:300;max-width:320px;line-height:1.5}.start-btn{margin-top:8px;padding:15px 36px;font-family:inherit;font-size:18px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--bg-deep);background:var(--accent);border:none;border-radius:999px;cursor:pointer}.start-btn:disabled{opacity:.6}.install-btn{padding:11px 28px;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent);background:none;border:1.5px solid var(--accent);border-radius:999px;cursor:pointer}.install-hint{color:var(--dim);font-weight:300;font-size:14px;max-width:280px;line-height:1.5}.header{display:flex;align-items:center;justify-content:space-between}.header-actions{display:flex;align-items:center;gap:16px}.auto-toggle{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--dim);cursor:pointer}.stop-btn{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--dim);cursor:pointer}.stop-btn svg{width:22px;height:22px}.auto-label{font-size:13px;font-weight:600;letter-spacing:2px}.switch{position:relative;width:46px;height:26px;border-radius:999px;background:#5b4257;transition:background .2s}.switch.on{background:var(--accent)}.knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.switch.on .knob{transform:translate(20px)}.header-selectors{display:flex;flex-direction:column;gap:2px}.instrument-trigger,.tuning-trigger{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:none;border:none;color:var(--text);cursor:pointer;text-align:left}.chevron{font-size:20px;color:var(--dim)}.instrument-name{font-size:21px;font-weight:500;letter-spacing:.5px;color:var(--text)}.tuning-name{font-size:15px;font-weight:400;letter-spacing:.5px;color:var(--dim)}.tuning-trigger .chevron{font-size:15px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-end;z-index:10}.sheet{width:100%;background:#3a2738d1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px 20px 0 0;padding:12px 12px max(env(safe-area-inset-bottom),16px);max-height:70dvh;overflow-y:auto}.sheet-title{text-align:center;color:var(--dim);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:12px 0}.sheet-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;background:none;border:none;border-radius:12px;color:var(--text);font-family:inherit;font-size:18px;font-weight:400;cursor:pointer}.sheet-item.active{background:#faae7b24;color:var(--accent)}.sheet-strings{color:var(--dim);font-size:14px;letter-spacing:2px}.display{position:relative;flex:1;min-height:0;margin-top:8px}.display canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.centerline{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translate(-50%);background:#f6ece614;transform-origin:center;transition:background .2s}.centerline.lit{background:var(--accent);box-shadow:0 0 22px #faae7bbf;animation:line-grow .4s ease-out}@keyframes line-grow{0%{transform:translate(-50%) scaleY(0)}to{transform:translate(-50%) scaleY(1)}}.accidental{position:absolute;top:20px;font-size:32px;color:var(--dim);pointer-events:none}.accidental.flat{left:2px}.accidental.sharp{right:2px}.needle{position:absolute;top:33%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;flex-direction:column;align-items:center;color:var(--accent);transition:opacity .15s}.needle-num{font-size:46px;font-weight:500;line-height:.9;font-variant-numeric:tabular-nums;color:inherit}.needle-hint{margin-top:4px;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--dim)}.needle-nib{display:block;margin-top:8px;width:24px;height:auto;color:inherit;transition:filter .2s}.needle.intune .needle-nib{filter:drop-shadow(0 0 8px rgba(250,174,123,.85))}.bloom{position:absolute;left:50%;top:33%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;z-index:1;animation:bloom .65s ease-out forwards}@keyframes bloom{0%{transform:scale(1);opacity:.9}to{transform:scale(9);opacity:0}}.tune-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 28%,rgba(250,174,123,.22),transparent 62%);pointer-events:none;z-index:1;animation:tune-flash .7s ease-out forwards}@keyframes tune-flash{0%{opacity:1}to{opacity:0}}.note-circle{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);width:78px;height:78px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:500;color:var(--text);background:var(--bg);border:1.5px solid #5e4459;border-radius:50%;z-index:2}.note-circle.in-tune{border-color:var(--accent);color:var(--accent);animation:note-pop .4s ease-out}@keyframes note-pop{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.14)}to{transform:translate(-50%,-50%) scale(1)}}.note-circle sup{font-size:.5em;font-weight:500;margin-left:1px}.strings{display:flex;justify-content:center;gap:10px;padding-top:8px}.string-btn{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:18px;font-weight:500;color:var(--dim);background:none;border:1.5px solid #5a4156;border-radius:50%;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.string-btn:disabled{cursor:default}.string-btn.active{color:var(--text);border-color:var(--text)}.string-btn.active.in-tune{color:var(--bg-deep);background:var(--accent);border-color:var(--accent)}.string-btn sup{font-size:.55em;font-weight:400}.install-banner{position:absolute;left:16px;right:16px;bottom:max(env(safe-area-inset-bottom),16px);display:flex;align-items:center;gap:12px;padding:14px 16px;background:#3a2738eb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(250,174,123,.25);border-radius:16px;z-index:20;animation:banner-up .35s ease-out}@keyframes banner-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.install-banner-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding-right:8px}.install-banner-title{font-weight:600;font-size:15px;color:var(--text)}.install-banner-text{font-size:13px;font-weight:300;color:var(--dim);line-height:1.4}.install-banner-btn{flex-shrink:0;padding:9px 18px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--bg-deep);background:var(--accent);border:none;border-radius:999px;cursor:pointer}.install-banner-close{position:absolute;top:4px;right:8px;padding:4px 8px;font-size:20px;line-height:1;color:var(--dim);background:none;border:none;cursor:pointer}