:root{--bg:#f4f5f7;--panel:#fff;--hover:#0f172a0d;--line:#e4e7eb;--line-strong:#d1d6dc;--text:#19212a;--muted:#66707b;--faint:#9aa2ab;--accent:#2563eb;--accent-hover:#1d4fd8;--accent-soft:#e9f0fe;--error:#cf3036;--error-soft:#fdeded;--warning:#a35f00;--warning-soft:#fff4df;--ok:#18794e;--ok-soft:#e7f5ee;--canvas:#e6e8ec;--radius:8px;--shadow:0 1px 2px #0f172a0f, 0 1px 3px #0f172a14;--shadow-lifted:0 6px 24px #0f172a24, 0 1px 3px #0f172a14;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3,p{margin:0}.icon{flex:none}button,.button,input,select{font:inherit;color:inherit}button,.button{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}button:hover,.button:hover{background:var(--bg)}button:focus-visible,.button:focus-within,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.primary{border-color:var(--accent);background:var(--accent);color:#fff}button.primary:hover{border-color:var(--accent-hover);background:var(--accent-hover)}button.danger{border-color:var(--error);background:var(--error);color:#fff}button.ghost{color:var(--muted);background:0 0;border-color:#0000}button.ghost:hover{background:var(--hover);color:var(--text)}button.ghost.on{background:var(--accent-soft);color:var(--accent)}button.icon-only{width:32px;padding:0}button.small,.button.small{height:26px;padding:0 8px;font-size:13px}button.icon-only.small{width:26px;padding:0}button.link{height:auto;color:var(--accent);background:0 0;border:0;padding:0;font-weight:500}button.link:hover{background:0 0;text-decoration:underline}input{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);height:34px;padding:0 10px}.hint{color:var(--muted);font-size:13px}.notice{border-radius:var(--radius);background:var(--accent-soft);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 8px 8px 12px;font-size:13px;display:flex}.notice>span:first-child{flex:1}.notice.warning{background:var(--warning-soft)}.notice.error{background:var(--error-soft)}.start{max-width:880px;min-height:100%;margin:0 auto;padding:48px 24px 64px}.start.dropping{outline:2px dashed var(--accent);outline-offset:-12px;border-radius:16px}.start-head{align-items:center;gap:16px;margin-bottom:28px;display:flex}.mark{background:var(--accent);color:#fff;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.start-head h1{letter-spacing:-.01em;font-size:24px;font-weight:650}.start-head p{color:var(--muted)}.start>.notice{margin-bottom:16px}.card{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:12px;margin-bottom:20px;padding:20px 24px 24px}.card h2{margin-bottom:4px;font-size:16px;font-weight:600}.card h3{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:24px 0 6px;font-size:12px;font-weight:600}.card .row{margin-top:16px}.row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.row .hint{align-self:center}.field{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;font-weight:500;display:flex}.field input{width:260px;color:var(--text);font-size:14px}.row button,.row .button{height:34px}.templates{flex-wrap:wrap;gap:14px;margin-top:16px;display:flex}.template{border-color:var(--line);border-radius:12px;flex-direction:column;gap:8px;height:auto;padding:10px 10px 8px}.template.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.template-wrap{position:relative}.template-wrap .remove{background:var(--panel);box-shadow:var(--shadow);position:absolute;top:4px;right:4px}.template-origin{color:var(--faint);letter-spacing:.04em;text-transform:uppercase;margin-top:-4px;font-size:11px;font-weight:500}.template.add{border:1px dashed var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;align-items:center;display:inline-flex}.template.add .thumb{background:var(--bg);box-shadow:none;place-items:center;display:grid}.template.add:hover{border-color:var(--accent);color:var(--accent)}.thumb{width:150px;height:212px;box-shadow:var(--shadow);background:#fff;border-radius:4px;display:block;position:relative;overflow:hidden}.thumb iframe{transform-origin:0 0;pointer-events:none;border:0;width:3179px;height:4494px;position:absolute;top:0;left:0;transform:scale(.0472)}.template-name{text-align:center;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:150px;min-height:2.6em;font-size:13px;line-height:1.3;display:-webkit-box;overflow:hidden}.rows{margin:0;padding:0;list-style:none}.row-item{border-radius:var(--radius);align-items:center;gap:4px;display:flex}.row-item:hover{background:var(--bg)}.row-main{height:40px;color:var(--muted);background:0 0;border:0;flex:1;justify-content:flex-start;gap:10px}.row-main:hover{background:0 0}.row-name{color:var(--text)}.row-meta{color:var(--faint);margin-left:auto;font-size:12px;font-weight:400}.editor{--sidebar:248px;--splitter:7px;grid-template-rows:auto minmax(0,1fr);grid-template-columns:var(--sidebar) calc((100% - var(--sidebar) - var(--splitter)) * var(--editor-width,.42)) var(--splitter) minmax(0, 1fr);grid-template-areas:"top top top top""files file splitter preview";height:100%;display:grid}.editor.no-sidebar{--sidebar:0px}.editor.no-sidebar .files{display:none}.editor.view-edit{grid-template-columns:var(--sidebar) minmax(0, 1fr) 0 0}.editor.view-preview{grid-template-columns:0 0 0 minmax(0,1fr)}.editor.view-edit .splitter,.editor.view-preview .splitter,.editor.view-preview .files,.editor.view-preview .file-view{display:none}.topbar{border-bottom:1px solid var(--line);background:var(--panel);grid-area:top;align-items:center;gap:8px;height:56px;padding:0 12px;display:flex}.title{flex-direction:column;min-width:0;margin:0 8px 0 4px;display:flex}.title h1{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.title span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.segmented{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;gap:2px;margin:0 auto;padding:3px;display:inline-flex}.segmented button{height:30px;color:var(--muted);background:0 0;border:0;border-radius:7px;padding:0 12px}.segmented button:hover{color:var(--text);background:0 0}.segmented button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}.actions{align-items:center;gap:8px;display:flex}.badge{border:0;border-radius:999px;height:30px;padding:0 12px;font-size:13px}.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warning{background:var(--warning-soft);color:var(--warning)}.badge.error{background:var(--error-soft);color:var(--error)}.badge:hover{filter:brightness(.97)}.badge.ok:hover{background:var(--ok-soft)}.badge.warning:hover{background:var(--warning-soft)}.badge.error:hover{background:var(--error-soft)}.files{border-right:1px solid var(--line);background:var(--panel);grid-area:files;padding:8px 10px 16px;overflow:auto}.files.dropping{outline:2px dashed var(--accent);outline-offset:-6px}.files-head{justify-content:space-between;align-items:center;padding:2px 2px 6px 6px;font-weight:600;display:flex}.files section{margin-top:10px}.files h2{min-height:26px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:0 2px 0 8px;font-size:11px;font-weight:600;display:flex}.files ul{margin:0;padding:0;list-style:none}.file{width:100%;height:30px;color:var(--muted);background:0 0;border:0;border-radius:6px;justify-content:flex-start;gap:8px;padding:0 8px;font-weight:400}.file span{color:var(--text);text-overflow:ellipsis;overflow:hidden}.file:hover{background:var(--hover)}.file.open{background:var(--accent-soft);color:var(--accent)}.file.open span{color:var(--accent);font-weight:500}.inline-input{border-color:var(--accent);outline:3px solid var(--accent-soft);border-radius:6px;width:100%;height:30px;padding:0 8px}.files .hint{margin:16px 8px 0;font-size:12px}.file-view{background:var(--panel);flex-direction:column;grid-area:file;min-width:0;min-height:0;display:flex}.file-head{border-bottom:1px solid var(--line);height:44px;color:var(--muted);align-items:center;gap:8px;padding:0 8px 0 16px;display:flex}.file-head .path{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.file-head .inline-input{max-width:360px}.keep .inline-input{width:180px}.template-choice{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);height:30px;padding:0 8px;font-size:13px}.save-state{color:var(--faint);font-size:12px}.file-actions{align-items:center;gap:4px;margin-left:auto;font-size:13px;display:flex}.file-view>.notice{margin:8px 12px 0}.file-body{flex:1;min-height:0;overflow:hidden}.code,.code .cm-editor{height:100%}.code .cm-editor.cm-focused{outline:none}.code .cm-scroller{font:14px/1.65 ui-monospace,Cascadia Code,SF Mono,Menlo,Consolas,monospace}.code .cm-content{padding:14px 0 40vh}.code .cm-line{padding:0 20px 0 8px}.code .cm-gutters{background:var(--panel);color:var(--faint);border-right:0}.code .cm-activeLine{background:#2563eb0b}.code .cm-activeLineGutter{color:var(--text);background:0 0}.picture{background:var(--bg);place-items:center;height:100%;padding:24px;display:grid;overflow:auto}.picture img{max-width:100%;max-height:100%;box-shadow:var(--shadow);background:#fff}.problems{border-top:1px solid var(--line);max-height:34%;overflow:auto}.problems-head{background:var(--panel);width:100%;height:38px;color:var(--muted);border:0;border-radius:0;justify-content:flex-start;gap:8px;padding:0 16px;font-size:13px}.problems-head:hover{background:var(--bg)}.problems-head .count{background:var(--bg);border-radius:999px;padding:0 7px;font-size:12px}.problems ul{margin:0;padding:0 12px 10px;list-style:none}.problems li{border-radius:6px;gap:8px;padding:6px 8px;font-size:13px;display:flex}.problems li .icon{margin-top:2px}.problems li.error .icon{color:var(--error)}.problems li.warning .icon{color:var(--warning)}.problems li:hover{background:var(--bg)}.problems.closed{overflow:visible}.splitter{cursor:col-resize;background:var(--panel);touch-action:none;grid-area:splitter;position:relative}.splitter:after{content:"";background:var(--line);width:1px;transition:background .12s,box-shadow .12s;position:absolute;top:0;bottom:0;left:3px}.splitter:hover:after{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.preview{background:var(--canvas);grid-area:preview;min-width:0;min-height:0;position:relative}.preview.hidden{visibility:hidden;width:800px;height:600px;position:fixed;top:0;left:-10000px}.canvas{outline:none;position:absolute;inset:0;overflow:auto}.canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.stage{position:relative}.sheet{background:#fff;position:absolute;box-shadow:0 1px 3px #0f172a1f,0 10px 30px #0f172a24}.sheet iframe{transform-origin:0 0;visibility:hidden;background:#fff;border:0;position:absolute;top:0;left:0}.sheet iframe.shown{visibility:visible}.glass{touch-action:none;position:absolute;inset:0}.zoombar{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lifted);border-radius:12px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.zoombar button{height:30px}.zoombar button.icon-only{width:30px}.zoom-value{font-variant-numeric:tabular-nums;text-align:center;min-width:52px;font-size:13px}.zoombar .divider{background:var(--line);width:1px;height:20px;margin:0 4px}.busy{background:var(--panel);box-shadow:var(--shadow);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12px;position:absolute;top:12px;right:16px}@media (width<=1180px){.segmented span,.actions button:not(.primary):not(.badge) span{display:none}}@media (width<=800px){.title span,.actions .primary span{display:none}.editor.view-split{grid-template-columns:var(--sidebar) minmax(0, 1fr) 0 0}.editor.view-split .splitter{display:none}}