html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--canvas); color: var(--ink); }
body { overscroll-behavior: none; font-family: system-ui, sans-serif; }
canvas { outline: none; }
#organizer-root { width: 100%; height: 100%; }
#startup { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; overflow: auto; background: var(--canvas); padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
#startup[hidden], [hidden] { display: none !important; }
.startup-content { text-align: center; max-width: 32rem; }
.wordmark { font-size: 1.5rem; letter-spacing: .02em; margin: 0 0 32px; }
.wordmark span + span { margin-inline-start: 12px; }
h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 500; line-height: 1.5; }
#startup-message { line-height: 1.7; }
#startup-progress { width: 32px; height: 32px; margin: 24px auto; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: turn 1.5s linear infinite; }
button, a { font: inherit; min-height: 48px; box-sizing: border-box; padding: 12px 24px; margin: 12px auto; }
button { display: block; background: var(--signal); color: var(--on-signal); border: 0; border-radius: 8px; cursor: pointer; }
a { display: block; color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #startup-progress { animation: none; } }