:root{font:13px system-ui,Malgun Gothic,sans-serif;color:#23282f;background:#eceef1;color-scheme:light}*{box-sizing:border-box}body{margin:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}button,input,select{font:inherit;color:inherit}button,select,input[type=number]{height:30px;border:1px solid #c9cdd3;border-radius:3px;background:#fff}button{padding:0 10px;cursor:pointer;white-space:nowrap}button:hover{background:#e8edf1}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #337c95;outline-offset:1px}header{min-height:52px;display:flex;align-items:center;gap:20px;padding:10px 18px;border-bottom:1px solid #ccd1d7;background:#f8f9fa}h1{margin:0;font:600 19px system-ui,sans-serif;letter-spacing:-.6px}.header-actions{margin-left:auto;display:flex;gap:6px}.primary{background:#293e4c;color:#fff;border-color:#293e4c}.primary:hover{background:#3b5363}.pagebar{display:flex;align-items:center;gap:12px;padding:7px 18px;border-bottom:1px solid #ccd1d7;min-height:45px}.page-tabs{display:flex;gap:4px;overflow:auto;min-width:70px;flex:1}.page-tabs button{min-width:45px}.page-tabs button[aria-selected=true]{background:#dce5ec;border-color:#8399ac;color:#1c354b}.page-actions{display:flex;gap:4px}.toolarea{background:#f8f9fa;border-bottom:1px solid #ccd1d7;padding:9px 18px}.palette{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.palette button{width:31px;height:26px;padding:0;font:600 11px ui-monospace,Consolas,monospace;border-color:#81909a}.edit-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.toolgroup{display:flex;gap:4px;padding-right:12px;margin-right:6px;border-right:1px solid #d8dce0}.edit-tools label{display:flex;align-items:center;gap:4px;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(300px,40%) minmax(0,60%);gap:1px;background:#ccd1d7;flex:1;min-height:0}.source-panel,.preview-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:#f8f9fa}.pane-heading{display:flex;align-items:center;min-height:38px;padding:8px 16px;border-bottom:1px solid #d8dce0;gap:10px;font-weight:600}.pane-heading .count{margin-left:auto;color:#687582;font-weight:400;font-size:12px}.source-panel textarea{display:block;width:100%;flex:1;min-height:0;padding:22px;border:0;border-radius:0;resize:none;background:#fff;color:#252d36;font:15px/1.8 system-ui,Malgun Gothic,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;outline-offset:-2px}.source-panel textarea::selection{background:#cce0ef}.preview-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #cdd2d8}.preview-tools label{display:flex;gap:4px;align-items:center;font-size:12px}.preview-tools input{width:49px;padding:3px 5px}.preview-tools select{max-width:125px}.preview-tools .zoom{width:58px}.viewport{--screen-width:960px;--screen-height:540px;overflow:auto;min-height:0;flex:1;background:#282c32;padding:18px 24px 28px;scrollbar-gutter:stable}.preview-sheet{margin:0 auto 22px;width:var(--screen-width);max-width:none}.preview-sheet:last-child{margin-bottom:0}.preview-sheet figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;height:30px;margin-bottom:7px;color:#cbd2db;font:12px system-ui,sans-serif}.sheet-actions{display:flex;gap:4px}.sheet-actions button{height:24px;background:#343a43;color:#dce2e8;border-color:#515965;padding:0 8px;font-size:11px}.sheet-actions button:hover{background:#46515e}.screen{display:block;background:#000;width:var(--screen-width);height:var(--screen-height)}.preview-panel:fullscreen{background:#f8f9fa;padding:0}.statusbar{height:27px;min-height:27px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #cbd1d7;background:#f8f9fa;font-size:11px;color:#5c6875}.statusbar .error{color:#b3312a}input[type=checkbox]{accent-color:#365970}@media(max-width:900px){header{gap:8px;padding:8px 10px;flex-wrap:wrap}.header-actions{flex-wrap:wrap}.pagebar{padding:6px 10px;flex-wrap:wrap}.page-actions{flex-wrap:wrap}.toolarea{padding:8px 10px}.workspace{grid-template-columns:1fr;overflow:auto;display:flex;flex-direction:column}.source-panel{flex:none;height:42vh;min-height:230px}.preview-panel{flex:none;height:65vh;min-height:380px}.viewport{padding:14px}.palette button{width:28px}.toolgroup{padding-right:6px;margin-right:0}.pane-heading{padding:8px 12px}}.statusbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[hidden]{display:none!important}.screen-stage{position:relative;width:var(--screen-width);height:var(--screen-height)}.placement-toolbar,#placement-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.placement-toolbar{padding:7px 12px;border-bottom:1px solid #d8dce0}.placement-toolbar button{font-size:12px;padding:0 8px}#placement-toggle[aria-pressed=true]{background:#dce5ec;border-color:#6e899e}.placement-hint{display:none;font-size:11px;margin:0;padding:5px 12px;color:#58636e}.preview-panel:has(#placement-toggle[aria-pressed=true]) .placement-hint{display:block}.placement-layer{position:absolute;inset:0;touch-action:none;cursor:crosshair;user-select:none}.placement-region{position:absolute;border:1px dashed #a7b2bd;cursor:move}.placement-region.selected{border:1px solid #70c9f3;background:#70c9f30f}.region-label{position:absolute;top:-17px;left:-1px;padding:0 3px;font:11px/15px system-ui;background:#172c39;color:#bfe7fb;pointer-events:none}.placement-handle{position:absolute;top:50%;transform:translate(-50%,-50%);height:14px;width:9px;padding:0;border:1px solid #d2ecfa;border-radius:0;background:#267da6;cursor:ew-resize}.placement-handle.left{left:0}.placement-handle.right{left:100%}.placement-marquee{position:absolute;border:1px solid #9bdbfa;background:#70c9f326;pointer-events:none}.placement-guide{position:absolute;background:#efbb60;pointer-events:none}.placement-ruler{position:relative;height:30px;background:#eef1f4;color:#4f5a66;touch-action:none;user-select:none}.ruler-tick{position:absolute;top:0;height:8px;border-left:1px solid #98a2ac;padding-left:3px;font:9px/10px system-ui;pointer-events:none}.ruler-band{position:absolute;bottom:1px;height:10px;border:1px solid #899eab;background:#cad7e1;cursor:move}.ruler-band.selected{border-color:#327d9f;background:#add7eb}.ruler-handle{height:15px}.ruler-gap{position:absolute;bottom:0;height:13px;min-width:0;padding:0;overflow:hidden;font:12px/11px system-ui;border:0;border-radius:0;background:transparent;cursor:ew-resize}.placement-enabled .screen-stage{outline:1px solid #53616e}dialog{border:1px solid #aeb7c0;border-radius:3px;padding:20px;width:min(360px,90vw)}dialog::backdrop{background:#00000059}dialog label{display:block;margin-bottom:8px}#page-name{width:100%;padding:7px;border:1px solid #aeb7c0;font:inherit}.dialog-actions{display:flex;justify-content:flex-end;gap:5px;margin-top:16px}.page-tabs button{max-width:220px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.page-tab{display:flex;flex-shrink:0}.page-tab [role=tab]{border-top-right-radius:0;border-bottom-right-radius:0}.page-tab .page-tab-close{min-width:26px;width:26px;padding:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;font-size:17px;line-height:1}.page-tab:has([aria-selected=true]) .page-tab-close{background:#dce5ec;border-color:#8399ac}.page-tab .page-tab-close:hover{color:#a22d24;background:#f8ecea}.source-panel textarea.layout-source{white-space:pre;overflow-wrap:normal}#placement-region-tools{display:flex;flex-wrap:wrap;gap:4px}#placement-partial-label,#placement-snap-label{display:flex;align-items:center;font-size:12px;white-space:nowrap}#placement-mode{font-size:12px}.edit-line{position:absolute;padding:0;border:0;border-radius:0;background:transparent;z-index:2;min-width:0;touch-action:none}.edit-line:hover,.edit-line:focus-visible{background:#70c9f31f}.edit-line.vertical{width:24px;transform:translate(-50%);cursor:ew-resize}.edit-line.horizontal{height:24px;transform:translateY(-50%);cursor:ns-resize}.line-ink{position:absolute;background:#81d4f7;pointer-events:none}.line-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:inherit}.line-hit:hover{background:transparent}.vertical .line-ink{top:0;bottom:0;left:calc(50% - 1px);width:2px}.horizontal .line-ink{left:0;right:0;top:calc(50% - 1px);height:2px}.line-end{position:absolute;width:16px;height:16px;padding:0;border:1px solid #d4f1fc;border-radius:0;background:#267da6}.vertical .line-end{left:50%;transform:translate(-50%,-50%);cursor:ns-resize}.vertical .start{top:0}.vertical .end{top:100%}.horizontal .line-end{top:50%;transform:translate(-50%,-50%);cursor:ew-resize}.horizontal .start{left:0}.horizontal .end{left:100%}.edit-line.preview{opacity:.55;pointer-events:none}.line-ruler-marker{position:absolute;bottom:0;width:18px;height:21px;padding:0;border:1px solid #1d6082;border-radius:0;background:#4f9ec2;transform:translate(-50%);cursor:ew-resize}.line-affected{position:absolute;background:#70c9f326;outline:1px solid rgb(112 201 243 / 20%);pointer-events:none}.line-snap-guide{position:absolute;top:0;bottom:0;width:1px;background:#efbb60;pointer-events:none}.vertical.compact .line-hit{top:50%;min-height:24px;transform:translateY(-50%)}.vertical.compact .start{left:0}.vertical.compact .end{left:100%}.horizontal.compact .line-hit{left:50%;min-width:24px;transform:translate(-50%)}.horizontal.compact .start{top:0}.horizontal.compact .end{top:100%}#transfer-dialog{width:min(800px,95vw);max-height:92vh;overflow:auto}#transfer-dialog h2{margin:0 0 16px;font-size:15px;font-weight:600}.transfer-options{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.transfer-options label{display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px}.transfer-options select{max-width:280px}.transfer-options input{width:78px;padding:4px 6px}#transfer-error{margin:10px 0;color:#a22d24;font-size:12px}#transfer-error:empty{margin:10px 0 0}#transfer-preview{width:100%;height:auto;display:block;margin-top:12px;background:#000}