500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#25273a;--muted:#8b8d9e;--purple:#7060d8;--border:#eeedf3}*{box-sizing:border-box}body{margin:0;background:#fafafb;color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--border);border-radius:8px;background:white;padding:11px 16px;color:var(--ink);font-weight:600}button:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}aside{position:fixed;inset:0 auto 0 0;width:235px;background:#fff;border-right:1px solid var(--border);padding:38px 25px}.brand{display:flex;align-items:center;font:800 25px Manrope,sans-serif;letter-spacing:-1px}.logo{display:inline-flex;background:#7663db;width:36px;height:37px;align-items:center;justify-content:center;border-radius:11px;color:#fff;font-size:25px;letter-spacing:-5px;margin-right:10px;padding-right:5px}.logo span{color:#d9d1ff}.dot{color:var(--purple)}.workspace{color:#b0aebd;font-size:9px;font-weight:700;letter-spacing:1.6px;margin:54px 0 17px 12px}nav a,nav button{display:flex;gap:15px;align-items:center;padding:14px;width:100%;text-align:left;border:0;background:none;margin-bottom:9px;color:#9693a6}nav .selected{background:#f0ecfc;color:#7863cf;border-radius:8px;font-weight:700}.aside-bottom{position:absolute;bottom:28px;font-size:10px;color:#9290a3}.aside-bottom p{font-size:9px;color:#b3b0c0}.status{display:inline-block;width:6px;height:6px;border-radius:50%;background:#70bba3;margin-right:5px}main{margin-left:235px;padding:0 48px;max-width:1800px}header{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-size:11px;color:#aaa7b6}header b{margin:0 16px;font-weight:400}header strong{font-weight:500;color:#656273}.badge{border:1px solid #e7e3f4;padding:8px 13px;border-radius:30px;color:#8b79c5;background:#f6f3fd}.heading{display:flex;align-items:center;justify-content:space-between;margin:40px 0 30px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#9b91ba}h1{font:800 30px Manrope,sans-serif;letter-spacing:-1.2px;margin:10px 0}h1 span{color:#8b74d7}p{color:#94919f;line-height:1.8}.heading p{font-size:12px;margin:0}.date{font-size:11px;color:#9f9aa9}.hero{min-height:330px;border-radius:16px;background:#ece8fa;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:35px 39px}.pill{font-size:8px;letter-spacing:1.4px;color:#8775ba;background:#e3dcf6;padding:7px 10px;border-radius:20px}.hero h2{font:800 34px/1.25 Manrope,sans-serif;letter-spacing:-1px;color:#514277;margin:20px 0 12px}.hero p{font-size:11px;color:#9387aa;margin-bottom:21px}.light{font-size:11px;color:#74608e;border:0;box-shadow:0 3px 8px #7560a110}.light span{margin-left:23px}small{display:block;font-size:9px;color:#a59ab8;margin-top:12px}.art{position:relative;width:330px;height:270px;margin-right:25px}.orbit{position:absolute;border:1px solid #dcd3ef;border-radius:50%;width:270px;height:270px;left:30px;top:0}.o2{width:340px;height:340px;top:-35px;left:-5px}.note{position:absolute;top:48px;left:66px;width:200px;height:181px;background:#fffdfa;border-radius:13px;transform:rotate(-9deg);padding:23px;color:#baa0de;box-shadow:0 15px 30px #69508c12;font-size:24px}.note b{display:block;font:800 25px/1.2 Manrope;color:#655282;margin:4px 0 13px}.note span{font-size:6px;letter-spacing:1.6px;color:#ada0bd;display:block}.bubble{position:absolute;top:27px;right:-9px;background:white;border-radius:12px 12px 12px 0;padding:13px 18px;font-size:12px;transform:rotate(7deg);box-shadow:0 8px 20px #6d519b0a}.avatar{position:absolute;border:5px solid #f3effb;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;font-weight:700}.a1{background:#f0cfae;left:12px;top:77px;color:#a16b46}.a2{background:#c5d7d1;right:0;bottom:28px;color:#63877c}.spark{position:absolute;bottom:13px;left:36px;font-size:55px;color:#b9a4dc}.section-title{display:flex;align-items:center;justify-content:space-between;margin:31px 0 17px}.section-title h2{font:700 15px Manrope;margin:0}.section-title>span{font-size:8px;letter-spacing:1.5px;color:#b4aebd}.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:19px}article{border:1px solid var(--border);background:white;border-radius:12px;padding:25px}.tile-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-size:24px}.purple{background:#eee9fb;color:#8f78cf}.peach{background:#fcf0e5;color:#c99d78}h3{font:700 14px Manrope;letter-spacing:-.3px}.cards p{font-size:11px;max-width:240px}.text-button{padding:12px 0 0;border:0;font-size:10px;color:#8a76c0;width:100%;text-align:left}.text-button span{float:right}.tip{background:#f4f5ee;position:relative;overflow:hidden}.tip .eyebrow{color:#9eaa8c;font-size:8px}.tip h3{font-size:21px;color:#737d62;line-height:1.4}.tip p{color:#a0a58f;max-width:210px}.tip-star{position:absolute;right:14px;bottom:-24px;font-size:115px;color:#e2e6d7}footer{display:flex;justify-content:space-between;font-size:9px;color:#b8b3c0;padding:27px 0}footer i{font-style:normal;padding:0 7px}dialog{border:1px solid var(--border);border-radius:16px;padding:35px;width:min(440px,92vw);color:var(--ink)}dialog::backdrop{background:#25233b65;backdrop-filter:blur(4px)}dialog h2{font:800 24px Manrope}.close{position:absolute;right:12px;top:10px;border:0;font-size:22px;padding:3px 9px}label{display:block;font-size:12px;margin:19px 0}input{display:block;width:100%;border:1px solid #e2ddec;background:#fcfbfe;border-radius:7px;padding:13px;margin-top:8px;outline-color:var(--purple)}.primary{background:var(--purple);color:white;border:0}#entry>.primary{width:100%;margin-top:8px}#form-error,#notice{color:#b45764;font-size:12px}#notice:empty{display:none}#notice{padding:15px 0}.live-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}.board-card .section-title{margin-top:0}#board{width:100%;min-height:300px;resize:vertical;border:0;background:#fcfbf7;line-height:1.9;padding:24px;border-radius:9px;color:#514966;outline-color:#c0b0e8;white-space:pre-wrap}#save-board{margin-top:15px}.attendance{margin-top:20px}.person{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.person span{color:#9b92ab;font-size:10px}.chat-card{display:flex;flex-direction:column;min-height:540px}.chat-card h3{margin-top:0;padding-bottom:18px;border-bottom:1px solid var(--border)}.live-dot{float:right;color:#7ca892;font-size:8px;letter-spacing:1px}#messages{flex:1;height:360px;overflow:auto}.msg{margin:14px 0;background:#f6f3fc;padding:12px;border-radius:9px;overflow-wrap:anywhere}.msg b{font-size:11px;color:#8a75b5}.msg p{margin:5px 0 0;color:#686072;font-size:12px;white-space:pre-wrap}.empty{font-size:12px;text-align:center;padding:90px 10px;color:#b1a8be}#chat{display:flex;gap:8px;align-items:center}#chat input{margin:0}.room-actions{display:flex;gap:8px}.room-actions button{font-size:10px}.danger{color:#b8787e}#room-title{font-size:27px}[hidden]{display:none!important}@media(min-width:1450px){main{padding:0 70px}.hero{min-height:390px}.hero h2{font-size:42px}.cards article{min-height:245px}.art{margin-right:70px}}@media(max-width:1050px){aside{width:190px;padding:30px 18px}main{margin-left:190px;padding:0 25px}.art{transform:scale(.8);margin-right:-35px;margin-left:-40px}.hero{padding:30px 25px}.hero h2{font-size:28px}.date{display:none}.cards{gap:10px}article{padding:19px}.live-layout{grid-template-columns:1fr}.heading{gap:20px;flex-wrap:wrap}}@media(max-width:720px){aside{position:relative;width:100%;height:76px;padding:19px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.brand{font-size:23px}.workspace,.aside-bottom,nav{display:none}main{margin:0;padding:0 20px}header{height:60px}.heading{margin:28px 0 24px}h1{font-size:25px}.hero{padding:27px;min-height:340px}.hero h2{font-size:30px}.hero .art{display:none}.pill{font-size:6px}.cards{grid-template-columns:1fr}.cards article{padding:25px}.cards p{max-width:none}.tip{min-height:200px}footer{display:block;line-height:2}.section-title>span{display:none}.live-layout{display:block}.chat-card{margin:20px 0}.room-actions{flex-wrap:wrap}.badge{font-size:9px}}
/* Immersive classroom */
body.in-class{background:#efeade}body.in-class>aside,body.in-class main>header{display:none}body.in-class main{margin:0;padding:0;max-width:none}body.in-class #notice{position:fixed;bottom:12px;left:90px;z-index:50;background:#fff8e6;box-shadow:0 4px 20px #0002;padding:12px 20px;border-radius:8px;max-width:75vw}.session-bar{height:58px;background:#303139;color:#e9e9ee;display:flex;align-items:center;gap:22px;padding:0 20px}.session-brand{font:800 20px Manrope;letter-spacing:-1px;color:#fff}.session-brand>span{font:600 8px 'DM Sans';letter-spacing:1.5px;color:#b6b6c7;display:block;margin-top:3px}.session-info{min-width:100px;flex:1;overflow:hidden}.session-info strong{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-info>span{font-size:8px;color:#aaaab8;letter-spacing:.6px}.session-controls{display:flex;align-items:center;gap:7px}.session-controls button{font-size:10px;border:1px solid #ffffff19;background:#ffffff09;color:#dddde6;padding:8px 11px;border-radius:5px}.session-controls .danger{background:#f26464;color:#fff;border:0}.connection{font-size:9px;color:#b1d6bc;margin-right:12px}.class-stage{height:calc(100dvh - 58px);min-height:600px;display:grid;grid-template-columns:56px minmax(0,1fr) 255px;gap:18px;padding:17px 28px 17px 16px;position:relative;isolation:isolate;overflow:hidden}.class-decoration{position:absolute;z-index:-1;color:#d5c893;pointer-events:none;font-size:180px}.decoration-one{left:-35px;bottom:-65px;color:#dec89f;transform:rotate(20deg)}.decoration-two{right:-30px;top:-50px;color:#c4d5ba}.tool-rail{background:#555751;color:white;border-radius:10px;align-self:center;display:flex;align-items:center;flex-direction:column;padding:15px 7px;gap:10px;max-height:100%;box-shadow:0 6px 15px #3d342b12}.tool-heading{font-size:7px;letter-spacing:1px;color:#c8c9c0;margin-bottom:5px}.tool-rail button{height:36px;width:38px;padding:0;border:0;border-radius:6px;color:#dddeda;background:transparent;font-size:25px;font-weight:400}.tool-rail button.active{background:#77796c;color:#f5c566}.tool-rail button:disabled{opacity:.3;cursor:default}.tool-divider{height:1px;background:#ffffff20;width:25px}.tool-rail input[type=color]{height:28px;width:28px;min-height:0;padding:2px;margin:0;border:0;background:none;cursor:pointer}.tool-rail input[type=range]{width:35px;margin:3px 0;padding:0;accent-color:#e4c17c}.rail-bottom{font-size:26px;color:#d5c690}.lesson-window{min-width:0;display:flex;flex-direction:column;background:#deddd6;border-radius:9px;overflow:hidden;border:1px solid #d8d4ca;box-shadow:0 10px 30px #534a3820}.lesson-titlebar{height:36px;flex-shrink:0;display:flex;align-items:center;gap:15px;background:#49495d;color:#ecebf4;padding:0 13px;font-size:10px}.lesson-titlebar>div{flex:1}.lesson-titlebar>span{font-size:7px;letter-spacing:.5px;color:#c0bccf}.lesson-titlebar button{padding:0;border:0;color:#ddd;background:none;font-size:20px}.file-icon{color:#c7bedb;margin-right:7px}.lesson-workspace{position:relative;flex:1;min-height:0;display:flex;padding:20px;overflow:auto;background:#d8d7cf;background-image:radial-gradient(#aaa99f50 .7px,transparent .7px);background-size:10px 10px}.paper{position:relative;background:#fffcf4;width:100%;min-height:440px;box-shadow:0 5px 18px #47433316;display:flex;flex-direction:column;overflow:hidden;border-radius:2px;padding:28px 35px}.paper-heading{display:flex;justify-content:space-between;font-size:7px;font-weight:700;letter-spacing:1.4px;color:#979a89;border-bottom:1px solid #e9e5d6;padding-bottom:17px}.lesson-intro{padding:33px 0 18px;border-bottom:1px solid #e9e5d6}.lesson-label{font-size:8px;font-weight:700;letter-spacing:2px;color:#bd9859}.lesson-intro h2{font:800 clamp(23px,2.9vw,42px)/1.2 Manrope;color:#646d57;letter-spacing:-1.4px;margin:14px 0}.lesson-intro p{font-size:10px;color:#a6a48e}.lesson-notes{white-space:pre-wrap;font-size:clamp(13px,1.5vw,20px);line-height:1.9;color:#6e6b62;padding:24px 0;overflow-wrap:anywhere}.paper-footer{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;color:#b9b59f;font-size:7px;letter-spacing:2px}.paper-footer>span:last-child{font-size:50px;color:#dfd8bd}#ink-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.lesson-bottom{height:45px;flex-shrink:0;background:#42443f;color:#c8c9bf;display:flex;align-items:center;gap:20px;padding:0 15px;font-size:9px}.lesson-bottom b{font-weight:400;background:#ffffff10;padding:5px 9px;margin-left:8px;border-radius:4px}.board-mode{color:#e4c17c}.board-hint{margin-left:auto;font-size:8px;color:#93978c}.lesson-bottom button{background:#ffffff0a;border:1px solid #ffffff15;color:#dedfd5;font-size:9px;padding:7px 10px}.class-right{display:flex;flex-direction:column;gap:12px;min-height:0;position:relative}.video-tile{height:172px;min-height:130px;flex-shrink:0;border-radius:8px;overflow:hidden;position:relative;background:#686b63;border:1px solid #c5c8ba}.teacher-video{background:radial-gradient(ellipse at top,#c7d3bc,#94aa96)}.student-video{background:radial-gradient(ellipse at top,#ded1be,#b5a388)}.video-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:24px;gap:4px}.video-avatar{width:48px;height:48px;background:#eef2e4;border:4px solid #ffffff50;color:#859479;border-radius:50%;display:grid;place-items:center;font:700 20px Manrope}.student-avatar{background:#f4e7cd;color:#b79d7a}.video-placeholder strong{font-size:11px;color:#364337;margin-top:2px}.video-placeholder small{font-size:8px;color:#4d5b4d;margin:0}.video-placeholder button{padding:4px 10px;margin-top:5px;font-size:8px;background:#ffffff55;border:1px solid #ffffff50;color:#4f604e}.video-label{position:absolute;bottom:0;left:0;right:0;background:#25292483;height:28px;display:flex;align-items:center;padding:0 10px;gap:7px;color:white;font-size:10px}.video-label>span:first-child{color:#c9d9b9;font-size:7px}.video-tag{margin-left:auto;font-size:6px;letter-spacing:1px;background:#ffffff20;border-radius:3px;padding:3px 5px}.video-label button{margin-left:auto;border:0;background:none;color:#fff;padding:2px 4px}.video-label #count{font-size:8px;color:#e5e9dc}#local-video{height:100%;width:100%;object-fit:cover;transform:none}.class-right .chat-card{min-height:180px;flex:1;background:#f7f6ef;border:1px solid #d6d3c8;padding:0;border-radius:8px;overflow:hidden}.class-right .chat-card h3{font:600 10px 'DM Sans';padding:12px;margin:0;background:#eeede5;border-bottom:1px solid #dedbd0}.class-right #messages{height:auto;min-height:0;padding:0 10px}.class-right .msg{background:#ebe9df;border-radius:6px;padding:8px;margin:9px 0}.class-right .msg b{font-size:9px;color:#88806c}.class-right .msg p{font-size:10px;color:#575a50;line-height:1.6}.class-right .empty{font-size:10px;color:#a8a493;padding:30px 15px}.class-right #chat{padding:10px;border-top:1px solid #dedbd0;gap:5px}.class-right #message{min-width:0;background:#fffef8;border:1px solid #dedbd0;padding:9px;font-size:10px}.class-right #chat button{background:#d7a557;border-radius:5px;font-size:9px;white-space:nowrap;padding:10px}.attendance-popover{position:absolute;top:190px;right:10px;width:240px;background:white;padding:18px;z-index:10;border-radius:10px;box-shadow:0 10px 50px #0003;max-height:280px;overflow:auto}.notes-editor{position:absolute;inset:15px 15px 15px auto;width:min(350px,90%);z-index:5;background:#fffef9;border:1px solid #e6e0d1;padding:22px;border-radius:8px;box-shadow:0 10px 30px #0002;overflow:auto}.notes-editor label{margin:0 0 15px;font-weight:700}.notes-editor #board{font-size:13px;min-height:220px;padding:12px;border:1px solid #ebe5d7}.notes-editor p{font-size:10px}.notes-editor button{font-size:11px;background:#7a8667}button:focus-visible{outline:3px solid #dfb95f;outline-offset:2px}@media(min-width:1550px){.class-stage{grid-template-columns:60px minmax(0,1fr) 310px;gap:22px;padding:22px}.video-tile{height:210px}.paper{padding:35px 55px}.lesson-intro{padding-top:50px}}@media(max-width:1050px){.session-bar{gap:12px;padding:0 12px}.session-brand{font-size:17px}.connection{display:none}.session-controls button{padding:8px;font-size:9px}.class-stage{grid-template-columns:48px minmax(0,1fr) 215px;gap:10px;padding:12px}.paper{padding:22px}.lesson-workspace{padding:12px}.board-hint{display:none}.video-tile{height:150px}.lesson-bottom{gap:12px;padding:0 10px}}@media(max-width:760px){.session-bar{height:auto;min-height:80px;flex-wrap:wrap;padding:10px 12px;gap:8px}.session-info{min-width:50%}.session-controls{width:100%;gap:5px}.session-controls button{flex:1;padding:7px 4px}.class-stage{height:auto;min-height:calc(100dvh - 95px);grid-template-columns:40px minmax(0,1fr);padding:10px;gap:8px;overflow:visible}.tool-rail{position:sticky;top:10px;align-self:start;padding:10px 2px;gap:7px}.tool-rail button{width:32px;height:32px}.lesson-window{min-height:570px}.lesson-workspace{padding:9px}.paper{padding:20px;min-height:450px}.paper-heading{font-size:5px;letter-spacing:.5px}.lesson-intro h2{font-size:27px}.lesson-titlebar>span{display:none}.lesson-bottom{font-size:8px;gap:8px}.lesson-bottom button{font-size:8px;margin-left:auto}.class-right{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}.video-tile{height:150px;min-height:0}.class-right .chat-card{grid-column:1/-1;min-height:280px}.class-right #messages{height:180px;flex:auto}.video-placeholder strong{font-size:9px}.video-placeholder small{font-size:7px}.video-label{font-size:8px}.video-tag{display:none}.lesson-intro p{font-size:9px}.attendance-popover{top:135px;width:min(240px,100%)}.class-decoration{display:none}.notes-editor{inset:10px;width:calc(100% - 20px)}.session-brand>span{font-size:6px}}

/* Lesson content and ink share one fixed 900 × 600 page on every screen. */
.lesson-workspace{display:block;overflow:auto}
.paper-viewport{position:relative;margin:auto;flex:none;overflow:hidden}
.paper-viewport .paper{position:absolute;inset:0 auto auto 0;width:900px;height:600px;min-height:600px;max-height:600px;padding:28px 35px;transform-origin:top left;flex:none;font-family:Arial,sans-serif}
.paper-viewport .paper-heading{font-size:7px;letter-spacing:1.4px;padding-bottom:17px;flex-shrink:0}
.paper-viewport .lesson-intro{padding:33px 0 18px;flex-shrink:0}
.paper-viewport .lesson-label{font-size:8px;letter-spacing:2px}
.paper-viewport .lesson-intro h2{font:800 38px/1.2 Arial,sans-serif;letter-spacing:-1.4px;margin:14px 0}
.paper-viewport .lesson-intro p{font:10px/1.8 Arial,sans-serif;margin:10px 0;color:#a6a48e}
.paper-viewport .lesson-notes{font:18px/1.9 Arial,sans-serif;padding:24px 0;min-height:0;overflow:hidden}
.paper-viewport .paper-footer{font-size:7px;letter-spacing:2px;padding-top:20px;flex-shrink:0}
.paper-viewport .paper-footer>span:last-child{font-size:50px}
.paper-viewport #ink-canvas{width:900px;height:600px}

/* Classroom interface: consistent icons and readable controls. */
.ui-icon::before{content:'';display:inline-block;flex-shrink:0;width:17px;height:17px;background:currentColor;mask:var(--control-icon) center/contain no-repeat;-webkit-mask:var(--control-icon) center/contain no-repeat}
body.in-class{background:#eff0f6;color:#2c3048}
.session-bar{height:76px;padding:0 24px;background:#fff;color:#2d3049;border-bottom:1px solid #e5e6ef;gap:24px;box-shadow:0 2px 12px #32345504}
.session-brand{color:#6552ce;font-size:25px;letter-spacing:-1.4px;padding-right:24px;border-right:1px solid #ececf3}.session-brand>span{font-size:7px;color:#9395ab;letter-spacing:1.8px;margin-top:5px}
.session-info strong{font:700 14px Manrope,sans-serif!important;letter-spacing:-.2px}.session-info>span{display:block;font-size:8px;color:#9295a9;margin-top:5px;letter-spacing:.8px}
.session-controls{gap:8px}.session-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:37px;padding:9px 12px;font-size:10px;border:1px solid #e7e8f0;border-radius:9px;background:white;color:#686d85;font-weight:600;transition:background .15s,box-shadow .15s,transform .15s}.session-controls button:hover:not(:disabled){background:#f4f2fd;box-shadow:0 3px 9px #6552ce12;transform:translateY(-1px)}.session-controls #copy{color:#fff;background:#7560dc;border-color:#7560dc;box-shadow:0 3px 8px #7560dc25}.session-controls #copy:hover{background:#6550cb}.session-controls .danger{background:#fff1f1;border-color:#fadede;color:#d26a73}.session-controls #leave{color:#9a8290}.session-controls #mic-toggle:disabled{opacity:.42;cursor:not-allowed}.connection{color:#59a58e;font-size:9px;white-space:nowrap}.connection::first-letter{color:#59a58e}
.class-stage{height:calc(100dvh - 76px);min-height:620px;grid-template-columns:66px minmax(0,1fr) 275px;gap:18px;padding:22px 24px 22px 16px;background:radial-gradient(ellipse at 8% 95%,#e5e0f260,transparent 40%),#f0f1f7}.class-decoration{display:none}
.tool-rail{background:#fff;box-shadow:0 8px 24px #3d3a6f09;border:1px solid #e5e5f0;border-radius:16px;padding:15px 9px;gap:7px;overflow:visible}.tool-heading{color:#a0a1b5;font-size:7px;letter-spacing:1.7px;margin-bottom:9px}.tool-rail button{position:relative;display:flex;align-items:center;justify-content:center;height:40px;width:43px;border-radius:10px;color:#9295ac;transition:background .15s,color .15s,box-shadow .15s}.tool-rail button::before{width:21px;height:21px}.tool-rail button:hover:not(:disabled){color:#7964d7;background:#f5f2fd}.tool-rail button.active{color:#7960d9;background:#eee9fc;box-shadow:inset 0 0 0 1px #e2d9fa}.tool-rail button.active::after{content:'';position:absolute;left:-10px;width:3px;height:19px;border-radius:0 3px 3px 0;background:#8b73df}.tool-rail button:disabled{cursor:not-allowed;opacity:.3}.tool-divider{background:#eeedf5;width:30px;margin:6px 0}.rail-bottom{font-size:20px;color:#c9bee9;margin-top:4px}.tool-rail input[type=color]{border:1px solid #e1dbf3;border-radius:50%;padding:3px;width:31px;height:31px;margin:3px 0;overflow:hidden}.tool-rail input[type=color]::-webkit-color-swatch-wrapper{padding:0}.tool-rail input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.tool-rail input[type=range]{accent-color:#8b73df;width:40px;margin:8px 0 2px;height:15px}.size-readout{font-size:8px;color:#9694ad;line-height:1.3}.color-presets{display:grid;grid-template-columns:repeat(2,12px);gap:7px;margin:4px 0}.color-presets button{width:12px;height:12px;min-height:0;padding:0;border:2px solid white;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #dedde8}.color-presets button:hover:not(:disabled){background:var(--swatch);box-shadow:0 0 0 2px #b6a5e6}.color-presets button[aria-pressed=true]{box-shadow:0 0 0 2px #9c87d8}
.lesson-window{border:1px solid #e1e2ed;border-radius:14px;background:#fff;box-shadow:0 8px 30px #31325207}.lesson-titlebar{height:49px;background:white;border-bottom:1px solid #ececf3;color:#676b84;padding:0 17px;gap:10px}.lesson-titlebar>div{display:flex;align-items:center;gap:8px;min-width:0}.file-icon{display:inline-flex;color:#9787d0;margin:0}.file-icon::before{width:17px;height:17px}#lesson-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}#saved{padding:5px 8px;border-radius:5px;background:#f3f0fb;font-size:7px;color:#9a8db8;letter-spacing:.5px;white-space:nowrap}.lesson-titlebar button{color:#9b98ae;display:grid;place-items:center;width:27px;height:27px;border-radius:6px}.lesson-titlebar button:hover{background:#f4f0fd}.lesson-workspace{background:#eeedf4;background-image:radial-gradient(#ceccd950 .8px,transparent .8px);background-size:15px 15px;padding:24px}.paper-viewport{border-radius:3px;box-shadow:0 3px 15px #32314d0a}.lesson-bottom{height:48px;background:#fff;border-top:1px solid #e8e8f0;color:#a2a2b6;font-size:9px;padding:0 16px;gap:15px}.board-mode{color:#8c76ce;background:#f5f2fd;border-radius:5px;padding:5px 8px;white-space:nowrap}.lesson-bottom b{background:#f1f1f7;color:#85869d;border:1px solid #e9e9f2;font-size:9px;padding:4px 8px}.board-hint{color:#aaa9ba;font-size:8px}.lesson-bottom button{background:#fff;color:#8d7bb7;border:1px solid #e7e1f3;border-radius:7px;font-size:9px;padding:7px 10px;white-space:nowrap}.lesson-bottom button:hover{background:#f5f2fc}
.class-right{gap:14px}.video-tile{height:176px;border:1px solid #e0dfeb;border-radius:13px;box-shadow:0 3px 12px #31325204}.teacher-video{background:radial-gradient(ellipse at 30% 0%,#ebe5f9,#e1daef)}.student-video{background:radial-gradient(ellipse at 30% 0%,#e6eeed,#d7e4e1)}.video-placeholder{gap:5px;padding-bottom:31px}.video-avatar{width:48px;height:48px;background:#faf7ff;color:#a28cce;border:3px solid #f7f2ff;box-shadow:0 4px 10px #7f6d9a09;font-size:21px}.student-avatar{background:#f1f8f5;color:#84a69b;border-color:#f4fbf8}.video-placeholder strong{font-size:11px;color:#78708b;font-weight:600;max-width:90%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.video-placeholder small{font-size:8px;color:#a49ab4}.student-video .video-placeholder strong{color:#708c84}.student-video .video-placeholder small{color:#94aba3}.video-placeholder button{border:1px solid #cfc3e5;background:#f8f5fd70;color:#9a87b7;border-radius:6px;padding:5px 9px;font-size:8px;margin-top:2px}.video-label{height:31px;background:#ffffff8a;color:#827b95;border-top:1px solid #ffffff60;padding:0 11px;font-size:9px}.video-label>span:first-child{color:#a594c7}.video-tag{color:#aa9bbf;background:#e5dff05e;border:1px solid #d8cfe760;font-size:6px}.student-video .video-label{color:#779088}.student-video .video-label>span:first-child{color:#86b09e}.video-label #count{color:#9aaea6}.video-label button{display:flex;color:#8ba69c}.video-label button::before{width:14px;height:14px}
.class-right .chat-card{background:#fff;border:1px solid #e1e2ed;border-radius:13px;margin:0;box-shadow:0 3px 12px #31325204}.class-right .chat-card h3{background:white;color:#656b86;font-size:11px;padding:15px 14px;border-bottom:1px solid #ececf3}.live-dot{font-size:7px;color:#94b8aa;letter-spacing:.9px}.class-right #messages{padding:0 13px;scrollbar-width:thin;scrollbar-color:#d8d2e8 transparent}.class-right .empty{font-size:10px;color:#b0adbf;line-height:1.9;padding:30px 18px}.class-right .msg{border-radius:9px;background:#f5f2fc;padding:10px;margin:12px 0}.class-right .msg b{color:#9a87bf;font-weight:600;font-size:9px}.class-right .msg p{color:#7c758e;font-size:11px}.class-right #chat{padding:11px;gap:7px;border-top:1px solid #eeeaf6}.class-right #message{background:#f8f7fb;border:1px solid #eeebf5;border-radius:8px;font-size:10px;padding:11px;color:#777086}.class-right #message::placeholder{color:#b6afc4}.class-right #chat button{display:grid;place-items:center;width:35px;height:35px;padding:0;border-radius:9px;background:#8069d8;box-shadow:0 3px 6px #8069d81c}.class-right #chat button::before{width:16px;height:16px}.attendance-popover{border:1px solid #e8e3f2;box-shadow:0 12px 40px #3a305420;border-radius:12px}.attendance-popover h3{color:#7b6c9e}.notes-editor{background:#fff;border:1px solid #e8e4f2;border-radius:12px;box-shadow:0 10px 40px #4032591c;color:#7d7390}.notes-editor #board{background:#faf9fc;border-color:#ece7f5;border-radius:8px}.notes-editor button{background:#8069d8;border-radius:8px;box-shadow:0 3px 7px #8069d820}.notes-editor p{color:#a59ab6}button:focus-visible{outline:3px solid #b9a4ed;outline-offset:3px}button:disabled{cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}
@media(min-width:1550px){.class-stage{grid-template-columns:66px minmax(0,1fr) 310px;padding:25px;gap:22px}.video-tile{height:210px}}
@media(max-width:1150px){.session-bar{gap:14px;padding:0 16px}.session-brand{font-size:22px;padding-right:16px}.session-controls button{font-size:9px;padding:8px;gap:5px}.connection{display:none}.class-stage{grid-template-columns:62px minmax(0,1fr) 230px;gap:12px;padding:16px 16px 16px 12px}.lesson-workspace{padding:16px}.board-hint{display:none}.video-tile{height:162px}.lesson-bottom{padding:0 12px;gap:10px}}
@media(max-width:760px){.session-bar{height:auto;min-height:100px;padding:13px 14px;gap:10px;align-items:center}.session-brand{font-size:20px}.session-info{min-width:45%;flex:1}.session-info strong{font-size:12px!important}.session-info>span{font-size:6px}.session-controls{gap:5px;width:100%}.session-controls button{min-height:34px;font-size:8px;padding:7px 5px;gap:4px}.session-controls button::before{width:13px;height:13px}.class-stage{height:auto;min-height:calc(100dvh - 100px);grid-template-columns:52px minmax(0,1fr);padding:12px 10px;gap:8px}.tool-rail{padding:12px 5px;gap:6px;top:12px;border-radius:12px}.tool-rail button{width:37px;height:35px}.tool-rail button::before{width:19px;height:19px}.tool-rail button.active::after{left:-6px}.tool-heading{font-size:6px}.lesson-window{min-height:450px}.lesson-workspace{padding:10px}.lesson-titlebar{height:42px;padding:0 11px}#lesson-name{font-size:9px}.lesson-titlebar>span{display:none}.lesson-bottom{gap:7px;padding:0 8px;font-size:7px}.board-mode{padding:5px}.lesson-bottom button{font-size:7px;padding:6px}.lesson-bottom b{font-size:7px;margin-left:2px;padding:4px}.class-right{gap:9px}.video-tile{height:160px}.video-placeholder strong{font-size:9px}.video-placeholder small{font-size:7px}.video-label{font-size:8px;padding:0 7px}.class-right .chat-card{min-height:280px}.notes-editor{inset:10px;width:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}
.tool-rail .color-presets{grid-template-columns:repeat(2,16px);gap:6px}
.tool-rail .color-presets button{width:16px;height:16px;min-height:0;padding:0;border:2px solid white;border-radius:50%;background:var(--swatch)}

/* Waiting room and timed session */
.lesson-workspace{isolation:isolate}.class-gate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:22px;background:#f0edf8e8;backdrop-filter:blur(5px)}.gate-card{width:min(375px,100%);text-align:center;background:#ffffffed;border:1px solid #e5def4;border-radius:20px;padding:32px 26px;box-shadow:0 16px 50px #67509710}.gate-symbol{display:grid;place-items:center;width:53px;height:53px;margin:0 auto 19px;background:#f0eafb;border:1px solid #e4daf7;border-radius:17px;font-size:30px;color:#a18cdb}.gate-eyebrow{font-size:8px;letter-spacing:1.8px;color:#a99bbf;font-weight:700}.gate-card h2{font:800 24px/1.3 Manrope,sans-serif;color:#66557f;letter-spacing:-.7px;margin:13px 0}.gate-card p{font-size:11px;line-height:1.9;color:#a499b1;margin:0 auto 22px;max-width:275px}.gate-card button{display:flex;justify-content:space-between;align-items:center;gap:45px;margin:auto;border-radius:10px;background:#8166d5;box-shadow:0 5px 12px #8166d51a;padding:13px 22px;font-size:12px}.gate-duration{display:block;font-size:7px;letter-spacing:1.5px;color:#b6acc4;margin-top:19px}.class-ended .gate-symbol{color:#a3b8ae;background:#eef5f0;border-color:#dfebe3}.class-timer{font:700 12px/1 monospace;color:#8f7bb4;background:#f6f2fc;border:1px solid #e9e1f6;border-radius:8px;padding:10px 11px;white-space:nowrap;letter-spacing:.8px}.class-timer.time-low{color:#cd7d85;background:#fff2f2;border-color:#f4dfe2}.tool-rail button:disabled{box-shadow:none}.tool-rail button.active:disabled{background:#f7f5fa;color:#c3bacc}.tool-rail button.active:disabled::after{background:#ddd6e9}.lesson-bottom button:disabled{opacity:.4}.session-controls button:disabled{opacity:.35}.video-placeholder button:disabled{opacity:.4}@media(max-width:760px){.class-timer{font-size:10px;padding:10px 6px}.gate-card{padding:23px 15px}.gate-card h2{font-size:20px}.gate-card p{font-size:10px}.gate-eyebrow{font-size:6px}.gate-duration{font-size:6px;letter-spacing:.8px}}

/* Role placement stays the same for teachers and learners. */
.class-right .msg{width:fit-content;max-width:88%;overflow-wrap:anywhere}
.class-right .msg-teacher{margin-left:auto;margin-right:0;background:#eee7fc;border-radius:11px 11px 3px 11px}
.class-right .msg-student{margin-left:0;margin-right:auto;background:#edf4f1;border-radius:11px 11px 11px 3px}
.class-right .msg-teacher b{color:#8b72b7}.class-right .msg-student b{color:#7a9e91}
.class-right .msg-student p{color:#6d847b}
#student-video-label{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-label #teacher-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.class-right{display:flex;flex-direction:column}.class-right .video-tile{width:100%;flex-shrink:0}.class-right .chat-card{flex:auto}}
#remote-video{width:100%;height:100%;object-fit:cover;background:#272739}
.media-status{display:block;font-size:9px;line-height:1.5;color:#9a8bb4;text-align:center;margin:0;padding:0 5px;flex-shrink:0}

/* Compact classroom chrome, larger lesson, and a conversation with room to breathe. */
.session-bar{height:54px;padding:0 16px;gap:18px}
.session-brand{font-size:21px;padding-right:18px}.session-brand>span{font-size:6px;letter-spacing:1.4px;margin-top:3px}
.session-info strong{font-size:12px!important}.session-info>span{font-size:7px;margin-top:3px}
.session-controls{gap:6px}.session-controls button{min-height:31px;padding:7px 9px;border-radius:7px;font-size:9px;gap:5px}.session-controls button::before{width:15px;height:15px}.class-timer{font-size:11px;padding:8px 9px}.connection{font-size:8px;margin-right:3px}
.class-stage{height:calc(100dvh - 54px);min-height:0;grid-template-columns:54px minmax(0,1fr) 290px;gap:12px;padding:12px}
.tool-rail{padding:11px 5px;gap:5px;border-radius:12px;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ded7ed transparent}.tool-heading{font-size:6px;margin:0 0 4px}.tool-rail button{width:40px;height:34px;flex-shrink:0}.tool-rail button::before{width:19px;height:19px}.tool-rail button.active::after{left:-5px}.tool-divider{margin:3px 0;flex-shrink:0}.rail-bottom{font-size:17px;margin:0}.tool-rail input[type=color]{width:27px;height:27px;flex-shrink:0}.tool-rail input[type=range]{margin:4px 0 0;flex-shrink:0}.color-presets{flex-shrink:0}
.lesson-titlebar{height:35px;padding:0 12px}.lesson-titlebar button{width:25px;height:25px}#lesson-name{font-size:10px}#saved{font-size:6px;padding:4px 6px}.lesson-workspace{padding:10px;scrollbar-width:thin;scrollbar-color:#d3cce3 transparent}.lesson-bottom{height:36px;padding:0 10px;gap:10px;font-size:8px}.lesson-bottom button{padding:5px 8px;font-size:8px;border-radius:6px}.board-mode{padding:4px 6px;font-size:8px}.lesson-bottom b{padding:3px 6px;font-size:8px}.board-hint{font-size:7px}#lesson-fit{margin-left:auto}.board-hint+#lesson-fit{margin-left:0}
.class-right{gap:9px;min-height:0;overflow:hidden}.video-tile{height:132px;min-height:110px;flex-shrink:0;border-radius:10px}.video-placeholder{padding-bottom:25px;gap:2px}.video-avatar{height:34px;width:34px;font-size:16px;border-width:2px}.video-placeholder strong{font-size:10px;margin-top:1px}.video-placeholder small{font-size:7px}.video-placeholder button{font-size:7px;padding:3px 7px;margin-top:2px}.video-label{height:24px;font-size:8px;padding:0 9px}.video-tag{font-size:5px;padding:2px 4px}.media-status{font-size:8px;line-height:1.3;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.class-right .chat-card{min-height:200px;flex:1}.class-right .chat-card h3{padding:12px 13px;font-size:11px}.class-right #messages{padding:0 11px}.class-right .msg{margin-top:9px;margin-bottom:9px;padding:9px 10px}.class-right .msg p{font-size:12px;line-height:1.6}.class-right .msg b{font-size:9px}.class-right #chat{padding:9px}.class-right #message{font-size:11px;padding:10px}.class-right #chat button{width:33px;height:33px}.class-right .empty{padding:35px 18px;font-size:11px}
@media(min-width:1550px){.class-stage{grid-template-columns:56px minmax(0,1fr) 320px;gap:14px;padding:14px}.video-tile{height:150px}}
@media(max-width:1150px) and (min-width:761px){.session-bar{gap:10px;padding:0 12px}.session-brand{padding-right:12px;font-size:19px}.session-info strong{font-size:11px!important}.session-controls button{padding:7px;font-size:8px}.session-controls{gap:4px}.class-stage{grid-template-columns:50px minmax(0,1fr) 250px;gap:9px;padding:9px}.tool-rail button{width:36px}.video-tile{height:120px;min-height:105px}.lesson-workspace{padding:8px}.board-hint{display:none}#lesson-fit{margin-left:auto}}
@media(max-height:700px) and (min-width:761px){.video-tile{height:108px;min-height:95px}.video-avatar{width:28px;height:28px;font-size:13px}.video-placeholder small{display:none}.class-right{gap:7px}.class-right .chat-card{min-height:160px}.class-stage{padding-top:8px;padding-bottom:8px}.tool-rail{gap:3px;padding-top:7px;padding-bottom:7px}.tool-rail button{height:29px}.tool-heading,.rail-bottom{display:none}}
@media(max-width:760px){.session-bar{height:auto;min-height:84px;padding:9px 10px;gap:7px}.session-brand{font-size:19px;padding-right:12px}.session-info{min-width:45%}.session-controls{gap:4px}.session-controls button{min-height:29px;font-size:7px;padding:6px 4px;gap:3px}.session-controls button::before{width:12px;height:12px}.class-timer{font-size:9px;padding:8px 5px}.class-stage{height:auto;min-height:calc(100dvh - 84px);grid-template-columns:45px minmax(0,1fr);padding:9px 7px;gap:7px}.tool-rail{position:sticky;top:9px;padding:9px 3px;gap:5px;max-height:calc(100dvh - 18px)}.tool-rail button{width:35px;height:32px}.lesson-window{min-height:0;height:420px}.lesson-workspace{padding:6px}.lesson-titlebar{height:32px;padding:0 8px}#lesson-name{font-size:8px}.lesson-bottom{height:34px;padding:0 6px;gap:5px;font-size:7px}.lesson-bottom button{font-size:7px;padding:5px}.board-mode{font-size:6px;padding:4px}.lesson-bottom>span:nth-child(2){display:none}.board-hint{display:none}#lesson-fit{margin-left:auto}.class-right{gap:8px;overflow:visible}.video-tile{height:120px;min-height:100px}.class-right .chat-card{min-height:330px;height:330px;flex:none}.class-right #messages{height:auto;flex:1}.media-status{white-space:normal}.class-right .msg p{font-size:12px}}

/* Keep faces unobstructed: square camera area, separate solid name footer. */
.class-right .video-tile{display:flex;flex-direction:column;height:auto;min-height:0;aspect-ratio:auto;flex:0 0 auto;position:relative;padding-bottom:26px;overflow:hidden}
.class-right .video-tile::before{content:'';display:block;width:100%;padding-top:82%;flex:none;pointer-events:none}
.class-right .video-tile #local-video,.class-right .video-tile #remote-video{position:absolute;top:0;left:0;width:100%;height:calc(100% - 26px);object-fit:cover;background:#272739}
.class-right .video-tile .video-placeholder{position:absolute;inset:0 0 26px;height:auto;padding:8px;gap:3px}
.class-right .video-label{position:absolute;left:0;right:0;bottom:0;height:26px;background:#fff;border-top:1px solid #e8e5ef;color:#847b96;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:9px}
.class-right .student-video .video-label{background:#fff;color:#779088}
.class-right .video-tag{background:#f4f0fa;border-color:#e9e2f3}
.class-right .chat-card{min-height:190px}
.class-right{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ddd6e9 transparent}
@media(min-width:761px) and (max-height:800px){.class-right .video-tile{width:min(100%,210px);align-self:center}.class-right .video-tile::before{padding-top:82%}.class-right .chat-card{width:100%;flex:1 0 210px}}
@media(min-width:761px) and (max-height:650px){.class-right .video-tile{width:min(100%,165px)}.class-right .chat-card{flex-basis:190px}}
@media(max-width:760px){.class-right .video-tile{width:min(100%,260px);align-self:center}.class-right .video-tile::before{padding-top:90%}.class-right .chat-card{width:100%;flex:none}}
.class-right .video-tile::before{padding-top:100%}

/* Size the whole participant column together so video and chat share edges. */
@media(min-width:761px){
 .class-stage{grid-template-columns:54px minmax(0,1fr) clamp(180px,calc((100dvh - 380px)/2),290px)}
 .class-right{width:100%;align-items:stretch}
 .class-right .video-tile{width:100%;align-self:stretch}
 .class-right .chat-card{width:100%;align-self:stretch;flex:1 0 190px}
}
@media(min-width:1550px){.class-stage{grid-template-columns:56px minmax(0,1fr) clamp(180px,calc((100dvh - 390px)/2),310px)}}
@media(min-width:761px) and (max-width:1150px){.class-stage{grid-template-columns:50px minmax(0,1fr) clamp(180px,calc((100dvh - 370px)/2),250px)}}
@media(min-width:761px) and (max-height:650px){.class-right .chat-card{min-height:160px;flex-basis:160px}}
@media(max-width:760px){
 .class-right{width:100%;max-width:320px;justify-self:center;align-items:stretch}
 .class-right .video-tile,.class-right .chat-card{width:100%;align-self:stretch}
}

/* Balanced sidebar: readable chat and near-square video without oversized frames. */
@media(min-width:761px){
 .class-stage{grid-template-columns:54px minmax(0,1fr) 280px}
 .class-right .video-tile{width:100%;padding-bottom:26px}
 .class-right .video-tile::before{padding-top:75%}
 .class-right .chat-card{min-height:220px;flex:1 0 220px}
}
@media(min-width:1550px){.class-stage{grid-template-columns:56px minmax(0,1fr) 300px}}
@media(min-width:761px) and (max-width:1150px){
 .class-stage{grid-template-columns:50px minmax(0,1fr) 260px}
}
@media(min-width:761px) and (max-height:700px){
 .class-right .video-tile::before{padding-top:68%}
 .class-right .chat-card{min-height:210px;flex-basis:210px}
}
@media(max-width:760px){
 .class-right{max-width:none}
 .class-right .video-tile::before{padding-top:85%}
 .class-right .chat-card{min-height:350px;height:350px}
}
@media(min-width:761px) and (min-height:701px){
 .class-right .video-tile::before{padding-top:72%}
 .class-right .chat-card{min-height:200px;flex-basis:200px}
}

/* Show the same camera orientation locally and to the other participant. */
#local-video,#remote-video{transform:none}

.board-access{display:flex;align-items:center;gap:9px;padding:7px 12px;background:#fcfbff;border-bottom:1px solid #ece7f5;flex-shrink:0;flex-wrap:wrap}.access-title{font-size:9px;font-weight:600;color:#8f7ba8}.board-access select{max-width:145px;border:1px solid #e5ddef;background:white;color:#8b7b9f;border-radius:6px;font:10px 'DM Sans',sans-serif;padding:5px 7px}.board-access button{font-size:9px;padding:6px 9px;color:#9275bd;border:1px solid #e5d9f4;border-radius:6px;background:#f5f0fc}.board-access button.access-granted{color:#8eaa9a;background:#eff7f2;border-color:#daeae0}#board-access-status{font-size:8px;color:#aa9db8;margin-left:auto}.board-access button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.board-access{gap:5px;padding:7px 8px}.access-title{font-size:8px}#board-access-status{width:100%;margin:0}.board-access select{max-width:110px;font-size:9px}.board-access button{font-size:8px}}
.single-student-name{font-size:10px;color:#9481ac;padding:4px 8px;background:#f5f1fc;border:1px solid #e9e0f4;border-radius:5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Crown control stays in the student's footer, outside the camera image. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.student-video .video-label #authorize-board{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:23px;height:23px;min-height:0;padding:3px;margin:0 0 0 auto;border:1px solid transparent;border-radius:5px;background:transparent;color:#a99ab9;cursor:pointer}
#authorize-board svg{width:16px;height:16px;display:block;pointer-events:none}
.student-video .video-label #authorize-board:hover:not(:disabled){background:#f5edf9;color:#9f7bbf;border-color:#e9ddf2}
.student-video .video-label #authorize-board.access-granted{background:#fff5d9;color:#bd984b;border-color:#efdfb8}
.student-video .video-label #authorize-board:disabled{opacity:.4;cursor:default}
.student-video .video-label #authorize-board.access-granted:disabled{opacity:1}
.student-video .video-label #authorize-board:not([hidden])~#attendance-toggle{margin-left:2px}

/* The classroom is one viewport; only message history and editor contents scroll. */
body.in-class{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.in-class main{width:100%;height:100%;min-height:0;overflow:hidden}
body.in-class #classroom{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
body.in-class .session-bar{flex:0 0 54px;min-height:0;height:54px}
body.in-class .class-stage{flex:1;height:auto;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
body.in-class .lesson-window{min-width:0;min-height:0;height:100%;overflow:hidden}
body.in-class .lesson-titlebar,body.in-class .lesson-bottom{flex-shrink:0}
body.in-class .lesson-workspace{overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center}
body.in-class .paper-viewport{flex:none;margin:0}
body.in-class .class-right{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:12px minmax(0,1fr) minmax(0,1fr) minmax(130px,1.25fr);gap:9px;height:100%;min-height:0;overflow:hidden;align-items:stretch}
body.in-class .media-status{grid-row:1;min-height:0;line-height:12px}
body.in-class .teacher-video{grid-row:2}body.in-class .student-video{grid-row:3}
body.in-class .class-right .video-tile{width:100%;height:100%;min-height:0;max-height:none;align-self:stretch;padding-bottom:26px;flex:none}
body.in-class .video-tile::before{display:none}
body.in-class .class-right .chat-card{grid-row:4;grid-column:1;width:100%;height:100%;min-height:0;max-height:none;flex:none;overflow:hidden}
body.in-class #messages{min-height:0;height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
body.in-class .chat-card h3,body.in-class #chat{flex-shrink:0}
body.in-class .tool-rail{min-height:0;overflow:hidden}
body.in-class .attendance-popover{position:absolute;top:35%;right:5px;z-index:20}
@media(max-width:760px){
 body.in-class .session-bar{height:82px;flex-basis:82px;gap:6px;padding:8px 10px;overflow:hidden}
 body.in-class .class-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 36px minmax(175px,34%);gap:7px;padding:7px}
 body.in-class .lesson-window{grid-column:1;grid-row:1;height:100%}
 body.in-class .tool-rail{grid-column:1;grid-row:2;position:relative;top:auto;align-self:stretch;display:flex;flex-direction:row;justify-content:center;gap:4px;width:100%;height:36px;max-height:36px;padding:3px 5px;border-radius:8px}
 body.in-class .tool-rail button{height:28px;width:29px;flex:none}
 body.in-class .tool-rail button::before{width:17px;height:17px}
 body.in-class .tool-rail button.active::after{display:none}
 body.in-class .tool-heading,body.in-class .tool-divider,body.in-class .rail-bottom,body.in-class .color-presets,body.in-class .size-readout{display:none}
 body.in-class .tool-rail input[type=color]{height:25px;width:25px;margin:0;flex:none}
 body.in-class .tool-rail input[type=range]{width:40px;margin:0;flex:none}
 body.in-class .class-right{grid-column:1;grid-row:3;grid-template-columns:minmax(0,36%) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:7px;max-width:none;width:100%;height:100%;justify-self:stretch}
 body.in-class .media-status{display:none}
 body.in-class .teacher-video{grid-column:1;grid-row:1}
 body.in-class .student-video{grid-column:1;grid-row:2}
 body.in-class .class-right .chat-card{grid-column:2;grid-row:1/3;min-height:0;height:100%}
 body.in-class .video-label{height:23px;font-size:7px;padding:0 5px;gap:4px}
 body.in-class .class-right .video-tile{padding-bottom:23px;border-radius:8px}
 body.in-class .video-tile #local-video,body.in-class .video-tile #remote-video{height:calc(100% - 23px)}
 body.in-class .video-tile .video-placeholder{inset:0 0 23px;padding:2px;gap:1px}
 body.in-class .video-placeholder .video-avatar{height:23px;width:23px;font-size:11px}
 body.in-class .video-placeholder strong{font-size:8px}
 body.in-class .video-placeholder small{display:none}
 body.in-class .video-placeholder button{padding:2px 5px;font-size:6px;margin:0}
 body.in-class .video-label #count{display:none}
 body.in-class .class-right .chat-card h3{padding:9px;font-size:9px}
 body.in-class .live-dot{font-size:6px}
 body.in-class #chat{padding:6px;gap:4px}
 body.in-class #message{padding:8px;font-size:10px}
 body.in-class .class-right #chat button{width:29px;height:29px;flex-shrink:0}
 body.in-class .class-right .msg{padding:7px;max-width:93%;margin:7px 0}
 body.in-class .class-right .msg p{font-size:10px}
 body.in-class .class-right .msg b{font-size:8px}
 body.in-class .class-right .empty{padding:12px 8px;font-size:9px}
 body.in-class .gate-card{padding:15px;max-width:300px}
 body.in-class .gate-symbol{width:32px;height:32px;font-size:20px;margin-bottom:9px}
 body.in-class .gate-card h2{font-size:18px;margin:8px 0}
 body.in-class .gate-card p{font-size:9px;margin-bottom:12px;line-height:1.6}
 body.in-class .gate-card button{padding:10px 18px;font-size:11px}
 body.in-class .gate-duration{margin-top:10px;font-size:6px}
 body.in-class .attendance-popover{top:0;right:0;max-height:100%}
}
@media(max-width:760px) and (max-height:500px) and (min-width:520px){
 body.in-class .session-bar{height:48px;flex-basis:48px;flex-wrap:nowrap}
 body.in-class .session-brand{font-size:16px;padding-right:8px}
 body.in-class .session-info{min-width:0;flex:1}
 body.in-class .session-info strong{font-size:9px!important}
 body.in-class .session-controls{width:auto;flex:0 0 auto}
 body.in-class .session-controls button{font-size:0;width:27px;padding:5px;flex:none}
 body.in-class .session-controls #copy{font-size:0}
 body.in-class .class-stage{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(0,1fr) 36px}
 body.in-class .lesson-window{grid-column:1;grid-row:1}
 body.in-class .tool-rail{grid-column:1;grid-row:2}
 body.in-class .class-right{grid-column:2;grid-row:1/3;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(85px,.8fr) minmax(0,1fr)}
 body.in-class .teacher-video{grid-column:1;grid-row:1}
 body.in-class .student-video{grid-column:2;grid-row:1}
 body.in-class .class-right .chat-card{grid-column:1/3;grid-row:2}
 body.in-class .video-placeholder strong{font-size:7px}
 body.in-class .video-label #authorize-board{height:21px;width:21px;padding:2px}
 body.in-class #attendance-toggle{display:none}
}
.live-board-cursor{position:absolute;z-index:3;pointer-events:none;transform:translate(5px,5px);padding:4px 7px;border-radius:0 7px 7px 7px;background:#9478d4;color:white;font:11px/1.3 Arial,sans-serif;white-space:nowrap;box-shadow:0 2px 8px #71539420}

.lesson-titlebar #open-library{display:flex;align-items:center;justify-content:center;color:#9b82bf;border:1px solid #e6dcef;background:#f7f2fc;border-radius:6px;width:27px;height:27px;padding:4px;flex-shrink:0}
#material-canvas{position:absolute;inset:0;width:900px;height:600px;z-index:0;background:white;pointer-events:none}
.paper.material-open>.paper-heading,.paper.material-open>.lesson-intro,.paper.material-open>.lesson-notes,.paper.material-open>.paper-footer{visibility:hidden}
.material-notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;padding:12px 17px;background:#fffef4eF;border:1px solid #eee5cd;border-radius:8px;font-size:11px;color:#a3967b;max-width:85%;text-align:center;pointer-events:none}
.material-pages{display:inline-flex;align-items:center;gap:6px;color:#9c8bb5;font-size:9px;white-space:nowrap}.material-pages button{padding:2px 7px;font-size:15px;height:25px;line-height:1}#library-dialog{width:min(540px,94vw);max-height:85dvh;padding:30px;overflow:auto}#library-dialog h2{font:800 23px Manrope;color:#75628f;margin:12px 0 8px}#library-dialog>p{font-size:11px;color:#aaa0b7}.upload-material-label{display:inline-flex;align-items:center;padding:11px 16px;border-radius:8px;background:#8267d3;color:#fff;cursor:pointer;font-size:11px;margin:12px 0 0}#library-dialog>small{font-size:9px;color:#b6a9c2;margin:9px 0 16px}#material-search{font-size:12px}#library-feedback{font-size:11px;color:#b59a6e;line-height:1.6;margin:12px 0}#library-items{display:flex;flex-direction:column;gap:8px;max-height:310px;overflow:auto}.library-item{display:flex;align-items:center;gap:12px;padding:12px;text-align:left;border:1px solid #eee7f5;background:#fff;border-radius:9px;width:100%}.library-item>span:nth-child(2){flex:1;min-width:0}.library-item strong{display:block;font-size:11px;color:#9583aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-item small{font-size:9px;color:#b8aac6;margin:4px 0 0}.library-file-icon{display:grid;place-items:center;font-size:8px;background:#f2edfb;color:#a18cbe;border-radius:7px;width:34px;height:40px;flex-shrink:0}.library-item>span:last-child{color:#b6a3cc}.library-empty{text-align:center;font-size:12px;padding:30px 10px}#use-whiteboard{margin-top:17px;font-size:10px;color:#a08db5;border-color:#e8e0f1}.material-pages~#lesson-fit{margin-left:auto}@media(max-width:760px){#library-dialog{padding:24px 19px}.material-pages{gap:3px;font-size:7px}.material-pages button{padding:1px 5px;font-size:13px;height:22px}.lesson-bottom .board-mode{display:none}.lesson-titlebar #open-library{width:24px;height:24px}body.in-class .lesson-bottom>span.material-pages{display:inline-flex}}
.has-material .lesson-bottom>span:nth-child(2){display:none!important}
.material-notice button{pointer-events:auto;margin-left:5px;padding:5px 10px;font-size:10px;color:#9a7bb7;background:#fbf6ff;border:1px solid #eadff4;border-radius:5px}

.paper.pilot-book-pending > :not(.pilot-book-status):not(#ink-canvas){visibility:hidden}
.pilot-book-status{position:absolute;inset:38px;display:grid;align-content:center;justify-items:center;text-align:center;padding:24px;background:#fffdf5;border:1px solid #e6dcba;border-radius:16px;color:#284e61;z-index:3;overflow:auto}
.pilot-book-status[hidden]{display:none}.pilot-book-status h2{font:700 25px/1.35 Arial,sans-serif;max-width:650px;overflow-wrap:anywhere;margin:0 0 18px}.pilot-book-status p{color:#375361;font:400 18px/1.65 Arial,sans-serif;max-width:620px;margin:0}

.pilot-website-frame{position:absolute;inset:0;width:900px;height:600px;border:0;background:white;z-index:2}.pilot-website-frame[hidden],.pilot-website-info[hidden]{display:none}.pilot-website-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid #d5e2e9;border-radius:8px;background:#f7fbfd;color:#34596b;font-size:11px}.pilot-website-info a{color:#285c7a;text-decoration:underline}.paper:has(.pilot-website-frame:not([hidden])) #ink-canvas{pointer-events:none;visibility:hidden}

body.in-class .class-right .video-tile #local-video,body.in-class .class-right .video-tile #remote-video{transform:none!important;scale:1!important;rotate:none!important;object-fit:contain}
.session-controls #mic-toggle.mic-active{background:#e7f6ec;border-color:#96c5a5;color:#1d633d}.session-controls #mic-toggle.mic-muted{background:#fff0ed;border-color:#e2b5ac;color:#8d382b}.session-controls #enable-class-audio{background:#fff5bf;border-color:#d8bd52;color:#5c4b12}.session-controls #enable-class-audio[hidden]{display:none}

#board-text-layer{position:absolute;inset:0;z-index:5;pointer-events:none}#board-text-layer[hidden]{display:none}
.board-textbox{position:absolute;min-width:72px;pointer-events:none;font-family:Arial,sans-serif;line-height:1.35;color:var(--text-color);padding-top:27px}
.board-textbox.editable{pointer-events:auto;border:1px dashed #829cae;border-radius:5px;background:#ffffff12}
.board-textbox .text-drag-handle,.board-textbox .text-delete{position:absolute;top:0;height:26px;padding:2px 7px;font:12px/20px Arial,sans-serif;background:#f1f7fa;color:#24485e;border:1px solid #a5bdca;border-radius:4px;visibility:hidden;touch-action:none}
.board-textbox.editable .text-drag-handle,.board-textbox.editable .text-delete{visibility:visible}.board-textbox .text-drag-handle{left:0;cursor:grab}.board-textbox .text-drag-handle:active{cursor:grabbing}.board-textbox .text-delete{right:0;width:27px}
.board-textbox .board-text-input{display:block;resize:none;overflow:auto;box-sizing:border-box;width:100%;min-height:34px;margin:0;padding:3px 5px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;outline:0}
.board-textbox.editable:focus-within{background:#ffffffc9;border-color:#447798;box-shadow:0 0 0 2px #8db7cf33}.board-textbox textarea[readonly]{overflow:hidden}
.video-tile .video-flip{position:absolute;right:7px;top:7px;z-index:6;padding:5px 8px;border:1px solid #96aebe;border-radius:6px;background:#f6fbf5ed;color:#244b60;font:11px/1.2 Arial,sans-serif}.video-tile .video-flip[aria-pressed="true"]{background:#fff1aa}

.media-recovery-actions{display:flex;flex-wrap:wrap;gap:6px}.media-recovery-actions button,.board-recovery button{border:1px solid #b5cbd7;border-radius:8px;padding:8px 10px;background:#fff;color:#173b4c;cursor:pointer;font:inherit}.board-recovery{position:relative;z-index:5;margin:8px;padding:12px;border:1px solid #e8c66d;border-radius:10px;background:#fff8e5;color:#44350f;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.board-recovery span{flex:1 1 240px}.board-recovery button:disabled{opacity:.5;cursor:default}

.class-settings{width:min(460px,calc(100vw - 24px));max-height:85dvh;overflow:auto;border:1px solid #c8d9e4;border-radius:16px;padding:24px;color:#173b4c;background:#f7fbfd}.class-settings::backdrop{background:#15354e70}.class-settings h2{margin:0 30px 10px 0}.class-settings p,.class-settings small{display:block;font-size:12px;line-height:1.6;color:#4b6575}.class-settings label{display:block;margin:12px 0;font-size:13px;font-weight:600}.class-settings select{display:block;width:100%;min-width:0;margin-top:6px;padding:10px;border:1px solid #a6bdcb;border-radius:8px;background:white;color:#173b4c}.class-settings fieldset{border:1px solid #c8d9e4;border-radius:10px;margin:16px 0;padding:12px}.class-settings legend{font-weight:700;font-size:13px}.class-settings button:not(.close){padding:9px 12px;background:white;border:1px solid #9fb6c5;border-radius:8px;color:#173b4c;cursor:pointer}.class-settings .video-flip{position:static!important;display:inline-block;margin:4px;transform:none!important;font-size:12px}.class-settings input[type=range]{display:block;width:100%}#class-settings-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.class-material-item{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid #cedce4;border-radius:10px;margin:8px 0;background:#fff}.class-material-item>div{flex:1 1 180px;min-width:0}.class-material-item strong{display:block;overflow-wrap:anywhere}.class-material-item small{display:block;color:#526a78;margin-top:5px}.class-material-item button,.class-material-item a{font-size:12px;white-space:normal}.material-pending-count{background:#ffdf73;color:#3d3107;font-size:10px;border-radius:12px;padding:2px 5px;position:absolute;top:-3px;right:-3px}#open-library{position:relative}

.class-settings label:has(input[type=checkbox]){display:flex;align-items:center;gap:9px;margin:10px 0}.class-settings input[type=checkbox]{display:inline-block;width:16px;height:16px;min-height:0;margin:0;padding:0;flex:0 0 16px;accent-color:#c99c00}.class-settings input[type=range]{min-height:0;height:24px;margin:8px 0;padding:0;accent-color:#c99c00}.class-settings fieldset{margin:12px 0}.class-settings label{margin:10px 0}.class-settings select{padding:8px 10px}

/* Compact session toolbar: labels remain available to assistive technology. */
.session-controls button.ui-icon{font-size:0!important;gap:0!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.session-controls button.ui-icon::before{width:19px;height:19px}
.session-controls button[hidden]{display:none!important}
.session-controls #class-settings-toggle{width:38px!important;min-width:38px!important;height:38px!important;padding:9px!important}
.session-controls #camera-toggle.camera-active{background:#e7f6ec;border-color:#96c5a5;color:#1d633d}
.session-controls button:focus-visible{outline:3px solid #d6a800;outline-offset:3px}

/* Website lesson annotations are a screen overlay, independent of iframe scroll. */
.pilot-website-info{background:#1b303d;border-color:#49616d;color:#d9e6ec;align-items:center;margin:6px 10px 0;padding:9px 12px;flex:0 0 auto}
.pilot-website-info a{color:#f4ce57;font-size:11px;margin-left:auto}.website-mode-hint{flex:1 1 100%;font-size:10px;line-height:1.5;color:#aac0cb}
.website-mode-controls{display:inline-flex;gap:4px;padding:3px;border:1px solid #49616d;border-radius:8px;background:#142935}
.website-mode-controls button{border:1px solid transparent;border-radius:5px;padding:6px 11px;background:transparent;color:#d9e6ec;font-size:11px;min-height:30px}
.website-mode-controls button[aria-pressed=true]{background:#f4ce57;color:#25313a;border-color:#f4ce57}.website-mode-controls button:disabled{opacity:.5;cursor:not-allowed}
.paper.website-lesson:has(.pilot-website-frame:not([hidden])) #ink-canvas{visibility:visible;pointer-events:none;z-index:4}
.paper.website-lesson.website-annotating:has(.pilot-website-frame:not([hidden])) #ink-canvas{pointer-events:auto}
.paper.website-lesson.website-annotating .pilot-website-frame{pointer-events:none}
.paper.website-lesson:not(.website-annotating) #board-text-layer,.paper.website-lesson:not(.website-annotating) #board-text-layer *{pointer-events:none!important}
@media(max-width:760px){.pilot-website-info{margin:4px 6px 0;padding:6px 8px;gap:5px}.website-mode-controls button{font-size:10px;padding:5px 9px}.website-mode-hint{font-size:9px}.pilot-website-info a{font-size:9px}}

/* Compact website-only toolbar and shared teacher board video. */
.pilot-website-info{padding:3px 8px;margin:3px 10px 0;gap:7px;min-height:36px;flex-wrap:nowrap}
.website-mode-controls{padding:1px;gap:2px;border-radius:7px}.website-mode-controls button.ui-icon{font-size:0;width:29px;height:29px;min-height:29px;padding:0;display:inline-grid;place-items:center}.website-mode-controls button.ui-icon::before{width:16px;height:16px}
.website-mode-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.website-share-button{width:30px;height:30px;padding:0;display:inline-grid;place-items:center;background:#233d4b;border:1px solid #587381;border-radius:7px;color:#d9e6ec;font-size:0}.website-share-button::before{width:17px;height:17px}.website-share-button[aria-pressed=true]{background:#f4ce57;color:#25313a;border-color:#f4ce57}
.website-share-status{color:#aac0cb;font-size:10px;line-height:1.3;min-width:0;overflow-wrap:anywhere}.website-share-video{position:absolute;inset:0;width:900px;height:600px;object-fit:fill;background:#142935;z-index:2;pointer-events:none}.website-share-video[hidden]{display:none}
.paper.website-following .pilot-website-frame{visibility:hidden;pointer-events:none}.paper.website-following #board-text-layer,.paper.website-following .live-board-cursor{visibility:hidden!important}
.website-share-waiting{position:absolute;inset:0;z-index:3;background:#1b303d;color:#d9e6ec;display:grid;place-items:center;text-align:center;padding:40px;font:18px/1.6 'Segoe UI',sans-serif;pointer-events:none}.website-share-waiting[hidden]{display:none}
@media(max-width:760px){.pilot-website-info{margin:2px 6px 0;padding:2px 6px;gap:5px;min-height:33px}.website-share-status{font-size:9px}.website-mode-controls button.ui-icon{width:27px;height:27px;min-height:27px}}

/* Teach Hub brand palette, matched to teachinghub.online. Layout stays in style.css. */
:root{--th-gold:#ffda27;--th-gold-hover:#edc600;--th-gold-soft:#fff7d5;--th-ink:#182d38;--th-muted:#435966;--th-border:#d7e1e6;--th-surface:#f7fbfc;--th-green:#166a43;--purple:#9b7800;--ink:var(--th-ink);--muted:#687d88;--border:#e1e8eb}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--th-ink);background:#f0f5f7}button,input,textarea,select{font-family:inherit}button{color:var(--th-ink);border-color:var(--th-border)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d0a813;outline-offset:3px}input,textarea{outline-color:#c49c00}.brand-mark{width:34px;height:34px;object-fit:contain;flex-shrink:0}.brand{gap:8px;letter-spacing:-.7px}.brand-words{color:#182d38;font-size:23px;font-weight:800;white-space:nowrap}.brand-words>span{color:#a98300}.dot{color:#c49b00}
aside{border-color:#dfe8eb;background:#faffff}.workspace{color:#687d88}nav .selected{background:var(--th-gold-soft);color:#715800}nav a,nav button{color:#607681}nav button:hover{background:#f0f5f7}.aside-bottom{color:#526c79}.aside-bottom p{color:#758992}header{border-color:#dfe8eb;color:#6d828d}header strong{color:#344f5e}.badge{background:#fff6cc;border-color:#eddfa0;color:#775d00}.eyebrow{color:#826800}.heading p,.cards p{color:#586e7a}.heading h1{color:#182d38}.heading h1>span{color:#c29700}.date{color:#6e808b}
.hero{background:linear-gradient(120deg,#183443,#254957);border:1px solid #284754}.pill{background:#ffda271a;color:#ffe57c}.hero h2{color:#f5fafb}.hero p{color:#c5d7df}.hero small{color:#acc0ca}.light{background:var(--th-gold);color:#24322e;border:1px solid #e8c21b;box-shadow:0 4px 14px #071b2720}.light:hover{background:var(--th-gold-hover)}.orbit{border-color:#acc9d521}.note{background:#fffdf3;color:#b18c00}.note b{color:#294654}.note span{color:#697e83}.bubble{background:#fff9de;color:#65541d}.a1{background:#ffe68c;color:#826717;border-color:#284653}.a2{background:#cde5dc;color:#346751;border-color:#284653}.spark{color:#ffda27}.cards article{border-color:#dce6ea}.purple{background:#fff4c4;color:#8f6e00}.peach{background:#e4f1ec;color:#397e61}.text-button{color:#7a6100}.tip{background:#e9f2ee}.tip .eyebrow{color:#44775e}.tip h3{color:#285b43}.tip p{color:#607d6e}.tip-star{color:#d2e3d8}footer{color:#697f8a}
.primary,#entry>.primary{background:var(--th-gold);color:#24322e;border:1px solid #e6bd18}.primary:hover{background:var(--th-gold-hover)}dialog{background:#fbfefe;color:#182d38;border-color:#d9e4e9}dialog::backdrop{background:#081e2ba8;backdrop-filter:blur(4px)}dialog h2{color:#223d4b}label{color:#435966}input{background:#fff;border-color:#cbd8df;color:#243d4a}#form-error,#notice{color:#a32436}
body.in-class{background:#e8f0f4;color:var(--th-ink)}body.in-class .class-stage{background:radial-gradient(ellipse at 0 100%,#fff7d538,transparent 45%),linear-gradient(135deg,#e7eff3,#f3f7f9)}body.in-class .session-bar{background:#f7fbfcf5;border-color:#cfdee5;box-shadow:0 2px 12px #132e3d06;color:#182d38}.session-brand{display:flex;align-items:center;gap:7px;color:#182d38;border-color:#d8e3e8;letter-spacing:-.7px}.session-brand .brand-mark{width:29px;height:29px}.session-brand>.session-wordmark{display:block;font:800 19px/1 'Segoe UI',sans-serif;letter-spacing:-.6px;color:#182d38}.session-wordmark>span{color:#aa8300}.session-wordmark small{font:700 6px/1.4 'Segoe UI',sans-serif;letter-spacing:1.5px;color:#607681;margin:4px 0 0}.session-info strong{font-family:'Segoe UI',sans-serif;color:#223d4b}.session-info>span{color:#647c89}.connection{color:#166a43}.session-controls button{color:#3c5868;border-color:#cedce4;background:#ffffffc9;box-shadow:none}.session-controls button:hover:not(:disabled){background:#fff7d5;color:#665000;box-shadow:0 2px 8px #2443540c}.session-controls #copy{background:var(--th-gold);border-color:#e8c21b;color:#26362f;box-shadow:0 2px 8px #81640015}.session-controls #copy:hover{background:var(--th-gold-hover);color:#26362f}.session-controls .danger{background:#fff0f2;color:#a32436;border-color:#efcdd3}.session-controls #leave{color:#586e7a}.class-timer{color:#715900;background:#fff6cd;border-color:#e8d990}.class-timer.time-low{background:#fff0f1;color:#a32436;border-color:#ecc9d0}
body.in-class .tool-rail{background:#faffff;border-color:#d5e1e8;box-shadow:0 5px 20px #12344608}.tool-heading{color:#6d8390}.tool-rail button{color:#566f7d}.tool-rail button:hover:not(:disabled){background:#fff7d5;color:#7c6100}.tool-rail button.active{background:#fff2b6;color:#806100;box-shadow:inset 0 0 0 1px #ead27b}.tool-rail button.active::after{background:#e7b913}.tool-rail button.active:disabled{background:#f3f4ef;color:#a8b0aa}.tool-rail button.active:disabled::after{background:#d1d8d5}.tool-divider{background:#e1e9ed}.rail-bottom{color:#c5a13b}.tool-rail input[type=color]{border-color:#cbd9df}.tool-rail input[type=range]{accent-color:#bd9600}.size-readout{color:#637c89}.tool-rail .color-presets button[aria-pressed=true]{box-shadow:0 0 0 2px #b18b00}.tool-rail .color-presets button:hover:not(:disabled){box-shadow:0 0 0 2px #d2af37}
body.in-class .lesson-window{background:#f7fbfc;border-color:#cfdee5;box-shadow:0 5px 20px #17384b09}.lesson-titlebar{background:#fafdfe;color:#304e60;border-color:#dce6ec}#lesson-name{color:#3e5b6a}#saved{background:#fff7d8;color:#7d650d}.lesson-titlebar button{color:#617a87}.lesson-titlebar button:hover{background:#fff6cd}.lesson-titlebar #open-library{color:#8b6d00;background:#fff6cf;border-color:#e8d993}body.in-class .lesson-workspace{background-color:#e7eef2;background-image:radial-gradient(#9eb4c52b .8px,transparent .8px)}.paper-viewport{box-shadow:0 3px 12px #1736490d}.lesson-bottom{background:#faffff;border-color:#dce7ed;color:#647d8b}.board-mode{background:#fff7d5;color:#826600}.lesson-bottom b{background:#eef4f7;border-color:#dfe9ef;color:#516f81}.board-hint{color:#738a97}.lesson-bottom button{background:#fff;color:#526e7e;border-color:#d3e0e8}.lesson-bottom button:hover{background:#fff7d5;color:#735b00}.material-pages{color:#6e5a18}
/* Colors only on the canonical page; preserve its typography and coordinates. */
.paper{background:#fffdf5}.paper-viewport .lesson-intro h2{color:#254756}.paper-heading{color:#6a8189}.paper-heading,.lesson-intro{border-color:#e4e2d1}.lesson-label{color:#9d7b16}.paper-viewport .lesson-intro p{color:#637d88}.paper-viewport .lesson-notes{color:#425e6c}.paper-footer{color:#8d8b6d}.paper-footer>span:last-child{color:#deca7d}
.teacher-video{background:radial-gradient(ellipse at top,#e3edf3,#cedee7)}.student-video{background:radial-gradient(ellipse at top,#e6f3ed,#cfe4db)}.video-tile{border-color:#cfdfe6;box-shadow:0 2px 10px #14324706}.video-avatar{background:#fff8d9;border-color:#fffdf3;color:#9d7d0a;box-shadow:0 3px 9px #2445530a}.student-avatar{background:#f4fcf8;border-color:#fff;color:#2e7654}.video-placeholder strong{color:#294f64}.video-placeholder small{color:#637e8e}.student-video .video-placeholder strong{color:#2f654e}.student-video .video-placeholder small{color:#628773}.video-placeholder button{color:#3e5f70;background:#ffffffa8;border-color:#afc7d4}.class-right .video-label{background:#fff;color:#3c5a6c;border-color:#d8e6ee;backdrop-filter:none}.class-right .student-video .video-label{background:#fff;color:#3a6c53}.video-label>span:first-child{color:#7c9f94}.class-right .video-tag{background:#fff5c9;color:#846a12;border-color:#eddfa0}.video-label #count{color:#607d70}.video-label button{color:#57846e}.media-status{color:#607e8e}.student-video .video-label #authorize-board{color:#7c8d91}.student-video .video-label #authorize-board:hover:not(:disabled){background:#fff7d5;border-color:#ebdda3;color:#886800}.student-video .video-label #authorize-board.access-granted{background:var(--th-gold);color:#6a5100;border-color:#debd24}
.class-right .chat-card{background:#fff;border-color:#d4e1e8;box-shadow:0 3px 12px #16354904}.class-right .chat-card h3{background:#f8fcfd;color:#33566a;border-color:#dfe9ef}.live-dot{color:#247c53}.class-right #messages{scrollbar-color:#c5d6df transparent}.class-right .empty{color:#748c99}.class-right .msg-teacher{background:#fff4c4;border:1px solid #f0e3a9}.class-right .msg-teacher b{color:#806419}.class-right .msg-teacher p{color:#4d492e}.class-right .msg-student{background:#eaf5ee;border:1px solid #d7e9df}.class-right .msg-student b{color:#306d4c}.class-right .msg-student p{color:#355d48}.class-right #chat{border-color:#dce8ee;background:#fafdfe}.class-right #message{background:#fff;border-color:#cddde6;color:#284858}.class-right #message::placeholder{color:#77909f}.class-right #chat button{background:var(--th-gold);color:#344036;box-shadow:none;border:1px solid #e0bb1f}.class-right #chat button:hover{background:var(--th-gold-hover)}
.attendance-popover{background:#faffff;border-color:#d2e1e8;box-shadow:0 12px 30px #173a4b20}.attendance-popover h3{color:#31576a}.person{border-color:#dfe9ed}.person span{color:#658392}.notes-editor{background:#faffff;border-color:#d4e1e8;box-shadow:0 10px 30px #15384a1c;color:#325568}.notes-editor #board{background:#f4f9fb;border-color:#d4e2ea;color:#304e60}.notes-editor button{background:var(--th-gold);color:#2c392f;border-color:#dfba1c;box-shadow:none}.notes-editor p{color:#668491}.class-gate{background:#e7eff3e6}.gate-card{background:#fcfefe;border-color:#d4e3eb;box-shadow:0 15px 45px #12394d0c}.gate-symbol{background:#fff5c4;border-color:#ecd985;color:#997500}.gate-eyebrow{color:#887019}.gate-card h2{color:#25485b}.gate-card p{color:#5c7b8c}.gate-card button{background:var(--th-gold);color:#25372c;border-color:#e2be1f;box-shadow:0 4px 10px #755e000e}.gate-duration{color:#6e8592}.class-ended .gate-symbol{background:#ebf4ee;color:#487259;border-color:#d3e5d8}.live-board-cursor{background:#294f65;color:#ffe88c;box-shadow:0 2px 8px #173b4d20}
#library-dialog h2{color:#284e61}#library-dialog>p{color:#607d8d}.upload-material-label{background:var(--th-gold);color:#28392e;border:1px solid #dfbb1c}.upload-material-label:hover{background:var(--th-gold-hover)}#library-dialog>small{color:#718997}#library-feedback{color:#8d6b12}.library-item{background:#fff;border-color:#d5e2e9}.library-item:hover{background:#fffbed}.library-item strong{color:#34596c}.library-item small{color:#6d8796}.library-file-icon{background:#fff3bf;color:#856600}.library-item>span:last-child{color:#a1841e}.library-empty{color:#698695}#use-whiteboard{color:#486a7d;border-color:#ccdde6;background:#f7fbfd}.material-notice{background:#fffaf0;border-color:#eadbae;color:#80692b}.material-notice button{background:#fff3c2;border-color:#e1cb7a;color:#745600}body.in-class #notice{background:#fff9df;border:1px solid #e8db9f;color:#85671c;box-shadow:0 4px 15px #17344812}
@media(max-width:760px){.session-brand{gap:4px}.session-brand .brand-mark{width:24px;height:24px}.session-brand>.session-wordmark{font-size:17px}.session-wordmark small{font-size:5px;letter-spacing:1px}.brand-mark{width:31px;height:31px}}
@media(max-width:760px) and (max-height:500px) and (min-width:520px){.session-brand .brand-mark{width:22px;height:22px}.session-brand>.session-wordmark{font-size:14px}.session-wordmark small{font-size:4px}}
.heading h1,.hero h2,.cards h3,.section-title h2,dialog h2{font-family:'Segoe UI',system-ui,sans-serif}

/* Soft navy / Teach Hub gold. Appearance only; preserve lesson and media pixels. */
:root{color-scheme:dark;--th-gold:#f4ce57;--th-gold-hover:#ffdc70;--th-gold-soft:#f4ce571a;--th-ink:#e5edf1;--th-muted:#aac0cb;--th-border:#37515e;--th-surface:#1b303d;--th-green:#99d7b5;--ink:#e5edf1;--muted:#aac0cb;--border:#37515e}
body,body.in-class,body.class-loading{background:#13232e;color:#e5edf1}
body.in-class .class-stage{background:#13232e}
body.in-class .session-bar{background:#1b303d;border-color:#37515e;color:#e5edf1;box-shadow:0 3px 15px #08151c24}
.session-brand,.session-brand>.session-wordmark,.session-info strong{color:#e5edf1;border-color:#37515e}.session-wordmark>span{color:#f4ce57}
.session-wordmark small,.session-info>span,.tool-heading,.size-readout,.media-status{color:#aac0cb}.connection{color:#99d7b5}
.session-controls button{background:#1b303d;border-color:#37515e;color:#b7cbd4}.session-controls button:hover:not(:disabled){background:#2b4553;color:#f4ce57;box-shadow:none}
.session-controls #leave{color:#b7cbd4}.session-controls .danger{color:#efb2b2;background:#422e36;border-color:#704753}
.class-timer{color:#f4ce57;background:#f4ce5712;border-color:#f4ce5740}.class-timer.time-low{color:#ffc3bb;background:#512f38;border-color:#88505b}
.session-controls #mic-toggle.mic-active,.session-controls #camera-toggle.camera-active{background:#99d7b51a;border-color:#77ad9266;color:#99d7b5}
.session-controls #mic-toggle.mic-muted{background:#402f36;border-color:#78515a;color:#efb2b2}.session-controls #enable-class-audio{background:#f4ce571a;color:#f4ce57;border-color:#f4ce5750}
body.in-class .tool-rail{background:#1b303d;border-color:#37515e;box-shadow:0 8px 24px #08151c24}.tool-rail button{color:#b7cbd4}.tool-rail button:hover:not(:disabled){color:#f4ce57;background:#2b4553}
.tool-rail button.active{color:#25313a;background:#f4ce57;box-shadow:none}.tool-rail button.active::after{background:#f4ce57}.tool-rail button.active:disabled{color:#a5b3b9;background:#2c414d}.tool-rail button.active:disabled::after{background:#6c7c84}
.tool-divider{background:#37515e}.tool-rail input[type=color]{border-color:#5e7783}.tool-rail input[type=range]{accent-color:#f4ce57}.rail-bottom{color:#f4ce57}
body.in-class .lesson-window{background:#1b303d;border-color:#37515e;box-shadow:0 10px 30px #08151c24}.lesson-titlebar{background:#1b303d;color:#d9e6ec;border-color:#37515e}#lesson-name{color:#e5edf1}
#saved{background:#f4ce5712;color:#e6ca7e}.lesson-titlebar button{color:#aac0cb}.lesson-titlebar button:hover{background:#2b4553}
.lesson-titlebar #open-library{background:#f4ce5712;color:#f4ce57;border-color:#f4ce5740}
body.in-class .lesson-workspace{background-color:#293e48;background-image:none}.paper-viewport{box-shadow:0 8px 25px #08151c24}
.lesson-bottom{background:#1b303d;border-color:#37515e;color:#aac0cb}.board-mode{background:#f4ce5712;color:#f4ce57}.board-hint,.material-pages{color:#aac0cb}
.lesson-bottom b,.lesson-bottom button{background:#203743;border-color:#49616d;color:#c5d7df}.lesson-bottom button:hover{background:#2b4553;color:#f4ce57}
/* Do not invert, filter, recolor or overlay the book, whiteboard canvas or video. */
.paper{color-scheme:light;background:#fffdf5;color:#182d38}
.teacher-video,.student-video{background:linear-gradient(145deg,#233d4b,#142935)}.video-tile{border-color:#37515e;box-shadow:0 6px 20px #08151c24}
.video-avatar{background:#ddbe6320;border-color:#ddbe6340;color:#edce7a;box-shadow:none}.student-avatar{background:#7dc9aa18;color:#99d7b5;border-color:#7dc9aa40}
.video-placeholder strong,.student-video .video-placeholder strong{color:#d9e6ec}.video-placeholder small,.student-video .video-placeholder small{color:#aac0cb}
.video-placeholder button{background:#203743;color:#d9e6ec;border-color:#587381}
.class-right .video-label,.class-right .student-video .video-label{background:#1b303d;color:#d9e6ec;border-color:#37515e}
.class-right .video-tag{background:#f4ce5712;color:#e6ca7e;border-color:#f4ce5740}.video-label #count{color:#aac0cb}.video-label button,.student-video .video-label #authorize-board{color:#aac0cb}
.student-video .video-label #authorize-board:hover:not(:disabled){background:#f4ce571a;border-color:#f4ce5770;color:#f4ce57}.student-video .video-label #authorize-board.access-granted{background:#f4ce57;color:#25313a;border-color:#f4ce57}
.class-right .chat-card{background:#1b303d;border-color:#37515e;box-shadow:0 6px 20px #08151c24}.class-right .chat-card h3{background:#1b303d;color:#e5edf1;border-color:#37515e}.live-dot{color:#99d7b5}
.class-right #messages{background:#1b303d}.class-right #messages .empty,.class-right .empty{color:#aac0cb}.class-right .msg{background:#233d4b;color:#e5edf1;border-color:#37515e}.class-right .msg b{color:#b6d0dc}.class-right .msg-student{background:#2f3c3b}.class-right .msg-student b{color:#b8dac9}
.class-right .msg-teacher b{color:#e6ca7e}.class-right .msg p,.class-right .msg-teacher p,.class-right .msg-student p{color:#e5edf1}
.class-right #chat{background:#1b303d;border-color:#37515e}.class-right #message{background:#142935;border-color:#49616d;color:#e5edf1}.class-right #message::placeholder{color:#9bb2be}.class-right #chat button{background:#f4ce57;color:#25313a;border-color:#f4ce57}
dialog,.class-settings,.attendance-popover,.notes-editor{color-scheme:dark;background:#1b303d;color:#e5edf1;border-color:#49616d;box-shadow:0 14px 40px #07141d66}
dialog::backdrop,.class-settings::backdrop{background:#07141db3;backdrop-filter:blur(4px)}dialog h2,#library-dialog h2,.class-settings h2,.attendance-popover h3{color:#e5edf1}
dialog label,dialog legend,.class-settings label,.class-settings legend{color:#d9e6ec}.class-settings p,.class-settings small,#library-dialog>p,#library-dialog>small,.notes-editor p,.person span{color:#aac0cb}
dialog input:not([type=color]):not([type=range]):not([type=checkbox]),dialog textarea,dialog select,.class-settings select,.notes-editor #board{background:#142935;color:#e5edf1;border-color:#587381}
.class-settings fieldset,.person{border-color:#49616d}.class-settings input[type=range],.class-settings input[type=checkbox]{accent-color:#f4ce57}
.class-settings button:not(.close),dialog button:not(.primary):not(.upload-material-label),#use-whiteboard{background:#233d4b;color:#e5edf1;border-color:#587381}
.class-settings .video-flip[aria-pressed=true]{background:#f4ce57;color:#25313a;border-color:#f4ce57}
dialog .close{color:#aac0cb;background:transparent!important;border-color:transparent!important}
.class-material-item,.library-item{background:#203743;border-color:#49616d;color:#e5edf1}.class-material-item small,.library-item small{color:#aac0cb}.library-item strong{color:#e5edf1}.class-material-item a{color:#f4ce57}.library-item:hover{background:#2b4553}
.upload-material-label,dialog .primary{background:#f4ce57!important;color:#25313a!important;border-color:#f4ce57!important}#library-feedback{color:#e6ca7e}.library-empty{color:#aac0cb}
.material-notice,.board-recovery{background:#343b33;color:#eed994;border-color:#9d8a4a}.material-notice button,.board-recovery button,.media-recovery-actions button{background:#233d4b;color:#e5edf1;border-color:#587381}
body.in-class #notice{background:#343b33;color:#eed994;border-color:#9d8a4a;box-shadow:none}
.class-gate{background:#13232ee8}.gate-card{background:#1b303d;border-color:#49616d;box-shadow:0 14px 40px #07141d44}.gate-symbol{background:#f4ce5718;color:#f4ce57;border-color:#f4ce5740}.gate-eyebrow{color:#e6ca7e}.gate-card h2{color:#e5edf1}.gate-card p,.gate-duration{color:#aac0cb}
.gate-card button{background:#f4ce57;color:#25313a;border-color:#f4ce57}.class-ended .gate-symbol{background:#99d7b518;color:#99d7b5;border-color:#99d7b540}
.notes-editor button{background:#f4ce57;color:#25313a;border-color:#f4ce57}
/* Text being edited on a lesson remains dark-on-light for readable annotations. */
.board-textbox .text-drag-handle,.board-textbox .text-delete{color-scheme:light;background:#f1f7fa;color:#24485e}.board-textbox.editable:focus-within{color-scheme:light}
/* Visitor adapter: production classroom structure/theme above, isolated guest state below. */
[hidden]{display:none!important}body{font-family:system-ui,-apple-system,sans-serif}body:not(.in-class) main{margin:0 auto;max-width:1060px;padding:30px 24px}body:not(.in-class)>header{padding:14px 28px;display:flex;gap:22px;height:76px;background:#1b303d;color:#e5edf1}.home{margin-left:auto}.brand b{color:#f4ce57}#lobby h1{font-size:42px;color:#edf4f7}#lobby>p{max-width:750px;color:#b0c5d0}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0}.role-grid article{padding:28px;background:#1b3543;border:1px solid #48616f;border-radius:16px}.role-grid h2{color:#edf4f7}.role-grid p{min-height:48px;color:#adc1cc}.role-icon{display:grid;place-items:center;background:#f4ce5724;color:#f4ce57;width:46px;height:46px;font-size:24px;font-weight:700;border-radius:12px}.role-grid button{background:#f4ce57;color:#132c39;border-color:#f4ce57}.privacy,.hint{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body.in-class>header{display:none}body.in-class main{margin:0!important;padding:0!important;max-width:none!important}body.in-class{overflow:hidden}#classroom{display:block}body.in-class .session-bar{height:64px;min-height:64px;padding:0 16px;gap:16px}body.in-class .session-brand{min-width:145px;padding-right:16px}.demo-brand-mark{display:grid;place-items:center;width:29px;height:29px;border:1px solid #f4ce57;color:#f4ce57;border-radius:7px;font-size:12px;font-weight:800}.session-info{flex:1;min-width:80px}.session-info strong{font-size:12px!important}.session-info>span{font-size:7px!important}.session-controls{gap:7px!important}.session-controls button{width:34px;height:34px;min-height:34px;padding:7px!important;display:grid!important;place-items:center;font-size:0!important}.session-controls button::before,.tool-rail button::before{display:none!important}.session-controls svg,.tool-rail svg,.page-controls svg,.zoom-controls svg,.lesson-titlebar svg,.dialog-close svg,#chat-form svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.session-controls button[aria-pressed=true]{background:#f4ce5725!important;color:#f4ce57!important;border-color:#958245!important}#timer{font-size:11px;color:#f4ce57;background:#f4ce5717;border:1px solid #716132;border-radius:8px;padding:8px;min-width:51px;text-align:center;font-variant-numeric:tabular-nums}.class-stage{height:calc(var(--visitor-height,100dvh) - 64px)!important;min-height:0!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 260px!important;grid-template-rows:minmax(0,1fr)!important;gap:12px!important;padding:12px!important;overflow:hidden!important}.tool-rail{grid-column:1!important;grid-row:1!important;position:static!important;align-self:center!important;max-height:100%;overflow:auto!important;width:48px!important;padding:12px 5px!important;gap:8px!important}.tool-rail button{width:36px!important;height:35px!important;min-height:35px;padding:6px!important}.tool-rail select{width:36px;font-size:9px;padding:5px 1px;background:#132a37;border:1px solid #5c7180;color:#f4ce57;border-radius:6px}.tool-rail input[type=range]{width:34px}.tool-rail #pen-size-label{font-size:9px;color:#aec3ce}.tool-rail .tool-heading{font-size:6px}.lesson-window{grid-column:2!important;grid-row:1!important;height:100%!important;min-height:0!important;min-width:0!important;display:flex!important;flex-direction:column!important}.lesson-titlebar{flex:0 0 42px!important;height:42px!important;min-width:0;padding:0 12px!important}.lesson-titlebar>div{min-width:0!important;display:flex!important;align-items:center!important}.lesson-titlebar button{width:30px;height:30px;padding:5px!important}.lesson-titlebar #lesson-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}#saved{font-size:6px!important;margin-left:auto}.lesson-workspace{flex:1;min-height:0;min-width:0;position:relative!important;display:block!important;overflow:auto!important;padding:12px!important;overscroll-behavior:contain}#board-viewport{position:relative;flex:none;margin:auto}#board{position:absolute;left:0;top:0;width:1000px;height:700px;padding:0;margin:0;max-width:none;background:#fffaf0;color:#18343f;transform-origin:top left;overflow:hidden;border-radius:3px}#lesson{position:absolute;inset:0;padding:75px;display:flex;flex-direction:column;justify-content:center;user-select:none}#lesson .lesson-label{font-size:13px;letter-spacing:2px;color:#9a7410;font-weight:750}#lesson h2{font:750 44px/1.2 system-ui,sans-serif;letter-spacing:-1px;margin:16px 0 25px;color:#18343f}#lesson p{font-size:24px;line-height:1.6;color:#496572;margin:8px 0}.lesson-words{display:flex;gap:18px;margin-top:25px}.lesson-words span{padding:12px 20px;border:1px solid #d1c5a7;background:#fffdf6;border-radius:10px;font-size:22px}#ink{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}#ink polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}#ink text{fill:#18343f;font:24px system-ui,sans-serif;cursor:move;user-select:none;pointer-events:all}.lesson-bottom{flex:0 0 44px;height:44px!important;min-width:0;gap:10px!important;padding:0 10px!important;justify-content:space-between!important;overflow:hidden}.lesson-bottom .board-mode{font-size:8px}.page-controls,.zoom-controls{display:flex;align-items:center;gap:6px;font-size:10px;white-space:nowrap}.lesson-bottom button{padding:4px!important;width:26px;height:26px;display:grid;place-items:center}.lesson-bottom svg{width:15px;height:15px}.class-right{grid-column:3!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:16px minmax(80px,.85fr) minmax(80px,.85fr) minmax(145px,1.3fr)!important;gap:10px!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;overflow:hidden!important;position:relative}.class-right>#connection{font-size:8px;color:#9eb9c7;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.class-right .video-tile{height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto;position:relative}.class-right .video-tile video{position:absolute;inset:0 0 28px;width:100%;height:calc(100% - 28px);object-fit:cover;z-index:1}.video-label{position:absolute;bottom:0;left:0;right:0;height:28px!important;display:flex;align-items:center;gap:8px;z-index:3}.video-label .video-tag{margin-left:auto}.video-placeholder{position:absolute;inset:0 0 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:4px!important}.video-avatar{width:40px!important;height:40px!important;font-size:18px!important}.video-placeholder strong{font-size:11px!important}.video-placeholder small{font-size:9px!important;margin:0!important}.class-right .chat-card{height:100%!important;min-height:0!important;display:flex;flex-direction:column;overflow:hidden}.chat-card h3{flex:0 0 38px!important;margin:0;font-size:11px!important;padding:12px!important}.class-right #messages{flex:1;min-height:0;overflow:auto;padding:12px;font-size:12px}.class-right #messages p{color:#dbe7ec;font-size:12px;line-height:1.5;margin:0 0 12px;overflow-wrap:anywhere}.class-right #messages strong{color:#f4ce57;font-size:10px;display:block;margin-bottom:3px}#chat-form{display:flex;gap:7px;padding:10px;border-top:1px solid #37515e;margin:0}#chat-input{min-width:0;width:100%;font-size:12px;background:#132a37;color:#dce7ed;border:1px solid #607682;border-radius:7px;padding:9px}#chat-form button{width:34px;height:34px;padding:7px;background:#f4ce57;color:#173440;display:grid;place-items:center;flex-shrink:0}#remote-audio{display:none}#play-audio{position:absolute;left:8px;right:8px;top:26px;z-index:5;min-height:26px;padding:5px;background:#f4ce57;color:#173440;font-size:9px}.demo-dialog{width:min(94vw,450px);max-height:85dvh;overflow:auto;border:1px solid #5d7583;border-radius:15px;background:#1b303d;color:#e5edf1;padding:25px;box-shadow:0 24px 70px #0006}.demo-dialog::backdrop{background:#071722a8}.demo-dialog h2{margin:0 24px 20px 0;font-size:21px;color:#edf4f7}.demo-dialog p{font-size:12px;color:#aec2cd;line-height:1.7}.demo-dialog label{display:flex;flex-direction:column;gap:7px;font-size:12px;margin:14px 0}.demo-dialog :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;border:1px solid #607785;border-radius:8px;background:#102835;color:#e6f0f4;padding:10px;font:13px system-ui}.demo-dialog input[type=range]{padding:0}.demo-dialog button{background:#f4ce57;color:#173440;margin:6px 3px 6px 0;border-color:#f4ce57;font-size:12px}.demo-dialog .check-label{flex-direction:row;align-items:center}.dialog-close{position:absolute;right:12px;top:10px;width:28px;height:28px;padding:5px!important;background:transparent!important;color:#c4d6df!important;border:0!important}.sample-lesson-choice{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px!important;margin:10px 0!important;text-align:left}.sample-lesson-choice small{color:inherit;opacity:.8}.in-class #notice:empty{display:none}.in-class #notice{font-size:11px!important;max-width:min(600px,75vw)!important;padding:10px 14px!important;bottom:8px!important;left:80px!important;pointer-events:none}#notice:not(:empty){padding:14px;background:#4a4024;color:#fff0c9;border-radius:8px;margin-top:12px}#settings-status{min-height:18px}body.in-class .session-controls #end{color:#ffbbc6!important}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f4ce57!important;outline-offset:2px}button:disabled{cursor:not-allowed!important}
@media(max-width:1000px){.class-stage{grid-template-columns:44px minmax(0,1fr) 210px!important;gap:8px!important;padding:8px!important}.tool-rail{width:44px!important}.session-bar .session-brand{min-width:115px;padding-right:8px}.session-info>span{display:none}.class-right{gap:7px!important}.session-controls{gap:4px!important}}
@media(max-width:700px){body.in-class{overflow:auto}.session-bar{height:auto!important;min-height:92px!important;flex-wrap:wrap;padding:8px 12px!important;gap:8px!important}.session-info{min-width:95px}.session-controls{margin-left:0!important;width:100%;justify-content:flex-end}.class-stage{height:auto!important;min-height:calc(100dvh - 100px)!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:minmax(390px,58dvh) 350px!important}.tool-rail{grid-column:1!important;grid-row:1!important;width:42px!important;padding:8px 3px!important;gap:5px!important}.tool-rail button{width:34px!important;height:31px!important;min-height:31px!important}.lesson-window{grid-column:2!important;grid-row:1!important}.class-right{grid-column:1/3!important;grid-row:2!important;grid-template-columns:1fr 1fr!important;grid-template-rows:14px 135px 180px!important}.class-right>#connection{grid-column:1/3}.class-right .teacher-video{grid-column:1;grid-row:2}.class-right .student-video{grid-column:2;grid-row:2}.class-right .chat-card{grid-column:1/3;grid-row:3}.lesson-bottom .board-mode{display:none}.lesson-bottom{gap:5px!important;padding:0 5px!important}.zoom-controls{gap:3px}.lesson-bottom button{width:23px}.lesson-titlebar #saved{display:none}.role-grid{grid-template-columns:1fr}#lobby h1{font-size:32px}.in-class #notice{left:10px!important;max-width:95vw!important}}
body.in-class #room #classroom{display:block!important;height:var(--visitor-height,100dvh)!important;min-height:0!important;max-height:none!important}body.in-class #room #classroom>.class-stage{flex:none!important;height:calc(var(--visitor-height,100dvh) - 64px)!important;min-height:0!important}body.in-class #room #classroom>.session-bar{flex:none!important} @media(max-width:700px){body.in-class #room #classroom{height:auto!important}body.in-class #room #classroom>.class-stage{height:auto!important}}

.tool-rail{overflow-x:hidden!important}.tool-rail input[type=range]{padding:0!important;min-width:0!important;width:34px!important;margin:4px 0!important}.tool-rail .color-presets{display:grid!important;grid-template-columns:repeat(2,15px)!important;gap:5px!important;margin:3px 0!important}.tool-rail .color-presets .ink-swatch{width:15px!important;height:15px!important;min-height:15px!important;padding:0!important;border:2px solid #e5edf1!important;border-radius:50%!important}.ink-swatch.gold{background:#d9ae18!important}.ink-swatch.red{background:#dc5368!important}.ink-swatch.blue{background:#287ed4!important}.ink-swatch.green{background:#17634a!important}.tool-rail .ink-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #f4ce57!important}