:root{--brand-coral-500: #ea8664;--brand-coral-400: #f2a98f;--brand-coral-600: #e07a55;--brand-coral-100: #fdeee7;--brand-cream-100: #faf3ef;--brand-yellow-400: #ffce4f;--brand-yellow-100: #fff4d6;--brand-orange-400: #f5a855;--brand-teal-400: #45b0cc;--brand-teal-500: #2e9dba;--brand-blue-600: #0072b2;--brand-blue-100: #d2eef9;--brand-ink-800: #424242;--brand-ink-400: #8a7d76;--brand-white: #ffffff;--brand-green-500: #2fb460;--brand-green-100: #dcf5e6;--brand-red-500: #e5484d;--brand-red-100: #fde4e4;--font-family-heading: "Fredoka", sans-serif;--font-family-body: "Assistant", sans-serif;--font-size-12: 12px;--font-size-14: 14px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-28: 28px;--font-size-34: 34px;--font-weight-regular: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-body: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 48px;--space-9: 64px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-24: 24px;--radius-pill: 999px;--shadow-1: 0 4px 12px rgba(66, 66, 66, .1);--shadow-2: 0 12px 28px rgba(66, 66, 66, .14);--shadow-3: 0 18px 40px rgba(66, 66, 66, .18);--motion-fast: .15s;--motion-base: .25s;--motion-slow: .35s;--motion-ease: cubic-bezier(.2, .8, .3, 1);--color-bg-page: var(--brand-cream-100);--color-bg-surface: var(--brand-white);--color-bg-surface-alt: var(--brand-cream-100);--color-bg-brand: var(--brand-coral-500);--color-bg-brand-soft: var(--brand-coral-100);--color-bg-info: var(--brand-blue-100);--color-bg-highlight: var(--brand-yellow-100);--color-text-body: var(--brand-ink-800);--color-text-muted: var(--brand-ink-400);--color-text-on-brand: var(--brand-white);--color-text-on-brand-soft: var(--brand-cream-100);--color-text-brand: var(--brand-coral-500);--color-text-link: var(--brand-blue-600);--color-action-primary: var(--brand-blue-100);--color-action-primary-text: var(--brand-blue-600);--color-action-primary-hover: #c2e6f6;--color-action-accent: var(--brand-coral-500);--color-action-accent-hover: var(--brand-coral-600);--color-action-accent-text: var(--brand-white);--color-action-outline: var(--brand-coral-500);--color-border: var(--brand-coral-400);--color-border-soft: #efe4dd;--color-focus-ring: var(--brand-teal-400);--color-feedback-correct: var(--brand-green-500);--color-feedback-correct-bg: var(--brand-green-100);--color-feedback-wrong: var(--brand-red-500);--color-feedback-wrong-bg: var(--brand-red-100);--color-accent-star: var(--brand-yellow-400);--color-accent-warm: var(--brand-orange-400);--color-accent-cool: var(--brand-teal-400);--radius-card: var(--radius-24);--radius-control: var(--radius-16);--radius-button: var(--radius-pill);--shadow-card: var(--shadow-2);--shadow-float: var(--shadow-3);--font-heading: var(--font-family-heading);--font-body: var(--font-family-body)}.avatar-screen{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6) var(--space-4);max-width:560px;margin-inline:auto;background:var(--color-bg-page);color:var(--color-text-body);font-family:var(--font-body)}.avatar-screen__title{font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-28);line-height:var(--line-height-tight);color:var(--color-text-brand);margin:0}.avatar-screen__subtitle{font-size:var(--font-size-16);color:var(--color-text-muted);margin:0}.avatar-section__label{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--font-size-14);color:var(--color-text-muted);margin-block-end:var(--space-2)}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}.avatar-grid--skin{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-tile{appearance:none;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--color-bg-surface);border:2px solid var(--color-border-soft);border-radius:var(--radius-card);box-shadow:var(--shadow-1);cursor:pointer;color:var(--color-text-body);font-family:var(--font-body);transition:border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}.avatar-tile:hover{transform:translateY(-2px)}.avatar-tile:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.avatar-tile[aria-pressed=true]{border-color:var(--color-action-accent);box-shadow:var(--shadow-card)}.avatar-swatch{inline-size:56px;block-size:56px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-20);color:var(--color-text-on-brand);background:var(--swatch-bg, var(--brand-coral-400))}.avatar-swatch--0{--swatch-bg: var(--brand-coral-500)}.avatar-swatch--1{--swatch-bg: var(--brand-teal-500)}.avatar-swatch--2{--swatch-bg: var(--brand-blue-600)}.avatar-swatch--3{--swatch-bg: var(--brand-green-500)}.avatar-swatch--4{--swatch-bg: var(--brand-orange-400)}.avatar-swatch--5{--swatch-bg: var(--brand-teal-400)}.avatar-swatch--6{--swatch-bg: var(--brand-coral-600)}.avatar-swatch--7{--swatch-bg: var(--brand-red-500)}.avatar-swatch--8{--swatch-bg: var(--brand-yellow-400)}.avatar-swatch--9{--swatch-bg: var(--brand-coral-400)}.avatar-swatch--10{--swatch-bg: var(--brand-orange-400)}.avatar-swatch--11{--swatch-bg: var(--brand-teal-500)}.avatar-tile__label{font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);text-align:center}.avatar-customize{display:flex;flex-direction:column;gap:var(--space-3)}.avatar-slot__label{font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);margin-block-end:var(--space-1)}.avatar-slot__options{display:flex;flex-wrap:wrap;gap:var(--space-2)}.avatar-chip{appearance:none;padding:var(--space-2) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-action-primary);color:var(--color-action-primary-text);font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--font-size-14);cursor:pointer;transition:background var(--motion-fast) var(--motion-ease)}.avatar-chip:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.avatar-chip[aria-pressed=true]{background:var(--color-action-accent);color:var(--color-action-accent-text);border-color:var(--color-action-accent)}.avatar-confirm{appearance:none;align-self:stretch;padding:var(--space-4) var(--space-6);border:none;border-radius:var(--radius-button);background:var(--color-action-accent);color:var(--color-action-accent-text);font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-18);cursor:pointer;box-shadow:var(--shadow-card);transition:background var(--motion-fast) var(--motion-ease)}.avatar-confirm:hover:not(:disabled){background:var(--color-action-accent-hover)}.avatar-confirm:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.avatar-confirm:disabled{opacity:.5;cursor:not-allowed}.lang-selector{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-body);color:var(--color-text-body)}.lang-selector__label{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--font-size-14);color:var(--color-text-muted)}.lang-selector__options{display:flex;flex-wrap:wrap;gap:var(--space-2)}.lang-chip{appearance:none;padding:var(--space-2) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-action-primary);color:var(--color-action-primary-text);font-family:var(--font-body);font-weight:var(--font-weight-semibold);font-size:var(--font-size-16);cursor:pointer;transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.lang-chip:hover{background:var(--color-action-primary-hover)}.lang-chip:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.lang-chip[aria-pressed=true]{background:var(--color-action-accent);color:var(--color-action-accent-text);border-color:var(--color-action-accent)}.instructions-help{appearance:none;position:fixed;inset-block-start:var(--space-4);inset-inline-end:var(--space-4);inline-size:44px;block-size:44px;border:none;border-radius:var(--radius-pill);background:var(--color-action-accent);color:var(--color-action-accent-text);font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-24);line-height:1;cursor:pointer;box-shadow:var(--shadow-card);transition:background var(--motion-fast) var(--motion-ease)}.instructions-help:hover{background:var(--color-action-accent-hover)}.instructions-help:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.instructions-scrim{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:color-mix(in srgb,var(--color-text-body) 55%,transparent)}.instructions-panel{display:flex;flex-direction:column;gap:var(--space-4);inline-size:min(560px,100%);max-block-size:90vh;overflow-y:auto;padding:var(--space-6);background:var(--color-bg-surface);color:var(--color-text-body);border-radius:var(--radius-card);box-shadow:var(--shadow-float);text-align:start}.instructions-panel__title{font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-28);line-height:var(--line-height-tight);color:var(--color-text-brand);margin:0}.instructions-panel__tagline{font-size:var(--font-size-16);color:var(--color-text-muted);margin:0}.instructions-panel__header{display:flex;flex-direction:column;gap:var(--space-1)}.instructions-panel__heading{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--font-size-14);color:var(--color-text-muted);margin:0 0 var(--space-2)}.instructions-steps{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding-inline-start:var(--space-6)}.instructions-steps__item{font-size:var(--font-size-18);line-height:var(--line-height-body)}.instructions-panel__win{font-size:var(--font-size-18);line-height:var(--line-height-body);margin:0}.instructions-close{appearance:none;align-self:stretch;padding:var(--space-4) var(--space-6);border:none;border-radius:var(--radius-button);background:var(--color-action-accent);color:var(--color-action-accent-text);font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-18);cursor:pointer;box-shadow:var(--shadow-card);transition:background var(--motion-fast) var(--motion-ease)}.instructions-close:hover{background:var(--color-action-accent-hover)}.instructions-close:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}