:root{color-scheme:light;--ink: #16181a;--ink-soft: #5b6166;--lime: #b6f000;--lime-deep: #7ba300;--paper: #f7f8f6;--panel: #ffffff;--line: #d9dcd6;--warn: #a35b00;--bad: #b3261e}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:IBM Plex Sans,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--paper);color:var(--ink)}#app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh}.workspace{display:flex;min-height:0;min-width:0}.appbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--ink);color:#fff;border-bottom:3px solid var(--lime)}.brand{display:flex;align-items:baseline;gap:10px}.brand .mark{width:14px;height:14px;border-radius:3px;background:var(--lime);align-self:center}.brand .name{font-size:18px;font-weight:700;letter-spacing:.01em}.brand .tag{font-size:12px;color:#b9bfbb}.actions{display:flex;flex-wrap:wrap;gap:8px}.btn{font:inherit;font-size:13px;padding:7px 12px;border-radius:6px;border:1px solid #3a3f42;background:#24282a;color:#f2f4f2;cursor:pointer}.btn:hover{border-color:var(--lime)}.btn-primary{background:var(--lime);border-color:var(--lime);color:#16210a;font-weight:600}.btn-primary:hover{background:#c6ff1a}.btn-small{font-size:11px;padding:3px 8px}.btn[aria-busy=true]{opacity:.6;pointer-events:none}.stage{flex:1 1 auto;min-height:0;min-width:0;padding:12px 12px 0;overflow:hidden}#editor-host{height:100%;min-height:0;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--panel);overflow:hidden}#editor-host>.docier-chrome{height:100%}#editor-host .docier-canvas{min-height:0;overflow:auto}.diagnostics{flex:0 0 auto;position:relative;width:var(--panel-width, 360px);max-width:80%;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel)}.diagnostics[data-collapsed=true]{width:40px;max-width:40px}.diagnostics[data-collapsed=true] .diagnostics-list,.diagnostics[data-collapsed=true] .diagnostics-head h2,.diagnostics[data-collapsed=true] .diagnostics-clear{display:none}.diagnostics[data-collapsed=true] .diagnostics-head{flex-direction:column;padding:8px 2px;gap:8px}.diagnostics[data-collapsed=true] #diagnostics-toggle{writing-mode:vertical-rl;text-orientation:mixed;padding:10px 4px}.diagnostics[data-collapsed=true] .pill{padding:2px 5px}.splitter{position:absolute;inset-block:0;inset-inline-start:-3px;width:7px;cursor:col-resize;background:transparent;border:0;padding:0;touch-action:none;z-index:2}.splitter:hover,.splitter:focus-visible{background:color-mix(in srgb,var(--lime-deep) 45%,transparent);outline:none}.splitter:after{content:"";position:absolute;inset-block:45%;inset-inline-start:3px;width:1px;height:10%;background:var(--line)}.diagnostics[data-collapsed=true] .splitter{display:none}@media(max-width:760px){.workspace{flex-direction:column}.diagnostics,.diagnostics[data-collapsed=true]{width:auto;max-width:none;max-height:45vh;border-left:0;border-top:1px solid var(--line)}.diagnostics[data-collapsed=true] .diagnostics-head{flex-direction:row;padding:10px 12px}.diagnostics[data-collapsed=true] #diagnostics-toggle{writing-mode:horizontal-tb;padding:3px 8px}.splitter{display:none}}.diagnostics-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.diagnostics-head h2{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);flex:1}.pill{font-size:11px;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:999px;background:#e8eae6;color:var(--ink)}.pill-ok{background:#e6f5c9;color:#3f5c00}.pill-warn{background:#fdeccd;color:var(--warn)}.pill-bad{background:#fbdedb;color:var(--bad)}.diagnostics-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.diagnostics-list li{padding:8px 12px;border-bottom:1px solid #eef0ec;display:grid;gap:2px}.diagnostics-list li[data-severity=error]{border-left:3px solid var(--bad)}.diagnostics-list li[data-severity=warning]{border-left:3px solid #e0a52a}.diagnostics-list li[data-severity=info]{border-left:3px solid var(--lime-deep)}.diagnostics-list .code{font-weight:600;color:var(--ink);word-break:break-word}.diagnostics-list .message{color:var(--ink-soft);word-break:break-word}.diagnostics-list .meta{color:#8a9089;font-size:11px}.appbar .btn:focus-visible,.diagnostics .btn:focus-visible{outline:2px solid var(--lime);outline-offset:1px}