: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}