:root{color-scheme:dark;--bg:#1c1c1c;--surface:#242424;--raised:#303030;--text:#fff;--muted:#bcbcbc;--line:#404040}body.light{color-scheme:light;--bg:#f4f5f7;--surface:#fff;--raised:#eee;--text:#20242a;--muted:#5e6672;--line:#dce1e7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif}header{display:flex;align-items:center;gap:24px;padding:16px 22px;border-bottom:1px solid var(--line)}.brand{letter-spacing:3px;font-size:22px}button,input,select{font:inherit;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:7px 9px;max-width:100%}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{border-color:#14b8a6}#theme{margin-left:auto}.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 120px)}aside{display:flex;flex-direction:column;padding:16px;background:var(--surface);border-right:1px solid var(--line)}h2{font-size:12px;color:var(--muted);font-weight:500;margin:16px 0 10px}h1{font-size:23px;font-weight:500}.muted{color:var(--muted);font-size:12px}.bottom{margin-top:auto;padding-top:30px}.timer{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px}form{display:grid;gap:8px;margin-top:20px}label{display:grid;gap:4px}nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line)}nav label{display:flex;align-items:center;gap:8px}#panes{display:grid;grid-template-columns:1fr 1fr;min-height:500px}.pane{min-width:0;padding:18px}.pane+.pane{border-left:1px solid var(--line)}.pane-head{display:flex;gap:8px;flex-wrap:wrap}.content{color:var(--muted);overflow-wrap:anywhere}.node{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;text-align:left;margin:3px 0;overflow-wrap:anywhere}.node svg{width:21px;height:21px;flex-shrink:0;color:#bf8aff}.node.folder svg{width:25px;height:25px;color:#64b4ff;fill:#64b4ff33}.node.board svg{color:#46d5c2}#tree ul{list-style:none;padding-left:12px;margin:0}#tree>ul{padding-left:0}#pins button{display:block;margin-bottom:5px}#status,footer{padding:10px 20px;color:var(--muted);font-size:12px}footer{border-top:1px solid var(--line)}#next{display:none}@media(max-width:800px){.shell{grid-template-columns:190px minmax(0,1fr)}#panes{grid-template-columns:1fr!important}.pane[hidden]{display:none}#next{display:block}}@media(max-width:500px){.shell{grid-template-columns:1fr}header{gap:10px;flex-wrap:wrap}aside{border-right:0}#panes{min-height:300px}}

[hidden]{display:none!important}

.material-views{display:flex;gap:6px;margin:12px 0}
.material-surface{padding:0}
.material-paper{background:var(--surface);color:var(--text);min-width:0}
.material-surface.on-board{padding:28px 18px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px;border:1px solid var(--line);min-height:400px}
.on-board .material-paper{padding:18px;border:1px solid var(--line);border-radius:6px;max-width:720px;margin:auto}
.material-board-note{font-size:12px;color:var(--muted)}

.pane-head{align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.material-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pane-head .material-views{margin:0;gap:4px}
.pane-head button{font-size:12px;padding:6px 8px}
.pane-head .close-pane{margin-left:auto}
.content details[open]{padding:12px;border:1px solid var(--line);border-radius:6px}

button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.control-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pins button{display:flex;max-width:100%;text-align:left;overflow-wrap:anywhere}
.node{justify-content:flex-start}
.pane{padding:12px}
.pane h1{margin:10px 0;font-size:20px}
.material-board-note{margin:6px 0}
.pane-head{gap:5px;padding-bottom:8px}
.pane-head button{min-height:32px}

header{gap:16px;flex-wrap:wrap}
header .layout-controls{margin-left:auto;padding:0;border:0;gap:6px;min-width:0}
header .layout-controls button,header .layout-controls select{font-size:12px;padding:6px 8px}
header .layout-controls label{font-size:12px}
header #theme{margin-left:0}
@media(max-width:650px){header .layout-controls{margin-left:0;flex-wrap:wrap}}

.pane-head .pane-material-title{font-size:16px;font-weight:500;margin:0 8px 0 0;max-width:260px;overflow-wrap:anywhere}
.pane-head .choose{font-size:0;gap:0;padding:6px}
.pane-head .choose .control-icon{width:16px;height:16px}
.node.material-open{background:var(--raised);border-radius:6px}
.node.material-active{box-shadow:inset 3px 0 #14b8a6}
.material-paper textarea{min-height:clamp(320px,calc(100dvh - 260px),1000px)!important}
.pane-head{position:relative}
@media(max-width:650px){.pane-head .pane-material-title{max-width:100%;flex-basis:100%}.material-paper textarea{min-height:320px!important}}

.pane-material-title.has-unsaved::after{content:" •";color:#f5bd4f;font-weight:700}
.node.folder[aria-expanded="false"] svg{opacity:.7}

.board-editor{position:relative;margin-top:8px;min-width:0}
.board-canvas{display:block;width:100%;height:clamp(360px,calc(100dvh - 270px),1000px);border:1px solid var(--line);border-radius:5px;background-color:var(--bg);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px;touch-action:none;user-select:none;overflow:hidden}
.board-canvas:focus-visible{outline:2px solid #14b8a6;outline-offset:1px}
.board-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;padding-top:4px}
.material-controls:has(.board-tools:not([hidden])){display:contents}
.board-tools{order:10;flex-basis:100%}
.board-zoom,.board-object-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-left:6px;border-left:1px solid var(--line)}
.board-tools input[type=color]{padding:2px;width:30px;height:30px}
.board-tools input[type=number]{width:65px;padding:4px;font-size:12px}
.board-tools select{font-size:12px;padding:4px}
.board-object-tools label{display:flex;align-items:center;gap:3px;font-size:11px}
.board-state{font-size:12px;color:var(--muted);padding-top:5px}
.board-tools button[aria-pressed=true]{background:color-mix(in srgb,var(--raised),#14b8a6 20%)}

.board-document-card{height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0002;font:16px/1.55 system-ui,sans-serif}
.board-document-heading{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:20px;overflow-wrap:anywhere;cursor:move;flex-shrink:0}
.board-document-body{padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;flex:1;min-height:0;user-select:text;cursor:text}

/* Keep the canvas dominant; controls float within its own panel. */
.board-dock{position:absolute;bottom:36px;left:12px;right:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;pointer-events:none}
.board-dock>*{pointer-events:auto}
.board-dock .board-tools{width:auto;flex-basis:auto;order:0;padding:6px;gap:3px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 18px #0004}
.board-dock .board-zoom{padding:5px;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 18px #0003}
.board-zoom input{width:58px;font-size:12px;padding:5px}
.board-dock button,.board-object-tools button{padding:6px;min-height:30px;background:transparent;border-color:transparent}
.board-dock button:hover,.board-object-tools button:hover{background:var(--raised)}
.board-dock button[aria-pressed=true]{background:var(--raised);border-color:#14b8a6;color:#40d9c7}
.board-editor>.board-object-tools{position:absolute;right:12px;top:12px;max-width:calc(100% - 24px);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 18px #0003;gap:4px}
.board-object-tools input{width:62px;padding:4px;font-size:12px}
.board-canvas{height:clamp(400px,calc(100dvh - 200px),1400px);border-radius:3px}
.board-state{padding:4px 2px;font-size:11px}
@media(max-width:800px){.board-dock{left:8px;right:8px;gap:6px}.board-dock .board-tools{gap:2px}.board-dock button{padding:5px}.board-canvas{height:calc(100dvh - 230px);min-height:400px}}

.space-presence{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.presence-person{display:inline-flex;gap:5px;align-items:center;max-width:170px}
.presence-person>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-dot{width:7px;height:7px;border-radius:50%;background:#777;flex:none}
.presence-person[data-online=true] .presence-dot{background:#22c55e}
.presence-person[data-online=unknown] .presence-dot{background:#e5aa39}