@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');
:root{font-family:'Nunito Sans',sans-serif;color:#e7e8e9;background:#1e1f21;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.hidden{display:none!important}.app{height:100dvh;display:flex;flex-direction:column;min-height:400px}.topbar{height:54px;flex:none;background:#242527;border-bottom:1px solid #353639;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px;position:relative;z-index:5}.top-left,.top-right{display:flex;align-items:center;gap:4px;min-width:0}.top-left{flex:1}.top-right{flex:1;justify-content:flex-end}.logo{display:grid;place-items:center;width:32px;height:34px;color:#ef7d5d;font-size:29px;text-decoration:none;line-height:1}.icon-button{width:30px;height:30px;border:0;background:transparent;color:#bec0c3;display:grid;place-items:center;border-radius:5px;font-size:21px}.icon-button:hover,.tool:hover,.layer-actions button:hover{background:#393b3f;color:#fff}.icon-button svg{width:18px;height:18px}.top-divider{height:20px;width:1px;background:#414246;margin:0 5px}.board-title{border:0;background:#34363a;color:#f5f5f5;border-radius:5px;padding:6px 16px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800}.board-title span{color:#a5a6a9;margin-left:8px}.avatars{display:flex;padding-left:5px}.avatar{width:27px;height:27px;border:2px solid #242527;border-radius:50%;display:grid;place-items:center;color:white;font-size:10px;font-weight:900;margin-left:-5px}.people-count{font-size:11px;color:#b9bbbe;font-weight:800;margin:0 8px 0 1px}.share-button{border:0;background:#426fc8;color:white;border-radius:5px;padding:7px 13px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:7px}.share-button:hover{background:#5481d9}.share-button svg{width:15px;height:15px}.profile-button{border:0;background:#73564f;color:white;border-radius:50%;width:29px;height:29px;margin-left:8px;font-size:12px;font-weight:800}.menu{position:absolute;z-index:20;top:48px;left:42px;width:252px;padding:7px;background:#303134;border:1px solid #4a4b4f;border-radius:7px;box-shadow:0 12px 32px #0007}.menu button{border:0;background:none;color:#e8e9eb;padding:9px 11px;width:100%;display:flex;justify-content:space-between;text-align:left;border-radius:4px;font-size:12px}.menu button:hover{background:#45464a}.menu button span{color:#9b9da2;font-size:11px}.menu-divider{height:1px;background:#46474a;margin:6px 3px}.menu p{margin:6px 9px 7px;font-size:10px;color:#a7a8aa;line-height:1.5}.editor{min-height:0;flex:1;display:flex}.toolbar{width:47px;flex:none;background:#252629;border-right:1px solid #3a3b3e;display:flex;flex-direction:column;align-items:center;padding:6px 4px;gap:3px}.tool{width:36px;height:36px;border:0;border-radius:5px;display:grid;place-items:center;background:transparent;color:#c4c6c8}.tool svg{width:20px;height:20px}.tool.active{background:#555960;color:white;box-shadow:inset 3px 0 #73a1f5}.tool-divider{height:1px;background:#44464a;width:28px;margin:5px 0}.toolbar-spacer{flex:1}.mobile-panel-toggle{display:none}.center-column{min-width:0;flex:1;display:flex;flex-direction:column;background:#191a1c}.stage{flex:1;min-height:100px;position:relative;overflow:hidden;background:#191a1c;background-image:radial-gradient(#2d2e31 1px,transparent 1px);background-size:20px 20px;touch-action:none}.artboard{position:absolute;left:50%;top:50%;width:1600px;height:1000px;transform-origin:center center;background:#fff;box-shadow:0 5px 26px #0008}.artboard canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.artboard.hand canvas{cursor:grab}.artboard.pipette canvas{cursor:crosshair}.artboard.dragging canvas{cursor:grabbing}#remote-cursors{position:absolute;inset:0;pointer-events:none}.remote-cursor{position:absolute;border-radius:4px;padding:3px 6px;font-size:12px;font-weight:800;color:white;white-space:nowrap;transform:translate(10px,10px);box-shadow:0 2px 8px #0005}.stage-status{height:28px;background:#242527;border-top:1px solid #37383b;color:#a6a8aa;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px;font-weight:700;flex:none}.status-left,.status-right{display:flex;align-items:center;gap:7px}.connection-dot{width:6px;height:6px;border-radius:50%;background:#f0af68}.connection-dot.online{background:#78bf89}.status-sep{color:#5c5d60}.status-right button{border:0;background:none;color:#c5c7ca;font-size:10px;cursor:pointer}.board-strip{height:126px;flex:none;background:#292a2d;border-top:1px solid #434448;display:flex;align-items:stretch;padding:9px;gap:9px;overflow-x:auto}.strip-header{min-width:42px;display:flex;flex-direction:column;justify-content:space-between;color:#d4d5d7;font-size:11px;font-weight:800}.strip-header span:last-child{font-size:10px;color:#929497;font-weight:600}.board-list{display:flex;gap:9px}.board-card{width:154px;min-width:154px;padding:4px;background:#343539;border:1px solid #4a4b4f;border-radius:4px;color:#d8dadd;text-align:left;display:flex;flex-direction:column;gap:3px}.board-card.active{border-color:#77a3f5;box-shadow:0 0 0 1px #77a3f5}.board-card-title{font-size:10px;display:flex;justify-content:space-between;padding:0 3px;white-space:nowrap;overflow:hidden}.board-card-title span:last-child{color:#9a9ca0}.board-card canvas{background:white;width:100%;height:78px;object-fit:contain}.add-board{width:116px;min-width:116px;border:1px dashed #65676a;border-radius:4px;background:#333438;color:#c9cbcd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px}.add-board:hover{border-color:#90b4f6;background:#3b3e44}.add-board svg{width:29px;height:29px}.inspector{width:305px;flex:none;background:#292a2d;border-left:1px solid #45464a;display:flex;flex-direction:column;min-height:0}.inspector-tabs{height:38px;flex:none;display:flex;border-bottom:1px solid #45464a}.inspector-tab{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:#a9aaad;font-size:11px;font-weight:800}.inspector-tab.active{color:white;border-bottom-color:#79a5f5}.inspector-tab svg{width:13px;height:13px;vertical-align:middle;margin-right:4px}.paint-panel{flex:1;overflow:auto;min-height:0}.paint-panel::-webkit-scrollbar,.chat-messages::-webkit-scrollbar{width:6px}.paint-panel::-webkit-scrollbar-thumb,.chat-messages::-webkit-scrollbar-thumb{background:#55575c;border-radius:10px}.color-section,.properties-section,.layers-section{border-bottom:1px solid #424347;padding:11px 13px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:11px;font-weight:800;color:#f0f1f2}.section-title>span:last-child{font-size:10px;color:#a8aaad;font-weight:600}.color-wheel{width:176px;height:176px;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);margin:0 auto 10px;position:relative;display:grid;place-items:center;cursor:crosshair}.color-wheel::before{content:'';position:absolute;inset:15px;background:#292a2d;border-radius:50%}.color-square{z-index:1;position:relative;width:116px;height:116px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(15 100% 50%);border:2px solid #dfe0e2;cursor:crosshair}.square-handle{position:absolute;left:60%;top:55%;width:11px;height:11px;border:2px solid white;border-radius:50%;box-shadow:0 0 2px #000;transform:translate(-50%,-50%);pointer-events:none}.wheel-handle{position:absolute;left:85%;top:31%;width:12px;height:12px;border:2px solid white;border-radius:50%;box-shadow:0 0 3px #000;transform:translate(-50%,-50%);pointer-events:none}.color-bottom{display:flex;justify-content:space-between;align-items:center;margin:0 5px 8px}.color-pair{height:29px;display:flex;align-items:center}.secondary-color{width:21px;height:21px;border:1px solid #888;background:#fff;border-radius:3px;transform:translateX(6px)}#custom-color{position:relative;width:29px;height:29px;border:2px solid #e4e5e6;border-radius:4px;padding:0;background:none;cursor:pointer}.color-bottom label{color:#aeb0b3;font-size:11px;background:#202123;border:1px solid #494a4d;border-radius:4px;padding:3px 6px}.color-bottom label input{background:none;border:0;outline:0;color:white;width:65px;font-family:'DM Sans',sans-serif;font-size:11px}.palette{display:flex;justify-content:center;gap:8px}.swatch{width:19px;height:19px;border:1px solid #ffffff33;border-radius:50%;padding:0}.swatch.selected{outline:1px solid white;outline-offset:2px}.preset-row{display:flex;gap:6px;margin-bottom:15px}.preset{flex:1;background:#34363a;border:1px solid #4d4f53;border-radius:4px;color:#c9cacc;padding:6px 3px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:5px}.preset.active{border-color:#7ba7f7;background:#354259;color:white}.preset-mark{font-size:14px}.preset-mark.pencil{font-size:17px;font-weight:800}.preset-mark.soft{filter:blur(2px)}.slider-row{display:grid;grid-template-columns:48px minmax(0,1fr) 42px;gap:8px;align-items:center;font-size:11px;color:#c4c6c8;margin:9px 0}.slider-row output{text-align:right;font-family:'DM Sans',sans-serif;color:#e6e7e8;font-size:10px}.slider-row input,.layer-opacity-row input{width:100%;accent-color:#83aaf5;height:15px}.layer-actions{display:flex;gap:2px}.layer-actions button{background:none;border:0;border-radius:3px;color:#bec0c2;width:23px;height:23px;display:grid;place-items:center;font-size:17px}.layer-actions button svg{width:16px;height:16px}.layer-opacity-row{display:grid;grid-template-columns:88px 1fr 33px;gap:5px;align-items:center;font-size:10px;color:#b7b9bb;margin-bottom:8px}.layer-opacity-row output{text-align:right;font-size:10px}.layer-list{display:flex;flex-direction:column-reverse;gap:2px}.layer-row{height:48px;background:#333438;border:1px solid #45464a;border-radius:3px;display:flex;align-items:center;gap:6px;padding:3px 6px;cursor:pointer}.layer-row.active{border-color:#82adf8;background:#3b4a65}.layer-row .visibility{border:0;background:none;color:#cbd0d3;padding:2px;display:grid;place-items:center}.layer-row .visibility svg{width:15px;height:15px}.layer-preview{width:42px;height:32px;background:white;border:1px solid #b4b4b4;border-radius:2px;flex:none}.layer-info{min-width:0;flex:1}.layer-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.layer-info small{display:block;color:#aeb1b5;font-size:9px;margin-top:2px}.layer-hint{font-size:9px;color:#85878a;text-align:center;margin:10px 0 0}.chat-panel{display:flex;flex:1;min-height:0;flex-direction:column}.chat-intro{padding:15px;border-bottom:1px solid #424347}.chat-intro strong{font-size:12px}.chat-intro p{font-size:10px;color:#aeb0b3;margin:4px 0 0}.chat-messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.chat-message{max-width:100%;background:#36383c;padding:8px 10px;border-radius:7px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.chat-message.mine{background:#3a4e70}.chat-message strong{display:block;font-size:10px;color:#a9c3f4;margin-bottom:3px}.chat-message time{font-size:9px;color:#aeb0b3;margin-left:6px}.chat-form{padding:10px;display:flex;gap:6px;border-top:1px solid #424347}.chat-form input{min-width:0;flex:1;background:#1e1f21;border:1px solid #4b4d51;border-radius:5px;color:white;padding:9px;font-size:11px;outline:none}.chat-form input:focus{border-color:#7ba7f7}.chat-form button{border:0;background:#4a75c7;border-radius:5px;color:white;width:34px;font-size:19px}.inspector-footer{height:29px;flex:none;border-top:1px solid #424347;display:flex;align-items:center;gap:5px;padding:0 12px;font-size:9px;color:#85878a}.inspector-footer>span:first-child{color:#db8062;font-size:13px}.inspector-footer>span:last-child{margin-left:auto}.modal-backdrop{position:fixed;inset:0;z-index:30;background:#000b;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}.welcome-card{width:min(392px,100%);padding:25px 30px 30px;background:#faf8f4;border-radius:13px;color:#282b2d;text-align:center;box-shadow:0 25px 70px #0008}.welcome-art{height:105px;background:#f5e9dc;border-radius:8px;position:relative;overflow:hidden;margin-bottom:21px}.welcome-art span{position:absolute;color:#ca845a;font-size:55px;left:44%;top:4px}.welcome-art i{position:absolute;width:230px;height:100px;border:3px solid;border-radius:50%;top:62px;transform:rotate(-12deg)}.welcome-art i:nth-child(2){left:-30px;border-color:#c87565}.welcome-art i:nth-child(3){left:95px;border-color:#91aa94}.welcome-art i:nth-child(4){left:220px;border-color:#d0b374}.welcome-card small{letter-spacing:1.7px;color:#b4a397;font-size:9px;font-weight:900}.welcome-card h1{font-size:25px;letter-spacing:-1px;margin:6px 0}.welcome-card p{font-size:11px;color:#7a7d77;line-height:1.7;margin:0 0 22px}.welcome-card label{text-align:left;display:block;font-size:11px;font-weight:800;margin-bottom:7px}.welcome-card input{width:100%;border:1px solid #d6d6d0;border-radius:6px;padding:11px 12px;outline:none;font-size:12px}.welcome-card input:focus{border-color:#c87565}.welcome-card button{width:100%;border:0;border-radius:6px;background:#c46e52;color:white;padding:11px;margin-top:11px;font-size:12px;font-weight:900}.welcome-card button span{float:right}.toast{position:fixed;z-index:40;left:50%;bottom:24px;transform:translate(-50%,12px);background:#e8e9eb;color:#282a2d;padding:9px 14px;border-radius:5px;box-shadow:0 5px 25px #0008;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.inspector{width:270px}.color-wheel{width:154px;height:154px}.color-square{width:103px;height:103px}}@media(max-width:720px){.topbar{height:50px;padding:0 7px}.top-left{gap:1px}.top-left .top-divider{margin:0 2px}.top-left #zoom-in,.top-left #zoom-out{display:none}.board-title{max-width:120px;padding:6px;font-size:10px}.top-right .avatars,.people-count,.profile-button{display:none}.share-button{padding:8px}.share-button span{display:none}.toolbar{width:43px}.toolbar .tool{width:34px;height:34px}.mobile-panel-toggle{display:grid}.inspector{position:fixed;z-index:10;right:0;top:50px;bottom:0;width:min(305px,calc(100vw - 45px));box-shadow:-10px 0 25px #0008;transform:translateX(110%);transition:transform .2s}.inspector.open{transform:translateX(0)}.board-strip{height:110px}.board-card{width:120px;min-width:120px}.board-card canvas{height:62px}.add-board{min-width:87px;width:87px}.stage-status{font-size:9px}.status-left span:nth-last-child(-n+2){display:none}}