:root{--color-bg:#fdf0d0;--color-bg-alt:#f5e0b0;--color-surface:#fffcf0d9;--color-surface-solid:#fff9;--color-surface-hover:#ffffffd9;--color-text:#3d1800;--color-text-muted:#9b6a30;--color-text-soft:#6b4010;--color-primary:#5c2d00;--color-accent:#8b4513;--color-accent-light:#c0703a;--color-accent-warm:#7a3a0e;--color-border:#b4823c59;--color-border-strong:#b4823c99;--color-shadow:#643c001f;--color-shadow-deep:#8b45134d;--color-canvas-bg:#fffcf0d9;--color-canvas-border:#b4823c66;--color-ghost:#8b5a2b2e;--color-btn-clear-bg:#dcb4784d;--color-btn-nav-bg:#fff9;--color-btn-showme-bg:#8b45131a;--color-btn-ai-bg:linear-gradient(135deg, #8b4513, #c0703a);--color-btn-alpha-bg:#ffffff80;--color-btn-alpha-hover:#fff8e6f2;--color-dot-complete:#5a9e4e;--color-dot-started:#c0703a;--color-offline-bg:#b4823c33;--color-feedback-error-bg:#ffebebe6;--color-feedback-error-border:#c8646466;--color-feedback-error-text:#8b2000;--color-star-filled:#c0703a;--color-star-empty:#b4823c40;--color-form-active-bg:linear-gradient(150deg, #7a3a0e, #c0703a);--color-input-bg:#fffcf0e6;--color-progress-badge-bg:#b4823c26;--color-scrollbar-thumb:#8b5a2b59;--color-scrollbar-thumb-hover:#8b5a2b99;--color-outline:#c0703a;--color-gradient-start:#fdf0d0;--color-gradient-mid:#f5e0b0;--color-gradient-end:#eedfa8;--color-link:#8b4513;--color-card-bg:#ffffffb3}[data-theme=dark]{--color-bg:#1a0e05;--color-bg-alt:#2b1508;--color-surface:#231205e0;--color-surface-solid:#231205bf;--color-surface-hover:#371c08e0;--color-text:#f5e0b0;--color-text-muted:#c0905a;--color-text-soft:#d4a870;--color-primary:#e8c89a;--color-accent:#c0703a;--color-accent-light:#d4905a;--color-accent-warm:#a0602a;--color-border:#c0703a59;--color-border-strong:#c0703a99;--color-shadow:#0006;--color-shadow-deep:#00000080;--color-canvas-bg:#1e0f04e6;--color-canvas-border:#c0703a73;--color-ghost:#c0703a26;--color-btn-clear-bg:#3c1e0a80;--color-btn-nav-bg:#32190899;--color-btn-showme-bg:#32190866;--color-btn-ai-bg:linear-gradient(135deg, #7a3a0e, #c0703a);--color-btn-alpha-bg:#3219088c;--color-btn-alpha-hover:#46230ce6;--color-dot-complete:#6abf5e;--color-dot-started:#d4905a;--color-offline-bg:#3c1e0a80;--color-feedback-error-bg:#320f0fe6;--color-feedback-error-border:#c8505066;--color-feedback-error-text:#e88080;--color-star-filled:#d4905a;--color-star-empty:#c0703a4d;--color-form-active-bg:linear-gradient(150deg, #8b4513, #d4905a);--color-input-bg:#1e0f04e6;--color-progress-badge-bg:#c0703a33;--color-scrollbar-thumb:#c0703a66;--color-scrollbar-thumb-hover:#c0703aa6;--color-outline:#d4905a;--color-gradient-start:#1a0e05;--color-gradient-mid:#2b1508;--color-gradient-end:#231008;--color-link:#d4905a;--color-card-bg:#231205cc}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);transition:background .2s}html[lang=ar] body,[data-locale=ar] body{direction:rtl}.skip-link{background:var(--color-accent);color:#fff8ee;z-index:9999;border-radius:0 0 8px 8px;padding:8px 16px;font-family:Georgia,serif;font-size:14px;text-decoration:none;transition:top .15s;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{outline:2px solid var(--color-outline);outline-offset:2px;top:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-thumb-hover)}button{cursor:pointer;transition:opacity .12s,transform .1s,box-shadow .12s,background .12s,color .15s}button:active:not(:disabled){transform:scale(.96)}button:disabled{cursor:not-allowed}.btn-nav:hover:not(:disabled){box-shadow:0 2px 8px var(--color-shadow-deep);background:var(--color-surface-hover)!important}.btn-nav:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}.btn-clear:hover:not(:disabled){background:var(--color-btn-clear-bg)!important}.btn-clear:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}.btn-ai:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 18px var(--color-shadow-deep)!important}.btn-ai:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}.btn-form:hover:not(:disabled){background:var(--color-surface-hover)!important;border-color:var(--color-border-strong)!important}.btn-form:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}.btn-alpha:hover:not(:disabled){transform:scale(1.12);background:var(--color-btn-alpha-hover)!important;border-color:var(--color-border-strong)!important}.btn-alpha:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}.btn-gear:hover{color:var(--color-primary)!important}.btn-gear:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px;border-radius:4px}.btn-panel:hover{background:var(--color-surface-hover)!important}.btn-panel:focus-visible,select:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}input[type=range]{accent-color:var(--color-accent)}input[type=range]:focus-visible{outline:2px solid var(--color-outline);outline-offset:3px;border-radius:4px}.btn-history:hover{color:var(--color-primary)!important}.btn-history:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px;border-radius:4px}@media (width<=399px){.practice-root{gap:6px!important;padding:10px 8px 24px!important}.alpha-row-wrap{overflow-x:auto;flex-wrap:nowrap!important;justify-content:flex-start!important;max-width:100%!important;padding:6px 4px!important}.alpha-row-wrap::-webkit-scrollbar{height:0}.canvas-max{max-width:100%!important}.btn{padding:8px 12px!important;font-size:13px!important}.info-bar{padding:6px 10px!important}.form-switcher{gap:6px!important}}@media (width>=400px) and (width<=639px){.practice-root{padding:14px 10px 28px!important}.canvas-max{max-width:100%!important}}@media (width>=640px) and (width<=899px){.practice-root{padding:16px 20px 36px!important}.canvas-max{max-width:min(480px,100%)!important}}@media (width>=900px){.practice-root{padding:20px 24px 48px!important}}