:root{color-scheme:dark;--bg:#151d2d;--ink:#f3f5fc;--muted:#a8b4cc;--accent:#a4aaff;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);min-width:280px;min-height:100svh}
button,a{-webkit-tap-highlight-color:transparent}
.page{min-height:100svh;display:flex;flex-direction:column;padding:36px clamp(22px,5vw,80px) 24px}
.brand{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;color:var(--ink);text-decoration:none;font-size:24px;font-weight:700;letter-spacing:-1.2px;line-height:1}
.brand img{width:42px;height:42px;object-fit:contain}
.brand span span{color:var(--accent)}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0 44px;text-align:center}
.construction{width:min(100%,680px)}
.scene{position:relative;width:min(100%,580px);aspect-ratio:580/330;margin:0 auto 28px;isolation:isolate}
.scene-floor{position:absolute;left:8%;right:8%;bottom:8%;height:1px;background:#3a465c}
.robot{position:absolute;left:7%;bottom:4%;width:44%;aspect-ratio:400/440;background-image:url("assets/construction/robot.webp");background-size:400% 200%;background-repeat:no-repeat;background-position:0 0;transform-origin:50% 95%;z-index:2}
.brick{position:absolute;width:16%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 3px 2px #090f1d40)}
.wall{position:absolute;inset:0;z-index:3;transition:opacity .6s ease}
.wall .brick{width:14%}
.wall .placed{opacity:0;transform:translate(12px,-2px);transition:opacity .12s ease,transform .22s ease}
.wall .placed.is-visible{opacity:1;transform:translate(0,0)}
.pile{position:absolute;inset:0;z-index:1}
.pile .brick{width:12%;left:2%;bottom:8%}
.pile .brick:nth-child(2){left:9%;bottom:10%}
.pile .brick:nth-child(3){left:5%;bottom:13.5%}
h1{font-size:clamp(34px,5vw,52px);line-height:1.12;font-weight:600;letter-spacing:-1.9px;margin:0;text-wrap:balance}
.message{font-size:18px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.motto{font-size:16px;color:var(--accent);line-height:1.5;margin:24px 0 0;letter-spacing:.1px}
.divider{width:32px;height:1px;background:#4b5872;margin:27px auto 0}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px;line-height:1.4}
.motion-control{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--muted);font:inherit;min-height:44px;padding:10px 0 10px 14px;cursor:pointer}
.motion-control svg{width:14px;height:14px;fill:currentColor}
.motion-control:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
[hidden]{display:none!important}
@media(max-width:480px){.page{padding:22px 22px 12px}.brand{font-size:22px}.brand img{width:36px;height:36px}main{padding:22px 0 30px}.scene{margin-bottom:28px}.message{font-size:16px;max-width:230px;margin:16px auto 0}.motto{font-size:15px;margin-top:21px}h1{letter-spacing:-1.1px}footer{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}