:root{--color-surface:#fff;--color-surface-float:#ffffffeb;--color-surface-idle:#ffffff8c;--color-ink:#1e2329;--color-ink-soft:#5a6370;--color-line:#e6e8eb;--color-primary:#2e4c6d;--color-on-primary:#fff;--color-ring-free:#fff6e0;--color-ring-busy:#8c939b;--color-ring-outline:#1e2329b3;--color-accent-leaf:#5e9c6b;--color-notice:#7a4b1e;--color-scrim:#140f0c73;--scene-wall:#ece4d4;--scene-wood:#3d261b;--font-family:"Be Vietnam Pro", system-ui, sans-serif;--font-title:700 1.875rem/2.5rem var(--font-family);--font-heading:600 1.1875rem/1.625rem var(--font-family);--font-body:400 1rem/1.5rem var(--font-family);--font-label:600 1rem/1.375rem var(--font-family);--font-caption:400 .875rem/1.25rem var(--font-family);--font-caption-strong:600 .875rem/1.25rem var(--font-family);--rounded-xs:6px;--rounded-sm:12px;--rounded-md:20px;--rounded-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--touch-min:48px;--action-primary:56px;--panel-max:340px;--island-shadow:0 6px 20px #11182729;--safe-top:max(var(--space-3), env(safe-area-inset-top));--safe-right:max(var(--space-3), env(safe-area-inset-right));--safe-bottom:max(var(--space-3), env(safe-area-inset-bottom));--safe-left:max(var(--space-3), env(safe-area-inset-left))}*,:before,:after{box-sizing:border-box}html{text-size-adjust:100%}body{background:var(--color-surface);color:var(--color-ink);font:var(--font-body);margin:0}h1,p{margin:0}h1:focus{outline:none}button{color:inherit;font:var(--font-label);cursor:pointer;border:0;margin:0}button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-surface)}.button-primary,.button-action{padding:var(--space-2) var(--space-5);border-radius:var(--rounded-full)}.button-primary{min-height:var(--action-primary);background:var(--color-primary);color:var(--color-on-primary)}.button-action{min-height:var(--touch-min);border:1px solid var(--color-line);background:var(--color-surface-float);color:var(--color-ink)}.welcome{min-height:100vh;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:var(--scene-wall);flex-direction:column;justify-content:flex-end;display:flex}.welcome-card{gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-line);border-radius:var(--rounded-md);background:var(--color-surface-float);box-shadow:var(--island-shadow);flex-direction:column;display:flex}.welcome-card h1{font:var(--font-title)}.picker{gap:var(--space-3);max-width:1000px;min-height:100vh;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);flex-direction:column;margin:0 auto;display:flex}.picker h1{font:var(--font-heading)}.avatar-grid{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.avatar-card{min-width:0;padding:var(--space-1);border:1px solid var(--color-line);border-radius:var(--rounded-md);background:var(--color-surface);flex-direction:column;align-items:center;display:flex;position:relative}.avatar-card[aria-checked=true]{border:3px solid var(--color-primary);padding:2px}.avatar-card img{width:auto;max-width:100%;height:24vh;aspect-ratio:3/4;object-fit:contain;height:24dvh;display:block}.avatar-check{top:var(--space-2);right:var(--space-2);fill:none;width:24px;height:24px;stroke:var(--color-primary);stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;position:absolute}.sound-switch{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;min-height:var(--touch-min);padding:var(--space-2) 0;text-align:left;background:0 0;display:flex}.sound-track{border-radius:var(--rounded-full);background:var(--color-ink-soft);flex:none;width:44px;height:24px;padding:2px;display:block}.sound-knob{border-radius:var(--rounded-full);background:var(--color-surface);width:20px;height:20px;display:block}.sound-switch[aria-checked=true] .sound-track{background:var(--color-primary)}.sound-switch[aria-checked=true] .sound-knob{margin-left:auto}.picker-actions{gap:var(--space-2);flex-direction:column;display:flex}.entering{min-height:100vh;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:var(--scene-wood);color:var(--color-on-primary);text-align:center;justify-content:center;align-items:center;display:flex;position:relative}.entering:before{content:"";background:var(--color-scrim);position:absolute;inset:0}.entering h1{font:var(--font-heading);position:relative}@media (orientation:landscape){.welcome{justify-content:center;align-items:flex-start}.welcome-card{width:min(42%,420px)}.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.avatar-card img{height:36vh;height:36dvh}.picker-actions{flex-direction:row-reverse;justify-content:flex-start}.picker-actions button{flex:1}}