@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
:root{color-scheme:dark;--bg:#10151c;--fg:#edece3;--muted:#a0a9b4;--amber:#f6c56d;--mint:#94d4c3;--line:#2b343e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px 'DM Sans',sans-serif;min-height:100svh;display:flex;flex-direction:column}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:4}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:6px}header{margin:0 5%;min-height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{font:700 25px 'Space Mono',monospace;letter-spacing:-1.5px}.wordmark span{color:var(--amber)}.wordmark small{color:var(--muted);font-size:18px;font-weight:400}.build-label,header button,.eyebrow,.wip,.terminal,.scene-heading,.scene-bottom,footer,.scene-caption,.speech{font-family:'Space Mono',monospace}.build-label{color:var(--muted);font-size:12px;letter-spacing:1px}.status-square{display:inline-block;width:6px;height:6px;margin-right:10px;background:var(--amber);box-shadow:0 0 12px #f6c56d33}header button{color:var(--muted);background:none;border:0;font-size:12px;padding:12px 0}header button span{margin-left:12px;color:var(--amber)}main{width:90%;max-width:1500px;margin:auto;display:grid;grid-template-columns:1.05fr 1fr;gap:7%;padding:64px 0;align-items:center}.eyebrow{font-size:12px;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:20px;margin-bottom:40px}.line{height:1px;background:var(--line);width:60px}.wip{display:inline-block;background:#f6c56d12;border:1px solid #f6c56d55;padding:8px 12px;color:var(--amber);font-size:12px;letter-spacing:2px;transform:rotate(-2deg);margin-bottom:20px}h1{font-size:clamp(36px,4.35vw,68px);line-height:1.12;font-weight:500;letter-spacing:-2.7px;margin:4px 0 28px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--amber)}.cursor{color:var(--amber);animation:blink 1.5s steps(1) infinite}p{font-size:18px;line-height:1.75;color:#bfc6ce;margin:0}.aside{font-size:14px;margin-top:16px;color:var(--muted)}nav{display:flex;gap:30px;margin:30px 0 42px}nav a{border-bottom:1px solid #62666a;padding:0 0 8px;font-size:14px}nav a span{margin-left:24px;color:var(--amber)}nav a:hover{color:var(--amber);border-color:var(--amber)}.terminal{max-width:490px;background:#0c1117;border:1px solid var(--line);border-radius:5px;font-size:12px}.terminal-top{color:#8e99a4;border-bottom:1px solid #202a34;display:flex;justify-content:space-between;padding:10px 14px}.terminal-body{padding:17px 14px;min-height:74px;line-height:1.8;color:var(--mint)}.prompt{color:var(--amber);margin-right:7px}.terminal-cursor{animation:blink 1s steps(1) infinite}.scene-panel{border:1px solid #38414a;background:#121922;box-shadow:14px 14px 0 #0b1016;transform:rotate(1deg)}.scene-heading{display:flex;justify-content:space-between;gap:12px;padding:17px 18px;font-size:11px;letter-spacing:1px;color:var(--muted);border-bottom:1px solid #38414a}.scene{position:relative;width:100%;aspect-ratio:3/4;max-height:610px;overflow:hidden;background:#121926}.art{position:absolute;inset:0;background:url('/assets/workshop.png') left center / 200% 100% no-repeat;image-rendering:pixelated;animation:breathe 4s steps(2) infinite}.scene.looking .art{background-position:right center}.screen-glow{position:absolute;inset:30% 30% 25% 5%;background:radial-gradient(ellipse,#6ee1d316,transparent 65%);pointer-events:none;animation:glow 3s infinite}.hotspot{position:absolute;background:transparent;border:0;border-radius:8px}.hotspot:hover{box-shadow:inset 0 0 30px #f6c56d18}.monitor{left:10%;top:35%;width:30%;height:25%}.character{left:37%;top:32%;width:32%;height:51%}.coffee{left:69%;top:48%;width:17%;height:18%}.speech{position:absolute;left:12%;right:12%;top:12%;font-size:14px;line-height:1.6;padding:14px 17px;background:#ece8d9;color:#1c2630;border:3px solid #293642;box-shadow:4px 4px 0 #080e15;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.speech.show{opacity:1;transform:translateY(0)}.scene-caption{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:11px;letter-spacing:1.5px;color:#cbc9bb;text-shadow:1px 2px #000}.scene-bottom{border-top:1px solid #38414a;padding:15px;display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.7;color:var(--muted)}.scene-bottom button{color:var(--amber);background:none;border:0;padding:0;font-size:11px;text-decoration:underline;text-underline-offset:4px}footer{margin:0 5%;padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;font-size:10px;letter-spacing:1px;color:var(--muted);line-height:1.7}.footer-slash{padding:0 10px;color:#566472}footer b{font-weight:400;color:var(--amber)}.loading-dots{animation:blink 2s steps(1) infinite}.paused *, .paused *:before{animation-play-state:paused!important;transition:none!important}@keyframes blink{50%{opacity:0}}@keyframes glow{50%{opacity:.3}}@keyframes breathe{50%{transform:translateY(-1px)}}@media(min-width:1500px){.scene{max-height:none}}@media(max-width:900px){header{min-height:80px}.build-label{display:none}main{gap:5%;padding:45px 0}h1{letter-spacing:-1.5px;font-size:40px}.eyebrow{font-size:10px;margin-bottom:25px}.scene-heading{font-size:9px;padding:12px}.scene-bottom{flex-direction:column;align-items:flex-start}.speech{font-size:12px}footer{flex-wrap:wrap}}@media(max-width:650px){main{grid-template-columns:1fr;gap:40px;width:88%;padding:38px 0 45px}.intro{display:contents}.eyebrow{margin:0}.wip{justify-self:start;margin:0}h1{font-size:clamp(36px,9.7vw,58px);margin:-16px 0;letter-spacing:-1.8px}.intro>p{margin:-20px 0}.intro .aside{margin:-15px 0;font-size:14px}nav{margin:-8px 0 0}.terminal{order:2;width:100%;max-width:none}.scene-panel{order:1;transform:none;max-width:460px;width:100%;justify-self:center}.scene{max-height:none}.scene-heading{font-size:10px}.scene-bottom{flex-direction:row}.speech{font-size:14px}footer{font-size:9px;padding:20px 0}.scene-caption{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
.art{animation:none}.typing-hand,.waving-hand{position:absolute;inset:0;background:url(/assets/workshop.png) left center/200% 100% no-repeat;image-rendering:pixelated;pointer-events:none}.typing-hand{clip-path:polygon(30% 50%,42% 50%,42% 57%,30% 57%);animation:typekeys .32s steps(2) infinite}.waving-hand{display:none;background-position:right center;clip-path:polygon(37% 38%,46% 38%,46% 48%,37% 48%);transform-origin:43% 47%;animation:wave .55s steps(3) infinite}.looking .typing-hand{display:none}.looking .waving-hand{display:block}.coffee{left:79%;top:47%;width:12%;height:12%}.monitor{left:11%;top:31%;width:28%;height:20%}@keyframes typekeys{50%{transform:translateY(-2px)}}@keyframes wave{50%{transform:rotate(-7deg)}}

/* Second-pass sprite and motion: smoother keystroke cadence, no pet in the scene. */
.art,.typing-hand,.waving-hand{background-image:url('/assets/workshop-v2.png')}
.typing-hand{clip-path:polygon(29% 48%,43% 48%,43% 58%,29% 58%);transform-origin:36% 54%;animation:typekeys 1.05s cubic-bezier(.37,0,.2,1) infinite;will-change:transform}
.keyboard-lights{position:absolute;left:18%;top:50.8%;width:20%;height:4.4%;transform:rotate(1deg);pointer-events:none;opacity:.85}
.keyboard-lights i{position:absolute;width:3.5%;height:13%;background:#7ef5df;box-shadow:0 0 5px #43e6cf;animation:keyflash 1.05s ease-in-out infinite}
.keyboard-lights i:nth-child(1){left:28%;top:28%}.keyboard-lights i:nth-child(2){left:43%;top:54%;animation-delay:.12s}.keyboard-lights i:nth-child(3){left:59%;top:24%;animation-delay:.25s}.keyboard-lights i:nth-child(4){left:72%;top:58%;animation-delay:.38s}
.looking .keyboard-lights{display:none}
.waving-hand{animation:wave .9s ease-in-out infinite;will-change:transform}
@keyframes typekeys{0%,100%{transform:translate3d(0,0,0) rotate(0)}18%{transform:translate3d(-1px,1px,0) rotate(-.35deg)}38%{transform:translate3d(1px,0,0) rotate(.2deg)}58%{transform:translate3d(0,1.5px,0) rotate(-.2deg)}78%{transform:translate3d(1px,.5px,0) rotate(.3deg)}}
@keyframes keyflash{0%,100%{opacity:.08;transform:scale(.8)}18%,32%{opacity:1;transform:scale(1.25)}48%{opacity:.15;transform:scale(.9)}}
@keyframes wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.keyboard-lights i{opacity:.35}}

/* Each hand now moves on its own; the clipped regions exclude the keyboard. */
.typing-hand{clip-path:none;animation:none;transform:none}
.typing-hand-left{clip-path:polygon(29.4% 50.4%,35.9% 50.1%,36.4% 56.5%,29.1% 56.7%);transform-origin:35% 55%;animation:type-left 1.34s cubic-bezier(.45,.05,.3,1) infinite}
.typing-hand-right{clip-path:polygon(35.2% 49.2%,42.5% 49.3%,42.7% 56.3%,35.1% 56.4%);transform-origin:36% 55%;animation:type-right 1.34s cubic-bezier(.45,.05,.3,1) infinite}
.keyboard-lights{top:51.3%;height:3.6%;opacity:.72}
.keyboard-lights i{width:2.7%;height:10%;animation-duration:1.34s;animation-timing-function:ease-out}
.keyboard-lights i:nth-child(1){left:23%;top:31%;animation-delay:0s}.keyboard-lights i:nth-child(2){left:35%;top:58%;animation-delay:.16s}.keyboard-lights i:nth-child(3){left:47%;top:26%;animation-delay:.31s}.keyboard-lights i:nth-child(4){left:59%;top:61%;animation-delay:.49s}.keyboard-lights i:nth-child(5){left:70%;top:30%;animation-delay:.67s}.keyboard-lights i:nth-child(6){left:81%;top:55%;animation-delay:.82s}
@keyframes type-left{0%,12%,100%{transform:translate3d(0,0,0) rotate(0)}22%{transform:translate3d(0,.55px,0) rotate(-.12deg)}34%,62%{transform:translate3d(0,0,0) rotate(0)}72%{transform:translate3d(.35px,.4px,0) rotate(.1deg)}84%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes type-right{0%,30%,100%{transform:translate3d(0,0,0) rotate(0)}40%{transform:translate3d(-.35px,.55px,0) rotate(.12deg)}52%,78%{transform:translate3d(0,0,0) rotate(0)}88%{transform:translate3d(0,.4px,0) rotate(-.1deg)}}
@keyframes keyflash{0%,100%{opacity:.08;transform:scale(.88)}8%,18%{opacity:.95;transform:scale(1.12)}28%{opacity:.12;transform:scale(.94)}}