:root{--bg:#eef0f8;--bg-soft:#f6f7fc;--surface:#fff;--surface-glass:#ffffffd1;--ink:#0f1526;--ink-soft:#5a6377;--ink-faint:#8b93a7;--line:#e2e6f0;--line-strong:#cdd4e4;--accent:#4f46e5;--accent-hi:#7c3aed;--accent-ink:#fff;--accent-soft:color-mix(in srgb, var(--accent) 10%, white);--accent-softer:color-mix(in srgb, var(--accent) 6%, white);--accent-line:color-mix(in srgb, var(--accent) 32%, white);--gradient:linear-gradient(135deg, var(--accent), var(--accent-hi));--danger:#dc2626;--success:#16a34a;--warning:#d97706;--radius-s:10px;--radius-m:14px;--radius-l:20px;--radius-xl:26px;--shadow-1:0 1px 2px #0f15260d, 0 4px 14px #0f15260f;--shadow-2:0 6px 24px #0f15261a;--shadow-3:0 18px 60px #0f15262e;--shadow-accent:0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);--topbar-h:64px;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12141d;--bg-soft:#181b26;--surface:#1d212e;--surface-glass:#181b26d1;--ink:#e8eaf2;--ink-soft:#a3abc0;--ink-faint:#929bb3;--line:#2b3042;--line-strong:#3a4056;--accent:#818cf8;--accent-hi:#a78bfa;--accent-soft:color-mix(in srgb, var(--accent) 18%, #1d212e);--accent-softer:color-mix(in srgb, var(--accent) 10%, #1d212e);--accent-line:color-mix(in srgb, var(--accent) 45%, #1d212e);--shadow-1:0 1px 2px #0000004d, 0 4px 14px #0000004d;--shadow-2:0 6px 24px #0000006b;--shadow-3:0 18px 60px #0000008c}}*{box-sizing:border-box}.sr-only{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}body{background:radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--accent-hi) 8%, transparent), transparent 60%), radial-gradient(900px 420px at -10% 20%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--bg);background-attachment:fixed;min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.4}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,p{margin-top:0}h1{letter-spacing:-.02em;margin-bottom:8px;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:800;line-height:1.08}h2{letter-spacing:-.01em;margin-bottom:14px;font-size:1.02rem;font-weight:800}.status-screen{color:var(--ink);text-align:center;place-items:center;min-height:100dvh;padding:24px;font-weight:600;display:grid}.app-shell{min-height:100dvh}.topbar{-webkit-backdrop-filter:blur(14px);background:var(--surface-glass);border-bottom:1px solid var(--line);min-height:var(--topbar-h);z-index:30;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 clamp(14px,3vw,28px);display:grid;position:sticky;top:0}.brand,.topbar nav a,.account,.back-button,.primary-button,.icon-button,.meta-row,.presence{align-items:center;display:inline-flex}.brand{color:var(--ink);letter-spacing:-.01em;background:0 0;border:0;gap:10px;padding:0;font-size:1.02rem;font-weight:800}.brand-mark{background:var(--gradient);box-shadow:var(--shadow-accent);color:#fff;border-radius:10px;place-items:center;width:34px;height:34px;font-size:1rem;display:grid}.topbar nav{justify-self:center;gap:4px;display:flex}.topbar nav a{color:var(--ink-soft);border-radius:999px;gap:8px;min-height:38px;padding:0 16px;font-weight:600;text-decoration:none;transition:background .14s,color .14s}.topbar nav a:hover{background:var(--accent-softer);color:var(--ink)}.topbar nav a.active{background:var(--accent-soft);color:var(--accent)}.account{gap:10px;font-size:.92rem;font-weight:600}.mobile-nav{display:none}.primary-button,.back-button,.icon-button{border-radius:var(--radius-m);border:0;justify-content:center;gap:8px;min-height:42px;transition:transform .12s,box-shadow .14s,background .14s,color .14s}.primary-button{background:var(--gradient);box-shadow:var(--shadow-accent);color:#fff;padding:0 18px;font-weight:700}.primary-button:hover:not(:disabled){box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 42%, transparent);transform:translateY(-1px)}.primary-button:active:not(:disabled){transform:translateY(0)}.back-button{background:var(--surface);border:1px solid var(--line);color:var(--ink);margin-bottom:18px;padding:0 14px;font-weight:600}.back-button:hover{border-color:var(--accent-line);color:var(--accent)}.icon-button{background:var(--surface);border:1px solid var(--line);color:var(--ink);flex:none;width:42px;height:42px}.icon-button:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}.icon-button.ghost{background:0 0;border-color:#0000}.icon-button.ghost:hover:not(:disabled){background:var(--accent-softer)}.icon-button.selected,.selected{background:var(--gradient);box-shadow:var(--shadow-accent);color:#fff;border-color:#0000}.icon-button.selected:hover:not(:disabled){color:#fff}form{gap:14px;display:grid}label{color:var(--ink-soft);gap:7px;font-size:.88rem;font-weight:600;display:grid}input,select,textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-s);color:var(--ink);min-height:44px;padding:10px 14px;transition:border-color .14s,box-shadow .14s}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);outline:none}textarea{resize:vertical;min-height:96px}.form-error{color:var(--danger);margin:0;font-weight:600}.hint{color:var(--ink-faint);margin-bottom:0;font-size:.85rem}.password-field{gap:7px;display:grid}.password-strength{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.password-strength:before{background:var(--line);content:"";border-radius:999px;grid-area:1/1;height:6px}.password-strength span{border-radius:999px;grid-area:1/1;height:6px;transition:width .18s;display:block}.password-strength em{color:var(--ink-faint);font-size:.76rem;font-style:normal;font-weight:700}.password-strength.weak span{background:var(--danger)}.password-strength.medium span{background:var(--warning)}.password-strength.good span{background:var(--accent)}.password-strength.strong span{background:var(--success)}.toast-stack{max-width:min(420px,100vw - 32px);right:20px;top:calc(var(--topbar-h) + 16px);z-index:60;gap:10px;display:grid;position:fixed}.toast{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-m);box-shadow:var(--shadow-3);color:#fff;padding:14px 18px;font-weight:700;line-height:1.35;animation:.22s cubic-bezier(.2,.9,.3,1.1) toast-in}.toast.success{background:color-mix(in srgb, var(--success) 92%, black)}.toast.error{background:color-mix(in srgb, var(--danger) 92%, black)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.login-screen{background:radial-gradient(900px 600px at 15% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(800px 600px at 90% 85%, color-mix(in srgb, var(--accent-hi) 30%, transparent), transparent 55%), linear-gradient(160deg, #0e1330, #1c1650 55%, #351a66);justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.login-panel{background:var(--surface-glass);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);border:1px solid #fff9;gap:22px;width:100%;max-width:430px;padding:clamp(26px,5vw,38px);display:grid}.login-brand{align-items:center;gap:12px;margin-bottom:10px;display:flex}.login-brand .brand-mark{border-radius:14px;width:46px;height:46px;font-size:1.3rem}.login-panel h1{margin-bottom:4px}.login-panel p{color:var(--ink-soft);margin-bottom:0}.page{max-width:1160px;margin:0 auto;padding:clamp(22px,4vw,38px) clamp(16px,3vw,24px) 110px}.page-header{margin-bottom:26px}.page-header p{color:var(--ink-soft);max-width:680px;margin-bottom:0}.project-grid,.admin-layout{grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:18px;display:grid}.project-card,.panel,.lesson-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}.project-card{color:inherit;text-align:left;min-height:175px;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden}.project-open{color:inherit;text-align:left;background:0 0;border:0;align-content:start;gap:10px;width:100%;min-height:175px;padding:22px;display:grid}.project-card:before{background:var(--gradient);content:"";border-radius:999px;width:46px;height:4px;position:absolute;top:0;left:22px}.project-card:hover,.lesson-row:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2);transform:translateY(-2px)}.project-icon{background:var(--accent-soft);border-radius:var(--radius-m);color:var(--accent);justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:4px;display:inline-flex}.project-title{color:var(--ink);letter-spacing:-.01em;font-size:1.18rem;font-weight:800}.project-description{color:var(--ink-soft);font-size:.92rem}.meta-row{color:var(--ink-faint);gap:6px;margin-top:auto;font-size:.85rem;font-weight:600}.panel{padding:22px}.wide{margin-top:18px}.page-title-actions{justify-content:space-between;align-items:end;gap:20px;display:flex}.page-title-actions .page-header,.create-lesson{margin-bottom:20px}.library-toolbar{background:color-mix(in srgb, var(--surface) 84%, transparent);border:1px solid var(--line);border-radius:var(--radius-l);grid-template-columns:minmax(220px,1fr) minmax(210px,auto) auto;align-items:center;gap:10px;margin-bottom:18px;padding:10px;display:grid}.library-search,.compact-search{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-m);color:var(--ink-faint);align-items:center;gap:8px;padding:0 12px;display:flex}.library-search:focus-within,.compact-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}.library-search input,.compact-search input{box-shadow:none;background:0 0;border:0;width:100%;min-width:0;padding-inline:0}.library-search input:focus,.compact-search input:focus{box-shadow:none}.library-search button{color:var(--ink-faint);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.library-search button:hover{background:var(--accent-soft);color:var(--accent)}.library-sort select{min-width:220px}.library-count{color:var(--ink-soft);white-space:nowrap;padding:0 8px;font-size:.85rem;font-weight:700}.lesson-list{gap:12px;display:grid}.lesson-row{color:inherit;text-align:left;align-items:center;gap:16px;width:100%;min-height:80px;padding:16px 20px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;position:relative;overflow:visible}.lesson-open-hit{border-radius:inherit;z-index:1;background:0 0;border:0;position:absolute;inset:0}.lesson-open-hit:disabled{pointer-events:none}.lesson-row>.lesson-icon,.lesson-row>.lesson-preview,.lesson-row>.lesson-info,.lesson-row>.lesson-arrow{pointer-events:none;z-index:2;position:relative}.lesson-row .lesson-info input{pointer-events:auto}.lesson-icon{background:var(--accent-soft);border-radius:var(--radius-m);color:var(--accent);flex:none;justify-content:center;align-items:center;width:46px;height:46px;display:inline-flex}.lesson-preview{border:1px solid var(--line-strong);border-radius:var(--radius-s);box-shadow:var(--shadow-1);background:#fff;flex:none;width:92px;height:52px;display:block;overflow:hidden}.lesson-preview svg{width:100%;height:100%;display:block}.lesson-row .lesson-info{flex:1;gap:5px;min-width:0;display:grid}.lesson-row strong{letter-spacing:-.01em;font-size:1.02rem}.lesson-row small{color:var(--ink-faint)}.lesson-row .lesson-arrow{color:var(--ink-faint);margin-left:0}.lesson-row:hover .lesson-arrow{color:var(--accent)}.section-heading-row{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.section-heading-row h2{margin-bottom:2px}.section-heading-row small{color:var(--ink-faint)}.compact-search{width:100%;max-width:300px}.matrix{gap:14px;display:grid}.matrix-row{border-top:1px solid var(--line);gap:10px;padding-top:14px;display:grid}.member-list{flex-wrap:wrap;gap:12px;display:flex}.user-admin-list{gap:12px;display:grid}.user-admin-row{border-top:1px solid var(--line);grid-template-columns:minmax(140px,1fr) minmax(160px,1fr) minmax(120px,.7fr) minmax(220px,1fr) auto;align-items:end;gap:12px;padding-top:12px;display:grid}.check{flex-direction:row;align-items:center;gap:6px;font-weight:600;display:inline-flex}.check input{min-height:auto}.profile-panel{max-width:520px}.avatar{border:2px solid var(--surface);color:#fff;opacity:.4;border-radius:999px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:.82rem;font-weight:800;display:inline-flex}.avatar.online{box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);opacity:1}.presence{gap:0}.presence .avatar+.avatar{margin-left:-8px}.editor{height:calc(100dvh - var(--topbar-h));flex-direction:column;display:flex;overflow:hidden}.editor.fullscreen{background:var(--bg);z-index:100;height:100dvh;position:fixed;inset:0}.editor-topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--surface-glass);border-bottom:1px solid var(--line);align-items:center;gap:10px;min-height:56px;padding:8px clamp(10px,2vw,18px);display:flex}.editor-title{gap:1px;min-width:0;margin-right:auto;line-height:1.2;display:grid}.editor-title strong{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;overflow:hidden}.editor-title span{color:var(--ink-faint);text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:600;overflow:hidden}.save-badge{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.save-badge.saved{background:color-mix(in srgb, var(--success) 12%, white);color:var(--success)}.save-badge.saving{background:var(--accent-soft);color:var(--accent)}.save-badge.error{background:color-mix(in srgb, var(--danger) 12%, white);color:var(--danger)}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.editor-body{flex:1;min-height:0;display:flex;position:relative}.tool-dock{-webkit-backdrop-filter:blur(16px);background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-2);z-index:20;scrollbar-width:thin;flex-direction:column;gap:12px;width:92px;max-height:calc(100% - 28px);padding:12px;transition:transform .22s cubic-bezier(.3,.9,.3,1),opacity .18s;display:flex;position:absolute;top:50%;left:14px;overflow:hidden auto;transform:translateY(-50%)}.tool-dock:not(.open){opacity:0;pointer-events:none;transform:translate(-110%,-50%)}.tool-dock .icon-button{background:0 0;border-color:#0000}.tool-dock .icon-button:hover:not(:disabled):not(.selected){background:var(--accent-softer);color:var(--accent);border-color:#0000}.tool-dock .icon-button:disabled{opacity:.35}.tool-dock .icon-button.selected{animation:.17s cubic-bezier(.3,.9,.4,1.15) tool-pop}@keyframes tool-pop{0%{transform:scale(.86)}to{transform:scale(1)}}.color-current{box-shadow:inset 0 0 0 2px #ffffffa6, 0 0 0 1px var(--line-strong);pointer-events:none;border-radius:999px;width:22px;height:22px}.dock-collapse-tab{background:var(--surface-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink-faint);cursor:pointer;z-index:19;border-left:none;border-radius:0 10px 10px 0;justify-content:center;align-items:center;width:18px;height:64px;padding:0;display:flex;position:absolute;top:50%;left:105px;transform:translateY(-50%)}.dock-collapse-tab:hover{background:var(--accent-softer);color:var(--accent)}.dock-collapse-tab.labeled{left:253px}.dock-footer{justify-content:center;gap:8px;margin-top:auto;padding-top:10px;display:flex;position:relative}.dock-group{flex-direction:column;align-items:center;gap:8px;display:flex}.dock-group+.dock-group,.dock-footer{padding-top:10px}.dock-group+.dock-group:before,.dock-footer:before{background:var(--line-strong);content:"";border-radius:999px;width:32px;height:1px;position:absolute;top:0;left:50%;transform:translate(-50%)}.dock-group+.dock-group{position:relative}.dock-group .icon-button{width:46px;height:46px}.dock-item{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.dock-label,.dock-group-title{display:none}.swatch-row{flex-direction:column;align-items:center;gap:8px;display:flex}.tool-dock.labeled{width:240px}.tool-dock.labeled .dock-group{align-items:stretch}.tool-dock.labeled .dock-item{justify-content:flex-start}.tool-dock.labeled .dock-label{gap:1px;min-width:0;line-height:1.25;display:grid}.tool-dock.labeled .dock-label strong{font-size:.86rem}.tool-dock.labeled .dock-label small{color:var(--ink-faint);font-size:.72rem}.tool-dock.labeled .dock-group-title{color:var(--ink-faint);letter-spacing:.07em;text-transform:uppercase;font-size:.68rem;font-weight:800;display:block}.tool-dock.labeled .swatch-row{flex-flow:wrap;justify-content:flex-start}.tool-dock.labeled .dock-width{align-items:flex-start}.tool-dock.labeled .dock-width input[type=range]{writing-mode:horizontal-tb;direction:ltr;width:150px;height:24px}.swatch{cursor:pointer;border:2px solid #0000;border-radius:999px;flex:none;width:30px;height:30px;padding:0;transition:transform .12s,border-color .12s;box-shadow:inset 0 0 0 2px #ffffffb3}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:var(--ink);transform:scale(1.12)}.swatch.custom{place-items:center;display:grid;position:relative;overflow:hidden}.swatch.custom input[type=color]{cursor:pointer;opacity:0;width:200%;height:200%;min-height:0;position:absolute;top:-50%;left:-50%}.swatch.custom svg{color:#fff;filter:drop-shadow(0 1px 2px #00000073);pointer-events:none;z-index:1;position:relative}.dock-width{flex-direction:column;align-items:center;gap:10px;padding:6px 0;display:flex}.dock-width input[type=range]{writing-mode:vertical-lr;width:24px;height:88px;min-height:0;accent-color:var(--accent);direction:rtl;background:0 0;border:0;padding:0}.width-dot{background:var(--ink);box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong);border-radius:999px;flex:none}.zoom-value{color:var(--ink-soft);background:0 0;border:0;border-radius:8px;min-height:26px;padding:2px 6px;font-size:.74rem;font-weight:800}.zoom-value:hover{color:var(--accent)}.zoom-pill{-webkit-backdrop-filter:blur(12px);background:var(--surface-glass);border:1px solid var(--line);box-shadow:var(--shadow-1);z-index:15;border-radius:999px;align-items:center;padding:3px;display:inline-flex;position:absolute;bottom:14px;right:14px}.zoom-pill .icon-button{background:0 0;border:0;border-radius:999px;width:32px;height:32px;min-height:32px}.zoom-pill .icon-button:hover:not(:disabled){background:var(--accent-softer);color:var(--accent)}.zoom-pill .zoom-value{text-align:center;min-width:44px}.editor.fullscreen .zoom-pill{display:none}.icon-button.has-flyout{position:relative}.flyout-arrow{opacity:.55;pointer-events:none;border-bottom:5px solid;border-left:5px solid #0000;width:0;height:0;position:absolute;bottom:4px;right:4px}.dock-flyout{-webkit-backdrop-filter:blur(16px);background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-2);z-index:21;gap:12px;max-width:min(250px,100vw - 130px);padding:14px;animation:.16s cubic-bezier(.3,.9,.3,1) flyout-in;display:grid;position:absolute;top:50%;left:118px;transform:translateY(-50%)}.dock-flyout.labeled{max-width:min(250px,100vw - 278px);left:266px}@keyframes flyout-in{0%{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}.flyout-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.flyout-header strong{font-size:.85rem}.flyout-header .icon-button{width:28px;height:28px}.flyout-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.flyout-row .icon-button{width:44px;height:44px}.flyout-width{align-items:center;gap:12px;min-height:32px;padding:2px 0;display:flex}.flyout-width input[type=range]{accent-color:var(--accent);background:0 0;border:0;flex:1;min-width:130px;min-height:0;padding:0}.dock-fab{background:var(--gradient);box-shadow:var(--shadow-accent), var(--shadow-2);color:#fff;z-index:20;border:0;border-radius:999px;justify-content:center;align-items:center;width:54px;height:54px;transition:transform .14s;display:inline-flex;position:absolute;top:50%;bottom:auto;left:14px;transform:translateY(-50%)}.dock-fab:hover{transform:translateY(-50%)scale(1.06)}.editor.fullscreen .dock-fab{bottom:calc(16px + env(safe-area-inset-bottom));top:auto;transform:none}.editor.fullscreen .dock-fab:hover{transform:scale(1.06)}.canvas-stage{touch-action:none;flex:1;justify-content:center;align-items:center;min-width:0;padding:18px;display:flex;position:relative;overflow:hidden}.whiteboard-wrap{aspect-ratio:16/9;transform-origin:50%;max-width:100%;height:min(100%,56.25vw - 20.25px);transition:transform .18s;position:relative}.whiteboard-wrap.dragging{transition:none}.whiteboard-wrap.anim-from-right{animation:.26s cubic-bezier(.25,.9,.3,1) page-from-right}.whiteboard-wrap.anim-from-left{animation:.26s cubic-bezier(.25,.9,.3,1) page-from-left}@keyframes page-from-right{0%{opacity:.25;transform:translateX(90px) scale(calc(var(--zoom,1) * .98))}to{opacity:1;transform:translateX(0) scale(var(--zoom,1))}}@keyframes page-from-left{0%{opacity:.25;transform:translateX(-90px) scale(calc(var(--zoom,1) * .98))}to{opacity:1;transform:translateX(0) scale(var(--zoom,1))}}.whiteboard{aspect-ratio:16/9;border:1px solid var(--line-strong);border-radius:var(--radius-m);box-shadow:var(--shadow-2);touch-action:none;background:#fff;width:auto;max-width:100%;height:100%;max-height:100%}.grid-lines line{stroke:#e8eef5;stroke-width:1px}.grid-lines.compact line{stroke-width:3px}.selection-outline{fill:color-mix(in srgb, var(--accent) 8%, transparent);stroke:var(--accent);stroke-dasharray:10 8;stroke-width:2px}.inline-text-editor{border:2px solid var(--accent);border-radius:var(--radius-s);box-shadow:var(--shadow-3);z-index:3;background:#fffffff7;min-width:220px;min-height:72px;font-size:clamp(1rem,2.2vw,1.55rem);font-weight:700;position:absolute;transform:translateY(-100%)}.remote-pointer{pointer-events:none}.remote-pointer circle:first-child{animation:1.1s ease-out infinite pulse-pointer}@keyframes pulse-pointer{0%{opacity:.2;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}.selection-toolbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--surface-glass);border:1px solid var(--line);box-shadow:var(--shadow-2);z-index:15;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:6px;animation:.18s toast-in;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.selection-toolbar .icon-button{border:0;width:40px;height:40px}.fs-exit{z-index:25;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--surface-glass);box-shadow:var(--shadow-2);position:absolute;top:14px;right:14px}.fs-nav{-webkit-backdrop-filter:blur(14px);background:var(--surface-glass);border:1px solid var(--line);bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:var(--shadow-2);z-index:18;border-radius:999px;align-items:center;gap:4px;padding:5px;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.fs-nav-button{color:var(--ink);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:44px;height:44px;transition:background .14s,color .14s;display:inline-flex}.fs-nav-button:hover:not(:disabled){background:var(--accent-softer);color:var(--accent)}.fs-nav-button.add{background:var(--gradient);box-shadow:var(--shadow-accent);color:#fff}.fs-nav-label{color:var(--ink-soft);white-space:nowrap;padding:0 10px;font-size:.82rem;font-weight:700}.orientation-hint{background:var(--ink);box-shadow:var(--shadow-2);color:var(--bg-soft);text-align:left;z-index:24;border:0;border-radius:999px;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:10px 14px;font-size:.78rem;font-weight:700;animation:.22s toast-in;display:inline-flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.new-page-hint{background:var(--gradient);box-shadow:var(--shadow-accent);color:#fff;z-index:26;pointer-events:none;border-radius:999px;align-items:center;gap:8px;padding:12px 20px;font-weight:800;animation:.16s toast-in;display:inline-flex;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.page-strip{background:var(--surface);border-top:1px solid var(--line);scrollbar-width:thin;align-items:center;gap:10px;min-height:104px;padding:10px 16px;display:flex;overflow-x:auto}.page-thumb{background:var(--bg-soft);border-radius:var(--radius-s);color:var(--ink);border:2px solid #0000;flex:0 0 122px;gap:4px;padding:5px;transition:border-color .14s,transform .14s;display:grid}.page-thumb:hover{transform:translateY(-2px)}.page-thumb.active{border-color:var(--accent)}.page-thumb svg{aspect-ratio:16/9;border:1px solid var(--line);background:#fff;border-radius:6px;width:100%}.page-thumb{cursor:pointer;position:relative}.page-thumb span{font-size:.74rem;font-weight:800}.thumb-actions{gap:4px;display:inline-flex;position:absolute;top:6px;right:6px}.thumb-actions button{color:#3b4256;background:#fffffff2;border:1px solid #0f152633;border-radius:7px;justify-content:center;align-items:center;width:26px;height:26px;display:inline-flex;box-shadow:0 1px 4px #0f15262e}.thumb-actions button:disabled{opacity:.4}.thumb-actions button:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}.editor-footer{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--surface-glass);border-top:1px solid var(--line);min-height:60px;padding:8px clamp(10px, 2vw, 18px) calc(8px + env(safe-area-inset-bottom));align-items:center;gap:10px;display:flex}.footer-left,.footer-right{flex:1;align-items:center;gap:6px;display:flex}.footer-right{justify-content:flex-end}.pager-core{align-items:center;gap:8px;display:inline-flex}.pager-core span{color:var(--ink-soft);text-align:center;white-space:nowrap;min-width:92px;font-size:.85rem;font-weight:700}.editor-footer .icon-button{width:40px;height:40px}.save-meta{color:var(--ink-faint);white-space:nowrap;align-items:center;gap:5px;margin-left:8px;font-size:.8rem;font-weight:600;display:inline-flex}.editor-title strong{align-items:center;gap:6px;display:inline-flex}.title-edit{color:var(--ink-faint);background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:inline-flex}.title-edit:hover{background:var(--accent-softer);color:var(--accent)}.title-input{max-width:320px;min-height:34px;padding:4px 10px;font-size:.95rem;font-weight:700}.presence-more{background:var(--accent-soft);border:2px solid var(--surface);color:var(--accent);border-radius:999px;justify-content:center;align-items:center;min-width:34px;height:34px;margin-left:-8px;font-size:.72rem;font-weight:800;display:inline-flex}.dock-header-button{background:var(--bg-soft);border:1px solid var(--line-strong);color:var(--ink-soft);flex:none;width:32px!important;height:32px!important}.dock-header-button:hover:not(:disabled){color:var(--accent)}.icon-button.danger:hover:not(:disabled){background:color-mix(in srgb, var(--danger) 12%, var(--surface));border-color:color-mix(in srgb, var(--danger) 40%, var(--surface));color:var(--danger)}.card-actions{align-items:center;gap:6px;display:inline-flex}.project-card .card-actions{opacity:1;transition:opacity .14s;position:absolute;top:14px;right:14px}.project-card .card-actions .icon-button,.lesson-row .card-actions .icon-button{width:34px;height:34px}.project-card.editing{cursor:default;align-content:start;gap:10px;padding:22px;display:grid}.connection-banner{background:color-mix(in srgb, var(--warning) 14%, var(--surface));border-bottom:1px solid color-mix(in srgb, var(--warning) 32%, var(--line));color:var(--ink);justify-content:center;align-items:center;gap:9px;min-height:42px;padding:6px 12px;font-size:.85rem;font-weight:650;display:flex}.connection-banner button{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;flex:none;align-items:center;gap:6px;min-height:30px;padding:0 11px;font-size:.8rem;font-weight:700;display:inline-flex}.lesson-row .card-actions{z-index:4;margin-left:auto;position:relative}.lesson-menu-anchor{position:relative}.action-menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-3);z-index:20;min-width:160px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);right:0}.action-menu button{border-radius:var(--radius-s);color:var(--ink);text-align:left;background:0 0;border:0;align-items:center;gap:9px;min-height:40px;padding:0 10px;display:flex}.action-menu button:hover{background:var(--accent-softer)}.action-menu button.danger{color:var(--danger)}.project-card.editing:hover{transform:none}.empty-state{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius-l);text-align:center;place-items:center;gap:8px;margin-bottom:20px;padding:44px 24px;display:grid}.empty-state p{color:var(--ink-soft);max-width:380px;margin:0}.empty-state .primary-button{margin-top:8px}.empty-icon{background:var(--accent-soft);color:var(--accent);border-radius:999px;justify-content:center;align-items:center;width:60px;height:60px;display:inline-flex}.password-input{display:grid;position:relative}.password-input input{padding-right:46px}.password-toggle{width:34px;height:34px;position:absolute;top:50%;right:5px;transform:translateY(-50%)}.text-size-button{font-size:.78rem;font-weight:800}.selection-readonly{color:var(--ink-faint);white-space:nowrap;padding:0 10px;font-size:.8rem;font-weight:700}.page-menu-anchor{display:none;position:relative}.page-menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-2);z-index:40;gap:2px;min-width:200px;padding:6px;animation:.16s toast-in;display:grid;position:absolute;bottom:calc(100% + 8px);right:0}.page-menu button{color:var(--ink);text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;min-height:42px;padding:0 12px;font-size:.88rem;font-weight:600;display:flex}.page-menu button:hover:not(:disabled){background:var(--accent-softer)}.page-menu button.danger{color:var(--danger)}.editor [data-tip]:not(.fs-exit):not(.dock-fab){position:relative}.editor [data-tip]:after{background:var(--ink);box-shadow:var(--shadow-2);color:#fff;content:attr(data-tip);opacity:0;pointer-events:none;text-align:center;white-space:normal;z-index:70;border-radius:8px;width:max-content;max-width:200px;padding:5px 10px;font-size:.72rem;font-weight:600;line-height:1.3;transition:opacity .14s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.editor [data-tip][data-tip-pos=bottom]:after{top:calc(100% + 8px);bottom:auto}.editor [data-tip][data-tip-pos=left]:after{inset:50% calc(100% + 8px) auto auto;transform:translateY(-50%)}.editor [data-tip][data-tip-pos=right]:after{top:50%;bottom:auto;left:calc(100% + 8px);transform:translateY(-50%)}.editor [data-tip]:hover:after,.editor [data-tip]:focus-visible:after,.editor.help-mode [data-tip]:after{opacity:1}.editor.help-mode [data-tip]:nth-child(2n):not([data-tip-pos]):after{bottom:calc(100% + 38px)}.editor.help-mode [data-tip][data-tip-pos=bottom]:nth-child(2n):after{top:calc(100% + 38px)}.editor.help-mode .editor-footer{flex-wrap:wrap;overflow:visible}.dialog-backdrop{z-index:200;background:#050812ad;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dialog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);gap:20px;width:100%;max-width:480px;padding:24px;display:grid}.dialog-heading{justify-content:space-between;align-items:start;gap:16px;display:flex}.dialog-heading h2{margin-bottom:6px;font-size:1.25rem}.dialog-heading p{color:var(--ink-soft);margin:0}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.dialog-actions .back-button,.search-empty .back-button{margin-bottom:0}.danger-button{background:var(--danger);box-shadow:0 8px 24px color-mix(in srgb, var(--danger) 28%, transparent)}.danger-button:hover:not(:disabled){box-shadow:0 12px 28px color-mix(in srgb, var(--danger) 36%, transparent)}@media (width<=900px){.app-shell.in-editor .topbar{display:none}.app-shell.in-editor .editor{height:100dvh}}@media (width<=760px){.topbar{grid-template-columns:auto 1fr auto}.topbar nav,.account span:not(.avatar){display:none}.mobile-nav{-webkit-backdrop-filter:blur(16px);background:var(--surface-glass);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:40;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.app-shell.in-editor .mobile-nav{display:none}.mobile-nav a{border-radius:var(--radius-m);color:var(--ink-faint);place-items:center;gap:2px;min-width:74px;padding:8px 12px;font-size:.68rem;font-weight:700;text-decoration:none;transition:color .14s,background .14s;display:grid}.mobile-nav a.active{background:var(--accent-soft);color:var(--accent)}.toast-stack{bottom:calc(76px + env(safe-area-inset-bottom));max-width:none;top:auto;left:16px;right:16px}.page-title-actions{align-items:stretch;gap:0;display:grid}.page-title-actions .page-header{margin-bottom:18px}.create-lesson{justify-self:start}.library-toolbar{grid-template-columns:1fr}.library-sort,.library-sort select{width:100%}.library-count{padding:2px 4px 0}.lesson-row{grid-template-columns:auto minmax(0,1fr) auto;gap:5px 12px;min-height:92px;padding:14px;display:grid}.lesson-icon,.lesson-preview{grid-row:1/span 2}.lesson-preview{width:64px;height:46px}.lesson-row .lesson-info{grid-column:2}.lesson-row .lesson-info small{line-height:1.35}.lesson-row .card-actions{grid-area:1/3/span 2;margin-left:0}.lesson-row .card-actions .icon-button,.project-card .card-actions .icon-button{width:44px;height:44px}.lesson-arrow{display:none}.action-menu{top:calc(50% + 24px)}.section-heading-row{align-items:stretch;display:grid}.compact-search{max-width:none}.connection-banner{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.dialog-backdrop{align-items:flex-end;padding:10px}.dialog-card{border-radius:var(--radius-xl) var(--radius-xl) var(--radius-m) var(--radius-m);padding:20px}.page-actions-inline{display:none}.page-menu-anchor{display:inline-flex}.project-card .card-actions{opacity:1}.canvas-stage{padding:10px}.tool-dock{width:86px;padding:10px;left:10px}.dock-collapse-tab{left:95px}.dock-group .icon-button{width:44px;height:44px}.dock-fab{width:50px;height:50px;left:10px}.dock-flyout{max-width:min(250px,100vw - 116px);left:106px}.dock-flyout.labeled{max-width:min(280px,100vw - 24px);animation:none;left:50%;transform:translate(-50%,-50%)}.zoom-pill{bottom:10px;right:10px}.zoom-pill .icon-button{width:30px;height:30px;min-height:30px}.editor-footer{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.footer-left,.footer-right{flex:none}.save-meta{display:none}.page-strip{min-height:88px}.page-thumb{flex:0 0 104px}.user-admin-row{grid-template-columns:1fr;align-items:stretch}.presence .avatar{width:30px;height:30px}.presence-more{min-width:30px;height:30px}}@media (width<=520px){.dialog-actions{grid-template-columns:1fr 1fr;display:grid}.dialog-actions button{width:100%}.save-badge{padding:6px}.save-badge .save-badge-text{display:none}.title-input{max-width:180px}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}