#app{display:grid;grid-template-columns:48px minmax(0,1fr) 260px;grid-template-rows:40px auto minmax(0,1fr) 34px;height:100vh;transition:grid-template-columns .18s ease}#app.props-collapsed{grid-template-columns:48px minmax(0,1fr) 0}#app>.tools{grid-column:1;grid-row:1/-1}#app>.doc-tabs{grid-column:2;grid-row:2}#app>main{grid-column:2;grid-row:3}#app>.canvas-bar{grid-column:2;grid-row:4}#app>.props{grid-column:3;grid-row:1/-1}.tnav{position:fixed;top:0;left:48px;right:260px;border-bottom:none;z-index:40;pointer-events:none;transition:right .18s ease}.tnav>*{pointer-events:auto}body.props-collapsed .tnav{right:0}.tools{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;overflow:auto}.tools .ic{width:17px;height:17px}.tool-btn{width:34px;height:34px;border:none;border-radius:6px;background:0 0;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}.tool-btn:hover{background:var(--panel2);color:var(--ink)}.tool-btn.on{background:var(--accent);color:#fff}.tool-btn:disabled{opacity:.3;cursor:default;background:0 0;color:var(--muted)}.tools .sep{width:22px;border-top:1px solid var(--line2);margin:5px 0}.tools .spacer{flex:1}.tool-btn.danger:hover{color:var(--danger)}.doc-tabs{display:flex;align-items:center;gap:10px;min-width:0;height:32px;padding:0 8px;background:var(--panel);border-bottom:1px solid var(--line)}.doc-tabs__list{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto}.doc-tabs__list::-webkit-scrollbar{height:0}.doc-tab{display:flex;align-items:center;height:24px;max-width:190px;padding-right:2px;border:1px solid transparent;border-radius:5px;background:var(--panel2);color:var(--muted);flex:none}.doc-tab:hover{color:var(--ink)}.doc-tab.on{color:var(--ink);border-color:var(--accent);background:rgba(255,107,53,.1)}.doc-tab__name{min-width:0;max-width:160px;padding:0 8px;border:none;background:0 0;color:inherit;font:600 10px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.doc-tabs.busy .doc-tab:not(.on){opacity:.45}.doc-tab__name:disabled{cursor:progress}.doc-tab__add,.doc-tab__close{width:18px;height:18px;padding:0;border:none;border-radius:4px;background:0 0;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}.doc-tab__add svg,.doc-tab__close svg{width:10px;height:10px}.doc-tab__close:hover{background:var(--panel3);color:var(--ink)}.doc-tab__add{width:22px;height:22px;margin-left:4px}.doc-tab__add svg{width:13px;height:13px}.doc-tab__add:hover:not(:disabled){background:var(--panel2);color:var(--ink)}.doc-tab__add:disabled{opacity:.3;cursor:default}.doc-tabs__note{margin-left:auto;color:var(--danger);font:500 10px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}main{position:relative;overflow:auto;display:grid;place-items:center;padding:24px}.editor-drop{position:absolute;inset:12px;z-index:35;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:10px;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--ink);text-align:center;pointer-events:none;backdrop-filter:blur(3px)}.editor-drop strong{display:block;font:700 13px/1.2 var(--mono)}.editor-drop span{display:block;margin-top:7px;color:var(--muted);font-size:11px}.stage{display:flex;gap:24px;align-items:flex-start}.stage figure{margin:0;text-align:center}.stage figcaption{color:var(--muted);padding-top:8px}.stage img{display:block;box-shadow:0 2px 14px rgba(0,0,0,.5);background:repeating-conic-gradient(#e8e6e2 0 25%,#dbd8d3 0 50%) 0 0/16px 16px}.empty{color:var(--muted);font-size:12px;text-align:center;line-height:1.7}.canvas-bar{display:flex;align-items:center;gap:14px;height:34px;padding:0 10px;background:var(--panel);border-top:1px solid var(--line);color:var(--muted);font:500 10px/1 var(--mono);white-space:nowrap;overflow:hidden}.canvas-bar__info{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;margin-left:auto}.canvas-bar__zoom{display:flex;align-items:center;gap:8px;flex:none}.canvas-bar__zoom .t-range{width:110px}.canvas-bar .t-btn.t-btn--ghost,.canvas-bar .t-stepper,.canvas-bar .t-stepper input{height:24px;min-height:24px}.props{background:var(--panel);border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;min-width:0;min-height:0}.props>.t-accordion__item{flex:none}.props .t-range{margin-bottom:8px}.props .t-row{margin-bottom:8px}.props .t-row:last-child{margin-bottom:0}.props-toggle{width:32px;height:32px;padding:0;position:fixed;top:4px;z-index:110;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:6px;color:var(--muted);cursor:pointer;transition:right .18s ease,color .15s,background .15s}.props-toggle:hover{color:var(--ink);background:var(--panel2)}.props-toggle .ic{width:16px;height:16px}.props-toggle.close{right:268px}.props-toggle.close .ic{transform:rotate(180deg)}.props-toggle.open{right:8px}input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--line2);border-radius:5px;background:var(--panel2);cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}label.file{cursor:pointer}label.file input{display:none}.file-actions{flex-wrap:nowrap;gap:4px}.file-actions>.t-btn:not(.t-btn--icon){padding-inline:5px;white-space:nowrap}.file-actions>.t-grow{min-width:0}.canvas-size-row{flex-wrap:nowrap;gap:4px}.swatches{display:flex;flex-wrap:wrap;gap:4px}.sw{width:21px;height:21px;border-radius:4px;border:1px solid rgba(255,255,255,.14);cursor:pointer;padding:0;background:0 0}.sw:hover{border-color:rgba(255,255,255,.5)}.sw.on{outline:2px solid var(--accent);outline-offset:1px}.sw.add{border:1px dashed var(--panel3);color:var(--muted);display:grid;place-items:center}.sw.add:hover{color:var(--ink);border-color:var(--muted)}.sw.add .ic{width:11px;height:11px}.mini{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.12)}.preview-options{display:grid;grid-template-columns:1fr 1fr;gap:5px}.preview-option{display:flex;align-items:center;gap:7px;min-width:0;height:31px;padding:0 8px;color:var(--muted);background:0 0;border:1px solid var(--line2);border-radius:5px;cursor:pointer}.preview-option:hover{color:var(--ink);border-color:var(--muted)}.preview-option.on{color:var(--ink);border-color:var(--accent);background:rgba(255,107,53,.08)}.preview-option__swatch{width:16px;height:16px;border:1px solid rgba(255,255,255,.18);border-radius:3px;flex:none}.preview-option__label{font:600 10px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}.mode-btn{height:29px;padding:0 4px;color:var(--muted);background:var(--panel2);border:1px solid var(--line2);border-radius:5px;cursor:pointer;font:600 10px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-btn:hover{color:var(--ink);border-color:var(--muted)}.mode-btn.on{color:var(--ink);border-color:var(--accent);background:rgba(255,107,53,.08)}.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:200;padding:16px}.modal{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:14px 16px;width:250px;box-shadow:0 10px 40px rgba(0,0,0,.6)}.m-title{font-weight:600;margin-bottom:10px}.modal.help{width:min(840px,calc(100vw - 32px));max-height:88vh;padding:28px 32px;overflow-y:auto;position:relative;border-radius:14px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.65)}.modal.help .close-btn{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .15s ease;z-index:10;padding:0}.modal.help .close-btn:hover{background:rgba(255,255,255,.14);color:var(--ink);border-color:rgba(255,255,255,.2)}.modal.help .close-btn .ic{width:16px;height:16px}.about-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.about-col{display:flex;flex-direction:column;padding-right:32px;border-right:1px solid var(--line2)}.shortcuts-col{display:flex;flex-direction:column}.about-modal-title{font-size:18px;font-weight:600;color:var(--ink);margin:0 0 16px 0;letter-spacing:-.01em;line-height:1.2}.about-desc-p{margin:0 0 12px 0;color:var(--muted);font-size:13px;line-height:1.6}.about-desc-p strong{color:var(--ink);font-weight:600}.about-desc-p a,.about-desc-p a:visited,.about-doc-link,.about-doc-link:visited{color:var(--ink);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,0.3);transition:color .15s,text-decoration-color .15s}.about-desc-p a:hover,.about-doc-link:hover{color:var(--accent);text-decoration-color:var(--accent)}.about-doc-link{display:inline-flex;align-items:center;gap:4px;margin-top:4px;margin-bottom:16px}.about-subtitle{font-size:16px;font-weight:600;color:var(--ink);margin:20px 0 10px 0}.shortcuts-list{display:flex;flex-direction:column;gap:2px;max-height:64vh;overflow-y:auto;padding-right:4px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}.shortcut-row:last-child{border-bottom:none}.shortcut-label{color:var(--ink);font-size:13px}.shortcut-keys{display:flex;align-items:center;gap:4px;flex-shrink:0}.shortcut-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:5px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.3)}