:root{--font-family: "Inter", Avenir, Helvetica, Arial, sans-serif;--font-size: 16px;--space-s: .5rem;--space-m: 1rem;--space-l: 2rem;--color-background: #f9fafb;--color-surface: #ffffff;--color-text: #222222;--color-muted: #666666;--color-primary: #6366f1;--color-border: #e5e7eb;--overlay-color: rgba(255, 255, 255, .6);--accent-color: var(--color-primary);--connector-color: #f3aeac;--edge-color: var(--color-primary);--button-color: var(--color-surface);--button-active-color: #ececec;--button-color-border: #333;--menu-background-color: var(--color-surface);--menu-text-color: var(--color-text);--menu-hover-color: #f1f1f1;--menu-hover-text-color: var(--color-text);--card-color: var(--color-surface);--card-text-color: #333;--card-hover-color: #f8f8f8;--card-border: #555;--shadow-color: rgba(0, 0, 0, .15);--grid-dot-color: #bdbdbd;--radius: 6px}@media (prefers-color-scheme: dark){:root{--color-background: #0f172a;--color-surface: #1e293b;--color-text: #f4f4f4;--color-border: #555;--color-muted: #9ca3af;--color-primary: #8b5cf6;--overlay-color: rgba(0, 0, 0, .3);--accent-color: var(--color-primary);--edge-color: var(--color-primary);--menu-background-color: var(--color-surface);--menu-text-color: var(--color-text);--menu-hover-color: #374151;--menu-hover-text-color: var(--color-text);--card-color: #dadada;--button-color: #334155;--button-active-color: #475569;--button-color-border: #475569;--color-border: var(--color-border);--grid-dot-color: #334155}}html,body{margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size);overscroll-behavior:none;color:var(--color-text);background-color:var(--color-background);-webkit-user-select:none;user-select:none;width:100vw;height:100vh}html{background-color:transparent;overflow:hidden}body{overflow:auto}*{box-sizing:border-box}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}button,input,textarea{font-family:inherit;font-size:inherit}button{background:var(--button-color);border:1px solid var(--button-color-border);border-radius:var(--radius);padding:var(--space-s) var(--space-m);cursor:pointer;transition:background-color .2s;color:var(--color-text)}button:hover:not([disabled]){background:var(--menu-hover-color);color:var(--menu-hover-text-color)}button:active:not([disabled]){background:var(--button-active-color)}button[disabled]{cursor:not-allowed;opacity:.7}input,textarea{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-s) var(--space-s)}.Board{position:relative;z-index:1;background-image:radial-gradient(circle,var(--grid-dot-color) 1px,transparent 1px);background-size:20px 20px;background-color:var(--overlay-color)}.Board>svg{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;pointer-events:none}.Board_locked,.Board_locked>svg path{pointer-events:none}.Board_locked a{pointer-events:auto}.Board_locked .ColorPicker{display:none}.Sidebar_locked .Sidebar_toggle:before{content:"🔒";position:absolute;top:-5px;right:-5px;font-size:12px;background:var(--button-color);border:1px solid var(--button-color-border);border-radius:50%;padding:2px;width:16px;height:16px}.DraggableNode{position:absolute;z-index:3}.DraggableNode_selected .Card{outline:2px solid var(--accent-color)}.DraggableNode_remoteSelected .Card{outline:2px solid var(--remote-selection-color)}.Card{border:1px solid var(--card-border);border-radius:6px;background-color:var(--card-color)}.DraggableNode_content{transition:transform .2s}.DraggableNode_background{opacity:.5;z-index:2}.DraggableNode:not(.DraggableNode_background) .DraggableNode_content:hover{transform:scale(1.02)}@keyframes wobble{0%{transform:scale(1.02) rotate(0)}25%{transform:scale(1.02) rotate(-.5deg)}50%{transform:scale(1.02) rotate(0)}75%{transform:scale(1.02) rotate(.5deg)}}.DraggableNode:not(.DraggableNode_background) .DraggableNode_content:active{animation:wobble .5s .2s infinite}.Editable{min-width:70px;min-height:32px;border-radius:inherit;padding:8px;overflow:auto;outline:none;color:var(--card-text-color)}.Editable:focus{outline:none}.Editable h1,.Editable h2,.Editable h3,.Editable h4,.Editable h5{margin:.5em 0;font-optical-sizing:auto}.Editable h1+br,.Editable h2+br,.Editable h3+br,.Editable h4+br,.Editable h5+br{display:none}.Editable *:first-child{margin-top:0}.Editable *:last-child{margin-bottom:0}.Editable ol,.Editable ul{padding-left:1.2em}.Editable img{display:block;width:100%;height:auto;pointer-events:none;border-radius:inherit}.Editable a{color:var(--edge-color);text-decoration:underline}.Edge path{stroke:var(--edge-color);stroke-width:4;fill:none;pointer-events:all;cursor:pointer}.Edge path:hover{stroke:var(--accent-color);stroke-width:6}.Edge circle{fill:var(--connector-color)}.Connector{position:absolute;z-index:3;left:100%;top:50%;margin-top:-8px;margin-left:-8px;border-radius:50%;border:none;background-color:var(--connector-color)!important;width:16px;height:16px;padding:0;cursor:pointer;transition:transform .2s,opacity .2s;opacity:0}.Connector:hover{transform:scale(1.2)}.DraggableNode:hover .Connector{opacity:1}.Resizer{position:absolute;z-index:1;bottom:0;right:0;-webkit-user-select:none;user-select:none;width:100%;height:4px;cursor:ns-resize}.Resizer:after{content:"";display:block;background:linear-gradient(135deg,transparent 0%,transparent 50%,var(--color-border) 50%,var(--color-border) 100%);width:10px;height:10px;position:absolute;z-index:1;bottom:2px;right:2px;cursor:nwse-resize;border-radius:0 0 4px}.Sidebar{position:fixed;top:0;right:0;z-index:100;height:100vh;display:flex;pointer-events:none}.Sidebar input{background:#ffffff80;border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-s) var(--space-s);font-size:var(--font-size);display:block;height:36px;margin:var(--space-s) 0;width:12em;opacity:.8;transition:opacity .2s;pointer-events:all}.Sidebar input:focus{opacity:1}.Sidebar button{pointer-events:all}.Sidebar button[disabled]{cursor:not-allowed}.Sidebar button:not([disabled]):hover{background:var(--menu-hover-color);color:var(--menu-hover-text-color)}.Sidebar button:not([disabled]):active{background:var(--button-active-color)}button.Sidebar_toggle{width:40px;height:40px;padding:0;border:none;margin:var(--space-s);transition:transform .2s;background:url(/logo.png) center center no-repeat;background-size:100%;transition:filter .2s;filter:brightness(1)}button.Sidebar_toggle:hover{background:url(/logo.png) center center no-repeat!important;background-size:100%!important;filter:brightness(1.2)}@media (prefers-color-scheme: dark){button.Sidebar_toggle:hover,button.Sidebar_toggle{background-color:#fff!important;background-size:107%!important}}.Sidebar_drawer .Sidebar_toggle{position:absolute;z-index:1;right:0;top:0}.Sidebar_actions{display:flex;flex-direction:row;gap:var(--space-s);padding:var(--space-s) var(--space-m)}.ForkButton{background:var(--button-color);border:1px solid var(--button-color-border);border-radius:8px;padding:.5em 1em;margin:0 var(--space-s);cursor:pointer;font-size:18px}.Sidebar_drawer{background:var(--menu-background-color);color:var(--menu-text-color);width:300px;height:100vh;position:absolute;right:0;top:0;z-index:1;transition:transform .2s;display:flex;flex-direction:column;gap:var(--space-s);padding-bottom:var(--space-s);pointer-events:all}.Sidebar h1{margin:var(--space-m) var(--space-m) var(--space-s)}.Sidebar h1 a{color:inherit}.Sidebar hr{margin:0;padding:0;border:none;border-top:1px solid var(--color-border)}.Sidebar ul{padding:0 var(--space-m);margin:0;list-style:none}.Sidebar li{margin:0;padding:0}.Sidebar li a{display:block;padding:var(--space-s) var(--space-s);color:var(--menu-text-color);text-decoration:none;border-radius:var(--radius);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Sidebar_current{display:block;padding:var(--space-s) var(--space-s);font-weight:700;color:var(--menu-text-color);border-radius:var(--radius);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Sidebar li a:hover{background:var(--menu-hover-color);color:var(--menu-hover-text-color)}.Sidebar_scrollable{overflow:auto;flex:1;display:flex;flex-direction:column}.Sidebar_empty{flex:1}.Sidebar_links{flex:1;padding:0}.Sidebar_pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-s);padding:var(--space-s) var(--space-m)}.Sidebar_pagination button{padding:var(--space-s) var(--space-m);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius);cursor:pointer}.Sidebar_pagination button:disabled{opacity:.5;cursor:default}.SelectionBox{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.SelectionBox div{position:absolute;z-index:1;background-color:color-mix(in srgb,var(--accent-color) 10%,transparent);border:2px solid color-mix(in srgb,var(--accent-color) 50%,transparent);-webkit-user-select:none;user-select:none;border-radius:4px}.ColorPicker{cursor:pointer;width:50px;height:20px;padding:0;border:none}.DraggableNode .ColorPicker{position:absolute;top:-2px;right:0;transform:translateY(-100%);opacity:0;transition:opacity .2s}.DraggableNode:hover .ColorPicker{opacity:1}.Board>.ColorPicker{z-index:10;position:fixed;inset:auto 10px 10px auto}@media (min-width: 600px){.Board>.ColorPicker{width:70px;height:30px}}.Drop__dragover{background:#6400641a}.Auth{margin:var(--space-l) auto;width:320px;display:flex;flex-direction:column;gap:var(--space-s)}.Auth input{padding:var(--space-s)}.Auth button{padding:var(--space-s) var(--space-m)}.Auth button[disabled]{cursor:not-allowed}button.Auth_textButton{background:none;border:none;color:var(--accent-color);padding:0;cursor:pointer;text-decoration:underline}.Auth_loader{text-align:center}.Auth_message{color:green}.Auth_error{color:red}.Sidebar_logout,.Sidebar_signin{margin:0 var(--space-l)}.Spaces{padding:var(--space-l)}.Spaces_grid{margin:0 auto;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:160px;gap:var(--space-l)}.Spaces_pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-m);margin-top:var(--space-l)}.Spaces_pagination button{padding:var(--space-s) var(--space-m);border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius);cursor:pointer}.Spaces_pagination button:disabled{opacity:.5;cursor:default}.SpaceCard{display:block;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;text-decoration:none;padding:var(--space-m);transition:background-color .2s;background:#ffffff80}.SpaceCard:hover{background:#fffc}.SpaceCardWrapper{position:relative;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;color:var(--card-text-color)}.SpaceCardWrapper_new{font-size:20px;font-weight:700;border-style:dashed}.SpaceCard_delete{position:absolute;top:4px;right:4px;border:none;background:transparent;color:var(--color-muted);cursor:pointer;font-size:16px;line-height:1;padding:4px}.SpaceCard_delete:hover{color:var(--color-text)}.Header{display:flex;align-items:center;gap:var(--space-m);padding:var(--space-m) var(--space-l);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.Header h1{margin:0;flex:1}.Header_logo{background-color:#fff;border-radius:var(--radius);border:1px solid #fff}.Header_logout{margin-left:auto}.Footer{text-align:center;padding:var(--space-m) var(--space-m);background:var(--color-surface);border-top:1px solid var(--color-border)}.Footer a{color:var(--color-text)}.Links{list-style:none;margin:0;padding:0}.Links_row{display:flex;gap:var(--space-m);justify-content:center}.AuthView,.SpacesView{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}.AuthView_main,.SpacesView_main{padding:var(--space-l) var(--space-l)}.RemoteCursor{position:absolute;z-index:4;width:24px;height:24px;pointer-events:none;background-color:var(--cursor-color);-webkit-mask-image:url(/cursor-arrow.svg);mask-image:url(/cursor-arrow.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:left .1s linear,top .1s linear}
