@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap');
:root { color-scheme: dark; --ink:#1c1a14; --paper:#e8d8a9; --amber:#ffb000; --rust:#bf4c27; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:#14120e radial-gradient(circle at 50% 0,#40331e,transparent 45%); color:var(--paper); font:16px 'IBM Plex Mono',monospace; }
main { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:42px 0 64px; }.eyebrow { color:var(--amber); font-size:.76rem; letter-spacing:.08em; }h1 { font:700 clamp(2.4rem,8vw,4.6rem) 'Space Grotesk',sans-serif; letter-spacing:-.06em; margin:.15em 0; }.lede { line-height:1.65; max-width:650px; }
.machine { margin-top:28px; padding:22px; border:2px solid #a07c38; background:#262119; box-shadow:9px 9px 0 #090806; }label { display:block; font-weight:600; margin-bottom:8px; }label span { color:#bba97f; font-weight:400; font-size:.8rem; }textarea { display:block; width:100%; min-height:120px; resize:vertical; padding:12px; color:#261e0f; background:var(--paper); border:0; font:15px/1.55 'IBM Plex Mono',monospace; }.keys { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }button { cursor:pointer; padding:9px 11px; border:1px solid #d59b21; background:#443515; color:#ffe3a4; font:600 .76rem 'IBM Plex Mono',monospace; }button:hover,button:focus-visible { background:#715718; outline:2px solid white; outline-offset:2px; }#run { width:100%; padding:14px; background:var(--rust); color:white; font-size:1rem; }kbd { border:1px solid #ffb98f; padding:1px 3px; }.reader { overflow:hidden; padding:14px 10px; background:#0e0d0a; border:1px solid #706044; }.card { display:flex; width:max-content; min-height:98px; padding:8px; gap:3px; background:var(--paper); }.column { display:grid; grid-template-rows:repeat(8,8px); gap:2px; width:8px; }.column b { display:block; border-radius:50%; }.column .hole { background:var(--ink); }output { display:block; white-space:pre-wrap; min-height:78px; margin-top:14px; padding:12px; border-left:4px solid var(--amber); background:#11100d; line-height:1.5; }.error { border-color:#ff5c39; color:#ffc1ae; }.ok { border-color:#79d27a; }details { margin-top:24px; line-height:1.6; }summary { cursor:pointer; color:var(--amber); }code { color:#ffe5a4; }@media (max-width:500px) { main{padding-top:25px}.machine{padding:14px}.column{grid-template-rows:repeat(8,6px);width:6px;gap:1px} }