:root{--bg: #f4f1ea;--bg-elevated: #fbf9f4;--bg-card: #ffffff;--bg-hover: #f0ede5;--bg-subtle: #efebe0;--border: #e4dfd1;--border-strong: #d4cdb8;--text: #1a1a1a;--text-muted: #6b6357;--text-subtle: #8a8275;--accent: #0a7d6b;--accent-soft: #e0f0eb;--accent-hover: #086354;--green: #0a7d6b;--red: #b94431;--shadow-sm: 0 1px 2px rgba(28, 25, 18, .04);--shadow-md: 0 4px 16px -4px rgba(28, 25, 18, .08);--shadow-lg: 0 10px 40px -12px rgba(28, 25, 18, .16);--radius: 8px;--radius-lg: 12px;--radius-pill: 999px;--code-bg: #1d2126;--code-bg-2: #14171a;--code-text: #ebe7dc;--code-faint: #6f7681;--code-line: rgba(255, 255, 255, .06);--code-num: rgba(235, 231, 220, .32);--header-h: 64px}[data-theme=dark]{--bg: #14171a;--bg-elevated: #1c2025;--bg-card: #232830;--bg-hover: #2a2f37;--bg-subtle: #1a1e23;--border: #2f353d;--border-strong: #3d4550;--text: #ebe7dc;--text-muted: #9ea3ac;--text-subtle: #6f7681;--accent: #2db89c;--accent-soft: #1a302c;--accent-hover: #4cd0b3;--green: #2db89c;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px -4px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 40px -12px rgba(0, 0, 0, .5);--code-bg: #0d1014;--code-bg-2: #060912}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}.mono{font-family:JetBrains Mono,ui-monospace,monospace;font-feature-settings:"zero","ss01"}.site-header{background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}.header-inner{max-width:1480px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px}.logo{font-family:Lora,serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text);display:flex;align-items:center;gap:8px}.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--accent);color:#fbf9f4;border-radius:6px;font-family:JetBrains Mono,monospace;font-weight:700;font-size:13px}.nav{display:flex;gap:28px;align-items:center}.nav a{color:var(--text-muted);font-size:14px;font-weight:500;padding:6px 0;border-bottom:1px solid transparent;transition:all .15s ease}.nav a:hover{color:var(--accent)}.nav a.is-active{color:var(--accent);border-bottom-color:var(--accent)}.shell{max-width:1480px;margin:0 auto;padding:0 32px}.page-head{padding:40px 0 28px;max-width:880px}.breadcrumbs{font-size:13px;color:var(--text-subtle);margin-bottom:14px;display:flex;align-items:center;gap:8px}.breadcrumbs a{color:var(--text-muted);transition:color .15s ease}.breadcrumbs a:hover{color:var(--accent)}.breadcrumbs .sep{color:var(--border-strong)}.breadcrumbs .current{color:var(--text)}.hero h1{font-family:Lora,serif;font-weight:600;font-size:clamp(36px,5vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;color:var(--text);text-wrap:balance}.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}.hero .lede{font-size:16px;color:var(--text-muted);max-width:720px;margin:0;line-height:1.6;text-wrap:pretty}.hero-meta{display:flex;flex-wrap:wrap;gap:24px 36px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}.hero-meta-item{display:grid;gap:4px}.hero-meta-item .k{font-family:JetBrains Mono,monospace;color:var(--text-subtle);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}.hero-meta-item .v{font-size:14px;color:var(--text);font-weight:500}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);font-size:13px;font-weight:500;white-space:nowrap;transition:all .15s ease}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn:active{transform:translateY(1px)}.btn.is-hidden{display:none}.btn-accent{color:#fbf9f4;background:var(--accent);border-color:var(--accent)}.btn-accent:hover{color:#fbf9f4;background:var(--accent-hover);border-color:var(--accent-hover)}[data-theme=dark] .btn-accent,[data-theme=dark] .btn-accent:hover{color:#0d1014}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:var(--bg-hover);border-color:var(--border);color:var(--accent)}.btn-sm{min-height:32px;padding:0 11px;font-size:12.5px}.btn .ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}.switch{width:36px;height:20px;border:0;border-radius:var(--radius-pill);background:var(--border-strong);padding:2px;transition:background .15s ease;flex:none;position:relative}.switch span{display:block;width:16px;height:16px;border-radius:999px;background:#fbf9f4;box-shadow:0 1px 2px #0003;transition:transform .18s ease}.switch.is-active{background:var(--accent)}.switch.is-active span{transform:translate(16px)}.editor-app{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:48px}.app-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-card)}.app-head-l{display:flex;align-items:center;gap:14px;min-width:0;flex:1}.app-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text)}.app-title .dot{width:8px;height:8px;border-radius:999px;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent)}.app-meta{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text-subtle);font-size:12px}.app-meta .sep{color:var(--border-strong)}.app-head-r{display:flex;align-items:center;gap:4px;flex:none}.toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}.tool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.tool-divider{width:1px;height:20px;background:var(--border);margin:0 4px;flex:none}.switch-wrap{display:inline-flex;align-items:center;gap:8px;padding-left:4px;color:var(--text-muted);font-size:12px;white-space:nowrap}.tags-panel{display:none;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}.tags-panel.is-open{display:block}.tags-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}.tag-group-inline{display:inline-flex;align-items:center;gap:6px;padding:4px 0}.tag-group-title{color:var(--text-subtle);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-right:4px;white-space:nowrap}.tag-divider{width:1px;height:18px;background:var(--border);flex:none}.tag-chip{border:1px solid var(--border);border-radius:5px;background:var(--bg-card);color:var(--text);padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:500;line-height:1;transition:all .14s ease}.tag-chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.tags-close{margin-left:auto;border:0;background:transparent;color:var(--text-subtle);font-size:13px;padding:4px 8px;border-radius:6px}.tags-close:hover{color:var(--text);background:var(--bg-hover)}.workspace{display:grid;grid-template-columns:minmax(420px,1fr) 12px minmax(390px,.9fr);height:660px;min-height:660px}.pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-card)}.pane+.pane{border-left:1px solid var(--border)}.workspace-resizer{position:relative;min-width:12px;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--bg-card);cursor:col-resize}.workspace-resizer:before{content:"";position:absolute;top:50%;left:50%;width:2px;height:56px;border-radius:2px;background:var(--border-strong);transform:translate(-50%,-50%);transition:background .15s ease,height .15s ease}.workspace-resizer:hover:before{background:var(--accent);height:78px}.pane-head{min-height:48px;padding:0 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-card)}.tabs{display:flex;align-items:stretch;gap:0;min-width:0;overflow-x:auto;margin:0 -14px;padding:0 8px}.tabs::-webkit-scrollbar{display:none}.tab{position:relative;border:0;background:transparent;color:var(--text-subtle);padding:14px 12px 13px;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:500;white-space:nowrap;letter-spacing:-.01em;transition:color .14s ease}.tab:hover{color:var(--text-muted)}.tab.is-active{color:var(--text)}.tab.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}.pane-meta{display:flex;align-items:center;gap:8px;color:var(--text-subtle);font-size:12px;white-space:nowrap}.pane-meta strong{color:var(--text);font-size:13px;font-weight:600}.pane-meta .sep{color:var(--border-strong)}.editor-frame{position:relative;flex:1;min-height:0;height:100%;display:grid;grid-template-columns:52px minmax(0,1fr);background:var(--code-bg);color:var(--code-text);font-family:JetBrains Mono,monospace;line-height:1.65;font-size:13px;overflow:hidden}.editor-copy-btn{position:absolute;top:10px;right:20px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#14171ab3;color:var(--code-text);backdrop-filter:blur(8px);transition:all .15s ease}.editor-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:#0a7d6b1f}.editor-copy-btn .ico{width:15px;height:15px}.line-numbers{margin:0;padding:18px 12px 18px 14px;text-align:right;color:var(--code-num);border-right:1px solid var(--code-line);overflow:hidden;user-select:none;white-space:pre}.editor{width:100%;height:100%;resize:none;border:0;outline:0;padding:18px;background:transparent;color:var(--code-text);caret-color:var(--accent);font:inherit;line-height:inherit;tab-size:2;white-space:pre;overflow:auto}.editor::selection{background:#0a7d6b59}.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--code-line);background:var(--code-bg-2);color:var(--code-faint);font-family:JetBrains Mono,monospace;font-size:11.5px}.preview-tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated)}.preview-tab{border:0;border-radius:6px;background:transparent;color:var(--text-subtle);padding:5px 10px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;transition:color .14s ease,background .14s ease}.preview-tab:hover{color:var(--text-muted)}.preview-tab.is-active{color:#fbf9f4;background:var(--accent)}[data-theme=dark] .preview-tab.is-active{color:#0d1014}.preview-tools{display:flex;align-items:center;gap:8px}.preview-tools .btn-sm{width:32px;padding:0}#previewPane.is-console-view .device-toggle{display:none}.device-toggle{display:inline-flex;align-items:center;gap:0;padding:3px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-elevated)}.device-toggle button{border:0;border-radius:var(--radius-pill);color:var(--text-subtle);background:transparent;padding:5px 12px;font-size:12px;font-weight:500;transition:all .14s ease}.device-toggle button:hover{color:var(--text-muted)}.device-toggle button.is-active{color:#fbf9f4;background:var(--accent)}[data-theme=dark] .device-toggle button.is-active{color:#0d1014}.preview-area{flex:1;min-height:0;padding:20px 24px;display:grid;align-items:stretch;justify-items:center;overflow:auto;background-color:var(--bg-subtle);background-image:radial-gradient(circle,var(--border-strong) 1px,transparent 1px);background-size:18px 18px}#previewPane.is-console-view .preview-area{padding:0;background:var(--code-bg)}.preview-shell{position:relative;width:100%;height:100%;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);transition:width .2s ease,height .2s ease}.preview-shell.is-tablet{width:768px;max-width:100%}.preview-shell.is-mobile{width:390px;max-width:100%}.preview-frame{width:100%;height:100%;border:0;background:#fff}.preview-console{width:100%;height:100%;min-height:0;overflow:auto;border:1px solid var(--code-line);background:var(--code-bg);color:var(--code-text);font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;line-height:1.55}.preview-console[hidden]{display:none}.console-empty{padding:18px;color:var(--code-faint)}.console-entry{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:9px 14px;border-bottom:1px solid var(--code-line)}.console-entry:last-child{border-bottom:0}.console-method{color:var(--code-faint);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.console-message{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}.console-entry.is-info .console-method,.console-entry.is-debug .console-method{color:#7bb7ff}.console-entry.is-warn .console-method{color:#f4bf75}.console-entry.is-error .console-method{color:#ff8c7a}.console-entry.is-error .console-message{color:#ffd4cc}.seo{padding:16px 0 64px;max-width:880px}.seo-eyebrow{font-family:JetBrains Mono,monospace;color:var(--text-subtle);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}.seo h2{font-family:Lora,serif;margin:0 0 28px;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.015em;font-weight:600;text-wrap:balance}.seo h3{font-family:Lora,serif;margin:32px 0 10px;font-size:22px;letter-spacing:-.01em;font-weight:600}.seo p{margin:0 0 14px;color:var(--text-muted);font-size:15px;line-height:1.7;text-wrap:pretty}.seo p code,.seo li code,.seo .mono{font-family:JetBrains Mono,monospace;font-size:13px;background:var(--bg-subtle);border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--text)}.seo ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:10px}.seo ul li{position:relative;padding-left:22px;color:var(--text-muted);font-size:15px;line-height:1.6}.seo ul li:before{content:"";position:absolute;left:4px;top:11px;width:8px;height:2px;background:var(--accent)}.seo ul li strong{color:var(--text);font-weight:600}.seo-rule{margin:40px 0 28px;height:1px;background:var(--border);border:0}.faq{display:grid;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.faq details{border-bottom:1px solid var(--border);padding:18px 0}.faq details:last-child{border-bottom:0}.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px;font-weight:500;color:var(--text)}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-size:14px;flex:none;transition:all .2s ease}.faq details[open] summary:after{content:"−";transform:rotate(180deg);color:var(--accent);border-color:var(--accent)}.faq details p{margin:12px 0 0;font-size:14.5px;color:var(--text-muted);line-height:1.65}@media(max-width:1180px){.workspace{grid-template-columns:1fr;height:auto}.workspace-resizer{display:none}.pane+.pane{border-left:0;border-top:1px solid var(--border)}.preview-area{min-height:520px}}@media(max-width:920px){.toolbar{grid-template-columns:1fr}.app-head{flex-wrap:wrap}}@media(max-width:720px){.header-inner{padding:14px 20px;gap:16px}.nav{gap:16px}.shell{padding:0 20px}.page-head{padding:32px 0 24px}.hero-meta{gap:16px 24px}.app-head-r .btn{width:34px;padding:0;gap:0;font-size:0}.app-head-r .btn .ico{width:16px;height:16px}.editor-frame{grid-template-columns:40px minmax(0,1fr);font-size:12px}.editor{height:420px}}.html-editor-page.is-focus-mode .shell{padding-top:28px;padding-bottom:36px}.html-editor-page.is-focus-mode .hero,.html-editor-page.is-focus-mode .seo{display:none}.tag-suggestion{position:absolute;z-index:5;display:none;align-items:center;gap:7px;max-width:280px;padding:5px 7px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#14171ae6;color:var(--code-text);box-shadow:0 12px 26px -18px #000000e6;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;backdrop-filter:blur(12px)}.tag-suggestion.is-visible{display:inline-flex}.tag-suggestion-fill{color:#9bd7ca}.tag-suggestion-key{padding:2px 5px;border:1px solid rgba(255,255,255,.12);border-radius:5px;color:var(--code-faint);background:#ffffff0f;font-size:10px}.preview-resize-handle{position:absolute;z-index:3;opacity:.22;transition:opacity .15s ease,background .15s ease;touch-action:none;outline:0}.preview-resize-handle:hover,.preview-resize-handle:focus-visible,.preview-resize-handle.is-active{opacity:1}.preview-resize-handle-x{top:0;right:0;width:10px;height:100%;cursor:ew-resize;background:linear-gradient(to right,transparent,color-mix(in srgb,var(--accent) 42%,transparent))}.preview-resize-handle-y{left:0;right:0;bottom:0;height:10px;cursor:ns-resize;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 42%,transparent))}.preview-resize-handle-corner{right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize}.preview-resize-handle-corner:before,.preview-resize-handle-corner:after{content:"";position:absolute;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent)}.preview-resize-handle-corner:before{right:6px;bottom:6px;width:12px;height:12px;border-radius:0 0 4px}.preview-resize-handle-corner:after{right:10px;bottom:10px;width:7px;height:7px;border-radius:0 0 3px}.html-editor-page.is-resizing,.html-editor-page.is-resizing *,.html-editor-page.is-resizing-preview,.html-editor-page.is-resizing-preview *{user-select:none!important}.html-editor-page.is-resizing .preview-frame,.html-editor-page.is-resizing-preview .preview-frame{pointer-events:none}.html-editor-page.is-resizing-preview .preview-shell{transition:none}.preview-shell.is-custom-size{align-self:start;justify-self:center;max-width:none}.toast-wrap{position:fixed;z-index:90;right:22px;bottom:22px;display:grid;gap:8px;pointer-events:none}.html-editor-toast{max-width:min(360px,calc(100vw - 44px));border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);box-shadow:var(--shadow-lg);padding:10px 12px;font-size:13px;line-height:1.35;opacity:0;transform:translateY(8px);animation:html-editor-toast-in .18s ease forwards}.html-editor-toast.is-hiding{animation:html-editor-toast-out .18s ease forwards}@keyframes html-editor-toast-in{to{opacity:1;transform:translateY(0)}}@keyframes html-editor-toast-out{to{opacity:0;transform:translateY(8px)}}@media(max-width:720px){.toast-wrap{right:14px;bottom:14px;left:14px}}