@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap";:root{--bg: #0f0e0c;--surface: #1a1916;--surface2: #232220;--border: #2e2c28;--light-sq: #f0d9b5;--dark-sq: #b58863;--accent: #e8c96d;--accent2: #6db8e8;--danger: #e86d6d;--success: #6de8a0;--text: #f0ece4;--text-dim: #8a8578}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 20% 0%,#1e1a0e 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,#0e141e 0%,transparent 60%)}.chess-teacher-root{display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;min-height:100vh}.chess-header{width:100%;max-width:1080px;display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--border)}.logo{display:flex;flex-direction:column;gap:4px}.header-logo{height:90px;width:auto;display:block}.logo span{color:var(--text-dim);font-size:.85rem;font-family:DM Mono,monospace;display:block;margin-top:0}.student-toggle-wrap{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:40px;padding:8px 16px}.student-toggle-wrap label{font-size:.8rem;color:var(--text-dim)}.toggle{position:relative;width:42px;height:24px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:24px;cursor:pointer;transition:background .3s}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--text-dim);border-radius:50%;transition:transform .3s,background .3s}.toggle input:checked+.toggle-slider{background:var(--success)}.toggle input:checked+.toggle-slider:before{transform:translate(18px);background:#fff}.main-layout{width:100%;max-width:1080px;display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}.board-wrap{display:flex;flex-direction:column;align-items:center;gap:0}.board-outer{position:relative;-webkit-user-select:none;user-select:none}.coords-top{display:flex;padding-left:28px;width:100%}.coords-left,.coords-right{display:flex;flex-direction:column;justify-content:space-around;width:28px}.coord{font-family:DM Mono,monospace;font-size:.65rem;color:var(--text-dim);display:flex;align-items:center;justify-content:center;flex:1}.coords-left .coord,.coords-right .coord{height:calc(min(560px,calc(100vw - 380px))/8)}.coords-top .coord{width:calc(min(560px,calc(100vw - 380px))/8);height:20px}#chessboard{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(560px,calc(100vw - 380px));height:min(560px,calc(100vw - 380px));border:2px solid var(--border);border-radius:4px;overflow:hidden;position:relative;box-shadow:0 20px 60px #0009,0 0 0 4px var(--surface2)}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .1s}.square.light{background:var(--light-sq)}.square.dark{background:var(--dark-sq)}.square.selected{outline:4px solid var(--accent);outline-offset:-4px;z-index:5}.square.highlighted-yellow{background:#e8c96d8c!important}.square.highlighted-blue{background:#6db8e88c!important}.square.highlighted-red{background:#e86d6d8c!important}.square.highlighted-green{background:#6de8a08c!important}.square.last-move-from{background:#e8c96d59!important}.square.last-move-to{background:#e8c96d8c!important}.square.legal-move:after{content:"";position:absolute;width:28%;height:28%;background:#00000038;border-radius:50%;pointer-events:none;z-index:3}.square.legal-capture:after{content:"";position:absolute;inset:0;border:5px solid rgba(0,0,0,.22);border-radius:50%;pointer-events:none;z-index:3}.piece{width:90%;height:90%;position:absolute;cursor:grab;z-index:4;transition:filter .1s;pointer-events:none;display:flex;align-items:center;justify-content:center;filter:drop-shadow(1px 2px 3px rgba(0,0,0,.4))}.drag-piece{position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}.status-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-top:10px;width:min(560px,calc(100vw - 380px))}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background .3s}.status-text{font-size:.8rem;color:var(--text-dim);font-family:DM Mono,monospace}.panel{display:flex;flex-direction:column;gap:14px}.panel-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}.panel-card h3{font-family:DM Mono,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 8px;color:var(--text);font-family:DM Sans,sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.mode-btn .icon{font-size:1.2rem}.mode-btn:hover{border-color:var(--accent);color:var(--accent)}.mode-btn.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.color-row{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff}.fen-row{display:flex;gap:8px;flex-direction:column}.fen-input{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:DM Mono,monospace;font-size:.7rem;width:100%;resize:none;outline:none;transition:border-color .2s}.fen-input:focus{border-color:var(--accent)}.btn{background:var(--accent);color:#000;border:none;border-radius:6px;padding:9px 14px;font-family:DM Sans,sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;width:100%}.btn:hover{opacity:.88}.btn:active{transform:scale(.97)}.btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.move-history{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;min-height:80px;max-height:160px;overflow-y:auto;font-family:DM Mono,monospace;font-size:.72rem;color:var(--text-dim);line-height:1.8}.move-num{color:var(--text-dim)}.move-san{color:var(--text);cursor:pointer;padding:1px 4px;border-radius:3px;transition:background .15s}.move-san:hover{background:var(--surface2)}.move-san.current{background:var(--accent);color:#000;border-radius:3px}.nav-row{display:flex;gap:6px;margin-top:8px}.nav-btn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px;font-size:.9rem;cursor:pointer;transition:all .2s;font-family:DM Mono,monospace}.nav-btn:hover{border-color:var(--accent);color:var(--accent)}.piece-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.palette-piece{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 2px;text-align:center;font-size:1.1rem;cursor:pointer;transition:all .15s;line-height:1;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.palette-piece:hover{border-color:var(--accent);transform:scale(1.1)}.palette-piece.selected{border-color:var(--accent);background:#e8c96d26}.palette-piece.erase{font-size:.7rem;color:var(--text-dim)}.section-label{font-size:.65rem;color:var(--text-dim);font-family:DM Mono,monospace;letter-spacing:.1em;margin-top:8px;margin-bottom:4px;text-transform:uppercase}.student-mode-banner{display:none;width:min(560px,calc(100vw - 380px));background:linear-gradient(90deg,#6de8a026,#6de8a00d);border:1px solid rgba(109,232,160,.3);border-radius:8px;padding:10px 16px;font-size:.8rem;color:var(--success);margin-bottom:8px;font-family:DM Mono,monospace;letter-spacing:.03em}.student-mode-banner.show{display:block}@media(max-width:700px){.main-layout{grid-template-columns:1fr}#chessboard{width:min(400px,calc(100vw - 32px));height:min(400px,calc(100vw - 32px))}}