:root{color-scheme:dark;--accent:#ecc868;--accentDark:#80531c;--case:#332813;--trim:#92814f;--pattern:repeating-linear-gradient(115deg,transparent 0 24px,#ffffff06 24px 26px)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#222331,#090c12 65%);color:#f4f5f8;font-family:system-ui,-apple-system,sans-serif;font-size:16px}main{max-width:920px;margin:auto;padding:20px 18px max(28px,env(safe-area-inset-bottom))}header{text-align:center}header img{width:min(100%,660px);height:auto}header .intro{color:#adb4c2;margin:0 0 20px}nav{display:flex;gap:8px;margin-bottom:16px}button,select,input{font:inherit}button,select,input[type=text],input:not([type]){border:1px solid #444b5b;border-radius:12px;background:#171d29;color:inherit;padding:12px;min-height:46px}button{cursor:pointer;font-weight:700}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,#171d29)}nav button{flex:1;font-size:14px}label{display:block;font-weight:650;margin-bottom:8px}select{width:100%}.card{background:#131923;border:1px solid #343c49;border-radius:20px;padding:22px;margin-bottom:18px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.pedal{position:relative;background:var(--pattern),linear-gradient(120deg,var(--case),#13151b 55%,var(--case));border:2px solid var(--trim);border-radius:28px;box-shadow:inset 0 0 0 5px #090a0eb0,inset 0 0 0 7px #ffffff15,0 16px 40px #0007;padding:28px}.screw{position:absolute;background:linear-gradient(135deg,#e1e5e9,#6e7783);height:10px;width:10px;border-radius:50%;box-shadow:1px 2px 3px black}.screw:after{content:'';position:absolute;height:1px;background:#252a30;top:5px;left:2px;right:2px;transform:rotate(-35deg)}.a{top:12px;left:12px}.b{top:12px;right:12px}.c{bottom:12px;left:12px}.d{bottom:12px;right:12px}.pedalTitle{display:flex;justify-content:space-between;font-size:18px;letter-spacing:4px;font-weight:800;color:var(--accent);margin-bottom:18px}#led{width:14px;height:14px;background:#35403b;border:2px solid #68726c;border-radius:50%}#led.on{background:#7cff68;box-shadow:0 0 12px #7cff68}.targets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.targets button{flex:1;min-width:52px;padding:9px;font-size:15px;box-shadow:inset 0 1px #ffffff28,0 3px 4px #0004}.targets small{display:block;color:#aeb5bf;font-size:10px}.face{background:#080e13;border:2px solid #3c4752;border-radius:16px;padding:18px;box-shadow:inset 0 3px 14px #000}.readout{display:flex;align-items:center;gap:20px;min-height:95px}.readout #note{font-size:60px;font-weight:800;min-width:100px;color:var(--accent)}.readout strong{display:block;font-size:20px}.readout #detail{display:block;font-size:13px;color:#aeb7c6;margin-top:7px}.meter{height:84px;position:relative;display:flex;justify-content:space-between;padding-top:10px;color:#aaa;font-size:10px;letter-spacing:1px}.meter b{color:#a4e68b}.ticks{position:absolute;left:0;right:0;bottom:20px;height:20px;background:repeating-linear-gradient(90deg,#859285 0 1px,transparent 1px 10%);border-bottom:1px solid #859285}.center{position:absolute;width:12%;height:32px;background:#86ec7d19;bottom:14px;left:44%}#needle{position:absolute;left:50%;width:3px;height:40px;bottom:8px;background:var(--accent);box-shadow:0 0 8px var(--accent);z-index:2;transition:left .1s}.input{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1px}.input meter{width:100%;height:18px}#levelText{min-width:50px}canvas{display:block;width:100%;height:140px;margin-top:14px}.small{font-size:12px;line-height:1.5;color:#aab2c1}.controls{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:18px}.controls label{margin:0}input[type=range]{display:block;width:100%;accent-color:var(--accent);margin-top:12px;min-height:26px}output{font-weight:400;color:var(--accent);float:right}.focusRow{border-top:1px solid #ffffff20;margin:14px 0;padding-top:16px}.focusRow input{accent-color:var(--accent);width:20px;height:20px;vertical-align:middle}.pill{border:1px solid var(--trim);color:var(--accent);border-radius:20px;font-size:10px;font-weight:400;padding:4px 7px;margin-left:6px}.stompRow{display:flex;align-items:center;justify-content:center;gap:24px}#listen{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:10px}.stomp{width:58px;height:58px;border-radius:50%;border:6px solid #5e6670;background:radial-gradient(circle at 30% 25%,#fff,#bdc5ce 45%,#7a8592);box-shadow:0 4px 7px #0008,inset 0 0 0 2px #e8eef4}#status{text-align:center;font-size:13px;color:#c0c7d2;min-height:40px;line-height:1.5;margin-bottom:0}.tip{text-align:center;max-width:680px;margin:20px auto;color:#aab2bf;line-height:1.6;font-size:13px}h1{font-size:26px;margin-top:0}h2{font-size:20px}.card p{line-height:1.6}#settings label{margin-top:22px}#custom{width:100%}#saveTuning{margin-top:6px}.legend{font-size:12px;color:#b3bbc8;margin:16px 0}.fretboard{display:grid;gap:0;background:repeating-linear-gradient(92deg,#684923 0 9px,#604020 10px 12px);border-radius:12px;overflow:hidden;border:2px solid #807260}.fretRow{display:grid;grid-template-columns:28px repeat(var(--strings),minmax(0,1fr));border-bottom:3px solid #949b9f;background:linear-gradient(90deg,#0002,transparent 45%,#0002);padding:8px 0;min-height:64px;position:relative}.fretRow:first-child{border-bottom:7px solid #e8dabe;background:#111822}.fretRow:last-child{border-bottom:0}.fretRow>span{color:#c4bb9b;font-size:10px;align-self:center;text-align:center}.fretRow button{border-radius:50%;width:42px;height:42px;min-height:0;padding:0;justify-self:center;background:#141c20dd;border:2px solid #cfbd81;z-index:1;font-size:12px;font-weight:700;position:relative}.fretRow button:before{content:'';position:absolute;width:2px;height:69px;background:#c8b77a66;top:-17px;left:calc(50% - 1px);z-index:-1;pointer-events:none}.fretRow button.natural{color:#f1dd9b}.fretRow button.accidental{color:#b5bbc9;border-color:#7a8589}.fretRow button:active{background:var(--accent);color:#111}.fretRow button.playing{background:var(--accent);color:#111}footer{text-align:center;color:#818b9d;font-size:11px;margin-top:22px}[hidden]{display:none!important}body[data-theme=green]{--accent:#94e69a;--accentDark:#205b34;--case:#213b27;--trim:#587856}body[data-theme=purple]{--accent:#d0a1f5;--accentDark:#713793;--case:#382247;--trim:#9667b5;--pattern:radial-gradient(circle at 30% 40%,#b664ec15 1px,transparent 3px)}body[data-theme=stripe]{--accent:#e9dd51;--case:#302d16;--trim:#a09330;--pattern:repeating-linear-gradient(125deg,#0b0d0fd9 0 16px,#b39c3422 16px 32px)}@media(max-width:520px){main{padding:14px 12px}.pedal{padding:22px 16px}.setup{gap:10px}.readout{gap:10px}.readout #note{font-size:44px;min-width:77px}.readout strong{font-size:16px}.controls{gap:12px}.controls button{font-size:12px;padding:9px}.face{padding:12px}.fretRow button{width:32px;height:32px;font-size:10px}.fretRow{min-height:56px}.fretRow button:before{height:60px;top:-15px}nav button{font-size:12px;padding:10px 5px}.card{padding:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:520px){.targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.targets button{min-width:0}.targets button:last-child{flex:0}}

.targets button[data-target=chromatic]{font-size:11px}
/* Prototype-local visual refinement, derived from the original tuner/neck. */
:root{--metal:#d2b05e;--metalInk:#211a0b;--metalTrim:#ac8a47}body[data-theme=black]{--accent:#d4bd88;--case:#17191e;--trim:#a28c5b;--metal:#827d72;--metalInk:#111;--metalTrim:#a0a19a}body[data-theme=green]{--accent:#9bea80;--metal:#a6b589;--metalInk:#112413;--metalTrim:#778557}body[data-theme=purple]{--metal:#b8a1d1;--metalInk:#261738;--metalTrim:#857196}body[data-theme=stripe]{--metal:#d7bf5a;--metalInk:#221b08;--metalTrim:#a78c35}body[data-theme=aces]{--accent:#e7dcb7;--case:#222327;--trim:#bbb28d;--metal:#b5b7b9;--metalInk:#1b1c1e;--metalTrim:#d9d9d2;--pattern:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 10px)}
.targets{padding:12px;margin:0;border:1px solid var(--metalTrim);border-bottom:0;border-radius:12px 12px 0 0;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#00000007 1px 3px),linear-gradient(115deg,var(--metal),color-mix(in srgb,var(--metal) 75%,white),var(--metal));gap:8px}.targets button{background:linear-gradient(#353a42,#151b24);border:1px solid #727982;box-shadow:inset 0 1px 2px #ffffff50,0 3px 4px #0008;min-height:48px}.targets button[aria-pressed=true]{background:linear-gradient(#111820,#343b42);box-shadow:inset 0 2px 5px #000a,0 1px 0 #fff5;border-color:var(--accent);color:var(--accent)}
.face{background:repeating-linear-gradient(0deg,#ffffff0c 0 1px,#00000008 1px 3px),linear-gradient(110deg,var(--metal),color-mix(in srgb,var(--metal) 78%,white),var(--metal));border:1px solid var(--metalTrim);border-top:0;border-radius:0;padding:12px;box-shadow:none}.readout{background:#07121a;border-radius:10px 10px 0 0;padding:12px 16px;box-shadow:inset 0 3px 6px #0008}.meter,.input,canvas{background:#07121a;padding-left:12px;padding-right:12px}.meter{margin:0}.meter .ticks{left:12px;right:12px}.input{padding-top:6px;padding-bottom:8px}.face canvas{margin:0;border-radius:0 0 10px 10px;height:140px}.face .small{color:var(--metalInk);margin-bottom:0}.controls{margin:0;border:1px solid var(--metalTrim);border-top:0;border-radius:0 0 12px 12px;background:linear-gradient(115deg,var(--metal),color-mix(in srgb,var(--metal) 78%,white),var(--metal));padding:15px 12px;color:var(--metalInk)}.controls output{color:var(--metalInk)}.controls button{background:#ffffff18;color:var(--metalInk);border:1px solid var(--metalInk)}.controls input{accent-color:var(--metalInk)}.pedalTitle{padding:6px 6px 12px;margin-bottom:0}.stomp{height:64px;width:64px}.setupChoices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.soundPanel{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--metalTrim);background:linear-gradient(115deg,#1a1d23,#363941,#161b23);flex-wrap:wrap}.soundPanel>span{font-size:11px;letter-spacing:2px;color:#c1c6cf;margin-right:auto}.soundPanel button{font-size:13px;min-height:42px;padding:9px 13px}.soundPanel #soundPower[aria-pressed=true]{box-shadow:0 0 8px #8bec7833;color:#a5ed90}.fretboard{background-image:var(--neck-grain),linear-gradient(90deg,#2b1b10,#533725 20%,#2c1c11 50%,#533725 80%,#2b1b10);background-size:100% 100%;border:0;box-shadow:inset 2px 0 5px #0008,2px 3px 5px #0008}.fretRow{background:transparent;border-bottom:5px solid transparent;border-image:linear-gradient(#898c87,#eee5d3 35%,#a9aaa2 55%,#494b46) 1;padding:7px 0;min-height:0}.fretRow:first-child{height:68px!important;border-image:none;border-bottom:7px solid #e6ddc2;background:#101722}.fretRow button{background:#111820a6;border-color:#a1a8a6aa;box-shadow:0 0 0 2px #1115;font-size:13px}.fretRow button:before{height:var(--row-height,65px);top:calc((42px - var(--row-height,65px))/2);width:3px;left:calc(50% - 1.5px);background:repeating-linear-gradient(0deg,#8a7450 0 1px,#dccb9b 1px 2px);box-shadow:1px 0 1px #0008;z-index:-1}.fretRow button[data-plain=true]:before{width:2px;background:linear-gradient(90deg,#595f61,#d8dce1,#777d81)}.fretRow button.natural{color:#f0eee4}.fretRow .inlayMarker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#ede6cf;box-shadow:inset 0 1px 2px #0005;pointer-events:none;z-index:0}.fretRow .inlayMarker.doubleLeft{left:34%}.fretRow .inlayMarker.doubleRight{left:67%}body[data-inlay=lightning] .inlayMarker{width:16px;height:26px;border-radius:0;clip-path:polygon(58% 0,18% 48%,46% 48%,31% 100%,82% 39%,54% 39%)}body[data-inlay=blocks] .inlayMarker{width:68px;height:17px;border-radius:2px;background:linear-gradient(110deg,#fffef6,#ded8c9 40%,#f7f3e7 70%,#cfc8ba)}body[data-inlay=spades] .inlayMarker{width:25px;height:27px;border-radius:0;-webkit-mask:var(--spade-inlay) center/contain no-repeat;mask:var(--spade-inlay) center/contain no-repeat;background:linear-gradient(125deg,#e5ddc8,#fffbed 40%,#c6bfaa 75%)}body[data-wood=maple] .fretboard{background-image:var(--neck-grain),linear-gradient(90deg,#d8b977,#edcf8d 22%,#d3ad66 50%,#edcf8d 78%,#d8b977)}body[data-wood=maple] .fretRow button{background:#eed599bb;border-color:#453c2daa;color:#171006}body[data-wood=maple] .fretRow:first-child button{background:#111820;color:#f1f3f6}body[data-wood=maple] .inlayMarker{background:#503d22}body[data-wood=maple][data-inlay=spades] .inlayMarker{background:linear-gradient(125deg,#251d14,#62513b 42%,#30261b 72%,#766047)}.fretRow button.playing{background:var(--accent)!important;color:#111!important;border-color:#fff}.fretRow>span{z-index:1;color:#e3d9c4}body[data-wood=maple] .fretRow>span{color:#50391d}body[data-wood=maple] .fretRow:first-child>span{color:#c9d2dc}@media(max-width:520px){.targets{padding:10px}.face{padding:10px}.readout{padding:10px}.fretRow button{width:32px;height:32px;font-size:11px}.fretRow button:before{top:calc((32px - var(--row-height,65px))/2)}.fretRow .inlayMarker{max-height:65%}.soundPanel button{padding:8px 10px}.soundPanel>span{width:100%}.setupChoices{gap:10px}}

.noteLabel{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:inherit}.fretRow button{background:#152027}body[data-wood=maple] .fretRow button{background:#efd395}
/* Custom Shop uses the original amp controls and the same playable neck. */
#settings>article:first-child{padding:20px;background:transparent;border:0}.shopIntro{margin-bottom:18px;color:#acb6c5}.ampHead{margin:0 0 26px!important}.ampFace{position:relative}.ampPreview>span{position:relative;z-index:4;display:grid;place-items:center;color:#fff;font-size:19px;text-shadow:0 1px 3px #000}.ampPreview.playing>span{color:var(--accent)}.ampPreview:disabled{opacity:.5}.shopLookSection{padding:22px;background:#131923;border:1px solid #343c49;border-radius:20px}.shopLookSection>h2{margin-top:0}.skinGallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.skinTile{display:flex;flex-direction:column;gap:7px;text-align:left;padding:10px;min-width:0}.skinTile strong{font-size:13px}.skinTile small{font-size:10px;font-weight:400;color:#aab3c2;text-transform:capitalize}.skinMini{width:100%;height:64px;border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 14%,#c8c0a680 14% 15%),repeating-linear-gradient(0deg,transparent 0 20%,#b4b8b37a 20% 23%),var(--mini-wood);border:4px solid #5a5450;box-shadow:inset 0 0 6px #0008}.skinMini[data-skin=gold]{border-color:#d6cbae}.skinMini[data-skin=green]{border-color:#77a33a}.skinMini[data-skin=purple]{border-color:#9f81b0}.skinMini[data-skin=stripe]{border-image:repeating-linear-gradient(130deg,#e0bf42 0 8px,#111 8px 16px) 4}.skinMini[data-skin=aces]{border-color:#d9d6cb}.shopNeckPreview{margin-top:24px}.shopPreviewHeading{display:flex;justify-content:space-between;align-items:center;gap:12px}.shopPreviewHeading h2{margin:0}.shopPreviewHeading span{font-size:12px;color:var(--accent)}.neckSoundBar{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:15px 0}.neckSoundBar>span{font-size:13px;color:var(--accent)}.neckSoundBar button{font-size:12px}.tuningDetails{margin-top:24px;border-top:1px solid #343c49;padding-top:18px}.tuningDetails summary{font-weight:750;cursor:pointer}.tuningDetails input{max-width:100%}.fretboard{position:relative}body[data-finish=vintage] .fretboard:after{content:'';position:absolute;inset:68px 0 0;pointer-events:none;background:repeating-linear-gradient(83deg,transparent 0 50px,#2d1b1212 51px 52px,transparent 54px 78px);opacity:.8}body[data-finish=new] .fretboard{filter:saturate(.94)}@media(max-width:520px){#settings>article:first-child{padding:6px 0}.shopLookSection{padding:16px}.skinGallery{grid-template-columns:repeat(2,minmax(0,1fr))}.ampFace{gap:4px!important}.ampLabel{font-size:10px!important}.ampMicroLabel{font-size:6px!important}.ampPreview>span{font-size:16px}.ampToggleLabels{font-size:10px!important}.shopPreviewHeading span{font-size:10px}.shopPreviewHeading h2{font-size:19px}}

body[data-finish=vintage] .fretboard:after{display:none}