/* Surface Studio — studio chrome: header, stage, panel, the X-Touch, the rig, the touch display framework and its widgets, views. */
:root { --bg: #0c0d10; --bg2: #121419; --panel: #15171c; --line: #24272e; --line2: #2f333b;
  --tx: #e8eaef; --dim: #8b91a0; --dim2: #5f6573;
  --A: #4cd9ef; --B: #ffc44d; --hot: #ff5a3c;
  --ui: 'Inter Tight', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --silk: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--tx); font: 14px/1.4 var(--ui);
  display: grid; grid-template-columns: minmax(0, 1fr) 352px; grid-template-rows: 52px minmax(240px, 1fr) auto;
  grid-template-areas: "top top" "stage panel" "surf panel"; overflow: hidden;
  -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
kbd { font: 600 11px var(--mono); background: #20232a; border: 1px solid #333843; border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: #d6d9e0; }
/* ---------------- header ---------------- */
.top { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); background: #0f1014; }
.logo { display: flex; align-items: center; gap: 9px; font: 700 15px var(--ui); letter-spacing: -0.01em; white-space: nowrap; }
.logo svg { fill: #555b68; }
.logo svg .cap { fill: var(--A); }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; height: 100%; align-items: stretch; }
.tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: none; cursor: pointer; color: var(--dim); position: relative; white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--tx); }
.tab .tab-n { font: 600 10px var(--mono); color: var(--dim2); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
.tab .tab-ab { display: none; }
.tab.act { color: var(--tx); }
.tab.act::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--A); border-radius: 2px; }
.tab.act .tab-n { color: var(--A); border-color: color-mix(in oklab, var(--A) 50%, transparent); }
.hdr-right { display: flex; gap: 8px; align-items: center; }
.seg-ctl { display: flex; background: #1a1c22; border: 1px solid var(--line2); border-radius: 8px; padding: 2px; }
.seg-ctl button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: var(--dim); font-size: 12.5px; font-weight: 500; }
.seg-ctl button.act { background: #2b2f38; color: var(--tx); }
.seg-ctl button:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line2); background: #1a1c22; cursor: pointer; color: var(--dim); font-weight: 700; }
.icon-btn:hover { color: var(--tx); }
/* ---------------- main ---------------- */
.main { grid-area: stage; display: grid; min-height: 0; min-width: 0; }
.stage { position: relative; min-height: 0; background: radial-gradient(120% 90% at 50% 0%, #15171d 0%, #0b0c0f 70%); overflow: hidden; }
.panes { position: absolute; inset: 0; display: grid; gap: 12px; padding: 14px; }
.panes.split { grid-template-columns: 1fr 1fr; }
.pane { position: relative; border-radius: 12px; overflow: hidden; background: #08090b; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.panes.split .pane { cursor: pointer; }
.pane.slot-A.act { box-shadow: 0 0 0 2px var(--A); }
.pane.slot-B.act { box-shadow: 0 0 0 2px var(--B); }
.pane-tag { position: absolute; z-index: 5; bottom: 10px; left: 12px; font: 700 13px var(--mono); padding: 2px 9px; border-radius: 6px; background: rgba(0,0,0,.6); }
.slot-A .pane-tag { color: var(--A); }
.slot-B .pane-tag { color: var(--B); }
.pane-inner { position: absolute; inset: 0; }
.frame { position: absolute; left: 50%; top: 50%; transform-origin: center; overflow: hidden; border-radius: 3px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.mod-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; z-index: 10; left: 26px; right: 26px; top: 24px; display: flex; justify-content: space-between; pointer-events: none; gap: 12px; }
.panes.split ~ .hud { top: 24px; }
.hud-slot, .hud-info { background: rgba(10,11,14,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.hud-slot b { font: 700 13px var(--mono); margin-right: 4px; }
.hud-slot.A b { color: var(--A); }
.hud-slot.B b { color: var(--B); }
.hud-slot.mid b { background: linear-gradient(90deg, var(--A), var(--B)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-info span { color: var(--tx); }
.hud-info .fine { color: #ffb02e; font-weight: 700; }
.toast { position: absolute; z-index: 11; left: 50%; top: 22px; transform: translate(-50%, -8px); opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
  display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 4px 14px; background: rgba(12,13,17,.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 10px 16px 12px; min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .t-msg { grid-column: 1 / -1; font-weight: 600; }
.toast .t-lab { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.toast .t-val { font: 600 18px var(--mono); }
.toast .t-tag { font: 600 10px var(--mono); color: var(--hot); text-transform: uppercase; }
.toast .t-bar { grid-column: 1 / -1; height: 3px; background: #262a32; border-radius: 2px; overflow: hidden; }
.toast .t-bar i { display: block; height: 100%; background: var(--A); }
.toast .t-bar.morph i { background: linear-gradient(90deg, var(--A), var(--B)); }
/* ---------------- panel ---------------- */
.panel { grid-area: panel; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.card { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; flex: none; }
.card.grow { flex: none; }
.plist { max-height: 260px; }
.mapl { max-height: none; }
.card h4 { margin: 0 0 9px; font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.legend { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10.5px; color: var(--dim2); }
.legend i { font-style: normal; }
.legend .claude { color: #c9a6ff; }
.legend .you { color: var(--A); margin-left: 6px; }
.ab-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.abt { border: 1px solid var(--line2); background: #1b1e24; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; text-align: left; }
.abt b { font: 700 20px var(--mono); }
.abt small { color: var(--dim2); font-size: 11px; }
.ab-A b { color: var(--A); }
.ab-B b { color: var(--B); }
.abt.act.ab-A { border-color: var(--A); background: color-mix(in oklab, var(--A) 10%, #1b1e24); }
.abt.act.ab-B { border-color: var(--B); background: color-mix(in oklab, var(--B) 10%, #1b1e24); }
.abt.act small { color: var(--tx); }
.morphbar { margin: 10px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.mb-track { height: 4px; border-radius: 2px; background: #262a32; overflow: hidden; }
.mb-fill { height: 100%; background: linear-gradient(90deg, var(--A), var(--B)); }
.morphbar span { font-size: 11px; color: var(--dim2); }
.ab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-actions button, .wide-btn { border: 1px solid var(--line2); background: #1b1e24; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; color: #cfd3db; }
.ab-actions button:hover, .wide-btn:hover, .pi:hover, .mi:hover, .mr:hover { background: #22262e; }
.plist, .mlist, .mapl { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #2c3038 transparent; }
.pi { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.pi.sel { border-color: var(--line2); background: #1d2027; }
.pi-src { font-size: 11px; line-height: 18px; }
.pi-src.claude { color: #c9a6ff; }
.pi-src.you { color: var(--A); }
.pi-main { flex: 1; min-width: 0; }
.pi-main b { font-weight: 600; font-size: 13px; display: block; }
.pi-main small { color: var(--dim2); font-size: 11.5px; display: block; line-height: 1.3; }
.pi-del { color: var(--dim2); padding: 0 4px; border-radius: 4px; }
.pi-del:hover { color: var(--hot); }
.mlist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 92px; }
.mi { border: 1px solid var(--line2); background: #1b1e24; border-radius: 8px; padding: 3px 8px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.mi span { color: #ffd25e; font-weight: 600; }
.mi small { color: var(--dim2); font-size: 10.5px; }
.empty-note { color: var(--dim2); font-size: 12px; line-height: 1.45; }
.mr { display: grid; grid-template-columns: 54px 1fr auto; gap: 8px; align-items: baseline; width: 100%; border: 0; background: none; border-radius: 6px; padding: 3px 6px; cursor: pointer; text-align: left; }
.mr.focus { background: #1f2430; box-shadow: inset 2px 0 0 var(--A); }
.mr-tag { font: 600 10px var(--mono); color: var(--dim2); }
.mr-l { font-size: 12.5px; color: #cfd3db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-v { font: 500 11px var(--mono); color: var(--A); }
.map-page { font: 600 10px var(--mono); color: var(--dim2); margin: 6px 6px 2px; text-transform: uppercase; }
.panel-foot { padding: 10px 14px; }
.wide-btn { width: 100%; }
#jsonOut { display: none; width: 100%; height: 120px; margin-top: 8px; background: #0e1014; color: #cfd3db; border: 1px solid var(--line2); border-radius: 8px; font: 11px var(--mono); }
#jsonOut.open { display: block; }
/* ---------------- surface ---------------- */
.surface-wrap { grid-area: surf; border-top: 1px solid var(--line); background: linear-gradient(#0e0f12, #08090b); padding: 8px 8px 10px; display: flex; gap: 8px; align-items: stretch; min-width: 0; min-height: 292px; }
.surface { align-items: center; }
body.nosurf .surface-wrap { display: none; }
.surface { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
.sf-scale { position: relative; }
.chassis { position: absolute; left: 0; top: 0; transform-origin: top left; display: flex; gap: 14px; padding: 16px 18px; width: max-content;
  background: linear-gradient(180deg, #3a3c42 0%, #2a2c31 3%, #222328 100%); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.6); user-select: none; -webkit-user-select: none; touch-action: none; }
.strips { display: flex; background: #1a1b1f; border-radius: 10px; padding: 10px 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05); }
.strip { width: 82px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.strip + .strip::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.035); }
.strip.master { width: 96px; background: #1a1b1f; border-radius: 10px; padding: 10px 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
/* knobs */
.kn { --size: 52px; --cap: 32px; --rr: -24px; width: var(--size); height: var(--size); position: relative; cursor: ns-resize; flex: none; touch-action: none; }
.kn.sm { --size: 48px; --cap: 28px; --rr: -22px; }
.kn-led { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #3b1610; }
.kn-led.on { background: #ff5a32; box-shadow: 0 0 5px #ff5a32, 0 0 1px #ffd0c0; }
.kn-cap { position: absolute; left: 50%; top: 50%; width: var(--cap); height: var(--cap); margin: calc(var(--cap) / -2); border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #62666f 0%, #33363d 45%, #1d1f23 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.18), 0 0 0 2px #121316; }
.kn-cap::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.25) 0 6deg, rgba(255,255,255,.04) 6deg 12deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }
.kn-ind { position: absolute; left: calc(50% - 1px); top: 3px; width: 2px; height: 9px; border-radius: 1px; background: #f1f1f1; transform-origin: 1px calc(var(--cap) / 2 - 3px); }
.kn.empty .kn-cap { filter: brightness(.7); }
.kn.focus .kn-cap { box-shadow: 0 3px 6px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.18), 0 0 0 2px var(--A); }
.klabel { height: 26px; text-align: center; line-height: 1.15; }
.klabel b { display: block; font: 600 11px var(--silk); letter-spacing: .06em; text-transform: uppercase; color: #d4d7de; }
.klabel span { display: block; font: 500 9.5px var(--mono); color: #7e8595; }
/* buttons */
.bt-w { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.silk { font: 600 9.5px var(--silk); letter-spacing: .07em; color: #9ba1ad; height: 11px; line-height: 11px; max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.bt-w.empty .silk { color: #4c515b; }
.bt { --led: #ff3b30; width: 44px; height: 20px; border: 0; border-radius: 4px; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in oklab, var(--led) 14%, #3a3d44), color-mix(in oklab, var(--led) 10%, #26282d));
  box-shadow: 0 2px 0 #0d0e10, inset 0 1px 0 rgba(255,255,255,.12); display: grid; place-items: center; transition: background .08s, box-shadow .08s; }
.bt span { font: 700 10px var(--silk); color: #c7cbd3; letter-spacing: .05em; }
.bt.down { transform: translateY(1px); box-shadow: 0 1px 0 #0d0e10, inset 0 1px 0 rgba(255,255,255,.08); }
.bt.on { background: linear-gradient(180deg, color-mix(in oklab, var(--led) 70%, white 30%), var(--led)); box-shadow: 0 2px 0 #0d0e10, 0 0 14px color-mix(in oklab, var(--led) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.bt.on span { color: #121212; }
.bt.blink { animation: blink .7s steps(2, jump-none) infinite; }
@keyframes blink {
  0% { background: linear-gradient(180deg, color-mix(in oklab, var(--led) 70%, white 30%), var(--led)); box-shadow: 0 0 14px var(--led); }
  100% {  }
}
.bt-w.empty .bt { filter: brightness(.75); }
.c-red { --led: #ff3b30; }
.c-amber { --led: #ffae2b; }
.c-green { --led: #3ee07a; }
.c-blue { --led: #5aa9ff; }
.c-yellow { --led: #ffc44d; }
.c-cyan { --led: #4cd9ef; }
.c-white { --led: #e9edf5; }
/* faders */
.fd { position: relative; width: 62px; height: var(--travel); cursor: ns-resize; flex: none; touch-action: none; }
.fd-slot { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: #050506; border-radius: 3px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.06); }
.fd-ticks { position: absolute; left: 4px; right: 4px; top: 17px; bottom: 17px; display: flex; flex-direction: column; justify-content: space-between; }
.fd-ticks i { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18) 0 34%, transparent 34% 66%, rgba(255,255,255,.18) 66%); }
.fd-ticks i:nth-child(5n+1) { background: linear-gradient(90deg, rgba(255,255,255,.35) 0 38%, transparent 38% 62%, rgba(255,255,255,.35) 62%); }
.fd-cap { position: absolute; left: 50%; top: 0; width: 40px; height: 34px; margin-left: -20px; border-radius: 4px;
  background: linear-gradient(180deg, #e3e5e9 0%, #b5b9c0 30%, #8d9199 48%, #c7cad0 52%, #9a9ea6 80%, #7b7f87 100%);
  box-shadow: 0 5px 8px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .42s cubic-bezier(.25,.8,.25,1); will-change: transform; }
.fd-cap i { position: absolute; left: 3px; right: 3px; top: 16px; height: 2px; background: #1b1c1f; border-radius: 1px; }
.fd.drag .fd-cap { transition: none; }
.fd.focus .fd-cap, .fd.drag .fd-cap { box-shadow: 0 5px 8px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--A); }
.fd.empty .fd-cap { filter: brightness(.6); }
.fval { height: 14px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; font: 500 9.5px var(--mono); color: #8fd8ea; white-space: nowrap; text-align: center; }
.mval { color: #e8e1c4; }
.ping { animation: ping .7s ease-out; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(76,217,239,.9); }
  100% { box-shadow: 0 0 0 16px rgba(76,217,239,0); }
}
.kn.ping, .fd.ping { border-radius: 12px; }
/* compact specifics */
.tape { width: 74px; height: 22px; margin-top: 3px; background: linear-gradient(180deg, #f3ead0, #e6dbb9); color: #2b2a26; font: 600 15px/22px 'Caveat', cursive; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; transform: rotate(-1.2deg); box-shadow: 0 1px 2px rgba(0,0,0,.4); clip-path: polygon(2% 0, 98% 4%, 100% 100%, 0 96%); }
.strip:nth-child(2n) .tape { transform: rotate(1deg); }
.strip:nth-child(3n) .tape { transform: rotate(-0.4deg); }
.tape.blank { opacity: .12; }
.rblock { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px; background: #1a1b1f; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.kgrid { display: grid; grid-template-columns: repeat(4, 66px); gap: 4px 6px; }
.kcell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin-top: 6px; }
.bgrid .bt { width: 62px; height: 28px; }
.brandplate { margin-top: auto; font: 600 13px var(--silk); letter-spacing: .28em; color: #6f747e; }
.brandplate b { color: #cfd2d8; }
.brandplate em { display: block; font-style: normal; font-size: 10px; letter-spacing: .14em; color: #555a64; }
.mtitle { font: 700 11px var(--silk); letter-spacing: .14em; color: #c9ccd3; }
.mwrap { display: flex; gap: 2px; }
.mends { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; font: 700 13px var(--mono); }
.mends span:first-child { color: var(--B); }
.mends span:last-child { color: var(--A); }
/* full specifics */
.chassis.full .strip { gap: 4px; }
.lcd { width: 76px; height: 40px; border-radius: 3px; padding: 3px 2px; font: 18px/16px 'VT323', monospace; color: #111; text-align: center; white-space: pre; overflow: hidden; background: #141518; position: relative;
  box-shadow: inset 0 0 0 2px #0a0a0b, 0 1px 0 rgba(255,255,255,.05); margin-bottom: 2px; transition: background .25s; }
.lcd::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px); pointer-events: none; }
.lcd div { height: 16px; overflow: hidden; }
.lcd.cyan { background: #5fe1f3; }
.lcd.yellow { background: #ffd35e; }
.lcd.white { background: #eef0f2; }
.lcd.off { color: transparent; }
.rpanel { width: 352px; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: #1a1b1f; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.disp { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: auto 1fr; gap: 3px 14px; background: #070708; border-radius: 6px; padding: 7px 10px 9px; box-shadow: inset 0 1px 4px #000; }
.dlab { font: 600 8.5px var(--silk); letter-spacing: .14em; color: #5d626c; }
.seggrp { display: flex; gap: 3px; }
.seg { width: 15px; height: 25px; transform: skewX(-6deg); }
.seg path, .seg circle { fill: #2a0f0b; }
.seg path.on { fill: #ff4326; filter: drop-shadow(0 0 2px #ff4326); }
.fkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.fkeys .bt { width: 66px; height: 24px; }
.nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nav .bt { width: 56px; height: 22px; }
.lower { display: grid; grid-template-columns: 1fr 118px; grid-template-rows: auto 1fr; gap: 8px 12px; }
.transport { grid-column: 1 / 3; display: flex; justify-content: space-between; }
.bt-w.wide .bt { width: 58px; height: 28px; }
.bt-w.wide .bt span { font-size: 13px; }
.cursor { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 6px; }
.cursor .bt { width: 52px; height: 26px; }
.cursor .bt span { font-size: 13px; }
.jog { width: 112px; height: 112px; border-radius: 50%; position: relative; cursor: grab; touch-action: none; justify-self: center;
  background: radial-gradient(circle at 40% 32%, #555962 0%, #2c2f35 45%, #18191d 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.65), inset 0 0 0 5px #2a2c31, inset 0 0 0 6px #0f1012, inset 0 1px 2px rgba(255,255,255,.25); }
.jog-dimple { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); }
.jog-dimple::after { content: ''; position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #111, #3a3d44); box-shadow: inset 0 2px 3px #000, 0 1px 0 rgba(255,255,255,.12); }
.jog-lab { position: absolute; left: -20px; right: -20px; bottom: -15px; text-align: center; font: 600 8.5px var(--silk); letter-spacing: .12em; color: #6d727c; }
/* ---------------- help ---------------- */
.help { position: fixed; inset: 0; z-index: 100; background: rgba(4,5,7,.7); backdrop-filter: blur(4px); display: none; place-items: center; padding: 20px; }
.help.open { display: grid; }
.help-card { position: relative; max-width: 860px; max-height: 100%; overflow: auto; background: #14161b; border: 1px solid var(--line2); border-radius: 16px; padding: 26px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.help-card h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.help-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 18px 0 8px; }
.lede { color: #bfc4ce; margin: 0; max-width: 64ch; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.help ul { margin: 0; padding-left: 18px; color: #cfd3db; }
.help li { margin: 4px 0; }
.keys td { padding: 3px 12px 3px 0; color: #cfd3db; vertical-align: top; }
.keys td:first-child { white-space: nowrap; }
.fine-print { color: var(--dim2); font-size: 12px; margin: 20px 0 0; }
.help-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; color: var(--dim); font-size: 24px; cursor: pointer; }
@media (max-width: 1100px) {
  .overview { display: none; }
}
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-areas: "top" "stage" "surf"; }
  .panel { display: none; }
  .logo span { display: none; }
}
/* ---------------- v2: pages, master detents, column mapping ---------------- */
.page-tabs { position: absolute; z-index: 10; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(10,11,14,.78); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.page-tabs.hidden { display: none; }
.pt-lab { font: 700 10px var(--silk); letter-spacing: .14em; color: var(--dim2); padding: 0 8px 0 6px; line-height: 1.1; }
.pt-lab small { display: block; font: 500 9px var(--ui); letter-spacing: 0; text-transform: none; }
.pt { border: 0; background: none; color: var(--dim); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; display: flex; gap: 7px; align-items: baseline; }
.pt b { font: 600 10px var(--mono); color: var(--dim2); }
.pt:hover { color: var(--tx); }
.pt.act { background: #262a33; color: var(--tx); box-shadow: inset 0 -2px 0 var(--A); }
.pt.act b { color: var(--A); }
.toast .t-cols { grid-column: 1 / -1; font-size: 11.5px; color: var(--dim); }
.mpages { position: relative; width: 44px; flex: none; }
.mpages span { position: absolute; right: 2px; transform: translateY(-50%); font: 700 10px var(--silk); letter-spacing: .08em; color: #6b707a; text-transform: uppercase; white-space: nowrap; padding-right: 8px; }
.mpages span::after { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 1px; background: #6b707a; }
.mpages span.act { color: var(--A); }
.mpages span.act::after { background: var(--A); width: 7px; }
.strip.master { width: 112px; }
.mwrap { gap: 0; margin-left: -12px; }
.klabel.one { height: 14px; margin-top: -2px; }
.klabel.one b { font-size: 10px; color: #aeb3bd; }
.map-col { display: flex; align-items: center; gap: 8px; margin: 10px 4px 3px; font: 700 11px var(--ui); letter-spacing: .04em; color: var(--tx); text-transform: uppercase; }
.map-col:first-child { margin-top: 2px; }
.mc-n { font: 700 10px var(--mono); color: #0b0c0f; background: var(--A); border-radius: 4px; padding: 0 5px; }
.mr { grid-template-columns: 50px 1fr auto; padding-left: 10px; }
.mr-empty { color: var(--dim2); padding: 2px 12px; font-size: 12px; }
.chassis.full .bt-w .silk { max-width: 74px; }
/* ---------------- v4: overview = nested navbar (left of the surface) ---------------- */
.overview { flex: 0 0 clamp(380px, 33vw, 540px); position: relative; background: #0c0d10; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ov { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--ui); }
.ov-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 6px; font-size: 10px; color: var(--dim2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov-top b { color: var(--tx); font-weight: 600; }
.ov-row { border-bottom: 1px solid #1c1e23; cursor: pointer; flex: none; }
.ov-row.open { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; cursor: default; background: #101217; box-shadow: inset 2px 0 0 var(--A); }
.ov-row:not(.open):hover { background: #14161b; }
.ov-row:not(.open) .ov-rh { padding-top: 2px; }
.ov-rh { display: flex; align-items: baseline; gap: 5px; padding: 1px 6px 0; font-size: 11px; font-weight: 600; color: #cfd3db; white-space: nowrap; }
.ov-rh b { font: 700 10px var(--mono); color: var(--dim2); }
.ov-row.open .ov-rh, .ov-row.open .ov-rh b { color: var(--A); }
.ov-sum { margin-left: auto; font: 500 9.5px var(--mono); color: var(--dim2); }
.ov-sum em { font-style: normal; color: #ff9a82; }
.ov-sum i { font-style: normal; color: var(--B); }
/* collapsed page: one line per column */
.ov-mini { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 3px; padding: 0 6px 3px; }
.ov-mc { min-width: 0; }
.ov-mt { display: flex; justify-content: space-between; gap: 2px; font: 600 10.5px/11px var(--silk); white-space: nowrap; }
.ov-mn { color: #9aa0ad; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ov-cc { font: 600 8.5px var(--mono); color: #ff9a82; }
.ov-mv { font: 500 9px/10px var(--mono); color: #7f8796; white-space: nowrap; flex: none; }
/* open page: columns of settings */
.ov-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 3px; padding: 1px 6px 3px; overflow: hidden; }
.ov-col { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ov-col.empty { opacity: .35; }
.ov-ch { font-size: 10px; font-weight: 700; color: var(--tx); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #23262d; padding-bottom: 1px; margin-bottom: 1px; }
.ov-ch b { font: 700 9px var(--mono); color: var(--dim2); margin-right: 3px; }
.ov-ch.muted { color: #6b707b; text-decoration: line-through; }
.ov-ch.soloed { color: var(--B); }
.ov-ln { min-width: 0; border-radius: 3px; padding: 0 2px 1px; margin: 0 -2px; cursor: pointer; }
.ov-ln:hover { background: #1a1d24; }
.ov-ln.focus { background: rgba(76,217,239,.16); }
.ov-l { display: block; font: 600 10.5px/11px var(--silk); letter-spacing: .01em; color: #9aa0ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-vr { display: flex; align-items: center; gap: 3px; min-width: 0; height: 10px; }
.ov-v { font: 500 9px/10px var(--mono); color: #6f7685; flex: none; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.ov-ln.chg .ov-v { color: #e8eaef; }
.ov-ln.on .ov-v { color: var(--A); font-weight: 700; }
.ov-ln.ab .ov-vr::after { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--B); }
.ov-ln.focus .ov-l { color: var(--tx); }
.ov-bar { display: block; flex: 1 1 auto; min-width: 6px; height: 3px; background: #23262d; border-radius: 1.5px; overflow: hidden; position: relative; }
.ov-bar i { display: block; height: 100%; background: #4d8f9c; }
.ov-ln.chg .ov-bar i, .ov-mc .ov-bar i { background: var(--A); }
.ov-bar.bi { background: linear-gradient(90deg, #23262d calc(50% - .5px), #3a3f48 calc(50% - .5px) calc(50% + .5px), #23262d calc(50% + .5px)); position: relative; }
.ov-bar.bi i { position: absolute; top: 0; }
.ov-bar.none { visibility: hidden; }
/* ---------------- v3: right panel ---------------- */
.abcard { padding: 10px 12px 8px; }
.ab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-row .ab-tiles { grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-row .abt { padding: 6px 8px; flex-direction: column; gap: 0; align-items: flex-start; }
.ab-row .abt b { font-size: 17px; line-height: 1; }
.ab-row .abt small { font-size: 10px; }
.ab-row .ab-actions { grid-template-columns: 1fr 1fr; gap: 4px; }
.ab-row .ab-actions button { padding: 3px 4px; font-size: 11.5px; }
.abcard .morphbar { margin: 8px 0 0; }
.mb-track { height: 8px; border-radius: 4px; cursor: ew-resize; }
#focusCard { flex: 0 1 auto; max-height: 54%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2c3038 transparent; background: #171a20; padding: 10px 12px 12px; }
.panel-scroll { flex: 1 1 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #2c3038 transparent; }
.fx-kicker { font: 600 10px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; gap: 6px; }
.fx-kicker span:last-child { color: var(--dim2); letter-spacing: .04em; text-transform: none; }
.fx-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 2px; }
.fx-title h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.fx-title .big { font: 700 20px var(--mono); color: var(--A); white-space: nowrap; }
.fx-loc { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.chip { font: 600 10px var(--mono); padding: 1px 6px; border-radius: 4px; background: #22262e; color: #c3c8d1; white-space: nowrap; }
.chip.c-a { background: color-mix(in oklab, var(--A) 20%, #1b1e24); color: var(--A); }
.chip.c-b { background: color-mix(in oklab, var(--B) 20%, #1b1e24); color: var(--B); }
.chip.hot { background: color-mix(in oklab, var(--hot) 25%, #1b1e24); color: #ff9a82; }
.fx-desc { color: #cdd1d9; font-size: 12.5px; line-height: 1.45; margin: 0 0 9px; }
.fx-meter { position: relative; height: 22px; margin: 4px 4px 24px; }
.fx-meter .trk { position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: #262a32; }
.fx-meter .fil { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2c8fa1, var(--A)); }
.fx-meter .mk { position: absolute; top: 0; width: 2px; height: 22px; margin-left: -1px; }
.fx-meter .mk::after { content: attr(data-l); position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font: 700 9px var(--mono); }
.fx-meter .mk.a { background: var(--A); }
.fx-meter .mk.a::after { color: var(--A); }
.fx-meter .mk.b { background: var(--B); }
.fx-meter .mk.b::after { color: var(--B); }
.fx-meter .mk.d { background: #8b91a0; height: 14px; top: 4px; }
.fx-meter .mk.d::after { color: #8b91a0; top: 18px; }
.fx-opts { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 10px; }
.fx-opt { font: 600 11px var(--ui); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line2); color: var(--dim); position: relative; }
.fx-opt.cur { border-color: var(--A); color: var(--tx); background: color-mix(in oklab, var(--A) 14%, transparent); }
.fx-opt sup { font: 700 8px var(--mono); margin-left: 3px; }
.fx-opt sup.a { color: var(--A); }
.fx-opt sup.b { color: var(--B); }
.fx-opt sup.d { color: #8b91a0; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 11.5px; margin: 0 0 8px; }
.fx-grid div { display: flex; gap: 6px; min-width: 0; align-items: baseline; }
.fx-grid div.w { grid-column: 1 / -1; }
.fx-grid dt { color: var(--dim2); white-space: nowrap; flex: none; min-width: 54px; }
.fx-grid dd { flex: 1; min-width: 0; margin: 0; font-family: var(--mono); font-size: 11px; color: #d6d9e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sec { font: 700 9.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); margin: 9px 0 4px; }
.fx-how { margin: 0; padding-left: 16px; color: #c3c8d1; font-size: 11.5px; line-height: 1.5; }
.fx-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fx-tbl td { padding: 1px 4px 1px 0; color: #c3c8d1; }
.fx-tbl td:last-child { text-align: right; font-family: var(--mono); font-size: 11px; color: #d6d9e0; }
.fx-tbl tr.eq td { color: var(--A); }
.fx-spark { width: 100%; height: 36px; display: block; background: #12141a; border-radius: 6px; }
.fx-spark polyline { fill: none; stroke: var(--A); stroke-width: 1.5; }
.fx-spark .base { stroke: #2a2e36; stroke-dasharray: 2 3; }
.fx-sib { display: grid; grid-template-columns: 46px 1fr auto; gap: 1px 6px; font-size: 11.5px; }
.fx-sib .t { font: 600 9.5px var(--mono); color: var(--dim2); }
.fx-sib .v { font: 500 11px var(--mono); color: #d6d9e0; }
.fx-sib button { all: unset; cursor: pointer; color: #c3c8d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sib button:hover { color: var(--A); }
.fx-empty { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.pdetail { display: flex; flex-direction: column; gap: 6px; }
.pd-col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pd-head { display: flex; align-items: center; gap: 7px; padding: 4px 8px; background: #1a1d23; font: 700 11.5px var(--ui); letter-spacing: .03em; text-transform: uppercase; }
.pd-head .st { margin-left: auto; font: 600 9.5px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim2); }
.pd-head .st.solo { color: var(--B); }
.pd-head .st.mute { color: var(--hot); }
.pd-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; gap: 0 6px; padding: 4px 8px 5px; width: 100%; cursor: pointer; border-top: 1px solid #1b1d22; }
.pd-row:hover { background: #1b1e25; }
.pd-row.focus { background: #1f2430; box-shadow: inset 2px 0 0 var(--A); }
.pd-tag { font: 700 9px var(--mono); color: var(--dim2); padding-top: 2px; }
.pd-l { font-size: 12.5px; font-weight: 600; color: #dfe2e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-v { font: 600 11.5px var(--mono); color: var(--A); white-space: nowrap; }
.pd-d { grid-column: 2 / 4; font-size: 11px; line-height: 1.35; color: #8e94a2; }
.pd-bar { grid-column: 2 / 4; height: 3px; border-radius: 2px; background: #262a32; margin: 3px 0 2px; overflow: hidden; }
.pd-bar i { display: block; height: 100%; background: var(--A); }
.pd-none { padding: 4px 8px; color: var(--dim2); font-size: 11px; border-top: 1px solid #1b1d22; }
.lcd.inv-top .l1 { background: #111; color: var(--inv, #5fe1f3); }
.lcd.yellow.inv-top .l1 { color: #ffd35e; }
.lcd.white.inv-top .l1 { color: #eef0f2; }
/* ---------------- v5: document tabs (brief, label sheet) ---------------- */
.tab-sep { width: 1px; background: var(--line2); margin: 14px 6px; flex: none; }
.tab-doc[data-doc="brief"] { color: #c9a6ff; }
.tab-doc.act::after { background: #c9a6ff; }
.docview { position: absolute; inset: 0; z-index: 20; background: #0d0f13; display: flex; flex-direction: column; }
.docview[hidden] { display: none; }
.doc-bar { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.doc-bar span { flex: 1; }
.doc-bar button { border: 1px solid var(--line2); background: #1d2027; color: var(--tx); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.doc-bar button:hover { background: #262a33; }
.doc { flex: 1; overflow: auto; padding: 18px 28px 40px; font-size: 14px; line-height: 1.55; color: #d4d8e0; scrollbar-width: thin; scrollbar-color: #2c3038 transparent; user-select: text; }
.doc > * { max-width: 920px; }
.doc h1 { font-size: 22px; margin: 4px 0 10px; color: var(--tx); letter-spacing: -.01em; }
.doc h2 { font-size: 15px; margin: 22px 0 6px; color: var(--tx); }
.doc p { margin: 6px 0; max-width: 78ch; }
.doc ul, .doc ol { margin: 6px 0; padding-left: 22px; max-width: 80ch; }
.doc li { margin: 3px 0; }
.doc li.sub { margin-left: 18px; list-style: circle; }
.doc code { font: 12.5px var(--mono); background: #1b1e25; padding: 1px 5px; border-radius: 4px; color: #e6d7ff; }
.doc pre { background: #12141a; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font: 11.5px/1.5 var(--mono); color: #cfd3db; max-width: none; }
.doc pre code { background: none; padding: 0; color: inherit; font: inherit; }
.lbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.lbl th { text-align: left; font: 600 10.5px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line2); }
.lbl td { padding: 5px 10px 5px 0; border-bottom: 1px solid #1b1d22; vertical-align: middle; }
.lbl td.stock { font: 600 11.5px var(--mono); color: #8b91a0; white-space: nowrap; }
.lbl td.n { font: 600 12px var(--mono); color: var(--dim); text-align: right; }
.tape { display: inline-block; background: #0b0b0c; color: #f2f2f2; font: 700 12px/1 'Barlow Condensed', var(--ui); letter-spacing: .1em; padding: 5px 9px 4px; border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #222; white-space: nowrap; }
.tape.none { background: transparent; color: var(--dim2); box-shadow: none; border: 1px dashed #3a3e48; font-weight: 600; }
.doc .total { color: var(--dim); font-size: 12.5px; }
/* ---------------- v6: full-size layout modeled on the real control set ---------------- */
.chassis .silk .s, .jog-lab .s { display: none; }
.chassis.stock .silk .u, .chassis.stock .jog-lab .u { display: none; }
.chassis.stock .silk .s, .chassis.stock .jog-lab .s { display: inline; }
.chassis.stock .silk { color: #c9ccd3; }
.chassis.full .strip { width: 80px; gap: 3px; }
.snum { font: 700 10px var(--mono); color: #6e737d; height: 11px; }
.chassis.full .lcd { margin: 1px 0 3px; }
.smid { display: flex; align-items: center; gap: 5px; }
.meter { display: flex; flex-direction: column; gap: 2px; padding: 2px; background: #08090a; border-radius: 2px; box-shadow: inset 0 0 0 1px #000; }
.meter i { width: 6px; height: 4px; border-radius: 1px; background: #16231a; }
.meter i.on { background: #3ee07a; box-shadow: 0 0 4px #3ee07a; }
.meter i:nth-child(2).on, .meter i:nth-child(3).on { background: #ffc44d; box-shadow: 0 0 4px #ffc44d; }
.meter i.clip { background: #2a1110; margin-bottom: 2px; }
.meter i.clip.on { background: #ff3b30; box-shadow: 0 0 5px #ff3b30; }
.meter i.sig { margin-top: 2px; }
.meter i.sig.on { background: #5aa9ff; box-shadow: 0 0 4px #5aa9ff; }
.sbtns { display: flex; flex-direction: column; gap: 2px; }
.sbtns .bt { width: 40px; height: 18px; }
.chassis.full .strip.master { justify-content: flex-start; padding-top: 14px; gap: 6px; }
.mtitle small { display: block; font-size: 8.5px; color: #6e737d; text-align: center; letter-spacing: .1em; }
.rpanel.xt { width: auto; gap: 7px; padding: 10px 12px; }
.grp { display: flex; flex-direction: column; gap: 2px; }
.gt { font: 700 8.5px var(--silk); letter-spacing: .16em; color: #6e737d; text-align: center; border-top: 1px solid #2b2e35; padding-top: 2px; }
.gt em { font-style: normal; color: #4c9fae; }
.gb { display: grid; gap: 3px 4px; justify-items: center; }
.rpanel.xt .bt { width: 38px; height: 18px; }
.rpanel.xt .silk { max-width: 52px; font-size: 8.5px; letter-spacing: .04em; }
.bt-w.spare .bt { filter: brightness(.6); cursor: default; }
.bt-w.spare .silk .u { color: #4c515b; }
.bt-w.spare .silk .u:empty::before { content: '·'; }
.g-assign .gb { grid-template-columns: repeat(6, 1fr); }
.g-disp { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.g-disp .disp { flex: 1; display: flex; gap: 12px; align-items: flex-end; grid-auto-flow: unset; }
.dcol { display: flex; flex-direction: column; gap: 2px; }
.g-views .gb { grid-template-columns: 1.3fr repeat(8, 1fr); }
.g-views .gv .bt { width: 48px; }
.g-fn .gb { grid-template-columns: repeat(8, 1fr); }
.g-fn .bt span { font-size: 9px; }
.grp3 { display: grid; grid-template-columns: 2fr 3fr 2fr; gap: 10px; }
.g-mod .gb, .g-util .gb { grid-template-columns: repeat(2, 1fr); }
.g-auto .gb { grid-template-columns: repeat(3, 1fr); }
.g-marker .gb { grid-template-columns: repeat(7, 1fr); }
.g-trans .gb { grid-template-columns: repeat(5, 1fr); }
.rpanel.xt .bt-w.wide .bt { width: 52px; height: 24px; }
.grp-bot { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.navc { display: flex; flex-direction: column; gap: 6px; }
.g-bank .gb, .g-chan .gb { grid-template-columns: repeat(2, 1fr); }
.cross { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, auto); gap: 1px 2px; justify-items: center; }
.cross .c-up { grid-column: 2; grid-row: 1; }
.cross .c-left { grid-column: 1; grid-row: 2; }
.cross .c-zoom { grid-column: 2; grid-row: 2; }
.cross .c-right { grid-column: 3; grid-row: 2; }
.cross .c-down { grid-column: 2; grid-row: 3; }
.cross .bt { width: 30px !important; height: 20px !important; }
.cross .c-zoom .bt span { font-size: 7.5px; }
.jogwrap { display: flex; align-items: flex-start; gap: 8px; justify-content: flex-end; }
.rpanel.xt .jog { width: 104px; height: 104px; }
.rpanel.xt .bt-w { width: 46px; }
.rpanel.xt .bt-w.wide { width: 58px; }
.rpanel.xt .silk { max-width: 46px; }
.g-assign .gb { grid-template-columns: repeat(6, 46px); }
.g-views .gb { grid-template-columns: 56px repeat(8, 46px); }
.g-views .gv { width: 56px; }
.g-fn .gb { grid-template-columns: repeat(8, 46px); }
.g-mod .gb, .g-util .gb { grid-template-columns: repeat(2, 46px); }
.g-auto .gb { grid-template-columns: repeat(3, 46px); }
.g-marker .gb { grid-template-columns: repeat(7, 46px); }
.g-trans .gb { grid-template-columns: repeat(5, 58px); }
.g-bank .gb, .g-chan .gb { grid-template-columns: repeat(2, 46px); }
.grp3 { grid-template-columns: auto auto auto; justify-content: space-between; }
/* ---------------- asset map ---------------- */
.tab-doc[data-doc="map"] { color: #7fd6e8; }
.am { width: 100%; max-width: 920px; height: auto; display: block; margin: 8px 0; font-family: var(--ui); }
.am-type { fill: #cfd3db; font-size: 13px; font-weight: 600; text-anchor: end; }
.am-grid { stroke: #1f2228; }
.am-tick { stroke: #1a1d22; stroke-dasharray: 2 4; }
.am-tl { fill: #6b707b; font: 500 10px var(--mono); text-anchor: middle; }
.am-axis { fill: #8b91a0; font-size: 11px; text-anchor: middle; letter-spacing: .04em; }
.am-band { fill: #6b707b; font: 700 9.5px var(--ui); letter-spacing: .12em; text-anchor: middle; }
.am-node { cursor: pointer; }
.am-node circle { fill: rgba(76,217,239,.22); stroke: var(--A); stroke-width: 1.5; transition: fill .15s; }
.am-node:hover circle { fill: rgba(76,217,239,.5); }
.am-node .n { fill: #f1f3f6; font-size: 13px; font-weight: 600; }
.am-node .d { fill: #8b91a0; font: 500 10.5px var(--mono); }
.am-note { color: var(--dim); font-size: 12.5px; }
.am-t td small { color: var(--dim2); font-size: 11.5px; }
.am-row { cursor: pointer; }
.am-row:hover td { background: #161920; }
/* overview with many pages: collapsed pages are one line */
.ov.many .ov-row:not(.open) { display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: center; }
.ov.many .ov-row:not(.open) .ov-rh { padding: 1px 6px; font-size: 10.5px; }
.ov.many .ov-row:not(.open) .ov-sum { margin-left: auto; font-size: 9px; }
.ov-line { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 0 6px 0 0; }
.ov-tb { display: flex; align-items: center; height: 13px; }
.ov-tb .ov-bar { flex: 1; }
.ov.many .ov-row.open .ov-ch { font-size: 9.5px; }
.ov.many .ov-l { font-size: 10px; line-height: 10px; }
.ov.many .ov-vr { height: 9px; }
.ov.many .ov-v { font-size: 8.5px; line-height: 9px; }
.ov.many .ov-ln { padding-bottom: 0; }
.ov.many .ov-row:not(.open) { min-height: 0; }
.ov.many .ov-row:not(.open) .ov-rh { line-height: 11px; padding-top: 0; padding-bottom: 0; }
.ov.many .ov-tb { height: 11px; }
.surface-wrap { min-height: 300px; }
/* asset map: plot on the left, table on the right, sized to the view (no scrolling) */
.doc.map { overflow: hidden; display: flex; flex-direction: column; padding: 14px 20px 14px; }
.doc.map > * { max-width: none; }
.am-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 22px; }
.am-left { min-height: 0; display: flex; flex-direction: column; }
.am-left h1 { margin: 0 0 4px; }
.am-lede { margin: 0 0 6px; font-size: 13px; }
.am-plot { flex: 1; min-height: 0; position: relative; }
.am-plot svg.am { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
.am-note { margin: 6px 0 0; font-size: 11.5px; }
.am-right { min-height: 0; overflow: hidden; display: flex; align-items: flex-start; padding-top: 4px; }
.am-t { font-size: 12px; }
.am-t th { padding: 3px 6px 3px 0; font-size: 9.5px; }
.am-t td { padding: 4px 6px 4px 0; line-height: 1.25; }
.am-t td small { font-size: 10.5px; display: block; }
.am-t .chip { font-size: 9px; padding: 0 4px; display: inline-block; margin: 1px 0; }
@media (max-height: 860px) {
  .am-t td small { display: none; }
  .am-t td { padding: 3px 6px 3px 0; }
}
/* rig: control side (settings pages, X-Touch, touch display) | divider | viewport [| details] */
.vsplit { display: none; }
body.rig { grid-template-columns: var(--ctl-w, min(calc((100vh - 68px) * var(--desk-ratio, 1) * 1.25 + 16px), 58vw)) 8px minmax(0, 1fr) 0;
  grid-template-rows: 52px minmax(0, 1fr); grid-template-areas: "top top top top" "surf div stage panel"; }
body.rig.with-details { grid-template-columns: var(--ctl-w, min(calc((100vh - 68px) * var(--desk-ratio, 1) * 1.25 + 16px), 50vw)) 8px minmax(0, 1fr) 352px; }
body.rig.playing { grid-template-columns: 20vw 8px minmax(0, 1fr) 0; transition: grid-template-columns .35s ease; }
body.rig .vsplit { display: block; grid-area: div; cursor: col-resize; background: #0d0e11; position: relative; touch-action: none; }
.vsplit::after, .hsplit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 38px; margin: -19px 0 0 -1.5px; border-radius: 2px; background: #2e323b; }
.vsplit:hover::after, .vsplit.drag::after, .hsplit:hover::after, .hsplit.drag::after { background: var(--A); }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }
body.rig .panel { display: none; }
body.rig.with-details:not(.playing) .panel { display: flex; grid-area: panel; }
body.rig .surface-wrap { min-height: 0; min-width: 0; padding: 6px 8px 8px; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; overflow: hidden; border-top: 0; }
body.rig.nosurf { grid-template-columns: 0 0 minmax(0, 1fr) 0; }
body.rig.nosurf .vsplit { display: none; }
.rig-bar, .hsplit { display: none; }
body.rig .rig-bar { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 0 6px; min-width: 0; }
.rb-sp { flex: 1; }
.rb-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: #1a1c22; color: var(--dim); font: 500 12px var(--ui); cursor: pointer; white-space: nowrap; min-width: 0; overflow: hidden; }
.rb-btn:hover { color: var(--tx); }
.rb-btn.act { color: var(--tx); background: #262a33; border-color: color-mix(in oklab, var(--A) 45%, transparent); }
.rb-btn.act .ic { color: var(--A); }
.rb-btn .lab { overflow: hidden; text-overflow: ellipsis; }
.rb-more { font-size: 10.5px; color: var(--A); }
body.rig .overview { display: block; flex: 0 0 var(--ov-h, 30%); width: auto; min-height: 0; }
body.rig.ov-off .overview, body.rig.ov-off #ovSplit { display: none; }
body.rig .hsplit { display: block; position: relative; flex: 0 0 8px; cursor: row-resize; touch-action: none; }
.hsplit::after { width: 38px; height: 3px; margin: -1.5px 0 0 -19px; }
.hsplit.abs { position: absolute; z-index: 3; }
.hsplit[hidden] { display: none !important; }
.desk-board { display: none; }
body.rig .desk-board { display: block; position: relative; flex: 1 1 auto; min-height: 0; }
.desk-panel { position: absolute; border-radius: 10px; background: linear-gradient(180deg, #1b1d22, #141519); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px #24272e, 0 10px 30px rgba(0,0,0,.5); }
.desk-panel[hidden] { display: none; }
body.rig .desk-board > #surface { position: absolute; display: block; }
body.rig .desk-board > #surface .sf-scale { margin: 0; }
.desk-dims span { position: absolute; font: 500 10px var(--mono); color: #575d69; white-space: nowrap; line-height: 1.35; pointer-events: none; }
@media (max-width: 1100px) {
  body.rig .overview { display: block; }
}
/* the real proportions for the faux X-Touch: 100 mm faders, extra depth spread where the hardware has it */
.chassis.real { box-sizing: border-box; }
/* hardware-sized controls, and a palm rest in front of the faders, so the 301 mm depth is filled the way the real one is */
.chassis.full.real { padding: 24px 22px 64px; }
.chassis.full.real .strip { gap: 6px; }
.chassis.full.real .strip .kn { --size: 64px; --cap: 40px; --rr: -29px; }
.chassis.full.real .lcd { height: 50px; padding-top: 8px; }
.chassis.full.real .smid { gap: 7px; }
.chassis.full.real .sbtns { gap: 8px; }
.chassis.full.real .sbtns .bt { width: 46px; height: 27px; }
.chassis.full.real .meter { gap: 4px; padding: 3px; }
.chassis.full.real .meter i { width: 7px; height: 7px; }
.chassis.full.real .strip.master { padding-bottom: 10px; }
.chassis.full.real .rpanel .bt { height: 25px; }
.chassis.full.real .rpanel .bt-w.wide .bt { height: 32px; }
.chassis.full.real .rpanel .cursor .bt { height: 28px; }
.chassis.full.real .jog { width: 150px; height: 150px; }
.chassis.compact.real { padding: 22px 20px 60px; }
.chassis.compact.real .strip .kn { --size: 62px; --cap: 38px; --rr: -28px; }
.chassis.compact.real .strip .bt { height: 26px; }
.chassis.compact.real .strip { gap: 7px; }
.chassis.real .strip > *, .chassis.real .rpanel > *, .chassis.real .rblock > * { flex-shrink: 0; }
.chassis.real .strips, .chassis.real .strip.master { align-self: stretch; }
.chassis.full.real .strip .smid { margin-bottom: auto; }
.chassis.full.real .strip.master > :first-child { margin-bottom: auto; }
.chassis.real .rpanel.xt { justify-content: space-between; }
.chassis.compact.real .strip .tape { margin-top: auto; }
.chassis.compact.real .strip.master .mtitle { margin-top: auto; }
.chassis.compact.real .rblock { justify-content: space-between; }
/* the Xeneon Edge: case → active area → a fixed 960 × 270 logical screen */
.xeneon { position: absolute; }
.xe-case { position: absolute; inset: 0; border-radius: 4.5% / 14%; background: linear-gradient(180deg, #2a2c31, #1a1b1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.55); }
.xe-screen { position: absolute; left: 2.34%; right: 2.34%; top: 8.46%; bottom: 8.46%; background: #050608; border-radius: 3px; overflow: hidden; }
.xe { position: absolute; left: 0; top: 0; transform-origin: top left; overflow: hidden; display: flex; background: #0e1014; color: var(--tx); font: 12px/1.3 var(--ui); }
.xe-badge { position: absolute; left: 50%; bottom: 1.5%; transform: translateX(-50%); font: 600 7px var(--mono); letter-spacing: .12em; color: #5a5f6a; white-space: nowrap; pointer-events: none; }
.xe-zoom { position: absolute; right: 1%; top: 0; height: 8.4%; min-height: 10px; aspect-ratio: 1; padding: 0; border: 0; background: none; color: #6c7280; font-size: 9px; line-height: 1; cursor: pointer; }
.xeneon.zoom { position: fixed !important; left: 50% !important; top: calc(52px + 16px) !important; transform: translateX(-50%); width: min(1004px, calc(100vw - 24px)) !important; height: auto !important; aspect-ratio: 372 / 120; z-index: 300; }
.xeneon.zoom .xe-case { box-shadow: 0 0 0 1px #3a3e47, 0 24px 70px rgba(0,0,0,.8); }
/* rail of screen buttons (stream-deck style) */
.xe-rail { flex: none; width: 66px; display: flex; flex-direction: column; gap: 4px; padding: 6px 5px; background: #0a0b0e; border-right: 1px solid #1d2026; }
.xr-title { font: 700 8px var(--mono); letter-spacing: .06em; color: #5f6573; text-transform: uppercase; text-align: center; line-height: 1.15; padding: 2px 0; overflow: hidden; max-height: 20px; }
.xe-rail button { flex: 1; min-height: 0; border: 1px solid #262a32; border-radius: 7px; background: #171a20; color: var(--dim); font: 600 10.5px/1.15 var(--ui); cursor: pointer; padding: 0 2px; touch-action: manipulation; }
.xe-rail button.act { background: #262a33; color: var(--tx); border-color: color-mix(in oklab, var(--A) 55%, transparent); box-shadow: inset 3px 0 0 var(--A); }
.xe-rail .xr-follow { flex: 0 0 34px; font-size: 9px; color: var(--dim2); }
.xe-rail .xr-follow.act { color: var(--A); }
.xe-main { flex: 1; min-width: 0; padding: 6px; display: flex; }
.scr { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 6px; }
.scr .col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.scr-pad { grid-template-columns: 262px minmax(0, 1fr); }
.scr-one { grid-template-columns: minmax(0, 1fr); }
.scr-pre { grid-template-rows: minmax(0, 1fr) auto; }
/* widgets */
.tw { background: #15171c; border: 1px solid #23262d; border-radius: 9px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.tw > header { display: flex; align-items: center; gap: 6px; flex: none; min-height: 20px; }
.tw > header b { font: 600 11px var(--ui); white-space: nowrap; }
.tw-sub { font-size: 9.5px; color: var(--dim2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-btn { min-height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); background: #1d2027; color: var(--tx); font: 500 10.5px var(--ui); cursor: pointer; touch-action: manipulation; }
.tw-btn.tog.act { background: color-mix(in oklab, var(--A) 18%, #1d2027); border-color: color-mix(in oklab, var(--A) 55%, transparent); }
.tw-empty { color: var(--dim2); font-size: 11px; padding: 6px; }
.tw-cv { position: relative; flex: 1; min-height: 0; min-width: 0; }
.tw-cv canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; touch-action: none; }
.tseg { padding: 1px; border-radius: 6px; }
.tseg button { min-height: 20px; padding: 0 7px; font-size: 10.5px; border-radius: 5px; }
/* XY pad */
.tw-xy { flex: 1; }
.xy-pair, .xy-custom select { flex: 1; min-width: 0; background: #1d2027; color: var(--tx); border: 1px solid var(--line2); border-radius: 6px; height: 20px; padding: 0 4px; font: 500 10px var(--ui); }
.xy-custom[hidden] { display: none; }
.xy-custom { display: flex; gap: 4px; flex: none; }
.xy-cv { cursor: crosshair; }
.xy-read { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--dim); flex: none; white-space: nowrap; overflow: hidden; }
.xy-read span { overflow: hidden; text-overflow: ellipsis; }
.xy-read i { font: 700 8.5px var(--mono); color: var(--dim2); font-style: normal; margin-right: 3px; }
.xy-read b { font: 600 10px var(--mono); color: var(--tx); margin-left: 2px; }
/* morph */
.tw-morph { flex-direction: row; align-items: stretch; gap: 6px; flex: none; height: 40px; padding: 4px; }
.mo-s { width: 40px; border-radius: 7px; border: 1px solid var(--line2); background: #1d2027; font: 700 13px var(--mono); cursor: pointer; }
.mo-s.A { color: var(--A); }
.mo-s.B { color: var(--B); }
.mo-s.A.act { box-shadow: 0 0 0 2px var(--A); }
.mo-s.B.act { box-shadow: 0 0 0 2px var(--B); }
.mo-track { flex: 1; border-radius: 7px; background: #0d0f13; border: 1px solid var(--line); position: relative; touch-action: none; cursor: ew-resize; overflow: hidden; }
.mo-track span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9.5px var(--mono); color: rgba(232,234,239,.45); pointer-events: none; }
.mo-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in oklab, var(--A) 30%, transparent), color-mix(in oklab, var(--B) 30%, transparent)); }
.mo-thumb { position: absolute; top: 3px; bottom: 3px; width: 5px; margin-left: -2.5px; border-radius: 3px; background: #fff; }
/* presets */
.tw-presets { flex: 1; }
.pg-grid { flex: 1; min-height: 0; display: grid; gap: 5px; grid-auto-rows: minmax(0, 1fr); }
.pg-b { min-height: 0; text-align: left; border: 1px solid var(--line2); background: #1b1e24; border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; color: var(--tx); position: relative; overflow: hidden; }
.pg-b b { font: 600 11.5px var(--ui); }
.pg-b small { color: var(--dim2); font-size: 9.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pg-b .pi-src { position: absolute; right: 7px; top: 5px; font-size: 10px; }
.pg-b .pi-src.claude { color: #c9a6ff; }
.pg-b .pi-src.you { color: var(--A); }
.pg-b.sel { border-color: color-mix(in oklab, var(--A) 60%, transparent); background: color-mix(in oklab, var(--A) 9%, #1b1e24); }
.pg-acts { display: flex; gap: 5px; flex: none; }
/* switches */
.tw-btns { flex: 1; }
.bt-grid { flex: 1; min-height: 0; display: grid; gap: 4px; }
.bt-b { min-height: 0; min-width: 0; border-radius: 7px; border: 1px solid var(--line2); background: #1b1e24; color: var(--tx); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2px 6px; gap: 0; text-align: left; touch-action: manipulation; overflow: hidden; }
.bt-b small { display: block; font-size: 7.5px; line-height: 1.1; color: var(--dim2); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; max-width: 100%; }
.bt-b b { font: 600 10px/1.12 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bt-v { font: 600 9px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bt-b.toggle.on { background: color-mix(in oklab, var(--hot) 16%, #1b1e24); border-color: color-mix(in oklab, var(--hot) 55%, transparent); }
.bt-b.toggle.on .bt-v { color: #ffb09e; }
.bt-b.choice .bt-v { color: var(--A); }
/* the surface's monitor */
.xe-mon { flex: none; width: 276px; border-left: 1px solid #1d2026; background: #0b0c0f; min-height: 0; display: flex; }
.xe-monitor { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 6px 7px; gap: 5px; }
.mn-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; flex: none; line-height: 1.2; }
.mn-pg { font: 700 8.5px var(--mono); letter-spacing: .08em; color: var(--dim2); }
.mn-h b { font: 700 13px var(--ui); }
.mn-h small { flex-basis: 100%; font-size: 9.5px; color: #c9a6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-slot { margin-left: auto; font: 700 10px var(--mono); padding: 0 5px; border-radius: 4px; background: #1b1e24; }
.mn-slot.A { color: var(--A); }
.mn-slot.B { color: var(--B); }
.mn-slot.mid { color: var(--tx); }
.mn-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px; }
.mn-pages { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.mn-pages button { flex: none; display: flex; align-items: center; gap: 4px; border: 0; border-radius: 4px; background: #15171c; color: var(--dim); font: 500 10px var(--ui); padding: 0 5px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
.mn-pages button i { font: 700 8.5px var(--mono); font-style: normal; color: var(--dim2); width: 9px; }
.mn-pages button.act { background: color-mix(in oklab, var(--A) 16%, #15171c); color: var(--tx); box-shadow: inset 2px 0 0 var(--A); }
.mn-pages button.act i { color: var(--A); }
.mn-focus { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.mn-where { font: 600 8.5px var(--mono); color: var(--dim2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-name { font: 600 11.5px/1.2 var(--ui); }
.mn-val { font: 600 17px/1.1 var(--mono); color: var(--tx); }
.mn-bar { position: relative; height: 5px; background: #1b1e24; border-radius: 3px; margin: 3px 0 2px; }
.mn-bar i { position: absolute; inset: 0 auto 0 0; background: #5d6472; border-radius: 3px; }
.mn-bar em { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; border-radius: 1px; }
.mn-bar em.a { background: var(--A); }
.mn-bar em.b { background: var(--B); }
.mn-ab { display: flex; gap: 8px; font: 600 9.5px var(--mono); }
.mn-ab .a { color: var(--A); }
.mn-ab .b { color: var(--B); }
.mn-desc { margin: 2px 0 0; font-size: 9.5px; line-height: 1.3; color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.mn-empty { color: var(--dim2); font-size: 10.5px; }
/* touch display on other shapes: free boxes, portrait devices */
.xe-case.free { border-radius: 10px; }
.xe-case.free .xe-badge { display: none; }
.xe.portrait { flex-direction: column; }
.xe.portrait .xe-rail { flex-direction: row; width: auto; height: 46px; flex: none; border-right: 0; border-bottom: 1px solid #1d2026; }
.xe.portrait .xr-title { display: none; }
.xe.portrait .xe-rail .xr-follow { flex: 0 0 64px; }
.xe.portrait .xe-mon { width: auto; height: 34%; flex: none; border-left: 0; border-top: 1px solid #1d2026; }
.xe.portrait .scr { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr); }
/* ---------------- header: modules, views, controls ---------------- */
.top { gap: 12px; }
.tabs { gap: 2px; }
.tab { gap: 7px; padding: 0 11px; }
.tab .ic { flex: none; color: var(--dim2); }
.tab.act .ic, .tab:hover .ic { color: var(--A); }
.tab .tab-n { font-size: 9px; padding: 0 3px; }
.views { display: flex; align-items: center; gap: 3px; flex: none; padding: 3px; border: 1px solid var(--line2); border-radius: 10px; background: #14161b; }
.views-lab { font: 700 8.5px var(--mono); letter-spacing: .12em; color: var(--dim2); padding: 0 4px 0 5px; }
.vtab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--dim); font: 500 12.5px var(--ui); cursor: pointer; white-space: nowrap; }
.vtab:hover { color: var(--tx); background: #1d2027; }
.vtab.act { color: var(--tx); background: #2a2e37; box-shadow: inset 0 -2px 0 var(--A); }
.vtab[data-doc="brief"] .ic { color: #c9a6ff; }
.vtab[data-doc="map"] .ic { color: #7fd6e8; }
.vtab[data-doc="touch"] .ic { color: #8be39c; }
.vtab[data-doc="labels"] .ic { color: #ffc44d; }
.seg-ctl.ico button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; }
.seg-ctl.ico button .lab { font-size: 12px; }
.seg-ctl.ico button.act .ic { color: var(--A); }
.seg-ctl.sm button { padding: 3px 8px; }
.icon-btn { display: inline-grid; place-items: center; }
/* the header fits by shedding words, never tabs: controls go icon-only first, then inactive module names */
.hdr-right .seg-ctl.ico button .lab { display: none; }
.hdr-right .seg-ctl.ico button { padding: 4px 7px; }
.hdr-right .seg-ctl.ico button[data-desk] .lab { display: inline; }
.desk-dims span { line-height: 1.35; }
.top.icons-only .tab:not(.act) .tab-t { display: none; }
.top.icons-only .tab { padding: 0 9px; }
@media (max-width: 2300px) {
  .views-lab { display: none; }
}
@media (max-width: 1500px) {
  .vtab .lab { display: none; }
  .logo span { display: none; }
  .hdr-right .seg-ctl.ico button[data-desk] .lab { display: none; }
}
/* views open over the whole window, under the header */
.docview { position: fixed; inset: 52px 0 0 0; z-index: 250; }
.doc.galv { padding: 14px 20px 30px; }
.doc.galv > * { max-width: none; }
.gal-scale { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.gal-scale em { font: 500 11px var(--mono); font-style: normal; color: var(--tx); min-width: 74px; }
.gal-grp { margin: 0 0 22px; }
.gal-grp h2 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.gal-grp h2 small { font: 500 11px var(--ui); color: var(--dim2); }
.gal-row { display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: flex-end; }
.gal-card { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.gal-dev { position: relative; flex: none; }
.gal-meta { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--dim); max-width: 420px; }
.gal-meta b { color: var(--tx); font-size: 13px; }
.gal-meta small { font-size: 10.5px; color: var(--dim2); }
/* use-on-the-rig */
.gal-meta .gal-use { align-self: flex-start; margin-top: 5px; border: 1px solid var(--line2); background: #1d2027; color: var(--tx); border-radius: 7px; padding: 4px 10px; font: 600 11.5px var(--ui); cursor: pointer; }
.gal-card.use .gal-meta .gal-use { color: var(--A); border-color: color-mix(in oklab, var(--A) 50%, transparent); background: color-mix(in oklab, var(--A) 10%, #1d2027); }
.gal-card.use .gal-dev .xe-case { box-shadow: 0 0 0 2px var(--A), 0 6px 18px rgba(0,0,0,.55); }
.page-tabs { max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.pt { white-space: nowrap; flex-shrink: 0; }
.page-tabs.many .pt { padding: 6px 8px; font-size: 12px; gap: 5px; }
/* rig: the settings pages live only on the touch display now */
body.rig .overview, body.rig #ovSplit { display: none !important; }
/* rig with the controls along the bottom: viewport on top | divider | X-Touch + touch display side by side */
body.rig.rig-bottom { grid-template-columns: minmax(0, 1fr) 0; grid-template-rows: 52px minmax(0, 1fr) 8px var(--ctl-h, min(44vh, calc(100vw / var(--desk-ratio, 3) * 0.86 + 44px)));
  grid-template-areas: "top top" "stage panel" "div panel" "surf panel"; }
body.rig.rig-bottom.with-details { grid-template-columns: minmax(0, 1fr) 352px; }
body.rig.rig-bottom.playing { grid-template-columns: minmax(0, 1fr) 0; grid-template-rows: 52px minmax(0, 1fr) 8px 20vh; transition: grid-template-rows .35s ease; }
body.rig.rig-bottom .vsplit { cursor: row-resize; }
body.rig.rig-bottom .vsplit::after { width: 38px; height: 3px; margin: -1.5px 0 0 -19px; }
body.rig.rig-bottom .surface-wrap { padding: 4px 8px 6px; }
.hsplit.vert { cursor: col-resize; }
.hsplit.vert::after { width: 3px; height: 38px; margin: -19px 0 0 -1.5px; }

/* ---------------- edit history dock (over the bottom of the main view) ---------------- */
.hdock { position: absolute; left: 10px; right: 10px; bottom: 10px; height: clamp(220px, 44%, 460px); z-index: 30; display: flex; flex-direction: column; background: rgba(11,12,15,.94); backdrop-filter: blur(10px); border: 1px solid #262a32; border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.55); overflow: hidden; outline: none; }
.hdock[hidden] { display: none; }
.hd-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #1f2228; font-size: 12px; }
.hd-bar b { font-weight: 700; } .hd-stats { font: 500 11px var(--mono); color: var(--A); }
.hd-help { flex: 1; min-width: 0; color: var(--dim2); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-b { height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line2); background: #1a1c22; color: var(--tx); font: 500 11.5px var(--ui); cursor: pointer; }
.hd-b:hover { border-color: #4a505c; } .hd-b.x { font-size: 15px; line-height: 1; padding: 0 7px; } .hd-b[disabled] { opacity: .4; cursor: default; }
.hd-b.go { background: color-mix(in oklab, var(--A) 22%, #1a1c22); border-color: color-mix(in oklab, var(--A) 55%, transparent); }
.hd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.hd-tree { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 1px 1px, #1a1d23 1px, transparent 1.5px) 0 0 / 18px 18px; }
.hd-tree canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.hd-notes { position: absolute; inset: 0; pointer-events: none; }
.hd-note { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: flex-start; gap: 3px; max-width: 240px; background: #2a2618; border: 1px solid #5a4d22; color: #f5e9c4; border-radius: 6px; padding: 3px 4px 3px 2px; font: 12px/1.35 var(--ui); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.hd-note .grip { width: 6px; align-self: stretch; border-radius: 3px; cursor: move; background: repeating-linear-gradient(0deg, #6d5d2a 0 2px, transparent 2px 4px); flex: none; }
.hd-note .tx { min-width: 60px; outline: none; white-space: pre-wrap; word-break: break-word; }
.hd-note .tx:empty::before { content: 'Note…'; color: #a8996a; }
.hd-note .del { border: 0; background: none; color: #a8996a; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.hd-note .lead { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; pointer-events: none; }
.hd-note .lead line { stroke: #8a7a3c; stroke-width: 1.2; stroke-dasharray: 3 3; }
.hd-side { border-left: 1px solid #1f2228; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; font-size: 12px; }
.hd-h { display: flex; flex-direction: column; } .hd-h b { font-size: 13px; } .hd-h span { font: 500 10.5px var(--mono); color: var(--dim2); }
.hd-meta { font-size: 11px; color: var(--dim); } .hd-meta em { color: var(--A); font-style: normal; }
.hd-ch { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.hd-ch div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 5px; align-items: baseline; font-size: 11px; }
.hd-ch span { color: #aab0bc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-ch i { font: 500 10.5px var(--mono); color: var(--dim2); font-style: normal; } .hd-ch b { font: 600 10.5px var(--mono); color: var(--tx); }
.hd-ch .more { color: var(--dim2); display: block; }
.hd-acts { display: flex; gap: 6px; }
.hd-empty { color: var(--dim); font-size: 12px; line-height: 1.5; margin: 0; }
.stage.previewing::after { content: 'PREVIEW · history'; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 31; font: 700 10.5px var(--ui); letter-spacing: .14em; color: #0b0c0f; background: #ffd34d; padding: 3px 10px; border-radius: 20px; pointer-events: none; }

/* touch displays view: full specs */
.gal-mode { flex: none; }
.gal-meta { max-width: 360px; }
.gal-note { margin: 2px 0 4px; font-size: 11.5px; color: #c3c8d1; line-height: 1.4; }
.gal-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; margin: 0 0 4px; font-size: 11px; }
.gal-specs dt { color: var(--dim2); white-space: nowrap; }
.gal-specs dd { margin: 0; color: #d6d9e0; min-width: 0; overflow-wrap: anywhere; } .gal-specs dd.na { color: #4d525c; }
.gal-meta a { color: var(--A); text-decoration: none; } .gal-meta a:hover { text-decoration: underline; }
.gal-tbl-wrap { overflow: auto; height: 100%; }
.gal-tbl { border-collapse: collapse; font-size: 11.5px; width: max-content; min-width: 100%; }
.gal-tbl th { position: sticky; top: 0; z-index: 1; background: #121418; text-align: left; font: 600 10.5px var(--ui); color: var(--dim); padding: 6px 8px; border-bottom: 1px solid #262a32; cursor: pointer; white-space: nowrap; user-select: none; }
.gal-tbl th.asc::after { content: ' ▲'; color: var(--A); } .gal-tbl th.desc::after { content: ' ▼'; color: var(--A); }
.gal-tbl td { padding: 4px 8px; border-bottom: 1px solid #1a1d22; color: #c9ced8; vertical-align: top; max-width: 240px; font-variant-numeric: tabular-nums; }
.gal-tbl td small { display: block; max-width: 320px; color: var(--dim); font-size: 10.5px; line-height: 1.35; }
.gal-tbl td b { color: var(--tx); white-space: nowrap; } .gal-tbl td em.on { color: var(--A); font-style: normal; font-size: 10px; }
.gal-tbl tr:hover td { background: #15181e; } .gal-tbl tr.use td { background: color-mix(in oklab, var(--A) 8%, transparent); }
.gal-tbl button { border: 1px solid var(--line2); background: #1d2027; color: var(--tx); border-radius: 6px; font: 500 11px var(--ui); padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.gal-src { color: var(--dim2); font-size: 11px; margin: 10px 2px; }

/* touch display: Pages at full detail — the screen takes the monitor's room */
.scr-pages { grid-template-columns: minmax(0, 1fr) 248px; --c-rec: #ff4d3d; --c-solo: #ffd34d; --c-mute: #ff7a45; --c-sel: #8f7dff; }
.pv-open, .pv-side { padding: 4px 6px 5px; gap: 3px; }
.pv-open > header { gap: 6px; }
.pv-tn { font: 700 9.5px var(--mono); color: var(--A); } .pv-pn { font-size: 12px; }
.pv-key { display: flex; gap: 4px; align-items: center; font-size: 8.5px; color: var(--dim2); white-space: nowrap; flex: none; }
.pv-key i { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin-left: 4px; }
.pv-key .k-a { background: var(--A); } .pv-key .k-b { width: 2px; background: var(--B); } .pv-key .k-d { width: 1px; height: 8px; background: #e8eaef; } .pv-key .k-c { border-radius: 50%; background: #ffb02e; }
.pv-sum { font: 500 8.5px var(--mono); color: var(--dim2); white-space: nowrap; flex: none; }
.pv-sum i, .pv-cnt i { font-style: normal; } .pv-sum i.c, .pv-cnt i.c { color: #ffb02e; } .pv-sum i.a, .pv-cnt i.a { color: var(--B); }
.pv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 30px repeat(8, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: 2px; }
.pv-ch { display: flex; align-items: baseline; gap: 3px; min-width: 0; padding: 0 2px 1px; border-bottom: 2px solid #2a2e37; }
.pv-ch i { font: 700 8px var(--mono); color: var(--dim2); font-style: normal; }
.pv-ch b { font: 700 9px var(--ui); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pv-ch em { font: 700 8px var(--mono); font-style: normal; color: #ffb02e; } .pv-ch.empty { opacity: .3; }
.pv-ch.muted b { color: #6b707b; text-decoration: line-through; } .pv-ch.muted { border-bottom-color: var(--c-mute); } .pv-ch.soloed b { color: var(--c-solo); } .pv-ch.soloed { border-bottom-color: var(--c-solo); }
.pv-rt { align-self: center; font: 700 7.5px var(--mono); letter-spacing: .04em; color: #5d636f; border-left: 2px solid currentColor; padding-left: 3px; line-height: 1.1; }
.pv-rt.r-fader, .pv-rt.r-knob { color: #4f8d99; } .pv-rt.r-rec { color: var(--c-rec); } .pv-rt.r-solo { color: var(--c-solo); } .pv-rt.r-mute { color: var(--c-mute); } .pv-rt.r-select { color: var(--c-sel); }
.pv-it { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 1px 4px; border-radius: 4px; overflow: hidden; background: #161920; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.pv-it.none { background: repeating-linear-gradient(135deg, transparent 0 4px, #13151a 4px 5px); cursor: default; }
.pv-it.number { cursor: ew-resize; }
.pv-it em { font: 500 8.8px/1.05 var(--ui); font-style: normal; color: #9aa1ad; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pv-vr { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pv-v { font: 600 9px/1 var(--mono); color: #c9ced8; white-space: nowrap; flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.pv-g { flex: 1; min-width: 8px; height: 5px; background: #262a32; border-radius: 2px; position: relative; }
.pv-g i { position: absolute; top: 0; bottom: 0; }
.pv-g .f { background: #4d8f9c; border-radius: 2px; }
.pv-g .d { width: 1px; top: -1px; bottom: -1px; background: rgba(232,234,239,.55); }
.pv-g .b { width: 2px; top: -2px; bottom: -2px; margin-left: -1px; background: var(--B); border-radius: 1px; }
.pv-opts { flex: 1; display: flex; gap: 2px; min-width: 0; align-items: center; } .pv-opts i { flex: 1; height: 4px; border-radius: 1px; background: #2d2a40; max-width: 12px; position: relative; }
.pv-opts i.on { background: var(--c-sel); } .pv-opts i.b { box-shadow: 0 0 0 1px var(--B); } .pv-opts i.d::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 1px; height: 2px; background: rgba(232,234,239,.55); }
.pv-led { flex: 1; height: 4px; border-radius: 2px; background: #262a32; max-width: 26px; }
.pv-it.choice .pv-v { color: #b9a8ff; } .pv-it.toggle .pv-v { color: #6b707b; } .pv-it.trigger .pv-v { color: #8fd8e6; }
.pv-it.toggle.on.r-rec { background: color-mix(in oklab, var(--c-rec) 22%, #161920); } .pv-it.toggle.on.r-rec .pv-led { background: var(--c-rec); box-shadow: 0 0 6px var(--c-rec); }
.pv-it.toggle.on.r-solo { background: color-mix(in oklab, var(--c-solo) 18%, #161920); } .pv-it.toggle.on.r-solo .pv-led { background: var(--c-solo); box-shadow: 0 0 6px var(--c-solo); }
.pv-it.toggle.on.r-mute { background: color-mix(in oklab, var(--c-mute) 20%, #161920); } .pv-it.toggle.on.r-mute .pv-led { background: var(--c-mute); box-shadow: 0 0 6px var(--c-mute); }
.pv-it.toggle.on:not(.r-rec):not(.r-solo):not(.r-mute) .pv-led { background: var(--A); }
.pv-it.toggle.on .pv-v { color: var(--tx); font-weight: 700; }
.pv-it.chg em { color: var(--tx); } .pv-it.chg .pv-g .f { background: var(--A); }
.pv-it.chg::before { content: ''; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: #ffb02e; }
.pv-it.ab::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--B); }
.pv-it.focus { box-shadow: inset 0 0 0 1px var(--A); background: #1b232b; }
.pv-focus { flex: none; display: flex; gap: 7px; align-items: baseline; font-size: 9.5px; color: var(--dim); white-space: nowrap; overflow: hidden; min-height: 13px; border-top: 1px solid #1f2228; padding-top: 2px; }
.pv-focus b { color: var(--tx); font-weight: 600; } .pv-focus span { font-family: var(--mono); font-size: 9px; color: #c9ced8; } .pv-focus .a { color: var(--A); } .pv-focus .b { color: var(--B); } .pv-focus .d, .pv-focus .r, .pv-focus .w { color: var(--dim2); }
.pv-focus em { font-style: normal; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.pv-row { flex: 1 1 0; max-height: 30px; min-height: 0; display: grid; grid-template-columns: 13px minmax(0, 1fr) 118px 30px; align-items: center; column-gap: 4px; padding: 0 4px; border-radius: 4px; background: #121418; cursor: pointer; color: var(--dim); }
.pv-row:hover { background: #1a1d23; color: var(--tx); }
.pv-row.open { background: #182027; color: var(--tx); box-shadow: inset 2px 0 0 var(--A); }
.pv-n { font: 700 8.5px var(--mono); color: var(--dim2); } .pv-row.open .pv-n { color: var(--A); }
.pv-name { font: 600 10px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-mix { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; height: 100%; padding: 2px 0; min-height: 0; }
.pv-ms { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 0; }
.pv-ms.x { opacity: .2; }
.pv-ms .kn { --k: 0; flex: none; width: 5px; height: 5px; border-radius: 50%; background: conic-gradient(#8f7dff calc(var(--k) * 360deg), #2b2e36 0); } .pv-ms .kn.x { background: none; } .pv-ms .kn.chg { background: conic-gradient(#ffb02e calc(var(--k) * 360deg), #2b2e36 0); }
.pv-ms .fd { flex: 1; width: 5px; min-height: 3px; background: #23262d; border-radius: 1px; position: relative; overflow: hidden; }
.pv-ms .fd i { position: absolute; left: 0; right: 0; bottom: 0; background: #4f8d99; } .pv-ms .fd i.chg { background: var(--A); }
.pv-cnt { font: 600 8.5px var(--mono); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; color: #3a3f48; }
.pv-list.dense .pv-row { max-height: 18px; }
.xe.portrait .scr-pages { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
.xe.portrait .pv-grid { grid-template-columns: 26px repeat(8, minmax(0, 1fr)); }
.scr-pages { grid-template-columns: minmax(0, 1fr) 262px; }
.pv-row { grid-template-columns: 13px minmax(0, 1fr) 104px 36px; }
.pv-list.dense .pv-cnt { flex-direction: row; gap: 4px; }
.pv-list:not(.dense) .pv-row { max-height: 40px; }
.pv-list.roomy .pv-row { max-height: 82px; grid-template-columns: 13px minmax(0, 1fr) 36px; grid-template-rows: auto auto 1fr; align-items: start; padding: 4px 5px; row-gap: 3px; }
.pv-list.roomy .pv-row .pv-n { grid-row: 1; } .pv-list.roomy .pv-row .pv-name { grid-row: 1; grid-column: 2; } .pv-list.roomy .pv-cnt { grid-row: 1; grid-column: 3; flex-direction: row; gap: 4px; }
.pv-list.roomy .pv-sv { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.pv-sv > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.pv-sv b { font: 700 7.5px var(--ui); text-transform: uppercase; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pv-sv i { font: 500 8.5px var(--mono); font-style: normal; color: #8b92a0; white-space: nowrap; overflow: hidden; text-overflow: clip; } .pv-sv i.k { color: #7d7398; } .pv-sv i.chg { color: var(--tx); } .pv-sv i.k.chg { color: #c9bfff; }
.pv-list.roomy .pv-mix { grid-row: 3; grid-column: 1 / -1; height: 100%; min-height: 10px; }

/* ---------------- touch displays view: sort · filter · per-attribute styling ---------------- */
.doc-bar:has(.gal-mode) { flex-wrap: wrap; row-gap: 6px; }
.gal-sort { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--dim); }
.gal-sort select { background: #1a1c22; color: var(--tx); border: 1px solid var(--line2); border-radius: 6px; height: 26px; padding: 0 6px; font: 500 12px var(--ui); }
.gal-dir { height: 26px; width: 26px; border-radius: 6px; border: 1px solid var(--line2); background: #1a1c22; color: var(--A); cursor: pointer; font-size: 13px; }
.gal-fams { display: flex; gap: 4px; flex-wrap: wrap; }
.gal-fams button { --c: #888; height: 26px; padding: 0 9px 0 7px; border-radius: 13px; border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); background: transparent; color: #c3c8d1; font: 500 11.5px var(--ui); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.gal-fams button::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.gal-fams button em { font: 600 10px var(--mono); font-style: normal; color: var(--dim2); }
.gal-fams button.on { background: color-mix(in oklab, var(--c) 24%, #15171c); color: var(--tx); border-color: var(--c); }
.gal-q { height: 26px; min-width: 220px; background: #14161b; border: 1px solid var(--line2); border-radius: 6px; color: var(--tx); padding: 0 8px; font: 12px var(--ui); }
.gal-grp-t { font-size: 11.5px; color: var(--dim); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.gal-n { margin-left: auto; font: 500 11px var(--mono); color: var(--dim2); white-space: nowrap; }
/* shared attribute looks */
.fam { --c: #888; display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px var(--ui); font-style: normal; color: color-mix(in oklab, var(--c) 70%, white); white-space: nowrap; }
.fam::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.asp { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--mono); white-space: nowrap; }
.asp i { display: inline-block; border: 1.5px solid var(--c); border-radius: 2px; background: color-mix(in oklab, var(--c) 18%, transparent); flex: none; }
.num { display: inline-flex; flex-direction: column; gap: 2px; font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; color: #e3e6ec; white-space: nowrap; min-width: 46px; }
.num .bar { display: block; height: 3px; width: 100%; min-width: 40px; border-radius: 2px; background: linear-gradient(90deg, #4cd9ef calc(var(--f) * 100%), #262a32 0); }
.num .bar.low { background: linear-gradient(90deg, #47e07a calc(var(--f) * 100%), #262a32 0); }
.num small { font: 400 10px var(--ui); color: var(--dim2); white-space: normal; max-width: 180px; }
.tags { display: flex; flex-wrap: wrap; gap: 3px; } .tags i { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: #1d2128; border: 1px solid #2a2f38; color: #c9ced8; white-space: nowrap; }
.oss { display: flex; flex-wrap: wrap; gap: 3px; }
.os { font-style: normal; font: 600 10px var(--ui); padding: 1px 6px; border-radius: 10px; white-space: nowrap; cursor: help; }
.os.ok { background: color-mix(in oklab, #47e07a 20%, transparent); color: #8ef0b0; } .os.part { background: color-mix(in oklab, #ffc44d 18%, transparent); color: #ffd98a; } .os.no { background: color-mix(in oklab, #ff5a3c 18%, transparent); color: #ff9a82; text-decoration: line-through; }
.txt { color: #c9ced8; font-size: 11.5px; }
.na { color: #454a54; }
/* table */
.gal-tbl th, .gal-tbl td { border-bottom: 1px solid #1a1d22; }
.gal-tbl tr.tgrp th { position: sticky; top: 0; z-index: 2; font: 700 9.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); background: #0f1115; border-bottom: 0; padding: 5px 8px 2px; cursor: default; }
.gal-tbl thead tr:nth-child(2) th { top: 22px; }
.gal-tbl th.g-screen, .gal-tbl td:nth-child(n+5):nth-child(-n+11) { } 
.gal-tbl tr.tgrp th + th { border-left: 1px solid #23262d; }
.gal-tbl td.sorted { background: rgba(76,217,239,.05); }
.gal-tbl th.k-num, .gal-tbl td.k-num { text-align: left; }
.gal-tbl td { vertical-align: middle; }
.gal-tbl tr.gal-tr td:first-child { position: sticky; left: 0; z-index: 1; background: #0e1014; box-shadow: inset 3px 0 0 var(--c); min-width: 190px; }
.gal-tbl tr.gal-tr td:first-child b { display: block; white-space: normal; } .gal-tbl tr.gal-tr td:first-child small { color: var(--dim2); font-size: 10px; }
.gal-tbl tr.gal-tr:hover td, .gal-tbl tr.gal-tr:hover td:first-child { background: #15181e; }
.gal-tbl tr.gal-tr.use td:first-child { background: color-mix(in oklab, var(--A) 10%, #0e1014); }
.gal-tbl td.k-os { min-width: 150px; } .gal-tbl td.k-tags { min-width: 150px; max-width: 260px; } .gal-tbl td.k-text { max-width: 180px; }
.gal-tbl td.use button { min-width: 96px; }
.gal-tbl tr.fam-row td { background: #101216; padding: 10px 8px 4px; font-size: 11px; color: var(--dim2); box-shadow: inset 3px 0 0 var(--c); position: sticky; left: 0; }
.gal-tbl tr.fam-row b { color: color-mix(in oklab, var(--c) 70%, white); font-size: 12.5px; margin-right: 6px; }
.gal-src .os { cursor: default; }
/* cards */
.gal-grp h2 { --c: #888; } .gal-grp h2 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.gal-card { --c: #888; border-top: 2px solid color-mix(in oklab, var(--c) 60%, transparent); padding-top: 8px; }
.gm-h { display: flex; flex-direction: column; gap: 1px; } .gm-h b { font-size: 13.5px; color: var(--tx); } .gm-h span { font-size: 11px; color: var(--dim2); }
.gal-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; margin: 4px 0 6px; }
.gc { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 6px; background: #14161b; border: 1px solid #1f2228; min-width: 0; }
.gc em { font: 600 9px var(--ui); font-style: normal; color: var(--dim2); text-transform: uppercase; letter-spacing: .06em; }
.gc .num { min-width: 0; } .gc .num small { display: none; } .gc .num .bar { min-width: 0; }
.gc.sorted { border-color: color-mix(in oklab, var(--A) 55%, transparent); background: color-mix(in oklab, var(--A) 8%, #14161b); }
.gc.na { opacity: .55; }
.gal-specs dd .tags i { font-size: 10px; }
.gal-foot { display: block; margin-top: 3px; }
.num.price a { color: inherit; text-decoration: none; } .num.price a:hover { color: var(--A); text-decoration: underline; }
.num.price .off { font: 700 9.5px var(--mono); font-style: normal; color: #47e07a; margin-left: 5px; }
.num.price small.alt { white-space: normal; } .num.price small.alt a { color: var(--dim); }
.num.price .loc { font: 600 11px var(--mono); color: #ffd98a; white-space: normal; }
.oos { color: #ff9a82; font-weight: 600; }
.gal-tbl td.k-price { min-width: 150px; max-width: 220px; }
.gc.k-price { grid-column: span 2; } .gc .num.price small { display: block; } .gc .num.price small.alt { display: none; }
em.st { font-style: normal; color: #ffd98a; }
.num.price .pn { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #3a3f48; color: var(--dim); font: 700 8.5px var(--ui); font-style: normal; margin-right: 5px; cursor: help; vertical-align: 1px; }
.num.price .pn:hover { color: var(--A); border-color: var(--A); }
/* lower / upper limits on an attribute (right-click a header or a card stat) */
.gal-tbl th.limited { color: var(--B); } .gal-tbl th .lim { display: block; font: 600 9.5px var(--mono); color: var(--B); text-transform: none; letter-spacing: 0; }
.gc.limited { border-color: color-mix(in oklab, var(--B) 55%, transparent); }
.gal-lims { display: flex; gap: 4px; flex-wrap: wrap; }
.lchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 3px 0 8px; border-radius: 12px; background: color-mix(in oklab, var(--B) 16%, #15171c); border: 1px solid color-mix(in oklab, var(--B) 45%, transparent); font: 500 11px var(--mono); color: #ffe2a3; cursor: pointer; white-space: nowrap; }
.lchip b { font: 600 11px var(--ui); color: var(--tx); }
.lchip button { border: 0; background: none; color: #c9a65a; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lim-pop { position: fixed; z-index: 400; width: 270px; background: #14161b; border: 1px solid #2c3039; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.lim-pop header { display: flex; align-items: baseline; gap: 6px; } .lim-pop header b { font-size: 13px; } .lim-pop header span { color: var(--dim2); font: 500 11px var(--mono); flex: 1; }
.lim-pop .x { border: 0; background: none; color: var(--dim); font-size: 16px; cursor: pointer; }
.lp-range { font: 500 10.5px var(--mono); color: var(--dim2); }
.lp-hist { display: flex; align-items: flex-end; gap: 1px; height: 34px; padding: 0 2px; border-bottom: 1px solid #2a2e37; }
.lp-hist i { flex: 1; min-height: 1px; background: #3a3f48; border-radius: 1px 1px 0 0; } .lp-hist i.in { background: var(--B); }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-row label { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: 11px; }
.lp-row input { width: 100%; min-width: 0; height: 26px; background: #0e1014; border: 1px solid var(--line2); border-radius: 6px; color: var(--tx); font: 500 12px var(--mono); padding: 0 6px; }
.lp-sl { position: relative; height: 18px; }
.lp-sl input { position: absolute; left: 0; right: 0; width: 100%; top: 0; margin: 0; pointer-events: none; background: none; -webkit-appearance: none; appearance: none; height: 18px; }
.lp-sl input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--B); border: 2px solid #14161b; cursor: pointer; }
.lp-sl input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--B); border: 2px solid #14161b; cursor: pointer; }
.lp-sl::before { content: ''; position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: #2a2e37; border-radius: 1px; }
.lp-q { display: flex; gap: 4px; } .lp-q button { flex: 1; height: 22px; border-radius: 6px; border: 1px solid var(--line2); background: #1a1c22; color: #c3c8d1; font: 500 10.5px var(--ui); cursor: pointer; }
.lp-k { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--dim); }
.lp-acts { display: flex; align-items: center; gap: 6px; } .lp-acts span { flex: 1; text-align: center; font: 500 10.5px var(--mono); color: var(--dim2); }
.lp-acts button { height: 26px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line2); background: #1a1c22; color: var(--tx); font: 500 12px var(--ui); cursor: pointer; }
.lp-acts button.go { background: color-mix(in oklab, var(--A) 22%, #1a1c22); border-color: color-mix(in oklab, var(--A) 55%, transparent); }
.gal-lims { flex: none; } .lchip { flex: none; }
.doc-bar .gal-lims, .doc-bar .gal-lims span, .doc-bar .gal-n { flex: none; } .doc-bar .gal-n { margin-left: auto; }
/* value picker for non-numeric attributes */
.cat-pop { width: 300px; }
.cp-find, .cp-text input { height: 26px; background: #0e1014; border: 1px solid var(--line2); border-radius: 6px; color: var(--tx); font: 12px var(--ui); padding: 0 8px; }
.cp-quick { display: flex; gap: 4px; align-items: center; } .cp-quick > button { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); background: #1a1c22; color: #c3c8d1; font: 500 10.5px var(--ui); cursor: pointer; }
.cp-mode { margin-left: auto; } .cp-mode button { height: 22px; font-size: 10.5px; padding: 0 7px; }
.cp-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow: auto; border: 1px solid #1f2228; border-radius: 6px; padding: 3px; }
.cp-list label { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 5px; border-radius: 4px; cursor: pointer; font-size: 11.5px; color: #d6d9e0; }
.cp-list label:hover { background: #1a1d23; } .cp-list label:has(input:checked) { background: color-mix(in oklab, var(--B) 12%, transparent); }
.cp-list label em { font: 600 10px var(--mono); font-style: normal; color: var(--dim2); } .cp-list label.unk span { color: var(--dim2); font-style: italic; }
.cp-text { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--dim); } .cp-text input { flex: 1; min-width: 0; }
.gal-specs dt.limited { color: var(--B); } .gal-specs dt[data-k] { cursor: context-menu; }

/* the touch display's monitor = the settings pages, always on the right (resizable; ⤢ = whole display) */
.xe-mon { width: var(--mon-w, 50%); position: relative; }
.xe-msplit { flex: none; width: 6px; margin: 0 -3px; z-index: 2; cursor: col-resize; position: relative; touch-action: none; }
.xe-msplit::after { content: ''; position: absolute; left: 2px; top: 50%; width: 2px; height: 34px; margin-top: -17px; border-radius: 1px; background: #2a2e37; }
.xe-msplit:hover::after { background: var(--A); }
.xe-mfull { position: absolute; right: 3px; top: 2px; z-index: 3; width: 18px; height: 16px; border: 0; border-radius: 4px; background: #1a1d23; color: var(--dim); font-size: 10px; line-height: 1; cursor: pointer; }
.xe-mfull:hover { color: var(--A); }
.xe.monfull .xe-main, .xe.monfull .xe-msplit { display: none; }
.xe.monfull .xe-mon { flex: 1; width: auto; }
.xe-pages { flex: 1; min-width: 0; min-height: 0; position: relative; }
.xe-pages.wide { display: grid; padding: 6px 24px 6px 6px; gap: 6px; }
.xe-pages .ov { padding-right: 0; }
.xe-pages .ov-top { padding-right: 24px; }
.xe-pages .ov-ln { cursor: pointer; touch-action: none; }
.xe-pages .ov-row:not(.open) { cursor: pointer; }
.xp-slot em { font-style: normal; font-weight: 700; } .xp-slot em.A { color: var(--A); } .xp-slot em.B { color: var(--B); }
.xp-focus { flex: none; margin-top: auto; display: flex; gap: 6px; align-items: baseline; padding: 3px 6px; border-top: 1px solid var(--line); font-size: 9.5px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.xp-focus b { color: var(--tx); font-weight: 600; } .xp-focus span { font: 600 9px var(--mono); color: #c9ced8; } .xp-focus .a { color: var(--A); } .xp-focus .b { color: var(--B); } .xp-focus .w { color: var(--dim2); }
.xp-focus em { font-style: normal; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xe.portrait .xe-msplit, .xe.portrait .xe-mfull { display: none; }
.xe.portrait .xe-mon { width: auto; }
.xp-grid { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px 6px; padding: 1px 6px; border-bottom: 1px solid #1c1e23; }
.xp-grid .xp-cell { border-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: center; min-height: 13px; border-radius: 3px; }
.xp-grid .xp-cell:hover { background: #14161b; }
.xp-grid .xp-cell .ov-rh { padding: 0 2px; font-size: 10px; line-height: 12px; overflow: hidden; } .xp-grid .xp-cell .ov-rh b { font-size: 8.5px; }
.xp-grid .xp-cell .ov-sum { font-size: 8.5px; } .xp-grid .ov-line { padding: 0; gap: 2px; } .xp-grid .ov-tb { height: 10px; }
.xe-pages .ov-row.open { min-height: 0; }
.xe-pages .ov-cols { overflow: hidden; }
.xe-pages .ov-l { font-size: 9.8px; line-height: 10px; } .xe-pages .ov-vr { height: 8.5px; } .xe-pages .ov-ln { padding-bottom: 0; } .xe-pages .ov-v { font-size: 8.5px; line-height: 8.5px; }
.xe-pages .ov-ch { font-size: 9.5px; margin-bottom: 0; } .xe-pages .ov-rh { line-height: 13px; }
.xe-pages .ov-mini { padding-bottom: 2px; } .xe-pages .ov-mt { line-height: 10px; font-size: 9.5px; }
/* the open page in the Pages panel: one-line overview on top, the explained control below */
.xe-pages .ov-row.open { display: flex; flex-direction: column; }
.xe-pages .xp-top { flex: 0 1 auto; grid-auto-rows: min-content; }
.xp-ln { --f: 0; position: relative; display: flex; align-items: baseline; gap: 3px; min-width: 0; height: 12px; padding: 0 2px; margin: 0 -2px 1px; border-radius: 2px; background: linear-gradient(90deg, rgba(77,143,156,.22) calc(var(--f) * 100%), transparent 0); }
.xp-ln.t-toggle, .xp-ln.t-trigger { background: none; } .xp-ln.t-toggle.on { background: rgba(255,90,60,.16); }
.xp-ln.t-choice { background: linear-gradient(90deg, rgba(143,125,255,.2) calc(var(--f) * 100%), transparent 0); }
.xp-ln .ov-l { flex: 1; min-width: 0; font-size: 9.2px !important; line-height: 12px !important; }
.xp-ln .ov-v { flex: none; max-width: 52%; font-size: 8.5px !important; line-height: 12px !important; }
.xp-ln.chg .ov-l { color: var(--tx); } .xp-ln.chg::before { content: ''; position: absolute; right: -1px; top: 1px; width: 3px; height: 3px; border-radius: 50%; background: #ffb02e; }
.xp-ln.ab { box-shadow: inset 2px 0 0 var(--B); }
.xp-ln.shown { outline: 1px solid var(--A); outline-offset: -1px; } .xp-ln.shown .ov-l { color: var(--A); }
.xp-detail { flex: 1 1 52%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; margin: 3px 6px 3px 8px; padding: 4px 6px; border-radius: 6px; background: #12151a; border: 1px solid #1f232a; overflow: hidden; }
.xd-l, .xd-r { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; overflow: hidden; }
.xd-k { font: 600 8px var(--mono); color: var(--dim2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-t { display: flex; align-items: baseline; gap: 8px; } .xd-t b { font: 650 12.5px/1.15 var(--ui); flex: 1; min-width: 0; } .xd-v { font: 700 15px/1 var(--mono); color: var(--A); white-space: nowrap; }
.xd-meter { position: relative; height: 5px; background: #23262d; border-radius: 3px; margin: 4px 0 9px; flex: none; }
.xd-meter .f { position: absolute; left: 0; top: 0; bottom: 0; background: #4d8f9c; border-radius: 3px; }
.xd-meter em { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; border-radius: 1px; } .xd-meter em.a { background: var(--A); } .xd-meter em.b { background: var(--B); } .xd-meter em.d { background: #e8eaef; opacity: .6; width: 1px; }
.xd-meter span { position: absolute; top: 7px; font: 500 7.5px var(--mono); color: var(--dim2); } .xd-meter .lo { left: 0; } .xd-meter .hi { right: 0; }
.xd-opts { display: flex; flex-wrap: wrap; gap: 2px; flex: none; } .xd-opts span { font: 600 8.5px var(--ui); padding: 1px 5px; border-radius: 4px; border: 1px solid #2a2e37; color: var(--dim); }
.xd-opts span.cur { border-color: #8f7dff; color: var(--tx); background: rgba(143,125,255,.16); } .xd-opts sup { font: 700 6.5px var(--mono); margin-left: 2px; } .xd-opts sup.a { color: var(--A); } .xd-opts sup.b { color: var(--B); } .xd-opts sup.d { color: var(--dim2); }
.xd-d { margin: 0; font-size: 9.8px; line-height: 1.3; color: #c9ced8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.xd-how { font-size: 8.5px; line-height: 1.25; color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .xd-how b { color: #c3c8d1; }
.xd-chips { display: flex; gap: 3px; flex-wrap: wrap; } .xd-chips i { font: 600 7.5px var(--mono); font-style: normal; text-transform: uppercase; padding: 1px 4px; border-radius: 3px; background: #1d2128; color: var(--dim); }
.xd-chips i.c { color: #ffb02e; } .xd-chips i.ab { color: var(--B); }
.xd-f { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 6px; margin: 0; font-size: 9px; }
.xd-f dt { color: var(--dim2); white-space: nowrap; } .xd-f dd { margin: 0; font: 500 9px var(--mono); color: #d6d9e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xd-f b.a { color: var(--A); } .xd-f b.b { color: var(--B); }
.xd-pre { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 8.5px; color: var(--dim); } .xd-pre em { font-style: normal; color: var(--dim2); width: 100%; font-size: 7.5px; text-transform: uppercase; letter-spacing: .06em; }
.xd-pre span { white-space: nowrap; } .xd-pre span b { font: 600 8.5px var(--mono); color: #c9ced8; } .xd-pre span.eq b { color: var(--A); } .xd-pre span.cur { color: var(--tx); }

/* ---- catalog engine extras: shortlist, new arrivals, empty state ---- */
.gal-star { flex: none; border: 0; background: none; color: #3a3f4a; font-size: 14px; line-height: 1; padding: 0 4px 0 0; cursor: pointer; vertical-align: -1px; }
.gal-star:hover { color: #8b91a0; } .gal-star.on { color: #e8b13a; }
.gm-h .gal-star { position: absolute; right: 0; top: 0; font-size: 17px; }
.gm-h { position: relative; padding-right: 22px; }
.gal-star-t { height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid var(--line2); background: transparent; color: #8b91a0; font: 600 11.5px var(--ui); cursor: pointer; white-space: nowrap; }
.gal-star-t em { font: 600 10px var(--mono); font-style: normal; color: var(--dim2); }
.gal-star-t.on { color: #e8b13a; border-color: #e8b13a; background: color-mix(in oklab, #e8b13a 14%, #15171c); }
.gal-new { font: 700 9px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #0e1014; background: var(--c, #3987e5); border-radius: 3px; padding: 1px 4px; vertical-align: 2px; margin-left: 4px; }
.gal-card.pop, .gal-tr.pop { animation: galPop 900ms cubic-bezier(.2,.9,.25,1.2) both; }
.gal-card.pop { outline: 1px solid color-mix(in oklab, var(--c) 60%, transparent); outline-offset: 6px; border-radius: 4px; animation: galPop 900ms cubic-bezier(.2,.9,.25,1.2) both, galGlow 6s ease-out 900ms forwards; }
@keyframes galGlow { to { outline-color: transparent; } }
@keyframes galPop { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.gal-empty { margin: 30px auto; max-width: 520px; padding: 22px 24px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--dim); font-size: 13px; line-height: 1.55; text-align: center; }
.gal-empty b { color: var(--tx); }
.gal-nouse { display: block; margin-top: 6px; color: var(--dim2); font-size: 10.5px; }
.gal-verdict { margin: 4px 0 2px; padding: 6px 9px; border-left: 2px solid var(--c); background: color-mix(in oklab, var(--c) 8%, transparent); color: #d5d9e0; font-size: 12px; line-height: 1.45; border-radius: 0 6px 6px 0; }
.yn { font: 600 11.5px var(--ui); } .yn.y { color: #5fd09a; } .yn.n { color: #e07a6a; } .yn.p { color: #d9b25a; }
.yn.y::before { content: '✓ '; } .yn.n::before { content: '✕ '; }
/* ---- fader board schematics ---- */
.gal-board { flex: none; }
.bd-svg { display: block; overflow: visible; }
.bd-case { fill: #1a1d23; stroke: color-mix(in oklab, var(--c) 55%, #444); stroke-width: 1.4; }
.bd-addon { fill: #121418; stroke: color-mix(in oklab, var(--c) 70%, #555); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bd-t { fill: #9aa1ad; font: 600 11px var(--ui); text-anchor: middle; dominant-baseline: middle; }
.bd-enc { fill: #2b2f37; stroke: #4a505c; stroke-width: .8; }
.bd-ring { fill: none; stroke: color-mix(in oklab, var(--c) 80%, #fff); stroke-width: 1.3; stroke-dasharray: 2.2 1.4; opacity: .85; }
.bd-disp { fill: #0d1f2a; stroke: #2c5368; stroke-width: .8; }
.bd-btn { fill: #262a31; stroke: #383d47; stroke-width: .6; }
.bd-slot { fill: #07080a; } .bd-slot.nm { fill: #15171b; }
.bd-cap { fill: #c9ccd2; stroke: #6d727c; stroke-width: .6; } .bd-cap.m { fill: #e06a5a; } .bd-cap.nm { fill: #5b616c; }
.bd-jog { fill: #22262d; stroke: #4a505c; stroke-width: 1; }
.bd-xt { fill: none; stroke: #8b91a0; stroke-width: 1.2; stroke-dasharray: 6 4; opacity: .55; pointer-events: none; }
.bd-xtl { fill: #8b91a0; font: 600 10px var(--mono); opacity: .7; }
.gal-card.use .bd-case { stroke: var(--A); stroke-width: 2.4; }

.gal-tbl .gal-star { min-width: 0; height: auto; border: 0; background: none; padding: 0 5px 0 0; }
.gal-tbl .gal-star.on { color: #e8b13a; }
/* ---- asset tabs grouped by category ---- */
.tgroup { position: relative; display: flex; align-items: stretch; gap: 0; padding: 0 4px; flex: none; }
.tgroup + .tgroup::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line2); }
.tg-lab { position: absolute; left: 10px; top: 3px; font: 600 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--dim2); white-space: nowrap; pointer-events: none; }
.tgroup .tab { padding-top: 9px; }
.top.icons-only .tg-lab { max-width: calc(100% - 14px); overflow: hidden; text-overflow: clip; }
.tdrop { display: flex; align-items: center; gap: 6px; padding: 9px 11px 0; border: 0; background: none; color: var(--dim); cursor: pointer; white-space: nowrap; font: 500 13px var(--ui); position: relative; }
.tdrop.cat { padding-top: 0; }
.tdrop em { font: 600 9px var(--mono); font-style: normal; color: var(--dim2); border: 1px solid var(--line2); border-radius: 4px; padding: 0 3px; }
.tdrop i { font-style: normal; font-size: 10px; color: var(--dim2); }
.tdrop .td-cur { color: var(--tx); }
.tdrop .td-cur:empty { display: none; }
.tdrop.act .td-l { display: none; }
.tdrop.act::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--A); border-radius: 2px; }
.tdrop:hover, .tdrop.open { color: var(--tx); }
.tmenu { position: fixed; z-index: 400; min-width: 200px; display: flex; flex-direction: column; padding: 5px; background: #15171c; border: 1px solid var(--line2); border-radius: 9px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.tmenu .tab { height: 34px; padding: 0 10px; border-radius: 6px; justify-content: flex-start; }
.tmenu .tab .tab-n { margin-left: auto; }
.tmenu .tab:hover { background: #20232a; }
.tmenu .tab.act::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
.tmenu-grp { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; background: none; color: var(--dim); border-radius: 6px; cursor: pointer; font: 500 12.5px var(--ui); text-align: left; }
.tmenu-grp em { margin-left: auto; font: 600 9px var(--mono); font-style: normal; color: var(--dim2); }
.tmenu-grp i { font-style: normal; color: var(--dim2); }
.tmenu-grp:hover, .tmenu-grp.open { background: #20232a; color: var(--tx); }

.tdrop.fold-d { display: none; }
.top.fold-tabs .tgroup.has-fold > .tab { display: none; }
.top.fold-tabs .tdrop.fold-d { display: flex; }
.top.fold-tabs .tdrop .td-cur { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.top.icons-only .tgroup { padding: 0 2px; }
.tdrop .td-l { display: inline-flex; gap: 5px; align-items: center; } .tdrop .td-l .ic { color: var(--dim2); }
.tdrop:hover .td-l .ic { color: var(--A); }

#rbOrient .ori { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; transition: width .2s, height .2s; }
#rbOrient .ori.l { width: 15px; height: 9px; } #rbOrient .ori.p { width: 9px; height: 15px; }
/* ---- Workspace view ---- */
.doc.wsv { padding: 0; overflow: hidden; } .doc.wsv > * { max-width: none; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; }
.ws-desk-t { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--ui); color: var(--dim); }
.ws-desk-t input { width: 62px; height: 26px; border: 1px solid var(--line2); background: #121419; color: var(--tx); border-radius: 6px; padding: 0 6px; font: 600 12px var(--mono); }
.ws-pre { height: 26px; border: 1px solid var(--line2); background: #121419; color: var(--dim); border-radius: 6px; font: 500 12px var(--ui); }
.ws-add-l { font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); }
.ws-add { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-add button, .ws-reset { height: 26px; padding: 0 9px; border: 1px solid var(--line2); background: #171a20; color: var(--tx); border-radius: 13px; font: 500 11.5px var(--ui); cursor: pointer; }
.ws-add button:hover { border-color: var(--A); }
.ws-add button::before { content: '+ '; color: var(--A); }
.ws-tg { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--ui); color: var(--dim); }
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; min-height: 0; }
.ws-stage { position: relative; min-height: 0; padding: 10px; }
.ws-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.ws-desk { fill: #1b1712; stroke: #4a3f31; stroke-width: 3; }
.ws-svg line.g { stroke: #2a241c; stroke-width: 1; } .ws-svg line.g5 { stroke: #3a3126; stroke-width: 1.6; }
.ws-svg .tk { fill: #7d8492; font: 500 15px var(--mono); text-anchor: middle; } .ws-svg .tk.r { text-anchor: end; }
.ws-svg .edge { fill: #9aa1ae; font: 600 17px var(--ui); text-anchor: middle; }
.ws-reach .r1 { fill: rgba(57,135,229,.10); stroke: rgba(57,135,229,.55); stroke-width: 2; stroke-dasharray: 10 8; }
.ws-reach .r2 { fill: rgba(57,135,229,.04); stroke: rgba(57,135,229,.35); stroke-width: 2; stroke-dasharray: 4 8; }
.ws-reach .rl { fill: #6f9fd8; font: 600 14px var(--ui); text-anchor: middle; }
.ws-you { cursor: ew-resize; } .ws-you circle { fill: #1f2a3a; stroke: #3987e5; stroke-width: 3; } .ws-you text { fill: #cfe0f7; font: 700 18px var(--ui); text-anchor: middle; }
.ws-it { cursor: grab; } .ws-it:active { cursor: grabbing; }
.ws-it .ws-body { fill: #24272e; stroke: color-mix(in oklab, var(--c) 70%, #555); stroke-width: 2.5; }
.ws-it .ws-body.dark { fill: #131519; }
.ws-it .ws-rest { fill: #2e3139; stroke: none; } .ws-it .ws-keys { fill: #3a3e48; stroke: #4a4f5a; stroke-width: 1; }
.ws-it .ws-screen { fill: #0d1f2a; stroke: #2c5368; stroke-width: 1.5; }
.ws-it .ws-stick { fill: #111; stroke: color-mix(in oklab, var(--c) 70%, #555); stroke-width: 3; }
.ws-it .ws-line { stroke: #4a4f5a; stroke-width: 2; fill: none; }
.ws-it .ws-pad { fill: #15181d; stroke: #3a3f4a; stroke-width: 2; }
.ws-it .ws-box { fill: rgba(139,145,160,.12); stroke: #8b91a0; stroke-width: 2; stroke-dasharray: 8 6; }
.ws-it .ws-hit { fill: transparent; stroke: none; }
.ws-it .nm { fill: #eef1f6; font: 700 17px var(--ui); text-anchor: middle; paint-order: stroke; stroke: #0b0c10; stroke-width: 4px; pointer-events: none; }
.ws-it .dm { fill: #9aa1ae; font: 500 13px var(--mono); text-anchor: middle; paint-order: stroke; stroke: #0b0c10; stroke-width: 4px; pointer-events: none; }
.ws-it.k-Mousepad .nm, .ws-it.k-Mousepad .dm { opacity: .55; }
.ws-it.sel .ws-hit { stroke: var(--A); stroke-width: 3; stroke-dasharray: 10 6; }
.ws-it.hit .ws-hit { stroke: #e8b13a; stroke-width: 3; }
.ws-it.off .ws-hit { stroke: #e0604f; stroke-width: 4; }
.ws-hl { stroke: var(--A); stroke-width: 2; } .ws-rot { fill: #0f1014; stroke: var(--A); stroke-width: 3; cursor: crosshair; }
.ws-panel { border-left: 1px solid var(--line); background: #0f1014; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; color: var(--dim); }
.ws-panel h4 { margin: 0 0 6px; font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); }
.wsp-sel header { display: flex; align-items: center; gap: 6px; } .wsp-sel header i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.wsp-name { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--tx); font: 700 15px var(--ui); padding: 2px 4px; border-radius: 5px; }
.wsp-name:hover, .wsp-name:focus { border-color: var(--line2); background: #121419; }
.wsp-sel > small { display: block; margin: 2px 0 8px 20px; color: var(--dim2); }
.wsp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.wsp-grid label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 4px; font: 500 10.5px var(--ui); color: var(--dim2); }
.wsp-grid label input[type=number] { grid-column: 1; width: 100%; box-sizing: border-box; height: 26px; border: 1px solid var(--line2); background: #121419; color: var(--tx); border-radius: 6px; padding: 0 6px; font: 600 12px var(--mono); }
.wsp-grid label em { font-style: normal; color: var(--dim2); } .wsp-grid label.tg { display: flex; align-self: end; height: 26px; color: var(--dim); }
.wsp-gaps { margin: 8px 0; color: var(--dim); line-height: 1.5; } .wsp-gaps b { color: var(--tx); }
.wsp-acts { display: flex; flex-wrap: wrap; gap: 4px; } .wsp-acts button { height: 26px; padding: 0 8px; border: 1px solid var(--line2); background: #171a20; color: var(--tx); border-radius: 6px; font: 500 11px var(--ui); cursor: pointer; }
.wsp-acts .del { color: #ff8a7a; }
.ws-panel p { margin: 8px 0 0; line-height: 1.5; } .ws-panel p.src { color: var(--dim2); } .ws-panel a { color: var(--A); }
.wsp-hint { line-height: 1.55; }
.wsp-chk ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .wsp-chk li { padding-left: 14px; position: relative; line-height: 1.4; }
.wsp-chk li::before { content: ''; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; }
.wsp-chk li.ok::before { background: #5fd09a; } .wsp-chk li.hit::before { background: #e8b13a; } .wsp-chk li.off::before { background: #e0604f; }
.wsp-chk small { display: block; margin-top: 6px; color: var(--dim2); }
.wsp-list { display: grid; gap: 3px; } .wsp-list button { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border: 1px solid transparent; background: none; color: var(--tx); border-radius: 6px; font: 500 12px var(--ui); cursor: pointer; text-align: left; }
.wsp-list button i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; } .wsp-list button em { margin-left: auto; font: 500 10px var(--mono); font-style: normal; color: var(--dim2); }
.wsp-list button.act { border-color: var(--A); background: #171a20; } .wsp-list button.hit em { color: #e8b13a; } .wsp-list button.off em { color: #e0604f; }

/* ---------------- Novation Launchkey 37 MK4 on the rig (studio/launchkey.js) ---------------- */
.lkview { position: absolute; }
.lkview[hidden], body:not(.rig) .lkview { display: none; }
.lk-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.lk-svg:not(.stock) .lk-s, .lk-svg:not(.stock) .lk-sg { display: none; }
.lk-svg.stock .lk-u, .lk-svg.stock .lk-ug { display: none; }
.lk-svg [data-c] { cursor: pointer; }
.lk-svg .lk-enc, .lk-svg .lk-wheel { cursor: ns-resize; }
.lk-svg .lk-btn.spare, .lk-svg .lk-pad.empty, .lk-svg .lk-enc.empty { cursor: default; }
.lk-svg .lk-btn .lk-face { transition: fill .12s; }
.lk-svg .lk-btn.lit .lk-face { fill: #2c3039; }
.lk-svg .lk-btn.lit .lk-lab { fill: #ffffff; }
.lk-svg .lk-btn.blink .lk-face { animation: lk-blink .9s steps(2, jump-none) infinite; }
@keyframes lk-blink { 50% { fill: #2c3039; } }
.lk-svg .down { opacity: .72; }
.lk-svg .lk-enc.empty { opacity: .45; }
.lk-svg .lk-enc.focus circle:nth-of-type(2) { stroke: var(--A); stroke-dasharray: none; stroke-width: .7; }
.lk-svg .lk-pad.on rect { stroke: #ffffff; stroke-opacity: .55; stroke-width: .4; }
.lk-svg .lk-key.w.cur rect:first-of-type { fill: #cdeff6; }
.lk-svg .lk-key.b.cur rect:first-of-type { fill: #2f5d68; }
.lk-svg [data-wm] { transition: y .18s ease-out; }
.lk-svg.bending [data-wm="pitch"] { transition: none; }
@media (prefers-reduced-motion: reduce) { .lk-svg [data-wm], .lk-svg .lk-btn .lk-face { transition: none; } .lk-svg .lk-btn.blink .lk-face { animation: none; fill: #2c3039; } }

/* ---------------- Export All (Horizon: every artifact has it) ---------------- */
.ea { display: flex; align-items: center; gap: 6px; }
.ea .ui-button { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: #1a1c22; color: var(--dim); font: 500 12px var(--ui); cursor: pointer; white-space: nowrap; }
.ea .ui-button:hover { color: var(--tx); }
.ea .ui-button:disabled { opacity: .55; cursor: progress; }
.ea .ui-button:focus-visible { outline: 2px solid var(--A); outline-offset: 1px; }
.ea [role="status"] { font: 500 11px var(--mono); color: var(--dim); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea [role="status"]:empty { display: none; }
@media (max-width: 1200px) { .ea .ui-button { padding: 0 7px; } .ea [role="status"] { max-width: 120px; } }
@media (max-width: 900px) { .ea { gap: 4px; } .ea .ui-button { height: 26px; padding: 0 6px; font-size: 11px; } }

/* ---------------- Workspace: the room, desk sections, your chair (studio/workspace.js) ---------------- */
.ws-floor { fill: #0d0e11; }
.ws-desk-o { fill: none; stroke: #4a3f31; stroke-width: 6; }
.ws-desk { fill: #1b1712; stroke: none; }
.ws-addbtn { height: 28px; padding: 0 12px; border: 1px solid color-mix(in oklab, var(--A) 60%, transparent); background: color-mix(in oklab, var(--A) 16%, #14161b); color: var(--tx); border-radius: 8px; font: 600 12px var(--ui); cursor: pointer; }
.ws-addbtn:hover { background: color-mix(in oklab, var(--A) 26%, #14161b); }
.ws-tgb { height: 26px; padding: 0 10px; border: 1px solid var(--line2); background: #171a20; color: var(--dim); border-radius: 6px; font: 500 12px var(--ui); cursor: pointer; }
.ws-tgb.act { color: var(--tx); border-color: var(--B); background: color-mix(in oklab, var(--B) 14%, #171a20); }
.ws-bar button:focus-visible, .ws-pop button:focus-visible, .ws-modal button:focus-visible { outline: 2px solid var(--A); outline-offset: 1px; }
.ws-it.k-Chair { opacity: .92; }
.ch-leg { stroke: #3a3e47; stroke-width: 14; stroke-linecap: round; }
.ch-wheel { fill: #23262c; stroke: #4a4f5a; stroke-width: 3; }
.ch-seat { fill: #2a2e36; stroke: color-mix(in oklab, var(--c) 70%, #555); stroke-width: 4; }
.ch-arm { fill: #20232a; stroke: #4a4f5a; stroke-width: 3; }
.ch-back { fill: #1d2027; stroke: color-mix(in oklab, var(--c) 70%, #555); stroke-width: 4; }
.ch-face { fill: color-mix(in oklab, var(--c) 80%, #fff); opacity: .7; }
.ws-dsec { cursor: move; }
.ws-dsec-r { fill: rgba(255,196,77,.05); stroke: #c99a3a; stroke-width: 3; stroke-dasharray: 14 8; }
.ws-dsec.on .ws-dsec-r { fill: rgba(255,196,77,.11); stroke: var(--B); stroke-dasharray: none; }
.ws-dsec-t { fill: #e7c47a; font: 600 18px var(--ui); text-anchor: middle; paint-order: stroke; stroke: #0b0c10; stroke-width: 5px; pointer-events: none; }
.ws-dh { fill: #1b1712; stroke: #c99a3a; stroke-width: 3; cursor: grab; }
.ws-dh.on { fill: var(--B); stroke: #fff3d6; }
.wsp-desk p { margin: 8px 0; }
.wsp-dlist { display: grid; gap: 3px; margin-bottom: 8px; }
.wsp-dlist button { display: flex; align-items: center; height: 28px; padding: 0 8px; border: 1px solid transparent; background: none; color: var(--tx); border-radius: 6px; font: 500 12px var(--ui); cursor: pointer; text-align: left; }
.wsp-dlist button em { margin-left: auto; font: 500 10px var(--mono); font-style: normal; color: var(--dim2); }
.wsp-dlist button.act { border-color: var(--B); background: #171a20; }
.wsp-desk .wsp-acts { margin-top: 8px; } .wsp-desk small { display: block; margin-top: 8px; color: var(--dim2); }
.ws-mini { display: block; overflow: visible; }

/* the right-click menu: swap a model, or add something at a spot */
.ws-pop { position: fixed; z-index: 420; width: 360px; display: flex; flex-direction: column; background: #14161b; border: 1px solid #2c3039; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.65); font-size: 12px; color: var(--dim); overflow: hidden; }
.ws-pop header { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 6px; }
.ws-pop header b { color: var(--tx); font: 700 13px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ws-pop header span { color: var(--dim2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-pop .x, .ws-modal .x { border: 0; background: none; color: var(--dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.wp-acts { display: flex; gap: 4px; padding: 0 12px 6px; }
.wp-acts button { height: 24px; padding: 0 8px; border: 1px solid var(--line2); background: #171a20; color: var(--tx); border-radius: 6px; font: 500 11px var(--ui); cursor: pointer; }
.wp-acts .del { color: #ff8a7a; }
.wp-q { margin: 0 12px 6px; height: 30px; border: 1px solid var(--line2); background: #0f1014; color: var(--tx); border-radius: 8px; padding: 0 10px; font: 500 12.5px var(--ui); }
.wp-q:focus { outline: none; border-color: var(--A); }
.wp-list { overflow-y: auto; min-height: 0; flex: 1; padding: 0 6px 6px; }
.wp-list h5 { margin: 8px 6px 4px; font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); }
.wp-list h5 i { font: 500 10px var(--ui); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--dim2); margin-left: 4px; }
.wp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 1px solid transparent; background: none; color: var(--tx); border-radius: 8px; cursor: pointer; text-align: left; }
.wp-row:hover, .wp-row.hi { background: #1b1e25; border-color: #2c3039; }
.wp-row.cur { border-color: color-mix(in oklab, var(--c) 50%, transparent); }
.wp-pic { width: 52px; height: 40px; display: grid; place-items: center; flex: none; }
.wp-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wp-t b { font: 600 12px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-t small { color: var(--dim2); font: 500 10.5px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-row em { font: 500 10px var(--mono); font-style: normal; color: var(--dim2); }
.wp-none { margin: 8px; color: var(--dim2); }
.ws-pop footer { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.ws-pop footer a, .wm-note a { color: var(--A); text-decoration: none; } .ws-pop footer a:hover, .wm-note a:hover { text-decoration: underline; }

/* the equipment picker */
.ws-modal { position: fixed; inset: 0; z-index: 410; background: rgba(5,6,8,.62); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.wm-card { width: min(1100px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; background: #121419; border: 1px solid #2c3039; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); overflow: hidden; }
.wm-card header { display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px; }
.wm-card h3 { margin: 0; font: 700 16px var(--ui); color: var(--tx); white-space: nowrap; }
.wm-q { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line2); background: #0c0d10; color: var(--tx); border-radius: 9px; padding: 0 12px; font: 500 13.5px var(--ui); }
.wm-q:focus { outline: none; border-color: var(--A); }
.wm-tabs { display: flex; gap: 4px; padding: 0 16px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.wm-tabs button { flex: none; height: 34px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dim); font: 500 12.5px var(--ui); cursor: pointer; white-space: nowrap; }
.wm-tabs button em { font: 600 10px var(--mono); font-style: normal; color: var(--dim2); margin-left: 3px; }
.wm-tabs button.act { color: var(--tx); border-bottom-color: var(--A); }
.wm-tabs button.none { opacity: .45; }
.wm-note { padding: 8px 16px; font: 500 12px var(--ui); color: var(--dim); min-height: 18px; }
.wm-note b { color: var(--tx); }
.wm-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; }
.wm-it { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid #262a32; background: #16181e; border-radius: 10px; color: var(--tx); text-align: left; cursor: pointer; position: relative; min-width: 0; }
.wm-it:hover { border-color: color-mix(in oklab, var(--c) 60%, #444); background: #1a1d24; }
.wm-pic { width: 100%; height: 104px; display: grid; place-items: center; margin-bottom: 4px; }
.wm-pic.rig { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); border: 1px dashed #333843; border-radius: 8px; }
.wm-it b { font: 600 12.5px var(--ui); line-height: 1.3; }
.wm-it small { font: 500 10.5px var(--ui); color: var(--dim2); line-height: 1.35; }
.wm-it small.sz { font-family: var(--mono); }
.wm-add { position: absolute; top: 8px; right: 8px; font: 600 10.5px var(--ui); color: var(--A); opacity: 0; transition: opacity .12s; }
.wm-it:hover .wm-add, .wm-it:focus-visible .wm-add { opacity: 1; }
.wm-more { grid-column: 1 / -1; color: var(--dim2); margin: 6px 2px; }
@media (max-width: 640px) { .wm-card header { flex-wrap: wrap; } .wm-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .ws-pop { width: calc(100vw - 16px); } }
@media (prefers-reduced-motion: reduce) { .wm-add { transition: none; } }

/* Pen displays view (studio/pens-view.js) */
.pd-svg { display: block; overflow: visible; }
.pd-case { fill: #15171b; stroke: color-mix(in oklab, var(--c) 55%, #444); stroke-width: 1.4; }
.pd-screen { fill: #0d1f2a; stroke: #2c5368; stroke-width: 1; }
.pd-key { fill: #2e323b; stroke: #4a4f5a; stroke-width: .8; }
.pd-ref { fill: none; stroke: #8b91a0; stroke-width: 1.2; stroke-dasharray: 6 4; opacity: .6; pointer-events: none; }
.pd-refl { fill: #8b91a0; font: 600 10px var(--mono); opacity: .75; }
.gal-card.use .pd-case { stroke: var(--A); stroke-width: 2.4; }

/* tilt on a stand, and the 3D room (studio/room3d.js) */
.ws-stand { fill: rgba(232,137,58,.16); stroke: #e8893a; stroke-width: 2; stroke-dasharray: 6 5; }
.wsp-tilt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.wsp-tilt span { font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); margin-right: 2px; }
.wsp-tilt button { height: 24px; padding: 0 7px; border: 1px solid var(--line2); background: #171a20; color: var(--dim); border-radius: 6px; font: 500 11px var(--ui); cursor: pointer; }
.wsp-tilt button.act { color: var(--tx); border-color: #e8893a; background: rgba(232,137,58,.14); }
.r3 { position: absolute; inset: 10px; border-radius: 10px; overflow: hidden; background: #0c0d10; }
.r3-cv { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.r3-cv:active { cursor: grabbing; }
.r3-views { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.r3-views button { height: 26px; padding: 0 9px; border: 1px solid var(--line2); background: rgba(18,20,25,.86); color: var(--tx); border-radius: 6px; font: 500 11.5px var(--ui); cursor: pointer; }
.r3-views button:hover { border-color: var(--A); }
.r3-help { position: absolute; left: 12px; bottom: 10px; font: 500 11px var(--ui); color: var(--dim2); pointer-events: none; }
.r3-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font: 500 13px var(--ui); }

/* ---------------- sync (studio/sync.js, studio/sync-ui.js) ---------------- */
.sync-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: #1a1c22; color: var(--dim); font: 500 12px var(--ui); cursor: pointer; white-space: nowrap; }
.sync-btn:hover { color: var(--tx); }
.sync-btn[hidden] { display: none; }
.sync-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim2); flex: none; }
.sync-btn[data-st="synced"] i { background: #5fd09a; } .sync-btn[data-st="syncing"] i { background: var(--A); }
.sync-btn[data-st="newer"] i { background: var(--B); } .sync-btn[data-st="error"] i { background: #e0604f; }
.sync-btn[data-st="signedout"] { color: var(--tx); border-color: color-mix(in oklab, var(--A) 50%, transparent); }
.sync-card { position: fixed; z-index: 430; width: 300px; padding: 14px; background: #14161b; border: 1px solid #2c3039; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--dim); }
.sync-card h4 { margin: 0; font: 700 14px var(--ui); color: var(--tx); }
.sync-card p { margin: 0; line-height: 1.45; } .sync-card .who { color: var(--tx); font-weight: 600; }
.sync-card .st { display: flex; align-items: center; gap: 6px; } .sync-card .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim2); }
.sync-card .st-synced i { background: #5fd09a; } .sync-card .st-newer i { background: var(--B); } .sync-card .st-error i { background: #e0604f; }
.sync-card label { display: flex; flex-direction: column; gap: 4px; font: 500 11px var(--ui); color: var(--dim2); }
.sync-card input { height: 32px; border: 1px solid var(--line2); background: #0f1014; color: var(--tx); border-radius: 8px; padding: 0 10px; font: 500 13px var(--ui); }
.sync-card input:focus { outline: none; border-color: var(--A); }
.sync-card .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sync-card .acts button { height: 30px; padding: 0 12px; border: 1px solid var(--line2); background: #1a1c22; color: var(--tx); border-radius: 8px; font: 500 12px var(--ui); cursor: pointer; }
.sync-card .acts button.go { border-color: color-mix(in oklab, var(--A) 60%, transparent); background: color-mix(in oklab, var(--A) 18%, #14161b); font-weight: 600; }
.sync-card button:disabled { opacity: .5; cursor: progress; }
.sync-card button:focus-visible, .sync-btn:focus-visible, .sync-bar button:focus-visible { outline: 2px solid var(--A); outline-offset: 1px; }
.sync-card .msg { color: var(--B); }
.sync-card small { color: var(--dim2); line-height: 1.45; }
.sync-card .pill { align-self: center; margin-top: 4px; height: 22px; padding: 0 10px; border: 1px solid transparent; border-radius: 11px; background: none; color: var(--dim2); font: 500 10.5px var(--ui); cursor: pointer; }
.sync-card .pill:hover, .sync-card .pill.on { border-color: var(--line2); color: var(--dim); }
.sync-bar { position: fixed; z-index: 425; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: #1b1e25; border: 1px solid color-mix(in oklab, var(--B) 50%, #2c3039); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); font: 500 12.5px var(--ui); color: var(--tx); }
.sync-bar button { height: 28px; padding: 0 12px; border: 1px solid color-mix(in oklab, var(--B) 60%, transparent); background: color-mix(in oklab, var(--B) 16%, #14161b); color: var(--tx); border-radius: 7px; font: 600 12px var(--ui); cursor: pointer; }
.sync-bar button.later { border-color: var(--line2); background: none; color: var(--dim); font-weight: 500; }
@media (max-width: 1720px) { .ea { gap: 4px; } .ea .ui-button, .sync-btn { padding: 0 8px; font-size: 11.5px; } .ea [role="status"] { max-width: 110px; } }
.sync-card .desk { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.sync-card .desk b { color: var(--tx); font: 600 12px var(--ui); }
.sync-btn.upd::after { content: "update"; margin-left: 4px; padding: 1px 5px; border-radius: 6px; background: color-mix(in oklab, var(--A) 22%, transparent); color: var(--A); font: 600 9.5px var(--mono); }

/* boards: things joined to move and turn together */
.ws-board-r { fill: rgba(155,123,242,.05); stroke: #9b7bf2; stroke-width: 3; stroke-dasharray: 16 10; pointer-events: none; }
.ws-board.on .ws-board-r { fill: rgba(155,123,242,.09); stroke-dasharray: none; }
.ws-board-t { fill: #c7b5ff; font: 700 17px var(--ui); paint-order: stroke; stroke: #0b0c10; stroke-width: 5px; pointer-events: none; }
.wsp-board input.wsp-bname { width: 100%; box-sizing: border-box; height: 28px; border: 1px solid var(--line2); background: #121419; color: var(--tx); border-radius: 6px; padding: 0 8px; font: 600 13px var(--ui); }
.wsp-board p, .wsp-multi p { margin: 6px 0; line-height: 1.45; }
.wsp-multi small { display: block; margin-top: 6px; color: var(--dim2); }
.wsp-acts button.go { border-color: #9b7bf2; background: rgba(155,123,242,.16); }
.wsp-list button .bt { margin-left: 6px; font: 600 10px var(--ui); color: #c7b5ff; white-space: nowrap; }
.wp-board { flex-wrap: wrap; }
.wp-board .go { border-color: #9b7bf2; background: rgba(155,123,242,.16); }
.wp-hint { font: 500 10.5px var(--ui); color: var(--dim2); line-height: 1.4; }

/* lengths in both units: the other one under each field */
.wsp-grid label .alt { grid-column: 1 / -1; font: 500 10px var(--mono); color: var(--dim2); }
.wsp-grid label input[type=text] { grid-column: 1; width: 100%; box-sizing: border-box; height: 26px; border: 1px solid var(--line2); background: #121419; color: var(--tx); border-radius: 6px; padding: 0 6px; font: 600 12px var(--mono); }
.ws-desk-t .alt { font: 500 11px var(--mono); color: var(--dim2); }
.ws-svg .tk { font-size: 13px; }
.wsp-list button { height: auto; min-height: 28px; padding: 4px 8px; line-height: 1.3; }
.wsp-list button em { flex: none; max-width: 48%; text-align: right; line-height: 1.35; }
.ws-desk-t { white-space: nowrap; } .ws-desk-t .alt { white-space: nowrap; }

/* the desktop app's one-strip window (desktop/electron: html.wco): the header is the title bar, Windows draws its caption
   buttons over the right end. The header drags the window and double-click maximises; every control in it stays
   clickable; it keeps clear of the buttons; it dims when another app has focus (Terminus' WINDOW-CHROME-GUIDE.md) */
html.wco .top { -webkit-app-region: drag; user-select: none;
  padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - 140px)) + 10px); }
html.wco .top :is(button, input, select, a, label, .tdrop, .tab, .vtab, .seg-ctl, .ea, .sync-btn, .logo) { -webkit-app-region: no-drag; }
html.wco.fullscreen .top { padding-right: 14px; }
html.wco.unfocused .top > * { opacity: .62; transition: opacity .12s; }
html.wco .top > * { transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) { html.wco .top > * { transition: none; } }

/* Touch surfaces (studio/surfaces-view.js, and the Workspace) */
.ts-case { fill: #15171b; stroke: color-mix(in oklab, var(--c) 55%, #444); stroke-width: 1.4; }
.ts-play { fill: color-mix(in oklab, var(--c) 22%, #101216); stroke: color-mix(in oklab, var(--c) 60%, #333); stroke-width: 1; }
.ts-key { stroke: color-mix(in oklab, var(--c) 40%, #222); stroke-width: .8; }
.gal-card.use .ts-case { stroke: var(--A); stroke-width: 2.4; }
.ws-it .ws-surf { fill: color-mix(in oklab, var(--c) 22%, #101216); stroke: color-mix(in oklab, var(--c) 65%, #333); stroke-width: 1.5; }

/* Ctrl+. feedback, triage and questions (studio/feedback.js): a panel that floats over the stage and stays open while you work */
.fbp { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(760px, calc(100vw - 32px)); height: min(520px, calc(100vh - 84px));
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55); overflow: hidden; }
.fbp > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.fbp > header b { font-size: 13px; letter-spacing: .02em; }
.fbp-who { flex: 1; min-width: 0; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp .x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--dim); font-size: 18px; cursor: pointer; }
.fbp .x:hover { background: #1f2229; color: var(--tx); }
.fbp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.fbp-list { border-right: 1px solid var(--line); overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.fbp-new, .fbp-item { display: block; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 8px; background: none; padding: 8px 10px; cursor: pointer; color: var(--tx); }
.fbp-new { color: var(--A); font-weight: 600; }
.fbp-new:hover, .fbp-item:hover { background: #1b1e24; }
.fbp-new.on, .fbp-item.on { background: #1d2129; border-color: var(--line2); }
.fbp-item b { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.35; margin: 3px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fbp-item em { font-style: normal; font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.fbp .k { display: inline-block; font: 600 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 4px; background: #262a33; color: var(--dim); }
.fbp .k-bug { background: rgba(255,90,60,.16); color: #ff8a70; } .fbp .k-idea { background: rgba(255,196,77,.14); color: var(--B); }
.fbp .k-question { background: rgba(76,217,239,.14); color: var(--A); }
.fbp .st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim2); margin-right: 4px; vertical-align: 1px; }
.fbp .st-open, .fbp .st-seen { background: var(--A); } .fbp .st-partly { background: var(--B); } .fbp .st-done { background: #5fd08a; } .fbp .st-held, .fbp .st-wontfix { background: #8b6b9e; }
.fbp-none { color: var(--dim); font-size: 12px; padding: 8px 10px; margin: 0; }
.fbp-main { overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fbp-kinds { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.fbp-kinds button { border: 0; background: none; padding: 6px 12px; cursor: pointer; color: var(--dim); font-size: 12.5px; }
.fbp-kinds button + button { border-left: 1px solid var(--line2); }
.fbp-kinds button.on { background: #22262e; color: var(--tx); }
.fbp-text { width: 100%; min-height: 110px; resize: vertical; background: #0f1115; color: var(--tx); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; font: 13.5px/1.45 var(--ui); }
.fbp-text:focus { outline: none; border-color: var(--A); }
.fbp-send { display: flex; align-items: center; gap: 10px; }
.fbp-send small { flex: 1; color: var(--dim2); font-size: 11px; }
.fbp-out { font-size: 12px; color: var(--dim); }
.fbp .go { border: 0; border-radius: 8px; background: var(--A); color: #061317; font-weight: 700; padding: 7px 16px; cursor: pointer; }
.fbp .go:disabled { opacity: .5; cursor: default; }
.fbp-q { font-size: 12px; color: var(--dim); }
.fbp-q p { color: var(--tx); font-size: 13.5px; margin: 8px 0 0; white-space: pre-wrap; }
.fbp-status { margin: 0; font-size: 12px; color: var(--B); }
.fbp-reply { background: #11141a; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; font-size: 13px; }
.fbp-reply code { font: 12px var(--mono); background: #1d2028; padding: 1px 4px; border-radius: 4px; }
.fbp-wait { color: var(--dim); font-size: 12.5px; margin: 0; }
.fbp-follow { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fbp-follow h5 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
@media (max-width: 640px) { .fbp { right: 8px; left: 8px; width: auto; bottom: 8px; } .fbp-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .fbp-list { max-height: 120px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* the Workspace editor pane, as cards (Gianni 2026-11-08: "the editor pane on the right needs some work just making it a
   professional UI"): header with name and Swap, an icon toolbar, then Size, Position, Stand, About; Fit and the room list */
.ws { grid-template-columns: minmax(0, 1fr) 320px; }
.ws-panel { padding: 10px; gap: 8px; background: #0d0e12; }
.wsp-card { background: #13151a; border: 1px solid #1f2229; border-radius: 10px; padding: 10px 12px 12px; }
.wsp-card > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font: 600 10px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.wsp-card > h4 .hint { margin-left: auto; font: 500 10.5px var(--ui); letter-spacing: 0; text-transform: none; color: var(--dim2); }
.wsp-card > h4 .lnk { margin-left: auto; border: 0; background: none; padding: 0; color: var(--A); font: 500 11px var(--ui); letter-spacing: 0; text-transform: none; cursor: pointer; }
.wsp-head { padding: 10px; }
.wsp-head header { display: flex; align-items: flex-start; gap: 8px; }
.wsp-head header > i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--c); flex: none; }
.wsp-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsp-head .wsp-name { flex: none; width: 100%; box-sizing: border-box; font: 650 15px/1.25 var(--ui); padding: 3px 5px; margin-left: -5px; }
.wsp-id small { display: block; margin: 1px 0 0; color: var(--dim2); font-size: 11.5px; line-height: 1.35; }
.wsp-swap { flex: none; height: 28px; padding: 0 11px; border: 1px solid var(--line2); background: #1a1d24; color: var(--tx); border-radius: 7px; font: 600 12px var(--ui); cursor: pointer; }
.wsp-swap:hover { border-color: var(--A); }
.wsp-tools { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding: 3px; background: #0f1115; border: 1px solid #1f2229; border-radius: 8px; }
.wsp-tools .ib { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--dim); cursor: pointer; font: 600 11px var(--mono); }
.wsp-tools .ib:hover { background: #1c1f26; color: var(--tx); }
.wsp-tools .ib.act { background: rgba(76,217,239,.14); color: var(--A); }
.wsp-tools .ib.del:hover { background: rgba(255,90,60,.14); color: #ff8a7a; }
.wsp-tools .sep { width: 1px; height: 18px; background: var(--line2); margin: 0 3px; }
.wsp-tools .grow { flex: 1; }
.ws-panel .wsp-grid { gap: 8px 10px; }
.wsp-grid label.wf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 0; }
.wsp-grid label.wf .fl, .wsp-row .fl { grid-column: 1 / -1; font: 500 11px var(--ui); color: var(--dim); }
.wsp-grid label.wf input { height: 30px; border-radius: 7px 0 0 7px; border-right: 0; background: #0f1115; padding: 0 8px; font: 600 12.5px var(--mono); }
.wsp-grid label.wf input:focus { outline: none; border-color: var(--A); }
.wsp-grid label.wf input:focus + em { border-color: var(--A); }
.wsp-grid label.wf em { display: grid; place-items: center; height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--line2); border-left: 0; border-radius: 0 7px 7px 0; background: #0f1115; font: 500 11px var(--ui); color: var(--dim2); }
.wsp-grid label.wf .alt { font-size: 10px; }
.wsp-edges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.wsp-edges span { display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 6px; background: #0f1115; font: 500 10px var(--ui); color: var(--dim2); }
.wsp-edges b { font: 600 11px var(--mono); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-seg { display: flex; margin-top: 10px; padding: 2px; gap: 2px; background: #0f1115; border: 1px solid #1f2229; border-radius: 8px; }
.wsp-seg button { flex: 1; min-width: 0; height: 26px; padding: 0 2px; border: 0; border-radius: 6px; background: none; color: var(--dim); font: 500 11.5px var(--ui); cursor: pointer; }
.wsp-seg button:hover { color: var(--tx); background: #1a1d24; }
.wsp-seg button.act { color: var(--tx); background: rgba(232,137,58,.2); box-shadow: inset 0 0 0 1px rgba(232,137,58,.55); }
.wsp-seg.wsp-tilt { flex-wrap: nowrap; }
.wsp-row { display: grid; gap: 3px; margin-top: 10px; } .wsp-row .wsp-seg { margin-top: 0; }
.wsp-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0 0; padding: 8px 10px; border-radius: 7px; background: #0f1115; }
.wsp-dl dt { color: var(--dim2); } .wsp-dl dd { margin: 0; text-align: right; font: 600 11.5px var(--mono); color: var(--tx); }
.ws-panel .wsp-note { margin: 8px 0 0; color: var(--dim2); font-size: 11.5px; line-height: 1.45; } .wsp-note b { color: var(--tx); }
.wsp-about p:first-of-type { margin-top: 0; }
.ws-panel .wsp-hint { color: var(--dim); }
.wsp-list.wsp-card { gap: 2px; }
/* on the desk: the raised edge and the tilt handle */
.ws-rise { stroke: #e8893a; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.ws-tilth { cursor: ns-resize; }
.ws-tilth rect { fill: #0f1014; stroke: #e8893a; stroke-width: 2.5; }
.ws-tilth text { fill: #ffb27a; font: 700 13px var(--ui); text-anchor: middle; pointer-events: none; }
.ws-tilth:hover rect { fill: #2a1a0e; }
.ws-panel { overflow-x: hidden; }
.ws-panel .wsp-grid { align-items: start; }
.wsp-edges { grid-template-columns: 1fr 1fr; }
.wsp-edges span { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; }
.ws-tilth { cursor: grab; } .ws-tilth:active { cursor: grabbing; }