:root{--color-app-bg: #e8eef6;--color-app-bg-end: #d8e3ee;--color-grid-line: rgba(38, 57, 82, .16);--color-grid-glow: rgba(6, 182, 212, .18);--color-surface: #f7fbff;--color-surface-raised: #eef4fb;--color-surface-muted: #e2ecf7;--color-surface-inset: #d8e5f1;--color-text: #111827;--color-text-muted: #5c6878;--color-text-subtle: #8794a5;--color-border: #c8d4e2;--color-border-strong: #8ea1b8;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-subtle: #dceafe;--color-primary-text: #ffffff;--color-accent: #06b6d4;--color-accent-soft: #dffbff;--color-success: #16a34a;--color-danger: #dc2626;--color-focus: #06b6d4;--color-editor-gutter: #edf4fb;--color-control-bg: rgba(247, 251, 255, .72);--color-control-bg-hover: #ffffff;--color-control-border: rgba(142, 161, 184, .52);--color-control-border-hover: #2563eb;--color-control-active-bg: #dffbff;--color-control-active-text: #075985;--color-logo-bg: #080b12;--color-logo-core: #67e8f9;--color-modal-backdrop: rgba(15, 23, 42, .42);--color-tooltip-bg: #0f172a;--color-tooltip-text: #eef6ff;--gradient-brand: linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #22c55e 100%);--gradient-app: linear-gradient(180deg, var(--color-app-bg) 0%, var(--color-app-bg-end) 100%);--gradient-workbench: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, transparent), var(--color-surface-raised));--font-ui: "Inter", "Aptos", "PingFang SC", "Microsoft YaHei", sans-serif;--font-editor: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--font-title: "Aptos Display", "Inter", "Aptos", "PingFang SC", sans-serif;--text-title: 19px;--text-body: 14px;--text-small: 12px;--text-button: 13px;--text-panel-title: 11px;--text-article: 16px;--text-article-small: 13px;--text-article-table: 15px;--text-article-h1: 31px;--text-article-h2: 22px;--text-article-h3: 18px;--text-code-scale: .92em;--line-ui: 1.45;--line-editor: 1.72;--line-article: 1.9;--line-heading: 1.3;--space-1: 4px;--space-2: 6px;--space-3: 8px;--space-4: 10px;--space-5: 12px;--space-6: 14px;--space-7: 16px;--space-8: 20px;--space-9: 24px;--space-10: 28px;--space-11: 32px;--radius-control: 6px;--radius-panel: 8px;--radius-logo: 10px;--size-control-height: 34px;--size-icon-button: 34px;--size-device-switch-width: 116px;--size-device-switch-thumb-width: 56px;--size-color-swatch: 24px;--size-panel-title: 36px;--size-app-padding: 0px;--size-topbar-height: 48px;--size-writing-toolbar-height: 40px;--size-writing-content-max: 980px;--size-writing-gutter: 72px;--size-workbench-accent: 1px;--size-brand-mark: 32px;--size-preview-max: 820px;--size-article-image-max-height: min(62vh, 640px);--size-article-image-compact-max-height: 48vh;--size-brand-lockup-min: 168px;--size-theme-select-min: 92px;--size-settings-width: 640px;--size-sidebar-width: 260px;--size-sidebar-compact-width: 220px;--size-sidebar-mobile-height: 260px;--size-editor-pane-min: 360px;--size-editor-pane-compact-min: 300px;--size-preview-pane-min: 340px;--size-preview-pane-compact-min: 300px;--size-pane-resizer: 8px;--size-preview-mobile-pane: 420px;--size-preview-mobile-pane-compact: 360px;--size-preview-mobile-shell-width: 430px;--size-preview-mobile-shell-width-compact: 380px;--size-preview-mobile-width: 390px;--size-preview-mobile-width-compact: 340px;--size-preview-mobile-height: 620px;--size-preview-mobile-height-compact: 540px;--size-phone-speaker-width: 72px;--size-theme-card-min: 128px;--size-theme-css-min: 180px;--size-image-thumb: 44px;--size-image-width-input: 84px;--size-tree-row: 30px;--size-mobile-pane-min: 440px;--size-border: 1px;--size-heading-accent: 4px;--z-topbar: 50;--z-writing-toolbar: 80;--z-modal: 120;--z-tooltip: 9999;--duration-control: .16s;--shadow-panel: 0 18px 46px rgba(37, 54, 76, .14);--shadow-paper: 0 22px 58px rgba(37, 54, 76, .15);--shadow-control: 0 1px 0 rgba(37, 54, 76, .08);--shadow-glow: 0 0 0 1px rgba(6, 182, 212, .1), 0 18px 50px rgba(37, 99, 235, .16)}.dark{--color-app-bg: #05070b;--color-app-bg-end: #0a1017;--color-grid-line: rgba(103, 232, 249, .13);--color-grid-glow: rgba(34, 197, 94, .16);--color-surface: #0e151d;--color-surface-raised: #0a1119;--color-surface-muted: #131f2b;--color-surface-inset: #070d14;--color-text: #e5edf7;--color-text-muted: #9ba8bb;--color-text-subtle: #6f7d91;--color-border: #253246;--color-border-strong: #3f536f;--color-primary: #38bdf8;--color-primary-hover: #67e8f9;--color-primary-subtle: rgba(56, 189, 248, .14);--color-primary-text: #061018;--color-accent: #22c55e;--color-accent-soft: rgba(34, 197, 94, .13);--color-success: #4ade80;--color-danger: #fb7185;--color-focus: #67e8f9;--color-editor-gutter: #0b111a;--color-control-bg: rgba(10, 17, 25, .68);--color-control-bg-hover: rgba(19, 31, 43, .92);--color-control-border: rgba(103, 232, 249, .2);--color-control-border-hover: rgba(103, 232, 249, .58);--color-control-active-bg: rgba(103, 232, 249, .16);--color-control-active-text: #a7f3d0;--color-logo-bg: #020617;--color-logo-core: #a7f3d0;--color-modal-backdrop: rgba(2, 6, 23, .72);--color-tooltip-bg: #e5edf7;--color-tooltip-text: #061018;--gradient-brand: linear-gradient(135deg, #38bdf8 0%, #22c55e 58%, #facc15 100%);--gradient-app: linear-gradient(180deg, var(--color-app-bg) 0%, var(--color-app-bg-end) 100%);--gradient-workbench: linear-gradient(180deg, rgba(10, 17, 25, .98), rgba(7, 13, 20, .98));--shadow-panel: 0 22px 60px rgba(0, 0, 0, .42);--shadow-paper: 0 24px 70px rgba(0, 0, 0, .45);--shadow-control: 0 1px 0 rgba(255, 255, 255, .04);--shadow-glow: 0 0 0 1px rgba(103, 232, 249, .12), 0 22px 70px rgba(34, 197, 94, .1)}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%}body{position:relative;margin:0;background:var(--gradient-app);color:var(--color-text);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--line-ui);overflow:hidden}body.is-resizing-preview{cursor:col-resize;-webkit-user-select:none;user-select:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(var(--color-grid-line) var(--size-border),transparent var(--size-border)),linear-gradient(90deg,var(--color-grid-line) var(--size-border),transparent var(--size-border)),linear-gradient(135deg,transparent 0%,var(--color-grid-glow) 48%,transparent 100%);background-size:var(--space-11) var(--space-11),var(--space-11) var(--space-11),100% 100%}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}button:focus-visible,select:focus-visible,input:focus-visible{outline:var(--size-border) solid var(--color-focus);outline-offset:var(--space-1)}.app-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);gap:0;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;padding:var(--size-app-padding);overflow:hidden}.app-shell.writing-mode{grid-template-rows:minmax(0,1fr);background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 42%),var(--gradient-app)}.app-shell.writing-mode .topbar,.app-shell.writing-mode .navigator,.app-shell.writing-mode .pane-resizer,.app-shell.writing-mode .preview-pane{display:none}.app-shell.writing-mode .workbench,.app-shell.writing-mode .workspace{grid-template-columns:minmax(0,1fr)}.app-shell.writing-mode .editor-pane{width:min(100%,var(--size-writing-content-max));margin:0 auto;border-inline:var(--size-border) solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 94%,transparent)}.app-shell.writing-mode .pane-title{display:none}.app-shell.writing-mode .editor-frame .cm-content{padding:calc(var(--size-writing-toolbar-height) + var(--space-10)) var(--size-writing-gutter) var(--space-11)}.app-shell.writing-mode .editor-frame .cm-scroller{background:linear-gradient(var(--color-grid-line) var(--size-border),transparent var(--size-border)),linear-gradient(90deg,var(--color-grid-line) var(--size-border),transparent var(--size-border)),color-mix(in srgb,var(--color-surface) 94%,transparent);background-size:var(--space-11) var(--space-11),var(--space-11) var(--space-11),100% 100%}.writing-mode-toolbar{position:fixed;z-index:var(--z-writing-toolbar);top:var(--space-5);left:50%;display:inline-flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - var(--space-8) * 2);min-height:var(--size-writing-toolbar-height);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-4);border:var(--size-border) solid var(--color-control-border);border-radius:var(--radius-control);color:var(--color-text-muted);background:color-mix(in srgb,var(--color-surface-inset) 84%,transparent);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(var(--space-5));backdrop-filter:blur(var(--space-5));transform:translate(-50%)}.writing-mode-toolbar span,.writing-mode-toolbar strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.writing-mode-toolbar strong{color:var(--color-primary-hover);font-size:var(--text-small)}.topbar{position:relative;z-index:var(--z-topbar);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-width:0;min-height:var(--size-topbar-height);padding:0 var(--space-4);border:0;border-bottom:var(--size-border) solid var(--color-border);border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 32%),color-mix(in srgb,var(--color-surface-raised) 92%,transparent);box-shadow:none;-webkit-backdrop-filter:blur(var(--space-5));backdrop-filter:blur(var(--space-5));overflow:visible}.topbar:before{content:none;position:absolute;inset:auto 0 0;height:var(--size-workbench-accent);background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-accent),transparent);opacity:.82;pointer-events:none}.brand-lockup{display:flex;align-items:center;gap:var(--space-3);min-width:var(--size-brand-lockup-min)}.brand-copy{display:flex;align-items:baseline;gap:var(--space-4);min-width:0}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--size-brand-mark);height:var(--size-brand-mark);border:var(--size-border) solid color-mix(in srgb,var(--color-primary) 34%,var(--color-border));border-radius:var(--radius-logo);background:var(--color-logo-bg);box-shadow:inset 0 0 0 var(--size-border) color-mix(in srgb,var(--color-logo-core) 18%,transparent),var(--shadow-control);overflow:hidden}.brand-mark img{display:block;width:100%;height:100%}.brand-lockup h1,.brand-meta{margin:0}.brand-lockup h1{font-family:var(--font-title);font-size:var(--text-title);line-height:var(--line-heading);color:transparent;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text}.brand-meta{display:flex;align-items:center;gap:var(--space-3);min-width:0;color:var(--color-text-muted);font-size:var(--text-small);white-space:nowrap}.brand-subtitle{color:var(--color-text-muted)}.toolbar,.toolbar-group{display:flex;align-items:center;min-width:0}.toolbar{justify-content:flex-end;flex-wrap:nowrap;gap:var(--space-3);overflow:visible;scrollbar-width:thin}.toolbar-group{flex-wrap:nowrap;gap:var(--space-2)}.toolbar-actions{justify-content:flex-end}.icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--size-icon-button);min-width:var(--size-icon-button);height:var(--size-control-height);padding:0;border:var(--size-border) solid var(--color-control-border);border-radius:var(--radius-control);color:var(--color-text);background:var(--color-control-bg);box-shadow:none;transition:border-color var(--duration-control) ease,background var(--duration-control) ease,color var(--duration-control) ease}.icon-button:hover{border-color:var(--color-control-border-hover);color:var(--color-primary-hover);background:var(--color-control-bg-hover)}.icon-button.primary-action{border-color:var(--color-primary);color:var(--color-primary-text);background:var(--gradient-brand);box-shadow:0 0 0 var(--size-border) color-mix(in srgb,var(--color-primary) 18%,transparent)}.icon-button.primary-action:hover{border-color:var(--color-primary-hover);color:var(--color-primary-text)}.icon-button.active{border-color:var(--color-primary);color:var(--color-primary-hover);background:var(--color-control-active-bg)}.tooltip-button{position:relative}.floating-tooltip{position:fixed;z-index:var(--z-tooltip);top:var(--tooltip-top);left:var(--tooltip-left);max-width:min(var(--size-settings-width),80vw);padding:var(--space-2) var(--space-3);border:var(--size-border) solid color-mix(in srgb,var(--color-tooltip-text) 18%,transparent);border-radius:var(--radius-control);color:var(--color-tooltip-text);background:var(--color-tooltip-bg);box-shadow:var(--shadow-panel);font-size:var(--text-small);font-weight:700;line-height:var(--line-ui);opacity:0;pointer-events:none;text-transform:none;transform:translate(-50%,var(--space-1));transition:opacity var(--duration-control) ease,transform var(--duration-control) ease;white-space:nowrap}.floating-tooltip.bottom{transform:translate(-50%,calc(var(--space-1) * -1))}.tooltip-button:hover .floating-tooltip,.tooltip-button:focus-visible .floating-tooltip{opacity:1;transform:translate(-50%)}.tooltip-button:hover .floating-tooltip.top,.tooltip-button:focus-visible .floating-tooltip.top{transform:translate(-50%,-100%)}.segmented-control{display:inline-flex;align-items:center;flex:0 0 auto;height:var(--size-control-height);padding:var(--space-1);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-inset);box-shadow:var(--shadow-control)}.segmented-control button{height:calc(var(--size-control-height) - var(--space-2));border:0;border-radius:calc(var(--radius-control) - var(--space-1));padding-inline:var(--space-4);color:var(--color-text-muted);background:transparent;font-size:var(--text-button);white-space:nowrap}.segmented-control button.active{color:var(--color-control-active-text);background:var(--color-control-active-bg);font-weight:700}.status-pill{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;padding:0 var(--space-2);border:var(--size-border) solid color-mix(in srgb,var(--color-primary) 42%,var(--color-border));border-radius:var(--radius-control);color:var(--color-primary);background:var(--color-primary-subtle);font-weight:700}.style-controls{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}.dock-title,.color-field,.dock-button{display:inline-flex;align-items:center;height:var(--size-control-height);border:var(--size-border) solid transparent;border-radius:var(--radius-control);white-space:nowrap}.dock-title{gap:var(--space-2);padding-inline:var(--space-4);color:var(--color-primary-hover);background:var(--color-primary-subtle);font-size:var(--text-button);font-weight:700}.color-field{gap:var(--space-2);padding:0 var(--space-2) 0 var(--space-4);color:var(--color-text-muted);background:var(--color-surface-inset);border-color:var(--color-border);font-size:var(--text-small)}.color-field input{width:var(--size-color-swatch);height:var(--size-color-swatch);padding:0;border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);background:transparent}.dock-button{gap:var(--space-2);padding-inline:var(--space-4);color:var(--color-text);background:var(--color-surface-inset);border-color:var(--color-border);font-size:var(--text-button)}.dock-button:hover{border-color:var(--color-border-strong);color:var(--color-primary-hover)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-8);background:var(--color-modal-backdrop);-webkit-backdrop-filter:blur(var(--space-2));backdrop-filter:blur(var(--space-2))}.settings-modal{display:grid;grid-template-rows:auto auto minmax(0,1fr);width:min(100%,var(--size-settings-width));max-height:calc(100vh - var(--space-8) * 2);max-height:calc(100dvh - var(--space-8) * 2);border:var(--size-border) solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--gradient-workbench);box-shadow:var(--shadow-glow);overflow:hidden}.settings-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-6);border-bottom:var(--size-border) solid var(--color-border);background:color-mix(in srgb,var(--color-surface-inset) 72%,transparent)}.settings-header h2,.settings-header p,.settings-section h3{margin:0}.settings-header h2{color:var(--color-text);font-family:var(--font-title);font-size:var(--text-title);line-height:var(--line-heading)}.settings-header p{color:var(--color-text-muted);font-size:var(--text-small)}.settings-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);padding:var(--space-3) var(--space-6);border-bottom:var(--size-border) solid var(--color-border);background:color-mix(in srgb,var(--color-surface-raised) 88%,transparent)}.settings-tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;min-height:var(--size-control-height);border:var(--size-border) solid var(--color-control-border);border-radius:var(--radius-control);color:var(--color-text-muted);background:var(--color-control-bg);font-size:var(--text-button);font-weight:800;transition:border-color var(--duration-control) ease,background var(--duration-control) ease,color var(--duration-control) ease}.settings-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-tab:hover,.settings-tab.active,.settings-tab[aria-selected=true]{border-color:var(--color-control-border-hover);color:var(--color-control-active-text);background:var(--color-control-active-bg)}.settings-content{display:grid;align-content:start;gap:var(--space-5);min-height:0;padding:var(--space-6);overflow:auto}.settings-section{display:grid;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:var(--size-border) solid var(--color-border)}.settings-section:last-child{padding-bottom:0;border-bottom:0}.settings-section h3{color:var(--color-text-muted);font-size:var(--text-panel-title);font-weight:800;letter-spacing:0;text-transform:uppercase}.settings-section-title,.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-width:0}.settings-section-heading,.settings-actions,.pane-actions{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}.settings-section-heading strong{display:inline-flex;align-items:center;min-height:calc(var(--size-control-height) - var(--space-3));padding-inline:var(--space-2);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);color:var(--color-primary-hover);background:var(--color-primary-subtle);font-size:var(--text-small);font-weight:800}.device-switch{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;width:var(--size-device-switch-width);height:var(--size-control-height);padding:var(--space-1);border:var(--size-border) solid var(--color-control-border);border-radius:var(--radius-control);color:var(--color-text-muted);background:var(--color-surface-inset);box-shadow:var(--shadow-control)}.device-switch:hover{border-color:var(--color-control-border-hover)}.device-switch-thumb{position:absolute;top:var(--space-1);bottom:var(--space-1);left:var(--space-1);width:var(--size-device-switch-thumb-width);border-radius:calc(var(--radius-control) - var(--space-1));background:var(--color-control-active-bg);box-shadow:var(--shadow-control);transition:transform var(--duration-control) ease}.device-switch.mobile .device-switch-thumb{transform:translate(calc(var(--size-device-switch-width) - var(--size-device-switch-thumb-width) - var(--space-1) * 2))}.device-switch-option{position:relative;z-index:1;min-width:0;overflow:hidden;font-size:var(--text-button);font-weight:800;line-height:var(--line-ui);text-align:center;text-overflow:ellipsis;white-space:nowrap}.device-switch.desktop .device-switch-desktop,.device-switch.mobile .device-switch-mobile{color:var(--color-control-active-text)}.settings-row>span{color:var(--color-text);font-size:var(--text-button);font-weight:700}.settings-select{min-width:var(--size-theme-select-min);height:var(--size-control-height);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);padding-inline:var(--space-4);color:var(--color-text);background:var(--color-surface-inset)}.color-grid,.image-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.image-control-field{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0;min-height:var(--size-control-height);padding:0 var(--space-3);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text-muted);background:var(--color-surface-inset);font-size:var(--text-small);font-weight:700}.image-control-field input[type=number]{width:var(--size-image-width-input);min-width:0;border:0;color:var(--color-text);background:transparent;text-align:right;outline:0}.image-control-field input[type=range]{min-width:0;accent-color:var(--color-primary)}.image-toggle-field input{accent-color:var(--color-primary)}.image-asset-list{display:grid;gap:var(--space-2)}.image-asset-row{display:grid;grid-template-columns:var(--size-image-thumb) minmax(0,1fr) var(--size-image-width-input);align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-2);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);background:color-mix(in srgb,var(--color-surface-inset) 82%,transparent)}.image-asset-thumb{display:inline-flex;align-items:center;justify-content:center;width:var(--size-image-thumb);height:var(--size-image-thumb);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text-subtle);background:var(--color-surface);overflow:hidden}.image-asset-thumb img{width:100%;height:100%;object-fit:cover}.image-asset-name{min-width:0;overflow:hidden;color:var(--color-text);font-size:var(--text-button);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.image-asset-row input{width:var(--size-image-width-input);min-width:0;border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);padding:var(--space-2);color:var(--color-text);background:var(--color-surface-inset);font-size:var(--text-small)}.theme-market{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-theme-card-min),1fr));gap:var(--space-3)}.theme-card{display:grid;gap:var(--space-3);min-width:0;min-height:calc(var(--size-theme-card-min) - var(--space-5));padding:var(--space-3);border:var(--size-border) solid color-mix(in srgb,var(--theme-card-border) 82%,var(--color-border));border-radius:var(--radius-control);color:var(--theme-card-text);background:linear-gradient(145deg,color-mix(in srgb,var(--theme-card-soft) 70%,transparent),transparent 54%),var(--theme-card-bg);box-shadow:inset 0 0 0 var(--size-border) color-mix(in srgb,var(--theme-card-accent) 14%,transparent);text-align:left;transition:border-color var(--duration-control) ease,box-shadow var(--duration-control) ease,transform var(--duration-control) ease}.theme-card:hover,.theme-card.active{border-color:var(--theme-card-accent);box-shadow:inset 0 0 0 var(--size-border) color-mix(in srgb,var(--theme-card-accent) 28%,transparent),0 0 var(--space-8) color-mix(in srgb,var(--theme-card-accent) 22%,transparent);transform:translateY(calc(var(--size-border) * -1))}.theme-card-swatch{display:block;height:var(--space-10);border:var(--size-border) solid color-mix(in srgb,var(--theme-card-border) 78%,transparent);border-radius:var(--radius-control);background:linear-gradient(135deg,var(--theme-card-accent),transparent 54%),linear-gradient(90deg,var(--theme-card-code),var(--theme-card-bg));overflow:hidden}.theme-card-swatch span{display:block;width:42%;height:100%;background:color-mix(in srgb,var(--theme-card-text) 20%,transparent)}.theme-card-name,.theme-card-meta{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-card-name{color:var(--theme-card-text);font-size:var(--text-button);font-weight:800}.theme-card-meta{color:var(--theme-card-muted);font-family:var(--font-editor);font-size:var(--text-small)}.css-tag-panel{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-3);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);background:color-mix(in srgb,var(--color-surface-inset) 78%,transparent)}.css-tag-panel h4{margin:0;color:var(--color-text-muted);font-size:var(--text-panel-title);font-weight:800;letter-spacing:0;text-transform:uppercase}.css-tag-groups{display:grid;gap:var(--space-3);min-width:0}.css-tag-group{display:grid;grid-template-columns:var(--size-image-width-input) minmax(0,1fr);align-items:start;gap:var(--space-3);min-width:0}.css-tag-group>span{color:var(--color-text-subtle);font-size:var(--text-small);font-weight:800;line-height:var(--size-control-height)}.css-tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2);min-width:0}.css-tag-chip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--size-control-height);border:var(--size-border) solid var(--color-control-border);border-radius:var(--radius-control);padding:0 var(--space-3);color:var(--color-text);background:var(--color-control-bg);font-family:var(--font-editor);font-size:var(--text-small);font-weight:800}.css-tag-chip:hover{border-color:var(--color-control-border-hover);color:var(--color-primary-hover);background:var(--color-control-bg-hover)}.theme-css-input{width:100%;min-height:var(--size-theme-css-min);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);padding:var(--space-4);color:var(--color-text);background:linear-gradient(var(--color-grid-line) var(--size-border),transparent var(--size-border)),linear-gradient(90deg,var(--color-grid-line) var(--size-border),transparent var(--size-border)),var(--color-surface-inset);background-size:var(--space-11) var(--space-11),var(--space-11) var(--space-11),100% 100%;font-family:var(--font-editor);font-size:var(--text-small);line-height:var(--line-editor);resize:vertical}.settings-message{margin:0;color:var(--color-text-muted);font-size:var(--text-small);font-weight:700}.settings-message.success{color:var(--color-success)}.settings-message.error{color:var(--color-danger)}.workbench{position:relative;display:grid;grid-template-columns:var(--size-sidebar-width) minmax(0,1fr);min-width:0;min-height:0;border:0;border-radius:0;background:var(--gradient-workbench);box-shadow:none;overflow:hidden}.workbench:before{content:none;position:absolute;inset:0 0 auto;z-index:2;height:var(--size-workbench-accent);background:var(--gradient-brand);opacity:.74;pointer-events:none}.navigator{display:grid;grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr);min-width:0;min-height:0;border-right:var(--size-border) solid var(--color-border);background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface-raised) 96%,transparent),var(--color-surface-inset)),linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 52%);box-shadow:inset calc(var(--size-border) * -1) 0 0 color-mix(in srgb,var(--color-primary) 12%,transparent)}.navigator-panel{display:grid;grid-template-rows:var(--size-panel-title) minmax(0,1fr);min-width:0;min-height:0}.files-panel{grid-template-rows:var(--size-panel-title) auto minmax(0,1fr)}.navigator-panel+.navigator-panel{border-top:var(--size-border) solid var(--color-border)}.navigator.outline-collapsed{grid-template-rows:minmax(0,1fr) var(--size-panel-title)}.navigator.outline-collapsed .outline-list{display:none}.navigator-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding-inline:var(--space-4);color:var(--color-text-muted);font-size:var(--text-panel-title);font-weight:800;letter-spacing:0;text-transform:uppercase;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 64%),color-mix(in srgb,var(--color-surface-inset) 82%,transparent)}.navigator-header>div{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}.navigator-header strong{color:var(--color-text-subtle);font-size:var(--text-small)}.navigator-actions,.folder-actions{display:inline-flex;align-items:center;gap:var(--space-1)}.navigator-search{display:flex;align-items:center;gap:var(--space-2);min-width:0;min-height:var(--size-control-height);margin:var(--space-2);padding-inline:var(--space-3);border:var(--size-border) solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text-subtle);background:color-mix(in srgb,var(--color-surface-inset) 88%,transparent)}.navigator-search:focus-within{border-color:var(--color-focus);color:var(--color-primary-hover)}.navigator-search input{flex:1 1 auto;min-width:0;border:0;padding:0;color:var(--color-text);background:transparent;outline:0;font-size:var(--text-small)}.navigator-search input::placeholder{color:var(--color-text-subtle)}.folder-list{min-width:0;min-height:0;padding:var(--space-2) var(--space-2) var(--space-3);overflow:auto}.outline-list{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;min-height:0;padding:var(--space-2) var(--space-2) var(--space-3);overflow:auto;gap:var(--space-1)}.folder-group{padding-block:var(--space-1)}.folder-row,.document-item{display:flex;align-items:center;gap:var(--space-1);min-width:0}.folder-label,.document-row,.outline-row,.folder-rename-form,.tree-action{display:flex;align-items:center;border:0;border-radius:var(--radius-control);color:var(--color-text-muted);background:transparent;transition:background var(--duration-control) ease,color var(--duration-control) ease,border-color var(--duration-control) ease}.folder-label,.document-row,.outline-row,.folder-rename-form{flex:1 1 auto;min-width:0;min-height:var(--size-tree-row);gap:var(--space-2);padding:0 var(--space-2);text-align:left}.folder-label span,.document-row span,.outline-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-rename-form{border:var(--size-border) solid color-mix(in srgb,var(--color-primary) 42%,var(--color-border));color:var(--color-primary-hover);background:var(--color-primary-subtle)}.folder-name-input{flex:1 1 auto;min-width:0;height:calc(var(--size-tree-row) - var(--space-2));border:0;padding:0 var(--space-1);color:var(--color-text);background:transparent;outline:0}.folder-name-input::selection{color:var(--color-primary-text);background:var(--color-primary)}.folder-label{color:var(--color-text);font-weight:750}.document-list{display:grid;gap:var(--space-1);padding-left:var(--space-5)}.document-row.active,.document-row:hover,.outline-row:hover,.folder-label:hover,.tree-action:hover{color:var(--color-primary-hover);background:linear-gradient(90deg,var(--color-primary-subtle),color-mix(in srgb,var(--color-primary-subtle) 38%,transparent))}.document-row.active{box-shadow:inset var(--space-1) 0 0 var(--color-accent);font-weight:750}.trash-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:var(--size-border) solid var(--color-border)}.trash-section-header{display:flex;align-items:center;gap:var(--space-2);min-height:var(--size-tree-row);padding-left:var(--space-2);color:var(--color-text-muted);font-size:var(--text-panel-title);font-weight:800;letter-spacing:0;text-transform:uppercase}.trash-section-header strong{color:var(--color-text-subtle);font-size:var(--text-small)}.trash-section-header .tree-action{margin-left:auto}.trash-list{padding-left:0}.trash-row{color:var(--color-text-subtle)}.tree-action{flex:0 0 auto;justify-content:center;width:var(--size-tree-row);height:var(--size-tree-row)}.tree-action.danger:hover{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 10%,var(--color-surface))}.outline-row{color:var(--color-text-muted);font-size:var(--text-small);justify-content:flex-start}.outline-row small{color:var(--color-text-subtle);font-size:var(--text-small)}.outline-row.depth-2{padding-left:var(--space-5)}.outline-row.depth-3,.outline-row.depth-4{padding-left:var(--space-8)}.empty-state{margin:0;padding:var(--space-4) var(--space-2);color:var(--color-text-subtle);font-size:var(--text-small)}.workspace{display:grid;grid-template-columns:minmax(var(--size-editor-pane-min),1fr) var(--size-pane-resizer) minmax(var(--size-preview-pane-min),var(--preview-pane-width, 1fr));min-height:0}.workspace.preview-mobile{grid-template-columns:minmax(var(--size-editor-pane-min),1fr) var(--size-pane-resizer) minmax(var(--size-preview-mobile-pane),var(--preview-pane-width, var(--size-preview-mobile-pane)))}.workspace.preview-collapsed{grid-template-columns:minmax(0,1fr)}.workspace.preview-collapsed .pane-resizer,.workspace.preview-collapsed .preview-pane{display:none}.pane-resizer{position:relative;z-index:4;min-width:var(--size-pane-resizer);border:0;border-left:var(--size-border) solid var(--color-border);border-right:var(--size-border) solid var(--color-border);background:color-mix(in srgb,var(--color-surface-inset) 78%,transparent);cursor:col-resize}.pane-resizer:before{content:"";position:absolute;inset:var(--space-8) calc((var(--size-pane-resizer) - var(--size-border)) / 2);border-radius:var(--radius-control);background:color-mix(in srgb,var(--color-primary) 34%,transparent);opacity:0;transition:opacity var(--duration-control) ease}.pane-resizer:hover:before,.pane-resizer:focus-visible:before{opacity:1}.pane{display:grid;grid-template-rows:var(--size-panel-title) minmax(0,1fr);min-width:0;min-height:0;border:0;border-radius:0;background:color-mix(in srgb,var(--color-surface) 96%,var(--color-surface-inset));box-shadow:none;overflow:hidden}.preview-pane{border-left:0}.pane-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-inline:var(--space-6);border-bottom:var(--size-border) solid var(--color-border);color:var(--color-text-muted);background:linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent 48%),color-mix(in srgb,var(--color-surface-inset) 84%,transparent);font-size:var(--text-panel-title);font-weight:800;letter-spacing:0;text-transform:uppercase}.pane-title-copy{display:inline-flex;align-items:center;gap:var(--space-3);min-width:0}.preview-title .pane-actions{gap:var(--space-2)}.editor-pane{grid-template-rows:var(--size-panel-title) auto minmax(0,1fr)}.editor-toolbar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-bottom:var(--size-border) solid var(--color-border);background:color-mix(in srgb,var(--color-surface-inset) 68%,transparent);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.editor-toolbar::-webkit-scrollbar{display:none}.editor-tool-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--size-control-height);height:calc(var(--size-control-height) - var(--space-2));border:0;border-radius:var(--radius-control);color:var(--color-text-muted);background:transparent;cursor:pointer;transition:background var(--duration-control) ease,color var(--duration-control) ease}.editor-tool-btn:hover{color:var(--color-text);background:var(--color-control-bg-hover)}.editor-tool-btn:active{background:var(--color-primary-subtle);color:var(--color-primary)}.editor-tool-sep{display:inline-block;width:var(--size-border);height:16px;margin:0 var(--space-1);background:var(--color-border);flex:0 0 auto}.editor-frame{display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}.editor-frame .editor-codemirror{min-width:0;min-height:0;height:100%;max-height:100%;overflow:hidden}.editor-frame .cm-editor{height:100%;max-height:100%;min-height:0;color:var(--color-text);background:color-mix(in srgb,var(--color-surface) 96%,var(--color-surface-inset));font-family:var(--font-editor);font-size:var(--text-body);line-height:var(--line-editor)}.editor-frame .cm-scroller{min-height:0;overflow:auto}.editor-frame .cm-content{padding:var(--space-7) var(--space-6)}.editor-frame .cm-gutters{color:var(--color-text-subtle);background:var(--color-editor-gutter);border-right:var(--size-border) solid var(--color-border)}.editor-frame .cm-activeLine,.editor-frame .cm-activeLineGutter{background:var(--color-primary-subtle)}.editor-frame .cm-cursor{border-left-color:var(--color-primary)}.preview-scroller{min-width:0;min-height:0;overflow:auto;background:linear-gradient(var(--color-surface-inset),var(--color-surface-muted)) padding-box,linear-gradient(var(--color-grid-line) var(--size-border),transparent var(--size-border)),linear-gradient(90deg,var(--color-grid-line) var(--size-border),transparent var(--size-border)),repeating-linear-gradient(90deg,transparent,transparent var(--space-9),color-mix(in srgb,var(--color-border) 46%,transparent) calc(var(--space-9) + var(--size-border)));background-size:100% 100%,var(--space-11) var(--space-11),var(--space-11) var(--space-11),auto}.workspace.preview-mobile .preview-scroller{display:grid;align-items:start;justify-items:center;overflow-x:hidden;padding:var(--space-7)}.preview-device-frame{display:contents}.workspace.preview-mobile .preview-device-frame{position:relative;display:block;width:min(100%,var(--size-preview-mobile-shell-width));max-width:100%;min-width:0;padding:var(--space-8) var(--space-5) var(--space-5);border:var(--size-border) solid color-mix(in srgb,var(--color-border-strong) 72%,var(--color-primary));border-radius:var(--space-10);background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 44%),var(--color-logo-bg);box-shadow:inset 0 0 0 var(--size-border) color-mix(in srgb,var(--color-logo-core) 12%,transparent),var(--shadow-glow)}.workspace.preview-mobile .preview-device-frame:before{content:"";position:absolute;top:var(--space-3);left:50%;width:var(--size-phone-speaker-width);height:var(--space-1);border-radius:var(--radius-control);background:color-mix(in srgb,var(--color-text-subtle) 55%,transparent);transform:translate(-50%)}.article-preview{max-width:var(--size-preview-max);min-height:calc(100% - var(--space-8) * 2);margin:var(--space-8) auto;padding:var(--space-10);border:var(--size-border) solid color-mix(in srgb,var(--article-border) 72%,transparent);border-radius:var(--radius-panel);background:var(--article-bg);color:var(--article-text);box-shadow:var(--shadow-paper);font-family:var(--article-font);font-size:var(--text-article);line-height:var(--line-article);overflow-wrap:anywhere}.workspace.preview-mobile .article-preview{width:100%;max-width:var(--size-preview-mobile-width);min-width:0;min-height:var(--size-preview-mobile-height);margin:0;padding:var(--space-8);border-radius:var(--space-6);box-shadow:none;overflow-x:hidden}.article-preview>*:first-child{margin-top:0}.article-preview h1{margin:var(--space-2) 0 var(--space-10);padding-bottom:var(--space-5);border-bottom:var(--size-heading-accent) solid var(--article-accent);color:var(--article-heading);font-size:var(--text-article-h1);line-height:var(--line-heading)}.article-preview h2{margin:var(--space-11) 0 var(--space-7);padding:0 0 0 var(--space-5);border-left:var(--size-heading-accent) solid var(--article-accent);color:var(--article-heading);background:transparent;font-size:var(--text-article-h2);line-height:var(--line-ui)}.article-preview h3{margin:var(--space-10) 0 var(--space-5);color:var(--article-heading);font-size:var(--text-article-h3)}.article-preview p,.article-preview blockquote,.article-preview pre,.article-preview table{margin:0 0 var(--space-7)}.article-preview a{color:var(--article-accent);text-decoration:none;border-bottom:var(--size-border) solid color-mix(in srgb,var(--article-accent) 58%,transparent)}.article-preview blockquote{padding:var(--space-5) var(--space-7);border:var(--size-border) solid var(--article-border);border-left:var(--size-heading-accent) solid var(--article-accent);border-radius:var(--radius-panel);color:var(--article-muted);background:var(--article-accent-soft)}.article-preview code{border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);color:var(--article-code-text);background:var(--article-code-bg);font-family:var(--article-mono-font);font-size:var(--text-code-scale)}.article-preview pre{overflow:auto;border:var(--size-border) solid var(--article-border);border-radius:var(--radius-panel);padding:var(--space-7);color:var(--article-code-text);background:var(--article-code-bg)}.article-preview pre code{padding:0;background:transparent}.article-preview table{width:100%;border-collapse:collapse;font-size:var(--text-article-table)}.workspace.preview-mobile .article-preview table{table-layout:fixed}.article-preview th,.article-preview td{border:var(--size-border) solid var(--article-border);padding:var(--space-3) var(--space-4);text-align:left}.workspace.preview-mobile .article-preview th,.workspace.preview-mobile .article-preview td{overflow-wrap:anywhere}.article-preview th{background:var(--article-accent-soft)}.article-preview img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--size-article-image-max-height);margin:var(--space-7) auto;border-radius:var(--radius-panel);object-fit:contain}.article-preview .mermaid-block{margin:var(--space-7) 0;padding:var(--space-7);border:var(--size-border) solid var(--article-border);border-radius:var(--radius-panel);background:var(--article-bg);overflow:auto;text-align:center}.article-preview .mermaid-block svg{max-width:100%;height:auto}.article-preview .mermaid-error{margin:var(--space-7) 0;padding:var(--space-7);border:var(--size-border) solid var(--article-border);border-radius:var(--radius-panel);color:var(--article-code-text);background:var(--article-code-bg);font-family:var(--article-mono-font);font-size:var(--text-article-small);white-space:pre-wrap}.article-preview hr{border:0;border-top:var(--size-border) solid var(--article-border);margin:var(--space-10) 0}.visually-hidden{position:absolute;width:var(--size-border);height:var(--size-border);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}@media(max-width:1180px){.app-shell{--size-sidebar-width: var(--size-sidebar-compact-width);--size-editor-pane-min: var(--size-editor-pane-compact-min);--size-preview-pane-min: var(--size-preview-pane-compact-min);--size-preview-mobile-pane: var(--size-preview-mobile-pane-compact);--size-preview-mobile-shell-width: var(--size-preview-mobile-shell-width-compact);--size-preview-mobile-width: var(--size-preview-mobile-width-compact);--size-preview-mobile-height: var(--size-preview-mobile-height-compact)}.brand-subtitle{display:none}.brand-meta>span:not(.status-pill){display:none}.toolbar{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}}@media(max-width:900px){.app-shell{grid-template-rows:auto minmax(0,1fr)}.workbench{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--size-sidebar-mobile-height) minmax(0,1fr);overflow:auto}.navigator{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);border-right:0;border-bottom:var(--size-border) solid var(--color-border)}.navigator-panel+.navigator-panel{border-top:0;border-left:var(--size-border) solid var(--color-border)}.workspace{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--size-mobile-pane-min),1fr)}.workspace.preview-mobile{grid-template-columns:minmax(0,1fr)}.pane-resizer{display:none}.preview-pane{border-left:0;border-top:var(--size-border) solid var(--color-border)}.article-preview img{max-height:var(--size-article-image-compact-max-height)}}@media(max-width:560px){.app-shell{padding:var(--size-app-padding)}.topbar{align-items:flex-start;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.brand-copy{display:block}.brand-lockup{min-width:0}.toolbar{width:100%;overflow-x:auto;overflow-y:hidden}.toolbar-actions{justify-content:flex-start}.modal-backdrop{padding:var(--space-3)}.settings-header,.settings-tabs,.settings-content{padding:var(--space-5)}.settings-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.settings-row{align-items:flex-start;flex-direction:column}.color-grid,.image-settings-grid{grid-template-columns:minmax(0,1fr)}.css-tag-group{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}.css-tag-group>span{line-height:var(--line-ui)}.navigator{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.navigator-panel+.navigator-panel{border-left:0;border-top:var(--size-border) solid var(--color-border)}.brand-meta>span:not(.status-pill){display:none}.article-preview{min-height:calc(100% - var(--space-7) * 2);margin:var(--space-7) auto;padding:var(--space-7)}.app-shell.writing-mode .editor-pane{border-inline:0}.app-shell.writing-mode .editor-frame .cm-content{padding:calc(var(--size-writing-toolbar-height) + var(--space-8)) var(--space-7) var(--space-9)}.writing-mode-toolbar{left:var(--space-3);right:var(--space-3);max-width:none;transform:none}}