/* Hills East Recording — rackmount edition.
   The page is a 19" rack. Faceplates: brushed black + champagne. One red jewel family.
   Lighting: warm key upper-left, top-edge highlight on every plate. */

@font-face { font-family: "Big Shoulders"; src: url("fonts/bigshoulders-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-8246.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --room: #08080a;
  --rail: #2a2b2f; --rail-hi: #4a4c52;
  --plate: #16171a; --plate-2: #1d1e22; --plate-hi: #35373d;
  --champ: #c9bfa6; --champ-2: #a99f88; --champ-ink: #17130c;
  --silk: #e9e7e0; --silk-2: #a9a8a3; --silk-3: #8f8e8a;
  --red: #e8322a; --red-glow: rgba(232,50,42,.55); --amber: #ffb43c; --green: #62e07a;
  --display: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --silkfont: "Michroma", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --tape: "Caveat", "Comic Sans MS", cursive;
  --u: clamp(64px, 6.2vw, 88px);      /* 1U */
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --lamp: .7;                          /* driven by the Lamps knob */
  --speed: 1;                          /* driven by the Speed knob */
  --accent-hue: 4;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--room); color-scheme: dark; }
body { margin: 0; min-height: 100vh; font: 400 1.0625rem/1.55 var(--body); color: var(--silk); background:
  radial-gradient(ellipse 70% 50% at 15% 0%, #1a1a1e 0%, transparent 60%), var(--room); -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
a { color: var(--silk); }
img, svg { display: block; max-width: 100%; }
h1,h2,h3,p,dl,dd,ol,ul { margin: 0; }
.skip { position: absolute; top: -60px; left: 1rem; z-index: 99; padding: .6rem 1rem; background: var(--red); color: #fff; }
.skip:focus { top: .5rem; }
.legend { font: 400 .66rem/1.3 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: #c3c2bd; }
.tape { font: 700 1.05rem/1 var(--tape); color: #1a1710; background: #e7dcbf; padding: .12em .5em .05em; transform: rotate(-1.5deg); display: inline-block;
  box-shadow: 0 1px 1px #0008; clip-path: polygon(1% 8%, 99% 0, 100% 92%, 2% 100%); }

/* ---------- the rack */
.rack { position: relative; max-width: 1240px; margin: 0 auto; padding: calc(var(--u)/3) 0; display: grid; gap: 4px; align-content: start; }
.unit { margin: 0 clamp(1.3rem, 2.6vw, 1.9rem); }
.rail { position: absolute; top: 0; bottom: 0; width: clamp(1.3rem, 2.6vw, 1.9rem); background: linear-gradient(90deg, #5a5d65, #3a3c42 30%, #2b2c31 70%, #1a1b1e); border-left: 1px solid #6a6d75; border-right: 1px solid #0d0d0f; box-shadow: 4px 0 10px -4px #000; }
.rail--l { left: 0; } .rail--r { right: 0; }
.rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; background:
  repeating-linear-gradient(to bottom, transparent 0 calc(var(--u)/3 - 9px), #050506 calc(var(--u)/3 - 9px) calc(var(--u)/3 - 1px), #6a6d75 calc(var(--u)/3 - 1px) calc(var(--u)/3)); border-radius: 2px; }

.unit { position: relative; border-radius: 2px; padding: calc(var(--u)*.28) calc(var(--gutter) + 22px); background:
  linear-gradient(180deg, var(--plate-hi) 0, var(--plate-2) 2px, var(--plate) 10px, var(--plate) calc(100% - 4px), #0b0b0d 100%);
  box-shadow: 0 1px 0 #55585f inset, 0 2px 0 #2a2b30 inset, 0 -2px 0 #000 inset, 0 -3px 0 #26272c inset, 0 10px 24px -12px #000, 0 2px 0 #050506; }
/* rack ears: the plate's outer 14px is a lighter strip that carries the screws */
.unit::before { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background:
  linear-gradient(90deg, #23252a 0 22px, #000 22px 23px, transparent 23px calc(100% - 23px), #000 calc(100% - 23px) calc(100% - 22px), #23252a calc(100% - 22px)); mix-blend-mode: lighten; opacity: .95; }
.unit::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background:
  linear-gradient(115deg, rgba(255,255,255,.05) 0, transparent 35%), repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
.u1 { min-height: calc(var(--u) - 4px); } .u2 { min-height: calc(var(--u)*2 - 4px); } .u3 { min-height: calc(var(--u)*3 - 4px); } .u4 { min-height: calc(var(--u)*4 - 4px); } .u6 { min-height: calc(var(--u)*6 - 4px); }
.screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8b8e96, #3a3c42 60%, #16171a); box-shadow: 0 0 0 2px #0a0a0b, 0 1px 0 3px #2c2d31; z-index: 2; }
.screw::before { content: ""; position: absolute; inset: 4px 1px; background: #101114; transform: rotate(35deg); }
.screw::after { content: ""; position: absolute; inset: 1px 4px; background: #101114; transform: rotate(35deg); }
.tl { top: calc(var(--u)/6 - 5px); left: 6px; } .tr { top: calc(var(--u)/6 - 5px); right: 6px; } .bl { bottom: calc(var(--u)/6 - 5px); left: 6px; } .br { bottom: calc(var(--u)/6 - 5px); right: 6px; }

/* jewel lamps + LED ladders */
.jewel { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: radial-gradient(circle at 40% 35%, #ff9a94, var(--red) 45%, #5a0d0a 100%);
  box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 3px #3a3c42, 0 0 calc(14px * var(--lamp)) calc(2px * var(--lamp)) var(--red-glow); opacity: calc(.35 + var(--lamp) * .65); transition: opacity .3s, box-shadow .3s; }
.jewel--sm { width: 9px; height: 9px; }
.jewel:not(.jewel--on) { background: radial-gradient(circle at 40% 35%, #6a2a27, #3a0f0d 60%); box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 3px #3a3c42; opacity: .8; }
.ladder-leds { display: inline-flex; gap: 4px; }
.ladder-leds i { width: 7px; height: 12px; border-radius: 1px; background: #1f2a22; box-shadow: inset 0 0 0 1px #0a0a0b; }
.ladder-leds i.on { background: var(--green); box-shadow: 0 0 calc(6px * var(--lamp)) var(--green); }
.ladder-leds i.on.hot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.ladder-leds i.on.peak { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* pushbuttons, big illuminated switch */
.pushbtn { display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: 3px; text-decoration: none; font: 400 .62rem/1 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: var(--silk);
  background: linear-gradient(180deg, #34363c, #202227); box-shadow: 0 2px 0 #0a0a0b, 0 0 0 1px #3f4147 inset; transition: transform .08s, box-shadow .08s; }
.pushbtn:hover { color: #fff; } .pushbtn:active { transform: translateY(2px); box-shadow: 0 0 0 #000, 0 0 0 1px #3f4147 inset; }
.pushbtn--red { color: #ff8c85; box-shadow: 0 2px 0 #0a0a0b, 0 0 0 1px #8a2a25 inset; }
.bigswitch { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .9rem; padding: .95rem 1.4rem .9rem 1.1rem; border-radius: 4px; text-decoration: none; color: #fff; border: 0; cursor: pointer;
  font: 700 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #c33a31, #8a221c 60%, #6a1712); box-shadow: 0 4px 0 #3b0b09, 0 0 0 1px #d85b53 inset, 0 0 calc(24px * var(--lamp)) var(--red-glow); text-align: left; }
.bigswitch small { grid-column: 2; font: 400 .6rem/1 var(--silkfont); letter-spacing: .12em; opacity: .85; }
.bigswitch-lamp { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ffd7d4 40%, #ff5a4f 70%); box-shadow: 0 0 10px #fff8; }
.bigswitch:active { transform: translateY(3px); box-shadow: 0 1px 0 #3b0b09, 0 0 0 1px #d85b53 inset; }

/* knobs */
.knob-wrap { display: grid; justify-items: center; gap: .45rem; }
.knob { --a: 0deg; width: 54px; height: 54px; border-radius: 50%; position: relative; cursor: ns-resize; touch-action: none; user-select: none; filter: drop-shadow(0 4px 3px #000c); }
.knob::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background:
  conic-gradient(from 225deg, var(--silk-3) 0 var(--sweep, 0deg), #2a2b2f var(--sweep, 0deg) 270deg, transparent 270deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%); }
.knob-cap { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--a)); transition: transform .05s linear; }
.knob-line { position: absolute; left: 50%; top: 5px; width: 3px; height: 40%; margin-left: -1.5px; background: var(--silk); border-radius: 2px; }
.knob--skirt .knob-cap { background: radial-gradient(circle at 40% 30%, #6d7079, #2a2b30 55%, #14151a 100%); box-shadow: 0 3px 5px #000a, inset 0 1px 0 #8a8d95; }
.knob--skirt::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #cfc7b4, #8f876f 70%); pointer-events: none; transform: rotate(var(--a)); }
.knob--skirt .knob-line { z-index: 1; top: 8px; height: 30%; background: #111; }
.knob--chicken .knob-cap { background: radial-gradient(circle at 40% 35%, #3b3c41, #121215 70%); box-shadow: 0 3px 5px #000a, inset 0 1px 0 #55575e; }
.knob--chicken .knob-line { top: -6px; height: 58%; width: 12px; margin-left: -6px; background: #161618; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; box-shadow: none; border: 0; }
.knob--chicken .knob-line::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 60%; margin-left: -1px; background: var(--silk); }
.knob--soft .knob-cap { background: radial-gradient(circle at 50% 40%, #2c2d32, #0f0f12 75%); box-shadow: 0 3px 6px #000c, inset 0 0 0 2px #26272c; }
.knob--soft .knob-line { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.knob--big { width: 92px; height: 92px; }
.knob:focus-visible { outline-offset: 12px; }

/* ---------- 1U id */
.id-unit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.id-brand { display: flex; align-items: center; gap: .9rem; }
.brand { font: 700 1.05rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--champ); }
.id-nav { display: flex; gap: .5rem; }

/* ---------- 4U monitor */
.monitor { display: grid; grid-template-columns: minmax(240px, 38%) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-top: calc(var(--u)*.45); padding-bottom: calc(var(--u)*.45); }
.crt { margin: 0; display: grid; gap: .6rem; }
.crt-bezel { position: relative; padding: 16px; border-radius: 10px; background: linear-gradient(180deg, #2b2c31, #121215); box-shadow: inset 0 1px 0 #4a4c52, inset 0 -1px 0 #000, inset 0 0 0 16px #1a1b1f, inset 0 14px 22px 10px #000, 0 6px 14px -6px #000; }
.crt-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #000; filter: contrast(1.05); box-shadow: inset 0 0 30px #000; }
.crt-glass { position: absolute; inset: 14px; border-radius: 6px; pointer-events: none; animation: scan var(--crt-period, 3.2s) linear infinite; background-size: 100% 100%, 100% 6px; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.hero-face { display: grid; gap: 1.2rem; }
h1 { font: 800 clamp(2.6rem, 5.4vw, 4.6rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--silk); }
h1 em { font-style: normal; color: #e2d6b8; }
.lede { color: var(--silk-2); max-width: 52ch; }
.meters { display: flex; gap: 1.2rem; }
.vu { display: grid; justify-items: center; gap: .3rem; width: 150px; }
.vu svg { width: 100%; background: linear-gradient(180deg, #f2ead2, #d9cfae); border-radius: 4px; box-shadow: inset 0 0 0 3px #2a2b2f, inset 0 0 0 4px #5c5f66, inset 0 6px 10px -6px #0006, 0 2px 4px #000a; }
.vu { position: relative; }
.vu::after { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 45%; border-radius: 3px 3px 40% 40%; background: linear-gradient(170deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); pointer-events: none; }
.vu-arc { fill: none; stroke: #2b2620; stroke-width: 2; } .vu-red { fill: none; stroke: var(--red); stroke-width: 5; }
.vu-ticks line { stroke: #2b2620; stroke-width: 1.5; }
.vu-label { font: 700 14px var(--display); fill: #2b2620; text-anchor: middle; letter-spacing: 2px; }
.vu-needle { stroke: #111; stroke-width: 2; }
.vu-hub { fill: #111; }
.hero-controls { display: flex; align-items: end; gap: 1.6rem; flex-wrap: wrap; }
.hero-cluster { display: flex; align-items: end; gap: 1.6rem; padding: .9rem 1.1rem .7rem; border: 1px solid #2c2e33; border-radius: 4px; background: #121316; box-shadow: inset 0 1px 0 #000; }
.hero-controls .bigswitch { padding: 1.15rem 1.7rem 1.1rem 1.3rem; font-size: 1.25rem; }

/* ---------- 2U patchbay */
.patchbay { display: grid; gap: 1.2rem; padding-top: calc(var(--u)*.35); }
.patch-head { display: grid; gap: .6rem; max-width: 70ch; }
h2 { font: 800 clamp(1.9rem, 3.6vw, 3rem)/.95 var(--display); text-transform: uppercase; color: var(--silk); }
.patch-hint { color: var(--silk-2); font-size: .95rem; }
.jackfield { position: relative; display: grid; gap: 2.6rem; padding: 2.4rem var(--gutter) 1.6rem; border-radius: 4px; background: linear-gradient(180deg, #0f0f11, #0a0a0c); box-shadow: inset 0 1px 0 #2a2b2f, inset 0 0 0 1px #050506; }
.cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.tape--jack { z-index: 3; }
.cables path { fill: none; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 3px 2px #0009); }
.cables path.c0 { stroke: #d33a30; } .cables path.c1 { stroke: #3a7bd3; } .cables path.c2 { stroke: #e0b23a; } .cables path.c3 { stroke: #4fbf6a; }
.cables path.preview { stroke: var(--silk-3); stroke-dasharray: 6 6; stroke-width: 4; }
.jackrow { display: grid; grid-template-columns: 7rem repeat(3, 1fr) auto; align-items: center; gap: 1rem; justify-items: center; }
.jackrow > .tape { justify-self: start; }
.jackrow > .tape { min-width: 6.5rem; text-align: center; }
.jack { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; touch-action: none; background: radial-gradient(circle at 50% 50%, #000 0 28%, #2a2b2f 30%, #55585f 48%, #2e3035 52%, #8d9099 55%, #3a3c42 62%, transparent 64%); box-shadow: 0 0 0 1px #0a0a0b; }
.jack.armed { box-shadow: 0 0 0 2px var(--amber), 0 0 12px var(--amber); }
.jack.patched::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7a7d86, #23242a 60%, #0c0c0e); box-shadow: 0 0 0 3px #16171a, 0 2px 3px #000; z-index: 3; }
.jack--room { width: 56px; height: 56px; }
.tape--jack { position: absolute; left: 50%; bottom: calc(100% + 8px); top: auto; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-size: .95rem; }
.jackrow--room .jack--room { grid-column: 3; }
.jackrow--room .lamp-wrap { grid-column: 5; }
.lamp-wrap { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; }
.services { display: grid; gap: 1rem; min-height: 5.5rem; }
.service { display: none; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid #2a2b2f; }
.service.is-on { display: grid; }
.service h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; color: var(--champ); }
.service p { color: var(--silk-2); max-width: 62ch; }
.service-idle { color: var(--silk-2); font-size: .95rem; }
.services.has-route .service-idle { display: none; }

/* ---------- 3U room */
.room { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.room-face { display: grid; gap: 1rem; } .room-face p { color: var(--silk-2); max-width: 58ch; }
.spec { display: grid; gap: 0; border: 1px solid #2a2b2f; border-radius: 3px; background: #0f0f11; }
.spec div { display: grid; grid-template-columns: 7rem 1fr; padding: .7rem 1rem; border-bottom: 1px solid #1e1f23; }
.spec div:last-child { border-bottom: 0; }
.spec dt { font: 400 .62rem/1.6 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: var(--silk-3); }
.spec dd { color: var(--silk); font-weight: 500; }
.ladder { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }

/* ---------- 2U flow */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.selector { display: flex; align-items: center; gap: 1.5rem; }
.stage-labels { list-style: none; padding: 0; display: flex; gap: 1.2rem; font: 400 .62rem/1 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: var(--silk-3); }
.stages { position: relative; min-height: 6rem; }
.stage { display: none; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; }
.stage.is-on { display: grid; }
.stage h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; color: var(--champ); }
.stage p { color: var(--silk-2); max-width: 62ch; }

/* ---------- 4U booking (champagne plate) */
.booking { background: linear-gradient(180deg, #ddd4bd 0, var(--champ) 3px, var(--champ) calc(100% - 3px), #8e8570 100%); color: var(--champ-ink); display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 1px 0 #efe8d6 inset, 0 8px 22px -10px #000; }
.booking::after { background: linear-gradient(115deg, rgba(255,255,255,.18) 0, transparent 35%), repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 3px); }
.booking h2, .booking p { color: var(--champ-ink); }
.booking .screw { box-shadow: 0 0 0 2px #7d7460, 0 1px 0 3px #b5ab93; }
.book-face { display: grid; gap: 1rem; align-content: start; }
.book-facts { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.book-facts li { display: flex; align-items: center; gap: .6rem; }
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
.f { display: grid; gap: .35rem; } .f--wide { grid-column: 1 / -1; }
label { font: 400 .62rem/1.3 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: #4a4331; }
input, select, textarea { width: 100%; background: #f3eee0; color: var(--champ-ink); border: 1px solid #8a8069; border-radius: 3px; padding: .7rem .8rem; font: 400 1rem/1.4 var(--body); box-shadow: inset 0 2px 3px #0002; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,50,42,.25); }
.booking :focus-visible { outline-color: var(--red); }
textarea { resize: vertical; }
.send-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.form-note { font-size: .82rem; color: #5a5240; max-width: 40ch; }

/* ---------- 1U power */
.power { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.power-left { display: flex; align-items: center; gap: 1rem; }
.power-copy { font-size: .85rem; color: var(--silk-2); }
.power-right { display: flex; align-items: center; gap: 1rem; }
.reset { display: inline-grid; place-items: center; gap: .3rem; background: transparent; border: 0; cursor: pointer; padding: .2rem .4rem; color: inherit; }
.reset::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #444, #111 70%); box-shadow: 0 0 0 3px #0a0a0b, 0 0 0 4px #3a3c42, inset 0 1px 2px #000; }
.reset:active::before { transform: translateY(1px); }

/* ---------- hidden rack */
.hidden-rack { background: linear-gradient(180deg, #2a2b30 0, #1a1b1f 3px, #1a1b1f calc(100% - 3px), #0b0b0d 100%); padding: 1rem var(--gutter) 1.4rem; }
.hidden-rack[hidden] { display: none !important; }
.hidden-rack.is-in { animation: slidein .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slidein { from { opacity: 0; transform: translateY(24px); } }
.hr-unit { display: grid; gap: .9rem; padding: 1rem 0; border-top: 1px solid #2a2b2f; }
.hr-unit:first-child { border-top: 0; }
.hr-faceplate { display: grid; gap: .9rem; }
.hr-legend { font: 400 .62rem/1.3 var(--silkfont); letter-spacing: .16em; text-transform: uppercase; color: var(--silk-2); }
.hr-knob { width: 46px; height: 46px; border-radius: 50%; position: relative; cursor: ns-resize; touch-action: none; background: radial-gradient(circle at 40% 35%, #3b3c41, #121215 70%); box-shadow: 0 3px 5px #000a, inset 0 1px 0 #55575e; }
.hr-knob-cap { position: absolute; inset: 0; border-radius: 50%; }
.hr-knob-cap::before { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 40%; margin-left: -1.5px; background: var(--amber); border-radius: 2px; box-shadow: 0 0 5px var(--amber); }
.hr-led { width: 8px; height: 8px; border-radius: 50%; background: #2a1a1a; display: inline-block; box-shadow: inset 0 0 0 1px #000; }
.hr-led.on { background: var(--red); box-shadow: 0 0 6px var(--red); }
.hr-seg { font: 700 2rem/1 "Michroma", monospace; color: #ff5a3c; background: #1a0705; padding: .3rem .7rem; border-radius: 3px; letter-spacing: .1em; box-shadow: inset 0 0 0 2px #000, 0 0 12px #ff5a3c33; min-width: 5ch; text-align: right; }
.hr-step { width: 100%; aspect-ratio: 1; min-width: 26px; border-radius: 3px; border: 0; cursor: pointer; background: linear-gradient(180deg, #34363c, #202227); box-shadow: 0 2px 0 #0a0a0b, inset 0 0 0 1px #3f4147; }
.hr-step.on { background: linear-gradient(180deg, #c33a31, #8a221c); box-shadow: 0 2px 0 #3b0b09, inset 0 0 0 1px #d85b53; }
.hr-step.cur { outline: 2px solid var(--amber); outline-offset: 1px; }
.hr-switch, .hr-btn, .hr-power { padding: .55rem .9rem; border-radius: 3px; border: 0; cursor: pointer; font: 400 .62rem/1 var(--silkfont); letter-spacing: .14em; text-transform: uppercase; color: var(--silk); background: linear-gradient(180deg, #34363c, #202227); box-shadow: 0 2px 0 #0a0a0b, inset 0 0 0 1px #3f4147; }
.hr-switch[aria-pressed="true"], .hr-btn[aria-pressed="true"] { background: linear-gradient(180deg, #c33a31, #8a221c); color: #fff; }
.hr-power { background: linear-gradient(180deg, #b7332c, #7e1d18); color: #fff; }
.hr-key { height: 120px; flex: 1; border: 1px solid #111; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #f4f1e8, #d9d4c6); cursor: pointer; position: relative; }
.hr-key.black { background: linear-gradient(180deg, #2a2b30, #0d0d10); height: 76px; margin: 0 -3.2% ; z-index: 2; flex: .7; }
.hr-key.down { background: var(--amber); }
.hr-key.black.down { background: #c78a2a; }

/* ---------- responsive */
@media (max-width: 900px) {
  .monitor, .room, .booking, .patch-head { grid-template-columns: 1fr; }
  .id-nav a:not(.pushbtn--red) { display: none; }
  .crt { max-width: 260px; }
  .monitor { padding-top: calc(var(--u)*.3); }
  .service, .stage { grid-template-columns: 1fr; }
  .hero-controls .bigswitch { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .rack { padding-left: 1.7rem; padding-right: 1.7rem; gap: 5px; }
  .unit { padding-left: .9rem; padding-right: .9rem; }
  .hero-controls { gap: 1rem 1.2rem; }
  .service, .stage { gap: .5rem; }
  .rail { width: 1rem; }
  .meters { gap: .8rem; } .vu { width: 120px; }
  .book-form { grid-template-columns: 1fr; }
  .jackrow { grid-template-columns: repeat(3, 1fr); gap: 1.4rem .6rem; padding-top: 2.4rem; }
  .jackrow > .tape { grid-column: 1 / -1; justify-self: start; margin-bottom: .2rem; }
  .jackfield { gap: 1.2rem; padding-top: .6rem; }
  .tape--jack { font-size: .85rem; }
  .jackrow--room .jack--room { grid-column: 2; }
  .jackrow--room .lamp-wrap { grid-column: 3; margin-left: 0; }
  .power { flex-wrap: wrap; } .power-copy { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hidden-rack.is-in { animation: none; }
  .knob-cap { transition: none; }
}

@keyframes scan { to { background-position: 0 0, 0 6px; } }
@media (prefers-reduced-motion: reduce) { .crt-glass { animation: none; } }

@media (max-width: 900px) { .hero-cluster { flex-wrap: wrap; gap: 1rem 1.2rem; } .meters { width: 100%; } .vu { width: calc(50% - .6rem); max-width: 150px; } }
@media (max-width: 600px) { .hero-cluster { padding: .7rem .8rem; } .knob-wrap { flex: 1 1 30%; } }

@media (max-width: 600px) { .rack { padding-left: 0; padding-right: 0; } .unit { margin: 0 1rem; padding-left: 1.4rem; padding-right: 1.4rem; min-width: 0; } .rail { width: 1rem; } .id-brand { flex-wrap: wrap; gap: .4rem .7rem; } .brand { font-size: .95rem; } .unit::before { background: linear-gradient(90deg, #23252a 0 12px, #000 12px 13px, transparent 13px calc(100% - 13px), #000 calc(100% - 13px) calc(100% - 12px), #23252a calc(100% - 12px)); } .tl,.bl { left: 2px; } .tr,.br { right: 2px; } }

/* hidden rack layout (module supplies structure; page supplies skin) */
.hr-rack { display: grid; gap: 1rem; }
.hr-unit-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hr-unit-header h2, .hr-unit-header h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; color: var(--champ); margin: 0; }
.hr-transport { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hr-sequencer { display: grid; gap: .5rem; }
.hr-drum-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.hr-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.hr-steps .hr-step:nth-child(4n+1) { box-shadow: 0 2px 0 #0a0a0b, inset 0 0 0 1px #3f4147, inset 0 -3px 0 #4a4c52; }
.hr-step { width: 100%; aspect-ratio: 1; max-height: 40px; min-width: 0; }
.hr-synth-controls { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; align-items: end; }
.hr-oscillator { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; padding: .6rem .8rem; border: 1px solid #2c2e33; border-radius: 4px; }
.hr-keyboard { display: flex; align-items: flex-start; height: 130px; padding: 0 2px; background: #0a0a0c; border-radius: 4px; box-shadow: inset 0 2px 6px #000; overflow: hidden; }
.hr-key { padding: 0; }
.hr-key-label { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font: 400 .55rem var(--silkfont); color: #555; }
.hr-key.black .hr-key-label { color: #999; }
.hr-knob-wrap, .hr-control { display: grid; justify-items: center; gap: .35rem; }
@media (max-width: 720px) { .hr-drum-row { grid-template-columns: 1fr; } .hr-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hr-step { max-height: none; } .hr-keyboard { height: 100px; } .hr-key.black { height: 60px; } }
.hr-unit-header .hr-legend, .hr-unit-header h2, .hr-unit-header h3 { font: 800 1.5rem/1 var(--display) !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--champ) !important; }
.hr-unit-header .hr-led { margin-left: auto; margin-right: 1rem; width: 12px; height: 12px; }
.hr-unit-header .hr-led::after { content: "RUN"; position: absolute; left: 18px; top: -3px; font: 400 .6rem var(--silkfont); letter-spacing: .12em; color: var(--silk-3); }
.hr-unit-header .hr-led { position: relative; }
.hr-knob-value { font: 500 .78rem/1 var(--silkfont); color: var(--silk-2); font-variant-numeric: tabular-nums; }
.hr-control { min-width: 76px; }
.hr-control .hr-legend { text-align: center; }
.hr-drum-row { grid-template-columns: 5.5rem minmax(0, 1fr) 96px; }
.hr-drum-row .hr-control { justify-self: center; }
.hr-hint, .hr-key-hint { font: 400 .8rem/1.5 var(--silkfont); letter-spacing: .04em; color: var(--silk-2); margin: 0; }
.hr-key-hint { color: var(--silk-3); }
.hr-key-label { color: #6a6660; font-size: .6rem; }
.hr-key.black .hr-key-label { color: #b5b0a6; }
.hr-knob { background: radial-gradient(circle at 40% 35%, #46484f, #15161a 70%); box-shadow: 0 4px 5px #000b, inset 0 1px 0 #61646c, inset 0 -2px 3px #000; }
.hr-knob::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 225deg, #3a3c42 0 270deg, transparent 270deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 68%, transparent 70%); mask: radial-gradient(circle, transparent 60%, #000 62%, #000 68%, transparent 70%); }
.hidden-rack .screw { display: block; }

.crt-cap { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.pushbtn--sm { padding: .35rem .6rem; font-size: .56rem; }

.hr-keyboard { display: grid; grid-template-columns: repeat(15, 1fr); position: relative; height: 130px; gap: 2px; }
.hr-key { height: 100%; width: auto; flex: none; margin: 0; }
.hr-key.black { position: absolute; top: 0; height: 58%; width: calc(100% / 15 * .62); margin: 0; z-index: 2; border-radius: 0 0 3px 3px; }
.hr-unit-header .hr-led::after { content: none; }
.hr-unit-header .hr-led { margin-left: auto; margin-right: .5rem; }
.hr-run { font: 400 .6rem var(--silkfont); letter-spacing: .12em; color: var(--silk-3); margin-right: 1rem; }
@media (max-width: 720px) { .hr-drum-row { grid-template-columns: 1fr; } .hr-drum-row .hr-control { justify-self: start; } .hr-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hr-step { max-height: none; } .hr-keyboard { height: 100px; } }

input, textarea { caret-color: var(--red); }
html { scrollbar-color: #3a3c42 var(--room); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }

.hr-key.black { left: var(--key-left); }

.jack--room, .jackrow--room .tape--jack, .lamp-wrap { position: relative; z-index: 3; }
.jack { z-index: 3; }
.jackrow > .tape { position: relative; z-index: 3; }

/* Revision: centered monitor + two purpose-built dynamics faceplates. */
.monitor { grid-template-columns: minmax(0,1fr); justify-items:center; gap:1.7rem; padding-block:2rem 2.6rem; }
.monitor .crt { width:min(100%,680px); max-width:680px; }
.crt-img { object-fit:contain; }
.hero-face { max-width:660px; text-align:center; justify-items:center; gap:1rem; }
.hero-face h1 { font-size:clamp(2.5rem,4.2vw,3.6rem); line-height:1; }
.hero-face h1 br { display:none; }
.hero-controls { justify-content:center; }
.hero-controls .bigswitch { width:auto; }
.crt-cap { flex-wrap:wrap; }
.motion-toggle { justify-self:center; min-height:44px; }
.pushbtn, .ratio-bank button { cursor:pointer; border:0; min-height:44px; }
button:disabled { cursor:default; opacity:.65; }
.optical-unit { color:#18191a; background:linear-gradient(180deg,#f1f1eb 0,#c9cbc7 3px,#b9bcb9 80%,#959c9c 100%); padding-block:1.5rem; }
.optical-unit::after { background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px); }
.optical-brand { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid #727876; padding-bottom:.7rem; }
.optical-brand > span { font:italic 700 2rem var(--display); color:#94281f; }
.optical-unit h2 { color:#202324; font:700 clamp(1rem,2vw,1.5rem)/1.1 var(--display); letter-spacing:.12em; }
.optical-face { display:grid; grid-template-columns:1fr minmax(180px,280px) 1fr; align-items:center; gap:2rem; padding:2rem 0 1.25rem; }
.optical-center { display:grid; justify-items:center; gap:.8rem; }
.optical-unit .meters { width:100%; justify-content:center; }
.optical-unit .vu { width:100%; max-width:280px; }
.optical-unit .vu > .legend { display:none; }
.optical-unit .vu svg { border:9px solid #323331; border-radius:8px; background:linear-gradient(#f4dca3,#d0a664); box-shadow:0 5px 8px #0006,inset 0 4px 10px #35241066; }
.optical-unit .legend, .optical-unit output { color:#202324; }
.knob--dark { width:94px; height:94px; }
.knob--dark .knob-cap { background:radial-gradient(circle at 40% 30%,#454847,#181a1a 63%,#080909 65%,#292c2c 70%,#101212 100%); box-shadow:0 5px 7px #0008,inset 0 1px 1px #6e7271; }
.knob--dark::before { background:repeating-conic-gradient(from 225deg,#303535 0 2deg,transparent 2deg 27deg); }
.knob--dark .knob-line { background:#e5dfcb; width:4px; }
.knob-wrap output { font:400 .72rem var(--silkfont); font-variant-numeric:tabular-nums; min-height:1.2em; }
.knob-wrap { gap:.7rem; min-width:0; }
.knob-nudge { display:flex; gap:.5rem; }
.knob-nudge button { width:44px; height:44px; border:1px solid #656966; border-radius:3px; background:#181a1a; color:#eee; font:500 1rem var(--body); cursor:pointer; }
.knob-nudge button:hover { background:#363b3b; }
.optical-unit .knob-nudge button { color:#171a1a; background:#d5d8d3; }
.demo-note { font-size:.8rem; line-height:1.5; color:var(--silk-2); }
.optical-unit .demo-note { color:#303535; text-align:center; border-top:3px double #858b88; padding-top:.75rem; }
.dynamics-unit { background:linear-gradient(#292b2d 0,#111315 4px,#101214 98%,#050606); display:grid; gap:.8rem; padding-block:1.2rem; }
.dynamics-frame { border:2px solid #e2e1d7; border-radius:15px; padding:1.1rem 1.5rem; display:grid; gap:1.2rem; }
.dynamics-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dynamics-head h2 { font:800 clamp(1.5rem,2.3vw,2rem)/1 var(--display); letter-spacing:.05em; }
.dynamics-head > .legend { font-size:.55rem; text-align:right; }
.demo-display { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1.4rem; padding:.5rem 0; }
.demo-display output { font:400 .7rem var(--silkfont); font-variant-numeric:tabular-nums; min-width:10ch; color:#efcf83; }
.reduction-leds { display:flex; gap:17px; padding-bottom:14px; }
.reduction-leds i { display:block; width:9px; height:9px; border-radius:50%; background:#47251c; position:relative; box-shadow:inset 0 1px 2px #000; }
.reduction-leds i.on { background:#ffcb55; box-shadow:0 1px 7px #ffbc4366; }
.reduction-leds span { position:absolute; top:13px; left:50%; transform:translateX(-50%); font:400 .6rem var(--body); color:#e9e7e0; }
.dynamics-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; padding-block:.8rem; }
.knob--silver { width:72px; height:72px; }
.knob--silver .knob-cap { background:conic-gradient(from 45deg,#c2c7c7,#f4f4ed,#929999,#dce0dd,#999f9e,#eff0e8,#c2c7c7); border:5px solid #6c7374; box-shadow:0 5px 7px #000b,inset 0 0 0 2px #ddd; }
.knob--silver .knob-line { background:#161819; top:3px; height:40%; }
.ratio-bank { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ratio-bank button { color:var(--silk); background:transparent; font:400 .7rem var(--silkfont); display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border:1px solid #535859; border-radius:3px; }
.ratio-bank button i { width:7px; height:7px; border-radius:50%; background:#552c25; }
.ratio-bank button[aria-pressed=true] { border-color:#e9e7e0; }
.ratio-bank button[aria-pressed=true] i { background:#e85b3d; box-shadow:0 1px 5px #e8322a66; }
.demo-settings { text-align:center; font-size:.8rem; color:#d6d6ce; font-variant-numeric:tabular-nums; }
.route-selectors { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.route-selectors label, .utility-controls label { color:var(--silk); }
.route-actions { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.route-actions p { flex:1 1 100%; color:#d9ceb4; font-size:.95rem; }
.booking-route { border-block:1px solid #8c826d; padding:.7rem 0; }
.booking-route .legend { color:#4a4331; }
.booking-route p { font-size:.95rem; }
.utility-controls { display:grid; grid-template-columns:auto 100px; align-items:center; gap:.4rem .6rem; }
.utility-controls input { padding:0; accent-color:var(--red); }
.power { flex-wrap:wrap; }
.power-left { flex-wrap:wrap; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state:paused!important; scroll-behavior:auto!important; }
html.motion-paused { scroll-behavior:auto; }
html:not(.has-js) .service, html:not(.has-js) .stage { display:grid; }
html:not(.has-js) .stages { display:grid; gap:1.5rem; }
@media(max-width:600px) {
 .monitor { padding-inline:1.25rem; gap:1.3rem; }
 .monitor .crt { width:100%; }
 .crt-bezel { padding:10px; }
 .crt-cap { font-size:.52rem; gap:.4rem; }
 .crt-cap .pushbtn { font-size:.5rem; }
 .optical-brand { align-items:center; }
 .optical-brand > span { font-size:1.6rem; white-space:nowrap; }
 .optical-unit h2 { text-align:right; max-width:12ch; }
 .optical-face { grid-template-columns:1fr minmax(106px,1.25fr) 1fr; gap:.5rem; padding-block:1.4rem 1rem; }
 .optical-unit .knob--dark { width:56px; height:56px; }
 .optical-unit .legend { font-size:.48rem; text-align:center; letter-spacing:.05em; }
 .optical-unit .vu svg { border-width:5px; }
 .optical-unit .knob-nudge { gap:3px; }
 .optical-unit .knob-nudge { flex-direction:column; }
 .optical-unit .knob-nudge button { width:44px; height:44px; }
 .knob-wrap output { font-size:.59rem; }
 .dynamics-frame { padding:1rem .7rem; border-radius:10px; gap:.9rem; }
 .dynamics-head { flex-wrap:wrap; gap:.5rem; }
 .dynamics-head > .legend { text-align:left; }
 .dynamics-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem .8rem; }
 .dynamics-controls .knob { width:62px; height:62px; }
 .dynamics-controls .legend { font-size:.58rem; }
 .demo-display { gap:1rem; }
 .reduction-leds { gap:15px; }
 .route-selectors { grid-template-columns:1fr; }
 .jackfield { padding-inline:.5rem; }
 .jackrow--room .lamp-wrap { flex-direction:column; gap:.4rem; }
 .stage-labels { flex-wrap:wrap; gap:.8rem; }
 .selector { gap:1rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }