*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#070b14;color:#eef3ff;min-height:100vh}body.light{background:#f4f7fb;color:#172033}.app-shell{max-width:1380px;margin:auto;padding:0 22px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;position:sticky;top:0;z-index:20;background:#070b14dd;backdrop-filter:blur(18px)}body.light .topbar{background:#f4f7fbdd;border-color:#17203315}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6d5dfc,#20d9ff);font-weight:900;color:white;box-shadow:0 8px 30px #4b64ff30}.brand b,.brand small{display:block}.brand small{font-size:11px;color:#8994ad;margin-top:2px}.top-actions{display:flex;gap:8px;align-items:center}.icon-btn,.home-link,.secondary-btn,.wide-btn{border:1px solid #ffffff12;background:#ffffff08;color:inherit;border-radius:11px;padding:10px 13px;cursor:pointer;text-decoration:none}.icon-btn{width:40px;height:40px;padding:0;font-size:18px}.home-link{font-size:13px}.hero{display:flex;justify-content:space-between;align-items:end;padding:58px 0 35px;gap:20px}.eyebrow,.section-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7e8ca8}.hero h1{font-size:clamp(38px,6vw,70px);line-height:.98;margin:13px 0 15px;letter-spacing:-.05em}.hero h1 span{background:linear-gradient(90deg,#8e7cff,#23dfff);-webkit-background-clip:text;color:transparent}.hero p{max-width:720px;color:#98a4bc;font-size:16px;line-height:1.7;margin:0}.hero-badge{display:flex;gap:10px;align-items:center;border:1px solid #ffffff12;padding:12px 15px;border-radius:16px;background:#ffffff06;white-space:nowrap}.hero-badge b,.hero-badge small{display:block}.hero-badge small{font-size:11px;color:#7d89a2;margin-top:2px}.live-dot{width:9px;height:9px;border-radius:50%;background:#55efae;box-shadow:0 0 14px #55efae}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);gap:18px}.card{border:1px solid #ffffff10;background:linear-gradient(145deg,#111727,#0b101d);border-radius:24px;box-shadow:0 20px 60px #00000018}.card-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.card-head h2,.card-head h3{margin:7px 0 4px}.card-head h2{font-size:46px;letter-spacing:-.04em}.card-head p,.muted{color:#8490a8;font-size:13px;line-height:1.6}.tuner-card{padding:28px}.tuner-target{text-align:right}.tuner-target span{display:block;font-size:10px;color:#6f7a91;text-transform:uppercase;letter-spacing:.1em}.tuner-target b{font-size:16px}.meter-wrap{padding:18px 4px 8px}.meter-scale{display:flex;justify-content:space-between;color:#6e7a91;font-size:11px}.meter{height:180px;position:relative;margin-top:8px;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 100%,#172338 0,#0a0f1a 63%)}.meter-zone{position:absolute;width:34%;height:100%;left:33%;background:linear-gradient(90deg,transparent,#54efad14,transparent);border-left:1px solid #54efad22;border-right:1px solid #54efad22}.needle{position:absolute;left:50%;bottom:17px;width:4px;height:145px;transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);transition:transform .12s ease-out;z-index:3}.needle i{display:block;width:4px;height:100%;border-radius:99px;background:linear-gradient(#ff6584,#8e7cff);box-shadow:0 0 18px #8e7cff80}.needle:after{content:"";position:absolute;bottom:-6px;left:50%;width:17px;height:17px;transform:translateX(-50%);border-radius:50%;background:#e9edff;box-shadow:0 0 0 5px #ffffff12}.center-line{position:absolute;left:50%;bottom:0;height:165px;width:1px;background:#ffffff1c}.cents{text-align:center;font-size:13px;font-weight:800;margin-top:-8px}.tuner-state{margin-top:14px;padding:14px 16px;border-radius:14px;background:#ffffff06;display:grid;grid-template-columns:10px auto;gap:2px 9px}.tuner-state .state-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#7c879d;margin-top:4px}.tuner-state b{font-size:13px}.tuner-state small{color:#77839a}.primary-actions{display:flex;gap:10px;margin-top:16px}.primary-btn{border:0;background:linear-gradient(135deg,#6d5dfc,#3bbdfc);color:#fff;font-weight:800;padding:12px 18px;border-radius:12px;cursor:pointer;box-shadow:0 10px 30px #5f68ff25}.primary-btn:disabled,.secondary-btn:disabled{opacity:.45;cursor:not-allowed}.control-card{padding:25px}.pill,.status-chip{font-size:10px;font-weight:800;padding:6px 9px;border-radius:999px;background:#ffffff0a;color:#93a0b8;border:1px solid #ffffff0d}.strings{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.string-btn{border:1px solid #ffffff10;background:#ffffff06;color:inherit;border-radius:14px;padding:13px 6px;cursor:pointer;transition:.2s}.string-btn:hover,.string-btn.active{transform:translateY(-2px);border-color:#7e70ff88;background:#7e70ff12}.string-btn strong{display:block;font-size:19px}.string-btn small{color:#77839b}.range-row{display:flex;justify-content:space-between;font-size:12px;margin:15px 0 8px;color:#8994ab}input[type=range]{width:100%;accent-color:#786aff}.wide-btn{width:100%;margin-top:14px}.lab-card,.chords-card{margin-top:18px;padding:27px}.lab-head{display:flex;justify-content:space-between;gap:20px}.lab-head h2{margin:7px 0 3px}.lab-head p{margin:0;color:#8490a8;font-size:13px}.lab-tools{display:flex;gap:12px;align-items:end}.lab-tools label{font-size:10px;color:#78849b;text-transform:uppercase;letter-spacing:.08em}.lab-tools select{display:block;margin-top:5px;border:1px solid #ffffff12;background:#0a0f1b;color:inherit;padding:10px;border-radius:10px}.guitar{height:255px;margin-top:22px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(90deg,#111a2c,#171e2d 20%,#0d1524)}.fretboard{position:absolute;inset:0 0 0 50px;background:repeating-linear-gradient(90deg,transparent 0 8.1%,#ffffff18 8.1% 8.35%);background-color:#121b2a}.fretboard:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 15%,#c8d0e01a 15% 15.7%)}.nut{position:absolute;left:49px;top:0;bottom:0;width:6px;background:#d8dbe1;z-index:3}.string-labels{position:absolute;left:0;top:0;bottom:0;width:48px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;z-index:4}.string-labels span{font-size:10px;color:#9da8bc}.pluck-string{position:absolute;left:0;right:0;height:2px;background:#d9dfebaa;cursor:pointer;z-index:4;transition:.08s}.pluck-string.playing{background:#78dfff;box-shadow:0 0 15px #55dfff;transform:scaleY(2)}.fret-number{position:absolute;bottom:7px;color:#56637c;font-size:9px}.keyboard-help{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px}.keyboard-help kbd{background:#ffffff0a;border:1px solid #ffffff15;border-bottom-width:2px;border-radius:5px;padding:4px 7px}.grid-3{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:18px;margin-top:18px}.visual-card,.metronome-card{padding:23px}.visual-card canvas{width:100%;height:130px;display:block;margin-top:15px;background:#080d17;border-radius:13px}.bpm-display{text-align:center;padding:12px}.bpm-display span{font-size:54px;font-weight:900;letter-spacing:-.06em}.bpm-display small{display:block;color:#7e899f}.metro-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px}.circle{width:52px;height:52px;border-radius:50%;padding:0}.beat-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}.beat-dots i{width:7px;height:7px;border-radius:50%;background:#303a50}.beat-dots i.on{background:#63e7ff;box-shadow:0 0 10px #63e7ff}.chord-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;margin-top:18px}.chord-btn{padding:15px 7px;border:1px solid #ffffff10;background:#ffffff05;color:inherit;border-radius:12px;cursor:pointer;font-weight:800}.chord-btn:hover{background:#7e70ff12;border-color:#7e70ff66;transform:translateY(-2px)}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}.info-card{padding:20px;display:flex;gap:14px}.info-icon{font-size:25px}.info-card h3{margin:0 0 7px}.info-card p{margin:0;color:#7f8ba3;font-size:12px;line-height:1.6}footer{text-align:center;padding:35px 0 45px;color:#69758c;font-size:11px}footer a{color:#8d80ff;text-decoration:none}.modal{position:fixed;inset:0;background:#02050bcc;backdrop-filter:blur(10px);display:none;place-items:center;padding:20px;z-index:50}.modal.open{display:grid}.modal-box{max-width:520px;background:#111827;border:1px solid #ffffff14;border-radius:22px;padding:28px;position:relative}.modal-box h2{margin-top:8px}.modal-box li{margin:10px 0;color:#a1abc0;line-height:1.5}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#aeb8cb;font-size:26px;cursor:pointer}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}.metronome-card{grid-column:1/-1}.chord-grid{grid-template-columns:repeat(4,1fr)}.info-grid{grid-template-columns:1fr}.hero{align-items:start;flex-direction:column}.hero-badge{align-self:stretch}}@media(max-width:650px){.app-shell{padding:0 12px}.topbar{height:64px}.home-link{display:none}.hero{padding:35px 0 25px}.hero h1{font-size:43px}.hero p{font-size:14px}.tuner-card,.control-card,.lab-card,.chords-card,.visual-card,.metronome-card{padding:18px;border-radius:18px}.card-head h2{font-size:38px}.meter{height:145px}.needle{height:120px}.lab-head{flex-direction:column}.lab-tools{align-items:stretch;flex-direction:column}.guitar{height:205px}.fretboard{left:38px}.nut{left:37px}.string-labels{width:37px}.grid-3{grid-template-columns:1fr}.metronome-card{grid-column:auto}.chord-grid{grid-template-columns:repeat(4,1fr)}.primary-actions{flex-direction:column}.primary-btn,.secondary-btn{width:100%}.hero-badge{white-space:normal}.strings{grid-template-columns:repeat(3,1fr)}}body.light .card{background:#fff;border-color:#17203312;box-shadow:0 15px 40px #1720330b}body.light .meter,body.light .visual-card canvas{background:#eef2f8}body.light .fretboard{background-color:#e9edf5}body.light .hero p,body.light .muted{color:#647087}body.light .string-btn,body.light .chord-btn,body.light .tuner-state{background:#f5f7fb;border-color:#17203312}