/* A sketchbook that can be played with. */
:root{--bg:#f2efe6;--panel:#e8e5db;--fg:#22241e;--muted:#64685c;--line:#b9bcb0;--accent:#516c20;--ink:#202619;color-scheme:light}body{background-image:radial-gradient(#5c695521 .8px,transparent .8px);background-size:18px 18px;overflow-x:clip}.header{border-bottom:2px solid var(--fg)}.brand-mark{background:#d2fa77;border-radius:50%;transform:rotate(-12deg)}.hero{position:relative;padding-top:60px}.hero-copy{position:relative}.hero h1{font-size:clamp(46px,5.3vw,80px);line-height:1.17;letter-spacing:-.07em;position:relative}.hero h1 .outline{color:var(--fg);-webkit-text-stroke:0;background:#c0b0f1;display:inline-block;transform:rotate(-5deg);padding:0 8px;box-shadow:4px 5px 0 var(--fg)}.hero .eyebrow{color:var(--fg)}.primary{background:#d2fa77;border:2px solid #22241e;box-shadow:4px 4px 0 #22241e;border-radius:8px;color:#22241e}.primary:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:6px 6px 0 #22241e}.playground{border:2px solid var(--fg);border-radius:16px;box-shadow:9px 10px 0 #22241e;transform:rotate(2deg);background:#dbddf0}.panel-top{border-bottom:2px solid #22241e;border-radius:14px 14px 0 0;background:#c0b0f1;color:#22241e;font-weight:bold}.block .top{fill:#d2fa77}.block .left{fill:#819b56}.block .right{fill:#b0ca80}.block{transform-box:fill-box;transform-origin:center;animation:block-arrive .4s cubic-bezier(.2,.8,.3,1.4) backwards;animation-delay:calc(var(--i,0)*15ms)}.block.empty .top{fill:#c2c8ce;stroke:#7d8790}.model-tools button{background:#f2efe6;border-color:#22241e;border-radius:5px;box-shadow:2px 2px #22241e}.note{background:#f5aaca!important;box-shadow:5px 6px 0 #22241e;border:2px solid #22241e;border-radius:2px}.hero-index{margin-top:32px}.ticker{background:#c0b0f1;border-top:2px solid #22241e;border-bottom:2px solid #22241e;transform:rotate(-1deg);width:102%;margin-left:-1%;color:#22241e;justify-content:flex-start}.ticker>span,.ticker>b{flex-shrink:0;animation:marquee-drift 7s ease-in-out infinite alternate}.project{border:2px solid var(--fg);box-shadow:8px 8px 0 var(--fg);border-radius:18px;overflow:hidden;transform-style:preserve-3d;transition:transform .2s}.project-info{background:#e5eacb}.project h3{font-style:italic}.section-heading h2 span{transform:rotate(-15deg)}.about{border-top:2px dashed var(--line)}.about h2 .green{background:#f5aaca;color:#22241e;padding:0 8px;display:inline-block;transform:rotate(-3deg)}.closing{border:2px solid var(--fg);background:#d2fa77;box-shadow:7px 7px var(--fg);border-radius:18px;color:#22241e;transform:rotate(-1deg)}.closing .eyebrow,.closing p:not(.eyebrow){color:#465130}.closing-icon{color:#22241e;animation:spin 18s linear infinite}.round-link{border:2px solid #22241e;background:#f2efe6;color:#22241e}.live-dot{background:#516c20}.play-circle{background:#d2fa77;color:#22241e;animation:orbit-pulse 3s ease-in-out infinite}.float-toy{position:absolute;right:8px;top:-32px;width:90px;height:92px;border:0;background:none;cursor:pointer;z-index:3;animation:bob 3.4s ease-in-out infinite}.float-toy svg{width:100%;height:100%;overflow:visible}.speech{position:absolute;right:0;top:62px;z-index:4;background:#fffef5;border:2px solid #22241e;color:#22241e;border-radius:16px;padding:9px 12px;font-size:12px;max-width:220px;box-shadow:3px 3px #22241e;pointer-events:none}.speech:empty{display:none}.motion-button{position:fixed;right:18px;bottom:16px;border:2px solid var(--fg);background:var(--bg);box-shadow:3px 3px var(--fg);border-radius:30px;padding:8px 14px;font-size:11px;z-index:12}.spark{position:fixed;pointer-events:none;z-index:50;width:9px;height:9px;border:1px solid #22241e;background:var(--spark,#d2fa77);animation:burst .7s ease-out forwards}.tilt-sticker{position:absolute;left:-22px;bottom:60px;background:#ff9b73;color:#22241e;border:2px solid #22241e;box-shadow:3px 3px #22241e;padding:10px 14px;transform:rotate(-12deg);font:bold 11px monospace;z-index:2;cursor:grab;touch-action:none;user-select:none}.mini-lab{max-width:1350px;margin:65px auto 0;padding:32px;background:#c0b0f1;border:2px solid #22241e;box-shadow:8px 8px #22241e;border-radius:20px;display:grid;grid-template-columns:.75fr 1.5fr;gap:32px;color:#22241e}.mini-lab .eyebrow{color:#454353}.mini-lab h2{font-size:38px;line-height:1.2;letter-spacing:-.04em;margin:18px 0}.mini-lab p{font-size:13px}.mini-lab .lab-label{display:inline-block;background:#fffef5;border:1px solid #22241e;padding:4px 8px;font:10px monospace;transform:rotate(-5deg)}.runner-wrap{min-width:0}.runner-wrap canvas{display:block;width:100%;aspect-ratio:720/260;background:#f5f1df;border:2px solid #22241e;border-radius:12px;touch-action:manipulation;cursor:pointer}.runner-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font:12px monospace}.runner-tools button{border:2px solid #22241e;background:#d2fa77;color:#22241e;box-shadow:3px 3px #22241e;border-radius:5px;padding:8px 12px}.runner-tools button:last-child{background:#f5f1df}.runner-hint{font-size:11px!important;min-height:18px}.revealing{animation:rise-in .6s both}.blueprint{color-scheme:dark}.blueprint .project-info,.blueprint .playground{background:#173653}.blueprint .hero h1 .outline{background:#457493;color:#fff}.blueprint .panel-top{background:#30536f;color:#fff}.blueprint .mini-lab{background:#193d60;color:#e4edf3}.blueprint .mini-lab .eyebrow{color:#afc9dd}.blueprint .model-tools button{background:#173653}.blueprint .closing{background:#234c6e;color:#fff}.blueprint .closing p,.blueprint .closing-icon{color:#d0edff}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off{scroll-behavior:auto}
@keyframes bob{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-14px) rotate(-7deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes block-arrive{from{opacity:.3;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit-pulse{50%{box-shadow:0 0 0 22px #d2fa7730;transform:translate(-50%,-50%) rotate(12deg)}}@keyframes marquee-drift{to{transform:translateX(-90px)}}@keyframes rise-in{from{opacity:.2;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(220deg);opacity:0}}@media(max-width:1000px){.mini-lab{margin:55px 5% 0;grid-template-columns:1fr 1.6fr;padding:24px;gap:22px}.mini-lab h2{font-size:30px}.float-toy{right:0;top:-30px;width:65px}.tilt-sticker{left:0;bottom:70px}}@media(max-width:740px){.hero h1{font-size:clamp(40px,9.5vw,65px)}.hero{padding-top:46px}.playground{transform:rotate(1deg)}.float-toy{right:5px;top:-26px}.hero .eyebrow{font-size:10px;max-width:75%}.mini-lab{grid-template-columns:1fr;margin-top:40px;padding:20px}.mini-lab h2 br{display:none}.mini-lab h2{font-size:30px}.mini-lab p{margin:8px 0}.project{box-shadow:5px 5px #22241e}.motion-button{right:10px;bottom:10px;font-size:10px}.closing-icon{font-size:65px}.tilt-sticker{left:8px;bottom:83px;font-size:9px;padding:7px}.speech{top:62px}.runner-tools{flex-wrap:wrap}.mini-lab .runner-hint{margin-top:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.hero h1 .outline{font-size:.72em;max-width:100%;line-height:1.4}.blueprint .model-caption .green{color:#d0edff}@media(max-width:740px){.hero h1 .outline{font-size:.72em}}