.shortcuts-group{margin-bottom:var(--sp-5)}.shortcuts-group:last-child{margin-bottom:0}.shortcuts-group-title{font-family:var(--font-heading);font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--sp-3)}.shortcut-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}.shortcut-keys{display:flex;gap:var(--sp-1);flex-shrink:0}.shortcut-key{display:inline-block;font-family:var(--font-mono,monospace);font-size:var(--text-sm);font-weight:600;line-height:1;padding:4px 8px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);color:var(--text-muted);min-width:1.6em;text-align:center}.shortcut-desc{font-size:var(--text-sm);color:var(--text-secondary)}.help-btn{position:fixed;top:var(--sp-4);right:var(--sp-4);width:36px;height:36px;border-radius:50%;border:1px solid var(--border-accent-strong);background:var(--bg-elevated);color:var(--text-muted);font-family:var(--font-mono,monospace);font-size:var(--text-base);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:var(--z-sticky,50);transition:all var(--transition-fast)}.help-btn:hover{border-color:var(--gold-muted);color:var(--gold);background:var(--bg-hover)}@media not all and (hover:hover) and (pointer:fine){.help-btn{display:none}}:root{color-scheme:dark;--bg-deep:#08080c;--bg-surface:#12121a;--bg-elevated:#1a1a28;--bg-hover:#222236;--gold:#c9a96e;--gold-light:#e8d5a3;--gold-muted:#8a7040;--gold-dim:#5a4a2e;--gold-glow:rgba(201,169,110,0.15);--gold-glow-strong:rgba(201,169,110,0.3);--border-accent-subtle:rgba(201,169,110,0.05);--border-accent-faint:rgba(201,169,110,0.08);--border-accent-soft:rgba(201,169,110,0.1);--border-accent:rgba(201,169,110,0.12);--border-accent-medium:rgba(201,169,110,0.15);--border-accent-strong:rgba(201,169,110,0.2);--border-accent-bold:rgba(201,169,110,0.25);--border-accent-heavy:rgba(201,169,110,0.3);--border-accent-intense:rgba(201,169,110,0.35);--border-accent-vivid:rgba(201,169,110,0.4);--bg-accent-faint:rgba(201,169,110,0.06);--bg-accent-subtle:rgba(201,169,110,0.08);--bg-accent-soft:rgba(201,169,110,0.14);--bg-accent-medium:rgba(201,169,110,0.15);--text-primary:#f5f0e8;--text-secondary:#b8b0a0;--text-muted:#8a8478;--success:#4a9e6e;--success-glow:rgba(74,158,110,0.2);--error:#c45c5c;--error-glow:rgba(196,92,92,0.2);--info:#5c8ac4;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:9999px;--font-heading:"Playfair Display",Georgia,serif;--font-mono:"DM Mono",monospace;--font-body:"DM Mono",monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--shadow-sm:0 1px 3px rgba(0,0,0,0.4);--shadow-md:0 4px 12px rgba(0,0,0,0.5);--shadow-lg:0 8px 24px rgba(0,0,0,0.6);--shadow-gold:0 0 20px rgba(201,169,110,0.15);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease;--z-nav:100;--z-modal:200;--z-toast:300}[data-theme=light]{color-scheme:light;--bg-deep:#f8f5f0;--bg-surface:#fffdf8;--bg-elevated:#f0ebe3;--bg-hover:#e8e1d6;--gold:#996b1d;--gold-light:#7a5318;--gold-muted:#b8943e;--gold-dim:#d4c498;--gold-glow:rgba(153,107,29,0.12);--gold-glow-strong:rgba(153,107,29,0.22);--border-accent-subtle:rgba(153,107,29,0.06);--border-accent-faint:rgba(153,107,29,0.10);--border-accent-soft:rgba(153,107,29,0.13);--border-accent:rgba(153,107,29,0.16);--border-accent-medium:rgba(153,107,29,0.20);--border-accent-strong:rgba(153,107,29,0.25);--border-accent-bold:rgba(153,107,29,0.30);--border-accent-heavy:rgba(153,107,29,0.35);--border-accent-intense:rgba(153,107,29,0.40);--border-accent-vivid:rgba(153,107,29,0.48);--bg-accent-faint:rgba(153,107,29,0.05);--bg-accent-subtle:rgba(153,107,29,0.08);--bg-accent-soft:rgba(153,107,29,0.12);--bg-accent-medium:rgba(153,107,29,0.15);--text-primary:#1a1814;--text-secondary:#5a5245;--text-muted:#756d62;--success:#2d7a4a;--success-glow:rgba(45,122,74,0.15);--error:#b04040;--error-glow:rgba(176,64,64,0.15);--info:#3a6eb0;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-lg:0 8px 24px rgba(0,0,0,0.12);--shadow-gold:0 0 20px rgba(153,107,29,0.12)}:root{--cat-1:#7ba3d4;--cat-2:#d47b7b;--cat-3:#b48ec8;--cat-4:#6db89a;--cat-5:#d4a84b}[data-theme=light]{--cat-1:#2e5a8c;--cat-2:#9e3a3a;--cat-3:#7a4a92;--cat-4:#2a7a5a;--cat-5:#8a6b1e}.glass{background:rgba(18,18,26,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}[data-theme=light] .glass{background:rgba(255,255,255,.85)}.text-center{text-align:center}.text-italic{font-style:italic}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:var(--radius-full)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes correctFlash{0%{box-shadow:0 0 0 0 var(--success-glow)}50%{box-shadow:0 0 20px 4px var(--success-glow)}to{box-shadow:0 0 0 0 var(--success-glow)}}@keyframes wrongShake{0%,to{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}.animate-fade-in{animation:fadeIn var(--transition-base) forwards}.animate-correct{animation:correctFlash .6s ease}.animate-wrong{animation:wrongShake .4s ease}.layout{display:flex;flex-direction:column;min-height:100dvh;min-height:-webkit-fill-available}.layout-main{flex:1 1;overflow-y:auto;padding:var(--sp-5) var(--sp-4) calc(80px + var(--sp-4));max-width:600px;margin:0 auto;width:100%}.layout-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:var(--sp-2) var(--sp-2) max(var(--sp-2),env(safe-area-inset-bottom));border-top:1px solid var(--border-accent-faint);z-index:var(--z-nav)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-3);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;min-width:48px;min-height:48px;justify-content:center;text-decoration:none}.nav-item:hover{color:var(--text-secondary)}.nav-item-active{color:var(--gold)}.nav-icon{font-size:1.3rem;line-height:1;font-variant-emoji:text}.nav-label{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}.nav-dropdown-wrapper{position:relative}.nav-dropdown{position:absolute;bottom:calc(100% + var(--sp-2));left:50%;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);border-radius:var(--radius-md);border:1px solid var(--border-accent-faint);box-shadow:var(--shadow-md);min-width:140px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(4px);transition:opacity var(--transition-fast),visibility var(--transition-fast),transform var(--transition-fast);pointer-events:none}.nav-dropdown-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}.nav-dropdown-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);color:var(--text-muted);text-decoration:none;transition:color var(--transition-fast),background var(--transition-fast);white-space:nowrap}.nav-dropdown-item:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}[data-theme=light] .nav-dropdown-item:hover{background:rgba(0,0,0,.04)}.nav-dropdown-item-active{color:var(--gold)}.nav-dropdown-label{font-size:.75rem;font-weight:500;letter-spacing:.02em}.nav-feedback-link{position:fixed;top:var(--sp-4);right:calc(var(--sp-4) + 44px);font-size:var(--text-xs);color:var(--text-muted);text-decoration:none;z-index:var(--z-sticky,50);transition:color var(--transition-fast);line-height:36px}.nav-feedback-link:hover{color:var(--gold)}@media not all and (hover:hover) and (pointer:fine){.nav-feedback-link{display:none}}@media (hover:none){.nav-dropdown{display:none}}@media (pointer:coarse){.nav-dropdown{display:none}}