:root{--bg: #0a0a0a;--dim: #2a2a2a;--fg: #e8e8e8;--amber: #ffb000;--green: #22e06a;--muted: #666;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;touch-action:manipulation}#app{height:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.5rem,5vh,3rem);padding:env(safe-area-inset-top) 1.5rem env(safe-area-inset-bottom);text-align:center;transition:color .15s ease}.note{font-size:clamp(6rem,30vw,14rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .15s ease}.note sub{font-size:.3em;font-weight:500;vertical-align:baseline;color:var(--muted)}#app.in-tune .note{color:var(--green);text-shadow:0 0 30px rgba(34,224,106,.4)}#app.idle .note{color:var(--dim)}.strobe{display:flex;gap:clamp(4px,1.5vw,10px);align-items:center;height:2rem}.dot{width:clamp(8px,2.2vw,14px);height:clamp(8px,2.2vw,14px);border-radius:50%;background:var(--dim);transition:background .05s linear,box-shadow .05s linear,transform .05s linear}.dot.center{width:clamp(10px,2.8vw,18px);height:clamp(10px,2.8vw,18px);outline:1px solid #444;outline-offset:2px}.dot.on{background:var(--amber);box-shadow:0 0 10px var(--amber);transform:scale(1.1)}.dot.on.far{opacity:.5;transform:scale(1);box-shadow:0 0 6px var(--amber)}.dot.on.mid{opacity:.75;transform:scale(1.05)}.dot.on.center,.dot.lit{background:var(--green);box-shadow:0 0 20px var(--green),0 0 40px #22e06a4d;transform:scale(1.2)}.readout{display:flex;flex-direction:column;gap:.25rem;font-variant-numeric:tabular-nums}.cents{font-size:clamp(1.5rem,6vw,2.5rem);font-weight:600}#app.in-tune .cents{color:var(--green);text-shadow:0 0 20px rgba(34,224,106,.3)}.freq{font-size:.95rem;color:var(--muted)}.enable{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#161616;color:var(--fg);font-size:1rem;font-weight:600;padding:.85rem 2rem;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.enable[hidden]{display:none}.enable:hover{background:#1f1f1f;border-color:#444}.enable:active{transform:scale(.97)}.hint{font-size:.85rem;color:var(--muted);min-height:1.2em}.settings-btn{position:absolute;top:env(safe-area-inset-top,0);right:0;margin:.75rem;background:none;border:none;color:var(--muted);font-size:.8rem;font-family:inherit;font-variant-numeric:tabular-nums;cursor:pointer;padding:.4rem .6rem;border-radius:6px;transition:color .15s,background .15s}.settings-btn:hover{color:var(--fg);background:#ffffff0f}#app{position:relative}.sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}.sheet[hidden]{display:none}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009}.sheet-panel{position:relative;width:100%;max-width:28rem;background:#161616;border:1px solid #2a2a2a;border-bottom:none;border-radius:1rem 1rem 0 0;padding:1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));animation:slide-up .2s ease}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-title{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}.sheet-options{display:flex;flex-wrap:wrap;gap:.5rem}.preset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1e1e1e;border:1px solid #333;color:var(--fg);font-size:.95rem;font-family:inherit;font-variant-numeric:tabular-nums;padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.preset:hover{background:#282828;border-color:#444}.preset.active{background:var(--green);color:#0a0a0a;border-color:var(--green)}.preset:disabled{opacity:.35;cursor:default}.custom-row{display:flex;gap:.5rem;align-items:center;width:100%;margin-top:.25rem}#custom-a4{-webkit-appearance:none;appearance:none;background:#0e0e0e;border:1px solid #2a2a2a;border-radius:6px;color:var(--fg);font-size:.95rem;font-family:inherit;font-variant-numeric:tabular-nums;padding:.6rem .8rem;width:6rem;text-align:center;outline:none;-moz-appearance:textfield}#custom-a4::-webkit-inner-spin-button,#custom-a4::-webkit-outer-spin-button{-webkit-appearance:none}#custom-a4:focus{border-color:var(--green)}
