/* Values are generated from the app's shared theme tokens in tokens.css. */
* {box-sizing: border-box;}
html {color-scheme: light dark; font-size: 100%;}
body {margin: 0; background: var(--canvas); color: var(--text); font-family: system-ui, -apple-system, sans-serif; font-size: var(--body-size); line-height: 1.6;}
main {min-height: 100svh; display: grid; place-items: center; padding: max(var(--md), env(safe-area-inset-top)) max(var(--md), env(safe-area-inset-right)) max(var(--md), env(safe-area-inset-bottom)) max(var(--md), env(safe-area-inset-left));}
.invitation {width: 100%; max-width: 30rem; padding-block: var(--xl);}
header {display: flex; align-items: center; gap: var(--md); margin-block-end: var(--xxl);}
.logo {width: 64px; height: 64px; border-radius: var(--radius);}
.brand {font-size: var(--heading-size); font-weight: 700; letter-spacing: var(--tracking);}
.languages {display: flex; margin-inline-start: auto;}
button {font: inherit; border: none; background: transparent; color: var(--secondary); padding: var(--sm); cursor: pointer; min-width: 44px; min-height: 44px; border-radius: var(--button-radius);}
button[aria-pressed="true"] {color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: .3em;}
h1 {font-size: clamp(1.875rem, 6vw, 2.5rem); line-height: 1.15; letter-spacing: var(--tracking); margin: 0 0 var(--lg); overflow-wrap: anywhere;}
p {margin: 0; color: var(--secondary);}
.actions {display: grid; gap: var(--sm); margin-block: var(--xl) var(--lg);}
a {display: block; text-align: center; padding: var(--md); color: var(--text); background: var(--surface); text-decoration: none; border-radius: var(--button-radius); font-weight: 600; overflow-wrap: anywhere;}
a.primary {color: var(--on-action); background: var(--action);}
a:active, button:active {opacity: .7;}
:focus-visible {outline: 3px solid var(--action); outline-offset: 4px;}
.hint {font-size: var(--small-size);}
#browser-hint {margin-block-start: var(--md);}
[hidden] {display: none !important;}
@media (prefers-contrast: more) {p, button {color: var(--text);} a {outline: 2px solid currentColor;}}
@media (forced-colors: active) {a, button {border: 1px solid ButtonText;}}