:root{--bg-top:#9fd8ff;--bg-bottom:#eaf7ff;--ink:#0b2540;--muted:#4a6481;--primary:#1f6feb;--primary-ink:#fff;--danger:#c93c4f;--card:#fff;--border:#c2d6ea;--shadow:0 4px 0 #0b254026}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:linear-gradient(var(--bg-top), var(--bg-bottom));margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.app{height:100%;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));grid-template-rows:1fr auto;grid-template-columns:1fr 1fr;place-items:center;gap:16px 32px;display:grid}.brand{flex-direction:column;grid-row:1/span 2;align-items:center;gap:8px;display:flex}.brand-logo{width:min(28vh,180px);height:auto}.brand-title{letter-spacing:.02em;margin:0;font-size:clamp(1.8rem,7vh,3.2rem)}.loading,.screen{grid-area:1/2;width:100%;max-width:340px}.loading{text-align:center;color:var(--muted)}.screen[hidden],.menu[hidden],.loading[hidden]{display:none}.greeting{text-align:center;color:var(--muted);margin:0 0 12px}.greeting strong{color:var(--ink)}.menu{flex-direction:column;gap:clamp(8px,2vh,12px);display:flex}.menu-title{text-align:center;margin:0 0 4px;font-size:1.3rem}.btn{font:inherit;border:2px solid var(--border);background:var(--card);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:clamp(10px,2.6vh,14px) 20px;font-size:clamp(.95rem,3.2vh,1.1rem);font-weight:600;transition:transform 50ms,filter .15s;display:inline-flex}.btn:hover{filter:brightness(.97)}.btn:active{box-shadow:none;transform:translateY(2px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn-danger{color:var(--danger);border-color:var(--danger)}.btn-ghost{box-shadow:none;color:var(--muted);background:0 0;border-color:#0000}.google-g{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:1.4em;height:1.4em;font-size:.8em;font-weight:700;display:inline-flex}.message{text-align:center;min-height:1.4em;color:var(--danger);grid-area:2/2;margin:0}.rotate-notice{z-index:10;background:var(--bg-bottom);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;font-size:1.2rem;font-weight:600;display:none;position:fixed;inset:0}.rotate-icon{font-size:4rem;animation:2s ease-in-out infinite spin}@keyframes spin{0%,30%{transform:rotate(0)}70%,to{transform:rotate(90deg)}}@media (orientation:portrait) and (pointer:coarse){.rotate-notice{display:flex}}@media (prefers-reduced-motion:reduce){.rotate-icon{animation:none}}