body.app-page{overflow:hidden}.app{--panel-w:280px;--gap:.9rem;--float-bg:#13131aeb}.app .workspace{padding:var(--gap) var(--gutter) 0;height:calc(100dvh - var(--header-h) - 2.6rem);grid-template-columns:minmax(0,1fr);margin:0;display:grid;position:relative}.app .stage{border-radius:var(--radius);border:1px solid var(--border);background:#121218;min-height:0;position:relative;overflow:hidden}.app .board{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.app .board:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);outline:none}.app .toolbar{z-index:5;background:var(--float-bg);border:1px solid var(--border);user-select:none;scrollbar-width:none;border-radius:12px;align-items:center;gap:2px;max-width:calc(100% - 130px);padding:4px;display:flex;position:absolute;top:10px;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.app .toolbar::-webkit-scrollbar{display:none}.app .tool{width:38px;height:38px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:9px;flex:none;place-items:center;display:grid;position:relative}.app .tool:hover{background:var(--surface-2)}.app .tool[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.app .tool .kbd{opacity:.55;font-size:9px;font-weight:700;position:absolute;bottom:1px;right:3px}.app .tool[data-lock] .ic-closed{display:none}.app .tool[data-lock][aria-pressed=true] .ic-closed{display:contents}.app .tool[data-lock][aria-pressed=true] .ic-open{display:none}.app .sep{background:var(--border);flex:none;width:1px;height:24px;margin:0 4px}.app .text-editor{z-index:4;outline:1px dashed var(--accent);outline-offset:4px;resize:none;white-space:pre;transform-origin:0 0;background:0 0;border:0;min-width:4px;margin:0;padding:0;line-height:1.25;position:absolute;overflow:hidden}.app .empty,.app .loading{pointer-events:none;place-items:center;padding:4.5rem 1rem 4rem;display:grid;position:absolute;inset:0}.app .empty[hidden],.app .loading[hidden]{display:none}.app .empty-card{text-align:center;max-width:380px;color:var(--text-mid)}.app .empty-title{color:var(--text);opacity:.9;margin:0 0 .4rem;font-family:Kalam,Caveat,cursive;font-size:1.9rem}.app .empty-desc{margin:0 0 1rem;font-size:.92rem}.app .empty .btn{pointer-events:auto}.app .loading span{color:var(--text-mid);font-size:.9rem}.app .stage.light-canvas .empty-title{color:#1e1e1e}.app .stage.light-canvas .empty-desc,.app .stage.light-canvas .loading span{color:#55556a}.app .corner{z-index:5;user-select:none;gap:6px;display:flex;position:absolute}.app .corner.bl{bottom:10px;left:10px}.app .pill{border:1px solid var(--border);background:#13131aeb;border-radius:10px;align-items:center;padding:2px;display:flex}.app .ibtn{cursor:pointer;width:34px;height:34px;color:var(--text);background:0 0;border:0;border-radius:8px;place-items:center;display:grid}.app .ibtn:hover:not(:disabled){background:var(--surface-2)}.app .ibtn:disabled{opacity:.3;cursor:default}.app .zoom-label{min-width:52px;height:34px;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:8px;font-size:.8rem;font-weight:700}.app .zoom-label:hover{background:var(--surface-2)}.app .save-status{color:var(--text-dim);pointer-events:none;z-index:5;margin:0;font-size:.75rem;position:absolute;bottom:10px;right:12px}.app .stage.light-canvas .save-status{color:#8a8aa0}.app .drop-overlay{z-index:8;border:3px dashed var(--accent);border-radius:var(--radius);background:color-mix(in srgb, var(--accent) 10%, transparent);pointer-events:none;position:absolute;inset:0}.app .drop-overlay[hidden]{display:none}.app .panel-toggle{z-index:6;top:calc(var(--gap) + 10px);right:calc(var(--gutter) + 10px);cursor:pointer;background:var(--float-bg);width:44px;height:44px;color:var(--text);border:1px solid var(--border);border-radius:12px;place-items:center;transition:background .15s,color .15s,border-color .15s;display:grid;position:absolute;box-shadow:0 8px 24px #00000059}.app .panel-toggle:hover{border-color:var(--accent)}.app .panel-toggle[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.app .panel{z-index:6;top:calc(var(--gap) + 62px);right:calc(var(--gutter) + 10px);width:var(--panel-w);max-height:calc(100% - var(--gap) - 62px - 48px);overscroll-behavior:contain;background:color-mix(in srgb, var(--surface) 94%, transparent);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);-webkit-user-select:none;user-select:none;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:.4rem 1rem 1rem;position:absolute;overflow-y:auto;box-shadow:0 16px 40px #00000073}.app[data-panel-state=closed] .panel,.app .panel-head,.app .panel-scrim{display:none}.app .sel-info{color:var(--accent);margin:.6rem 0 0;font-size:.8rem;font-weight:700}.app .psec{border-bottom:1px solid var(--border);padding:.85rem 0}.app .psec:last-child{border-bottom:0}.app .psec[hidden],.app .row[hidden],.app .check[hidden]{display:none}.app .psec h2{letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .6rem;font-size:.7rem;font-weight:800}.app .row{margin-bottom:.65rem}.app .row:last-child{margin-bottom:0}.app .row.inline{justify-content:space-between;align-items:center;gap:.5rem;margin:.4rem 0 .75rem;display:flex}.app .row.inline .lbl{margin:0}.app .lbl{color:var(--text-mid);justify-content:space-between;margin-bottom:.35rem;font-size:.78rem;display:flex}.app .lbl output{font-variant-numeric:tabular-nums;color:var(--text-dim)}.app .swatches{flex-wrap:wrap;gap:6px;display:flex}.app .sw{cursor:pointer;background:var(--c);border:1px solid #ffffff1f;border-radius:8px;width:28px;height:28px;padding:0;position:relative}.app .sw.transparent{background:repeating-conic-gradient(#3a3a4a 0 25%, #22222c 0 50%) 50% / 10px 10px}.app .sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.app .sw.custom{background:conic-gradient(#f03e3e,#f59f00,#fab005,#40c057,#228be6,#7950f2,#e64980,#f03e3e);place-items:center;display:grid;overflow:hidden}.app .sw.custom input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.app .seg{flex-wrap:wrap;gap:4px;display:flex}.app .seg button{border:1px solid var(--border);background:var(--bg);min-width:36px;height:34px;color:var(--text);cursor:pointer;border-radius:8px;flex:1 1 0;place-items:center;font-size:.82rem;font-weight:700;display:grid}.app .seg.six button{min-width:38px}.app .seg button:hover:not(:disabled){border-color:var(--text-dim)}.app .seg button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--bg))}.app .seg button.danger:hover,.app .btn.danger:hover{border-color:var(--danger);color:var(--danger)}.app .seg button:disabled{opacity:.3;cursor:default}.app .font-hand{font-family:Kalam,Caveat,cursive;font-size:1rem!important;font-weight:400!important}.app .font-mono{font-family:ui-monospace,Menlo,monospace}.app .range{width:100%;accent-color:var(--accent)}.app .check{cursor:pointer;align-items:center;gap:.55rem;padding:.3rem 0;font-size:.86rem;display:flex}.app .check input{accent-color:var(--accent);width:16px;height:16px;margin:0}.app .check kbd{margin-left:auto}.app .grid2{grid-template-columns:1fr 1fr;gap:6px;margin-top:.5rem;display:grid}.app .grid2 .btn{justify-content:flex-start;min-height:38px;padding:.4rem .5rem;font-size:.8rem}.app .grid2 .btn svg{width:17px;height:17px}.app .btn.big{width:100%;min-height:48px;margin-top:.75rem;font-size:1rem}.app kbd{font-family:var(--font-body);border:1px solid var(--border);background:var(--surface-2);color:var(--text-mid);white-space:nowrap;border-bottom-width:2px;border-radius:5px;padding:.08rem .38rem;font-size:.72rem;font-weight:700}.app .help-line{padding:.55rem var(--gutter) 0;color:var(--text-dim);user-select:none;flex-wrap:wrap;gap:.3rem 1.1rem;height:2.6rem;margin:0;font-size:.78rem;display:flex;overflow:hidden}.app .link-btn{color:var(--text-mid);cursor:pointer;font-size:inherit;background:0 0;border:0;align-items:center;gap:.3rem;padding:0;display:inline-flex}.app .link-btn:hover{color:var(--accent)}.app .link-btn svg{width:16px;height:16px}.app .shortcuts{background:var(--surface);width:min(920px,100vw - 2rem);max-height:min(80vh,760px);color:var(--text);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:0;box-shadow:0 30px 80px #0009}.app .shortcuts::backdrop{backdrop-filter:blur(3px);background:#050508b3}.app .sc-head{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex;position:sticky;top:0}.app .sc-head h2{font-size:1.1rem;font-family:var(--font-display);margin:0}.app .sc-cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 1.5rem;padding:.5rem 1.25rem 1.25rem;display:grid}.app .sc-cols h3{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:1rem 0 .4rem;font-size:.7rem}.app .sc-cols dl{margin:0}.app .sc-cols dl div{border-bottom:1px dashed var(--border);justify-content:space-between;align-items:center;gap:.75rem;padding:.3rem 0;font-size:.85rem;display:flex}.app .sc-cols dt{color:var(--text-mid)}.app .sc-cols dd{text-align:right;margin:0}@media (width<=860px){.app .workspace{height:calc(100dvh - var(--header-h));padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom))}.app .help-line{display:none}.app .toolbar{max-width:none;left:8px;right:8px;transform:none}.app .save-status{display:none}.app .panel-toggle{top:auto;right:calc(var(--gutter) + 10px);bottom:calc(.5rem + 10px + env(safe-area-inset-bottom));border-radius:14px;width:48px;height:48px}.app .panel-toggle[aria-expanded=false]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.app .panel,.app:not([data-panel-state=open]) .panel{z-index:60;width:auto;max-height:min(72dvh,620px);padding:0 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--surface);-webkit-backdrop-filter:none;visibility:visible;border-bottom:0;border-radius:18px 18px 0 0;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility;display:block;position:fixed;inset:auto 0 0;transform:translateY(0);box-shadow:0 -16px 40px #00000080}.app:not([data-panel-state=open]) .panel{visibility:hidden;transition:transform .2s ease-in,visibility 0s .2s;transform:translateY(105%)}.app .panel-head{z-index:1;background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;margin:0 -1rem;padding:.9rem .6rem .4rem 1rem;display:flex;position:sticky;top:0}.app .panel-grip{background:var(--border);border-radius:4px;width:40px;height:4px;margin-left:-20px;position:absolute;top:6px;left:50%}.app .panel-title{margin:0;font-size:.95rem;font-weight:700}.app .panel-scrim{z-index:55;background:#05050859;display:block;position:fixed;inset:0}.app .panel-scrim[hidden]{display:none}}@media (prefers-reduced-motion:reduce){.app .panel,.app:not([data-panel-state=open]) .panel{transition:none}}@media (pointer:coarse){.app .help-line>span{display:none}}