/* M. Rathod · Works — factory-floor theme */
:root{
  --ink:#1B1B1F; --floor:#E4E8E1; --floor-2:#D3D9CF; --plate:#C9CFC6; --paper:#FFFFFF;
  --orange:#F2542D; --yellow:#F5B700; --blue:#2D5BFF; --teal:#0FA3A3; --green:#3DDC84; --crate:#C98A4B;
  --red:#C23A17; --screen:#B8F5C8; --muted:#3D403B;
  --display:'Bowlby One',Impact,'Arial Black',sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--floor);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink)} a:hover{color:var(--red)}
img,svg,video{max-width:100%;display:block}
button,input,textarea{font:inherit}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;line-height:1;margin:0}
h1{font-size:clamp(44px,7.4vw,112px);line-height:.95}
h2{font-size:clamp(32px,4vw,44px)}
h3{font-size:clamp(22px,2.6vw,32px);line-height:1.05}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
@media(min-width:720px){.wrap{padding-left:32px;padding-right:32px}}
.stripes{height:16px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 18px,var(--ink) 18px 36px);animation:stripes 2.4s linear infinite}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.hdr{padding:20px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.logo{text-decoration:none;display:inline-block;background:var(--ink);color:var(--yellow);font-family:var(--display);font-size:20px;letter-spacing:.04em;padding:10px 16px;border-radius:8px;transform:rotate(-1.5deg)}
.logo:hover{color:#fff}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;font-weight:700}
.nav a{text-decoration:none}
.nav a[aria-current]{border-bottom:3px solid var(--orange)}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;background:var(--paper);border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;font-weight:700}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--ink);display:inline-block;animation:blink 2s ease-in-out infinite}

