@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/BigShouldersDisplay-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/BigShouldersDisplay-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Barlow-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Doto-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chartformer — the Dubbing Deck.
   Brushed-aluminium fascia in a beige plastic surround; engraved condensed caps;
   chrome keys with an amber LED strip; black displays with amber dot-matrix readouts. */
:root{
  --alu-1:#d4d8dc; --alu-2:#bfc4c9; --alu-3:#a9aeb4;
  --beige:#e6dfc9; --beige-2:#d9d0b5; --beige-3:#c7bc9c;
  --ink:#1b1b1b; --ink-2:#3b3d40; --steel:#8d9297;
  --amber:#ffb000; --amber-dim:#5c3f00; --matrix:#cc7a00;
  --rec:#d8342a; --lcd:#121212;
  --blue:#2c4a8a; --green:#3f6b4a;
  --display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --dots:'Doto', ui-monospace, monospace;
  --code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font:500 18px/1.55 var(--body);
  background-color:var(--beige);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--steel) var(--beige-2)}

.surround{max-width:1320px;margin:0 auto;padding:18px 18px 28px}

/* ---- the fascia: brushed aluminium, bolted zones ---- */
.fascia{
  position:relative;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.025) 1px 2px, rgba(255,255,255,0) 2px 4px),
    linear-gradient(180deg, var(--alu-1), var(--alu-2) 70%, #b8bdc2);
  border:1px solid #9aa0a6; border-radius:var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 3px rgba(60,50,30,.22), 0 10px 24px -14px rgba(60,50,30,.45);
  margin-bottom:14px;
}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f2f3f4, #9aa0a6 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:rgba(0,0,0,.35);transform:rotate(35deg)}
.screw.tl{left:10px;top:10px}.screw.tr{right:10px;top:10px}

.engr{font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.engr.tiny{font-size:11.5px}
.engr.dim,.dim{opacity:.55}
.engr-h{font:800 15px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px;display:flex;align-items:center;gap:14px;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.engr-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--ink-2),transparent);opacity:.5}

