:root{--navy:#001023;--gold:#D2AA40;--stroke: rgba(210,170,64,.28);--stroke2: rgba(210,170,64,.18);--text: rgba(242,228,197,.96);--muted: rgba(242,228,197,.7);--shadow: 0 18px 55px rgba(0,0,0,.45);--good: rgba(0, 200, 120, .35);--goodBg: rgba(0, 200, 120, .18);--flat: rgba(230, 60, 60, .35);--flatBg: rgba(230, 60, 60, .18);--sharp: rgba(245, 200, 45, .35);--sharpBg: rgba(245, 200, 45, .2);--neutralBg: rgba(255,255,255,.06);--neutralStroke: rgba(255,255,255,.12)}*{box-sizing:border-box}html,body{background:var(--navy);margin:0}body{margin:0;background:var(--navy);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.page{min-height:100vh;background:var(--navy);padding:18px 18px 28px}.header{width:min(1100px,calc(100% - 32px));margin:18px auto 24px;padding:0;background:var(--navy);border:2px solid var(--gold);border-radius:18px}.headerInner{position:relative;padding:26px 22px 18px;min-height:160px}.headerLogo{position:absolute;left:28px;top:28px;height:125px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}.headerCenter{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}.brand-title{font-size:40px;font-weight:800;line-height:1.1;margin:0}.brand-sub{font-size:18px;font-weight:700;line-height:1.2;color:var(--muted);margin:0}.tabs{display:flex;gap:10px;margin-top:14px;justify-content:center}.tabBtn{appearance:none;border:1px solid var(--stroke);background:#d2aa401a;color:var(--text);font-weight:800;padding:8px 12px;border-radius:12px;cursor:pointer}.tabBtn.active{background:#d2aa402e;border-color:#d2aa4080}.card{width:100%;max-width:1100px;margin:0 auto 14px;padding:16px 18px;background:var(--navy);border:2px solid var(--gold);border-radius:18px;box-shadow:var(--shadow)}.cardSmall{padding:14px 18px}.cardTitle{font-size:18px;font-weight:900;margin-bottom:14px}.metroRow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.bpmBlock{width:120px;border:1px solid var(--stroke2);border-radius:14px;padding:14px 12px;background:#0000001f;text-align:center}.bpmValue{font-size:44px;font-weight:900;line-height:1}.bpmLabel{margin-top:6px;color:var(--muted);font-weight:800;letter-spacing:.6px}.sliderBlock{flex:1 1 320px}input[type=range]{width:100%}.hint{margin-top:8px;color:var(--muted);font-weight:700}.btnRow{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}.primaryBtn{appearance:none;border:1px solid rgba(210,170,64,.55);background:#d2aa4024;color:var(--text);font-weight:900;padding:10px 14px;border-radius:14px;cursor:pointer}.primaryBtn:hover{background:#d2aa4033}.dangerBtn{appearance:none;border:1px solid rgba(230,60,60,.6);background:#e63c3c29;color:var(--text);font-weight:900;padding:10px 14px;border-radius:14px;cursor:pointer}.dangerBtn:hover{background:#e63c3c38}.tunerSelectRow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}.selectBlock{display:flex;flex-direction:column;gap:6px;min-width:260px}.selectLabel{font-size:12px;font-weight:900;letter-spacing:.6px;color:var(--muted)}.select{appearance:none;border:1px solid var(--stroke);background:#00000024;color:var(--text);font-weight:800;padding:10px 12px;border-radius:12px}.detectedString{padding:10px 12px;border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ffffffeb;min-height:42px;display:flex;align-items:center}.error{margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(230,60,60,.45);background:#e63c3c1f;color:#ffffffeb;font-weight:800}.tunerReadout{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:10px}.notePill{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:14px 18px;border-radius:999px;font-weight:900;letter-spacing:.5px;border:1px solid var(--neutralStroke);background:var(--neutralBg)}.noteText{font-size:34px;line-height:1}.noteNeutral{background:var(--neutralBg);border-color:var(--neutralStroke);color:#ffffffe0}.noteGood{background:var(--goodBg);border-color:var(--good);color:#fffffff2}.noteFlat{background:var(--flatBg);border-color:var(--flat);color:#fffffff2}.noteSharp{background:var(--sharpBg);border-color:var(--sharp);color:#fffffff2}.meterBlock{width:min(520px,100%);display:flex;flex-direction:column;gap:10px}.meterTop{display:flex;align-items:center;justify-content:space-between}.status{font-weight:900;letter-spacing:.5px;color:#ffffffe6}.status.good{color:#b4ffdcf5}.status.warn{color:#ffebaaf5}.meter{position:relative;height:14px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);overflow:hidden}.meterCenter{position:absolute;left:50%;top:-6px;transform:translate(-50%);width:2px;height:26px;background:#d2aa40b3;box-shadow:0 0 10px #d2aa4059}.meterNeedle{position:absolute;top:-10px;left:50%;width:4px;height:34px;border-radius:4px;background:#f2e4c5eb;transform:translate(0);transition:transform 70ms linear;box-shadow:0 0 14px #00000073}.meterHint{color:var(--muted);font-weight:700;font-size:12px}.how{display:flex;flex-direction:column;gap:8px;color:#f2e4c5e6;font-weight:700}.footer{max-width:1100px;margin:10px auto 0;text-align:center;color:#f2e4c58c;font-size:12px;font-weight:700}@media(max-width:720px){.headerInner{padding:18px 14px 14px;min-height:auto}.headerLogo{position:static;margin:0 auto 10px;height:54px}.brand-title{font-size:22px}.brand-sub{font-size:13px}.selectBlock{min-width:100%}.noteText{font-size:30px}}html,body{height:100%}body{margin:0}