:root{color-scheme:light;--ink:#274e42;--muted:#657b6f;--paper:#eaf1eb;--berry:#d74261}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif}main{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px 24px 24px;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#fffdf3a8,transparent 62%)}.scene{position:relative;width:min(480px,100%);aspect-ratio:24/17;outline-offset:8px;border-radius:50%;margin-top:-35px}.scene:focus-visible{outline:2px solid var(--ink)}canvas{width:100%;height:100%;display:block}.speech{position:absolute;top:13%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fffef9;border:1px solid #dce4d9;border-radius:22px;padding:12px 18px;color:var(--ink);font-size:14px;box-shadow:0 3px 0 #d8e3d74d;z-index:1}.speech:after{content:"";position:absolute;left:48%;bottom:-7px;width:12px;height:12px;background:#fffef9;border-right:1px solid #dce4d9;border-bottom:1px solid #dce4d9;transform:rotate(45deg)}.message{text-align:center;margin-top:-14px;position:relative}.code{font-size:14px;font-weight:650;letter-spacing:.12em;color:var(--berry)}h1{font-weight:620;font-size:clamp(27px,5vw,38px);letter-spacing:-.04em;line-height:1.15;margin:12px 0 16px}p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}.motion{appearance:none;background:none;border:1px solid #b9cabc;border-radius:24px;color:#4d6d5b;font:inherit;font-size:14px;min-height:44px;padding:9px 16px;margin-top:30px;cursor:pointer}.motion:hover{background:#dfe9df}.motion:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.sky-dot{position:absolute;border-radius:50%;background:#fffcde;width:5px;height:5px;opacity:.8;top:35%;left:15%}.sky-dot.two{left:83%;top:26%;width:4px;height:4px}@media(max-height:650px){main{padding-top:20px}.scene{width:min(340px,90vw);margin-top:-20px}.message{margin-top:-10px}.motion{margin-top:18px}}@media(prefers-reduced-motion:reduce){.sky-dot{display:none}}
