*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202532;background:#f5f7fb}body{overflow:hidden;touch-action:pan-x pan-y}.topbar{height:62px;background:#fff;border-bottom:1px solid #e7eaf0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand b{display:block;font-size:15px}.brand small{display:block;color:#8a91a0;font-size:11px;margin-top:2px}.logo{width:40px;height:40px;object-fit:contain;flex:none;border-radius:8px}.room-control{display:flex;align-items:center;gap:9px}.room-control input{width:116px;height:33px;border:1px solid #e2e6ed;border-radius:7px;padding:0 9px;font-size:13px}.button,button{font:inherit;cursor:pointer}.quiet{border:1px solid #e4e8ef;border-radius:7px;background:#fff;color:#525b6b;padding:7px 10px;font-size:12px}.status{display:flex;align-items:center;gap:6px;color:#818999;font-size:12px;white-space:nowrap}.status i{width:8px;height:8px;border-radius:50%;background:#f0ae32}.status.connected i{background:#27b37b}.peers{color:#89909e;font-size:12px;white-space:nowrap}.toolbar{height:62px;margin:10px 14px 9px;background:white;border:1px solid #e8ebf0;border-radius:10px;display:flex;align-items:center;padding:0 11px;gap:10px;box-shadow:0 2px 6px #24324a08;overflow-x:auto}.tool-group{display:flex;gap:4px}.tool,.action{height:42px;border:0;background:transparent;border-radius:7px;color:#697283;padding:5px 9px;display:flex;align-items:center;gap:6px;font-size:18px;white-space:nowrap}.tool span,.action span{font-size:12px}.tool.active{background:#eaf1ff;color:#2878e8}.separator{height:28px;border-left:1px solid #e9ecf1;flex:none}.colors{display:flex;align-items:center;gap:8px;padding:0 3px}.color{width:21px;height:21px;border-radius:50%;border:2px solid white;background:var(--color);box-shadow:0 0 0 1px #d9dee7;padding:0}.color.selected{box-shadow:0 0 0 2px #2878e8}.size-label{display:flex;align-items:center;gap:7px;color:#778091;font-size:12px;white-space:nowrap}.size-label input{width:82px;accent-color:#2878e8}.action{font-size:16px}.action:hover,.quiet:hover{background:#f2f5fa}.workspace{height:calc(100% - 157px);display:flex;margin:0 14px 8px;gap:9px;min-height:150px}.board-wrap{position:relative;flex:1;min-width:0;background:#fff;border:1px solid #e6eaf0;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px #24324a08}canvas{display:block;width:100%;height:100%;touch-action:none}.hint{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);color:#b1b8c4;font-size:15px;pointer-events:none;white-space:nowrap}.hint.hidden{display:none}.pagebar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);height:37px;padding:0 5px;background:#ffffffed;border:1px solid #e9ecf1;box-shadow:0 2px 8px #1d2b4412;border-radius:8px;display:flex;align-items:center;gap:7px}.pagebar button{border:0;background:transparent;color:#657083;width:27px;height:28px;border-radius:5px;font-size:19px}.pagebar button:hover{background:#eef2f8}.pagebar span{font-size:12px;white-space:nowrap;min-width:42px;text-align:center}.code-panel{width:min(34%,430px);display:none;flex-direction:column;background:#1d2430;color:#e6eaf0;border-radius:10px;overflow:hidden}.code-panel.open{display:flex}.code-head{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid #353d49;font-size:13px}.code-head button{background:none;border:0;color:#aab2bf;font-size:22px}.code-panel textarea{flex:1;resize:none;background:transparent;color:#d5e4ff;border:0;outline:0;padding:14px;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:4}.code-foot{padding:8px 12px;border-top:1px solid #353d49;color:#8993a2;font-size:11px}footer{height:20px;display:flex;justify-content:space-between;padding:0 18px;color:#9ba2af;font-size:11px}dialog{border:0;border-radius:12px;padding:20px 22px;width:min(360px,90vw);box-shadow:0 14px 50px #17243c40}dialog::backdrop{background:#17243c66}dialog h3{margin:0 0 15px;font-size:16px}dialog label{display:grid;gap:7px;font-size:12px;color:#697283}dialog input{height:38px;border:1px solid #dce2eb;border-radius:7px;padding:0 10px}.node-types{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.node-types button{border:1px solid #e0e5ed;border-radius:7px;background:#fff;padding:8px 10px;color:#4f596b;font-size:12px}.node-types .primary{background:#2878e8;color:white;border-color:#2878e8}body.projector .topbar,body.projector .toolbar,body.projector footer{display:none}body.projector .workspace{height:100%;margin:0}body.projector .board-wrap{border:0;border-radius:0}.mobile-draw-note{display:none}@media(max-width:700px){.topbar{height:55px;padding:0 10px}.brand small{display:none}.brand .logo{width:34px;height:34px}.room-control{gap:5px}.room-control input{width:84px}.room-control .quiet{padding:7px}.peers{display:none}.toolbar{margin:7px 7px;height:57px;padding:0 7px;gap:7px}.workspace{height:calc(100% - 137px);margin:0 7px 5px}.tool,.action{padding:5px 7px}.tool span,.action span{font-size:11px}.colors{gap:6px}.color{width:20px;height:20px}.size-label input{width:58px}.code-panel{position:absolute;z-index:3;inset:119px 7px 27px;width:auto}.hint{font-size:12px}footer{padding:0 9px;font-size:9px}}@media(orientation:portrait) and (max-width:700px){.workspace{height:calc(100% - 141px)}.pagebar{bottom:8px}}

