/* version6 — Cassette Futurism (full TE / Maxell catalog rendition) */

:root{
  --paper:#EAE6DD;
  --paper-2:#DEDACF;
  --paper-3:#CFCAB8;
  --ink:#0E0E0E;
  --ink-2:#2A2926;
  --ink-3:#5A574F;
  --ink-4:#8A8678;
  --signal:#FF5B1F;
  --terminal:#0FCB6B;
  --tape:#1A1A1A;
  --tape-2:#262521;
  --rule:rgba(14,14,14,.18);
  --rule-2:rgba(14,14,14,.08);
  --grid: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"JetBrains Mono",ui-monospace,monospace;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";overflow-x:hidden}
body{
  font-size:13px;line-height:1.55;
  background:
    radial-gradient(1200px 800px at 80% -10%,#F2EEE4 0%,transparent 60%),
    radial-gradient(900px 600px at -10% 110%,#DCD7C8 0%,transparent 55%),
    var(--paper);
  background-attachment: fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;mix-blend-mode:multiply;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:201;opacity:.06;
  background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.7) 0 1px,transparent 1px 3px);
}

a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.disp{font-family:"Space Grotesk",ui-sans-serif,sans-serif;letter-spacing:-.02em}
.vt{font-family:"VT323",ui-monospace,monospace}

[lang="en"] .lang-zh { display: none !important; }
[lang="zh"] .lang-en { display: none !important; }

.shell{max-width:1440px;margin:0 auto;padding:0 32px}
.row{display:grid;grid-template-columns:var(--grid);gap:16px}
.muted{color:var(--ink-3)}
.faint{color:var(--ink-4)}
.hr{height:1px;background:var(--ink);opacity:.85}
.hr-thin{height:1px;background:var(--rule)}
.dotrule{height:1px;background-image:radial-gradient(circle,var(--ink-3) 1px,transparent 1.2px);background-size:6px 1px;background-repeat:repeat-x;}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.topbar .row{padding:10px 0;align-items:center}
.brand-mark{
  grid-column:1 / span 3;display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.02em;
}
.brand-mark .glyph{
  width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--signal);color:var(--paper);
}
.brand-mark small{font-weight:400;color:var(--ink-3)}
.nav{grid-column:4 / span 6;display:flex;justify-content:center;gap:24px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.nav a{padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--ink)}
.clock{grid-column:10 / span 3;display:flex;justify-content:flex-end;gap:14px;font-size:11px;color:var(--ink-3);letter-spacing:.05em;align-items:center}
.led{width:8px;height:8px;border-radius:50%;background:var(--terminal);box-shadow:0 0 6px var(--terminal);align-self:center;animation:blink 1.4s infinite}
.lang-toggle{
  background:none;border:1px solid var(--ink);border-radius:99px;
  padding:3px 10px;font:inherit;color:var(--ink);cursor:pointer;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.lang-toggle:hover{background:var(--ink);color:var(--paper)}
@keyframes blink{50%{opacity:.3}}

/* ============ HERO 00_BOOT ============ */
.hero{padding:28px 0 56px;border-bottom:1px solid var(--ink);position:relative}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,91,31,.06), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(15,203,107,.06), transparent 40%);
}

.device{
  position:relative;
  border:1.5px solid var(--ink);
  border-radius:22px;
  background:linear-gradient(180deg,#E5E0D2 0%,#DBD5C4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 2px 0 rgba(0,0,0,.04);
  padding:14px 14px 14px;
  overflow:hidden;
}
.device::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(14,14,14,.18);border-radius:16px;pointer-events:none;
}

.screw{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 1.5px,#a39d8d 2px 5px,#56524a 6px 7px,#2a2823 8px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.15);
  z-index:5}
