@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Just+Another+Hand&family=Permanent+Marker&family=Reenie+Beanie&family=Rock+Salt&family=Shadows+Into+Light+Two&display=swap');

*{box-sizing:border-box}
:root{
  --ink:#0d0d0b;
  --paper:#fffdf1;
  --paper-alt:#fbf0c9;
  --desk:#d7cdb6;
  --muted:#585144;
  --tape:rgba(238,219,145,.66);
  --hand:"Just Another Hand","Gloria Hallelujah","Comic Sans MS",cursive,sans-serif;
  --messy:"Rock Salt","Gloria Hallelujah","Comic Sans MS",cursive,sans-serif;
  --marker:"Permanent Marker","Shadows Into Light Two","Comic Sans MS",cursive,sans-serif;
  --loose:"Reenie Beanie","Just Another Hand","Comic Sans MS",cursive,sans-serif;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(0,0,0,.08) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 42%, rgba(0,0,0,.07) 0 1px, transparent 2px),
    linear-gradient(112deg,#c8bfa9,#e3d8bd 48%,#c3b89d);
  background-size:34px 34px,52px 52px,auto;
  font-family:var(--hand);
  font-size:25px;
  overflow-x:hidden;
}
body,button,input,textarea,select,code{font-family:var(--hand)}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
button{font:inherit;color:inherit}
img{max-width:100%}.ink-filters{position:absolute;inline-size:0;block-size:0;overflow:hidden}.desk{width:100%;min-height:100vh;padding:clamp(8px,1.8vw,25px)}
.paper{position:relative;isolation:isolate;width:min(1660px,100%);min-height:calc(100vh - 16px);margin:0 auto;padding:clamp(18px,3vw,56px);background:linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(36,46,114,.045) 1px,transparent 1px),radial-gradient(circle at 24% 16%,rgba(255,255,255,.95),transparent 32%),var(--paper);background-size:38px 38px,38px 38px,auto,auto;border:2px solid var(--ink);border-radius:11px 5px 14px 7px;overflow:hidden;transform:rotate(-.12deg)}

