:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#e6e8ed;min-height:100%;background:#111318 url('assets/theme/shared/background.png') center/cover no-repeat fixed}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100vh}button,input,select{font:inherit}button,select,input[type=number]{color:#e6e8ed}button{cursor:pointer;border:1px solid #3b404c;border-radius:7px;background:#343842;padding:8px 12px;transition:background .15s}button:where(:not(.lamp)):hover{background:#394051}button:where(:not(.lamp)):active{background:#292c34}button:disabled,select:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #8caeff;outline-offset:3px}
header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:24px;padding:18px 28px;border-bottom:1px solid #2b303a;background:#191c23}.title{display:flex;flex-direction:column;gap:5px;white-space:nowrap}.title strong{font-size:17px;letter-spacing:-.3px}.title span{font-size:11px;color:#949dab}.preset-controls{min-width:200px;max-width:300px;flex:1}.preset-controls>label{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#a4adbd;margin-bottom:6px}.preset-actions{display:flex;gap:8px}.preset-actions select{width:100%;min-width:0;border:1px solid #3b404c;border-radius:7px;background:#11151c;padding:8px 30px 8px 10px;font-size:12px}.primary{background:#7598e6;border-color:#7598e6;color:#101827;font-weight:bold}.primary:hover{background:#95b3f4}nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}nav button{font-size:11px}.icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;padding:0;font-size:24px}header>.icon-button{margin-left:auto}
main{width:100%;max-width:1600px;margin:24px auto;padding:0 28px}.workspace{filter:drop-shadow(0 12px 24px #0005)}.editor-shell{width:100%;border-radius:22px;overflow:hidden}.panel{display:grid;gap:10px;padding:0 0 12px;background:transparent;border-radius:22px}
.amp-hero{position:relative;isolation:isolate;aspect-ratio:3.3;background:var(--amp-art,url('assets/theme/shared/amp-hero.png')) center/100% 100% no-repeat;border-radius:22px;overflow:hidden}.hero-selectors{position:absolute;top:5%;left:50%;transform:translateX(-50%);display:flex;gap:12px;width:38%;justify-content:center}.hero-selectors label{color:#c8cbd0;display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;text-shadow:0 1px 2px #000}.hero-selectors select{width:100%;min-width:0;border:1px solid #606268;border-radius:5px;background:#111316e8;color:#eee;padding:8px 12px;font-size:14px;letter-spacing:.5px}
.control-row{display:flex;align-items:start;justify-content:space-around;gap:8px}.amp-controls{position:absolute;inset:30% 7% 6%;align-items:center}.control{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;position:relative;color:#171819}.control-label{font-family:'Arial Narrow',Impact,Arial,sans-serif;font-stretch:condensed;font-size:clamp(11px,1.15vw,18px);font-weight:700;text-transform:uppercase;text-align:center;white-space:nowrap;margin-bottom:8px;line-height:1.2}.dial{position:relative;width:clamp(52px,6.5vw,100px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:repeating-conic-gradient(from 224.4deg,#171819 0deg 1.2deg,transparent 1.2deg 27deg);isolation:isolate}.dial:before{content:'';position:absolute;inset:7%;border-radius:50%;background:#d7d6d1;z-index:-1}.dial:after{content:'';position:absolute;bottom:-1%;left:18%;right:18%;height:14%;background:#d7d6d1;z-index:-1}.knob{--angle:0deg;position:relative;width:79%;height:79%;padding:0;border:2px solid #111;border-radius:50%;background:repeating-conic-gradient(#141414 0 9deg,#2b2c2d 11deg 18deg,#080909 20deg 28deg);box-shadow:2px 5px 5px #0008,inset 0 2px 2px #ffffff80;touch-action:none;cursor:ns-resize}.knob:hover{background:repeating-conic-gradient(#202020 0 9deg,#393b3d 11deg 18deg,#101112 20deg 28deg)}.knob-cap{position:absolute;inset:11%;border:1px solid #777;border-radius:50%;background:conic-gradient(from 20deg,#b9b9b7,#f8f8f6 38deg,#929390 85deg,#e9e9e6 135deg,#737671 190deg,#f2f2ee 235deg,#a3a4a1 280deg,#ededeb 320deg,#b9b9b7);box-shadow:inset 0 0 2px 2px #ffffffa0,0 1px 4px #000;pointer-events:none}.knob:after{content:'';position:absolute;left:calc(50% - 1px);top:5%;height:40%;width:2px;background:#171819;transform:rotate(var(--angle));transform-origin:50% 112.5%;pointer-events:none}.knob:disabled{opacity:.6}.dial-range{display:flex;justify-content:space-between;width:clamp(52px,6.5vw,100px);margin-top:-3px;padding:0 1px;color:#292a29;font-size:clamp(9px,.9vw,13px)}.readout{display:flex;justify-content:center;align-items:baseline;gap:3px;margin-top:5px;max-width:100%;font-family:'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:clamp(14px,1.4vw,22px)}.value{min-width:0;width:3.6em;max-width:100%;background:transparent;border:0;border-radius:3px;color:inherit!important;padding:0!important;text-align:center;font-weight:700;font-size:inherit;appearance:textfield;font-variant-numeric:tabular-nums}.value::-webkit-inner-spin-button{appearance:none}.readout span{font-size:.65em;margin-left:-5px}.readout:has(span) input{width:3em}
.effects-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4.5fr) minmax(0,3.5fr);gap:10px;padding:0}.pedal-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0}.metal-module{position:relative;isolation:isolate;overflow:hidden;border:1px solid #989b9e;border-radius:14px;padding:16px 26px 24px;color:#171819;background:#d6d8d9 url('assets/theme/shared/metal-texture.png') center/cover no-repeat;box-shadow:inset 0 0 0 2px #202225,inset 0 1px 2px #fff9,inset 0 -1px 2px #0005}.module-heading{display:flex;align-items:center;gap:14px;min-height:40px;margin:0 7px 22px;padding:3px 0;border:0;background:none;box-shadow:none}.module-heading select{min-width:0;flex:0 1 auto;width:auto;max-width:calc(100% - 38px);background:#1c2028;border:1px solid #454b56;border-radius:6px;color:#e6e8ed;font-family:Arial,sans-serif;font-size:14px;text-align:left;padding:8px 12px;cursor:pointer}.module-heading .lamp{margin-left:auto}.model-select option{background:#1c2028;color:#eee}.lamp{flex:0 0 32px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent url('assets/pedals/shared/hardware-states.png') 0 0/200% 200% no-repeat;box-shadow:none;transition:none}/* Align the off sprite with the on sprite: +22px horizontally, −1.5px vertically per 627px tile. */
.lamp[aria-pressed=false]{background-position:96.49% .24%}.module-title{font-family:'Arial Narrow',Impact,Arial,sans-serif;color:#292a29;font-size:clamp(12px,1.3vw,20px);text-transform:uppercase;white-space:nowrap}#expression-heading{gap:10px}#expression-heading select{font-family:Arial,sans-serif;font-size:12px;max-width:44%}.pedal-row .control-row{max-width:580px;margin:0 auto}.settings-noise{margin:22px 0}.settings-noise .control{color:#e6e8ed;max-width:150px;margin:auto}.settings-noise .dial-range{color:#bac2d1}.settings-noise .dial:before,.settings-noise .dial:after{background:#1c2028}.settings-noise .value{background:transparent}.amp-info{font-size:12px;line-height:1.6;margin:18px 0;color:#adb5c3}.amp-info summary{cursor:pointer}#amp-description{max-height:200px;overflow:auto;margin-top:12px}#amp-description strong{display:block;margin-bottom:6px}.local-settings input[type=text],#program-name{width:100%;padding:9px 10px;border:1px solid #414957;border-radius:6px;background:#12161d;color:#eee;text-transform:uppercase}
.library-status{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#949dab;font-size:11px}.footnote{font-size:11px;color:#949dab;text-align:center;line-height:18px;margin-top:24px}
dialog{max-width:460px;width:calc(100% - 32px);max-height:calc(100% - 48px);overflow:auto;padding:24px}
dialog,#preset-notes-popup{border:1px solid #3b4250;border-radius:14px;box-shadow:0 24px 80px #0009;background:#1c2028;color:#e6e8ed}dialog::backdrop{background:#080b12b8;backdrop-filter:blur(5px)}dialog h2{font-size:20px;margin:0 0 16px}dialog h3{font-size:13px;margin:0 0 8px;color:#cbd3e2}dialog p,dialog li{font-size:13px;line-height:1.6}dialog label{display:flex;flex-direction:column;gap:7px;margin-top:18px;font-size:12px;color:#cbd3e2}dialog select,dialog input[type=number]{width:100%;padding:9px 10px;border:1px solid #414957;border-radius:6px;background:#12161d}dialog .dialog-actions{display:flex;justify-content:flex-end;margin-top:24px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-heading :is(h2,.dialog-title){margin:0;font-size:20px;font-weight:700}.dialog-heading .icon-button{background:transparent;border-color:transparent}#global .checkbox-label{flex-direction:row;align-items:center;gap:10px}input[type=checkbox]{accent-color:#8caeff;width:16px;height:16px}.local-settings{border-top:1px solid #353b47;margin-top:24px;padding-top:20px}.note{font-size:11px;line-height:1.6;color:#a4adbd}
[hidden]{display:none!important}
@media(max-width:1150px){header{flex-wrap:wrap;gap:16px}.title{flex:1}.preset-controls{flex:1;max-width:340px}nav{order:4;flex-basis:100%;margin:0}header>.icon-button{margin-left:0}}
@media(max-width:620px){header{padding:16px;gap:14px}.title strong{font-size:16px}.preset-controls{order:3;flex-basis:100%;max-width:none}header>.icon-button{margin-left:auto}nav{gap:6px}main{padding:0 12px;margin-top:20px}.footnote{font-size:10px}.library-status{font-size:10px}}

@media(min-width:1600px){.dial{width:100px}.dial-range{width:100px}}
@media(max-width:950px){main{padding:0 16px}.hero-selectors{width:42%;top:3%}.hero-selectors select{padding:5px 8px;font-size:12px}.hero-selectors label{font-size:8px}.metal-module{padding:10px 10px 16px}.module-heading{gap:8px;padding:3px 0;margin-bottom:14px}.lamp{flex-basis:28px;width:28px;height:28px}.control-row{gap:4px}.module-heading select{font-family:Arial,sans-serif;font-size:12px}.control-label{font-family:Arial,sans-serif;font-size:9px}.dial{width:58px}.dial-range{width:58px}.amp-controls .dial{width:66px}.amp-controls .dial-range{width:66px}.readout{font-size:16px}#expression-heading{flex-wrap:wrap;justify-content:flex-start}#expression-heading select{max-width:100%;font-size:11px}.module-title{font-size:12px}}
@media(max-width:680px){.amp-hero{aspect-ratio:auto;min-height:350px;background-size:auto 100%}.hero-selectors{position:relative;top:auto;left:auto;transform:none;width:80%;margin:24px auto 48px}.amp-controls{position:relative;inset:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:0 22px 22px;gap:18px 6px}.amp-controls .control-label{font-size:10px}.amp-controls .dial{width:60px}.amp-controls .dial-range{width:60px}.effects-row{grid-template-columns:1fr}.pedal-row{grid-template-columns:1fr}.metal-module{padding:14px 18px 20px}.module-heading{margin-bottom:20px}.module-heading select{font-size:17px}.control-label{font-size:10px}.dial{width:58px}.dial-range{width:58px}.readout{font-size:18px}#expression-heading{flex-wrap:nowrap}#expression-heading select{max-width:48%}.panel{border-radius:14px}.module-title{font-size:14px}}

.panel,.amp-hero,.metal-module,.control-row{min-width:0}.dial{max-width:100%}.dial-range{max-width:100%}.module-heading{min-width:0}

/* Eleven centered scale marks cover the same 270° sweep as the knob pointer (0–10). */
.module-heading{margin-left:10px;margin-right:10px}.dial{background:none}.dial:before{inset:0;z-index:0;background:repeating-conic-gradient(from 224.4deg,#171819 0deg 1.2deg,transparent 1.2deg 27deg);mask:conic-gradient(from 224.4deg,#000 0deg 271.2deg,transparent 271.2deg),radial-gradient(farthest-side,transparent 80%,#000 82%);mask-composite:intersect}.dial:after{display:none}.knob{z-index:1}.settings-noise .dial:before{background:repeating-conic-gradient(from 224.4deg,#bac2d1 0deg 1.2deg,transparent 1.2deg 27deg)}
@media(max-width:950px){.metal-module{padding:12px 14px 18px}.module-heading{margin-left:5px;margin-right:5px}}
@media(max-width:680px){.metal-module{padding:14px 18px 20px}.amp-controls .dial{width:54px}.amp-controls .dial-range{width:54px}.hero-selectors{margin-bottom:48px}.amp-hero{background-size:100% 100%}}

/* Model artwork swaps independently of the shared knob layout. */
.amp-hero[data-amp="10"]{--amp-art:url('assets/theme/us-highgain/hero.png')}
.amp-hero[data-amp="4"]{--amp-art:url('assets/theme/uk-blues/hero-v2.png')}
.amp-hero[data-amp="4"] .knob-cap{background:conic-gradient(from 20deg,#b8b19f,#faf4df 38deg,#938d7e 85deg,#eae3d0 135deg,#777364 190deg,#f4edda 235deg,#a7a08e 280deg,#eee8d7 320deg,#b8b19f)}
.amp-hero[data-amp="5"]{--amp-art:url('assets/theme/uk68p/hero-v3.png')}
.amp-hero[data-amp="5"] .knob-cap{background:conic-gradient(from 20deg,#b8b19f,#faf4df 38deg,#938d7e 85deg,#eae3d0 135deg,#777364 190deg,#f4edda 235deg,#a7a08e 280deg,#eee8d7 320deg,#b8b19f)}
.amp-hero[data-amp="11"]{--amp-art:url('assets/theme/boutique-od/hero.png')}
.amp-hero[data-amp="11"] .control,.amp-hero[data-amp="11"] .dial-range{color:#e4e2da}
.amp-hero[data-amp="11"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#dddcd4 0deg 1.2deg,transparent 1.2deg 27deg)}

/* Knob skins follow the hero model; effect knobs retain their shared finish. */
.knob-skirt{display:none}
.amp-hero[data-amp="13"] .control,.amp-hero[data-amp="13"] .dial-range{color:#e8e6dc}
.amp-hero[data-amp="13"] .dial:before{display:none}
.amp-hero[data-amp="13"] .knob{width:88%;height:88%;border:1px solid #3c3c3b;background:repeating-conic-gradient(#202020 0deg 8deg,#353534 10deg 15deg,#181818 18deg 24deg);box-shadow:0 3px 5px #000b,inset 0 1px 2px #7778}
.amp-hero[data-amp="13"] .knob-cap{inset:32%;background:conic-gradient(#aaa,#eee 45deg,#777 110deg,#ddd 180deg,#888 250deg,#eee 310deg,#aaa);box-shadow:0 1px 3px #000,inset 0 0 1px 1px #fff9}
.amp-hero[data-amp="13"] .knob-skirt{display:block;position:absolute;inset:0;transform:rotate(var(--angle));pointer-events:none}
.knob-skirt span{position:absolute;color:#e0ded7;font-family:Arial,sans-serif;font-size:clamp(4px,.6vw,8px);line-height:1;transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));font-weight:500}
.amp-hero[data-amp="13"] .knob:after{top:1%;height:12%;background:#e5e2d8;transform:none}
.amp-hero:is([data-amp="11"],[data-amp="1"],[data-amp="2"],[data-amp="3"],[data-amp="14"],[data-amp="15"]) .knob{background:radial-gradient(circle at 35% 30%,#393939,#181818 65%,#080808);border-color:#101010;box-shadow:0 3px 5px #0009,inset 0 1px 2px #7776}
.amp-hero:is([data-amp="11"],[data-amp="1"],[data-amp="2"],[data-amp="3"],[data-amp="14"],[data-amp="15"]) .knob-cap{inset:11% 31% 11%;border:1px solid #515151;border-radius:40% 40% 24% 24%;background:linear-gradient(90deg,#111,#505050 40%,#252525 58%,#090909);clip-path:polygon(38% 0,62% 0,100% 88%,90% 100%,10% 100%,0 88%);transform:rotate(var(--angle));box-shadow:none}
.amp-hero:is([data-amp="11"],[data-amp="1"],[data-amp="2"],[data-amp="3"],[data-amp="14"],[data-amp="15"]) .knob:after{top:12%;height:26%;width:2px;background:#d8d5c9;transform-origin:50% 146%}
.amp-hero[data-amp="5"] .knob{width:74%;height:74%;border-color:#28231b;background:repeating-conic-gradient(#15130f 0deg 12deg,#3b3528 14deg 20deg,#15130f 22deg 30deg)}
.amp-hero[data-amp="5"] .knob-cap{inset:9%;border-color:#756e59}
.amp-hero[data-amp="4"] .knob-cap{inset:17%;border-color:#817764;box-shadow:0 1px 4px #000,inset 0 0 0 2px #c0b69c}
.amp-hero[data-amp="13"]{--amp-art:url('assets/theme/black-2x12/hero.png')}

.amp-hero[data-amp="1"]{--amp-art:url('assets/theme/ac15tb/hero.png')}
.amp-hero[data-amp="1"] .control,.amp-hero[data-amp="1"] .dial-range{color:#d9cda8}
.amp-hero[data-amp="1"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#d0c39a 0deg 1.2deg,transparent 1.2deg 27deg)}
.amp-hero[data-amp="1"] .knob-cap{inset:8% 34%;border-radius:42% 42% 15% 15%;background:linear-gradient(90deg,#101112,#464747 40%,#242627 58%,#090a0b)}
.amp-hero[data-amp="1"] .knob:after{background:#c6c0ac}
.amp-hero[data-amp="0"]{--amp-art:url('assets/theme/ac15/hero.png')}
.amp-hero[data-amp="0"] .hero-selectors label{color:#363730;text-shadow:0 1px 1px #fff8}
.amp-hero[data-amp="0"] .control,.amp-hero[data-amp="0"] .dial-range{color:#ded2b0}
.amp-hero[data-amp="0"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#d0c39a 0deg 1.2deg,transparent 1.2deg 27deg)}
.amp-hero[data-amp="0"] .knob{width:69%;height:69%;border:1px solid #898575;background:radial-gradient(circle at 35% 28%,#fffef0,#dddac3 48%,#a7a38d 80%,#615e50);box-shadow:0 3px 5px #0009,inset 0 1px 2px #fff9}
.amp-hero[data-amp="0"] .knob-cap{inset:-8% 31% 0;border:1px solid #b6b29a;border-radius:35% 35% 18% 18%;background:linear-gradient(90deg,#bdb9a1,#fffef0 40%,#ebe8d1 58%,#b2ae96);clip-path:polygon(38% 0,62% 0,100% 88%,90% 100%,10% 100%,0 88%);transform:rotate(var(--angle));transform-origin:50% 53.7%;box-shadow:none}
.amp-hero[data-amp="0"] .knob:after{top:0;height:28%;width:2px;background:#766f57;transform-origin:50% 179%}

.amp-hero[data-amp="2"]{--amp-art:url('assets/theme/ac30/hero-v2.png')}
.amp-hero[data-amp="2"] .control,.amp-hero[data-amp="2"] .dial-range{color:#f0e5d3}
.amp-hero[data-amp="2"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#e8dac3 0deg 1.2deg,transparent 1.2deg 27deg)}
.amp-hero[data-amp="2"] .knob-cap{inset:8% 34%;border-radius:42% 42% 15% 15%;background:linear-gradient(90deg,#101112,#464747 40%,#242627 58%,#090a0b)}
.amp-hero[data-amp="2"] .knob:after{background:#d3cbb9}
.amp-hero[data-amp="12"]{--amp-art:url('assets/theme/boutique-cl/hero.png')}
.amp-hero[data-amp="12"] .hero-selectors label{color:#f0e3d8;text-shadow:0 1px 2px #442115}
.amp-hero[data-amp="12"] .knob{width:80%;height:80%;border:1px solid #656f73;background:conic-gradient(from 20deg,#9ca8ad,#eef3f4 45deg,#7e8e95 100deg,#d9e1e3 165deg,#8b9a9f 220deg,#f2f4f3 285deg,#9ca8ad);box-shadow:0 3px 4px #0007,inset 0 0 0 2px #d8dedc}
.amp-hero[data-amp="12"] .knob:before{content:'';position:absolute;inset:22%;border-radius:50%;background:repeating-conic-gradient(#22282a 0deg 5deg,#7b8284 6deg 9deg,#22282a 10deg 14deg);box-shadow:0 0 1px 1px #151a1c}
.amp-hero[data-amp="12"] .knob-cap{inset:30%;z-index:1;border-color:#8c9699;background:conic-gradient(#b6c1c5,#eef3f4 45deg,#89979e 110deg,#dce4e5 180deg,#87969d 250deg,#f0f4f3 310deg,#b6c1c5);box-shadow:inset 0 1px 2px #fff9}
.amp-hero[data-amp="12"] .knob:after{top:2%;height:18%;width:3px;background:#252d30;transform-origin:50% 267%;z-index:2}
.amp-hero[data-amp="6"]{--amp-art:url('assets/theme/uk80/hero-v2.png')}
.amp-hero[data-amp="6"] .knob{width:74%;height:74%;border:2px solid #151515;background:radial-gradient(circle,#2e2b23 60%,#0a0b0b 76%);box-shadow:0 3px 4px #0008,inset 0 1px 2px #727064}
.amp-hero[data-amp="6"] .knob-cap{inset:8%;border-color:#8e825f;background:conic-gradient(from 20deg,#b4a578,#f1e6bd 38deg,#8e815b 85deg,#dfd2a8 135deg,#80734d 190deg,#ece0b5 235deg,#ac9d70 280deg,#e4d8b0 320deg,#b4a578);box-shadow:inset 0 0 2px 1px #fff4d588,0 1px 2px #000}
.amp-hero[data-amp="6"] .knob:after{background:#29271f;width:2px;top:6%;height:37%;transform-origin:50% 119%}

.amp-hero[data-amp="3"]{--amp-art:url('assets/theme/ac30tb/hero.png?v=a83f92b11d90')}
.amp-hero[data-amp="3"] .control,.amp-hero[data-amp="3"] .dial-range{color:#eee8dc}
.amp-hero[data-amp="3"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#e5decd 0deg 1.2deg,transparent 1.2deg 27deg)}
.amp-hero[data-amp="3"] .knob{border-color:#251f16;background:radial-gradient(circle at 35% 30%,#3a3328,#191713 65%,#090908);box-shadow:0 3px 5px #0009,inset 0 1px 2px #80735b77}
.amp-hero[data-amp="3"] .knob-cap{inset:5% 33% 8%;border:1px solid #887352;border-radius:32% 32% 12% 12%;background:linear-gradient(90deg,#151410,#494236 40%,#24221c 58%,#100f0c);box-shadow:inset 0 0 1px #ad9268;transform-origin:50% 51.7%}
.amp-hero[data-amp="3"] .knob:after{top:6%;height:37%;background:#b49a70;transform-origin:50% 119%}


.amp-hero[data-amp="4"] .knob{width:72%;height:72%;border:2px solid #171613;background:radial-gradient(circle,#3c382d 60%,#10100f 77%);box-shadow:0 3px 4px #0008,inset 0 1px 2px #756f5c}
.amp-hero[data-amp="4"] .knob-cap{inset:10%;border-color:#8b8166;box-shadow:inset 0 1px 2px #fff8,0 1px 2px #000}
@media(min-width:681px){.amp-hero[data-amp="4"] .hero-selectors{top:15%}}
.amp-hero[data-amp="7"]{--amp-art:url('assets/theme/uk90/hero-v2.png')}
.amp-hero:is([data-amp="7"],[data-amp="8"]) .knob{width:73%;height:73%;border:2px solid #171715;background:radial-gradient(circle,#34342e 60%,#0c0d0c 77%);box-shadow:0 3px 4px #0008,inset 0 1px 2px #76756d}
.amp-hero:is([data-amp="7"],[data-amp="8"]) .knob-cap{inset:9%;border-color:#898575;background:conic-gradient(from 20deg,#b0ac9b,#ece9db 38deg,#8c897a 85deg,#d9d5c6 135deg,#7c796c 190deg,#e7e3d5 235deg,#a5a191 280deg,#e0dccd 320deg,#b0ac9b);box-shadow:inset 0 0 2px 1px #fffbee88,0 1px 2px #000}
.amp-hero:is([data-amp="7"],[data-amp="8"]) .knob:after{background:#2b2b25;width:2px;top:6%;height:37%;transform-origin:50% 119%}

/* These models share cabinet materials, but retain their distinct panel graphics. */
.amp-hero[data-amp="8"]{--amp-art:url('assets/theme/uk90/hero-v2.png')}
.amp-eq-guide,.amp-lower-guide{display:none;position:absolute;pointer-events:none;color:#3e392b}
.amp-hero[data-amp="8"] .amp-eq-guide{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;left:calc(100% / 7);width:calc(100% * 4 / 7);top:4%;height:14px;font:italic 700 clamp(9px,.85vw,13px) Arial,sans-serif;text-transform:uppercase;letter-spacing:.6px}
.amp-eq-guide:before,.amp-eq-guide:after{content:'';height:8px;border-top:1px solid #494332;border-radius:4px 0 0 0;align-self:end}
.amp-eq-guide:before{border-left:1px solid #494332}.amp-eq-guide:after{border-right:1px solid #494332;border-radius:0 4px 0 0}
.amp-hero[data-amp="7"] .amp-lower-guide{display:block;left:4%;right:4%;bottom:12%;height:8px;border:1px solid #504a37;border-top:0}
@media(max-width:680px){.amp-hero[data-amp="8"] .amp-eq-guide,.amp-hero[data-amp="7"] .amp-lower-guide{display:none}}

.amp-hero[data-amp="10"] .knob{width:68%;height:68%;border:3px solid #171c1f;background:linear-gradient(110deg,#dce9ed,#a7bbc3);box-shadow:0 3px 4px #0008,inset 0 1px 2px #fff}
.amp-hero[data-amp="10"] .knob-cap{inset:7%;border:1px solid #9caeb5;background:linear-gradient(115deg,#e5eef0,#c8d9de 48%,#adbec5);box-shadow:inset 0 1px 2px #fff9}
.amp-hero[data-amp="10"] .knob:after{top:3%;height:38%;width:3px;background:#1c252a;transform-origin:50% 124%}
/* Soldano: center the selectors in the tube grille above the silver faceplate. */
@media(min-width:681px){.amp-hero[data-amp="10"] .hero-selectors{top:24.25%;transform:translate(-50%,-50%)}}

.amp-hero[data-amp="14"]{--amp-art:url('assets/theme/tweed-1x12/hero.png')}
.amp-hero[data-amp="15"]{--amp-art:url('assets/theme/tweed-4x10/hero.png')}
.amp-hero:is([data-amp="14"],[data-amp="15"]) .hero-selectors label{color:#29251d;text-shadow:0 1px 1px #e8d7b288}
.amp-hero:is([data-amp="14"],[data-amp="15"]) .knob{border-color:#161715;background:radial-gradient(circle at 35% 28%,#333735,#161817 60%,#080a09);box-shadow:0 3px 5px #0008,inset 0 1px 2px #8c918b66}
.amp-hero:is([data-amp="14"],[data-amp="15"]) .knob-cap{inset:6% 32% 7%;border-color:#494e49;border-radius:38% 38% 16% 16%;background:linear-gradient(90deg,#080b09,#545b53 37%,#242a24 55%,#0a0d0b);transform-origin:50% 50.6%}
.amp-hero:is([data-amp="14"],[data-amp="15"]) .knob:after{background:#c6c9bb;top:7%;height:35%;transform-origin:50% 123%}

/* Recto: polished chrome domes against a charcoal control fascia. */
.amp-hero[data-amp="9"]{--amp-art:url('assets/theme/recto/hero.png')}
.amp-hero[data-amp="9"] .hero-selectors label{color:#25292b;text-shadow:0 1px 1px #fff9}
.amp-hero[data-amp="9"] .control,.amp-hero[data-amp="9"] .dial-range{color:#e0dfd7}
.amp-hero[data-amp="9"] .dial:before{background:repeating-conic-gradient(from 224.4deg,#b4b6b4 0deg 1.2deg,transparent 1.2deg 27deg)}
.amp-hero[data-amp="9"] .knob{width:70%;height:70%;border:2px solid #343839;background:linear-gradient(175deg,#eeeeeb 0%,#595e60 12%,#f9fbfb 24%,#181d20 40%,#111619 48%,#b8c1c5 52%,#fcfdfb 62%,#eceeeb 83%,#929b9f 100%);box-shadow:0 4px 6px #000c,inset 0 1px 2px #fff}
.amp-hero[data-amp="9"] .knob-cap{inset:6%;border:1px solid #e1e5e588;background:radial-gradient(ellipse at 37% 16%,#fff9,transparent 40%),linear-gradient(175deg,#b4babe 0%,#fbfdfd 18%,#384044 35%,#080d10 47%,#a8b2b8 51%,#fff 58%,#e8ebe8 87%,#b7bfc1);box-shadow:inset 0 0 3px #fff8}
.amp-hero[data-amp="9"] .knob:after{top:4%;height:32%;width:3px;background:#252a2c;transform-origin:50% 144%;box-shadow:0 0 1px #fff}
/* Rectifier: center the selectors in the silver panel (12–37% of the artwork). */
@media(min-width:681px){.amp-hero[data-amp="9"] .hero-selectors{top:24.5%;transform:translate(-50%,-50%)}}

.effects-link{font-size:11px;color:#c3cbd7;padding:8px 10px;border:1px solid #3b404c;border-radius:7px;text-decoration:none}.effects-link:hover{background:#343b49}

/* Program libraries stay together in the header; hardware appears on connection. */
header{flex-wrap:wrap;gap:16px 20px}
header .preset-controls{min-width:230px;max-width:340px}
.hardware-controls[hidden]{display:none}
.preset-actions{align-items:stretch}
.preset-actions select{flex:1 1 0;width:0;height:36px}
.preset-actions button{flex:0 0 80px;height:36px;padding:8px 10px;white-space:nowrap}
.settings-tools{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #353b47}
.settings-tool-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:1150px){header .preset-controls{max-width:none}.hardware-controls{order:3}header nav{order:4}}
@media(max-width:620px){header .preset-controls{min-width:0;max-width:none;flex-basis:100%;order:3}header .hardware-controls{order:4}header nav{order:5}}

header button,header .effects-link{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none}

dialog input[type=text]{width:100%;padding:9px 10px;border:1px solid #414957;border-radius:6px;background:#12161d;color:#e6e8ed;text-transform:uppercase}dialog .dialog-actions{gap:8px}

/* Reserve space for a consistently inset arrow across native select controls. */
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23c3cbd7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
@media(forced-colors:active){select:not([multiple]){appearance:auto;-webkit-appearance:auto;background-image:none}}

.title .header-status{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.3;color:#a7afbd}.header-status:empty{display:none}

header{align-items:flex-end}header nav{align-items:flex-end}header button,header .effects-link{height:36px}header .effects-link{display:inline-flex;align-items:center}

.settings-tools .checkbox-label{flex-direction:row;align-items:center;gap:10px}

/* Fit each selector to its selected name, including room for the arrow. */
.hero-selectors{width:max-content;max-width:90%}
.hero-selectors label{flex:0 1 auto;font-weight:700}
.hero-selectors select{font-weight:400}
@media(max-width:680px){.hero-selectors{flex-direction:column;align-items:center}.hero-selectors label{max-width:100%}}

/* AC15: center the selectors above the faceplate, which starts at 35.5% of the artwork. */
@media(min-width:681px){.amp-hero[data-amp="0"] .hero-selectors{top:17.75%;transform:translate(-50%,-50%)}}

/* AC30 Top Boost: center the selectors above its faceplate. */
@media(min-width:681px){.amp-hero[data-amp="3"] .hero-selectors{top:15.5%;transform:translate(-50%,-50%)}}

/* JCM900 and JCM2000 share the same grille and selector position. */
@media(min-width:681px){.amp-hero:is([data-amp="7"],[data-amp="8"]) .hero-selectors{top:20.75%;transform:translate(-50%,-50%)}}

/* Match each artwork's upper panel rather than sharing a Marshall-wide offset. */
@media(min-width:681px){
 .amp-hero[data-amp="5"] .hero-selectors{top:17.25%;transform:translate(-50%,-50%)}
 .amp-hero[data-amp="6"] .hero-selectors{top:19%;transform:translate(-50%,-50%)}
}

/* Center the Dumble and tweed selectors above their individual faceplates. */
@media(min-width:681px){
 .amp-hero[data-amp="11"] .hero-selectors{top:14.5%;transform:translate(-50%,-50%)}
 .amp-hero[data-amp="12"] .hero-selectors{top:18.25%;transform:translate(-50%,-50%)}
 .amp-hero:is([data-amp="14"],[data-amp="15"]) .hero-selectors{top:16%;transform:translate(-50%,-50%)}
}

.metal-module[data-bypassed="true"]{opacity:.5}

/* Standard AC30: center selectors above the red faceplate. */
@media(min-width:681px){.amp-hero[data-amp="2"] .hero-selectors{top:16%;transform:translate(-50%,-50%)}}

/* AC15 photographic cream Bakelite knob; its pointer rotates with the live value. */
.amp-hero[data-amp="0"] .knob{width:82%;height:auto;aspect-ratio:1;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #000a)}
.amp-hero[data-amp="0"] .knob-cap{inset:0;border:0;border-radius:0;background:url('assets/theme/ac15/knob.png') center/contain no-repeat;clip-path:none;box-shadow:none;transform:translate(.081%,-1.341%) rotate(var(--angle));transform-origin:49.919% 51.341%}
.amp-hero[data-amp="0"] .knob:after{display:none}
/* Knob editing keeps its normal appearance. */
.knob:focus,.knob:focus-visible{outline:none}

/* Shared translucent dropdown background. */
select,.preset-actions select,.hero-selectors select,.module-heading select,dialog select{background-color:#ffffff12}