.screw::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(45deg,transparent 45%,#1a1814 45% 55%,transparent 55%);}
.screw.tl{top:14px;left:14px}.screw.tr{top:14px;right:14px}
.screw.bl{bottom:14px;left:14px}.screw.br{bottom:14px;right:14px}

.chassis-top{
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  padding:6px 44px 14px;border-bottom:1px dashed rgba(14,14,14,.2);margin-bottom:14px;
}
.plate{white-space:nowrap}
.vents{display:flex;gap:3px;align-items:center;justify-self:start;padding-left:18px}
.vents i{display:block;width:3px;height:14px;background:rgba(14,14,14,.32);border-radius:1px}
.plate{
  display:flex;gap:8px;align-items:center;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:99px;padding:5px 14px;background:var(--paper);
}
.plate-label{color:var(--ink-3);font-weight:500}
.plate-val{color:var(--ink);font-weight:600}
.plate-sep{color:var(--ink-4)}
.power{display:flex;gap:8px;align-items:center;justify-self:end;padding-right:18px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.power-led{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal),inset 0 0 2px rgba(255,255,255,.6);animation:blink 1.6s infinite}

.display{
  display:grid;grid-template-columns:1.55fr 1fr;gap:14px;
  padding:0 18px;
}

/* ====== CRT ====== */
.crt{display:flex;flex-direction:column;gap:12px}
.crt-frame{
  background:#0d0e0a;
  border:1px solid #000;border-radius:14px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7),inset 0 0 0 6px #1a1b16,inset 0 0 0 7px #2c2e25;
  overflow:hidden;
  position:relative;
}
.crt-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  border-radius:14px;
}
.crt-toolbar{
  display:flex;gap:10px;align-items:center;
  padding:8px 12px;background:#15170f;border-bottom:1px solid #0a0a07;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:#5a6448;
}
.dot{width:9px;height:9px;border-radius:50%}
.dot-r{background:#d94a3a;box-shadow:inset 0 0 0 1px #6a2218}
.dot-y{background:#e0c14a;box-shadow:inset 0 0 0 1px #6a5a18}
.dot-g{background:#5fa84a;box-shadow:inset 0 0 0 1px #2a5018}
.crt-tab{padding:3px 10px;border:1px solid #2c3322;border-radius:99px;color:#7a8a5a;text-transform:uppercase}
.crt-tab.active{background:#1f2418;color:var(--terminal);border-color:#3a4a25}
.crt-spacer{flex:1}
.crt-meta{color:#5a6448}

.crt-screen{
  padding:22px 26px 20px;
  font-family:"JetBrains Mono",monospace;
  color:#a8c890;font-size:13px;line-height:1.55;
  min-height:380px;
  background:
    radial-gradient(ellipse at 50% 10%,rgba(15,203,107,.06) 0%,transparent 70%),
    #0d0e0a;
  position:relative;
}
.crt-prompt{color:#9ab07a;margin-bottom:4px}
.prompt-pre{color:#5fa84a}
.crt-out{color:#7a906a;font-size:12px;margin-bottom:2px}
.crt-out.faint{color:#586550;margin:6px 0 10px}

.big-title{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(64px,9.5vw,160px);
  line-height:.82;letter-spacing:-.045em;
  margin:14px 0 10px;color:var(--terminal);
  text-shadow:0 0 18px rgba(15,203,107,.35),0 0 2px rgba(15,203,107,.6);
}
.big-title .line{display:block}
.big-title .stroke{-webkit-text-stroke:1.5px var(--terminal);color:transparent;text-shadow:0 0 16px rgba(15,203,107,.25)}
.big-title .orange{color:var(--signal);text-shadow:0 0 18px rgba(255,91,31,.45)}
.big-title .caret{
  display:inline-block;width:.5em;height:.78em;background:var(--terminal);
  margin-left:.06em;vertical-align:-2px;animation:blink 1s steps(2) infinite;
  box-shadow:0 0 10px var(--terminal);
}

.crt-divider{height:1px;background:repeating-linear-gradient(90deg,#3a4a25 0 6px,transparent 6px 10px);margin:10px 0 12px}

.bio p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:#bcd0a8}
.bio p.muted{color:#8aa078}
.bio p strong{color:#e8f5d8;font-weight:600;background:linear-gradient(transparent 62%,rgba(255,91,31,.35) 62%)}
.bio .chev{color:#5fa84a;margin-right:6px}
.bio .tag{color:var(--signal);font-weight:600;letter-spacing:.06em;margin-right:8px;font-size:12px}

.caret-inline{display:inline-block;width:9px;height:14px;background:var(--terminal);vertical-align:-2px;animation:blink 1s steps(2) infinite;box-shadow:0 0 8px var(--terminal)}

.crt-statusbar{
  display:flex;gap:14px;align-items:center;
  padding:6px 14px;background:#0a0a07;border-top:1px solid #1a1b16;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;color:#7a906a;text-transform:uppercase;
}
.sb-led{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#5fa84a;box-shadow:0 0 4px #5fa84a;vertical-align:middle}
.sb-spacer{flex:1}

.controls{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--ink);border-radius:12px;background:var(--paper);
  padding:10px 14px;
}
.knob{display:flex;flex-direction:column;align-items:center;gap:2px;padding-right:14px;border-right:1px dashed var(--rule)}
.knob-dial{
  width:40px;height:40px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 30%,#fff 0 1.5px,#cdc6b3 3px,#a59e8a 14px,#7c7561 19px);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.15);
}
.knob-dial i{position:absolute;left:50%;top:4px;width:2px;height:14px;background:var(--ink);transform:translateX(-50%) rotate(28deg);transform-origin:bottom}
.knob-label{font-family:"JetBrains Mono",monospace;font-size:8px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-top:2px}
.knob-val{font-family:"VT323",monospace;font-size:14px;color:var(--signal);line-height:1}

.toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tg{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tg-led{width:10px;height:10px;border-radius:50%;background:#3a3833;border:1px solid #1a1814;box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.tg-led.on{background:var(--terminal);border-color:#0a8a4a;box-shadow:0 0 6px var(--terminal),inset 0 0 2px rgba(255,255,255,.4)}
.tg-name{color:var(--ink)}

.sliders{display:flex;flex-direction:column;gap:5px;padding-left:14px;border-left:1px dashed var(--rule);min-width:140px}
.sl{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sl-track{position:relative;height:6px;background:#cfc8b3;border-radius:3px;overflow:hidden;border:1px solid rgba(0,0,0,.2)}
.sl-track i{display:block;height:100%;width:calc(var(--p) * 100%);background:linear-gradient(90deg,var(--signal),var(--ink));border-radius:3px}

/* ====== CASSETTE TAPE ====== */
.cassette{
  --tape-body: #1a1916;
  --tape-body-2: #0e0d0b;
  --tape-edge: #45423b;
  --tape-shadow: rgba(0,0,0,.5);
  --tape-label-paper: #F2EDE0;
  --tape-label-ink: #1a1916;
  --tape-accent: var(--signal);
  --tape-window-glass: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%), linear-gradient(180deg, #0a0a07 0%, #16170f 100%);
  --reel-spin: 7s;

  position:relative;
  border:1.5px solid #000;border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.3) 60%),
    linear-gradient(180deg, var(--tape-body) 0%, var(--tape-body-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 6px rgba(0,0,0,.5),
    inset 0 0 0 4px rgba(255,255,255,.02),
    0 4px 14px rgba(0,0,0,.18);
  padding:18px 16px 14px;
  display:flex;flex-direction:column;gap:12px;
  min-height:380px;
  isolation:isolate;
}
.cassette::after{
  content:"";position:absolute;inset:6px;border-radius:10px;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}

.cs-screw{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7a766c 0 1.5px,#3a3833 2px 4px,#0a0908 5px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.3);
  z-index:2;
}
.cs-screw::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:linear-gradient(45deg,transparent 44%,#0a0908 44% 56%,transparent 56%);
}
.cs-tl{top:8px;left:8px}.cs-tr{top:8px;right:8px}
.cs-bl{bottom:8px;left:8px}.cs-br{bottom:8px;right:8px}
.cs-c{top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;z-index:1}

.cs-tab{
  position:absolute;top:0;width:18px;height:7px;
  background:linear-gradient(180deg,#0a0908,#1a1916);
  border:1px solid #000;border-top:none;border-radius:0 0 2px 2px;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.6);
}
.cs-tab-l{left:28px}
.cs-tab-r{right:28px}

.cs-label{
  position:relative;z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, transparent 8%, transparent 92%, rgba(0,0,0,.06) 100%),
    var(--tape-label-paper);
  border:1px solid rgba(0,0,0,.15);
  border-radius:3px;
  padding:8px 12px 10px;
  margin:6px 14px 0;
  color:var(--tape-label-ink);
  font-family:"JetBrains Mono",monospace;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 1px 2px rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.04);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(0,0,0,.12) 0 4px, transparent 5px),
    linear-gradient(180deg, var(--tape-label-paper), var(--tape-label-paper));
}
.cs-label-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding-bottom:6px;border-bottom:2px solid var(--tape-accent);
  margin-bottom:8px;
}
.cs-side{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--tape-accent);color:var(--tape-label-ink);
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);
}
.cs-brand{display:flex;flex-direction:column;line-height:1.05}
.cs-brand b{font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.cs-brand-sub{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:#5a574f;margin-top:2px}
.cs-no{font-family:"VT323",monospace;font-size:18px;line-height:1;letter-spacing:.04em;color:var(--tape-label-ink)}

.cs-label-rows{display:flex;flex-direction:column;gap:0}
.cs-label-rows .scrow{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 0;border-bottom:1px dashed rgba(0,0,0,.2);
}
.cs-label-rows .scrow:last-child{border-bottom:none}
.cs-label-rows .scrow b{color:#5a574f;font-weight:500;font-size:8.5px;letter-spacing:.14em}
.cs-label-rows .scrow span{color:var(--tape-label-ink);font-weight:600;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:0;text-transform:none;line-height:1.2;word-break:break-word}
.cs-status{color:var(--terminal) !important}

.cs-label-foot{
  display:grid;grid-template-columns:1fr;gap:6px;
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.15);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
}
.cs-meter{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center}
.cs-meter-name{color:#5a574f}
.cs-meter-bar{position:relative;height:6px;background:#cfc8b3;border:1px solid rgba(0,0,0,.2);border-radius:1px;overflow:hidden;min-width:60px}
.cs-meter-bar i{display:block;height:100%;width:calc(var(--p) * 100%);background:linear-gradient(90deg,var(--tape-accent),var(--ink))}
.cs-meter-val{font-family:"VT323",monospace;font-size:13px;color:var(--tape-accent);line-height:1}
.cs-runtime{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.cs-rt-name{color:#5a574f;font-size:8.5px}
.cs-rt-val{font-family:"VT323",monospace;font-size:14px;color:var(--tape-label-ink);line-height:1;text-align:right;white-space:nowrap}
.cs-rt-val i{font-style:normal;color:var(--terminal)}

.cs-window{
  position:relative;
  margin:0 14px 4px;
  border-radius:6px;
  border:1px solid #000;
  height:120px;
  overflow:hidden;
  background:var(--tape-window-glass);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.05);
}
.cs-window::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg, transparent 30%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.09) 48%, transparent 58%);
}
.cs-felt{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:24px;height:6px;border-radius:1px;
  background:repeating-linear-gradient(45deg,#9a3a25 0 2px,#7a2c1a 2px 4px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05);
}
.cs-reel{
  position:absolute;top:50%;width:74px;height:74px;border-radius:50%;
  transform:translateY(-50%);
  background:
    radial-gradient(circle, transparent 0 16px, rgba(0,0,0,.5) 16px 17px, transparent 17px 18px),
    repeating-radial-gradient(circle, #6a4a2a 18px, #4a3018 19px 20px, #6a4a2a 20px 22px),
    radial-gradient(circle, #2a2624 0 14px, #4a3018 14px 36px, #2a2624 36px);
  border:1.5px solid #000;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 4px rgba(0,0,0,.4);
  animation:cs-spin var(--reel-spin) linear infinite;
}
.cs-reel-l{left:16px}
.cs-reel-r{right:16px}
@keyframes cs-spin{to{transform:translateY(-50%) rotate(360deg)}}

.cs-hub{
  position:absolute;top:50%;left:50%;width:30px;height:30px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, #cfc8b3 0 5px, #8a8678 6px 12px, #5a574f 13px 14px, #1a1916 14px);
  box-shadow:inset 0 0 0 1px #000, 0 0 0 2px #0a0908;
}
.cs-hub::before{
  content:"";position:absolute;inset:50% 50%;width:6px;height:6px;
  background:#1a1916;border-radius:50%;border:1px solid #000;
  transform:translate(-50%,-50%);
}
.cs-tooth{
  position:absolute;left:50%;top:50%;width:4px;height:14px;
  background:#1a1916;border:1px solid #000;border-radius:1px;
  transform-origin:50% 0;
}
.cs-tooth:nth-child(1){transform:translate(-50%,0) rotate(0deg)}
.cs-tooth:nth-child(2){transform:translate(-50%,0) rotate(60deg)}
.cs-tooth:nth-child(3){transform:translate(-50%,0) rotate(120deg)}
.cs-tooth:nth-child(4){transform:translate(-50%,0) rotate(180deg)}
.cs-tooth:nth-child(5){transform:translate(-50%,0) rotate(240deg)}
.cs-tooth:nth-child(6){transform:translate(-50%,0) rotate(300deg)}

.cs-tape-line{
  position:absolute;left:54px;right:54px;bottom:18px;height:3px;
  background:linear-gradient(180deg,#5a3a22 0%,#3a2618 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.04);
}
.cs-pad-l,.cs-pad-r{
  position:absolute;bottom:6px;width:5px;height:10px;
  background:radial-gradient(circle,#cfc8b3 0 1.5px,#5a574f 2px 4px,#1a1916 5px);
  border:1px solid #000;border-radius:1px;
}
.cs-pad-l{left:calc(50% - 22px)}
.cs-pad-r{right:calc(50% - 22px)}

.cs-specs{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;
  font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8678;
  padding:4px 14px 0;
}
.cs-specs b{color:var(--paper);font-weight:600;margin-right:3px}
.cs-specs-sep{color:#45423b}

.cassette[data-color="cream"]{ --tape-body:#E0D4B8; --tape-body-2:#B8A988; --tape-edge:#5a574f; --tape-accent:#C84A1F; --tape-label-paper:#FFFBEF; --tape-label-ink:#1a1916; }

.chassis-bot{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  padding:14px 44px 6px;border-top:1px dashed rgba(14,14,14,.2);margin-top:14px;
}
.jacks{display:flex;gap:10px;align-items:center;padding-left:18px}
.jack{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0a0a07 0 4px,#2a2826 5px 7px,#56524a 8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -1px 1px rgba(0,0,0,.4);
}
.jack-label{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-left:6px}
.chassis-meta{
  display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;
  padding-right:18px;
}
.chassis-meta b{color:var(--ink);font-weight:600;margin-right:4px}

@media (max-width:860px){
  .display{grid-template-columns:1fr}
  .chassis-top,.chassis-bot{grid-template-columns:1fr;gap:8px;text-align:center;justify-items:center}
  .chassis-meta{justify-content:center}
  .controls{grid-template-columns:1fr}
  .knob{padding-right:0;border-right:none;border-bottom:1px dashed var(--rule);padding-bottom:8px}
  .sliders{padding-left:0;border-left:none;border-top:1px dashed var(--rule);padding-top:8px}
  .vents{padding-left:0}
  .power{padding-right:0}
  .jacks{padding-left:0}
  .chassis-meta{padding-right:0}
}

/* ticker */
.ticker{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  overflow:hidden;
}
.ticker-track{display:flex;gap:48px;white-space:nowrap;padding:10px 0;animation:ticker 60s linear infinite;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.ticker-track span::before{content:"◆ ";color:var(--signal);margin-right:6px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* section heading */
.section{padding:64px 0;border-bottom:1px solid var(--ink)}
.section-head{
  display:grid;grid-template-columns:var(--grid);gap:16px;margin-bottom:36px;align-items:start;
  position:relative;
}
.section-head::before{
  content:"";grid-column:1 / span 12;height:14px;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 2px, transparent 2.5px) 0 50% / 18px 14px repeat-x;
  margin-bottom:14px;opacity:.55;
}

.section-num{
  grid-column:1 / span 4;
  display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:0;
  border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;
  background:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
  align-self:start;
}
.section-num .num-tab{
  background:var(--ink);color:var(--paper);
  padding:14px 16px 12px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:64px;line-height:.85;letter-spacing:-.04em;
  display:grid;place-items:center;min-width:88px;
  position:relative;
}
.section-num .num-tab::after{
  content:"";position:absolute;left:6px;right:6px;bottom:5px;height:2px;background:var(--signal);
}
.section-num .num-meta{
  padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  font-family:"JetBrains Mono",monospace;
  border-left:1px dashed var(--ink);
}
.section-num .num-kicker{font-size:9px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.section-num .num-name{font-size:13px;letter-spacing:.16em;color:var(--ink);font-weight:700;text-transform:uppercase}
.section-num .num-pin{
  display:inline-flex;align-items:center;gap:5px;font-size:8.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;
}
.section-num .num-pin i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--terminal);box-shadow:0 0 4px var(--terminal)}

.section-title{
  grid-column:5 / span 5;
  font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:50px;line-height:1.05;letter-spacing:-.035em;margin:0;
  align-self:center;text-wrap:balance;
}
.section-title .lead{
  display:block;font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.22em;color:var(--signal);
  text-transform:uppercase;font-weight:600;margin-bottom:10px;
}
.section-title em{font-style:normal;color:var(--signal)}
.section-title .stroke{-webkit-text-stroke:1.5px var(--ink);color:transparent;font-weight:700}

.section-meta{
  grid-column:10 / span 3;align-self:center;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;color:var(--ink);letter-spacing:.14em;text-transform:uppercase;line-height:1.7;
  border-left:2px solid var(--ink);padding:6px 0 6px 14px;
  position:relative;
}
.section-meta::before{
  content:"";position:absolute;left:-5px;top:0;width:8px;height:8px;background:var(--signal);
  transform:rotate(45deg);
}

/* 01 OPERATOR */
.profile-grid{align-items:start}
.profile-main{grid-column:1 / span 8}
.profile-rail{grid-column:9 / span 4}

.profile-lede{
  font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(30px,3.4vw,46px);line-height:1.18;letter-spacing:-.015em;
  margin:0 0 28px;text-wrap:balance;max-width:32ch;
}
.profile-lede mark{background:var(--signal);color:var(--paper);padding:0 8px;border-radius:4px}

.profile-body p{
  font-size:14.5px;line-height:1.7;margin:0 0 14px;color:var(--ink-2);max-width:84ch;
}
.profile-body p:last-child{margin-bottom:0}

.profile-rail{
  border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper);
  padding:18px 18px 14px;
  box-shadow:3px 3px 0 var(--ink);
  position:sticky;top:84px;
}
.profile-rail__label{
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;letter-spacing:.22em;color:var(--signal);text-transform:uppercase;
  font-weight:600;
  border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:6px;
}
.chrono{list-style:none;margin:0;padding:0}
.chrono li{
  display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px dashed var(--rule);
}
.chrono li:last-child{border-bottom:none}
.chrono .yr{
  font-family:"VT323",monospace;font-size:20px;color:var(--signal);letter-spacing:.02em;line-height:1;white-space:nowrap;
}
.chrono .co{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline;color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.04em;line-height:1.3}
.chrono .co b{color:var(--ink);font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:.06em;font-size:13px;text-transform:uppercase}

.vis-band{margin-top:48px;grid-column:1 / span 12}
.vb-rail{
  position:relative;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:14px 18px;
  background:
    repeating-linear-gradient(90deg, var(--paper) 0 6px, var(--paper-2) 6px 7px),
    var(--paper);
}
.vb-corner{position:absolute;width:10px;height:10px;border:1.5px solid var(--ink)}
.vb-corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.vb-corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.vb-corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.vb-corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
.vb-tape{
  display:grid;grid-template-columns:auto auto auto 1fr auto auto;gap:14px;align-items:center;
  height:62px;
}
.vb-led{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8 0 1.2px, var(--ink-3) 2px 4px, var(--ink) 5px);
  border:1px solid var(--ink);
}
.vb-led.on{
  background:radial-gradient(circle at 35% 30%, #fff 0 1.5px, var(--signal) 2px 4px, #6a1f0a 5px);
  box-shadow:0 0 8px var(--signal),inset 0 0 0 1px rgba(0,0,0,.4);
  animation:vb-blink 1.4s ease-in-out infinite;
}
@keyframes vb-blink{0%,100%{opacity:1}50%{opacity:.45}}
.vb-spec{display:flex;align-items:flex-end;gap:2px;height:100%;flex:1;padding:0 4px}
.vb-spec i{
  display:block;flex:1;min-width:2px;
  height:calc(var(--h, .5) * 100%);
  background:linear-gradient(to top, var(--ink) 0 30%, var(--ink-3) 30% 70%, var(--signal) 70% 100%);
  animation:vb-pulse 2.2s ease-in-out infinite alternate;
  animation-delay:var(--d, 0s);
  transform-origin:bottom;
}
@keyframes vb-pulse{
  0%{transform:scaleY(.7)}
  100%{transform:scaleY(1.05)}
}
.vb-knob{
  width:30px;height:30px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, var(--paper) 0 3px, var(--paper-2) 4px 12px, var(--paper-3) 13px 14px, var(--ink) 15px);
  border:1.5px solid var(--ink);
  position:relative;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.06);
}
.vb-knob span{
  position:absolute;left:50%;top:4px;width:2px;height:8px;background:var(--ink);transform:translateX(-50%);
}
.vb-knob:nth-of-type(2) span{transform:translateX(-50%) rotate(58deg);transform-origin:50% 11px}
.vb-perf{
  display:flex;justify-content:space-between;margin-top:10px;padding:0 4px;
}
.vb-perf span{
  width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.42;
}
@media (max-width:760px){
  .vb-tape{grid-template-columns:auto auto 1fr auto;height:48px}
  .vb-tape .vb-led:nth-child(3){display:none}
  .vb-tape .vb-knob:nth-last-child(1){display:none}
  .vb-perf span:nth-child(2n){display:none}
}

/* 02 LOG / career tapes */
.tape{
  grid-column:1 / span 12;
  border:1px solid var(--ink);border-radius:18px;
  background:var(--paper);
  padding:0;margin-bottom:28px;overflow:hidden;
  display:grid;grid-template-columns:var(--grid);gap:16px;
  position:relative;
}
.tape::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);
  opacity:.6;
}
.tape .tape-side{
  grid-column:1 / span 3;background:var(--tape);color:var(--paper);
  padding:24px 20px;position:relative;min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.tape .tape-side .reels{display:flex;gap:14px;margin-top:12px}
.tape .tape-side .reel{
  width:60px;height:60px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      #2a2826 0 5px,
      #0a0908 5px 7px,
      #4a4844 7px 13px,
      #3a3833 13px 14px,
      #4a4844 14px 22px,
      #1a1916 22px 23px,
      #7a7670 23px 25px,
      #2a2826 25px 27px,
      #0a0908 27px 30px
    );
  border:1px solid #0a0908;
  box-shadow:inset 0 0 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.45);
  position:relative;
  animation:spin 7s linear infinite;
}
.tape .tape-side .reel:nth-child(2){animation-delay:-1.6s}
.tape .tape-side .reel.spin{animation-duration:4s}
.tape .tape-side .reel::before{
  content:"";position:absolute;
  top:50%;left:50%;width:3.5px;height:3.5px;border-radius:50%;
  background:#0a0908;margin:-1.75px 0 0 -1.75px;
  box-shadow:
    0    -10px 0 0 #0a0908,
    8.66px -5px 0 0 #0a0908,
    8.66px  5px 0 0 #0a0908,
    0     10px 0 0 #0a0908,
    -8.66px 5px 0 0 #0a0908,
    -8.66px -5px 0 0 #0a0908;
}
.tape .tape-side .reel::after{
  content:"";position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#cfc8b3 0 1px,#8a8678 2px 3px,#3a3833 4px);
  margin:-4px 0 0 -4px;
  box-shadow:inset 0 0 0 1px #0a0908,0 0 0 1px #1a1916;
}
@keyframes spin{to{transform:rotate(360deg)}}
.tape .tape-side .label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9A958A}
.tape .tape-side .role-co{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.05;margin-top:8px}
.tape .tape-side .role-yr{font-family:"VT323",monospace;font-size:38px;color:var(--terminal);letter-spacing:.04em;line-height:1}
.tape .tape-side .role-meta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#A8A39A;margin-top:14px;line-height:1.6}

.tape .tape-body{grid-column:4 / span 9;padding:24px 24px 28px}
.tape .tape-body .role{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0;flex:1;min-width:0
}
.tape .tape-body .roleline{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:16px;flex-wrap:wrap}
.tape .tape-body .pill{flex-shrink:0;align-self:flex-start;margin-top:6px}
.tape .tape-body .pill{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);border-radius:99px;padding:4px 10px;white-space:nowrap}
.tape .tape-body p{font-size:13px;line-height:1.6;margin:0 0 10px;max-width:70ch;color:var(--ink-2)}
.tape .tape-body ul{list-style:none;padding:0;margin:14px 0 0;border-top:1px dashed var(--rule)}
.tape .tape-body li{
  display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;
  padding:10px 0;border-bottom:1px dashed var(--rule);font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.tape .tape-body li b{color:var(--ink);font-weight:500}
.tape .tape-body li .tk{font-family:"VT323",monospace;font-size:18px;color:var(--signal);letter-spacing:.04em;line-height:1.3}
.tape .tape-body .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tape .tape-body .gallery .frame{
  border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/3;position:relative;
}
.tape .tape-body .gallery img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(.98)}
.tape .tape-body .gallery .cap{position:absolute;left:6px;bottom:6px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:2px 6px;border-radius:4px}

.tape.signal{background:var(--paper-2)}
.tape.dark{background:#0E0E0E;color:var(--paper);border-color:var(--ink)}
.tape.dark .tape-body p{color:#C8C2B3}
.tape.dark .tape-body li{color:#C8C2B3;border-color:rgba(255,255,255,.12)}
.tape.dark .tape-body li b{color:var(--paper)}
.tape.dark .tape-body ul{border-color:rgba(255,255,255,.12)}
.tape.dark .tape-body .pill{border-color:var(--paper);color:var(--paper)}
.tape.dark .tape-body .role{color:var(--paper)}
.tape.dark::before{background:repeating-linear-gradient(90deg,var(--signal) 0 8px,transparent 8px 16px);opacity:1}

/* 03 CATALOG */
.catalog .row{align-items:start}
.cat-intro{grid-column:1 / span 12;display:grid;grid-template-columns:var(--grid);gap:16px;margin-bottom:18px}
.cat-intro p{grid-column:1 / span 7;margin:0;color:var(--ink-2);font-size:14px;max-width:60ch}
.cat-legend{grid-column:9 / span 4;display:flex;gap:16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);justify-content:flex-end;flex-wrap:wrap}
.cat-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-orange{background:var(--signal)}
.dot-green{background:var(--terminal)}
.dot-ink{background:var(--ink)}

.product{
  border:1px solid var(--ink);border-radius:18px;background:var(--paper);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.product .ph{
  aspect-ratio:1/1;background:var(--paper-3);position:relative;overflow:hidden;
}
.product .ph img{width:100%;height:100%;object-fit:cover;display:block}
.product .ph .stamp{
  position:absolute;top:10px;left:10px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:3px 6px;border-radius:4px;
  white-space:nowrap
}
.product .ph .stamp.s2{background:var(--signal);left:auto;right:10px}
.product .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ink)}
.product .info .top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.product .info h4{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px;margin:0;letter-spacing:-.01em}
.product .info p{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.product .info .stat-line{display:flex;gap:12px;margin-top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-top:1px dashed var(--rule);padding-top:8px}
.product .info .stat-line b{color:var(--ink);font-weight:500;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:0;margin-right:4px}

.cat-grid{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-grid .product:nth-child(1){grid-row:span 2}
.cat-grid .product:nth-child(1) .ph{aspect-ratio:1/1.6}

/* 04 CREDENTIALS */
.cred-row{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cred{
  border:1px solid var(--ink);border-radius:14px;padding:22px;background:var(--paper);
  position:relative;
}
.cred::after{
  content:"";position:absolute;right:14px;top:14px;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 0 14px,var(--ink) 14px 16px,transparent 16px),
             repeating-conic-gradient(from 0deg,var(--ink) 0deg 6deg,transparent 6deg 12deg);
  opacity:.85
}
.cred .yr{font-family:"VT323",monospace;font-size:34px;line-height:1;color:var(--signal)}
.cred h5{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:22px;margin:8px 0 4px;letter-spacing:-.01em;max-width:14ch}
.cred .deg{font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.cred .meta{margin-top:24px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-top:1px dashed var(--rule);padding-top:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}

/* 05 SIGNAL */
.signal-section{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink)}
.signal-section .section-num{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--signal)}
.signal-section .section-num .num-tab{background:var(--paper);color:var(--ink)}
.signal-section .section-num .num-meta{border-left-color:var(--paper)}
.signal-section .section-num .num-kicker,.signal-section .section-num .num-pin{color:#A8A39A}
.signal-section .section-num .num-name{color:var(--paper)}
.signal-section .section-title{color:var(--paper)}
.signal-section .section-meta{color:#A8A39A;border-left-color:var(--paper)}
.signal-section .hr{background:var(--paper);opacity:.4}
.contact{grid-column:1 / span 12;display:grid;grid-template-columns:var(--grid);gap:16px;align-items:end;padding:30px 0 0}
.contact-big{
  grid-column:1 / span 8;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(48px,7vw,108px);line-height:.95;letter-spacing:-.03em;margin:0;color:var(--paper);
}
.contact-big .green{color:var(--terminal)}
.contact-big .blink{display:inline-block;width:.55em;height:.85em;background:var(--terminal);margin-left:.05em;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.contact-side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:14px;font-size:12px;color:#C8C2B3}
.contact-side a{display:flex;justify-content:space-between;border:1px solid #C8C2B3;border-radius:99px;padding:10px 16px;letter-spacing:.04em;align-items:center;gap:10px}
.contact-side a:hover{background:var(--terminal);color:var(--ink);border-color:var(--terminal)}
.contact-side a span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#A8A39A;flex-shrink:0}
.contact-side a:hover span{color:var(--ink)}
.contact-side a b{font-weight:500;text-align:right}

.cli{margin-top:60px;border:1px solid #4a4844;border-radius:14px;background:#0a0a0a;padding:18px 20px;font-family:"VT323",monospace;font-size:18px;line-height:1.5;color:var(--terminal);grid-column:1 / span 12}
.cli .prompt{color:#C8C2B3;margin-right:8px}
.cli .out{color:#9A958A}
.cli .yellow{color:#FFD86B}

footer{padding:30px 0 60px;color:var(--ink-3);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
footer .row{align-items:end}
footer .left{grid-column:1 / span 6}
footer .right{grid-column:7 / span 6;text-align:right}
.bigfoot{
  grid-column:1 / span 12;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(80px,16vw,260px);line-height:.85;letter-spacing:-.05em;
  -webkit-text-stroke:1.5px var(--ink);color:transparent;margin:24px 0 8px
}

/* responsive */
@media (max-width:980px){
  :root{--grid:1fr 1fr 1fr 1fr 1fr 1fr}
  .nav{display:none}
  .brand-mark{grid-column:1 / span 4}.clock{grid-column:5 / span 2}
  .section-num{grid-column:1 / span 6}
  .section-num .num-tab{font-size:48px;min-width:64px;padding:10px 12px}
  .section-title{grid-column:1 / span 6;font-size:32px;margin-top:14px}
  .section-meta{grid-column:1 / span 6;margin-top:14px;border-left:none;border-top:2px solid var(--ink);padding:10px 0 0}
  .section-meta::before{display:none}
  .profile-main,.profile-rail{grid-column:1 / span 6}
  .profile-rail{position:static;margin-top:14px}
  .tape .tape-side{grid-column:1 / span 6}.tape .tape-body{grid-column:1 / span 6}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cred-row{grid-template-columns:1fr}
  .contact-big{grid-column:1 / span 6}.contact-side{grid-column:1 / span 6}
  .cli{grid-column:1 / span 6}
  footer .left,footer .right{grid-column:1 / span 6;text-align:left}
}

/* ============ MOBILE (≤720px) ============ */
@media (max-width:720px){
  /* shell padding tighter */
  .shell{padding:0 14px}

  /* topbar */
  .topbar .row{padding:8px 0}
  .brand-mark{gap:8px;font-weight:700}
  .brand-mark .glyph{width:20px;height:20px;font-size:10px}
  .brand-mark > div > div:first-child{font-size:12px}
  .brand-mark small{font-size:9px;letter-spacing:.04em}
  .clock{font-size:9px;gap:6px;letter-spacing:.04em}
  .clock #clk{font-size:10px}
  .clock > span:nth-child(2),.clock > span:nth-child(4){display:none}
  .lang-toggle{padding:2px 8px;font-size:9px}

  /* hero device — drastically smaller */
  .hero{padding:14px 0 28px}
  .device{padding:8px;border-radius:14px}
  .device::before{inset:5px;border-radius:10px}
  .screw{width:10px;height:10px}
  .screw.tl{top:8px;left:8px}.screw.tr{top:8px;right:8px}
  .screw.bl{bottom:8px;left:8px}.screw.br{bottom:8px;right:8px}

  /* chassis-top: hide vents, condense plate */
  .chassis-top{padding:6px 24px 8px;margin-bottom:8px;gap:6px}
  .vents{display:none}
  .plate{font-size:8px;padding:4px 8px;gap:4px;letter-spacing:.06em}
  .power{padding-right:0;font-size:8px;letter-spacing:.1em}

  /* display becomes single column already at 860px; reduce padding */
  .display{padding:0 4px;gap:10px}

  /* CRT */
  .crt{gap:8px}
  .crt-frame{border-radius:10px}
  .crt-toolbar{padding:5px 8px;font-size:9px;gap:5px;flex-wrap:wrap}
  .crt-tab{padding:2px 6px;font-size:8px}
  .crt-meta{display:none}
  .dot{width:7px;height:7px}
  .crt-screen{padding:14px 14px 12px;min-height:280px;font-size:11.5px}
  .crt-prompt{font-size:11px;word-break:break-word}
  .crt-out{font-size:11px}
  .big-title{font-size:clamp(56px,18vw,96px);line-height:.85;margin:8px 0 6px}
  .crt-divider{margin:6px 0 8px}
  .bio p{font-size:12px;line-height:1.55;margin:0 0 6px}
  .bio .tag{font-size:10px;margin-right:5px}
  .crt-statusbar{padding:4px 8px;font-size:8px;gap:6px;letter-spacing:.1em}

  /* controls row */
  .controls{padding:8px 10px;gap:10px}
  .knob{padding-right:8px}
  .knob-dial{width:32px;height:32px}
  .knob-label{font-size:7px}
  .knob-val{font-size:12px}
  .toggles{gap:4px}
  .tg{min-width:40px;font-size:8px;gap:3px}
  .tg-led{width:8px;height:8px}
  .sliders{padding-left:8px;min-width:100px;gap:4px}
  .sl{grid-template-columns:36px 1fr;gap:6px;font-size:8px}
  .sl-track{height:5px}

  /* cassette */
  .cassette{padding:12px 10px 10px;min-height:auto;gap:8px}
  .cs-screw{width:9px;height:9px}
  .cs-tl{top:6px;left:6px}.cs-tr{top:6px;right:6px}
  .cs-bl{bottom:6px;left:6px}.cs-br{bottom:6px;right:6px}
  .cs-tab-l{left:22px}.cs-tab-r{right:22px}
  .cs-label{margin:4px 8px 0;padding:6px 8px 8px}
  .cs-label-head{gap:8px;padding-bottom:4px;margin-bottom:6px}
  .cs-side{width:20px;height:20px;font-size:12px}
  .cs-brand b{font-size:11px}
  .cs-brand-sub{font-size:7px}
  .cs-no{font-size:14px}
  .cs-label-rows .scrow{padding:3px 0}
  .cs-label-rows .scrow b{font-size:7.5px}
  .cs-label-rows .scrow span{font-size:10px}
  .cs-window{margin:0 8px 4px;height:84px}
  .cs-reel{width:54px;height:54px}
  .cs-reel-l{left:8px}.cs-reel-r{right:8px}
  .cs-tape-line{left:38px;right:38px;bottom:14px}
  .cs-pad-l{left:calc(50% - 18px)}.cs-pad-r{right:calc(50% - 18px)}
  .cs-felt{bottom:6px;width:20px;height:5px}
  .cs-specs{padding:2px 8px 0;font-size:8px;gap:6px}

  /* chassis bottom */
  .chassis-bot{padding:8px 16px 4px;margin-top:8px}
  .jacks{padding-left:0;gap:6px}
  .jack{width:14px;height:14px}
  .jack-label{font-size:8px;margin-left:4px}
  .chassis-meta{padding-right:0;gap:8px;font-size:8px;justify-content:center}

  /* ticker */
  .ticker-track{gap:24px;font-size:10px;padding:7px 0;letter-spacing:.12em}

  /* sections */
  .section{padding:32px 0}
  .section-head{margin-bottom:20px;gap:10px}
  .section-head::before{height:8px;background-size:12px 8px}
  .section-num{box-shadow:2px 2px 0 var(--ink)}
  .section-num .num-tab{font-size:34px;min-width:48px;padding:8px 10px}
  .section-num .num-meta{padding:6px 10px;gap:2px}
  .section-num .num-kicker{font-size:8px}
  .section-num .num-name{font-size:11px;letter-spacing:.12em}
  .section-num .num-pin{font-size:7.5px}
  .section-title{font-size:22px;margin-top:10px;line-height:1.15}
  .section-title .lead{font-size:9px;margin-bottom:6px;letter-spacing:.16em}
  .section-meta{font-size:8.5px;letter-spacing:.1em;line-height:1.6;margin-top:10px;padding-top:8px}

  /* 01 PROFILE */
  .profile-lede{font-size:clamp(22px,7vw,30px);max-width:none;margin:0 0 16px;line-height:1.22}
  .profile-lede mark{padding:0 5px}
  .profile-body p{font-size:13px;max-width:none;line-height:1.6}
  .profile-rail{padding:14px;box-shadow:2px 2px 0 var(--ink);margin-top:18px;border-radius:6px}
  .profile-rail__label{font-size:8.5px;padding-bottom:8px;margin-bottom:4px}
  .chrono li{grid-template-columns:78px 1fr;gap:10px;padding:8px 0}
  .chrono .yr{font-size:17px}
  .chrono .co{grid-template-columns:80px 1fr;gap:8px;font-size:9.5px;line-height:1.25}
  .chrono .co b{font-size:11px;letter-spacing:.04em}

  /* vis-band */
  .vis-band{margin-top:24px}
  .vb-rail{padding:8px 10px}
  .vb-tape{height:36px;gap:8px}
  .vb-knob{width:22px;height:22px}
  .vb-perf{margin-top:6px}

  /* 02 LOG tapes */
  .tape{margin-bottom:18px;border-radius:12px;gap:0}
  .tape::before{height:4px}
  .tape .tape-side{padding:14px 14px;min-height:auto}
  .tape .tape-side .label{font-size:9px}
  .tape .tape-side .reels{gap:10px;margin-top:8px}
  .tape .tape-side .reel{width:46px;height:46px}
  .tape .tape-side .role-co{font-size:17px;margin-top:6px}
  .tape .tape-side .role-yr{font-size:26px}
  .tape .tape-side .role-meta{font-size:8.5px;margin-top:10px}
  .tape .tape-body{padding:14px 14px 18px}
  .tape .tape-body .role{font-size:18px}
  .tape .tape-body .roleline{margin-bottom:10px;gap:10px}
  .tape .tape-body .pill{font-size:8.5px;padding:3px 8px;letter-spacing:.1em}
  .tape .tape-body p{font-size:12.5px;line-height:1.55}
  .tape .tape-body ul{margin-top:10px}
  .tape .tape-body li{grid-template-columns:64px 1fr;gap:10px;font-size:11.5px;padding:8px 0;line-height:1.5}
  .tape .tape-body li .tk{font-size:14px}
  .tape .tape-body .gallery{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}
  .tape .tape-body .gallery .cap{font-size:8px;padding:1px 5px}

  /* 03 CATALOG */
  .cat-intro{display:block;margin-bottom:14px}
  .cat-intro p{font-size:13px;max-width:none;margin-bottom:10px}
  .cat-legend{justify-content:flex-start;gap:10px;font-size:9px}
  .cat-grid{grid-template-columns:1fr;gap:12px}
  .cat-grid .product:nth-child(1){grid-row:auto}
  .cat-grid .product:nth-child(1) .ph{aspect-ratio:1/1}
  .product .info{padding:12px 14px 14px}
  .product .info .top{font-size:9px}
  .product .info h4{font-size:17px}
  .product .info p{font-size:12px;line-height:1.5}
  .product .info .stat-line{font-size:9px;gap:10px}
  .product .info .stat-line b{font-size:12px}
  .product .ph .stamp{font-size:8px;padding:2px 5px;top:8px;left:8px}
  .product .ph .stamp.s2{right:8px}

  /* 04 SIGNAL */
  .contact{display:flex;flex-direction:column;align-items:stretch;padding:10px 0 0;gap:18px}
  .contact-big{font-size:clamp(36px,10vw,52px);line-height:1.05}
  .contact-side{font-size:11px;gap:10px}
  .contact-side a{padding:9px 14px}
  .contact-side a span{font-size:9px}
  .cli{padding:12px 14px;font-size:14px;margin-top:24px;border-radius:10px;line-height:1.5}

  /* footer */
  footer{padding:24px 0 40px;font-size:9px}
  .bigfoot{font-size:clamp(48px,18vw,90px);margin:16px 0 8px;-webkit-text-stroke:1px var(--ink)}

  /* attenuate decorative film grain on mobile (smoother feel) */
  body::before{opacity:.10}
  body::after{opacity:.04}
}

/* extra-small phones (≤380px) — most aggressive shrink */
@media (max-width:380px){
  .shell{padding:0 10px}
  .brand-mark > div > div:first-child{font-size:11px}
  .brand-mark small{font-size:8px}
  .clock #clk{font-size:9px}
  .clock > span:nth-child(2),.clock > span:nth-child(4){display:none}
  .big-title{font-size:18vw}
  .section-title{font-size:20px}
  .chrono li{grid-template-columns:72px 1fr;gap:8px}
  .chrono .yr{font-size:15px}
  .chrono .co{grid-template-columns:76px 1fr;gap:6px;font-size:9px}
  .chrono .co b{font-size:10.5px}
  .tape .tape-side .role-yr{font-size:22px}
  .tape .tape-body li{grid-template-columns:54px 1fr;gap:8px;font-size:11px}
  .contact-big{font-size:34px}
}