:root{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#e9f6ff;background:#090f1a;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 18% 0%,#172b44 0%,#0a111d 42%,#080e17 100%);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.shell{max-width:1150px;margin:auto;padding:24px}header,.right,.topline,.actionrow,.sectiontitle,footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.logo{font-size:27px;font-weight:950;letter-spacing:-1px}.logo span{color:#45e4f2}.logo small{display:block;letter-spacing:3px;font-size:9px;color:#73b7cf}.right{gap:18px}.ready{font-size:12px;color:#89aabc}.facebook{background:#193b61;color:#dbf4ff;border:1px solid #2a5a86;border-radius:11px;padding:11px 14px;text-decoration:none;font-size:12px;font-weight:800}.hero{padding:40px 0 25px}.kicker{color:#61dcea;font-size:10px;font-weight:850;letter-spacing:2px}.hero h1{font-size:clamp(26px,4vw,43px);letter-spacing:-1px;margin:9px 0}.hero h1 em{font-style:normal;color:#4be0f3}.hero p,.description{color:#a0b5ca;font-size:13px;line-height:1.7}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 20px}.tabs button{background:#152235;border:1px solid #2b4159;border-radius:14px;padding:16px;color:#c5d8eb;font-size:15px;font-weight:800}.tabs button.selected{background:linear-gradient(125deg,#1c4b60,#194057);border-color:#4fe5ef;box-shadow:0 0 26px #28ddf31c;color:white}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px;align-items:start}.card{background:linear-gradient(150deg,#142338,#111b2c);border:1px solid #293f57;border-radius:20px;padding:23px;box-shadow:0 20px 44px #0002}.mini{font-size:10px;font-weight:850;letter-spacing:1.4px;color:#9fbed3}.pill{font-size:10px;color:#4ce3ef;background:#153e48;border:1px solid #235a64;padding:8px;border-radius:999px}.readout{display:flex;align-items:center;justify-content:center;gap:20px;margin:40px 0 23px}.pitch strong{font-size:clamp(46px,7vw,76px);letter-spacing:-3px;line-height:1;color:#52e8f5;font-variant-numeric:tabular-nums}.pitch span{color:#8faabf;margin-left:9px}.note{font-size:31px;font-weight:850;color:white}.gauge{position:relative;height:68px;border-radius:12px;background:linear-gradient(90deg,#623e2b,#375062 30%,#256f60 46%,#256f60 54%,#375062 70%,#623e2b);border:1px solid #41556a;overflow:hidden}.gauge:before{content:'';position:absolute;left:50%;width:2px;height:100%;background:#c5f9d9;opacity:.8}.ruler{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#ffffff33 calc(10% - 1px),#ffffff33 10%)}.needle{position:absolute;left:50%;top:0;width:4px;height:100%;background:#fdfefe;box-shadow:0 0 10px #fff;border-radius:4px;transform:translateX(-50%);transition:left .14s}.deviation{text-align:center;font-size:14px;color:#84e6b0;margin:18px 0 26px;font-weight:800}.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:15px 0;border-top:1px solid #2a3d51;border-bottom:1px solid #2a3d51}.meta div{text-align:center}.meta span,.meta b{display:block}.meta span{font-size:10px;color:#819cb5}.meta b{margin-top:9px;font-size:14px}.actionrow{margin-top:23px}.actionrow button{flex:1;min-height:46px;border-radius:11px;font-weight:850;border:1px solid #37536a}.primary{background:linear-gradient(115deg,#43d7e6,#49b4ee);color:#0a1722}.secondary{background:#203149;color:#d3e7f8}.help{font-size:11px;line-height:1.8;color:#809bb4;margin:17px 0 0}.sectiontitle h2{font-size:17px;letter-spacing:.5px}.sectiontitle span{font-size:24px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.fields label{font-size:11px;color:#b2c9db;display:flex;flex-direction:column;gap:8px}.fields input,.fields select{min-width:0;color:#f2fbff;background:#202f44;border:1px solid #3a516b;border-radius:9px;padding:11px}.drumwrap{display:flex;justify-content:center;margin:24px 0}.drumring{height:270px;width:270px;border:15px solid #354c64;box-shadow:inset 0 0 22px #050b16,0 0 0 5px #1b3046;border-radius:50%;position:relative;background:radial-gradient(circle,#253950,#162739)}.drumcore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.drumcore small{font-size:11px;color:#86b1c7}.drumcore strong{font-size:38px;color:#4be5ef;margin:7px 0}.lug{position:absolute;left:50%;top:50%;width:49px;height:49px;transform:translate(-50%,-50%);background:#243b50;border:2px solid #49637c;border-radius:50%;color:white;font-size:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;z-index:2}.lug.active{border-color:#52ecf4;background:#1d616c;box-shadow:0 0 12px #2be0e7}.lug.good{color:#77f7b1}.lug.bad{color:#ffb583}.lugstats{text-align:center;color:#a9c5d7;font-size:12px;line-height:1.7;min-height:35px}.strings{display:grid;gap:10px;margin:24px 0}.string{display:flex;align-items:center;justify-content:space-between;background:#1c3045;border:1px solid #304d67;color:#e7faff;border-radius:12px;padding:14px 16px}.string.active{border-color:#45e9f5;background:#1a5261;box-shadow:0 0 14px #42e9f21f}.string span{color:#aec9db;font-size:12px}footer{border-top:1px solid #26394b;margin-top:35px;padding-top:22px;color:#8096ad;font-size:11px}footer a{color:#55d7e8;text-decoration:none}@media(max-width:850px){.shell{padding:14px}main{grid-template-columns:1fr}.hero{padding:28px 0 14px}.card{padding:17px}.tabs button{padding:13px 5px;font-size:13px}.right{gap:7px}.facebook{font-size:10px;padding:9px}.ready{font-size:10px}.drumring{width:255px;height:255px}.readout{margin:30px 0 22px}footer{flex-wrap:wrap}}

.drum-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:20px 0 5px}.drum-type{background:#1b3046;color:#dbe9fa;border:1px solid #39546b;border-radius:14px;padding:13px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-size:24px;min-height:100px}.drum-type strong{font-size:13px}.drum-type small{color:#8eb0c6;font-size:10px;letter-spacing:1px}.drum-type.selected{background:linear-gradient(145deg,#155269,#204567);border:2px solid #55ecf4;box-shadow:0 0 16px #2adff331}.drum-type:focus-visible,.lug:focus-visible{outline:3px solid #fff;outline-offset:3px}.preset-help{font-size:12px;line-height:1.6;color:#8db8ce;background:#1a3246;border-left:3px solid #4ce1ed;padding:10px 12px;border-radius:6px;margin:0}

.strings{display:flex;flex-direction:column;gap:9px;margin:18px 0}
.string-guide{order:-10;background:#143747;border:1px solid #2d7984;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:5px}
.string-guide strong{color:#70eff2;font-size:15px}
.string-guide span{color:#c2d8e3;font-size:12px;line-height:1.6}
.string{min-height:70px;gap:9px;justify-content:flex-start;text-align:left;padding:10px 12px;flex-wrap:nowrap}
.string-number{background:#2a4560;border-radius:9px;min-width:64px;padding:10px 7px;color:#effaff!important;font-weight:800;font-size:14px!important;text-align:center}
.string-note{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.string-note strong{font-size:22px;line-height:1.1;color:#fff}
.string-note small{font-size:11px;color:#a8c3d7;line-height:1.3}
.string-frequency{white-space:nowrap;font-size:12px!important;color:#89e7eb!important;font-variant-numeric:tabular-nums}
.string-check{font-size:19px!important;color:#789aa9!important}
.string.active .string-number{background:#33bfd3;color:#031b29!important}
.string.active .string-check{color:#5af8ab!important}
.string-tip{color:#c5d4e1;line-height:1.6;font-size:12px;margin:5px 0 0}
@media(max-width:390px){.string{gap:6px;padding:9px 7px}.string-number{min-width:55px}.string-note small{font-size:10px}.string-frequency{font-size:11px!important}}

.sound-presets{border:1px solid #32748b;background:linear-gradient(150deg,#15374a,#142337);border-radius:16px;padding:16px;margin:15px 0;display:grid;gap:11px}.sound-presets>label{font-size:15px;font-weight:800;color:#7aeaf4}.sound-presets select{width:100%;min-height:45px}.sound-description{font-size:13px;color:#bfd9e2;margin:0;line-height:1.6}.head-targets{display:grid;grid-template-columns:1fr 1fr;gap:9px}.head-targets>div{background:#0c2232;padding:13px 9px;border-radius:10px;display:grid;gap:8px}.head-targets small{font-size:10px;color:#a9c8d3}.head-targets strong{font-size:24px;color:#78eff3}.preset-note{color:#b4ccd9;line-height:1.5}.sound-presets button{min-height:45px}

/* v5: one integrated LIVE FREQUENCY + circular lug measurement surface */
#drumLiveWrap{margin:42px auto 32px;max-width:100%;}
#drumLiveWrap .drumring{width:min(310px,72vw);height:min(310px,72vw);border-width:13px;}
#drumLiveWrap .drumcore{gap:6px;pointer-events:none}
#drumLiveWrap .core-label{font-size:10px;color:#70d9ea;font-weight:800;letter-spacing:1.2px}
#drumLiveWrap .readout{margin:2px 0 0;display:flex;flex-direction:column;gap:0;}
#drumLiveWrap .pitch{display:flex;gap:6px;align-items:baseline;justify-content:center}
#drumLiveWrap #frequency{font-size:clamp(32px,8vw,52px);font-variant-numeric:tabular-nums;color:#5ce9f2;line-height:1.12}
#drumLiveWrap .pitch span{font-size:14px;color:#b6d4e8}
#drumLiveWrap .note{font-size:11px;color:#78c8d7;letter-spacing:1px}
#drumLiveWrap .core-bottom{display:flex;flex-direction:column;gap:0;align-items:center;margin-top:4px}
#drumLiveWrap .core-bottom small{font-size:10px;color:#8caebe}
#drumLiveWrap #average{font-weight:700;font-size:18px;color:#d5f6fd;font-variant-numeric:tabular-nums;line-height:1.25}
#drumLiveWrap .lug{pointer-events:auto}
#drumRingHome:empty,#liveReadoutHome:empty{display:none}
@media (max-width:420px){#drumLiveWrap{margin:39px auto 31px}#drumLiveWrap .drumring{width:min(282px,69vw);height:min(282px,69vw)}#drumLiveWrap #frequency{font-size:34px}#drumLiveWrap .core-label{font-size:9px}}