*{margin:0;padding:0;box-sizing:border-box}:root{--font-stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--radius-card: 20px;--radius-panel: 16px;--radius-input: 14px;--radius-pill: 100px;--max-w: 1200px;--header-h: 56px;--blur-glass: 12px;color-scheme:light;--bg: #f9f8f8;--bg-elev: #ffffff;--surface: #ffffff;--surface-2: #f1f2f4;--bg-hover: rgba(0, 0, 0, .05);--bg-input: rgba(0, 0, 0, .03);--bg-header: rgba(249, 248, 248, .72);--border-subtle: rgba(0, 0, 0, .07);--border: rgba(0, 0, 0, .13);--border-strong: rgba(0, 0, 0, .24);--text: #1e232c;--text-soft: rgba(0, 0, 0, .66);--text-faint: rgba(0, 0, 0, .45);--accent: #4d6bfe;--accent-soft: rgba(77, 107, 254, .1);--accent-border: rgba(77, 107, 254, .4);--accent-text: #ffffff;--danger: #c23434;--danger-bg: #fdf1f1;--ok: #0f7a55;--shadow-card: 0 0 0 1px rgba(16, 24, 40, .04), 0 2px 4px rgba(16, 24, 40, .04), 0 12px 24px rgba(16, 24, 40, .05);--shadow-pop: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 32px rgba(16, 24, 40, .1);--glow-1: rgba(77, 107, 254, .1);--glow-2: rgba(120, 160, 220, .08);--canvas-bg: #ffffff;--canvas-dot: #d8dce3;--canvas-line: #e8ebf0}html[data-theme=dark]{color-scheme:dark;--bg: #0a0a0a;--bg-elev: #16181d;--surface: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .07);--bg-hover: rgba(255, 255, 255, .06);--bg-input: rgba(255, 255, 255, .07);--bg-header: rgba(10, 10, 10, .65);--border-subtle: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .22);--text: #f2f3f5;--text-soft: rgba(255, 255, 255, .64);--text-faint: rgba(255, 255, 255, .42);--accent: #6799fe;--accent-soft: rgba(103, 153, 254, .15);--accent-border: rgba(103, 153, 254, .45);--accent-text: #0a0a0a;--danger: #f87171;--danger-bg: rgba(248, 113, 113, .09);--ok: #34d399;--shadow-card: 0 0 0 1px rgba(255, 255, 255, .05), 0 2px 4px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35);--shadow-pop: 0 4px 8px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .45);--glow-1: rgba(103, 153, 254, .14);--glow-2: rgba(58, 101, 194, .08);--canvas-bg: #131519;--canvas-dot: #262a32;--canvas-line: #1e2127}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-stack);background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}img,svg{max-width:100%}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}::selection{background:#6799fe47}h1,h2,h3{line-height:1.25;letter-spacing:-.015em;font-weight:700}h1{font-size:clamp(1.7rem,4.5vw,2.1rem);margin:.5em 0 .35em}h2{font-size:1.32rem;margin:1.8em 0 .55em}h3{font-size:1.08rem;margin:1.3em 0 .45em}p{margin:.7em 0}code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);border-radius:6px;padding:.12em .4em}pre{background:var(--bg-elev);border:1px solid var(--border-subtle);border-radius:var(--radius-input);padding:.9rem 1rem;overflow-x:auto;font-size:.85rem;line-height:1.55}pre code{background:none;padding:0}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{border:1px solid var(--border-subtle);padding:.5rem .7rem;text-align:left;vertical-align:top}th{background:var(--surface-2);font-weight:600}.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));background:var(--bg-header);border-bottom:1px solid var(--border-subtle)}.site-header .inner{max-width:var(--max-w);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:.9rem;height:var(--header-h)}.logo{font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--text);white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem;-webkit-tap-highlight-color:transparent}.logo:hover{text-decoration:none}.logo .mark{color:var(--accent);font-size:.95rem}.site-nav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;min-width:0;scroll-snap-type:x proximity}.site-nav::-webkit-scrollbar{display:none}.site-nav a{color:var(--text-soft);font-size:.88rem;padding:0 .8rem;height:38px;border-radius:var(--radius-pill);white-space:nowrap;scroll-snap-align:start;display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent;transition:color .18s ease,background .18s ease}.site-nav a:hover{color:var(--text);background:var(--bg-hover);text-decoration:none}.site-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft);font-weight:500}.site-nav.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px);mask-image:linear-gradient(90deg,transparent 0,#000 24px)}.site-nav.fade-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%)}.site-nav.fade-left.fade-right{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}.site-footer{border-top:1px solid var(--border-subtle);margin-top:3.5rem;padding:2.2rem 20px 2.8rem;font-size:.88rem;color:var(--text-faint)}.site-footer .inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}.site-footer .privacy-note{display:flex;gap:.5rem;align-items:baseline;margin-bottom:0;max-width:560px;color:var(--text-soft)}.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem}.site-footer nav a{color:var(--text-soft);transition:color .18s ease}.site-footer nav a:hover{color:var(--accent)}.page{max-width:var(--max-w);margin:0 auto;padding:0 20px}.page-narrow{max-width:820px}.breadcrumbs{font-size:.82rem;color:var(--text-faint);padding:.8rem 0 0}.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0}.breadcrumbs li+li:before{content:"›";margin-right:.3rem;color:var(--border-strong)}.hero{position:relative;overflow:hidden;padding:2.3rem 20px .3rem;text-align:center}.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 300px at 50% -80px,var(--glow-1),transparent 70%),radial-gradient(900px 460px at 50% 0,var(--glow-2),transparent 75%)}.hero-inner{position:relative;max-width:760px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-soft);font-size:12.5px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-border);animation:mv-pulse 2.2s infinite}@keyframes mv-pulse{0%{box-shadow:0 0 0 0 var(--accent-border)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.hero h1{margin:.9rem 0 .5rem;font-size:clamp(1.9rem,7vw,3rem);letter-spacing:-.02em;line-height:1.12}.hero .grad{background:linear-gradient(120deg,var(--accent),#8fb1ff 60%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{margin:0 auto;max-width:560px;color:var(--text-soft);font-size:.98rem}@media(min-width:720px){.hero{padding-top:3.2rem}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1.05rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.92rem;font-weight:500;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease}.btn:hover{border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600;box-shadow:0 2px 10px var(--accent-soft)}.btn.primary:hover{border-color:var(--accent);filter:brightness(1.06)}.btn.small{min-height:36px;padding:0 .85rem;font-size:.85rem}.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select,.select{appearance:none;-webkit-appearance:none;height:40px;min-height:40px;padding:0 30px 0 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background-color:var(--bg-elev);color:var(--text);font-size:.86rem;font-family:inherit;cursor:pointer;max-width:180px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;transition:border-color .18s ease,box-shadow .18s ease}select:hover{border-color:var(--border-strong)}select:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 4px var(--accent-soft)}.editor-app{display:flex;flex-direction:column;gap:.8rem;padding:.9rem 0 2rem}.editor-page{padding-top:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.action-row .btn.primary{grid-column:1 / -1}.view-toggle{display:flex;gap:.25rem;padding:.25rem;width:100%;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-2)}.view-toggle button{flex:1;min-height:38px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--text-soft);font-size:.9rem;font-weight:500;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease,box-shadow .18s ease}.view-toggle button.active{background:var(--bg-elev);color:var(--text);font-weight:600;box-shadow:var(--shadow-card)}.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding:.1rem 0 .3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chip-row::-webkit-scrollbar{display:none}.chip-row.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px);mask-image:linear-gradient(90deg,transparent 0,#000 20px)}.chip-row.fade-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent 100%)}.chip-row.fade-left.fade-right{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}.chip{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;height:40px;padding:0 .9rem;border-radius:var(--radius-pill);flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--text-soft);font-size:.85rem;font-weight:500;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .18s ease,color .18s ease,background .18s ease}.chip:hover{border-color:var(--border-strong);color:var(--text)}.chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.chip:disabled{opacity:.4;cursor:not-allowed}.canvas-wrap{position:relative;border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;background:var(--canvas-bg);min-height:50vh;height:50vh;touch-action:none;box-shadow:var(--shadow-card)}.canvas-wrap.bg-dots{background-image:radial-gradient(var(--canvas-dot) 1.1px,transparent 1.1px);background-size:18px 18px}.canvas-wrap.bg-grid{background-image:linear-gradient(var(--canvas-line) 1px,transparent 1px),linear-gradient(90deg,var(--canvas-line) 1px,transparent 1px);background-size:20px 20px}.canvas-viewport{position:absolute;inset:0;overflow:hidden;cursor:grab}.canvas-viewport:active{cursor:grabbing}.canvas-inner{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;display:flex}.canvas-inner svg{display:block}.canvas-toolbar{position:absolute;top:.6rem;right:.6rem;display:flex;gap:.4rem;z-index:5}.canvas-toolbar .btn{min-height:36px;padding:0 .8rem;font-size:.8rem;background:color-mix(in srgb,var(--bg-elev) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:var(--border-subtle);box-shadow:var(--shadow-card)}.canvas-hint{position:absolute;left:50%;bottom:.6rem;transform:translate(-50%);background:color-mix(in srgb,var(--bg-elev) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-subtle);color:var(--text-soft);font-size:.75rem;padding:.25rem .7rem;border-radius:var(--radius-pill);pointer-events:none;white-space:nowrap;z-index:4}.editor-pane{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);overflow:hidden;background:var(--bg-elev);box-shadow:var(--shadow-card)}.editor-pane .pane-head{display:flex;align-items:center;justify-content:space-between;padding:.55rem .9rem;border-bottom:1px solid var(--border-subtle);background:var(--surface-2);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.cm-editor{min-height:220px;font-size:14px;background:var(--bg-elev)}.cm-editor.cm-focused{outline:none}.cm-editor .cm-scroller{font-family:var(--font-mono);line-height:1.55}.cm-editor .cm-gutters{background:var(--surface-2);border-right:1px solid var(--border-subtle);color:var(--text-faint)}.cm-editor .cm-activeLineGutter{background:var(--bg-hover);color:var(--text)}.cm-editor .cm-activeLine{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}.cm-editor .cm-line.err-line{background:color-mix(in srgb,var(--danger) 16%,transparent);text-decoration:underline wavy var(--danger)}.cm-content{padding-bottom:12px}.tok-keyword{color:#7c3aed}.tok-nodeId{color:#0f766e}.tok-label{color:#b45309}.tok-arrow{color:#4f46e5;font-weight:600}.tok-comment{color:#94a3b8;font-style:italic}.tok-string{color:#047857}html[data-theme=dark] .tok-keyword{color:#c4b5fd}html[data-theme=dark] .tok-nodeId{color:#5eead4}html[data-theme=dark] .tok-label{color:#fcd34d}html[data-theme=dark] .tok-arrow{color:#a5b4fc}html[data-theme=dark] .tok-comment{color:#64748b}html[data-theme=dark] .tok-string{color:#6ee7b7}.symbol-bar{display:flex;gap:.4rem;padding:.5rem .65rem;overflow-x:auto;border-top:1px solid var(--border-subtle);background:var(--surface-2);scrollbar-width:none;position:sticky;bottom:0;z-index:6}.symbol-bar::-webkit-scrollbar{display:none}.symbol-bar button{min-width:52px;min-height:40px;padding:0 .7rem;border-radius:12px;border:1px solid var(--border-subtle);background:var(--bg-elev);color:var(--text);font-family:var(--font-mono);font-size:.85rem;cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease}.symbol-bar button:hover{border-color:var(--accent-border)}.symbol-bar button:active{background:var(--accent-soft)}.error-panel{border:1px solid color-mix(in srgb,var(--danger) 40%,var(--border-subtle));background:var(--danger-bg);border-radius:var(--radius-panel);padding:.85rem 1rem;font-size:.9rem}.error-panel .err-title{color:var(--danger);font-weight:600;display:flex;gap:.4rem;align-items:center}.error-panel .err-hint{margin:.35rem 0 0;color:var(--text)}.error-panel .err-raw{margin:.4rem 0 0;font-family:var(--font-mono);font-size:.78rem;color:var(--text-soft);word-break:break-word}.toast-stack{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:.5rem;width:min(92vw,480px)}.toast{background:color-mix(in srgb,var(--bg-elev) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);border:1px solid var(--border-subtle);border-radius:var(--radius-panel);padding:.7rem .95rem;font-size:.88rem;box-shadow:var(--shadow-pop);display:flex;gap:.6rem;align-items:flex-start}.toast .grow{flex:1}.toast .toast-action{flex:0 0 auto}.overlay{position:fixed;inset:0;z-index:90;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.overlay .sheet{background:var(--bg-elev);border-radius:var(--radius-card);border:1px solid var(--border-subtle);width:min(94vw,440px);max-height:86vh;overflow-y:auto;padding:1.15rem;box-shadow:var(--shadow-pop)}.overlay .sheet h3{margin-top:0}.overlay .close-row{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.9rem}.export-preview{width:100%;border:1px solid var(--border-subtle);border-radius:10px;background:repeating-conic-gradient(var(--surface-2) 0% 25%,var(--bg-elev) 0% 50%) 50% / 16px 16px}.opt-row{display:flex;gap:.5rem;align-items:center;margin:.6rem 0;flex-wrap:wrap}.opt-row .label{font-size:.85rem;color:var(--text-soft);min-width:64px}.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;background:var(--bg-elev)}.seg button{min-height:40px;padding:0 .9rem;border:none;background:transparent;color:var(--text-soft);font-size:.85rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}.seg button+button{border-left:1px solid var(--border-subtle)}.seg button.active{background:var(--accent);color:var(--accent-text)}.history-item{display:flex;gap:.6rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--border-subtle);border-radius:var(--radius-input);margin-bottom:.5rem;background:var(--surface-2)}.history-item .meta{flex:1;min-width:0}.history-item .code-preview{font-family:var(--font-mono);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.history-item .time{font-size:.75rem;color:var(--text-faint)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.75rem;margin:1.1rem 0}.card{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);padding:.9rem 1rem;background:var(--surface);color:var(--text);display:flex;flex-direction:column;gap:.2rem;min-height:44px;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:var(--accent-border)}.card .card-title{font-weight:600;font-size:.95rem;letter-spacing:-.01em}.card .card-sub{font-size:.8rem;color:var(--text-faint)}.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1rem 0}.tpl-card{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.tpl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:var(--accent-border);text-decoration:none}.tpl-card .thumb{background:var(--canvas-bg);display:flex;align-items:center;justify-content:center;padding:.6rem;min-height:150px}.tpl-card .thumb svg{max-height:190px;width:auto;max-width:100%}.tpl-card .body{padding:.7rem .9rem .9rem;display:flex;flex-direction:column;gap:.3rem;flex:1}.tpl-card .body .desc{font-size:.83rem;color:var(--text-soft);flex:1}.tpl-card .body .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);font-weight:600}.diagram-figure{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);background:var(--canvas-bg);padding:1rem;margin:1rem 0;overflow-x:auto;box-shadow:var(--shadow-card)}.diagram-figure svg{max-height:420px}.diagram-figure figcaption{font-size:.8rem;color:var(--text-faint);padding-top:.5rem;text-align:center}.copy-btn{position:absolute;top:.5rem;right:.5rem}.code-block{position:relative}.faq-item{border-bottom:1px solid var(--border-subtle);padding:.4rem 0}.faq-item h3{margin:.5rem 0 .2rem;font-size:1.02rem}.tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-pill);padding:.15rem .6rem}.meta-line{font-size:.85rem;color:var(--text-faint)}.notice{border:1px solid var(--accent-border);border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius-input);padding:.7rem .9rem;font-size:.9rem}.hero-cta{margin-top:1.4rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}.hero-cta .btn{min-width:150px}.hero-visual{max-width:780px;margin-top:1.6rem}.hero-shot{display:block;width:100%;height:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:#fff;box-shadow:var(--shadow-card)}@media print{.site-header,.site-footer,.breadcrumbs,.no-print,.ad-slot,.hero-glow{display:none!important}body{font-size:12px}pre{border:1px solid #ccc;page-break-inside:avoid}.cheat-section{page-break-inside:avoid}a{color:inherit;text-decoration:none}}@media(max-width:899px){.editor-app.view-diagram .editor-pane,.editor-app.view-code .canvas-col{display:none}.view-toggle{order:0}.editor-app.view-diagram .canvas-col{order:1}.editor-app.view-diagram .left-col{order:2}.editor-app.view-code .left-col{order:1}}@media(min-width:900px){:root{--header-h: 64px}.view-toggle{display:none}.editor-app{flex-direction:row;align-items:stretch;height:calc(100vh - var(--header-h));min-height:560px}.editor-app .left-col{display:flex;flex-direction:column;gap:.8rem;flex:0 0 42%;min-width:0;order:1}.editor-app .canvas-col{flex:1;display:flex;flex-direction:column;min-width:0;order:2}.editor-app .canvas-wrap{flex:1;height:auto;min-height:0}.editor-pane{flex:1;display:flex;flex-direction:column;min-height:0}.editor-pane .cm-editor{flex:1;min-height:0}.editor-pane .cm-scroller{overflow:auto}.action-row{display:flex;flex-wrap:wrap}.action-row .btn.primary{grid-column:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}