:root{--ink:#0d0d0d;--paper:#efe9dd;--paper2:#e4dccb;--a:var(--accent,#ff4d00);--b:var(--accent2,#c6ff00);--line:2.5px solid var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:17px/1.5 "Space Grotesk",system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:999;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
a{color:inherit}
.d{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:.88;font-weight:400}
.hand{font-family:"Permanent Marker",cursive;text-transform:none}
.mono{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
nav.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{text-decoration:none;display:flex;align-items:center}.logo svg{height:42px;width:auto;overflow:visible}footer .logo svg{height:56px}
.logo i{display:inline-block;width:14px;height:14px;background:var(--a);border:2px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink)}
nav.top .links{margin-left:auto;display:flex;gap:20px;align-items:center}
nav.top .links a{text-decoration:none;font-weight:600}
nav.top .links a:not(.btn):hover{text-decoration:underline wavy var(--a)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:var(--line);padding:13px 22px;font:400 20px Anton;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;box-shadow:5px 5px 0 var(--a);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--a)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--a)}
.btn.alt{background:var(--b);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.sm{padding:8px 14px;font-size:16px;box-shadow:3px 3px 0 var(--a)}
.btn[disabled]{opacity:.45;pointer-events:none}
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-bottom:var(--line);padding:9px 0}
.ticker div{display:inline-block;animation:tick 28s linear infinite;font-family:Anton;font-size:18px;letter-spacing:.06em}
.ticker span{margin:0 18px}.ticker b{color:var(--b);font-weight:400}
@keyframes tick{to{transform:translateX(-50%)}}
.hero{position:relative;padding:56px 0 30px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center}
.hero h1{font-size:clamp(66px,10.5vw,158px)}
.hero h1 .o{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.hero h1 .hl{background:var(--a);color:var(--paper);padding:0 .08em;display:inline-block;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--ink)}
.hero p.lead{font-size:20px;max-width:470px;margin:26px 0 30px}
.scribble{position:absolute;font-family:"Permanent Marker";color:var(--a);font-size:22px;transform:rotate(-8deg)}
.stage{position:relative;aspect-ratio:1.15;display:grid;place-items:center}
.stage .blob{position:absolute;inset:6% 4%;background:var(--b);border:var(--line);border-radius:47% 53% 41% 59%/55% 42% 58% 45%;animation:morph 9s ease-in-out infinite}
@keyframes morph{50%{border-radius:58% 42% 55% 45%/41% 59% 41% 59%;transform:rotate(6deg)}}
.stage svg{position:relative;width:104%;filter:drop-shadow(10px 14px 0 rgba(0,0,0,.85));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(-2deg)}}
.stamp{position:absolute;border:3px solid var(--ink);background:var(--paper);border-radius:50%;width:124px;height:124px;display:grid;place-items:center;text-align:center;font-family:Anton;font-size:19px;line-height:1;transform:rotate(14deg);box-shadow:4px 4px 0 var(--ink)}
.stamp small{display:block;font:700 10px "Space Mono";letter-spacing:.1em;margin-top:4px}
.tape{position:absolute;width:110px;height:30px;background:rgba(255,240,170,.75);border-left:2px dashed rgba(0,0,0,.15);border-right:2px dashed rgba(0,0,0,.15);transform:rotate(-6deg)}
section{padding:80px 0;border-top:var(--line)}
h2.d{font-size:clamp(46px,7vw,96px);margin-bottom:34px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;background:#fff8ec;border:var(--line);padding:26px;box-shadow:7px 7px 0 var(--ink)}
.card:nth-child(2){transform:rotate(1.2deg);background:var(--b)}.card:nth-child(3){transform:rotate(-1deg)}
.card .num{font-family:Anton;font-size:74px;line-height:.9;color:var(--a);-webkit-text-stroke:2px var(--ink)}
.card h3{font:400 30px Anton;text-transform:uppercase;margin:8px 0}
.drops{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.drop{border:var(--line);background:#fff;padding:12px 12px 16px;box-shadow:5px 5px 0 var(--ink);transition:transform .2s}
.drop:nth-child(odd){transform:rotate(-1.5deg)}.drop:nth-child(even){transform:rotate(1.3deg)}
.drop:hover{transform:rotate(0) scale(1.04);z-index:2}
.drop .sw{aspect-ratio:1;border:2px solid var(--ink);background-size:cover;background-position:center}
.drop p{font-family:"Permanent Marker";font-size:17px;margin-top:10px}
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.tag{border:var(--line);background:#fff8ec;padding:26px 30px;box-shadow:8px 8px 0 var(--a);position:relative}
.tag:before{content:"";position:absolute;top:18px;right:18px;width:18px;height:18px;border:var(--line);border-radius:50%;background:var(--paper)}
.row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px dashed var(--ink);padding:14px 0;font-weight:600}
.row b{font:400 40px Anton}
.rules{background:var(--ink);color:var(--paper)}
.rules .big{font-size:clamp(44px,7vw,100px)}
.rules .big s{text-decoration-color:var(--a);text-decoration-thickness:7px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{border:2px solid currentColor;border-radius:99px;padding:7px 14px;font-weight:700;cursor:pointer;background:transparent;color:inherit;font-family:inherit;font-size:15px}
.chip.on{background:var(--ink);color:var(--paper)}
.rules .chip{border-color:var(--paper)}
footer{border-top:var(--line);padding:46px 0 60px;background:var(--paper2)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer a{display:block;text-decoration:none;margin:4px 0}footer a:hover{color:var(--a)}
.prose{max-width:780px;padding:60px 22px 90px;margin:0 auto}
.prose h1{font:400 clamp(52px,8vw,104px)/.9 Anton;text-transform:uppercase;margin-bottom:26px}
.prose h2{font:400 34px Anton;text-transform:uppercase;margin:38px 0 10px}
.prose p,.prose li{margin:10px 0}.prose ul{padding-left:22px}
.prose .callout{border:var(--line);background:var(--b);padding:16px 20px;box-shadow:5px 5px 0 var(--ink);margin:22px 0;font-weight:600}
table.sz{width:100%;border-collapse:collapse;margin:16px 0;background:#fff8ec}
table.sz td,table.sz th{border:2px solid var(--ink);padding:8px;text-align:center;font-family:"Space Mono";font-size:14px}
table.sz th{background:var(--ink);color:var(--paper)}
details{border:var(--line);background:#fff8ec;margin:12px 0;padding:16px 20px;box-shadow:4px 4px 0 var(--ink)}
summary{font:400 24px Anton;text-transform:uppercase;cursor:pointer;list-style:none}
summary:after{content:"+";float:right}details[open] summary:after{content:"–"}
/* studio */
.studio{display:grid;grid-template-columns:1.25fr 1fr;min-height:calc(100vh - 64px)}
.lab{position:relative;border-right:var(--line);background:var(--paper2);padding:24px;display:flex;flex-direction:column}
.lab .tabs{display:flex;gap:8px;flex-wrap:wrap}
.lab .canvas{flex:1;display:grid;place-items:center;position:relative;min-height:360px}
.lab{position:sticky;top:64px;height:calc(100vh - 64px)}.lab .canvas svg{width:100%;max-width:760px;max-height:calc(100vh - 250px);filter:drop-shadow(8px 12px 0 rgba(0,0,0,.85))}
.lab .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.oven{position:absolute;inset:0;display:none;place-items:center;background:rgba(239,233,221,.8);z-index:3;text-align:center}
.oven.on{display:grid}
.oven .d{font-size:56px}
.oven .bar{width:240px;height:18px;border:var(--line);margin:14px auto;overflow:hidden;background:#fff}
.oven .bar i{display:block;height:100%;width:40%;background:repeating-linear-gradient(45deg,var(--a) 0 10px,var(--ink) 10px 20px);animation:load 1s linear infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.panel{padding:26px 28px 60px;overflow:auto}
.panel h1{font:400 58px/.9 Anton;text-transform:uppercase}
.step{margin-top:26px}
.step label.h{display:flex;gap:10px;align-items:center;font:400 22px Anton;text-transform:uppercase;margin-bottom:10px}
.step label.h em{font-style:normal;background:var(--ink);color:var(--paper);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:16px}
textarea{width:100%;border:var(--line);background:#fff8ec;padding:14px;font:16px "Space Grotesk";min-height:96px;resize:vertical;box-shadow:4px 4px 0 var(--ink)}
textarea:focus{outline:3px solid var(--a)}
.swatches{display:flex;gap:10px;align-items:center}
.swatches input{width:48px;height:48px;border:var(--line);padding:0;background:none;cursor:pointer;border-radius:50%;overflow:hidden}
.swatches input::-webkit-color-swatch-wrapper{padding:0}.swatches input::-webkit-color-swatch{border:none;border-radius:50%}
.sizes{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sizes button{border:2px solid var(--ink);background:#fff8ec;padding:9px 0;font:700 14px "Space Mono";cursor:pointer}
.sizes button.on{background:var(--ink);color:var(--b)}
.err{background:var(--a);color:#fff;border:var(--line);padding:10px 14px;margin-top:12px;font-weight:600;display:none}
.err.on{display:block}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:18px 0}
.agree input{width:22px;height:22px;accent-color:var(--a);flex:none;margin-top:2px}
.total{display:flex;justify-content:space-between;align-items:center;border-top:var(--line);padding-top:18px;margin-top:10px}
.total b{font:400 54px Anton}
.real{display:none;margin-top:14px;border:var(--line);background:#fff;padding:8px}
.real.on{display:block}.real img{width:100%;display:block}
input[type=range]{accent-color:var(--ink);width:100%}
@media (max-width:900px){.hero .wrap,.price,.studio,footer .wrap{grid-template-columns:1fr}.steps,.drops{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}nav.top .links a:not(.btn){display:none}.lab{border-right:0;border-bottom:var(--line);position:relative;top:0;height:auto}.lab .canvas{min-height:250px}.sizes{grid-template-columns:repeat(6,1fr)}.stamp{width:96px;height:96px;font-size:15px}.hero{padding-top:30px}.panel h1{font-size:46px}}

.pair{margin:18px 0;border:var(--line);background:#fff;padding:14px}#realimgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}#realimgs img{width:100%;display:block}#realimgs .fb{grid-column:1/-1}#pairload{padding:40px 0;text-align:center;animation:pl 1.2s infinite alternate}@keyframes pl{to{opacity:.4}}