h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0;text-wrap:balance}
h1{font-size:clamp(3rem, 7.4vw, 6rem)}
h2{font-size:clamp(2.2rem, 4.4vw, 3.6rem);margin-bottom:18px}
p{margin:0 0 14px;max-width:62ch}
.lede{font-size:20px;line-height:1.5;color:var(--ink-2)}
.fine{font-size:14.5px;color:#4a4c50}
strong{font-weight:600}

/* ---- header ---- */
.head{display:flex;align-items:center;gap:22px;padding:16px 30px 16px 34px}
.plate{display:flex;align-items:center;gap:14px;text-decoration:none}
.mark{display:inline-grid;place-items:center;font:700 20px/1 var(--dots);color:var(--amber);background:var(--lcd);
  padding:8px 9px 7px;border-radius:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 0 6px rgba(255,176,0,.55)}
.word{font:800 38px/1 var(--display);letter-spacing:.06em;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.model{font:600 11px/1.25 var(--display);letter-spacing:.16em;color:var(--ink-2);border-left:1px solid rgba(0,0,0,.25);padding-left:12px}
.keys{display:flex;gap:8px;margin-left:auto}
.counter{font:700 22px/1 var(--dots);padding:10px 14px;min-width:150px;text-align:right}
.counter .dim{font-size:13px;letter-spacing:.1em;margin-right:6px}

/* ---- keys: chrome buttons with an amber LED strip ---- */
.key{
  display:inline-flex;align-items:center;gap:10px;position:relative;cursor:pointer;
  font:700 16px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:17px 22px 15px;border:1px solid #868b91;border-radius:5px;
  background:linear-gradient(180deg,#f3f4f5,#cfd3d7 55%,#bdc2c7);
  box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 #7d8288, 0 3px 6px rgba(0,0,0,.18);
  transition:transform .06s, box-shadow .06s;
}
.key:hover .led{background:var(--amber);box-shadow:0 0 8px rgba(255,176,0,.7)}
.key:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 0 0 #7d8288, 0 1px 2px rgba(0,0,0,.2)}
.key.small{font-size:13px;padding:13px 14px 11px}
.led{position:absolute;left:10px;right:10px;top:4px;height:3px;border-radius:2px;background:#6b5a35;transition:background .15s, box-shadow .15s}
.led.on{background:var(--amber);box-shadow:0 0 8px rgba(255,176,0,.75)}
.led.red{background:#5a1f1a}
.key.primary{font-size:18px;padding:20px 26px 18px;background:linear-gradient(180deg,#fff8e6,#f0dfae 55%,#e2c983);border-color:#9c8550}
.ic{width:16px;height:16px;flex:none}
.ic.big{width:34px;height:34px}
button.key{font-family:var(--display)}

/* ---- displays ---- */
.lcd{background:var(--lcd);color:var(--amber);border-radius:5px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.6);
  font-family:var(--dots);font-weight:700;text-shadow:0 0 5px rgba(255,176,0,.45)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:4fr 8fr;gap:22px 36px;padding:44px 34px 38px 44px;align-items:start}
.hero h1{grid-column:1/-1;margin-bottom:8px}
.hero h1 .free{color:var(--rec);white-space:nowrap}
.hero > *,.deck-row > *,.split > *{min-width:0}
.hero-copy{padding-top:6px}
.hero-copy .lede{font-size:19px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}

.deck{background:linear-gradient(180deg,var(--beige),var(--beige-2));border:1px solid var(--beige-3);border-radius:8px;padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px -4px rgba(60,50,30,.4)}
.deck-row{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px}
.unit{background:linear-gradient(180deg,#2b2b2b,#1d1d1d);border-radius:6px;padding:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.unit-head{display:flex;gap:10px;align-items:center;margin:2px 4px 9px}
.unit-head .engr{color:#e9e3d0;text-shadow:none}
.rec{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#4a1612;transition:background .2s, box-shadow .2s}
.rec.on{background:var(--rec);box-shadow:0 0 10px var(--rec)}
.window{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0c0c0c;border-radius:4px;padding:10px 12px;margin-bottom:10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.reel{width:46px;height:46px;flex:none}
.deck.running .reel{animation:spin 1.1s linear infinite}
.deck.running .r2{animation-duration:.8s}
@keyframes spin{to{transform:rotate(-360deg)}}
.tape-label{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;
  background:var(--beige);border-radius:3px;padding:6px 8px;font:600 12.5px/1.2 var(--body);color:var(--ink);
  box-shadow:inset 0 -6px 0 rgba(255,176,0,.6)}
.tape-label.clean{box-shadow:inset 0 -6px 0 rgba(44,74,138,.55)}
.tape-label span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side{font:800 15px/1 var(--display)}

.paper{position:relative;height:300px;overflow:hidden;background:#fbfaf6;border-radius:3px;padding:14px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
.paper pre{margin:0;font:500 11.8px/1.45 var(--code);color:#222;white-space:pre}
.paper pre .c{color:#222;font-weight:700}
.paper pre .lit{background:rgba(255,176,0,.35);transition:background .2s}
.paper .staff{display:none;width:100%;height:auto}
.paper[data-kind="photo"]{background:#ece6d6}
.paper[data-kind="photo"] pre{transform:rotate(-2.2deg) translate(4px,6px);filter:blur(.35px) contrast(.92);color:#333;
  background:#f7f3ea;padding:10px;box-shadow:3px 5px 10px rgba(0,0,0,.25)}
.paper[data-kind="word"] pre{font-family:Calibri,Carlito,'Segoe UI',Arial,sans-serif;font-size:13.2px;tab-size:4}
.paper[data-kind="sheet"] pre{display:none}
.paper[data-kind="sheet"] .staff{display:block}

.screen{height:300px;overflow:hidden;padding:14px 12px}
.screen pre{margin:0;font:600 11px/1.55 var(--code);color:var(--amber);white-space:pre-wrap;word-break:break-word}
.screen pre .dir{color:#ffd77a;opacity:.85}
.screen pre .ch{color:#fff2cc}
.screen pre .cur{display:inline-block;width:.6em;background:var(--amber);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.meters{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:4px 4px;align-items:end;padding-top:34px}
.ladder{display:flex;flex-direction:column-reverse;gap:3px;height:100%;padding:4px 3px;background:var(--lcd);border-radius:3px;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.ladder i{display:block;height:7px;border-radius:1px;background:var(--amber-dim)}
.ladder i.on{background:var(--amber);box-shadow:0 0 5px rgba(255,176,0,.6)}
.ladder i.hot.on{background:var(--rec);box-shadow:0 0 5px rgba(216,52,42,.6)}
.meters .engr{text-align:center;color:var(--ink)}

.transport{display:grid;grid-template-columns:1fr auto;gap:12px 14px;align-items:center;margin-top:14px}
.selector{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sel-label{margin-right:6px}
.toggle{font:700 13px/1 var(--display);letter-spacing:.12em;padding:11px 12px 10px;border-radius:4px;cursor:pointer;color:var(--ink);
  border:1px solid #8a8f95;background:linear-gradient(180deg,#eceef0,#c4c8cd);box-shadow:inset 0 1px 0 #fff, 0 2px 0 #80858b}
.toggle.on{background:linear-gradient(180deg,#bfc3c8,#d9dcdf);box-shadow:inset 0 2px 4px rgba(0,0,0,.3);border-color:#6d7278;position:relative}
.toggle.on::before{content:"";position:absolute;left:8px;right:8px;top:3px;height:2px;background:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.8)}
.dub{grid-row:1 / span 2;grid-column:2;font-size:20px;padding:24px 28px 20px;color:var(--rec)}
.dub .ic{width:20px;height:20px}
.status{grid-column:1;font-size:15px;padding:9px 12px;letter-spacing:.06em}

/* ---- bands ---- */
.band{padding:40px 44px 44px}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.chain li{display:grid;gap:8px;align-content:start;padding:0 22px 0 0;position:relative}
.chain li::before{content:"";position:absolute;left:46px;right:12px;top:17px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-2) 0 10px,transparent 10px 16px);opacity:.55}
.chain li:last-child::before{display:none}
.chain b{font:800 24px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.chain span{font-size:16.5px;line-height:1.5;color:var(--ink-2);max-width:30ch}
.chain .ic{color:var(--ink);background:linear-gradient(180deg,#f1f2f3,#c9cdd1);border:1px solid #868b91;border-radius:50%;padding:6px;box-shadow:0 2px 0 #7d8288;position:relative;z-index:1}

.rack{display:grid;gap:7px}
.spine{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:20px;align-items:center;padding:14px 18px 13px 22px;border-radius:3px;
  background:var(--beige);border:1px solid var(--beige-3);position:relative;box-shadow:0 1px 0 rgba(255,255,255,.6), 0 2px 3px rgba(0,0,0,.12)}
.spine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:3px 0 0 3px;background:var(--c)}
.spine b{font:800 22px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.spine span{font-size:16.5px;color:var(--ink-2)}
.s-blue{--c:var(--blue)}.s-amber{--c:var(--amber)}.s-red{--c:var(--rec)}.s-green{--c:var(--green)}.s-grey{--c:var(--steel)}.s-ink{--c:var(--ink)}
.honest{margin-top:20px;font-size:16.5px;color:var(--ink-2);max-width:none}

.split{display:grid;grid-template-columns:6fr 5fr;gap:44px;padding:48px 44px;align-items:center}
.split-copy p{font-size:18.5px}
.meterpanel{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:linear-gradient(180deg,#2b2b2b,#1d1d1d);padding:20px;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.readout .engr{color:#e9e3d0;text-shadow:none;display:block;margin-bottom:7px}
.lcd.big{font-size:30px;padding:12px 14px;white-space:nowrap}
.lcd.big .dim{opacity:.5}
.caption{grid-column:1/-1;color:#cfc8b2;font-size:14px;margin:2px 0 0}

.private{grid-template-columns:4fr 7fr}
.uploadswitch{display:grid;justify-items:center;gap:10px}
.bigtoggle{display:grid;grid-template-columns:1fr 1fr;width:220px;border-radius:6px;padding:5px;background:var(--lcd);box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.bigtoggle .pos{font:800 26px/1 var(--display);letter-spacing:.12em;text-align:center;padding:16px 0 13px;color:#666;border-radius:4px}
.bigtoggle .pos.on{background:linear-gradient(180deg,#f3f4f5,#c4c8cd);color:var(--ink);box-shadow:inset 0 1px 0 #fff, 0 2px 0 #555}

.support{padding:52px 44px;text-align:center;background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.025) 1px 2px, rgba(255,255,255,0) 2px 4px),
  linear-gradient(180deg,#d9dcdf,#c3c8cd)}
.support .lede,.support .fine{margin-left:auto;margin-right:auto}
.tapes{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:28px 0 18px}
.cassette-btn{display:grid;gap:4px;justify-items:center;text-decoration:none;width:300px;padding:20px 18px 18px;border-radius:8px;
  background:linear-gradient(180deg,#2d2d2d,#1b1b1b);color:#f3eedd;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 4px 0 #0c0c0c, 0 8px 18px -6px rgba(0,0,0,.5);transition:transform .08s, box-shadow .08s}
.cassette-btn::before{content:"";position:absolute;left:24px;right:24px;top:12px;height:74px;border-radius:4px;background:linear-gradient(180deg,var(--beige) 0 82%,var(--amber) 82%)}
.cassette-btn.gold::before{background:linear-gradient(180deg,var(--beige) 0 82%,var(--rec) 82%)}
.cassette-btn > *{position:relative}
.c-label{font:800 13px/1 var(--display);letter-spacing:.18em;color:var(--ink);margin-top:6px}
.cassette-btn b{font:800 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:30px}
.c-sub{font-size:15px;color:#e9e3d0}
.cassette-btn:hover{transform:translateY(-2px)}
.cassette-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 #0c0c0c}

.muso{align-items:start}
.sig{font:800 34px/1 var(--display);letter-spacing:.04em;transform:rotate(-3deg);display:inline-block;margin-top:6px}
.faq details{border-top:1px solid rgba(0,0,0,.18)}
.faq details:last-child{border-bottom:1px solid rgba(0,0,0,.18)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 2px;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{font-size:17px;color:var(--ink-2);padding:0 2px 6px}

.foot{padding:22px 8px 6px;text-align:center}
.modelplate{display:inline-flex;align-items:center;gap:12px;font:700 13px/1.3 var(--display);letter-spacing:.16em;color:var(--ink-2)}
.modelplate .mark{font-size:14px;padding:6px 7px 5px}
.foot p{margin:12px auto 0;font-size:13.5px;color:#5a5546}

/* ---- narrower ---- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;padding:40px 30px}
  .hero-copy{padding-top:0}
  .keys{display:none}
  .counter{margin-left:auto}
}
@media (max-width:820px){
  .surround{padding:10px 10px 20px}
  .head{padding:14px 18px 14px 22px;gap:12px}
  .word{font-size:28px}
  .model{display:none}
  .counter{min-width:0;font-size:17px;padding:8px 10px}
  .counter .dim{display:none}
  .hero{padding:30px 18px 22px;gap:26px}
  .deck{padding:10px}
  .deck-row{grid-template-columns:1fr}
  .meters{display:none}
  .paper,.screen{height:250px}
  .paper pre,.screen pre{font-size:10.8px}
  .transport{grid-template-columns:1fr}
  .dub{grid-row:auto;grid-column:auto;justify-content:center}
  .band,.split,.support{padding:32px 20px}
  .chain{grid-template-columns:1fr;gap:22px}
  .chain li{grid-template-columns:auto 1fr;column-gap:14px;padding:0}
  .chain li .ic{grid-row:span 2}
  .chain li::before{display:none}
  .chain b{margin-top:4px}
  .spine{grid-template-columns:1fr;gap:6px}
  .split,.private{grid-template-columns:1fr;gap:26px}
  .meterpanel{grid-template-columns:1fr}
  .lede{font-size:18px}
  body{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deck.running .reel,.screen pre .cur{animation:none}
}