@import './tokens.css';
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--background); color: var(--text); font: 16px/1.6 system-ui, sans-serif; }
.shell { width: min(960px, calc(100% - 32px)); margin-inline: auto; padding-block: 24px; }
main { flex: 1; }
.brand { color: var(--accent); font: bold 30px Georgia, serif; text-decoration: none; }
h1, h2 { font-family: Georgia, serif; line-height: 1.2; }
h1 { font-size: clamp(32px, 6vw, 58px); margin-block: 16px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; color: var(--accent); }
.intro, .notice { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 4vw, 40px); margin-bottom: 20px; }
#app-status, footer { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 10px; background: var(--surface); color: var(--text); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  .intro { animation: gemma-enter 450ms ease-out; }
  @keyframes gemma-enter { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}