:root{font-family:var(--font-body);line-height:1.5;font-weight:400;color:var(--color-text);background-color:var(--color-bg)}body{min-height:100dvh;font-family:inherit;line-height:inherit;font-weight:inherit;color:inherit;background-color:inherit}.app-container{max-width:720px;margin:0 auto;padding:2rem 1.5rem 2.5rem;text-align:center}.app-header{margin-bottom:2.25rem}.header-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;position:relative}h1{font-family:var(--font-heading);font-size:2.75rem;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--color-text);margin:0;padding:.1em 0 .15em;flex:1;text-align:center;text-wrap:balance}.mobile-menu-container{position:relative;display:none}.mobile-menu-button{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:4px;transition:background-color .2s}.mobile-menu-button:hover{background-color:var(--color-surface-alt)}.hamburger-icon{width:24px;height:18px;display:flex;flex-direction:column;justify-content:space-between}.hamburger-icon span{display:block;height:2px;width:100%;background-color:var(--color-text-secondary);border-radius:1px;transition:all .3s ease}.mobile-menu{position:absolute;top:100%;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);min-width:200px;margin-top:8px}.mobile-menu-item{display:block;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;border-bottom:1px solid var(--color-surface-alt);transition:background-color .2s;font-size:.9rem}.mobile-menu-item:last-child{border-bottom:none;border-radius:0 0 6px 6px}.mobile-menu-item:first-child{border-radius:6px 6px 0 0}.mobile-menu-item:hover{background-color:var(--color-surface-alt);color:var(--color-accent);text-decoration:none}.desktop-only{display:block}.mode-selector{display:flex;justify-content:stretch;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.mode-button{flex:1 1 0;background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;min-height:44px;min-width:44px;white-space:nowrap}.mode-button:hover{background-color:var(--color-border);border-color:var(--color-border-strong)}.mode-button:active{transform:scale(.97);transition-duration:60ms}.mode-button.active{background-color:var(--color-dark-secondary);color:var(--color-bg);border-color:var(--color-dark-secondary)}.more-dropdown{position:relative;display:inline-block}.more-button{background-color:var(--color-surface-alt);color:var(--color-text-light);border:1px solid var(--color-border)}.more-button:hover{background-color:var(--color-border);color:var(--color-text-secondary)}.dropdown-menu{position:absolute;top:100%;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);min-width:200px;margin-top:4px}.dropdown-item{display:block;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;border-bottom:1px solid var(--color-surface-alt);transition:background-color .2s;font-size:.9rem}.dropdown-item:last-child{border-bottom:none;border-radius:0 0 6px 6px}.dropdown-item:first-child{border-radius:6px 6px 0 0}.dropdown-item:hover{background-color:var(--color-surface-alt);color:var(--color-accent);text-decoration:none}.config-panel{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;padding:1rem;border-radius:6px;background-color:var(--color-surface);border:1px solid var(--color-border)}.config-item{display:flex;align-items:center;gap:.75rem;position:relative;min-width:150px}.config-item label{font-weight:500;color:var(--color-text-secondary);display:flex;align-items:center;gap:.25rem;font-size:.9rem}.config-item select{padding:.5rem;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-surface);font-size:.95rem;color:var(--color-text);cursor:pointer}.toggle-switch{position:relative;display:inline-block;width:60px;height:26px}.toggle-switch input[type=checkbox]{opacity:0;width:0;height:0;margin:0}.toggle-label{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-border-strong);transition:.4s;border-radius:26px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.toggle-label:after{content:"";position:absolute;height:18px;width:18px;left:4px;bottom:4px;background-color:var(--color-surface);transition:.4s;border-radius:50%}.toggle-switch input:checked+.toggle-label{background-color:var(--color-accent)}.toggle-switch input:checked+.toggle-label:after{transform:translate(34px)}.main-content{display:flex;flex-direction:column;align-items:stretch;gap:1rem}.staff-container{width:100%;margin:0 auto;padding:.5rem 1.5rem .75rem;border-radius:var(--radius-md);background-color:var(--color-surface);border:1px solid var(--color-border)}.staff{width:100%;display:flex;justify-content:center;margin-top:0}.note-name{font-family:var(--font-heading);font-size:2.5rem;font-weight:600;letter-spacing:-.02em;line-height:1;margin-top:.25rem;color:var(--color-text);font-variant-numeric:tabular-nums}.action-buttons{width:100%;display:flex;justify-content:center;gap:1rem;margin-top:.75rem;flex-wrap:wrap}.generate-button{background-color:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:.75rem 1.5rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,transform .12s ease;width:100%;max-width:300px;flex:2;min-height:44px;min-width:44px}.generate-button:hover{background-color:var(--color-accent-hover)}.generate-button:active{background-color:var(--color-accent-text);transform:scale(.98);transition-duration:60ms}.replay-button{background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1.5rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .12s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;flex:1;min-height:44px;min-width:44px}.replay-button.disabled{background-color:var(--color-surface-alt);color:var(--color-text-light);cursor:not-allowed;opacity:.6;border-color:var(--color-border)}.replay-button:hover:not(.disabled){background-color:var(--color-border);border-color:var(--color-border-strong)}.replay-button:active:not(.disabled){transform:scale(.97);transition-duration:60ms}.game-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.note-buttons-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;width:100%}.note-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%}.note-buttons-sharps{margin-bottom:.25rem}.note-buttons-naturals{margin:.25rem 0}.note-buttons-flats{margin-top:.25rem}.note-button{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:1.1rem;font-weight:500;color:var(--color-text);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .12s ease;min-width:60px;flex:1;max-width:calc(100% / 7 - .5rem)}.note-button-natural{background-color:var(--color-surface);border-color:var(--color-border)}.note-button-natural:hover{background-color:var(--color-surface-alt);border-color:var(--color-border-strong)}.note-button-sharp{background-color:var(--color-dark);color:var(--color-footer-heading);border-color:var(--color-dark-secondary)}.note-button-sharp:hover{background-color:var(--color-dark-secondary)}.note-button-flat{background-color:var(--color-dark-warm);color:var(--color-footer-heading);border-color:var(--color-dark-warm-hover)}.note-button-flat:hover{background-color:var(--color-dark-warm-hover)}.note-button:active{transform:scale(.96);transition-duration:60ms}.game-actions{display:flex;gap:1rem;margin-top:.75rem;width:100%;justify-content:center}.hint-button{background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1.5rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .12s ease;flex:1;max-width:200px;min-height:44px;min-width:44px}.hint-button:hover{background-color:var(--color-border);border-color:var(--color-border-strong)}.hint-button:active{background-color:var(--color-border);transform:scale(.97);transition-duration:60ms}.game-actions .replay-button{width:50px;height:50px;border-radius:50%;padding:0;font-size:1.3rem;flex:0 0 auto}.streak-header{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.streak-pill{background-color:var(--color-surface-alt);color:var(--color-text-secondary);padding:.4rem .9rem;border-radius:var(--radius-sm);display:flex;align-items:center;gap:.4rem;font-weight:500;font-size:.9rem;border:1px solid var(--color-border);font-variant-numeric:tabular-nums}.streak-icon{font-size:.95rem}.current-streak.has-streak{background-color:var(--color-accent-light);border-color:var(--color-streak-border);color:var(--color-accent-text);font-weight:600}.best-streak.new-record{background-color:var(--color-record-bg);border-color:var(--color-record-border);color:var(--color-record-text);font-weight:600}.hint-warning-text{color:var(--color-text-light);font-size:.9rem;text-align:center;margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.25rem}.hint-warning-icon{font-style:normal}.hint-warning-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#3d35318c;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.hint-warning-modal{background-color:var(--color-surface);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);max-width:400px;margin:1rem}.hint-warning-modal p{margin:0 0 1.5rem;color:var(--color-text);text-align:center}.hint-warning-buttons{display:flex;gap:1rem;justify-content:center}.hint-warning-buttons button{padding:.75rem 1.5rem;border:none;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:background-color .2s,transform .12s ease}.hint-warning-buttons button:active{transform:scale(.97);transition-duration:60ms}.hint-warning-buttons button:first-child{background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border)}.hint-warning-buttons button:first-child:hover{background-color:var(--color-border)}.hint-warning-buttons button:last-child{background-color:var(--color-accent);color:#fff}.hint-warning-buttons button:last-child:hover{background-color:var(--color-accent-hover)}.feedback{padding:.6rem 1.25rem;border-radius:4px;font-size:1rem;font-weight:500;margin:1rem 0;text-align:center;animation:fadeIn .2s ease-out}.feedback.success{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.feedback.error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.timer-challenge{width:100%}.challenge-header{display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem;background-color:var(--color-surface);border-radius:6px;border:1px solid var(--color-border)}.timer{font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}.score{font-weight:600;color:var(--color-success);font-variant-numeric:tabular-nums}.challenge-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.challenge-actions{display:flex;justify-content:center;margin-bottom:1rem}.challenge-actions .replay-button{width:50px;height:50px;border-radius:50%;padding:0;font-size:1.3rem}.challenge-start{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background-color:var(--color-surface);border-radius:6px;border:1px solid var(--color-border)}.challenge-start h2{font-family:var(--font-heading);margin:0;color:var(--color-text)}.last-score{color:var(--color-text-light);font-size:.9rem;margin-top:1rem}.timer-last-score{background-color:var(--color-surface);padding:1rem;border-radius:6px;border:1px solid var(--color-border);margin-bottom:1rem;color:var(--color-text-light);font-weight:500}.ear-training{width:100%;display:flex;flex-direction:column;gap:1.5rem}.range-selector{background-color:var(--color-surface);border-radius:6px;padding:1.5rem;border:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;gap:1rem}.range-selector h3{margin:0;color:var(--color-text);font-size:1.25rem;text-align:center}.octave-range{display:flex;gap:2rem;width:100%;justify-content:center}.range-item{display:flex;align-items:center;gap:.75rem}.range-item label{font-weight:600;color:var(--color-text)}.range-item select{padding:.5rem;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-surface);font-size:1rem;color:var(--color-text);cursor:pointer}.ear-interface{width:100%;background-color:var(--color-surface);border-radius:6px;padding:1.5rem;border:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;gap:1.25rem}.ear-interface h2{font-family:var(--font-heading);margin:0;color:var(--color-text);font-size:1.5rem}.sound-controls{display:flex;justify-content:center;width:100%;gap:1rem;margin-bottom:.5rem;flex-wrap:wrap}.reference-button{background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem 1.5rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .12s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;flex:1;min-height:44px;min-width:44px}.reference-button:hover{background-color:var(--color-border);border-color:var(--color-border-strong)}.reference-button:active{transform:scale(.97);transition-duration:60ms}.ear-note-buttons{margin-top:.5rem}.ear-generate{margin-top:1rem;max-width:250px}.social-share-container{position:fixed;bottom:20px;right:20px;z-index:var(--z-sticky);display:flex;flex-direction:column;align-items:flex-end}.social-share-container.mobile .share-toggle-button{width:40px;height:40px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;opacity:.8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.social-share-container.mobile .share-toggle-button:hover{opacity:1}.social-share-container.mobile .social-buttons{max-width:250px}.social-share-container.mobile .social-button{padding:8px}.social-share-container.mobile .social-name{font-size:13px}.share-toggle-button{background-color:var(--color-accent);color:#fff;border:none;border-radius:50px;padding:8px 16px;font-size:14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color .15s ease,transform .12s ease;display:flex;align-items:center;gap:5px}.share-toggle-button:active{transform:scale(.97);transition-duration:60ms}.share-toggle-button:hover{background-color:var(--color-accent-hover)}.social-buttons{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;background-color:var(--color-surface);border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow-md);animation:fadeIn .3s ease}.social-button{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:4px;text-decoration:none;color:var(--color-text);font-size:14px;transition:all .2s ease}.social-button:hover{background-color:var(--color-surface-alt)}.social-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:16px}.social-button.twitter .social-icon{color:#1da1f2}.social-button.x .social-icon{color:#000}.social-button.facebook .social-icon{color:#4267b2}.social-button.whatsapp .social-icon{color:#25d366}.social-button.tiktok .social-icon{color:#000}.social-button.telegram .social-icon{color:#08c}.social-button.linkedin .social-icon{color:#0077b5}.social-button.email .social-icon{color:#ea4335}.contact-suggestion{margin-top:3rem;padding:1.5rem;background-color:var(--color-surface-alt);border-radius:6px;text-align:center;font-size:.9rem;color:var(--color-text-light)}.contact-suggestion a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}.contact-suggestion a:hover{text-decoration:underline}@media (max-width: 768px){.app-container{padding:1rem}h1{font-size:1.8rem;margin-bottom:1rem}.mobile-menu-container{display:block}.desktop-only{display:none}.config-panel{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem;align-items:center;margin-bottom:1rem}.config-item{justify-content:space-between;min-width:auto;gap:.5rem}.config-item label{font-size:.85rem;font-weight:500}.config-item select{padding:.35rem;font-size:.85rem;min-width:0;flex:1}.toggle-switch{width:44px;height:22px}.toggle-label:after{height:14px;width:14px;left:4px;bottom:4px}.toggle-switch input:checked+.toggle-label:after{transform:translate(22px)}.staff-container{padding:.75rem .5rem}.note-name{font-size:2rem;margin-top:1rem}.main-content{gap:1rem}.note-buttons-container{gap:.35rem;margin-top:.5rem}.note-buttons{flex-direction:row;flex-wrap:wrap;gap:.35rem}.note-button{width:auto;flex:0 0 calc(20% - .35rem);padding:.6rem .4rem;font-size:.9rem;min-width:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.note-buttons-sharps .note-button,.note-buttons-flats .note-button{flex:0 0 calc(20% - .35rem);font-size:.85rem}.game-actions{flex-direction:row;gap:.5rem}.hint-button,.generate-button,.replay-button{padding:.6rem .75rem;font-size:1rem}.game-actions .replay-button,.challenge-actions .replay-button{width:40px;height:40px;font-size:1.1rem}.mode-selector{gap:.35rem;margin-bottom:1rem}.mode-button{padding:.5rem .75rem;font-size:.8rem;font-weight:500;flex:1;min-width:0;text-align:center}.more-dropdown{flex:0 0 auto}.more-button{padding:.5rem .6rem;font-size:.8rem;min-width:auto}.dropdown-menu{right:0;min-width:180px}.dropdown-item{padding:.6rem .8rem;font-size:.85rem}.challenge-header{padding:.75rem}.streak-pill{padding:.4rem .8rem;font-size:.9rem}.streak-icon{font-size:1rem}.octave-range{flex-direction:column;gap:1rem}.range-item{justify-content:space-between}.ear-interface h2{font-size:1.3rem}.sound-controls{flex-direction:column}.reference-button{padding:.6rem .75rem;font-size:1rem}.social-share-container{position:fixed;bottom:auto;top:20px;right:20px}.social-buttons{position:absolute;right:0;top:100%;margin-top:10px;width:200px}.contact-suggestion{margin-top:2rem;padding:1rem}}@media (max-width: 480px){.app-container{padding:.75rem}h1{font-size:1.6rem;margin-bottom:.75rem}.mobile-menu-container{display:block}.desktop-only{display:none}.config-panel{display:grid;grid-template-columns:1fr;gap:.5rem;padding:.4rem;margin-bottom:.75rem}.config-item{gap:.4rem}.config-item label{font-size:.8rem;font-weight:500}.config-item select{padding:.3rem;font-size:.8rem}.toggle-switch{width:40px;height:20px}.toggle-label:after{height:12px;width:12px;left:4px;bottom:4px}.toggle-switch input:checked+.toggle-label:after{transform:translate(20px)}.note-button{padding:.5rem .3rem;font-size:.8rem;flex:0 0 calc(20% - .3rem)}.note-buttons-sharps .note-button,.note-buttons-flats .note-button{flex:0 0 calc(20% - .3rem);font-size:.75rem;padding:.4rem .25rem}.feedback{padding:.6rem 1rem;font-size:1.1rem}.mode-selector{gap:.25rem;margin-bottom:.75rem}.mode-button{padding:.4rem .6rem;font-size:.75rem;font-weight:500;flex:1;min-width:0}.more-button{padding:.4rem .5rem;font-size:.75rem}.dropdown-menu{min-width:160px}.dropdown-item{padding:.5rem .7rem;font-size:.8rem}.challenge-start h2{font-size:1.4rem}.challenge-start p{font-size:.9rem}.last-score{font-size:.85rem}.hint-warning-modal{padding:1.5rem;margin:.5rem}.hint-warning-modal p{font-size:.9rem}.hint-warning-buttons button{padding:.6rem 1rem;font-size:.9rem}.social-share-container{bottom:20px;top:auto}.share-toggle-button{padding:6px 12px;font-size:12px}.social-buttons{width:180px;right:0;bottom:100%;top:auto;margin-bottom:10px;margin-top:0}}.educational-content{max-width:680px;margin:0 auto;padding:20px;line-height:1.7;color:var(--color-text);text-align:left}.educational-content section{margin-bottom:40px;padding:24px;background:var(--color-surface);border-radius:6px;border:1px solid var(--color-border)}.educational-content h2{font-family:var(--font-heading);color:var(--color-text);border-bottom:1px solid var(--color-border);padding-bottom:10px;margin-bottom:20px}.educational-content h3{font-family:var(--font-heading);color:var(--color-text);margin-top:25px;margin-bottom:15px}.educational-content h4{color:var(--color-text-secondary);margin-top:20px;margin-bottom:10px}.educational-content p{margin-bottom:15px;text-align:left}.educational-content ul{margin:15px 0;padding-left:30px}.educational-content li{margin-bottom:8px}.educational-content strong{color:var(--color-text);font-weight:600}.intro-section,.music-theory-section,.app-guide-section,.tips-section,.about-section,.next-steps-section{background:var(--color-surface);border-left:3px solid var(--color-accent)}.intro-section h2,.intro-section h3{color:var(--color-text);border-bottom:1px solid var(--color-border)}.intro-section strong{color:var(--color-text)}@media (max-width: 768px){.educational-content{padding:15px;max-width:100%}.educational-content section{padding:15px;margin-bottom:25px}.educational-content h2{font-size:1.5em}.educational-content h3{font-size:1.3em}}.mode-button.game-mode{background-color:var(--color-accent);color:#fff;font-weight:600;border:1px solid var(--color-accent)}.mode-button.game-mode:hover,.mode-button.game-mode.active{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.resources-showcase{max-width:1000px;margin:0 auto;padding:2rem 1rem}.showcase-header{text-align:center;margin-bottom:3rem}.showcase-header h2{font-family:var(--font-heading);color:var(--color-hero-bg);font-size:2.5rem;margin-bottom:1rem;font-weight:700}.showcase-header p{color:var(--color-text-light);font-size:1.1rem;max-width:600px;margin:0 auto;line-height:1.6}.resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}.resource-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:2rem;transition:transform .2s ease,box-shadow .2s ease;border:none;box-shadow:var(--shadow-md);text-align:center;position:relative}.resource-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.resource-card.featured{background:var(--color-hero-bg);color:#fff;border:none}.resource-card.featured:hover{background:var(--color-accent-hover);box-shadow:0 8px 24px #c2714e47}.card-icon{font-size:2.5rem;margin-bottom:1rem;display:block}.resource-card.featured .card-icon{filter:brightness(1.2)}.resource-card h3{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:1rem;font-weight:600;color:inherit}.resource-card p{color:var(--color-text-light);line-height:1.6;margin-bottom:1.5rem;font-size:.95rem}.resource-card.featured p{color:#ffffffe6}.card-link{display:inline-block;background:var(--color-accent);color:#fff;padding:.6rem 1.25rem;border-radius:4px;text-decoration:none;font-weight:500;font-size:.9rem;transition:background-color .15s ease}.card-link:hover{background:var(--color-accent-hover)}.resource-card.featured .card-link{background:#fff;color:var(--color-accent-hover)}.resource-card.featured .card-link:hover{background:var(--color-bg)}.showcase-cta{background:var(--color-cta-bg);color:var(--color-cta-text);padding:2.5rem;border-radius:var(--radius-lg);text-align:center;border:none}.showcase-cta h3{font-family:var(--font-heading);color:#fff;font-size:1.6rem;margin-bottom:1rem;font-weight:700}.showcase-cta p{color:#ffffffe6;font-size:1rem;margin-bottom:2rem;line-height:1.6}.mode-suggestions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.suggestion-button{background:#fff3;border:2px solid rgba(255,255,255,.6);color:#fff;padding:.85rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-size:1rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .12s ease;min-width:140px;min-height:44px}.suggestion-button:hover{background:#ffffff59;border-color:#fff}.suggestion-button:active{transform:scale(.97);transition-duration:60ms}.suggestion-button.featured{background:#fff;border-color:#fff;color:var(--color-cta-bg)}.suggestion-button.featured:hover{background:#ffffffe6}@media (max-width: 768px){.showcase-header h2{font-size:2rem}.showcase-header p{font-size:1rem}.resources-grid{grid-template-columns:1fr;gap:1rem}.resource-card{padding:1.5rem}.showcase-cta{padding:2rem 1.5rem}.mode-suggestions{flex-direction:column;align-items:center}.suggestion-button{width:100%;max-width:250px}}*{margin:0;padding:0;box-sizing:border-box}button{font-family:inherit}footer{text-align:center;margin-top:20px;padding:10px;font-size:.8em;color:var(--color-text-light)}footer p{margin:.25rem 0}footer a{color:var(--color-accent);text-decoration:none;margin-right:15px}footer a:hover{text-decoration:underline}footer a:last-child{margin-right:0}