:root{--bg:#f7f9fd;--surface:#fff;--surface-alt:#f8faff;--ink:#17243c;--muted:#728099;--line:#e7edf5;--primary:#358cf9;--primary-deep:#1c6fe4;--primary-soft:#eaf3ff;--green:#15a778;--green-soft:#d9f9eb;--red:#dc6e6e;--shadow:0 10px 38px rgba(28,67,127,.055);--radius:18px;--radius-lg:25px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}:root[data-theme=dark]{--bg:#0d1525;--surface:#151f32;--surface-alt:#111b2d;--ink:#f0f5fd;--muted:#a0acc1;--line:#2b394f;--primary:#64a9ff;--primary-deep:#8abfff;--primary-soft:#223655;--green:#38d4a2;--green-soft:#164e46;--red:#f38a8a;--shadow:0 8px 28px rgba(0,0,0,.18);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled,select:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}input,select,textarea{color:var(--ink)}:focus-visible{outline:3px solid #89bcff;outline-offset:3px}.shell{width:min(1320px,calc(100% - 64px));margin-inline:auto}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.skip-link{position:absolute;top:-100px;left:20px;z-index:100;padding:10px;background:#fff;color:#111}.skip-link:focus{top:10px}.site-header{background:var(--surface);border-bottom:1px solid var(--line)}.nav-inner{height:78px;display:flex;align-items:center;gap:30px}.brand{font-size:22px;font-weight:750;letter-spacing:-1.1px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.brand-symbol{background:linear-gradient(145deg,#66b7ff,#4385eb);color:#fff;display:inline-grid;place-items:center;font-size:22px;line-height:1;font-weight:800;width:34px;height:34px;border-radius:10px;box-shadow:0 4px 10px #3b91ee30}.brand-accent{color:var(--primary)}.top-nav{margin-left:auto;display:flex;gap:28px;color:var(--muted);font-size:13px;font-weight:600}.top-nav a:hover{color:var(--primary)}.icon-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:11px;color:var(--muted);font-size:25px}.icon-button svg{width:19px;height:19px}.icon-button:hover{border-color:var(--primary);color:var(--primary)}.intro{text-align:center;padding:49px 0 33px}.eyebrow{color:#4b92e7;letter-spacing:2.2px;font-size:10px;font-weight:800;display:flex;justify-content:center;align-items:center;gap:10px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#61a6ff;box-shadow:0 0 0 5px #62a6fa1a}.eyebrow-divider{color:#adbcd1}.intro h1{font-size:clamp(31px,4.15vw,51px);letter-spacing:-2.5px;line-height:1.2;margin:17px 0 13px;font-weight:780}.gradient-text{background:linear-gradient(125deg,#236fe6,#60b9f3);color:transparent;background-clip:text}.muted-heading{font-weight:670}.intro>p{font-size:15px;color:var(--muted);margin:0 auto;max-width:620px}.hero-pills{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px}.hero-pills>span{border:1px solid var(--line);border-radius:24px;padding:6px 13px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:650}.hero-pills>span span{color:var(--primary);font-size:14px;margin-right:5px}.alert{margin:0 0 15px;border:1px solid #fbb;background:#fff0f0;color:#9c3535;display:flex;justify-content:space-between;gap:12px;align-items:center;border-radius:12px;padding:12px 15px}.alert[hidden],[hidden]{display:none!important}.alert button{border:0;background:0 0;color:inherit;font-size:23px;line-height:1}.studio{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.studio-topbar{display:flex;justify-content:space-between;align-items:center;padding:19px 24px;gap:20px;border-bottom:1px solid var(--line)}.topbar-label{display:flex;align-items:center;gap:12px}.status-light{width:10px;height:10px;background:#c7cdd8;border-radius:50%;box-shadow:0 0 0 5px #c7cdd825;flex-shrink:0}.status-light.active{background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 13%,transparent)}.status-light.demo{background:var(--primary);box-shadow:0 0 0 5px #64a6ff33}.topbar-label div{display:flex;flex-direction:column}.topbar-label strong{font-size:13px;font-weight:750}.topbar-label div span{font-size:11px;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:12px}.primary-button{background:linear-gradient(125deg,#318cff,#286ee6);border:1px solid #2276ed;border-radius:11px;color:#fff;padding:11px 18px;font-weight:750;font-size:12px;display:inline-flex;gap:10px;justify-content:center;align-items:center;box-shadow:0 4px 12px #288afa28}.primary-button:hover{filter:brightness(1.06)}.button-symbol{font-size:13px}.device-select{max-width:200px;font-size:11px;padding:10px 27px 10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-alt);color:var(--muted)}.studio-content{display:grid;grid-template-columns:minmax(260px,295px) minmax(0,1fr)}.settings-panel{border-right:1px solid var(--line);padding:26px 23px 23px}.panel-heading{display:flex;align-items:center;gap:9px;margin-bottom:23px}.panel-heading.compact{margin-bottom:20px}.panel-number{background:var(--primary-soft);color:var(--primary-deep);font-size:10px;font-weight:850;padding:5px 7px;border-radius:7px}.panel-heading h2{font-size:13px;letter-spacing:-.2px;margin:0;font-weight:800}.field{margin-bottom:20px}.field label{display:block;font-weight:670;font-size:11px;margin-bottom:8px}.field input[type=text],.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface-alt);border-radius:10px;padding:11px 13px;outline:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.text-action{border:0;padding:0;background:0 0;font-size:11px;color:var(--primary);font-weight:750;margin-bottom:8px}.text-action:hover{text-decoration:underline}.string-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:3px 0 11px}.string-heading h3{margin:0;font-size:11px;font-weight:780}.minor{color:var(--muted);font-weight:500}.auto-button{font-size:9px;letter-spacing:.7px;border-radius:7px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:750}.auto-button.is-active{color:var(--primary-deep);border-color:color-mix(in srgb,var(--primary) 32%,var(--line));background:var(--primary-soft)}.strings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.string-item{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:11px 2px 9px;display:flex;flex-direction:column;align-items:center;min-height:65px;gap:1px;transition:transform .12s,border-color .12s}.string-item strong{font-size:17px;line-height:1.2}.string-item small{font-size:9px;color:var(--muted)}.string-item:hover{border-color:#80b7ff;transform:translateY(-1px)}.string-item.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-deep);box-shadow:inset 0 0 0 1px #87bbff44}.string-item.matched:not(.selected){border-color:#8ebef9}.string-item.tuned{border-color:var(--green);background:var(--green-soft)}.panel-help{color:var(--muted);font-size:10px;line-height:1.65;margin:10px 0 0}.delete-custom{padding:9px 0;background:0 0;border:0;color:var(--red);font-size:11px}.separator{height:1px;background:var(--line);margin:24px 0}.stepper{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-alt);height:41px}.stepper button{border:0;background:0 0;width:41px;font-size:20px;color:var(--primary);font-weight:400}.stepper button:hover{background:var(--primary-soft)}.stepper input{border:0;outline:0;min-width:0;width:100%;text-align:center;background:0 0;font-size:14px;font-weight:780;-moz-appearance:textfield;appearance:textfield}.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field-unit{font-size:10px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer}.field output{font-size:10px;color:var(--primary);font-weight:700}.slider-ends{display:flex;justify-content:space-between;gap:6px;font-size:9px;color:var(--muted);margin-top:2px}.panel-bottom{border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--surface-alt);color:var(--muted);font-size:10px;line-height:1.65}.lock-mark{color:var(--primary);font-size:14px;margin-right:4px}.main-panel{padding:22px;min-width:0;background:var(--surface-alt)}.tuner-card{border-radius:20px;background:var(--surface);border:1px solid var(--line);padding:22px 26px 20px;box-shadow:0 2px 15px rgba(38,85,151,.018)}.tuner-card-top{display:flex;align-items:center;justify-content:space-between;gap:9px}.pill-heading{font-size:10px;letter-spacing:1.1px;color:var(--primary-deep);font-weight:800;display:flex;align-items:center;gap:7px}.tiny-signal{font-size:9px}.pitch-confidence{font-size:9px;letter-spacing:1.1px;font-weight:750;color:var(--muted)}.note-viewport{text-align:center;padding:20px 0 15px}.note-eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--muted);font-weight:760}.big-note{display:flex;align-items:flex-start;justify-content:center;min-height:122px;gap:8px;line-height:1.1}.big-note strong{font-size:clamp(75px,8vw,118px);font-weight:780;letter-spacing:-7px}.big-note span{font-size:33px;color:var(--muted);font-weight:550;margin-top:13px}.tune-status{font-size:12px;color:var(--muted);font-weight:600;min-height:23px}.tuner-card[data-tuned=true] .big-note strong,.tuner-card[data-tuned=true] .tune-status{color:var(--green)}.meter-area{max-width:670px;margin:10px auto 24px;padding:0 7px}.meter-annotations{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:820;color:var(--muted);letter-spacing:1px;margin-bottom:10px}.meter-annotations span:nth-child(2){color:var(--green)}.flat-arrow{color:#de9568}.sharp-arrow{color:#de9568}.meter-track{height:12px;background:linear-gradient(90deg,#f6cfa4 0,#f4e9be 34%,#d7f7e9 45%,#d7f7e9 55%,#f4e9be 66%,#f6cfa4 100%);border-radius:10px;position:relative;box-shadow:inset 0 1px 2px #0000000a}.meter-tuned-region{position:absolute;left:45%;width:10%;top:-5px;bottom:-5px;border:1px solid #4dbe96;border-radius:5px;opacity:.6}.meter-midline{position:absolute;left:50%;top:-11px;height:34px;width:2px;background:#1fb888;transform:translateX(-50%)}.meter-needle{position:absolute;left:50%;top:-13px;width:5px;height:38px;transform:translateX(-50%);background:#306bb8;border:2px solid var(--surface);border-radius:4px;box-shadow:0 2px 6px #1b467f7a;transition:left .13s ease}.meter-values{display:flex;justify-content:space-between;margin-top:13px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.readout-grid{border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}.readout-grid>div+div{border-left:1px solid var(--line)}.readout-grid span{display:block;color:var(--muted);font-size:9px;letter-spacing:.9px;font-weight:760}.readout-grid strong{display:block;font-size:21px;letter-spacing:-.6px;margin-top:5px;font-weight:790;font-variant-numeric:tabular-nums;white-space:nowrap}.readout-grid small{font-size:11px;color:var(--muted);font-weight:580}.monitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:16px}.monitor-card{min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:17px;padding:16px}.monitor-title{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:5px}.monitor-title h2{font-size:11px;font-weight:800;margin:0}.signal-indicator{color:var(--muted);font-size:9px;font-weight:750}.monitor-card canvas{display:block;width:100%;height:103px;border-radius:9px;background:var(--surface-alt)}.monitor-foot{display:flex;align-items:center;gap:9px;font-size:9px;color:var(--muted);margin-top:13px;min-height:14px}.monitor-foot>span:first-child{white-space:nowrap}.monitor-foot strong{font-size:10px;white-space:nowrap;color:var(--ink)}.level-track{height:5px;flex:1;background:var(--line);border-radius:7px;overflow:hidden}.level-track>div{height:100%;background:linear-gradient(90deg,#65aceb,#47d3ac);width:0;transition:width .14s}.studio-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;padding:13px 24px;color:var(--muted);font-size:10px}.shortcut-key{border:1px solid var(--line);border-radius:4px;background:var(--surface-alt);padding:1px 5px;color:var(--ink);font-weight:750}.footer-divider{padding:0 5px}.utility-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:19px}.reference-card{display:flex;align-items:center;gap:14px;background:var(--surface);padding:18px 19px;border:1px solid var(--line);border-radius:16px;min-width:0}.feature-symbol{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#eee9fc;color:#9167d1;font-size:24px;flex-shrink:0}.feature-symbol.blue{background:var(--primary-soft);color:var(--primary)}.utility-copy{display:flex;flex:1;flex-direction:column;min-width:0}.utility-copy strong{font-size:12px;font-weight:780}.utility-copy span{color:var(--muted);font-size:10px;line-height:1.5}.outline-button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:760;white-space:nowrap}.outline-button:hover{border-color:var(--primary);color:var(--primary)}.outline-button span{color:var(--primary);margin-left:5px}.demo-controls{border:1px solid #91bfff;border-radius:13px;padding:11px 18px;margin-top:12px;background:var(--primary-soft);display:flex;align-items:center;gap:20px}.demo-controls>div{display:flex;flex-direction:column;flex:1}.demo-controls strong{letter-spacing:1px;font-size:10px;color:var(--primary-deep)}.demo-controls span{color:var(--muted);font-size:10px}.demo-controls label{white-space:nowrap;font-size:11px;font-weight:690}.demo-controls input{max-width:180px}.demo-controls output{color:var(--primary)}.guide-section{margin-top:78px}.guide-intro{text-align:center;max-width:620px;margin:auto}.eyebrow.plain{justify-content:start}.guide-intro .eyebrow{justify-content:center}.faq-section h2,.guide-intro h2{font-size:clamp(25px,3vw,33px);letter-spacing:-1.2px;line-height:1.25;margin:10px 0}.guide-intro p{color:var(--muted);font-size:13px;margin:12px 0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:29px}.guide-grid article{border:1px solid var(--line);border-radius:17px;background:var(--surface);padding:24px}.guide-icon{color:var(--primary);background:var(--primary-soft);border-radius:11px;width:39px;height:39px;display:grid;place-items:center;font-weight:850;font-size:13px}.guide-grid h3{font-size:14px;margin:21px 0 9px}.guide-grid p{font-size:12px;color:var(--muted);margin:0;line-height:1.75}.faq-section{margin:72px auto 86px;display:grid;grid-template-columns:1fr 1.65fr;gap:40px}.faq-list{min-width:0}.faq-list details{border-bottom:1px solid var(--line);padding:15px 0}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{font-size:12px;font-weight:760;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}.faq-list summary::after{content:'+';color:var(--primary);font-size:20px}.faq-list details[open] summary::after{content:'−'}.faq-list p{font-size:12px;line-height:1.75;color:var(--muted);margin:12px 0 0}.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:23px 0}.site-footer .shell{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.site-footer .brand.small{font-size:14px;letter-spacing:-.5px}.site-footer .brand-symbol{font-size:15px;width:25px;height:25px;border-radius:7px}.site-footer span{font-size:11px;color:var(--muted)}.site-footer .brand{color:var(--ink)}.custom-dialog{width:min(440px,calc(100% - 24px));padding:26px;border-radius:20px;border:1px solid var(--line);color:var(--ink);background:var(--surface);box-shadow:0 25px 90px #0004}.custom-dialog::backdrop{background:#0913279c;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:start;justify-content:space-between}.dialog-top h2{font-size:23px;letter-spacing:-.7px;margin:7px 0}.dialog-top .eyebrow{font-size:9px}.custom-dialog p{font-size:12px;color:var(--muted);line-height:1.7;margin:5px 0 20px}.custom-dialog .field{margin-bottom:15px}.custom-dialog textarea{resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.form-error{color:#d24d4d;font-size:11px;margin-top:8px}@media(max-width:1110px){.studio-content{grid-template-columns:minmax(225px,255px) minmax(0,1fr)}.settings-panel{padding:20px 17px}.main-panel{padding:16px}.tuner-card{padding:19px}.monitor-grid{gap:10px}.monitor-card{padding:11px}.utility-row{gap:10px}.reference-card{padding:15px 12px}}@media(max-width:800px){.shell{width:min(100% - 28px,650px)}.nav-inner{height:66px}.top-nav{gap:12px}.intro{padding:36px 0 26px}.intro h1{letter-spacing:-1.4px}.studio-content{grid-template-columns:1fr}.settings-panel{border-right:0;border-bottom:1px solid var(--line)}.settings-panel .strings-grid{grid-template-columns:repeat(6,1fr)}.main-panel{padding:14px}.tuner-card{padding:18px}.utility-row{grid-template-columns:1fr}.guide-section{margin-top:55px}.guide-grid{gap:10px}.guide-grid article{padding:17px}.faq-section{grid-template-columns:1fr;gap:15px;margin-top:55px}}@media(max-width:520px){.shell{width:calc(100% - 22px)}.top-nav{display:none}.theme-button{margin-left:auto}.brand{font-size:20px}.intro h1{font-size:32px}.intro>p{font-size:13px}.hero-pills{gap:5px}.hero-pills>span{font-size:9px;padding:5px 8px}.studio-topbar{flex-direction:column;align-items:stretch;padding:13px}.topbar-actions{width:100%}.device-select{max-width:none;flex:1;min-width:0}.topbar-actions .primary-button{flex-shrink:0}.settings-panel .strings-grid{grid-template-columns:repeat(3,1fr)}.big-note strong{font-size:82px}.big-note{min-height:93px}.big-note span{font-size:26px}.tuner-card-top{align-items:start}.pitch-confidence{font-size:8px}.note-viewport{padding:16px 0 13px}.readout-grid{gap:3px}.readout-grid span{font-size:8px;letter-spacing:.1px}.readout-grid strong{font-size:17px}.readout-grid small{font-size:9px}.monitor-grid{grid-template-columns:1fr}.studio-footer{padding:11px 13px;flex-wrap:wrap}.reference-card{flex-wrap:wrap}.reference-card .outline-button{margin-left:auto}.guide-grid{grid-template-columns:1fr}.guide-grid article{padding:19px}.guide-grid h3{margin:12px 0 5px}.faq-section{margin-bottom:50px}.demo-controls{flex-wrap:wrap;gap:8px}.demo-controls>div{min-width:100%}}@media(prefers-reduced-motion:reduce){*,::after,::before{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.tuner-card[data-idle=true] .big-note strong{color:#a8b6cb;font-weight:330;letter-spacing:-3px}.custom-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}.custom-actions .text-action{margin:0;padding:9px 0}.meter-needle.no-target{opacity:.18}.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid #89bcff;outline-offset:2px}@media(min-width:801px){.field label,.panel-help,.string-heading h3,.tune-status{font-size:max(12px,1em)}.field output,.field-unit,.slider-ends{font-size:11px}}@media(max-width:520px){.custom-actions{justify-content:flex-start}.studio-topbar{align-items:stretch}.topbar-actions{width:100%}.topbar-actions .primary-button{flex:1}}.meter-track{background:linear-gradient(90deg,#f6cfa4 0,#f4e9be 30%,#f4e9be var(--green-left,45%),#d7f7e9 var(--green-left,45%),#d7f7e9 var(--green-right,55%),#f4e9be var(--green-right,55%),#f4e9be 70%,#f6cfa4 100%)}.meter-tuned-region{left:var(--green-left,45%);width:10%}.reset-settings{display:block;margin:-2px 0 18px;padding:4px 0;border:0;background:0 0;color:var(--primary-deep);font-size:12px;font-weight:650;text-align:left}.reset-settings:hover{text-decoration:underline}.monitor-foot,.monitor-title h2,.panel-bottom,.readout-grid span,.string-item small{font-size:11px}.panel-help,.reference-card .utility-copy span{font-size:12px}.faq-list p,.field label,.guide-grid p,.string-heading h3{font-size:12px}@media(max-width:520px){.reset-settings{min-height:35px}.tuner-card .readout-grid strong{font-size:17px}}