/* Lamps: four named colours — good (green), live (blue), warn (amber), bad (red) — as
   --good/--live/--warn/--bad in :root; .led.good/.live/.warn/.bad and .ledbig.* use them.
   Switch jewels are not lamps: they follow the gear they are modelled on.

/* midas.css — the rack language, shared by every page: the web app (web/index.php)
   and the four pages the rack agent serves (pi/agent.py: PAGE, MIXPAGE, SPLASH, HOUSEPAGE).
   The agent serves this file at /midas.css from its own checkout (../web/midas.css).

   Second pass (15 Sept 2026): the Mini Rack's dialect is canonical — the wall, the case,
   rails and units, the header strip and cards, plates and tags, lamps, knobs, bat toggles,
   guarded switches, displays. Pages keep only their own layout, which loads after this
   sheet. The lamp colours are the four named ones: good, live, warn, bad. */
:root{--bg:#131519;--bg2:#0E1013;--panel:#1C2026;--panel2:#22272E;--line:#333A44;--edge:#3E4652;--ink:#E4E2DC;--dim:#8A919B;--faint:#5C636E;--gold:#E0A03C;--teal:#57BECC;--red:#C25A44;--green:#7FA86B;--good:var(--green);--live:#4C8DFF;--warn:var(--gold);--bad:var(--red)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;padding:16px 10px 40px;color:var(--ink);line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0E1013 radial-gradient(ellipse at 50% 0%,#1B1F25,#0E1013 70%);background-attachment:fixed;-webkit-text-size-adjust:100%}
.w{max-width:560px;margin:0 auto;position:relative;z-index:3}
html{background:#0E1013}
.rack{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:18px 38px 22px;border-radius:9px;background:linear-gradient(180deg,#141619,#101215 8%,#0F1114 92%,#0C0E11);box-shadow:0 40px 90px rgba(0,0,0,.65),0 12px 30px rgba(0,0,0,.5),0 0 0 1px #05060814,inset 0 0 0 1px rgba(255,255,255,.03)}
.rack:before,.rack:after{content:"";position:absolute;left:0;right:0;height:9px;background:linear-gradient(180deg,#3B424C,#2A3039);z-index:2}
.rail{position:absolute;top:9px;bottom:9px;width:38px;z-index:2;background:radial-gradient(circle 4.5px at 19px 50%,#050608 96%,transparent 100%) 0 0/38px 22px repeat-y,
         linear-gradient(90deg,#2E343D,#40474F 30%,#3A414A 70%,#2A3038)}
.strip{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:13px 50px;background:linear-gradient(180deg,#262B33,#1B1F25);border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.45);padding-top:14px;padding-bottom:14px}
.strip:before,.strip:after{content:"";position:absolute;top:0;bottom:0;width:36px;background:linear-gradient(180deg,#2B3139,#1F242B);border-right:1px solid var(--edge);display:none}
.strip:before{left:0;border-radius:4px 0 0 4px}
.strip:after{right:0;border-right:none;border-left:1px solid var(--edge);border-radius:0 4px 4px 0}
.strip .sub{margin:0;flex:1;color:var(--dim);font-size:12px}
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3A3F47;vertical-align:middle;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.led.good{background:var(--good);box-shadow:0 0 6px var(--good),0 0 14px rgba(127,168,107,.45)}
.led.warn{background:var(--warn);box-shadow:0 0 6px var(--warn),0 0 14px rgba(224,160,60,.45)}
.led.bad{background:var(--bad);box-shadow:0 0 6px var(--bad),0 0 14px rgba(194,90,68,.45)}
label.plate{display:inline-block;font-size:10.5px;letter-spacing:.22em;margin:0 0 10px;padding:5px 12px 4px;border-radius:2px;font-weight:700;color:#CFC9BC;background:linear-gradient(180deg,#1A1D22,#141619);border:1px solid #0A0C0F;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.04);text-shadow:0 -1px 0 rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.08)}
.hdr label.plate{flex:none;margin:0}
.card{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:5px;padding:16px;margin:0 0 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.4)}
@keyframes pulse{50%{opacity:.45}}
.led.live{background:var(--live);box-shadow:0 0 6px var(--live),0 0 14px rgba(76,141,255,.45)}
.sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:54px;padding:4px 2px 3px;border:0;background:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;color:#8F969F}
.sw:active .bat:after{transform:perspective(60px) rotateX(0deg) scaleY(.94)}
.sw .jewel{position:relative;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#6A3128,#3A1912 55%,#1C0B07);box-shadow:inset 0 1px 2px rgba(0,0,0,.9),inset 0 -1px 1px rgba(255,255,255,.06),
                0 0 0 2px #5C646E,0 0 0 2.5px #A8B0B8,0 0 0 3.5px #1A1E23,0 1px 2px 3.5px rgba(0,0,0,.6)}
.sw .jewel:after{content:"";position:absolute;left:2px;top:1.5px;width:5px;height:3.5px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.sw.on .jewel{background:radial-gradient(circle at 38% 32%,#FFD0C4,#E06A50 40%,var(--red) 62%,#7A3021);box-shadow:0 0 9px var(--red),0 0 20px rgba(194,90,68,.6),inset 0 -1px 2px rgba(0,0,0,.4),
                0 0 0 2px #5C646E,0 0 0 2.5px #A8B0B8,0 0 0 3.5px #1A1E23,0 1px 2px 3.5px rgba(0,0,0,.6)}
.sw.on .jewel:after{background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
.sw .bat{position:relative;width:26px;height:46px;border-radius:13px;margin:2px 0;background:radial-gradient(ellipse at 50% 50%,#07090B,#141719 60%,#1E2227 100%);box-shadow:inset 0 3px 5px rgba(0,0,0,.95),inset 0 -1px 1px rgba(255,255,255,.05),
                0 0 0 2px #262B31,0 0 0 4px #9AA2AB,0 0 0 5px #4A525B,0 0 0 6px #14171B,
                0 2px 3px 6px rgba(0,0,0,.55)}
.sw .bat:before{content:"";position:absolute;inset:-4px;border-radius:50%/40%;pointer-events:none;background:conic-gradient(from 20deg,rgba(255,255,255,.55),rgba(255,255,255,0) 18%,rgba(255,255,255,.15) 35%,rgba(255,255,255,0) 52%,rgba(255,255,255,.5) 68%,rgba(255,255,255,0) 84%,rgba(255,255,255,.55));-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%,#000 80%,transparent 82%);mask:radial-gradient(circle,transparent 60%,#000 62%,#000 80%,transparent 82%)}
.sw .bat:after{content:"";position:absolute;left:8px;top:20px;width:10px;height:24px;border-radius:5px 5px 6px 6px;background:radial-gradient(circle at 50% 88%,#FFFFFF 0,#E9ECEF 22%,rgba(233,236,239,0) 46%),
       linear-gradient(90deg,#6F7780,#DDE1E6 30%,#F4F6F8 45%,#C3C9D0 65%,#5F6770);box-shadow:0 4px 5px rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.6),inset 0 -1px 0 rgba(0,0,0,.35);transition:top .09s,transform .09s,border-radius .09s;transform:perspective(60px) rotateX(22deg);transform-origin:50% 0}
.sw.on .bat:after{top:2px;border-radius:6px 6px 5px 5px;transform:perspective(60px) rotateX(-22deg);transform-origin:50% 100%;background:radial-gradient(circle at 50% 12%,#FFFFFF 0,#E9ECEF 22%,rgba(233,236,239,0) 46%),
       linear-gradient(90deg,#6F7780,#DDE1E6 30%,#F4F6F8 45%,#C3C9D0 65%,#5F6770);box-shadow:0 -1px 4px rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.sw .nm{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.8)}
.sw.on .nm{color:#E8E6E0;text-shadow:0 0 6px rgba(255,255,255,.15),0 1px 0 rgba(0,0,0,.8)}
.sw.house{margin-left:6px;padding-left:12px}
.sw.house:before{content:"";position:absolute;left:0;top:10px;bottom:6px;width:1px;background:rgba(0,0,0,.7);box-shadow:1px 0 0 rgba(255,255,255,.05)}
.sw.house .jewel{background:radial-gradient(circle at 38% 32%,#6A4A1E,#3A2810 55%,#1C1206)}
.sw.house.on .jewel{background:radial-gradient(circle at 38% 32%,#FFF0C0,#F0B850 40%,var(--gold) 62%,#7A5218);box-shadow:0 0 9px var(--gold),0 0 20px rgba(224,160,60,.55),inset 0 -1px 2px rgba(0,0,0,.4),
                0 0 0 2px #5C646E,0 0 0 2.5px #A8B0B8,0 0 0 3.5px #1A1E23,0 1px 2px 3.5px rgba(0,0,0,.6)}
.lcd{position:relative;display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:7px 12px 6px;border-radius:3px;background:linear-gradient(180deg,#061008,#0A1A0E 30%,#08150B);box-shadow:inset 0 2px 6px rgba(0,0,0,.95),inset 0 0 0 1px #020503,0 0 0 1px #2A2F36,0 0 0 2px #0B0D10,0 1px 0 2px rgba(255,255,255,.05)}
.lcd:after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
     linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%)}
.lcd .txt{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9CFFA8;text-shadow:0 0 6px rgba(120,255,140,.75),0 0 14px rgba(120,255,140,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 1.2s}
.lcd .txt.bad{color:#FFC46B;text-shadow:0 0 6px rgba(255,196,107,.75),0 0 14px rgba(255,196,107,.3)}
.lcd .ct{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;color:#6FCF7C;text-shadow:0 0 5px rgba(120,255,140,.5);flex:none;transition:opacity 1.2s}
.lcd .ct.dim{opacity:.42}
.lcd .cur{display:inline-block;width:7px;height:12px;margin-left:2px;vertical-align:-2px;background:#9CFFA8;box-shadow:0 0 6px rgba(120,255,140,.8);animation:blink .9s steps(1) infinite}
body:not(.locked) #rgate{display:none}
body.locked .unit:not(#rgate):not(.strip){display:none}
.unit{margin-left:-38px;margin-right:-38px;padding-left:56px;padding-right:56px}
.unit:before,.unit:after{content:"";position:absolute;top:0;bottom:0;width:38px;z-index:1;pointer-events:none;background:radial-gradient(circle 5.5px at 19px 13px,#6B7480 0,#4A525C 45%,#2C323A 70%,#1A1E23 100%,transparent 100%),
     radial-gradient(circle 5.5px at 19px calc(100% - 13px),#6B7480 0,#4A525C 45%,#2C323A 70%,#1A1E23 100%,transparent 100%),
     radial-gradient(circle 7px at 19px 13px,rgba(0,0,0,.55) 90%,transparent 100%),
     radial-gradient(circle 7px at 19px calc(100% - 13px),rgba(0,0,0,.55) 90%,transparent 100%);background-repeat:no-repeat}
.unit:before{left:0}
.unit:after{right:0}
.unit>.slot{position:absolute;width:7px;height:2px;background:#0F1216;border-radius:1px;z-index:2;pointer-events:none;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.unit>.slot.tl{left:15.5px;top:12px;transform:rotate(-32deg)}
.unit>.slot.tr{right:15.5px;top:12px;transform:rotate(18deg)}
.unit>.slot.bl{left:15.5px;bottom:12px;transform:rotate(41deg)}
.unit>.slot.br{right:15.5px;bottom:12px;transform:rotate(-12deg)}
.disp{font-family:ui-monospace,Menlo,monospace;font-size:26px;line-height:1;padding:7px 10px 5px;min-width:74px;text-align:right;letter-spacing:.06em;color:#8FE39A;border-radius:3px;border:1px solid #000;background:linear-gradient(180deg,#04070A,#0A0F12);box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05);text-shadow:0 0 6px rgba(143,227,154,.8),0 0 14px rgba(143,227,154,.35)}
.disp.amber{color:#F0B860;text-shadow:0 0 6px rgba(240,184,96,.8),0 0 14px rgba(240,184,96,.35)}
.disp.off{color:#2A3A2E;text-shadow:none}
/* blue = live data (the lamp rule): a position fix, the place it resolves to */
.disp.blue,.disp.sm.blue{color:#8CC4FF;text-shadow:0 0 6px rgba(120,180,255,.8),0 0 14px rgba(120,180,255,.35)}
.disp.wide{min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a multi-line readout: several facts in one window, the big line the one that matters */
.disp.panel{display:block;min-width:0;text-align:left;white-space:normal;font-size:12px;line-height:1.5;letter-spacing:.08em;padding:9px 12px 8px;text-transform:uppercase}
.disp.panel .big{display:block;font-size:24px;line-height:1.15;letter-spacing:.06em;margin:1px 0 4px;text-transform:none}
.disp.panel .q{display:block;margin-top:4px;font-size:14px}
.disp.panel .dim{opacity:.55}
.disp:before{content:"";position:absolute}
.dispwrap{position:relative}
.dispwrap:after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.hdr{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.hdr label{margin:0;flex:1}
.hdr label.plate+.tag{margin-left:auto}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.disp.sm{font-size:11px;padding:4px 8px 3px;min-width:0;letter-spacing:.08em;text-align:left;color:#8FE39A}
.disp.sm.amber{color:#F0B860}
.disp.sm.dim{color:#3A4A3E;text-shadow:none}
@keyframes chase{0%,60%,100%{background:#2A2F36;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
   20%{background:var(--gold);box-shadow:0 0 6px var(--gold),0 0 12px rgba(224,160,60,.5)}}
.guard{position:relative;width:64px;height:92px;flex:none}
.guard .base{position:absolute;inset:0;border-radius:5px;background:linear-gradient(180deg,#2A2E35,#1A1D22 60%,#15181C);box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.6)}
.guard .base:before,.guard .base:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;left:5px;background:radial-gradient(circle at 35% 35%,#9AA2AB,#4A525B 60%,#1E2328);box-shadow:0 0 0 1px #050607}
.guard .base:before{top:5px}
.guard .base:after{bottom:5px}
.guard .tog{position:absolute;left:19px;width:26px;top:24px;height:46px;border-radius:13px;cursor:pointer;background:radial-gradient(ellipse at 50% 50%,#07090B,#141719 60%,#1E2227 100%);box-shadow:inset 0 3px 5px rgba(0,0,0,.95),0 0 0 2px #262B31,0 0 0 4px #9AA2AB,0 0 0 5px #4A525B,0 0 0 6px #14171B;border:0}
.guard .tog:after{content:"";position:absolute;left:8px;top:20px;width:10px;height:24px;border-radius:5px 5px 6px 6px;background:radial-gradient(circle at 50% 88%,#FFFFFF 0,#E9ECEF 22%,rgba(233,236,239,0) 46%),
     linear-gradient(90deg,#6F7780,#DDE1E6 30%,#F4F6F8 45%,#C3C9D0 65%,#5F6770);box-shadow:0 4px 5px rgba(0,0,0,.8);transform:perspective(60px) rotateX(22deg);transform-origin:50% 0;transition:top .09s,transform .09s}
.guard.firing .tog:after{top:2px;transform:perspective(60px) rotateX(-22deg);transform-origin:50% 100%}
.guard .cover{position:absolute;left:4px;right:4px;top:18px;bottom:6px;border-radius:5px 5px 7px 7px;cursor:pointer;background:linear-gradient(180deg,#E25A44,#B8321E 45%,#8C2214);border:1px solid #4A0F08;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.45),inset 0 0 0 4px rgba(0,0,0,.12),0 6px 10px rgba(0,0,0,.6);transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.guard .cover:before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;height:7px;border-radius:4px;background:linear-gradient(180deg,#C9CED4,#7B838C 55%,#4B535B);box-shadow:0 1px 1px rgba(0,0,0,.7)}
.guard .cover:after{content:"";position:absolute;left:18px;right:18px;bottom:4px;height:3px;border-radius:2px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.12))}
.guard.armed .cover{transform:perspective(220px) rotateX(-118deg)}
.guard.armed .tog{box-shadow:inset 0 3px 5px rgba(0,0,0,.95),0 0 14px rgba(255,90,60,.55),0 0 0 2px #262B31,0 0 0 4px #9AA2AB,0 0 0 5px #4A525B,0 0 0 6px #14171B}
.guard.firing .tog{animation:blink .5s steps(1) infinite}
.hide{display:none}
.hdr .tag{margin-left:auto}
.knob{position:relative;flex:none;border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:ns-resize;--a:0deg;--f:0.5}
.knob .ring{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 224deg,rgba(255,255,255,.7) 0 2deg,transparent 2deg 27deg),
     conic-gradient(from 0deg,rgba(156,255,168,.9) 0deg,rgba(156,255,168,.9) calc(max(0deg, (var(--f) - 0.5) * 270deg)),transparent calc(max(0deg, (var(--f) - 0.5) * 270deg))),
     conic-gradient(from calc(360deg - max(0deg, (0.5 - var(--f)) * 270deg)),rgba(255,196,107,.9) 0deg,rgba(255,196,107,.9) calc(max(0deg, (0.5 - var(--f)) * 270deg)),transparent calc(max(0deg, (0.5 - var(--f)) * 270deg)));-webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%);mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%)}
.knob .ring:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 135deg,var(--knob-gap,#15181C) 0deg 90deg,transparent 90deg)}
.knob .cap{position:absolute;inset:12%;border-radius:50%;transform:rotate(var(--a));transition:transform .04s linear;background:repeating-conic-gradient(#0E1013 0 4deg,#2C3037 4deg 8deg),#15181C}
.knob .cap:before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#2A2E34,#17191D 60%,#0E1013)}
.knob .cap:after{content:"";position:absolute;left:50%;top:4%;width:8%;height:38%;margin-left:-4%;border-radius:2px;background:linear-gradient(180deg,#FFFFFF,#D8DCE1);box-shadow:0 0 2px rgba(0,0,0,.8)}
.knob:before{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;box-shadow:0 5px 10px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.05)}
.knob:after{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -3px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.knob .hub{position:absolute;z-index:2;left:50%;top:50%;width:34%;height:34%;margin:-17% 0 0 -17%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),conic-gradient(from 0deg,#B9BFC6,#F2F4F6 12%,#8E959D 25%,#DDE1E6 38%,#7C838B 50%,#EEF0F3 62%,#959CA4 75%,#E4E7EB 88%,#B9BFC6);box-shadow:0 0 0 1px #3A3F47,inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.45),0 2px 3px rgba(0,0,0,.6)}
.knob.on:after{box-shadow:0 0 0 3px #9CFFA8,0 0 16px 4px rgba(156,255,168,.75),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -3px 6px rgba(0,0,0,.7)}
.knob.on .ring{filter:drop-shadow(0 0 5px rgba(156,255,168,.9)) brightness(1.3)}
.knob.pk{width:78px;height:78px}
.knob.fk{width:64px;height:64px}
body.off .led,body.off .ledbig,body.off .nav a:before,body.off .scene:before,body.off .su .rl{background:#2E333A!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)!important;animation:none!important}
@keyframes flashred{0%{box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 0 2px var(--red),0 0 18px rgba(194,90,68,.7)}
                     100%{box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}}
@keyframes powerup{0%{opacity:0;transform:translateY(4px)}60%{opacity:.7}100%{opacity:1;transform:none}}
@keyframes ledup{0%{filter:brightness(.2)}100%{filter:none}}
body.booting .strip{animation:powerup .35s both}
body.booting .nav{animation:powerup .35s .12s both}
body.booting .view .unit{animation:powerup .4s .28s both}
body.booting .view .unit:nth-child(2){animation-delay:.36s}
body.booting .view .unit:nth-child(3){animation-delay:.44s}
body.booting .view .unit:nth-child(n+4){animation-delay:.52s}
body.booting .led,body.booting .ledbig{animation:ledup .6s .5s both}
body.off .vum .face{background:radial-gradient(ellipse 90% 120% at 50% 110%,#3A2E1C,#2A2218 60%,#1C1710);box-shadow:inset 0 -14px 26px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.6)}
.rack:before{top:0;border-radius:9px 9px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 #000}
.rack:after{bottom:0;border-radius:0 0 9px 9px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.05)}
.rail.l{left:0;border-right:1px solid #0A0C0F;box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
.rail.r{right:0;border-left:1px solid #0A0C0F;box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.rail:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:radial-gradient(circle 5.5px at 19px 50%,rgba(255,255,255,.07) 96%,transparent 100%) 0 -1px/38px 22px repeat-y}
.lcd .txt.dim{opacity:.42}
@keyframes blink{50%{opacity:.2}}
.kst .pnl{font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-top:-3px}
.kst .mk{width:64px;height:30px;border:0;padding:0;border-radius:2px;cursor:pointer;position:relative;margin-top:4px;background:linear-gradient(180deg,#F4F6F8,#D3D8DD 40%,#AEB5BC);box-shadow:0 0 0 1px #3E444B,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.18),0 3px 0 #6A727A,0 4px 0 #3E444B,0 5px 4px rgba(0,0,0,.45);transition:transform .05s,box-shadow .05s}
.masterk .lbl{min-width:0}

/* ── the meter: a warm-lit VU (was the door's; it is language) ───────────── */
.vu{position:relative;flex:none;width:var(--w,84px);height:var(--h,56px);border-radius:5px;overflow:hidden; background:var(--face,linear-gradient(180deg,#F3E9C9,#E8DCB4 70%,#D9CBA0)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 6px rgba(0,0,0,.3),0 0 0 3px #15171B,0 0 0 4px #3A4048,0 2px 6px 4px rgba(0,0,0,.5)}
.vu svg{position:absolute;inset:0;width:100%;height:100%}
.vu .nd{position:absolute;left:50%;bottom:6px;width:1.5px;height:calc(100% - 18px);margin-left:-1px;background:#1A1510;transform-origin:50% 100%;transform:rotate(var(--n,-25deg))}
.vu .lb{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:8px;font-weight:700;letter-spacing:.3em;color:rgba(0,0,0,.6)}
.vu.amber{--face:radial-gradient(ellipse 90% 120% at 50% 110%,#F4C572 0%,#E2A44A 45%,#B87524 85%,#8A5215 100%); box-shadow:inset 0 0 14px rgba(255,190,90,.55),inset 0 -8px 16px rgba(120,60,10,.55),inset 0 2px 0 rgba(255,255,255,.25),0 0 12px rgba(240,160,60,.35),0 0 0 3px #15171B,0 0 0 4px #3A4048,0 2px 6px 4px rgba(0,0,0,.5)}
.vu.amber .nd{background:linear-gradient(180deg,#1A0E04,#3A2410)}
.vu.amber .lb{color:rgba(60,30,0,.7)}
.vu.cream{--face:radial-gradient(ellipse 110% 120% at 50% 0%,#FBE39E 0%,#F3D586 40%,#E6C46C 78%,#D2AE55 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 10px 22px rgba(255,235,170,.55),inset 0 -10px 16px rgba(110,80,20,.28),0 0 14px rgba(245,199,122,.28)}
.vu.cream .nd{background:#161210}
.vu.cream .lb{color:rgba(40,25,5,.65)}
/* the LA-2A meter: charcoal bevelled bezel, warm backlit face, a fine black needle from a pivot hidden below the face */
.vu.la2a{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 10px 22px rgba(255,235,170,.55),inset 0 -10px 16px rgba(110,80,20,.28),
  0 0 0 5px #2A2C2F,0 0 0 6px #45484C,0 0 0 8px #1B1D1F,0 2px 0 8px rgba(255,255,255,.18),0 10px 22px 6px rgba(0,0,0,.45)}
.vu.la2a .nd{left:50%;bottom:-18%;height:86%;width:3px;margin-left:-1.5px;background:#161210;border-radius:0;
  clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%;transform:rotate(var(--n,0deg));transition:transform .25s cubic-bezier(.2,.9,.3,1.1)}
.vu.la2a .lb{display:none}

/* ── skins: each page in its door unit's language (docs/gear-language.md) ─────
   A skin is a class on <body>. It remaps the theme variables and restyles the
   few components the brief names; the page's layout is untouched. */

/* LA-2A → Mini House. Brushed silver, black legend, one big warm cream VU as the
   focal object, black knobs and fader caps, a chrome toggle for the one binary
   choice, amber incandescent readouts. Nothing else lights. */
.gear-la2a{--panel:#C3C9CF;--panel2:#DFE3E7;--edge:#5A626B;--line:#9AA1A8;--ink:#15181C;--dim:#3A4148;--faint:#5C636B}
.gear-la2a .card,.gear-la2a .strip{color:#15181C;border-color:#5A626B;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 2px),linear-gradient(180deg,#DFE3E7,#C3C9CF 55%,#AEB5BC);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(0,0,0,.45)}
.gear-la2a .unit:before,.gear-la2a .unit:after{background:content:"";position:absolute;top:0;bottom:0;width:38px;z-index:1;pointer-events:none;background:radial-gradient(circle 5.5px at 19px 13px,#F4F6F8 0,#C9CED4 45%,#8E959C 70%,#5F676E 100%,transparent 100%),
     radial-gradient(circle 5.5px at 19px calc(100% - 13px),#F4F6F8 0,#C9CED4 45%,#8E959C 70%,#5F676E 100%,transparent 100%),
     radial-gradient(circle 7px at 19px 13px,rgba(0,0,0,.55) 90%,transparent 100%),
     radial-gradient(circle 7px at 19px calc(100% - 13px),rgba(0,0,0,.55) 90%,transparent 100%);background-repeat:no-repeat}
.gear-la2a .unit>.slot{background:#3E454C;box-shadow:0 1px 0 rgba(255,255,255,.4)}
.gear-la2a h1{color:#15181C;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.gear-la2a .strip .sub,.gear-la2a .tag,.gear-la2a .power,.gear-la2a .lastline,.gear-la2a .rlbl,.gear-la2a .rlbl small{color:#2E353D}
.gear-la2a .plate,.gear-la2a label.plate{color:#15181C;background:linear-gradient(180deg,#BCC2C8,#A7AEB5);border:1px solid #6B737B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(255,255,255,.4);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.gear-la2a input[type=text],.gear-la2a input[type=password]{color:#EDEDEA;border:1px solid #2A2F35;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.45)}
.gear-la2a input::placeholder{color:#6E7378}
.gear-la2a button.big,.gear-la2a .note button,.gear-la2a .foot .quiet{color:#EDEDEA;border:1px solid #0B0B0B;
  background:linear-gradient(180deg,#3C3C3C,#202020 60%,#141414);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 6px rgba(0,0,0,.45)}
.gear-la2a .msg,.gear-la2a .lockmsg{color:#8C1E14}
.gear-la2a .db{color:#F0B860;text-shadow:0 0 6px rgba(240,184,96,.55);background:linear-gradient(180deg,#0E0904,#1A1008);box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 0 0 1px #6B737B}
.gear-la2a .db.off{color:#5A5048;text-shadow:none}
.gear-la2a .fs .scale{background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,transparent 1px calc((100% - 1px) / 12))}
.gear-la2a .fs .scale:after{background:rgba(0,0,0,.85)}
.gear-la2a .fs .lab{color:rgba(0,0,0,.6)} .gear-la2a .fs .lab.m{color:rgba(0,0,0,.85)}
.gear-la2a .fs .slot{box-shadow:inset 0 1px 3px rgba(0,0,0,.95),0 0 0 1px #6B737B,0 1px 0 rgba(255,255,255,.5)}
.gear-la2a .fs .ladder i{background:#8E959C;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.gear-la2a .fs.main .cap{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),repeating-linear-gradient(180deg,#2A2E35 0 3px,#1A1D22 3px 6px)}
.gear-la2a .fs.main .cap:after{background:#B3261E}
.gear-la2a .fs .scrib{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.45),0 0 0 1px #8E959C}
.gear-la2a .hvu{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 12px}
.gear-la2a .hvu{margin:8px 0 16px}
.gear-la2a .hvu .vu{--w:262px;--h:125px}
.gear-la2a .hvu .cap{font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#2E353D}

/* Neve 1073 → Mini Mix. Slate blue-grey painted steel, white silkscreen printed as values
   around the knobs; the ONE important control is the red wing knob (my level), the fine
   controls are small blue wing knobs (pan), everything else grey fluted knobs inside
   brushed-aluminium skirts; cream-white latching push-buttons; no meter, no toggles. */
.gear-1073{--panel:#3E4954;--panel2:#4B5763;--edge:#1E252C;--line:#5F6B77;--ink:#F2F2EE;--dim:#C9CFD4;--faint:#8F99A3;
  --n-red:#8E1F26;--n-red2:#B4303A;--n-blue:#2D4B8F;--n-blue2:#4468B5;--n-grey:#8A8F92;--n-flute:#5A5F63;--n-alu:#C9CCCA;--n-alu2:#8F9497;--n-white:#F0EFE8}
.gear-1073 .card,.gear-1073 .strip{color:#F2F2EE;border-color:#1E252C;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 60%),repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px),linear-gradient(180deg,#4B5763,#3E4954 55%,#36414C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.45)}
.gear-1073 h1{color:#F2F2EE}
.gear-1073 .strip .sub,.gear-1073 .tag,.gear-1073 .power,.gear-1073 .rlbl,.gear-1073 .rlbl small,.gear-1073 .masterk .lbl small,.gear-1073 .kst .nm,.gear-1073 .pnl{color:#E6E9EB}
/* legends are silkscreen, not plates */
.gear-1073 .plate,.gear-1073 label.plate{color:#F2F2EE;background:none;border:0;box-shadow:none;text-shadow:0 1px 0 rgba(0,0,0,.5);padding:2px 0 3px;border-bottom:1px solid rgba(242,242,238,.55);border-radius:0;letter-spacing:.3em}
/* the value is printed under the knob, white on the paint */
.gear-1073 .db{color:#F2F2EE;background:none;box-shadow:none;text-shadow:0 1px 0 rgba(0,0,0,.6);font-weight:700}
.gear-1073 .db.off{color:#8F99A3}
/* cream-white latching push-buttons (the 1073's Ø and EQ) */
.gear-1073 button.big,.gear-1073 .foot .quiet,.gear-1073 .who button{color:#15181C;border:0;
  background:linear-gradient(180deg,#FBFAF5,#EDEBE3 45%,#D9D6CC);
  box-shadow:0 0 0 1px #1A1F24,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.14),0 3px 0 #8A8D86,0 4px 0 #1A1F24,0 5px 5px rgba(0,0,0,.5)}
.gear-1073 button.big:active,.gear-1073 .foot .quiet:active,.gear-1073 .who button:active{transform:translateY(3px);box-shadow:0 0 0 1px #1A1F24,inset 0 1px 0 rgba(255,255,255,.8),inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 #1A1F24}
.gear-1073 .foot .quiet{color:#15181C;border:0}
.gear-1073 .msg{color:#FFD08A}
.gear-1073 input[type=text],.gear-1073 input[type=password]{border:1px solid #1E252C;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.12)}
/* the mute key: a white push-button with a red lamp */
.gear-1073 .kst .mk{background:linear-gradient(180deg,#FBFAF5,#EDEBE3 45%,#D9D6CC);box-shadow:0 0 0 1px #1A1F24,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.14),0 3px 0 #8A8D86,0 4px 0 #1A1F24,0 5px 5px rgba(0,0,0,.5)}
.gear-1073 .kst .mk:after{background:linear-gradient(180deg,#5A1A16,#3A0E0B);box-shadow:inset 0 1px 1px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.45)}
.gear-1073 .kst .mk.muted{box-shadow:0 0 0 1px #1A1F24,inset 0 1px 0 rgba(255,255,255,.8),inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 #1A1F24}
/* knobs. White position dots on the paint (the ring). A static aluminium skirt under a rotating
   grey fluted body; the light and the shadow stay put while the body turns. */
.gear-1073 .knob .ring{background:repeating-conic-gradient(from 224deg,#F2F2EE 0 2.6deg,transparent 2.6deg 27deg);opacity:.95;-webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%);mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%)}
.gear-1073 .knob .ring:after{background:conic-gradient(from 135deg,#3E4954 0deg 90deg,transparent 90deg)}   /* the gap is the bottom quarter */
.gear-1073 .knob:before{inset:12%;background:
    repeating-conic-gradient(rgba(0,0,0,.22) 0 1.5deg,transparent 1.5deg 6deg),
    conic-gradient(from 200deg,#D6D9D7,#A8ACAA 25%,#E2E4E1 50%,#9EA3A6 75%,#D6D9D7);
  box-shadow:0 0 0 1px #14181C,0 5px 10px rgba(0,0,0,.6)}
.gear-1073 .knob:after{inset:12%;background:radial-gradient(circle at 50% 26%,rgba(255,255,255,.34),rgba(255,255,255,0) 56%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.35)}
.gear-1073 .knob .cap{background:none}
.gear-1073 .knob .cap:before{inset:9%;background:repeating-conic-gradient(#5A5F63 0 4deg,#8A8F92 4deg 12deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.55)}
.gear-1073 .knob .cap:after{top:12%;height:30%;width:6%;margin-left:-3%;background:#FFFFFF}
.gear-1073 .knob .hub{width:28%;height:28%;margin:-14% 0 0 -14%;background:radial-gradient(circle at 45% 35%,#A4A9AC,#74797C 60%,#53585B);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.6)}
/* the Marconi wing knob (my level, red; pan, blue): a big round disc with a raised inner circle, a
   rectangular bar straight across it and past both edges, the white index along the pointer end;
   under it a silver skirt wider than the disc; the scale dots on the panel outside. */
.gear-1073 .knob.wing:before{inset:13%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.04) 70%),conic-gradient(from 210deg,#C9CCCA,#8F9497 30%,#DDE0DE 55%,#9A9FA2 80%,#C9CCCA);
  box-shadow:0 0 0 1px #14181C,inset 0 0 0 1px rgba(255,255,255,.35),0 6px 12px rgba(0,0,0,.65)}
.gear-1073 .knob.wing:after{inset:13%;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.28),rgba(255,255,255,0) 52%);box-shadow:none}
.gear-1073 .knob.wing .cap{inset:23%;overflow:visible;box-shadow:none;background:radial-gradient(circle,var(--wk-lt,#B4303A) 0 38%,var(--wk,#8E1F26) 39%,var(--wk,#8E1F26) 62%,var(--wk-dk,#5E1218) 64%,var(--wk,#8E1F26) 67%,var(--wk,#8E1F26))}
.gear-1073 .knob.wing .cap:before{content:"";position:absolute;z-index:1;inset:auto;left:39%;width:22%;top:-17%;height:134%;border-radius:2px;
  background:linear-gradient(90deg,var(--wk-dk,#5E1218),var(--wk-lt,#B4303A) 20%,var(--wk,#8E1F26) 50%,var(--wk-lt,#B4303A) 80%,var(--wk-dk,#5E1218));
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.55)}
.gear-1073 .knob.wing .cap:after{z-index:2;left:50%;top:-12%;width:5%;height:36%;margin-left:-2.5%;border-radius:1px;background:#FFFFFF;box-shadow:0 0 1px rgba(0,0,0,.8)}
.gear-1073 .knob.wing .hub{display:none}
.gear-1073 .knob.wing .ring{background:repeating-conic-gradient(from 224deg,#F2F2EE 0 2.6deg,transparent 2.6deg 27deg)}
.gear-1073 .knob.pn.wing{--wk:#2D4B8F;--wk-lt:#4F74C4;--wk-dk:#1C3160}
.gear-1073 .knob.pn.wing .ring{background:repeating-conic-gradient(from 224deg,#F2F2EE 0 3.5deg,transparent 3.5deg 67.5deg);-webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%);mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%)}
.gear-1073 .knob.pn.wing .ring:before{background:#F2F2EE}
.gear-1073 .knob.on:after{box-shadow:0 0 0 3px #9CFFA8,0 0 16px 4px rgba(156,255,168,.8),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.35)}
.gear-1073 .knob.wing.on:after{box-shadow:0 0 0 3px #9CFFA8,0 0 18px 5px rgba(156,255,168,.85)}
.gear-1073 .knob.on .ring{filter:drop-shadow(0 0 5px rgba(156,255,168,.9)) brightness(1.4)}
/* the guarded reset: a white latching button under the red cover, not a toggle */
.gear-1073 .guard .tog{background:linear-gradient(180deg,#FBFAF5,#EDEBE3 45%,#D9D6CC);border-radius:3px;box-shadow:0 0 0 1px #1A1F24,inset 0 1px 0 #fff,0 3px 0 #8A8D86,0 4px 0 #1A1F24}
.gear-1073 .guard .tog:after{background:linear-gradient(180deg,#5A1A16,#3A0E0B);border-radius:2px;width:10px;height:5px;left:50%;margin-left:-5px;top:6px;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)}
.gear-1073 .kst{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* the API's meter: small, cream, amber-lit, in a charcoal bezel */
.vu.vu-api{border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 8px 16px rgba(255,235,170,.5),inset 0 -6px 10px rgba(110,80,20,.25),0 0 0 3px #2A2C2F,0 0 0 4px #45484C,0 0 0 5px #1B1D1F,0 6px 14px 4px rgba(0,0,0,.45)}
.vu.vu-api .nd{left:50%;bottom:-18%;height:86%;width:2px;margin-left:-1px;background:#161210;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%;transform:rotate(var(--n,-50deg));transition:transform .3s cubic-bezier(.2,.9,.3,1.1)}
.vu.vu-api .lb{display:none}

/* API 2500 → Mini Rack. Matte black, API-blue anodized rack ends, white silkscreen in thin-ruled
   boxed sections with titles, blue for the unit words, cream square push-buttons that light when
   latched, LED trios only where a button has states, twin small amber-lit cream VUs. No knobs here. */
.gear-api{--panel:#161718;--panel2:#1E2022;--edge:#0A0B0C;--line:#3A3E42;--ink:#F4F4F2;--dim:#BFC4CA;--faint:#7C838B;--api-blue:#2F5BB7;--api-azure:#4DA3FF}
.gear-api .card,.gear-api .strip{border-color:#0A0B0C;color:#F4F4F2;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.035),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1B1D20,#141618 60%,#0F1113);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px rgba(0,0,0,.5)}
.gear-api .unit:before,.gear-api .unit:after{content:"";position:absolute;top:0;bottom:0;width:38px;z-index:1;pointer-events:none;background:radial-gradient(circle 5.5px at 19px 13px,#F4F6F8 0,#C9CED4 45%,#8E959C 70%,#5F676E 100%,transparent 100%),
     radial-gradient(circle 5.5px at 19px calc(100% - 13px),#F4F6F8 0,#C9CED4 45%,#8E959C 70%,#5F676E 100%,transparent 100%),
     radial-gradient(circle 7px at 19px 13px,rgba(0,0,0,.55) 90%,transparent 100%),
     radial-gradient(circle 7px at 19px calc(100% - 13px),rgba(0,0,0,.55) 90%,transparent 100%),linear-gradient(90deg,#2A55AC,#3B6DCB 45%,#24489A);background-repeat:no-repeat}
.gear-api .unit>.slot{background:#0B0D10;box-shadow:0 1px 0 rgba(255,255,255,.25)}
.gear-api h1{color:#F4F4F2}
.gear-api .plate,.gear-api label.plate{color:#F4F4F2;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none;padding:0 0 3px;border-bottom:2px solid rgba(244,244,242,.85);letter-spacing:.28em;font-weight:800}
.gear-api .tag,.gear-api .stat label,.gear-api .tgt .eng,.gear-api .mx .ch.foh,.gear-api .meter-row .cap,.gear-api .rig .cap{color:var(--api-azure)}
.gear-api .strip .sub,.gear-api .power{color:#BFC4CA}
.gear-api .mm-sec{border:1px solid rgba(255,255,255,.78);box-shadow:none;border-radius:2px}
.gear-api .mm-hdr{background:#141618;color:#F4F4F2;font-size:9px;letter-spacing:.26em}
.gear-api .rig .rw .lg,.gear-api .mx .ch,.gear-api .mx .rh,.gear-api .gs .lg,.gear-api .mx-key{color:#F4F4F2}
.gear-api .rig .rw .vl{color:#BFC4CA}
/* cream square push-buttons; latched = the whole face lights */
.gear-api .mc{background:linear-gradient(180deg,#F7F0D4,#ECE3C1 45%,#D9CFA8);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.14),0 3px 0 #8F8663,0 4px 0 #050607,0 5px 4px rgba(0,0,0,.5)}
.gear-api .mc.muted{background:linear-gradient(180deg,#FF9B86,#FF5A3C 50%,#D33418);box-shadow:0 0 12px rgba(255,90,60,.85),0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.55),inset 0 2px 3px rgba(0,0,0,.25),0 1px 0 #050607;transform:translateY(3px)}
.gear-api .mc.muted:after{background:linear-gradient(180deg,#5A1A16,#3A0E0B);box-shadow:inset 0 1px 1px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5)}
.gear-api .mc.partial{background:linear-gradient(180deg,#FFE0A0,#F2B33D 55%,#C98A1E)}
.gear-api .mc.partial:after{background:linear-gradient(180deg,#5A3A10,#3A2508)}
.gear-api #askgo,.gear-api #go,.gear-api #sendgo,.gear-api .btns button,.gear-api .rig .hdr .mc,.gear-api #arrive .hdr .mc{color:#15181C;border:0;text-shadow:none;
  background:linear-gradient(180deg,#F7F0D4,#ECE3C1 45%,#D9CFA8);box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.14),0 4px 0 #8F8663,0 5px 0 #050607,0 6px 5px rgba(0,0,0,.5)}
.gear-api #askgo:active,.gear-api #go:active,.gear-api #sendgo:active,.gear-api .btns button:active{transform:translateY(4px);box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.7),inset 0 2px 3px rgba(0,0,0,.22),0 1px 0 #050607}
.gear-api #go.good{background:linear-gradient(180deg,#B8F0BC,#7FE08A 50%,#3E9A48);color:#0E1A10}
.gear-api #go.bad{background:linear-gradient(180deg,#FF9B86,#FF5A3C 50%,#D33418);color:#2A0E0B}
.gear-api #go.queued{background:linear-gradient(180deg,#BFDCFF,#7FB4FF 50%,#3E7ACC);color:#0A1A2E}
.gear-api #msg{color:#BFC4CA}
/* the meters: the bar under the coin meter gives way to the twin VUs in the status unit */
.gear-api .meter-row .stack .vu{display:none}
.gear-api .twin{display:flex;gap:14px;justify-content:center;align-items:flex-end;flex:1 1 100%;padding:8px 0 2px}
.gear-api .twin .vu{position:relative;flex:none;width:var(--w,84px);height:var(--h,56px);border-radius:5px;overflow:hidden; background:var(--face,linear-gradient(180deg,#F3E9C9,#E8DCB4 70%,#D9CBA0)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 6px rgba(0,0,0,.3),0 0 0 3px #15171B,0 0 0 4px #3A4048,0 2px 6px 4px rgba(0,0,0,.5);--w:118px;--h:58px;height:var(--h);width:var(--w)}
.gear-api .twin .one{display:flex;flex-direction:column;align-items:center;gap:8px}
.gear-api .twin label{margin:0;font-size:9.5px;letter-spacing:.16em;color:var(--api-azure)}
.gear-api .twin .small{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#BFC4CA}
.gear-api .stat.wide.agebar{display:none}

/* API round two: the type is API's — bold Helvetica caps in white for titles and legends, bold blue
   lowercase for the unit words; the meters lit amber from below in a black frame; the keys are the
   2500's translucent cream squares backlit amber, lit red when latched; the bat toggles slimmer. */
.gear-api .plate,.gear-api label.plate,.gear-api .mm-hdr,.gear-api h1,.gear-api .rig .rw .lg,.gear-api .mx .ch,.gear-api .mx .rh,.gear-api .gs .lg,.gear-api .stat label,.gear-api .sw .nm,.gear-api .tgt .eng,.gear-api .gs .rd,.gear-api .mx-key,.gear-api .rig .cap,.gear-api .meter-row .cap,.gear-api .twin label,.gear-api .rlbl,.gear-api .tele .tag,.gear-api #askgo,.gear-api #go,.gear-api #sendgo,.gear-api .btns button,.gear-api .rig .hdr .mc,.gear-api #arrive .hdr .mc,.gear-api .tag{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.06em}
.gear-api .plate,.gear-api label.plate{font-size:13px;letter-spacing:.12em;font-weight:800;border-bottom:0;padding:0}
.gear-api .mm-hdr{font-size:11px;letter-spacing:.1em;font-weight:800;top:-8px}
.gear-api h1{letter-spacing:.14em;font-weight:800}
.gear-api .tag,.gear-api .stat label,.gear-api .twin label,.gear-api .tele .tag,.gear-api .rig .cap,.gear-api .meter-row .cap{text-transform:lowercase;font-size:11px;letter-spacing:.02em;color:var(--api-azure)}
.gear-api .mx .ch,.gear-api .mx .rh,.gear-api .rig .rw .lg,.gear-api .gs .lg,.gear-api .sw .nm{font-size:9px;letter-spacing:.05em;color:#F4F4F2}
.gear-api .mx .ch.foh{color:var(--api-azure)}
.gear-api .rig .rw .vl{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500}
.gear-api #askgo,.gear-api #go,.gear-api #sendgo,.gear-api .btns button{letter-spacing:.14em;font-size:15px}
/* the 2500's meter: a black frame with a soft inner edge, cream lit amber from the bottom corners */
.vu.vu-api{border-radius:3px;
  --face:radial-gradient(ellipse 120% 90% at 50% 10%,#F8EFD4 0%,#F0E2B8 50%,#E8C97A 85%,#E1A83E 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 -14px 18px -6px rgba(255,140,30,.55),inset 8px -10px 16px -8px rgba(255,150,40,.6),inset -8px -10px 16px -8px rgba(255,150,40,.6),inset 0 6px 12px rgba(255,255,255,.35),
  0 0 0 4px #17181A,0 0 0 5px #2E3033,0 0 0 6px #0C0D0E,0 6px 14px 4px rgba(0,0,0,.5)}
.gear-api .twin .vu{--w:124px;--h:60px;margin:6px 8px 10px}
/* the keys: translucent cream squares, backlit amber; latched = lit red; partial = lit amber */
.gear-api .mc{border-radius:3px;background:linear-gradient(180deg,#F7F1E0 0%,#EFE5C9 45%,#E9D3A0 78%,#E6B95E 100%);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.85),inset 0 -6px 10px -2px rgba(255,140,30,.55),inset 0 0 0 1px rgba(120,80,20,.25),0 3px 0 #5C4520,0 4px 0 #050607,0 5px 6px rgba(0,0,0,.5),0 4px 10px rgba(255,150,40,.25)}
.gear-api .mc:after{background:linear-gradient(180deg,#6A3A10,#3A1E06);box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.35)}
.gear-api .mc.muted{background:linear-gradient(180deg,#FFB3A0 0%,#FF7A5C 45%,#F04A2C 100%);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.7),inset 0 -6px 10px -2px rgba(200,20,0,.6),0 1px 0 #050607,0 0 14px rgba(255,80,50,.85),0 0 28px rgba(255,80,50,.35);transform:translateY(3px)}
.gear-api .mc.muted:after{background:linear-gradient(180deg,#7A1A0E,#3A0A05)}
.gear-api .mc.partial{background:linear-gradient(180deg,#FFE9B8 0%,#FFC85E 45%,#F0A020 100%);box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.7),inset 0 -6px 10px -2px rgba(200,110,0,.6),0 1px 0 #050607,0 0 14px rgba(255,180,60,.8);transform:translateY(3px)}
.gear-api .mc.fohc{background:linear-gradient(180deg,#F7F1E0 0%,#EFE5C9 45%,#E9D3A0 78%,#E6B95E 100%);color:#15181C;
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.85),inset 0 -6px 10px -2px rgba(255,140,30,.55),0 3px 0 #5C4520,0 4px 0 #050607,0 5px 6px rgba(0,0,0,.5)}
.gear-api #askgo,.gear-api #go,.gear-api #sendgo,.gear-api .btns button,.gear-api .rig .hdr .mc,.gear-api #arrive .hdr .mc{background:linear-gradient(180deg,#F7F1E0 0%,#EFE5C9 45%,#E9D3A0 78%,#E6B95E 100%);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 14px -4px rgba(255,140,30,.5),0 4px 0 #5C4520,0 5px 0 #050607,0 6px 6px rgba(0,0,0,.5),0 6px 14px rgba(255,150,40,.22)}

/* ── API round three, from Travis's photographs ──────────────────────────────── */
/* headers: the 2500's bold serif (TONE, LINK, COMPRESSOR); everything else stays Helvetica */
.gear-api .plate,.gear-api label.plate,.gear-api .mm-hdr,.gear-api h1{font-family:"Times New Roman",Times,Georgia,serif;font-weight:800;letter-spacing:.04em}
.gear-api .plate,.gear-api label.plate{font-size:15px}
.gear-api .mm-hdr{font-size:12.5px;top:-9px}
.gear-api h1{font-size:19px;letter-spacing:.1em}
/* the good lamps are lit blue on this panel (Travis: to go with the theme); live stays its blue */
.gear-api{--good:#3F9BFF}
.gear-api .led.good{box-shadow:0 0 6px var(--good),0 0 14px rgba(63,155,255,.5)}
.gear-api .ledbig.good{box-shadow:0 0 8px var(--good),0 0 18px rgba(63,155,255,.5)}
.gear-api .rig .slot4 .jewel.ours{background:radial-gradient(circle at 38% 32%,#D8ECFF,var(--good) 45%,#1F4F8A);box-shadow:0 0 9px var(--good),0 0 20px rgba(63,155,255,.5),inset 0 -1px 2px rgba(0,0,0,.4)}
.gear-api #go.good{background:linear-gradient(180deg,#BFE0FF,#6FB4FF 50%,#2F7BE0);color:#0A1A2E}
/* the 560's slide switch: a black slot between two blue lines, an oval grey cap — down = off, up = on */
.gear-api .sw .bat{width:22px;height:44px;border-radius:0;margin:0;box-shadow:none;
  background:linear-gradient(90deg,transparent 4px,#3F9BFF 4px,#3F9BFF 5px,transparent 5px,transparent 17px,#3F9BFF 17px,#3F9BFF 18px,transparent 18px)}
.gear-api .sw .bat:before{inset:0 7px;border-radius:4px;background:linear-gradient(180deg,#050607,#0E1013);box-shadow:inset 0 1px 2px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.gear-api .sw .bat:after{left:50%;top:auto;bottom:3px;width:18px;height:11px;margin-left:-9px;border-radius:50%;transform:none;
  background:radial-gradient(ellipse at 45% 35%,#FFFFFF,#D9DDE1 45%,#9AA2AB 100%);box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 -1px 1px rgba(0,0,0,.25);transition:bottom .08s}
.gear-api .sw.on .bat:after{top:auto;bottom:30px;border-radius:50%;transform:none;background:radial-gradient(ellipse at 45% 35%,#FFFFFF,#D9DDE1 45%,#9AA2AB 100%)}
.gear-api .sw:active .bat:after{transform:none}
/* the pushbuttons: translucent caps that light as a whole — white off, amber on, red muted */
.gear-api .mc,.gear-api .mc.fohc{height:28px;border-radius:4px;color:#15181C;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFD873,#F2B32A 55%,#D9951A);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3px 5px rgba(160,90,0,.35),0 2px 0 #4A3510,0 3px 0 #050607,0 0 12px rgba(255,190,60,.55),0 3px 6px rgba(0,0,0,.5)}
.gear-api .mc:after,.gear-api .mc.muted:after,.gear-api .mc.partial:after{display:none}
.gear-api .mc.muted{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FF7A62,#F03A22 55%,#C42412);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.3),inset 0 -3px 5px rgba(120,0,0,.35),0 1px 0 #050607,0 0 14px rgba(255,70,40,.75),0 0 28px rgba(255,70,40,.3);transform:translateY(2px)}
.gear-api .mc.partial{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFAE5E,#F27A22 55%,#C85A12);box-shadow:0 0 0 1px #050607,0 1px 0 #050607,0 0 14px rgba(255,140,50,.7);transform:translateY(2px)}
.gear-api .mc.unknown,.gear-api .mc.busy{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(180deg,#8A8F94,#5F6468 55%,#44484C);box-shadow:0 0 0 1px #050607,0 2px 0 #1A1D20,0 3px 0 #050607}
/* action keys: the 560's IN — a white cap, unlit */
.gear-api #askgo,.gear-api #go,.gear-api #sendgo,.gear-api .btns button,.gear-api .rig .hdr .mc,.gear-api #arrive .hdr .mc{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFFFF,#EEF0F2 55%,#D2D6DA);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -3px 5px rgba(0,0,0,.12),0 4px 0 #6F7780,0 5px 0 #050607,0 6px 6px rgba(0,0,0,.5)}
.gear-api .rig .hdr .mc,.gear-api #arrive .hdr .mc{height:26px;box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.6),0 2px 0 #6F7780,0 3px 0 #050607}
/* the status unit: at the top, half the height — the meters left, the numbers and lamps in one row */
.gear-api .status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px;padding-top:10px;padding-bottom:8px}
.gear-api .status .twin{flex:none;order:-1;padding:0;gap:6px;flex-basis:auto}
.gear-api .status .twin .one{gap:3px}
.gear-api .status .twin .vu{--w:82px;--h:40px;margin:4px 3px 6px}
.gear-api .status .twin label{font-size:8.5px}
.gear-api .status .twin .small{font-size:9px}
.gear-api .status .stat{flex:none;min-width:0;max-width:74px;gap:3px;padding:0}
.gear-api .status .stat .disp{font-size:16px;padding:3px 5px 2px;min-width:44px}
.gear-api .status .stat label{font-size:8.5px;letter-spacing:.02em}
.gear-api .status .stat .small{font-size:8.5px;max-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gear-api .status .ledbig{width:12px;height:12px}
.gear-api .status .stat.wide:not(.agebar){flex:1 1 100%;max-width:none;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
.gear-api .status .stat.wide:not(.agebar) .disp.sm{width:100%;max-width:none;text-align:center;font-size:12px}

/* ── API round four ─────────────────────────────────────────────────────────── */
/* every green readout is a glowing blue on this panel; the amber and red ones keep their purpose */
.gear-api .disp{color:#7FC4FF;text-shadow:0 0 6px rgba(127,196,255,.8),0 0 14px rgba(127,196,255,.35)}
.gear-api .disp.sm{color:#7FC4FF}
.gear-api .disp.off{color:#22303F;text-shadow:none}
.gear-api .disp.sm.dim{color:#2A3A4E;text-shadow:none}
.gear-api .disp.amber,.gear-api .disp.sm.amber{color:#F0B860;text-shadow:0 0 6px rgba(240,184,96,.8),0 0 14px rgba(240,184,96,.35)}
.gear-api .lcd{background:linear-gradient(180deg,#050B14,#08131F 30%,#06101A)}
.gear-api .lcd .txt{color:#8CCBFF;text-shadow:0 0 6px rgba(120,190,255,.75),0 0 14px rgba(120,190,255,.3)}
.gear-api .lcd .txt.dim{color:#8CCBFF}
.gear-api .lcd .ct{color:#5FA8E8;text-shadow:0 0 5px rgba(120,190,255,.5)}
.gear-api .lcd .cur{background:#8CCBFF;box-shadow:0 0 6px rgba(120,190,255,.8)}
.gear-api #confirm h2{color:#7FC4FF}
/* From the room: the switch sits beside the readout, not above it */
.gear-api .roomrow{display:flex;align-items:center;gap:14px}
.gear-api .roomrow .lcd{flex:1;margin:0}
.gear-api .roomrow .sw{flex:none;margin:0}
/* Ask and Send: lit caps like the matrix; push-to-talk: a lit square — white until the rack can hear, amber when it can, red while held */
.gear-api #askgo,.gear-api #sendgo,.gear-api .btns button{color:#15181C;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFD873,#F2B32A 55%,#D9951A);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -4px 6px rgba(160,90,0,.35),0 4px 0 #4A3510,0 5px 0 #050607,0 0 16px rgba(255,190,60,.5),0 5px 8px rgba(0,0,0,.5)}
.gear-api #askgo:active,.gear-api #sendgo:active,.gear-api .btns button:active{transform:translateY(4px);box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.5),inset 0 2px 4px rgba(120,60,0,.35),0 1px 0 #050607,0 0 16px rgba(255,190,60,.5)}
.gear-api .ptt{width:58px;height:58px;border-radius:4px;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFFFFF,#EEF0F2 55%,#D2D6DA);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -3px 5px rgba(0,0,0,.12),0 4px 0 #6F7780,0 5px 0 #050607,0 6px 6px rgba(0,0,0,.5)}
.gear-api .ptt .grille{inset:auto;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.55) 1.2px,transparent 1.5px) 0 0/5px 5px;box-shadow:none}
.gear-api .ptt .lamp{display:none}
.gear-api .ptt.live{transform:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FFD873,#F2B32A 55%,#D9951A);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3px 5px rgba(160,90,0,.35),0 3px 0 #4A3510,0 4px 0 #050607,0 0 14px rgba(255,190,60,.55),0 4px 6px rgba(0,0,0,.5)}
.gear-api .ptt:active,.gear-api .ptt.live:active{transform:translateY(3px);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FF7A62,#F03A22 55%,#C42412);
  box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.3),0 1px 0 #050607,0 0 16px rgba(255,70,40,.8),0 0 30px rgba(255,70,40,.3)}
.gear-api .ptt.off{opacity:1;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),linear-gradient(180deg,#8A8F94,#5F6468 55%,#44484C);box-shadow:0 0 0 1px #050607,0 3px 0 #1A1D20,0 4px 0 #050607}
/* the Rig unit: the listeners are four ordinary lamps in a row, the rack's no bigger than the others; the desk box is a box like the rest */
.gear-api .rig .mm-sec{flex:1 1 210px}
.gear-api .rig .mm-sec.desk{flex:1 1 210px}
.gear-api .rig .mm-sec.verdict,.gear-api .rig .mm-sec[style*="flex:1 1 100%"]{flex:1 1 100%}
.gear-api .rig .cap{white-space:normal}
.gear-api .rig .slots{justify-content:flex-start;gap:22px;padding:6px 0 4px}
.gear-api .rig .slot4{flex-direction:row;gap:7px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:9px;letter-spacing:.05em;color:#F4F4F2}
.gear-api .rig .slot4 .jewel{width:9px;height:9px;background:#3A3F47;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.gear-api .rig .slot4 .jewel.on{background:var(--live);box-shadow:0 0 6px var(--live),0 0 14px rgba(76,141,255,.45)}
.gear-api .rig .slot4 .jewel.ours{background:var(--good);box-shadow:0 0 6px var(--good),0 0 14px rgba(63,155,255,.5)}
.gear-api .rig .slot4 .jewel.deaf{background:var(--bad);box-shadow:0 0 6px var(--bad),0 0 14px rgba(194,90,68,.45)}
.gear-api .rig .slot4 .jewel:after{display:none}

/* ── 1176 blackface → Midas (the web app). From UA's 1176LN photograph: black brushed anodize with
   black hex screws, white Helvetica silkscreen, big knobs with a black knurled skirt and a chrome
   domed cap on a white dot scale, columns of black rectangular latching push-buttons with white
   labels, an amber-lit cream VU with VU at both ends, the model name in bold condensed caps. */
.gear-1176{--panel:#1B1C1E;--panel2:#26282B;--edge:#0B0C0D;--line:#3A3D41;--ink:#EDEDEA;--dim:#B8B9B6;--faint:#7C7E7B;--knob-gap:#1B1C1E}
.gear-1176 .card,.gear-1176 .venue.unit,.gear-1176 .strip{border-color:#0B0C0D;color:#EDEDEA;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),linear-gradient(180deg,#222427,#1B1C1E 55%,#151618);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px rgba(0,0,0,.5)}
.gear-1176 .unit>.slot{background:#08090A;box-shadow:0 1px 0 rgba(255,255,255,.12)}
.gear-1176 h1{color:#EDEDEA;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:.14em;font-size:20px;font-stretch:condensed}
.gear-1176 .strip .sub,.gear-1176 .power{color:#B8B9B6}
/* ── type, standardized (Travis, 16 Sept; the Library is the reference) ──────────────────────────────────────
   One family for the words: the panel's Helvetica. Legends are bold caps, letter-spaced; prose is 13 px regular;
   meta lines 12 px dim. Monospace is kept for what a machine wrote — readouts, addresses, code, the filenames on
   the scribble strips — and for the keys, which the Library sets in monospace bold caps. Nothing falls through
   to the system font any more: the body itself is Helvetica. */
.gear-1176,.gear-1176 body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:1.5}
.gear-1176 .meta{font-size:12px;line-height:1.5;color:#B8B9B6}
.gear-1176 p.meta{margin:8px 0 0}
.gear-1176 .meta b{color:#EDEDEA;font-weight:700}
.gear-1176 .meta code,.gear-1176 code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.gear-1176 .empty{font-size:12px;color:#B8B9B6}
.gear-1176 .msg,.gear-1176 div.warn,.gear-1176 .tally{font-size:13px}
/* the Jobs log: the state as a legend, the job in prose, the time as a meta line */
.gear-1176 .log .jst{font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.gear-1176 .log .jwhat{font-size:13px}
.gear-1176 .log .jwhat b{font-weight:700;color:#EDEDEA}
.gear-1176 .log .jwhat .meta{font-size:12px;color:#B8B9B6}
.gear-1176 .log .jwhen{font-size:11px;color:#B8B9B6;letter-spacing:.02em}
.gear-1176 .log .jlast{font-size:12px;color:#B8B9B6}
/* every button — keys, generic buttons, the page tabs' legends — is monospace bold caps, small, spaced (Travis's call, 16 Sept) */
.gear-1176 button,.gear-1176 .key{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* plain labels (not plates) are legends: bold caps, small */
.gear-1176 label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#B8B9B6}
.gear-1176 label.plate{color:#EDEDEA}
/* the Tokens unit's agent names are machine-written: monospace, but at the prose size */
.gear-1176 #agents code{font-size:12.5px}
/* legends: white Helvetica caps, small; section names as the model plate line, bold and condensed */
.gear-1176 .plate,.gear-1176 label.plate{color:#EDEDEA;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none;padding:0 0 2px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.2em;border-bottom:2px solid rgba(237,237,234,.8)}
.gear-1176 .tag,.gear-1176 label,.gear-1176 .su .nm,.gear-1176 .su .meta,.gear-1176 .vum label,.gear-1176 .vum .small{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.06em}
.gear-1176 .tag{color:#B8B9B6}
/* the library's keys: black rectangular buttons with white labels; delete keeps its red */
.gear-1176 .su .ctl .key{color:#EDEDEA;border-radius:2px;background:linear-gradient(180deg,#2E3033,#1E2023 40%,#141517);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),0 3px 0 #0B0C0D,0 4px 0 #050607,0 5px 5px rgba(0,0,0,.5)}
.gear-1176 .su .ctl .key:active{transform:translateY(3px);box-shadow:0 0 0 1px #050607,inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 #050607}
.gear-1176 .su .ctl .key.red{background:linear-gradient(180deg,#E8B0A4,#C86A58 45%,#9C4634);color:#2A0E0B}
/* the knobs: the 1176's — black knurled skirt, a chrome domed cap taking most of the face, white dot scale outside */
.gear-1176 .knob .ring{-webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%);mask:radial-gradient(circle closest-side,transparent 86%,#000 87%,#000 96%,transparent 97%);
  background:repeating-conic-gradient(from 224deg,#EDEDEA 0 2.4deg,transparent 2.4deg 27deg),
     conic-gradient(from 0deg,rgba(242,179,60,.9) 0deg,rgba(242,179,60,.9) calc(max(0deg, (var(--f) - 0.5) * 270deg)),transparent calc(max(0deg, (var(--f) - 0.5) * 270deg))),
     conic-gradient(from calc(360deg - max(0deg, (0.5 - var(--f)) * 270deg)),rgba(242,179,60,.9) 0deg,rgba(242,179,60,.9) calc(max(0deg, (0.5 - var(--f)) * 270deg)),transparent calc(max(0deg, (0.5 - var(--f)) * 270deg)))}
.gear-1176 .knob .cap{inset:14%;background:repeating-conic-gradient(#0A0B0C 0 3deg,#2A2C2F 3deg 6deg),#141517}
.gear-1176 .knob .cap:before{inset:24%;background:repeating-conic-gradient(#0A0B0C 0 3deg,#3A3D41 3deg 6deg);box-shadow:0 0 0 1px #050607,inset 0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.7)}
.gear-1176 .knob .cap:after{top:2%;height:16%;width:5%;margin-left:-2.5%;background:#FFFFFF}
.gear-1176 .knob .hub{display:block;width:40%;height:40%;margin:-20% 0 0 -20%;z-index:2;
  background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.85),rgba(255,255,255,0) 40%),conic-gradient(from 90deg,#E6E8EA,#A5AAAF 15%,#F2F4F6 30%,#9EA3A8 50%,#E6E8EA 65%,#B0B5BA 80%,#E6E8EA);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.7)}
.gear-1176 .knob .ring:after{background:conic-gradient(from 135deg,#1B1C1E 0deg 90deg,transparent 90deg)}
.gear-1176 .knob:before{inset:14%;box-shadow:0 0 0 1px #050607,0 5px 10px rgba(0,0,0,.7)}
.gear-1176 .knob:after{inset:14%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -3px 6px rgba(0,0,0,.6)}
/* the hero meters: the 1176's, cream lit amber, in the black frame */
.gear-1176 .vum .face{border-radius:4px;
  background:radial-gradient(ellipse 110% 130% at 50% 0%,#F6E5B0 0%,#F0D58A 40%,#E6BC5C 78%,#D9A03A 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 10px 20px rgba(255,235,170,.5),inset 0 -10px 16px rgba(120,70,10,.35),0 0 0 4px #17181A,0 0 0 5px #2E3033,0 0 0 6px #0C0D0E,0 8px 18px 4px rgba(0,0,0,.5)}
.gear-1176 .vum .face:after{display:none}
.gear-1176 .vum .needle{background:#161210;width:2px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.gear-1176 .vum .pivot{display:none}

/* ── 1176 polish, from the zoomed photograph ─────────────────────────────── */
/* the wordmark: UNIVERSAL AUDIO is extended bold caps; the model line beneath is condensed bold caps */
.gear-1176 h1{font-size:21px;letter-spacing:.3em;font-weight:900}
.gear-1176 .strip .sub{color:#EDEDEA;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.gear-1176 .strip .sub .model{font-weight:700}
/* legends: plain white condensed caps, no rule beneath (RATIO, METER, INPUT) */
.gear-1176 .plate,.gear-1176 label.plate{border-bottom:0;padding:0;font-size:12px;letter-spacing:.22em}
/* the knob: a wide glossy black skirt with the white index line running to its edge, a knurled ring, a spun-chrome centre */
.gear-1176 .knob .cap{inset:12%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.22),rgba(255,255,255,0) 48%),radial-gradient(circle,#2A2C2F 0 40%,#101214 66%,#050607 100%)}
.gear-1176 .knob .cap:before{inset:26%;background:
    radial-gradient(circle,#F2F4F6 0 18%,#C9CDD1 30%,#9A9FA4 44%,#DADDE0 52%,#8E9398 60%,transparent 62%),
    conic-gradient(from 90deg,#E6E8EA,#A5AAAF 20%,#F2F4F6 40%,#9EA3A8 60%,#E6E8EA 80%,#A5AAAF),
    repeating-conic-gradient(#0A0B0C 0 3deg,#3A3D41 3deg 6deg);
  background-clip:content-box,content-box,border-box;padding:16%;box-shadow:0 0 0 1px #050607,0 2px 4px rgba(0,0,0,.7)}
.gear-1176 .knob .cap:after{top:3%;height:26%;width:2.5%;margin-left:-1.25%;border-radius:0;background:#FFFFFF;box-shadow:0 0 1px rgba(0,0,0,.8)}
.gear-1176 .knob:before{inset:12%;box-shadow:0 0 0 1px #050607,0 6px 12px rgba(0,0,0,.7)}
.gear-1176 .knob:after{inset:12%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.08),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -4px 8px rgba(0,0,0,.6)}
/* text fields: black with white Helvetica, the legends' family, not monospace */
.gear-1176 input[type=text],.gear-1176 input[type=password]{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.04em;color:#FFFFFF;
  background:#050607;border:1px solid #000;border-radius:2px;box-shadow:inset 0 2px 6px rgba(0,0,0,.85),0 0 0 1px #2A2C2F,0 1px 0 rgba(255,255,255,.06);caret-color:#F2B33C}
.gear-1176 input[type=text]:focus,.gear-1176 input[type=password]:focus{border-color:#000;box-shadow:inset 0 2px 6px rgba(0,0,0,.85),0 0 0 1px #F2B33C,0 0 10px rgba(242,179,60,.25)}
.gear-1176 input::placeholder{color:#6E706D;text-transform:uppercase;letter-spacing:.14em;font-size:.82em;font-weight:700}
/* the rack unit's boxed sections: white-ruled frames on the black face, titles and legends in the panel's Helvetica caps */
.gear-1176 .rackpi .sec{border-color:rgba(255,255,255,.72);box-shadow:none}
.gear-1176 .rackpi .sec-hdr{background:#1D1F22;color:#EDEDEA;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:9px;letter-spacing:.24em;top:-8px}
.gear-1176 .rackpi .rw,.gear-1176 .rackpi .cap,.gear-1176 .rackpi .slot4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.1em;color:#EDEDEA}
.gear-1176 .rackpi .rw .vl,.gear-1176 .rackpi .cap,.gear-1176 .rackpi .slot4{color:#B8B9B6;font-weight:500}
/* the file key: a black cap like the rest */
.gear-1176 .file .key{color:#EDEDEA;border-radius:2px;background:linear-gradient(180deg,#2E3033,#1E2023 40%,#141517);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),0 3px 0 #0B0C0D,0 4px 0 #050607,0 5px 5px rgba(0,0,0,.5)}
/* the meter: a thick black frame with rounded corners and a bevelled inner edge; a black band across the foot hides the pivot */
.gear-1176 .vum .face{border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 10px 20px rgba(255,235,170,.5),inset 0 -6px 10px rgba(120,70,10,.25),
  0 0 0 3px #0E0F10,0 0 0 4px #2A2C2E,0 0 0 11px #17181A,0 0 0 12px #050607,0 0 0 13px rgba(255,255,255,.06),0 8px 18px 8px rgba(0,0,0,.55)}
.gear-1176 .vum .face:after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:15%;top:auto;pointer-events:none;
  background:linear-gradient(180deg,#0B0C0D,#151618);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.gear-1176 .vum .needle{bottom:12%;height:66%}
/* the frame is drawn outside the face (13 px of box-shadow), so the face keeps that much clear below it for the legend */
.gear-1176 .vum .face{margin:13px 0 16px}
.gear-1176 .vus{gap:22px}
/* the hero is one unit: the meters between the two button columns, on the darker face the tab strip wore */
.gear-1176 .card.gate{border-color:#060708;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 2px),linear-gradient(180deg,#191C21,#111316 60%,#0C0E11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.4)}
/* the tabs: the 1176's push-buttons — plain black caps, taller than wide, a lighter top bevel, no lamp — stacked
   left of the meters as the RATIO column is, the legend beside the cap on the outboard side. The latched one
   sits in and its legend is lit; a cap under the pointer warms slightly (an amber lamp behind it). */
.gear-1176 .nav a,.gear-1176 .capkey{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;width:auto;height:auto;padding:0;margin:0;
  color:#9A9C99;background:none;border:0;box-shadow:none;transform:none;text-decoration:none;cursor:pointer;
  font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  transition:color .12s,text-shadow .12s}
.gear-1176 .nav.l a{flex-direction:row-reverse}
.gear-1176 .nav a:before,.gear-1176 .capkey:before{content:"";position:static;flex:none;width:34px;height:42px;margin:0;border-radius:2px;
  background:linear-gradient(180deg,#3C3F43 0,#2A2C2F 12%,#1C1E21 55%,#121315 100%);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.6),0 4px 0 #0B0C0D,0 5px 0 #050607,0 6px 6px rgba(0,0,0,.55);
  transition:transform .06s,box-shadow .06s,background .12s}
.gear-1176 .nav a:hover,.gear-1176 .capkey:hover{box-shadow:none;background:none}
.gear-1176 .nav a:hover:not(.on),.gear-1176 .capkey:hover:not(.on){color:#F0DDB0;text-shadow:0 0 8px rgba(242,179,60,.55)}
.gear-1176 .nav a:hover:not(.on):before,.gear-1176 .capkey:hover:not(.on):before{background:linear-gradient(180deg,#464A4F 0,#2F3236 12%,#1F2124 55%,#141517 100%);
  box-shadow:0 0 0 1px #050607,inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.6),0 4px 0 #0B0C0D,0 5px 0 #050607,0 6px 6px rgba(0,0,0,.55),0 0 14px rgba(242,179,60,.28)}
.gear-1176 .nav a.on,.gear-1176 .capkey.on{transform:none;color:#FFFFFF;box-shadow:none}
.gear-1176 .nav a.on:before,.gear-1176 .capkey.on:before{transform:translateY(4px);background:linear-gradient(180deg,#26282B 0,#1A1C1E 40%,#121315 100%);
  box-shadow:0 0 0 1px #050607,inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 #050607}
/* power: a push-button in the 1176's own vocabulary — the tabs' cap, larger, legend beside it; latched in and lit when on.
   The 1176 has no power switch on its face, so nothing is borrowed: the meters' backlight is the pilot lamp. */
.gear-1176 .pwrkey{gap:12px;padding:0}
.gear-1176 .pwrkey:before{width:42px;height:54px}
.gear-1176 .pwrkey:disabled{opacity:.6;cursor:default}
/* on a phone the columns lie down as two rows of three under the meters, legends beneath the caps */
@media (max-width:640px){
  .gear-1176 .nav a,.gear-1176 .nav.l a{flex-direction:column;gap:7px;font-size:8.5px;letter-spacing:.1em}
  .gear-1176 .nav a:before{width:30px;height:36px}
}
.gear-1176 .vum label{color:#EDEDEA;letter-spacing:.2em}