@font-face{font-family:Montreal;src:url('/fonts/PPNeueMontreal-Medium.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Montreal;src:url('/fonts/PPNeueMontreal-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Teka;src:url('/fonts/KHTeka-Medium.woff2') format('woff2');font-display:swap}
.classroom{--cr-bg:#101a16;--cr-panel:#1b2922;--cr-raised:#26372d;--cr-fg:#f4f0e5;--cr-muted:#bdcbbb;--cr-line:#405346;--cr-accent:#b9d5a1;--cr-forest:#173a28;background:var(--cr-bg);color:var(--cr-fg);font:15px/1.45 Teka,Montreal,sans-serif;margin:0;color-scheme:dark;min-width:320px}
.classroom *{box-sizing:border-box}.classroom button,.classroom input,.classroom select,.classroom textarea{font:inherit}.classroom button,.classroom a,.classroom summary{-webkit-tap-highlight-color:transparent}.classroom button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:6px;background:var(--cr-raised);color:var(--cr-fg);padding:8px 12px;min-height:38px;cursor:pointer}.classroom button:hover{background:#374b3d}.classroom button:disabled{opacity:.5;cursor:default}.classroom button.primary{background:var(--cr-accent);color:var(--cr-forest);font-weight:700}.classroom a{color:var(--cr-accent);text-underline-offset:4px}.classroom :focus-visible{outline:3px solid var(--cr-accent);outline-offset:3px}.classroom ::selection{background:var(--cr-accent);color:var(--cr-forest)}.classroom input,.classroom textarea,.classroom select{background:var(--cr-bg);border:1px solid var(--cr-line);color:var(--cr-fg);border-radius:6px;padding:10px;max-width:100%;min-width:0;caret-color:var(--cr-accent)}.classroom textarea{resize:vertical}.classroom input::placeholder,.classroom textarea::placeholder{color:var(--cr-muted)}.classroom input[type=checkbox]{accent-color:var(--cr-accent);width:17px;height:17px;padding:0}.classroom label{display:flex;gap:7px;align-items:center}.classroom h1,.classroom h2,.classroom strong{font-family:Montreal,sans-serif}.classroom h1{font-size:24px;line-height:1.15;margin:0;letter-spacing:-.025em}.classroom h2{font-size:18px;margin:0 0 14px}.classroom p{margin:0 0 14px}.classroom small{color:var(--cr-muted);font-size:12px}.classroom .danger{color:#ffc8be}.classroom .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.classroom ::-webkit-scrollbar{width:7px;height:7px}.classroom ::-webkit-scrollbar-thumb{background:var(--cr-line);border-radius:5px}.classroom ::-webkit-scrollbar-track{background:transparent}
.cr-rail{position:fixed;inset:0 auto 0 0;width:88px;background:#0a110d;display:flex;align-items:stretch;flex-direction:column;gap:8px;padding:18px 8px;z-index:4;border-right:1px solid #26372d}.cr-rail a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 3px;color:var(--cr-muted);text-decoration:none;font-size:11px;border-radius:6px}.cr-rail a[aria-current],.cr-rail a:hover{background:var(--cr-raised);color:var(--cr-accent)}.cr-rail .cr-brand{color:var(--cr-fg);font-family:Montreal;font-weight:700;letter-spacing:-.02em;font-size:15px;padding:0 0 25px}.cr-brand img{width:34px;height:34px}.cr-rail .cr-support{margin-top:auto}.cr-workspace{margin-left:88px;padding:0 24px 18px;min-height:100vh}.cr-header{height:78px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--cr-line);margin-bottom:18px}.cr-header>div:first-child{display:flex;align-items:baseline;gap:15px;min-width:0}.cr-header h1{max-width:30vw;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cr-header-actions{display:flex;align-items:center;gap:8px}.cr-room-id{font-size:12px;color:var(--cr-muted);font-variant-numeric:tabular-nums}.cr-connection{display:inline-flex;align-items:center;gap:6px;color:var(--cr-muted);font-size:12px;white-space:nowrap}.cr-connection:before{content:'';width:6px;height:6px;background:var(--cr-accent);border-radius:50%}.cr-connection.offline:before{background:#e8bf6d}.cr-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(345px,420px);gap:28px;max-width:1420px;margin:auto}.cr-board-area{min-width:0;max-width:min(100%,calc(100vh - 234px));width:100%;justify-self:center}.cr-player{height:36px;display:flex;align-items:center;gap:8px}.cr-player img{height:24px;width:24px}.cr-player small{margin-left:auto}.cr-board-wrap{display:flex;gap:9px;position:relative}.cr-board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);position:relative;overflow:hidden;border-radius:3px;flex:1;user-select:none;-webkit-user-select:none;touch-action:none}.classroom .cr-square{position:relative;min-height:0;padding:0;border:0;border-radius:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1}.classroom .cr-square.light{background:#e8ecdc;color:#486c50}.classroom .cr-square.dark{background:#739273;color:#edf0e0}.classroom .cr-square:hover{box-shadow:inset 0 0 0 2px rgba(19,58,37,.25)}.classroom .cr-square.selected{background:#bccc79}.cr-square img{width:87%;height:87%;pointer-events:none}.cr-square .rank,.cr-square .file{position:absolute;font-family:Montreal;font-size:clamp(10px,1vw,13px);line-height:1;font-weight:700}.cr-square .rank{left:4px;top:4px}.cr-square .file{bottom:3px;right:4px}.cr-square.legal:after{content:'';position:absolute;width:24%;height:24%;border-radius:50%;background:rgba(15,49,32,.28)}.cr-square.legal:has(img):after{width:88%;height:88%;border:5px solid rgba(15,49,32,.4);background:transparent}.cr-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}.cr-arrows .green{stroke:#d1a848;fill:#d1a848}.cr-arrows .red{stroke:#d65f4a;fill:#d65f4a}.cr-arrows .blue{stroke:#448dde;fill:#448dde}.cr-arrows .yellow{stroke:#eccb39;fill:#eccb39}.cr-arrows > circle{fill:none}.cr-evaluation{width:18px;background:#0a110d;position:relative;border-radius:3px;overflow:hidden;flex-shrink:0}.cr-evaluation>div{position:absolute;bottom:0;left:0;width:100%;background:#efece0;height:100%;transform-origin:bottom;transition:transform 200ms ease-out}.cr-evaluation>span{position:absolute;bottom:7px;left:0;width:100%;font-size:10px;text-align:center;color:#163226;font-variant-numeric:tabular-nums;writing-mode:vertical-rl}.cr-board-tools{display:flex;align-items:center;justify-content:space-between;background:var(--cr-panel);padding:4px;border-radius:5px;margin-top:4px}.cr-board-tools>div{display:flex;gap:2px}.cr-board-tools button{background:transparent;padding:7px 10px}.cr-board-actions{display:flex;gap:8px;justify-content:space-between;margin-top:12px}.cr-board-actions button{flex:1;padding:8px 10px;font-size:13px}.cr-board-hint{font-size:11px;color:var(--cr-muted);margin-top:10px!important;text-align:center}.cr-board-area:fullscreen{background:var(--cr-bg);max-width:none;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.cr-board-area:fullscreen .cr-board-wrap{height:calc(100vh - 190px);width:calc(100vh - 190px)}.cr-board-area:fullscreen .cr-player,.cr-board-area:fullscreen .cr-board-tools{width:min(100%,calc(100vh - 190px))}
.cr-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}.cr-analysis-panel,.cr-room-panel{background:var(--cr-panel);border-radius:8px;min-width:0}.cr-tabs{display:flex;gap:0;border-bottom:1px solid var(--cr-line)}.cr-tabs button{flex:1;background:transparent;border-radius:0;padding:14px 12px;color:var(--cr-muted);border-bottom:2px solid transparent}.cr-tabs button[aria-selected=true]{border-bottom-color:var(--cr-accent);color:var(--cr-fg);font-weight:700}.cr-panel-body{padding:15px;min-height:220px;max-height:calc(52vh - 48px);overflow:auto}.cr-analysis-controls{display:flex;gap:17px;align-items:center;font-size:13px}.cr-analysis-controls button{margin-left:auto;background:transparent;padding:5px}.cr-engine-lines{padding:14px 0;border-bottom:1px solid var(--cr-line)}.cr-engine-lines p{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;font-size:12px}.cr-engine-lines strong{color:var(--cr-accent);font-variant-numeric:tabular-nums;min-width:40px}.cr-engine-lines p>span{flex:1}.cr-engine-lines p small{white-space:nowrap;font-size:10px}.cr-settings{display:grid;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--cr-line);font-size:13px}.cr-settings label select{margin-left:auto;max-width:180px}.cr-section-title{font-size:14px!important;margin-top:15px!important;margin-bottom:7px!important}.cr-notation{font-family:Montreal;line-height:2.3;min-height:85px}.classroom .cr-notation button{padding:4px 8px;min-height:30px;background:transparent;font-size:14px}.classroom .cr-notation button[aria-current]{color:var(--cr-forest);background:var(--cr-accent)}.cr-notation small{font-size:11px}.cr-notation p{font:13px/1.5 Teka;color:var(--cr-muted);margin-top:8px}.cr-variation{display:block;margin-left:14px;padding-left:8px;border-left:1px solid var(--cr-line);font-size:12px}.cr-comment{display:flex;flex-direction:column;align-items:stretch!important;margin-top:12px;font-size:12px;color:var(--cr-muted)}.cr-comment textarea{min-height:62px;font-size:13px}.cr-games-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding-bottom:10px}.cr-games-heading>div,.cr-games-list>div>div{display:flex;gap:1px}.cr-games-heading button,.cr-games-list button:not(.cr-game-name){padding:6px;background:transparent}.cr-games-list>div{padding:11px 4px;border-top:1px solid var(--cr-line);display:flex;justify-content:space-between;gap:6px}.cr-games-list>div.active{background:#304535;border-radius:5px}.cr-games-list .cr-game-name{background:transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;padding:3px 8px;min-width:0;flex:1}.cr-game-name strong{overflow-wrap:anywhere}.cr-game-name small{font-size:11px}.cr-games-list>div>div{align-items:flex-start;flex-wrap:wrap;max-width:75px}.cr-explorer label{font-size:13px;flex-direction:column;align-items:stretch;gap:7px;margin-bottom:15px}.cr-explorer-head{display:flex;justify-content:space-between;color:var(--cr-muted);font-size:11px;padding:0 0 10px}.classroom .cr-explorer-move{display:flex;width:100%;justify-content:space-between;background:transparent;border-top:1px solid var(--cr-line);border-radius:0;text-align:left}.cr-explorer-move>span{width:65%;font-size:12px}.cr-results{display:flex;height:8px;overflow:hidden;margin:5px 0;min-width:120px}.cr-results i:first-child{background:#efece0}.cr-results i:nth-child(2){background:#8aa083}.cr-results i:last-child{background:#080f0b}.cr-explorer p,.cr-explorer a{font-size:12px;margin-top:12px}.cr-room-heading{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--cr-line)}.cr-room-heading h2{font-size:16px;margin:0}.cr-room-heading h2 span{font-size:12px;color:var(--cr-muted);margin-left:5px}.cr-room-heading>div{display:flex;gap:2px}.cr-room-heading button{padding:5px;background:transparent}.cr-room-heading button[aria-pressed=true]{background:#405b40;color:var(--cr-accent)}.cr-clock{display:flex;align-items:baseline;gap:8px;padding:7px 15px;font-size:18px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--cr-line)}.cr-clock span{font-size:11px;color:var(--cr-muted);text-transform:capitalize}.cr-clock.expired{color:#ffc8be}.cr-clock-settings{padding:10px 15px;display:grid;gap:9px;font-size:12px}.cr-clock-settings label{justify-content:space-between}.cr-clock-settings input{width:80px}.cr-clock-settings>div{display:flex;gap:8px}.cr-room-content{padding:0 15px 14px}.cr-room-tabs{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cr-line);gap:8px}.cr-room-tabs>div{display:flex}.cr-room-tabs button{background:transparent;font-size:12px;padding:9px 5px;min-height:38px;color:var(--cr-muted)}.cr-room-tabs button[aria-selected=true]{color:var(--cr-accent)}.cr-room-tabs svg{width:16px}.cr-manage,.cr-participant-menu{position:relative;font-size:12px}.cr-manage summary,.cr-participant-menu summary{cursor:pointer;padding:8px 3px;color:var(--cr-muted);list-style:none}.cr-manage>div,.cr-participant-menu>div{position:absolute;right:0;top:100%;width:230px;padding:8px;background:#304234;border:1px solid var(--cr-line);border-radius:6px;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.25)}.cr-manage>div>button,.cr-participant-menu>div>button{display:flex;width:100%;justify-content:flex-start;color:var(--cr-fg)}.cr-participant-menu label{flex-direction:column;align-items:stretch;font-size:12px;padding:7px}.cr-participants{max-height:225px;overflow:auto}.cr-participant{display:flex;align-items:center;gap:10px;min-height:65px;padding:10px 0;border-bottom:1px solid var(--cr-line)}.cr-participant-meta{flex:1;min-width:0}.cr-participant-meta strong{font-size:13px;display:block;overflow-wrap:anywhere}.cr-participant-meta small{font-size:11px}.cr-media-tile{position:relative;width:56px;height:42px;background:#405942;display:flex;justify-content:center;align-items:center;border-radius:5px;overflow:hidden;flex-shrink:0}.cr-media-tile>span{color:var(--cr-accent);font-size:21px;font-family:Montreal}.cr-media-tile video{width:100%;height:100%;object-fit:cover}.cr-media-tile video.audio-only{position:absolute;width:1px;height:1px;opacity:0}.cr-media-tile>svg{position:absolute;bottom:2px;right:2px;width:12px;height:12px;color:var(--cr-accent)}.cr-media-note{font-size:10px;line-height:1.5;color:var(--cr-muted);margin:9px 0!important}.cr-invitation{padding-top:12px;margin-top:7px;border-top:1px solid var(--cr-line)}.cr-enrollment{justify-content:space-between;font-size:13px;margin-bottom:12px}.cr-enrollment small{display:block;font-size:10px;margin-top:2px}.cr-invitation form label{font-size:11px;color:var(--cr-muted);margin-bottom:5px}.cr-invitation form>div{display:flex;gap:7px}.cr-invitation input{flex:1;width:0;font-size:12px}.cr-invitation button{font-size:12px}.cr-chat-messages{max-height:170px;min-height:100px;overflow:auto;padding:12px 0}.cr-chat-messages p{font-size:13px;margin:0 0 12px;overflow-wrap:anywhere}.cr-chat-messages strong{font-size:11px;color:var(--cr-accent)}.cr-chat-messages time{font-size:10px;color:var(--cr-muted);margin-left:10px}.cr-chat-messages span{display:block;margin-top:3px}.cr-chat form{display:flex;gap:6px}.cr-chat form input{flex:1;min-width:0;font-size:12px}.cr-chat form button{font-size:12px}.cr-chat>p,.cr-empty{font-size:12px;color:var(--cr-muted)}.cr-room-panel.collapsed .cr-room-content,.cr-room-panel.collapsed .cr-clock-settings{display:none}.room-collapsed .cr-panel-body{max-height:calc(100vh - 280px)}
.cr-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:5px;padding:10px 14px;margin-bottom:12px;font-size:14px}.cr-error{color:#ffd0c5;background:#572e26;padding:12px;border-radius:5px;overflow-wrap:anywhere}.cr-notice{background:#2f4b36;color:#e8f3df}.cr-banner button{background:transparent;padding:4px}.cr-lobby{margin-left:88px;padding:75px 7vw;max-width:1250px}.cr-lobby-heading{margin-bottom:45px}.cr-lobby h1{font-size:46px;margin-bottom:12px}.cr-lobby-heading p{color:var(--cr-muted);font-size:18px}.cr-lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:850px}.cr-lobby-actions form{display:flex;flex-direction:column;align-items:stretch;gap:10px}.cr-lobby-actions label{font-size:13px;color:var(--cr-muted)}.cr-lobby-actions button{align-self:flex-start;margin-top:7px;min-width:165px}.cr-room-list{margin-top:60px;max-width:850px}.cr-room-list>button{display:flex;width:100%;justify-content:space-between;background:transparent;border-top:1px solid var(--cr-line);padding:20px 4px;border-radius:0;text-align:left}.cr-room-list>button span{display:flex;flex-direction:column;gap:4px}.classroom-loading{padding:40px}
.classroom dialog{color:var(--cr-fg);background:var(--cr-panel);border:1px solid var(--cr-line);border-radius:10px;padding:24px;max-width:calc(100vw - 30px)}.classroom dialog::backdrop{background:rgba(5,15,9,.75)}.cr-import{width:650px;max-height:85vh;overflow:auto}.cr-import header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.cr-import header h2{font-size:22px;margin:0}.cr-import .cr-tabs{margin-bottom:24px;overflow:auto}.cr-import .cr-tabs button{font-size:12px;padding:11px 8px;min-width:max-content}.cr-import form{display:flex;flex-direction:column;align-items:stretch;gap:14px}.cr-import form label{flex-direction:column;align-items:stretch;font-size:13px}.cr-import form p{font-size:13px;color:var(--cr-muted)}.cr-import form button{align-self:flex-start;margin-top:5px}.cr-import textarea{font-family:Montreal;font-size:13px;width:100%}.cr-collections>div{display:flex;border-bottom:1px solid var(--cr-line);padding:10px 0;gap:10px}.cr-collections>div>button:first-child{flex:1;display:flex;align-items:flex-start;flex-direction:column;background:transparent}.cr-collections>div>button:last-child{background:transparent}.cr-collections span{font-size:12px;color:var(--cr-muted)}.classroom .cr-editor-panel{position:fixed;inset:96px 24px auto auto;margin:0;width:420px;z-index:6;max-height:calc(100vh - 112px);overflow:auto}.cr-editor-panel p{font-size:12px;color:var(--cr-muted)}.cr-editor-panel>label{flex-direction:column;align-items:stretch;font-size:12px;margin:12px 0}.cr-editor-panel textarea{font-size:12px;min-height:62px}.cr-piece-palette>div{display:flex;gap:4px;margin:5px 0}.cr-piece-palette button{flex:1;padding:5px;min-width:0}.cr-piece-palette button[aria-pressed=true],.cr-editor-tools button[aria-pressed=true]{background:#607a55}.cr-piece-palette img{width:32px;height:32px}.cr-editor-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.cr-editor-tools button{font-size:12px}.cr-editor-panel fieldset{border:1px solid var(--cr-line);border-radius:5px;display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:11px}.cr-editor-panel>div:last-child{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}.cr-modal-backdrop{position:fixed;inset:0;background:rgba(5,15,9,.75);display:flex;justify-content:center;align-items:center;z-index:10}.cr-promotion{background:var(--cr-panel);padding:25px;border-radius:10px}.cr-promotion img{width:44px;height:44px}.cr-promotion button{margin:3px}
.cr-video-stage{padding:12px 0 6px}.cr-video-stage>.cr-media-tile{width:100%;height:auto;aspect-ratio:16/9}.cr-video-stage label{font-size:11px;justify-content:space-between;margin-top:6px}.cr-video-stage select{padding:5px;max-width:65%}.classroom .cr-listen{background:transparent;padding:5px 0;min-height:28px;font-size:10px;color:var(--cr-accent)}
@media(min-width:1500px){.cr-board-area{max-width:min(100%,calc(100vh - 260px))}.cr-panel-body{max-height:calc(52vh - 48px);min-height:300px}}
@media(max-width:1150px){.cr-workspace{padding:0 16px 16px}.cr-columns{gap:16px;grid-template-columns:minmax(0,1fr) 350px}.cr-room-id{display:none}.cr-header-actions{gap:5px}.cr-board-actions button{font-size:11px;padding:8px 6px}.cr-board-actions svg{width:16px}.cr-header>div:first-child{gap:10px}.cr-header h1{font-size:21px}.classroom .cr-editor-panel{width:350px;right:16px}.cr-board-area{max-width:100%}.cr-games-heading>div button{padding:5px}.cr-engine-lines p{flex-wrap:wrap}.cr-engine-lines p small{margin-left:auto}}
@media(max-width:860px){.cr-rail{width:64px;padding:15px 4px}.cr-rail .cr-brand{font-size:12px}.cr-rail a{font-size:10px}.cr-workspace,.cr-lobby{margin-left:64px}.cr-columns{grid-template-columns:minmax(0,1fr);max-width:650px}.cr-board-area{max-width:min(100%,calc(100vh - 200px))}.cr-sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.cr-panel-body{max-height:440px;min-height:240px}.cr-header{height:70px}.cr-header>div:first-child{flex-direction:column;gap:4px}.cr-header h1{max-width:38vw;font-size:20px}.cr-header-actions button{font-size:12px;padding:8px}.cr-header-actions .danger{padding:8px}.cr-connection{font-size:10px}.classroom .cr-editor-panel{inset:auto 16px 14px auto;max-height:50vh;width:350px}.cr-lobby{padding:60px 30px}.cr-lobby-actions{gap:30px}.cr-room-tabs{flex-wrap:wrap}.cr-room-tabs button{font-size:11px}.cr-room-heading{padding:10px}.cr-room-heading button{padding:4px}.cr-room-content{padding:0 10px 10px}.cr-participant-menu>div{width:200px}}
@media(max-width:620px){.cr-rail{position:relative;width:100%;height:58px;flex-direction:row;align-items:center;padding:4px 12px;gap:10px;border-right:0;border-bottom:1px solid #26372d}.cr-rail a{flex-direction:row;font-size:11px;padding:7px;gap:4px}.cr-rail a svg{width:15px}.cr-rail .cr-brand{padding:0;margin-right:auto}.cr-brand img{width:25px;height:25px}.cr-rail .cr-support{display:none}.cr-workspace{margin:0;padding:0 12px 25px;min-height:calc(100vh - 58px)}.cr-header{height:72px;margin-bottom:12px}.cr-header h1{max-width:39vw;font-size:19px}.cr-header-actions{gap:4px}.cr-header-actions button{padding:7px;font-size:11px;min-height:34px}.cr-header-actions button svg{width:15px}.cr-header-actions button:nth-child(2) svg{display:none}.cr-sidebar{display:flex}.cr-panel-body{max-height:400px;min-height:250px}.cr-player small{font-size:10px}.cr-board-area{max-width:100%}.cr-board-actions button{font-size:12px;min-height:42px}.cr-board-hint{font-size:10px}.cr-board-tools button{padding:7px}.cr-connection{font-size:10px}.cr-board-wrap{gap:5px}.cr-evaluation{width:15px}.cr-lobby{margin:0;padding:40px 22px}.cr-lobby h1{font-size:36px}.cr-lobby-heading{margin-bottom:30px}.cr-lobby-heading p{font-size:15px}.cr-lobby-actions{grid-template-columns:1fr;gap:35px}.cr-room-list{margin-top:40px}.cr-import{padding:18px!important}.classroom .cr-editor-panel{left:12px;right:12px;bottom:12px;width:auto;max-height:48vh;padding:16px}.cr-piece-palette img{width:27px;height:27px}.cr-promotion{max-width:95vw;padding:18px}.cr-participants{max-height:260px}.cr-room-tabs button{font-size:12px}.cr-room-heading{padding:12px 15px}.cr-room-content{padding:0 15px 14px}.cr-room-tabs{flex-wrap:nowrap}.cr-banner{font-size:12px}.cr-board-area:fullscreen .cr-board-wrap{width:min(95vw,calc(100vh - 190px));height:auto}}
.cr-sidebar{max-height:calc(100vh - 114px);overflow:auto;scrollbar-gutter:stable}.cr-board-area{max-width:min(100%,calc(100vh - 320px))}.cr-header-actions>button:nth-child(2) svg{display:block}
@media(max-width:860px){.cr-sidebar{max-height:none;overflow:visible;scrollbar-gutter:auto}.cr-board-area{max-width:min(100%,calc(100vh - 240px))}}
@media(max-width:620px){.cr-board-area{max-width:100%}.cr-header{gap:8px}.cr-header>div:first-child{flex:1;overflow:hidden}.cr-header h1{max-width:100%}.cr-header-actions{flex-shrink:0}.cr-header-actions>button:nth-child(3) svg{display:none}}
@media(max-width:360px){.cr-rail{gap:3px;padding:4px 8px}.cr-rail a{font-size:10px;padding:6px 4px}.cr-rail a svg{width:14px}.cr-rail .cr-brand{font-size:11px}.cr-header h1{font-size:17px}.cr-header-actions button{padding:6px;font-size:10px}.cr-board-actions button{font-size:11px}.cr-board-hint{font-size:9px}.cr-invitation form>div{gap:5px}}
.cr-import-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cr-import-grid input,.cr-import-grid select{width:100%}.cr-archive-results{margin-top:24px}.cr-archive-results>div{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--cr-line)}.cr-archive-results label{font-size:12px;min-width:0}.cr-archive-results strong,.cr-archive-results small{display:block;overflow-wrap:anywhere}.cr-archive-results>button{margin-top:14px}.cr-archive-preview{max-width:330px;margin:24px auto 0}.cr-archive-preview h3{font-size:14px}.cr-saved-collection{border-top:1px solid var(--cr-line);padding:14px 0}.cr-saved-collection header{display:flex;justify-content:space-between;align-items:center}.cr-saved-collection label{font-size:13px}.cr-saved-collection small{display:block}.cr-saved-collection summary{cursor:pointer;margin-top:9px;font-size:12px;color:var(--cr-accent)}.cr-saved-collection details label{padding:7px 0;font-size:12px}.cr-import-grid label{min-width:0}.cr-collections>button{margin-top:14px}
.cr-square .rank,.cr-square .file{color:#0b2113}.cr-evaluation>span{background:#efece0;padding:3px 1px;border-radius:2px}
@media(max-width:390px){.cr-import-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cr-evaluation>div{transition:none}}

/* The classroom extends Teach64's warm Library and rounded teaching surfaces. */
.classroom {
  --cr-bg: #faf9f6;
  --cr-panel: #ffffff;
  --cr-raised: #edf1e8;
  --cr-fg: #203227;
  --cr-muted: #526356;
  --cr-line: #d8dfd3;
  --cr-accent: #235139;
  --cr-forest: #ffffff;
  --cr-hover: #e1e9dc;
  --cr-soft: #f2f4ed;
  --cr-rail: #f0efe9;
  --cr-action: #204d36;
  --cr-action-text: #ffffff;
  --cr-radius: 24px;
  color-scheme: light;
  font-size: 15px;
}
html[data-classroom-theme="dark"] .classroom {
  --cr-bg: #111b16;
  --cr-panel: #1c2b22;
  --cr-raised: #2a3c30;
  --cr-fg: #f3f0e6;
  --cr-muted: #c2cebd;
  --cr-line: #415547;
  --cr-accent: #c0d7a9;
  --cr-forest: #173726;
  --cr-hover: #354b3c;
  --cr-soft: #24362b;
  --cr-rail: #0d1510;
  --cr-action: #c0d7a9;
  --cr-action-text: #173726;
  color-scheme: dark;
}
.classroom button { border-radius: 12px; min-height: 40px; }
.classroom button:hover { background: var(--cr-hover); }
.classroom button.primary { background: var(--cr-action); color: var(--cr-action-text); }
.classroom button.primary:hover { background: var(--cr-accent); }
.classroom button:disabled { opacity: .55; }
.classroom input, .classroom textarea, .classroom select { background: var(--cr-soft); border-radius: 12px; }
.classroom .danger { color: #963a2f; }
html[data-classroom-theme="dark"] .classroom .danger { color: #ffc6b9; }
.cr-rail { width: 96px; padding: 25px 10px 16px; background: var(--cr-rail); border-color: var(--cr-line); gap: 9px; }
.cr-rail a { border-radius: 14px; padding: 13px 5px; font-size: 12px; }
.cr-rail a[aria-current] { background: var(--cr-action); color: var(--cr-action-text); }
.cr-rail a:hover { background: var(--cr-hover); color: var(--cr-fg); }
.cr-rail .cr-brand { color: var(--cr-fg); padding-bottom: 22px; }
.cr-rail-bottom { margin-top: auto; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.cr-rail-bottom button { width: 42px; padding: 10px; background: var(--cr-panel); border: 1px solid var(--cr-line); }
.cr-rail-bottom .cr-theme-toggle { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 3px; font-size: 10px; }
.cr-rail-bottom a { width: 100%; }
.cr-guest-label { color: var(--cr-muted); font-size: 11px; text-align: center; }
html[data-classroom-theme="dark"] .cr-brand img, html[data-classroom-theme="dark"] .cr-engine-heading img { filter: invert(1); }
.cr-workspace { margin-left: 96px; padding: 0 28px 20px; }
.cr-header { height: 80px; border-bottom: 0; margin-bottom: 12px; }
.cr-header h1 { font-size: 25px; }
.cr-header-actions { gap: 9px; }
.cr-connection { padding: 5px 9px; border-radius: 8px; background: var(--cr-raised); }
.cr-connection:before { width: 5px; height: 5px; background: var(--cr-accent); }
.cr-room-id { color: var(--cr-muted); }
.cr-columns { max-width: 1460px; grid-template-columns: minmax(0, 1fr) minmax(350px, 420px); gap: 24px; align-items: start; }
.cr-board-area { max-width: min(100%, calc(100dvh - 360px)); padding: 12px; border: 1px solid var(--cr-line); background: var(--cr-panel); border-radius: var(--cr-radius); }
.cr-player { height: 35px; padding: 0 4px; }
.cr-player small { font-size: 11px; }
.cr-player img { background: var(--cr-soft); padding: 3px; border-radius: 7px; width: 27px; height: 27px; }
.cr-board { border-radius: 18px; isolation: isolate; }
.classroom .cr-square { border-radius: 0; }
.classroom .cr-square.light { background: #edf0e0; }
.classroom .cr-square.dark { background: #879e85; }
.classroom .cr-square:focus-visible { outline: 3px solid #153a24; outline-offset: -4px; z-index: 1; }
.cr-board-tools { padding: 4px; margin-top: 4px; background: var(--cr-soft); border-radius: 12px; }
.cr-board-tools button { min-height: 36px; padding: 7px 9px; }
.cr-board-actions { gap: 6px; margin-top: 8px; }
.cr-board-actions button { font-size: 12px; padding: 8px; }
.cr-board-actions button svg { width: 16px; }
.cr-annotation-tools { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.cr-annotation-tools button { background: transparent; border: 1px solid var(--cr-line); min-height: 34px; font-size: 12px; padding: 6px 10px; }
.cr-annotation-tools button[aria-pressed="true"] { background: var(--cr-action); color: var(--cr-action-text); }
.cr-annotation-tools label { font-size: 11px; }
.cr-annotation-tools select { padding: 5px 6px; font-size: 11px; width: 90px; text-transform: capitalize; }
.cr-annotation-tools > span { color: var(--cr-muted); font-size: 11px; margin-left: auto; }
.cr-board-hint { font-size: 10px; margin-top: 9px !important; margin-bottom: 1px !important; }
.cr-evaluation { width: 20px; border-radius: 8px; background: #14281c; }
.cr-evaluation > span { width: 20px; font-size: 11px; }
.cr-sidebar { gap: 14px; max-height: calc(100dvh - 108px); padding-right: 3px; }
.cr-analysis-panel, .cr-room-panel { border-radius: var(--cr-radius); border: 1px solid var(--cr-line); overflow: hidden; }
.cr-tabs { gap: 5px; padding: 7px; border-bottom: 1px solid var(--cr-line); background: var(--cr-soft); }
.cr-tabs button { padding: 9px 12px; border-radius: 12px; min-height: 40px; border-bottom: 0; color: var(--cr-muted); }
.cr-tabs button[aria-selected="true"] { background: var(--cr-panel); color: var(--cr-fg); box-shadow: 0 2px 6px rgba(18, 42, 26, .06); }
.cr-panel-body { padding: 18px; max-height: min(570px, calc(100dvh - 240px)); min-height: 240px; }
.cr-analysis-controls { gap: 12px; }
.cr-analysis-switch { position: relative; gap: 11px !important; font-family: Montreal, sans-serif; font-size: 16px; }
.classroom .cr-analysis-switch input { position: absolute; opacity: 0; width: 46px; height: 28px; margin: 0; cursor: pointer; }
.cr-switch-track { position: relative; display: block; width: 46px; height: 28px; border-radius: 14px; background: var(--cr-line); flex-shrink: 0; pointer-events: none; }
.cr-switch-track:after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--cr-panel); transition: transform 160ms ease-out; }
.cr-analysis-switch input:checked + .cr-switch-track { background: var(--cr-action); }
.cr-analysis-switch input:checked + .cr-switch-track:after { transform: translateX(18px); background: var(--cr-action-text); }
.cr-analysis-switch input:focus-visible + .cr-switch-track { outline: 3px solid var(--cr-accent); outline-offset: 3px; }
.cr-analysis-switch input:disabled + .cr-switch-track { opacity: .55; }
.cr-analysis-switch small { display: block; font-family: Teka, sans-serif; font-size: 11px; margin-top: 1px; }
.cr-analysis-controls > button { border: 1px solid var(--cr-line); border-radius: 10px; width: 36px; min-height: 36px; }
.cr-engine-lines { margin-top: 16px; padding: 0 0 16px; }
.cr-engine-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.cr-engine-heading img { width: 28px; height: 28px; }
.cr-engine-heading strong { display: block; font-size: 15px; color: var(--cr-fg); }
.cr-engine-heading small { display: block; font-size: 10px; }
.cr-engine-heading > span { margin-left: auto; font-size: 10px; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.classroom .cr-engine-line { display: flex; align-items: center; width: 100%; gap: 10px; padding: 11px 6px; border-radius: 0; border-top: 1px solid var(--cr-line); background: transparent; text-align: left; }
.classroom .cr-engine-line:disabled { opacity: 1; }
.classroom .cr-engine-line:disabled:hover { background: transparent; }
.classroom .cr-engine-line.rank-1 { border-radius: 12px; background: var(--cr-raised); border-top-color: transparent; padding: 12px 9px; margin-bottom: 5px; }
.cr-candidate-rank { display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px; border-radius: 7px; font: 700 12px Montreal, sans-serif; color: #fff; background: #204d36; }
.cr-candidate-moves { flex: 1; min-width: 0; }
.cr-candidate-moves strong { display: block; font-size: 16px; color: var(--cr-fg); }
.cr-candidate-moves small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; max-width: 240px; }
.cr-candidate-score { flex-shrink: 0; font-family: Montreal, sans-serif; font-size: 14px; color: var(--cr-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-engine-status { display: block; margin-top: 11px; font-size: 11px; }
.cr-arrow-explainer { margin: 8px 0 0 !important; font-size: 11px; color: var(--cr-muted); }
.cr-settings { border-radius: 12px; padding: 12px; background: var(--cr-soft); border: 0; font-size: 12px; }
.cr-settings small { font-size: 10px; }
.cr-settings select { max-width: 170px; }
.cr-section-title { font-size: 15px !important; margin-top: 17px !important; }
.classroom .cr-notation button { border-radius: 8px; min-height: 32px; }
.cr-comment textarea { border-radius: 12px; background: var(--cr-soft); }
.cr-room-heading { padding: 11px 16px; }
.cr-room-heading h2 { font-size: 17px; }
.cr-room-heading button { border-radius: 10px; min-height: 36px; padding: 7px; }
.cr-room-heading button[aria-pressed="true"] { background: var(--cr-action); color: var(--cr-action-text); }
.cr-clock { padding: 10px 18px; font-size: 20px; background: var(--cr-soft); }
.cr-room-content { padding: 0 18px 18px; }
.cr-room-tabs button { font-size: 13px; min-height: 42px; padding: 10px 7px; }
.cr-room-tabs button[aria-selected="true"] { color: var(--cr-fg); font-weight: 700; }
.cr-participant { padding: 12px 0; }
.cr-media-tile { background: var(--cr-raised); border-radius: 12px; }
.cr-participant-meta strong { font-size: 14px; }
.cr-participant-meta small { font-size: 12px; }
.cr-media-note { font-size: 11px; }
.cr-manage > div, .cr-participant-menu > div { border-radius: 14px; background: var(--cr-panel); }
.cr-enrollment { font-size: 14px; }
.cr-enrollment small { font-size: 11px; }
.cr-invitation form label { font-size: 12px; }
.cr-invitation button { background: var(--cr-action); color: var(--cr-action-text); }
.cr-guest-invitation { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--cr-line); }
.cr-guest-invitation strong { font-size: 14px; }
.cr-guest-invitation small { display: block; margin-top: 3px; font-size: 11px; }
.cr-guest-invite-actions { display: flex; gap: 7px; margin-top: 10px; }
.cr-guest-invite-actions button { font-size: 12px; padding: 8px 11px; }
.cr-guest-invite-actions button:first-child { background: var(--cr-action); color: var(--cr-action-text); }
.cr-guest-invitation > label { flex-direction: column; align-items: stretch; margin-top: 10px; font-size: 11px; }
.cr-guest-invitation input { font-size: 11px; }
.cr-error { color: #84382d; background: #f9e8e1; border-radius: 12px; }
.cr-notice { color: #214832; background: #e5eddc; border-radius: 12px; }
html[data-classroom-theme="dark"] .cr-error { color: #ffd4c8; background: #55352c; }
html[data-classroom-theme="dark"] .cr-notice { color: #e2f0d4; background: #304b35; }
.classroom dialog { border-radius: 24px; background: var(--cr-panel); }
.classroom dialog::backdrop { background: rgba(13, 30, 19, .55); }
.classroom .cr-editor-panel { border-radius: 24px; }
.cr-lobby { margin-left: 96px; }
.cr-lobby-actions { gap: 24px; }
.cr-lobby-actions form { padding: 28px; background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 24px; }
.cr-room-list > button { padding: 20px 12px; border-radius: 12px; margin-top: 5px; }
.cr-room-list > button:hover { background: var(--cr-raised); }
.cr-guest-entry { margin-left: 96px; min-height: 100dvh; display: grid; place-items: center; padding: 40px 25px; }
.cr-guest-entry > div { width: min(100%, 500px); padding: 40px; background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 24px; }
.cr-guest-entry > div > img { width: 48px; height: 48px; padding: 8px; border-radius: 14px; background: var(--cr-action); margin-bottom: 20px; }
.cr-guest-entry h1 { font-size: 36px; margin-bottom: 15px; }
.cr-guest-entry p { color: var(--cr-muted); }
.cr-guest-entry form { display: grid; gap: 10px; margin-top: 28px; }
.cr-guest-entry .cr-guest-scope { font-size: 12px; margin-top: 6px; }
.cr-guest-entry button { min-height: 46px; }
.cr-arrows { opacity: 1; z-index: 2; }
.cr-arrows .green { stroke: #ffb52e; fill: #ffb52e; }
.cr-arrows .red { stroke: #ed5b4e; fill: #ed5b4e; }
.cr-arrows .blue { stroke: #429df0; fill: #429df0; }
.cr-arrows .yellow { stroke: #edbe24; fill: #edbe24; }
.cr-arrows [data-annotation="arrow"] { opacity: .8; stroke: none; }
.cr-arrows [data-annotation="square"] { fill-opacity: .34; stroke-opacity: .95; }
.cr-arrows .cr-annotation-preview { opacity: .65; }

.cr-board-area:fullscreen { border: 0; border-radius: 0; background: var(--cr-bg); }

@media (max-width: 1150px) {
  .cr-workspace { padding: 0 16px 18px; }
  .cr-columns { grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; }
  .cr-header h1 { font-size: 22px; }
  .cr-board-actions button { font-size: 11px; padding: 7px 5px; }
  .cr-candidate-moves small { max-width: 190px; }
}
@media (max-width: 860px) {
  .cr-rail { width: 72px; padding: 18px 5px; }
  .cr-rail a { font-size: 10px; }
  .cr-workspace, .cr-lobby, .cr-guest-entry { margin-left: 72px; }
  .cr-columns { grid-template-columns: minmax(0, 1fr); max-width: 670px; }
  .cr-board-area { max-width: min(100%, calc(100dvh - 260px)); }
  .cr-sidebar { max-height: none; padding-right: 0; }
  .cr-panel-body { max-height: 550px; }
  .cr-guest-entry > div { padding: 30px; }
}
@media (max-width: 620px) {
  .cr-rail { width: 100%; height: 62px; padding: 5px 12px; gap: 6px; }
  .cr-rail a { padding: 8px; font-size: 11px; }
  .cr-rail > a:not(.cr-brand) span { display: none; }
  .cr-rail > a[aria-current] span { display: inline; }
  .cr-rail .cr-brand { padding: 0; }
  .cr-rail-bottom { flex-direction: row; margin: 0 0 0 auto; gap: 0; }
  .cr-rail-bottom button { width: 34px; min-height: 34px; padding: 7px; border-radius: 10px; }
  .cr-rail-bottom .cr-theme-toggle { width: 34px; padding: 7px; }
  .cr-theme-toggle span { display: none; }
  .cr-guest-label { display: none; }
  .cr-workspace, .cr-lobby, .cr-guest-entry { margin-left: 0; }
  .cr-workspace { padding: 0 12px 24px; }
  .cr-header { height: 75px; gap: 8px; margin-bottom: 8px; }
  .cr-header h1 { font-size: 18px; }
  .cr-connection { font-size: 10px; padding: 3px 6px; }
  .cr-header-actions { gap: 5px; }
  .cr-header-actions button { padding: 7px; min-height: 36px; }
  .cr-board-area { max-width: 100%; padding: 10px; border-radius: 22px; }
  .cr-board { border-radius: 14px; }
  .cr-board-actions button { min-height: 44px; font-size: 11px; padding: 6px; }
  .cr-annotation-tools { gap: 6px; }
  .cr-annotation-tools > span { font-size: 10px; }
  .cr-player small { font-size: 10px; }
  .cr-panel-body { max-height: none; padding: 17px; }
  .cr-candidate-moves small { max-width: 190px; }
  .cr-room-heading { padding: 10px 12px; }
  .cr-room-content { padding: 0 17px 17px; }
  .cr-room-tabs button { font-size: 12px; padding: 8px 5px; }
  .cr-guest-entry { min-height: calc(100dvh - 62px); padding: 25px 16px; }
  .cr-guest-entry > div { padding: 28px 22px; }
  .cr-guest-entry h1 { font-size: 30px; }
  .cr-lobby-actions form { padding: 22px; }
  .classroom .cr-editor-panel { border-radius: 20px; }
}
@media (max-width: 360px) {
  .cr-rail { gap: 3px; padding: 5px 8px; }
  .cr-rail a { padding: 7px 5px; font-size: 10px; }
  .cr-header-actions button { padding: 6px; font-size: 10px; }
  .cr-annotation-tools > span { width: 100%; margin-left: 0; text-align: center; }
  .cr-board-actions svg { width: 14px; }
  .cr-candidate-moves small { max-width: 155px; }
}
@media (prefers-reduced-motion: reduce) { .cr-switch-track:after { transition: none; } }

.cr-arrows marker path { stroke-width: 0; }
.cr-sidebar > section { flex-shrink: 0; }
.cr-panel-body { max-height: min(430px, calc(100dvh - 280px)); }
.classroom .cr-engine-line.rank-1:disabled:hover { background: var(--cr-raised); }
@media (max-width: 620px) { .cr-panel-body { max-height: none; } }

/* Board-first classroom proportions, matching the owner's reference. */
.cr-drag-piece { position: absolute; top: 0; left: 0; z-index: 8; pointer-events: none; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.12)); }
.cr-square img { position: relative; z-index: 1; }
.cr-square img { width: 100%; height: 100%; object-fit: contain; }
.classroom .cr-board.is-dragging .cr-square { box-shadow: none; outline: none; cursor: grabbing; }
.cr-board.is-dragging .cr-square:after { display: none; }
.cr-position-controls { padding: 8px 12px 12px; border-top: 1px solid var(--cr-line); flex-shrink: 0; min-width: 0; }
.cr-position-controls .cr-board-tools { margin-top: 0; }
.cr-position-controls .cr-board-actions { margin-top: 7px; gap: 5px; }
.cr-position-controls .cr-board-actions button { font-size: 12px; padding: 7px 5px; }
.cr-position-controls .cr-annotation-tools { margin-top: 7px; flex-wrap: wrap; }
.cr-position-controls .cr-annotation-tools > span { font-size: 10px; }
.cr-analysis-controls { gap: 14px; }
.cr-analysis-switch { gap: 5px !important; font-size: 12px; }
.classroom .cr-analysis-switch input { width: 28px; height: 17px; }
.cr-switch-track { width: 28px; height: 17px; }
.cr-switch-track:after { width: 13px; height: 13px; top: 2px; left: 2px; }
.cr-analysis-switch input:checked + .cr-switch-track:after { transform: translateX(11px); }
.cr-engine-heading { margin: 10px 0 6px; font-size: 12px; }
.cr-engine-heading img { display: none; }
.cr-engine-heading strong { font-size: 12px; }
.cr-engine-heading small { font-size: 10px; }
.cr-engine-line .cr-candidate-rank { display: none; }
.classroom .cr-engine-line, .classroom .cr-engine-line.rank-1 { min-height: 29px; padding: 5px 0; margin: 0; border-radius: 0; background: transparent; gap: 7px; border-top: 1px solid var(--cr-line); }
.cr-candidate-score { order: -1; min-width: 43px; padding: 2px 4px; border-radius: 4px; background: var(--cr-raised); color: var(--cr-fg); font-size: 11px; text-align: center; }
.cr-candidate-moves { display: flex; align-items: baseline; gap: 4px; min-width: 0; overflow: hidden; }
.cr-candidate-moves strong { font-size: 12px; flex-shrink: 0; }
.cr-candidate-moves small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-engine-status { font-size: 10px; margin-top: 5px; }
@media (min-width: 861px) {
  .cr-workspace { padding: 0 28px 12px; }
  .cr-header { height: 54px; margin-bottom: 10px; }
  .cr-header h1 { font-size: 20px; }
  .cr-columns { max-width: 1360px; grid-template-columns: minmax(0, 1fr) 500px; gap: 30px; align-items: start; margin: 0 0 0 clamp(0px, 4.5vw, 86px); }
  .cr-board-area { max-width: min(100%, calc(100dvh - 125px)); padding: 0; background: transparent; border: 0; border-radius: 0; }
  .cr-board-area > .cr-player { display: none; }
  .cr-board-wrap { gap: 10px; }
  .cr-evaluation { width: 22px; }
  .cr-board-hint { font-size: 10px; margin-top: 7px !important; }
  .cr-sidebar { display: flex; flex-direction: column; height: calc(100dvh - 78px); max-height: none; gap: 10px; overflow: auto; }
  .cr-analysis-panel { display: flex; flex-direction: column; flex: 1 0 360px; min-height: 0; }
  .cr-panel-body { flex: 1; min-height: 0; max-height: none; padding: 12px; overflow: auto; }
  .cr-room-panel { display: flex; flex-direction: column; flex: 0 1 auto; max-height: 36%; }
  .cr-room-heading { padding: 10px 12px; }
  .cr-clock { padding: 10px 12px; font-size: 21px; }
  .cr-room-content { padding: 0 12px 12px; min-height: 0; overflow: auto; }
  .cr-participants { max-height: 180px; }
}
@media (min-width: 861px) and (max-width: 1450px) {
  .cr-columns { grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; margin-left: 0; }
}
@media (min-width: 861px) and (max-width: 1150px) {
  .cr-columns { grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; }
}
@media (max-width: 860px) {
  .cr-board-area { max-width: 100%; }
  .cr-position-controls { padding: 8px 10px 10px; }
  .cr-analysis-panel { min-width: 0; }
  .cr-position-controls .cr-board-tools button { padding: 7px 5px; }
  .cr-position-controls .cr-board-actions button { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .cr-drag-piece { transition: none !important; } }

.cr-guest-badge { margin-left: 6px; display: inline-block; font-size: 10px; padding: 2px 5px; border-radius: 5px; background: var(--cr-raised); color: var(--cr-muted); vertical-align: middle; }
.cr-call-note { padding-top: 10px; color: var(--cr-muted); font-size: 12px; }
html[data-classroom-theme="dark"] .cr-guest-entry > div > img { filter: invert(1); }

/* Coordinates sit in their own gutters so pieces never obscure a square label. */
.cr-board-coordinates { --cr-coordinate-gutter: 18px; display: grid; grid-template-columns: var(--cr-coordinate-gutter) minmax(0,1fr); grid-template-rows: minmax(0,1fr) var(--cr-coordinate-gutter); flex: 1; min-width: 0; width: 100%; }
.cr-board-coordinates > .cr-board { grid-column: 2; grid-row: 1; }
.cr-ranks, .cr-files { display: grid; color: var(--cr-muted); font: 500 11px/1 Montreal,sans-serif; user-select: none; pointer-events: none; }
.cr-ranks { grid-column: 1; grid-row: 1; grid-template-rows: repeat(8,1fr); }
.cr-files { grid-column: 2; grid-row: 2; grid-template-columns: repeat(8,1fr); }
.cr-ranks span, .cr-files span { display: grid; place-content: center; }
.cr-board-wrap > .cr-evaluation { margin-bottom: 18px; }

.cr-attendance { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; padding: 10px 12px; background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 14px; }
.cr-attendance-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 0 120px; padding-top: 3px; font-size: 12px; }
.cr-attendance-heading svg { width: 16px; height: 16px; }
.cr-join-notice { flex-basis: 100%; color: var(--cr-muted); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.cr-join-notice:empty { display: none; }
.cr-joined-count { flex-basis: 100%; padding-left: 22px; }
.cr-participant-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-participant-name strong { min-width: 0; }
.cr-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; width: 16px; flex: 0 0 16px; }
.classroom .cr-signal.disconnected > svg { width: 16px; height: 16px; flex: none; }
.cr-signal i { display: block; width: 3px; height: 4px; background: currentColor; border-radius: 1px; opacity: .22; }
.cr-signal i:nth-child(2) { height: 8px; }
.cr-signal i:nth-child(3) { height: 12px; }
.cr-signal i:first-child, .cr-signal.connected i, .cr-signal.reconnecting i:nth-child(2), .cr-signal.checking i:nth-child(2), .cr-signal.unavailable i:nth-child(2) { opacity: 1; }
.cr-signal.connected, .cr-person-state.connected { color: #78c88a; }
.cr-signal.reconnecting, .cr-signal.checking, .cr-signal.unavailable, .cr-person-state.reconnecting, .cr-person-state.checking, .cr-person-state.unavailable { color: #e7be64; }
.cr-signal.disconnected, .cr-person-state.disconnected { color: #ee9c90; }
html[data-classroom-theme="light"] .cr-signal.connected, html[data-classroom-theme="light"] .cr-person-state.connected { color: #28743c; }
html[data-classroom-theme="light"] .cr-signal.reconnecting, html[data-classroom-theme="light"] .cr-signal.checking, html[data-classroom-theme="light"] .cr-signal.unavailable, html[data-classroom-theme="light"] .cr-person-state.reconnecting, html[data-classroom-theme="light"] .cr-person-state.checking, html[data-classroom-theme="light"] .cr-person-state.unavailable { color: #8a5d10; }
html[data-classroom-theme="light"] .cr-signal.disconnected, html[data-classroom-theme="light"] .cr-person-state.disconnected { color: #a73c32; }
.cr-participant.is-disconnected .cr-media-tile { opacity: .55; }
.cr-attendance .cr-participants { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; max-height: none; overflow: visible; }
.cr-attendance .cr-participant { flex: 0 1 auto; min-width: 140px; max-width: 250px; min-height: 40px; gap: 7px; padding: 3px 8px 3px 0; border: 0; }
.cr-attendance .cr-media-tile { width: 30px; height: 30px; border-radius: 50%; background: var(--cr-raised); }
.cr-attendance .cr-media-tile > span { font-size: 15px; color: var(--cr-fg); }
.cr-attendance .cr-participant-meta strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-attendance .cr-participant-meta small { display: block; font-size: 10px; }
.cr-attendance .cr-participant-menu summary { display: flex; padding: 7px 2px; }
.cr-participant-menu > div { max-width: min(230px,70vw); }
.cr-sidebar .cr-analysis-panel { flex: 1 0 350px; min-height: 350px; }
.cr-room-panel.cr-chat-panel { display: flex; flex-direction: column; flex: 0 0 230px; min-height: 230px; max-height: none; overflow: visible; }
.cr-chat-panel .cr-room-heading { padding: 9px 12px; flex-shrink: 0; }
.cr-chat-panel .cr-room-heading h2 { font-size: 15px; }
.cr-chat-panel .cr-room-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 12px 12px; gap: 12px; overflow: auto; overscroll-behavior: contain; }
.cr-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cr-chat-panel .cr-chat { flex: none; gap: 10px; }
.cr-chat-panel .cr-chat form { flex-shrink: 0; }
.cr-chat-messages { flex: 1; min-height: 64px; max-height: none; overscroll-behavior: contain; }
.cr-chat-panel .cr-chat-messages { flex: none; max-height: 180px; }
.cr-share-details { margin-top: 9px; font-size: 11px; }
.cr-share-details > summary { width: fit-content; cursor: pointer; color: var(--cr-muted); }
.cr-share-details[open] { flex-shrink: 0; }
.classroom .cr-confirm-dialog { position: fixed; inset: 0; width: min(440px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px; overflow: auto; color: var(--cr-fg); background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 20px; box-shadow: 0 18px 80px #0004; }
.cr-confirm-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.cr-confirm-dialog h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; }
.cr-confirm-dialog p { color: var(--cr-muted); font-size: 14px; line-height: 1.6; }
.classroom .cr-confirm-dialog label { display: grid; gap: 8px; font-size: 13px; }
.cr-confirm-dialog input { width: 100%; }
.cr-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.classroom .cr-confirm-actions button { min-height: 42px; padding: 9px 16px; border-radius: 10px; }
.classroom .cr-confirm-primary.danger { color: #fff; background: #a32f24; }
.classroom .cr-confirm-primary.danger:hover { background: #8d261e; }
.cr-chat-panel:has(.cr-share-details[open]) { flex-basis: auto; }
@media (min-width: 861px) {
  .cr-board-area { max-width: min(100%,calc(100dvh - 210px)); }
  .cr-sidebar { height: calc(100dvh - 170px); }
}
@media (max-width: 860px) {
  .cr-room-panel.cr-chat-panel { display: flex; flex-direction: column; }
  .cr-sidebar .cr-analysis-panel { flex-basis: auto; }
}
@media (max-width: 620px) {
  .cr-attendance { flex-direction: column; gap: 6px; padding: 10px; }
  .cr-attendance-heading { flex-basis: auto; width: 100%; }
  .cr-join-notice { flex-basis: auto; margin-left: auto; max-width: 65%; text-align: right; }
  .cr-attendance .cr-participant { max-width: 100%; }
  .cr-chat-panel { min-height: 250px; }
}

/* Teaching controls and curriculum browser share the classroom's theme tokens. */
@media (max-width: 620px) {
  .cr-workspace:not(.cr-lesson-mode) .cr-header { height: auto; min-height: 98px; flex-wrap: wrap; padding: 12px 0; gap: 10px; }
  .cr-workspace:not(.cr-lesson-mode) .cr-header > div:first-child { flex: 1 0 100%; flex-direction: row; align-items: center; }
  .cr-workspace:not(.cr-lesson-mode) .cr-header h1 { flex: 1; min-width: 0; max-width: none; }
  .cr-workspace:not(.cr-lesson-mode) .cr-header-actions { flex: 1 0 100%; flex-wrap: wrap; }
}
.cr-games-list > div.active { background: var(--cr-raised); border: 1px solid var(--cr-line); border-radius: 12px; }
.classroom .cr-games-list .cr-game-name { color: var(--cr-fg); }
.classroom .cr-game-name:disabled { opacity: 1; }
.cr-games-list > div.active small { color: var(--cr-muted); }
.classroom .cr-games-list button:hover { background: var(--cr-hover); }
.cr-games-list > div.active .cr-game-name strong::after { content: ' · Current'; color: var(--cr-accent); font-size: 11px; font-weight: 400; }
.cr-teaching-actions { padding: 12px 12px 0; }
.classroom .cr-load-puzzles { width: 100%; min-height: 48px; font-size: 17px; font-weight: 700; }
.cr-current-position { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.cr-current-position > div:first-child { min-width: 0; }
.cr-current-position h2 { display: block; overflow-wrap: anywhere; font-size: 15px; margin: 0; }
.cr-current-position small { display: block; margin-top: 3px; font-size: 12px; }
.cr-current-position > div:last-child:not(:first-child) { display: flex; flex-shrink: 0; gap: 5px; }
.cr-current-position button { padding: 6px; border: 1px solid var(--cr-line); }
.cr-student-analysis { margin-top: 12px; font-size: 12px; color: var(--cr-muted); }
.cr-student-control { margin-top: 6px; font-size: 11px; color: var(--cr-muted); }
.cr-student-control select { padding: 5px 7px; font-size: 12px; }
.cr-student-control { flex-wrap: wrap; }
.cr-exercise-question { padding: 12px; margin-bottom: 14px; background: var(--cr-soft); border-radius: 12px; }
.cr-exercise-question summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.cr-exercise-question p { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; }
.classroom .cr-puzzle-library { width: 960px; max-width: calc(100vw - 32px); height: min(800px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; overscroll-behavior: contain; }
.classroom .cr-puzzle-library[open] { display: flex; flex-direction: column; }
.cr-puzzle-library > .cr-puzzle-header, .cr-puzzle-library > .cr-puzzle-footer, .cr-puzzle-library > .cr-puzzle-navigation, .cr-puzzle-library > .cr-puzzle-lesson-heading { flex: none; }
.cr-puzzle-catalog { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-puzzle-catalog > .cr-error { margin: 0 28px 20px; }
.cr-puzzle-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; }
.cr-puzzle-header h2 { margin: 0; font-size: 26px; }
.cr-puzzle-header p { margin: 5px 0 0; color: var(--cr-muted); font-size: 14px; }
.cr-puzzle-header > button { background: transparent; padding: 6px; flex-shrink: 0; }
.cr-puzzle-academy { margin: 0 28px 20px; display: flex; gap: 12px; align-items: center; }
.cr-puzzle-academy select { flex: 1; min-width: 0; min-height: 44px; }
@media (max-width: 620px) { .cr-puzzle-academy { margin: 0 16px 16px; } }
.cr-puzzle-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 28px 20px; }
.classroom .cr-puzzle-tracks button { justify-content: space-between; text-align: left; gap: 14px; border: 1px solid var(--cr-line); padding: 14px 16px; background: var(--cr-panel); }
.classroom .cr-puzzle-tracks button[aria-pressed="true"] { background: var(--cr-raised); border-color: var(--cr-accent); }
.cr-puzzle-tracks button > span { font: 700 17px Montreal, sans-serif; }
.cr-puzzle-tracks button > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cr-puzzle-tracks small { display: block; font: 400 12px/1.4 Teka, sans-serif; margin-top: 4px; }
.cr-puzzle-filters { display: grid; grid-template-columns: minmax(180px, 1fr) 180px 170px; align-items: end; gap: 12px; padding: 0 28px 20px; border-bottom: 1px solid var(--cr-line); }
.cr-puzzle-filters label { flex-direction: column; align-items: stretch; font-size: 12px; }
.cr-puzzle-filters input, .cr-puzzle-filters select { width: 100%; min-height: 44px; font-size: 14px; }
.cr-puzzle-results { padding: 16px 28px 24px; }
.cr-puzzle-result-count { font-size: 12px; color: var(--cr-muted); }
.cr-puzzle-session-group h3 { font-size: 15px; margin: 20px 0 8px; }
.cr-puzzle-session-group:first-of-type h3 { margin-top: 12px; }
.classroom .cr-puzzle-session { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; justify-content: start; padding: 14px 4px; border-radius: 0; border-top: 1px solid var(--cr-line); background: transparent; }
.classroom .cr-puzzle-session:hover { background: var(--cr-soft); }
.cr-puzzle-session > span:nth-child(2) { flex: 1; min-width: 0; }
.cr-puzzle-session strong { display: block; font-size: 16px; }
.cr-puzzle-session small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 12px; }
.cr-puzzle-session svg { flex-shrink: 0; width: 18px; }
.cr-puzzle-session-id { color: var(--cr-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cr-puzzle-empty { padding: 32px 0; }
.cr-puzzle-empty h3 { font-size: 20px; }
.cr-puzzle-empty p { color: var(--cr-muted); }
.classroom .cr-puzzle-more { margin: 18px 0 0; width: 100%; }
.cr-puzzle-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--cr-line); background: var(--cr-panel); }
.cr-puzzle-footer > div { display: flex; gap: 8px; }
.cr-puzzle-footer button { font-size: 13px; }
.classroom .cr-puzzle-back { margin: 0 28px 16px; background: transparent; padding: 0; color: var(--cr-accent); font-size: 13px; }
.cr-puzzle-lesson-heading { padding: 0 28px 20px; }
.cr-puzzle-lesson-heading h3 { font: 700 22px/1.2 Montreal, sans-serif; margin: 8px 0; }
.cr-puzzle-lesson-heading p { color: var(--cr-muted); font-size: 14px; margin: 0; }
.cr-puzzle-library > [role="status"], .cr-puzzle-library > .cr-error { margin: 0 28px 24px; }
.cr-puzzle-detail { display: grid; flex: 1; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0,1fr); gap: 28px; padding: 0 28px 16px; }
.cr-puzzle-position-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 10px; }
.cr-puzzle-selected { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-gutter: stable; container-type: size; }
.cr-puzzle-lesson .cr-puzzle-header { padding-block: 16px 12px; }
.cr-puzzle-lesson .cr-puzzle-header h2 { font: 700 24px/1.2 Montreal,sans-serif; }
.cr-puzzle-lesson .cr-puzzle-header p { display: none; }
.cr-puzzle-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 28px 8px; }
.cr-puzzle-navigation > small { font-size: 12px; color: var(--cr-muted); text-align: right; }
.classroom .cr-puzzle-lesson .cr-puzzle-back { min-height: 32px; margin: 0; flex: none; }
.cr-puzzle-lesson .cr-puzzle-lesson-heading { max-height: min(144px,24dvh); overflow: auto; padding-bottom: 12px; }
.cr-puzzle-lesson .cr-puzzle-lesson-heading h3 { font-size: 20px; margin: 0 0 6px; }
.cr-puzzle-lesson .cr-puzzle-preview { width: min(100%,100cqh); margin-inline: auto; }
.cr-puzzle-lesson > .cr-error { flex: none; max-height: 72px; overflow: auto; margin-bottom: 12px; }
.cr-puzzle-position-list h4 { font-size: 13px; color: var(--cr-muted); margin: 18px 0 8px; }
.cr-puzzle-position-list section:first-child h4 { margin-top: 0; }
.classroom .cr-puzzle-position-list button { width: 100%; padding: 12px; justify-content: space-between; text-align: left; background: transparent; border: 1px solid transparent; }
.classroom .cr-puzzle-position-list button[aria-pressed="true"] { background: var(--cr-raised); border-color: var(--cr-accent); }
.classroom .cr-puzzle-position-list button:hover { background: var(--cr-soft); }
.cr-puzzle-position-list button > span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.cr-puzzle-position-list small { display: block; margin-top: 3px; }
.cr-puzzle-position-list svg { flex-shrink: 0; }
.cr-puzzle-preview { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: 12px; margin-bottom: 16px; }
.cr-puzzle-preview > span { aspect-ratio: 1; display: grid; }
.cr-puzzle-preview .light { background: #edf0e0; }
.cr-puzzle-preview .dark { background: #879e85; }
.cr-puzzle-preview img { width: 100%; height: 100%; }
.cr-puzzle-selected > strong { font-size: 15px; }
.cr-puzzle-selected > p { font-size: 14px; margin: 8px 0; white-space: pre-wrap; }
.cr-puzzle-selected > small { display: block; font-size: 12px; }
.cr-puzzle-answer { padding: 10px 0; border-top: 1px solid var(--cr-line); margin: 12px 0; font-size: 13px; }
.cr-puzzle-answer summary { cursor: pointer; color: var(--cr-accent); }
.cr-puzzle-answer p { margin: 10px 0 0; white-space: pre-wrap; }

/* Keep the board, private teaching cues and room controls in the same view. */
.cr-coach-panel { min-width: 0; background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: var(--cr-radius); overflow: hidden; }
.cr-coach-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--cr-line); }
.cr-coach-panel > header h2 { margin: 0; font-size: 20px; }
.cr-coach-panel > header span { display: block; margin-top: 3px; color: var(--cr-muted); font-size: 11px; }
.cr-coach-panel > header small { display: block; margin-top: 5px; color: var(--cr-accent); font-size: 12px; }
.cr-coach-minimize { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; border: 1px solid var(--cr-line); border-radius: 7px; background: var(--cr-raised); color: var(--cr-fg); font: inherit; font-size: 12px; cursor: pointer; }
.cr-coach-restore { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--cr-muted); font-size: 12px; }
.cr-coach-restore button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--cr-line); border-radius: 7px; background: var(--cr-panel); color: var(--cr-fg); font: inherit; cursor: pointer; }
@media (max-width: 620px) {
  .cr-header { height: auto; min-height: 75px; flex-wrap: wrap; padding-block: 12px; }
  .cr-header > div:first-child { flex: 1 1 100%; }
  .cr-header-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
}
.cr-coach-body { padding: 20px; overflow: auto; overflow-wrap: anywhere; }
.cr-coach-body h3 { margin: 0 0 9px; font: 700 15px/1.3 Montreal, sans-serif; }
.cr-coach-body p, .cr-coach-body li { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.cr-coach-body p { margin: 0 0 10px; }
.cr-coach-body p:last-child { margin-bottom: 0; }
.cr-coach-body ul { margin: 0; padding-left: 19px; }
.cr-coach-body li + li { margin-top: 9px; }
.cr-coach-lesson { margin-bottom: 20px; }
.cr-coach-lesson h3 { font-size: 20px; margin-bottom: 5px; }
.cr-coach-question { padding: 16px; border-radius: 12px; background: var(--cr-soft); margin-bottom: 22px; }
.cr-coach-question h3 { font-size: 12px; margin-bottom: 8px; }
.cr-coach-question p { font-size: 17px; }
.cr-coach-question small { font-size: 11px; display: block; margin-top: 10px; }
.cr-coach-section { margin: 0 0 22px; }
.cr-coach-answer, .cr-coach-discussion, .cr-coach-lesson-notes { border-top: 1px solid var(--cr-line); padding-top: 17px; margin: 0 0 22px; }
.cr-coach-body summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 3px 0; }
.cr-coach-body details[open] > summary { margin-bottom: 10px; }
.cr-coach-body .cr-coach-solution { color: var(--cr-accent); font-weight: 700; font-size: 17px; }
.cr-coach-lesson-notes > details { padding: 10px 0; }
.cr-coach-lesson-notes > details + details { border-top: 1px solid var(--cr-line); }
.cr-coach-discussion h4 { font-size: 13px; margin: 16px 0 8px; }
.cr-coach-empty { padding: 12px 0; color: var(--cr-muted); }
.cr-coach-empty h3 { color: var(--cr-fg); font-size: 20px; }
@media (max-width: 860px) {
  .cr-coach-panel { height: auto; }
  .cr-coach-body { max-height: 520px; }
}
@media (max-width: 620px) {
  .cr-coach-panel > header { padding: 16px; }
  .cr-coach-body { padding: 16px; max-height: 480px; }
}
@media (max-width: 620px) {
  .classroom .cr-puzzle-library { max-width: calc(100vw - 20px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .cr-puzzle-header { padding: 20px 16px 16px; }
  .cr-puzzle-header h2 { font-size: 23px; }
  .cr-puzzle-header p { font-size: 13px; }
  .cr-puzzle-tracks { margin: 0 16px 16px; gap: 8px; }
  .classroom .cr-puzzle-tracks button { padding: 12px; align-items: start; gap: 8px; }
  .cr-puzzle-tracks button > span { font-size: 15px; }
  .cr-puzzle-tracks small { font-size: 11px; }
  .cr-puzzle-filters { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
  .cr-puzzle-filters .cr-puzzle-search { grid-column: 1 / -1; }
  .cr-puzzle-results { padding: 14px 16px 20px; }
  .classroom .cr-puzzle-session { gap: 10px; }
  .cr-puzzle-session strong { font-size: 15px; }
  .cr-puzzle-footer { padding: 16px; flex-direction: column; align-items: stretch; }
  .cr-puzzle-footer > div { flex-wrap: wrap; }
  .cr-puzzle-footer button { flex: 1; }
  .classroom .cr-puzzle-back { margin-left: 16px; }
  .cr-puzzle-lesson-heading { padding: 0 16px 20px; }
  .cr-puzzle-detail { grid-template-columns: 1fr; grid-template-rows: minmax(0,.7fr) minmax(0,1fr); padding: 0 16px 12px; gap: 12px; }
  .cr-puzzle-position-list { max-height: none; }
  .cr-puzzle-selected { max-width: 320px; width: 100%; justify-self: center; }
  .cr-puzzle-library > [role="status"], .cr-puzzle-library > .cr-error { margin-left: 16px; margin-right: 16px; }
  .cr-puzzle-catalog > .cr-error { margin-inline: 16px; }
  .cr-puzzle-navigation { padding-inline: 16px; gap: 8px; }
  .cr-puzzle-navigation > small { font-size: 11px; }
}

/* Use the classroom's available width, not the window behind the console rail. */
.cr-free-mode { container: classroom-free / inline-size; }
.dash-classroom:has(.cr-free-mode) .dash-topbar { min-height: 54px; padding-block: 3px; }
.dash-classroom:has(.cr-free-mode) .console-live-main { height: calc(100dvh - 54px); }
.classroom .cr-free-mode .cr-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: 0; max-width: none; align-items: start; }
.classroom .cr-free-mode .cr-columns > * { grid-column: auto; grid-row: auto; min-width: 0; }
.classroom .cr-free-mode .cr-board-area { max-width: 100%; justify-self: center; padding: 0; }
.classroom .cr-free-mode .cr-coach-panel { display: flex; flex-direction: column; height: auto; }
.classroom .cr-free-mode .cr-coach-body { flex: 1; min-height: 0; max-height: 520px; }
.classroom .cr-free-mode .cr-sidebar { display: flex; flex-direction: column; height: auto; max-height: none; overflow: visible; padding: 0; gap: 12px; }
.classroom .cr-free-mode .cr-analysis-panel { min-height: 440px; flex: none; }
.classroom .cr-free-mode .cr-analysis-panel > :not(.cr-panel-body) { flex-shrink: 0; }
.classroom .cr-free-mode .cr-panel-body { min-height: 120px; max-height: 460px; overflow: auto; }
.classroom .cr-free-mode .cr-chat-panel { min-height: 210px; flex: none; }
@container classroom-free (min-width: 900px) {
  .classroom .cr-free-mode .cr-teaching-actions { padding: 10px 10px 0; }
  .classroom .cr-free-mode .cr-load-puzzles { min-height: 40px; font-size: 15px; }
  .classroom .cr-free-mode .cr-current-position { padding: 8px 12px; }
  .classroom .cr-free-mode .cr-tabs { padding: 5px; }
  .classroom .cr-free-mode .cr-tabs button { min-height: 32px; padding: 6px 10px; }
  .classroom .cr-free-mode .cr-position-controls { padding: 6px 8px 8px; }
  .classroom .cr-free-mode .cr-board-tools button { min-height: 30px; padding: 4px 7px; }
  .classroom .cr-free-mode .cr-board-actions button { min-height: 32px; padding: 5px 4px; font-size: 11px; }
  .classroom .cr-free-mode .cr-annotation-tools button { min-height: 30px; padding-block: 4px; }
}
@container classroom-free (min-width: 760px) {
  .classroom .cr-free-mode .cr-columns { grid-template-columns: minmax(0,1fr) clamp(320px,28cqw,420px); }
  .classroom .cr-free-mode .cr-board-area { max-width: min(100%,max(380px,calc(var(--cr-free-height,100dvh) - 48px))); }
  .classroom .cr-free-mode .cr-sidebar { min-height: max(440px,var(--cr-free-height,600px)); }
  /* Keep the board at the left edge and spend reclaimed cue space on the board. */
  .classroom .cr-free-mode .cr-columns:not(.has-coach-guide) { --cr-tools-width: clamp(320px,28cqw,420px); --cr-board-floor: calc(100cqw - var(--cr-tools-width) - 16px); --cr-board-column: min(calc(100cqw - var(--cr-tools-width) - 16px),max(var(--cr-board-floor),calc(var(--cr-free-height,100dvh) - 36px))); grid-template-columns: minmax(0,var(--cr-board-column)) minmax(var(--cr-tools-width),1fr); margin: 0; }
  .classroom .cr-free-mode .cr-columns:not(.has-coach-guide) > .cr-board-area { max-width: none; justify-self: start; }
}
@container classroom-free (min-width: 760px) {
  .classroom .cr-free-mode .has-coach-guide .cr-board-area { grid-column: 1; grid-row: 1; }
  .classroom .cr-free-mode .has-coach-guide .cr-coach-panel { grid-column: 1; grid-row: 2; }
  .classroom .cr-free-mode .has-coach-guide .cr-sidebar { grid-column: 2; grid-row: 1 / span 2; }
}
@container classroom-free (min-width: 1100px) {
  .classroom .cr-free-mode .cr-columns:not(.has-coach-guide) { --cr-tools-width: clamp(320px,23cqw,420px); --cr-board-floor: max(420px,calc((100cqw - var(--cr-tools-width) - 32px) * .607843)); }
  .classroom .cr-free-mode .cr-columns.has-coach-guide { --cr-tools-width: clamp(320px,23cqw,420px); --cr-board-column: calc((100cqw - var(--cr-tools-width) - 32px) * .607843); --cr-column-height: max(682px,var(--cr-free-height,682px),calc(var(--cr-board-column) + 24px)); grid-template-columns: minmax(420px,1.55fr) minmax(280px,1fr) var(--cr-tools-width); }
  .classroom .cr-free-mode .has-coach-guide > .cr-board-area { grid-column: 1; grid-row: 1; width: 100%; max-width: none; align-self: start; }
  .classroom .cr-free-mode .has-coach-guide > .cr-coach-panel { grid-column: 2; grid-row: 1; height: var(--cr-column-height); }
  .classroom .cr-free-mode .has-coach-guide .cr-coach-body { max-height: none; }
  .classroom .cr-free-mode .has-coach-guide > .cr-sidebar { grid-column: 3; grid-row: 1; height: var(--cr-column-height); display: grid; grid-template-rows: minmax(440px,1fr) minmax(230px,.45fr); }
  .classroom .cr-free-mode .cr-analysis-panel { height: 100%; min-height: 0; }
  .classroom .cr-free-mode .cr-panel-body { flex: 1; min-height: 0; max-height: none; }
  .classroom .cr-free-mode .cr-chat-panel { height: 100%; min-height: 0; }
}
@container classroom-free (max-width: 1099px) {
  .classroom .cr-free-mode .has-coach-guide .cr-board-area { max-width: 100%; }
  .classroom .cr-free-mode .cr-header { height: auto; min-height: 98px; flex-wrap: wrap; padding-block: 12px; }
  .classroom .cr-free-mode .cr-header > div:first-child { flex: 1 0 100%; flex-direction: row; align-items: center; }
  .classroom .cr-free-mode .cr-header h1 { flex: 1; min-width: 0; max-width: none; }
  .classroom .cr-free-mode .cr-header-actions { flex: 1 0 100%; flex-wrap: wrap; }
}

/* Engine controls use an explicit processor symbol and readable text. */
.cr-analysis-controls { flex-wrap:wrap; }
.cr-analysis-controls > .cr-engine-button { width:auto; min-width:136px; gap:7px; margin-left:auto; padding-inline:10px; }
.cr-student-naming { padding-top:16px; margin-top:16px; border-top:1px solid var(--cr-line); font-size:13px; }
.cr-student-naming:has(form) { padding:16px; border:1px solid var(--cr-line); border-radius:12px; background:var(--cr-panel); }
.cr-student-naming form { display:grid; gap:8px; padding-block:14px; }
.cr-student-naming label { display:block; }
.cr-student-naming :is(input,select) { width:100%; min-width:0; }
.cr-student-naming p { margin-bottom:10px; }
.cr-guest-entry .cr-guest-new-student { display:flex; align-items:flex-start; gap:8px; font-size:13px; margin-top:8px; }
.cr-guest-entry .cr-guest-new-student input { width:18px; min-height:18px; margin-top:2px; flex:none; }
.cr-class-completion { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; font-size:12px; }
.cr-class-completion label { flex:none; }
.cr-class-completion select { width:min(280px,100%); min-width:0; }
.cr-class-completion button { min-height:40px; }
.cr-class-completion p { width:100%; margin:0; color:var(--cr-muted); }
@media(min-width:1000px) { .cr-lesson-mode:has(.cr-class-completion) { --cr-lesson-board-size:min(620px,calc(100dvh - 395px)); } }
/* The new position/tool headers must not consume the engine's entire flex pane. */
@media(min-width:861px) {
  .cr-sidebar .cr-analysis-panel { flex:0 0 auto; }
  .cr-sidebar .cr-panel-body { flex:0 0 auto; min-height:220px; max-height:min(420px,50dvh); }
}

/* One room toolbar, including presence, replaces the extra console/header/roster rows. */
#console-classroom-toolbar { display: none; min-width: 0; background: transparent; container: classroom-toolbar / inline-size; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-workarea { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100dvh; overflow: hidden; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-topbar { min-height: 48px; padding: 2px 20px; gap: 8px; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) #console-classroom-toolbar { display: block; flex: 1; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-breadcrumb,
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-user { display: none; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .console-live-main { height: auto; min-height: 0; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .cr-workspace { padding-top: 0; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-menu { width: 36px; height: 36px; padding: 8px; border-radius: 9px; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-theme { padding: 2px; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-theme button { width: 30px; height: 32px; }
.dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-avatar { width: 34px; height: 34px; }
.classroom .cr-header.cr-compact-header { height: auto; min-height: 42px; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; border: 0; }
.classroom .cr-compact-header .cr-room-heading-compact { flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.classroom .cr-compact-header h1 { margin: 0; font-size: 18px; line-height: 1.2; max-width: 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classroom .cr-compact-header .cr-connection { flex: none; margin: 0; padding: 0; background: transparent; font-size: 10px; white-space: nowrap; }
.classroom .cr-compact-header .cr-header-actions { display: flex; flex: none; flex-wrap: nowrap; gap: 5px; margin-left: auto; }
.classroom .cr-compact-header button { min-height: 36px; padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.classroom .cr-compact-header button svg { display: block; width: 18px; height: 18px; flex: none; }
.classroom .cr-compact-header .cr-roster-toggle { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 7px; min-width: 56px; max-width: 480px; padding-inline: 7px; background: transparent; border: 1px solid transparent; }
.classroom .cr-roster-toggle:hover { border-color: var(--cr-line); background: var(--cr-panel); }
.cr-roster-count { flex: none; font-size: 11px; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-roster-names { display: flex; align-items: center; gap: 12px; overflow: hidden; min-width: 0; }
.cr-roster-person { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cr-roster-person > span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-toast-stack { position: fixed; z-index: 50; top: 60px; right: 20px; width: min(440px,calc(100vw - 40px)); display: grid; gap: 8px; pointer-events: none; }
.classroom .cr-toast-stack .cr-banner { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--cr-line); border-radius: 12px; box-shadow: 0 6px 24px #0003; font-size: 13px; pointer-events: auto; }
.cr-toast-stack .cr-banner > span { flex: 1; min-width: 0; }
.cr-toast-stack .cr-banner button { flex: none; }
.cr-lesson-dialog .cr-attendance { flex-direction: column; }
.cr-lesson-dialog .cr-attendance-heading { flex-basis: auto; }
.cr-lesson-dialog .cr-attendance .cr-participants { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); width: 100%; }
.cr-lesson-dialog .cr-attendance .cr-participant { max-width: none; }
@container classroom-toolbar (max-width: 850px) {
  .classroom .cr-compact-header h1 { max-width: 145px; font-size: 16px; }
  .cr-roster-person > span:last-child { max-width: 90px; }
  .classroom .cr-compact-header { gap: 6px; }
}
@container classroom-toolbar (max-width: 680px) {
  .cr-roster-names { display: none; }
  .classroom .cr-compact-header .cr-roster-toggle { flex: none; }
  .classroom .cr-compact-header .cr-open-lesson,
  .classroom .cr-compact-header .cr-back-rooms { font-size: 0; gap: 0; }
}
@media (max-width: 699px) {
  .dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-topbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; padding: 4px 12px; gap: 2px 8px; }
  .dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) .dash-theme { justify-self: end; }
  .dash-classroom:has(#classroom-root:not([hidden]) .cr-workspace) #console-classroom-toolbar { grid-column: 1 / -1; grid-row: 2; }
  .classroom .cr-header.cr-compact-header { flex-wrap: wrap; gap: 4px; padding-block: 2px; }
  .classroom .cr-compact-header .cr-room-heading-compact { flex: 1; gap: 6px; }
  .classroom .cr-compact-header h1 { max-width: 155px; font-size: 16px; }
  .classroom .cr-compact-header .cr-header-actions { flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; }
  .classroom .cr-compact-header .cr-roster-toggle { flex: none; }
  .cr-roster-names { display: none; }
  .classroom .cr-compact-header button { min-height: 34px; }
  .cr-toast-stack { top: auto; bottom: 12px; right: 12px; width: min(440px,calc(100vw - 24px)); }
}
/* Private solving is a dialog; opening it never changes the shared board layout. */
.cr-learning { display: grid; gap: 20px; }
.cr-learning form, .cr-learning-answer label { display: grid; gap: 10px; }
.cr-learning label, .cr-learning-match label { display: grid; gap: 7px; }
.cr-lesson-dialog-body select, .cr-learning textarea, .cr-learning-answer textarea { box-sizing: border-box; width: 100%; min-width: 0; }
.cr-learning form > button { justify-self: start; }
.cr-learning textarea, .cr-learning-answer textarea { min-height: 90px; resize: vertical; }
.cr-learning-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--border, #8885); }
.cr-learning-match > strong, .cr-learning-match > small { grid-column: 1 / -1; }
.cr-learning-answer { display: grid; gap: 14px; }
.cr-learning-board { width: min(100%, 400px); margin: 16px auto; }
.classroom .cr-learning-board .cr-board { width: 100%; height: auto; aspect-ratio: 1; }
.classroom .cr-lesson-dialog .cr-learning-board .cr-square { min-height: 0; width: 100%; padding: 0; border: 0; border-radius: 0; aspect-ratio: 1; }
.classroom .cr-lesson-dialog .cr-learning-board .cr-square.light { background: #edf0e0; }
.classroom .cr-lesson-dialog .cr-learning-board .cr-square.dark { background: #879e85; }
.classroom .cr-lesson-dialog .cr-learning-board .cr-square.selected { background: #bccc79; }
.classroom .cr-lesson-dialog .cr-learning-board .cr-square img { width: 100%; height: 100%; object-fit: contain; }
.cr-learning-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cr-learning-attempts { display: grid; gap: 10px; margin: 14px 0; }
.cr-learning-attempts article { border: 1px solid var(--border, #8885); border-radius: 12px; padding: 14px; }
.cr-learning-attempts header { display: flex; justify-content: space-between; gap: 12px; }
.cr-learning-attempts header span { font-size: 20px; font-weight: 650; }
.cr-learning-attempts p { white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-learning-muted, .cr-learning-attempts small { opacity: .75; }
.cr-learning-timeline { max-height: 300px; overflow: auto; padding-left: 24px; }
.cr-learning-timeline li { padding: 7px; }
.cr-learning-timeline small { display: block; }
@media (max-width: 560px) { .cr-learning-match { grid-template-columns: 1fr; } }

/* Standalone headers share the board container; console headers use their toolbar. */
@container classroom-free (max-width: 1099px) {
  .classroom .cr-free-mode .cr-header.cr-compact-header { flex-wrap: wrap; gap: 8px; padding-block: 8px; }
  .classroom .cr-free-mode .cr-compact-header .cr-header-actions { flex: 1 0 100%; flex-wrap: wrap; }
  .classroom .cr-free-mode .cr-compact-header .cr-room-heading-compact { flex: 1; min-width: 0; }
}

.classroom .cr-free-mode .cr-board-area:fullscreen { max-width: none; width: 100%; }

/* Native checkboxes must not inherit text-field sizing from the console. */
.classroom .cr-enrollment input[type="checkbox"],
.classroom .cr-capture-consent input[type="checkbox"] { appearance: auto; flex: 0 0 18px; width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; max-height: 18px; padding: 0; margin: 0; }
.classroom .cr-enrollment { gap: 16px; min-height: 44px; }
.classroom .cr-share-details { margin-top: 0; }
.classroom .cr-share-details > summary { min-height: 36px; display: flex; align-items: center; }
.classroom .cr-learning-setup { display: grid; gap: 20px; }
.classroom .cr-learning-setup > p { margin: 0; }
.classroom .cr-learning-setup > label { display: grid; gap: 8px; align-items: start; }
.classroom .cr-learning-setup select { min-height: 46px; }
.classroom .cr-learning-setup > button { justify-self: start; min-height: 44px; padding-inline: 18px; }

/* Restoring cues is a tool action, so it never adds a row above the board. */
.classroom .cr-analysis-panel > .cr-coach-restore { margin: 0; padding: 8px 10px 0; }
.classroom .cr-analysis-panel > .cr-coach-restore button { min-height: 32px; padding: 5px 10px; font-size: 12px; }