:root { color-scheme: dark; background: #0a0a0a; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { min-height: 100svh; }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.rc__canvas { width: min(664px, 100%); height: 520px; position: relative; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); touch-action: none; }
.rc__canvas-mount { width: 100%; height: 100%; }
.rc__canvas-mount canvas { display: block; cursor: grab; touch-action: none; outline: none; }
.rc__canvas-mount canvas:active { cursor: grabbing; }
.rc__canvas:has(canvas:focus-visible) { outline: 2px solid #f3ce61; outline-offset: 5px; }
.rc__canvas-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.loading span { width: 28px; height: 28px; border: 2px solid #ffffff0f; border-top-color: #e6623d; border-radius: 50%; animation: spin .9s linear infinite; }
.loading[hidden], .error[hidden] { display: none; }
.error { position: absolute; inset: 0; margin: 0; padding: 40px; display: grid; place-content: center; color: #ccc; text-align: center; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { main { padding: 16px; } .rc__canvas { height: 380px; } }
@media (max-height: 560px) and (min-width: 641px) { main { padding: 16px; } .rc__canvas { height: calc(100svh - 32px); } }
@media (prefers-reduced-motion: reduce) { .loading span { animation: none; } }