:root{--bg0: #f5f2e9;--bg1: #ebe6d8;--paper: #fffef9;--ink: #1f2521;--muted: #667066;--line: #d9d3c4;--accent: #136978;--accent-soft: rgba(19, 105, 120, .12);--error: #b43f33;--success: #2f7d58;--shadow: 0 16px 36px rgba(36, 44, 35, .08);--serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;--mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(circle at 12% -8%,#fffbef 0,transparent 40%),radial-gradient(circle at 92% 4%,#f3efe2 0,transparent 36%),linear-gradient(160deg,var(--bg0),var(--bg1))}.app-shell{width:min(1200px,100% - 40px);margin:14px auto;display:grid;gap:16px;min-height:calc(100vh - 28px);grid-template-rows:auto 1fr}.topbar{display:flex;gap:16px;align-items:center;padding:12px 16px;border:1px solid color-mix(in srgb,var(--line),#fff 20%);border-radius:18px;background:color-mix(in srgb,var(--paper),#fff 40%);box-shadow:var(--shadow)}.topbar h1{margin:0 0 2px;font-family:var(--serif);font-size:clamp(1.65rem,2vw,2.15rem);letter-spacing:.01em}.subtitle{margin:0;color:var(--muted);font-size:.92rem}.subtitle a{color:#255d78;text-decoration:none;border-bottom:1px solid color-mix(in srgb,#255d78,#fff 50%)}.subtitle a:hover{color:#1d4d65;border-bottom-color:#1d4d65}.workspace{display:grid;gap:16px;grid-template-columns:1.05fr .95fr;height:clamp(360px,calc(100vh - 132px),920px);min-height:0}.panel{border:1px solid color-mix(in srgb,var(--line),#fff 20%);border-radius:18px;background:color-mix(in srgb,var(--paper),#fff 24%);box-shadow:var(--shadow);overflow:hidden;min-height:0}.editor-panel{min-height:0}.editor-shell{height:100%;min-height:0;overflow:hidden;display:flex}.editor-shell>*{flex:1 1 auto;min-height:0}.editor-shell .cm-editor{height:100%;min-height:0;max-height:100%}.editor-shell .cm-scroller{height:100%!important;overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable}.editor-shell .cm-gutters{height:100%!important}.editor-shell .cm-scroller::-webkit-scrollbar{width:11px;height:11px}.editor-shell .cm-scroller::-webkit-scrollbar-thumb{background:#c6c1b5}.editor-shell .cm-scroller::-webkit-scrollbar-track{background:#efeadf}.preview-panel{display:grid;grid-template-rows:1fr auto;min-height:0}.preview-canvas{position:relative;margin:10px;border:1px solid var(--line);border-radius:0;overflow:hidden;background:#fff;min-height:0;touch-action:none;cursor:grab}.preview-canvas.dragging{cursor:grabbing}.svg-scroll{position:relative;width:100%;height:100%;overflow:hidden;display:grid;place-items:center;padding:10px}.svg-stage{transform-origin:center center;will-change:transform}.svg-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;pointer-events:none;user-select:none}.image-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}.image-tool{width:34px;height:34px;border:1px solid color-mix(in srgb,var(--line),#fff 20%);background:#ffffffeb;color:#203027;border-radius:0;display:grid;place-items:center;padding:0;cursor:pointer;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease,background-color .12s ease}.image-tool svg{width:18px;height:18px;fill:currentColor}.svg-scroll:hover .image-tool,.image-tool:focus-visible{opacity:1;transform:translateY(0)}.image-tool:hover{background:#f7f2e7}.preview-empty{color:var(--muted);font-size:.95rem;padding:20px}.diagnostics-wrap{padding:0 14px 14px}.diagnostics-wrap h3{margin:0 0 8px;color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.diagnostics{margin:0;max-height:180px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:0;background:#fffefb;color:#314038;font-family:var(--mono);font-size:.78rem;line-height:1.35}.diagnostics.error{color:#7d2f28;border-color:color-mix(in srgb,var(--error),#fff 55%);background:color-mix(in srgb,var(--error),#fff 94%)}@media(max-width:1000px){.workspace{grid-template-columns:1fr;height:auto}.editor-panel{min-height:320px;height:min(56vh,520px)}.editor-shell{height:100%}.preview-panel{grid-template-rows:minmax(300px,52vh) auto}}@media(max-width:680px){.app-shell{width:calc(100% - 24px);margin:10px auto;min-height:calc(100vh - 20px)}.topbar{padding:10px 12px}.topbar h1{font-size:clamp(1.35rem,5vw,1.85rem)}.preview-panel{grid-template-rows:minmax(260px,46vh) auto}}