*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#090b12;color:#f4f4ef;font-family:Arial,Helvetica,sans-serif}main{position:relative;height:100%;min-height:220px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid #fff;outline-offset:-4px}header,footer{position:absolute;left:0;right:0;display:flex;align-items:center;padding:clamp(16px,3.7vw,38px);gap:12px;pointer-events:none}header{top:0;background:linear-gradient(#090b1270,transparent);align-items:flex-start}h1{font-weight:500;letter-spacing:-.04em;font-size:clamp(21px,3.8vw,36px);line-height:1;margin:1px 0 9px}p{margin:0;font-size:12px;color:#c9cbd4}.mark{font-size:38px;line-height:1;margin-top:-4px}.live{margin-left:auto;font-size:9px;letter-spacing:.14em;padding-top:7px;white-space:nowrap}.live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c4facb;box-shadow:0 0 9px #c4facb;margin-right:6px}footer{bottom:0;background:linear-gradient(transparent,#090b1280);justify-content:space-between;gap:8px}button{pointer-events:auto;cursor:pointer;min-width:44px;min-height:44px;color:inherit;background:#10131c66;border:1px solid #ffffff30;border-radius:30px;font:12px Arial;backdrop-filter:blur(15px)}button:focus-visible{outline:2px solid white;outline-offset:3px}button:hover{background:#ffffff24}.palettes{display:flex;gap:5px;pointer-events:auto}.palettes button{padding:7px;display:grid;place-items:center;min-width:40px;min-height:40px;border-color:transparent;background:transparent}.palettes button[aria-pressed=true]{border-color:#ffffff9e;background:#ffffff0a}.palettes span{display:block;width:24px;height:24px;border-radius:100%;border:1px solid #ffffff30}.opal{background:linear-gradient(130deg,#77f8d9,#7276ee,#ffb595)}.ember{background:linear-gradient(130deg,#ffdb8f,#f35b37,#62223e)}.tide{background:linear-gradient(130deg,#aaf8dd,#2daeb7,#2335a0)}#pause{padding:0 16px;white-space:nowrap}#pause span{margin-left:9px}#response{font-size:11px;color:#e5e6edcc;text-align:center}#error{position:absolute;top:45%;left:10%;right:10%;text-align:center;line-height:1.6;background:#090b12dd;padding:24px;border-radius:16px}@media(max-width:400px){.live{font-size:8px}#response{display:none}header,footer{padding:18px}.mark{display:none}}@media(max-height:300px){header,footer{padding:12px}h1{font-size:22px}.mark{font-size:30px}}