@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";
:root{--purple:#8064ec;--border:#e9eaee;--text:#33383f;--muted:#92979f}*{box-sizing:border-box}body{color:var(--text);background:#f4f5f7;margin:0;font-family:DM Sans,Arial,sans-serif;font-size:12px}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;background:0 0;border:0}button:disabled{opacity:.3;cursor:default}input,textarea{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.app{--left-panel-width:232px;--right-panel-width:258px;grid-template-columns:var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width);grid-template-rows:66px minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.app.layers-hidden{--left-panel-width:0px}.app.properties-hidden{--right-panel-width:0px}.app.layers-hidden .left-sidebar,.app.properties-hidden .right-sidebar{display:none}.topbar{border-bottom:1px solid var(--border);z-index:2;background:#fff;grid-column:1/-1;align-items:center;gap:30px;padding:0 20px;display:flex}.brand{flex-shrink:0;align-items:center;gap:10px;width:200px;display:flex}.brand b{letter-spacing:-1px;font-size:20px}.brandmark{color:#fff;text-align:center;background:#8064ec;border-radius:9px;width:30px;height:32px;font-size:24px;font-weight:700;line-height:33px}.brandmark span{color:#d9c8ff;font-size:17px}.beta{letter-spacing:1px;color:#8064ec;background:#f1edfc;border-radius:4px;padding:4px;font-size:8px}.document-title{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.breadcrumb{color:#92979f;white-space:nowrap}.document-title input{border:0;width:240px;min-width:60px;font-size:12px;font-weight:600}.connection{color:#b18039;white-space:nowrap;font-size:10px}.connection.live{color:#91a197}.header-actions{align-items:center;gap:14px;display:flex}.avatars{padding-left:8px;display:flex}.avatars span{color:#fff;border:2px solid #fff;border-radius:50%;place-items:center;width:29px;height:29px;margin-left:-8px;font-size:11px;display:grid}.icon-button{border-radius:6px;place-items:center;width:31px;height:31px;display:grid}.icon-button:hover{background:#f3f1fa}.share-button,.primary-button{background:var(--purple);color:#fff;border-radius:7px;align-items:center;gap:8px;padding:10px 15px;font-weight:600;display:flex}.left-sidebar,.right-sidebar{z-index:1;background:#fff;flex-direction:column;min-height:0;display:flex}.left-sidebar{border-right:1px solid var(--border);grid-area:2/1}.right-sidebar{border-left:1px solid var(--border);grid-area:2/3}.sidebar-tabs{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:57px;padding:0 18px;display:flex}.sidebar-tabs b{align-items:center;gap:8px;font-size:12px;display:flex}.sidebar-tabs>span{color:var(--muted);font-size:10px}.page-title{align-items:center;gap:6px;padding:10px 10px 10px 18px;font-weight:600;display:flex}.page-picker-wrap{flex:1;align-items:center;min-width:0;display:flex;position:relative}.page-picker-wrap select{appearance:none;width:100%;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:0;outline:0;padding:6px 18px 6px 2px;font-size:12px}.page-picker-wrap>svg{color:var(--muted);pointer-events:none;position:absolute;right:3px}.page-control{width:24px;height:24px;color:var(--muted);border-radius:5px;flex:0 0 24px;justify-content:center;align-items:center;display:flex}.page-control:hover:not(:disabled){color:var(--purple);background:#f3f0fb}.page-control:disabled{opacity:.45}.page-dot{background:var(--purple);border-radius:50%;width:6px;height:6px}.layers{flex:1;padding:2px 8px;overflow:auto}.layer-row{border-radius:5px;align-items:center;height:35px;margin-bottom:2px;display:flex}.layer-row.selected{color:#7656df;background:#eee9fe}.layer-row:hover{background:#f5f3fb}.layer-row.muted{opacity:.5}.layer-select{text-align:left;flex:1;align-items:center;gap:9px;min-width:0;padding:9px;display:flex}.layer-select span{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.layer-select svg{color:#9ba0a8;flex-shrink:0}.layer-action{opacity:0;padding:4px;display:flex}.layer-row:hover .layer-action,.layer-row.selected .layer-action{opacity:1}.sidebar-bottom{border-top:1px solid var(--border);align-items:center;gap:11px;padding:20px 14px;display:flex}.tiny-logo{color:#8b71db;font-size:27px}.sidebar-bottom b{font-size:10px;font-weight:500}.sidebar-bottom p{color:#a0a3aa;margin:4px 0;font-size:10px}.canvas-shell{background-color:#f4f5f7;background-image:radial-gradient(#d6d9e0 .7px,#0000 .7px);background-size:16px 16px;grid-area:2/2;min-height:0;position:relative;overflow:hidden}.sidebar-toggle{z-index:3;border:1px solid var(--border);width:30px;height:30px;color:var(--muted);background:#fff;border-radius:7px;place-items:center;display:grid;position:absolute;top:12px;box-shadow:0 2px 6px #35354f08}.sidebar-toggle:hover,.sidebar-toggle[aria-expanded=true]{color:var(--purple);background:#f5f1ff}.toggle-layers{left:12px}.toggle-properties{right:12px}.canvas-shell.pan-ready .konvajs-content,.canvas-shell.pan-ready .konvajs-content canvas{cursor:grab!important}.canvas-shell.panning .konvajs-content,.canvas-shell.panning .konvajs-content canvas{cursor:grabbing!important}.canvas-label{letter-spacing:1.4px;color:#8b919c;pointer-events:none;z-index:1;align-items:center;gap:8px;font-size:9px;display:flex;position:absolute;top:23px;left:54px;right:54px}.canvas-label>span:last-child{letter-spacing:.3px;color:#adb0b9;margin-left:8px}.green-dot{background:#64ac91;border-radius:50%;width:6px;height:6px;display:inline-block}.floating-toolbar{background:#fff;border:1px solid #e4e5ec;border-radius:13px;align-items:center;gap:3px;padding:7px;display:flex;position:absolute;bottom:52px;left:50%;transform:translate(-50%);box-shadow:0 5px 22px #35354f12}.floating-toolbar button{color:#69717c;border-radius:8px;place-items:center;width:38px;height:38px;display:grid}.floating-toolbar button.active{color:#fff;background:#8064ec}.floating-toolbar button:hover:not(.active){background:#f1edf9}.divider{background:var(--border);width:1px;height:23px;margin:0 5px}.zoom-controls{border:1px solid var(--border);background:#fff;border-radius:8px;align-items:center;height:33px;padding:0 4px;display:flex;position:absolute;bottom:56px;right:20px}.zoom-controls button{align-items:center;padding:6px;font-size:10px;display:flex}.canvas-hint{color:#9ca1ad;pointer-events:none;justify-content:space-between;font-size:9px;display:flex;position:absolute;bottom:18px;left:25px;right:25px}.design-tag{letter-spacing:1.3px;font-size:8px!important}.property-section{border-bottom:1px solid var(--border);padding:19px 18px}h4{margin:0 0 15px;font-size:11px;font-weight:600}.section-heading{color:#888d98;align-items:center;gap:8px;margin-bottom:24px;display:flex}.section-heading input{color:#33383f;border:0;width:100%;font-weight:600}.property-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.property-grid label{background:#f6f7f9;border:1px solid #eff0f3;border-radius:5px;align-items:center;gap:8px;padding:7px 9px;display:flex}.property-grid span{color:#a2a7b0;width:15px;font-size:10px}.property-grid input{background:0 0;border:0;width:100%;min-width:0;font-size:11px}.fill-control{border:1px solid var(--border);border-radius:6px;align-items:center;gap:9px;padding:7px 9px;font-size:10px;display:flex}.fill-control span:last-child{color:#9aa0aa;margin-left:auto}.fill-control input[type=color]{cursor:pointer;background:0 0;border:0;width:22px;height:22px;padding:0}.swatches{gap:8px;margin-top:12px;display:flex}.swatches button{border:1px solid #00000012;border-radius:50%;width:20px;height:20px}.canvas-swatch{background:#f4f5f7;border:1px solid #e5e5ee;border-radius:3px;width:20px;height:20px}.empty-selection{text-align:center;color:#a8a0bc;padding:35px 25px}.empty-selection>svg{box-sizing:content-box;color:#9275d9;background:#f5f1fd;border-radius:15px;padding:14px}.empty-selection h3{color:#646775;margin-top:19px;font-size:13px}.empty-selection p{color:#969aa4;font-size:11px;line-height:1.8}.empty-selection button{color:#8064ec;background:#f2eefe;border-radius:6px;align-items:center;gap:6px;margin-top:10px;padding:9px 12px;font-size:10px;display:inline-flex}.shortcut{color:#898f9a;justify-content:space-between;margin:12px 0;font-size:10px;display:flex}kbd{color:#8e93a1;background:#f7f7f9;border:1px solid #e9eaef;border-radius:4px;padding:3px 6px;font-family:inherit;font-size:9px}.collab-card{background:#f6f9f7;border:1px solid #eaf0ed;border-radius:9px;margin:auto 14px 15px;padding:17px}.collab-card b{color:#5d7868;margin-left:6px;font-size:10px;font-weight:500}.collab-card p{color:#9ba79f;margin:9px 0 14px;font-size:10px}.collab-card button{color:#6a8171;align-items:center;gap:12px;font-size:10px;display:flex}.action-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.action-grid button{background:#f6f7f9;border-radius:5px;align-items:center;gap:7px;padding:9px 6px;font-size:9px;display:flex}.full-input{color:#9096a1;justify-content:space-between;align-items:center;display:flex}.full-input input,.full-input select{border:1px solid var(--border);width:70px;color:var(--text);background:#fff;border-radius:5px;padding:7px}.full-input select{width:128px;max-width:60%}.text-align-controls{gap:4px;margin:12px 0;display:flex}.text-align-controls button{border:1px solid var(--border);border-radius:5px;place-items:center;width:34px;height:30px;display:grid}.text-align-controls button.active{color:var(--purple);background:#f3efff;border-color:#d9cdfc}textarea{resize:vertical;border:1px solid var(--border);border-radius:6px;width:100%;min-height:100px;margin-top:15px;padding:9px;font-size:11px;line-height:1.5}.right-sidebar{overflow:auto}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:20;background:#22253750;place-items:center;display:grid;position:fixed;inset:0}.share-modal{background:#fff;border-radius:18px;width:420px;max-width:90vw;padding:32px;position:relative;box-shadow:0 20px 80px #0002}.modal-close{position:absolute;top:14px;right:14px}.modal-icon{color:#8064ec;background:#f0eafb;border-radius:13px;padding:14px;display:inline-flex}.share-modal h2{letter-spacing:-.7px;margin-bottom:9px;font-size:25px}.share-modal p{color:#8b919b;line-height:1.7}.share-modal label{color:#7b818c;margin:24px 0 16px;font-size:11px;display:block}.share-modal label input{border:1px solid var(--border);border-radius:6px;width:100%;margin-top:8px;padding:10px;display:block}.share-link{background:#faf8ff;border:1px solid #e7e1f7;border-radius:7px;gap:6px;padding:8px;display:flex}.share-link input{color:#8064ec;background:0 0;border:0;width:100%;font-size:11px}.share-link button{color:#8064ec;display:flex}.share-note{color:#9a9fa8;margin:13px 0 22px;font-size:10px;line-height:1.8}.primary-button{justify-content:center;width:100%}.toast{z-index:30;color:#fff;cursor:pointer;background:#33383f;border-radius:10px;align-items:center;gap:20px;padding:14px 20px;display:flex;position:fixed;bottom:120px;left:50%;transform:translate(-50%)}.loading{color:#8064ec;place-items:center;height:100vh;display:grid}.prototype-overlay{z-index:40;color:var(--text);background:#eceef2;place-items:center;display:grid;position:fixed;inset:0}.prototype-overlay>p{color:var(--muted);position:absolute;top:56px}.prototype-bar{z-index:2;border-bottom:1px solid var(--border);background:#fff;justify-content:center;align-items:center;gap:18px;height:56px;padding:0 18px;display:flex;position:absolute;inset:0 0 auto}.prototype-bar span{color:var(--muted)}.prototype-bar button{color:var(--purple);background:#f4f2fa;border-radius:6px;align-items:center;gap:6px;padding:8px 12px;display:flex;position:absolute;right:18px}.prototype-hint{color:#858b95;background:#fff;border-radius:6px;padding:8px 12px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}@media (max-width:1100px){.app{--left-panel-width:190px;--right-panel-width:220px}.brand{width:190px}.breadcrumb,.connection{display:none}.document-title input{width:180px}.topbar{gap:15px}.zoom-controls{bottom:115px}}@media (max-width:760px){.app{--left-panel-width:0px;--right-panel-width:0px}.right-sidebar{display:none}.brand{width:auto}.brand b,.beta,.avatars{display:none}.document-title input{width:160px}.topbar{gap:10px;padding:0 12px}.header-actions{gap:6px}.floating-toolbar{gap:0;padding:4px}.floating-toolbar button{width:29px}.canvas-hint span,.canvas-label>span:last-child,.sidebar-bottom,.left-sidebar{display:none}.app .left-sidebar.mobile-open,.app .right-sidebar.mobile-open{z-index:5;border:1px solid var(--border);border-radius:9px;width:230px;max-width:calc(100vw - 24px);display:flex;position:fixed;top:122px;bottom:125px;right:12px;box-shadow:0 5px 25px #0002}.app .left-sidebar.mobile-open{left:12px;right:auto}.canvas-label{left:54px}.canvas-hint{font-size:8px;left:14px}.document-title{gap:3px}.document-title input{width:130px;font-size:10px}.share-button{padding:9px 11px}.zoom-controls{bottom:110px}.floating-toolbar{bottom:46px}.canvas-hint{bottom:17px}.brand{flex-shrink:0}}.role-badge{text-transform:capitalize;color:#8064ec;white-space:nowrap;background:#f3eefc;border-radius:5px;padding:5px 8px;font-size:10px}.account-page{background:#fafaf8;min-height:100vh}.account-header{background:#fff;border-bottom:1px solid #e9eae6;justify-content:space-between;align-items:center;height:80px;padding:0 6vw;display:flex}.account-signout{color:#88908a;align-items:center;gap:8px;display:flex}.auth-layout{grid-template-columns:1fr 410px;gap:100px;max-width:1100px;margin:0 auto;padding:80px 35px;display:grid}.account-eyebrow{letter-spacing:2px;color:#8e9b8b;font-size:10px}.auth-story h1{letter-spacing:-3px;color:#283f30;margin:24px 0;font-size:62px;line-height:1.12}.auth-story p{color:#929a90;font-size:15px;line-height:1.8}.auth-art{height:230px;margin-top:45px;position:relative}.art-square{background:#b5a6eb;border-radius:26px;width:140px;height:140px;position:absolute;top:20px;left:35px;transform:rotate(-12deg)}.art-circle{background:#d4dec5;border:5px solid #fafaf8;border-radius:50%;width:140px;height:140px;position:absolute;top:70px;left:150px}.art-label{z-index:1;color:#65755d;background:#fff;border-radius:6px;padding:12px 20px;position:absolute;top:100px;left:80px;transform:rotate(-6deg);box-shadow:0 4px 20px #0001}.auth-card{background:#fff;border:1px solid #e9eae6;border-radius:18px;align-self:center;padding:32px;box-shadow:0 10px 50px #32343206}.auth-card h2{letter-spacing:-.8px;margin:20px 0 10px;font-size:23px}.auth-card p{color:#92989f;line-height:1.6}.auth-card label{color:#7a818c;margin:20px 0;font-size:11px;display:block}.auth-card input{border:1px solid #e3e5e9;border-radius:6px;width:100%;margin-top:8px;padding:12px;display:block}.auth-message{color:#785fc0;overflow-wrap:anywhere;background:#f5f0fe;border-radius:6px;margin:12px 0;padding:12px;font-size:11px;line-height:1.7}.auth-switch{color:#8064ec;width:100%;margin-top:22px;font-size:11px}.auth-footnote{color:#a2a7ad;justify-content:center;align-items:center;gap:6px;margin-top:26px;font-size:10px;display:flex}.workspace{max-width:1150px;margin:60px auto;padding:0 30px}.workspace-heading{justify-content:space-between;align-items:center;gap:20px;margin:18px 0 40px;display:flex}.workspace-heading h1{letter-spacing:-1.4px;color:#2a3f31;margin:0 0 12px;font-size:36px}.workspace-heading p{color:#949c94}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;display:grid}.project-card{color:inherit;background:#fff;border:1px solid #e4e8e2;border-radius:12px;text-decoration:none;transition:transform .2s;overflow:hidden}.project-card:hover{transform:translateY(-3px)}.project-preview{background:#e4eadf;height:190px;padding:25px;position:relative;overflow:hidden}.project-preview span{color:#62745a;font-size:12px}.project-preview b{color:#344d35;z-index:1;margin-top:25px;font-size:26px;line-height:1.1;display:block;position:relative}.project-preview i{background:#b9c6a7;border-radius:60px;width:100px;height:135px;position:absolute;bottom:-28px;right:22px;transform:rotate(20deg)}.project-card-info{justify-content:space-between;align-items:center;gap:12px;padding:18px;display:flex}.project-card-info b{font-size:12px;display:block}.project-card-info small{color:#a1a7a2;margin-top:7px;font-size:10px;display:block}.empty-project{color:#7b8e72;background:#f4f7f1;border:1px dashed #cbd5c6;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:230px;display:flex}.empty-project b{font-size:14px}.empty-project span{color:#939f8c;font-size:11px}.workspace-note{color:#929f8b;align-items:center;gap:8px;margin-top:30px;font-size:11px;display:flex}.invite-form label{margin:18px 0 12px}.invite-options{gap:8px;display:flex}.invite-options select,.member select{color:#716787;background:#f8f6fb;border:1px solid #e8e2f3;border-radius:6px;padding:9px;font-size:11px}.invite-options select{flex:1;min-width:0}.invite-options .share-button{white-space:nowrap;font-size:10px}.members-list{max-height:180px;margin:17px 0;overflow:auto}.member{border-bottom:1px solid #eee;align-items:center;gap:9px;padding:10px 0;display:flex}.member>span{text-overflow:ellipsis;white-space:nowrap;color:#78818b;flex:1;min-width:0;font-size:11px;overflow:hidden}.permissions-modal{width:480px;max-height:90vh;overflow-y:auto}.guest-share{border-top:1px solid #eee;margin-top:10px;padding-top:14px}.guest-share h3{margin:0 0 5px;font-size:13px}.guest-share p{margin:0 0 10px;font-size:11px}.guest-link-status{color:#78818b;background:#f7f5fb;border-radius:6px;margin-bottom:10px;padding:9px;font-size:10px;line-height:1.5}.guest-link-actions{margin-top:10px}.guest-link-actions .share-button{flex:1;justify-content:center}.revoke-link{color:#a64646;border:1px solid #ecdada;border-radius:6px;padding:8px 11px;font-size:10px}.member select{padding:5px;font-size:10px}.member button{color:#a29aaf;display:flex}.right-sidebar input:read-only{color:#999}@media (max-width:760px){.auth-layout{flex-direction:column;gap:25px;padding:35px 22px;display:flex}.auth-story h1{letter-spacing:-1.5px;font-size:39px}.auth-art{display:none}.auth-story p{font-size:12px}.auth-card{width:100%;padding:25px}.workspace{margin-top:35px;padding:0 20px}.workspace-heading{flex-direction:column;align-items:flex-start}.workspace-heading h1{font-size:28px}.role-badge{padding:4px;font-size:8px}.header-actions .icon-button{width:22px}.header-actions{gap:4px}.document-title input{width:90px}.header-actions .avatars{display:none}}.right-sidebar.read-only .action-grid button,.right-sidebar.read-only .swatches button,.right-sidebar.read-only .empty-selection button{pointer-events:none;opacity:.4}.properties-fields{border:0;min-width:0;margin:0;padding:0}input:disabled,textarea:disabled{color:#9499a2;background:#f7f7f9}.right-sidebar.read-only input[type=color]{cursor:default}