*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f0f0f;--color-surface: #1a1a1a;--color-surface-2: #242424;--color-border: #333;--color-text: #e8e8e8;--color-text-muted: #999;--color-primary: #4a70a8;--color-primary-hover: #6c8ebf;--color-danger: #ff6b6b;--color-success: #4a4;--radius: 8px;--font: system-ui, -apple-system, sans-serif}[data-theme=light]{--color-bg: #f5f5f5;--color-surface: #ffffff;--color-surface-2: #ebebeb;--color-border: #d0d0d0;--color-text: #1a1a1a;--color-text-muted: #666;--color-primary: #3a5f96;--color-primary-hover: #2e4d7a;--color-danger: #c0392b;--color-success: #2a7a2a}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font);font-size:16px;line-height:1.5;min-height:100vh}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.skip-link{position:absolute;top:-100%;left:0;background:var(--color-primary);color:#fff;padding:.6rem 1.2rem;font-weight:600;font-size:1rem;z-index:9999;border-radius:0 0 var(--radius) 0;text-decoration:none}.skip-link:focus{top:0}input,select{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font:inherit;padding:.5rem .75rem}input:focus-visible,select:focus-visible{outline:2px solid var(--color-primary);outline-offset:0}.nav-hamburger{display:none;padding:.4rem .6rem;font-size:1.25rem;background:none;border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-left:auto}.nav-menu{display:contents}@media (max-width: 640px){body{font-size:15px}.nav-hamburger{display:flex}.nav-menu{display:none;width:100%;flex-direction:column;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border)}.nav-menu.open{display:flex}.nav-links-inner{flex-direction:column!important;align-items:flex-start!important;gap:.5rem!important}.nav-user-area{margin-left:0!important;padding-top:.5rem;border-top:1px solid var(--color-border)}.page-content{padding:.75rem!important}}.genre-filter{border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:1.25rem}.genre-filter>summary{padding:.65rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem}.genre-filter>summary::-webkit-details-marker{display:none}.genre-filter>summary:before{content:"▶";font-size:.65rem;display:inline-block;transition:transform .15s}.genre-filter[open]>summary:before{transform:rotate(90deg)}.genre-filter-body{padding:.75rem 1rem .5rem;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;gap:0 2rem}.genre-group{margin-bottom:.75rem;min-width:130px}.genre-group-name{font-size:.75rem;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}.genre-label{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.88rem;padding:.2rem 0;min-height:28px}.genre-label input[type=checkbox]{width:16px;height:16px;flex-shrink:0}.genre-filter-footer{padding:.5rem 1rem .75rem;border-top:1px solid var(--color-border);display:flex;gap:.5rem;align-items:center}.genre-clear-btn{font-size:.85rem;color:var(--color-primary);background:none;border:none;cursor:pointer;padding:.2rem 0;text-decoration:underline}.genre-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}.genre-tag{font-size:.7rem;padding:.1rem .45rem;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text-muted)}.genre-tag-removable{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;padding:.2rem .5rem;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text)}.genre-tag-removable button{font-size:.7rem;line-height:1;color:var(--color-text-muted);padding:0;min-width:14px}.genre-tag-removable button:hover{color:var(--color-danger)}.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}