@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg:#101316; --panel:#171b1e; --panel-2:#1c2124; --line:#30373b; --text:#edf0ec; --muted:#9ba49f; --orange:#f0763c; --green:#9ad7a7; --cyan:#93ced3; --yellow:#e5c879; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:radial-gradient(ellipse 70% 40% at 75% 0%,#1c2526 0%,transparent 72%),var(--bg); font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:.01em; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1120px,calc(100% - 40px)); margin:auto; }
.topbar { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-size:15px; font-weight:700; letter-spacing:.18em; }
.brand-mark { display:flex; gap:3px; align-items:flex-end; height:22px; transform:skew(-18deg); }
.brand-mark i { display:block; width:5px; background:var(--orange); border-radius:1px; }
.brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:17px}.brand-mark i:nth-child(3){height:22px}
.status-pill,.live-badge { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; color:var(--green); border:1px solid rgba(154,215,167,.28); background:rgba(154,215,167,.06); padding:9px 12px; display:flex; align-items:center; gap:8px; }
.status-dot,.live-badge span { height:6px; width:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.hero { padding:76px 0 57px; max-width:780px; }
.eyebrow,.section-kicker { display:flex; align-items:center; gap:11px; font:500 10px 'DM Mono',monospace; letter-spacing:.16em; color:var(--orange); }
.eyebrow-line { width:34px; height:1px; background:var(--orange); }
h1 { font-size:clamp(44px,7vw,78px); line-height:.98; letter-spacing:-.065em; margin:22px 0 23px; font-weight:600; }
h1 em { color:var(--orange); font-style:normal; }
.hero-copy { max-width:510px; color:var(--muted); font-size:16px; line-height:1.6; margin:0; }
.control-card,.analyzer-card,.noise-card { border:1px solid var(--line); background:rgba(23,27,30,.92); }
.control-card { padding:28px 30px 24px; }
.card-head,.analyzer-topline { display:flex; justify-content:space-between; align-items:flex-start; }
h2 { font-size:23px; letter-spacing:-.035em; margin:8px 0 0; }
.live-badge { color:var(--cyan); border-color:rgba(147,206,211,.25); background:rgba(147,206,211,.04); }
.live-badge span { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.machine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0 22px; }
.machine-choice { position:relative; display:flex; align-items:center; gap:13px; text-align:left; color:var(--text); background:var(--panel-2); border:1px solid var(--line); padding:16px 14px; min-height:70px; transition:.18s ease; }
.machine-choice:hover { border-color:#596568; }.machine-choice.selected { border-color:var(--orange); background:#222629; box-shadow:inset 3px 0 var(--orange); }
.machine-choice strong,.machine-choice small { display:block; }.machine-choice strong { font-size:14px; }.machine-choice small { color:var(--muted); font-size:11px; margin-top:4px; }
.machine-icon { color:var(--orange); font:600 13px 'DM Mono',monospace; width:30px; height:30px; display:grid; place-items:center; border:1px solid currentColor; transform:skew(-9deg); }.machine-icon.v24{color:var(--cyan)}.machine-icon.custom{color:var(--muted);font-size:22px}
.check { margin-left:auto; color:var(--orange); opacity:0; }.selected .check{opacity:1}
.target-row { display:flex; align-items:center; gap:15px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }.target-row label{color:var(--text);font-weight:600}.help{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid var(--muted);border-radius:50%;font-size:9px;color:var(--muted);margin-left:4px}.target-input{display:flex;align-items:center;background:#101416;border:1px solid #4a5255;padding:8px 10px 8px 12px;color:var(--orange);font:500 13px 'DM Mono',monospace}.target-input input{width:55px;background:transparent;border:0;color:var(--orange);outline:0;font:inherit}.target-input span{color:var(--muted)}.range-note{font:11px 'DM Mono',monospace}.range-note strong{color:var(--green);font-weight:400}
.analyzer-card { margin-top:18px; padding:28px 30px 30px; background:linear-gradient(110deg,#1a1f21,#161a1d); }.analyzer-topline{align-items:center}.mic-state{font:500 10px 'DM Mono',monospace;letter-spacing:.12em;color:var(--muted)}.mic-state.active{color:var(--green)}
.meter-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; padding:35px 0 27px; }.readout-label,.meter-scale,.meter-values,.confidence-row,.visualizer-label,.visualizer-hz,.noise-level,.profile-progress small { font:500 9px 'DM Mono',monospace; letter-spacing:.12em; color:var(--muted); }.hz-value{font:500 clamp(64px,9vw,100px) 'DM Mono',monospace; line-height:.95; margin:12px 0 18px; letter-spacing:-.1em}.hz-value small{font:400 24px 'DM Mono',monospace;letter-spacing:0;color:var(--muted);margin-left:10px}.confidence-row{display:flex;align-items:center;gap:9px}.confidence-track{width:94px;height:4px;background:#313b3d;display:block}.confidence-track i{display:block;width:0;height:100%;background:var(--green);transition:width .15s}.confidence-row strong{font-weight:400;color:var(--green)}
.meter-scale,.meter-values{display:flex;justify-content:space-between;align-items:center}.meter-scale span:nth-child(2){color:var(--green)}.meter-track{position:relative;height:10px;margin:13px 0 10px;background:linear-gradient(90deg,#30383a,#30383a);border-radius:1px}.meter-zone{position:absolute;left:40%;right:40%;top:-2px;height:14px;background:rgba(154,215,167,.45);border:1px solid var(--green)}.target-mark,.meter-needle{position:absolute;top:-8px;width:2px;height:26px}.target-mark{left:50%;background:var(--green);box-shadow:0 0 9px var(--green)}.meter-needle{left:50%;height:30px;top:-10px;background:var(--orange);box-shadow:0 0 12px rgba(240,118,60,.8);transition:left .2s ease}.meter-needle:after{content:'';position:absolute;left:-4px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--orange)}.meter-values{font-size:10px;letter-spacing:0;color:#687375}.meter-values span:nth-child(2){color:var(--text)}
.visualizer{height:142px;position:relative;overflow:hidden;border:1px solid #2b3537;background:#121719;margin-bottom:23px}.visualizer canvas{position:absolute;width:100%;height:100%;inset:0}.visualizer-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.08) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.6%,rgba(255,255,255,.05) 50%,transparent 50.4%);pointer-events:none}.visualizer-label,.visualizer-hz{position:absolute;top:12px}.visualizer-label{left:15px;color:#718080}.visualizer-hz{right:15px;color:#657274;letter-spacing:0}.visualizer-hz span{color:var(--green);margin:0 10px}.analyzer-actions{display:flex;gap:11px}.listen-button,.secondary-button,.outline-button{min-height:44px;border:0;font:600 11px 'DM Mono',monospace;letter-spacing:.1em}.listen-button{flex:1;background:var(--orange);color:#171313;box-shadow:0 6px 18px rgba(240,118,60,.16)}.listen-button:hover{background:#ff8850}.play-icon{font-size:10px;margin-right:9px}.secondary-button{width:105px;background:transparent;color:var(--muted);border:1px solid #424b4d}.secondary-button:hover{color:var(--text);border-color:#7d8888}
.audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--line);padding:18px 0 21px}.control-label,.gain-control>span:first-child{display:flex;align-items:center;justify-content:space-between;font:500 9px 'DM Mono',monospace;letter-spacing:.12em;color:var(--muted)}.control-label strong,.gain-control strong{color:var(--green);font-weight:400}.level-track{height:7px;background:#2d3738;margin:11px 0 7px}.level-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--green),var(--orange));transition:width .12s}.level-control small{font-size:10px;color:#6d7878}.gain-control{display:block}.gain-control input{display:block;width:100%;height:18px;margin:8px 0 1px;accent-color:var(--orange)}.gain-scale{display:flex!important;justify-content:space-between!important;font-size:9px;letter-spacing:0!important}.gain-scale small{color:#6d7878}
.noise-card{margin-top:18px;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;gap:35px;background:linear-gradient(90deg,rgba(229,200,121,.06),rgba(23,27,30,.9) 65%);border-color:#514a36}.noise-copy{display:flex;gap:18px;align-items:flex-start}.noise-icon{color:var(--yellow);font-size:32px;line-height:1;transform:rotate(-20deg);display:block}.noise-copy h2{font-size:18px;margin-top:6px}.noise-copy p{color:var(--muted);font-size:12px;line-height:1.5;max-width:450px;margin:8px 0 0}.noise-actions{display:flex;align-items:center;gap:23px;flex-shrink:0}.outline-button{padding:0 17px;color:var(--yellow);border:1px solid rgba(229,200,121,.5);background:transparent;white-space:nowrap}.outline-button:hover{background:rgba(229,200,121,.1)}.record-dot{display:inline-block;width:7px;height:7px;background:currentColor;border-radius:50%;margin-right:8px}.noise-level{display:grid;grid-template-columns:auto auto;gap:5px 12px;align-items:center;white-space:nowrap}.noise-level strong{font:500 11px 'DM Mono',monospace;color:var(--muted);font-weight:400}.switch{grid-column:2;grid-row:1 / span 2;display:block;position:relative;width:38px;height:20px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;border-radius:20px;background:#30383a;transition:.2s}.switch span:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#8a9490;transition:.2s}.switch input:checked+span{background:rgba(154,215,167,.3)}.switch input:checked+span:before{transform:translateX(18px);background:var(--green);box-shadow:0 0 8px var(--green)}.profile-progress{display:flex;align-items:center;gap:10px;flex:1;min-width:190px;color:var(--yellow)}.profile-progress>span{height:3px;flex:1;background:linear-gradient(90deg,var(--yellow) 0 0%,#413d31 0);background-size:100% 100%;animation:profile 2.4s linear forwards}.profile-progress small{letter-spacing:.03em;white-space:nowrap}@keyframes profile{to{background:linear-gradient(90deg,var(--yellow) 100%,#413d31 100%)}}
.guide-section{padding:76px 0 70px}.guide-heading{display:flex;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px}.guide-heading h2{font-size:25px}.guide-heading p{margin:0 0 0 auto;color:var(--muted);font-size:12px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:25px}.guide-step{position:relative;padding-right:10px}.step-number{font:500 11px 'DM Mono',monospace;color:var(--orange)}.step-illustration{height:112px;margin:16px 0 17px;position:relative;background:#171d1f;border:1px solid #2e383a;overflow:hidden}.step-illustration:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.04) 49%,transparent 50%)}.belt-line{position:absolute;left:18px;right:18px;top:54px;height:3px;background:var(--orange);box-shadow:0 0 12px rgba(240,118,60,.5)}.pluck-hand{position:absolute;left:50%;top:23px;font-size:32px;color:var(--green);transform:rotate(-30deg)}.sound-wave{position:absolute;left:27px;top:37px;font:24px 'DM Mono',monospace;letter-spacing:-5px;color:var(--cyan)}.belt-dot{position:absolute;right:45px;top:48px;width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}.target-ring{position:absolute;left:calc(50% - 28px);top:27px;width:57px;height:57px;border:2px solid var(--green);border-radius:50%;box-shadow:0 0 18px rgba(154,215,167,.2)}.target-cross{position:absolute;left:calc(50% - 12px);top:34px;font-size:42px;line-height:1;color:var(--orange)}.guide-step h3{font-size:16px;margin:0 0 8px}.guide-step p{max-width:275px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0 28px;color:var(--orange);font:500 10px 'DM Mono',monospace;letter-spacing:.12em}.muted{color:var(--muted)}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);padding:12px 16px;background:#252c2d;color:var(--text);border:1px solid #52605d;font:11px 'DM Mono',monospace;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){.shell{width:min(100% - 28px,620px)}.topbar{height:70px}.status-pill{padding:8px;font-size:8px}.hero{padding:54px 0 40px}.hero-copy{font-size:14px}.control-card,.analyzer-card{padding:22px 18px}.machine-grid{grid-template-columns:1fr;gap:7px}.machine-choice{min-height:58px;padding:11px 12px}.target-row{flex-wrap:wrap;gap:11px}.range-note{width:100%;margin-left:0}.meter-layout{grid-template-columns:1fr;gap:31px;padding-top:31px}.hz-value{font-size:70px}.audio-controls{grid-template-columns:1fr;gap:19px}.noise-card{padding:21px 18px;display:block}.noise-actions{margin-top:20px;justify-content:space-between;gap:12px}.outline-button{padding:0 10px}.guide-section{padding:58px 0 45px}.guide-heading{display:block}.guide-heading p{margin-top:8px}.guide-grid{grid-template-columns:1fr;gap:32px}.step-illustration{height:90px}footer{font-size:8px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}