.paper-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.topbar,.hero-copy,.hero-art,.sticky,.sketch-panel,.stamp,.socials,.footer-note,.scribble,.doodle,.toast{filter:url(#ink-bleed)}
.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:24px}.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--marker);font-size:22px;text-decoration:none;letter-spacing:.01em;transform:rotate(-1deg)}.header-logo{display:block;height:56px;width:auto;max-width:none;filter:url(#ink-bleed) grayscale(1) contrast(1.35);mix-blend-mode:multiply}.brand-mark{display:grid;place-items:center;width:56px;height:44px;border:3px solid var(--ink);border-radius:47% 53% 43% 57%;background:#fff;transform:rotate(3deg)}.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--marker);font-size:clamp(15px,1.5vw,22px)}.nav a{padding:4px 9px;border:2px dashed transparent;text-decoration:none;transform:rotate(var(--rot,-1deg))}.nav a:nth-child(2){--rot:2deg}.nav a:nth-child(3){--rot:-2.2deg}.nav a:hover{border-color:var(--ink);background:#fff}
.hero{position:relative;z-index:8;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);gap:clamp(24px,4.2vw,64px);align-items:center;min-height:540px;padding:clamp(20px,4vw,68px) 0 clamp(28px,3vw,46px)}.eyebrow,.panel-label{margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--marker);font-size:clamp(13px,1vw,17px);color:var(--muted);font-weight:400}h1{margin:0;max-width:900px;font-family:var(--marker);font-size:clamp(58px,9.1vw,154px);line-height:.82;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance;transform:rotate(-2.4deg)}h1 span{display:inline-block;border:5px solid var(--ink);border-radius:49% 51% 46% 54%;padding:.02em .12em .08em;letter-spacing:-.03em;background:#fff;transform:rotate(2.5deg)}.tagline{margin:26px 0 8px;font-family:var(--messy);font-size:clamp(21px,2.2vw,39px);font-weight:400;line-height:1.18;max-width:820px;transform:rotate(.8deg)}.deadpan{font-size:clamp(25px,2.1vw,35px);line-height:.98;max-width:820px;background:rgba(255,255,255,.72);border:2px dashed var(--ink);padding:12px 14px;transform:rotate(-1.1deg)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.sketch-button{appearance:none;border:2px dashed var(--ink);outline:1px dashed var(--ink);outline-offset:3px;background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;text-decoration:none;font-family:var(--marker);font-size:clamp(15px,1.2vw,20px);text-transform:uppercase;letter-spacing:.02em;border-radius:52% 48% 50% 44% / 14% 17% 16% 18%;cursor:pointer;transform:rotate(-1deg);transition:background-color .12s ease,color .12s ease,outline-offset .12s ease,transform .12s ease}.sketch-button:nth-child(even){transform:rotate(1.2deg)}.sketch-button:hover,.sketch-button:focus-visible{background:#111;color:#fff;outline-offset:7px;transform:rotate(.7deg)}.sketch-button.primary{background:#111;color:#fff}.sketch-button.primary:hover{background:#fff;color:#111}.sketch-button.ghost{background:transparent}.sketch-button.full{width:100%;text-align:center}.hero-pile{position:relative;width:min(610px,100%);aspect-ratio:1;margin:-34px auto 0;transform:translateY(-34px);isolation:isolate;cursor:crosshair;outline:none}.pile-caption{position:absolute;left:50%;bottom:0;z-index:30;margin:0;transform:translateX(-50%) rotate(-3deg);font-family:var(--loose);font-size:clamp(28px,2.7vw,54px);line-height:.8;color:var(--muted);text-align:center;white-space:nowrap;pointer-events:none}.hero-pile.is-shuffling .pile-caption{color:#111}.pile-scrap{position:absolute;left:50%;top:50%;width:var(--w,170px);padding:12px;background:var(--scrap-bg,#fff7d7);background-image:radial-gradient(circle at 20% 15%,rgba(0,0,0,.045) 0 1px,transparent 1.9px),radial-gradient(circle at 78% 65%,rgba(0,0,0,.035) 0 1px,transparent 2px);background-size:27px 27px,39px 39px;border:0;outline:0;clip-path:polygon(4% 8%,18% 2%,38% 6%,56% 1%,78% 6%,96% 3%,92% 24%,98% 44%,93% 62%,97% 84%,78% 97%,57% 92%,36% 98%,17% 93%,3% 96%,8% 72%,2% 52%,7% 33%);transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px))) rotate(var(--r,0deg)) scale(var(--s,1));transition:transform .18s ease,filter .18s ease;background-color .18s ease;opacity:1;mix-blend-mode:normal;overflow:hidden}.pile-scrap img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.7);mix-blend-mode:normal;opacity:1}.hero-pile:hover .pile-scrap,.hero-pile:focus-visible .pile-scrap,.hero-pile.is-shuffling .pile-scrap{filter:contrast(1.04)}.pile-scrap:nth-of-type(2){--scrap-bg:#fff1bf}.pile-scrap:nth-of-type(3){--scrap-bg:#fffff7}.pile-scrap:nth-of-type(4){--scrap-bg:#f7e7ad}.pile-scrap:nth-of-type(5){--scrap-bg:#fff9df}.pile-scrap:nth-of-type(6){--scrap-bg:#f4edc9}.pile-scrap:nth-of-type(7){--scrap-bg:#fff4cf}.pile-scrap:nth-of-type(8){--scrap-bg:#fcf5d8}.hero-pile.is-frozen .pile-caption{color:#c51616}.scrap-a{--w:224px;--x:-92px;--y:-126px;--r:-16deg;--s:1.05}.scrap-b{--w:252px;--x:82px;--y:-112px;--r:11deg;--s:.98;clip-path:polygon(7% 3%,28% 8%,45% 2%,61% 7%,82% 4%,96% 15%,91% 37%,99% 59%,92% 83%,70% 95%,47% 92%,28% 98%,4% 88%,8% 66%,2% 42%,10% 22%)}.scrap-c{--w:278px;--x:-22px;--y:-2px;--r:2deg;--s:1.05}.scrap-d{--w:210px;--x:-138px;--y:106px;--r:14deg;--s:.93}.scrap-e{--w:242px;--x:132px;--y:94px;--r:-10deg;--s:1}.scrap-f{--w:178px;--x:150px;--y:-16px;--r:22deg;--s:.9}.scrap-g{--w:162px;--x:-162px;--y:-8px;--r:-27deg;--s:.92}.scrap-h{--w:150px;--x:0px;--y:150px;--r:5deg;--s:.88}
.note-strip{position:relative;z-index:8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,28px);margin:18px 0 clamp(34px,5vw,82px)}.sticky{min-height:150px;padding:20px 18px;border:2px solid var(--ink);background:#fff3a6;transform:rotate(var(--r,-2deg));display:flex;flex-direction:column;justify-content:center}.sticky h2{margin:0 0 8px;font-family:var(--messy);font-size:clamp(22px,2vw,34px);line-height:1.12;font-weight:400}.sticky p{margin:0;font-size:clamp(30px,2.5vw,43px);font-weight:400;line-height:.86}.sticky-a{--r:-5deg}.sticky-b{--r:3deg;background:#fff}.sticky-c{--r:-2deg;background:#f8f8f8}.sticky-d{--r:4.2deg;background:#fff3a6}
.messy-grid{position:relative;z-index:8;display:grid;grid-template-columns:1.1fr .88fr;gap:clamp(18px,2.8vw,36px);align-items:stretch}.sketch-panel{background:rgba(255,255,255,.68);border:2px solid var(--ink);padding:clamp(18px,2.4vw,30px);border-radius:14px 6px 11px 7px;transform:rotate(var(--r,0deg));min-height:220px}.sketch-panel h2{margin:0 0 14px;font-family:var(--messy);font-size:clamp(25px,3vw,54px);line-height:1.12;letter-spacing:-.02em;font-weight:400}.sketch-panel p{font-size:clamp(27px,2.1vw,38px);line-height:.96}.big-note{--r:1.2deg;grid-row:span 2}.checklist{--r:-1.6deg}.whitepaper{--r:2.2deg;background:#fff}.whitepaper blockquote{font-family:var(--marker);font-size:clamp(28px,4vw,64px);line-height:1.05;margin:10px 0 18px;font-weight:400}.link-stack{display:grid;gap:14px}.ca-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:22px;border:2px dashed var(--ink);padding:10px;background:#fff;transform:rotate(.8deg)}.ca-card span{font-family:var(--marker)}.ca-card code{font-family:var(--hand);font-size:clamp(24px,2vw,34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca-card button{border:2px solid var(--ink);background:#fff;padding:8px 10px;font-family:var(--marker);cursor:pointer}.ca-card button:hover{background:#111;color:#fff}.tiny-warning{font-size:24px!important;color:var(--muted)}
.stamp-field{position:absolute;inset:0;z-index:9;pointer-events:none}.stamp{position:absolute;left:var(--left);top:var(--top);width:var(--size);height:auto;margin:0;display:block;opacity:var(--o,.32);transform:translate(var(--jx,0),var(--jy,0)) rotate(calc(var(--r) + var(--jr,0deg)));filter:url(#ink-bleed) grayscale(1) contrast(1.35);mix-blend-mode:multiply;pointer-events:auto;cursor:crosshair;transition:opacity .14s ease,filter .14s ease,transform .14s ease;z-index:2}.stamp-front{z-index:12}.stamp-huge{z-index:1}.stamp:hover,.stamp:focus-visible{z-index:30;opacity:.78;filter:url(#ink-bleed) grayscale(1) contrast(1.75);transform:translate(var(--jx,0),var(--jy,0)) rotate(calc(var(--r) + var(--jr,0deg) + 5deg)) scale(1.035)}
.socials{position:relative;z-index:8;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(44px,7vw,88px);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px 0;transform:rotate(.7deg)}.socials a{border:2px dashed var(--ink);background:#fff;padding:10px 13px;font-family:var(--marker);font-size:clamp(15px,1.2vw,21px);text-decoration:none}.socials a:hover{background:#111;color:#fff}.footer-note{position:relative;z-index:8;font-size:clamp(23px,1.8vw,30px);line-height:.96;color:var(--muted);padding:18px 0 0;transform:rotate(-.5deg)}.scribble,.doodle{position:absolute;z-index:5;pointer-events:none;font-family:var(--loose);font-weight:400;color:rgba(0,0,0,.74)}.scribble{font-size:clamp(29px,2.6vw,56px);border-bottom:2px solid currentColor}.scribble-one{top:9%;left:44%;transform:rotate(-14deg)}.scribble-two{top:16%;right:8%;transform:rotate(10deg)}.scribble-three{top:48%;left:4%;transform:rotate(20deg)}.scribble-four{bottom:11%;right:5%;transform:rotate(-8deg)}.scribble-five{top:63%;left:27%;transform:rotate(-11deg)}.scribble-six{top:76%;right:23%;transform:rotate(8deg)}.doodle-star{top:7%;right:28%;font-size:64px;transform:rotate(12deg)}.doodle-arrow{top:31%;right:34%;font-size:86px;transform:rotate(-9deg)}.doodle-circle{bottom:22%;left:20%;width:130px;height:82px;border:3px solid var(--ink);border-radius:50%;transform:rotate(-18deg)}.doodle-x{top:68%;left:70%;font-size:90px;transform:rotate(18deg)}.toast{position:fixed;left:50%;bottom:22px;z-index:99;transform:translateX(-50%) rotate(-1deg);background:#fff;border:2px solid var(--ink);padding:12px 16px;font-family:var(--marker);font-size:18px}.toast[hidden]{display:none}

.doodle-mark{position:absolute;z-index:7;pointer-events:none;font-family:var(--loose);font-size:clamp(31px,3.4vw,74px);line-height:.82;color:rgba(0,0,0,.72);filter:url(#ink-bleed);white-space:pre;letter-spacing:.01em}.mark-star{top:22%;left:30%;transform:rotate(18deg)}.mark-moon{top:30%;left:63%;transform:rotate(-12deg)}.mark-rocket{top:42%;left:22%;transform:rotate(10deg);font-size:clamp(23px,2.4vw,48px);text-align:center}.mark-spark{top:57%;right:12%;transform:rotate(-17deg)}.mark-orbit{top:69%;left:40%;transform:rotate(12deg);font-size:clamp(27px,2.8vw,56px)}.mark-wtf{top:84%;left:56%;transform:rotate(-8deg);font-family:var(--messy);font-size:clamp(23px,2.2vw,46px)}.mark-arrow-two{top:73%;left:9%;transform:rotate(7deg);font-size:clamp(30px,3vw,60px)}.mark-mini-moon{top:14%;left:15%;transform:rotate(-11deg);font-size:clamp(24px,2.5vw,48px)}
.big-note{position:relative}.draw-zone{position:relative;width:min(430px,92%);margin:26px auto 0;transform:rotate(-2deg);cursor:crosshair;filter:url(#ink-bleed);touch-action:none}.draw-pad{position:relative;width:100%;margin:0 auto;isolation:isolate}.draw-pad img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}.draw-pad canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;cursor:crosshair;touch-action:none}.draw-arrow{position:absolute;left:82%;top:7%;z-index:3;pointer-events:none;font-family:var(--loose);font-size:clamp(28px,3vw,56px);line-height:.78;color:#c51616;transform:translate(-50%,-50%) rotate(-15deg);filter:url(#ink-bleed);letter-spacing:.02em}.draw-hint{text-align:center;font-family:var(--loose);font-size:clamp(24px,2.3vw,44px);line-height:.78;margin-top:5px;color:var(--muted);transform:rotate(1deg)}.draw-hint button{border:2px dashed var(--ink);background:transparent;font-family:var(--marker);font-size:14px;padding:4px 8px;margin-left:7px;cursor:pointer}.draw-hint button:hover{background:#111;color:#fff}

@media (max-width:1100px){.hero{grid-template-columns:1fr}.hero-pile{width:min(540px,92vw);margin:0 auto;transform:none}.note-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.messy-grid{grid-template-columns:1fr}.stamp{width:min(var(--size),18vw)}}
@media (max-width:760px){.header-logo{height:48px}.hero-pile{width:min(420px,94vw)}.draw-zone{width:min(280px,100%)}.doodle-mark{opacity:.56}body{font-size:22px}.desk{padding:0}.paper{border-left:0;border-right:0;border-radius:0;transform:none;padding:18px 14px}.topbar{align-items:flex-start}.hero{min-height:auto;padding-top:38px}.nav{font-size:16px}.note-strip{grid-template-columns:1fr}.sticky{min-height:120px}.stamp{width:82px}.stamp:nth-child(3n){display:none}.socials{display:grid}.ca-card{grid-template-columns:1fr}.ca-card button{width:100%}h1{font-size:clamp(47px,16vw,86px)}.scribble,.doodle{opacity:.52}.scribble{font-size:35px}}
@media (max-width:470px){.scribble,.doodle{display:none}.cta-row{display:grid}.sketch-button{width:100%}.stamp{width:70px}.stamp:nth-child(even){display:none}}
