:root{--color-bg:#f6f4ee;--color-surface:#fff;--color-text:#1f2a24;--color-text-muted:#4a5a50;--color-primary:#2f6b4a;--color-on-primary:#fff;--color-correct:#2f6b4a;--color-on-correct:#fff;--color-incorrect:#8a4b14;--color-on-incorrect:#fff;--color-border:#7a8a80;--color-focus:#1d4ed8;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-sm:.9375rem;--text-md:1.0625rem;--text-lg:1.375rem;--text-xl:1.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--radius:.75rem;--tap-min:44px}*,:before,:after{box-sizing:border-box}html{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);font-size:100%}body{min-width:320px;font-size:var(--text-md);margin:0;line-height:1.5}button,input,a,[role=option]{min-height:var(--tap-min);min-width:var(--tap-min);font:inherit}button{padding:var(--space-2) var(--space-4);border-radius:var(--radius);background:var(--color-primary);color:var(--color-on-primary);cursor:pointer;border:0}a{color:var(--color-primary);align-items:center;display:inline-flex}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app{max-width:40rem;padding:var(--space-4);margin:0 auto}.app-title{margin:0 0 var(--space-4);font-size:var(--text-lg);color:var(--color-primary)}.screen{gap:var(--space-4);flex-direction:column;display:flex}.screen h2{font-size:var(--text-xl);margin:0}.muted{color:var(--color-text-muted);margin:0}button.secondary{background:var(--color-surface);color:var(--color-primary);border:2px solid var(--color-border)}button:disabled{cursor:not-allowed;opacity:.6}.photo{aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);background:var(--color-surface);width:100%;height:auto;display:block}.modes{gap:var(--space-4);margin:0;padding:0;list-style:none;display:grid}.mode{width:100%;min-height:4rem;font-size:var(--text-lg)}.challenge-header{justify-content:space-between;align-items:center;display:flex}.progress{margin:0;font-weight:600}.answer{gap:var(--space-2);flex-direction:column;display:flex}.answer input{width:100%;padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text)}.answer-combobox{position:relative}.answer [role=listbox]{margin:var(--space-1) 0 0;border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);padding:0;list-style:none}.answer [role=option]{padding:var(--space-2) var(--space-3);cursor:pointer;align-items:center;display:flex}.answer [role=option][aria-selected=true],.answer [role=option]:hover{background:var(--color-bg);font-weight:600}.answer-actions,.summary-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.answer-actions button,.summary-actions button{flex:10rem}.species-name{font-size:var(--text-lg);margin:0;font-weight:700}.hint{padding:var(--space-3) var(--space-4);border-left:4px solid var(--color-primary);border-radius:var(--radius);background:var(--color-surface)}.hint h3{margin:0 0 var(--space-1);font-size:var(--text-md)}.hint p{margin:0}.score{font-size:var(--text-xl);margin:0;font-weight:700}.missed{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.missed li{align-items:center;gap:var(--space-3);grid-template-columns:6rem 1fr;display:grid}.player{gap:var(--space-3);flex-direction:column;display:flex}.spectrogram{border-radius:var(--radius);background:var(--color-text);position:relative;overflow:hidden}.spectrogram img{aspect-ratio:3;object-fit:fill;width:100%;height:auto;display:block}.spectrogram-cursor{background:var(--color-on-primary);width:3px;position:absolute;top:0;bottom:0}.player-controls{gap:var(--space-3);display:flex}.player-controls button{flex:8rem}.modal-button{align-self:flex-start}.modal{max-width:min(32rem, calc(100vw - 2 * var(--space-4)));padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);background:var(--color-surface)}.modal::backdrop{background:#00000080}.modal h2{margin:0 0 var(--space-3);font-size:var(--text-lg)}.modal h3{margin:var(--space-3) 0 var(--space-1);font-size:var(--text-md)}.modal p{margin:0 0 var(--space-2)}