@font-face { font-family: ImpactLocal; src: local("Impact"); }
:root { --black:#10100f; --paper:#ddd6c8; --acid:#d8ff36; --rust:#db4b2f; --line:#58564f; color-scheme:dark; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--black); color:var(--paper); font-family:Arial,Helvetica,sans-serif; }
body { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; overflow-x:hidden; }
header { display:grid; grid-template-columns:minmax(260px,42vw) 1fr; align-items:end; padding:18px 24px 12px; border-bottom:1px solid var(--line); position:relative; }
.issue { position:absolute; top:18px; right:24px; font:11px ui-monospace,monospace; letter-spacing:.16em; }
h1 { margin:0; color:var(--paper); font:clamp(72px,11vw,166px)/.72 ImpactLocal,"Arial Narrow",sans-serif; letter-spacing:-.045em; }
header p { margin:0 0 4px; max-width:25ch; font:700 clamp(18px,2vw,31px)/1.02 Arial,sans-serif; text-transform:uppercase; }
main { min-height:0; display:grid; grid-template-rows:minmax(260px,1fr) auto; }
.tape { position:relative; min-height:0; background:var(--paper); color:var(--black); border-bottom:8px solid var(--rust); overflow:hidden; }
.tape::before,.tape::after { content:""; position:absolute; top:0; bottom:0; width:14px; z-index:2; background:repeating-linear-gradient(0deg,var(--black) 0 8px,transparent 8px 18px); }
.tape::before { left:12px; } .tape::after { right:12px; }
.tape-label { position:absolute; inset:18px 40px auto; z-index:3; display:flex; justify-content:space-between; font:700 12px ui-monospace,monospace; letter-spacing:.1em; }
canvas { width:100%; height:100%; display:block; min-height:250px; }
.transport { position:absolute; left:40px; right:40px; bottom:16px; display:flex; gap:8px; z-index:4; }
button,.load { min-height:44px; border:2px solid currentColor; border-radius:0; padding:10px 15px; background:transparent; color:inherit; font:800 12px ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; }
button:hover,.load:hover,button:focus-visible,.load:focus-within { background:var(--black); color:var(--paper); outline:3px solid var(--rust); outline-offset:2px; }
.load { display:inline-flex; align-items:center; }
.load input { position:absolute; opacity:0; width:1px; height:1px; }
.cuts { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.cuts label { min-width:0; display:grid; grid-template-columns:42px 1fr; gap:0 8px; padding:13px 18px 16px; border-right:1px solid var(--line); }
.cuts label:last-child { border-right:0; }
.cuts b { grid-row:1/3; color:var(--rust); font:76px/.75 ImpactLocal,sans-serif; opacity:.75; }
.cuts span { display:flex; justify-content:space-between; font:700 12px ui-monospace,monospace; }
output { color:var(--acid); }
input[type=range] { width:100%; min-height:44px; accent-color:var(--acid); cursor:ew-resize; }
footer { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; padding:12px 24px; }
.export { background:var(--acid); color:var(--black); border-color:var(--acid); font-size:14px; }
.export:hover,.export:focus-visible { background:var(--paper); color:var(--black); }
footer p { margin:0; color:#aaa69d; font:11px ui-monospace,monospace; text-transform:uppercase; }
.tape.playing canvas { animation:pressure .5s ease-in-out infinite alternate; }
@keyframes pressure { to { opacity:.78; } }
@media (max-width:640px) {
  body { min-height:100svh; display:block; }
  header { grid-template-columns:1fr; min-height:170px; padding:16px; }
  h1 { font-size:76px; line-height:.72; }
  header p { position:absolute; right:16px; bottom:14px; width:43%; font-size:14px; }
  .issue { top:12px; right:16px; font-size:9px; }
  main { display:block; }
  .tape { height:330px; border-bottom-width:6px; }
  .tape-label { inset:16px 30px auto; font-size:9px; }
  .transport { left:30px; right:30px; bottom:12px; display:grid; grid-template-columns:1fr 1fr; }
  .load { grid-column:1/-1; justify-content:center; }
  .cuts { display:block; }
  .cuts label { border-right:0; border-bottom:1px solid var(--line); padding:12px 16px; grid-template-columns:48px 1fr; }
  .cuts b { font-size:62px; }
  footer { grid-template-columns:1fr; padding:14px 16px 20px; }
  .export { width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }