:root{font-family:system-ui,sans-serif;color:#eee9dc;background:#141523;color-scheme:dark}*{box-sizing:border-box}html,body,#app,main{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative;height:100dvh}canvas{display:block;width:100%;height:100%;background:#141523;touch-action:none;outline-offset:-14px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #dcc88a}.tools{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center;padding:6px 10px;background:#0f1220b8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #e1d2a629;border-radius:40px;opacity:.8;transition:opacity .2s ease-out}.tools:hover,.tools:focus-within{opacity:1}@media(hover:none){.tools{opacity:1}}.tools button{display:grid;place-items:center;padding:0;border:0;background:none;width:44px;height:44px;border-radius:50%;transition:background-color .15s,transform .12s}.tools button:focus-visible{outline-offset:-3px;box-shadow:0 0 0 4px #0f1220b8}.tools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.tools button:hover{background:#c8a24a24}@media(hover:none){.tools button:hover{background:none}}.tools button:active{background:#c8a24a33;transform:scale(.94)}.tools button[aria-pressed=true]{color:#efd08a;background:#c8a24a3d;box-shadow:inset 0 0 0 1px #dcc88a59}.tools button:disabled{opacity:.38;cursor:default}.tools button:disabled:active{transform:none;background:none}.divider{width:1px;height:20px;background:#eee9dc3d;margin:0 4px}.idle .tools:not(:hover):not(:focus-within){opacity:0;pointer-events:none;transition-duration:.8s}body.idle:has(#loading:not([hidden])) .tools,body.idle:has(#error:not([hidden])) .tools{opacity:.8;pointer-events:auto}.idle canvas{cursor:none}@media(orientation:landscape)and (max-height:500px){.tools{bottom:calc(env(safe-area-inset-bottom,0px) + 8px);padding:4px 8px;gap:2px}}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}#loading span{width:28px;height:28px;border-radius:50%;border:1.5px solid #c8a24a40;border-top-color:#dcc88a;animation:turn 1.3s linear infinite}[data-calm=true] #loading span{animation:pulse 2.4s ease-in-out infinite;border-color:#c8a24a99}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:min(320px,calc(100vw - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));padding:20px 24px;background:#0f1220eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #e1d2a629;border-radius:14px;text-align:center;font-size:15px;line-height:1.5;text-wrap:balance}#error button{display:block;min-height:44px;margin:14px auto 0;padding:0 22px;background:none;border:1px solid #dcc88a70;border-radius:22px}#error button:hover{background:#c8a24a24}[hidden]{display:none!important}@keyframes turn{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#loading span{animation:pulse 2.4s ease-in-out infinite!important;border-color:#c8a24a99}}