*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-parchment:#faf9f6;--color-ash:#afaeac;--color-stone:#868584;--color-earth:#353534;--color-charcoal:#454545;--color-purple-gray:#666469;--surface-0:#1a1816;--surface-1:#221f1c;--surface-veil:#ffffff0a;--border-mist:#e2e2e233;--border-mist-strong:#e2e2e259;--text:var(--color-parchment);--text-muted:var(--color-ash);--text-subdued:var(--color-stone);--panel-width:300px;--bg:var(--surface-0);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--tp-base-background-color:transparent;--tp-base-shadow-color:#0003;--tp-button-background-color:var(--color-earth);--tp-button-background-color-active:var(--color-charcoal);--tp-button-background-color-focus:var(--color-charcoal);--tp-button-background-color-hover:var(--color-charcoal);--tp-button-foreground-color:var(--color-ash);--tp-container-background-color:var(--surface-veil);--tp-container-background-color-active:#ffffff1a;--tp-container-background-color-focus:#ffffff14;--tp-container-background-color-hover:#ffffff0f;--tp-container-foreground-color:var(--color-ash);--tp-groove-foreground-color:#ffffff14;--tp-input-background-color:#ffffff0a;--tp-input-background-color-active:#ffffff1a;--tp-input-background-color-focus:#ffffff14;--tp-input-background-color-hover:#ffffff0f;--tp-input-foreground-color:var(--color-parchment);--tp-label-foreground-color:var(--color-stone);--tp-monitor-background-color:#ffffff0a;--tp-monitor-foreground-color:var(--color-ash)}html,body{font-feature-settings:"cv11", "ss01";letter-spacing:-.01em;background:var(--bg);height:100%;color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;overflow:hidden}#app{width:100vw;height:100vh;position:relative;overflow:hidden}#canvas-container{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#canvas-container canvas{max-width:100%;max-height:100%;display:block}#top-bar{z-index:120;background:var(--surface-0);border-bottom:1px solid var(--border-mist);justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;display:flex;position:fixed;top:0;left:0;right:0}.top-bar-left{align-items:center;gap:20px;min-width:0;display:flex}.brand{letter-spacing:.1em;color:var(--text);text-transform:uppercase;margin:0;font-size:14px;font-weight:400}.top-bar-actions{align-items:center;gap:2px;display:flex}.top-bar-button{color:var(--text-muted);letter-spacing:-.01em;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-family:inherit;font-size:13px;font-weight:400;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.top-bar-button:hover,.top-bar-button[aria-expanded=true]{background:var(--surface-veil);color:var(--text)}.top-bar-button:focus-visible{outline:1px solid var(--border-mist-strong);outline-offset:2px}.top-bar-button.icon-only{justify-content:center;min-width:30px;padding:6px 8px}.about-button{margin-left:6px}.icon{background-color:currentColor;flex-shrink:0;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-chevron{opacity:.7;width:12px;height:12px;transition:transform .15s;-webkit-mask-image:url(/chevron-down.svg);mask-image:url(/chevron-down.svg)}.settings-menu[open] .icon-chevron,[aria-expanded=true] .icon-chevron{-webkit-mask-image:url(/chevron-up.svg);mask-image:url(/chevron-up.svg)}.icon-info{width:16px;height:16px;-webkit-mask-image:url(/info.svg);mask-image:url(/info.svg)}.icon-x{width:16px;height:16px;-webkit-mask-image:url(/x.svg);mask-image:url(/x.svg)}.menu-wrapper{position:relative}.dropdown-menu{background:var(--surface-1);border:1px solid var(--border-mist);border-radius:5px;flex-direction:column;gap:1px;min-width:200px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 5px 15px #0003}.dropdown-menu[hidden]{display:none}.dropdown-menu hr{border:none;border-top:1px solid var(--border-mist);margin:4px}.dropdown-menu button[role=menuitem]{color:var(--text-muted);text-align:left;letter-spacing:-.01em;cursor:pointer;background:0 0;border:none;border-radius:3px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:400;transition:background .15s,color .15s}.dropdown-menu button[role=menuitem]:hover,.dropdown-menu button[role=menuitem]:focus-visible{background:var(--surface-veil);color:var(--text);outline:none}.top-bar-right{align-items:center;gap:2px;display:flex}.settings-menu{position:relative}.settings-toggle{list-style:none}.settings-toggle::-webkit-details-marker{display:none}.settings-menu[open]>.settings-toggle{background:var(--surface-veil);color:var(--text)}.settings-menu:not([open]) .settings-body{display:none}.settings-body{z-index:110;width:max-content;min-width:var(--panel-width);background:var(--surface-1);border:1px solid var(--border-mist);scrollbar-width:thin;scrollbar-color:var(--border-mist) transparent;border-radius:5px;max-width:calc(100vw - 2rem);max-height:calc(100dvh - 5rem);position:absolute;top:calc(100% + 6px);right:0;overflow-y:auto;box-shadow:0 5px 15px #0003}.settings-body::-webkit-scrollbar{width:4px}.settings-body::-webkit-scrollbar-thumb{background:var(--border-mist);border-radius:2px}.pane-container{padding:10px 12px}.tp-grdv-swatches{flex-wrap:wrap;gap:6px;padding:10px 2px 4px;display:flex}.path-swatch{cursor:pointer;border:2px solid #0000;border-radius:3px;outline:none;width:24px;height:24px;padding:0;transition:border-color .15s}.path-swatch:hover{border-color:var(--border-mist-strong)}.path-swatch.active{border-color:var(--text);box-shadow:0 0 0 1px var(--border-mist)}.tp-grdv{padding:4px 0}.tp-grdv canvas{border-radius:3px;display:block}.tp-clrsw{align-items:center;gap:4px;min-height:20px;padding:0;display:flex}.tp-clrsw_l{color:var(--tp-label-foreground-color);text-overflow:ellipsis;white-space:nowrap;flex:0 0 34%;padding-left:4px;font-size:11px;line-height:20px;overflow:hidden}.tp-clrsw_v{flex:auto;min-width:0;position:relative}.tp-clrsw-trigger{background:var(--tp-input-background-color);width:100%;height:20px;color:var(--tp-input-foreground-color);cursor:pointer;font:inherit;border:none;border-radius:2px;align-items:center;padding:2px 6px;display:flex}.tp-clrsw-trigger:hover{background:var(--tp-input-background-color-hover)}.tp-clrsw-trigger[aria-expanded=true]{background:var(--tp-input-background-color-active)}.tp-clrsw-chip{border-radius:2px;width:100%;height:12px;display:block}.tp-clrsw-popover{z-index:200;background:var(--surface-1);border:1px solid var(--border-mist);border-radius:4px;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px;padding:6px;display:grid;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 5px 15px #00000040}.tp-clrsw-popover[hidden]{display:none}.tp-clrsw-swatch{cursor:pointer;border:1px solid #ffffff14;border-radius:3px;width:20px;height:20px;padding:0;transition:transform .1s,border-color .1s}.tp-clrsw-swatch:hover{border-color:var(--text);transform:scale(1.08)}.modal{border:1px solid var(--border-mist-strong);background:var(--surface-0);color:var(--text);letter-spacing:-.01em;border-radius:8px;width:calc(100vw - 32px);min-width:640px;max-width:640px;margin:auto;padding:28px 32px 30px;font-family:inherit;line-height:1.5;box-shadow:0 5px 15px #0003}.modal::backdrop{background:#0a080699}.modal:focus-visible{outline:none}.modal h2{letter-spacing:-.02em;color:var(--text);margin-bottom:4px;font-size:24px;font-weight:400;line-height:1.15}.modal h3{letter-spacing:.2em;text-transform:uppercase;color:var(--text-subdued);margin-bottom:10px;font-size:12px;font-weight:400}.modal section{margin-top:24px}.modal p,.modal li{color:var(--text-muted);letter-spacing:-.01em;font-size:14px;line-height:1.5}.modal-lede{color:var(--text-muted);margin-top:8px;font-size:15px;line-height:1.5}.modal a{color:var(--text);text-decoration:underline;-webkit-text-decoration-color:var(--color-purple-gray);text-decoration-color:var(--color-purple-gray);text-underline-offset:3px;transition:text-decoration-color .15s}.modal a:hover{-webkit-text-decoration-color:var(--text);text-decoration-color:var(--text)}.modal-list{flex-direction:column;gap:6px;list-style:none;display:flex}.shortcuts-columns{grid-template-columns:1fr 1fr;gap:32px;display:grid}.shortcuts{grid-template-columns:max-content 1fr;align-content:start;gap:8px 20px;font-size:14px;display:grid}.shortcuts dt{color:var(--text-subdued)}.shortcuts dd{color:var(--text-muted)}.shortcuts kbd{background:var(--surface-veil);border:1px solid var(--border-mist);color:var(--text);letter-spacing:0;border-radius:3px;padding:1px 7px;font-family:Inter,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:400;display:inline-block}.modal-close-form{margin:0}.modal-close{width:30px;height:30px;color:var(--text-subdued);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-family:inherit;transition:color .15s,background .15s;display:inline-flex;position:absolute;top:14px;right:14px}.modal-close:hover{background:var(--surface-veil);color:var(--text)}.modal-compact{padding:24px 28px}.confirm-title{letter-spacing:-.015em;margin-bottom:8px;font-size:18px;font-weight:400}.confirm-body,.alert-body{color:var(--text-muted);margin-bottom:24px;font-size:14px}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.btn{letter-spacing:-.01em;cursor:pointer;border:1px solid #0000;border-radius:50px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.btn:focus-visible{outline:1px solid var(--border-mist-strong);outline-offset:2px}.btn-primary{background:var(--color-earth);color:var(--text-muted)}.btn-primary:hover{background:var(--color-charcoal);color:var(--text)}.btn-ghost{color:var(--text-muted);border-color:var(--border-mist);background:0 0}.btn-ghost:hover{background:var(--surface-veil);color:var(--text);border-color:var(--border-mist-strong)}