:root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--glass-alpha: 1;--color-bg: rgba(245, 245, 247, var(--glass-alpha));--color-surface: #ffffff;--color-surface-muted: rgba(0, 0, 0, .04);--color-surface-raised: #fafafa;--color-text: #1d1d1f;--color-text-muted: #4a4a4d;--color-text-subtle: #86868b;--color-border: rgba(0, 0, 0, .08);--color-border-strong: rgba(0, 0, 0, .12);--color-accent: #0071e3;--color-accent-contrast: #ffffff;--color-shadow: rgba(0, 0, 0, .03);--color-shadow-strong: rgba(0, 0, 0, .08);--color-focus-ring: rgba(0, 113, 227, .3);--color-code-bg: rgba(0, 0, 0, .04);--toolbar-bg: rgba(245, 245, 247, var(--glass-alpha));--pane-bg: rgba(245, 245, 247, var(--glass-alpha));--pane-bg-alt: rgba(245, 245, 247, var(--glass-alpha));--footer-bg: rgba(245, 245, 247, var(--glass-alpha));--panel-bg: rgba(255, 255, 255, var(--glass-alpha))}:root[data-theme=dark]{color-scheme:dark;--color-bg: rgba(22, 22, 23, var(--glass-alpha));--color-surface: #1e1e20;--color-surface-muted: rgba(255, 255, 255, .06);--color-surface-raised: #2a2a2c;--color-text: #f5f5f7;--color-text-muted: #a1a1a6;--color-text-subtle: #6e6e73;--color-border: rgba(255, 255, 255, .06);--color-border-strong: rgba(255, 255, 255, .1);--color-accent: #2997ff;--color-accent-contrast: #ffffff;--color-shadow: rgba(0, 0, 0, .15);--color-shadow-strong: rgba(0, 0, 0, .35);--color-focus-ring: rgba(41, 151, 255, .4);--color-code-bg: rgba(255, 255, 255, .06);--toolbar-bg: rgba(22, 22, 23, var(--glass-alpha));--pane-bg: rgba(22, 22, 23, var(--glass-alpha));--pane-bg-alt: rgba(22, 22, 23, var(--glass-alpha));--footer-bg: rgba(22, 22, 23, var(--glass-alpha));--panel-bg: rgba(30, 30, 32, var(--glass-alpha))}:root[data-appearance=glass]{--toolbar-bg: rgba(245, 245, 247, calc(.55 * var(--glass-alpha)));--pane-bg: rgba(245, 245, 247, calc(.35 * var(--glass-alpha)));--pane-bg-alt: rgba(245, 245, 247, calc(.35 * var(--glass-alpha)));--footer-bg: rgba(245, 245, 247, calc(.55 * var(--glass-alpha)));--panel-bg: rgba(255, 255, 255, calc(.65 * var(--glass-alpha)))}:root[data-theme=dark][data-appearance=glass]{--toolbar-bg: rgba(22, 22, 23, calc(.5 * var(--glass-alpha)));--pane-bg: rgba(22, 22, 23, calc(.3 * var(--glass-alpha)));--pane-bg-alt: rgba(22, 22, 23, calc(.3 * var(--glass-alpha)));--footer-bg: rgba(22, 22, 23, calc(.5 * var(--glass-alpha)));--panel-bg: rgba(30, 30, 32, calc(.65 * var(--glass-alpha)))}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:transparent;color:var(--color-text);font-size:14px;line-height:1.5}#root{height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#80808033;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#80808059}::selection{background:var(--color-focus-ring)}.app-shell{display:flex;flex-direction:column;height:100vh;width:100%;background:var(--color-bg);position:relative}[data-appearance=glass] .title-bar,[data-appearance=glass] .footer-bar,[data-appearance=glass] .settings-panel{backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}[data-appearance=glass] .fmt-bar{backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}.mouse-gradient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.mouse-gradient-blob{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;transform:translate(-50%,-50%);filter:blur(60px);transition:left 1.2s ease-out,top 1.2s ease-out;opacity:.7}.mouse-gradient-top{position:absolute;inset:0 0 auto;height:40vh}.title-bar{position:relative;display:flex;align-items:center;justify-content:center;height:42px;min-height:42px;background:var(--toolbar-bg);z-index:20}.title-bar-drag{position:absolute;inset:0;-webkit-app-region:drag}.title-tabs{position:relative;display:flex;align-items:center;gap:2px;-webkit-app-region:no-drag;z-index:1}.title-right{position:absolute;right:12px;display:flex;align-items:center;gap:8px;-webkit-app-region:no-drag;z-index:1}.title-info{font-size:11px;color:var(--color-text-subtle);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none}.title-name-input{font-size:11px;color:var(--color-text);background:var(--color-surface-muted);border:1px solid var(--color-accent);border-radius:4px;padding:1px 6px;outline:none;max-width:140px;font-family:inherit}.icon-text{font-size:11px;font-weight:600;letter-spacing:-.02em;line-height:1}.vtab{padding:4px 16px;border:none;border-radius:6px;background:transparent;color:var(--color-text-subtle);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:color .1s ease,background .1s ease;letter-spacing:.01em}.vtab:hover{color:var(--color-text-muted);background:var(--color-surface-muted)}.vtab.on{color:var(--color-text);background:var(--color-surface-muted)}[data-appearance=glass] .vtab.on{background:#8080801f}.content-area{flex:1;display:flex;min-height:0}.tpos-left .content-area,.tpos-right .content-area{flex-direction:row}.tpos-top .content-area,.tpos-bottom .content-area{flex-direction:column}.fmt-wrap{display:flex;justify-content:center;align-items:center;flex-shrink:0;z-index:15;pointer-events:none}.tpos-left .fmt-wrap,.tpos-right .fmt-wrap{flex-direction:column;padding:12px 6px}.tpos-top .fmt-wrap,.tpos-bottom .fmt-wrap{flex-direction:row;padding:6px 12px}.fmt-bar{position:relative;display:flex;align-items:center;gap:2px;background:var(--color-bg);border:1px solid var(--color-border);opacity:.35;flex-shrink:0;z-index:5;pointer-events:auto;overflow:hidden;transition:opacity .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease}.fmt-bar:hover{opacity:1;background:var(--toolbar-bg);border-color:var(--color-border-strong);box-shadow:0 2px 16px -4px var(--color-shadow-strong)}.fmt-glow{position:absolute;width:120px;height:120px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--color-accent),transparent 70%);opacity:0;filter:blur(20px);pointer-events:none;transition:left .2s ease-out,top .2s ease-out,opacity .3s ease}.fmt-bar:hover .fmt-glow{opacity:.08}[data-theme=dark] .fmt-bar:hover .fmt-glow{opacity:.12}.fmt-vertical{flex-direction:column;border-radius:14px;padding:6px 4px;overflow-y:auto;overflow-x:hidden}.fmt-horizontal{flex-direction:row;border-radius:20px;padding:4px 8px;overflow-x:auto;flex-wrap:nowrap}.fmt-div{flex-shrink:0}.fmt-vertical .fmt-div{width:18px;height:1px;background:var(--color-border);opacity:.3;margin:3px auto}.fmt-horizontal .fmt-div{width:1px;height:14px;background:var(--color-border);opacity:.3;margin:0 3px}.tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:background 80ms ease,color 80ms ease;flex-shrink:0}.tool-btn:hover{background:var(--color-surface-muted);color:var(--color-text)}.tool-btn:active{opacity:.7}.tool-btn.active{color:var(--color-accent)}.workspace{display:grid;flex:1;min-height:0;min-width:0}.workspace.vm-split{display:flex;flex-direction:row}.workspace.vm-split .pane{min-width:0}.workspace.vm-raw,.workspace.vm-preview{grid-template-columns:1fr}.pane{min-height:0;overflow:auto}.editor-pane{background:var(--pane-bg);position:relative}.split-divider{width:6px;cursor:col-resize;background:transparent;position:relative;flex-shrink:0;z-index:5}.split-divider:after{content:"";position:absolute;top:8%;bottom:8%;left:50%;width:1px;transform:translate(-50%);background:var(--color-text-subtle);opacity:.15;transition:opacity .15s ease,width .15s ease}.split-divider:hover:after{opacity:.4;width:2px}.preview-pane{background:var(--pane-bg)}.source-editor{display:block;width:100%;height:100%;padding:20px 24px;border:none;outline:none;resize:none;background:transparent;color:var(--color-text);line-height:1.7;tab-size:2;white-space:pre-wrap;word-wrap:break-word;-webkit-user-select:text;user-select:text;-webkit-app-region:no-drag}.preview-content{max-width:680px;margin:0 auto;padding:24px 28px;line-height:1.72;color:var(--color-text-muted);font-size:14.5px}.preview-content :is(h1,h2,h3){color:var(--color-text);line-height:1.3;letter-spacing:-.02em;margin-top:1.5em;margin-bottom:.4em}.preview-content :first-child{margin-top:0}.preview-content h1{font-size:1.65rem;font-weight:700}.preview-content h2{font-size:1.3rem;font-weight:600}.preview-content h3{font-size:1.08rem;font-weight:600}.preview-content p{margin:0 0 .8em}.preview-content strong{color:var(--color-text);font-weight:600}.preview-content ul,.preview-content ol{padding-left:1.4rem;margin:0 0 .8em}.preview-content li{margin-bottom:.2em}.preview-content code{background:var(--color-code-bg);border-radius:4px;padding:.12em .35em;font-size:.86em;font-family:SF Mono,Fira Code,Menlo,monospace}.preview-content pre{background:var(--color-code-bg);border-radius:8px;overflow-x:auto;padding:14px 16px;margin:0 0 .8em}.preview-content pre code{background:transparent;padding:0;border-radius:0}.preview-content blockquote{margin:.8em 0;border-left:3px solid var(--color-accent);padding:.1em 0 .1em 14px;color:var(--color-text-subtle)}.preview-content a{color:var(--color-accent);text-decoration:none}.preview-content a:hover{text-decoration:underline}.preview-content hr{border:none;height:1px;background:var(--color-text-subtle);opacity:.15;margin:1.5em 0}.preview-content table{width:100%;border-collapse:collapse;margin:.8em 0;font-size:13px}.preview-content th,.preview-content td{padding:6px 10px;text-align:left}.preview-content th{font-weight:600;opacity:.7}.preview-content tr+tr td{border-top:1px solid var(--color-text-subtle);border-top-color:#8080801a}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:272px;background:var(--panel-bg);box-shadow:-8px 0 40px var(--color-shadow-strong);z-index:50;display:flex;flex-direction:column;animation:panel-in .16s ease}@keyframes panel-in{0%{transform:translate(100%);opacity:.4}to{transform:translate(0);opacity:1}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px}.settings-title{font-size:13px;font-weight:600;color:var(--color-text)}.settings-body{flex:1;overflow-y:auto;padding:8px 16px 20px;display:flex;flex-direction:column;gap:18px}.setting-row{display:flex;flex-direction:column;gap:6px}.setting-label{font-size:10.5px;font-weight:600;color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.05em}.seg-group{display:flex;gap:2px;background:var(--color-surface-muted);border-radius:8px;padding:2px}.seg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;border:none;border-radius:6px;background:transparent;color:var(--color-text-subtle);font-size:11.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .1s ease}.seg:hover{color:var(--color-text-muted)}.seg.on{background:var(--color-surface);color:var(--color-text);box-shadow:0 1px 4px var(--color-shadow)}[data-appearance=glass] .seg.on{background:#80808026}.setting-select{padding:6px 28px 6px 10px;border:none;border-radius:8px;background:var(--color-surface-muted);color:var(--color-text);font-size:12px;font-family:inherit;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.setting-select:focus{box-shadow:0 0 0 2px var(--color-focus-ring)}.stepper{display:flex;align-items:center;border-radius:8px;background:var(--color-surface-muted);overflow:hidden}.stepper-btn{width:32px;height:30px;border:none;background:transparent;color:var(--color-text-subtle);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:background 80ms ease}.stepper-btn:hover{background:#8080801a;color:var(--color-text)}.stepper-btn:active{opacity:.6}.stepper-val{flex:1;text-align:center;font-size:12px;color:var(--color-text);font-variant-numeric:tabular-nums;padding:4px 0}.slider-row{display:flex;align-items:center;gap:8px}.setting-range{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--color-surface-muted);outline:none}.setting-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:none}.slider-val{font-size:11px;color:var(--color-text-subtle);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}.status-toast{position:fixed;bottom:36px;left:50%;transform:translate(-50%);background:var(--color-surface-raised);color:var(--color-text-muted);border-radius:10px;padding:5px 18px;font-size:11px;box-shadow:0 6px 24px var(--color-shadow-strong);z-index:100;pointer-events:none;animation:toast-pop 2.5s ease forwards}[data-appearance=glass] .status-toast{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:#80808026}@keyframes toast-pop{0%{opacity:0;transform:translate(-50%) translateY(6px) scale(.96)}8%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-2px)}}.footer-bar{display:flex;align-items:center;justify-content:flex-end;height:22px;min-height:22px;padding:0 14px;background:var(--footer-bg);z-index:10}.footer-info{font-size:10px;color:var(--color-text-subtle);opacity:.7;font-variant-numeric:tabular-nums}@media(max-width:780px){.workspace.vm-split{grid-template-columns:1fr}.workspace.vm-split .editor-pane:after{display:none}.tpos-left .fmt-wrap,.tpos-right .fmt-wrap{display:none}.settings-panel{width:100%}}