html,body{height:100%;margin:0;overflow:hidden}body{color:#cfc8bb;background:radial-gradient(80% 70% at 50% 30%,#23211f 0%,#0f0e0d 70%,#080808 100%);place-items:center;font-family:Space Grotesk,system-ui,sans-serif;display:grid}.tuner{--u:min(1vw, 1.75vh);box-sizing:border-box;gap:calc(var(--u) * 1.6);width:min(94vw,150vh);padding:calc(var(--u) * 2.2) calc(var(--u) * 2.8) calc(var(--u) * 2.4);border-radius:calc(var(--u) * 1.2);background:repeating-linear-gradient(90deg,#ffffff06 0 1px,#0000 1px 2px),linear-gradient(#2b2926,#1a1917 70%,#141312);flex-direction:column;display:flex;box-shadow:inset 0 1px #fff2,inset 0 -3px #0008,0 0 0 1px #000,0 30px 60px -20px #000}.brand{font-size:calc(var(--u) * 1.3);letter-spacing:.2em;text-transform:uppercase;color:#8e877a;align-items:baseline;gap:1em;display:flex}.brand b{color:#e8e1d3;letter-spacing:.28em}.glass{gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 1.6) calc(var(--u) * 2);border-radius:calc(var(--u) * .8);background:linear-gradient(170deg,#ffffff0d 0%,#0000 35%),#070605;flex-direction:column;display:flex;box-shadow:inset 0 3px 12px #000,inset 0 0 0 1px #000,0 1px #ffffff14}.row{align-items:center;gap:calc(var(--u) * 2);display:flex}.seg16{filter:drop-shadow(0 0 calc(var(--u) * .6) #ffb21e66);flex:1}.seg7{width:34%;filter:drop-shadow(0 0 calc(var(--u) * .6) #ff463066)}.units{font-size:calc(var(--u) * 1.3);letter-spacing:.15em;color:#4a3c2a;flex-direction:column;gap:.3em;font-weight:700;display:flex}.units .on,.units .st.on{color:#ffb21e;text-shadow:0 0 8px #ffb21e88}.units .st{color:#3a2f22}.meter{align-items:flex-end;gap:calc(var(--u) * .5);height:calc(var(--u) * 6);flex:1;display:flex}.meter i{background:#1b2a17;border-radius:2px;flex:1;height:30%;transition:background .15s}.meter i:nth-child(2){height:38%}.meter i:nth-child(3){height:46%}.meter i:nth-child(4){height:55%}.meter i:nth-child(5){height:64%}.meter i:nth-child(6){height:73%}.meter i:nth-child(7){height:86%}.meter i:nth-child(8){height:100%}.meter i.on{background:#7cff6b;box-shadow:0 0 8px #7cff6b88}.meter i:nth-child(n+7).on{background:#ffb21e;box-shadow:0 0 8px #ffb21e88}.controls{gap:calc(var(--u) * 1.6);align-items:stretch;display:flex}.presets{gap:calc(var(--u) * .8);flex:1.6;grid-template-columns:repeat(6,1fr);display:grid}.presets button{font:inherit;color:#d9d2c4;cursor:pointer;align-items:center;gap:calc(var(--u) * .35);padding:calc(var(--u) * .8) 0 calc(var(--u) * .7);border-radius:calc(var(--u) * .5);box-shadow:inset 0 1px 0 #ffffff30, 0 calc(var(--u) * .45) 0 #0d0c0b, 0 calc(var(--u) * .6) calc(var(--u) * .8) #0009;background:linear-gradient(#45423d,#2c2a27);border:0;flex-direction:column;transition:transform 60ms,box-shadow 60ms;display:flex}.presets button:active,.presets button.on{transform:translateY(calc(var(--u) * .35));box-shadow:inset 0 1px 0 #ffffff20, 0 calc(var(--u) * .1) 0 #0d0c0b, 0 calc(var(--u) * .2) calc(var(--u) * .4) #0009}.led{width:calc(var(--u) * .7);height:calc(var(--u) * .7);background:#3b1a12;border-radius:50%;box-shadow:inset 0 0 2px #000}.presets button.on .led{background:#ff4630;box-shadow:0 0 8px #ff4630}.k{font-weight:700;font-size:calc(var(--u) * 1.8);line-height:1}.f{font-size:calc(var(--u) * 1);color:#8e877a;letter-spacing:.08em}.msg{flex:1;display:flex}.msg input{min-width:0;font:700 calc(var(--u) * 1.25) "Space Grotesk", sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffb21e;caret-color:#ffb21e;border-radius:calc(var(--u) * .5);background:#0b0a09;border:0;outline:none;flex:1;padding:0 1em;box-shadow:inset 0 2px 6px #000,0 1px #ffffff14}.msg input::placeholder{color:#5b4a30}.msg input:focus{box-shadow:inset 0 2px 6px #000,0 0 0 1px #ffb21e55}