.tab-shell{min-width:0}
.tab-list{display:flex;width:max-content;max-width:100%;gap:7px;padding:6px;border-radius:var(--radius-pill);background:var(--color-panel-strong);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-button{min-height:40px;padding:8px 17px;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);cursor:pointer;white-space:nowrap}
.tab-button[aria-selected="true"],.tab-button.is-active{background:var(--color-canvas);color:var(--color-primary);font-weight:700;box-shadow:var(--shadow-pill)}
.tab-panel{padding-top:28px}
.tab-panel[hidden]{display:none}
.toc-tabs{position:sticky;top:12px;z-index:45;display:flex;max-width:100%;gap:7px;margin-block:22px;overflow-x:auto;padding:7px;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:var(--shadow-pill);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{flex:none;padding:8px 14px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:13px;white-space:nowrap}
.toc-tabs a:hover,.toc-tabs a.is-reading{background:var(--color-primary-soft);color:var(--color-primary);font-weight:680}
.faq-list{display:grid;gap:12px}
.faq-item{border-radius:var(--radius-lg);background:var(--color-canvas);box-shadow:var(--shadow-card)}
.faq-item summary{position:relative;display:flex;min-height:62px;align-items:center;padding:17px 56px 17px 22px;cursor:pointer;font-weight:700;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);font-size:20px;transition:transform var(--motion-fast)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-answer{padding:0 22px 22px;color:var(--color-muted)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:30px;border-radius:var(--radius-xl);background:var(--color-canvas);box-shadow:var(--shadow-card)}
.plan-card.is-featured{background:var(--color-panel);box-shadow:0 0 0 2px var(--color-primary),var(--shadow-editor)}
.plan-ribbon{position:absolute;top:18px;right:18px;padding:6px 11px;border-radius:var(--radius-pill);background:var(--color-warning);color:var(--color-text);font-size:11px;font-weight:800}
.plan-cycle{margin-bottom:10px;color:var(--color-primary);font-family:var(--font-mono);font-size:12px}
.plan-name{font-size:24px}
.plan-price{display:flex;align-items:baseline;gap:5px;margin:18px 0}
.plan-price strong{font-size:44px;line-height:1;color:var(--color-primary-deep)}
.plan-price span{color:var(--color-muted)}
.plan-features{display:grid;gap:10px;margin:0 0 24px;list-style:none;color:var(--color-muted)}
.plan-features li::before{content:"✓";margin-right:8px;color:var(--color-success);font-weight:800}
.plan-card .button{margin-top:auto}
.table-scroll{width:100%;max-width:100%;overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
.data-table,.route-table,.compare-table{width:100%;min-width:720px;border-collapse:collapse;background:var(--color-canvas)}
.data-table th,.data-table td,.route-table th,.route-table td,.compare-table th,.compare-table td{padding:15px 18px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:middle}
.data-table th,.route-table th,.compare-table th{background:var(--color-panel-strong);color:var(--color-text);font-size:12px;font-weight:800;letter-spacing:.03em}
.data-table tbody tr:nth-child(even),.route-table tbody tr:nth-child(even),.compare-table tbody tr:nth-child(even){background:var(--color-panel)}
.data-table tbody tr:hover,.route-table tbody tr:hover,.compare-table tbody tr:hover{background:var(--color-primary-soft)}
.data-table td:first-child,.route-table td:first-child,.compare-table td:first-child{color:var(--color-text);font-weight:650}
.route-group td{background:var(--color-primary-deep)!important;color:var(--color-canvas)!important;font-family:var(--font-mono);font-size:12px}
.route-type{display:inline-flex;padding:5px 10px;border-radius:var(--radius-pill);background:var(--color-primary-soft);color:var(--color-primary-deep);font-size:12px}
.stream-ok{color:var(--color-success);font-weight:750}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.platform-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;padding:22px;border-radius:var(--radius-lg);background:var(--color-canvas);box-shadow:var(--shadow-card);transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.platform-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-editor)}
.platform-icon{display:grid;width:42px;height:42px;place-items:center;margin-bottom:15px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary)}
.platform-icon svg{width:24px;height:24px;overflow:hidden}
.platform-card h3{margin-bottom:6px;font-size:17px}
.platform-card p{min-height:42px;color:var(--color-muted);font-size:13px}
.platform-card .button{width:100%;margin-top:auto;padding-inline:12px;font-size:13px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-card{display:flex;min-width:0;flex-direction:column;padding:25px;border-radius:var(--radius-xl);background:var(--color-canvas);box-shadow:var(--shadow-card);transition:transform var(--motion-fast)}
.article-card:hover{transform:translateY(-4px)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;color:var(--color-muted);font-family:var(--font-mono);font-size:11px}
.article-card h3{margin-bottom:12px;font-size:20px}
.article-card p{color:var(--color-muted);font-size:14px}
.article-more{margin-top:auto;color:var(--color-primary);font-weight:700}
.callout{position:relative;padding:22px 24px 22px 56px;border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-text)}
.callout::before{content:"i";position:absolute;top:22px;left:22px;display:grid;width:23px;height:23px;place-items:center;border-radius:50%;background:var(--color-primary);color:var(--color-canvas);font-family:var(--font-mono);font-size:12px;font-weight:800}
.callout.is-success{background:var(--color-success-soft)}
.callout.is-success::before{content:"✓";background:var(--color-success)}
.callout.is-warning{background:var(--color-panel-strong)}
.callout.is-warning::before{content:"!";background:var(--color-warning);color:var(--color-text)}
.promo-end{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:clamp(28px,5vw,54px);border-radius:var(--radius-xl);background:var(--gradient-band);color:var(--color-canvas);box-shadow:var(--shadow-editor)}
.promo-end::after{content:"";position:absolute;right:-70px;bottom:-120px;width:280px;height:280px;border:1px solid var(--color-warning);border-radius:50%;opacity:.35}
.promo-end-copy{position:relative;z-index:1}
.promo-end h2{color:var(--color-canvas);font-size:clamp(28px,4vw,44px)}
.promo-end p{margin:10px 0 0;color:var(--color-footer-muted)}
.promo-end .button{position:relative;z-index:1;background:var(--color-canvas);color:var(--color-primary-deep);box-shadow:var(--shadow-pill)}
.hero{display:flex;min-height:calc(100svh - 118px);align-items:center;overflow-x:clip}
.hero-layout{display:grid;width:100%;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:56px;align-items:center}
.hero-copy,.hero-visual{min-width:0}
.hero-copy{position:relative;z-index:2;padding-block:24px}
.hero-title{margin:20px 0 22px}
.hero-description{max-width:530px;margin:0 0 23px;color:var(--color-muted);font-size:16px;line-height:1.8}
.hero-description strong{color:var(--color-primary-deep)}
.trust-row{display:flex;max-width:560px;flex-wrap:wrap;gap:9px;margin-top:24px}
.trust-row .chip::before{content:"✓";color:var(--color-success);font-weight:800}
.hero-visual{position:relative;z-index:1}
.hero-backdrop{position:absolute;inset:-56px -48px -20px -36px;pointer-events:none}
.hero-grid{position:absolute;inset:0;border-radius:40px;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(72% 68% at 50% 44%,var(--color-text) 46%,transparent 100%)}
.hero-trace{position:absolute;border:1.5px solid var(--color-trace);border-radius:34px}
.hero-trace-a{top:0;right:6px;width:270px;height:190px}
.hero-trace-b{bottom:64px;left:0;width:220px;height:160px}
.hero-glow{position:absolute;inset:-6% -4%;background:radial-gradient(44% 40% at 26% 26%,var(--color-primary-soft),transparent 70%),radial-gradient(38% 34% at 76% 64%,var(--color-warning),transparent 72%);filter:blur(18px);opacity:.34;animation:hero-breathe 9s ease-in-out infinite}
.code-editor{position:relative;border-radius:var(--radius-xl);background:var(--color-canvas);box-shadow:var(--shadow-editor);animation:editor-float 7.5s ease-in-out infinite}
.editor-chrome{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--color-line)}
.window-dot{width:10px;height:10px;flex-shrink:0;border-radius:50%;opacity:.55}
.window-dot.is-red{background:var(--color-error)}
.window-dot.is-yellow{background:var(--color-warning)}
.window-dot.is-green{background:var(--color-success)}
.editor-tab{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:5px 13px;border-radius:var(--radius-sm);background:var(--color-panel);font-family:var(--font-mono);font-size:12px}
.editor-tab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-primary)}
.editor-run{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:6px 15px;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-canvas);font-size:12px;font-weight:700}
.editor-run span{color:var(--color-warning)}
.code-lines{padding:22px 24px 28px;counter-reset:line;list-style:none;font-family:var(--font-mono);font-size:14px;line-height:2.15;overflow-x:auto}
.code-lines li{position:relative;min-width:max-content;padding-left:46px;counter-increment:line;white-space:pre}
.code-lines li::before{content:counter(line);position:absolute;left:0;width:26px;text-align:right;color:var(--color-code-comment);font-size:12px}
.code-keyword{color:var(--color-warning-deep);font-weight:650}
.code-string{color:var(--color-primary)}
.code-function{color:var(--color-primary-deep)}
.code-comment{color:var(--color-code-comment)}
.code-caret{display:inline-block;width:8px;height:16px;margin-left:3px;border-radius:2px;background:var(--color-primary);vertical-align:-2px;animation:caret-blink 1.1s steps(2,start) infinite}
.editor-status{position:absolute;bottom:-19px;left:28px;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:var(--shadow-pill);font-family:var(--font-mono);font-size:12px}
.status-check{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:var(--color-success-soft);color:var(--color-success);font-weight:800}
.hero-params{position:relative;z-index:2;display:grid;gap:12px;margin-top:46px}
.param-row{display:flex;align-items:flex-start;gap:14px}
.param-key{width:94px;flex:none;padding-top:7px;text-align:right;color:var(--color-muted);font-family:var(--font-mono);font-size:12px}
.param-items{display:flex;min-width:0;flex-wrap:wrap;gap:8px;list-style:none}
.param-item{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:0 0 0 1px var(--color-line);font-size:12px}
.param-item svg{width:15px;height:15px;flex-shrink:0;overflow:hidden;color:var(--color-muted)}
.flag-mark{display:inline-flex;width:23px;height:15px;flex-shrink:0;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px var(--color-ring)}
.flag-mark svg{width:100%;height:100%}
.preview-main{overflow-x:clip}
.preview-section{padding-top:84px;padding-bottom:84px}
.preview-heading{max-width:720px;margin-bottom:34px}
.preview-heading p{margin-top:10px;color:var(--color-muted)}
.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.preview-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.swatch{overflow:hidden;border-radius:var(--radius-lg);background:var(--color-canvas);box-shadow:var(--shadow-card)}
.swatch-color{height:76px}
.swatch-body{padding:13px}
.swatch-body code{display:block;font-size:11px}
.swatch-name{font-size:13px;font-weight:700}
.swatch-canvas{background:var(--color-canvas)}
.swatch-panel{background:var(--color-panel)}
.swatch-panel-strong{background:var(--color-panel-strong)}
.swatch-line{background:var(--color-line)}
.swatch-primary{background:var(--color-primary)}
.swatch-primary-deep{background:var(--color-primary-deep)}
.swatch-text{background:var(--color-text)}
.swatch-muted{background:var(--color-muted)}
.swatch-success{background:var(--color-success)}
.swatch-warning{background:var(--color-warning)}
.swatch-error{background:var(--color-error)}
.type-samples{display:grid;gap:24px;padding:32px}
.type-display{font-size:clamp(38px,6vw,68px);font-weight:820;line-height:1.1}
.type-heading{font-size:34px;font-weight:780}
.type-body{max-width:720px;color:var(--color-muted);font-size:17px}
.type-mono{font-family:var(--font-mono);color:var(--color-primary-deep)}
.button-demo{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.feature-browser{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px}
.method-index{display:grid;align-content:start;gap:7px;padding:9px;border-radius:var(--radius-lg);background:var(--color-panel)}
.method-index button{display:flex;align-items:center;gap:9px;padding:12px;border-radius:var(--radius-md);background:transparent;color:var(--color-muted);text-align:left;font-family:var(--font-mono);cursor:pointer}
.method-index button::before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--color-line)}
.method-index button.is-active{background:var(--color-canvas);color:var(--color-primary);box-shadow:var(--shadow-card)}
.method-index button.is-active::before{background:var(--color-success)}
.method-panel{padding:38px;border-radius:var(--radius-xl);background:var(--color-canvas);box-shadow:var(--shadow-editor)}
.method-panel p{margin-top:15px;color:var(--color-muted)}
.preview-footer{margin-top:80px}
@keyframes editor-float{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-9px) rotate(-.4deg)}}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hero-breathe{0%,100%{opacity:.28}50%{opacity:.44}}
@media (max-width:1000px){
  .hero{min-height:auto;padding-top:64px;padding-bottom:72px}
  .hero-layout{grid-template-columns:1fr;gap:70px}
  .pricing-grid,.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .hero-copy{padding-top:0}
  .hero-backdrop{inset:-24px -16px}
  .hero-glow{animation:none}
  .code-editor{animation:none}
  .pricing-grid,.article-grid,.preview-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-end{grid-template-columns:1fr}
  .feature-browser{grid-template-columns:1fr}
  .method-index{display:flex;overflow-x:auto}
  .method-index button{flex:none}
  .preview-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc-tabs{top:7px}
}
@media (max-width:640px){
  .param-row{display:block}
  .param-key{display:block;width:auto;margin-bottom:8px;text-align:left}
  .hero-params{margin-top:42px}
  .code-lines{padding-inline:14px;font-size:12px}
  .editor-status{left:14px}
  .platform-grid{grid-template-columns:1fr}
  .preview-swatches{grid-template-columns:1fr 1fr}
  .plan-card{padding:23px}
  .promo-end{padding:25px}
}
@media (prefers-reduced-motion:reduce){
  .code-editor,.hero-glow,.code-caret{animation:none}
}