@import "https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;600&family=Roboto+Slab:wght@600;800&family=Space+Mono:wght@400;700&display=swap";
:root{--steel:#5c6261;--dark:#1d2020;--bone:#e8dfc9;--ink:#171515;--magenta:#ed2f75;--brass:#b58b43;--line:#898a82}*{box-sizing:border-box}body{color:var(--bone);background:#343838 radial-gradient(#626867 1px,#0000 1px) 0 0/12px 12px;margin:0;font-family:Public Sans,sans-serif}button,input,textarea,select{font:inherit}button{background:var(--magenta);color:#fff;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink);border:0;padding:.8rem 1rem;font:700 .7rem Space Mono}button:hover{background:var(--brass)}button:disabled{opacity:.35}.outline{border:1px solid var(--bone);box-shadow:none;background:0 0}main{min-height:100vh;padding:18px}header{border:2px solid var(--ink);background:var(--steel);box-shadow:8px 8px 0 var(--ink);justify-content:space-between;align-items:center;padding:18px 24px;display:flex}header>div:last-child{align-items:center;gap:12px;display:flex}h1{text-shadow:3px 3px 0 var(--ink);margin:8px 0;font:800 clamp(2.7rem,6vw,6rem)/.73 Roboto Slab}h1 i{color:var(--magenta);font-style:normal}small,.ticket b,label{letter-spacing:.08em;text-transform:uppercase;font:700 .62rem Space Mono}.bench{border:2px solid var(--ink);min-height:650px;box-shadow:8px 8px 0 var(--ink);grid-template-columns:220px minmax(540px,1fr) 330px;margin-top:24px;display:grid;position:relative}.ticket{border-right:2px solid var(--ink);background:#4b5150;padding:22px}label{margin:18px 0;display:block}input,textarea,select{background:var(--bone);width:100%;color:var(--ink);border:2px solid var(--ink);text-transform:none;letter-spacing:0;margin-top:6px;padding:.7rem;font-family:Public Sans;display:block}textarea{resize:vertical;min-height:92px}.ticket button{width:100%;margin:5px 0}.ticket dl{margin-top:35px}.ticket dt{color:#c5bda9;font:700 .58rem Space Mono}.ticket dd{overflow-wrap:anywhere;margin:3px 0 18px}.machine{background:#747a78;padding:90px 24px 55px;position:relative}.roller{border:3px solid var(--ink);background:linear-gradient(#202323 0 46%,var(--magenta) 48% 58%,#202323 60%);border-radius:24px;place-items:center;height:42px;font:700 .62rem Space Mono;display:grid;position:absolute;top:25px;left:5%;right:5%;overflow:hidden;box-shadow:0 8px #4a4e4d}.roller i{background:#fff3;width:20%;height:100%;position:absolute;left:-20%;transform:skew(-20deg)}.roller.moving i{animation:1s linear infinite rollerPass}.stick{background:#2a2e2d;border:4px ridge #999;gap:5px;min-height:250px;padding:14px;display:flex;overflow:auto}.slug{min-width:115px;color:var(--ink);text-align:left;background:linear-gradient(90deg,#686e6c,#9a9f9c,#5b605e);border:2px solid #292c2b;flex-direction:column;flex:1;justify-content:space-between;padding:12px 8px;display:flex;box-shadow:inset 0 0 0 3px #777,3px 3px #181a19}.slug:hover,.slug.selected{background:var(--brass);transform:translateY(-8px)}.slug.locked{background:#babcb5;animation:.45s both slugDrop}.slug strong{writing-mode:vertical-rl;max-height:150px;font:800 1.05rem Roboto Slab;overflow:hidden}.slug span,.slug small{font:700 .56rem Space Mono}.casting{border:2px solid var(--ink);background:#555b59;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding:18px;display:grid}.casting button{width:100%}.crackTray{align-items:center;gap:10px;font:700 .58rem Space Mono;display:flex;position:absolute;bottom:14px;left:24px}.crackTray i{border:1px solid var(--ink);clip-path:polygon(0 0,100% 0,75% 40%,100% 100%,0 100%,26% 55%);background:#444;width:22px;height:18px}.crackTray i.broken{background:var(--magenta);animation:.4s both typeCrack}.proof{background:var(--bone);color:var(--ink);border-left:2px solid var(--ink);padding:28px 24px;position:relative;box-shadow:inset 12px 0 20px #0000001f}.proof h2{border-bottom:6px double var(--ink);margin:10px 0 28px;font:800 3rem Roboto Slab}.proof p{border-bottom:1px solid var(--line);padding:13px 0;font:600 1rem Roboto Slab;animation:.55s both proofPull}.proof p b{color:var(--magenta);margin-right:12px}.proof em{color:#6e665a}.proof footer{font:700 .6rem Space Mono;position:absolute;bottom:25px}.reg{border:1px solid var(--magenta);border-radius:50%;width:18px;height:18px;position:absolute}.reg:after,.reg:before{content:"";background:var(--magenta);position:absolute}.reg:after{width:24px;height:1px;top:8px;left:-4px}.reg:before{width:1px;height:24px;top:-4px;left:8px}.reg.tl{top:12px;left:12px}.reg.tr{animation:3s infinite regJitter;top:12px;right:12px}.gauge{background:var(--brass);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);grid-template-columns:220px 1fr 1fr;margin-top:14px;padding:12px 20px;font:700 .65rem Space Mono;display:grid}.gauge code{text-align:right}.gauge.active{animation:1.1s infinite inkSpread}.setup{z-index:10;background:var(--bone);color:var(--ink);border:4px solid var(--ink);box-shadow:15px 15px 0 var(--magenta);grid-template-columns:1fr 1fr;gap:12px;padding:28px;animation:.5s both proofPull;display:grid;position:absolute;inset:25px 12%}.setup label{margin:5px}.setup label:first-of-type{grid-column:1/-1}.setup .close{background:var(--ink);position:absolute;top:0;right:0}.setup button:last-child{grid-column:1/-1}footer{justify-content:space-between;padding:16px 4px;font-size:.72rem;display:flex}code{font-family:Space Mono}@keyframes rollerPass{to{left:120%}}@keyframes slugDrop{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:none}}@keyframes inkSpread{50%{background:var(--magenta);color:#fff}}@keyframes typeCrack{50%{transform:rotate(8deg)scale(1.2)}}@keyframes proofPull{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}@keyframes regJitter{50%{transform:translate(2px,-1px)}}@media (max-width:1050px){.bench{grid-template-columns:180px 1fr}.proof{border-left:0;border-top:2px solid var(--ink);grid-column:1/-1;min-height:350px}}@media (max-width:680px){main{padding:10px}header>div:last-child code{display:none}.bench{display:block}.ticket{border-right:0}.machine{padding:90px 12px 55px}.casting{display:block}.proof{min-height:380px}.setup{display:block;inset:8px}.gauge{grid-template-columns:1fr}.gauge code{text-align:left}footer{display:block}}