@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,800;1,9..144,600&display=swap";:root{--bg-deep:#0a0a0c;--surface:#121218;--surface-2:#1a1a22;--border:#2a2a34;--text:#c4c2ce;--text-muted:#7a7788;--text-bright:#f4f2ff;--gold:#e4bc84;--gold-dim:#c49a62;--copper:#b8895c;--tuned:#7ed9a8;--meter-low:#6b8cc7;--meter-mid:var(--gold);--meter-high:#d98f6e;--font-sans:"DM Sans", system-ui, sans-serif;--font-display:"Fraunces", Georgia, serif;--radius-md:12px;--radius-lg:22px;--ease-smooth:cubic-bezier(.22, 1, .36, 1);--card-shadow:0 24px 56px #0000007a, 0 0 0 1px #ffffff0b inset}*,:before,:after{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{min-height:100svh;font-family:var(--font-sans);font-feature-settings:"kern" 1, "liga" 1;background:var(--bg-deep);color:var(--text);-webkit-font-smoothing:antialiased;background-image:radial-gradient(120% 85% at 50% -32%,#d4a5741a,#0000 55%),radial-gradient(55% 45% at 100% 102%,#5a467824,#0000),radial-gradient(40% 30% at 0 80%,#b8895c0f,#0000);background-attachment:fixed;margin:0;font-size:16px;line-height:1.5}#root{min-height:100svh}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.app{box-sizing:border-box;flex-direction:column;max-width:520px;min-height:100svh;margin:0 auto;padding:clamp(1rem,4vw,2.5rem) clamp(1rem,4vw,2.5rem) calc(clamp(1rem,4vw,2.5rem) + 10px);display:flex}.skip-link{z-index:100;background:var(--surface-2);color:var(--gold);border-radius:8px;padding:.5rem 1rem;font-weight:600;text-decoration:none;position:absolute;left:-9999px}.skip-link:focus{outline:2px solid var(--gold);outline-offset:2px;top:.75rem;left:clamp(1rem,4vw,2.5rem)}.header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem 1.25rem;margin-bottom:1.5rem;display:flex}.brand{text-align:left;align-items:center;gap:.9rem;display:flex}.brand-mark{background:linear-gradient(145deg, var(--gold) 0%, var(--gold-dim) 42%, var(--copper) 100%);border-radius:14px;width:46px;height:46px;position:relative;box-shadow:inset 0 0 0 1px #ffffff24,0 10px 28px #00000080,0 0 40px #d4a5741f}.brand-mark-inner{background:radial-gradient(circle at 35% 35%,#ffffff59,#0a0a0cd9 55%,#0a0a0cf2 100%);border-radius:50%;width:18px;height:18px;margin:auto;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14,0 2px 8px #0006}.title{font-family:var(--font-display);letter-spacing:-.035em;color:var(--text-bright);margin:0;font-size:1.7rem;font-weight:700;line-height:1.08}.tagline{color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin:.25rem 0 0;font-size:.72rem;font-weight:500}.header-right{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.65rem .85rem;display:flex}.header-actions{flex-shrink:0}.live-pill{letter-spacing:.06em;text-transform:uppercase;color:var(--tuned);background:#7ed9a814;border:1px solid #7ed9a838;border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .65rem .35rem .5rem;font-size:.72rem;font-weight:600;display:inline-flex}.live-dot{background:var(--tuned);border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite live-pulse;box-shadow:0 0 10px #7ed9a8d9}.live-text{opacity:.92}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.92)}}.btn{cursor:pointer;transition:transform .15s var(--ease-smooth), box-shadow .22s ease, background .2s ease, border-color .2s ease;border:none;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.65rem 1.15rem;font-family:inherit;font-size:.875rem;font-weight:600;display:inline-flex}.btn-icon{opacity:.92;display:flex}.btn:active{transform:scale(.97)}.btn-primary{color:var(--bg-deep);background:linear-gradient(180deg, #f0d4a8 0%, var(--gold) 28%, var(--copper) 100%);box-shadow:inset 0 0 0 1px #ffffff38,0 4px 22px #d4a57461}.btn-primary:hover{box-shadow:inset 0 0 0 1px #ffffff4d,0 6px 32px #d4a5747a}.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{color:var(--gold);background:#d4a5740a;border-color:#d4a57473}.banner{border-radius:var(--radius-md);text-align:left;margin-bottom:1rem;padding:.8rem 1rem;font-size:.875rem;line-height:1.45}.banner-error{color:#f0b0b0;background:#dc5a5a1a;border:1px solid #dc5a5a52}.main{flex-direction:column;flex:1;gap:1.35rem;display:flex}.card{background:linear-gradient(165deg, #ffffff08 0%, transparent 42%), var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:1.6rem 1.5rem;transition:border-color .35s,box-shadow .35s}.display-card{text-align:center;position:relative;overflow:hidden}.display-card--tuned{box-shadow:var(--card-shadow), 0 0 0 1px #7ed9a81f inset, 0 0 48px #7ed9a814;border-color:#7ed9a859}.display-card:before{content:"";pointer-events:none;background:radial-gradient(at 50% 0,#d4a5741a 0%,#0000 62%);height:75%;position:absolute;inset:-45% -25% auto}.display-card:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff05}.note-block{z-index:1;justify-content:center;align-items:baseline;gap:.15rem;min-height:4.6rem;display:flex;position:relative}.note-name{font-family:var(--font-display);letter-spacing:-.045em;color:var(--text-bright);text-shadow:0 0 80px #d4a5741f,0 2px 24px #00000059;transition:color .4s ease, text-shadow .4s ease, transform .45s var(--ease-smooth);font-size:clamp(4rem,18vw,5.6rem);font-weight:800;line-height:1}.note-name--live{animation:note-settle .5s var(--ease-smooth) forwards}.note-name--tuned{color:#e8f8ee;text-shadow:0 0 50px #7ed9a859,0 0 100px #7ed9a81f,0 2px 24px #00000059}@keyframes note-settle{0%{opacity:.65;transform:translateY(4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.note-octave{color:var(--text-muted);vertical-align:super;font-size:1.55rem;font-weight:600;transition:color .35s}.display-card--tuned .note-octave{color:#7ed9a8bf}.hz-block{z-index:1;margin-top:.15rem;position:relative}.hz-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:.85;margin-bottom:.2rem;font-size:.65rem;font-weight:600;display:block}.hz-readout{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:.35rem;margin:0;display:flex}.hz-value{color:var(--gold);letter-spacing:.04em;font-size:1.35rem;font-weight:600}.hz-unit{color:var(--gold-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:600}.meter-wrap{z-index:1;width:min(100%,288px);height:132px;margin:1.35rem auto .45rem;position:relative}.meter-svg{filter:drop-shadow(0 4px 12px #00000040);width:100%;height:auto;display:block}.meter-track{stroke:var(--border);opacity:.55}.meter-ticks{stroke:var(--text-muted);opacity:.45}.meter-arc{opacity:.92;filter:drop-shadow(0 0 8px #d4a57426)}.needle{background:linear-gradient(180deg, var(--gold) 0%, #d4a57459 100%);transform-origin:bottom;border-radius:2px;width:4px;height:74px;margin-left:-2px;transition:transform .14s ease-out;position:absolute;bottom:18px;left:50%;box-shadow:0 0 14px #d4a57473}.needle:after{content:"";background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);border:2px solid var(--gold);border-radius:50%;width:13px;height:13px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #00000059}.needle-tuned{background:linear-gradient(180deg, #9ae8c0 0%, var(--tuned) 45%, #78d6aa73 100%);box-shadow:0 0 20px #7ed9a880}.needle-tuned:after{border-color:var(--tuned)}.meter-labels{color:var(--text-muted);opacity:.9;justify-content:space-between;margin-top:-2px;padding:0 14px;font-size:.78rem;font-weight:500;display:flex}.meter-labels span:nth-child(2){color:var(--gold-dim);opacity:1}.cents-readout{z-index:1;letter-spacing:.01em;min-height:1.5em;color:var(--text-muted);margin:.85rem 0 0;font-size:1.02rem;font-weight:600;transition:color .25s;position:relative}.cents-flat{color:#9ebfe8}.cents-sharp{color:#ebc4a0}.cents-in{color:var(--tuned);text-shadow:0 0 24px #7ed9a840}.controls-card{text-align:left}.mode-row{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.3rem;display:flex}.mode-row .label{text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);font-size:.72rem;font-weight:600}.segmented{background:var(--bg-deep);border:1px solid var(--border);border-radius:12px;padding:4px;display:flex;box-shadow:inset 0 1px #ffffff08}.seg{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:9px;padding:.48rem 1rem;font-family:inherit;font-size:.8rem;font-weight:600;transition:color .18s,background .2s,box-shadow .2s}.seg:hover{color:var(--text)}.seg.active{background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);color:var(--gold);box-shadow:0 1px 10px #00000047,inset 0 0 0 1px #ffffff0a}.strings-grid{grid-template-columns:repeat(3,1fr);gap:.55rem;display:grid}@media (width>=400px){.strings-grid{grid-template-columns:repeat(6,1fr)}}.string-btn{border:1px solid var(--border);background:linear-gradient(180deg, var(--bg-deep) 0%, #0003 100%);color:var(--text);cursor:pointer;border-radius:14px;flex-direction:column;align-items:center;gap:.12rem;padding:.7rem .4rem;transition:border-color .18s,box-shadow .22s,transform .12s,background .22s;display:flex}.string-btn:hover{background:linear-gradient(180deg, #d4a5740f 0%, var(--bg-deep) 100%);border-color:#d4a57466}.string-btn:active{transform:scale(.96)}.string-selected{border-color:#d4a574a6;box-shadow:0 0 0 1px #d4a57433,0 4px 16px #00000040}.string-active{background:linear-gradient(180deg, #d4a57424 0%, var(--bg-deep) 100%)}.string-tuned{border-color:#7ed9a88c;box-shadow:0 0 0 1px #7ed9a833,0 0 24px #7ed9a81f}.string-note{font-family:var(--font-display);color:var(--text-bright);font-size:1.38rem;font-weight:700}.string-tuned .string-note{color:#e8f8ee}.string-sub{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.58rem;line-height:1}.string-hz{font-variant-numeric:tabular-nums;color:var(--text-muted);margin-top:.12rem;font-size:.64rem}.hint-footer{border-top:1px solid #ffffff0d;margin-top:1.35rem;padding-top:1.1rem}.hint{color:var(--text-muted);opacity:.92;margin:0;font-size:.74rem;line-height:1.55}.hint-title{letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim);vertical-align:middle;background:#d4a5741a;border-radius:4px;margin-right:.35rem;padding:.12rem .4rem;font-size:.62rem;font-weight:700;display:inline-block}.site-footer{text-align:center;margin-top:auto;padding-top:1.5rem;padding-bottom:.25rem}.site-footer p{color:var(--text-muted);margin:0;max-width:36rem;margin-inline:auto;font-size:.72rem;line-height:1.55}.site-footer strong{color:var(--text-bright);font-weight:600}.level-bar{background:var(--bg-deep);height:4px;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px #ffffff0a}.level-fill{background:linear-gradient(90deg, var(--copper), var(--gold), #f0d4a8);transform-origin:0;height:100%;transition:transform 50ms linear,opacity .3s;box-shadow:0 0 12px #d4a57459}@media (prefers-reduced-motion:reduce){.live-dot{opacity:.85;animation:none}.note-name--live{animation:none}.note-name,.needle,.level-fill,.btn,.string-btn,.card,.cents-readout{transition-duration:.01ms!important}}