/* A full visual system per theme: materials, type, displays, controls and layout details. */
html[data-theme]{--theme-radius:14px;--heading-font:Arial,sans-serif;--theme-shadow:color-mix(in srgb,var(--orange) 17%,transparent);--theme-wash:color-mix(in srgb,var(--orange) 12%,transparent)}
html[data-theme] body{background:var(--bg);color:var(--text)}
html[data-theme] button{background:var(--panel2);color:var(--text);border-color:var(--line);border-radius:calc(var(--theme-radius)*.5)}
html[data-theme] button:hover{background:color-mix(in srgb,var(--panel2) 75%,var(--orange));border-color:var(--orange)}
html[data-theme] button.primary,html[data-theme] .candy-button{background:linear-gradient(color-mix(in srgb,var(--orange) 80%,white),var(--orange));color:var(--accent-ink);border-color:var(--orange);box-shadow:0 3px 12px var(--theme-shadow)}
html[data-theme] button.primary:hover,html[data-theme] .candy-button:hover{background:var(--orange);color:var(--accent-ink)}
html[data-theme] button.active,html[data-theme] .tabs .active{background:var(--panel2);color:var(--orange);border-color:var(--orange)}
html[data-theme] button.ghost{background:color-mix(in srgb,var(--panel) 60%,transparent)}
html[data-theme] button:focus-visible,html[data-theme] a:focus-visible,html[data-theme] input:focus-visible,html[data-theme] select:focus-visible{outline-color:var(--orange)}
html[data-theme] input[type=number],html[data-theme] input[type=text],html[data-theme] select{background:var(--bg);color:var(--text);border-color:var(--line);border-radius:calc(var(--theme-radius)*.4)}
html[data-theme] .orange{color:var(--orange)}
html[data-theme] h1,html[data-theme] h2,html[data-theme] h3,html[data-theme] .brand,html[data-theme] .pad strong{font-family:var(--heading-font)}
html[data-theme] .brand{color:var(--text)}
html[data-theme] .badge{color:var(--muted);background:var(--panel);border-color:var(--line)}
html[data-theme] .led{background:var(--orange);box-shadow:0 0 10px var(--theme-shadow)}
html[data-theme] .landing{background:radial-gradient(ellipse at 80% 20%,var(--theme-wash),transparent 60%),var(--bg)}
html[data-theme] .landnav,html[data-theme] .topbar{background:linear-gradient(110deg,var(--panel),var(--panel2));border-color:var(--line)}
html[data-theme] .topbar .projectname{color:var(--muted)}
html[data-theme] .hero h1 span{color:var(--orange);text-shadow:2px 3px var(--theme-shadow)}
html[data-theme] .hero p,html[data-theme] .specs span{color:var(--muted)}
html[data-theme] .specs strong{color:var(--orange)}
html[data-theme] .hero-rack{background:linear-gradient(135deg,var(--panel2),var(--panel));border-color:var(--line);border-radius:var(--theme-radius);box-shadow:16px 25px 60px var(--theme-shadow)}
html[data-theme] .hero-rack:before,html[data-theme] .hero-rack:after{border-color:var(--line);background:linear-gradient(90deg,var(--panel2),var(--text),var(--panel2))}
html[data-theme] .miniunit,html[data-theme] .device-panel{background:linear-gradient(135deg,var(--panel),var(--panel2));border-color:var(--line);border-radius:var(--theme-radius);box-shadow:inset 0 1px color-mix(in srgb,var(--text) 15%,transparent),0 6px 18px var(--theme-shadow)}
html[data-theme] .miniunit .eyebrow,html[data-theme] .control .label,html[data-theme] .moduleitem .num{color:var(--muted)}
html[data-theme] .miniunit:before,html[data-theme] .miniunit:after,html[data-theme] .device-panel:before,html[data-theme] .device-panel:after{color:var(--muted)}
html[data-theme] .minidisplay,html[data-theme] .screen{background:linear-gradient(var(--screen),color-mix(in srgb,var(--screen) 85%,var(--orange)));border-color:var(--line);color:var(--green);border-radius:calc(var(--theme-radius)*.4);box-shadow:inset 0 0 25px #0004}
html[data-theme] .screen small,html[data-theme] .waveart{color:var(--green)}
html[data-theme] .fakeknob,html[data-theme] .knob{background:conic-gradient(var(--panel2),var(--panel),var(--panel2));border-color:var(--line);box-shadow:0 4px 5px #0003,inset 1px 1px color-mix(in srgb,var(--text) 25%,transparent);border-radius:50%}
html[data-theme] .fakeknob:after,html[data-theme] .knob:after{background:var(--orange);box-shadow:0 0 3px var(--theme-shadow)}
html[data-theme] .ministeps i{background:var(--panel2);border-color:var(--line);border-radius:calc(var(--theme-radius)*.2)}
html[data-theme] .ministeps i.on{background:var(--orange);border-color:var(--orange)}
html[data-theme] .hazard{background:repeating-linear-gradient(135deg,var(--orange) 0 8px,var(--panel) 8px 16px)}
html[data-theme] .striplabel,html[data-theme] .landfoot{background:var(--panel);color:var(--muted);border-color:var(--line)}
html[data-theme] .devicecard{background:linear-gradient(145deg,var(--panel),var(--panel2));border-color:var(--line);border-radius:var(--theme-radius);box-shadow:0 5px 15px var(--theme-shadow)}
html[data-theme] .devicecard:hover{border-color:var(--orange);box-shadow:0 8px 24px var(--theme-shadow)}
html[data-theme] .devicecard:before{color:var(--orange)}
html[data-theme] .sidebar{background:linear-gradient(var(--panel),var(--bg));border-color:var(--line)}
html[data-theme] .navbutton{background:transparent;color:var(--text)}
html[data-theme] .navbutton.active{background:var(--panel2);color:var(--orange);box-shadow:inset 3px 0 var(--orange)}
html[data-theme] .transport{background:var(--panel);border-color:var(--line)}
html[data-theme] .clock{background:var(--screen);color:var(--green);border-color:var(--line);border-radius:calc(var(--theme-radius)*.5)}
html[data-theme] .main{background:radial-gradient(ellipse at top right,var(--theme-wash),transparent 65%),var(--bg)}
html[data-theme] .devicehead,html[data-theme] .unitfooter{border-color:var(--line)}
html[data-theme] .control .val{color:var(--orange);background:transparent;border:0}
html[data-theme] .moduleitem{background:var(--panel);border-color:var(--line);border-radius:calc(var(--theme-radius)*.6)}
html[data-theme] .moduleitem.active{background:var(--panel2);color:var(--orange);border-color:var(--orange)}
html[data-theme] .panel{background:var(--panel);border-color:var(--line);border-radius:var(--theme-radius)}
html[data-theme] .seqname{background:transparent;color:var(--muted);border:0}
html[data-theme] .seqname.active{color:var(--orange)}
html[data-theme] .step{background:var(--panel2);border-color:var(--line);color:var(--text);border-radius:calc(var(--theme-radius)*.2)}
html[data-theme] .step:nth-child(4n+2){border-left-color:var(--muted)}
html[data-theme] .step.on{background:var(--orange);color:var(--accent-ink);border-color:var(--orange);box-shadow:inset 0 1px #ffffff44}
html[data-theme] .step.now{outline-color:var(--text)}
html[data-theme] .step.on.now{background:color-mix(in srgb,var(--orange) 70%,var(--text))}
html[data-theme] .skullknob svg{fill:var(--panel2);stroke:var(--text)}
html[data-theme] .skullknob .eye{fill:var(--orange)}
html[data-theme] .channel{background:linear-gradient(var(--panel),var(--panel2));border-color:var(--line);border-radius:var(--theme-radius)}
html[data-theme] .channel h3,html[data-theme] .channel output{color:var(--orange)}
html[data-theme] .channel .chno{color:var(--muted)}
html[data-theme] .meter{background:var(--screen);border-color:var(--line);border-radius:calc(var(--theme-radius)*.3)}
html[data-theme] .meter i{background:repeating-linear-gradient(to top,var(--orange) 0 4px,transparent 4px 6px)}
html[data-theme] .pad{background:linear-gradient(140deg,var(--panel),var(--panel2));border-color:var(--line);border-radius:var(--theme-radius)}
html[data-theme] .pad.active{box-shadow:inset 0 -4px var(--orange)}
html[data-theme] .clip{background:var(--panel2);color:var(--text);border-color:var(--orange);border-radius:calc(var(--theme-radius)*.4)}
html[data-theme] .clip.empty{background:var(--bg);color:var(--muted);border-color:var(--line)}
html[data-theme] .automations{background:var(--screen);border-radius:calc(var(--theme-radius)*.5)}
html[data-theme] .autostep small{color:var(--green)}
html[data-theme] .note-keys button{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme] .note-keys .black{background:var(--screen);color:var(--green)}
html[data-theme] .note-keys button:active{background:var(--orange);color:var(--accent-ink)}
html[data-theme] .help p,html[data-theme] .help li{color:var(--muted)}
html[data-theme] .help h3{color:var(--orange)}
html[data-theme] .notice{background:var(--panel2);border-color:var(--line);color:var(--text)}
html[data-theme] .sampler-drop{background:var(--panel);border-color:var(--orange);color:var(--muted);border-radius:var(--theme-radius)}
html[data-theme] dialog{background:linear-gradient(145deg,var(--panel),var(--panel2));color:var(--text);border-color:var(--line);border-radius:var(--theme-radius);box-shadow:0 20px 100px #0008}
html[data-theme] dialog::backdrop{background:#0009}
html[data-theme] #toast{background:var(--orange);color:var(--accent-ink);border-color:var(--line);border-radius:var(--theme-radius);box-shadow:0 8px 30px #0005}
html[data-theme] .routing .panel{border-top-color:var(--orange)}
html[data-theme] .candy-randomizer{background:linear-gradient(110deg,var(--panel),var(--panel2));border-color:var(--line);border-radius:var(--theme-radius);box-shadow:inset 0 1px #ffffff22,0 3px 12px var(--theme-shadow)}
html[data-theme] .candy-caption,html[data-theme] .candy-caption>span{color:var(--orange)}
html[data-theme] .candy-randomizer small{color:var(--muted)}
html[data-theme] .candy-button{border-radius:var(--theme-radius)}
.master-random{display:flex;align-items:center;gap:10px;flex-shrink:0}
html[data-theme] .master-random-button{display:flex;align-items:center;gap:9px;font:bold 14px var(--sans);padding:10px 18px;border:2px solid var(--orange);background:var(--orange);color:var(--accent-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--orange) 60%,black),0 5px 16px var(--theme-shadow)}
html[data-theme] .master-random-button:hover{background:color-mix(in srgb,var(--orange) 85%,white);color:var(--accent-ink)}
.master-random-button span{font-size:22px;line-height:1}.look-label{max-width:100px;font:10px/1.4 var(--mono);color:var(--muted);text-transform:uppercase}.topbar{height:auto;min-height:76px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.landnav{gap:20px;flex-wrap:wrap}
/* Each aesthetic adds its own material and silhouette, not just a hue shift. */
html[data-theme='goth'] .main,html[data-theme='goth'] .landing{background:repeating-linear-gradient(90deg,#100c13 0 35px,#1a101c 35px 36px)}
html[data-theme='goth'] .device-panel,html[data-theme='goth'] .devicecard{border:1px solid #70384f;outline:1px solid #311a2c;outline-offset:4px;background:radial-gradient(ellipse at top,#402035,#19111d)}
html[data-theme='goth'] .hero h1{font-style:italic;letter-spacing:-.05em}html[data-theme='goth'] .devicecard:before{content:'†'}
html[data-theme='newwave'] .main,html[data-theme='newwave'] .landing{background:linear-gradient(#18113acc,#18113acc),repeating-linear-gradient(0deg,transparent 0 31px,#60ffe755 31px 32px),repeating-linear-gradient(90deg,#18113a 0 31px,#60ffe755 31px 32px)}
html[data-theme='newwave'] .device-panel,html[data-theme='newwave'] .devicecard{box-shadow:6px 6px 0 #54ddd766;border-left:3px solid #6ffee8}
html[data-theme='newwave'] .hero h1{font-style:italic;text-shadow:3px 3px #12c0c2}html[data-theme='newwave'] .devicecard:before{content:'◇'}
html[data-theme='punk'] .hero h1,html[data-theme='punk'] .pagehead h2{background:#141712;color:#e3ff42;display:inline-block;padding:5px 12px;transform:rotate(-1deg)}
html[data-theme='punk'] .device-panel,html[data-theme='punk'] .devicecard{border:2px solid #151711;box-shadow:5px 5px 0 #151711}
html[data-theme='punk'] .devicehead h2{background:#151711;color:#f9ffe4;padding:3px 10px;display:inline-block;transform:rotate(1deg)}
html[data-theme='punk'] .devicecard:before{content:'✕';background:#ed184b;color:white;padding:0 5px;transform:rotate(12deg)}
html[data-theme='rock'] .main,html[data-theme='rock'] .landing{background:repeating-linear-gradient(0deg,#1b1512 0 3px,#151210 3px 6px)}
html[data-theme='rock'] .device-panel{background:linear-gradient(100deg,#39241d,#211a17,#39241d);border:2px solid #997147;box-shadow:inset 0 0 0 3px #130e0b,0 8px 18px #0005}
html[data-theme='rock'] .devicehead h2{letter-spacing:.08em}html[data-theme='rock'] .devicecard:before{content:'★'}
html[data-theme='classical'] .hero-rack{transform:none;border:5px double #b09a62}html[data-theme='classical'] .device-panel,html[data-theme='classical'] .devicecard{border:4px double #b9a06b;background:linear-gradient(130deg,#fffdf3,#e9e0c9)}
html[data-theme='classical'] .hero h1{font-weight:normal;line-height:1.04;font-variant:small-caps;letter-spacing:-.06em}
html[data-theme='classical'] .devicehead h2{font-variant:small-caps;letter-spacing:.04em}html[data-theme='classical'] .devicecard:before{content:'♜'}
html[data-theme='space'] .main,html[data-theme='space'] .landing{background:radial-gradient(circle at 25% 15%,#798aff66 0 1px,transparent 2px) 0 0/89px 113px,radial-gradient(circle,#ffffff55 0 1px,transparent 1.5px) 20px 15px/137px 179px,radial-gradient(ellipse at 80% 20%,#16496277,transparent 60%),#050b1c}
html[data-theme='space'] .device-panel,html[data-theme='space'] .devicecard{box-shadow:inset 0 0 25px #76dbff12,0 0 22px #55bce314;border-color:#397691}
html[data-theme='space'] .hero-rack{transform:rotate(2deg);border-radius:32px}html[data-theme='space'] .devicecard:before{content:'✦'}
html[data-theme='arcade'] .device-panel,html[data-theme='arcade'] .panel,html[data-theme='arcade'] .devicecard{border:3px solid #8252b0;box-shadow:5px 5px 0 #09020e}
html[data-theme='arcade'] .screen:after{background:repeating-linear-gradient(transparent 0 2px,#0005 2px 4px)}html[data-theme='arcade'] .hero h1{text-shadow:4px 4px #eb26ff}html[data-theme='arcade'] .devicecard:before{content:'▣'}
html[data-theme='ocean'] .main,html[data-theme='ocean'] .landing{background:radial-gradient(ellipse at 15% 25%,#c0eae655,transparent 55%),repeating-radial-gradient(ellipse at 50% -40%,transparent 0 60px,#82cfcb22 61px 63px),#e6faf7}
html[data-theme='ocean'] .hero-rack{transform:rotate(1deg)}html[data-theme='ocean'] .devicecard:before{content:'≈';font-size:30px}
html[data-theme='sunset'] .main,html[data-theme='sunset'] .landing{background:radial-gradient(circle at 90% 10%,#ffbe64aa 0,transparent 40%),linear-gradient(155deg,#ffeec8,#ffd2ba)}
html[data-theme='sunset'] .hero h1{letter-spacing:-.07em}html[data-theme='sunset'] .devicecard:before{content:'☀'}
html[data-theme='industrial'] .device-panel,html[data-theme='industrial'] .devicecard{background:linear-gradient(120deg,#2b3026,#191e17);box-shadow:0 4px 15px #0005}
html[data-theme='industrial'] .devicecard:before{content:'⌁'}
html[data-theme='chrome'] .device-panel,html[data-theme='chrome'] .hero-rack,html[data-theme='chrome'] .devicecard{background:linear-gradient(125deg,#eef2f6 0%,#bac4cf 35%,#f9fcff 48%,#c8d1dc 75%,#e5eaf0);box-shadow:inset 0 1px #fff,0 7px 20px #47586b24}
html[data-theme='chrome'] .knob{background:conic-gradient(#fff,#8e9aaa,#fff,#aab5c0,#fff)}html[data-theme='chrome'] .devicecard:before{content:'◈'}
@media(max-width:1100px){.topbar .projectname{display:none}.look-label{max-width:85px}.topbar{gap:12px}}
@media(max-width:750px){.topbar{padding:10px 14px;gap:12px}.topbar>.row{flex:1}.topbar .tools{width:100%;justify-content:flex-end;border-top:1px solid var(--line);padding-top:9px}.master-random{gap:7px}.look-label{max-width:68px;font-size:8px}.master-random-button{padding:8px 12px!important}.landnav nav{width:100%;justify-content:flex-end}.hero h1{font-size:clamp(43px,10vw,64px)}html[data-theme='punk'] .hero h1{padding:7px}.hero h1 .hero-kiss{top:-30px}}