:root{--tuner-gold:#d48e00;--tuner-gold2:#e4a11a;--tuner-line:rgba(212,142,0,.42);--tuner-panel:#090b0e;--tuner-panel2:#0f1216;--tuner-muted:#a7abb2;--tuner-red:#ef4136;--tuner-green:#50d890}
*{box-sizing:border-box}
body{background:#050608;color:#f6f3ed;font-family:Inter,Arial,sans-serif}
.tuner-page{max-width:1500px;margin:0 auto;padding:118px 6vw 90px}
.tuner-context-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 14px;border-bottom:1px solid rgba(255,255,255,.12);font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tuner-context-nav a{color:var(--tuner-gold);text-decoration:none;transition:color .2s ease}
.tuner-context-nav a:hover,.tuner-context-nav a:focus-visible{color:#fff}
.tuner-hero{padding:58px 0 40px;border-bottom:1px solid var(--line)}
.tuner-hero h1,.tuner-shell h2,.tuner-shell h3{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800}
.tuner-hero h1{font-size:clamp(58px,8vw,118px);line-height:.82;letter-spacing:-.015em;margin:12px 0 24px}
.tuner-hero h1 span{color:var(--tuner-gold)}
.tuner-hero>p:last-child{max-width:760px;color:var(--muted);font-size:18px;line-height:1.7}
.tuner-shell{margin-top:40px;border:1px solid var(--tuner-line);background:linear-gradient(160deg,rgba(212,142,0,.05),transparent 28%),var(--tuner-panel);padding:30px}
.tuner-topbar,.reference-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.kicker{margin:0 0 4px;color:var(--tuner-gold);font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.tuner-shell h2{font-size:42px;line-height:1;margin:0}
.tuner-shell h3{font-size:30px;line-height:1;margin:0}
.tuner-actions,.reference-tabs{display:flex;gap:10px;flex-wrap:wrap}
.tuner-btn,.ref-tab{min-height:44px;border:1px solid var(--tuner-gold);background:transparent;color:#fff;padding:10px 18px;font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.tuner-btn-primary,.ref-tab.active{background:var(--tuner-gold);color:#050608}
.tuner-btn:disabled{opacity:.35;cursor:not-allowed}
.status{margin:22px 0 0;padding:12px 15px;border:1px solid rgba(255,255,255,.08);background:#060709;color:var(--tuner-muted);font-size:14px}
.status.error{border-color:rgba(239,65,54,.45);color:#ff8b84}
.status.live{border-color:rgba(80,216,144,.35);color:#93ebba}
.tuner-display{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(420px,1.6fr);gap:32px;align-items:center;padding:46px 0 34px;border-bottom:1px solid rgba(255,255,255,.09)}
.pitch-panel{text-align:center}
.note-wrap{display:flex;align-items:flex-start;justify-content:center;min-height:154px}
.note-name{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(110px,11vw,180px);line-height:.78;color:#f8f5ef;text-shadow:0 0 25px rgba(212,142,0,.08)}
.note-name.in-tune{color:var(--tuner-gold2)}
.octave{font-family:"Barlow Condensed",sans-serif;font-size:36px;font-weight:700;color:var(--tuner-muted);padding:8px 0 0 8px}
.freq-line{font-family:"Barlow Condensed",sans-serif;font-size:28px;letter-spacing:.04em;color:#d5d7db}
.tuning-state{margin-top:9px;color:var(--tuner-muted);font-family:"Barlow Condensed",sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.13em}
.meter-panel{min-width:0}
.meter-labels,.meter-words{display:flex;justify-content:space-between;color:#8e939a;font-family:"Barlow Condensed",sans-serif;font-weight:600}
.meter-labels{font-size:13px;padding:0 2px 8px}
.meter{position:relative;height:138px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(90deg,rgba(239,65,54,.07),transparent 35%,rgba(212,142,0,.08) 48%,rgba(212,142,0,.08) 52%,transparent 65%,rgba(239,65,54,.07)),repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.08) calc(10% - 1px),rgba(255,255,255,.08) 10%);overflow:hidden}
.meter-center{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--tuner-gold2);transform:translateX(-1px)}
.meter-zone{position:absolute;top:0;bottom:0;left:45%;width:10%;background:rgba(212,142,0,.05)}
.needle{position:absolute;left:50%;top:14px;bottom:14px;width:3px;background:#fff;transform:translateX(-1.5px);transition:left .08s linear,background .15s;box-shadow:0 0 12px rgba(255,255,255,.45)}
.needle.in-tune{background:var(--tuner-gold2);box-shadow:0 0 18px rgba(255,189,18,.65)}
.meter-words{padding-top:8px;font-size:14px;letter-spacing:.1em}
.meter-words span:nth-child(2){color:var(--tuner-gold2)}
.cents{text-align:center;font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:700;margin-top:14px}
.tuner-controls{display:grid;grid-template-columns:repeat(2,minmax(180px,260px));gap:18px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.tuner-controls label{display:grid;gap:8px}
.tuner-controls label>span{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#ddd}
.tuner-controls select{min-height:46px;background:#0b0e12;color:#fff;border:1px solid var(--tuner-line);padding:0 12px;font:500 16px Inter,Arial,sans-serif}
.string-reference{padding-top:28px}
.string-notes{display:grid;grid-template-columns:repeat(7,minmax(84px,1fr));gap:10px;margin-top:22px}
.string-chip{border:1px solid rgba(255,255,255,.12);background:#0b0e12;padding:18px 12px;text-align:center}
.string-chip .string-no{display:block;color:#7f858d;font-family:"Barlow Condensed",sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.string-chip .string-note{display:block;margin-top:6px;font-family:"Barlow Condensed",sans-serif;font-size:36px;font-weight:800;color:var(--tuner-gold2)}
.string-chip .string-hz{display:block;color:#a7abb2;font-size:12px;margin-top:4px}
.privacy-note{margin:28px 0 0;color:#777d85;font-size:12px;line-height:1.6}
@media(max-width:920px){.tuner-page{padding-top:110px}.tuner-display{grid-template-columns:1fr}.meter-panel{width:100%}.string-notes{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.tuner-shell{padding:20px}.tuner-topbar,.reference-head{align-items:flex-start;flex-direction:column}.tuner-controls{grid-template-columns:1fr}.string-notes{grid-template-columns:repeat(2,1fr)}.note-name{font-size:112px}.meter{height:116px}}


/* Official social links */
.footer-socials{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 16px}
.footer-socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid #2b3036;border-radius:50%;color:#8f959d;background:#080a0c;transition:color .2s,border-color .2s,background .2s,transform .2s}
.footer-socials a:hover,.footer-socials a:focus-visible{color:#d48e00;border-color:#d48e00;background:rgba(212,142,0,.08);transform:translateY(-2px)}
.footer-socials svg{width:17px;height:17px;fill:currentColor}