:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}
.me{color-scheme:light;--bg:#f4f1e9;--fg:#20334c;--sub:#5c6875;--blue:#3167ad;--orange:#d87451;--quiet:#cdd1cb;--shadow:#e8e4d9;--screen:#dce8ec;--case:#d3d5ca;--case-shadow:#adb6b2;--case-line:#97a59e;--desk:#c3b7a1;--paper:#f4f1e9;--plant:#728c74}
.dev{color-scheme:dark;--bg:#111923;--fg:#dce7f0;--sub:#9baabc;--blue:#86baff;--orange:#ff9b79;--quiet:#30404f;--shadow:#0b121a;--screen:#33495e;--paper:#162430;--case:#506e90;--case-shadow:#24384e;--case-line:#5e7c9f;--desk:#34465a;--plant:#728c74}
a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--orange);outline-offset:7px;border-radius:2px}
.layout{width:min(1440px,100%);min-height:100svh;margin:auto;padding:42px clamp(28px,5.6vw,88px) 78px;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:12px;font-weight:650;font-size:21px;letter-spacing:-.6px;min-height:44px}.wordmark svg{width:28px;height:28px;fill:var(--blue)}.suffix{font-weight:400;color:var(--sub)}
.language-nav{display:flex;gap:8px;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.language-nav a{padding:12px 15px;color:var(--sub);min-width:48px;text-align:center}.language-nav a[aria-current]{color:var(--fg);background:color-mix(in srgb,var(--quiet) 40%,transparent);box-shadow:3px 3px 0 color-mix(in srgb,var(--quiet) 50%,transparent)}.language-nav a:hover{color:var(--blue)}
main{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:0;flex:1;min-height:560px;padding:64px 0 72px}.intro{position:relative;z-index:1}
h1{font-size:clamp(48px,5.6vw,84px);line-height:1.045;font-weight:620;letter-spacing:-.05em;margin:0 0 26px}.name-dot{color:var(--blue)}
.socials{display:flex;gap:32px;margin-top:34px}.socials a{min-height:48px;display:inline-flex;align-items:center;gap:22px;font-size:16px;font-weight:550;border-bottom:1px solid var(--quiet);transition:color .16s,border-color .16s}.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .18s steps(3)}.socials a:hover{color:var(--blue);border-color:var(--blue)}.socials a:hover svg,.socials a:focus-visible svg{transform:translate(3px,-3px)}
.art{margin:0 -32px 0 -22px;min-width:0;animation:arrive .9s steps(9) both}.scene{display:block;width:100%;height:auto;overflow:visible;shape-rendering:crispEdges}
footer{display:flex;justify-content:space-between;gap:22px;align-items:center;color:var(--sub);font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.2px}.footnote{margin:0}.footnote span{display:inline-block;margin:0 10px;color:var(--orange)}
.preview-label{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bg);border:1px solid var(--quiet);padding:7px 12px;color:var(--sub);font:9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;z-index:3}.preview-label span{margin:0 5px;color:var(--orange)}
.ink{fill:var(--fg)}.blue{fill:var(--blue)}.orange{fill:var(--orange)}.paper{fill:var(--paper)}.screen{fill:var(--screen)}.shadow{fill:var(--shadow)}.case{fill:var(--case)}.case-shadow{fill:var(--case-shadow)}.desk-top{fill:var(--desk)}.plant{fill:var(--plant)}.plant-pot{fill:#bc6144}.case-line{fill:none;stroke:var(--case-line);stroke-width:3}.key-lines{stroke:var(--case-line);stroke-width:2;fill:none}.grid-dot{fill:var(--quiet);opacity:.8}.guide{fill:none;stroke:var(--quiet);stroke-width:2}.ground{fill:none;stroke:var(--quiet);stroke-width:2}.wire{fill:none;stroke:var(--quiet);stroke-width:4}.steam{fill:none;stroke:var(--case-shadow);stroke-width:3}.faint{opacity:.6}
.platform{fill:#354b63}.platform-side{fill:#223349}.platform-line{fill:none;stroke:#536c85;stroke-width:3}.block-side{fill:#416595}.block-top{fill:#b1d1fd}.block-grid{fill:none;stroke:#111923;stroke-opacity:.22;stroke-width:1}.orange-top{fill:#ffbea5}.orange-side{fill:#b75e49}.cube-top{fill:#8b7e73}.cube-face{fill:#cfa78c}.cube-side{fill:#8f7162}.cube-lines{fill:none;stroke:#111923;stroke-opacity:.3;stroke-width:2}
.robot{animation:hello 1.8s steps(6) .6s 1}.eyes{animation:blink 3.8s steps(1) .5s 1;transition:transform .15s steps(2)}.last-block{animation:place 1.5s steps(8) .25s both}.wave{transform-origin:62px 30px;animation:wave 1.5s steps(4) .5s 1}.cursor{animation:cursor 3.6s steps(1) 1}
body:has(.socials a:hover) .eyes,body:has(.socials a:focus-visible) .eyes{transform:translateX(-2px)}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes hello{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-3px)}}@keyframes blink{0%,43%,49%,100%{opacity:1}44%,48%{opacity:0}}@keyframes place{from{transform:translate(24px,-48px)}to{transform:translate(0,0)}}@keyframes wave{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-18deg)}50%{transform:rotate(8deg)}}@keyframes cursor{0%,20%,40%,60%,80%,100%{opacity:1}10%,30%,50%,70%,90%{opacity:0}}
@media(min-width:1500px){main{grid-template-columns:1fr 1.08fr}.art{margin-left:-18px;margin-right:-54px}}
@media(max-width:1050px){.layout{padding:28px 40px 60px}main{grid-template-columns:1fr 1fr;min-height:510px;padding:58px 0}h1{font-size:clamp(42px,5.7vw,62px)}.art{margin-right:-25px;margin-left:-22px}.footnote span{margin:0 6px}}
@media(max-width:720px){.layout{padding:23px 25px 66px;min-height:100svh}.wordmark{font-size:19px;gap:9px}.wordmark svg{width:24px;height:24px}.language-nav{gap:2px}main{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:54px 0 23px;min-height:0;gap:20px}.intro{max-width:460px;width:100%;align-self:center}h1{font-size:clamp(46px,11vw,72px);margin-bottom:22px}.socials{margin-top:22px;gap:30px}.socials a{font-size:15px;gap:24px}.art{margin:0 -15px;max-width:540px;align-self:center;width:calc(100% + 30px)}.scene{max-height:340px}.footnote{font-size:9px}footer{margin-top:10px;flex-wrap:wrap;gap:0 12px}.preview-label{font-size:8px;bottom:10px}}
@media(max-width:370px){.layout{padding-left:20px;padding-right:20px}h1{font-size:44px}.socials{gap:25px}.footnote span{margin:0 4px}footer{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.coming-soon{color:var(--sub);font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;margin:0}
.language-entry{display:flex;min-height:100svh;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:25px}
.language-entry h1{font-size:clamp(36px,6vw,72px);margin:0}