/* iPad touch and true viewport-filling projector layout */
.finger-toggle{position:relative;cursor:pointer}.finger-toggle input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.finger-toggle:has(input:checked){background:#eaf1ff;color:#2878e8}.finger-toggle:has(input:focus-visible){outline:3px solid rgba(57,120,219,.42);outline-offset:2px}
/* Clear, consistent line icons and the AI entry point in the main toolbar. */
.tool svg,.action svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toolbar .tool,.toolbar .action{min-width:68px;justify-content:center}.toolbar .ai-global{color:#7045a3;background:#f5efff;border:1px solid #e8dcf8;padding-inline:12px}.toolbar .ai-global:hover{background:#eee3fb}
.code-head .code-fullscreen-trigger{display:inline-flex;align-items:center;gap:4px}
.toolbar .code-global{color:#345a88;background:#f0f5fb;border:1px solid #dce6f3}
.toolbar .code-global:hover{background:#e6effa}
body.code-projector .topbar,body.code-projector .toolbar,body.code-projector footer{display:none}
body.code-projector>main{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0}
body.code-projector .workspace{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;gap:0}
body.code-projector .board-wrap,body.code-projector .splitter{display:none}
body.code-projector .code-panel.open{position:absolute;inset:0;width:100%;height:100%;display:flex;border-radius:0;z-index:10}
body.code-projector .code-head{height:52px;flex:none}
body.projector{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#fff}
body.projector main{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0}
body.projector .workspace{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;gap:0}
body.projector .board-wrap{width:100%;height:100%;min-width:0;border:0;border-radius:0;box-shadow:none}
body.projector .code-panel{position:absolute;right:0;top:0;bottom:0;height:100%;border-radius:0;z-index:2}
@media(max-width:700px){.finger-toggle{font-size:11px}}
.pagebar #addPage{width:auto;min-width:48px;display:flex;align-items:center;gap:4px;font-size:16px;border-left:1px solid #e9ecf1;border-radius:0}.page-add-label{font-size:11px}
.code-editor{position:relative;flex:1;min-height:0;overflow:hidden}.code-editor pre,.code-editor textarea{position:absolute;inset:0;margin:0;padding:14px;overflow:auto;white-space:pre;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:4}.code-editor pre{color:#d5e4ff;pointer-events:none}.code-editor textarea{background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent;caret-color:#fff;resize:none}.code-editor textarea::selection{background:#5579ad66}.tok-key{color:#c792ea}.tok-type{color:#82aaff}.tok-string{color:#c3e88d}.tok-comment{color:#697586}.tok-number{color:#f78c6c}.tok-pre{color:#89ddff}
.code-editor pre,.code-editor textarea{font-size:16px;line-height:1.65}.code-editor #lineNumbers{inset:0 auto 0 0;width:48px;padding:14px 10px 14px 0;text-align:right;color:#727d8f;border-right:1px solid #3b4452;overflow:hidden;white-space:pre}.code-editor #codeHighlight,.code-editor textarea{left:49px;width:calc(100% - 49px)}.code-suggestions{display:none;position:absolute;z-index:5;left:54px;bottom:10px;max-height:190px;overflow:auto;background:#273140;border:1px solid #465267;border-radius:7px;box-shadow:0 8px 24px #0006;color:#dce5f3;font:14px/1.5 ui-monospace,monospace}.code-suggestions.open{display:block}.code-suggestions button{display:block;width:100%;padding:7px 11px;border:0;background:transparent;color:inherit;text-align:left;font:inherit}.code-suggestions button:hover{background:#3b4b64}.code-editor #codeHighlight{white-space:pre}
.code-head>div{display:flex;align-items:center;gap:8px}.code-head .suggest-trigger{font-size:12px;border:1px solid #566173;border-radius:5px;padding:4px 9px;color:#d8e2f0;background:#2a3442}.code-head .suggest-trigger:hover{background:#3a4960}
.workspace{position:relative}.splitter{display:none;touch-action:none;user-select:none}.workspace.split-open .splitter{display:block;flex:0 0 9px;width:9px;background:transparent;cursor:col-resize;position:relative;z-index:4}.workspace.split-open .splitter:after{content:"";position:absolute;left:3px;top:0;bottom:0;width:3px;border-radius:3px;background:#d3d9e3}.workspace.split-open .splitter:hover:after,.workspace.split-open .splitter:focus:after{background:#2878e8}.workspace.split-open .code-panel{width:var(--code-pane-width,34%);flex:0 0 var(--code-pane-width,34%);max-width:none}.code-suggestions button.current{background:#3b4b64;color:#fff}
@media(max-width:700px){.workspace.split-open .splitter{position:absolute;left:calc(100% - var(--code-pane-width,42%) - 4px);top:0;bottom:0;flex:none;height:100%}.workspace.split-open .code-panel{width:var(--code-pane-width,42%);left:auto;inset:0 0 0 auto}}
.graph-dialog{width:min(1100px,96vw);height:min(760px,92vh);max-width:none;padding:0;overflow:hidden}.graph-dialog form{height:100%;display:flex;flex-direction:column}.graph-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #e5e9ef}.graph-dialog-head h3{margin:0}.graph-controls{display:flex;align-items:end;gap:9px;padding:10px 14px;border-bottom:1px solid #e7ebf1;flex-wrap:wrap}.graph-controls label{display:flex;align-items:center;gap:6px;font-size:12px;color:#647084}.graph-controls input,.graph-controls select{height:34px;border:1px solid #dce2eb;border-radius:6px;background:#fff;padding:0 8px;color:#30394a}.graph-controls button{height:34px;border:1px solid #dce2eb;border-radius:6px;background:#fff;padding:0 12px;color:#364257}.graph-controls button.primary{background:#2878e8;border-color:#2878e8;color:#fff}.graph-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;padding:12px;min-height:0;flex:1}.graph-body aside{display:flex;flex-direction:column;gap:12px}.graph-body aside label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.graph-body aside small{font-weight:400;color:#8a93a2}.graph-body aside textarea{width:100%;height:240px;resize:vertical;border:1px solid #dce2eb;border-radius:7px;padding:10px;font:14px/1.55 ui-monospace,monospace}.graph-status{padding:10px;border-radius:7px;background:#eef4ff;color:#324c70;font-size:13px;line-height:1.6}.graph-foot{padding:8px 14px 12px;color:#8690a0;font-size:11px}#graphNetwork{min-width:0;min-height:280px;border:1px solid #e7ebf1;border-radius:8px;background:#fff}.graph-dialog form> .graph-controls select{min-width:190px}
@media(max-width:720px){.graph-dialog{height:96vh}.graph-body{grid-template-columns:1fr;grid-template-rows:minmax(250px,1fr) auto;overflow:auto}.graph-body aside textarea{height:100px}#graphNetwork{min-height:260px}}
.flowchart-dialog{width:min(1460px,98vw);height:min(940px,96vh);height:min(940px,96dvh);max-width:none;max-height:none;padding:0;overflow:hidden;border:1px solid #ffffffb8;border-radius:22px;background:linear-gradient(145deg,#fbfcffed,#f3f6fbea);box-shadow:0 28px 90px #0d1b3260;backdrop-filter:blur(20px)}.flowchart-dialog[open]{display:flex;flex-direction:column}.flowchart-dialog::backdrop{background:#0c16294d;backdrop-filter:blur(7px)}.flow-head,.flow-tabs{display:flex;align-items:center;gap:10px;padding:12px 17px;border-bottom:1px solid #e3e9f2}.flow-head{justify-content:space-between}.flow-head>div{display:flex;flex-direction:column;gap:3px}.flow-head b{font-size:16px;color:#1e2b40}.flow-head span{font-size:12px;color:#718097}.flow-tabs{padding:8px 16px 0;gap:5px}.flow-tabs button,.mermaid-pane button{border:1px solid #dde5f0;background:#ffffffc9;border-radius:9px;padding:8px 12px;color:#42516a;font:inherit;font-size:13px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.flow-tabs button:hover,.mermaid-pane button:hover{transform:translateY(-1px);box-shadow:0 5px 14px #29446a18}.flow-tabs button.active{background:#eaf2ff;color:#2269cf;border-color:#bed5fa}.drawio-pane{display:flex;flex:1;min-height:0;flex-direction:column;padding:10px 12px 12px;gap:8px}.drawio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:0 3px}.drawio-toolbar span{font-size:12px;color:#65748c}.drawio-toolbar>button,.mermaid-pane button{border:1px solid #dde5f0;background:#ffffffc9;border-radius:9px;padding:8px 12px;color:#42516a;font:inherit;font-size:13px;cursor:pointer}.drawio-toolbar>button[hidden]{display:none}.drawio-toolbar .primary,.mermaid-pane button.primary{background:linear-gradient(135deg,#397bea,#2461c8);border-color:#3574d9;color:#fff}.drawio-pane iframe{width:100%;min-height:0;flex:1;border:1px solid #dfe6f0;border-radius:13px;background:#fff;box-shadow:0 8px 24px #273b5812}.mermaid-pane{display:flex;flex:1;min-height:0;flex-direction:column;gap:11px;padding:12px 16px 16px}.mermaid-pane[hidden]{display:none}.mermaid-ai-panel{display:flex;flex-direction:column;gap:7px;padding:11px 13px;border:1px solid #dce7f5;border-radius:13px;background:linear-gradient(125deg,#f6f9ff,#fff)}.mermaid-ai-panel>label{display:flex;align-items:baseline;gap:9px;font-size:13px;font-weight:700;color:#2b3b53}.mermaid-ai-panel>label small,.mermaid-ai-panel>small{font-size:11px;font-weight:400;color:#7b8798}.mermaid-ai-controls{display:flex;gap:8px}.mermaid-ai-controls input{flex:1;min-width:80px;height:38px;padding:0 11px;border:1px solid #d9e1ed;border-radius:9px;background:#fff;font:inherit;font-size:13px;outline:none}.mermaid-ai-controls input:focus{border-color:#7da7ec;box-shadow:0 0 0 3px #397bea18}.mermaid-ai-controls button:disabled{opacity:.55;transform:none}.mermaid-editor-grid{display:grid;flex:1;min-height:0;grid-template-columns:minmax(260px,40%) minmax(0,1fr);gap:12px}.mermaid-editor-grid>label{display:flex;min-height:0;flex-direction:column;gap:7px;font-size:13px;font-weight:650;color:#3d4a5e}.mermaid-editor-grid textarea{width:100%;min-height:0;flex:1;resize:none;border:1px solid #dce3ed;border-radius:12px;padding:12px;background:#fff;color:#263247;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none}.mermaid-editor-grid textarea:focus{border-color:#7da7ec;box-shadow:0 0 0 3px #397bea18}.mermaid-preview-wrap{display:flex;min-width:0;min-height:0;flex-direction:column;gap:8px}.mermaid-actions{display:flex;gap:7px;flex-wrap:wrap}.mermaid-preview{display:grid;flex:1;min-height:180px;overflow:auto;place-items:center;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(#fff,#fbfcfe);box-shadow:inset 0 1px 4px #2538580a}.mermaid-preview svg{max-width:100%;max-height:100%}
@media(max-width:700px){.flowchart-dialog{width:98vw;height:96dvh;border-radius:16px}.flow-head,.flow-tabs{padding-left:11px;padding-right:11px}.flow-head span{max-width:65vw;line-height:1.35}.drawio-pane{padding:7px;gap:6px}.drawio-toolbar{min-height:34px}.drawio-toolbar span{font-size:10px}.mermaid-pane{padding:8px;gap:8px}.mermaid-ai-controls{flex-wrap:wrap}.mermaid-ai-controls input{flex-basis:100%}.mermaid-editor-grid{grid-template-columns:1fr;grid-template-rows:minmax(140px,.8fr) minmax(180px,1fr);gap:8px}.mermaid-editor-grid textarea{min-height:140px}.mermaid-preview{min-height:180px}.mermaid-actions button{flex:1 1 auto;padding:7px 8px;font-size:12px}}

/* CodeMirror editor and code file tabs */
.code-editor{display:flex;min-height:0;overflow:hidden;background:#fbfcfe}.code-editor #codeEditor{flex:1;min-width:0;min-height:0}.code-editor .cm-editor{height:100%}.code-tabs{display:flex;align-items:center;gap:4px;min-height:36px;padding:3px 8px;overflow-x:auto;background:#f1f4f8;border-bottom:1px solid #e0e5ed}.code-tab-wrap{display:flex;flex:0 0 auto;align-items:center;gap:1px;border-radius:6px}.code-tab{flex:0 0 auto;border:0;border-radius:5px;padding:6px 10px;background:transparent;color:#657186;font:12px ui-monospace,monospace;white-space:nowrap}.code-tab:hover{background:#e5ebf3}.code-tab.active{background:#fff;color:#2878e8;box-shadow:0 1px 3px #25385820}.code-tab-delete{flex:0 0 24px;width:24px;height:24px;border:0;border-radius:5px;background:transparent;color:#8490a0;font-size:17px;line-height:1;opacity:.58}.code-tab-delete:hover:not(:disabled){background:#ffecee;color:#bd4552;opacity:1}.code-tab-delete:disabled{cursor:not-allowed;opacity:.22}.code-foot{flex:0 0 auto}

/* Collapsible secondary toolbar tools */
.toolbar-more{position:relative;flex:none}.toolbar-more>summary{list-style:none;cursor:pointer;white-space:nowrap;border:1px solid #e3e8f0;border-radius:7px;padding:8px 10px;color:#4f5d72;font-size:12px;background:#f8faff;user-select:none}.toolbar-more>summary::-webkit-details-marker{display:none}.toolbar-more[open]>summary{background:#eaf1ff;color:#2878e8;border-color:#c8daf7}.toolbar-popover{position:fixed;z-index:100;top:calc(env(safe-area-inset-top) + 128px);right:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:min(570px,calc(100vw - 24px));padding:10px;background:#fff;border:1px solid #e3e8f0;border-radius:10px;box-shadow:0 10px 32px #24324a24}.toolbar-popover .tool,.toolbar-popover .action{height:38px;padding:5px 8px}.toolbar-popover .tool span,.toolbar-popover .action span{font-size:11px}.toolbar-popover .tool-group{display:flex;gap:3px}.toolbar-popover .separator{display:none}.toolbar-popover .size-label{padding:0 5px}.toolbar-popover .size-label input{width:68px}.toolbar-popover .finger-toggle{padding:5px 8px}.toolbar-more[open] .toolbar-popover{animation:toolbar-pop .12s ease-out}@keyframes toolbar-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.toolbar{overflow:visible;position:relative;z-index:5}.toolbar-more>summary{font-size:11px;padding:8px}.toolbar-popover{right:7px;top:calc(env(safe-area-inset-top) + 120px);max-height:min(60vh,420px);overflow-y:auto}.primary-tools .tool span{display:none}.primary-tools .tool{padding:5px 8px}.toolbar .size-label{gap:4px}.toolbar .size-label input{width:48px}.toolbar .colors{gap:5px}.toolbar .color{width:18px;height:18px}}

/* iPad portrait toolbar and safe viewport adjustments */
@media (min-width:701px) and (max-width:900px){
  .topbar{padding:0 12px;gap:8px}.room-control{gap:6px}.room-control input{width:92px}.peers{display:none}
  .toolbar{padding:0 7px;gap:6px}.primary-tools .tool span,.toolbar>.action span{display:none}.primary-tools .tool,.toolbar>.action{padding:5px 8px}
  .toolbar .colors{gap:5px}.toolbar .color{width:19px;height:19px}.toolbar>.size-label{gap:4px}.toolbar>.size-label input{width:58px}
  .toolbar-popover{top:142px;right:12px;max-height:60vh;overflow-y:auto}
}
@media(max-width:900px){
  html,body{height:100%;height:100dvh}.toolbar-popover{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .toolbar-popover button,.toolbar-more>summary{touch-action:manipulation}
}

/* Keep the board filling the remaining iPad and desktop viewport */
body>main{height:calc(100% - 62px);height:calc(100dvh - 62px);display:flex;flex-direction:column;min-height:0}
body>main>.workspace{flex:1 1 auto;height:auto;min-height:0}
body>main>footer{flex:0 0 20px}
@media(max-width:700px){body>main{height:calc(100% - 55px);height:calc(100dvh - 55px)}}


.language-picker{display:flex;align-items:center;gap:6px;color:#aab2bf;font-size:12px}.language-picker select{height:28px;border:1px solid #495465;border-radius:5px;background:#293342;color:#f0f4fa;padding:0 7px;font:12px -apple-system,sans-serif}.code-head{gap:8px}.code-head>div{min-width:0}

.algorithm-demo-dialog{width:min(1050px,96vw);height:min(780px,94dvh);max-width:none;padding:0;overflow:hidden;display:none;flex-direction:column}.algorithm-demo-dialog[open]{display:flex}.demo-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e6eaf0}.demo-head>div{display:flex;flex-direction:column;gap:4px}.demo-head b{font-size:15px}.demo-head span{font-size:11px;color:#8390a2}.demo-setup{display:flex;align-items:end;gap:10px;padding:10px 14px;border-bottom:1px solid #edf0f5}.demo-setup label{display:flex;flex-direction:column;gap:5px;color:#667286;font-size:11px}.demo-setup select,.demo-setup input,.demo-controls select{height:34px;border:1px solid #dce2eb;border-radius:6px;background:#fff;padding:0 9px;color:#354156}.demo-setup .demo-input-label{flex:1;min-width:130px}.demo-setup input{font:13px ui-monospace,monospace}.demo-setup button,.demo-controls button{height:34px;border:1px solid #dce2eb;border-radius:6px;background:#fff;padding:0 12px;color:#445064}.demo-setup button.primary{background:#2878e8;color:#fff;border-color:#2878e8}.demo-content{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:12px;padding:14px;min-height:0;flex:1}.demo-code,.demo-visual{min-width:0;min-height:250px;border:1px solid #e6eaf0;border-radius:8px;background:#fff;overflow:auto}.demo-code>b{display:block;padding:9px 12px;border-bottom:1px solid #edf0f5;color:#69768a;font-size:12px}.demo-code pre{margin:0;padding:12px;color:#4b586e;font:13px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}.demo-code-line{display:block;padding:0 5px;border-radius:4px}.demo-code-line.current{background:#fff2cd;color:#714b08;font-weight:700}.demo-visual{display:grid;place-items:center;background:linear-gradient(#fff,#fbfcfe)}#demoChart{width:100%;height:100%;min-height:280px}.demo-controls{display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid #e6eaf0}.demo-controls button{min-width:38px;padding:0 8px}.demo-controls #demoPlay{background:#2878e8;color:#fff;border-color:#2878e8;white-space:nowrap}.demo-controls input[type=range]{flex:1;min-width:60px;accent-color:#2878e8}.demo-controls label{display:flex;align-items:center;gap:5px;color:#6f7b8e;font-size:11px;white-space:nowrap}.demo-controls select{height:30px}.demo-description{min-height:40px;padding:8px 15px 12px;color:#4f5f77;font-size:13px;line-height:1.5}.algorithm-demo-dialog::backdrop{background:#17243c66}@media(max-width:700px){.algorithm-demo-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.demo-head{padding:8px 12px}.demo-setup{gap:6px;padding:8px;flex-wrap:wrap}.demo-setup label{font-size:10px}.demo-setup .demo-input-label{flex:1 1 100%;order:3}.demo-setup button{margin-left:auto}.demo-content{grid-template-columns:1fr;grid-template-rows:minmax(95px,auto) minmax(200px,1fr);gap:7px;padding:8px}.demo-code,.demo-visual{min-height:0}.demo-code pre{padding:5px 9px;font-size:11px;line-height:1.55}.demo-code>b{padding:5px 9px}.demo-controls{gap:4px;padding:7px}.demo-controls button{min-width:30px;padding:0 6px;font-size:12px}.demo-controls label{font-size:10px}.demo-description{padding:6px 10px 10px;font-size:12px;min-height:34px}}
.join-qr-dialog{width:min(360px,92vw);text-align:center;padding:16px 20px 20px}.join-qr-head{display:flex;align-items:center;justify-content:space-between}.join-qr-head b{font-size:16px}.join-qr-dialog p{margin:8px 0 12px;color:#667286;font-size:13px;line-height:1.5}.join-qr-dialog>label{display:block;text-align:left;color:#667286;font-size:12px;margin:0 0 5px}.join-qr-dialog select,.join-qr-dialog input{width:100%;height:36px;border:1px solid #dce2eb;border-radius:7px;background:#fff;padding:0 9px;color:#354156}.join-qr-dialog img{display:block;width:240px;height:240px;object-fit:contain;margin:12px auto}.join-qr-dialog #copyRoomLink{height:36px;border:0;border-radius:7px;padding:0 14px;background:#2878e8;color:#fff}.join-qr-dialog #qrNotice{display:block;min-height:18px;margin-top:8px;color:#738096;font-size:12px}.room-control #shareRoomBtn{font-size:17px;padding:6px 9px}
@media(max-width:700px){.room-control #shareRoomBtn{padding:6px 7px}.join-qr-dialog{max-height:94dvh;overflow:auto}.join-qr-dialog img{width:210px;height:210px;margin:8px auto}}
.ai-assistant-trigger{color:#9b6bd6!important;border-color:#66547d!important}.code-ai-dialog{width:min(780px,96vw);height:min(820px,94dvh);max-width:none;padding:0;overflow:hidden;display:none;flex-direction:column;background:#f8faff}.code-ai-dialog[open]{display:flex}.code-ai-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid #e5eaf2}.code-ai-head>div{display:flex;flex-direction:column;gap:4px}.code-ai-head b{font-size:15px;color:#263247}.code-ai-head span{font-size:11px;color:#738096}.code-ai-model{display:flex;align-items:end;justify-content:space-between;padding:10px 16px 4px}.code-ai-model label{display:flex;flex-direction:column;gap:5px;color:#667286;font-size:11px}.code-ai-model select{height:34px;border:1px solid #dce2eb;border-radius:6px;background:#fff;padding:0 9px;color:#354156}.code-ai-privacy{margin:4px 16px 8px;color:#8590a1;font-size:11px}.code-ai-messages{flex:1;min-height:0;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.code-ai-welcome{margin:auto;max-width:400px;color:#7a879a;text-align:center;font-size:14px;line-height:1.7}.code-ai-message{max-width:94%;padding:10px 12px;border:1px solid #e2e8f1;border-radius:10px;background:#fff;box-shadow:0 2px 6px #24324a08}.code-ai-message.user{align-self:flex-end;background:#edf4ff;border-color:#d9e7fb}.code-ai-message.assistant{align-self:flex-start}.code-ai-message>b{display:block;margin-bottom:5px;color:#718099;font-size:11px}.code-ai-message-text{white-space:pre-wrap;overflow-wrap:anywhere;color:#29364a;font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.code-ai-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.code-ai-actions button,.code-ai-presets button{border:1px solid #dce3ed;border-radius:6px;background:#fff;color:#536176;padding:5px 8px;font-size:11px}.code-ai-presets{display:flex;gap:7px;flex-wrap:wrap;padding:8px 16px}.code-ai-form{display:flex;align-items:end;gap:8px;padding:10px 16px;background:#fff;border-top:1px solid #e5eaf2}.code-ai-form textarea{flex:1;resize:vertical;min-height:60px;max-height:180px;border:1px solid #dce2eb;border-radius:7px;padding:9px 10px;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.code-ai-form button{height:38px;border:0;border-radius:7px;padding:0 16px;background:#2878e8;color:#fff}.code-ai-form button:disabled{opacity:.6;cursor:wait}@media(max-width:700px){.code-ai-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.code-ai-head,.code-ai-model,.code-ai-form{padding-left:10px;padding-right:10px}.code-ai-privacy{margin-left:10px;margin-right:10px}.code-ai-messages{padding:10px}.code-ai-presets{padding:7px 10px;gap:5px}.code-ai-message{max-width:100%}.code-head>div{gap:3px}.code-head .suggest-trigger{padding:4px 6px;font-size:10px}}

.code-ai-quickbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 9px;border-top:1px solid #edf0f5;background:#fbfcff}.code-ai-quickbar span{color:#8993a3;font-size:10px}.code-ai-quickbar button{height:25px;padding:0 8px;border:1px solid #e1d8ef;border-radius:6px;background:#faf7ff;color:#725496;font-size:10px;white-space:nowrap}.code-ai-quickbar button:active{background:#eee4fa}@media(max-width:700px){.code-ai-quickbar{gap:4px;padding:5px 6px}.code-ai-quickbar span{display:none}.code-ai-quickbar button{height:28px;padding:0 7px;font-size:10px}}
.code-ai-settings{margin:5px 16px 8px;padding:10px 12px;border:1px solid #e4e8f0;border-radius:8px;background:#fff}.code-ai-settings[hidden]{display:none}.code-ai-settings>label{display:block;margin-bottom:5px;color:#667286;font-size:11px}.code-ai-key-row{display:flex;gap:7px}.code-ai-key-row input{flex:1;min-width:0;height:34px;padding:0 9px;border:1px solid #dce2eb;border-radius:6px}.code-ai-settings p{margin:6px 0;color:#7a879a;font-size:11px}.code-ai-settings>button{font-size:11px}@media(max-width:700px){.code-ai-settings{margin-left:10px;margin-right:10px}}
.project-settings-dialog{width:min(520px,94vw);max-height:88dvh;padding:0;border:1px solid #e3e8f1;border-radius:14px;background:#f9fbff;color:#273449;box-shadow:0 18px 60px #18243b33}.project-settings-dialog::backdrop{background:#14203970}.settings-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:#fff;border-bottom:1px solid #e6eaf0}.settings-head>div{display:flex;flex-direction:column;gap:4px}.settings-head b{font-size:16px}.settings-head span{font-size:11px;color:#7d899b}.settings-section{display:grid;gap:9px;margin:16px;padding:15px;border:1px solid #e4e9f1;border-radius:10px;background:#fff}.settings-section h3{margin:0 0 3px;font-size:14px}.settings-section>label{color:#69768a;font-size:12px}.settings-section select{height:36px;border:1px solid #dce2eb;border-radius:7px;background:white;padding:0 9px}.settings-section .code-ai-key-row input{height:38px}.settings-section p,.settings-note{margin:0;color:#7b8798;font-size:11px;line-height:1.55}.settings-section>button{justify-self:start;font-size:12px}.settings-note{margin:0 18px 18px}@media(max-width:700px){.project-settings-dialog{width:100vw;max-width:none;max-height:94dvh;border-radius:14px}.settings-head{padding:12px}.settings-section{margin:10px;padding:12px}.settings-note{margin:0 12px 14px}.room-control #projectSettingsBtn{padding:5px 7px;font-size:11px}}
.code-ai-context{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 16px 3px;color:#637188;font-size:11px}.code-ai-context>span{min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-ai-context label{display:flex;align-items:center;gap:5px;white-space:nowrap}.code-ai-context input{accent-color:#2878e8}.code-ai-message-context{margin-top:5px;color:#8792a2;font-size:10px}.code-ai-message-context::before{content:'↳ ';color:#9b6bd6}@media(max-width:700px){.code-ai-context{padding-left:10px;padding-right:10px}.code-ai-context>span{max-width:100%;width:100%}}
.code-ai-message-text{white-space:normal}.code-ai-message-text p{margin:0 0 9px}.code-ai-message-text p:last-child{margin-bottom:0}.code-ai-message-text h1,.code-ai-message-text h2,.code-ai-message-text h3,.code-ai-message-text h4{margin:13px 0 7px;color:#27364d;line-height:1.35}.code-ai-message-text h1{font-size:18px}.code-ai-message-text h2{font-size:16px}.code-ai-message-text h3,.code-ai-message-text h4{font-size:14px}.code-ai-message-text ul,.code-ai-message-text ol{margin:5px 0 10px;padding-left:22px}.code-ai-message-text li{margin:3px 0}.code-ai-message-text blockquote{margin:8px 0;padding:5px 10px;border-left:3px solid #c9b3e4;background:#faf7fd;color:#5f6c81}.code-ai-message-text code{padding:1px 4px;border-radius:4px;background:#f0f2f6;color:#bd4560;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.code-ai-message-text pre{max-width:100%;margin:8px 0;padding:10px 12px;overflow:auto;border-radius:7px;background:#202a3a;color:#e8edf5;white-space:pre;tab-size:4}.code-ai-message-text pre code{padding:0;background:transparent;color:inherit;white-space:pre}.code-ai-message-text table{display:block;max-width:100%;overflow:auto;border-collapse:collapse;font-size:12px}.code-ai-message-text th,.code-ai-message-text td{padding:5px 8px;border:1px solid #dfe4ed}.code-ai-message-text th{background:#f0f3f8}.code-ai-message-text a{color:#2878e8;text-decoration:underline;overflow-wrap:anywhere}.code-ai-message-text hr{border:0;border-top:1px solid #e3e8f0;margin:10px 0}

/* Secondary tools use consistent icons and named groups. */
@media(max-width:700px){.toolbar-popover{display:grid;grid-template-columns:1fr;gap:4px}.toolbar-section{padding:8px 4px;border-right:0;border-bottom:1px solid #e9edf3}.toolbar-section:last-child{border-bottom:0}.toolbar-popover .tool-group{width:100%}.toolbar-popover .object-size-label{max-width:100%}}
@media(max-width:700px){.toolbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}}

/* Grouped secondary tools with consistent icon sizing. */
.toolbar-more>summary{display:flex;align-items:center;gap:7px}
.toolbar-more>summary svg{width:17px;height:17px;fill:currentColor;stroke:none}
.toolbar-popover{width:min(780px,calc(100vw - 24px));align-items:stretch;gap:0}
.toolbar-section{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:4px 12px;min-width:0;border-right:1px solid #e9edf3}
.toolbar-section:last-child{border-right:0}
.toolbar-section>b{font-size:10px;font-weight:600;letter-spacing:.04em;color:#98a2b2}
.toolbar-popover .tool-group{display:flex;flex-wrap:wrap;gap:3px}
.toolbar-popover .tool,.toolbar-popover .action{min-width:62px;flex-direction:column;gap:3px;height:52px;padding:5px 6px;color:#59677c}
.toolbar-popover .tool svg,.toolbar-popover .action svg{width:20px;height:20px}
.toolbar-popover .tool:hover,.toolbar-popover .action:hover{background:#f0f4fa;color:#2878e8}
.toolbar-popover .object-size-label{width:100%;justify-content:space-between;font-size:10px}
.toolbar-popover .object-size-label input{flex:1;width:75px}
@media(max-width:700px){.toolbar-popover{display:grid;grid-template-columns:1fr;gap:4px}.toolbar-section{padding:8px 4px;border-right:0;border-bottom:1px solid #e9edf3}.toolbar-section:last-child{border-bottom:0}.toolbar-popover .tool-group{width:100%}.toolbar-popover .object-size-label{max-width:100%}}
@media(max-width:700px){.toolbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}}
@media(max-width:900px){.toolbar>.action.ai-global span,.toolbar>.action.code-global span{display:inline;font-size:10px}}
@media(max-width:700px){body.code-open .toolbar{overflow-x:auto;overflow-y:hidden}.code-head .ai-assistant-trigger{padding:4px 6px;font-size:10px}}
body.code-open .toolbar{height:52px;margin:5px 8px 6px;padding:0 6px;gap:4px}
body.code-open .toolbar .tool,body.code-open .toolbar .action{height:38px;min-width:44px;padding:4px 5px}
body.code-open .primary-tools .tool span,body.code-open .toolbar>.action:not(.ai-global):not(.code-global) span{display:none}
body.code-open .toolbar .ai-global,body.code-open .toolbar .code-global{min-width:78px}
body.code-open .toolbar>.size-label{gap:3px;font-size:10px}
body.code-open .toolbar>.size-label input{width:46px}
.board-ai-preview-dialog{width:min(620px,94vw);max-height:88dvh;padding:0;overflow:hidden;display:none;flex-direction:column}.board-ai-preview-dialog[open]{display:flex}.board-ai-preview-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #e9edf3}.board-ai-preview-head>div{display:flex;flex-direction:column;gap:4px}.board-ai-preview-head b{font-size:16px;color:#27364d}.board-ai-preview-head span{font-size:12px;color:#7b8798}.board-ai-preview-note{margin:0;padding:10px 18px;color:#788496;font-size:12px;background:#f8f9fb}.board-ai-preview-list{padding:10px 16px;overflow:auto;display:grid;gap:8px}.board-ai-preview-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;padding:10px 12px;border:1px solid #e7ebf2;border-radius:8px}.board-ai-preview-type{font-size:10px;padding:3px 6px;border-radius:5px;background:#edf3ff;color:#2878e8;white-space:nowrap}.board-ai-preview-row>b{font-size:13px;color:#344056}.board-ai-preview-row>p{grid-column:1/-1;margin:0;color:#687589;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:90px;overflow:auto}.board-ai-preview-actions{padding:12px 16px;border-top:1px solid #e9edf3;display:flex;justify-content:flex-end}.board-ai-preview-actions button{border:0;border-radius:7px;background:#2878e8;color:white;padding:9px 14px;font-size:13px}
.object-editor-dialog{width:min(620px,94vw);max-height:92dvh;padding:0;overflow:hidden}.object-editor-dialog form{display:flex;flex-direction:column;gap:13px;max-height:92dvh;overflow:auto;padding:18px}.object-editor-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e9edf3;padding-bottom:12px}.object-editor-head h3{margin:0;font-size:18px;color:#253247}.object-editor-head p{margin:5px 0 0;color:#7b8798;font-size:12px}.object-editor-head>button{font-size:18px;padding:5px 10px}.object-editor-dialog form>label{display:grid;gap:6px;color:#4b586c;font-size:12px}.object-editor-dialog label small{font-size:10px;color:#8490a1}.object-editor-dialog input:not([type=range]):not([type=color]),.object-editor-dialog textarea{width:100%;border:1px solid #dfe5ed;border-radius:8px;padding:9px 10px;color:#263247;font-family:inherit;font-size:14px;line-height:1.55;outline:none}.object-editor-dialog input:focus,.object-editor-dialog textarea:focus{border-color:#7ea9e9;box-shadow:0 0 0 3px #2878e81a}.object-editor-dialog textarea{resize:vertical;min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.object-editor-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:10px}.object-editor-grid label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;color:#637188;font-size:11px}.object-editor-grid label input[type=range]{grid-column:1/-1;width:100%;accent-color:#2878e8}.object-editor-grid input[type=color]{width:100%;height:34px;border:1px solid #e0e5ed;border-radius:7px;padding:3px;background:white}.object-editor-check{display:flex;align-items:center;gap:7px;color:#59677c;font-size:12px}.object-editor-check input{accent-color:#2878e8}.object-editor-preview-label{font-size:11px;color:#8792a2}.object-editor-preview{min-height:88px;max-height:180px;overflow:auto;padding:12px 14px;border:1px solid #e5eaf1;border-left:4px solid #3978db;border-radius:9px;color:#263247;background:#f4f7fc;line-height:1.5}.object-editor-preview p{margin:4px 0}.object-editor-preview strong{display:block;margin:2px 0 7px}.object-editor-preview .preview-list{padding-left:8px}.object-editor-preview .preview-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.object-editor-preview hr{border:0;border-top:1px solid #d5dce8}.object-editor-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px;border-top:1px solid #e9edf3}.object-editor-actions .primary{border:0;border-radius:7px;background:#2878e8;color:#fff;padding:9px 14px}.object-editor-actions .quiet{padding:8px 13px}.object-editor-grid label[hidden],.object-editor-dialog [hidden]{display:none!important}@media(max-width:600px){.object-editor-grid{grid-template-columns:1fr 1fr}.object-editor-dialog form{padding:14px;gap:10px}}

.object-editor-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:12px}.object-editor-layout label{display:grid;gap:6px;color:#637188;font-size:11px}.object-editor-layout select{height:36px;border:1px solid #dfe5ed;border-radius:7px;background:#fff;color:#344056;padding:0 9px}.object-editor-layout input[type=range]{width:100%;accent-color:#2878e8}.object-editor-layout output{font-variant-numeric:tabular-nums;color:#344056}.object-editor-layout label:last-child{grid-template-columns:1fr auto}.object-editor-layout label:last-child input{grid-column:1/-1;grid-row:2}.object-editor-layout label:last-child output{grid-column:2;grid-row:1}@media(max-width:600px){.object-editor-layout{grid-template-columns:1fr}}
.object-editor-layout{padding:11px 12px;background:#f7f9fc;border:1px solid #e7ebf2;border-radius:9px}.object-editor-preview{transition:background-color .15s,border-color .15s,color .15s}.object-editor-preview .preview-heading{font-size:1.18em}.object-editor-preview .preview-subheading{font-size:1.08em}.object-editor-preview .preview-code{padding:2px 5px;border-radius:4px;background:#202b3b;color:#e6edf7}.object-editor-preview .preview-quote{padding-left:10px;color:#667790}.object-editor-preview .preview-list{padding:2px 0 2px 8px}

/* Simpler text block creation and typography */
.object-editor-dialog textarea{resize:vertical;min-height:138px;font-family:inherit;font-size:16px;line-height:1.65}.text-style-details{border:1px solid #e7ebf2;border-radius:9px;background:#fafbfd}.text-style-details>summary{cursor:pointer;padding:10px 12px;color:#59677c;font-size:12px;user-select:none}.text-style-details[open]>summary{border-bottom:1px solid #e7ebf2;color:#2878e8}.text-style-details .object-editor-layout,.text-style-details .object-editor-grid,.text-style-details>.object-editor-check,.text-style-details>.object-editor-preview-label,.text-style-details>.object-editor-preview{margin:10px 12px}.text-style-details .object-editor-layout{margin-top:0}.text-style-details .object-editor-grid{margin-bottom:12px}

/* Modern, compact text editor dialog */
.object-editor-dialog{width:min(540px,calc(100vw - 28px));max-height:min(82dvh,760px);border:1px solid #e6eaf0;border-radius:18px;padding:0;background:rgba(255,255,255,.98);box-shadow:0 24px 80px rgba(22,35,58,.24);color:#263247}.object-editor-dialog::backdrop{background:rgba(20,30,48,.34);backdrop-filter:blur(5px)}.object-editor-dialog form{gap:15px;max-height:min(82dvh,760px);padding:22px}.object-editor-head{align-items:center;padding-bottom:16px}.object-editor-head h3{font-size:20px;letter-spacing:-.02em}.object-editor-head p{font-size:12px;line-height:1.5}.object-editor-head>button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:#f1f4f8;color:#637188;font-size:19px}.object-editor-head>button:hover{background:#e8edf4;color:#27364d}.object-editor-dialog form>label{font-size:13px}.object-editor-dialog textarea{min-height:160px;border-radius:12px;background:#fbfcfe;font-size:16px;line-height:1.7;padding:13px 14px}.text-style-details{border-color:#e9edf3;border-radius:12px}.text-style-details>summary{padding:11px 13px;font-weight:600}.object-editor-actions{position:sticky;bottom:-22px;margin:0 -22px -22px;padding:13px 22px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid #edf0f4}.object-editor-actions button{min-width:84px;border-radius:10px;padding:10px 15px}.object-editor-actions .primary{background:linear-gradient(135deg,#347fea,#2867d9);box-shadow:0 4px 12px #2878e833}.object-editor-actions .quiet{border:1px solid #e1e6ee;background:#fff;color:#59677c}.object-editor-actions .quiet:hover{background:#f6f8fb}.object-editor-preview{border-radius:11px}.object-editor-dialog [hidden]{display:none!important}@media(max-width:600px){.object-editor-dialog{width:calc(100vw - 20px);max-height:88dvh;border-radius:16px}.object-editor-dialog form{max-height:88dvh;padding:17px}.object-editor-actions{bottom:-17px;margin:0 -17px -17px;padding:11px 17px 15px}}

/* Clear Markdown preview and compact styling controls */
.object-editor-kicker{display:inline-flex;margin-bottom:7px;padding:4px 8px;border-radius:999px;background:#edf4ff;color:#3978db;font-size:10px;font-weight:700;letter-spacing:.04em}.object-editor-head>div{min-width:0}.object-editor-head p{max-width:410px}.object-editor-content{gap:9px!important}.object-editor-content small{color:#8591a2;font-size:11px}.text-style-details{overflow:hidden;background:#fafbfd}.text-style-details>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}.text-style-details>summary::-webkit-details-marker{display:none}.text-style-details>summary::after{content:'＋';color:#8793a4;font-size:14px}.text-style-details[open]>summary::after{content:'−'}.style-summary-hint{margin-left:auto;color:#929eae;font-size:11px;font-weight:400}.object-editor-layout{grid-template-columns:1fr;padding:10px 12px}.object-editor-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:end}.object-editor-grid label:first-child{grid-column:1/-1;grid-template-columns:1fr auto}.object-editor-grid label:first-child input{grid-column:1/-1;grid-row:2}.object-editor-preview{width:100%!important;min-height:54px;max-height:140px;padding:12px 14px;overflow-wrap:anywhere}.object-editor-preview p{margin:5px 0;line-height:1.55}.object-editor-preview h3,.object-editor-preview h4{margin:4px 0 7px;line-height:1.3}.object-editor-preview h3{font-size:1.28em}.object-editor-preview h4{font-size:1.1em}.object-editor-preview .preview-list{display:flex;gap:4px;padding-left:8px}.object-editor-preview .preview-marker{color:#7186a4;font-weight:650}.object-editor-preview .preview-code{white-space:pre-wrap;padding:7px 9px;border-radius:7px;background:#e9eef6;color:#344056;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.object-editor-preview code{padding:2px 4px;border-radius:4px;background:#e6ecf4;color:#355070;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.object-editor-preview blockquote{margin:6px 0;padding:4px 0 4px 10px;border-left:3px solid #8a9bb5;color:#667790}.object-editor-preview hr{margin:7px 0}.object-editor-preview.preview-dark{color:#e6edf7!important}.object-editor-preview.preview-dark .preview-code{background:#172231;color:#e6edf7}.object-editor-dialog select{min-height:40px;border-radius:9px}

/* Text editor Markdown and formula preview */
.variant-picker,.variant-options,.variant-option{display:none!important}.variant-select-label{display:grid;gap:7px;color:#59677c;font-size:12px}.variant-select-label select{width:100%;min-height:42px;border:1px solid #dfe5ed;border-radius:10px;background:#fff;padding:0 12px;color:#344056;font:inherit}.markdown-live-label{margin-top:8px;color:#8692a3;font-size:11px}.markdown-live-preview{min-height:36px;max-height:190px;overflow:auto;padding:12px 14px;border:1px solid #e4e9f0;border-radius:11px;background:#f7f9fc;color:#263247;font-size:14px;line-height:1.55}.markdown-live-preview:empty::before{content:'格式化内容将在这里预览';color:#a0aab8}.markdown-live-preview h3,.markdown-live-preview h4{margin:3px 0 8px;line-height:1.3}.markdown-live-preview h3{font-size:1.35em}.markdown-live-preview h4{font-size:1.15em}.markdown-live-preview p{margin:5px 0}.markdown-live-preview .preview-list{padding-left:10px}.markdown-live-preview .preview-marker{margin-right:5px;color:#75859c}.markdown-live-preview blockquote{margin:6px 0;padding:4px 0 4px 10px;border-left:3px solid #8a9bb5;color:#62718a}.markdown-live-preview pre{white-space:pre-wrap;margin:6px 0;padding:8px 10px;border-radius:8px;background:#e9eef6;font: .92em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown-live-preview code{padding:2px 4px;border-radius:4px;background:#e6ecf4;color:#355070;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.markdown-live-preview hr{border:0;border-top:1px solid #d6deea}.markdown-live-preview .preview-table-row{display:flex;border:1px solid #dfe5ed}.markdown-live-preview .preview-table-row span{flex:1;padding:4px 6px;border-right:1px solid #dfe5ed}.markdown-live-preview .preview-table-row:first-child{font-weight:650;background:#eef3fa}.markdown-live-preview.preview-dark{background:#202b3b!important;color:#e6edf7!important}.markdown-live-preview.preview-dark pre{background:#172231;color:#e6edf7}
.object-editor-actions .object-delete-action{margin-right:auto;border:1px solid #f2d5d5;background:#fff7f7;color:#bd4545}.object-editor-actions .object-delete-action:hover{background:#ffeded}

.board-ai-preview-warning{grid-column:1/-1;margin:0;padding:9px 11px;border-radius:8px;background:#fff5e6;color:#8a5610;font-size:12px;line-height:1.5}.board-ai-preview-note{margin:0;padding:8px 10px;border-radius:8px;background:#f3f6fb;color:#586982;font-size:12px;line-height:1.5}

.board-ai-preview-page{display:grid;gap:8px;padding:10px;border:1px solid #e6ebf2;border-radius:10px;background:#fbfcfe}.board-ai-preview-page+ .board-ai-preview-page{margin-top:10px}.board-ai-preview-page>h4{margin:0;color:#2e4059;font-size:13px;font-weight:700}.board-ai-preview-page .board-ai-preview-row{background:#fff}
.board-ai-preview-layout{grid-column:1/-1;color:#8995a6;font-size:10px}

/* Keep the text editor inside the visible viewport, even with a long preview. */
.object-editor-dialog{max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);overflow:hidden;overscroll-behavior:contain}
.object-editor-dialog form{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.object-editor-head{position:sticky;top:-22px;z-index:3;flex:none;margin:-22px -22px 0;padding:22px 22px 16px;background:rgba(255,255,255,.98)}
.object-editor-actions{z-index:3;flex:none;bottom:-22px}
@media(max-width:600px){.object-editor-dialog{max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px)}.object-editor-dialog form{max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);padding:17px}.object-editor-head{top:-17px;margin:-17px -17px 0;padding:17px 17px 12px}.object-editor-actions{bottom:-17px}}


/* Keep all text-card appearance controls reachable in a short editor dialog. */
.text-style-details[open]{max-height:min(44dvh,360px);overflow:hidden;display:flex;flex-direction:column;flex:none}
.text-style-details[open]>summary{position:sticky;top:0;z-index:2;flex:none;background:#fafbfd}
.text-style-details[open]>.variant-select-label,.text-style-details[open]>.object-editor-grid,.text-style-details[open]>.object-editor-check,.text-style-details[open]>.object-editor-preview-label,.text-style-details[open]>.object-editor-preview{flex:none}
.text-style-details[open]{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
@media(max-width:600px){.text-style-details[open]{max-height:min(38dvh,280px)}}


/* Clear hierarchy for text card appearance controls. */
.text-style-details{padding:0 12px 12px;background:#f8fafd;border:1px solid #e6ebf2;border-radius:14px}
.text-style-details>summary{margin:0 -12px;padding:13px 14px;color:#34445c;font-size:13px;font-weight:650}
.text-style-details[open]>summary{margin-bottom:12px;border-bottom:1px solid #e8edf4}
.text-style-details .variant-select-label{margin:0 0 12px;padding:0 1px;gap:6px;color:#718096;font-size:11px}
.text-style-details .variant-select-label select,.text-style-controls select{min-height:40px;border:1px solid #dfe6ef;border-radius:10px;background:#fff;padding:0 11px;color:#344056;font-size:13px}
.text-style-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0!important}
.text-style-controls>label{display:grid;grid-column:auto!important;grid-template-columns:1fr!important;align-content:start;gap:7px;padding:10px 11px;border:1px solid #e7ecf3;border-radius:11px;background:#fff;color:#69778b;font-size:11px}
.text-style-controls>label input{grid-column:auto!important;grid-row:auto!important}
.font-size-input{display:flex;align-items:center;gap:9px;min-height:40px}
.font-size-input input[type=range]{flex:1;min-width:0;accent-color:#347fea}
.font-size-input output{min-width:34px;padding:5px 7px;border-radius:7px;background:#f0f4fa;color:#344056;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.text-style-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:10px 0 0!important}
.text-style-colors>label{display:grid;grid-template-columns:1fr;gap:7px;padding:9px 10px;border:1px solid #e7ecf3;border-radius:11px;background:#fff;color:#69778b;font-size:10px}
.text-style-colors input[type=color]{width:100%;height:34px;border:1px solid #e0e5ed;border-radius:8px;padding:3px;background:#fff}
.text-style-details>.object-editor-check{margin:10px 0 0;padding:10px 11px;border:1px solid #e7ecf3;border-radius:10px;background:#fff}
.text-style-details>.object-editor-preview-label{margin:12px 1px 6px;color:#7b8798;font-size:11px;font-weight:600}
.text-style-details>.object-editor-preview{margin:0;max-height:130px;min-height:64px}
@media(max-width:520px){.text-style-details{padding:0 10px 10px}.text-style-details>summary{margin:0 -10px}.text-style-controls{gap:8px}.text-style-controls>label{padding:9px}.text-style-colors{gap:6px}.text-style-colors>label{padding:8px 7px;font-size:9px}.text-style-details[open]{max-height:min(42dvh,330px)}}
@media(max-width:360px){.text-style-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.text-style-colors>label:last-child{grid-column:1/-1}}


/* Keep the editor's style controls in the dialog's single scroll flow. */
.object-editor-dialog form{gap:11px}
.object-editor-dialog .object-editor-content textarea{min-height:108px;max-height:24dvh}
.markdown-live-preview{min-height:30px;max-height:92px;padding:9px 11px;font-size:13px}
.text-style-details[open]{display:block;max-height:none!important;overflow:visible!important}
.text-style-details[open]>summary{position:static}
.text-style-details[open]>.variant-select-label,.text-style-details[open]>.object-editor-grid,.text-style-details[open]>.object-editor-check,.text-style-details[open]>.object-editor-preview-label,.text-style-details[open]>.object-editor-preview{flex:none}
@media(max-width:600px){.object-editor-dialog form{gap:9px}.object-editor-dialog .object-editor-content textarea{min-height:88px;max-height:20dvh}.markdown-live-preview{max-height:72px;padding:8px 10px}}

.text-style-details>.object-editor-check{display:flex!important;align-items:center;gap:9px;min-height:40px}
.text-style-details>.object-editor-check input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;padding:0;flex:none;accent-color:#347fea}
.text-style-details>.object-editor-preview{min-height:58px;padding:8px 12px;line-height:1.38}


/* Dedicated editors for each whiteboard object type. */
.mini-editor-dialog{width:min(440px,calc(100vw - 28px));max-height:88dvh;padding:0;border:1px solid #e4eaf2;border-radius:16px;background:#fff;box-shadow:0 20px 65px #17243c38;color:#263247}
.mini-editor-dialog::backdrop{background:#17243c66;backdrop-filter:blur(4px)}
.mini-editor-dialog form{display:grid;gap:14px;padding:20px}
.mini-editor-dialog h3{margin:0;padding-bottom:12px;border-bottom:1px solid #edf0f4;font-size:18px}
.mini-editor-dialog label{display:grid;gap:7px;color:#59677c;font-size:12px}
.mini-editor-dialog input:not([type=color]),.mini-editor-dialog select,.mini-editor-dialog textarea{width:100%;min-height:40px;border:1px solid #dfe5ed;border-radius:9px;padding:9px 11px;background:#fff;color:#263247;font:14px/1.5 inherit}
.mini-editor-dialog input[type=color]{width:100%;height:38px;border:1px solid #dfe5ed;border-radius:9px;padding:3px;background:#fff}
.mini-editor-dialog textarea{resize:vertical;min-height:86px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mini-editor-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid #edf0f4}
.mini-editor-actions button{min-width:78px;border:1px solid #e0e6ef;border-radius:9px;padding:9px 13px;background:#fff;color:#526078}
.mini-editor-actions button.primary{border-color:#347fea;background:#347fea;color:#fff}
.math-edit-preview,.diagram-edit-dialog .math-edit-preview{max-height:190px;overflow:auto;padding:12px;border:1px solid #e7ebf1;border-radius:10px;background:#f8fafd;text-align:center}
.diagram-edit-dialog{width:min(640px,calc(100vw - 28px))}
.diagram-edit-dialog textarea{min-height:220px}
.math-edit-preview mjx-container{font-size:28px!important}.diagram-edit-dialog .math-edit-preview svg{max-width:100%;height:auto}

.connection-hint{position:absolute;z-index:4;left:50%;top:14px;transform:translateX(-50%);padding:9px 14px;border:1px solid #c8d9f1;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(32,53,84,.12);color:#345273;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;pointer-events:none;max-width:calc(100% - 28px);text-align:center;white-space:normal}.connection-hint[hidden]{display:none}

.math-size-control{display:flex;align-items:center;gap:10px}.math-size-control input{flex:1;min-width:120px}.math-size-control output{min-width:2.5em;text-align:right;font-variant-numeric:tabular-nums}

.code-ai-preset-hint{margin:0;padding:0 16px 5px;color:#8792a2;font-size:10px;line-height:1.4}@media(max-width:700px){.code-ai-preset-hint{padding-left:10px;padding-right:10px}}

.markdown-live-preview .preview-math-block,.object-editor-preview .preview-math-block{text-align:center;overflow-x:auto;padding:4px 0}.markdown-live-preview .preview-code,.object-editor-preview .preview-code{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:7px;padding:8px 10px;background:#e9eef6;font: .92em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown-live-preview.preview-dark .preview-code,.object-editor-preview.preview-dark .preview-code{background:#172231;color:#e6edf7}

body.projector .pagebar{display:flex;bottom:max(16px,env(safe-area-inset-bottom));z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);box-shadow:0 3px 18px #17243c30;padding:0 8px;height:44px;gap:8px;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}body.projector.projector-controls-visible .pagebar{opacity:1;transform:translate(-50%,0);pointer-events:auto}body.projector .pagebar button{width:34px;height:34px;font-size:21px}body.projector .pagebar span{font-size:14px;min-width:64px}.pagebar #deletePage{border-left:1px solid #e9ecf1;border-radius:0;color:#657083}

.preview-code .code-token-keyword,.preview-dark .code-token-keyword{color:#c792ea;font-weight:600}.preview-code .code-token-type{color:#82aaff}.preview-code .code-token-string{color:#7cae4a}.preview-code .code-token-comment{color:#8794a6}.preview-code .code-token-number{color:#d76b4a}.preview-code .code-token-preprocessor{color:#1683a8}.preview-code .code-token-function{color:#3d76bf}
.preview-dark .preview-code .code-token-keyword{color:#c792ea}.preview-dark .preview-code .code-token-type,.preview-dark .preview-code .code-token-function{color:#82aaff}.preview-dark .preview-code .code-token-string{color:#c3e88d}.preview-dark .preview-code .code-token-comment{color:#8292a8}.preview-dark .preview-code .code-token-number{color:#f78c6c}.preview-dark .preview-code .code-token-preprocessor{color:#89ddff}

.pagebar #importPdfBtn{width:auto;min-width:48px;display:flex;align-items:center;gap:4px;font-size:16px;border-left:1px solid #e9ecf1;border-radius:0}.pagebar #clearPageBackground{border-left:1px solid #e9ecf1;border-radius:0;color:#657083}.pagebar button:disabled{opacity:.65;cursor:progress}

/* GSAP brand intro and room-level read-only access */
.app-splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at 50% 42%,#f8fbff 0%,#eaf1fb 47%,#dfe8f5 100%);color:#23334b}.splash-mark{position:relative;width:112px;height:112px;display:grid;place-items:center;margin-bottom:10px}.splash-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px #334a6b25)}.splash-orbit{position:absolute;inset:-9px;border:1px solid #2878e84a;border-radius:50%;transform:rotate(-8deg) scaleX(.96)}.splash-orbit:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#e6a43b;top:11px;left:17px;box-shadow:0 0 0 5px #e6a43b22}.splash-title{font-size:clamp(21px,3vw,29px);font-weight:750;letter-spacing:.12em}.splash-caption{font-size:12px;letter-spacing:.26em;color:#72829a}.splash-rule{width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2878e8,#e5aa4d);margin-top:10px;transform-origin:left center}.splash-meta{position:absolute;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:8px;color:#7d8aa0;font-size:11px;letter-spacing:.04em;text-align:center}.splash-meta span{color:#b0bbca}@media(max-width:520px){.splash-meta{font-size:10px;bottom:calc(14px + env(safe-area-inset-bottom))}}.room-access-button{display:flex;align-items:center;gap:6px}.room-access-button.editing{color:#168459;border-color:#a8dfc7;background:#f1fbf6}.room-access-button .access-icon{font-size:14px;color:#d18b1c}.room-access-button.editing .access-icon{color:#168459}.room-access-dialog{width:min(470px,calc(100vw - 28px));padding:22px}.room-access-dialog .settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.room-access-dialog .settings-head>div{display:grid;gap:5px}.room-access-dialog .settings-head b{font-size:18px}.room-access-dialog .settings-head span{font-size:12px;color:#8791a1}.room-access-dialog .settings-section{margin-top:20px}.room-password-row{display:flex;align-items:center;gap:8px;margin-top:7px}.room-password-row input{flex:1;min-width:0}.room-access-dialog #roomAccessHint{min-height:18px;color:#778397;font-size:12px}.room-access-dialog #roomAccessHint.error{color:#b43f45}.room-access-dialog #roomAccessHint.success{color:#168459}.room-password-admin{margin-top:13px;padding-top:13px;border-top:1px solid #e9edf3}.room-password-admin summary{cursor:pointer;color:#4c5a6f;font-size:13px;font-weight:600}.room-password-admin p{color:#7d8797;font-size:12px;line-height:1.6}.room-password-admin>button{margin-top:12px}.app-splash[hidden]{display:none}
body.readonly .toolbar{opacity:.48;pointer-events:none;filter:grayscale(.25)}body.readonly .pagebar button:not(#prevPage):not(#nextPage):not(#pageInfo){opacity:.42;pointer-events:none}body.readonly .board-wrap canvas{pointer-events:none}body.readonly .code-head button,body.readonly .code-tabs button,body.readonly .code-ai-quickbar button,body.readonly .language-picker,body.readonly #closeCode{opacity:.45;pointer-events:none}body.readonly .code-editor .cm-content{cursor:default}
@media(max-width:700px){.room-access-button{padding:7px 8px}.room-access-button #roomAccessLabel{font-size:10px}.splash-mark{width:94px;height:94px}}
@media(prefers-reduced-motion:reduce){.app-splash{transition:opacity .15s linear}}

.splash-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}.splash-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px #5893e877,0 0 1px 1px #2878e8}.splash-star:nth-child(3n){width:4px;height:4px;box-shadow:0 0 10px 3px #e6b85c80,0 0 1px #d99123}.splash-star:nth-child(4n){width:2px;height:2px}

.startup-sound-toggle{position:absolute;top:max(22px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));z-index:2;border:1px solid #ffffffb8;border-radius:999px;padding:8px 13px;background:#ffffff82;color:#586a83;font-size:12px;backdrop-filter:blur(10px);box-shadow:0 4px 18px #37547a12;transition:background .2s,color .2s,transform .2s}.startup-sound-toggle:hover{background:#fff;color:#2878e8;transform:translateY(-1px)}.startup-sound-toggle[aria-pressed="true"]{color:#2878e8;border-color:#9ab9e5;background:#ffffffc9}
.pagebar #pageInfo{width:auto;min-width:64px;max-width:160px;padding:0 7px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#44536a}.pagebar #insertPage{width:auto;min-width:48px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:17px;border-left:1px solid #e9ecf1;border-radius:0}.pagebar #addPage{min-width:50px}.page-quick-list{position:absolute;z-index:22;left:50%;bottom:64px;transform:translateX(-50%);width:min(260px,calc(100% - 24px));max-height:min(55vh,360px);overflow:auto;padding:6px;display:flex;flex-direction:column;gap:3px;border:1px solid #dfe6f0;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 12px 36px #1d2b4430;backdrop-filter:blur(14px)}.page-quick-list[hidden]{display:none}.page-quick-item{border:0;border-radius:7px;background:transparent;text-align:left;padding:9px 11px;color:#536176;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-quick-item:hover{background:#f1f5fb}.page-quick-item.active{background:#eaf2ff;color:#2169c7;font-weight:650}
@media(max-width:700px){.page-quick-list{bottom:55px;width:min(230px,calc(100% - 14px))}.pagebar #pageInfo{min-width:54px;padding:0 3px;font-size:12px}.pagebar #insertPage,.pagebar #addPage{min-width:40px}.pagebar .page-add-label{font-size:10px}}

.pagebar{max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none}.pagebar::-webkit-scrollbar{display:none}.pagebar>*{flex-shrink:0}

/* Classroom quiz objects and answer panels */
.quiz-dialog{width:min(560px,94vw);max-height:min(88vh,820px);overflow:auto;padding:22px 24px}.quiz-dialog form,.quiz-dialog{display:grid;gap:15px}.quiz-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.quiz-dialog-head b{display:block;font-size:18px;color:#202b3b}.quiz-dialog-head span{display:block;margin-top:4px;color:#8993a2;font-size:12px}.quiz-dialog label{display:grid;gap:7px;color:#596579;font-size:13px}.quiz-dialog textarea,.quiz-dialog input[type=text],.quiz-dialog select{width:100%;border:1px solid #dce3ed;border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;color:#243247;resize:vertical}.quiz-dialog textarea:focus,.quiz-dialog input:focus,.quiz-dialog select:focus{outline:2px solid #d8e6ff;border-color:#7da9e8}.quiz-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:5px;border-top:1px solid #edf0f5}.quiz-dialog-actions .danger{margin-right:auto}.quiz-question-card{border:1px solid #e1e8f2;border-radius:12px;background:#f8faff;padding:15px}.quiz-question-card h3{margin:0 0 10px;font-size:16px;line-height:1.55}.quiz-question-card p{margin:0 0 12px;color:#6c788b;font-size:12px}.quiz-answer-option{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:9px!important;padding:10px;border:1px solid #e4e9f0;border-radius:8px;background:#fff;color:#2c3a50!important;font-size:14px!important}.quiz-answer-option input{width:17px;height:17px;accent-color:#3978db}.quiz-name-row{display:grid;grid-template-columns:1fr auto;gap:8px}.quiz-name-row input{min-width:0}.quiz-submit-status{min-height:20px;color:#6b788c;font-size:13px}.quiz-submit-status.success{color:#16845e}.quiz-submit-status.error{color:#c3444e}.quiz-result-summary{display:flex;gap:12px;flex-wrap:wrap;padding:12px;border-radius:9px;background:#f1f5fb;color:#52627a;font-size:13px}.quiz-result-list{display:grid;gap:7px;max-height:48vh;overflow:auto}.quiz-result-row{display:grid;grid-template-columns:minmax(70px,.6fr) minmax(0,2fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid #e8edf4;border-radius:8px;font-size:13px}.quiz-result-row strong{color:#26364d}.quiz-result-row time{color:#9aa3b1;font-size:11px;white-space:nowrap}.quiz-correct-row[hidden],#quizOptionEditor[hidden]{display:none}
#answerQuestionsBtn,#quizResultsBtn{width:auto;min-width:48px;display:flex;align-items:center;gap:4px;font-size:16px;border-left:1px solid #e9ecf1;border-radius:0}body.readonly .pagebar button:not(#prevPage):not(#nextPage):not(#pageInfo):not(#answerQuestionsBtn){opacity:.42;pointer-events:none}body.readonly .pagebar #answerQuestionsBtn{opacity:1;pointer-events:auto}
@media(max-width:700px){.quiz-dialog{padding:18px 16px}.quiz-result-row{grid-template-columns:1fr auto}.quiz-result-row span{grid-column:1/-1}.quiz-result-row time{grid-column:2;grid-row:1}}
.answer-questions-fab{position:absolute;z-index:24;right:18px;bottom:16px;display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid #2c70cf;border-radius:24px;background:#3978db;color:#fff;font-size:15px;font-weight:650;box-shadow:0 5px 18px #1e4e9560;cursor:pointer;pointer-events:auto;touch-action:manipulation}.answer-questions-fab:hover{background:#2868c5;transform:translateY(-1px)}.answer-questions-fab:active{transform:scale(.97)}body.projector .answer-questions-fab{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:30}body:not(.readonly) .answer-questions-fab{display:none}body.readonly .answer-questions-fab{display:flex}@media(max-width:700px){.answer-questions-fab{right:12px;bottom:14px;height:42px;padding:0 16px;font-size:14px}body.projector .answer-questions-fab{right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}
.quiz-identity{display:grid;gap:7px;padding:12px;border:1px solid #e4eaf3;border-radius:10px;background:#f6f8fc}.quiz-identity label{font-weight:600;color:#3e4e65}.quiz-identity-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.quiz-identity-row input{min-width:0;height:40px;border:1px solid #dce3ed;border-radius:8px;padding:0 11px;font:inherit}.quiz-identity small{color:#8490a1;font-size:11px}.quiz-identity small.error{color:#c3444e}.quiz-submit-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.quiz-submit-row button{flex:none}
.quiz-question-prompt{font-size:15px;line-height:1.65;color:#26364d}.quiz-question-prompt>*{margin:0 0 7px}.quiz-question-prompt>:last-child{margin-bottom:0}.quiz-question-prompt h4,.quiz-question-prompt h5{font-size:1.04em}.quiz-question-prompt pre,.quiz-markdown-code{white-space:pre-wrap;overflow-wrap:anywhere;padding:9px 11px;border-radius:7px;background:#202b3b;color:#e6edf7;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.quiz-question-prompt code,.quiz-markdown-text code{padding:1px 4px;border-radius:4px;background:#e8eef8;color:#354b6a;font: .9em ui-monospace,SFMono-Regular,Menlo,monospace}.quiz-question-prompt blockquote{border-left:3px solid #91a9ca;padding-left:10px;color:#61728a}.quiz-markdown-table-row{display:flex;border:1px solid #dce5f0}.quiz-markdown-table-row span{flex:1;padding:4px 6px;border-right:1px solid #dce5f0}.quiz-markdown-table-row span:last-child{border:0}.quiz-question-card .quiz-answer-option span{min-width:0;line-height:1.5}.quiz-answer-option .quiz-markdown-text p,.quiz-answer-option .quiz-markdown-list{margin:0}.quiz-answer-option .quiz-markdown-code{margin:0;max-width:100%}.quiz-dialog label small{font-size:11px;color:#8994a4;font-weight:400}
/* Shared, modern dialog system */
dialog{border:1px solid #e5eaf2;border-radius:20px;padding:24px;background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);color:#25334a;box-shadow:0 28px 90px rgba(23,39,66,.25);overscroll-behavior:contain}dialog::backdrop{background:rgba(17,29,48,.46);backdrop-filter:blur(7px)}dialog h3,dialog h2{color:#23334b;letter-spacing:-.02em}dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border:1px solid #dce4ef;border-radius:11px;background:#fbfcfe;color:#26364d;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):hover{border-color:#c6d3e4;background:#fff}dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{outline:0;border-color:#75a4e8;background:#fff;box-shadow:0 0 0 4px rgba(61,126,217,.13)}dialog:not(.excalidraw-dialog) button:not(.tool):not(.color){min-height:38px;border:1px solid #dfe6f0;border-radius:10px;padding:8px 14px;background:#fff;color:#536178;font-weight:550;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}dialog:not(.excalidraw-dialog) button:not(.tool):not(.color):hover{border-color:#cbd7e6;background:#f5f8fc;color:#293b54}dialog:not(.excalidraw-dialog) button:not(.tool):not(.color):active{transform:translateY(1px) scale(.985)}dialog:not(.excalidraw-dialog) button.primary{border-color:#3478d5!important;background:linear-gradient(135deg,#4388e8,#286bd0)!important;color:#fff!important;box-shadow:0 5px 14px rgba(45,111,203,.2)}dialog:not(.excalidraw-dialog) button.primary:hover{border-color:#225fb9!important;background:linear-gradient(135deg,#347bdc,#205fbf)!important;box-shadow:0 7px 18px rgba(45,111,203,.28)}dialog:not(.excalidraw-dialog) button.danger{border-color:#f0c9cd!important;background:#fff7f7!important;color:#b74550!important}dialog:not(.excalidraw-dialog) button.danger:hover{border-color:#e5aeb4!important;background:#fff0f1!important}dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head){padding-bottom:14px;border-bottom:1px solid #edf1f6}dialog .quiet{background:#fff}dialog input[type=checkbox],dialog input[type=radio]{accent-color:#377ad7}dialog [hidden]{display:none!important}dialog :is(.mini-editor-actions,.object-editor-actions,.quiz-dialog-actions,.confirm-actions){padding-top:13px;border-top:1px solid #edf1f6}dialog .quiz-dialog-head [data-close-dialog],dialog .settings-head>.quiet,dialog .flow-head>.quiet,dialog .demo-head>.quiet,dialog .code-ai-head>.quiet,dialog .quiz-dialog-head>.quiet{min-width:36px;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:11px;background:#f0f4f9;color:#65748b;font-size:18px}dialog .quiz-dialog-head [data-close-dialog]:hover,dialog .settings-head>.quiet:hover,dialog .flow-head>.quiet:hover,dialog .demo-head>.quiet:hover,dialog .code-ai-head>.quiet:hover,dialog .quiz-dialog-head>.quiet:hover{background:#e7edf5;color:#26364d}dialog .math-edit-preview,dialog .markdown-live-preview,dialog .object-editor-preview{border-color:#e3eaf3;border-radius:12px;background:#f7f9fc}@media(max-width:600px){dialog{width:calc(100vw - 20px);max-height:90dvh;padding:18px;border-radius:17px}dialog .mini-editor-dialog form,dialog form{gap:12px}}
/* Native dialogs must remain hidden until showModal() sets the open attribute. */
dialog:not([open]){display:none!important}dialog.quiz-dialog[open]{display:grid}

/* Unified glass surfaces for the classroom workspace and every dialog. */
:root{--glass-line:rgba(255,255,255,.68);--glass-fill:rgba(247,250,255,.78);--glass-shadow:0 14px 40px rgba(30,48,78,.10);--glass-blur:18px}
html,body{background:radial-gradient(ellipse at 12% 0%,#e9f1ff 0,transparent 40%),radial-gradient(ellipse at 92% 100%,#f0eaff 0,transparent 38%),#f4f7fc}
.topbar,.toolbar,.pagebar,.answer-questions-fab,.code-panel:not(.open){background:var(--glass-fill);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(145%);backdrop-filter:blur(var(--glass-blur)) saturate(145%)}
.topbar{border-top:0;border-left:0;border-right:0}
.toolbar{background:rgba(255,255,255,.72);border-radius:16px}
.board-wrap{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.82);box-shadow:0 8px 30px rgba(37,56,89,.07)}
.pagebar{background:rgba(250,252,255,.78);border-radius:14px}
.tool,.action,.quiet,.pagebar button,.node-types button{transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.tool:hover,.action:hover,.quiet:hover,.pagebar button:hover{background:rgba(222,233,250,.72)}
.tool.active{background:rgba(67,133,230,.15);box-shadow:inset 0 0 0 1px rgba(70,130,220,.14)}
.room-control input,.toolbar input:not([type=range]):not([type=color]),.toolbar select{background:rgba(255,255,255,.68);border-color:rgba(207,218,234,.78);backdrop-filter:blur(10px)}
dialog{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,249,255,.76));border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 100px rgba(24,40,66,.28),inset 0 1px 0 rgba(255,255,255,.72);-webkit-backdrop-filter:blur(28px) saturate(155%);backdrop-filter:blur(28px) saturate(155%)}
dialog::backdrop{background:rgba(25,38,59,.34);-webkit-backdrop-filter:blur(9px) saturate(115%);backdrop-filter:blur(9px) saturate(115%)}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background:rgba(255,255,255,.65)}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{background:rgba(255,255,255,.92)}
dialog :is(.mini-editor-actions,.object-editor-actions,.quiz-dialog-actions,.confirm-actions){border-color:rgba(220,229,241,.78)}
dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head){border-color:rgba(220,229,241,.78)}
.pagebar button,.answer-questions-fab{ -webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%)}
@media(max-width:700px){.toolbar{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}dialog{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,249,255,.91));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}
@media(prefers-reduced-transparency:reduce){.topbar,.toolbar,.pagebar,.answer-questions-fab,dialog{background:rgba(248,250,253,.98);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.tool,.action,.quiet,.pagebar button,.node-types button{transition:none}}

/* Motion and visual hierarchy for modal surfaces and their controls. */
@keyframes glass-dialog-in{0%{opacity:0;transform:translateY(14px) scale(.975);filter:blur(5px)}65%{opacity:1;filter:blur(0)}100%{transform:translateY(0) scale(1)}}
@keyframes glass-backdrop-in{from{background:rgba(25,38,59,0)}to{background:rgba(25,38,59,.42)}}
@keyframes glass-button-shine{0%{transform:translateX(-140%) skewX(-18deg);opacity:0}18%{opacity:.42}100%{transform:translateX(240%) skewX(-18deg);opacity:0}}
dialog[open]{animation:glass-dialog-in .34s cubic-bezier(.2,.8,.2,1) both;transform-origin:center;will-change:transform,opacity}
dialog[open]::backdrop{animation:glass-backdrop-in .24s ease-out both}
dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head){position:relative}
dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head)>:first-child{animation:glass-content-in .42s .04s both}
@keyframes glass-content-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
dialog:not(.excalidraw-dialog) button:not(.tool):not(.color){position:relative;overflow:hidden;box-shadow:0 2px 7px rgba(38,57,86,.055)}
dialog:not(.excalidraw-dialog) button:not(.tool):not(.color):hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(38,70,116,.12)}
dialog:not(.excalidraw-dialog) button.primary{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 5px 16px rgba(45,111,203,.24)}
dialog:not(.excalidraw-dialog) button.primary::after{content:"";position:absolute;inset:-20% auto -20% -45%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
dialog:not(.excalidraw-dialog) button.primary:hover::after{animation:glass-button-shine .7s ease-out}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){box-shadow:inset 0 1px 2px rgba(43,61,88,.035)}
dialog :is(label,.quiz-question-card,.quiz-identity,.code-ai-context,.code-ai-privacy,.board-ai-preview-note){border-radius:12px}
dialog .quiz-dialog-head b,dialog .object-editor-head h3,dialog .code-ai-head b,dialog .board-ai-preview-head b{display:inline-block;letter-spacing:-.025em}
dialog .quiz-dialog-head b::before,dialog .object-editor-head h3::before{content:"";display:inline-block;width:4px;height:1em;margin:0 9px -2px 0;border-radius:4px;background:linear-gradient(180deg,#74a9f2,#3978db);box-shadow:0 0 12px rgba(57,120,219,.3)}
.toolbar .tool,.toolbar .action,.pagebar button,.answer-questions-fab{transition:transform .17s cubic-bezier(.2,.8,.2,1),background .18s ease,box-shadow .18s ease}
.toolbar .tool:active,.toolbar .action:active,.pagebar button:active{transform:scale(.92)}
.toolbar .ai-global:hover,.toolbar .code-global:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(57,83,125,.12)}
@media(max-width:700px){dialog[open]{animation-duration:.26s}dialog:not(.excalidraw-dialog) button.primary::after{display:none}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head)>:first-child{animation:none!important}dialog:not(.excalidraw-dialog) button.primary:hover::after{animation:none!important}}

/* Final consistency pass: normalize every dialog family and every button state. */
button{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,filter .18s ease}
button:focus-visible{outline:3px solid rgba(57,120,219,.42);outline-offset:2px}
button:active:not(:disabled){transform:translateY(1px) scale(.975)}
button:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.65)}
dialog[open]{color:#25334a;background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(242,247,255,.81));border:1px solid rgba(255,255,255,.86);box-shadow:0 30px 100px rgba(24,40,66,.28),inset 0 1px 0 rgba(255,255,255,.78);-webkit-backdrop-filter:blur(28px) saturate(155%);backdrop-filter:blur(28px) saturate(155%)}
dialog::backdrop{background:rgba(25,38,59,.4);-webkit-backdrop-filter:blur(9px) saturate(115%);backdrop-filter:blur(9px) saturate(115%)}
dialog :is(.join-qr-head,.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head){border-color:rgba(220,229,241,.8)}
dialog:not(.excalidraw-dialog) button:not(.tool):not(.color){min-height:38px;border:1px solid rgba(207,219,235,.88);border-radius:11px;padding:8px 14px;background:rgba(255,255,255,.78);color:#506078;font-weight:600;box-shadow:0 3px 10px rgba(34,53,84,.07);}
dialog:not(.excalidraw-dialog) button:not(.tool):not(.color):hover{transform:translateY(-1px);border-color:#bdd0e8;background:rgba(255,255,255,.96);color:#2c4568;box-shadow:0 7px 18px rgba(34,65,110,.13)}
dialog:not(.excalidraw-dialog) button:not(.tool):not(.color):active{transform:translateY(1px) scale(.98);box-shadow:0 2px 5px rgba(34,53,84,.08)}
dialog:not(.excalidraw-dialog) button.primary{border-color:#3478d5!important;border-radius:11px!important;background:linear-gradient(135deg,#4c91ed,#286bd0)!important;color:#fff!important;box-shadow:0 6px 16px rgba(45,111,203,.25)!important}
dialog:not(.excalidraw-dialog) button.primary:hover{border-color:#225fb9!important;background:linear-gradient(135deg,#4388e8,#205fbf)!important;box-shadow:0 9px 22px rgba(45,111,203,.32)!important}
dialog:not(.excalidraw-dialog) button.danger{border-color:#efc5cb!important;border-radius:11px!important;background:rgba(255,246,247,.92)!important;color:#b74550!important;box-shadow:0 3px 10px rgba(170,64,79,.08)!important}
dialog:not(.excalidraw-dialog) button.danger:hover{border-color:#e6aab2!important;background:#fff0f2!important;box-shadow:0 7px 17px rgba(170,64,79,.13)!important}
dialog :is(.join-qr-head,.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head)>.quiet{min-width:38px;min-height:38px;border-radius:11px;background:rgba(238,243,250,.8);color:#5c6b81}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border-radius:11px;background:rgba(255,255,255,.74);box-shadow:inset 0 1px 2px rgba(43,61,88,.035)}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{background:rgba(255,255,255,.96);box-shadow:0 0 0 4px rgba(61,126,217,.14)}
.toolbar button:focus-visible,.pagebar button:focus-visible,.answer-questions-fab:focus-visible{outline-offset:1px}
@media(max-width:700px){dialog[open]{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(245,249,255,.94));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}dialog:not(.excalidraw-dialog) button:not(.tool):not(.color){min-height:40px}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}button:active:not(:disabled){transform:none}}

/* Fix glass override regressions on the student answer control and viewer toolbar. */
#answerQuestionsBtn.answer-questions-fab{display:flex;width:auto;min-width:104px;height:46px;padding:0 20px;border:1px solid #286bc6;border-radius:999px;background:linear-gradient(135deg,#4b91ed,#286bd0);color:#fff;box-shadow:0 8px 22px rgba(34,94,174,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#answerQuestionsBtn.answer-questions-fab:hover{background:linear-gradient(135deg,#5a9bf1,#3478dc);transform:translateY(-3px);box-shadow:0 12px 26px rgba(34,94,174,.4)}
#answerQuestionsBtn.answer-questions-fab:active{transform:translateY(0) scale(.96)}
.topbar button.quiet:hover,.room-control button:hover{transform:translateY(-2px);border-color:#c5d5e9;background:rgba(255,255,255,.96);box-shadow:0 6px 16px rgba(39,68,108,.13)}
.toolbar .tool:hover,.toolbar .action:hover,.toolbar-more>summary:hover,.toolbar-popover button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(39,68,108,.12)}
.toolbar .tool.active:hover{background:rgba(67,133,230,.22)}
.toolbar-more>summary{position:relative;z-index:2;min-height:40px;border-radius:11px;background:rgba(255,255,255,.78);box-shadow:0 3px 10px rgba(34,53,84,.07);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.toolbar{ -webkit-backdrop-filter:none;backdrop-filter:none}
.toolbar-more{z-index:120}
.toolbar-popover{position:fixed;z-index:1000;top:calc(env(safe-area-inset-top) + 128px);right:14px;max-height:min(62vh,500px);overflow-y:auto;overscroll-behavior:contain}
.toolbar-more[open]>summary{background:rgba(226,238,255,.94);border-color:#b8d0f2;box-shadow:0 6px 18px rgba(49,104,179,.16)}
.toolbar-popover{background:rgba(248,251,255,.94);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 48px rgba(29,48,79,.22)}
body.readonly .toolbar{opacity:1;filter:none;pointer-events:auto}
body.readonly .toolbar>:not(.toolbar-more):not(.ai-global):not(.code-global),body.readonly .toolbar-more .toolbar-popover button:not(.ai-global):not(.code-global):not(#demoBtn),body.readonly .toolbar-more .toolbar-popover input{opacity:.48;filter:grayscale(.2);pointer-events:none}
body.readonly .toolbar-more>summary{opacity:1;pointer-events:auto;cursor:pointer}
body.readonly .toolbar-more .toolbar-popover{opacity:.82}
@media(max-width:700px){#answerQuestionsBtn.answer-questions-fab{min-width:96px;height:44px;padding:0 17px}}

/* Pointer-position lighting: the highlight follows where the cursor lands. */
button{--pointer-x:50%;--pointer-y:50%;position:relative;isolation:isolate}
button::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(96px circle at var(--pointer-x) var(--pointer-y),rgba(112,171,255,.24),rgba(255,255,255,.06) 48%,transparent 76%);opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:1}
button:hover::before{opacity:1}
button.primary:hover::before{background:radial-gradient(104px circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.32),rgba(255,255,255,.08) 50%,transparent 78%)}
button:active::before{opacity:.75}
@media(hover:none),(pointer:coarse){button::before{display:none}}
@media(prefers-reduced-motion:reduce){button::before{transition:none}}
button.pointer-tracking{transition:transform .12s cubic-bezier(.2,.75,.25,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,filter .18s ease;will-change:transform}
button.pointer-tracking.pointer-near{transform:perspective(560px) rotateX(var(--pointer-rotate-x,0deg)) rotateY(var(--pointer-rotate-y,0deg)) translate3d(var(--pointer-shift-x,0px),var(--pointer-shift-y,0px),0) scale(1.025);box-shadow:0 9px 22px rgba(38,68,110,.16)}
button.pointer-tracking.pointer-near.primary,button.pointer-tracking.pointer-near.ai-global,button.pointer-tracking.pointer-near.code-global,button.pointer-tracking.pointer-near.answer-questions-fab{transform:perspective(560px) rotateX(var(--pointer-rotate-x,0deg)) rotateY(var(--pointer-rotate-y,0deg)) translate3d(var(--pointer-shift-x,0px),var(--pointer-shift-y,0px),0) scale(1.04);box-shadow:0 12px 27px rgba(38,87,153,.24)}
button.pointer-tracking.pointer-near.tool{transform:perspective(560px) rotateX(var(--pointer-rotate-x,0deg)) rotateY(var(--pointer-rotate-y,0deg)) translate3d(var(--pointer-shift-x,0px),var(--pointer-shift-y,0px),0) scale(1.06)}
button.pointer-tracking:active{transform:translateY(1px) scale(.97)!important}
@media(hover:none),(pointer:coarse){button.pointer-tracking,button.pointer-tracking.pointer-near{transform:none!important;will-change:auto}}
@media(prefers-reduced-motion:reduce){button.pointer-tracking{transition:none!important;will-change:auto}button.pointer-tracking.pointer-near{transform:none!important}}
/* Refined dialog chrome: clearer close controls, grouped fields and action footer. */
dialog :is(.join-qr-head,.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head){min-height:54px;gap:14px;padding-bottom:14px;border-bottom:1px solid rgba(211,223,239,.86)}
dialog :is(.join-qr-head,.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head)>:first-child{min-width:0}
dialog :is(.settings-section,.room-password-admin,.quiz-identity,.quiz-question-card,.quiz-result-summary,.code-ai-context,.code-ai-privacy,.board-ai-preview-note){border:1px solid rgba(214,225,240,.78);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(240,246,254,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
dialog :is(.settings-section,.room-password-admin,.quiz-identity,.quiz-question-card,.quiz-result-summary){padding:15px}
dialog :is(.settings-section,.room-password-admin) h3{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:-.01em}
dialog :is(.settings-section,.room-password-admin) h3::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#69a4f2,#3478d5);box-shadow:0 0 0 4px rgba(65,128,211,.1)}
dialog :is(label,.quiz-dialog label){gap:8px;color:#52627a;font-size:12px;font-weight:650}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){min-height:40px;border:1px solid rgba(202,216,235,.92);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.82);box-shadow:0 2px 7px rgba(35,57,91,.035),inset 0 1px 0 rgba(255,255,255,.8)}
dialog textarea{line-height:1.65;resize:vertical}
dialog :is(.settings-note,.room-access-dialog p,.quiz-dialog small,.object-editor-content small){color:#7c899d;line-height:1.6}
dialog :is(.mini-editor-actions,.object-editor-actions,.quiz-dialog-actions,.confirm-actions,.board-ai-preview-actions){display:flex;align-items:center;gap:9px;padding:14px 0 0;border-top:1px solid rgba(211,223,239,.86)}
dialog .quiz-dialog-actions .danger{margin-right:auto}
dialog .quiz-answer-option{border:1px solid rgba(209,222,239,.88);border-radius:12px;background:rgba(255,255,255,.72);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
dialog .quiz-answer-option:hover{transform:translateY(-1px);border-color:#a9c4e8;background:#fff;box-shadow:0 5px 14px rgba(49,83,130,.1)}
dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head)>button.quiet{width:auto;min-width:66px;height:38px;min-height:38px;padding:0 13px;border:1px solid rgba(207,220,237,.9);border-radius:999px;background:rgba(239,245,253,.85);color:#60718a;font-size:12px;font-weight:650;box-shadow:0 3px 9px rgba(38,61,96,.06)}
dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head)>button.quiet:hover{transform:translateY(-2px);border-color:#b7cde9;background:#fff;color:#315b91;box-shadow:0 7px 15px rgba(38,76,128,.14)}
dialog .object-editor-head>#closeObjectEditor,dialog .quiz-dialog-head>[data-close-dialog="quizEditorDialog"]{display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:1px solid rgba(204,218,237,.92);border-radius:50%;background:linear-gradient(145deg,#fff,#edf4fd);color:#536983;font-size:23px;font-weight:400;line-height:1;box-shadow:0 4px 12px rgba(37,62,100,.1)}
dialog .object-editor-head>#closeObjectEditor:hover,dialog .quiz-dialog-head>[data-close-dialog="quizEditorDialog"]:hover{transform:rotate(90deg) scale(1.06);border-color:#a9c4e8;background:#eaf3ff;color:#2e68ad;box-shadow:0 7px 16px rgba(37,90,156,.18)}
@media(max-width:600px){dialog :is(.settings-section,.room-password-admin,.quiz-identity,.quiz-question-card,.quiz-result-summary){padding:12px}dialog :is(.settings-head,.flow-head,.demo-head,.graph-dialog-head,.code-ai-head,.board-ai-preview-head,.quiz-dialog-head,.object-editor-head)>button.quiet{min-width:62px}}
#answerQuestionsBtn[hidden]{display:none!important}
.page-quick-list{max-height:min(68dvh,520px);padding:8px;gap:5px;border-radius:15px}
.page-quick-item{min-height:44px;padding:10px 13px;border-radius:10px;line-height:1.4;white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.page-quick-item.active{box-shadow:inset 0 0 0 1px rgba(70,130,220,.14)}
@media(max-width:700px){.page-quick-list{max-height:min(66dvh,480px);padding:7px}.page-quick-item{min-height:48px;padding:11px 12px;font-size:14px;line-height:1.4}}

/* Give the text-block editor comfortable space from the top and bottom edges. */
.object-editor-dialog{max-height:min(82dvh,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 56px))}
.object-editor-dialog form{max-height:min(82dvh,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 56px))}

@font-face{font-family:"Inter";src:url("/fonts/Inter-VF.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-VF.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/fonts/SourceSerif4-VF.ttf") format("truetype");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/EBGaramond-VF.ttf") format("truetype");font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("/fonts/BebasNeue-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"LXGW WenKai";src:url("/fonts/LXGWWenKai-Regular.ttf") format("truetype");font-style:normal;font-weight:400 600;font-display:swap}

.object-editor-dialog .object-editor-head{top:0;padding-top:28px}

.board-oj-import{margin:4px 16px 8px;padding:10px 12px;border:1px solid rgba(204,219,240,.9);border-radius:14px;background:linear-gradient(140deg,rgba(245,249,255,.9),rgba(255,255,255,.86));box-shadow:0 5px 16px rgba(38,70,112,.06)}.board-oj-import[hidden],.board-oj-result[hidden]{display:none!important}.board-oj-import-head b{display:block;color:#34445e;font-size:12px}.board-oj-import-head small{display:block;margin-top:3px;color:#8290a4;font-size:10px;line-height:1.45}.board-oj-import-controls{display:grid;grid-template-columns:130px minmax(120px,1fr) auto;gap:7px;margin-top:8px}.board-oj-import-controls select,.board-oj-import-controls input{min-width:0;height:36px;border:1px solid #dbe4f0;border-radius:9px;padding:0 10px;background:#fff;color:#35445a;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.board-oj-import-controls button,.board-oj-result-actions button{min-height:36px;border:1px solid #dce4ef;border-radius:9px;padding:0 11px;background:#fff;color:#52647d;font-size:11px;font-weight:600}.board-oj-import-controls button.primary,.board-oj-result-actions button.primary{border-color:#3478d5;background:linear-gradient(135deg,#4388e8,#286bd0);color:#fff;box-shadow:0 4px 11px rgba(45,111,203,.16)}.board-oj-import-controls button:disabled{opacity:.55;cursor:wait}.board-oj-status{margin:6px 0 0;color:#8591a3;font-size:10px;line-height:1.45}.board-oj-status.error{color:#bd4c58}.board-oj-result{margin-top:8px;padding-top:8px;border-top:1px solid #e4ebf4}.board-oj-result-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.board-oj-result-meta strong{min-width:0;overflow:hidden;color:#2c3d56;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.board-oj-result-meta a{flex:none;color:#3978c9;font-size:10px;text-decoration:none}.board-oj-result-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.board-oj-result-actions .quiet{margin-left:auto;background:transparent;color:#78869a}.board-oj-import[hidden]~#codeAiPrivacy{margin-top:4px}@media(max-width:700px){.board-oj-import{margin:4px 10px 7px;padding:9px}.board-oj-import-controls{grid-template-columns:112px minmax(0,1fr);gap:6px}.board-oj-import-controls button{grid-column:1/-1}.board-oj-result-actions button{padding:0 9px}}
.mini-editor-dialog input[type=range]{width:100%;min-height:0;height:24px;border:0;padding:0;background:transparent;box-shadow:none;accent-color:#3678d3}.shape-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shape-color-grid label{min-width:0}.shape-transparent-row{display:flex!important;align-items:center;gap:9px!important;padding:8px 10px;border:1px solid #e4eaf2;border-radius:10px;background:#f8faff}.shape-transparent-row input{width:17px;height:17px;min-height:0;margin:0;accent-color:#3678d3}.shape-range{display:flex;align-items:center;gap:10px}.shape-range input{flex:1;min-width:0}.shape-range output{min-width:38px;padding:4px 7px;border-radius:7px;background:#eef3fa;color:#43536a;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}@media(max-width:420px){.shape-color-grid{gap:7px}.shape-color-grid label{font-size:11px}}
body.readonly .toolbar-more .toolbar-popover button#flowchartBtn{opacity:.9;filter:none;pointer-events:auto;cursor:pointer}

.demo-variable-panel{border-top:1px solid #edf0f5;padding:10px 12px;background:#fbfcfe}.demo-variable-panel>b{display:block;margin-bottom:8px;color:#69768a;font-size:12px}.demo-variables{display:flex;flex-wrap:wrap;gap:6px}.demo-variable{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 8px;border:1px solid #e3e9f2;border-radius:7px;background:#fff;color:#34435a;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.demo-variable-name{color:#62728a}.demo-variable-value{overflow-wrap:anywhere;color:#1c4c89;font-weight:650}.demo-variable.empty{color:#8a95a5;font-family:inherit;font-weight:400}@media(max-width:700px){.demo-variable-panel{padding:6px 9px}.demo-variable-panel>b{margin-bottom:5px}.demo-variable{padding:4px 6px;font-size:10px}}
.demo-setup .demo-input-label small{color:#8792a3;font-size:10px;line-height:1.3}



body.readonly .toolbar-more .toolbar-popover button#demoBtn{opacity:1;filter:none;pointer-events:auto;cursor:pointer}


.demo-description{white-space:pre-line;max-height:82px;overflow:auto;line-height:1.45}.demo-setup>label:first-child{min-width:220px}.demo-setup>label:first-child select{min-width:220px;max-width:min(62vw,560px)}@media(max-width:700px){.demo-setup>label:first-child{flex:1;min-width:150px}.demo-setup>label:first-child select{width:100%;min-width:0;max-width:none}.demo-description{max-height:70px}}
.demo-code pre{white-space:pre-wrap;overflow-wrap:anywhere}
.excalidraw-dialog{width:min(1500px,calc(100vw - 24px));height:min(920px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;overflow:hidden;border-radius:16px;background:#f8f9fa}
.excalidraw-dialog[open]{display:flex;flex-direction:column}
.excalidraw-head{min-height:62px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e6e8eb;background:#fff}
.excalidraw-head>div:first-child{display:grid;gap:3px;min-width:0}.excalidraw-head b{font-size:15px}.excalidraw-head span{font-size:12px;color:#737b87}.excalidraw-actions{display:flex;gap:8px;align-items:center;flex:none}.excalidraw-actions button{min-height:36px;padding:7px 12px;border:1px solid #e4e7eb;border-radius:8px;background:#fff;color:#46505c}.excalidraw-actions .primary{background:#6965db;border-color:#6965db;color:#fff}.excalidraw-actions .danger{color:#bc4050;border-color:#f0d5d8}.excalidraw-actions button[hidden]{display:none!important}#excalidrawMount{position:relative;flex:1;min-height:0;width:100%;height:100%}#excalidrawMount .excalidraw{height:100%;width:100%}.excalidraw-dialog::backdrop{background:rgba(20,27,38,.68);backdrop-filter:blur(8px)}
@media(max-width:700px){.excalidraw-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0}.excalidraw-head{padding:8px 10px;align-items:flex-start}.excalidraw-head span{max-width:38vw;line-height:1.35}.excalidraw-actions{gap:5px}.excalidraw-actions button{min-height:34px;padding:6px 9px;font-size:12px}}
.excalidraw-selection-actions{position:absolute;z-index:4;display:flex;gap:7px;padding:6px;border:1px solid rgba(255,255,255,.85);border-radius:12px;background:rgba(248,251,255,.92);box-shadow:0 10px 26px rgba(29,48,79,.18);-webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%)}.excalidraw-selection-actions[hidden]{display:none!important}.excalidraw-selection-actions button{height:32px;padding:0 11px;border:1px solid rgba(205,216,232,.82);border-radius:8px;background:rgba(255,255,255,.8);color:#40506a;font-size:12px;white-space:nowrap}.excalidraw-selection-actions .primary{border-color:#3574d9;background:linear-gradient(135deg,#397bea,#2461c8);color:white}.excalidraw-selection-actions .danger{border-color:#f0d5d8;color:#bd4250}@media(max-width:700px){.excalidraw-selection-actions{gap:5px;padding:5px}.excalidraw-selection-actions button{height:36px;padding:0 12px;font-size:13px}}

.data-structure-dialog{width:min(520px,calc(100vw - 28px));max-height:min(90dvh,760px)}.data-structure-dialog form{display:grid;gap:14px}.data-structure-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid #e5ebf4}.data-structure-head h3{margin:0 0 5px}.data-structure-head p,.data-structure-hint{margin:0;color:#7b8799;font-size:12px;line-height:1.5}.data-structure-head>button{flex:none;width:34px;height:34px;padding:0;font-size:20px}.data-structure-dialog textarea{width:100%;min-height:78px;resize:vertical}.data-structure-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.data-structure-dimensions[hidden]{display:none}

.python-tutor-dialog{width:min(1240px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;overflow:hidden;background:#f7f9fc}.python-tutor-dialog[open]{display:flex;flex-direction:column}.python-tutor-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:10px 16px;background:#fff;border-bottom:1px solid #e5eaf1}.python-tutor-head>div{display:grid;gap:4px;min-width:0}.python-tutor-head b{font-size:15px;color:#28364b}.python-tutor-head span{font-size:12px;color:#77859a}.python-tutor-head button{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;font-size:22px}.python-tutor-setup{width:min(620px,100%);margin:auto;padding:24px;display:grid;gap:16px}.python-tutor-setup[hidden],.python-tutor-frame-wrap[hidden]{display:none}.python-tutor-explain{padding:18px;border:1px solid #e1e9f4;border-radius:15px;background:linear-gradient(145deg,#f6faff,#fff)}.python-tutor-explain b{font-size:15px;color:#31425d}.python-tutor-explain p,.python-tutor-privacy{margin:7px 0 0;color:#718099;font-size:12px;line-height:1.65}.python-tutor-setup label{display:grid;gap:8px;color:#52627a;font-size:12px;font-weight:650}.python-tutor-setup textarea{width:100%;resize:vertical;min-height:68px}.python-tutor-privacy{margin:0;padding:12px 14px;border-radius:11px;background:#fff8e9;color:#786746}.python-tutor-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:4px}.python-tutor-frame-wrap{flex:1;min-height:0;background:#fff}.python-tutor-frame-wrap iframe{display:block;width:100%;height:100%;border:0;background:#fff}@media(max-width:700px){.python-tutor-dialog{width:100vw;height:100dvh;margin:0;border-radius:0}.python-tutor-head{min-height:56px;padding:8px 12px}.python-tutor-setup{padding:16px}.python-tutor-trigger{padding-inline:7px!important;font-size:11px!important}}

/* About and attribution */
.about-details{margin:0 18px 18px;border:1px solid #e2e9f2;border-radius:14px;background:rgba(247,250,254,.82);overflow:hidden}
.about-details>summary{padding:13px 15px;color:#40516a;font-size:13px;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.about-details>summary::-webkit-details-marker{display:none}
.about-details>summary::after{content:'＋';color:#71819a;font-size:16px}
.about-details[open]>summary::after{content:'−'}
.about-content{padding:0 15px 15px;color:#66748a;font-size:12px;line-height:1.65}
.about-brand{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px;background:#fff;border:1px solid #e8edf4}
.about-brand img{width:38px;height:38px;object-fit:contain}
.about-brand div{display:grid;gap:2px}.about-brand b{color:#2c3c54;font-size:14px}.about-brand span{color:#8290a3;font-size:11px}
.about-content h4{margin:15px 0 6px;color:#34445b;font-size:12px}
.about-content ul{margin:0;padding-left:19px;columns:2;column-gap:25px}
.about-content li{break-inside:avoid;padding:1px 0}
.about-content a{color:#3979cc;text-decoration:none}.about-content a:hover{text-decoration:underline}
.about-license-note{margin:11px 0 0;color:#8290a3;font-size:10px}
.about-copyright{margin:8px 0 0;padding-top:8px;border-top:1px solid #e8edf4;color:#728198;font-size:10px}
footer .footer-copyright{color:#91a0b4}
@media(max-width:700px){.about-details{margin:0 10px 14px}.about-content ul{columns:1}main>footer{flex-wrap:wrap;justify-content:center;gap:5px 14px}main>footer .footer-copyright{flex-basis:100%;text-align:center}}
.image-selection-actions{min-width:100px;justify-content:center}

.hardware-diagram-dialog{width:min(1120px,96vw);height:min(820px,94dvh);max-width:none;max-height:none;padding:0;overflow:hidden;border:1px solid #ffffffc2;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f3f7fc);box-shadow:0 28px 90px #0d1b3255;backdrop-filter:blur(18px)}.hardware-diagram-dialog[open]{display:flex;flex-direction:column}.hardware-diagram-dialog::backdrop{background:#0c16294d;backdrop-filter:blur(7px)}.hardware-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;border-bottom:1px solid #e5ebf4}.hardware-dialog-head>div{display:grid;gap:4px}.hardware-dialog-head b{color:#24344d;font-size:17px}.hardware-dialog-head span{color:#748198;font-size:12px}.hardware-dialog-head>button{flex:none;width:36px;height:36px;padding:0;font-size:21px}.hardware-editor{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:14px;flex:1;min-height:0;padding:14px}.hardware-controls{display:flex;flex-direction:column;gap:11px;min-height:0;overflow:auto;padding:13px;border:1px solid #e1e8f1;border-radius:14px;background:#ffffffb8}.hardware-controls label{display:grid;gap:5px;color:#59677c;font-size:12px}.hardware-controls select{width:100%;min-height:36px;padding:6px 9px;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:#29384d;font:inherit}.hardware-controls>button,.hardware-wire-form>button{min-height:36px;border:1px solid #d6e2f2;border-radius:9px;background:#eef5ff;color:#2864b2;font:inherit;font-weight:650;cursor:pointer}.hardware-part-list,.hardware-wire-form{display:grid;gap:8px;padding-top:11px;border-top:1px solid #edf1f6}.hardware-part-list>b,.hardware-wire-form>b{color:#34445d;font-size:12px}.hardware-part-row,.hardware-wire-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border:1px solid #e5eaf1;border-radius:8px;background:#fff;color:#4a5a71;font-size:11px}.hardware-part-row button,.hardware-wire-row button{border:0;background:transparent;color:#b64d55;font-size:16px;cursor:pointer}.hardware-diagram-status,#hardwareDiagramStatus{margin:0;color:#7b8799;font-size:11px;line-height:1.5}.hardware-preview-wrap{display:flex;min-width:0;min-height:0;overflow:hidden;border:1px solid #e1e8f1;border-radius:14px;background-color:#fff;background-image:radial-gradient(#dce5f0 1px,transparent 1px);background-size:18px 18px}.hardware-preview{display:grid;min-width:0;min-height:0;width:100%;height:100%;place-items:center;overflow:auto}.hardware-preview svg{display:block;width:100%;height:100%;min-height:380px}.hardware-dialog-actions{display:flex;justify-content:space-between;gap:9px;padding:11px 17px;border-top:1px solid #e5ebf4;background:#fbfcfe}.hardware-dialog-actions button{min-height:38px;padding:7px 14px;border:1px solid #dfe6f0;border-radius:10px;background:#fff;color:#536178;font:inherit}.hardware-dialog-actions button[hidden]{display:none}.hardware-dialog-actions .primary{margin-left:auto;border-color:#3478d5;background:linear-gradient(135deg,#4388e8,#286bd0);color:#fff}.hardware-diagram-dialog button:hover{filter:brightness(.98)}@media(max-width:700px){.hardware-diagram-dialog{width:98vw;height:96dvh;border-radius:15px}.hardware-dialog-head{padding:12px}.hardware-dialog-head span{max-width:75vw;line-height:1.4}.hardware-editor{grid-template-columns:1fr;grid-template-rows:minmax(190px,42%) minmax(0,1fr);gap:8px;padding:8px}.hardware-controls{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px;padding:9px}.hardware-controls>button{align-self:end}.hardware-part-list,.hardware-wire-form{grid-column:1/-1}.hardware-preview svg{min-height:280px}}
.hardware-pin-target{fill:#fff;stroke:#55708f;stroke-width:2;cursor:crosshair;vector-effect:non-scaling-stroke;transition:r .12s ease,fill .12s ease,stroke .12s ease}.hardware-pin-target:hover,.hardware-pin-target.pending{fill:#ffd66b;stroke:#d58a20;stroke-width:3;r:8}
.hardware-wire-hint{margin:0;color:#64748b;font-size:11px;line-height:1.5}.hardware-wire-form>button{min-height:34px}.hardware-hole{fill:#66717c;opacity:.68;cursor:crosshair;transition:r .12s ease,fill .12s ease,opacity .12s ease}.hardware-hole-target{fill:transparent;opacity:1;stroke:transparent;stroke-width:1;cursor:crosshair;vector-effect:non-scaling-stroke}.hardware-hole-target:hover,.hardware-hole-target.pending{fill:#ffd66b;stroke:#d58a20;stroke-width:2;opacity:.95}.hardware-pin-target.pending{fill:#ffd66b;stroke:#d58a20;stroke-width:3;r:9}
.hardware-pin-target{fill:transparent;stroke:transparent;stroke-width:1;opacity:0;cursor:crosshair;pointer-events:all;transition:r .1s ease,fill .1s ease,stroke .1s ease,opacity .1s ease}.hardware-pin-target:hover{fill:#13a88633;stroke:#138d73;stroke-width:1.5;opacity:1;r:5}.hardware-pin-target.pending{fill:#13a886;stroke:#fff;stroke-width:1.5;opacity:1;r:4}.hardware-wire{pointer-events:none}
.hardware-diagram-dialog{width:min(1540px,98vw)}.hardware-editor{grid-template-columns:minmax(205px,240px) minmax(420px,1fr) minmax(245px,290px);gap:10px}.hardware-palette{display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;overflow:hidden;padding:11px;border:1px solid #e1e8f1;border-radius:14px;background:#ffffffd9}.hardware-palette-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.hardware-palette-head b{font-size:13px;color:#34445d}.hardware-palette-head span{font-size:10px;color:#7c8798}.hardware-palette-search{display:block!important}.hardware-palette-search input{width:100%;min-height:36px;padding:7px 9px;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:#29384d;font:inherit;font-size:12px}.hardware-palette>select{width:100%;min-height:34px;padding:6px 8px;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:#29384d;font:inherit;font-size:12px}.hardware-catalog-list{display:grid;grid-auto-rows:minmax(56px,auto);gap:5px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:1px}.hardware-catalog-card{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:58px;padding:5px 7px;border:1px solid #e6ebf2;border-radius:9px;background:#fff;color:#35445a;text-align:left;cursor:grab}.hardware-catalog-card:hover,.hardware-catalog-card:focus-visible{border-color:#78a6e5;background:#f4f8ff;box-shadow:0 2px 8px #3668a316}.hardware-catalog-card:active{cursor:grabbing}.hardware-catalog-card img{display:block;width:60px;height:45px;object-fit:contain;background:#f7f9fc;border-radius:6px}.hardware-catalog-card-text{display:grid;gap:3px;min-width:0}.hardware-catalog-card-text b{overflow:hidden;color:#34445d;font-size:10px;line-height:1.35;text-overflow:ellipsis}.hardware-catalog-card-text small{overflow:hidden;color:#8994a5;font-size:9px;text-overflow:ellipsis}.hardware-catalog-empty{margin:12px 3px;color:#8793a3;font-size:11px}.hardware-wire-path{cursor:crosshair;pointer-events:stroke}.hardware-bendpoint{fill:#fff;stroke:#3a7fd0;stroke-width:2;cursor:move;vector-effect:non-scaling-stroke}.hardware-bendpoint:hover{fill:#7fb4f2}.hardware-component-moving{cursor:grabbing}
@media(max-width:1050px){.hardware-diagram-dialog{width:98vw}.hardware-editor{grid-template-columns:minmax(190px,220px) minmax(0,1fr) minmax(220px,260px);gap:7px;padding:8px}.hardware-palette{padding:8px}.hardware-catalog-card{grid-template-columns:50px minmax(0,1fr);gap:5px;padding:4px}.hardware-catalog-card img{width:48px;height:40px}}
@media(max-width:760px){.hardware-editor{grid-template-columns:1fr;grid-template-rows:minmax(145px,22%) minmax(0,1fr) minmax(150px,28%);gap:7px;padding:8px}.hardware-controls{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:7px;padding:8px}.hardware-controls>label:first-child{grid-column:1}.hardware-controls>button{align-self:end}.hardware-part-list,.hardware-wire-form{grid-column:1/-1}.hardware-palette{display:grid;grid-template-columns:1fr 130px;grid-template-rows:auto auto minmax(0,1fr);gap:6px;padding:7px}.hardware-palette-head{grid-column:1/-1}.hardware-palette-search{grid-column:1}.hardware-palette>select{grid-column:2;grid-row:2}.hardware-catalog-list{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(54px,auto)}.hardware-catalog-card{grid-template-columns:46px minmax(0,1fr);min-height:54px}.hardware-catalog-card img{width:44px;height:42px}.hardware-preview svg{min-height:280px}}

/* Hardware editor: keep the canvas central and the searchable part library on the right. */
.hardware-diagram-dialog{width:min(1500px,98vw);height:min(900px,96dvh)}
.hardware-editor{grid-template-columns:minmax(0,1fr) minmax(255px,310px);gap:10px}
.hardware-stage{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.hardware-stage-toolbar{display:flex;align-items:center;gap:8px;flex:none;padding:8px 10px;border:1px solid #e1e8f1;border-radius:12px;background:#ffffffd9}
.hardware-stage-toolbar label{display:flex;align-items:center;gap:6px;color:#59677c;font-size:11px;white-space:nowrap}
.hardware-stage-toolbar select{min-height:32px;padding:5px 8px;border:1px solid #dce4ee;border-radius:8px;background:white;color:#29384d;font:inherit}
.hardware-stage-toolbar>button{min-height:32px;padding:5px 9px;border:1px solid #d6e2f2;border-radius:8px;background:#eef5ff;color:#2864b2;font:inherit;white-space:nowrap}
.hardware-stage-toolbar #hardwareDiagramStatus{flex:1;min-width:60px}
.hardware-stage .hardware-preview-wrap{flex:1;min-height:0}
.hardware-palette{min-height:0}
.hardware-palette-head b{font-size:14px}
.hardware-catalog-card-text b{font-size:11px}
.hardware-catalog-card-text small{font-size:9px}
@media(max-width:760px){.hardware-diagram-dialog{width:98vw;height:96dvh}.hardware-editor{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(150px,28%);gap:7px;padding:8px}.hardware-stage-toolbar{flex-wrap:wrap}.hardware-stage-toolbar #hardwareDiagramStatus{flex-basis:100%}.hardware-palette{display:grid;grid-template-columns:minmax(0,1fr) minmax(115px,35%);grid-template-rows:auto auto minmax(0,1fr);gap:6px;padding:7px}.hardware-palette-head{grid-column:1/-1}.hardware-palette-search{grid-column:1}.hardware-palette>select{grid-column:2;grid-row:2}.hardware-catalog-list{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(54px,auto)}}
/* Hardware editor: blank canvas with a categorized library at the right. */
.hardware-editor{grid-template-columns:minmax(0,1fr) minmax(270px,330px)!important;gap:12px}
.hardware-stage-toolbar{min-height:42px;padding:4px 2px!important;border:0!important;background:transparent!important}
.hardware-stage-toolbar>button{min-height:32px;padding:5px 10px;border:1px solid #dbe4ef;border-radius:9px;background:#f5f8fc;color:#49627e;font:inherit;cursor:pointer}
.hardware-preview-wrap{background:#fff!important;background-image:none!important}
.hardware-preview svg{min-height:100%;height:100%;width:100%}
.hardware-palette{display:flex!important;flex-direction:column;gap:9px;min-width:0;min-height:0}
.hardware-category-tabs{display:flex;flex-wrap:wrap;gap:5px;max-height:120px;overflow:auto;padding:2px 1px}
.hardware-category-tabs button{padding:5px 8px;border:1px solid #e1e7ef;border-radius:999px;background:#fff;color:#66758a;font:inherit;font-size:10px;white-space:nowrap;cursor:pointer}
.hardware-category-tabs button.active{border-color:#8db4ec;background:#eef5ff;color:#2868bd;box-shadow:0 1px 4px #3978c21a}
.hardware-catalog-list{grid-template-columns:1fr!important;grid-auto-rows:minmax(56px,auto)}
.hardware-palette .hardware-category-tabs{display:flex}
@media(max-width:760px){.hardware-editor{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) minmax(190px,34%)!important}.hardware-category-tabs{max-height:56px;overflow:auto}.hardware-catalog-list{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr))!important}.hardware-stage-toolbar #hardwareDiagramStatus{flex:1}}
/* Hardware diagram selection inspector, fixed part proportions, and canvas zoom. */
.hardware-preview{display:block!important;overflow:auto!important;overscroll-behavior:contain}
.hardware-preview svg{display:block;flex:none;min-height:0!important;max-width:none!important;width:auto;height:auto}
.hardware-zoom-controls{display:flex;align-items:center;gap:5px;flex:none}
.hardware-zoom-controls button{min-width:29px;height:29px;padding:3px 8px;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#49627e;font:inherit;cursor:pointer}
.hardware-zoom-controls span{min-width:42px;color:#64748b;font-size:11px;text-align:center}
.hardware-inspector{display:grid;gap:7px;padding:10px;border:1px solid #d9e5f4;border-radius:11px;background:#f7faff}
.hardware-inspector[hidden]{display:none}
.hardware-inspector>b{color:#34445d;font-size:12px}
.hardware-inspector label{display:grid;gap:4px;color:#68788f;font-size:10px}
.hardware-inspector input:not([type=color]){width:100%;min-height:31px;padding:5px 8px;border:1px solid #dce4ee;border-radius:8px;background:#fff;color:#29384d;font:inherit;font-size:12px}
.hardware-inspector input[type=color]{width:100%;height:30px;padding:2px;border:1px solid #dce4ee;border-radius:7px;background:#fff}
@media(max-width:760px){.hardware-stage-toolbar{flex-wrap:wrap}.hardware-stage-toolbar #hardwareDiagramStatus{flex-basis:100%}.hardware-palette{display:flex!important}.hardware-category-tabs{max-height:48px}.hardware-catalog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(54px,auto)}}
#hardwarePreviewViewport{display:block;flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow:auto;overscroll-behavior:contain}.hardware-preview{display:block!important;width:max-content;height:max-content;min-width:100%;min-height:100%;overflow:visible!important}
.hardware-pin-dot{fill:#fff;stroke:#148c74;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px #15354a55)}
.hardware-pin-target.pending+.hardware-pin-dot{fill:#f8c75e;stroke:#d58a20}

/* Hardware editor: keep the drawing stage wide and the Fritzing-inspired parts shelf on the right. */
.hardware-diagram-dialog{width:min(1280px,97vw)}
.hardware-editor{grid-template-columns:minmax(0,1fr) minmax(280px,320px)}
.hardware-stage{min-width:0}
.hardware-palette{min-width:0;padding:10px;border:1px solid #e3eaf3;border-radius:14px;background:linear-gradient(180deg,#ffffff,#f8fafd)}
.hardware-palette-head{padding:2px 2px 5px}
.hardware-category-tabs{max-height:108px;gap:6px}
.hardware-category-tabs button{padding:6px 9px;font-size:11px;transition:background .15s,border-color .15s,transform .15s}
.hardware-category-tabs button:hover{transform:translateY(-1px);border-color:#adc5e6}
.hardware-catalog-list{gap:7px;grid-auto-rows:minmax(66px,auto)}
.hardware-catalog-card{grid-template-columns:68px minmax(0,1fr);min-height:66px;padding:7px;border-radius:11px}
.hardware-catalog-card img{width:66px;height:50px}
.hardware-catalog-card-text b{font-size:12px;line-height:1.4}
.hardware-catalog-card-text small{font-size:10px}
.hardware-inspector{gap:9px;padding:12px}
.hardware-inspector>b{font-size:13px}
.hardware-inspector label{font-size:11px}
.hardware-inspector input:not([type=color]){min-height:35px;font-size:13px}
.hardware-inspector input[type=color]{height:34px}
@media(max-width:900px) and (min-width:761px){.hardware-diagram-dialog{width:98vw}.hardware-editor{grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:9px;padding:9px}}
@media(max-width:760px){.hardware-editor{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) minmax(190px,34%)!important}.hardware-palette{padding:7px}.hardware-catalog-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(62px,auto)}.hardware-catalog-card{grid-template-columns:48px minmax(0,1fr);min-height:62px;padding:5px}.hardware-catalog-card img{width:46px;height:44px}.hardware-catalog-card-text b{font-size:11px}}
.hardware-pin-target.connected{opacity:.9;fill:#d9f7ed;stroke:#148c74;stroke-width:2;r:6}
.hardware-pin-target.connected:hover,.hardware-pin-target.connected.pending{fill:#ffd66b;stroke:#d58a20;stroke-width:2.5;r:8}
.hardware-wire-path:hover{filter:drop-shadow(0 0 2px #2878e866)}
.hardware-part-properties{display:grid;gap:7px;padding-top:2px}
.hardware-part-properties label{display:grid;gap:4px;color:#68788f;font-size:10px}
.hardware-part-properties input{width:100%;min-height:31px;padding:5px 8px;border:1px solid #dce4ee;border-radius:8px;background:#fff;color:#29384d;font:inherit;font-size:12px}
/* Fritzing-style parts bin: category chips stay reachable and the parts list owns the remaining height. */
.hardware-category-tabs{display:flex;flex:0 0 auto;flex-wrap:wrap;align-content:flex-start;gap:6px;max-height:124px;overflow-y:auto;overflow-x:hidden;padding:3px 3px 7px;scrollbar-width:thin}
.hardware-category-tabs button{flex:0 0 auto;min-height:30px;padding:6px 10px;border:1px solid #dbe3ee;border-radius:8px;background:#fff;color:#52637a;font:inherit;font-size:11px;white-space:nowrap}
.hardware-category-tabs button.active{border-color:#77a6e2;background:#eaf3ff;color:#1f5b9e;font-weight:650}
.hardware-catalog-list{flex:1 1 auto;min-height:120px}
.hardware-inspector{flex:0 0 auto;max-height:32%;overflow:auto;overscroll-behavior:contain}
.hardware-part-properties{max-height:180px;overflow:auto;overscroll-behavior:contain;padding-right:2px}
@media(max-width:760px){.hardware-category-tabs{max-height:88px;overflow-y:auto;overflow-x:hidden}.hardware-catalog-list{min-height:70px}.hardware-inspector{max-height:36%}}
.hardware-palette-help{display:block;flex:0 0 auto;color:#77869a;font-size:10px;line-height:1.4;padding:0 2px}
/* Fritzing connection targets are invisible hit regions; the imported SVG keeps its own pad/hole artwork visible. */
.hardware-pin-target.connected{display:none}
.hardware-pin-target{fill:transparent!important;stroke:transparent!important;opacity:0!important}
.hardware-pin-target:hover{fill:#13a88633!important;stroke:#138d73!important;opacity:1!important;r:4}
.hardware-pin-target.pending{fill:#13a886!important;stroke:#fff!important;opacity:1!important;r:5}

/* Hardware palette and inspector layout: keep properties over the canvas, not in the device list. */
.hardware-stage{position:relative}
.hardware-inspector{position:absolute;z-index:8;top:58px;right:12px;display:grid;gap:9px;width:min(310px,calc(100% - 24px));max-height:calc(100% - 76px);overflow:auto;padding:12px;border:1px solid #d6e2f1;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 14px 42px rgba(24,44,72,.2);backdrop-filter:blur(14px);overscroll-behavior:contain}
.hardware-inspector[hidden]{display:none}
.hardware-inspector-head{position:sticky;top:-12px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:-12px -12px 2px;padding:10px 12px;border-bottom:1px solid #e6edf5;border-radius:14px 14px 0 0;background:rgba(255,255,255,.97);color:#263a53;font-size:13px}
.hardware-inspector-head button{width:28px;height:28px;padding:0;border:0;border-radius:8px;background:#f0f4f8;color:#65758a;font-size:20px;line-height:1;cursor:pointer}
.hardware-category-label{display:grid;gap:5px;margin-top:2px;color:#68788f;font-size:11px}
.hardware-category-select{width:100%;min-height:36px;padding:6px 32px 6px 10px;border:1px solid #d9e2ed;border-radius:9px;background:#fff;color:#31445e;font:inherit;font-size:12px;outline:none}
.hardware-category-select:focus{border-color:#80aee8;box-shadow:0 0 0 3px rgba(67,133,213,.13)}
.hardware-catalog-more{grid-column:1/-1;min-height:38px;padding:8px 12px;border:1px dashed #afc4de;border-radius:10px;background:#f5f9ff;color:#356ba8;font:inherit;font-size:12px;cursor:pointer}
.hardware-catalog-more:hover{border-color:#6f9ed7;background:#eaf3ff}
@media(max-width:760px){.hardware-inspector{top:54px;right:8px;width:min(300px,calc(100% - 16px));max-height:calc(100% - 68px)}.hardware-category-select{min-height:40px;font-size:14px}.hardware-catalog-more{min-height:42px}}
.hardware-inspector{z-index:1000;top:12px;pointer-events:auto}
.hardware-wire-color-field{display:grid;gap:7px;color:#68788f;font-size:11px}
.hardware-wire-colors{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hardware-wire-colors button{width:28px;height:28px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--wire-swatch);box-shadow:0 0 0 1px #cbd5e1;cursor:pointer;transition:transform .14s,box-shadow .14s}
.hardware-wire-colors button[data-wire-color="#222222"]{--wire-swatch:#222222}
.hardware-wire-colors button[data-wire-color="#e53935"]{--wire-swatch:#e53935}
.hardware-wire-colors button[data-wire-color="#2878e8"]{--wire-swatch:#2878e8}
.hardware-wire-colors button[data-wire-color="#2e9d62"]{--wire-swatch:#2e9d62}
.hardware-wire-colors button[data-wire-color="#f2b632"]{--wire-swatch:#f2b632}
.hardware-wire-colors button[data-wire-color="#8b5cf6"]{--wire-swatch:#8b5cf6}
.hardware-wire-colors button:hover{transform:scale(1.12)}
.hardware-wire-colors button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #4a83c6}
/* Keep the property panel in the dialog top layer, above every SVG device and wire. */
.hardware-diagram-dialog{position:relative}
.hardware-diagram-dialog>.hardware-inspector{position:absolute;z-index:2147483000;top:72px;left:18px;right:auto;width:min(320px,calc(100% - 36px));max-height:calc(100% - 150px);isolation:isolate;contain:paint}
.hardware-wire-colors button{display:inline-block!important;appearance:none!important;-webkit-appearance:none!important;background-color:var(--wire-swatch)!important;border:2px solid #fff!important;min-width:28px!important;min-height:28px!important;box-shadow:0 0 0 1px #cbd5e1!important}
.hardware-wire-colors button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #4a83c6!important}
@media(max-width:760px){.hardware-diagram-dialog>.hardware-inspector{top:54px;left:8px;width:min(300px,calc(100% - 16px));max-height:calc(100% - 120px)}}
/* SVG paint order follows DOM order: conductors render above the devices and stay selectable. */
.hardware-wire-underlay{pointer-events:none}
.hardware-wire-path{pointer-events:stroke;cursor:crosshair;filter:drop-shadow(0 0 .35px #1118)}
.hardware-bendpoint{pointer-events:all}
/* Fritzing-like wire states: connected terminals, live snap targets, and selected bend controls. */
.hardware-pin-target.connected{display:block!important;fill:#dcfce9!important;stroke:#18845c!important;stroke-width:1.5!important;opacity:.95!important;r:4.5}
.hardware-preview-viewport.is-connecting .hardware-pin-target{display:block!important;fill:#e2f3ff!important;stroke:#4a88c9!important;stroke-width:1.25!important;opacity:.9!important;r:4}
.hardware-preview-viewport.is-connecting .hardware-pin-target:hover,.hardware-preview-viewport.is-connecting .hardware-pin-target.pending{fill:#ffc857!important;stroke:#bd7900!important;stroke-width:2!important;opacity:1!important;r:6}
.hardware-wire-path{transition:filter .12s ease,stroke-width .12s ease}
.hardware-wire-path:hover,.hardware-wire-path.selected{filter:drop-shadow(0 0 2px #1d5ea1aa);stroke-width:calc(3px + 1px)}
.hardware-bendpoint{opacity:0;pointer-events:none;transition:opacity .12s ease, r .12s ease}
.hardware-bendpoint.selected{opacity:1;pointer-events:all;fill:#fff;stroke:#2878e8;stroke-width:2.5;r:5}
.hardware-wire-underlay[data-hardware-wire]{pointer-events:none}
/* Connection cues belong to the interactive SVG canvas, not the viewport wrapper. */
.hardware-preview.is-connecting .hardware-pin-target{display:block!important;fill:#e2f3ff!important;stroke:#4a88c9!important;stroke-width:1.25!important;opacity:.9!important;r:4}
.hardware-preview.is-connecting .hardware-pin-target:hover,.hardware-preview.is-connecting .hardware-pin-target.pending,.hardware-preview.is-connecting .hardware-pin-target.snap-target{fill:#ffc857!important;stroke:#bd7900!important;stroke-width:2!important;opacity:1!important;r:6}

.data-structure-hint.error{color:#b23d4b;font-weight:600}.data-structure-dialog textarea#dataStructureEdges{min-height:112px;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.data-structure-dialog #dataStructureEdgesHint{color:#8491a3;font-size:11px;line-height:1.45}

/* Keep the top-right close control consistent across every dialog. */
dialog :is(button[aria-label*="关闭"],button[id^="close"]:not(#closeBoardAiPreview),button[data-close-dialog]){display:grid;place-items:center;flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:1px solid rgba(204,218,237,.92);border-radius:50%;background:linear-gradient(145deg,#fff,#edf4fd);color:#536983;font-size:0;font-weight:400;line-height:1;box-shadow:0 4px 12px rgba(37,62,100,.1);transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
dialog :is(button[aria-label*="关闭"],button[id^="close"]:not(#closeBoardAiPreview),button[data-close-dialog])::after{content:"×";font-family:Arial,sans-serif;font-size:25px;font-weight:300;line-height:1}
dialog :is(button[aria-label*="关闭"],button[id^="close"]:not(#closeBoardAiPreview),button[data-close-dialog]):hover{transform:rotate(90deg) scale(1.06);border-color:#a9c4e8;background:#eaf3ff;color:#2e68ad;box-shadow:0 7px 16px rgba(37,90,156,.18)}
dialog :is(button[aria-label*="关闭"],button[id^="close"]:not(#closeBoardAiPreview),button[data-close-dialog]):focus-visible{outline:3px solid rgba(67,132,220,.3);outline-offset:2px}
@media(max-width:600px){dialog :is(button[aria-label*="关闭"],button[id^="close"]:not(#closeBoardAiPreview),button[data-close-dialog]){flex-basis:40px;width:40px;min-width:40px;height:40px;min-height:40px}}
.course-data-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}.course-data-actions button{min-height:40px;padding:0 18px;border-radius:999px;font-size:12px;font-weight:650}.course-data-settings #coursePackageStatus{min-height:17px}
.project-settings-dialog{overflow-y:auto;overscroll-behavior:contain}.admin-settings-section{background:linear-gradient(145deg,#fff,#f6f9ff)}.admin-login-form,.admin-manage-form{display:grid;gap:8px}.admin-login-form label,.admin-manage-form label{color:#68778d;font-size:12px}.admin-login-form>div,.admin-password-control,.admin-form-actions{display:flex;align-items:center;gap:8px}.admin-login-form input,.admin-manage-form input{box-sizing:border-box;width:100%;min-width:0;height:38px;padding:0 11px}.admin-login-form>div>input,.admin-password-control>input{flex:1}.admin-login-form button,.admin-form-actions button,.admin-password-control button{flex:none}.admin-login-status{min-height:16px;color:#61718a!important}.admin-login-status.error{color:#b43f45!important}.admin-dashboard-head{display:flex;align-items:center;gap:7px;margin-top:5px}.admin-dashboard-head>span{flex:1;color:#65748b;font-size:11px}.admin-dashboard-head b{color:#37557d}.admin-dashboard-head button{min-height:31px!important;padding:4px 10px!important;font-size:11px}.admin-settings-section h4{margin:9px 0 2px;color:#42536c;font-size:12px}.admin-room-list{display:grid;gap:8px;max-height:32dvh;overflow:auto;padding:1px}.admin-room-card{display:grid;gap:5px;padding:10px;border:1px solid #e4eaf3;border-radius:12px;background:rgba(255,255,255,.82)}.admin-room-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.admin-room-card-head>b{min-width:0;overflow:hidden;color:#354862;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.admin-room-card-head>span{flex:none;padding:3px 7px;border-radius:999px;background:#f0f3f8;color:#8792a2;font-size:10px}.admin-room-card-head>span.active{background:#e9f7f1;color:#27805f}.admin-room-card>p,.admin-empty{margin:0!important;color:#77859a;font-size:10px;line-height:1.5}.admin-room-card .admin-room-quota{color:#4a668b}.admin-room-select{justify-self:end;min-height:28px!important;padding:3px 9px!important;font-size:10px!important}.admin-manage-form{margin-top:5px;padding-top:12px;border-top:1px solid #e8edf4}.admin-manage-form>p{margin:0;color:#8290a4;font-size:10px;line-height:1.5}.admin-form-actions{margin-top:2px}.admin-form-actions button,.admin-password-control button{min-height:34px!important;padding:5px 11px!important;font-size:11px!important}.admin-manage-form>button.quiet{justify-self:start;min-height:32px!important;padding:5px 10px!important;font-size:11px!important}@media(max-width:600px){.admin-login-form>div,.admin-password-control{align-items:stretch}.admin-login-form button,.admin-password-control button{padding-inline:9px!important;font-size:10px!important}.admin-room-list{max-height:27dvh}.admin-room-card{padding:8px}}

.board-ai-task-panel{margin:4px 16px 8px;padding:10px 12px;border:1px solid #dce6f2;border-radius:12px;background:linear-gradient(135deg,#f4f8ff,#fbfaff)}.board-ai-task-panel[hidden],.board-lesson-options[hidden]{display:none!important}.board-ai-goal{display:flex;align-items:center;gap:12px;color:#53647b;font-size:12px;font-weight:600}.board-ai-goal select,.board-lesson-options select{height:36px;min-width:0;padding:0 10px;border:1px solid #dbe4f0;border-radius:9px;background:#fff;color:#34445a;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.board-ai-goal select{flex:1}.board-lesson-options{padding-top:10px}.board-lesson-options .teaching-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.board-lesson-options .teaching-fields label,.lesson-scope-label{display:grid;gap:6px;color:#68788e;font-size:11px}.board-lesson-options .lesson-scope-label{margin-top:9px}.board-lesson-options>p{margin:8px 0 0;color:#8994a5;font-size:10px;line-height:1.5}@media(max-width:700px){.board-ai-task-panel{margin:4px 10px 7px;padding:9px}.board-lesson-options .teaching-fields{grid-template-columns:1fr 1fr}}@media(max-width:420px){.board-lesson-options .teaching-fields{grid-template-columns:1fr}}

.board-content-task-label{display:grid;gap:6px;margin:0 0 9px;color:#68788e;font-size:11px}.board-content-generation-options[hidden]{display:none!important}

[data-content-option][hidden]{display:none!important}

#boardContentOptions[data-task="quiz"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}#boardContentOptions[data-task="quiz"] .board-content-task-label,#boardContentOptions[data-task="quiz"]>.lesson-scope-label,#boardContentOptions[data-task="quiz"]>p{grid-column:1/-1}#boardContentOptions[data-task="quiz"] .board-content-generation-options{display:contents}.board-oj-import details>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}.board-oj-import details>summary::-webkit-details-marker{display:none}.board-oj-import details>summary::after{content:"⌄";color:#72839b;transition:transform .18s}.board-oj-import details[open]>summary::after{transform:rotate(180deg)}.board-oj-import details[open]>summary{padding-bottom:7px;border-bottom:1px solid #e4ebf4}
@media(max-width:420px){#boardContentOptions[data-task="quiz"]{grid-template-columns:minmax(0,1fr)}}

.board-content-advanced{margin:8px 0 2px;padding:8px 10px;border:1px solid #e3eaf4;border-radius:10px;background:rgba(255,255,255,.55)}.board-content-advanced>summary{cursor:pointer;color:#60728c;font-size:11px;font-weight:650;list-style:none}.board-content-advanced>summary::-webkit-details-marker{display:none}.board-content-advanced>summary::after{content:"⌄";float:right;transition:transform .18s}.board-content-advanced[open]>summary::after{transform:rotate(180deg)}.board-content-advanced .teaching-fields:first-of-type{margin-top:9px}

.oj-recommendation-options{margin:8px 0;padding:9px 10px;border:1px solid #e2eaf4;border-radius:10px;background:rgba(255,255,255,.62)}.oj-recommendation-options[hidden]{display:none!important}.oj-recommendation-options .teaching-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}.oj-recommendation-options label{display:grid;gap:6px;color:#68788e;font-size:11px}.oj-recommendation-options select{height:36px;min-width:0;padding:0 10px;border:1px solid #dbe4f0;border-radius:9px;background:#fff;color:#34445a;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.oj-recommendation-options p{margin:8px 0 0;color:#8390a4;font-size:10px;line-height:1.5}@media(max-width:420px){.oj-recommendation-options .teaching-fields{grid-template-columns:1fr}}

/* Per-page whiteboard animation editor and synchronized playback controls. */
.board-animation-dialog{width:min(660px,calc(100vw - 24px));max-height:min(82dvh,760px);padding:22px;overflow:hidden;display:none;flex-direction:column;gap:12px}.board-animation-dialog[open]{display:flex}.board-animation-dialog header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #e7edf5}.board-animation-dialog header>div{display:grid;gap:4px}.board-animation-dialog header small{color:#6684aa;font-size:11px}.board-animation-dialog h3{margin:0;font-size:20px;color:#27364c}.board-animation-dialog>p{margin:0;color:#718097;font-size:12px;line-height:1.6}.board-animation-dialog .animation-duration{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#5c6d84;font-size:12px}.board-animation-dialog select{min-width:150px;height:36px;border:1px solid #dbe4f0;border-radius:9px;background:#fff;color:#34445a;padding:0 10px}.board-animation-list{display:grid;gap:7px;overflow:auto;min-height:80px;padding:2px 2px 6px}.board-animation-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5ebf4;border-radius:11px;background:rgba(255,255,255,.68)}.board-animation-order{color:#91a0b4;font-variant-numeric:tabular-nums;font-size:11px;text-align:center}.board-animation-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#40516a;font-size:12px}.board-animation-row select{min-width:118px;height:32px;font-size:11px}.board-animation-move{display:flex;gap:3px}.board-animation-move button{width:28px;min-width:28px;height:28px;min-height:28px;padding:0!important;border-radius:7px!important}.board-animation-dialog footer{height:auto!important;flex:none;display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid #e7edf5}.board-animation-player{position:fixed;z-index:55;left:50%;bottom:calc(58px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(214,226,242,.9);border-radius:14px;background:rgba(250,253,255,.92);box-shadow:0 10px 30px rgba(36,58,91,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.board-animation-player[hidden]{display:none}.board-animation-player button{height:34px;min-width:34px;padding:0 9px;border:1px solid #e1e8f1;border-radius:9px;background:#fff;color:#53647b;cursor:pointer}.board-animation-player button.primary{padding:0 13px;background:linear-gradient(135deg,#4388e8,#286bd0);border-color:#3478d5;color:white}.board-animation-player span{padding:0 6px;color:#8491a4;font-size:11px;white-space:nowrap}@media(max-width:520px){.board-animation-dialog{padding:17px}.board-animation-row{grid-template-columns:22px minmax(0,1fr) auto}.board-animation-row>.board-animation-move{grid-column:3;grid-row:1}.board-animation-row>select{grid-column:2/4;width:100%}.board-animation-player{max-width:calc(100vw - 16px);gap:3px;padding:6px}.board-animation-player button{min-width:30px;padding:0 6px}.board-animation-player span{font-size:10px}}

/* Animation controls stay tucked away until the teacher asks for them. */
.page-animation-toggle{width:27px!important;min-width:27px!important;height:28px!important;min-height:28px!important;padding:0!important;font-size:17px!important;color:#54749a!important;border-radius:8px!important;background:rgba(234,241,251,.8)!important;touch-action:manipulation}.page-animation-toggle.active{color:#246fc8!important;background:#e3efff!important}.projector-animation-toggle{display:none}body.projector .projector-animation-toggle{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:54;display:flex;align-items:center;justify-content:center;gap:6px;min-width:50px;min-height:44px;padding:0 13px;border:1px solid rgba(219,229,244,.72);border-radius:999px;background:rgba(247,250,255,.78);color:#42668e;font-size:13px;box-shadow:0 4px 16px rgba(29,47,74,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:.78;transition:opacity .18s,transform .18s;touch-action:manipulation}body.projector .projector-animation-toggle:hover,body.projector .projector-animation-toggle:focus-visible,body.projector .projector-animation-toggle.active{opacity:1;transform:scale(1.04)}body.projector .projector-animation-toggle[hidden]{display:none!important}body.projector .board-animation-player{bottom:calc(70px + env(safe-area-inset-bottom))}body.projector .board-animation-player[hidden]{display:none!important}@media(max-width:700px){body.projector .projector-animation-toggle{right:max(10px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));min-width:48px;min-height:46px;padding:0 12px}}
@media(prefers-reduced-motion:reduce){.projector-animation-toggle{transition:none!important}}

/* Keep the narration shortcut legible and portal mobile tool menus above scroll containers. */
.pagebar #openPageNarration{flex:none;min-width:54px;padding:0 7px;white-space:nowrap;font-size:11px;touch-action:manipulation}
.toolbar-popover.toolbar-popover-portal{position:fixed;z-index:10000;max-width:calc(100vw - 16px);max-height:min(62vh,500px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.toolbar-popover.toolbar-popover-portal[hidden]{display:none!important}
.toolbar-popover.toolbar-popover-portal button{touch-action:manipulation}

/* Shared 16:9 board stage keeps geometry and handwriting aligned across displays. */
#board{background:#f1f4f8}
#boardAiAssistantBtn[aria-disabled="true"]{filter:grayscale(.5);opacity:.68}
/* Tablet code workspace: give the editor room and let its action controls wrap cleanly. */
@media (hover:none) and (pointer:coarse) and (min-width:701px) and (max-width:1100px){
  .workspace.split-open{--code-pane-width:48%!important}
  .workspace.split-open .code-panel{border-radius:14px}
  .workspace.split-open .code-head{height:auto;min-height:48px;flex-wrap:wrap;justify-content:flex-start;gap:5px;padding:7px 9px}
  .workspace.split-open .code-head>div{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
  .workspace.split-open .code-head .language-picker{font-size:11px}
  .workspace.split-open .code-head .suggest-trigger{min-height:36px;padding:6px 8px;font-size:11px;touch-action:manipulation}
  .workspace.split-open .code-head #closeCode{margin-left:auto;min-width:36px;min-height:36px}
  .workspace.split-open .code-tabs{min-height:40px;padding:4px 6px}
  .workspace.split-open .code-tab{min-height:34px;padding:5px 9px}
}
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:900px){
  .workspace.split-open .code-panel.open{position:fixed;inset:calc(env(safe-area-inset-top) + 119px) 8px calc(env(safe-area-inset-bottom) + 25px);width:auto;max-width:none;z-index:20;border-radius:14px}
  .workspace.split-open .splitter{display:none}
  .workspace.split-open .code-head{height:auto;min-height:50px;flex-wrap:wrap;gap:5px;padding:7px 9px}
  .workspace.split-open .code-head>div{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
  .workspace.split-open .code-head .suggest-trigger{min-height:38px;padding:6px 9px;font-size:11px;touch-action:manipulation}
  .workspace.split-open .code-head #closeCode{margin-left:auto;min-width:40px;min-height:40px}
}

/* iPad projector tools are hidden by default and can be recalled with this touch handle. */
.projector-toolbar-toggle{display:none}
body.projector .projector-toolbar-toggle{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);z-index:110;display:flex;align-items:center;justify-content:center;gap:5px;min-width:54px;min-height:48px;padding:0 10px;border:1px solid rgba(218,229,245,.8);border-radius:15px;background:rgba(247,250,255,.82);color:#405b7c;font-size:18px;box-shadow:0 5px 18px rgba(32,52,82,.17);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);touch-action:manipulation;opacity:.76;transition:opacity .18s,transform .18s}
body.projector .projector-toolbar-toggle span{font-size:10px;white-space:nowrap}
body.projector .projector-toolbar-toggle:active,body.projector .projector-toolbar-toggle[aria-pressed="true"]{opacity:1;transform:scale(.96)}
body.projector.projector-controls-visible .topbar,body.projector.projector-controls-pinned .topbar{position:fixed;z-index:90;top:0;left:0;right:0;display:flex;padding-right:82px}
body.projector.projector-controls-visible .toolbar,body.projector.projector-controls-pinned .toolbar{position:fixed;z-index:89;top:calc(62px + env(safe-area-inset-top));left:10px;right:10px;display:flex;margin:0;height:58px}
body.projector.projector-controls-visible footer,body.projector.projector-controls-pinned footer{position:fixed;z-index:89;left:0;right:0;bottom:0;display:flex}
@media(max-width:700px){body.projector.projector-controls-visible .topbar,body.projector.projector-controls-pinned .topbar{height:55px;padding:0 72px 0 10px}body.projector.projector-controls-visible .toolbar,body.projector.projector-controls-pinned .toolbar{top:calc(55px + env(safe-area-inset-top));left:6px;right:6px;height:56px;margin:0;padding:0 6px;gap:5px}body.projector.projector-controls-visible footer,body.projector.projector-controls-pinned footer{display:none}}
@media(prefers-reduced-motion:reduce){body.projector .projector-toolbar-toggle{transition:none}}

/* Give the embedded draw.io editor a full touch viewport and keep its controls reachable on iPad. */
@media (hover:none) and (pointer:coarse){
  .flowchart-dialog{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;inset:0}
  .flowchart-dialog[open]{display:flex}
  .flow-head,.flow-tabs{flex:none}
  .drawio-pane{flex:1;min-height:0;padding:8px;gap:7px}
  .drawio-toolbar{flex:none;min-height:0;flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .drawio-toolbar span{flex:1 1 100%;line-height:1.4}
  .drawio-toolbar>button{min-height:42px;touch-action:manipulation}
  .drawio-pane iframe{flex:1 1 auto;min-height:0;border-radius:8px;touch-action:manipulation}
}

/* Keep the projector animation entry clear of the student answer button at bottom-right. */
body.projector .projector-animation-toggle{left:max(12px,env(safe-area-inset-left));right:auto}
@media(max-width:700px){body.projector .projector-animation-toggle{left:max(10px,env(safe-area-inset-left));right:auto}}
/* Server-side AI credentials are only editable by a server administrator. */
#aiKeySettingsSection[hidden]{display:none!important}