/* buttons & tags */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--ink);font-weight:700;text-decoration:none;cursor:pointer;background:var(--paper);color:var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.y{background:var(--yellow)} .btn.o{background:var(--orange)} .btn.big{font-family:var(--display);font-size:22px;min-height:60px}
.tag{display:inline-block;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;font-weight:700;font-size:14px}
.tag.y{background:var(--yellow)} .tag.o{background:var(--orange)} .tag.b{background:var(--blue);color:#fff} .tag.t{background:var(--teal)}
.label{align-self:flex-start;background:var(--ink);color:#fff;font-family:var(--display);font-size:14px;letter-spacing:.12em;padding:3px 10px;border-radius:3px}

/* cards */
.card{background:var(--paper);border:4px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink);padding:24px}
.plate{position:relative;background:var(--plate);border:4px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink);padding:28px 32px;display:flex;flex-direction:column;gap:14px;text-decoration:none}
.plate:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.plate::before,.plate::after,.plate .rv1,.plate .rv2{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.plate::before{top:10px;left:10px}.plate::after{top:10px;right:10px}.plate .rv1{bottom:10px;left:10px}.plate .rv2{bottom:10px;right:10px}
.spec{display:flex;flex-direction:column;gap:8px;font-size:17px}
.spec>div{display:flex;gap:12px;border-top:2px solid var(--ink);padding-top:8px}
.spec b{flex:0 0 76px}
.grid{display:flex;flex-wrap:wrap;gap:24px} .grid>*{flex:1 1 300px;min-width:0}
.grid.tight{gap:16px}

/* dark band */
.dark{background:var(--ink);color:#F2F2EE} .dark a{color:#F2F2EE} .dark a:hover{color:var(--yellow)} .dark h2{color:var(--yellow)}
.band{padding:72px 0}
footer{background:var(--ink);color:#F2F2EE;font-size:15px} footer .wrap{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* hero */
.hero{padding:40px 0 56px;display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.hero>div:first-child{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero p.lede{font-size:clamp(19px,2vw,23px);line-height:1.45;max-width:720px}
.gears{flex:1 1 260px;min-width:0;position:relative;height:280px}
.gears svg{position:absolute}
.gear-a{left:4%;top:4%;width:200px;height:200px;animation:spin 14s linear infinite}
.gear-b{left:52%;top:46%;width:140px;height:140px;animation:spinback 9.8s linear infinite}
@media(max-width:720px){.gears{height:200px}.gear-a{width:140px;height:140px}.gear-b{width:100px;height:100px}}

/* fast lane */
.fast{padding:24px 0;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.fast ul{flex:1 1 480px;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 28px;font-weight:700}
.fast .links{display:flex;flex-wrap:wrap;gap:10px}
.fast .links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:3px solid #F2F2EE;border-radius:8px;font-weight:700;text-decoration:none}
.fast .links a.y{background:var(--yellow);color:var(--ink)}

/* the floor */
.floor{background:var(--floor-2)}
.floor .wrap{padding-top:56px;padding-bottom:64px;display:flex;flex-direction:column;gap:28px}
.jobs{display:flex;flex-wrap:wrap;gap:12px}
.job{flex:1 1 200px;min-height:64px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px;background:var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-align:left}
.job[aria-pressed=true]{background:var(--ink);color:#fff}
.job .t{font-family:var(--display);font-size:20px;line-height:1.1}
.job .s{font-size:15px}
.slip{flex:1 1 480px;min-width:0;background:var(--paper);border:3px dashed var(--ink);border-radius:10px;padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.slip .k{font-size:14px;font-weight:700;letter-spacing:.08em}
.slip .v{font-size:21px}
.slip input{min-height:44px;padding:8px 12px;border:2px solid var(--ink);border-radius:6px;background:#F4F6F2;margin-top:8px}
.line-wrap{overflow-x:auto;padding-bottom:8px}
.line{position:relative;min-width:760px;padding-top:40px}
.stations{display:flex}
.st{flex:1 1 0;display:flex;flex-direction:column;align-items:center}
.st .top{display:flex;align-items:flex-end;gap:46px;height:30px;position:relative}
.st .lamp2{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);background:#6E6E76;transition:background .3s}
.st.working .lamp2{background:#FFE45C;box-shadow:0 0 0 7px rgba(255,228,92,.55)}
.st.done .lamp2{background:var(--green)}
.st .pist{position:relative;width:16px;height:30px;display:flex;align-items:flex-end}
.st .pist i{width:16px;height:8px;background:var(--ink);border-radius:3px 3px 0 0}
.st.working .pist i{animation:piston .36s ease-in-out infinite}
.st .pist b{position:absolute;left:-4px;top:-26px;width:22px;height:22px;border-radius:50%;background:#fff;opacity:0}
.st.working .pist b{animation:steam .9s ease-out infinite}
.st .body{position:relative;width:168px;border:4px solid var(--ink);border-radius:16px 16px 6px 6px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 12px 18px}
.st.working .body{animation:shake .16s linear infinite}
.st .scr{width:100%;background:var(--ink);border-radius:6px;padding:10px 6px;text-align:center;color:var(--screen);font-weight:700;font-size:17px;line-height:1.2}
.st .stat{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;letter-spacing:.06em}
.st .gear{position:absolute;right:-16px;bottom:-16px;width:40px;height:40px}
.st.working .gear{animation:spin .9s linear infinite}
.st .legs{display:flex;gap:96px}.st .legs i{width:8px;height:76px;background:var(--ink)}
.crate{position:absolute;bottom:38px;left:0;opacity:0;transform:translateX(-50%);transition:left .9s cubic-bezier(.6,0,.3,1),opacity .3s;width:84px;height:62px;background:var(--crate);border:3px solid var(--ink);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px}
.belt{height:38px;border:4px solid var(--ink);border-radius:999px;background:repeating-linear-gradient(90deg,#2A2A30 0 24px,#44444C 24px 28px)}
.running .belt{animation:belt .45s linear infinite}
.log{background:var(--ink);color:var(--screen);border-radius:10px;padding:14px 18px;font-family:var(--mono);font-size:15px;line-height:1.75;min-height:64px}
.log .dim{color:#8E9B8A}
.tray{min-height:140px;display:flex;flex-direction:column;gap:12px}
.tray .k{font-size:14px;font-weight:700;letter-spacing:.08em}
.tray .out{display:flex;flex-direction:column;gap:8px;animation:print .9s steps(9,end) both}
.tray .out .big{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);line-height:1.15}
.bars{display:flex;flex-direction:column;gap:8px}.bars div{display:flex;align-items:center;gap:10px}.bars span:first-child{width:90px;font-size:15px}.bars span:last-child{height:22px;background:var(--blue);border:2px solid var(--ink);border-radius:4px}
code.blk{display:block;background:var(--ink);color:var(--screen);border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.6;font-family:var(--mono);white-space:pre}

/* machines list */
.machines{padding:72px 0;display:flex;flex-direction:column;gap:32px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.proof-tags{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:700}
.proof-tags span{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:1px 10px}

/* shift log list */
.loglist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.loglist li{border-top:2px solid #4A4A52}.loglist li:last-child{border-bottom:2px solid #4A4A52}
.loglist a{text-decoration:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding:22px 0}
.loglist .num{flex:0 0 auto;background:var(--yellow);color:var(--ink);border-radius:4px;padding:2px 10px;font-weight:700;font-size:14px}
.loglist .ttl{flex:1 1 420px;font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.25}
.loglist .meta{font-size:15px;color:#C9CBC6}

/* clock in */
.clock{padding:80px 0 96px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.clock>div{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px}
.timecard{flex:1 1 420px;min-width:0;background:var(--paper);border:4px solid var(--ink);border-radius:10px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;display:flex;flex-direction:column}
.timecard .head{background:var(--orange);border-bottom:4px solid var(--ink);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:26px}
.timecard .head i{width:22px;height:22px;border-radius:50%;background:var(--floor);border:3px solid var(--ink)}
.timecard .fields{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px}
.timecard label{font-weight:700;font-size:15px;letter-spacing:.06em;display:flex;flex-direction:column;gap:6px}
.timecard input,.timecard textarea{min-height:48px;padding:10px 12px;border:none;border-bottom:3px solid var(--ink);background:#F4F6F2;font-weight:400}
.stamp{align-self:flex-start;padding:8px 18px;border:4px solid var(--red);border-radius:6px;color:var(--red);font-family:var(--display);font-size:26px;transform:rotate(-4deg);animation:print .35s ease-out both}

/* machine page */
.nameplate{position:relative;background:var(--plate);border:5px solid var(--ink);border-radius:16px;box-shadow:10px 10px 0 var(--ink);padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.nameplate>div:first-child{flex:3 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.nameplate .model{align-self:flex-start;background:var(--ink);color:#fff;font-family:var(--display);font-size:16px;letter-spacing:.12em;padding:4px 12px;border-radius:3px;transform:rotate(-1deg)}
.nameplate .tagline{font-size:clamp(20px,2.4vw,26px);line-height:1.35;font-weight:700}
.machine-art{flex:1 1 240px;display:flex;justify-content:center;animation:hum 1.6s ease-in-out infinite}
.specs{display:flex;flex-wrap:wrap;gap:16px;padding:40px 0 56px}
.specs>div{flex:1 1 240px;background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.specs .v{font-size:19px;font-weight:700}
.manual{background:var(--paper)} .manual .wrap{padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;gap:40px}
.manual .sec-head{border-bottom:4px solid var(--ink);padding-bottom:16px}
.manual .cols{display:flex;flex-wrap:wrap;gap:40px}.manual .cols>div{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:10px}
.manual .para{font-family:var(--display);font-size:40px;line-height:1;color:var(--orange)}
.manual h3{font-family:var(--body);font-weight:700;font-size:24px}
.schematic{min-width:900px;display:flex;align-items:stretch;gap:10px}
.schematic>div{flex:1 1 0;border:4px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.schematic .arr{flex:0 0 auto;border:none;box-shadow:none;background:none;padding:0;justify-content:center}
.schematic .n{font-weight:700;font-size:14px}.schematic .t{font-family:var(--display);font-size:20px}.schematic .d{font-size:15px;line-height:1.45}
.loop{min-width:900px;margin-top:14px;display:flex;justify-content:center}
.loop div{width:62%;border:4px dashed var(--ink);border-top:none;border-radius:0 0 18px 18px;padding:14px 18px 12px;text-align:center;font-weight:700;font-size:16px}
.safety{display:flex;flex-wrap:wrap;gap:20px}
.safety>div{flex:1 1 240px;background:var(--yellow);color:var(--ink);border:4px solid var(--ink);outline:4px solid var(--yellow);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:10px}
.safety .t{font-family:var(--display);font-size:20px;line-height:1.15}
.gauges{display:flex;flex-wrap:wrap;gap:20px}
.gauges>div{flex:1 1 240px;background:var(--paper);border:4px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.gauges svg{width:100%;max-width:200px}
.gauges line{transform-origin:60px 62px;animation:needle 3s ease-in-out infinite}
.gauges .t{font-family:var(--display);font-size:20px}
.bin{background-color:#8B9488;border:4px solid var(--ink);border-radius:8px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 200px}
.bin span{width:100%;background:#fff;border:2px solid var(--ink);padding:6px 10px;text-align:center;font-weight:700;font-size:16px}
.bin i{width:50px;height:12px;background:var(--ink);border-radius:0 0 8px 8px}

/* post */
.post-head{max-width:1000px;margin:0 auto;padding:32px 24px 40px}
.post-head .row{display:flex;flex-wrap:wrap;gap:32px;align-items:center;margin-top:16px}
.post-head .row>div{flex:3 1 480px;min-width:0;display:flex;flex-direction:column;gap:16px}
.post-head h1{font-size:clamp(36px,5.4vw,72px)}
.post-head .dek{font-size:clamp(19px,2vw,23px);line-height:1.5}
.rubber{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:150px;height:150px;border:6px solid var(--red);border-radius:50%;color:var(--red);font-family:var(--display);font-size:32px;line-height:.95;text-align:center;animation:stamp .6s cubic-bezier(.3,1.4,.5,1) .2s both}
.sheet{max-width:860px;margin:0 auto 72px;padding:0 16px}
.sheet>div{background:var(--paper);border:4px solid var(--ink);border-radius:10px;box-shadow:10px 10px 0 var(--ink);padding:clamp(28px,5vw,56px) clamp(20px,6vw,72px);font-size:20px;line-height:1.7}
.prose>*+*{margin-top:22px}
.prose h2{font-size:clamp(26px,3vw,34px);margin-top:40px}
.prose h3{font-family:var(--body);font-weight:700;font-size:24px;margin-top:32px}
.prose ul,.prose ol{padding-left:26px}
.prose li+li{margin-top:6px}
.prose blockquote{margin:0;position:relative;background:#FFE45C;border:3px solid var(--ink);padding:24px 28px 20px;transform:rotate(-1.2deg);box-shadow:5px 5px 0 var(--ink);font-size:19px;line-height:1.55}
.prose blockquote::before{content:"FLOOR NOTE";display:block;font-family:var(--display);font-size:18px;letter-spacing:.04em;margin-bottom:6px}
.prose pre{margin:0;background:var(--ink);color:var(--screen);border-radius:12px;padding:20px 22px;overflow-x:auto;font-family:var(--mono);font-size:15px;line-height:1.75}
.prose code{font-family:var(--mono);font-size:.92em;background:#EEF1EB;padding:1px 6px;border-radius:4px}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose img{border:3px solid var(--ink);border-radius:8px}
.prose a{color:var(--red);font-weight:700}
.signoff{margin-top:32px;border:4px solid var(--ink);border-radius:10px;overflow:hidden}
.signoff .head{background:var(--orange);border-bottom:4px solid var(--ink);padding:10px 20px;font-family:var(--display);font-size:18px}
.signoff .body{padding:20px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:18px;line-height:1.5}
.signoff .av{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px}
.prevnext{max-width:1000px;margin:0 auto;padding:0 24px 88px;display:flex;flex-wrap:wrap;gap:20px}
.prevnext a{flex:1 1 300px;text-decoration:none;background:var(--paper);border:4px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);padding:22px;display:flex;flex-direction:column;gap:6px}
.prevnext a:last-child{text-align:right}
.prevnext .t{font-family:var(--display);font-size:22px;line-height:1.15}

/* blog index */
.clip{display:block;position:relative;background:var(--crate);border:5px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);padding:48px 20px 20px;text-decoration:none}
.clip::before{content:"";position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:160px;height:44px;background:#8B9488;border:5px solid var(--ink);border-radius:10px}
.clip>div{display:flex;flex-wrap:wrap;gap:32px;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:6px;padding:clamp(20px,4vw,40px)}
.clip .txt{flex:3 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.clip .t{font-family:var(--display);font-size:clamp(28px,4vw,48px);line-height:1.02}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters button{min-height:44px;padding:8px 16px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-weight:700;font-size:16px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.filters i{width:12px;height:12px;border-radius:3px;border:2px solid var(--ink);display:inline-block}
.entries{margin:0;padding:0;list-style:none;background:var(--paper);border:4px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.entries li{border-top:2px solid var(--ink)}.entries li:first-child{border-top:none}
.entries a{text-decoration:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:22px 24px}
.entries .num{flex:0 0 auto;min-width:92px;text-align:center;border:3px solid var(--ink);border-radius:6px;padding:4px 8px;font-family:var(--display);font-size:16px}
.entries .mid{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:4px}
.entries .ttl{font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.25}
.entries .dek{font-size:17px;color:var(--muted)}
.entries .side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:15px;color:var(--muted)}

/* office */
.badge-wrap{flex:1 1 280px;display:flex;flex-direction:column;align-items:center}
.badge{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swing 4s ease-in-out infinite}
.badge .lan{width:22px;height:70px;background:var(--blue);border:3px solid var(--ink);border-bottom:none}
.badge .clipp{width:40px;height:16px;background:#8B9488;border:3px solid var(--ink);border-radius:4px}
.badge .cardb{margin-top:-2px;width:290px;max-width:80vw;background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.badge .top{width:100%;background:var(--orange);border-bottom:4px solid var(--ink);padding:12px;text-align:center;font-family:var(--display);font-size:18px;letter-spacing:.08em}
.badge .inner{padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badge .photo{width:112px;height:112px;border-radius:12px;background:var(--floor-2);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:34px;object-fit:cover}
.badge .nm{font-family:var(--display);font-size:26px;line-height:1.1}
.badge .bar{width:200px;height:34px;margin-top:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 6px,var(--ink) 6px 7px,transparent 7px 11px,var(--ink) 11px 15px,transparent 15px 17px)}
.overlap{min-width:720px;display:flex;flex-direction:column;gap:14px}
.overlap .row{display:flex;align-items:center;gap:16px}
.overlap .row>span:first-child{flex:0 0 150px;font-weight:700}
.overlap .track{flex:1 1 auto;position:relative;height:48px;background:var(--floor);border:3px solid var(--ink);border-radius:8px}
.overlap .bar{position:absolute;top:4px;bottom:4px;border:3px solid var(--ink);border-radius:5px;display:flex;align-items:center;padding-left:10px;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden}
.board{background:#B88A5C;border:5px solid var(--ink);border-radius:14px;box-shadow:10px 10px 0 var(--ink);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:28px}
.board h2{align-self:flex-start;background:var(--ink);color:var(--yellow);font-size:32px;padding:8px 16px;border-radius:6px}
.notes{display:flex;flex-wrap:wrap;gap:24px}
.note{flex:1 1 220px;position:relative;background:#fff;border:3px solid var(--ink);padding:26px 20px 20px;display:flex;flex-direction:column;gap:6px}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--orange);border:3px solid var(--ink)}
.note .t{font-family:var(--display);font-size:20px}
.note:nth-child(1){transform:rotate(-1.5deg)}.note:nth-child(2){transform:rotate(1.2deg);background:#FFE45C}.note:nth-child(2)::before{background:var(--blue)}.note:nth-child(3){transform:rotate(-.6deg)}.note:nth-child(3)::before{background:var(--teal)}.note:nth-child(4){transform:rotate(1.8deg);background:#C9F2D6}.note:nth-child(4)::before{background:var(--yellow)}
.peg{background-color:#D9B98C;background-image:radial-gradient(circle,#8C6B43 3px,transparent 3.5px);background-size:28px 28px;border:5px solid var(--ink);border-radius:12px;padding:clamp(20px,3vw,36px);display:flex;flex-wrap:wrap;gap:18px 16px}
.peg span{display:inline-flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:8px;padding:8px 16px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.peg span::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
.peg .o{background:var(--orange)}.peg .y{background:var(--yellow)}.peg .b{background:var(--blue);color:#fff}.peg .t{background:var(--teal)}
.price{width:100%;border-collapse:collapse;font-size:17px}
.price th,.price td{text-align:left;padding:12px 10px;border-bottom:2px solid var(--ink);vertical-align:top}
.price th{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.04em}
.price td:nth-child(3){white-space:nowrap;font-weight:700}

@keyframes belt{from{background-position:0 0}to{background-position:28px 0}}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1px,1px) rotate(-.7deg)}75%{transform:translate(1px,-1px) rotate(.7deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinback{to{transform:rotate(-360deg)}}
@keyframes piston{0%,100%{height:8px}50%{height:24px}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes stripes{from{background-position:0 0}to{background-position:50.9px 0}}
@keyframes print{from{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes steam{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.8}100%{transform:translateY(-34px) scale(1.3);opacity:0}}
@keyframes needle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes hum{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes swing{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(1.6)}70%{opacity:1;transform:rotate(-12deg) scale(.94)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}