.svg-article{--sv-bg:#050b14;--sv-panel:#0b1725;--sv-line:#294259;--sv-text:#e3edf7;--sv-muted:#91a7ba;--sv-lime:#c8ff3d;--sv-cyan:#37e1ed;--sv-violet:#a975ff;color:var(--sv-text);overflow-x:clip}.svg-article .article-featured,.svg-poster img{display:block;width:100%;height:auto}.svg-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)}.svg-article .article-content h2,.svg-article .article-content h3{scroll-margin-top:110px}.svg-article .article-content h2{margin-top:3.1rem}.svg-article code{color:#d9ff79}.svg-article button,.svg-article select,.svg-article input{font:inherit}.svg-toc{margin:2rem 0;padding:1.4rem;border:1px solid var(--sv-line);border-radius:20px;background:rgba(11,23,37,.76)}.svg-toc strong{display:block;margin-bottom:.75rem}.svg-toc ol{columns:2;gap:2rem;margin:0;padding-left:1.25rem}.svg-toc li{break-inside:avoid;margin:.35rem 0}.svg-toc a{color:var(--sv-text)}.svg-poster{margin:2rem 0;padding:10px;background:linear-gradient(135deg,rgba(200,255,61,.28),rgba(55,225,237,.08),rgba(169,117,255,.24));border-radius:24px}.svg-poster img{border-radius:17px}.svg-poster figcaption{padding:.85rem .8rem .35rem;color:var(--sv-muted);font-size:.92rem}.svg-article .code-block{margin:1.4rem 0;border:1px solid var(--sv-line);border-radius:18px;background:#030810;overflow:auto}.svg-article pre{margin:0;padding:1.2rem;color:#e4f1fb;font-size:.9rem;line-height:1.7}
.svg-element-map,.svg-element-map span,.svg-compare,.origin-graphic,.device-svg{display:grid}.svg-element-map{grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.5rem 0}.svg-element-map span{min-height:100px;place-items:center;border:1px solid var(--sv-line);border-radius:14px;background:var(--sv-panel);color:var(--sv-cyan);font-family:monospace;font-weight:900}.svg-compare{grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}.svg-compare article{padding:1.2rem;border:1px solid var(--sv-line);border-radius:16px;background:var(--sv-panel)}.svg-compare strong{color:var(--sv-lime)}.svg-compare p{margin:.4rem 0 0;color:var(--sv-muted)}
.svg-first-demo,.group-demo,.scroll-svg,.svg-lab,.stroke-lab,.icon-project{margin:1.5rem 0;padding:1.2rem;border:1px solid var(--sv-line);border-radius:20px;background:radial-gradient(circle at 80% 10%,rgba(169,117,255,.14),transparent 32%),#07111d}.svg-first-demo svg,.group-demo svg,.scroll-svg svg,.stroke-lab svg,.icon-project svg{display:block;width:100%;height:auto}.svg-first-demo line{stroke:#294b65;stroke-width:2;stroke-dasharray:8 8}.svg-first-demo circle{fill:var(--sv-lime);filter:drop-shadow(0 0 14px rgba(200,255,61,.45))}.svg-first-demo button,.group-demo button,.stroke-lab button,.icon-project button,.svg-lab button{min-height:42px;margin-top:.8rem;padding:.6rem .9rem;border:1px solid var(--sv-lime);border-radius:10px;background:var(--sv-lime);color:#06101a;font-weight:900;cursor:pointer}.origin-graphic{grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}.origin-graphic article{position:relative;min-height:190px;border:1px solid var(--sv-line);border-radius:17px;background:linear-gradient(145deg,#10273b,#07111d)}.origin-graphic article:before{content:"";position:absolute;inset:48px 30%;border:2px solid var(--sv-cyan);transform:rotate(28deg)}.origin-graphic span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--sv-lime);font-size:2rem}.origin-graphic .is-corner span{left:30%;top:48px}.origin-graphic b{position:absolute;left:1rem;bottom:1rem;color:var(--sv-muted);font-size:.75rem}.group-demo [data-rocket-group]{fill:none;stroke:var(--sv-cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.group-demo .rocket-flame{fill:var(--sv-violet);stroke:var(--sv-violet)}
.stroke-concept{display:grid;grid-template-columns:auto 1fr;gap:.8rem 1rem;align-items:center;margin:1.5rem 0;padding:1rem;border:1px solid var(--sv-line);border-radius:16px;background:var(--sv-panel)}.stroke-concept span{color:var(--sv-muted);font-size:.75rem;font-weight:900}.stroke-concept i,.stroke-concept b{height:5px;background:repeating-linear-gradient(90deg,var(--sv-cyan) 0 24px,transparent 24px 38px)}.stroke-concept b{background:linear-gradient(90deg,transparent 35%,var(--sv-lime) 35%)}.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin:1.5rem 0}.icon-grid svg{width:100%;padding:.6rem;border:1px solid var(--sv-line);border-radius:14px;background:var(--sv-panel);fill:none;stroke:var(--sv-cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.icon-grid svg:nth-child(even){stroke:var(--sv-violet)}.line-graph{padding:1rem;border:1px solid var(--sv-line);border-radius:18px;background:#07111d}.line-graph svg{width:100%;height:auto}.line-graph path{fill:none;stroke:var(--sv-cyan);stroke-width:6;stroke-linecap:round}.line-graph circle{fill:var(--sv-lime)}.svg-timeline{display:flex;align-items:center;gap:.6rem;margin:1.5rem 0}.svg-timeline span{flex:1;padding:.8rem;text-align:center;border:1px solid var(--sv-line);border-radius:11px;background:var(--sv-panel)}.svg-timeline i{width:28px;height:3px;background:var(--sv-violet)}
.scroll-svg [data-scroll-path],.scroll-svg [data-scroll-ground]{fill:none;stroke:var(--sv-cyan);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.scroll-svg [data-scroll-ground]{stroke:var(--sv-lime);stroke-width:3}.scroll-svg [data-scroll-sun]{fill:var(--sv-lime)}.coordinate-grid{position:relative;min-height:240px;margin:1.5rem 0;border-left:3px solid var(--sv-cyan);border-bottom:3px solid var(--sv-cyan);border-radius:0 0 0 4px;background-image:linear-gradient(rgba(55,225,237,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(55,225,237,.08) 1px,transparent 1px);background-size:32px 32px}.coordinate-grid i{position:absolute;left:.4rem;bottom:.4rem;color:var(--sv-lime);font-style:normal}.coordinate-grid span:nth-of-type(1){position:absolute;right:.5rem;bottom:.5rem}.coordinate-grid span:nth-of-type(2){position:absolute;left:.5rem;top:.5rem}.coordinate-grid b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--sv-muted)}.device-svg{grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}.device-svg span{padding:1.2rem;text-align:center;border:1px solid var(--sv-line);border-radius:14px;background:var(--sv-panel)}.device-svg b{display:block;color:var(--sv-cyan)}
.svg-lab{padding:0;overflow:hidden}.svg-lab__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1rem;border-bottom:1px solid var(--sv-line)}.svg-lab__controls label{display:grid;grid-template-columns:1fr auto;gap:.3rem;color:var(--sv-muted);font-size:.78rem}.svg-lab__controls input,.svg-lab__controls select{grid-column:1/-1}.svg-lab__controls input{accent-color:var(--sv-lime)}.svg-lab__controls select{min-height:38px;padding:.4rem;border:1px solid #34546d;border-radius:8px;background:#07111d;color:var(--sv-text)}.svg-lab__controls button{margin:0;align-self:end}.svg-lab>svg{display:block;width:100%;height:auto;background:#06101a}.svg-grid-lines path{fill:none;stroke:#193349;stroke-width:1}.svg-lab [data-lab-shape] rect{fill:#102f47;stroke:var(--sv-cyan);stroke-width:4}.svg-lab [data-lab-shape] circle{fill:var(--sv-violet)}.svg-lab [data-lab-shape] path{fill:none;stroke:var(--sv-lime);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.origin-dot{fill:#fff;stroke:var(--sv-lime);stroke-width:3}.svg-lab .code-block{margin:0;border:0;border-top:1px solid var(--sv-line);border-radius:0}.stroke-lab>div,.icon-project>div{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.stroke-lab button+button,.icon-project button{background:transparent;color:var(--sv-text);border-color:#36566f}.stroke-lab label{display:grid;gap:.2rem;color:var(--sv-muted);font-size:.75rem}.stroke-lab select{min-height:40px;padding:.4rem;border:1px solid #36566f;border-radius:9px;background:#07111d;color:var(--sv-text)}.stroke-lab path{fill:none;stroke:var(--sv-cyan);stroke-width:8;stroke-linecap:round}.stroke-lab p,.icon-project p{color:var(--sv-muted)}.icon-project svg{max-width:520px;margin:auto}.icon-project rect,.icon-project path,.icon-project circle{fill:none;stroke:var(--sv-cyan);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.icon-project [data-icon-dot]{fill:var(--sv-lime);stroke:none}.icon-project [data-icon-code]{stroke:var(--sv-violet)}
.svg-architecture,.svg-final{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1.5rem 0;overflow:auto}.svg-architecture span,.svg-final span,.svg-final strong{min-width:135px;padding:.85rem;border:1px solid var(--sv-line);border-radius:11px;background:var(--sv-panel);text-align:center;font-weight:900}.svg-architecture i,.svg-final i{color:var(--sv-lime);font-style:normal}.svg-final strong{background:var(--sv-lime);color:#06101a}.svg-mistakes{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.5rem 0}.svg-mistakes span{padding:.75rem;border:1px solid rgba(255,145,110,.24);border-radius:11px;background:rgba(255,110,80,.055)}.svg-debug{columns:2;gap:2rem}.svg-debug li{break-inside:avoid;margin:.5rem 0}.svg-table-wrap{overflow:auto}.svg-table{width:100%;border-collapse:collapse}.svg-table th,.svg-table td{padding:.8rem;border:1px solid var(--sv-line);text-align:left}.svg-table th{color:var(--sv-lime);background:#0b1a28}.svg-faq details{margin:.8rem 0;border:1px solid var(--sv-line);border-radius:14px;background:var(--sv-panel)}.svg-faq summary{padding:1rem 1.15rem;cursor:pointer;font-weight:800}.svg-faq details p{padding:0 1.15rem 1rem;color:var(--sv-muted)}.svg-next{margin:1.5rem 0;padding:1.5rem;border:1px solid rgba(169,117,255,.35);border-radius:20px;background:linear-gradient(135deg,rgba(169,117,255,.12),rgba(55,225,237,.05))}.svg-next span,.svg-series-nav small{color:var(--sv-lime);font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.svg-next h3{margin:.45rem 0}.svg-series-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0}.svg-series-nav a,.svg-series-nav span{padding:1.2rem;border:1px solid var(--sv-line);border-radius:16px;color:var(--sv-text)}.svg-ready [data-grid-icon]{will-change:transform,opacity}
@media(max-width:899px){.svg-toc ol{columns:1}.svg-element-map{grid-template-columns:repeat(2,1fr)}.icon-grid{grid-template-columns:repeat(3,1fr)}.svg-lab__controls{grid-template-columns:repeat(2,1fr)}.svg-debug{columns:1}.svg-architecture,.svg-final{justify-content:flex-start}}
@media(max-width:575px){.svg-compare,.origin-graphic,.device-svg,.svg-mistakes,.svg-series-nav{grid-template-columns:1fr}.icon-grid{grid-template-columns:repeat(2,1fr)}.svg-lab__controls{grid-template-columns:1fr}.svg-timeline{align-items:stretch;flex-direction:column}.svg-timeline i{width:3px;height:24px}.svg-element-map{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.svg-article *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.svg-ready [data-grid-icon],.svg-ready [data-first-circle],.svg-ready [data-rocket-group],.svg-ready [data-scroll-path],.svg-ready [data-scroll-sun],.svg-ready [data-scroll-ground]{opacity:1!important;visibility:visible!important;transform:none!important;stroke-dashoffset:0!important}}