:root{color-scheme:dark;--ink:#e7edf0;--muted:#93a6b2;--mint:#b5efce}*{box-sizing:border-box}body{margin:0;background:#101b25;color:var(--ink);font-family:system-ui,-apple-system,sans-serif}main{max-width:1200px;margin:auto;min-height:100svh;padding:38px 56px;display:flex;flex-direction:column}header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:13px;letter-spacing:.14em;font-weight:650}.brand span{color:var(--mint)}.badge{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px #b5efce66}.hero{flex:1;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:28px;padding:70px 0}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--mint);margin-bottom:24px}h1{font-weight:450;font-size:clamp(40px,4.8vw,65px);line-height:1.08;letter-spacing:-.055em;margin:0 0 24px}h1 em{font-style:normal;color:var(--mint)}.intro{max-width:370px;font-size:16px;line-height:1.75;color:var(--muted)}.tags{display:flex;gap:20px;margin-top:32px;font-family:monospace;font-size:12px;color:#c0ccd4}.tags span+span:before{content:'/';margin-right:20px;color:#526570}.scene{width:100%;overflow:visible}.scene text{font-family:system-ui,sans-serif}.float{animation:float 5s ease-in-out infinite}.float.two{animation-delay:-2s}.arm{transform-origin:319px 284px;animation:type 0.7s ease-in-out infinite alternate}.head{animation:nod 4s ease-in-out infinite;transform-origin:300px 218px}.bar{transform-box:fill-box;transform-origin:bottom;animation:grow 8s ease-in-out infinite}.bar.b2{animation-delay:.25s}.bar.b3{animation-delay:.5s}.packet{animation:travel 4s linear infinite}.packet.p2{animation-delay:2s}.screen-line{animation:blink 2s infinite}.status{display:flex;align-items:center;gap:10px;color:#a7bbca;font:11px monospace;margin-top:8px}.status:before{content:'';height:5px;width:5px;background:var(--mint);border-radius:50%}.controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2a3944;padding-top:18px;margin-top:5px}button{border:1px solid #3b4b57;background:transparent;border-radius:50%;width:32px;height:32px;color:#c9d6de;cursor:pointer}button:hover{border-color:var(--mint);color:var(--mint)}button:focus-visible{outline:2px solid var(--mint);outline-offset:4px}footer{border-top:1px solid #2a3944;padding-top:22px;font-size:11px;color:var(--muted)}footer span:last-child{font-family:monospace}.paused *{animation-play-state:paused!important}@keyframes float{50%{transform:translateY(-7px)}}@keyframes type{to{transform:rotate(-4deg)}}@keyframes nod{50%{transform:rotate(3deg)}}@keyframes grow{0%,10%{transform:scaleY(.25)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.25)}}@keyframes travel{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(146px,24px)}}@keyframes blink{50%{opacity:.35}}@media(max-width:760px){main{padding:26px 24px}.hero{grid-template-columns:1fr;padding:54px 0 30px;gap:24px}h1{font-size:47px}.intro{max-width:440px}.art{max-width:520px;width:100%;margin:auto}.badge{font-size:10px}footer{align-items:flex-start;line-height:1.6}footer span:last-child{max-width:130px;text-align:right}.tags{margin-top:24px}}@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}}


.coffee{animation:coffee 12s ease-in-out infinite;transform-origin:483px 310px}.steam{animation:blink 3s infinite}@keyframes coffee{0%,65%,100%{transform:translate(0,0) rotate(0)}78%,88%{transform:translate(-130px,-76px) rotate(-12deg)}}

.pose{overflow:hidden;opacity:0;animation:pose 12s infinite;transform-origin:290px 370px}.thinking{animation-delay:4s}.presenting{animation-delay:8s}@keyframes pose{0%{opacity:0;transform:translateY(5px)}3%,30%{opacity:1;transform:translateY(0)}33%,100%{opacity:0;transform:translateY(-3px)}}
.coffee{animation:none}.scene .packet{animation-duration:4s}
@media(prefers-reduced-motion:reduce){.pose{opacity:0}.greeting{opacity:1}}
/* A bright, playful data workshop. */
:root{color-scheme:light;--ink:#24233c;--muted:#66667b;--mint:#5146ed}
body{background:#fff9ec}main{max-width:1280px}.brand{font-weight:800}.badge{background:#e8f2bd;color:#3d5227;padding:10px 15px;border-radius:30px}.dot{background:#699234;box-shadow:none}.eyebrow{font-weight:800}h1{font-weight:750}.intro{color:#656477}.tags{gap:10px;color:#35344f}.tags span{padding:9px 14px;border:1px solid #dcd6cb;border-radius:8px;background:#fffdf6}.tags span+span:before{content:none}.tags span:nth-child(2){background:#fdd9b3}.tags span:nth-child(3){background:#e4ecad}.hero{grid-template-columns:.95fr 1.2fr;gap:38px}.art{position:relative;background:#ebe8ff;border-radius:44% 44% 20px 20px;padding:12px 14px 18px}.scene{filter:drop-shadow(0 10px 0 #5146ed0a)}.controls{border-color:#cbc5ed;margin:0 10px}.status{color:#484271;font-size:10px}.status:before{background:#f17b44}button{border-color:#aba2d7;color:#5146ed;background:#fff9ec}footer{border-color:#e3ddcf}.brand span{color:#f17b44}.scene .packet{fill:#ff8952}.scene .bar{fill:#b8dc53}.scene .bar.b2{fill:#ffa369}.scene .bar.b3{fill:#a9a0ff}
.scene>rect:first-of-type{opacity:.24}.scene>ellipse{fill:#c6bef1}.scene .float>rect:first-child{fill:#fffaf0;stroke:#b8addc;stroke-width:2}.scene .float text{fill:#4b416b}.scene .float path{stroke:#8f81be}.scene .float circle,.scene .float rect:not(:first-child):not(.bar){fill:#7665e8}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:38px}h1{font-size:43px}.art{padding:8px 6px 18px;border-radius:100px 100px 20px 20px}.badge{padding:8px 10px}.tags{gap:8px}.tags span{padding:8px 12px}.status{font-size:9px}}