:root,[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--black:#000;--bg:#050505;--canvas:#050505;--glass:#050505b8;--glass-heavy:#050505e0;--white:#fff;--gray-100:#f5f5f5;--gray-200:#d4d4d4;--gray-400:#a3a3a3;--gray-500:#737373;--gray-600:#525252;--gray-800:#262626;--text:var(--white);--text-soft:var(--gray-400);--text-faint:var(--gray-600);--grid-color:#141414;--nav-btn:#ffffff8c;--nav-btn-hover:#ffffffe6;--nav-btn-hover-bg:#ffffff0f;--nav-btn-active:#fff;--nav-btn-active-bg:#ffffff1f;--panel-bg:#101012f7;--panel-shadow:-24px 0 64px #00000080;--panel-border:#ffffff12;--panel-head-border:#ffffff1a;--panel-eyebrow:#fff;--panel-label:#e4e4e7;--panel-tip:#a1a1aa;--panel-meta:#a1a1aa;--panel-dismiss-bg:#ffffff14;--panel-dismiss-color:#d4d4d4;--panel-dismiss-hover-bg:#ffffff24;--panel-dismiss-hover-color:#fff;--panel-chip-bg:#ffffff0f;--panel-chip-hover-bg:#ffffff1a;--panel-chip-active-bg:#ffffff29;--panel-chip-color:#d4d4d4;--panel-chip-active-color:#fff;--panel-weight-bg:#ffffff0a;--panel-weight-hover-bg:#ffffff14;--panel-weight-active-bg:#ffffff24;--backdrop:#0006;--selection-stroke:#ffffff59;--selection-fill:#ffffff0a;--marquee-stroke:#ffffff73;--text-box-stroke:#ffffff26;--draft-stroke:#ffffff80;--placeholder-color:#a1a1aa8c;--placeholder-canvas:#a1a1aa73;--tone-ring:#ffffff26;--tone-active-outline:#fff;--tone-none-bg:#ffffff0f;--tone-none-ring:#ffffff40;--slider-track:#fff3;--slider-thumb:#fff;--stroke-val:#e4e4e7;--selection-bg:#ffffff1f;--font:"Inter", system-ui, sans-serif;--ease:cubic-bezier(.22, 1, .36, 1);--nav-h:56px;--panel-w:280px}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f4f5;--canvas:#fafafa;--glass:#f4f4f5c7;--glass-heavy:#f4f4f5eb;--text:#18181b;--text-soft:#52525b;--text-faint:#a1a1aa;--grid-color:#e4e4e7;--nav-btn:#18181b80;--nav-btn-hover:#18181be0;--nav-btn-hover-bg:#18181b0f;--nav-btn-active:#18181b;--nav-btn-active-bg:#18181b14;--panel-bg:#fffffffa;--panel-shadow:-24px 0 64px #00000014;--panel-border:#00000014;--panel-head-border:#00000014;--panel-eyebrow:#18181b;--panel-label:#27272a;--panel-tip:#71717a;--panel-meta:#71717a;--panel-dismiss-bg:#0000000f;--panel-dismiss-color:#52525b;--panel-dismiss-hover-bg:#0000001a;--panel-dismiss-hover-color:#18181b;--panel-chip-bg:#0000000d;--panel-chip-hover-bg:#00000014;--panel-chip-active-bg:#0000001f;--panel-chip-color:#52525b;--panel-chip-active-color:#18181b;--panel-weight-bg:#0000000a;--panel-weight-hover-bg:#00000012;--panel-weight-active-bg:#0000001a;--backdrop:#00000040;--selection-stroke:#18181b47;--selection-fill:#18181b0a;--marquee-stroke:#18181b59;--text-box-stroke:#18181b1f;--draft-stroke:#18181b59;--placeholder-color:#71717aa6;--placeholder-canvas:#71717a80;--tone-ring:#0000001f;--tone-active-outline:#18181b;--tone-none-bg:#0000000a;--tone-none-ring:#00000026;--slider-track:#0000001f;--slider-thumb:#18181b;--stroke-val:#27272a;--selection-bg:#18181b1a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01", "cv01";font-weight:300;overflow:hidden}::selection{background:var(--selection-bg);color:var(--text)}.app{width:100%;height:100%;position:relative}.canvas-container{touch-action:none;-webkit-user-select:none;user-select:none;background:var(--canvas);position:absolute;inset:0;overflow:hidden}.canvas-svg{pointer-events:none;width:100%;height:100%;display:block}.nav{z-index:100;height:var(--nav-h);background:linear-gradient(to bottom, var(--glass-heavy) 0%, transparent 100%);-webkit-backdrop-filter:blur(20px);pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,4vw,48px);display:grid;position:fixed;top:0;left:0;right:0}.nav>*{pointer-events:auto}.nav-brand{letter-spacing:.04em;color:var(--text);-webkit-user-select:none;user-select:none;justify-self:start;font-size:13px;font-weight:300}.nav-tools{scrollbar-width:none;justify-self:center;align-items:center;gap:6px;max-width:70vw;padding:4px 0;display:flex;overflow-x:auto}.nav-tools::-webkit-scrollbar{display:none}.nav-tool{cursor:pointer;width:38px;height:38px;color:var(--nav-btn);transition:color .25s var(--ease), background .25s var(--ease);background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;display:flex}.nav-tool:hover{color:var(--nav-btn-hover);background:var(--nav-btn-hover-bg)}.nav-tool.active{color:var(--nav-btn-active);background:var(--nav-btn-active-bg)}.nav-actions{justify-self:end;align-items:center;gap:6px;display:flex}.nav-theme,.nav-style{cursor:pointer;width:38px;height:38px;color:var(--nav-btn);transition:color .25s var(--ease), background .25s var(--ease);background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;display:flex}.nav-theme:hover,.nav-style:hover,.nav-style.active{color:var(--nav-btn-active);background:var(--nav-btn-active-bg)}.panel-backdrop{z-index:90;background:var(--backdrop);cursor:default;animation:fadeIn .3s var(--ease);border:none;position:fixed;inset:0}.panel{z-index:95;width:var(--panel-w);background:var(--panel-bg);-webkit-backdrop-filter:blur(48px);max-width:100vw;padding:calc(var(--nav-h) + 20px) 28px 32px;animation:slideIn .4s var(--ease);box-shadow:var(--panel-shadow);flex-direction:column;gap:28px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.panel-head{border-bottom:1px solid var(--panel-head-border);justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.panel-eyebrow{color:var(--panel-eyebrow);letter-spacing:-.01em;font-size:15px;font-weight:400}.panel-dismiss{background:var(--panel-dismiss-bg);cursor:pointer;font-family:var(--font);color:var(--panel-dismiss-color);transition:color .2s var(--ease), background .2s var(--ease);border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:400}.panel-dismiss:hover{color:var(--panel-dismiss-hover-color);background:var(--panel-dismiss-hover-bg)}.panel-block{border-bottom:1px solid var(--panel-border);flex-direction:column;gap:14px;padding-bottom:24px;display:flex}.panel-block:last-of-type{border-bottom:none;padding-bottom:0}.panel-label{color:var(--panel-label);letter-spacing:-.01em;font-size:13px;font-weight:400}.panel-tip{color:var(--panel-tip);font-size:12px;font-weight:300;line-height:1.55}.panel-meta{color:var(--panel-meta);margin-top:auto;padding-top:8px;font-size:12px;font-weight:400}.type-sizes{flex-wrap:wrap;gap:12px 20px;display:flex}.type-size{background:var(--panel-chip-bg);cursor:pointer;font-family:var(--font);color:var(--panel-chip-color);min-width:40px;transition:color .2s var(--ease), background .2s var(--ease);border:none;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:400}.type-size:hover{color:var(--panel-chip-active-color);background:var(--panel-chip-hover-bg)}.type-size.active{color:var(--panel-chip-active-color);background:var(--panel-chip-active-bg)}.type-weights{flex-direction:column;gap:8px;display:flex}.type-weight{background:var(--panel-weight-bg);cursor:pointer;font-family:var(--font);color:var(--panel-chip-color);text-align:left;transition:color .2s var(--ease), background .2s var(--ease);border:none;border-radius:8px;padding:10px 12px;font-size:18px;line-height:1}.type-weight:hover{color:var(--panel-chip-active-color);background:var(--panel-weight-hover-bg)}.type-weight.active{color:var(--panel-chip-active-color);background:var(--panel-weight-active-bg)}.tone-row{flex-wrap:wrap;gap:8px;display:flex}.tone{cursor:pointer;opacity:1;width:24px;height:24px;transition:transform .2s var(--ease), outline .2s var(--ease);box-shadow:inset 0 0 0 1px var(--tone-ring);border:none;border-radius:50%;padding:0}.tone:hover{transform:scale(1.12)}.tone.active{outline:2px solid var(--tone-active-outline);outline-offset:2px}.tone-none{box-shadow:inset 0 0 0 1px var(--tone-none-ring);position:relative;background:var(--tone-none-bg)!important}.tone-none:after{content:"";background:linear-gradient(135deg, transparent 46%, var(--text-soft) 46%, var(--text-soft) 54%, transparent 54%);position:absolute;inset:5px}.stroke-row{align-items:center;gap:16px;display:flex}.stroke-row input[type=range]{appearance:none;background:var(--slider-track);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.stroke-row input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0003}.stroke-val{color:var(--stroke-val);text-align:right;min-width:20px;font-size:13px;font-weight:400}.text-editor{resize:none;font-family:var(--font);color:var(--text);z-index:20;caret-color:var(--text);box-shadow:none;pointer-events:auto;background:0 0;border:none;outline:none;padding:0;font-weight:300;position:absolute;overflow:hidden}.text-editor::placeholder{color:var(--placeholder-color);font-style:italic;font-weight:300}.canvas-text-placeholder{letter-spacing:.01em;font-style:italic;color:var(--placeholder-canvas)!important;font-weight:300!important}.text-editor-sticky{box-shadow:0 4px 24px #00000040}.zoom{z-index:50;align-items:center;gap:16px;display:flex;position:fixed;bottom:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px)}.zoom-btn{cursor:pointer;font-family:var(--font);color:var(--gray-600);width:24px;height:24px;transition:color .25s var(--ease);background:0 0;border:none;justify-content:center;align-items:center;font-size:16px;font-weight:200;display:flex}.zoom-btn:hover{color:var(--text)}.zoom-val{cursor:pointer;font-family:var(--font);color:var(--gray-500);text-align:center;min-width:32px;transition:color .25s var(--ease);background:0 0;border:none;font-size:11px;font-weight:300}.zoom-val:hover{color:var(--text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=768px){:root{--panel-w:100vw;--nav-h:52px}.nav{grid-template-columns:auto 1fr auto;gap:12px}.nav-tools{justify-self:stretch;gap:16px;max-width:none;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.nav-tool{font-size:11px}.panel{padding-top:calc(var(--nav-h) + 16px)}}@media (width<=480px){.nav-brand{display:none}}