html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050709; }
body { position: fixed; inset: 0; overscroll-behavior: none; }
canvas { display: block; width: 100vw; height: 100vh; cursor: crosshair; touch-action: none; }
.landing-header { position: fixed; top: max(1.5rem, env(safe-area-inset-top)); left: max(1.5rem, env(safe-area-inset-left)); display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-canvas); }
.landing-header h1 { margin: 0; font-family: var(--ui-font-serif); font-size: 1.25rem; font-weight: 400; line-height: 1.3; letter-spacing: normal; }
.landing-header p { margin: .2rem 0 0; font-size: .72rem; color: var(--ui-muted); }
.landing-dock { position: fixed; bottom: max(1.5rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.5rem; max-width: calc(100% - 2rem); padding: .6rem .7rem .6rem 1.25rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-canvas); }
.landing-dock nav { display: flex; align-items: center; gap: 1.4rem; }
.landing-dock nav a { color: var(--ui-ink); font-size: .875rem; font-weight: 600; padding: .5rem 0; }
.landing-dock > button { white-space: nowrap; }
.landing-status { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 28rem; padding: 1rem 1.25rem; border-radius: var(--ui-radius-md); background: var(--ui-canvas); }
@media (max-width: 540px) {
  .landing-header { top: max(1rem, env(safe-area-inset-top)); left: 1rem; }
  .landing-dock { bottom: max(1rem, env(safe-area-inset-bottom)); gap: .6rem; padding: .6rem .8rem; flex-direction: column; width: calc(100% - 2rem); }
  .landing-dock nav { width: 100%; justify-content: space-around; }
  .landing-dock > button { width: 100%; }
}