:root{--ink:#1a1814;--cream:#f3ead2;--paper:#fff}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,serif}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.hero img{max-width:94vw;max-height:68vh;height:auto}.hero .brand{width:auto;height:clamp(120px,22vh,312px)}
.amps{max-width:1240px;margin:0 auto;padding:40px 20px 60px}
.amps h2{text-align:center;font-weight:normal;letter-spacing:.35em;text-transform:uppercase;font-size:18px;margin:0}
.sub{text-align:center;font-style:italic;color:#6b6352;margin:8px 0 32px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
footer{text-align:center;letter-spacing:.3em;font-size:11px;padding:30px;border-top:1px solid var(--ink);margin:0 20px}
/* plugin window */
.plug{border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#2a2824;box-shadow:4px 4px 0 var(--ink);user-select:none}
.bar{display:flex;align-items:center;gap:6px;background:#e9e2cc;border-bottom:1.5px solid var(--ink);padding:5px 7px;font:11px/1 ui-monospace,Menlo,monospace}
.bar .nm{font-weight:bold;white-space:nowrap}
.bar select{font:inherit;border:1px solid var(--ink);background:var(--paper);padding:2px;min-width:0;flex:1;max-width:120px}
.bar .ro{flex:1;text-align:right;color:#57503f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .byp{font:inherit;border:1px solid var(--ink);background:var(--paper);cursor:pointer;padding:2px 5px}
.bar .byp.on{background:var(--ink);color:#f3c46a}
.stage{padding:14px 12px 16px;background:#3a3631}
.plug.bypassed .head{filter:grayscale(.8) brightness(.7)}
/* amp head */
.head{position:relative;border-radius:8px;padding:12px 12px 10px;background:var(--tol);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 6px 10px rgba(0,0,0,.5)}
.handle{position:absolute;top:-8px;left:50%;width:70px;height:10px;margin-left:-35px;background:#181614;border-radius:6px 6px 2px 2px}
.grille{height:46px;border-radius:4px;margin-bottom:8px;background:var(--grille);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.grille .vent{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.55) 6px 9px)}
.grille .glow{position:absolute;inset:0;opacity:0;transition:opacity .8s;background:radial-gradient(ellipse 14% 70% at 25% 110%,#ff8a2a,transparent),radial-gradient(ellipse 14% 70% at 50% 110%,#ff8a2a,transparent),radial-gradient(ellipse 14% 70% at 75% 110%,#ff8a2a,transparent)}
.on .grille .glow{opacity:.35}.on.live .grille .glow{opacity:.75}
.logo{position:absolute;right:18px;top:16px;font:italic bold 13px Georgia,serif;color:var(--logo);background:var(--tol);padding:2px 8px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.6);z-index:2}
.panel{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 6px;border-radius:4px;background:var(--panel);color:var(--ptext);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.35)}
.knobs{display:flex;flex:1;justify-content:space-around;gap:4px}
.k{display:flex;flex-direction:column;align-items:center;gap:3px;font:8px/1 Helvetica,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.k svg{width:32px;height:32px;cursor:ns-resize;touch-action:none}
.sw{display:flex;flex-direction:column;align-items:center;gap:3px;font:7px/1 Helvetica,Arial,sans-serif;text-transform:uppercase}
.tog{width:12px;height:22px;border-radius:3px;background:#111;position:relative;cursor:pointer;border:0;padding:0}
.tog::after{content:"";position:absolute;left:3px;width:6px;height:11px;border-radius:3px;background:linear-gradient(#eee,#888);top:9px;transition:top .12s}
.tog.up::after{top:2px}
.jewel{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7a3a1a,#2a1206);box-shadow:inset 0 0 0 2px #888,0 0 0 1px #000;transition:.4s}
.on .jewel{background:radial-gradient(circle at 35% 35%,#ffcf7a,#c26a12);box-shadow:inset 0 0 0 2px #aaa,0 0 6px 1px rgba(255,160,40,.5)}
.on.live .jewel{background:radial-gradient(circle at 35% 35%,#fff3c8,#ff9a1f);box-shadow:inset 0 0 0 2px #ccc,0 0 14px 5px rgba(255,170,50,.85)}
.cap{text-align:center;color:#d8cfb6;font:italic 12px Georgia,serif;margin-top:10px}