*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:#000;overflow:hidden}body{font-family:system-ui,-apple-system,sans-serif;color:#eee}#stage{position:fixed;inset:0}canvas{display:block}.ui{position:fixed;z-index:10;user-select:none}#palette{top:24px;right:28px;display:flex;gap:6px;align-items:center;border:1px solid #222;border-radius:999px;padding:4px}.pal{width:34px;height:22px;border-radius:999px;border:none;cursor:pointer;opacity:.35;transition:opacity .25s,transform .25s}.pal.cyan{background:linear-gradient(135deg,#59f0ff,#0891b2)}.pal.gold{background:linear-gradient(135deg,#f7d074,#a86e14)}.pal.active{opacity:1;transform:scale(1.08)}#dots{bottom:96px;left:50%;transform:translate(-50%);display:flex;gap:14px}.dot{width:9px;height:9px;border-radius:50%;border:1px solid #444;background:transparent;cursor:pointer;padding:0;position:relative;transition:background .25s,border-color .25s,transform .25s}.dot:hover{border-color:#999;transform:scale(1.25)}.dot.active{background:#fff;border-color:#fff}.dot .name{position:absolute;bottom:18px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#888;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}.dot:hover .name,.dot:focus-visible .name{opacity:1}#wordmark{bottom:34px;left:50%;transform:translate(-50%);text-align:center}#wordmark h1{font-size:clamp(22px,3.4vw,34px);font-weight:300;letter-spacing:.42em;text-indent:.42em;color:#fff;margin:0}#fallback{position:fixed;top:50%;left:50%;transform:translate(-50%,-54%);width:min(46vh,70vw)}