:root { color-scheme: light; --paper: #eaeae5; --ink: #171b1a; --accent: #16a7a0; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
body { font-family: Arial, Helvetica, sans-serif; color: var(--ink); }
.canvas-page { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
#motion-canvas { display: block; width: 100%; height: 100%; }
.paper-grain { position: absolute; inset: 0; z-index: 1; opacity: .2; pointer-events: none; background-repeat: repeat; contain: strict; }
.identity, .descriptor, .availability, .motion-control { position: absolute; z-index: 2; margin: 0; color: var(--ink); }
.identity { top: max(28px, env(safe-area-inset-top)); left: max(32px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
h1 { margin: 0; font-size: 15px; line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.descriptor { top: max(31px, env(safe-area-inset-top)); right: max(32px, env(safe-area-inset-right)); text-align: right; font: 10px/1.5 var(--mono); letter-spacing: .1em; }
.descriptor span { display: block; opacity: .7; font-size: 9px; }
.availability { bottom: max(31px, env(safe-area-inset-bottom)); left: max(32px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; font: 10px/1.4 var(--mono); letter-spacing: .07em; }
.domain { opacity: .7; }
.status-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.motion-control { right: max(22px, env(safe-area-inset-right)); bottom: max(15px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 80px; min-height: 44px; padding: 12px 10px; border: 0; background: transparent; font: 10px/1 var(--mono); letter-spacing: .09em; cursor: pointer; touch-action: manipulation; }
.motion-control[hidden] { display: none; }
.motion-control:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.motion-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.control-mark { display: flex; width: 11px; height: 12px; align-items: center; justify-content: center; gap: 3px; }
.control-mark i { display: block; width: 2px; height: 9px; background: currentColor; }
.motion-control[aria-pressed="true"] .control-mark i:first-child { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; background: transparent; }
.motion-control[aria-pressed="true"] .control-mark i:last-child { display: none; }
.fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.fallback > span { font-size: clamp(38px, 12vw, 160px); font-weight: 700; letter-spacing: -.075em; }
.fallback small { font: 9px/1.4 var(--mono); letter-spacing: .12em; }
.canvas-ready .fallback { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .identity { left: max(19px, env(safe-area-inset-left)); top: max(24px, env(safe-area-inset-top)); gap: 7px; }
  .brand-mark { width: 22px; height: 22px; }
  h1 { font-size: 12px; }
  .descriptor { right: max(19px, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); font-size: 8px; }
  .descriptor span { font-size: 7px; }
  .availability { left: max(19px, env(safe-area-inset-left)); bottom: max(27px, env(safe-area-inset-bottom)); font-size: 9px; gap: 6px; }
  .domain { display: none; }
  .motion-control { right: max(9px, env(safe-area-inset-right)); bottom: max(11px, env(safe-area-inset-bottom)); }
}
@media (max-height: 420px) {
  .identity { top: max(14px, env(safe-area-inset-top)); }
  .descriptor { top: max(14px, env(safe-area-inset-top)); }
  .availability { bottom: max(17px, env(safe-area-inset-bottom)); }
  .motion-control { bottom: max(2px, env(safe-area-inset-bottom)); }
}