:root{--primary-color:#198754;--primary-dark:#0d5a3a;--secondary-color:#6c757d;--success-color:#28a745;--warning-color:#ffc107;--danger-color:#dc3545;--info-color:#17a2b8;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-nko:"Koli Nko Manden",serif;--border-radius:0.375rem;--box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.075);--box-shadow-lg:0 0.5rem 1rem rgba(0,0,0,.15);--transition-base:all 0.2s ease-in-out;--transition-fast:all 0.15s ease-in-out;--transition-slow:all 0.3s ease-in-out;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--z-index-toast:1080}@font-face{font-display:swap;font-family:Koli Nko Manden;font-style:normal;font-weight:700;src:url(../fonts/KOLINKO0.eot);src:url(../fonts/KOLINKO0.eot?#iefix) format("embedded-opentype"),url(../fonts/KOLINM__.TTF) format("truetype")}.sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}:focus{outline:2px solid var(--primary-color);outline-offset:2px}.skip-link{background:var(--primary-color);border-radius:var(--border-radius);color:#fff;left:6px;padding:8px;position:absolute;text-decoration:none;top:-40px;transition:var(--transition-fast);z-index:var(--z-index-tooltip)}.skip-link:focus{top:6px}.audio-loading{opacity:.7;pointer-events:none;position:relative}.loading-spinner{color:var(--primary-color);font-size:1.2rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:var(--z-index-popover)}.audio-visual-feedback{animation:pulse-feedback 1s ease-in-out;background-color:rgba(25,135,84,.1)!important}.audio-success{animation:success-flash .5s ease-in-out}@keyframes pulse-feedback{0%,to{background-color:rgba(25,135,84,.1);transform:scale(1)}50%{background-color:rgba(25,135,84,.2);transform:scale(1.05)}}@keyframes success-flash{0%,to{background-color:transparent}50%{background-color:rgba(40,167,69,.3)}}.vowel-card{border:2px solid transparent;cursor:pointer;overflow:hidden;position:relative;transition:var(--transition-slow)}.vowel-card:focus,.vowel-card:hover{border-color:var(--primary-color);box-shadow:var(--box-shadow-lg);transform:translateY(-5px)}.vowel-card:active{transform:translateY(-2px) scale(.98)}.vowel-card:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:var(--transition-slow);width:100%}.vowel-card:hover:before{left:100%}.consonant-row{border-left:3px solid transparent;cursor:pointer;transition:var(--transition-base)}.consonant-row:focus,.consonant-row:hover{background-color:rgba(248,249,250,.8);border-left-color:var(--primary-color);transform:translateX(5px)}.consonant-row:active{background-color:rgba(25,135,84,.1)}.toast-notification{background:#fff;border-radius:8px;bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.15);left:50%;min-width:300px;padding:16px 24px;position:fixed;text-align:center;transform:translateX(-50%) translateY(100px);transition:transform .3s ease;z-index:var(--z-index-toast)}.toast-notification.show{transform:translateX(-50%) translateY(0)}.toast-error{background:#dc3545;color:#fff}.toast-info{background:#17a2b8;color:#fff}.toast-success{background:#198754;color:#fff}.toast-content{align-items:center;display:flex;gap:.5rem}.toast-content i{font-size:1.1rem}.progress-indicator{display:inline-block;height:20px;margin-right:.5rem;position:relative;width:20px}.progress-indicator,.progress-indicator:after{border-radius:50%;transition:var(--transition-base)}.progress-indicator:after{background:#fff;content:"";height:8px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.progress-completed{background-color:var(--success-color)}.progress-completed:after{align-items:center;background:#fff;color:var(--success-color);content:"✓";display:flex;font-size:10px;height:14px;justify-content:center;opacity:1;width:14px}.progress-current{animation:pulse-current 2s infinite;background-color:var(--warning-color)}.progress-pending{background-color:var(--secondary-color)}@keyframes pulse-current{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.learning-sidebar{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-right:3px solid var(--primary-color);min-height:calc(100vh - 200px);position:relative}.learning-sidebar:before{background:linear-gradient(to bottom,transparent,var(--primary-color),transparent);content:"";height:100%;opacity:.3;position:absolute;right:0;top:0;width:1px}.learning-sidebar .nav-link{align-items:center;border-radius:var(--border-radius);color:#495057;display:flex;margin:.25rem 0;padding:.75rem 1rem;position:relative;transition:var(--transition-base)}.learning-sidebar .nav-link:hover{background-color:rgba(233,236,239,.8);color:var(--primary-color);transform:translateX(5px)}.learning-sidebar .nav-link.active{background-color:var(--primary-color);box-shadow:var(--box-shadow);color:#fff}.loading{pointer-events:none;position:relative}.loading:after{align-items:center;background:hsla(0,0%,100%,.8);bottom:0;content:"";display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:var(--z-index-modal)}.nko-text{direction:rtl;font-family:var(--font-family-nko);font-feature-settings:"liga" 1,"calt" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{height:auto;max-width:100%}.img-optimized{loading:lazy;decoding:async}@media print{.audio-button,.loading-spinner,.navbar,.play-button,.toast-notification{display:none!important}.nko-text,a{color:#000!important}a{text-decoration:none!important}a:after{color:#666;content:" (" attr(href) ")";font-size:.8em}}@media (prefers-contrast:high){:root{--primary-color:#000;--primary-dark:#000;--secondary-color:#666}.consonant-row,.vowel-card{border-color:#000!important}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.progress-current{animation:none}}@media (prefers-color-scheme:dark){:root{--primary-color:#20c997;--primary-dark:#198754}.card,.learning-sidebar,.toast-notification{background-color:#2d3748;color:#e2e8f0}}@media (max-width:768px){.vowel-card{margin-bottom:1rem}.vowel-character{font-size:6rem}.consonant-row{padding:1rem .5rem}.toast-notification{left:10px;max-width:none;right:10px;top:10px}.audio-button{font-size:1.1rem;padding:.75rem}}@media (min-width:768px) and (max-width:1024px){.learning-sidebar{position:sticky;top:80px}}.will-change-transform{will-change:transform}.will-change-opacity{will-change:opacity}.text-shadow{text-shadow:1px 1px 2px rgba(0,0,0,.1)}.border-success-subtle{border-color:rgba(25,135,84,.3)!important}.bg-success-subtle{background-color:rgba(25,135,84,.1)!important}.audio-played{position:relative}.audio-played:after{align-items:center;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#198754;content:"\f00c";display:flex;font-family:Font Awesome\ 5 Free;font-size:20px;font-weight:900;height:30px;justify-content:center;position:absolute;right:10px;top:10px;width:30px}[data-theme=dark] .audio-played:after{background:var(--bg-dark);color:#25d366}