/* COPY OF A COPY — office photocopier: warm grey body, toner black, paper white, a green scan light. */
:root{--bg:#d9d6cc;--bg2:#cfcbbf;--body:#2b2a27;--paper:#f6f4ee;--toner:#151513;--mute:#6b675e;--scan:#5cff8a;--red:#d8322a;
  --fd:'Archivo Black',sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;--ft:'Special Elite',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--toner);font:15px/1.55 var(--fm);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:0;background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.2px);background-size:5px 5px;mix-blend-mode:multiply}
a{color:inherit}
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 34px;border-bottom:2px solid var(--toner)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none}.logo b{font:400 22px var(--fd);letter-spacing:.02em}.logo i{font:400 15px var(--ft)}
.logo b:last-child{filter:blur(.6px);opacity:.75}
.topr{display:flex;align-items:center;gap:10px;font:600 11px var(--fm);letter-spacing:.14em;text-transform:uppercase}
.led{width:10px;height:10px;border-radius:50%;background:#888;box-shadow:inset 0 0 0 1px var(--toner)}.led.on{background:var(--scan);box-shadow:0 0 10px var(--scan),inset 0 0 0 1px var(--toner)}
.xl{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--toner);color:var(--paper);margin-left:6px}

.hero{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;max-width:1360px;margin:0 auto;padding:40px 34px 60px;align-items:start}
.kick{font:700 12px var(--fm);letter-spacing:.24em;margin:0 0 10px}
.hl h1{font:400 clamp(70px,9vw,132px)/.84 var(--fd);margin:0 0 20px;letter-spacing:-.01em}
.hl h1 span{font:400 .42em/1.1 var(--ft);letter-spacing:.05em;display:inline-block;transform:rotate(-2deg);margin:.2em 0 .1em}
.hl h1 br+span+br+*{}
.lede{font-size:17px;max-width:520px;margin:0 0 22px}
.ca{display:flex;align-items:stretch;border:2px solid var(--toner);background:var(--paper);box-shadow:5px 5px 0 var(--toner);max-width:620px}
.ca span{background:var(--toner);color:var(--paper);font:700 11px var(--fm);letter-spacing:.14em;padding:12px;display:flex;align-items:center;white-space:nowrap}
.ca code{flex:1;padding:12px;font:600 clamp(11px,1.15vw,14px) var(--fm);word-break:break-all;display:flex;align-items:center}
.ca button{border:0;border-left:2px solid var(--toner);background:var(--scan);font:700 13px var(--fm);letter-spacing:.12em;padding:0 16px;cursor:pointer}
.links{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 18px;border:2px solid var(--toner);background:var(--paper);text-decoration:none;font:700 13px var(--fm);letter-spacing:.14em;box-shadow:4px 4px 0 var(--toner);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--toner)}.btn.pri{background:var(--toner);color:var(--paper)}
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:22px;margin:30px 0 0;justify-content:start}
.stats dt{font:700 10px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}.stats dd{margin:4px 0 0;font:400 30px var(--fd)}

/* the machine */
.machine{position:relative}
.copier{margin:0;background:var(--body);color:#d9d6cc;font:600 clamp(8px,1.02vw,14px)/1.3 var(--fm);padding:18px 18px 8px;text-align:center;border-radius:6px;box-shadow:0 20px 40px rgba(0,0,0,.25);overflow:hidden;white-space:pre}
.copier b{color:var(--scan);font-weight:700}
.scan{position:absolute;left:8%;right:8%;top:30%;height:6px;background:var(--scan);box-shadow:0 0 22px 8px rgba(92,255,138,.55);opacity:0;border-radius:3px}
.scan.go{animation:scan 1.1s ease-in-out}
@keyframes scan{0%{opacity:0;top:28%}10%{opacity:1}90%{opacity:1;top:44%}100%{opacity:0;top:44%}}
.tray{position:relative;height:300px;margin:-6px 9% 0;overflow:visible}
.sheet{background:var(--paper);border:1px solid #b9b4a6;box-shadow:0 2px 0 #b9b4a6,0 12px 24px rgba(0,0,0,.18);padding:14px 16px;font:600 10px/1.15 var(--fm);color:var(--toner);position:relative;overflow:hidden}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(0,0,0,var(--grain,0)) 1px,transparent 1.4px);background-size:4px 4px}
.sheet .hd{display:flex;justify-content:space-between;font:700 10px var(--fm);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px dashed #999;padding-bottom:6px;margin-bottom:8px}
.sheet .gen{background:var(--toner);color:var(--paper);padding:2px 6px}
.sheet pre{margin:0;font:700 9px/1 var(--fm);letter-spacing:0;white-space:pre;overflow:hidden}
.sheet .nm{margin-top:8px;font:400 13px var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .ft{display:flex;justify-content:space-between;margin-top:6px;font:600 9.5px var(--fm);color:var(--mute)}
.sheet.out{position:absolute;left:0;right:0;top:0;padding:18px 22px;transform:translateY(-70%);opacity:0}
.sheet.out.print{animation:print 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes print{0%{transform:translateY(-75%);opacity:1}100%{transform:translateY(0) rotate(-1.2deg);opacity:1}}

.block{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:60px 34px;border-top:2px solid var(--toner)}
.bh{max-width:760px;margin-bottom:24px}.bh h2{font:400 clamp(30px,3.6vw,48px)/1 var(--fd);margin:0 0 10px}.bh p{margin:0;color:#3d3a34}
.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{border:2px solid var(--toner);background:var(--paper);font:700 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;cursor:pointer}.tabs button.on{background:var(--toner);color:var(--paper)}
.board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.board li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--paper);border:2px solid var(--toner);padding:12px 14px;box-shadow:4px 4px 0 var(--toner)}
.board .n{font:400 42px/1 var(--fd);min-width:58px;text-align:center}.board .n small{display:block;font:700 9px var(--fm);letter-spacing:.12em}
.board .t{min-width:0}.board .t b{display:block;font:400 22px var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board .t span{font:600 11px var(--fm);color:var(--mute)}
.board .t a{font:700 10px var(--fm);letter-spacing:.1em}
.empty{list-style:none;padding:20px;border:2px dashed var(--toner);background:transparent!important;box-shadow:none!important;display:block!important}
.pile{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.pile .sheet{cursor:pointer;transition:transform .15s}.pile .sheet:hover{transform:rotate(0) scale(1.03)!important}
.orig{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.otext h2{font:400 clamp(30px,3.6vw,48px)/1 var(--fd);margin:0 0 14px}.otext p{font-size:16px;max-width:540px}.ours b{font:400 26px var(--fd)}
.sheet.big{padding:22px 24px;transform:rotate(1.5deg)}.sheet.big pre{font-size:13px}
.stamp{position:absolute;right:18px;bottom:36px;border:4px solid var(--red);color:var(--red);font:400 26px var(--fd);padding:4px 12px;transform:rotate(-12deg);opacity:.85}
footer{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px 34px;border-top:2px solid var(--toner);font:600 11px var(--fm);letter-spacing:.1em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--toner);color:var(--scan);font:700 12px var(--fm);letter-spacing:.14em;padding:12px 18px;opacity:0;transition:.2s;z-index:50;pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sheet.out{opacity:1;transform:none}}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.orig{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,auto)}}
@media (max-width:600px){.top,.hero,.block,footer{padding-left:16px;padding-right:16px}.ca{flex-wrap:wrap}.ca span{width:100%}.tray{height:260px}}

.sheet.out pre{font-size:15px}.sheet.out .nm{font-size:17px}