@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, .scene-control: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: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.scene-control { width: 44px; height: 44px; display: grid; place-items: center; color: #737d83; }
.control-face {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 32px; height: 32px; clip-path: url(#squircle);
  background: linear-gradient(145deg, rgb(255 255 255 / .92), rgb(233 236 237 / .58));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color 160ms, color 160ms;
}
.control-face::before, .control-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.control-face::before { background: url('./control-rim.svg') center / 100% 100%; }
.control-face::after { background: url('./acrylic-grain.svg') repeat; opacity: .065; mix-blend-mode: multiply; }
.control-face > svg { position: relative; z-index: 1; }
.scene-control { filter: drop-shadow(0 1px 1px rgb(34 43 48 / .10)) drop-shadow(0 3px 4px rgb(34 43 48 / .045)); }
.control-face svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control-face svg { stroke-width: 1.2; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .75)); }
.control-face .icon-solid { fill: currentColor; stroke: none; }
.scene-control:hover:not(:disabled) { color: var(--ink); }
.scene-control:hover:not(:disabled) .control-face { background-color: rgb(255 255 255 / .7); }
.scene-control:active:not(:disabled) .control-face { background-color: rgb(206 215 220 / .35); }
@media (prefers-reduced-motion: reduce) { .control-face { transition: none; } }
.scene-control:disabled { opacity: .4; cursor: default; }
.control-pair { display: flex; align-items: center; }
.control-pair > .scene-control:first-child .control-face { transform: translateX(4px); }
.control-pair > .scene-control:last-child .control-face { transform: translateX(-4px); }
.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: max-content; max-width: calc(100vw - 40px); max-height: calc(100svh - 48px); }
#info-dialog::backdrop { background: transparent; }
.info-panel { position: relative; width: 320px; max-width: calc(100vw - 40px); padding: 48px 32px; display: grid; place-items: center; text-align: center; gap: 6px; background: rgb(245 245 243 / .7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); clip-path: var(--panel-clip, inset(0 round 44px)); }
.info-panel:focus { outline: none; }
.info-panel h1 { font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; }
@media (max-width: 600px) {
  .fallback { position: absolute; left: 50%; top: 50%; width: min(68svh, 210vw, 780px); transform: translate(-50%, -50%) translateY(-3svh) rotate(90deg); }
  .info-panel { width: 288px; padding: 44px 24px; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .scene-controls { bottom: 20px; gap: 24px; }
  .control-pair { gap: 4px; }
  .control-pair > .scene-control:first-child .control-face,
  .control-pair > .scene-control:last-child .control-face { transform: none; }
  .scene-control { width: 32px; height: 32px; }
  .control-face { width: 32px; height: 32px; }
  .info-panel h1 { font-size: 14px; line-height: 20px; }
}

.scene-control { text-decoration: none; }
.play-symbol { display: none; }
#toggle-playback.is-paused .pause-symbol { display: none; }
#toggle-playback.is-paused .play-symbol { display: block; }