:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#252930;background:#f1f2f3;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}
#playground{position:relative;width:100%;height:100svh;min-height:320px;overflow:hidden;background:#f1f2f3}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-touch-callout:none;z-index:2;outline:none}
header{position:absolute;left:clamp(20px,3.5vw,60px);right:clamp(20px,3.5vw,60px);top:max(28px,env(safe-area-inset-top));z-index:3;pointer-events:none}
.name{margin:0;font-size:20px;font-weight:700;letter-spacing:-.7px}
header nav{display:flex;gap:18px;margin-top:8px;font-size:14px}
header nav a{color:#626972;text-decoration:none;pointer-events:auto;padding:6px 0}
header nav a:hover{color:#252930;text-decoration:underline;text-underline-offset:3px}
#loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:4;background:#f1f2f3;font-size:16px;transition:opacity .3s;pointer-events:none}
#loading.done{opacity:0}#loading.error{padding:30px;text-align:center}#loading.error a{pointer-events:auto;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #252930;outline-offset:5px}
@media(max-width:600px){header{top:max(22px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){#loading{transition:none}}