/* AUTO-GENERATED by tools/build_looks.py — 원본: HTH OFFLINE/maxservertest2/index.html (관객 컨트롤러). 손으로 고치지 말 것 (PORTING.md §62) */
/* 룩 30 개: riso rams serge phosphor op1 press plan cockpit baekja swiss cassette brut bigtype product netart swissgrid swissbig swissair risoposter risodot rothko amber teletext catalog field risozine albers kelly tui blocks */

@keyframes tbBlink { 50% { opacity: 0; } }

/* ── 공통 (관객 앱 기본 규칙: .tb-* 스위치 · .fader-track · .knob) ── */
#volFx .fader-track { position: relative; width: 14px; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #000 0%, #0a0a0a 20%, #111 50%, #0a0a0a 80%, #000 100%); box-shadow: inset 1px 0 2px rgba(0,0,0,0.9), inset -1px 0 2px rgba(0,0,0,0.9); }
#volFx .fader-track::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); background: rgba(0,0,0,0.7); border-radius: 2px; }
#volFx .knob { position: absolute; left: 50%; width: 68px; height: 38px; transform: translate(-50%, -50%); border-radius: 6px; z-index: 6; top: 100%; touch-action: none; background: linear-gradient(180deg, #4a4d52, #2c2e32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 0 #141517, 0 6px 10px rgba(0,0,0,0.6); transition: box-shadow .12s, background .12s, transform .12s; }
#volFx .knob::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; transform: translateY(-50%); background: rgba(255,255,255,0.55); border-radius: 1px; transition: background .12s, height .12s; }
#volFx .knob.large { width: 92px; height: 44px; }
#volFx .knob.grabbed { transition: none; }
#volFx .knob.grabbed::before { transition: none; }
#volFx .knob.grabbed::after { transition: none; }
#volFx .knob.grabbed { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 0 #141517, 0 3px 6px rgba(0,0,0,0.6); transform: translate(-50%, calc(-50% + 2px)); }
#volFx .knob.grabbed::before { background: var(--accent); }
#volFx .fader-track::after { content: ""; display: none; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 0%); pointer-events: none; }
.hx-arc.pressed .tb-shape { transition: none !important; }
.hx-arc.pressed .tb-shape * { transition: none !important; }
.hx-arc .tb-label { font: 700 11px ui-monospace, monospace; letter-spacing: 3px; color: var(--text-sub); }
.hx-arc .tb-default { width: 132px; height: 132px; border-radius: 50%; background: #3a3a3e; box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 -5px 0 rgba(0,0,0,.15); transition: transform .12s, box-shadow .12s; }
.hx-arc .tb-default.beem { width: 92px; height: 92px; background: #2f6fd0; }
.hx-arc.pressed .tb-default { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.5), inset 0 -2px 0 rgba(0,0,0,.15); }
.hx-arc .tb-riso { position: relative; width: 132px; height: 132px; }
.hx-arc .tb-riso .ink { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply; transition: transform .12s; }
.hx-arc .tb-riso .key { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply; transition: transform .12s; }
.hx-arc .tb-riso .ink { background: #ff2d78; transform: translate(-2px, 2px); }
.hx-arc .tb-riso .key { box-shadow: inset 0 0 0 3px #16161a; transform: translate(2px, -2px); }
.hx-arc .tb-riso::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: .28; mix-blend-mode: multiply; background-image: radial-gradient(rgba(22,22,26,.6) .6px, transparent .7px); background-size: 3px 3px; }
.hx-arc .tb-riso.beem { width: 100px; height: 100px; }
.hx-arc.pressed .tb-riso .key { transform: none; }
.hx-arc.pressed .tb-riso .ink { transform: scale(1.03); background-image: radial-gradient(#16161a 1.1px, transparent 1.3px); background-size: 5px 5px; }
.hx-arc .tb-rams { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #3d3d3d 0%, #2b2b2b 52%, #1f1f1f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 3px rgba(0,0,0,.35); transition: transform .12s, box-shadow .12s, background .12s; }
.hx-arc .tb-rams.beem { width: 76px; height: 76px; background: radial-gradient(circle at 50% 36%, #f0803a 0%, #e2621b 52%, #c4521a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 3px rgba(0,0,0,.28); }
.hx-arc.pressed .tb-rams { transform: translateY(1px); background: #262626; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 1px rgba(0,0,0,.35); }
.hx-arc.pressed .tb-rams.beem { background: #d05a19; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.28); }
.hx-arc .tb-serge { position: relative; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #9fa09b 0 56%, #6f706b 57% 62%, #b9bab5 63% 100%); box-shadow: 0 1px 2px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.hx-arc .tb-serge .cap { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #2c2d30, #16171a); box-shadow: 0 3px 0 #0b0b0d, 0 4px 6px rgba(0,0,0,.5); transition: transform .12s, box-shadow .12s; }
.hx-arc .tb-serge.beem { width: 64px; height: 64px; }
.hx-arc .tb-serge.beem .cap { width: 30px; height: 30px; }
.hx-arc.pressed .tb-serge .cap { transform: translateY(3px); box-shadow: 0 0 0 #0b0b0d, 0 1px 2px rgba(0,0,0,.5); }
.hx-arc .tb-phos { width: 150px; height: 150px; border-radius: 50%; box-shadow: inset 0 0 0 1px #1d6b45; display: flex; align-items: center; justify-content: center; gap: 6px; color: #7dffb0; font: 500 16px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-shadow: 0 0 8px rgba(125,255,176,.55); transition: background .12s; }
.hx-arc .tb-phos.beem { width: 104px; height: 104px; font-size: 13px; }
.hx-arc .tb-phos .cur { display: inline-block; width: .6em; height: 1em; background: #7dffb0; animation: tbBlink 1s steps(1) infinite; }
.hx-arc.pressed .tb-phos { background: #7dffb0; color: #04060a; text-shadow: none; box-shadow: 0 0 14px rgba(125,255,176,.5); }
.hx-arc.pressed .tb-phos .cur { animation: none; opacity: 1; background: #04060a; }
.hx-arc .tb-op1 { width: 150px; height: 150px; border-radius: 24px; background: #e9e6df; box-shadow: inset 0 2px 4px rgba(0,0,0,.12), inset 0 -1px 0 rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.hx-arc .tb-op1 .cap { width: 118px; height: 118px; border-radius: 50%; background: #e8442e; box-shadow: 0 4px 0 rgba(0,0,0,.22), inset 0 -5px 0 rgba(0,0,0,.08); position: relative; transition: transform .12s, box-shadow .12s; }
.hx-arc .tb-op1 .cap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); transform: translate(-50%, -50%); }
.hx-arc .tb-op1.beem { width: 116px; height: 116px; border-radius: 20px; }
.hx-arc .tb-op1.beem .cap { width: 86px; height: 86px; background: #2f6fd0; }
.hx-arc.pressed .tb-op1 .cap { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.22), inset 0 -2px 0 rgba(0,0,0,.08); }

/* ── riso ── */
body[data-look="riso"] { --bg:#eae6dc; --text-main:#16161a; --text-sub:#16161a; --accent:#ff2d78; --sv-line:rgba(0,0,0,.18); --oled-amber:#ff2d78; --screw-metal:#16161a; --screw-dark:#16161a; --knob-hi:#ff2d78; --knob-mid:#ff2d78; --knob-lo:#ff2d78; --g-scale:1.9; --f-ui:"Futura","Avenir Next",system-ui,sans-serif; --hx-r:0; }
body[data-look="riso"] #controls, body[data-look="riso"] #snapbar { background:#eae6dc; border-radius:0; box-shadow:inset 0 0 0 2.5px #16161a, 0 0 0 6px #eae6dc; }
body[data-look="riso"] #volFx .fader-track { width:3px; border-radius:0; background:#16161a; box-shadow:none; }
body[data-look="riso"] #volFx .fader-track::before { display:none; }
body[data-look="riso"] #volFx .fader-track { overflow:visible; }
body[data-look="riso"] #volFx .fader-track::after { display:block; left:-3px; width:9px; background:#ff2d78; mix-blend-mode:multiply; transform:translate(-2px,2px); }
body[data-look="riso"] #volFx .knob { width:58px; height:18px; border-radius:0; background:#ff2d78; mix-blend-mode:multiply; box-shadow:none; transform:translate(calc(-50% - 2px), calc(-50% + 2px)); }
body[data-look="riso"] #volFx .knob::before { background:#16161a; height:2px; left:8px; right:8px; }
body[data-look="riso"] #volFx .knob::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 2px #16161a; transform:translate(4px,-4px); transition:transform .12s; }
body[data-look="riso"] #volFx .knob.grabbed { transform:translate(-50%,-50%); background-image:radial-gradient(#16161a 1px, transparent 1.2px); background-size:4px 4px; }
body[data-look="riso"] #volFx .knob.grabbed::after { transform:none; }
body[data-look="riso"] .hx-arc .tb-default { width:132px; height:132px; background:#ff2d78; mix-blend-mode:multiply; box-shadow:inset 0 0 0 3px #16161a; }

/* ── rams ── */
body[data-look="rams"] { --bg:#c9c7c0; --text-main:#2b2b2b; --text-sub:#7c7a74; --accent:#e2621b; --sv-line:rgba(0,0,0,.18); --oled-amber:#e2621b; --screw-metal:#b6b4ac; --screw-dark:#8d8b84; --knob-hi:#3a3a3a; --knob-mid:#2b2b2b; --knob-lo:#1e1e1e; --g-scale:2.4; --f-ui:system-ui,"Helvetica Neue",sans-serif; --hx-r:3px; }
body[data-look="rams"] #controls, body[data-look="rams"] #snapbar { background:#e2e0d9; border-radius:3px; box-shadow:inset 0 0 0 1px #b6b4ac, 0 0 0 6px #d5d3cc; }
body[data-look="rams"] #volFx .fader-track { width:1px; border-radius:0; background:#8d8b84; box-shadow:none; }
body[data-look="rams"] #volFx .fader-track::before { display:none; }
body[data-look="rams"] #volFx .knob { width:48px; height:14px; border-radius:1px; background:linear-gradient(180deg,#333,#2b2b2b 60%,#242424); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.3); }
body[data-look="rams"] #volFx .knob::before { background:rgba(255,255,255,.55); height:1px; }
body[data-look="rams"] #volFx .knob.grabbed { background:#262626; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 1px rgba(0,0,0,.3); transform:translate(-50%, calc(-50% + 1px)); }
body[data-look="rams"] #volFx .knob.grabbed::before { background:#e2621b; height:2px; }
body[data-look="rams"] .hx-arc .tb-default { width:108px; height:108px; background:radial-gradient(circle at 50% 36%, #3d3d3d 0%, #2b2b2b 52%, #1f1f1f 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 2px 3px rgba(0,0,0,.35); }

/* ── serge ── */
body[data-look="serge"] { --bg:#a4a59f; --text-main:#16171a; --text-sub:#3d3f42; --accent:#8a1f14; --sv-line:rgba(0,0,0,.2); --oled-amber:#8a1f14; --screw-metal:#8e8f8a; --screw-dark:#6f706b; --knob-hi:#2c2d30; --knob-mid:#212226; --knob-lo:#16171a; --g-scale:2.4; --f-ui:"Avenir Next Condensed","Futura",system-ui,sans-serif; --hx-r:2px; }
body[data-look="serge"] #controls, body[data-look="serge"] #snapbar { background:#c6c7c2; border-radius:2px; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); box-shadow:inset 0 0 0 1px #8e8f8a, 0 0 0 6px #b9bab5; }
body[data-look="serge"] #volFx .fader-track { width:3px; border-radius:0; background:#6f706b; box-shadow:none; }
body[data-look="serge"] #volFx .fader-track::before { display:none; }
body[data-look="serge"] #volFx .knob { width:52px; height:17px; border-radius:1px; background:linear-gradient(180deg,#2c2d30,#16171a); box-shadow:0 2px 0 #0b0b0d, 0 3px 4px rgba(0,0,0,.45); }
body[data-look="serge"] #volFx .knob::before { background:#c6c7c2; height:1.5px; }
body[data-look="serge"] #volFx .knob.grabbed { box-shadow:0 0 0 #0b0b0d, 0 1px 2px rgba(0,0,0,.45); transform:translate(-50%, calc(-50% + 2px)); }
body[data-look="serge"] #volFx .knob.grabbed::before { background:#8a1f14; }
body[data-look="serge"] .hx-arc .tb-default { width:84px; height:84px; background:radial-gradient(circle, #2c2d30 0 26%, #16171a 27% 30%, #9fa09b 31% 56%, #6f706b 57% 62%, #b9bab5 63% 100%); box-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ── phosphor ── */
body[data-look="phosphor"] { --bg:#04060a; --text-main:#7dffb0; --text-sub:#2f7a52; --accent:#7dffb0; --oled-amber:#7dffb0; --screw-metal:#1d6b45; --screw-dark:#0d3a25; --knob-hi:#7dffb0; --knob-mid:#7dffb0; --knob-lo:#7dffb0; --g-scale:2.6; --f-ui:ui-monospace,"SF Mono",Menlo,monospace; --hx-r:0; }
body[data-look="phosphor"] #controls, body[data-look="phosphor"] #snapbar { background:#04060a; border-radius:0; box-shadow:inset 0 0 0 1px #1d6b45, 0 0 0 6px #04060a; }
body[data-look="phosphor"] #volFx .fader-track { width:15px; border-radius:0; background:transparent; box-shadow:inset 0 0 0 1px #1d6b45; }
body[data-look="phosphor"] #volFx .fader-track::before { content:''; left:0; top:auto; bottom:0; width:100%; height:var(--fill,0%); transform:none; border-radius:0; background:repeating-linear-gradient(180deg,#1d6b45 0 2px, transparent 2px 4px); }
body[data-look="phosphor"] #volFx .knob { width:15px; height:6px; border-radius:0; background:#7dffb0; box-shadow:0 0 10px rgba(125,255,176,.8); }
body[data-look="phosphor"] #volFx .knob::before { display:none; }
body[data-look="phosphor"] #volFx .knob.grabbed { height:9px; box-shadow:0 0 16px rgba(125,255,176,1); transform:translate(-50%,-50%); }
body[data-look="phosphor"] #volFx .fader-track:has(.knob.grabbed)::before { background:#7dffb0; }
body[data-look="phosphor"] .hx-arc .tb-default { width:150px; height:150px; background:transparent; box-shadow:inset 0 0 0 1px #1d6b45; }

/* ── op1 ── */
body[data-look="op1"] { --bg:#dedbd4; --text-main:#1d1d1f; --text-sub:#86847e; --accent:#e8442e; --sv-line:rgba(0,0,0,.18); --oled-amber:#e8442e; --screw-metal:#d6d3cb; --screw-dark:#b6b3ab; --knob-hi:#1d1d1f; --knob-mid:#1d1d1f; --knob-lo:#1d1d1f; --g-scale:2.0; --f-ui:ui-rounded,"SF Pro Rounded",system-ui,sans-serif; --hx-r:12px; }
body[data-look="op1"] #controls, body[data-look="op1"] #snapbar { background:#f7f6f2; border-radius:16px; box-shadow:0 0 0 6px #eceae4; }
body[data-look="op1"] #volFx .fader-track { width:8px; border-radius:4px; background:#ddd9d0; box-shadow:none; }
body[data-look="op1"] #volFx .fader-track::before { display:none; }
body[data-look="op1"] #volFx .fader-track::after { display:block; background:var(--ch-col,#1d1d1f); opacity:.35; border-radius:4px; }
body[data-look="op1"] #volFx .knob { width:62px; height:28px; border-radius:14px; background:var(--ch-col,#1d1d1f); box-shadow:0 3px 0 rgba(0,0,0,.22), inset 0 -4px 0 rgba(0,0,0,.08); }
body[data-look="op1"] #volFx .knob::before { background:rgba(255,255,255,.85); height:3px; border-radius:2px; }
body[data-look="op1"] #volFx .knob.grabbed { transform:translate(-50%, calc(-50% + 3px)); box-shadow:0 0 0 rgba(0,0,0,.22), inset 0 -2px 0 rgba(0,0,0,.08); }
body[data-look="op1"] #volFx .knob.grabbed::before { background:rgba(255,255,255,.85); }
body[data-look="op1"] #volFx { --ch-col:#e8442e; }
body[data-look="op1"] .hx-arc .tb-default { width:150px; height:150px; border-radius:24px; background:radial-gradient(circle, #e8442e 0 39%, #e9e6df 40%); box-shadow:inset 0 2px 4px rgba(0,0,0,.12); }

/* ── press ── */
body[data-look="press"] { --bg:#e9e3d8; --text-main:#1b1a1f; --text-sub:#5c554c; --accent:#b3321f; --sv-line:rgba(0,0,0,.16); --oled-amber:#f0725a; --screw-metal:#d6b77a; --screw-dark:#8a6a36; --knob-hi:#4a4744; --knob-mid:#35322f; --knob-lo:#1b1a1f; --g-scale:2.2; --f-ui:"Rockwell","Noto Serif",Georgia,serif; --hx-r:2px; }
body[data-look="press"] #controls, body[data-look="press"] #snapbar { background:#f4efe6; border-radius:2px; background-image:repeating-linear-gradient(0deg, rgba(70,55,30,.035) 0 1px, transparent 1px 5px); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 6px #2a2c33; }
body[data-look="press"] #volFx .fader-track { width:8px; border-radius:4px; background:#e4dccd; box-shadow:inset 1px 1px 2px rgba(0,0,0,.30), inset -1px -1px 0 rgba(255,255,255,.95); }
body[data-look="press"] #volFx .fader-track::before { display:none; }
body[data-look="press"] #volFx .fader-track::after { display:block; left:2px; right:2px; border-radius:2px; background:#1b1a1f; opacity:.82; }
body[data-look="press"] #volFx .knob { width:52px; height:20px; border-radius:1px; background:linear-gradient(180deg,#4a4744,#2c2a28); box-shadow:0 2px 0 #151413, 0 3px 5px rgba(0,0,0,.28); }
body[data-look="press"] #volFx .knob::before { left:6px; right:6px; height:2px; background:rgba(255,255,255,.35); }
body[data-look="press"] #volFx .knob.grabbed { background:#b3321f; box-shadow:0 0 0 #151413, 0 1px 2px rgba(0,0,0,.28); transform:translate(-50%, calc(-50% + 2px)); }
body[data-look="press"] #volFx .knob.grabbed::before { background:rgba(0,0,0,.35); }
body[data-look="press"] .hx-arc .tb-shape > * { display:none; }
body[data-look="press"] .hx-arc .tb-shape { position:relative; width:132px; height:132px; border-radius:50%; background:#b3321f; box-shadow:inset 0 0 0 8px #b3321f, inset 0 0 0 10px rgba(0,0,0,.20), 0 3px 0 #8c2618, 0 5px 10px rgba(0,0,0,.22); transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="press"] .hx-arc .tb-shape::before { content:''; position:absolute; inset:24px; border-radius:50%; box-shadow:inset 2px 2px 3px rgba(0,0,0,.28), inset -1px -1px 0 rgba(255,255,255,.22); }
body[data-look="press"] .hx-arc .tb-shape::after { content:none; }
body[data-look="press"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:#f4efe6; box-shadow:inset 0 0 0 3px #b3321f, inset 2px 2px 3px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.12); }
body[data-look="press"] .hx-arc .tb-shape.beem::before { content:none; }
body[data-look="press"] .hx-arc.pressed .tb-shape { transform:translateY(3px); background:#9a2a1a; box-shadow:inset 0 0 0 8px #9a2a1a, inset 0 0 0 10px rgba(0,0,0,.28), 0 0 0 #8c2618, 0 1px 2px rgba(0,0,0,.22); }
body[data-look="press"] .hx-arc.pressed .tb-shape.beem { background:#eadfcd; box-shadow:inset 0 0 0 3px #9a2a1a, inset 2px 2px 4px rgba(0,0,0,.2); }

/* ── plan ── */
body[data-look="plan"] { --bg:#0f2f57; --text-main:#eaf2ff; --text-sub:#a3bad8; --accent:#ffd84d; --sv-line:rgba(255,255,255,.2); --oled-amber:#eaf2ff; --screw-metal:#f2f6fc; --screw-dark:#8aa4c6; --knob-hi:#eaf2ff; --knob-mid:#eaf2ff; --knob-lo:#eaf2ff; --g-scale:2.4; --f-ui:"Gill Sans","sans-serif-light","Roboto",system-ui,sans-serif; --hx-r:0; }
body[data-look="plan"] #controls, body[data-look="plan"] #snapbar { background-color:#15406f; border-radius:0; background-image:linear-gradient(rgba(234,242,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(234,242,255,.10) 1px, transparent 1px),
                     linear-gradient(rgba(234,242,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(234,242,255,.045) 1px, transparent 1px); background-size:40px 40px, 40px 40px, 8px 8px, 8px 8px; box-shadow:inset 0 0 0 1px rgba(234,242,255,.55), 0 0 0 6px #0b2546; }
body[data-look="plan"] #volFx .fader-track { width:10px; border-radius:0; background:transparent; box-shadow:inset 0 0 0 1px rgba(234,242,255,.85); }
body[data-look="plan"] #volFx .fader-track::before { display:none; }
body[data-look="plan"] #volFx .fader-track::after { display:block; left:1px; right:1px; bottom:1px; background:repeating-linear-gradient(45deg, rgba(234,242,255,.7) 0 1px, transparent 1px 4px); }
body[data-look="plan"] #volFx .knob { width:46px; height:18px; border-radius:0; background:#15406f; box-shadow:inset 0 0 0 1.5px #eaf2ff, 0 2px 0 rgba(0,0,0,.35); }
body[data-look="plan"] #volFx .knob::before { left:-8px; right:-8px; height:1px; background:#eaf2ff; }
body[data-look="plan"] #volFx .knob.grabbed { height:22px; background:#ffd84d; box-shadow:inset 0 0 0 1.5px #ffd84d, 0 0 0 rgba(0,0,0,.35); transform:translate(-50%, calc(-50% + 1px)); }
body[data-look="plan"] #volFx .knob.grabbed::before { background:#0f2f57; }
body[data-look="plan"] .hx-arc .tb-shape > * { display:none; }
body[data-look="plan"] .hx-arc .tb-shape { position:relative; width:132px; height:132px; border-radius:50%; background:#eaf2ff; box-shadow:0 3px 0 rgba(0,0,0,.35); transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="plan"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; background:#0f2f57; transform:translate(-50%,-50%); }
body[data-look="plan"] .hx-arc .tb-shape::after { content:''; position:absolute; left:50%; top:50%; background:#0f2f57; transform:translate(-50%,-50%); }
body[data-look="plan"] .hx-arc .tb-shape::before { width:150px; height:1px; }
body[data-look="plan"] .hx-arc .tb-shape::after { width:1px; height:150px; }
body[data-look="plan"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:transparent; box-shadow:inset 0 0 0 1.5px #eaf2ff; }
body[data-look="plan"] .hx-arc .tb-shape.beem::before { width:108px; background:#eaf2ff; }
body[data-look="plan"] .hx-arc .tb-shape.beem::after { height:108px; background:#eaf2ff; }
body[data-look="plan"] .hx-arc.pressed .tb-shape { transform:scale(.97); background:#ffd84d; box-shadow:0 0 0 rgba(0,0,0,.35); }
body[data-look="plan"] .hx-arc.pressed .tb-shape.beem { background:rgba(255,216,77,.25); box-shadow:inset 0 0 0 1.5px #ffd84d; }

/* ── cockpit ── */
body[data-look="cockpit"] { --bg:#141517; --text-main:#ece7da; --text-sub:#9a958a; --accent:#ffb000; --sv-line:rgba(255,255,255,.14); --oled-amber:#ffb000; --screw-metal:#9a9da3; --screw-dark:#3d4045; --knob-hi:#3b3d42; --knob-mid:#2a2c30; --knob-lo:#1a1b1e; --g-scale:2.4; --f-ui:"DIN Alternate","DIN Condensed","sans-serif-condensed","Roboto Condensed",sans-serif; --hx-r:3px; }
body[data-look="cockpit"] #controls, body[data-look="cockpit"] #snapbar { background:#1c1e21; border-radius:3px; background-image:radial-gradient(rgba(255,255,255,.035) .6px, transparent .8px); background-size:3px 3px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 6px #2b2d31; }
body[data-look="cockpit"] #volFx .fader-track { width:6px; border-radius:3px; background:#050506; box-shadow:inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,.06); }
body[data-look="cockpit"] #volFx .fader-track::before { display:none; }
body[data-look="cockpit"] #volFx .knob { width:40px; height:30px; border-radius:4px; background:repeating-linear-gradient(90deg, #3b3d42 0 2px, #26282c 2px 4px); box-shadow:0 3px 0 #0b0b0c, 0 4px 8px rgba(0,0,0,.6); }
body[data-look="cockpit"] #volFx .knob::before { left:4px; right:4px; height:2px; background:#ece7da; }
body[data-look="cockpit"] #volFx .knob.grabbed { box-shadow:0 0 0 #0b0b0c, 0 1px 3px rgba(0,0,0,.6); transform:translate(-50%, calc(-50% + 3px)); }
body[data-look="cockpit"] #volFx .knob.grabbed::before { background:#ffb000; height:3px; box-shadow:0 0 6px rgba(255,176,0,.8); }
body[data-look="cockpit"] .hx-arc .tb-shape > * { display:none; }
body[data-look="cockpit"] .hx-arc .tb-shape { position:relative; width:140px; height:140px; border-radius:50%; background:repeating-linear-gradient(45deg, #f2c200 0 9px, #111 9px 18px); box-shadow:0 3px 0 #000, 0 6px 12px rgba(0,0,0,.6); transition:transform .12s, box-shadow .12s; }
body[data-look="cockpit"] .hx-arc .tb-shape::before { content:''; position:absolute; inset:14px; border-radius:50%; background:#26282c; box-shadow:inset 0 2px 4px rgba(0,0,0,.9); }
body[data-look="cockpit"] .hx-arc .tb-shape::after { content:''; position:absolute; inset:24px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #e53a2e 0%, #b8231a 60%, #8a1810 100%); box-shadow:0 4px 0 #5a0f0a, inset 0 1px 0 rgba(255,255,255,.35); transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="cockpit"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:#2b2d31; box-shadow:0 2px 0 #000, inset 0 0 0 1px rgba(255,255,255,.08); }
body[data-look="cockpit"] .hx-arc .tb-shape.beem::before { inset:12px; background:#1a1b1e; }
body[data-look="cockpit"] .hx-arc .tb-shape.beem::after { inset:20px; background:radial-gradient(circle at 50% 38%, #fbf7ea, #d9d3c3); box-shadow:0 3px 0 #6d685c; }
body[data-look="cockpit"] .hx-arc.pressed .tb-shape::after { transition:none; transform:translateY(4px); background:radial-gradient(circle at 50% 40%, #ff5a3c 0%, #d02a1f 60%, #9a1c12 100%); box-shadow:0 0 0 #5a0f0a, 0 0 14px rgba(255,80,50,.6); }
body[data-look="cockpit"] .hx-arc.pressed .tb-shape.beem::after { transition:none; background:radial-gradient(circle at 50% 40%, #ffffff, #ffe9a6); box-shadow:0 0 12px rgba(255,220,120,.7); }

/* ── baekja ── */
body[data-look="baekja"] { --bg:#ecebe5; --text-main:#172448; --text-sub:#4f5a70; --accent:#2f5fc8; --sv-line:rgba(23,36,72,.18); --oled-amber:#eef2fb; --screw-metal:#4b72cf; --screw-dark:#1d3576; --knob-hi:#ffffff; --knob-mid:#f4f3ee; --knob-lo:#dcdbd4; --g-scale:2.2; --f-ui:"Hoefler Text","Iowan Old Style",Georgia,"Noto Serif",serif; --hx-r:12px; }
body[data-look="baekja"] #controls, body[data-look="baekja"] #snapbar { background:#f6f6f1; border-radius:22px; box-shadow:inset 0 0 0 7px #f6f6f1, inset 0 0 0 8.5px #2f5fc8, inset 0 0 0 11px #f6f6f1, inset 0 0 0 12px rgba(47,95,200,.75), 0 0 0 6px radial-gradient(120% 90% at 30% 10%, #ffffff 0%, #f3f2ec 45%, #e2e0d8 100%); }
body[data-look="baekja"] #volFx .fader-track { width:8px; border-radius:4px; background:#e6e5de; box-shadow:inset 0 1px 2px rgba(20,30,60,.18); }
body[data-look="baekja"] #volFx .fader-track::before { width:1px; background:rgba(47,95,200,.85); }
body[data-look="baekja"] #volFx .fader-track::after { display:block; border-radius:4px; background:#2f5fc8; opacity:.22; }
body[data-look="baekja"] #volFx .knob { width:54px; height:26px; border-radius:13px; background:radial-gradient(70% 90% at 38% 28%, #ffffff 0%, #f1f0ea 55%, #d9d8d0 100%); box-shadow:0 0 0 1px rgba(47,95,200,.35), 0 3px 6px rgba(20,30,60,.22), inset 0 -1px 0 rgba(0,0,0,.05); }
body[data-look="baekja"] #volFx .knob::before { left:14px; right:14px; height:2px; background:#2f5fc8; border-radius:1px; }
body[data-look="baekja"] #volFx .knob.grabbed { background:radial-gradient(70% 90% at 38% 28%, #5a82dc 0%, #2f5fc8 55%, #1d3f94 100%); box-shadow:0 1px 2px rgba(20,30,60,.25); transform:translate(-50%, calc(-50% + 1px)) scale(1.04, .94); }
body[data-look="baekja"] #volFx .knob.grabbed::before { background:#eef2fb; }
body[data-look="baekja"] .hx-arc .tb-shape > * { display:none; }
body[data-look="baekja"] .hx-arc .tb-shape { position:relative; width:136px; height:136px; border-radius:50%; background:radial-gradient(70% 70% at 36% 28%, #6a8fe0 0%, #2f5fc8 45%, #1b3a8c 100%); box-shadow:0 5px 0 #13296a, 0 8px 16px rgba(20,30,60,.28), inset 0 2px 2px rgba(255,255,255,.35); transition:transform .12s, box-shadow .12s; }
body[data-look="baekja"] .hx-arc .tb-shape::before { content:''; position:absolute; inset:14px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(238,242,251,.7); }
body[data-look="baekja"] .hx-arc .tb-shape::after { content:none; }
body[data-look="baekja"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:radial-gradient(70% 70% at 36% 28%, #ffffff, #efeee8 60%, #dddcd4 100%); box-shadow:0 3px 0 #c9c8c0, 0 5px 10px rgba(20,30,60,.18), inset 0 0 0 2px #2f5fc8; }
body[data-look="baekja"] .hx-arc .tb-shape.beem::before { inset:10px; box-shadow:inset 0 0 0 1px rgba(47,95,200,.6); }
body[data-look="baekja"] .hx-arc.pressed .tb-shape { transform:translateY(4px); box-shadow:0 1px 0 #13296a, 0 2px 4px rgba(20,30,60,.28), inset 0 2px 6px rgba(0,0,0,.25); }
body[data-look="baekja"] .hx-arc.pressed .tb-shape.beem { box-shadow:0 1px 0 #c9c8c0, inset 0 0 0 2px #2f5fc8, inset 0 2px 5px rgba(0,0,0,.12); }

/* ── swiss ── */
body[data-look="swiss"] { --bg:#f2f1ec; --text-main:#111111; --text-sub:#55554f; --accent:#c41f16; --sv-line:rgba(0,0,0,.16); --oled-amber:#ffffff; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#111111; --knob-mid:#111111; --knob-lo:#111111; --g-scale:2.0; --f-ui:"Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif; --hx-r:0; }
body[data-look="swiss"] #controls, body[data-look="swiss"] #snapbar { background:#fbfaf6; border-radius:0; box-shadow:inset 0 0 0 2px #111, 0 0 0 6px #fbfaf6; }
body[data-look="swiss"] #volFx .fader-track { width:2px; border-radius:0; background:#111; box-shadow:none; overflow:visible; }
body[data-look="swiss"] #volFx .fader-track::before { display:none; }
body[data-look="swiss"] #volFx .fader-track::after { display:block; left:-2px; right:-2px; background:#c41f16; }
body[data-look="swiss"] #volFx .knob { width:60px; height:12px; border-radius:0; background:#111; box-shadow:0 2px 0 rgba(0,0,0,.18); }
body[data-look="swiss"] #volFx .knob::before { display:none; }
body[data-look="swiss"] #volFx .knob.grabbed { height:18px; background:#c41f16; box-shadow:none; transform:translate(-50%,-50%); }
body[data-look="swiss"] .hx-arc .tb-shape > * { display:none; }
body[data-look="swiss"] .hx-arc .tb-shape { position:relative; width:140px; height:140px; border-radius:50%; background:#c41f16; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="swiss"] .hx-arc .tb-shape::before { content:none; }
body[data-look="swiss"] .hx-arc .tb-shape::after { content:none; }
body[data-look="swiss"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:transparent; box-shadow:inset 0 0 0 3px #111; }
body[data-look="swiss"] .hx-arc.pressed .tb-shape { transform:scale(.94); background:#111; }
body[data-look="swiss"] .hx-arc.pressed .tb-shape.beem { background:#111; }

/* ── cassette ── */
body[data-look="cassette"] { --bg:#1f1d1c; --text-main:#f1ede6; --text-sub:#a39d94; --accent:#f07a1c; --sv-line:rgba(255,255,255,.14); --oled-amber:#f07a1c; --screw-metal:#e3e5e7; --screw-dark:#7d8084; --knob-hi:#3a3b3e; --knob-mid:#26272a; --knob-lo:#151517; --g-scale:2.2; --f-ui:"Avenir Next","Roboto",system-ui,sans-serif; --hx-r:6px; }
body[data-look="cassette"] #controls, body[data-look="cassette"] #snapbar { background:#18191b; border-radius:6px; box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.5), 0 0 0 6px #c3c5c6; }
body[data-look="cassette"] #volFx .fader-track { width:8px; border-radius:2px; background:#050506; box-shadow:inset 0 1px 2px rgba(0,0,0,1), 0 0 0 1px #3a3b3e, 0 1px 0 rgba(255,255,255,.12); }
body[data-look="cassette"] #volFx .fader-track::before { display:none; }
body[data-look="cassette"] #volFx .knob { width:50px; height:26px; border-radius:3px; background:repeating-linear-gradient(0deg, #2d2e31 0 2px, #1b1c1e 2px 4px); box-shadow:0 3px 0 #0a0a0b, 0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
body[data-look="cassette"] #volFx .knob::before { left:8px; right:8px; height:2px; background:#f1ede6; }
body[data-look="cassette"] #volFx .knob.grabbed { background:repeating-linear-gradient(0deg, #f28a33 0 2px, #d96a14 2px 4px); box-shadow:0 0 0 #0a0a0b, 0 1px 3px rgba(0,0,0,.5); transform:translate(-50%, calc(-50% + 3px)); }
body[data-look="cassette"] #volFx .knob.grabbed::before { background:#1f1d1c; }
body[data-look="cassette"] .hx-arc .tb-shape > * { display:none; }
body[data-look="cassette"] .hx-arc .tb-shape { position:relative; width:150px; height:108px; border-radius:6px; background:linear-gradient(180deg, #2f3033, #19191b); box-shadow:0 6px 0 #070708, 0 9px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); transition:transform .12s, box-shadow .12s; }
body[data-look="cassette"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:30px; height:34px; background:#f07a1c; clip-path:polygon(0 0, 100% 50%, 0 100%); transform:translate(-40%,-50%); }
body[data-look="cassette"] .hx-arc .tb-shape::after { content:none; }
body[data-look="cassette"] .hx-arc .tb-shape.beem { width:104px; height:72px; background:linear-gradient(180deg, #e2e4e5, #b9bbbd); box-shadow:0 4px 0 #7d8084, 0 6px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
body[data-look="cassette"] .hx-arc .tb-shape.beem::before { width:18px; height:20px; background:#1f1d1c; }
body[data-look="cassette"] .hx-arc.pressed .tb-shape { transform:translateY(5px); box-shadow:0 1px 0 #070708, 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
body[data-look="cassette"] .hx-arc.pressed .tb-shape.beem { box-shadow:0 1px 0 #7d8084, 0 2px 3px rgba(0,0,0,.4); }

/* ── brut ── */
body[data-look="brut"] { --bg:#ffc900; --text-main:#111111; --text-sub:#111111; --accent:#4b1fd1; --sv-line:rgba(0,0,0,.25); --oled-amber:#ffffff; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#ff90e8; --knob-mid:#ff90e8; --knob-lo:#ff90e8; --g-scale:1.8; --f-ui:system-ui,-apple-system,"Roboto",sans-serif; --hx-r:12px; }
body[data-look="brut"] #controls, body[data-look="brut"] #snapbar { background:#90e0ef; border:3px solid #111; border-radius:14px; box-shadow:0 0 0 6px #fff; }
body[data-look="brut"] #volFx .fader-track { width:18px; border-radius:9px; background:#fff; border:3px solid #111; box-shadow:none; }
body[data-look="brut"] #volFx .fader-track::before { display:none; }
body[data-look="brut"] #volFx .fader-track::after { display:block; left:2px; right:2px; bottom:2px; border-radius:6px; background:#ff90e8; }
body[data-look="brut"] #volFx .knob { width:62px; height:30px; border-radius:10px; background:#ff90e8; border:3px solid #111; box-shadow:4px 4px 0 #111; }
body[data-look="brut"] #volFx .knob::before { left:14px; right:14px; height:3px; background:#111; }
body[data-look="brut"] #volFx .knob.grabbed { background:#fff; box-shadow:0 0 0 #111; transform:translate(calc(-50% + 4px), calc(-50% + 4px)); }
body[data-look="brut"] .hx-arc .tb-shape > * { display:none; }
body[data-look="brut"] .hx-arc .tb-shape { position:relative; width:138px; height:138px; border-radius:50%; background:#ff90e8; border:4px solid #111; box-shadow:8px 8px 0 #111; transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="brut"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:34px; height:6px; border-radius:3px; background:#111; transform:translate(-50%,-50%); }
body[data-look="brut"] .hx-arc .tb-shape::after { content:none; }
body[data-look="brut"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:#fff; box-shadow:5px 5px 0 #111; }
body[data-look="brut"] .hx-arc.pressed .tb-shape { transform:translate(8px, 8px); box-shadow:0 0 0 #111; background:#4b1fd1; }
body[data-look="brut"] .hx-arc.pressed .tb-shape::before { background:#fff; }
body[data-look="brut"] .hx-arc.pressed .tb-shape.beem { transform:translate(5px, 5px); background:#c6f432; }

/* ── bigtype ── */
body[data-look="bigtype"] { --bg:#f1efe9; --text-main:#111111; --text-sub:#55534c; --accent:#c9330f; --sv-line:rgba(0,0,0,.16); --oled-amber:#111111; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#111111; --knob-mid:#111111; --knob-lo:#111111; --g-scale:1.3; --f-ui:"Didot","Bodoni 72",ui-serif,"Noto Serif",Georgia,serif; --hx-r:0; }
body[data-look="bigtype"] #controls, body[data-look="bigtype"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="bigtype"] #volFx .fader-track { width:1px; border-radius:0; background:#111; box-shadow:none; overflow:visible; }
body[data-look="bigtype"] #volFx .fader-track::before { display:none; }
body[data-look="bigtype"] #volFx .fader-track::after { display:block; left:-1px; right:-1px; background:#c9330f; }
body[data-look="bigtype"] #volFx .knob { width:62px; height:9px; border-radius:0; background:#111; box-shadow:none; }
body[data-look="bigtype"] #volFx .knob::before { display:none; }
body[data-look="bigtype"] #volFx .knob.grabbed { width:74px; height:16px; background:#c9330f; transform:translate(-50%,-50%); }
body[data-look="bigtype"] .hx-arc .tb-shape > * { display:none; }
body[data-look="bigtype"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:50%; background:#111; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="bigtype"] .hx-arc .tb-shape::before { content:none; }
body[data-look="bigtype"] .hx-arc .tb-shape::after { content:none; }
body[data-look="bigtype"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:transparent; box-shadow:inset 0 0 0 1.5px #111; }
body[data-look="bigtype"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#c9330f; }
body[data-look="bigtype"] .hx-arc.pressed .tb-shape.beem { background:#c9330f; box-shadow:none; }

/* ── product ── */
body[data-look="product"] { --bg:#000000; --text-main:#f5f5f7; --text-sub:#8e8e93; --accent:#2997ff; --sv-line:rgba(255,255,255,.14); --oled-amber:#f5f5f7; --screw-metal:#3a3a3c; --screw-dark:#3a3a3c; --knob-hi:#ffffff; --knob-mid:#ffffff; --knob-lo:#ffffff; --g-scale:1.8; --f-ui:system-ui,-apple-system,"Roboto",sans-serif; --hx-r:12px; }
body[data-look="product"] #controls, body[data-look="product"] #snapbar { background:#1c1c1e; border-radius:28px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
body[data-look="product"] #volFx .fader-track { width:8px; border-radius:4px; background:#3a3a3c; box-shadow:none; }
body[data-look="product"] #volFx .fader-track::before { display:none; }
body[data-look="product"] #volFx .fader-track::after { display:block; border-radius:4px; background:#2997ff; }
body[data-look="product"] #volFx .knob { width:46px; height:30px; border-radius:15px; background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,.55); }
body[data-look="product"] #volFx .knob::before { display:none; }
body[data-look="product"] #volFx .knob.grabbed { transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 0 4px rgba(41,151,255,.55), 0 4px 12px rgba(0,0,0,.55); }
body[data-look="product"] .hx-arc .tb-shape > * { display:none; }
body[data-look="product"] .hx-arc .tb-shape { position:relative; width:140px; height:140px; border-radius:50%; background:#2997ff; box-shadow:0 10px 30px rgba(41,151,255,.35); transition:transform .12s, background .12s, box-shadow .12s; }
body[data-look="product"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:30px; height:6px; border-radius:3px; background:#fff; transform:translate(-50%,-50%); }
body[data-look="product"] .hx-arc .tb-shape::after { content:none; }
body[data-look="product"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:transparent; box-shadow:inset 0 0 0 2px #3a3a3c; }
body[data-look="product"] .hx-arc .tb-shape.beem::before { background:#8e8e93; }
body[data-look="product"] .hx-arc.pressed .tb-shape { transform:scale(.93); background:#0060df; box-shadow:0 3px 10px rgba(41,151,255,.3); }
body[data-look="product"] .hx-arc.pressed .tb-shape.beem { background:#2c2c2e; box-shadow:inset 0 0 0 2px #2997ff; }

/* ── netart ── */
body[data-look="netart"] { --bg:#ffffff; --text-main:#000000; --text-sub:#404040; --accent:#0000ee; --sv-line:rgba(0,0,0,.25); --oled-amber:#0000ee; --screw-metal:#000000; --screw-dark:#000000; --knob-hi:#c0c0c0; --knob-mid:#c0c0c0; --knob-lo:#c0c0c0; --g-scale:2.2; --f-ui:"Times New Roman",Times,"Noto Serif",serif; --bev-out:inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; --bev-in:inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf; --hx-r:0; }
body[data-look="netart"] #controls, body[data-look="netart"] #snapbar { background:#fff; border-radius:0; box-shadow:0 0 0 6px #fff; }
body[data-look="netart"] #volFx .fader-track { width:12px; border-radius:0; background:#fff; box-shadow:var(--bev-in); }
body[data-look="netart"] #volFx .fader-track::before { display:none; }
body[data-look="netart"] #volFx .fader-track::after { display:block; left:2px; right:2px; bottom:2px; background:#000080; }
body[data-look="netart"] #volFx .knob { width:42px; height:22px; border-radius:0; background:#c0c0c0; box-shadow:var(--bev-out); }
body[data-look="netart"] #volFx .knob::before { left:12px; right:12px; height:1px; background:#404040; }
body[data-look="netart"] #volFx .knob.grabbed { background:#000080; box-shadow:var(--bev-in); transform:translate(-50%,-50%); }
body[data-look="netart"] #volFx .knob.grabbed::before { background:#fff; }
body[data-look="netart"] .hx-arc .tb-shape > * { display:none; }
body[data-look="netart"] .hx-arc .tb-shape { position:relative; width:150px; height:96px; border-radius:0; background:#c0c0c0; box-shadow:var(--bev-out), inset -3px -3px 0 #808080; }
body[data-look="netart"] .hx-arc .tb-shape::before { content:''; position:absolute; inset:12px; border:1px dotted #000; }
body[data-look="netart"] .hx-arc .tb-shape::after { content:none; }
body[data-look="netart"] .hx-arc .tb-shape.beem { width:96px; height:60px; }
body[data-look="netart"] .hx-arc .tb-shape.beem::before { inset:9px; }
body[data-look="netart"] .hx-arc.pressed .tb-shape { box-shadow:var(--bev-in), inset 3px 3px 0 #808080; }
body[data-look="netart"] .hx-arc.pressed .tb-shape::before { background:#000080; border-color:#000080; transform:translate(1px,1px); }

/* ── swissgrid ── */
body[data-look="swissgrid"] { --bg:#f4f3ef; --text-main:#111111; --text-sub:#4f4f4a; --accent:#cc2118; --sv-line:rgba(0,0,0,.16); --oled-amber:#111111; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#111111; --knob-mid:#111111; --knob-lo:#111111; --g-scale:1.6; --f-ui:"Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif; --hx-r:0; }
body[data-look="swissgrid"] #controls, body[data-look="swissgrid"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="swissgrid"] #volFx .fader-track { width:1px; border-radius:0; background:#111; box-shadow:none; overflow:visible; }
body[data-look="swissgrid"] #volFx .fader-track::before { display:none; }
body[data-look="swissgrid"] #volFx .fader-track::after { display:block; left:-1px; right:-1px; background:#cc2118; }
body[data-look="swissgrid"] #volFx .knob { width:56px; height:10px; border-radius:0; background:#111; box-shadow:none; }
body[data-look="swissgrid"] #volFx .knob::before { display:none; }
body[data-look="swissgrid"] #volFx .knob.grabbed { width:68px; height:18px; background:#cc2118; transform:translate(-50%,-50%); }
body[data-look="swissgrid"] .hx-arc .tb-shape > * { display:none; }
body[data-look="swissgrid"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:50%; background:#cc2118; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="swissgrid"] .hx-arc .tb-shape::before { content:none; }
body[data-look="swissgrid"] .hx-arc .tb-shape::after { content:none; }
body[data-look="swissgrid"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:transparent; box-shadow:inset 0 0 0 2px #111; }
body[data-look="swissgrid"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#111; }
body[data-look="swissgrid"] .hx-arc.pressed .tb-shape.beem { background:#111; box-shadow:none; }

/* ── swissbig ── */
body[data-look="swissbig"] { --bg:#f4f3ef; --text-main:#111111; --text-sub:#4f4f4a; --accent:#cc2118; --sv-line:rgba(0,0,0,.16); --oled-amber:#111111; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#111111; --knob-mid:#111111; --knob-lo:#111111; --g-scale:1.15; --f-ui:"Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif; --hx-r:0; }
body[data-look="swissbig"] #controls, body[data-look="swissbig"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="swissbig"] #volFx .fader-track { width:2px; border-radius:0; background:#111; box-shadow:none; overflow:visible; }
body[data-look="swissbig"] #volFx .fader-track::before { display:none; }
body[data-look="swissbig"] #volFx .fader-track::after { display:block; background:#cc2118; }
body[data-look="swissbig"] #volFx .knob { width:24px; height:24px; border-radius:0; background:#111; box-shadow:none; }
body[data-look="swissbig"] #volFx .knob::before { display:none; }
body[data-look="swissbig"] #volFx .knob.grabbed { width:32px; height:32px; background:#cc2118; transform:translate(-50%,-50%); }
body[data-look="swissbig"] .hx-arc .tb-shape > * { display:none; }
body[data-look="swissbig"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:50%; background:#111; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="swissbig"] .hx-arc .tb-shape::before { content:none; }
body[data-look="swissbig"] .hx-arc .tb-shape::after { content:none; }
body[data-look="swissbig"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:transparent; box-shadow:inset 0 0 0 2px #111; }
body[data-look="swissbig"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#cc2118; }
body[data-look="swissbig"] .hx-arc.pressed .tb-shape.beem { background:#cc2118; box-shadow:none; }

/* ── swissair ── */
body[data-look="swissair"] { --bg:#fbfbf9; --text-main:#111111; --text-sub:#66665f; --accent:#cc2118; --sv-line:rgba(0,0,0,.14); --oled-amber:#66665f; --screw-metal:#cfcfca; --screw-dark:#cfcfca; --knob-hi:#cc2118; --knob-mid:#cc2118; --knob-lo:#cc2118; --g-scale:2.4; --f-ui:"Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif; --hx-r:0; }
body[data-look="swissair"] #controls, body[data-look="swissair"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="swissair"] #volFx .fader-track { width:1px; border-radius:0; background:#d6d6d0; box-shadow:none; }
body[data-look="swissair"] #volFx .fader-track::before { display:none; }
body[data-look="swissair"] #volFx .fader-track::after { display:block; background:#111; }
body[data-look="swissair"] #volFx .knob { width:16px; height:16px; border-radius:0; background:#cc2118; box-shadow:none; }
body[data-look="swissair"] #volFx .knob::before { display:none; }
body[data-look="swissair"] #volFx .knob.grabbed { width:24px; height:24px; background:#111; transform:translate(-50%,-50%); }
body[data-look="swissair"] .hx-arc .tb-shape > * { display:none; }
body[data-look="swissair"] .hx-arc .tb-shape { position:relative; width:124px; height:124px; border-radius:50%; background:#cc2118; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="swissair"] .hx-arc .tb-shape::before { content:none; }
body[data-look="swissair"] .hx-arc .tb-shape::after { content:none; }
body[data-look="swissair"] .hx-arc .tb-shape.beem { width:76px; height:76px; background:transparent; box-shadow:inset 0 0 0 1.5px #111; }
body[data-look="swissair"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#111; }
body[data-look="swissair"] .hx-arc.pressed .tb-shape.beem { background:#111; box-shadow:none; }

/* ── risoposter ── */
body[data-look="risoposter"] { --bg:#f2ecdf; --text-main:#1a1a1a; --text-sub:#1a1a1a; --accent:#3255a4; --sv-line:rgba(0,0,0,.18); --oled-amber:#1a1a1a; --screw-metal:#1a1a1a; --screw-dark:#1a1a1a; --knob-hi:#ff48b0; --knob-mid:#ff48b0; --knob-lo:#ff48b0; --g-scale:1.2; --f-ui:"Futura","Avenir Next","Roboto",system-ui,sans-serif; --hx-r:0; }
body[data-look="risoposter"] #controls, body[data-look="risoposter"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="risoposter"] #volFx .fader-track { width:3px; border-radius:0; background:#1a1a1a; box-shadow:none; overflow:visible; }
body[data-look="risoposter"] #volFx .fader-track::before { display:none; }
body[data-look="risoposter"] #volFx .fader-track::after { display:block; left:-4px; right:-4px; background:#ff48b0; mix-blend-mode:multiply; transform:translate(-2px,2px); }
body[data-look="risoposter"] #volFx .knob { width:60px; height:22px; border-radius:0; background:#ff48b0; mix-blend-mode:multiply; box-shadow:none; transform:translate(calc(-50% - 2px), calc(-50% + 2px)); }
body[data-look="risoposter"] #volFx .knob::before { left:9px; right:9px; height:2px; background:#1a1a1a; }
body[data-look="risoposter"] #volFx .knob::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 2.5px #1a1a1a; transform:translate(4px,-4px); transition:transform .12s; }
body[data-look="risoposter"] #volFx .knob.grabbed { transform:translate(-50%,-50%); background-image:radial-gradient(#1a1a1a 1px, transparent 1.2px); background-size:4px 4px; }
body[data-look="risoposter"] #volFx .knob.grabbed::after { transform:none; }
body[data-look="risoposter"] .hx-arc .tb-shape > * { display:none; }
body[data-look="risoposter"] .hx-arc .tb-shape { position:relative; width:140px; height:140px; border-radius:50%; background:#ff48b0; mix-blend-mode:multiply; box-shadow:none; transform:translate(-3px,3px); transition:transform .12s; }
body[data-look="risoposter"] .hx-arc .tb-shape::before { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 3px #1a1a1a; transform:translate(6px,-6px); transition:transform .12s; }
body[data-look="risoposter"] .hx-arc .tb-shape::after { content:none; }
body[data-look="risoposter"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:transparent; box-shadow:inset 0 0 0 12px #3255a4; }
body[data-look="risoposter"] .hx-arc.pressed .tb-shape { transform:none; background-image:radial-gradient(#1a1a1a 1.2px, transparent 1.4px); background-size:5px 5px; }
body[data-look="risoposter"] .hx-arc.pressed .tb-shape::before { transform:none; transition:none; }

/* ── risodot ── */
body[data-look="risodot"] { --bg:#f3ede0; --text-main:#1a1a1a; --text-sub:#4a4640; --accent:#3255a4; --sv-line:rgba(0,0,0,.16); --oled-amber:#3255a4; --screw-metal:#ff48b0; --screw-dark:#ff48b0; --knob-hi:#ff48b0; --knob-mid:#ff48b0; --knob-lo:#ff48b0; --g-scale:2.2; --f-ui:"Futura","Avenir Next","Roboto",system-ui,sans-serif; --hx-r:0; }
body[data-look="risodot"] #controls, body[data-look="risodot"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="risodot"] #volFx .fader-track { width:4px; border-radius:0; background:radial-gradient(circle, #1a1a1a 0 45%, transparent 50%) center top / 4px 8px repeat-y; box-shadow:none; overflow:visible; }
body[data-look="risodot"] #volFx .fader-track::before { display:none; }
body[data-look="risodot"] #volFx .fader-track::after { display:block; left:-2px; right:-2px; background:radial-gradient(circle, #ff48b0 0 55%, transparent 60%) center bottom / 8px 8px repeat-y; }
body[data-look="risodot"] #volFx .knob { width:34px; height:34px; border-radius:50%; background:#ff48b0; mix-blend-mode:multiply; box-shadow:4px -3px 0 0 rgba(50,85,164,.9); }
body[data-look="risodot"] #volFx .knob::before { display:none; }
body[data-look="risodot"] #volFx .knob.grabbed { width:46px; height:46px; background:#3255a4; box-shadow:-4px 3px 0 0 #ff48b0; transform:translate(-50%,-50%); }
body[data-look="risodot"] .hx-arc .tb-shape > * { display:none; }
body[data-look="risodot"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, #ff48b0 0 46%, transparent 48%) center / 10px 10px; box-shadow:inset 0 0 0 3px #ff48b0; transition:transform .12s, background .12s; }
body[data-look="risodot"] .hx-arc .tb-shape::before { content:none; }
body[data-look="risodot"] .hx-arc .tb-shape::after { content:none; }
body[data-look="risodot"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:transparent; box-shadow:inset 0 0 0 3px #3255a4; }
body[data-look="risodot"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#ff48b0; }
body[data-look="risodot"] .hx-arc.pressed .tb-shape.beem { background:#3255a4; }

/* ── rothko ── */
body[data-look="rothko"] { --bg:#3a0e10; --text-main:#f3e2c7; --text-sub:#d9b99a; --accent:#f4a259; --sv-line:rgba(255,255,255,.18); --oled-amber:#f3e2c7; --screw-metal:#8a3226; --screw-dark:#8a3226; --knob-hi:#f3e2c7; --knob-mid:#f3e2c7; --knob-lo:#f3e2c7; --g-scale:2.0; --f-ui:"Gill Sans","Optima","Roboto",sans-serif; --hx-r:0; }
body[data-look="rothko"] #controls, body[data-look="rothko"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="rothko"] #volFx .fader-track { width:2px; border-radius:1px; background:rgba(243,226,199,.35); box-shadow:none; overflow:visible; }
body[data-look="rothko"] #volFx .fader-track::before { display:none; }
body[data-look="rothko"] #volFx .fader-track::after { display:block; left:-1px; right:-1px; background:#f4a259; box-shadow:0 0 6px rgba(244,162,89,.6); }
body[data-look="rothko"] #volFx .knob { width:58px; height:16px; border-radius:2px; background:#f3e2c7; box-shadow:0 0 10px 3px rgba(243,226,199,.35); }
body[data-look="rothko"] #volFx .knob::before { display:none; }
body[data-look="rothko"] #volFx .knob.grabbed { width:66px; height:22px; background:#f4a259; box-shadow:0 0 16px 6px rgba(244,162,89,.55); transform:translate(-50%,-50%); }
body[data-look="rothko"] .hx-arc .tb-shape > * { display:none; }
body[data-look="rothko"] .hx-arc .tb-shape { position:relative; width:150px; height:112px; border-radius:4px; background:#d2602d; box-shadow:0 0 18px 7px rgba(210,96,45,.75); transition:transform .12s, background .12s, box-shadow .12s; }
body[data-look="rothko"] .hx-arc .tb-shape::before { content:none; }
body[data-look="rothko"] .hx-arc .tb-shape::after { content:none; }
body[data-look="rothko"] .hx-arc .tb-shape.beem { width:96px; height:72px; background:#8a3226; box-shadow:0 0 12px 4px rgba(138,50,38,.7); }
body[data-look="rothko"] .hx-arc.pressed .tb-shape { transform:scale(.96); background:#f3e2c7; box-shadow:0 0 8px 2px rgba(243,226,199,.6); }
body[data-look="rothko"] .hx-arc.pressed .tb-shape.beem { background:#f4a259; }

/* ── amber ── */
body[data-look="amber"] { --bg:#0c0700; --text-main:#ffb000; --text-sub:#b07a10; --accent:#ffcf5a; --sv-line:rgba(255,176,0,.2); --oled-amber:#0c0700; --screw-metal:#b07a10; --screw-dark:#b07a10; --knob-hi:#ffb000; --knob-mid:#ffb000; --knob-lo:#ffb000; --g-scale:2.0; --f-ui:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace; --hx-r:0; }
body[data-look="amber"] #controls, body[data-look="amber"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="amber"] #volFx .fader-track { width:10px; border-radius:0; background:transparent; box-shadow:inset 0 0 0 1px #b07a10; }
body[data-look="amber"] #volFx .fader-track::before { display:none; }
body[data-look="amber"] #volFx .fader-track::after { display:block; left:2px; right:2px; bottom:2px; background:#ffb000; }
body[data-look="amber"] #volFx .knob { width:44px; height:14px; border-radius:0; background:#ffb000; box-shadow:0 0 10px rgba(255,176,0,.55); }
body[data-look="amber"] #volFx .knob::before { left:6px; right:6px; height:2px; background:#0c0700; }
body[data-look="amber"] #volFx .knob.grabbed { width:54px; height:20px; background:#fff1c9; box-shadow:0 0 18px rgba(255,200,80,.9); transform:translate(-50%,-50%); }
body[data-look="amber"] .hx-arc .tb-shape > * { display:none; }
body[data-look="amber"] .hx-arc .tb-shape { position:relative; width:152px; height:92px; border-radius:0; background:#0c0700; box-shadow:inset 0 0 0 3px #ffb000, 0 0 12px rgba(255,176,0,.25); transition:background .12s; }
body[data-look="amber"] .hx-arc .tb-shape::before { content:'▄▄▄▄'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#ffb000; font:600 20px/1 ui-monospace, "SF Mono", Menlo, monospace; text-shadow:0 0 8px rgba(255,176,0,.5); }
body[data-look="amber"] .hx-arc .tb-shape::after { content:none; }
body[data-look="amber"] .hx-arc .tb-shape.beem { width:108px; height:64px; }
body[data-look="amber"] .hx-arc .tb-shape.beem::before { content:'▀▀▀'; font-size:15px; }
body[data-look="amber"] .hx-arc.pressed .tb-shape { background:#ffb000; box-shadow:inset 0 0 0 3px #fff1c9, 0 0 22px rgba(255,176,0,.6); }
body[data-look="amber"] .hx-arc.pressed .tb-shape::before { color:#0c0700; text-shadow:none; }

/* ── teletext ── */
body[data-look="teletext"] { --bg:#000000; --text-main:#ffffff; --text-sub:#00ffff; --accent:#ffff00; --sv-line:rgba(255,255,255,.2); --oled-amber:#ffffff; --screw-metal:#ff00ff; --screw-dark:#ff00ff; --knob-hi:#ffff00; --knob-mid:#ffff00; --knob-lo:#ffff00; --g-scale:1.8; --f-ui:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace; --hx-r:0; }
body[data-look="teletext"] #controls, body[data-look="teletext"] #snapbar { background:#000; border-radius:0; box-shadow:none; }
body[data-look="teletext"] #volFx .fader-track { width:12px; border-radius:0; background:repeating-linear-gradient(180deg, #00ffff 0 6px, transparent 6px 12px); box-shadow:none; }
body[data-look="teletext"] #volFx .fader-track::before { display:none; }
body[data-look="teletext"] #volFx .fader-track::after { display:block; background:repeating-linear-gradient(0deg, #ffff00 0 6px, transparent 6px 12px); }
body[data-look="teletext"] #volFx .knob { width:44px; height:16px; border-radius:0; background:#ffff00; box-shadow:none; }
body[data-look="teletext"] #volFx .knob::before { left:8px; right:8px; height:2px; background:#000; }
body[data-look="teletext"] #volFx .knob.grabbed { width:54px; height:24px; background:#ffffff; transform:translate(-50%,-50%); }
body[data-look="teletext"] #volFx .knob.grabbed::before { background:#ff0000; }
body[data-look="teletext"] .hx-arc .tb-shape > * { display:none; }
body[data-look="teletext"] .hx-arc .tb-shape { position:relative; width:148px; height:96px; border-radius:0; background:#ff0000; box-shadow:8px 8px 0 #0000ff; transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="teletext"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:36px; height:8px; background:#fff; transform:translate(-50%,-50%); }
body[data-look="teletext"] .hx-arc .tb-shape::after { content:none; }
body[data-look="teletext"] .hx-arc .tb-shape.beem { width:100px; height:64px; background:#00ffff; box-shadow:6px 6px 0 #ff00ff; }
body[data-look="teletext"] .hx-arc.pressed .tb-shape { transform:translate(8px,8px); box-shadow:0 0 0 #0000ff; background:#ffff00; }
body[data-look="teletext"] .hx-arc.pressed .tb-shape::before { background:#000; }
body[data-look="teletext"] .hx-arc.pressed .tb-shape.beem { transform:translate(6px,6px); background:#ffffff; }

/* ── catalog ── */
body[data-look="catalog"] { --bg:#e8e8e5; --text-main:#111111; --text-sub:#55554f; --accent:#b0301a; --sv-line:rgba(0,0,0,.14); --oled-amber:#f4f4f2; --screw-metal:#d8d8d4; --screw-dark:#8f8f8a; --knob-hi:#e8442e; --knob-mid:#e8442e; --knob-lo:#e8442e; --g-scale:1.8; --f-ui:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace; --hx-r:10px; }
body[data-look="catalog"] #controls, body[data-look="catalog"] #snapbar { background:#f4f4f2; border-radius:16px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
body[data-look="catalog"] #volFx { --ch-col:#e8442e; }
body[data-look="catalog"] #volFx .fader-track { width:2px; border-radius:1px; background:#bcbcb6; box-shadow:none; overflow:visible; }
body[data-look="catalog"] #volFx .fader-track::before { display:none; }
body[data-look="catalog"] #volFx .fader-track::after { display:block; left:-1px; right:-1px; border-radius:2px; background:var(--ch-col,#e8442e); }
body[data-look="catalog"] #volFx .knob { width:36px; height:36px; border-radius:50%; background:var(--ch-col,#e8442e); box-shadow:0 1px 2px rgba(0,0,0,.3); }
body[data-look="catalog"] #volFx .knob::before { left:50%; right:auto; width:6px; height:6px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
body[data-look="catalog"] #volFx .knob.grabbed { box-shadow:0 0 0 4px #f4f4f2, 0 0 0 5.5px var(--ch-col,#e8442e); transform:translate(-50%,-50%) scale(1.08); }
body[data-look="catalog"] #volFx .knob.grabbed::before { background:#111; }
body[data-look="catalog"] .hx-arc .tb-shape > * { display:none; }
body[data-look="catalog"] .hx-arc .tb-shape { position:relative; width:132px; height:132px; border-radius:50%; background:#e8442e; box-shadow:0 0 0 7px #f4f4f2, 0 0 0 8px rgba(0,0,0,.22), 0 3px 0 8px rgba(0,0,0,.1); transition:transform .12s, background .12s, box-shadow .12s; }
body[data-look="catalog"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:18px; height:4px; border-radius:2px; background:#fff; transform:translate(-50%,-50%); }
body[data-look="catalog"] .hx-arc .tb-shape::after { content:none; }
body[data-look="catalog"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:#2f6fd0; }
body[data-look="catalog"] .hx-arc.pressed .tb-shape { transform:translateY(2px); background:#111; box-shadow:0 0 0 7px #f4f4f2, 0 0 0 8px rgba(0,0,0,.22); }

/* ── field ── */
body[data-look="field"] { --bg:#161618; --text-main:#f2f2f0; --text-sub:#9a9a96; --accent:#ff6a3d; --sv-line:rgba(255,255,255,.14); --oled-amber:#ffffff; --screw-metal:#4a4a4e; --screw-dark:#2a2a2d; --knob-hi:#f2f2f0; --knob-mid:#f2f2f0; --knob-lo:#f2f2f0; --g-scale:1.8; --f-ui:ui-rounded,"SF Pro Rounded",system-ui,"Roboto",sans-serif; --hx-r:12px; }
body[data-look="field"] #controls, body[data-look="field"] #snapbar { background:#1b1b1d; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 6px linear-gradient(180deg, #2b2b2e, #222225); }
body[data-look="field"] #volFx { --ch-col:#ff6a3d; }
body[data-look="field"] #volFx .fader-track { width:6px; border-radius:3px; background:#2e2e31; box-shadow:none; }
body[data-look="field"] #volFx .fader-track::before { display:none; }
body[data-look="field"] #volFx .fader-track::after { display:block; border-radius:3px; background:var(--ch-col,#ff6a3d); box-shadow:0 0 8px var(--ch-col,#ff6a3d); }
body[data-look="field"] #volFx .knob { width:48px; height:30px; border-radius:15px; background:#f2f2f0; box-shadow:0 2px 6px rgba(0,0,0,.6); }
body[data-look="field"] #volFx .knob::before { left:17px; right:17px; height:4px; border-radius:2px; background:var(--ch-col,#ff6a3d); }
body[data-look="field"] #volFx .knob.grabbed { background:var(--ch-col,#ff6a3d); box-shadow:0 0 16px var(--ch-col,#ff6a3d); transform:translate(-50%,-50%) scale(1.06); }
body[data-look="field"] #volFx .knob.grabbed::before { background:#fff; }
body[data-look="field"] .hx-arc .tb-shape > * { display:none; }
body[data-look="field"] .hx-arc .tb-shape { position:relative; width:136px; height:136px; border-radius:50%; background:#ff6a3d; box-shadow:0 0 30px rgba(255,106,61,.35), inset 0 -4px 0 rgba(0,0,0,.2); transition:transform .12s, background .12s, box-shadow .12s; }
body[data-look="field"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:22px; height:5px; border-radius:3px; background:#fff; transform:translate(-50%,-50%); }
body[data-look="field"] .hx-arc .tb-shape::after { content:none; }
body[data-look="field"] .hx-arc .tb-shape.beem { width:92px; height:92px; background:#3d8bff; box-shadow:0 0 22px rgba(61,139,255,.35), inset 0 -4px 0 rgba(0,0,0,.2); }
body[data-look="field"] .hx-arc.pressed .tb-shape { transform:scale(.94); background:#f2f2f0; box-shadow:0 0 12px rgba(255,255,255,.3); }
body[data-look="field"] .hx-arc.pressed .tb-shape::before { background:#ff6a3d; }

/* ── risozine ── */
body[data-look="risozine"] { --bg:#e9e7e1; --text-main:#141414; --text-sub:#3d3d3a; --accent:#2f4fa0; --sv-line:rgba(0,0,0,.18); --oled-amber:#ffffff; --screw-metal:#141414; --screw-dark:#141414; --knob-hi:#141414; --knob-mid:#141414; --knob-lo:#141414; --g-scale:1.8; --f-ui:"American Typewriter","Courier New","Cutive Mono",monospace; --hx-r:0; }
body[data-look="risozine"] #controls, body[data-look="risozine"] #snapbar { background:#fbfaf6; border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 6px #fbfaf6; background-image:radial-gradient(rgba(0,0,0,.08) .7px, transparent .9px); background-size:6px 6px; }
body[data-look="risozine"] #volFx .fader-track { width:4px; border-radius:2px; background:#141414; box-shadow:none; overflow:visible; }
body[data-look="risozine"] #volFx .fader-track::before { display:none; }
body[data-look="risozine"] #volFx .fader-track::after { display:block; left:-4px; right:-4px; border-radius:3px; background:#ff48b0; opacity:.85; }
body[data-look="risozine"] #volFx .knob { width:58px; height:24px; border-radius:1px; background:#141414; box-shadow:2px 3px 0 rgba(0,0,0,.18); }
body[data-look="risozine"] #volFx .knob::before { left:10px; right:10px; height:2px; background:#fbfaf6; }
body[data-look="risozine"] #volFx .knob.grabbed { background:#ff48b0; box-shadow:0 0 0 rgba(0,0,0,.18); transform:translate(-50%, calc(-50% + 2px)) rotate(-4deg); }
body[data-look="risozine"] #volFx .knob.grabbed::before { background:#141414; }
body[data-look="risozine"] .hx-arc .tb-shape > * { display:none; }
body[data-look="risozine"] .hx-arc .tb-shape { position:relative; width:140px; height:140px; border-radius:50%; background:#ff48b0; box-shadow:5px 7px 0 rgba(0,0,0,.2); transform:rotate(-4deg); transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="risozine"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; border-radius:50%; background:#141414; transform:translate(-50%,-50%); }
body[data-look="risozine"] .hx-arc .tb-shape::after { content:none; }
body[data-look="risozine"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:#fbfaf6; box-shadow:inset 0 0 0 2px #141414, 3px 5px 0 rgba(0,0,0,.2); }
body[data-look="risozine"] .hx-arc.pressed .tb-shape { transform:rotate(-4deg) translate(3px,5px); box-shadow:0 0 0 rgba(0,0,0,.2); background:#2f4fa0; }
body[data-look="risozine"] .hx-arc.pressed .tb-shape::before { background:#fbfaf6; }
body[data-look="risozine"] .hx-arc.pressed .tb-shape.beem { background:#ffe800; }

/* ── albers ── */
body[data-look="albers"] { --bg:#cf9a3a; --text-main:#2b1508; --text-sub:#4a2a12; --accent:#5a1a08; --sv-line:rgba(0,0,0,.2); --oled-amber:#f3d692; --screw-metal:#5a1a08; --screw-dark:#5a1a08; --knob-hi:#9c3515; --knob-mid:#9c3515; --knob-lo:#9c3515; --g-scale:2.0; --f-ui:"Optima","Roboto",system-ui,sans-serif; --hx-r:0; }
body[data-look="albers"] #controls, body[data-look="albers"] #snapbar { background:#e9c46d; border-radius:0; box-shadow:0 0 0 6px #dcae52; }
body[data-look="albers"] #volFx .fader-track { width:4px; border-radius:0; background:rgba(90,26,8,.30); box-shadow:none; }
body[data-look="albers"] #volFx .fader-track::before { display:none; }
body[data-look="albers"] #volFx .fader-track::after { display:block; background:#9c3515; }
body[data-look="albers"] #volFx .knob { width:38px; height:38px; border-radius:0; background:#5a1a08; box-shadow:none; }
body[data-look="albers"] #volFx .knob::before { left:9px; right:9px; top:12px; bottom:4px; height:auto; transform:none; border-radius:0; background:#d8612c; }
body[data-look="albers"] #volFx .knob.grabbed { background:#9c3515; transform:translate(-50%,-50%); }
body[data-look="albers"] #volFx .knob.grabbed::before { top:8px; bottom:8px; left:8px; right:8px; background:#f3d692; }
body[data-look="albers"] .hx-arc .tb-shape > * { display:none; }
body[data-look="albers"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:0; background:#5a1a08; box-shadow:none; transition:background .12s; }
body[data-look="albers"] .hx-arc .tb-shape::before { content:''; position:absolute; left:22px; right:22px; top:32px; bottom:12px; background:#9c3515; transition:top .12s, bottom .12s, background .12s; }
body[data-look="albers"] .hx-arc .tb-shape::after { content:''; position:absolute; left:48px; right:48px; top:64px; bottom:24px; background:#d8612c; transition:top .12s, bottom .12s, background .12s; }
body[data-look="albers"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:#e9c46d; box-shadow:inset 0 0 0 2px #9c3515; }
body[data-look="albers"] .hx-arc .tb-shape.beem::before { left:16px; right:16px; top:22px; bottom:10px; background:#f3d692; }
body[data-look="albers"] .hx-arc .tb-shape.beem::after { content:none; }
body[data-look="albers"] .hx-arc.pressed .tb-shape::before { transition:none; }
body[data-look="albers"] .hx-arc.pressed .tb-shape::after { transition:none; }
body[data-look="albers"] .hx-arc.pressed .tb-shape::before { top:22px; bottom:22px; background:#d8612c; }
body[data-look="albers"] .hx-arc.pressed .tb-shape::after { top:48px; bottom:48px; background:#f3d692; }
body[data-look="albers"] .hx-arc.pressed .tb-shape.beem::before { top:16px; bottom:16px; background:#d8612c; }

/* ── kelly ── */
body[data-look="kelly"] { --bg:#f6f5f1; --text-main:#111111; --text-sub:#4b4b46; --accent:#1c6b43; --sv-line:rgba(0,0,0,.16); --oled-amber:#111111; --screw-metal:#111111; --screw-dark:#111111; --knob-hi:#111111; --knob-mid:#111111; --knob-lo:#111111; --g-scale:1.8; --f-ui:"Avenir Next","Roboto",system-ui,sans-serif; --hx-r:0; }
body[data-look="kelly"] #controls, body[data-look="kelly"] #snapbar { background:var(--bg); box-shadow:none; border-radius:0; }
body[data-look="kelly"] #volFx .fader-track { width:1px; border-radius:0; background:#111; box-shadow:none; overflow:visible; }
body[data-look="kelly"] #volFx .fader-track::before { display:none; }
body[data-look="kelly"] #volFx .fader-track::after { display:block; left:-2px; right:-2px; background:#111; }
body[data-look="kelly"] #volFx .knob { width:56px; height:14px; border-radius:0; background:#111; box-shadow:none; }
body[data-look="kelly"] #volFx .knob::before { display:none; }
body[data-look="kelly"] #volFx .knob.grabbed { width:64px; height:22px; background:#fff; box-shadow:inset 0 0 0 3px #111; transform:translate(-50%,-50%); }
body[data-look="kelly"] .hx-arc .tb-shape > * { display:none; }
body[data-look="kelly"] .hx-arc .tb-shape { position:relative; width:150px; height:150px; border-radius:50%; background:#111; box-shadow:none; transition:transform .12s, background .12s; }
body[data-look="kelly"] .hx-arc .tb-shape::before { content:none; }
body[data-look="kelly"] .hx-arc .tb-shape::after { content:none; }
body[data-look="kelly"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:#fff; box-shadow:inset 0 0 0 3px #111; }
body[data-look="kelly"] .hx-arc.pressed .tb-shape { transform:scale(.95); background:#1c6b43; }
body[data-look="kelly"] .hx-arc.pressed .tb-shape.beem { background:#1c6b43; box-shadow:none; }

/* ── tui ── */
body[data-look="tui"] { --bg:#050807; --text-main:#8dffc0; --text-sub:#44a771; --accent:#8dffc0; --sv-line:rgba(141,255,192,.2); --oled-amber:#8dffc0; --screw-metal:#44a771; --screw-dark:#44a771; --knob-hi:#8dffc0; --knob-mid:#8dffc0; --knob-lo:#8dffc0; --g-scale:2.2; --f-ui:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace; --hx-r:0; }
body[data-look="tui"] #controls, body[data-look="tui"] #snapbar { background:#050807; border-radius:0; box-shadow:inset 0 0 0 1px #8dffc0; }
body[data-look="tui"] #volFx .fader-track { width:16px; border-radius:0; background:transparent; box-shadow:inset 0 0 0 1px #44a771; }
body[data-look="tui"] #volFx .fader-track::before { display:none; }
body[data-look="tui"] #volFx .fader-track::after { display:block; left:3px; right:3px; bottom:3px; background:repeating-linear-gradient(180deg, #8dffc0 0 2px, transparent 2px 4px); }
body[data-look="tui"] #volFx .knob { width:30px; height:12px; border-radius:0; background:#8dffc0; box-shadow:0 0 8px rgba(141,255,192,.6); }
body[data-look="tui"] #volFx .knob::before { display:none; }
body[data-look="tui"] #volFx .knob.grabbed { width:40px; height:18px; background:#050807; box-shadow:inset 0 0 0 2px #8dffc0, 0 0 12px rgba(141,255,192,.8); transform:translate(-50%,-50%); }
body[data-look="tui"] .hx-arc .tb-shape > * { display:none; }
body[data-look="tui"] .hx-arc .tb-shape { position:relative; width:152px; height:86px; border-radius:0; background:#050807; box-shadow:inset 0 0 0 1px #8dffc0, inset 0 0 0 4px #050807, inset 0 0 0 5px #8dffc0; transition:background .12s; }
body[data-look="tui"] .hx-arc .tb-shape::before { content:'▄▄▄▄'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8dffc0; font:500 20px/1 ui-monospace, "SF Mono", Menlo, monospace; text-shadow:0 0 8px rgba(141,255,192,.5); }
body[data-look="tui"] .hx-arc .tb-shape::after { content:''; position:absolute; right:20px; top:50%; width:11px; height:20px; margin-top:-10px; background:#8dffc0; animation:tbBlink 1s steps(1) infinite; }
body[data-look="tui"] .hx-arc .tb-shape.beem { width:108px; height:62px; }
body[data-look="tui"] .hx-arc .tb-shape.beem::before { content:'▀▀▀'; font-size:15px; }
body[data-look="tui"] .hx-arc.pressed .tb-shape { background:#8dffc0; box-shadow:inset 0 0 0 1px #8dffc0; }
body[data-look="tui"] .hx-arc.pressed .tb-shape::before { color:#050807; text-shadow:none; }
body[data-look="tui"] .hx-arc.pressed .tb-shape::after { animation:none; background:#050807; }

/* ── blocks ── */
body[data-look="blocks"] { --bg:#f2efe8; --text-main:#111111; --text-sub:#111111; --accent:#1d4fb0; --sv-line:rgba(0,0,0,.16); --oled-amber:#ffffff; --screw-metal:#d9d5cc; --screw-dark:#b9b4aa; --knob-hi:#e8442e; --knob-mid:#e8442e; --knob-lo:#e8442e; --g-scale:1.6; --f-ui:ui-rounded,"SF Pro Rounded",system-ui,"Roboto",sans-serif; --hx-r:12px; }
body[data-look="blocks"] #controls, body[data-look="blocks"] #snapbar { background:#fbfaf7; border-radius:28px; box-shadow:0 18px 40px rgba(0,0,0,.16); }
body[data-look="blocks"] #volFx { --ch-col:#e8442e; }
body[data-look="blocks"] #volFx .fader-track { width:14px; border-radius:7px; background:#ebe7de; box-shadow:none; }
body[data-look="blocks"] #volFx .fader-track::before { display:none; }
body[data-look="blocks"] #volFx .fader-track::after { display:block; border-radius:7px; background:var(--ch-col,#e8442e); opacity:.9; }
body[data-look="blocks"] #volFx .knob { width:64px; height:32px; border-radius:16px; background:var(--ch-col,#e8442e); box-shadow:0 3px 0 rgba(0,0,0,.2); }
body[data-look="blocks"] #volFx .knob::before { left:22px; right:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.9); }
body[data-look="blocks"] #volFx .knob.grabbed { transform:translate(-50%, calc(-50% + 3px)); box-shadow:0 0 0 3px #fbfaf7, 0 0 0 5px var(--ch-col,#e8442e); }
body[data-look="blocks"] #volFx .knob.grabbed::before { background:#111; }
body[data-look="blocks"] .hx-arc .tb-shape > * { display:none; }
body[data-look="blocks"] .hx-arc .tb-shape { position:relative; width:146px; height:146px; border-radius:50%; background:#1d4fb0; box-shadow:0 6px 0 #10306e; transition:transform .12s, box-shadow .12s, background .12s; }
body[data-look="blocks"] .hx-arc .tb-shape::before { content:''; position:absolute; left:50%; top:50%; width:22px; height:6px; border-radius:3px; background:#fff; transform:translate(-50%,-50%); }
body[data-look="blocks"] .hx-arc .tb-shape::after { content:none; }
body[data-look="blocks"] .hx-arc .tb-shape.beem { width:96px; height:96px; background:#f2b32c; box-shadow:0 5px 0 #b07f12; }
body[data-look="blocks"] .hx-arc.pressed .tb-shape { transform:translateY(6px); box-shadow:0 0 0 #10306e; background:#f2b32c; }
body[data-look="blocks"] .hx-arc.pressed .tb-shape::before { background:#111; }
body[data-look="blocks"] .hx-arc.pressed .tb-shape.beem { transform:translateY(5px); box-shadow:0 0 0 #b07f12; background:#1d4fb0; }

/* ── 재생 모드 아이콘 색: beem 겉면과 대비가 큰 쪽 (글자색 · 바탕색) ── */
body[data-look="riso"] #btnFreeze svg { color:#16161a; filter:drop-shadow(0 0 1.5px #eae6dc) drop-shadow(0 0 1px #eae6dc); }   /* 겉면 #ff2d78 */
body[data-look="riso"] #btnFreeze .hx-arc.pressed ~ svg { color:#16161a; filter:drop-shadow(0 0 1.5px #eae6dc) drop-shadow(0 0 1px #eae6dc); }   /* 겉면 #ff2d78 */
body[data-look="rams"] #btnFreeze svg { color:#2b2b2b; filter:drop-shadow(0 0 1.5px #c9c7c0) drop-shadow(0 0 1px #c9c7c0); }   /* 겉면 #f0803a */
body[data-look="rams"] #btnFreeze .hx-arc.pressed ~ svg { color:#2b2b2b; filter:drop-shadow(0 0 1.5px #c9c7c0) drop-shadow(0 0 1px #c9c7c0); }   /* 겉면 #d05a19 */
body[data-look="serge"] #btnFreeze svg { color:#16171a; filter:drop-shadow(0 0 1.5px #a4a59f) drop-shadow(0 0 1px #a4a59f); }   /* 겉면 #9fa09b */
body[data-look="serge"] #btnFreeze .hx-arc.pressed ~ svg { color:#16171a; filter:drop-shadow(0 0 1.5px #a4a59f) drop-shadow(0 0 1px #a4a59f); }   /* 겉면 #9fa09b */
body[data-look="phosphor"] #btnFreeze .hx-arc.pressed ~ svg { color:#04060a; filter:drop-shadow(0 0 1.5px #7dffb0) drop-shadow(0 0 1px #7dffb0); }   /* 겉면 #7dffb0 */
body[data-look="op1"] #btnFreeze svg { color:#1d1d1f; filter:drop-shadow(0 0 1.5px #dedbd4) drop-shadow(0 0 1px #dedbd4); }   /* 겉면 #e9e6df */
body[data-look="op1"] #btnFreeze .hx-arc.pressed ~ svg { color:#1d1d1f; filter:drop-shadow(0 0 1.5px #dedbd4) drop-shadow(0 0 1px #dedbd4); }   /* 겉면 #e9e6df */
body[data-look="press"] #btnFreeze svg { color:#1b1a1f; filter:drop-shadow(0 0 1.5px #e9e3d8) drop-shadow(0 0 1px #e9e3d8); }   /* 겉면 #f4efe6 */
body[data-look="press"] #btnFreeze .hx-arc.pressed ~ svg { color:#1b1a1f; filter:drop-shadow(0 0 1.5px #e9e3d8) drop-shadow(0 0 1px #e9e3d8); }   /* 겉면 #eadfcd */
body[data-look="plan"] #btnFreeze svg { color:#eaf2ff; filter:drop-shadow(0 0 1.5px #0f2f57) drop-shadow(0 0 1px #0f2f57); }   /* 겉면 #15406f */
body[data-look="plan"] #btnFreeze .hx-arc.pressed ~ svg { color:#0f2f57; filter:drop-shadow(0 0 1.5px #eaf2ff) drop-shadow(0 0 1px #eaf2ff); }   /* 겉면 #ffd84d */
body[data-look="cockpit"] #btnFreeze svg { color:#ece7da; filter:drop-shadow(0 0 1.5px #141517) drop-shadow(0 0 1px #141517); }   /* 겉면 #2b2d31 */
body[data-look="cockpit"] #btnFreeze .hx-arc.pressed ~ svg { color:#ece7da; filter:drop-shadow(0 0 1.5px #141517) drop-shadow(0 0 1px #141517); }   /* 겉면 #2b2d31 */
body[data-look="baekja"] #btnFreeze svg { color:#172448; filter:drop-shadow(0 0 1.5px #ecebe5) drop-shadow(0 0 1px #ecebe5); }   /* 겉면 #ffffff */
body[data-look="baekja"] #btnFreeze .hx-arc.pressed ~ svg { color:#172448; filter:drop-shadow(0 0 1.5px #ecebe5) drop-shadow(0 0 1px #ecebe5); }   /* 겉면 #ffffff */
body[data-look="swiss"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f2f1ec) drop-shadow(0 0 1px #f2f1ec); }   /* 겉면 #fbfaf6 */
body[data-look="swiss"] #btnFreeze .hx-arc.pressed ~ svg { color:#f2f1ec; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #111 */
body[data-look="cassette"] #btnFreeze svg { color:#1f1d1c; filter:drop-shadow(0 0 1.5px #f1ede6) drop-shadow(0 0 1px #f1ede6); }   /* 겉면 #e2e4e5 */
body[data-look="cassette"] #btnFreeze .hx-arc.pressed ~ svg { color:#1f1d1c; filter:drop-shadow(0 0 1.5px #f1ede6) drop-shadow(0 0 1px #f1ede6); }   /* 겉면 #e2e4e5 */
body[data-look="brut"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #ffc900) drop-shadow(0 0 1px #ffc900); }   /* 겉면 #fff */
body[data-look="brut"] #btnFreeze .hx-arc.pressed ~ svg { color:#111111; filter:drop-shadow(0 0 1.5px #ffc900) drop-shadow(0 0 1px #ffc900); }   /* 겉면 #c6f432 */
body[data-look="bigtype"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f1efe9) drop-shadow(0 0 1px #f1efe9); }   /* 겉면 #f1efe9 */
body[data-look="bigtype"] #btnFreeze .hx-arc.pressed ~ svg { color:#f1efe9; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #c9330f */
body[data-look="product"] #btnFreeze svg { color:#f5f5f7; filter:drop-shadow(0 0 1.5px #000000) drop-shadow(0 0 1px #000000); }   /* 겉면 #1c1c1e */
body[data-look="product"] #btnFreeze .hx-arc.pressed ~ svg { color:#f5f5f7; filter:drop-shadow(0 0 1.5px #000000) drop-shadow(0 0 1px #000000); }   /* 겉면 #2c2c2e */
body[data-look="netart"] #btnFreeze svg { color:#000000; filter:drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff); }   /* 겉면 #c0c0c0 */
body[data-look="netart"] #btnFreeze .hx-arc.pressed ~ svg { color:#000000; filter:drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff); }   /* 겉면 #c0c0c0 */
body[data-look="swissgrid"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f4f3ef) drop-shadow(0 0 1px #f4f3ef); }   /* 겉면 #f4f3ef */
body[data-look="swissgrid"] #btnFreeze .hx-arc.pressed ~ svg { color:#f4f3ef; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #111 */
body[data-look="swissbig"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f4f3ef) drop-shadow(0 0 1px #f4f3ef); }   /* 겉면 #f4f3ef */
body[data-look="swissbig"] #btnFreeze .hx-arc.pressed ~ svg { color:#f4f3ef; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #cc2118 */
body[data-look="swissair"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #fbfbf9) drop-shadow(0 0 1px #fbfbf9); }   /* 겉면 #fbfbf9 */
body[data-look="swissair"] #btnFreeze .hx-arc.pressed ~ svg { color:#fbfbf9; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #111 */
body[data-look="risoposter"] #btnFreeze svg { color:#1a1a1a; filter:drop-shadow(0 0 1.5px #f2ecdf) drop-shadow(0 0 1px #f2ecdf); }   /* 겉면 #f2ecdf */
body[data-look="risoposter"] #btnFreeze .hx-arc.pressed ~ svg { color:#1a1a1a; filter:drop-shadow(0 0 1.5px #f2ecdf) drop-shadow(0 0 1px #f2ecdf); }   /* 겉면 #f2ecdf */
body[data-look="risodot"] #btnFreeze svg { color:#1a1a1a; filter:drop-shadow(0 0 1.5px #f3ede0) drop-shadow(0 0 1px #f3ede0); }   /* 겉면 #f3ede0 */
body[data-look="risodot"] #btnFreeze .hx-arc.pressed ~ svg { color:#f3ede0; filter:drop-shadow(0 0 1.5px #1a1a1a) drop-shadow(0 0 1px #1a1a1a); }   /* 겉면 #3255a4 */
body[data-look="rothko"] #btnFreeze svg { color:#f3e2c7; filter:drop-shadow(0 0 1.5px #3a0e10) drop-shadow(0 0 1px #3a0e10); }   /* 겉면 #8a3226 */
body[data-look="rothko"] #btnFreeze .hx-arc.pressed ~ svg { color:#3a0e10; filter:drop-shadow(0 0 1.5px #f3e2c7) drop-shadow(0 0 1px #f3e2c7); }   /* 겉면 #f4a259 */
body[data-look="amber"] #btnFreeze svg { color:#ffb000; filter:drop-shadow(0 0 1.5px #0c0700) drop-shadow(0 0 1px #0c0700); }   /* 겉면 #0c0700 */
body[data-look="amber"] #btnFreeze .hx-arc.pressed ~ svg { color:#0c0700; filter:drop-shadow(0 0 1.5px #ffb000) drop-shadow(0 0 1px #ffb000); }   /* 겉면 #ffb000 */
body[data-look="teletext"] #btnFreeze svg { color:#000000; filter:drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff); }   /* 겉면 #00ffff */
body[data-look="teletext"] #btnFreeze .hx-arc.pressed ~ svg { color:#000000; filter:drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff); }   /* 겉면 #ffffff */
body[data-look="catalog"] #btnFreeze svg { color:#e8e8e5; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #2f6fd0 */
body[data-look="catalog"] #btnFreeze .hx-arc.pressed ~ svg { color:#e8e8e5; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #111 */
body[data-look="field"] #btnFreeze svg { color:#161618; filter:drop-shadow(0 0 1.5px #f2f2f0) drop-shadow(0 0 1px #f2f2f0); }   /* 겉면 #3d8bff */
body[data-look="field"] #btnFreeze .hx-arc.pressed ~ svg { color:#161618; filter:drop-shadow(0 0 1.5px #f2f2f0) drop-shadow(0 0 1px #f2f2f0); }   /* 겉면 #f2f2f0 */
body[data-look="risozine"] #btnFreeze svg { color:#141414; filter:drop-shadow(0 0 1.5px #e9e7e1) drop-shadow(0 0 1px #e9e7e1); }   /* 겉면 #fbfaf6 */
body[data-look="risozine"] #btnFreeze .hx-arc.pressed ~ svg { color:#141414; filter:drop-shadow(0 0 1.5px #e9e7e1) drop-shadow(0 0 1px #e9e7e1); }   /* 겉면 #ffe800 */
body[data-look="albers"] #btnFreeze svg { color:#2b1508; filter:drop-shadow(0 0 1.5px #cf9a3a) drop-shadow(0 0 1px #cf9a3a); }   /* 겉면 #e9c46d */
body[data-look="albers"] #btnFreeze .hx-arc.pressed ~ svg { color:#2b1508; filter:drop-shadow(0 0 1.5px #cf9a3a) drop-shadow(0 0 1px #cf9a3a); }   /* 겉면 #e9c46d */
body[data-look="kelly"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f6f5f1) drop-shadow(0 0 1px #f6f5f1); }   /* 겉면 #fff */
body[data-look="kelly"] #btnFreeze .hx-arc.pressed ~ svg { color:#f6f5f1; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #1c6b43 */
body[data-look="tui"] #btnFreeze svg { color:#8dffc0; filter:drop-shadow(0 0 1.5px #050807) drop-shadow(0 0 1px #050807); }   /* 겉면 #050807 */
body[data-look="tui"] #btnFreeze .hx-arc.pressed ~ svg { color:#050807; filter:drop-shadow(0 0 1.5px #8dffc0) drop-shadow(0 0 1px #8dffc0); }   /* 겉면 #8dffc0 */
body[data-look="blocks"] #btnFreeze svg { color:#111111; filter:drop-shadow(0 0 1.5px #f2efe8) drop-shadow(0 0 1px #f2efe8); }   /* 겉면 #f2b32c */
body[data-look="blocks"] #btnFreeze .hx-arc.pressed ~ svg { color:#f2efe8; filter:drop-shadow(0 0 1.5px #111111) drop-shadow(0 0 1px #111111); }   /* 겉면 #1d4fb0 */