:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--board-size:min(78vw, 560px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--page);min-width:320px;min-height:100vh;margin:0}button{font:inherit}.app{--page:#f7f4ee;--text:#1f2933;--muted:#65717d;--panel:#fffaf1;--panel-border:#d8d1c5;--button:#fffaf1;--button-text:#27323b;--accent:#21698e;--accent-contrast:#fff;--strong:#28313a;--active-text:#fff;--hover:#a97d4f;--board-border:#3a2c22;--board-light:#efd9b5;--board-dark:#946a43;--progress-bg:#ddd3c3;--tag-bg:#e9f2f5;--highlight-from:#21698ec7;--highlight-to:#f2be4d75;--move-glow:#f2be4df2;--shadow:#2f261d2e;--piece-shadow:#140e0938;min-height:100vh;color:var(--text);background:var(--page);grid-template-columns:260px minmax(320px,1fr) 320px;gap:24px;padding:24px 24px 64px;transition:background .22s,color .22s;display:grid}.site-footer{z-index:20;border-top:1px solid var(--panel-border);background:color-mix(in srgb, var(--panel) 92%, transparent);color:var(--muted);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;padding:10px 16px;display:flex;position:fixed;bottom:0;left:0;right:0}.site-footer a{color:inherit;text-align:center;font-size:.86rem;line-height:1.35;text-decoration:none}.site-footer a:hover{color:var(--accent)}.app.theme-crt{--page:#020603;--text:#d9ffd2;--muted:#84bd79;--panel:#071209;--panel-border:#1f6a2b;--button:#071209;--button-text:#d9ffd2;--accent:#b8ff4d;--accent-contrast:#031205;--strong:#0d2f13;--active-text:#d9ffd2;--hover:#b8ff4d;--board-border:#071e0a;--board-light:#a6ff3f;--board-dark:#08230d;--progress-bg:#123d19;--tag-bg:#102d14;--highlight-from:#b8ff4de6;--highlight-to:#3dff5c57;--move-glow:#b8ff4df2;--shadow:#00ff482e;--piece-shadow:#b8ff4d73;text-shadow:0 0 7px #b8ff4d3d;background:linear-gradient(#b8ff4d09 50%, #0000000d 50%), radial-gradient(circle at 50% 20%, #41ff6414, transparent 42%), var(--page);background-size:100% 4px,100% 100%,auto;font-family:Cascadia Mono,Consolas,Courier New,monospace}.app.theme-quito{--page:#f5f7ff;--text:#111f3f;--muted:#50607d;--panel:#fff;--panel-border:#c9d4ea;--button:#fff;--button-text:#111f3f;--accent:#d71920;--accent-contrast:#fff;--strong:#003b8f;--active-text:#fff;--hover:#d71920;--board-border:#062b67;--board-light:#f7f9ff;--board-dark:#1f5fbf;--progress-bg:#cbd8f4;--tag-bg:#eaf0ff;--highlight-from:#d71920e0;--highlight-to:#ffd34d8c;--move-glow:#d71920eb;--shadow:#062b6733;--piece-shadow:#062b6747;background:linear-gradient(135deg, #003b8f14, transparent 35%), linear-gradient(315deg, #d7192014, transparent 38%), var(--page)}.sidebar,.lesson{align-self:start}.brand{margin-bottom:22px}.brand h1{margin:0 0 6px;font-size:1.6rem;line-height:1.1}.brand p,.lesson p{color:var(--muted);margin:0;line-height:1.55}.theme-picker,.opening-select{gap:6px;margin-bottom:14px;display:grid}.theme-picker span,.opening-select span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}.theme-picker select,.opening-select select{border:1px solid var(--panel-border);background:var(--button);width:100%;color:var(--button-text);border-radius:8px;padding:10px 12px}.tabs{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;display:grid}.tabs button,.family-filter button,.variant-list button{border:1px solid var(--panel-border);background:var(--button);color:var(--button-text);cursor:pointer;border-radius:8px;transition:background .18s,border-color .18s,color .18s}.tabs button{min-height:38px;padding:8px 6px;font-size:.88rem}.tabs button.active,.family-filter button.active,.variant-list button.current{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.family-filter{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.family-filter button{padding:7px 9px;font-size:.82rem}.opening-list{gap:8px;display:grid}.opening-button{border:1px solid var(--panel-border);background:var(--button);width:100%;color:var(--button-text);text-align:left;cursor:pointer;border-radius:8px;padding:12px;transition:background .18s,border-color .18s,transform .18s}.opening-button:hover{border-color:var(--hover);transform:translateY(-1px)}.opening-button.active{background:var(--strong);border-color:var(--accent);color:var(--active-text)}.opening-button span{color:inherit;opacity:.7;margin-top:4px;font-size:.84rem;display:block}.hint-card{border:1px solid var(--panel-border);background:var(--panel);border-radius:8px;padding:14px}.hint-card strong{margin-bottom:6px;display:block}.hint-card p{color:var(--muted);margin:0;line-height:1.5}.board-area{align-content:center;justify-items:center;gap:16px;min-height:calc(100vh - 48px);display:grid}.board-shell{width:var(--board-size);max-width:100%}.board-frame{grid-template-rows:24px 1fr 24px;grid-template-columns:24px 1fr 24px;align-items:stretch;width:100%;display:grid}.coordinates{color:var(--muted);text-transform:uppercase;-webkit-user-select:none;user-select:none;grid-template-columns:repeat(8,1fr);place-items:center;font-size:.82rem;font-weight:750;display:grid}.coordinates.vertical{grid-template-rows:repeat(8,1fr);grid-template-columns:1fr}.board{aspect-ratio:1;border:10px solid var(--board-border);width:100%;box-shadow:0 18px 40px var(--shadow);border-radius:8px;position:relative;overflow:hidden}.squares{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:absolute;inset:0}.square{position:relative}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.highlight-from:after,.square.highlight-to:after{content:"";pointer-events:none;border-radius:6px;position:absolute;inset:8%}.square.highlight-from:after{border:3px solid var(--highlight-from)}.square.highlight-to:after{background:var(--highlight-to)}.piece{z-index:2;width:12.5%;height:12.5%;transform:translate(calc(var(--file) * 100%), calc(var(--rank) * 100%));will-change:transform;padding:.55%;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .18s;position:absolute}.piece img{width:100%;height:100%;filter:drop-shadow(0 4px 4px var(--piece-shadow));border-radius:999px;display:block}.piece-moved img{animation:.9s ease-out piece-glow}@keyframes piece-glow{0%{box-shadow:0 0 0 0 var(--move-glow);transform:scale(1)}28%{box-shadow:0 0 0 8px color-mix(in srgb, var(--move-glow) 42%, transparent);transform:scale(1.08)}to{transform:scale(1);box-shadow:0 0 #0000}}.theme-crt .piece img{filter:grayscale(1) contrast(1.25) sepia(1) hue-rotate(55deg) saturate(1.7) drop-shadow(0 0 7px var(--piece-shadow))}.controls{width:var(--board-size);grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;max-width:100%;display:grid}.icon-button{border:1px solid var(--panel-border);background:var(--button);height:44px;color:var(--button-text);cursor:pointer;border-radius:8px}.icon-button:disabled{opacity:.4;cursor:not-allowed}.progress{background:var(--progress-bg);border-radius:999px;height:8px;overflow:hidden}.progress span{height:100%;width:var(--progress);background:var(--accent);transition:width .24s;display:block}.lesson{gap:18px;display:grid}.lesson h2{margin:0;font-size:1.5rem}.move-card{border:1px solid var(--panel-border);background:var(--panel);border-radius:8px;padding:16px}.move-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}.move-text{margin-top:6px;font-size:1.5rem;font-weight:750}.move-tag{background:var(--tag-bg);color:var(--accent);border-radius:999px;margin-top:8px;padding:5px 9px;font-size:.82rem;font-weight:700;display:inline-flex}.move-note{color:var(--text);margin-top:10px;line-height:1.5}.line{flex-wrap:wrap;gap:6px;display:flex}.line button{border:1px solid var(--panel-border);background:var(--button);color:var(--button-text);cursor:pointer;border-radius:999px;padding:7px 10px}.line button.current{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.variant-list{flex-wrap:wrap;gap:8px;display:flex}.variant-list button{padding:8px 10px;font-size:.9rem}.glossary-grid{gap:10px;max-height:calc(100vh - 150px);padding-right:4px;display:grid;overflow:auto}.term-card{border:1px solid var(--panel-border);background:var(--panel);border-radius:8px;padding:14px}.term-card h3{margin:0 0 6px;font-size:1rem}.term-card p{color:var(--text);margin:0;line-height:1.45}.theme-crt .board,.theme-crt .move-card,.theme-crt .term-card,.theme-crt .hint-card,.theme-crt .opening-button,.theme-crt .tabs button,.theme-crt .family-filter button,.theme-crt .variant-list button,.theme-crt .line button,.theme-crt .icon-button,.theme-crt .theme-picker select,.theme-crt .opening-select select{box-shadow:inset 0 0 0 1px #b8ff4d14,0 0 18px #14ff4114}.theme-quito .brand h1{color:var(--strong)}.theme-quito .board{box-shadow:0 18px 40px var(--shadow), 0 0 0 3px #d7192029}.theme-quito .opening-button.active,.theme-quito .tabs button.active,.theme-quito .family-filter button.active,.theme-quito .variant-list button.current,.theme-quito .line button.current{background:linear-gradient(135deg, var(--strong), var(--accent));border-color:var(--accent);color:#fff}@media (width<=1050px){.app{grid-template-columns:220px 1fr}.lesson{grid-column:1/-1;grid-template-columns:minmax(260px,420px) 1fr}}@media (width<=760px){:root{--board-size:min(94vw, 520px)}.app{grid-template-columns:1fr;padding:16px 16px 68px}.board-area{align-content:start;min-height:auto}.lesson{grid-column:auto;grid-template-columns:1fr}.opening-list{grid-template-columns:repeat(2,minmax(0,1fr))}.glossary-grid{max-height:none}}@media (width<=460px){.opening-list{grid-template-columns:1fr}.board{border-width:6px}}