.navbar{background:var(--color-header);border-bottom:3px solid var(--color-accent);padding:var(--spacing-sm) var(--spacing-lg);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md)}.navbar-content{max-width:var(--max-width-wide);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.navbar-brand{color:var(--color-background);text-decoration:none;transition:all .3s ease;text-shadow:1px 1px 2px rgba(0,0,0,.2);display:flex;align-items:center;gap:var(--spacing-sm)}.navbar-title{display:flex;flex-direction:column;gap:.25rem}.navbar-name{font-size:1.8rem;font-weight:700}.navbar-tagline{font-size:.85rem;font-weight:400;opacity:.9}.navbar-logo{height:60px;width:auto;object-fit:contain}.navbar-brand:hover{color:var(--color-accent);transform:scale(1.05)}.navbar-links{display:flex;gap:var(--spacing-sm);list-style:none;margin:0;padding:0}.navbar-link{color:#ffffffe6;text-decoration:none;font-weight:500;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);transition:all .3s ease;border:2px solid transparent}.navbar-link:hover{color:var(--color-background);background:#950500cc;border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 8px #0003}.navbar-link.active{color:var(--color-background);background:var(--color-accent);border-color:var(--color-background);box-shadow:0 2px 4px #0000004d}.navbar-logout-btn{background:none;border:2px solid transparent;cursor:pointer;color:#ffffffe6;text-decoration:none;font-weight:500;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);transition:all .3s ease;font-family:inherit;font-size:inherit;display:inline-block}.navbar-logout-btn:hover{color:var(--color-background);background:#950500cc;border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 8px #0003}.hamburger-menu{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:110}.hamburger-menu span{display:block;width:28px;height:3px;background:var(--color-background);border-radius:2px;transition:all .3s ease}.hamburger-menu:hover span{background:var(--color-accent)}@media (max-width: 768px){.navbar{padding:var(--spacing-sm) var(--spacing-md)}.navbar-brand{font-size:1.2rem;gap:var(--spacing-xs)}.navbar-logo{height:40px}.hamburger-menu{display:flex}.navbar-links{position:fixed;top:0;right:-100%;width:70%;max-width:300px;height:100vh;background:var(--color-header);flex-direction:column;gap:0;padding:80px var(--spacing-md) var(--spacing-lg);box-shadow:-4px 0 20px #0000004d;transition:right .3s ease;overflow-y:auto}.navbar-links.mobile-open{right:0}.navbar-links li{width:100%}.navbar-link{display:block;width:100%;padding:var(--spacing-md);text-align:left;font-size:1.1rem;border-radius:0;border-left:4px solid transparent}.navbar-link:hover,.navbar-link.active{border-left-color:var(--color-accent);border-top:2px solid transparent;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:translate(5px)}.navbar-logout-btn{display:block;width:100%;padding:var(--spacing-md);text-align:left;font-size:1.1rem;border-radius:0;border-left:4px solid transparent;border-top:2px solid transparent;border-right:2px solid transparent;border-bottom:2px solid transparent;background:none}.navbar-logout-btn:hover{border-left-color:var(--color-accent);background:#950500cc;transform:translate(5px)}}@media (max-width: 480px){.navbar-brand{font-size:1rem}.navbar-logo{height:32px}.navbar-links{width:80%}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:var(--border-radius);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-border-light)}.modal-header h2{margin:0;font-size:24px;color:var(--color-text)}.close-btn{background:none;border:none;font-size:32px;color:var(--color-text-secondary);cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s,color .2s}.close-btn:hover{background:var(--color-background-alt);color:var(--color-text)}.suggestion-form{padding:24px}.form-section{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--color-border-light)}.form-section:last-of-type{border-bottom:none}.form-section h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--color-header)}.form-group{margin-bottom:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{display:block;font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:6px}.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:2px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:15px;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-header)}.form-group input:disabled{background:var(--color-background-alt);cursor:not-allowed;opacity:.7}.form-group textarea{resize:vertical;min-height:60px}.success-message{background:#d4edda;color:#155724;padding:12px 16px;border-radius:var(--border-radius-sm);border-left:4px solid #28a745;margin-bottom:16px;font-size:14px}.error-message{background:#f8d7da;color:var(--color-error);padding:12px 16px;border-radius:var(--border-radius-sm);border-left:4px solid var(--color-error);margin-bottom:16px;font-size:14px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border-light)}.btn-cancel,.btn-submit{padding:10px 20px;border-radius:var(--border-radius-sm);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s;border:none}.btn-cancel{background:var(--color-background-alt);color:var(--color-text)}.btn-cancel:hover{background:var(--color-border)}.btn-submit{background:var(--color-accent);color:#fff}.btn-submit:hover:not(:disabled){background:var(--color-accent-hover)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.modal-content{max-height:95vh}.form-row{grid-template-columns:1fr}.modal-header{padding:16px 20px}.suggestion-form{padding:20px}}.app-footer{background-color:var(--color-header);color:var(--color-light);padding:2rem 0;margin-top:auto;border-top:2px solid var(--color-accent)}.footer-content{max-width:1200px;margin:0 auto;padding:0 1.5rem;min-height:60px;display:flex;flex-direction:column;align-items:center;gap:1rem}.footer-links{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.footer-link{color:var(--color-light);text-decoration:none;transition:color .3s ease;font-size:.95rem;font-weight:400}.footer-link-button{background:none;border:none;cursor:pointer;padding:0;font-family:inherit;font-size:inherit;line-height:inherit}.footer-link:hover{color:#fff;text-decoration:underline}.footer-copyright{color:#ffffffb3;font-size:.85rem;text-align:center}@media (max-width: 768px){.footer-links{gap:1.5rem}.footer-link{font-size:.9rem}}.suggestion-btn{background:none;border:none;padding:6px;cursor:pointer;color:var(--color-text-secondary);border-radius:var(--border-radius-sm);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;opacity:.6}.suggestion-btn:hover{opacity:1;color:var(--color-header);background:#b4a1551a;transform:scale(1.1)}.suggestion-btn svg{display:block}.home-page{padding:var(--spacing-lg);max-width:var(--max-width-wide);margin:0 auto}.hero-section{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-xl) var(--spacing-lg)}.hero-title{font-size:3rem;color:var(--color-header);margin-bottom:var(--spacing-sm)}.hero-tagline{font-size:1.8rem;color:var(--color-accent);font-weight:600}.section-title{font-size:2rem;color:var(--color-header);margin-bottom:var(--spacing-sm);text-align:center}.section-description{text-align:center;color:var(--color-text-secondary);font-size:1rem;line-height:1.6;max-width:700px;margin:0 auto var(--spacing-lg)}.highlighted-work-section{margin-bottom:var(--spacing-xl)}.highlighted-work-card{background:#fff;border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--shadow-md);max-width:800px;margin:0 auto}.highlighted-work-card.loading,.highlighted-work-card.error{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-xl)}.work-header{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.work-title{font-size:2.8rem;margin-bottom:var(--spacing-sm);line-height:1.3;font-weight:700}.work-composer{font-size:1.1rem;margin-bottom:var(--spacing-sm)}.composer-by{color:var(--color-text-secondary);font-weight:400}.work-composer .composer-dates{color:var(--color-text-muted);font-size:1rem;font-weight:400}.composer-link,.work-link{color:var(--color-accent);text-decoration:none;font-weight:600;transition:all .3s ease}.work-title-link{color:var(--color-accent);text-decoration:none;font-weight:600;transition:all .3s ease;font-size:1.8rem;display:block}.work-title-link:hover,.composer-link:hover,.work-link:hover{text-decoration:underline}.composer-metadata,.work-metadata{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin-bottom:var(--spacing-sm)}.work-metadata{flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.composer-meta-item,.metadata-item{display:flex;gap:.5rem;align-items:center}.meta-label,.metadata-label{font-size:.95rem;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.meta-label:after,.metadata-label:after{content:":";margin-right:.25rem}.meta-value,.metadata-value{font-size:.95rem;color:var(--color-text)}.work-tags{margin-bottom:var(--spacing-lg);display:flex;gap:var(--spacing-xs);flex-wrap:wrap;align-items:center}.work-tags strong{color:var(--color-text)}.work-tag{background:var(--color-header);color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.9rem}.work-links{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.work-link{margin-right:var(--spacing-md);font-size:.95rem}.browse-section{margin-bottom:var(--spacing-xl)}.browse-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);max-width:900px;margin:0 auto}.browse-card{background:#fff;border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-xl);text-align:center;text-decoration:none;color:var(--color-text);box-shadow:var(--shadow-sm);transition:all .3s ease}.browse-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-4px)}.browse-card h3{font-size:1.8rem;color:var(--color-accent);margin-bottom:var(--spacing-sm);transition:all .3s ease}.browse-card:hover h3{text-decoration:underline}.browse-card p{color:var(--color-text-secondary);font-size:1rem}@media (max-width: 768px){.hero-title{font-size:2rem}.hero-tagline,.section-title,.work-title{font-size:1.8rem}.browse-cards{grid-template-columns:1fr}.highlighted-work-card{padding:var(--spacing-md)}}@media (max-width: 480px){.home-page{padding:var(--spacing-md)}.hero-section{padding:var(--spacing-lg) var(--spacing-sm)}.work-title{font-size:1.5rem}.composer-metadata,.work-metadata{flex-direction:column;gap:var(--spacing-xs)}}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);min-height:300px}.loading-spinner{width:50px;height:50px;border:4px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-message{margin-top:var(--spacing-md);color:var(--color-text-secondary);font-size:1rem}#root{width:100%;margin:0;padding:0}.App{display:flex;flex-direction:column;min-height:100vh;width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegidity;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#747bff}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:#fff}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: dark){:root{color-scheme:dark;color:#ffffffde;background-color:#242424}a:hover{color:#535bf2}button{background-color:#1a1a1a}body{background-color:#242424}}:root{--color-header: #b4a155;--color-accent: #950500;--color-accent-hover: #7a0400;--color-primary: #4CAF50;--color-primary-dark: #388E3C;--color-text: #333;--color-text-secondary: #666;--color-text-muted: #999;--color-link: #1976d2;--color-link-hover: #1565c0;--color-error: #d32f2f;--color-border: #ddd;--color-border-light: #eee;--color-background: #fafafa;--color-background-alt: #f5f5f5;--color-background-header: #f0f0f0;--font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--border-radius: 8px;--border-radius-sm: 4px;--max-width-narrow: 800px;--max-width-wide: 1400px;--max-width-content: 1200px;--font-size-xs: .9rem;--font-size-base: 1rem;--font-size-lg: 1.2rem;--font-size-xl: 2.5rem;--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--shadow-md: 0 4px 6px rgba(0,0,0,.1);--color-bg-secondary: #f9f9f9}.loading-state{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.error-state{text-align:center;padding:var(--spacing-xl);color:var(--color-error)}.page-container{padding:var(--spacing-lg);max-width:var(--max-width-wide);margin:0 auto}.page-container-narrow{padding:var(--spacing-lg);max-width:var(--max-width-content);margin:0 auto}*{box-sizing:border-box}body{margin:0;font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text);background-color:var(--color-background);min-height:100vh}a{color:var(--color-accent);text-decoration:none;transition:all .3s ease}a:hover{color:var(--color-accent-hover)}.container{padding:var(--spacing-lg);max-width:var(--max-width-wide);margin:0 auto}.container-narrow{padding:var(--spacing-lg);max-width:var(--max-width-narrow);margin:0 auto}.container-content{padding:var(--spacing-lg);max-width:var(--max-width-content);margin:0 auto}.text-center{text-align:center}.loading-state,.error-state,.empty-state{text-align:center;padding:var(--spacing-xl)}.error-state{color:var(--color-error)}.loading-state{color:var(--color-text-secondary)}.btn{padding:var(--spacing-xs) var(--spacing-md);border:2px solid transparent;border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-size-base);font-weight:600;font-family:var(--font-primary);transition:all .3s ease;box-shadow:var(--shadow-sm)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-secondary{background:var(--color-header);color:var(--color-text);border-color:var(--color-header)}.btn-secondary:hover{background:#9d8f48;border-color:#9d8f48;color:var(--color-background)}.page-header{text-align:center;margin-bottom:var(--spacing-lg)}.page-header h1{font-size:2.5rem;margin-bottom:var(--spacing-xs);color:var(--color-header);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.05)}.page-header p{font-size:var(--font-size-base);color:var(--color-text-secondary)}.btn-link{background:none;border:none;color:var(--color-accent);cursor:pointer;font-weight:600;padding:var(--spacing-xs);transition:all .3s ease;font-family:var(--font-primary)}.btn-link:hover{color:var(--color-accent-hover);transform:scale(1.05)}@media (max-width: 768px){:root{--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.25rem;--spacing-xl: 2rem}.container,.container-narrow,.container-content{padding:var(--spacing-md)}.page-header h1{font-size:1.8rem}.page-header p{font-size:.9rem}.btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem}}@media (max-width: 480px){:root{--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem}.page-header h1{font-size:1.5rem}.page-header p{font-size:.85rem}.btn{width:100%;padding:var(--spacing-sm)}}