:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;--bg:#0d1120;--bg2:#11172a;--surface:#171e32;--surface-alt:#1b2439;--surface-code:#0b1222;--ink:#f2f5ff;--muted:#a5aec3;--subtle:#7c87a1;--line:#303950;--line-soft:#252c40;--mint:#83efd5;--mint-bold:#61ddbf;--mint-ink:#062e27;--violet:#b2a0ff;--violet-strong:#a48bff;--shadow:0 22px 70px rgba(0,0,0,.25);--header-h:72px;color-scheme:dark}
:root[data-theme="light"]{--bg:#f7f8fc;--bg2:#eef0f9;--surface:#fff;--surface-alt:#f1f3fa;--surface-code:#151b2c;--ink:#19233a;--muted:#505c72;--subtle:#647086;--line:#d8dcea;--line-soft:#e3e6f0;--mint:#007f69;--mint-bold:#006958;--mint-ink:#fff;--violet:#6b45b9;--violet-strong:#5931ac;--shadow:0 18px 60px rgba(48,54,100,.1);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65}body.dialog-open,body.sidebar-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:5px}::selection{background:var(--violet);color:var(--bg)}h1,h2,h3,p{margin-top:0}svg{width:20px;height:20px}.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}.skip-link{position:fixed;z-index:500;top:-100px;left:16px;background:var(--mint);color:var(--mint-ink);padding:10px 18px;border-radius:8px}.skip-link:focus{top:10px}
.site-header{height:var(--header-h);position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--bg) 91%,transparent);backdrop-filter:blur(22px);border-bottom:1px solid var(--line-soft)}.nav-wrap{height:100%;max-width:1440px;padding:0 38px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.brand-mark{height:36px;width:36px;display:grid;place-items:center;border:1px solid #6ee3c3;border-radius:11px;background:linear-gradient(145deg,#15382f,#171931);position:relative;transform:rotate(-8deg)}.brand-mark>span{font-size:28px;font-weight:900;line-height:1;color:#a0ffe3;font-family:ui-monospace,monospace;transform:rotate(8deg) translateY(-2px)}.brand-mark i{position:absolute;top:5px;right:5px;width:5px;height:5px;background:#b4a0ff;border-radius:50%}.brand-name{font-size:26px;font-weight:790;letter-spacing:-1.8px;line-height:1}.brand-dot{color:var(--mint)}.brand-name small{font-size:13px;color:var(--violet);letter-spacing:-.3px;margin-left:1px}.top-nav{display:flex;gap:30px;align-items:center;margin:auto}.top-nav a,.footer-links a{color:var(--muted);font-size:14px;font-weight:650;transition:color .2s}.top-nav a:hover,.footer-links a:hover{color:var(--mint)}.nav-actions{display:flex;align-items:center;gap:12px}.search-trigger{display:flex;align-items:center;gap:9px;width:206px;height:37px;padding:0 10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--subtle);font-size:13px}.search-trigger svg{width:16px;height:16px}.search-trigger kbd{font:11px ui-monospace,monospace;margin-left:auto;color:var(--muted);padding:2px 5px;border:1px solid var(--line);border-radius:4px}.icon-button,.github-link{background:none;border:0;color:var(--muted);width:34px;height:34px;display:grid;place-items:center;padding:0}.icon-button:hover,.github-link:hover{color:var(--mint)}.mobile-menu{display:none}
.release-banner{min-height:43px;display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap;text-align:center;padding:10px 20px;border-bottom:1px solid var(--line-soft);background:var(--bg2);color:var(--muted);font-size:12px}.release-banner strong{color:var(--ink);font-family:ui-monospace,monospace;font-size:11px}.release-banner a{color:var(--mint);text-decoration:underline;text-underline-offset:4px}.release-pulse{height:7px;width:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 13%,transparent)}.banner-divider{color:var(--subtle)}
.hero{max-width:1440px;min-height:650px;margin:auto;padding:100px 60px 94px;display:grid;grid-template-columns:1fr .88fr;align-items:center;gap:46px;position:relative;overflow:hidden}.hero::after{content:"";position:absolute;inset:0;opacity:.33;pointer-events:none;background-image:radial-gradient(var(--line) 0.8px,transparent 0.8px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent 28%,#000 100%)}.hero-glow{position:absolute;z-index:0;right:2%;top:10%;width:660px;height:550px;border-radius:50%;background:radial-gradient(ellipse,rgba(116,82,211,.16),transparent 66%);pointer-events:none}.hero-content{position:relative;z-index:2}.eyebrow,.overline,.doc-eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:850;color:var(--mint)}.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:25px}.eyebrow-line{width:29px;height:1px;background:var(--mint)}.hero h1{font-size:clamp(68px,6.9vw,112px);line-height:.97;letter-spacing:-6px;font-weight:800;margin:0 0 30px}.hero h1 em,.code-explain h2 em{font-style:normal;color:var(--mint)}.hero-content>p{font-size:18px;line-height:1.8;color:var(--muted);max-width:590px}.hero-content>p strong{color:var(--ink)}.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:37px}.button-primary,.button-secondary{padding:13px 21px;min-height:49px;border-radius:9px;font-size:14px;font-weight:760;display:inline-flex;align-items:center;gap:32px}.button-primary{background:var(--mint);color:var(--mint-ink)}.button-primary:hover{filter:brightness(.94)}.button-secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}.button-secondary:hover{border-color:var(--violet)}.hero-subnote{display:flex;gap:9px;align-items:center;margin-top:27px;font-size:12px;color:var(--subtle)}.status-mark{height:7px;width:7px;border:1px solid var(--violet);border-radius:50%}.hero-visual{height:480px;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;isolation:isolate}.visual-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);border-radius:50%;transform:rotate(-25deg)}.orbit-one{height:385px;width:485px}.orbit-two{height:300px;width:390px;transform:rotate(25deg);opacity:.5}.visual-inner{width:390px;position:relative;z-index:2;padding:25px;background:linear-gradient(148deg,color-mix(in srgb,var(--surface) 95%,var(--violet)),var(--bg2));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;transform:perspective(1200px) rotateY(-8deg) rotateX(3deg)}.visual-label{font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--subtle);margin-bottom:22px}.dom-node{min-height:50px;display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 14px;font:13px ui-monospace,monospace;color:var(--ink)}.dom-node.dim{color:var(--muted)}.node-symbol{font-weight:800;color:var(--subtle);font-size:18px}.node-symbol.purple{color:var(--violet)}.node-symbol.mint{color:var(--mint)}.node-meta{margin-left:auto;color:var(--subtle);font-size:10px}.node-stem{height:25px;width:1px;background:var(--line);margin-left:32px;position:relative}.node-stem::after{content:"";position:absolute;bottom:0;left:-3px;border:4px solid transparent;border-top-color:var(--line);transform:translateY(8px)}.node-stem-highlight{background:var(--mint)}.node-stem-highlight::after{border-top-color:var(--mint)}.dom-node.active{border-color:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 8%,transparent);background:color-mix(in srgb,var(--mint) 5%,var(--surface))}.active-chip{margin-left:auto;font:10px ui-monospace,monospace;padding:3px 6px;color:var(--mint);border:1px solid color-mix(in srgb,var(--mint) 50%,transparent);border-radius:4px}.node-annotation{font:11px ui-monospace,monospace;color:var(--mint);margin-top:24px}.annotation-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:7px}.orbit-pip{position:absolute;height:8px;width:8px;background:var(--violet);border-radius:50%}.pip-one{top:55px;right:125px}.pip-two{bottom:54px;left:95px;background:var(--mint)}
.intro-strip{padding:28px 55px;background:var(--bg2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:35px}.intro-strip>div{color:var(--violet);letter-spacing:2px;font-size:11px;font-weight:850;white-space:nowrap}.intro-strip p{margin:0;font-size:17px;font-weight:590;max-width:720px}.intro-strip a{white-space:nowrap;color:var(--mint);font-size:13px;font-weight:800}.section-wrap{max-width:1320px;margin:0 auto;padding:115px 55px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:42px}.section-heading h2,.code-explain h2,.story-copy h2{font-size:clamp(37px,4.5vw,57px);line-height:1.07;letter-spacing:-2.5px;margin:17px 0 0;font-weight:790}.section-heading>p{max-width:440px;margin:0;color:var(--muted);font-size:15px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{min-height:270px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:26px;transition:transform .18s,border-color .18s}.feature-card:hover{transform:translateY(-5px);border-color:var(--violet)}.feature-index{display:flex;justify-content:space-between;color:var(--mint);font:12px ui-monospace,monospace;letter-spacing:1px;margin-bottom:48px}.feature-index span{font-size:20px;color:var(--subtle)}.feature-card h3{font-size:19px;margin:0 0 9px;letter-spacing:-.6px}.feature-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.7}.code-showcase{display:grid;grid-template-columns:.86fr 1.14fr;gap:70px;align-items:center;padding-top:52px;padding-bottom:120px}.code-explain h2{margin:20px 0 24px}.code-explain>p{color:var(--muted);font-size:16px;line-height:1.8;max-width:390px}.text-link,.story-copy a{color:var(--mint);font-weight:800;font-size:14px}.code-warning{border-left:2px solid var(--violet);padding:8px 0 8px 16px;color:var(--subtle);font-size:12px;margin-top:36px;max-width:390px}.code-shell{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-code);box-shadow:0 12px 35px rgba(0,0,0,.09);margin:20px 0}.code-head{display:flex;align-items:center;justify-content:space-between;padding:9px 15px;background:#161f34;border-bottom:1px solid #2b3550;color:#c4ccdf;font:12px ui-monospace,monospace}.code-head .copy-btn{border:1px solid #44516c;border-radius:6px;background:#202b43;color:#dfe9ff;font:11px ui-monospace,monospace;padding:5px 10px;min-width:55px}.code-head .copy-btn:hover{border-color:#83efd5}.code-shell pre{padding:19px 21px;margin:0;overflow:auto;color:#d5e1fa;font:13px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.showcase-code .code-shell{box-shadow:var(--shadow)}.showcase-code .code-shell pre{min-height:330px}.path-section{padding-top:0}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.path-grid a{background:var(--surface);border:1px solid var(--line-soft);padding:28px;border-radius:12px;display:flex;flex-direction:column;transition:border-color .2s}.path-grid a:hover{border-color:var(--mint)}.path-grid a span{font:11px ui-monospace,monospace;color:var(--violet);letter-spacing:1.1px}.path-grid a strong{font-size:24px;letter-spacing:-.7px;margin-top:32px}.path-grid a p{color:var(--muted);font-size:14px;margin:10px 0 30px}.path-grid a b{color:var(--mint);font-size:12px;margin-top:auto}.story-cta{margin:0 auto 95px;max-width:1210px;padding:65px 75px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(110deg,var(--surface),var(--bg2));display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;overflow:hidden}.story-pattern{color:var(--mint);font-size:clamp(65px,9vw,155px);letter-spacing:-11px;font-weight:850;line-height:1;white-space:nowrap;transform:rotate(-9deg);text-shadow:18px 19px 0 color-mix(in srgb,var(--mint) 8%,transparent)}.story-pattern span{color:var(--violet);font-size:.6em}.story-copy h2{margin-bottom:22px}.story-copy p{color:var(--muted);line-height:1.8;margin-bottom:26px}.story-copy strong{color:var(--ink)}
.footer{border-top:1px solid var(--line-soft);padding:52px 55px 23px;background:var(--bg2)}.footer-inner{max-width:1250px;margin:auto;display:flex;align-items:start;justify-content:space-between;gap:30px}.footer-inner strong{font-size:19px;letter-spacing:-.5px}.footer-inner p{color:var(--subtle);font-size:13px}.footer-links{display:flex;flex-wrap:wrap;gap:24px}.footer-bottom{max-width:1250px;margin:30px auto 0;padding-top:15px;border-top:1px solid var(--line-soft);color:var(--subtle);font-size:11px}
.docs-frame{display:grid;grid-template-columns:265px minmax(0,790px) 195px;gap:46px;max-width:1560px;min-height:calc(100vh - var(--header-h));margin:auto;padding:0 39px}.docs-sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));border-right:1px solid var(--line-soft);overflow:auto;padding:34px 20px 60px 0;scrollbar-width:thin}.sidebar-label{font-weight:780;font-size:14px;letter-spacing:-.3px;display:flex;align-items:center;gap:10px}.sidebar-label span{color:var(--violet);font:10px ui-monospace,monospace;border:1px solid var(--line);border-radius:5px;padding:4px 6px}.sidebar-group{margin-top:30px}.sidebar-group h2{font-size:10px;letter-spacing:1.8px;color:var(--subtle);text-transform:uppercase;padding-left:12px;margin:0 0 10px}.sidebar-group>a{display:block;padding:7px 12px;margin-bottom:3px;border-radius:7px;color:var(--muted);font-size:13px;font-weight:530}.sidebar-group>a:hover{color:var(--ink);background:var(--surface)}.sidebar-group>a[aria-current="page"]{color:var(--mint);background:color-mix(in srgb,var(--mint) 10%,var(--surface));font-weight:740;border-left:2px solid var(--mint)}.docs-main{min-width:0;padding:32px 0 95px}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--subtle);font-size:12px}.breadcrumb a:hover{color:var(--mint)}.breadcrumb strong{color:var(--muted);font-weight:500}.doc-title{padding:57px 0 35px;border-bottom:1px solid var(--line-soft)}.doc-title h1{font-size:clamp(35px,4vw,55px);line-height:1.1;letter-spacing:-2px;margin:12px 0 14px}.doc-title p{font-size:17px;color:var(--muted);max-width:690px;margin:0;line-height:1.7}.prose{font-size:15px;line-height:1.88;color:var(--muted)}.prose h2,.prose h3,.prose h4{color:var(--ink);line-height:1.25;letter-spacing:-.7px;scroll-margin-top:110px}.prose h2{font-size:29px;margin:47px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}.prose h3{font-size:21px;margin:34px 0 15px}.prose h4{font-size:17px;margin:25px 0 12px}.prose p{margin:18px 0}.prose strong{color:var(--ink);font-weight:730}.prose a:not(.heading-anchor){color:var(--violet);text-decoration:underline;text-underline-offset:4px}.prose a:not(.heading-anchor):hover{color:var(--mint)}.prose :not(pre)>code{font:12px ui-monospace,monospace;color:var(--mint);padding:3px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}.prose ul,.prose ol{padding-left:22px;margin:18px 0}.prose li{padding-left:3px;margin:8px 0}.prose li::marker{color:var(--violet)}.prose .code-shell{margin:25px 0}.prose .notice{background:color-mix(in srgb,var(--violet) 6%,var(--surface));border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:8px;padding:15px 19px;margin:25px 0;color:var(--ink)}.prose hr{border:0;border-top:1px solid var(--line);margin:42px 0}.heading-anchor{color:var(--subtle);font-size:.68em;opacity:0;padding-left:12px}.prose h2:hover .heading-anchor,.prose h3:hover .heading-anchor,.heading-anchor:focus-visible{opacity:1}.doc-source{border-top:1px solid var(--line-soft);margin-top:60px;padding-top:25px;color:var(--subtle);font-size:12px}.doc-source a{color:var(--violet);text-decoration:underline}.doc-neighbors{display:flex;justify-content:space-between;gap:20px;margin-top:32px}.doc-neighbors a{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px solid var(--line);border-radius:10px;min-width:0;flex:1;background:var(--surface)}.doc-neighbors a:hover{border-color:var(--mint)}.doc-neighbors small{font-size:11px;color:var(--subtle)}.doc-neighbors strong{font-size:13px}.neighbor-next{text-align:right}.toc{position:sticky;top:calc(var(--header-h) + 30px);align-self:start;max-height:calc(100vh - var(--header-h) - 55px);padding-top:37px;overflow:auto;display:flex;flex-direction:column;gap:13px}.toc>span{letter-spacing:1.5px;font-size:10px;font-weight:760;color:var(--subtle);margin-bottom:8px}.toc a,.toc p{color:var(--subtle);font-size:12px;line-height:1.5;margin:0}.toc a:hover{color:var(--mint)}.toc .toc-end{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)}
.search-backdrop[hidden]{display:none}.search-backdrop{position:fixed;inset:0;z-index:200;background:rgba(5,7,16,.72);display:flex;justify-content:center;align-items:flex-start;padding:13vh 20px 20px;backdrop-filter:blur(5px)}.search-dialog{width:min(620px,100%);max-height:70vh;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);display:flex;flex-direction:column}.search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}.search-field svg{color:var(--muted);flex:none}.search-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);outline:none}.search-field input:focus-visible{outline:none}.search-field button{color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:6px;font-size:11px;padding:4px 8px}.search-results{overflow:auto;padding:9px}.search-result{display:flex;flex-direction:column;padding:12px 15px;border-radius:9px;border:1px solid transparent;gap:3px}.search-result:hover,.search-result:focus-visible{background:var(--bg2);border-color:var(--line)}.search-result-title{color:var(--ink);font-weight:720;font-size:14px}.search-result-desc,.search-empty{color:var(--muted);font-size:12px}.search-empty{padding:20px}.search-foot{border-top:1px solid var(--line);color:var(--subtle);font-size:11px;padding:9px 16px}
@media(max-width:1190px){.docs-frame{grid-template-columns:235px minmax(0,1fr);gap:35px}.toc{display:none}.hero{padding-left:42px;padding-right:42px;gap:15px}.hero h1{font-size:clamp(66px,7vw,90px)}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-index{margin-bottom:32px}.feature-card{min-height:215px}}@media(max-width:870px){.top-nav{display:none}.nav-wrap{padding:0 20px}.search-trigger{width:40px;justify-content:center}.search-trigger span,.search-trigger kbd{display:none}.mobile-menu{display:grid}.hero{grid-template-columns:1fr;min-height:0;padding:72px 25px 40px;text-align:left}.hero-visual{height:400px}.hero-content>p{max-width:650px}.hero h1{font-size:clamp(64px,11vw,94px)}.intro-strip{padding:22px 25px;flex-wrap:wrap}.intro-strip p{flex-basis:100%;order:2}.section-wrap{padding:70px 25px}.code-showcase{grid-template-columns:1fr;gap:23px}.story-cta{margin:10px 25px 65px;padding:40px;grid-template-columns:1fr}.story-pattern{font-size:100px}.docs-frame{display:block;padding:0 24px}.docs-sidebar{position:fixed;z-index:100;top:var(--header-h);left:0;bottom:0;width:min(330px,85vw);height:calc(100vh - var(--header-h));background:var(--bg);border-right:1px solid var(--line);padding:23px 22px 50px;transform:translateX(-110%);transition:transform .2s;box-shadow:var(--shadow)}.docs-sidebar.is-open{transform:translateX(0)}.docs-main{max-width:770px;margin:auto}.doc-title{padding-top:38px}.footer{padding:45px 25px 20px}}@media(max-width:560px){.nav-wrap{gap:12px}.brand-name{font-size:23px}.nav-actions{gap:5px}.github-link{display:none}.release-banner{font-size:10px;gap:7px}.hero h1{font-size:clamp(58px,14vw,84px);letter-spacing:-4px}.hero-content>p{font-size:16px}.hero-visual{height:330px}.visual-inner{width:min(335px,90vw);padding:18px}.visual-orbit.orbit-one{height:260px;width:320px}.visual-orbit.orbit-two{height:210px;width:270px}.dom-node{font-size:11px;gap:8px}.node-meta{font-size:9px}.node-annotation{font-size:9px}.intro-strip>div{font-size:10px}.intro-strip p{font-size:15px}.section-heading{display:block}.section-heading>p{margin-top:20px}.feature-grid,.path-grid{grid-template-columns:1fr}.feature-card{min-height:200px}.feature-index{margin-bottom:25px}.code-showcase .code-shell pre{font-size:11px}.story-cta{padding:30px}.story-pattern{font-size:69px;letter-spacing:-7px}.footer-inner{display:block}.footer-links{margin-top:25px;gap:14px 25px}.docs-frame{padding:0 19px}.doc-title h1{font-size:35px}.doc-title p{font-size:15px}.prose{font-size:14px}.prose h2{font-size:25px}.prose .code-shell pre{font-size:11px}.doc-neighbors a{padding:12px}.doc-neighbors strong{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(max-width:870px){.top-nav.is-open{display:flex;position:fixed;top:var(--header-h);right:0;left:0;background:var(--bg);padding:28px 26px;flex-direction:column;align-items:stretch;gap:15px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:120}.top-nav.is-open a{font-size:17px;padding:9px 0}.mobile-menu[aria-expanded="true"]{color:var(--mint)}}

/* Interactive examples — rendered by Zidom, not static DOM event handlers. */
.examples-hero{max-width:1200px;margin:auto;padding:70px 28px 26px}.examples-hero h1{font-size:clamp(44px,6vw,72px);line-height:1.08;letter-spacing:-3px;margin:15px 0 18px}.examples-hero p{max-width:760px;color:var(--muted);font-size:17px}.examples-grid{max-width:1200px;margin:0 auto 90px;padding:0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.example-tile{display:flex;flex-direction:column;gap:12px;padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.example-tile:hover{border-color:var(--mint);transform:translateY(-2px)}.example-tile span{font-size:11px;letter-spacing:1.4px;color:var(--mint);font-weight:750;text-transform:uppercase}.example-tile strong{font-size:20px;color:var(--ink)}.example-tile p{color:var(--muted);font-size:14px;flex:1;margin:0}.example-tile b{color:var(--violet);font-size:13px}.example-detail{max-width:1180px;margin:0 auto;padding:70px 28px 90px}.example-detail h1{font-size:clamp(42px,5.5vw,62px);line-height:1.05;letter-spacing:-2px;margin:16px 0}.example-detail>p{color:var(--muted);max-width:780px;font-size:16px}.example-columns{display:grid;grid-template-columns:minmax(300px,.84fr) minmax(0,1.16fr);gap:24px;align-items:start;margin-top:38px}.example-live,.example-source{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.example-section-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--subtle);text-transform:uppercase;letter-spacing:1.4px;font-weight:800;padding:15px 22px;border-bottom:1px solid var(--line)}.example-live>div:not(.example-section-title){padding:22px}.example-source .code-shell{margin:0;border:0;border-radius:0}.example-source pre{max-height:700px;overflow:auto}.example-card{display:flex;flex-direction:column;gap:13px;font-size:14px;color:var(--muted)}.example-card p{margin:0}.example-card strong{color:var(--ink)}.example-card button,.example-card .demo-actions button{background:var(--bg2);border:1px solid var(--line);border-radius:7px;color:var(--ink);font-size:13px;font-weight:700;padding:10px 13px}.example-card button:hover{border-color:var(--mint)}.example-card button:disabled{opacity:.45;cursor:not-allowed}.demo-number{font-size:74px;line-height:1.1;font-weight:800;letter-spacing:-3px;color:var(--mint)}.demo-output{font-size:23px;font-weight:700;color:var(--mint);margin:10px 0!important}.demo-actions{display:flex;flex-wrap:wrap;gap:10px}.demo-list{padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.demo-list li{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);border-radius:8px}.demo-hint{font-size:12px}.demo-form label{font-size:13px;font-weight:700;color:var(--ink)}.demo-form input{border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:11px 12px;color:var(--ink)}.demo-form input[aria-invalid="true"]{border-color:#ef9089}.demo-error{min-height:18px;font-size:12px;color:#f3a7a0!important}.portal-notice{position:fixed;bottom:24px;right:24px;background:var(--surface);color:var(--ink);padding:18px 20px;border-radius:12px;border:1px solid var(--mint);box-shadow:var(--shadow);z-index:180;display:flex;align-items:center;gap:20px;max-width:min(380px,85vw)}.portal-notice button{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:3px 8px}.example-iframe{width:100%;height:270px;border:0;background:var(--bg)}.build-message{font-size:14px;color:var(--muted);padding:24px}.build-message strong{color:var(--mint)}.example-back{color:var(--violet)!important;font-weight:720;font-size:14px}.router-frame-body{background:var(--bg);padding:24px;margin:0}.router-frame-body .example-card{max-width:680px}.router-frame-body a{color:var(--mint);text-decoration:underline}
@media(max-width:980px){.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-columns{grid-template-columns:1fr}}@media(max-width:560px){.examples-grid{grid-template-columns:1fr}.examples-hero,.example-detail{padding-left:20px;padding-right:20px}.example-detail{padding-top:43px}.example-iframe{height:320px}}