/* ===========================================================================
   ZANKYŌ 残響 — the machine faceplate.
   A scuffed vending-machine / rack-terminal hybrid, year 3042: brushed-metal
   panel with rust and screws, a CRT in a plastic bezel, a segmented jo-ha-kyū
   LED bargraph, rotary knobs, rocker switches, arcade transport, a VFD log.
   All texture is procedural (gradients + inline-SVG turbulence/scratches);
   the neon accents are the machine's lit elements.
   =========================================================================== */

.zankyo-scene {
  --bg:        #050507;
  --surface:   #0a0a0f;
  --surface-2: #0f0f17;
  --border:    #241a22;
  --grid:      #15101a;
  --ink:       #d6d2dc;
  --ink-dim:   #6b6473;
  --ink-label: #8a7e92;
  --red:       #ff2d55;
  --red-rgb:   255, 45, 85;
  --cyan:      #16e0e0;
  --cyan-rgb:  22, 224, 224;
  --magenta:   #ff3df0;
  --magenta-rgb:255, 61, 240;
  --amber:     #ffb000;
  --amber-rgb: 255, 176, 0;

  /* machine materials */
  --panel-hi:  #32323b;
  --panel:     #26262d;
  --panel-lo:  #191920;
  --steel-hi:  #4a4a52;
  --steel:     #2a2a31;
  --steel-lo:  #0c0c0f;
  --print:     #918c9c;      /* silk-screened panel text */
  --print-dim: #6a6572;

  max-width: 860px;
  margin: 0 auto;
  padding: 8px 16px 56px;
  font-family: "JetBrains Mono", monospace;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   THE FACEPLATE — brushed metal, edge rust, scratches, film grain
--------------------------------------------------------------------------- */
.zankyo-frame {
  position: relative;
  background:
    /* asymmetric rust + grime blooms (heavier lower-right, around use zones) */
    radial-gradient(55% 7% at 14% 0%,  rgba(136, 82, 44, 0.24), transparent 75%),
    radial-gradient(34% 9% at 90% 100%, rgba(124, 70, 38, 0.28), transparent 72%),
    radial-gradient(26% 22% at 100% 26%, rgba(108, 62, 34, 0.18), transparent 70%),
    radial-gradient(18% 14% at 0% 74%,  rgba(84, 52, 30, 0.2), transparent 75%),
    radial-gradient(14% 8% at 78% 0%,  rgba(96, 58, 32, 0.16), transparent 75%),
    radial-gradient(42% 5% at 40% 100%, rgba(24, 18, 12, 0.5), transparent 80%),
    /* faint neon spill from the lit elements */
    radial-gradient(130% 60% at 50% -8%, rgba(var(--red-rgb), 0.05), transparent 55%),
    radial-gradient(120% 80% at 82% 118%, rgba(var(--cyan-rgb), 0.04), transparent 60%),
    /* brushed metal */
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.028) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px, rgba(255, 255, 255, 0.012) 3px 5px, rgba(0, 0, 0, 0.05) 5px 7px),
    linear-gradient(180deg, var(--panel-hi), var(--panel) 40%, var(--panel-lo) 88%);
  border: 1px solid #000;
  border-radius: 6px;
  padding: 30px 26px 42px;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.65),
    inset 4px 0 10px rgba(0, 0, 0, 0.3),
    inset -2px 0 8px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 28px 90px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
/* scratch strokes + scuffs, panel-wide */
.zankyo-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  opacity: 0.9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560'><g fill='none' stroke-linecap='round'><path d='M40 470 L152 384' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/><path d='M320 88 l112 24' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='0.8'/><path d='M472 300 l46 92' stroke='%23000000' stroke-opacity='0.28' stroke-width='1.3'/><path d='M92 148 l58 -20' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1.5'/><path d='M212 522 q64 -16 132 4' stroke='%23000000' stroke-opacity='0.2' stroke-width='1'/><path d='M502 58 l-38 42' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='0.7'/><path d='M28 250 l14 60' stroke='%23000000' stroke-opacity='0.22' stroke-width='0.9'/><path d='M420 480 l64 -10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.1'/><path d='M64 60 l7 3' stroke='%23c9c4b4' stroke-opacity='0.22' stroke-width='2'/><path d='M498 388 l5 6' stroke='%23c9c4b4' stroke-opacity='0.18' stroke-width='2.4'/><path d='M180 300 l4 2' stroke='%23c9c4b4' stroke-opacity='0.14' stroke-width='1.8'/></g></svg>");
}
/* static film grain (inline SVG fractal noise) over the whole machine */
.zankyo-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.zankyo-frame > * { position: relative; z-index: 1; }

