:root{--font-stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--bg: #ffffff;--bg-soft: #f5f7fa;--surface: #ffffff;--surface-2: #eef1f5;--border: #d9dee5;--text: #17202a;--text-soft: #5a6675;--accent: #4f46e5;--accent-soft: #eef2ff;--accent-text: #ffffff;--danger: #b91c1c;--danger-bg: #fef2f2;--ok: #047857;--shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);--canvas-bg: #ffffff;--canvas-dot: #d4d9e0;--canvas-line: #e6eaf0}html[data-theme=dark]{--bg: #0f1420;--bg-soft: #151b2a;--surface: #1a2130;--surface-2: #232c3f;--border: #313c52;--text: #e8ecf3;--text-soft: #9aa5b8;--accent: #818cf8;--accent-soft: #232a4d;--accent-text: #0f1420;--danger: #f87171;--danger-bg: #2c1a1e;--ok: #34d399;--shadow: 0 1px 3px rgba(0, 0, 0, .4);--canvas-bg: #171e2d;--canvas-dot: #2c3648;--canvas-line: #232c3f}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-stack);background:var(--bg);color:var(--text);line-height:1.6;font-size:16px}img,svg{max-width:100%}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{line-height:1.25}h1{font-size:1.6rem;margin:.4em 0}h2{font-size:1.3rem;margin:1.6em 0 .5em}h3{font-size:1.1rem;margin:1.2em 0 .4em}p{margin:.7em 0}code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);border-radius:4px;padding:.1em .35em}pre{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;overflow-x:auto;font-size:.85rem;line-height:1.5}pre code{background:none;padding:0}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{border:1px solid var(--border);padding:.5rem .7rem;text-align:left;vertical-align:top}th{background:var(--surface-2)}.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}.site-header .inner{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;gap:.75rem;height:52px}.logo{font-weight:700;font-size:1.02rem;color:var(--text);white-space:nowrap;display:flex;align-items:center;gap:.4rem}.logo:hover{text-decoration:none}.logo .mark{color:var(--accent)}.site-nav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1}.site-nav::-webkit-scrollbar{display:none}.site-nav a{color:var(--text-soft);font-size:.9rem;padding:.45rem .65rem;border-radius:8px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.site-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}.site-footer{border-top:1px solid var(--border);margin-top:3rem;padding:1.5rem 1rem 2.5rem;font-size:.88rem;color:var(--text-soft)}.site-footer .inner{max-width:1200px;margin:0 auto}.site-footer .privacy-note{display:flex;gap:.45rem;align-items:baseline;margin-bottom:.8rem}.site-footer nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem}.page{max-width:1200px;margin:0 auto;padding:0 1rem}.page-narrow{max-width:820px}.breadcrumbs{font-size:.82rem;color:var(--text-soft);padding:.7rem 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)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem .95rem;border-radius:10px;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}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.small{min-height:36px;padding:.3rem .7rem;font-size:.85rem}.btn:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select,.select{min-height:44px;padding:.4rem .6rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.9rem;font-family:inherit;max-width:160px}.editor-app{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0 2rem}.action-row{display:flex;gap:.5rem;flex-wrap:wrap}.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.chip{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;min-height:40px;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-soft);font-size:.85rem;cursor:pointer;font-family:inherit}.chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.canvas-wrap{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--canvas-bg);min-height:46vh;height:46vh;touch-action:none;box-shadow:var(--shadow)}.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:.5rem;right:.5rem;display:flex;gap:.4rem;z-index:5}.canvas-toolbar .btn{min-height:38px;padding:.25rem .6rem;font-size:.82rem;background:var(--surface);box-shadow:var(--shadow)}.canvas-hint{position:absolute;left:50%;bottom:.6rem;transform:translate(-50%);background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);color:var(--text-soft);font-size:.75rem;padding:.25rem .7rem;border-radius:999px;pointer-events:none;white-space:nowrap;z-index:4}.editor-pane{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.editor-pane .pane-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;border-bottom:1px solid var(--border);background:var(--bg-soft);font-size:.85rem;color:var(--text-soft)}.cm-editor{min-height:220px;font-size:14px}.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(--bg-soft);border-right:1px solid var(--border);color:var(--text-soft)}.cm-editor .cm-activeLineGutter{background:var(--surface-2);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:.45rem .6rem;overflow-x:auto;border-top:1px solid var(--border);background:var(--bg-soft);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 .6rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:.85rem;cursor:pointer;flex:0 0 auto}.symbol-bar button:active{background:var(--accent-soft)}.error-panel{border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border));background:var(--danger-bg);border-radius:12px;padding:.8rem 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:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;font-size:.88rem;box-shadow:var(--shadow);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:color-mix(in srgb,#000 55%,transparent);display:flex;align-items:center;justify-content:center;padding:1rem}.overlay .sheet{background:var(--surface);border-radius:14px;border:1px solid var(--border);width:min(94vw,420px);max-height:86vh;overflow-y:auto;padding:1rem}.overlay .sheet h3{margin-top:0}.overlay .close-row{display:flex;justify-content:flex-end;margin-top:.6rem}.export-preview{width:100%;border:1px solid var(--border);border-radius:8px;background:repeating-conic-gradient(var(--surface-2) 0% 25%,var(--surface) 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:10px;overflow:hidden}.seg button{min-height:40px;padding:.3rem .8rem;border:none;background:var(--surface);color:var(--text-soft);font-size:.85rem;cursor:pointer;font-family:inherit}.seg button+button{border-left:1px solid var(--border)}.seg button.active{background:var(--accent);color:var(--accent-text)}.history-item{display:flex;gap:.6rem;align-items:center;padding:.55rem .6rem;border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;background:var(--bg-soft)}.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-soft)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin:1rem 0}.card{border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem;background:var(--surface);color:var(--text);display:flex;flex-direction:column;gap:.2rem;min-height:44px}.card:hover{text-decoration:none;border-color:var(--accent)}.card .card-title{font-weight:600;font-size:.95rem}.card .card-sub{font-size:.8rem;color:var(--text-soft)}.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);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}.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);border-radius:12px;background:var(--canvas-bg);padding:1rem;margin:1rem 0;overflow-x:auto}.diagram-figure svg{max-height:420px}.diagram-figure figcaption{font-size:.8rem;color:var(--text-soft);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);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:999px;padding:.15rem .6rem}.meta-line{font-size:.82rem;color:var(--text-soft)}.notice{border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:.7rem .9rem;font-size:.9rem}@media print{.site-header,.site-footer,.breadcrumbs,.no-print,.ad-slot{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(min-width:900px){.editor-app{flex-direction:row;align-items:stretch;height:calc(100vh - 52px);min-height:560px}.editor-app .left-col{display:flex;flex-direction:column;gap:.75rem;flex:0 0 42%;min-width:0}.editor-app .canvas-col{flex:1;display:flex;flex-direction:column;min-width:0}.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}h1{font-size:2rem}}