:root{--paper:#fbf7ef;--paper-deep:#f2ede3;--card:#fffefc;--ink:#33203f;--ink-soft:#6c5a79;--ink-faint:#a494b1;--rose:#e0569b;--rose-deep:#c03a82;--pink:#f7c8e0;--blush:#fce5f1;--lilac:#e4d5fa;--violet:#7f45c6;--butter:#ffeaa6;--mint:#cfeedc;--sky:#d3e6f8;--peach:#ffd9c2;--line:color-mix(in srgb, var(--ink) 12%, transparent);--sketchbook-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .35 0 0 0 .1 -.04'/%3E%3C/filter%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .35 0 0 0 .1 -.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 400px 400px, var(--paper);--grid:2rem;--grid-line:color-mix(in srgb, color-mix(in oklab, var(--sky), var(--violet) 35%) 16%, transparent);--graph-paper:linear-gradient(var(--grid-line) 1px, transparent 1px) 50% 0 / var(--grid) var(--grid), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 50% 0 / var(--grid) var(--grid), var(--sketchbook-paper);--coffee:color-mix(in oklab, color-mix(in oklab, var(--butter), var(--peach)), var(--ink) 28%);--shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--ink) 22%, transparent);--shadow-lift:0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 44px -16px color-mix(in srgb, var(--ink) 34%, transparent);--font-display:var(--font-lensa-hand), var(--font-ethiopic), "Bradley Hand", "Segoe Print", cursive;--font-mono:var(--font-dm-mono), ui-monospace, monospace;--spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.22, 1, .36, 1);--gutter:16px;--measure:760px;--page-title:1.6rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable;overflow-x:clip}body{min-height:100dvh;font-family:var(--font-display);text-transform:lowercase;font-synthesis:none;color:var(--ink);background:var(--sketchbook-paper);-webkit-font-smoothing:antialiased;flex-direction:column;margin:0;font-size:1.3rem;line-height:1.5;display:flex;position:relative;overflow-x:clip}body:has([data-paper=graph]){background:var(--graph-paper)}body:before,body:after{content:"";z-index:-1;pointer-events:none;-webkit-mask:var(--mark) center / contain no-repeat;mask:var(--mark) center / contain no-repeat;position:absolute}body:before{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='dried' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='8'/%3E%3C/filter%3E%3Cfilter id='uneven' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='21' result='noise'/%3E%3CfeColorMatrix in='noise' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -0.35' result='patchy'/%3E%3CfeComposite in='SourceGraphic' in2='patchy' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23dried)'%3E%3Ccircle cx='150' cy='150' r='106' fill='black' fill-opacity='0.2' filter='url(%23uneven)'/%3E%3Cg filter='url(%23uneven)'%3E%3Ccircle cx='150' cy='150' r='103' fill='none' stroke='black' stroke-opacity='0.35' stroke-width='8'/%3E%3Ccircle cx='150' cy='150' r='107' fill='none' stroke='black' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3Cg filter='url(%23dried)' opacity='0.5'%3E%3Ccircle cx='164' cy='140' r='107' fill='none' stroke='black' stroke-width='2.2' stroke-dasharray='290 400' transform='rotate(195 164 140)'/%3E%3C/g%3E%3Cg filter='url(%23dried)' fill='black'%3E%3Ccircle cx='36' cy='262' r='3.4' fill-opacity='0.55'/%3E%3Ccircle cx='24' cy='277' r='1.8' fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");top:calc(var(--grid) * 3);aspect-ratio:1;background:var(--coffee);opacity:.5;width:clamp(180px,28vw,260px);right:-110px}@media (max-width:760px){body:before{display:none}}body:after{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 180'%3E%3Cfilter id='rubbed' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='9' result='soft'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.16' numOctaves='3' seed='9' result='noise'/%3E%3CfeColorMatrix in='noise' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -0.5' result='streaks'/%3E%3CfeComposite in='soft' in2='streaks' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23rubbed)' transform='rotate(-7 180 90)'%3E%3Cellipse cx='170' cy='82' rx='130' ry='17' fill='black' fill-opacity='0.8'/%3E%3Cellipse cx='205' cy='108' rx='85' ry='9' fill='black' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");top:calc(var(--grid) * 13);aspect-ratio:2;background:var(--ink-soft);opacity:.1;width:clamp(200px,26vw,300px);left:-40px}[data-paper]{display:contents}::selection{background:var(--pink);color:var(--ink)}img,svg{max-width:100%;display:block}a{color:inherit}html[data-cursor],html[data-cursor] *{cursor:none!important}:focus-visible{outline:2.5px dashed var(--rose);outline-offset:4px;border-radius:6px}.wrap{width:min(100% - var(--gutter) * 2, var(--measure));margin-inline:auto}main.wrap{padding-block:var(--grid) calc(var(--grid) * 3);flex:1;position:relative}@property --drop{syntax:"<length>";inherits:true;initial-value:0}.on-the-lines{--drop:calc(var(--grid) * var(--lines,1) / 2 - .425em);top:var(--drop);line-height:calc(var(--grid) * var(--lines,1));position:relative}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h1,h2,h3{font-family:var(--font-display);letter-spacing:0;text-wrap:balance;margin:0;line-height:1.15}p{text-wrap:pretty;margin:0}code,pre,kbd,samp{font-family:var(--font-mono);text-transform:none}button,input,select,textarea{text-transform:inherit}.hand{font-family:var(--font-display);font-weight:400;line-height:1.2}.lede{color:var(--ink-soft);max-width:34em;font-size:1.2rem}.page-head{margin-block:24px 48px}.page-head .kicker{font-family:var(--font-display);font-size:var(--page-title);color:var(--rose);align-items:center;gap:8px;margin-bottom:4px;display:inline-flex}.page-head h1{margin-bottom:16px;font-size:clamp(2.8rem,9vw,4.5rem)}.page-head h1 em{color:var(--rose)}.section-head{flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:20px;display:flex}.section-head h2{font-size:clamp(1.9rem,5vw,2.4rem)}.section-head h2 em{color:var(--rose)}.section-head .aside{font-family:var(--font-display);color:var(--ink-faint);align-items:center;gap:6px;font-size:1.35rem;display:inline-flex}.more-link{font-family:var(--font-display);color:var(--rose-deep);align-items:center;gap:8px;margin-top:24px;font-size:1.5rem;text-decoration:none;display:inline-flex}.more-link .arrow{transition:translate .35s var(--spring)}.more-link:hover .arrow{translate:6px}.tape{clip-path:polygon(0 0,100% 0,97% 16%,100% 33%,97% 50%,100% 66%,97% 83%,100% 100%,0 100%,3% 83%,0 66%,3% 50%,0 33%,3% 16%);width:96px;height:28px;box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);z-index:2;background:repeating-linear-gradient(-45deg,#f9cbd9e6 0 7px,#fde5ece6 7px 14px);position:absolute}.sticker{width:var(--size,64px);height:var(--size,64px);rotate:var(--r,0deg);flex:none;display:inline-block}.sticker svg{width:100%;height:100%;filter:drop-shadow(0 1.5px 1px color-mix(in srgb, var(--ink) 16%, transparent)) drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 10%, transparent));overflow:visible}.sticker .cut,.sticker .cut *{stroke-linejoin:round;stroke-linecap:round;fill:#fff!important;stroke:#fff!important;stroke-width:12px!important;opacity:1!important}.sticker.is-draggable{z-index:5;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute}.sticker.is-draggable:active{cursor:grabbing;z-index:60}.sticker.is-draggable .pop{width:100%;height:100%;display:block}.sticker.is-draggable .bob{width:100%;height:100%;animation:4.5s ease-in-out infinite alternate bob;animation-delay:var(--bob-delay,0s);display:block}@keyframes bob{0%{transform:translateY(-2px)rotate(-3deg)}to{transform:translateY(3px)rotate(3deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}
