.stage{position:relative;padding-top:52px;isolation:isolate}
.vista{
  position:absolute;inset:0 0 48px;border-radius:var(--r-frame);overflow:hidden;
  background:radial-gradient(70% 55% at 50% 72%,var(--sun-glow) 0%,var(--clear) 70%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 40%,var(--sky-horizon) 74%,var(--sky-horizon) 100%);
  color:var(--text);
}
.vista-art{position:absolute;inset:0;width:100%;height:100%}
.ridge-far{fill:var(--ridge-far)}
.ridge-mid{fill:var(--ridge-mid)}
.ridge-near{fill:var(--ridge-near)}
.snow-cap{fill:var(--snow-cap)}
.snowline{fill:none;stroke:var(--snow);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cloud{fill:var(--mist);opacity:.38}
.mist-0{stop-color:var(--mist);stop-opacity:0}
.mist-30{stop-color:var(--mist);stop-opacity:.3}
.mist-60{stop-color:var(--mist);stop-opacity:.62}
.client{
  position:relative;z-index:1;width:min(920px,calc(100% - 64px));margin-inline:auto;
  background:var(--bg);color:var(--text);background-clip:padding-box;border:1px solid var(--window-edge);
  border-radius:var(--r-window);box-shadow:var(--shadow-window);overflow:hidden;
}
.client-bar{height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:14px;background:var(--bg-panel);color:var(--text-muted);border-bottom:1px solid var(--border)}
.dots{display:flex;gap:7px}
.dots span{width:11px;height:11px;border-radius:var(--r-round);background:var(--chrome-dot);color:var(--text);flex-shrink:0}
.client-title{font-size:12.5px;color:var(--text-muted);letter-spacing:.01em}
.client-body{display:grid;grid-template-columns:176px minmax(0,1fr)}
.client-side{background:var(--bg-panel);color:var(--text);border-right:1px solid var(--border);padding:12px 10px 14px}
.client-app{display:flex;align-items:center;gap:8px;padding:4px 8px 12px;font-size:13px;font-weight:var(--weight-medium);color:var(--text)}
.client-app img{width:18px;height:18px;flex-shrink:0}
.client-nav{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.client-nav li{display:flex;align-items:center;gap:10px;height:32px;padding-inline:10px;border:1px solid var(--clear);border-radius:var(--r-item);font-size:13px;color:var(--text-muted)}
.client-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.client-nav .is-current{background:var(--surface);color:var(--accent);border-color:var(--border);box-shadow:var(--shadow-xs)}
.client-main{min-width:0;padding:20px 22px 24px}
.client-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.client-h{font-family:var(--font-display);font-size:17px;letter-spacing:-.01em;color:var(--text)}
.client-path{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}
.client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.set-card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-xs);padding-bottom:4px;min-width:0}
.set-card-head{padding:12px 16px 8px;font-size:12px;letter-spacing:.02em;color:var(--text-muted)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:6px 16px;border-top:1px solid var(--bg-panel-2)}
.set-label{font-size:13.5px;color:var(--text)}
.sw{position:relative;width:34px;height:20px;border-radius:var(--r-pill);background:var(--toggle-off);color:var(--text);flex-shrink:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--r-round);background:var(--knob);color:var(--text);box-shadow:var(--shadow-xs)}
.sw.is-on{background:var(--accent);color:var(--on-accent)}
.sw.is-on::after{transform:translateX(14px)}
.field{max-width:100%;font-family:var(--font-mono);font-size:12.5px;line-height:18px;color:var(--text);padding:4px 10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-field);min-width:72px;text-align:right;overflow-wrap:anywhere}
.seg{display:inline-flex;flex-shrink:0;padding:2px;background:var(--bg-panel-2);color:var(--text-muted);border-radius:var(--r-item)}
.seg span{padding:3px 11px;font-size:12.5px;line-height:18px;color:var(--text-muted);border-radius:var(--r-segment)}
.seg .is-sel{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.proof{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.seal{display:inline-flex;align-items:center;gap:12px;padding:9px 20px 9px 14px;border:1px solid var(--badge);border-radius:var(--r-card);color:var(--badge);max-width:100%}
.seal svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.seal-text{display:flex;flex-direction:column;line-height:1.3}
.seal-label{font-size:10.5px;letter-spacing:.08em;font-weight:var(--weight-label)}
.seal-main{font-size:15px;font-weight:var(--weight-medium)}
.features{padding-top:96px;padding-bottom:96px}
.features h2{max-width:760px}
.tabs,[role="tablist"]{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tab,[role="tab"]{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:8px 18px;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-pill);font-size:14px;line-height:20px;
  cursor:pointer;transition:border-color var(--speed) var(--ease);
}
.tab:hover,[role="tab"]:hover{border-color:var(--border-strong)}
.tab[aria-selected="true"],[role="tab"][aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tabpanel{margin-top:24px;min-width:0}
.panel-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.code{color:var(--text-muted)}
.c-c{color:var(--text-muted)}
.c-k,.c-t,.c-p{color:var(--text)}
.c-p{font-weight:var(--weight-medium)}
.panel-text{font-size:15px;line-height:1.85;color:var(--text-muted)}
.panel-text strong{color:var(--text);font-weight:var(--weight-medium)}
.panel-link{display:inline-block;margin-top:14px;font-size:14.5px;color:var(--accent)}
.panel-link:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.feature-scene{
  position:relative;isolation:isolate;overflow-x:clip;padding:48px;
  border-radius:var(--r-frame);background:linear-gradient(160deg,var(--sky-top),var(--sky-mid));color:var(--text);
}
.feature-scene .vista{inset:0;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid));color:var(--text)}
.feature-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.feature-layout>*{min-width:0}
.feature-layout .client{width:100%}
.feature-notes{padding:24px;background:var(--bg);color:var(--text-muted);border:1px solid var(--window-edge);border-radius:var(--r-card);box-shadow:var(--shadow-sm);font-size:15px;line-height:1.85}
.toc{
  position:sticky;top:16px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;
  padding:10px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-xs);
}
.toc a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:var(--r-btn);font-size:13px;color:var(--text-muted)}
.toc a:hover,.toc a[aria-current="location"]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-xs)}
.toc-static{position:static}
.chapter{scroll-margin-top:96px}
.faq-item{min-width:0;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.faq-item+.faq-item{margin-top:12px}
.faq-item summary{position:relative;list-style:none;padding:18px 48px 18px 20px;cursor:pointer;font-weight:var(--weight-medium)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:18px;color:var(--accent)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 20px 20px;color:var(--text-muted);line-height:1.85}
.term-card{border-top:3px solid var(--border-strong)}
.term-card dt{font-family:var(--font-display);font-size:21px;font-weight:var(--weight-normal)}
.term-card dd{margin:12px 0 0;color:var(--text-muted);line-height:1.85}
.term-key{display:block;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:6px}
.badge,.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:3px 9px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text-muted);font-size:11px;line-height:18px;overflow-wrap:anywhere;white-space:normal}
.badge-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.badge-recommend{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.badge-archived{background:var(--bg-panel-2);color:var(--text-muted);border-color:var(--border-strong)}
.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.client-card{display:flex;flex-direction:column}
.client-card.is-preferred{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.client-card-head{display:flex;align-items:flex-start;gap:14px}
.client-card-head>div{min-width:0}
.app-icon{width:56px;height:56px;flex-shrink:0}
.client-card h3{font-size:21px;margin-bottom:8px}
.client-card .card-actions{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.client-rev{display:block;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:12px}
[data-rev]:empty{display:none}
.post-card{display:flex;flex-direction:column;gap:16px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12px;color:var(--text-muted)}
.post-card h3{font-size:22px}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{margin:0;line-height:1.85}
.post-card .text-link{margin-top:auto}
.callout{
  min-width:0;margin:24px 0;padding:20px 22px;border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);line-height:1.85;
}
.callout p+p{margin-top:10px}
.callout-title{font-weight:var(--weight-medium)}
.callout-warning{border-left-color:var(--warn)}
.callout-error{border-left-color:var(--error)}
.callout-success{border-left-color:var(--success)}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:var(--r-card);-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;background:var(--surface);color:var(--text);text-align:left;font-size:14px}
.data-table caption{text-align:left;padding:14px 16px;color:var(--text-muted)}
.data-table th,.data-table td,.prose table th,.prose table td{
  min-width:7em;padding:14px 16px;border-bottom:1px solid var(--border);
  overflow-wrap:normal;word-break:normal;vertical-align:top;
}
.data-table th,.prose table th{background:var(--bg-panel);color:var(--text);font-weight:var(--weight-medium)}
.data-table tr:last-child td{border-bottom:0}
.data-table code,.prose table code{overflow-wrap:anywhere;white-space:normal}
.prose table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;
  border-collapse:collapse;border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--surface);color:var(--text);font-size:14px;
}
.article-download{
  display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:24px;
  border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-xs);
}
.article-download>div{min-width:0}
.article-download h2{font-size:24px;margin:0}
.article-download p{margin:8px 0 0;color:var(--text-muted)}
.dl-fab{
  position:fixed;right:max(var(--gutter),env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  z-index:var(--z-fab);display:inline-flex;align-items:center;justify-content:center;gap:12px;
  max-width:calc(100% - var(--gutter) * 2);min-height:56px;padding:12px 18px;
  border:1px solid var(--window-edge);border-radius:var(--r-card);background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-btn);
}
.dl-fab:hover{background:var(--accent-dark);color:var(--on-accent)}
.dl-fab svg{width:22px;height:22px;flex-shrink:0}
.dl-fab-copy{display:flex;flex-direction:column;line-height:1.4}
.dl-fab-title{font-size:14px;font-weight:var(--weight-medium)}
.dl-fab-note{font-size:11px}
.has-dl-fab .site-footer{padding-bottom:104px}
.preview-section{padding-top:72px;padding-bottom:72px}
.preview-section h2{margin-bottom:28px}
.preview-section h3{margin-bottom:14px}
.preview-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.palette-item{min-width:0;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface);color:var(--text)}
.palette-item code{display:block;padding:10px 12px;font-size:11px}
.swatch{display:block;min-height:62px;color:var(--text);border-bottom:1px solid var(--border)}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--bg-panel)}
.sw-panel2{background:var(--bg-panel-2)}
.sw-border{background:var(--border)}
.sw-border-strong{background:var(--border-strong)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}
.sw-muted{background:var(--text-muted)}
.sw-faint{background:var(--text-faint)}
.sw-success{background:var(--success)}
.sw-success-halo{background:var(--success-halo)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}
.sw-badge{background:var(--badge)}
.sw-surface{background:var(--surface)}
.sw-on-accent{background:var(--on-accent)}
.sw-dot{background:var(--chrome-dot)}
.sw-off{background:var(--toggle-off)}
.sw-knob{background:var(--knob)}
.sw-sky-top{background:var(--sky-top)}
.sw-sky-mid{background:var(--sky-mid)}
.sw-horizon{background:var(--sky-horizon)}
.sw-sun{background:var(--sun-glow)}
.sw-far{background:var(--ridge-far)}
.sw-mid{background:var(--ridge-mid)}
.sw-near{background:var(--ridge-near)}
.sw-snow{background:var(--snow)}
.sw-cap{background:var(--snow-cap)}
.sw-mist{background:var(--mist)}
.sw-edge{background:var(--window-edge)}
.sw-veil{background:var(--veil)}
.sw-clear{background:var(--clear)}
.type-sample>*+*{margin-top:20px}
.type-display{font-family:var(--font-display);font-size:var(--size-h1);line-height:1.16}
.type-mono{font-family:var(--font-mono);font-size:13px}
@media(max-width:900px){
  .client{width:calc(100% - 32px)}
  .client-body{grid-template-columns:52px minmax(0,1fr)}
  .client-app span,.client-nav .nav-label{display:none}
  .client-app{justify-content:center;padding:4px 0 12px}
  .client-nav li{justify-content:center;padding:0}
  .client-grid{grid-template-columns:minmax(0,1fr)}
  .client-path{display:none}
  .panel-split,.feature-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .feature-scene{padding:28px}
  .palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-download{flex-direction:column;align-items:stretch}
  .feature-scene{padding:20px}
  .feature-notes{padding:20px}
  .toc{position:static}
  .dl-fab{min-height:48px;padding:10px 14px}
  .dl-fab-note{display:none}
}
@media(max-width:560px){
  .stage{padding-top:32px}
  .client{width:calc(100% - 20px)}
  .client-main{padding:16px 14px 18px}
  .set-row{padding-inline:12px;gap:8px;flex-wrap:wrap}
  .seg span{padding:3px 8px}
  .features{padding-top:72px}
  .proof{gap:10px}
  .seal{padding:9px 12px;gap:8px}
  .seal-main{font-size:13px}
  .seal-label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .tab,[role="tab"]{transition:none}
}