:root{color-scheme:light;--canvas-width:1600px;--canvas-height:900px;--host-ink:#173f4b;--host-accent:#13777d}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif}
body{height:100vh;height:100dvh;background:#142c36;color:var(--host-ink)}
.frame-host{position:absolute;inset:0;min-width:0;min-height:0;overflow:hidden;background:#142c36}
.canvas-space{position:absolute;left:0;top:0;width:var(--canvas-width);height:var(--canvas-height);transform-origin:0 0;isolation:isolate}
#courseFrame{position:absolute;inset:0;display:block;border:0;width:var(--canvas-width);height:var(--canvas-height);background:#fffdf7;z-index:0}
.ink-canvas{position:absolute;inset:0;display:block;width:var(--canvas-width);height:var(--canvas-height);pointer-events:none;z-index:2}
/* This parent-document toolbar fills the iframe's reserved lower-right cell. */
.host-toolbar{position:absolute;left:1392px;top:680px;width:208px;height:220px;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:8px;background:#fffaf0;border-top:1px solid #d5c7a9;border-left:1px solid #d5c7a9;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;z-index:10}
.host-brand{display:none}
.ink-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%;flex:0 0 auto}
.ink-colours{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
#classControls{display:flex;align-items:center;flex-wrap:wrap;gap:4px;width:100%;margin-left:0;flex:0 0 auto}
.host-toolbar button{width:100%;height:32px;min-height:32px;min-width:0;padding:0 9px;border:1px solid #c9cdbf;border-radius:7px;background:#fff;color:var(--host-ink);font:700 12px "Segoe UI",Arial,sans-serif;cursor:pointer;white-space:nowrap}
.host-toolbar button:hover{background:#f5edd8}
.host-toolbar button[aria-pressed="true"]{background:#d9eee9;border-color:var(--host-accent);box-shadow:inset 0 0 0 1px var(--host-accent)}
.host-toolbar button:focus-visible{outline:3px solid #147b80;outline-offset:1px}
.host-toolbar button:disabled{opacity:.42;cursor:default}
.host-toolbar .ink-colour{width:26px;height:26px;min-height:26px;min-width:26px;padding:0;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #c8c4b5}
.host-toolbar .ink-colour.red,.host-toolbar .ink-colour.red:hover{background:#d92935}
.host-toolbar .ink-colour.blue,.host-toolbar .ink-colour.blue:hover{background:#1465d1}
.host-toolbar .ink-colour[aria-pressed="true"]{box-shadow:0 0 0 2px #173f4b}
#classStatus{flex-basis:100%;min-width:0;font-size:12px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
#soundEnable{width:auto;flex:0 0 auto;border-color:#13777d}
.class-role{font-size:11px;font-weight:700;color:#13777d;padding:3px 5px;border:1px solid #a6c7c0;border-radius:5px;white-space:nowrap}
.canvas-space.lesson-overlay-open .host-toolbar{visibility:hidden}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}