:root{--leather: #0d0c0a;--panel-hi: #23211d;--panel-lo: #161512;--line: #3a352b;--brass: #7a6a4a;--cream: #d6c9ab;--cream-dim: #8d8168;--lcd-bg: #060806;--green: #3df06e;--green-soft: rgba(61, 240, 110, .5);--amber: #f2b04a;--red: #ef5340;--seg: "DSEG14-Classic", "Spline Sans Mono", monospace;--label: "Oswald", sans-serif;--mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}*{margin:0;padding:0;box-sizing:border-box}body{background:radial-gradient(130% 100% at 50% 0%,#14120f,#060505 70%);min-height:100vh;display:grid;place-items:center;padding:24px 0;font-family:var(--mono)}.rack{padding:22px;border-radius:26px;background:var(--noise),radial-gradient(120% 120% at 30% 20%,#1c1a16 0%,var(--leather) 55%,#070606 100%);background-blend-mode:overlay,normal;box-shadow:0 40px 90px #000c,inset 0 2px 3px #ffffff12,inset 0 -3px 6px #000c}.panel{position:relative;width:min(600px,92vw);padding:30px 40px 38px;border-radius:12px;border:1px solid #000;outline:1px solid rgba(190,170,120,.18);background:var(--noise),linear-gradient(172deg,var(--panel-hi) 0%,var(--panel-lo) 45%,#12110e 100%);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px #ffffff14,inset 0 0 60px #0000008c}.screw{position:absolute;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a7c5e,#4c4232 45%,#201b12);box-shadow:inset 0 1px 2px #ffffff59,0 2px 4px #000000b3}.screw:before,.screw:after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:linear-gradient(#0e0b07,#3a3122);border-radius:1px}.screw:before{transform:rotate(38deg)}.screw:after{transform:rotate(-52deg)}.screw.tl{top:14px;left:14px}.screw.tr{top:14px;right:14px}.screw.bl{bottom:14px;left:14px}.screw.br{bottom:14px;right:14px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 10px 22px}.wordmark{flex:1;display:flex;align-items:center;gap:16px;font:600 30px/1 var(--label);letter-spacing:.14em;color:var(--cream);text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 1px rgba(0,0,0,.5);white-space:nowrap}.wordmark:before,.wordmark:after{content:"";flex:1;height:2px;background:linear-gradient(#d6c9ab66,#0009);border-radius:1px}.a4-plate{font:500 13px/1 var(--label);letter-spacing:.12em;color:var(--cream);border:1px solid var(--line);outline:1px solid rgba(0,0,0,.8);border-radius:5px;padding:8px 12px;background:linear-gradient(#1b1915,#12110d);box-shadow:inset 0 1px #ffffff0f;white-space:nowrap}.display-bezel{padding:10px;border-radius:18px;background:linear-gradient(175deg,#35302a,#14120e 30%,#0b0a08 85%,#2a2620);border:1px solid #000;box-shadow:inset 0 1px 1px #ffffff26,0 3px 8px #0009}.lcd{border-radius:10px;background:radial-gradient(100% 140% at 50% 0%,#0b0f0a 0%,var(--lcd-bg) 60%),var(--lcd-bg);border:1px solid #000;box-shadow:inset 0 4px 18px #000000e6,inset 0 0 50px #00000080;text-align:center;padding:26px 20px 22px;min-height:210px}.note-row{display:flex;align-items:flex-end;justify-content:center;gap:12px;min-height:118px}.seg-note{font-family:var(--seg);font-size:104px;line-height:1;color:var(--green);text-shadow:0 0 18px var(--green-soft),0 0 45px rgba(61,240,110,.25)}.accidental{font:700 44px/1 var(--mono);color:var(--green);text-shadow:0 0 14px var(--green-soft);align-self:flex-start;margin-top:4px}.seg-octave{font-family:var(--seg);font-size:54px;line-height:1;color:var(--green);text-shadow:0 0 14px var(--green-soft);padding-bottom:4px}.cents-readout{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:14px;font:500 17px/1 var(--mono);letter-spacing:.24em;white-space:nowrap;color:var(--amber);text-shadow:0 0 12px rgba(242,176,74,.5)}.cents-readout i{width:34px;height:2px;background:currentColor;opacity:.7}#display.in-tune .cents-readout{color:var(--green);text-shadow:0 0 12px var(--green-soft)}#display.idle .cents-readout{color:var(--cream-dim);text-shadow:none}#display.idle .seg-note,#display.idle .seg-octave,#display.idle .accidental{color:#1c2b1e;text-shadow:none}.meter{padding:22px 2px 6px}.meter-labels{display:flex;justify-content:space-between;align-items:baseline;font:500 13px/1 var(--label);letter-spacing:.1em;margin-bottom:6px}.meter-labels .cap{font-size:11px;color:var(--cream-dim)}.l-red{color:var(--red)}.l-amber{color:var(--amber)}.l-zero{color:var(--cream);font-size:15px}.l-green{color:#9fd98a}.ruler{height:9px;margin:0 6px 8px;background-image:repeating-linear-gradient(to right,rgba(214,201,171,.35) 0 1px,transparent 1px 5%);position:relative}.ruler:after{content:"";position:absolute;left:50%;top:-4px;bottom:-2px;width:2px;margin-left:-1px;background:var(--cream)}.led-strip{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:linear-gradient(#0a0908,#12100d);border:1px solid #000;outline:1px solid rgba(190,170,120,.12);box-shadow:inset 0 3px 8px #000000d9}.led{width:13px;height:13px;border-radius:50%;background:#191512;box-shadow:inset 0 1px 2px #000000e6;transition:background .1s,box-shadow .1s}.led.center{width:9px;height:24px;border-radius:5px}.led.red{background:radial-gradient(circle at 35% 30%,#5c221b,#2a0f0b)}.led.amber{background:radial-gradient(circle at 35% 30%,#5f4416,#2c1f09)}.led.green{background:radial-gradient(circle at 35% 30%,#1d4a26,#0d2010)}.led.red.lit{background:radial-gradient(circle at 35% 30%,#ff9d84,var(--red) 60%,#a02313);box-shadow:0 0 12px #ef5340cc,inset 0 1px 1px #fff6}.led.amber.lit{background:radial-gradient(circle at 35% 30%,#ffe0a0,var(--amber) 60%,#b57718);box-shadow:0 0 12px #f2b04acc,inset 0 1px 1px #fff6}.led.green.lit{background:radial-gradient(circle at 35% 30%,#b4ffc4,var(--green) 60%,#14943c);box-shadow:0 0 14px #3df06ee6,inset 0 1px 1px #fff6}.controls-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:26px 0 4px}.ctl-label{display:flex;align-items:center;gap:10px;justify-content:center;font:500 13px/1 var(--label);letter-spacing:.16em;color:var(--cream);text-shadow:0 1px 0 rgba(0,0,0,.8);white-space:nowrap}.ctl-label.lined:before,.ctl-label.lined:after{content:"";width:28px;height:1px;background:#d6c9ab59}.knob-group{display:flex;flex-direction:column;align-items:center;gap:12px;width:120px}.knob{--angle: 0deg;width:68px;height:68px;border-radius:50%;cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 32% 28%,#4b463d,#22201b 40%,#0c0b09);border:1px solid #000;outline:2px solid rgba(0,0,0,.6);box-shadow:inset 0 2px 3px #ffffff2e,inset 0 -3px 5px #000000b3,0 5px 10px #000000b3;position:relative}.knob:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(var(--cream),var(--cream)) no-repeat 50% 6% / 3px 30%;transform:rotate(var(--angle));filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}.knob-scale{display:flex;justify-content:space-between;width:100%;font:500 11px/1 var(--label);letter-spacing:.08em;color:var(--cream-dim)}.knob-scale .mid{color:var(--cream)}.mode-group{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1}.toggle{position:relative;display:flex;align-items:center;gap:0;border-radius:9px;background:linear-gradient(#0d0c0a,#191712);border:1px solid #000;outline:1px solid rgba(190,170,120,.15);box-shadow:inset 0 3px 7px #000000d9;padding:4px}.toggle-opt{font:500 14px/1 var(--label);letter-spacing:.12em;color:var(--cream-dim);background:none;border:none;padding:13px 16px;cursor:pointer;transition:color .15s,text-shadow .15s}.toggle-opt:hover{color:var(--cream)}.toggle-opt.active{color:var(--green);text-shadow:0 0 10px var(--green-soft)}.lever{width:14px;height:34px;border-radius:7px;flex:none;background:radial-gradient(circle at 40% 25%,#9c8d6c,#5c5138 45%,#2a2317);border:1px solid #000;box-shadow:inset 0 1px 1px #fff6,0 2px 5px #000c;transform:rotate(-8deg);transition:transform .15s;pointer-events:none}.toggle.tuning .lever{transform:rotate(8deg)}.status-led{position:absolute;right:-22px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:#14251a;box-shadow:inset 0 1px 2px #000c}.status-led.on{background:radial-gradient(circle at 35% 30%,#b4ffc4,var(--green) 65%);box-shadow:0 0 10px var(--green-soft)}.preset{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 0 6px}.preset-plate{display:flex;align-items:center;gap:14px;border-radius:10px;border:1px solid var(--line);outline:1px solid rgba(0,0,0,.8);background:linear-gradient(#1d1b16,#131109);box-shadow:inset 0 1px #ffffff0f,0 3px 7px #00000080;padding:8px 14px}.plate-screw{width:12px;height:12px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#7d7057,#443b2a,#1c180f);box-shadow:inset 0 1px 1px #ffffff4d;position:relative}.plate-screw:before{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.5px;margin-top:-.75px;background:#0e0b07;transform:rotate(30deg)}.select-wrap{position:relative;display:flex;align-items:center}#tuning-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;font:400 27px/1.15 Style Script,cursive;color:var(--cream);text-shadow:0 0 8px rgba(214,201,171,.25);background:linear-gradient(#0c0b08,#14120c);border:1px solid #000;border-radius:7px;box-shadow:inset 0 3px 7px #000c;padding:6px 44px 8px 22px;min-width:250px;text-align:center;cursor:pointer}#tuning-select option{font-family:var(--mono);font-size:14px}.select-arrow{position:absolute;right:16px;color:var(--cream);font-size:15px;pointer-events:none}.strings-section{display:flex;flex-direction:column;gap:12px;padding-top:22px}.strings{display:flex;gap:12px}.string-btn{flex:1;height:58px;border-radius:9px;border:1px solid #000;outline:1px solid rgba(0,0,0,.7);font:600 21px/1 var(--label);letter-spacing:.04em;color:#33302a;cursor:pointer;background:linear-gradient(#efe6d0,#cfc3a6 55%,#a89a79);box-shadow:inset 0 2px 1px #ffffffbf,inset 0 -4px 5px #0000004d,0 4px 7px #0009;text-shadow:0 1px 0 rgba(255,255,255,.4);transition:transform .06s,background .15s,box-shadow .15s,color .15s}.string-btn:active{transform:translateY(2px)}.string-btn.lit{color:#06340f;background:linear-gradient(#a8ff9f,#4ede59 55%,#1fa03a);box-shadow:inset 0 2px 1px #fff9,inset 0 -4px 5px #00000040,0 0 20px #3df06e8c,0 4px 7px #0009;text-shadow:0 1px 0 rgba(255,255,255,.3)}.string-btn.sel:not(.lit){outline:2px solid rgba(61,240,110,.55);outline-offset:1px}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#080706ed;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:3}.start-overlay.hidden{display:none}.start-btn{font:600 17px/1 var(--label);letter-spacing:.24em;color:var(--green);text-shadow:0 0 12px var(--green-soft);background:linear-gradient(#101b10,#0a120a);border:1px solid rgba(61,240,110,.5);outline:1px solid #000;border-radius:9px;padding:18px 38px;cursor:pointer;box-shadow:inset 0 1px #ffffff14,0 0 28px #3df06e1f;transition:box-shadow .15s,background .15s}.start-btn:hover{background:linear-gradient(#152515,#0d170d);box-shadow:inset 0 1px #ffffff14,0 0 40px #3df06e4d}.start-hint{font:500 11px/1 var(--label);letter-spacing:.2em;color:var(--cream-dim)}.start-error{font:400 12px/1.5 var(--mono);color:var(--amber);max-width:80%;text-align:center}.start-error.hidden{display:none}@media(max-width:560px){body{padding:10px 0}.rack{padding:10px;border-radius:18px}.panel{width:calc(100vw - 20px);padding:18px 16px 24px}.screw{width:15px;height:15px}.screw.tl,.screw.tr{top:9px}.screw.bl,.screw.br{bottom:9px}.screw.tl,.screw.bl{left:9px}.screw.tr,.screw.br{right:9px}.topbar{padding:0 4px 14px;gap:10px}.wordmark{font-size:19px;gap:8px}.a4-plate{font-size:10px;padding:6px 8px;letter-spacing:.08em}.lcd{min-height:150px;padding:18px 10px 16px}.note-row{min-height:78px;gap:8px}.seg-note{font-size:68px}.seg-octave{font-size:36px;padding-bottom:2px}.accidental{font-size:28px;margin-top:2px}.cents-readout{font-size:13px;letter-spacing:.18em;gap:8px;margin-top:10px}.cents-readout i{width:18px}.meter{padding-top:14px}.meter-labels{font-size:10px}.meter-labels .cap{display:none}.l-zero{font-size:12px}.led-strip{padding:8px}.led{width:9px;height:9px}.led.center{width:7px;height:17px}.controls-row{flex-wrap:wrap;justify-content:space-around;row-gap:20px;padding-top:20px}.mode-group{order:-1;flex-basis:100%}.knob-group{width:96px;gap:9px}.knob{width:54px;height:54px}.knob-scale{font-size:10px}.ctl-label{font-size:11px}.toggle-opt{font-size:12px;padding:11px 12px}.lever{height:28px;width:12px}.status-led{right:-18px}.preset{padding-top:18px}#tuning-select{font-size:21px;min-width:190px;padding:5px 38px 7px 16px}.strings-section{padding-top:18px}.strings{gap:6px}.string-btn{height:46px;font-size:15px;border-radius:7px}.start-btn{font-size:14px;padding:14px 26px;letter-spacing:.18em}}