@font-face { font-family: Plain; src: url('./fonts/Plain-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: light; background: #f5f5f5; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { overflow: hidden; }
main { min-height: 100svh; display: grid; place-items: center; }
.wordmark { width: 100%; height: 100svh; position: relative; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; touch-action: none; cursor: grab; user-select: none; }
.wordmark.over-logo { cursor: pointer; }
.wordmark.dragging { cursor: grabbing; }
.wordmark:focus-visible { outline: 2px solid #163bdc; outline-offset: -12px; }
.fallback { width: min(56vw, 780px); display: block; pointer-events: none; transform: translateY(-3svh); }
.js .fallback { visibility: hidden; }
.js .failed .fallback { visibility: visible; }
canvas { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; transition: opacity .18s ease-out; }
.ready canvas { opacity: 1; }
.ready .fallback { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { canvas { transition: none; } }

:root { --control-bg: #f5f5f3; --ink: #21201c; --tertiary: #969690; --border: #dad9d6; }
body { font-family: Plain, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.scene-controls { position: fixed; z-index: 2; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; display: flex; align-items: center; gap: 0; }
.scene-control { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tertiary); }
.control-face { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 4px; background: var(--control-bg); transition: color 150ms, border-color 150ms; }
.control-face svg, .info-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.info-icon { font-size: 16px; line-height: 1; }
.scene-control:hover:not(:disabled) { color: var(--ink); }
.scene-control:hover:not(:disabled) .control-face { border-color: currentColor; }
.scene-control:disabled { opacity: .4; cursor: default; }
.control-divider { width: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clip-definitions { position: absolute; width: 0; height: 0; }
#info-dialog { padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; width: min(380px, calc(100vw - 48px), calc(100svh - 80px)); max-width: none; }
#info-dialog::backdrop { background: rgb(245 245 243 / .8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.info-panel { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: rgb(233 233 231 / .75); clip-path: url(#squircle); }
.info-panel h1 { font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; }
.info-close { position: absolute; top: 28px; right: 28px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--tertiary); }
.info-close:hover { color: var(--ink); }
@media (min-width: 1024px) and (min-height: 700px) {
  .scene-controls { left: 20px; bottom: 20px; gap: 8px; }
  .scene-control { width: 24px; height: 24px; }
  .control-face { width: 24px; height: 24px; }
  .info-panel h1 { font-size: 14px; line-height: 20px; }
}