:root{--y:#ffd60a;--k:#0b0b0b;--mint:#3ef0a6;--coral:#ff5c7a;--paper:#f4f1ea;--disp:Anton,Impact,sans-serif;--mono:'Special Elite','Courier New',monospace;--ui:Inter,system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ui);color:var(--k);background:var(--y) url(../tex.jpg) center/540px repeat;color-scheme:light}
.bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--k)}
.bar a{color:var(--y);text-decoration:none;font:400 22px var(--disp);text-transform:uppercase}
.bar nav{display:flex;gap:18px}.bar nav a{font:400 17px 'Permanent Marker',cursive}.bar nav a.on{background:var(--y);color:var(--k);padding:2px 10px}
.wrap{max-width:900px;margin:0 auto;padding-block:30px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1{display:inline-block;margin:0 0 20px;background:var(--paper);padding:8px 14px 6px;box-shadow:4px 4px 0 var(--k);transform:rotate(-1deg);font:400 clamp(32px,6vw,60px)/.92 var(--disp);text-transform:uppercase;letter-spacing:-.03em;text-wrap:balance;hyphens:none}
h1 span{background:var(--k);color:var(--y);padding:2px 8px 0}
.demo{font:400 13px var(--mono);background:var(--coral);padding:6px 10px;display:inline-block;margin-bottom:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tags a{font:400 14px var(--mono);background:var(--paper);color:var(--k);padding:6px 10px;text-decoration:none;box-shadow:2px 2px 0 var(--k);min-height:32px}.tags a.on{background:var(--k);color:var(--y)}
.feed{display:grid;gap:18px}
.it{display:block;background:var(--paper);box-shadow:4px 4px 0 var(--k);padding:16px;color:var(--k);text-decoration:none;transition:transform 620ms var(--ease)}
.it:nth-child(odd){transform:rotate(-.4deg)}.it:nth-child(even){transform:rotate(.4deg)}.it:hover{transform:translateY(-4px)}
.meta{font:400 13px var(--mono);opacity:.7;display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--k);color:var(--y);padding:1px 6px;opacity:1}.chip.m{background:var(--mint);color:var(--k)}.chip.c{background:var(--coral);color:var(--k)}
.it h2{margin:8px 0 6px;font:400 clamp(22px,3vw,30px)/1 var(--disp);text-transform:uppercase;text-wrap:balance}
.it p{margin:0;font:400 15px/1.55 var(--ui);max-width:62ch;text-wrap:pretty}
article p{font:400 17px/1.6 var(--ui);max-width:62ch;text-wrap:pretty}
.box{margin-top:24px;background:var(--mint);box-shadow:4px 4px 0 var(--k);padding:16px;transform:rotate(.5deg)}
.box b{font:400 24px var(--disp);text-transform:uppercase}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:6px 0;border-bottom:1px dashed #0005;font:400 14px var(--mono)}
.go{position:relative;overflow:hidden;display:inline-flex;align-items:center;margin:14px 10px 0 0;background:var(--k);color:var(--y);font:400 19px var(--disp);padding:12px 22px 10px;border-radius:999px;text-decoration:none;min-height:44px}
.go .fill{position:absolute;inset:0;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}.go .lab{position:relative;transition:color 320ms var(--ease)}.go:hover .fill{transform:scaleX(1)}.go:hover .lab{color:var(--k)}
.src{font:400 14px var(--mono)}.src a{color:var(--k)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
article>.meta{margin:14px 0 12px}
article{background:var(--y);box-shadow:4px 4px 0 var(--k);padding:18px;margin-top:10px}article h1{box-shadow:none;padding-left:0;background:none}