@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/font-4.ttf) format('truetype');
}


:root { --paper:#f5f0e4; --ink:#161411; --lime:#69f600; --red:#ef4b34; --rule:2px solid var(--ink); --rainbow:linear-gradient(90deg,#59d9ff 0 16%,#5272f5 16% 32%,#a05de7 32% 48%,#e8586d 48% 64%,#f39e39 64% 80%,#e8e64c 80% 100%); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Fraunces,Georgia,serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.23; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); z-index:20; mix-blend-mode:multiply; }
a { color:inherit; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.shell { width:min(1380px,calc(100% - 64px)); margin:auto; }
.mono { font:500 .78rem/1.35 "DM Mono",monospace; letter-spacing:.015em; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:21px 0 16px; border-bottom:var(--rule); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-size:2rem; line-height:1; font-weight:900; letter-spacing:-.075em; }
.zero { width:31px; height:45px; border:2px solid var(--ink); border-radius:50%; background:linear-gradient(to bottom,#e85353 0 16%,#f4a64a 16% 32%,#f3eb64 32% 48%,#5fd86c 48% 64%,#50bde4 64% 80%,#8569d9 80%); box-shadow:inset 0 0 0 7px var(--paper); }
nav { display:flex; gap:32px; align-items:center; } nav a { font-size:1.1rem; text-decoration:none; } nav a:hover { text-decoration:underline; }
.hero { min-height:552px; padding:39px 0 28px; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; }
.hero h1,.detail-hero h1 { margin:0; font-size:clamp(4.6rem,10.2vw,10rem); line-height:.82; letter-spacing:-.035em; font-weight:900; word-spacing:.04em; }
.hero-copy { max-width:635px; margin:30px 0 22px; font-size:clamp(1.25rem,2.3vw,2.1rem); line-height:1.12; letter-spacing:-.04em; }
.button { display:inline-block; background:var(--ink); color:var(--paper); padding:15px 21px 14px; font-size:1.15rem; text-decoration:none; border:2px solid var(--ink); transition:.2s transform,.2s background,.2s color; }
.button:hover { transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--lime); }
.button.light { background:transparent; color:var(--ink); }
.computer { width:100%; max-height:440px; object-fit:contain; mix-blend-mode:multiply; filter:contrast(1.1); }
.hero-art { text-align:center; } .hero-art figcaption { margin-top:-22px; }
.stripe { height:18px; background:var(--rainbow); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.section-top { margin-top:22px; padding-bottom:8px; display:flex; justify-content:space-between; border-bottom:var(--rule); }
.feature { display:grid; grid-template-columns:1.2fr .9fr; padding:27px 0 31px; gap:36px; border-bottom:var(--rule); }
.mini-stickers { display:flex; gap:18px; align-items:flex-end; min-height:310px; }
.mini-stickers img { width:31%; max-height:315px; object-fit:contain; filter:drop-shadow(3px 4px 0 rgba(22,20,17,.22)); transform:rotate(var(--r)); }
.mini-stickers img:nth-child(1) { --r:-4deg; } .mini-stickers img:nth-child(2) { --r:3deg; } .mini-stickers img:nth-child(3) { --r:-2deg; }
.feature-copy { border-left:var(--rule); padding-left:34px; align-self:center; }
.eyebrow { margin:0 0 8px; font:500 .78rem/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.02em; }
h2 { margin:0; font-size:clamp(2.8rem,5.2vw,5.2rem); line-height:.9; letter-spacing:-.035em; font-weight:900; word-spacing:.035em; }
.feature-copy p { max-width:500px; margin:18px 0 24px; font-size:1.45rem; line-height:1.12; letter-spacing:-.035em; }
.links { display:flex; flex-wrap:wrap; gap:26px; align-items:center; font-size:1.15rem; }
.price { display:inline-block; padding:7px 10px; border:var(--rule); font:500 .78rem "DM Mono",monospace; }
footer { padding:17px 0 24px; display:flex; justify-content:space-between; gap:24px; }

.detail-hero { padding:76px 0 62px; border-bottom:var(--rule); display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; }
.detail-hero h1 { font-size:clamp(4.4rem,9.4vw,9rem); } .detail-hero p { font-size:1.55rem; line-height:1.15; max-width:570px; margin:22px 0; letter-spacing:-.03em; }
.stickerset { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; border-left:var(--rule); padding-left:34px; }
.stickerset img { max-height:185px; max-width:100%; object-fit:contain; filter:drop-shadow(2px 3px 0 rgba(22,20,17,.22)); }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.actions .button { font-size:1rem; }
.pack-head { padding:26px 0 13px; display:flex; justify-content:space-between; border-bottom:var(--rule); }
.sticker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-bottom:38px; }
.sticker { min-height:245px; padding:13px; display:flex; flex-direction:column; border-right:var(--rule); border-bottom:var(--rule); }
.sticker:nth-child(5n) { border-right:0; } .sticker img { width:100%; height:192px; object-fit:contain; align-self:center; filter:drop-shadow(2px 3px 0 rgba(22,20,17,.18)); transition:.18s transform; } .sticker:hover img { transform:rotate(-3deg) scale(1.07); }
.sticker span { margin-top:auto; font:500 .67rem "DM Mono",monospace; text-transform:uppercase; }
.info { margin:0 0 42px; padding:26px 0; border-bottom:var(--rule); display:grid; grid-template-columns:1fr 1fr; gap:42px; }
.info p { margin:0; font-size:1.25rem; line-height:1.2; }
button { font:inherit; cursor:pointer; }

@media (max-width:780px) { .shell{width:min(100% - 34px,1380px)} .topbar{padding:15px 0 13px}.brand{font-size:1.7rem}.zero{transform:scale(.85);transform-origin:left center;margin-right:-4px} nav{gap:18px}nav a{font-size:.95rem}.hero,.detail-hero{grid-template-columns:1fr;min-height:auto;gap:25px;padding:43px 0 31px}.hero h1,.detail-hero h1{font-size:clamp(4rem,18vw,7rem)}.hero-copy{margin:22px 0;font-size:1.35rem}.hero-art{order:-1}.computer{max-height:270px}.hero-art figcaption{margin-top:-8px}.feature{grid-template-columns:1fr;gap:20px}.mini-stickers{min-height:220px;gap:6px}.mini-stickers img{max-height:225px}.feature-copy{border-left:0;border-top:var(--rule);padding:21px 0 0}.section-top,.pack-head{gap:15px}.stickerset{border:0;padding:0;gap:7px}.stickerset img{max-height:110px}.sticker-grid{grid-template-columns:repeat(2,1fr)}.sticker{min-height:218px}.sticker:nth-child(5n){border-right:var(--rule)}.sticker:nth-child(2n){border-right:0}.sticker img{height:168px}.info{grid-template-columns:1fr;gap:22px} footer{font-size:.7rem}.detail-hero p{font-size:1.3rem} }

:focus-visible{outline:3px solid #3257ac;outline-offset:5px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}