@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@500;700&display=swap";
:root{--ink:#162839;--ink-secondary:#4b6076;--ink-faint:#43474c;--ink-lighter:#74777d;--paper:#fcf9f2;--paper-dark:#f1eee7;--paper-medium:#ebe8e1;--paper-high:#e5e2db;--grid:#e5e2db;--grid-line:#e5e2db;--accent:#61aee9;--accent-deep:#002942;--purple:#5b21b6;--purple-lt:#ede9fe;--teal:#0f766e;--teal-lt:#ccfbf1;--amber:#92400e;--amber-lt:#fef3c7;--blue:#0369a1;--red:#ba1a1a;--code-bg:#1c1c18;--code-text:#f0ebe1;--code-grid:#31312c;--ease-pen:cubic-bezier(.25, .46, .45, .94);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Work Sans,system-ui,sans-serif;overflow-x:hidden}body:after{content:"";z-index:9999;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#root,main{min-height:100vh}::selection{background:var(--amber-lt)}a{color:inherit;text-decoration:none}.font-display{font-family:Bricolage Grotesque,sans-serif}.font-hand,.font-handwritten{font-family:Caveat,cursive}.font-round{font-family:Bricolage Grotesque,sans-serif}.font-body{font-family:Work Sans,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.font-caps{text-transform:uppercase;letter-spacing:.1em;font-family:JetBrains Mono,monospace}.graph-bg{background-color:var(--paper);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);will-change:auto;contain:layout style;background-size:32px 32px}.graph-bg-dark{background-color:var(--code-bg);background-image:linear-gradient(var(--code-grid) 1px, transparent 1px), linear-gradient(90deg, var(--code-grid) 1px, transparent 1px);contain:layout style;background-size:20px 20px}.pencil-bar-track{border:2px solid var(--ink);background:#16283914;border-radius:2px;position:relative;overflow:hidden}.pencil-bar-fill{background-color:var(--ink);width:0;height:100%;transition:width 1s var(--ease-pen);background-image:repeating-linear-gradient(-45deg,#0000,#0000 2px,#ffffff2e 2px 4px);border-radius:1px}.btn-sketch{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .1s var(--ease-pen), box-shadow .1s var(--ease-pen);cursor:pointer;letter-spacing:.1em;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:2px;align-items:center;gap:8px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;display:inline-flex}.btn-sketch:hover{box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.btn-sketch:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.btn-sketch:disabled{opacity:.45;cursor:default;box-shadow:3px 3px 0 var(--ink);transform:none}.btn-fill-ink{background:var(--ink);color:#fff}.btn-fill-purple{background:var(--purple);color:#fff;border-color:var(--ink)}.btn-fill-amber{background:var(--amber);color:#fff;border-color:var(--ink)}.btn-fill-teal{background:var(--teal);color:#fff;border-color:var(--ink)}.btn-outline{background:var(--paper);color:var(--ink)}.paper-card{background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);contain:layout style;border-radius:2px}.dashed-card{background:var(--paper-dark);border:2px dashed var(--ink-secondary);border-radius:2px}.sticky-note{background:var(--amber-lt);border:2px solid #92400e59;border-radius:2px;box-shadow:3px 4px #16283926}.ruled{background-image:repeating-linear-gradient(#0000,#0000 27px,#1628391a 28px);background-size:100% 28px;line-height:28px}.badge-stamp{letter-spacing:.08em;text-transform:uppercase;border:2px solid;border-radius:2px;align-items:center;gap:5px;padding:3px 9px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;display:inline-flex}.ink-chip{background:var(--ink);color:#fff;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:10px;display:inline-block}.paper-tab{background:var(--paper-dark);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:2px}.ink-divider{background:var(--ink);border:none;height:2px}.recipe-card-ink{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease-pen), box-shadow .2s var(--ease-pen)}.recipe-card-ink:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.blueprint-clip{background:var(--ink-secondary);border:2px solid var(--ink);z-index:1;width:40px;height:24px;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.architectural-path{background:repeating-linear-gradient(to bottom, var(--ink) 0, var(--ink) 12px, transparent 12px, transparent 20px);z-index:0;pointer-events:none;width:4px;height:100%;position:absolute;left:50%;transform:translate(-50%)}.stitched-border{border:2px dashed var(--accent)}.ink-stroke{border:3px solid var(--ink)}.ink-stroke-sm{border:2px solid var(--ink)}.ink-underline{border-bottom:2px solid var(--ink)}.blueprint-dashed{background-image:linear-gradient(to right, var(--ink-secondary) 50%, transparent 50%), linear-gradient(to right, var(--ink-secondary) 50%, transparent 50%), linear-gradient(to bottom, var(--ink-secondary) 50%, transparent 50%), linear-gradient(to bottom, var(--ink-secondary) 50%, transparent 50%);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px}.code-area{color:var(--code-text);resize:none;tab-size:4;width:100%;caret-color:var(--accent);background:0 0;border:none;outline:none;font-family:JetBrains Mono,monospace;font-size:13.5px;line-height:22px}.note-area{color:var(--ink);resize:none;background:0 0;border:none;outline:none;width:100%;font-family:Caveat,cursive;font-size:22px}@keyframes draw{0%{stroke-dashoffset:var(--dash,1000)}to{stroke-dashoffset:0}}@keyframes stamp{0%{transform:rotate(var(--rot,-12deg)) scale(0);opacity:0}60%{transform:rotate(var(--rot,-12deg)) scale(1.15);opacity:1}to{transform:rotate(var(--rot,-12deg)) scale(1);opacity:1}}@keyframes paperDrop{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes inkReveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes splat{0%{opacity:.9;transform:scale(0)}60%{opacity:.7;transform:scale(1.1)}to{opacity:0;transform:scale(1.4)}}@keyframes bounce-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes flamePop{0%{opacity:0;transform:scale(0)rotate(-8deg)}60%{opacity:1;transform:scale(1.2)rotate(4deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes inkWobble{0%{opacity:0;transform:translateY(14px)rotate(-1.2deg)}70%{opacity:1;transform:translateY(-2px)rotate(.4deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes tickerScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.anim-ink{animation:inkReveal .6s var(--ease-pen) both;will-change:transform, opacity}.anim-wobble{animation:inkWobble .55s var(--ease-pen) both;will-change:transform, opacity}.anim-drop{animation:paperDrop .5s var(--ease-pen) both;will-change:transform, opacity}.anim-stamp{animation:stamp .6s var(--ease-spring) both;will-change:transform, opacity}.anim-flame{animation:flamePop .4s var(--ease-spring) both;will-change:transform, opacity}.shake{animation:shake .4s var(--ease-pen);will-change:transform}.draw-path{stroke-dasharray:var(--dash,1000);stroke-dashoffset:var(--dash,1000)}.draw-path.go{animation:draw 1s var(--ease-pen) forwards}.lift{transition:transform .18s var(--ease-pen), box-shadow .18s var(--ease-pen);will-change:transform}.lift:hover{box-shadow:6px 7px 0 var(--ink);transform:translate(-2px,-3px)rotate(-.4deg)}.nav-link{letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;background:0 0;border:none;padding:4px 2px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;position:relative}.nav-link.muted{color:var(--ink-lighter)}.nav-link.active-nav{border-bottom:2px solid var(--ink)}.nav-link.muted{background-image:linear-gradient(var(--ink), var(--ink));transition:background-size .25s var(--ease-pen), color .2s;background-position:0 100%;background-repeat:no-repeat;background-size:0% 2px}.nav-link.muted:hover{color:var(--ink);background-size:100% 2px}.hand-link{color:var(--ink);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;text-decoration:none;position:relative}.hand-link:after{content:"";background:var(--ink);transform-origin:0;opacity:.5;height:2px;transition:transform .2s var(--ease-pen), opacity .2s;border-radius:1px;position:absolute;bottom:-3px;left:0;right:0;transform:scaleX(.7)}.hand-link:hover:after{opacity:1;transform:scaleX(1)}.season-scroll::-webkit-scrollbar{height:6px}.season-scroll::-webkit-scrollbar-track{background:0 0}.season-scroll::-webkit-scrollbar-thumb{background:var(--grid);border-radius:2px}.no-bar::-webkit-scrollbar{display:none}.no-bar{scrollbar-width:none}.scroll-pencil{z-index:60;pointer-events:none;transform-origin:0;background-color:var(--ink);background-image:repeating-linear-gradient(-45deg,#0000,#0000 2px,#ffffff40 2px 4px);width:100%;height:3px;position:fixed;top:0;left:0;transform:scaleX(0)}.ticker{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--ink);-webkit-user-select:none;user-select:none;overflow:hidden}.ticker-track{width:max-content;animation:36s linear infinite tickerScroll;display:flex}.ticker:hover .ticker-track{animation-play-state:paused}.ticker-item{color:var(--paper);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:18px;padding:10px 18px 10px 0;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;display:inline-flex}.ticker-item .tick-star{color:var(--accent);font-size:13px}.bento-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:18px;display:grid}@media (max-width:1100px){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.bento-grid{grid-template-columns:1fr}.bento-grid>*{grid-column:span 1!important}}@media (max-width:768px){.hero-grid{grid-template-columns:1fr!important}.un-rotate{transform:none!important}.hide-mobile{display:none!important}.lesson-inner{flex-direction:column!important}.lesson-left,.lesson-right{width:100%!important}.challenge-grid{grid-template-columns:1fr!important}.blueprint-inner{grid-template-columns:1fr!important;gap:28px!important}.idea-grid{grid-template-columns:1fr!important;gap:24px!important}.dash-grid{grid-template-columns:1fr!important}}@media (max-width:900px){.feature-cards{grid-template-columns:1fr!important}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}.draw-path{stroke-dashoffset:0!important}.ticker-track{animation:none!important}}.exercise-prose p{margin:0 0 14px}.exercise-prose ul,.exercise-prose ol{margin:0 0 14px;padding-left:22px}.exercise-prose li{margin:4px 0}.exercise-prose code{background:var(--paper-high);border:1px solid #1628391f;border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:.9em}.exercise-prose p>code:only-child{white-space:pre-wrap;border-left:4px solid var(--purple);background:var(--paper-high);padding:14px 16px;line-height:1.55;display:block;overflow-x:auto}