.drawsvg-article{--dv-bg:#050b14;--dv-panel:#0a1725;--dv-panel-2:#0d2031;--dv-line:#29465f;--dv-text:#e8f1f8;--dv-muted:#96aabd;--dv-lime:#c9ff36;--dv-cyan:#35def2;--dv-violet:#a876ff;--dv-danger:#ff8b75;color:var(--dv-text);overflow-x:clip}.drawsvg-article .article-featured,.drawsvg-poster img{display:block;width:100%;height:auto}.drawsvg-article .article-featured{max-width:1200px;margin:clamp(1.5rem,4vw,3rem) auto;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.4)}.drawsvg-article .article-content h2,.drawsvg-article .article-content h3{scroll-margin-top:110px}.drawsvg-article .article-content h2{margin-top:3.2rem}.drawsvg-article code{color:#dcff7d}.drawsvg-article button,.drawsvg-article select,.drawsvg-article input{font:inherit}.drawsvg-article button:focus-visible,.drawsvg-article a:focus-visible,.drawsvg-article select:focus-visible,.drawsvg-article input:focus-visible{outline:3px solid var(--dv-cyan);outline-offset:3px}.drawsvg-article svg{display:block;max-width:100%;height:auto}.drawsvg-article .code-block{margin:1.35rem 0;border:1px solid var(--dv-line);border-radius:18px;background:#030810;overflow:auto}.drawsvg-article pre{min-width:max-content;margin:0;padding:1.2rem;color:#e6f2fb;font-size:.9rem;line-height:1.7}.drawsvg-toc{margin:2rem 0;padding:1.35rem;border:1px solid var(--dv-line);border-radius:20px;background:rgba(10,23,37,.78)}.drawsvg-toc strong{display:block;margin-bottom:.7rem}.drawsvg-toc ol{columns:2;gap:2rem;margin:0;padding-left:1.25rem}.drawsvg-toc li{break-inside:avoid;margin:.35rem 0}.drawsvg-toc a{color:var(--dv-text)}.drawsvg-poster{margin:2rem 0;padding:10px;border-radius:24px;background:linear-gradient(135deg,rgba(201,255,54,.3),rgba(53,222,242,.08),rgba(168,118,255,.27))}.drawsvg-poster img{border-radius:17px}.drawsvg-poster figcaption{padding:.8rem .75rem .3rem;color:var(--dv-muted);font-size:.92rem}
.method-compare,.stroke-required,.direction-demo,.range-states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.method-compare article{display:grid;place-items:center;gap:.55rem;min-height:240px;padding:1.2rem;border:1px solid var(--dv-line);border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(53,222,242,.12),transparent 45%),var(--dv-panel);text-align:center}.method-compare b{color:var(--dv-cyan);letter-spacing:.08em}.method-compare i{color:var(--dv-lime);font-style:normal}.method-compare span{color:var(--dv-muted)}.method-compare code{padding:.65rem;border:1px solid rgba(201,255,54,.35);border-radius:10px;background:#071019}.draw-demo,.range-playground,.stagger-demo,.icon-demo,.graph-demo,.scrub-demo,.length-inspector,.main-lab,.system-project,.fill-draw,.scroll-diagram{margin:1.5rem 0;padding:clamp(.9rem,2vw,1.35rem);border:1px solid var(--dv-line);border-radius:22px;background:radial-gradient(circle at 75% 0,rgba(168,118,255,.14),transparent 35%),#07111d}.draw-demo path,.range-playground path,.stagger-demo path,.signature-demo path,.scrub-demo path{fill:none;stroke:var(--dv-cyan);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(53,222,242,.22))}.demo-controls,.range-buttons,.shape-tabs{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}.demo-controls button,.stagger-demo button,.fill-draw button,.range-buttons button,.shape-tabs button{min-height:42px;padding:.62rem .92rem;border:1px solid #365a73;border-radius:10px;background:#0b1c2a;color:var(--dv-text);font-weight:850;cursor:pointer}.demo-controls button:first-child,.stagger-demo button,.fill-draw button{border-color:var(--dv-lime);background:var(--dv-lime);color:#061019}.draw-demo p,.icon-demo p{margin:.8rem 0 0;color:var(--dv-muted)}.stroke-required article{padding:1.2rem;border:1px solid var(--dv-line);border-radius:16px;background:var(--dv-panel)}.stroke-required b{display:block;color:var(--dv-cyan)}.stroke-required p{margin:.7rem 0 0;color:var(--dv-muted)}.fill-swatch,.stroke-swatch{display:block;height:70px;margin-top:.8rem;border-radius:12px}.fill-swatch{background:linear-gradient(135deg,var(--dv-violet),#5e2fc2)}.stroke-swatch{border:6px solid var(--dv-lime);background:transparent}.range-states{grid-template-columns:repeat(3,1fr)}.range-states article{padding:1rem;border:1px solid var(--dv-line);border-radius:14px;background:var(--dv-panel)}.range-states b{display:block;margin-bottom:.8rem;color:var(--dv-cyan)}.range-states i{display:block;height:7px;border-radius:9px;background:linear-gradient(90deg,var(--dv-lime) var(--range),#263f55 var(--range));box-shadow:0 0 10px rgba(201,255,54,.2)}.range-scale{position:relative;display:flex;justify-content:space-between;gap:.25rem;margin:1.5rem 0;padding:2rem 0 0;color:var(--dv-muted);font-size:.78rem}.range-scale:before{content:"";position:absolute;top:.4rem;right:0;left:0;height:8px;border-radius:10px;background:linear-gradient(90deg,#29455e 0 20%,var(--dv-lime) 20% 80%,#29455e 80%)}.range-scale i{position:absolute;top:0;left:20%;width:60%;height:16px;border-right:2px solid var(--dv-cyan);border-left:2px solid var(--dv-cyan)}.range-warning{margin:1.5rem 0;padding:1.25rem;border:1px solid rgba(255,139,117,.4);border-left:5px solid var(--dv-danger);border-radius:16px;background:rgba(255,139,117,.07)}.range-warning strong{color:#ffc1b5}.range-warning p{margin:.5rem 0 0}.range-playground p{margin:.9rem 0 0}.range-buttons button{flex:1 1 125px}.range-buttons button.is-active{border-color:var(--dv-lime);box-shadow:inset 0 0 0 1px var(--dv-lime)}.range-buttons small{display:block;margin-top:.15rem;color:var(--dv-cyan)}
.center-model{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}.center-model span{display:grid;gap:.65rem;padding:1rem;border:1px solid var(--dv-line);border-radius:14px;background:var(--dv-panel)}.center-model b{color:var(--dv-cyan)}.center-model i{display:block;height:7px;border-radius:8px;background:#29455e}.center-model .center-start{background:linear-gradient(90deg,#29455e 49%,var(--dv-violet) 49% 51%,#29455e 51%)}.center-model .center-mid{background:linear-gradient(90deg,#29455e 28%,var(--dv-violet) 28% 72%,#29455e 72%)}.center-model .center-end{background:var(--dv-violet)}.direction-demo article{display:grid;gap:1rem;padding:1.2rem;border:1px solid var(--dv-line);border-radius:16px;background:var(--dv-panel)}.direction-demo i{position:relative;padding:.65rem;color:var(--dv-lime);font-style:normal;text-align:center}.direction-demo i:before{content:"";display:block;height:5px;margin-bottom:.4rem;border-radius:8px;background:linear-gradient(90deg,var(--dv-lime),var(--dv-cyan))}.stagger-demo svg{margin-bottom:.75rem}.stagger-demo path:nth-child(2){stroke:var(--dv-lime)}.stagger-demo path:nth-child(3){stroke:var(--dv-violet)}.icon-demo svg{max-width:560px;margin:auto}.icon-demo path{fill:none;stroke:var(--dv-cyan);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.icon-demo [data-icon-arrow]{stroke:var(--dv-lime)}.icon-demo [data-icon-check]{stroke:var(--dv-violet)}.developer-mark{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:190px;margin:1.5rem 0;border:1px solid var(--dv-line);border-radius:20px;background:radial-gradient(circle,rgba(53,222,242,.14),transparent 55%),var(--dv-panel);font-size:clamp(2rem,7vw,4.5rem)}.developer-mark span{color:var(--dv-cyan)}.developer-mark b{color:var(--dv-lime)}.developer-mark i{align-self:flex-end;margin:0 0 1rem -9rem;color:var(--dv-muted);font-size:.65rem;font-style:normal}.signature-demo{width:100%;padding:1rem;border:1px solid var(--dv-line);border-radius:18px;background:var(--dv-panel)}.signature-demo path{stroke:var(--dv-violet);stroke-width:6}
.graph-demo [data-graph-axis]{fill:none;stroke:#49627a;stroke-width:4}.graph-demo [data-graph-line]{fill:none;stroke:var(--dv-cyan);stroke-width:7;stroke-linecap:round}.graph-demo circle{fill:var(--dv-lime)}.graph-demo text{fill:var(--dv-text);font:700 14px sans-serif}.node-flow,.final-model{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.5rem 0;overflow:auto}.node-flow span,.final-model span,.final-model strong{min-width:125px;padding:.8rem;border:1px solid var(--dv-line);border-radius:12px;background:var(--dv-panel);text-align:center}.node-flow i,.final-model i{color:var(--dv-lime);font-style:normal}.scroll-diagram>div{display:grid;place-items:center}.scroll-diagram span{min-width:220px;padding:1rem;border:1px solid var(--dv-cyan);border-radius:14px;background:var(--dv-panel);text-align:center;font-weight:900}.scroll-diagram svg{width:80px}.scroll-diagram path{fill:none;stroke:var(--dv-lime);stroke-width:6;stroke-linecap:round}.scrub-model{display:grid;gap:.5rem;margin:1.5rem 0;padding:1rem;border:1px solid var(--dv-line);border-radius:16px;background:var(--dv-panel)}.scrub-model span{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:.7rem}.scrub-model i{height:5px;background:linear-gradient(90deg,var(--dv-cyan),var(--dv-lime))}.scrub-model b{text-align:center;color:var(--dv-violet)}.shape-tabs button.is-active{border-color:var(--dv-lime);color:var(--dv-lime)}.length-inspector svg{margin:.8rem 0}.length-inspector [data-length-shape]{fill:none;stroke:var(--dv-cyan);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.length-inspector [data-length-shape]:not(.is-active){display:none}.length-inspector output{display:block;padding:.8rem;border:1px solid var(--dv-line);border-radius:11px;background:#071019;color:var(--dv-muted)}.length-inspector strong{color:var(--dv-lime)}
.main-lab{padding:0;overflow:hidden}.main-lab>header,.system-project>header{padding:1.25rem;border-bottom:1px solid var(--dv-line);background:linear-gradient(90deg,rgba(201,255,54,.1),rgba(53,222,242,.04))}.main-lab>header span,.system-project>header span{color:var(--dv-lime);font-size:.75rem;font-weight:900;letter-spacing:.12em}.main-lab>header h3,.system-project>header h3{margin:.25rem 0 0}.main-lab>svg{background:#06101a}.main-lab [data-lab-path]{fill:none;stroke:var(--dv-cyan);stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 9px rgba(53,222,242,.28))}.main-lab .lab-grid{fill:none;stroke:#173046;stroke-width:1}.lab-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;padding:1rem;border-top:1px solid var(--dv-line);border-bottom:1px solid var(--dv-line)}.lab-controls fieldset{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:.7rem;border:1px solid var(--dv-line);border-radius:12px}.lab-controls legend{float:none;width:auto;margin:0;padding:0 .2rem;color:var(--dv-cyan);font-size:.75rem}.lab-controls fieldset label{display:flex;gap:.25rem}.lab-controls>label{display:grid;align-content:start;gap:.4rem;color:var(--dv-muted);font-size:.78rem}.lab-controls select{min-height:40px;padding:.4rem;border:1px solid #365a73;border-radius:9px;background:#07111d;color:var(--dv-text)}.main-lab>.demo-controls{padding:1rem}.main-lab>.demo-controls button:first-child{background:var(--dv-lime)}.lab-status{display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem;margin:0;padding:0 1rem 1rem}.lab-status div{padding:.75rem;border:1px solid var(--dv-line);border-radius:11px;background:var(--dv-panel)}.lab-status dt{color:var(--dv-muted);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}.lab-status dd{margin:.25rem 0 0;color:var(--dv-lime);font-weight:800}.main-lab .code-block{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0}.system-project{padding:0;overflow:hidden}.system-project svg{width:min(100%,620px);margin:auto;padding:1rem}.system-project rect{fill:#0b1d2c;stroke:var(--dv-cyan);stroke-width:3}.system-project text{fill:var(--dv-text);font:800 22px sans-serif}.system-project [data-system-connector],.system-project [data-system-check]{fill:none;stroke:var(--dv-lime);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.system-project p{padding:0 1.2rem 1.2rem;color:var(--dv-muted)}.system-project p strong{color:var(--dv-lime)}.fill-draw svg{max-width:520px;margin:auto}.fill-draw [data-fill-layer]{fill:rgba(168,118,255,.65);stroke:none}.fill-draw [data-fill-outline]{fill:none;stroke:var(--dv-lime);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.mistake-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.5rem 0}.mistake-grid span{padding:.75rem;border:1px solid rgba(255,139,117,.25);border-radius:11px;background:rgba(255,139,117,.055)}.debug-list{columns:2;gap:2rem}.debug-list li{break-inside:avoid;margin:.5rem 0}.reference-wrap{overflow:auto}.reference-wrap table{width:100%;border-collapse:collapse}.reference-wrap th,.reference-wrap td{padding:.8rem;border:1px solid var(--dv-line);text-align:left}.reference-wrap th{color:var(--dv-lime);background:#0a1b29}.final-model{justify-content:flex-start}.final-model strong{background:var(--dv-lime);color:#061019}.next-preview{margin:1.5rem 0;padding:1.5rem;border:1px solid rgba(168,118,255,.4);border-radius:20px;background:linear-gradient(135deg,rgba(168,118,255,.13),rgba(53,222,242,.05))}.next-preview>span,.drawsvg-series-nav small{color:var(--dv-lime);font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.next-preview h3{margin:.45rem 0}.drawsvg-faq details{margin:.8rem 0;border:1px solid var(--dv-line);border-radius:14px;background:var(--dv-panel)}.drawsvg-faq summary{padding:1rem 1.15rem;cursor:pointer;font-weight:800}.drawsvg-faq details p{padding:0 1.15rem 1rem;color:var(--dv-muted)}.drawsvg-series-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0}.drawsvg-series-nav a,.drawsvg-series-nav span{padding:1.2rem;border:1px solid var(--dv-line);border-radius:16px;color:var(--dv-text)}.drawsvg-ready [data-first-path],.drawsvg-ready [data-range-path],.drawsvg-ready [data-stagger-line],.drawsvg-ready [data-icon-cloud],.drawsvg-ready [data-icon-arrow],.drawsvg-ready [data-icon-server],.drawsvg-ready [data-icon-check]{will-change:stroke-dasharray,stroke-dashoffset}
@media(max-width:1023px){.lab-controls{grid-template-columns:repeat(3,1fr)}.lab-status{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.drawsvg-toc ol{columns:1}.center-model{grid-template-columns:1fr}.lab-controls{grid-template-columns:repeat(2,1fr)}.lab-status{grid-template-columns:repeat(2,1fr)}.node-flow{justify-content:flex-start}.debug-list{columns:1}}
@media(max-width:575px){.method-compare,.stroke-required,.direction-demo,.mistake-grid,.drawsvg-series-nav{grid-template-columns:1fr}.range-states{grid-template-columns:1fr}.lab-controls,.lab-status{grid-template-columns:1fr}.scrub-model span{grid-template-columns:80px 1fr auto}.developer-mark i{display:none}.drawsvg-article .article-featured{border-radius:14px}.main-lab,.system-project{border-radius:16px}.range-scale span{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.drawsvg-article *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.drawsvg-article path,.drawsvg-article line,.drawsvg-article rect,.drawsvg-article ellipse{opacity:1!important;visibility:visible!important;transform:none!important;stroke-dashoffset:0!important}.drawsvg-article [data-system-node],.drawsvg-article [data-scroll-node],.drawsvg-article [data-graph-points]{opacity:1!important;visibility:visible!important;transform:none!important}}