/* --- corner screws --- */
.zk-screw {
  position: absolute; z-index: 7; width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #6e6e7a, #30303a 55%, #0c0c0f);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(0, 0, 0, 0.35);
}
.zk-screw::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2.5px; margin-top: -1.25px;
  background: linear-gradient(180deg, #050506, #3d3d45); border-radius: 2px;
  transform: rotate(var(--slot, 20deg));
}
.zk-screw-tl { top: 9px; left: 10px; }
.zk-screw-tr { top: 9px; right: 10px; }
.zk-screw-bl { bottom: 9px; left: 10px; }
.zk-screw-br { bottom: 9px; right: 10px; filter: sepia(0.5) brightness(0.85); } /* the rusty one */

/* --- ventilation slots --- */
.zk-vent {
  position: absolute; z-index: 7; height: 13px; width: 118px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #050506 0 5px, #34343e 5px 7px, #1c1c22 7px 12px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.zk-vent-tr { top: 12px; right: 58px; }
.zk-vent-bl { bottom: 12px; left: 58px; transform: rotate(0.4deg); }

/* --- silk-screened panel print (slight misregistration = worn ink) --- */
.zk-print {
  font-size: 9px; letter-spacing: 0.22em; color: var(--print);
  text-shadow: 0.5px 0.5px 0 rgba(var(--red-rgb), 0.12), -0.5px 0 0 rgba(var(--cyan-rgb), 0.1);
}

/* climax (kyū) — the whole machine destabilizes */
.zankyo-scene.is-kyu .zankyo-title::before { animation-duration: 0.8s; }
.zankyo-scene.is-kyu .zankyo-title::after  { animation-duration: 0.7s; }
.zankyo-scene.is-kyu .zankyo-title { text-shadow: -1.5px 0 var(--red), 1.5px 0 var(--cyan), 0 0 20px rgba(var(--red-rgb), 0.6); }
.zankyo-scene.is-kyu .zankyo-frame { animation: zk-shake 0.16s infinite; }
.zankyo-scene.is-kyu .zankyo-scanlines { opacity: 0.8; }
.zankyo-scene.is-kyu .zk-led { animation: zk-led-flicker 0.3s infinite; }
@keyframes zk-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,1px); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,0); } }
@keyframes zk-led-flicker { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------------------------------------------------------------------------
   MARQUEE — the machine's illuminated title strip (smoked acrylic, backlit)
--------------------------------------------------------------------------- */
.zk-marquee {
  position: relative; margin: 0 6px 22px; padding: 16px 12px 13px;
  border-radius: 5px; border: 1px solid #08080a;
  background:
    radial-gradient(70% 130% at 50% 55%, rgba(var(--red-rgb), 0.09), transparent 72%),
    linear-gradient(180deg, rgba(8, 6, 11, 0.94), rgba(15, 11, 18, 0.82) 45%, rgba(6, 5, 9, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 34px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 10px rgba(0, 0, 0, 0.5);
}
/* smoked-glass specular streak across the marquee */
.zk-marquee::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 5px;
  background: linear-gradient(107deg, transparent 12%, rgba(255, 255, 255, 0.045) 20%, rgba(255, 255, 255, 0.012) 27%, transparent 34%);
}
.zk-marquee-screw {
  position: absolute; top: 50%; left: 7px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4d4d55, #1c1c21 65%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.zk-marquee-screw::before { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 1.5px; background: #060608; transform: rotate(35deg); }
.zk-marquee-screw-r { left: auto; right: 7px; }
.zk-marquee-screw-r::before { transform: rotate(-58deg); }

.zankyo-header { text-align: center; }
.zankyo-title {
  font-family: "Orbitron", sans-serif; font-weight: 900;
  font-size: clamp(34px, 9vw, 64px); letter-spacing: 0.12em;
  margin: 0; color: #fff; position: relative; display: inline-block;
  text-shadow: 0 0 16px rgba(var(--red-rgb), 0.5), 0 0 40px rgba(var(--red-rgb), 0.25);
}
.zankyo-title .zankyo-kanji {
  font-family: "Shippori Mincho", serif; font-weight: 700;
  font-size: 0.42em; letter-spacing: 0.1em; color: var(--cyan);
  margin-left: 0.35em; vertical-align: 0.5em;
  text-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.6);
}
/* glitch echoes */
.zankyo-title::before, .zankyo-title::after {
  content: attr(data-glitch); position: absolute; left: 0; top: 0;
  width: 100%; overflow: hidden; opacity: 0.6;
}
.zankyo-title::before { color: var(--cyan); animation: zk-glitch 3.6s infinite steps(2); clip-path: inset(0 0 62% 0); }
.zankyo-title::after  { color: var(--magenta); animation: zk-glitch 2.7s infinite steps(2) reverse; clip-path: inset(58% 0 0 0); }
@keyframes zk-glitch { 0%,92%,100% { transform: translate(0,0); } 93% { transform: translate(-2px,1px); } 96% { transform: translate(2px,-1px); } }
.zankyo-subtitle { margin: 7px 0 0; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim); }

/* ---------------------------------------------------------------------------
   CRT MONITOR — plastic housing, recessed curved glass, power LED
--------------------------------------------------------------------------- */
.zk-monitor {
  position: relative; margin-bottom: 18px; padding: 13px 13px 0;
  border-radius: 9px; border: 1px solid #000;
  background:
    radial-gradient(80% 30% at 70% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, #232329, #131317 55%, #0d0d11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -5px 12px rgba(0, 0, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
.zk-screen {
  position: relative; overflow: hidden;
  border-radius: 14px / 18px;
  background: #020204;
  border: 1px solid #030305;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(0, 0, 0, 0.9),
    inset 0 2px 8px rgba(0, 0, 0, 0.8);
}
.zankyo-viz { display: block; width: 100%; height: 200px; }
/* CRT scanlines — part of the tube now */
.zankyo-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px);
  mix-blend-mode: multiply; opacity: 0.62;
}
/* curved-glass reflection + corner falloff */
.zk-glass {
  position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 16%, transparent 28%, transparent 70%, rgba(255, 255, 255, 0.02) 86%),
    radial-gradient(135% 96% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 96%);
}
/* a thumb-smudge on the glass, lower right */
.zk-glass::after {
  content: ""; position: absolute; right: 8%; bottom: 6%; width: 60px; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 200, 210, 0.045), transparent 75%);
  transform: rotate(-18deg);
}
.zk-monitor-chin {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 6px 8px;
}
.zk-monitor-brand {
  font-size: 8px; letter-spacing: 0.26em; color: #5f5b68;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05); /* engraved */
}
.zk-chin-spacer { flex: 1; }
.zk-led-label { font-size: 7px; letter-spacing: 0.2em; color: #55515e; }
.zk-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a1218, #1d0a0d 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.zankyo-scene.is-on .zk-led {
  background: radial-gradient(circle at 35% 30%, #ff8ba4, var(--red) 60%);
  box-shadow: 0 0 8px rgba(var(--red-rgb), 0.8), 0 0 2px rgba(var(--red-rgb), 0.9), inset 0 0 2px rgba(255,255,255,0.5);
}
/* inspection sticker — half peeled */
.zk-sticker {
  position: absolute; right: 74px; bottom: 5px; z-index: 3; width: 46px; padding: 3px 4px 4px;
  transform: rotate(-3.5deg);
  background: linear-gradient(160deg, #cfc5ac, #b3a88d 65%, #9d9177);
  color: #55492f; font-size: 7px; letter-spacing: 0.08em; line-height: 1.5; text-align: center;
  border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 86% 100%, 0 100%);
  opacity: 0.92;
}
.zk-sticker b { display: block; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 9.5px; letter-spacing: 0.2em; color: #83291c; }
.zk-sticker i { /* lifted, curling corner */
  position: absolute; right: 1px; bottom: 0; width: 11px; height: 11px;
  background: linear-gradient(315deg, transparent 44%, #e9e1cb 48%, #d8cfb4 62%, rgba(60, 48, 30, 0.55) 100%);
}

/* ---------------------------------------------------------------------------
   段階 DEVELOPMENT — segmented LED bargraph, full display width, directly
   below the CRT. 56 machined cells in a recessed housing; lit fill = the
   jo-ha-kyū arc level. Zone tints follow the machine's grammar (jo cyan,
   ha amber, kyū red) with the splits placed where the engine's phase cuts
   land on the level curve: pos 0.45 → level 0.25, pos 0.82 → level 0.80.
--------------------------------------------------------------------------- */
.zk-bargraph {
  position: relative; margin: -4px 0 16px;
  display: grid; grid-template-columns: 1fr; gap: 4px 10px; align-items: center;
  padding: 8px 12px 6px; border-radius: 5px; border: 1px solid #000;
  background: linear-gradient(180deg, #1d1d24, #111116 70%, #0d0d11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -3px 8px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* etched zone scale above the housing — 序/破/急 centered in their spans */
.zk-bar-scale { grid-column: 1; position: relative; height: 13px; }
.zk-bar-zl {
  position: absolute; bottom: 1px; transform: translateX(-50%); white-space: nowrap;
  font-family: "Shippori Mincho", serif; font-size: 9px; letter-spacing: 0.14em; color: #7d7887;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);   /* etched */
}
.zk-bar-zl-jo  { left: 12.5%; color: rgba(var(--cyan-rgb), 0.6); }
.zk-bar-zl-ha  { left: 52.5%; color: rgba(var(--amber-rgb), 0.6); }
.zk-bar-zl-kyu { left: 90%;   color: rgba(var(--red-rgb), 0.7); }
.zk-bar-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: #5a5563; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.7); }
/* recessed housing */
.zk-bar-housing {
  grid-column: 1; position: relative; padding: 5px 6px; border-radius: 3px; border: 1px solid #030305;
  background: linear-gradient(180deg, #050507, #0b0b0f);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.zk-bar-glass {
  position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 22%, transparent 34%);
}
.zk-bar-cells { display: flex; gap: 2px; height: 16px; }
.zk-seg {
  flex: 1 1 0; min-width: 0; border-radius: 1px;
  background: linear-gradient(180deg, rgba(var(--c), 0.11), rgba(var(--c), 0.05) 55%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.85);
}
.zk-seg-jo  { --c: var(--cyan-rgb); }
.zk-seg-ha  { --c: var(--amber-rgb); }
.zk-seg-kyu { --c: var(--red-rgb); }
.zk-seg.on {
  background: linear-gradient(180deg, rgba(var(--c), 1), rgba(var(--c), 0.72));
  box-shadow: 0 0 5px rgba(var(--c), 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}
/* the head segment blooms */
.zk-seg.is-head {
  box-shadow: 0 0 9px rgba(var(--c), 0.95), 0 0 18px rgba(var(--c), 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
/* peak-hold marker — lingers above the fill, then falls */
.zk-seg.is-peak {
  background: linear-gradient(180deg, rgba(var(--c), 0.95), rgba(var(--c), 0.6));
  box-shadow: 0 0 6px rgba(var(--c), 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
/* climax: the red zone destabilizes with the rest of the machine */
.zankyo-scene.is-kyu .zk-seg-kyu.on { animation: zk-led-flicker 0.3s infinite; }
.zankyo-scene.is-kyu .zk-seg-kyu.on:nth-child(2n) { animation-duration: 0.22s; animation-delay: 0.08s; }
/* 斬 KIRU — the whole bar dies to black for the hush, relights with the jo */
.zk-bargraph.is-dead .zk-seg { background: #030304; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.9); }
.zk-bar-foot { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding: 1px 1px 0; }
.zk-bar-label {
  font-size: 8.5px; letter-spacing: 0.18em; color: var(--print-dim);
  text-shadow: 0.5px 0.5px 0 rgba(var(--red-rgb), 0.1);
}
.zk-bar-serial {
  font-size: 6.5px; letter-spacing: 0.24em; color: #56525f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05);   /* engraved */
}

/* ---------------------------------------------------------------------------
   CONTROL RAIL — one compact row: arcade transport, the pitch-management
   module (backlit mode readout + scale-degree LED array), master volume.
--------------------------------------------------------------------------- */
.zk-console-top { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.zk-transport-cluster { position: relative; display: flex; align-items: center; gap: 14px; flex: none; }
/* grime pooled around the play button — the most-touched thing on the machine */
.zk-transport-cluster::before {
  content: ""; position: absolute; inset: -10px -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 30% 46%, rgba(26, 18, 10, 0.5), transparent 72%);
}

.zk-module {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: stretch; gap: 13px;
  padding: 9px 14px 15px 16px; border-radius: 5px; border: 1px solid #000;
  background: linear-gradient(180deg, #202027, #121216 70%, #0d0d11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* asymmetric wear — grime pooled at the lower-left, a scorch kiss upper-right */
.zk-module::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 5px;
  background:
    radial-gradient(34% 52% at 2% 100%, rgba(96, 58, 32, 0.24), transparent 74%),
    radial-gradient(16% 30% at 97% 4%, rgba(20, 14, 10, 0.55), transparent 78%);
}
/* trimmer screws — service adjustments, slots left where the tech left them */
.zk-mod-screw {
  position: absolute; z-index: 2; top: 7px; left: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4d4d55, #1c1c21 65%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.zk-mod-screw::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 1.5px;
  background: #060608; transform: rotate(var(--slot, 20deg));
}
.zk-mod-screw-r { top: auto; left: auto; bottom: 7px; right: 6px; filter: sepia(0.4) brightness(0.9); }
/* stamped module designation */
.zk-mod-stamp {
  position: absolute; right: 22px; bottom: 3px; pointer-events: none; white-space: nowrap;
  font-size: 6.5px; letter-spacing: 0.24em; color: #56525f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05); /* engraved */
  transform: rotate(-0.4deg);
}

.zk-mod-zone { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.zk-mod-zone + .zk-mod-zone {
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.045);   /* machined seam */
  padding-left: 13px;
}
.zk-mod-head {
  font-size: 8px; letter-spacing: 0.2em; color: var(--print-dim); white-space: nowrap;
  text-shadow: 0.5px 0.5px 0 rgba(var(--red-rgb), 0.1);
}

/* --- LEFT: backlit mode readout --- */
.zk-mod-mode { flex: 1; }
.zk-mod-lamp {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 8px 11px; border-radius: 4px; border: 1px solid #030305;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(var(--cyan-rgb), 0.05), transparent 70%),
    linear-gradient(180deg, #0b0b10, #08080c);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.zankyo-scale-name {
  font-family: "Orbitron", sans-serif; font-size: 13px; letter-spacing: 0.1em; color: #fff;
  text-shadow: 0 0 10px rgba(var(--red-rgb), 0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zankyo-scale-name b { color: var(--red); }
/* mood words: demoted to a screen-printed spec line */
.zankyo-scale-mood {
  font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.7;
  color: var(--print-dim); text-shadow: 0.5px 0.5px 0 rgba(var(--magenta-rgb), 0.14);
}

/* --- CENTER: scale-degree LED array --- */
.zk-deg-row { display: flex; gap: 4px; margin-top: 5px; }
.zk-deg {
  width: 23px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-family: "Shippori Mincho", serif; font-size: 15px; line-height: 1;
  color: rgba(var(--cyan-rgb), 0.26);
  background: linear-gradient(180deg, #020608, #04090b);
  border: 1px solid #000; border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: color 0.45s ease, text-shadow 0.45s ease, background 0.45s ease;
}
.zk-deg.is-lit {
  color: #dbfbfb;
  text-shadow: 0 0 9px rgba(var(--cyan-rgb), 0.9), 0 0 3px rgba(var(--cyan-rgb), 1);
  background: linear-gradient(180deg, #072224, #04181a);
  transition-duration: 0.04s;   /* strikes fast, decays slow */
}
/* test-point strip under the LEDs — gold pads, one probe-scuffed */
.zk-testpoints {
  width: 58px; height: 5px; margin: auto 0 4px 2px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #6f5a2e 0 4px, #0c0c0f 4px 9px);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   ROTARY KNOBS — the physical control
--------------------------------------------------------------------------- */
.zk-knob {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  flex: none;
}
.zk-knob:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; border-radius: 50%; }
.zk-knob.is-drag { cursor: grabbing; }
/* tick ring printed on the panel around the knob */
.zk-knob::before {
  content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: 0.85;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g stroke='%23a9a3b6' stroke-width='2' stroke-linecap='round' opacity='0.9'><line x1='40' y1='3' x2='40' y2='8' transform='rotate(-135 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(-108 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(-81 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(-54 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(-27 40 40)'/><line x1='40' y1='3' x2='40' y2='8'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(27 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(54 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(81 40 40)'/><line x1='40' y1='4' x2='40' y2='8' transform='rotate(108 40 40)'/><line x1='40' y1='3' x2='40' y2='8' transform='rotate(135 40 40)'/></g></svg>") center / contain no-repeat;
}
/* finger grime around the knob (off-center — hands come from below-right) */
.zk-knob::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 60% 68%, transparent 42%, rgba(22, 15, 9, 0.5) 60%, transparent 78%);
  opacity: 0.55;
}
.zk-knob-cap {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%),
    conic-gradient(from 210deg, #34343c, #17171b 22%, #2b2b32 47%, #101014 74%, #34343c),
    #1d1d22;
  border: 1px solid #08080a;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.65),
    0 1px 1px rgba(0, 0, 0, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.7);
}
/* knurled grip skirt */
.zk-knob-cap::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0deg 4deg, rgba(0, 0, 0, 0.28) 4deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 65%);
  mask: radial-gradient(circle, transparent 60%, #000 65%);
}
/* domed center */
.zk-knob-cap::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #303038, #16161b 72%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.65);
}
.zk-knob-rot { position: absolute; inset: 0; z-index: 2; will-change: transform; pointer-events: none; }
.zk-knob-ind {
  position: absolute; left: 50%; top: 8%; width: 3px; height: 36%; margin-left: -1.5px; border-radius: 2px;
  background: linear-gradient(#f4f0e4, #b6b0a0);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.zk-knob.is-drag .zk-knob-ind, .zk-knob:focus-visible .zk-knob-ind {
  background: linear-gradient(#dffcfc, var(--cyan));
  box-shadow: 0 0 7px rgba(var(--cyan-rgb), 0.8);
}
/* per-knob wear — no two knobs left the factory the same way they'll die */
.zk-wear-1 .zk-knob-cap { filter: brightness(0.92) saturate(0.9); }
.zk-wear-1 .zk-knob-ind { opacity: 0.82; }
.zk-wear-2 .zk-knob-cap { filter: brightness(1.07); }
.zk-wear-2::after { opacity: 0.8; transform: rotate(50deg); }
.zk-wear-3 .zk-knob-cap { filter: brightness(0.86) sepia(0.14); }
.zk-wear-3 .zk-knob-ind { background: linear-gradient(#d5cfbe, #8e897a); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.zk-wear-3::before { opacity: 0.6; }

/* knob sizes */
.zk-knob-master { width: 58px; height: 58px; }
.zk-knob-rate { width: 34px; height: 34px; }
.zk-knob-rate .zk-knob-ind { width: 2.5px; margin-left: -1.25px; }
.zk-knob-rate.is-drag .zk-knob-ind, .zk-knob-rate:focus-visible .zk-knob-ind {
  background: linear-gradient(#ffd9fb, var(--magenta));
  box-shadow: 0 0 7px rgba(var(--magenta-rgb), 0.8);
}

/* knob + readout unit */
.zk-unit { display: flex; align-items: center; gap: 10px; }
.zk-unit-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.zankyo-vol-label { font-size: 8px; letter-spacing: 0.22em; color: var(--print-dim); }
.zankyo-val-readout {
  font-size: 11px; color: var(--cyan); font-variant-numeric: tabular-nums;
  background: rgba(2, 8, 10, 0.92); border: 1px solid #000; border-radius: 2px;
  padding: 1px 5px; min-width: 34px; text-align: right;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 5px rgba(var(--cyan-rgb), 0.5);
}
.zk-unit-rate .zankyo-val-readout { color: var(--magenta); text-shadow: 0 0 5px rgba(var(--magenta-rgb), 0.5); }

/* ---------------------------------------------------------------------------
   TRANSPORT — arcade buttons + master knob (live in the control rail)
--------------------------------------------------------------------------- */
.zk-arcade {
  position: relative; width: 78px; height: 78px; border-radius: 50%; border: 1px solid #000; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 32% 26%, #3e3e47, #1a1a20 55%, #0a0a0d);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -3px 5px rgba(0, 0, 0, 0.85),
    0 3px 8px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.zk-arcade:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.zk-arcade-cap {
  position: absolute; inset: 9px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Orbitron", sans-serif; font-size: 19px;
  transition: transform 0.06s, box-shadow 0.06s;
}
.play-btn .zk-arcade-cap {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 35% 27%, #ff90a8, var(--red) 42%, #900f2c 84%, #560a1b);
  box-shadow:
    0 5px 9px rgba(0, 0, 0, 0.6),
    inset 0 -6px 10px rgba(70, 0, 15, 0.85),
    inset 0 2px 3px rgba(255, 255, 255, 0.35);
}
.stop-btn { width: 62px; height: 62px; }
.stop-btn .zk-arcade-cap {
  inset: 8px; font-size: 26px; color: var(--magenta); text-shadow: 0 0 6px rgba(var(--magenta-rgb), 0.4);
  background: radial-gradient(circle at 35% 27%, #3a3a43, #202027 46%, #0e0e12 88%);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset 0 -5px 9px rgba(0, 0, 0, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);
}
.zk-arcade:active .zk-arcade-cap {
  transform: translateY(3px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.7), inset 0 2px 3px rgba(255, 255, 255, 0.2);
}
.play-btn.is-playing .zk-arcade-cap {
  box-shadow:
    0 5px 9px rgba(0, 0, 0, 0.6),
    inset 0 -6px 10px rgba(70, 0, 15, 0.85),
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    0 0 24px rgba(var(--red-rgb), 0.55),
    inset 0 0 16px rgba(255, 130, 160, 0.45);
  animation: zk-play-breathe 2.4s ease-in-out infinite;
}
@keyframes zk-play-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.16); } }

/* master volume: knob stacked over its label + readout — a tall, narrow unit */
.zk-master { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.zk-knob-mount { display: flex; justify-content: center; }
.zk-master-meta { display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------------------
   MIXER CONSOLE — machined strips, switches, service hatches
--------------------------------------------------------------------------- */
.zankyo-mixer {
  border: 1px solid #000; border-radius: 5px;
  background: linear-gradient(180deg, #16161b, #0f0f14 80%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.zankyo-mixer-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--print);
  padding: 9px 16px; border-bottom: 1px solid #030305;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  text-shadow: 0.5px 0.5px 0 rgba(var(--red-rgb), 0.1);
}
.zk-warn-small {
  font-family: "Shippori Mincho", serif; font-size: 9px; letter-spacing: 0.3em;
  color: rgba(var(--amber-rgb), 0.55); transform: rotate(0.8deg); text-transform: none;
}
.zankyo-layer { padding: 13px 16px 12px; border-bottom: 1px solid #050507; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.035); }
.zankyo-layer:last-child { border-bottom: none; box-shadow: none; }
.zankyo-layer-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
/* name plate — a button: press it and the row's control cavity swings open */
.zankyo-layer-name {
  display: flex; align-items: center; text-align: left; cursor: pointer;
  font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: 0.08em; color: #eee;
  flex: 1; min-width: 132px; padding: 7px 11px;
  background: linear-gradient(180deg, #24242b, #191920);
  border: 1px solid #0a0a0d; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.zankyo-layer-name:hover { background: linear-gradient(180deg, #2a2a32, #1d1d25); }
.zankyo-layer-name:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.zankyo-layer-kana { font-family: "Shippori Mincho", serif; color: var(--red); margin-right: 7px; text-shadow: 0 0 7px rgba(var(--red-rgb), 0.45); }
.zk-name-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-ch {
  font-style: normal; font-family: "JetBrains Mono", monospace;
  font-size: 7.5px; letter-spacing: 0.2em; color: #56525f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); padding-top: 2px; flex: none;
}
/* latch screw on the plate — its slot turns when the cavity is open */
.zk-name-latch {
  margin-left: 10px; width: 11px; height: 11px; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 35% 30%, #55555e, #1c1c21 70%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.85), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.zk-name-latch::after {
  content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.5px; margin-left: -0.75px;
  background: #060608; transition: transform 0.15s;
}
.zankyo-layer.is-open .zk-name-latch::after { transform: rotate(90deg); }

/* sample: small round momentary button */
.zankyo-layer-sample {
  position: relative; width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; cursor: pointer; flex: none;
  background: radial-gradient(circle at 34% 28%, #8a2f7e, #571a4f 48%, #2b0d28 88%);
  box-shadow:
    0 0 0 3px #23232b, 0 0 0 4px #000,
    0 2px 4px rgba(0, 0, 0, 0.65),
    inset 0 -3px 5px rgba(20, 0, 18, 0.85),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.zankyo-layer-sample:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.zankyo-layer-sample .tri {
  position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-left: 7px solid rgba(255, 210, 250, 0.9);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.zankyo-layer-sample:active, .zankyo-layer-sample.is-hit {
  transform: translateY(1.5px);
  box-shadow:
    0 0 0 3px #23232b, 0 0 0 4px #000,
    0 1px 2px rgba(0, 0, 0, 0.65),
    inset 0 -2px 4px rgba(20, 0, 18, 0.85),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    0 0 14px rgba(var(--magenta-rgb), 0.6);
}

/* mute: rocker switch */
.zk-switch {
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none;
  background: none; border: none; padding: 2px 5px; cursor: pointer;
  font-family: "JetBrains Mono", monospace;
}
.zk-switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.zk-switch i { font-style: normal; font-size: 6.5px; letter-spacing: 0.16em; }
.zk-switch .zk-switch-on { color: var(--cyan); text-shadow: 0 0 5px rgba(var(--cyan-rgb), 0.6); }
.zk-switch .zk-switch-off { color: #4d4956; }
.zk-switch.muted .zk-switch-on { color: #4d4956; text-shadow: none; }
.zk-switch.muted .zk-switch-off { color: #a29db0; }
.zk-switch-slot {
  position: relative; width: 17px; height: 34px; border-radius: 8px;
  background: linear-gradient(180deg, #040405, #121216);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.zk-switch-lever {
  position: absolute; left: 2px; right: 2px; top: 2px; height: 15px; border-radius: 6px;
  background: linear-gradient(180deg, #6e6e7a, #3a3a44 62%, #23232b);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: top 0.1s ease, background 0.1s;
}
.zk-switch.muted .zk-switch-lever {
  top: 17px;
  background: linear-gradient(0deg, #6e6e7a, #3a3a44 62%, #23232b);
}

/* the control cavity — knobs + fine trims, revealed by the name plate */
.zk-cavity {
  display: none; margin-top: 11px;
  padding: 13px 13px 12px; border: 1px solid #060608; border-top: 1px dashed #2e2e37;
  border-radius: 3px;
  background: linear-gradient(180deg, #08080b, #0b0b0f);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.zankyo-layer.is-open .zk-cavity { display: block; }
.zk-cavity-knobs { display: flex; align-items: center; gap: 28px; padding: 2px 2px 4px; }
.zk-cavity-knobs + .zankyo-params { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #24242c; }
.zankyo-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 11px 18px; }
.zankyo-param { display: flex; flex-direction: column; gap: 4px; }
.zankyo-param-label { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-dim); display: flex; justify-content: space-between; }
.zankyo-param-label b { color: var(--cyan); font-weight: 500; }

/* trim faders (inside the hatch only) — recessed slot + metal cap */
.zankyo-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #020203, #0d0d11);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.05);
  outline: none; cursor: pointer;
}
.zankyo-range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.zankyo-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 19px; border-radius: 2px;
  border: 1px solid #060608; cursor: grab;
  background:
    linear-gradient(90deg, transparent 0 42%, #d8d2c2 42% 58%, transparent 58%),
    linear-gradient(90deg, #3d3d46, #23232b 50%, #3d3d46);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.zankyo-range::-moz-range-thumb {
  width: 11px; height: 19px; border-radius: 2px; border: 1px solid #060608; cursor: grab;
  background:
    linear-gradient(90deg, transparent 0 42%, #d8d2c2 42% 58%, transparent 58%),
    linear-gradient(90deg, #3d3d46, #23232b 50%, #3d3d46);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ---------------------------------------------------------------------------
   VFD ACTIVITY DISPLAY
--------------------------------------------------------------------------- */
.zankyo-log-block {
  position: relative; margin-top: 18px; padding: 9px 10px 10px;
  border-radius: 5px; border: 1px solid #000;
  background: linear-gradient(180deg, #1d1d23, #111116 70%, #0d0d11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -3px 8px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.zankyo-log-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--print);
  margin: 0 2px 8px; text-shadow: 0.5px 0.5px 0 rgba(var(--red-rgb), 0.1);
}
.zk-vfd-tag { font-size: 7px; letter-spacing: 0.2em; color: #59555f; }
.zankyo-log {
  background:
    radial-gradient(rgba(var(--cyan-rgb), 0.05) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(180deg, #04100f, #030a0a);
  border: 1px solid #000; border-radius: 4px;
  height: 230px; overflow-y: auto; padding: 5px 0;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.85), inset 0 0 70px rgba(var(--cyan-rgb), 0.03);
}
/* glass glare on the display window */
.zankyo-log-block::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 11px; top: 27px;
  pointer-events: none; border-radius: 4px;
  background: linear-gradient(108deg, rgba(190, 255, 250, 0.045), transparent 26%);
}
.zankyo-log-empty { padding: 13px 16px; color: var(--ink-dim); font-size: 11px; }
.zankyo-log-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid rgba(var(--cyan-rgb), 0.04); font-size: 12px; animation: zk-logfade 0.3s ease; }
.zankyo-log-row:last-child { border-bottom: none; }
@keyframes zk-logfade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.zankyo-log-time { color: var(--ink-dim); font-size: 10px; min-width: 36px; }
.zankyo-log-tag { font-size: 9px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 2px; min-width: 66px; text-align: center; }
.zankyo-log-tag.shakuhachi { color: var(--cyan);    border: 1px solid rgba(var(--cyan-rgb), 0.4); }
.zankyo-log-tag.koto       { color: var(--amber);   border: 1px solid rgba(var(--amber-rgb), 0.4); }
.zankyo-log-tag.shamisen   { color: var(--red);     border: 1px solid rgba(var(--red-rgb), 0.4); }
.zankyo-log-tag.taiko      { color: #fff;           border: 1px solid var(--border); }
.zankyo-log-tag.noise      { color: var(--magenta); border: 1px solid rgba(var(--magenta-rgb), 0.4); }
.zankyo-log-tag.ambient    { color: var(--ink);     border: 1px dashed var(--ink-dim); }
.zankyo-log-tag.mode       { color: var(--amber);   border: 1px dashed var(--amber); }
.zankyo-log-text { color: var(--ink); }

/* ---------------------------------------------------------------------------
   SERIAL PLATE + NOTES
--------------------------------------------------------------------------- */
.zk-plate-row { display: flex; justify-content: center; margin-top: 20px; }
.zk-plate {
  position: relative; padding: 6px 26px; border-radius: 2px;
  background: linear-gradient(180deg, #3b3b43, #26262c 60%, #1e1e24);
  border: 1px solid #0a0a0c;
  font-size: 8.5px; letter-spacing: 0.2em; color: #9d99a6;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.06); /* stamped */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 3px rgba(0, 0, 0, 0.6);
  transform: rotate(-0.3deg);
}
.zk-plate::before, .zk-plate::after { /* rivets */
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5a63, #1e1e23 70%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.zk-plate::before { left: 7px; }
.zk-plate::after { right: 7px; }

.zankyo-note { font-size: 11px; line-height: 1.7; color: var(--ink-dim); margin: 18px 4px 0; }
.zankyo-note strong { color: var(--red); font-weight: 500; }

/* ---------------------------------------------------------------------------
   MOBILE — the machine simplifies: monitor + transport + reduced strip
--------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .zankyo-scene { padding: 6px 8px 40px; overflow-x: hidden; }
  .zankyo-frame { padding: 20px 13px 30px; }
  .zankyo-sub-long { display: none; }
  .zankyo-title { letter-spacing: 0.06em; }
  .zk-vent, .zk-warn, .zk-sticker, .zk-warn-small { display: none; }
  .zk-marquee { margin: 0 0 16px; padding: 12px 8px 10px; }
  .zankyo-viz { height: 160px; }
  .zk-monitor { padding: 9px 9px 0; }

  /* bargraph: slimmer cells, drop the serial print */
  .zk-bargraph { padding: 7px 9px 5px; gap: 3px 8px; }
  .zk-bar-cells { gap: 1px; height: 13px; }
  .zk-bar-serial { display: none; }

  /* control rail wraps: transport + master share a row, module beneath */
  .zk-console-top { flex-wrap: wrap; gap: 12px; justify-content: space-between; }
  .zk-module { order: 2; flex: 1 1 100%; }
  .zk-master { order: 1; }

  /* module stacks: mode readout full width, then the LED strip */
  .zk-module { flex-wrap: wrap; gap: 10px 13px; padding: 9px 12px 15px 14px; }
  .zk-mod-mode { flex: 1 1 100%; }
  .zk-mod-scale { border-left: none; box-shadow: none; padding-left: 0; }
  .zk-testpoints { display: none; }

  .zk-arcade { width: 66px; height: 66px; }
  .stop-btn { width: 56px; height: 56px; }
  .zk-knob-master { width: 50px; height: 50px; }

  /* reduced control strip: expandable plate + switch (sample hidden) */
  .zankyo-layer-sample { display: none; }
  .zankyo-layer { padding: 10px 12px 9px; }
  .zankyo-layer-head { gap: 8px 12px; flex-wrap: nowrap; }
  .zankyo-layer-name { min-width: 0; font-size: 10px; padding: 6px 9px; }
  .zk-cavity-knobs { gap: 18px; }
  .zk-knob-vol { width: 38px; height: 38px; }
  .zankyo-log { height: 180px; }
}
@media (max-width: 380px) {
  .zk-unit-vol .zk-unit-meta { display: none; }
}