.tabs {min-width:0}
.tab-list,[role="tablist"] {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tab-list [role="tab"] {
  min-height:44px;padding:10px 20px;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--clear);color:var(--text-muted);
  font-weight:var(--weight-medium);
}
.tab-list [role="tab"][aria-selected="true"] {background:var(--text);color:var(--bg);border-color:var(--text)}
.tab-list [role="tab"]:hover {border-color:var(--text)}
.tab-panel {padding-top:32px;min-width:0}
.feature-station {display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.feature-tabs[role="tablist"] {display:flex;flex-direction:column;align-items:stretch;gap:8px}
.feature-tabs [role="tab"] {
  position:relative;padding:15px 0 15px 22px;min-height:52px;
  border:0;background:var(--clear);color:var(--text-muted);
  text-align:left;font-size:18px;
}
.feature-tabs [role="tab"][aria-selected="true"] {font-weight:var(--weight-display);background:var(--accent);color:var(--bg-panel)}
.feature-tabs [role="tab"][aria-selected="true"]::before {
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;
  border-radius:var(--r-pill);background:var(--accent);
}
.feature-panel {min-width:0}
.feature-stage {
  padding:40px;border-radius:var(--r-plate);
  background:var(--mist);color:var(--text);
}
.feature-stage.is-olive {background:var(--olive);color:var(--text)}
.feature-stage.is-wine {background:var(--wine);color:var(--bg-panel)}
.settings-window {
  padding:24px;border-radius:var(--r-panel);background:var(--bg-panel);color:var(--text);
}
.settings-window h3 {margin:0 0 24px;font-size:16px}
.settings-path {font-family:var(--font-mono);color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}
.setting-line {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;border-top:1px solid var(--border)}
.setting-value {font-size:14px;font-weight:var(--weight-semibold);text-align:right}
.feature-explanation {margin-top:28px;color:var(--text-muted)}
.toc {
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  margin-bottom:40px;padding:20px 24px;border-radius:var(--r-card);
  background:var(--bg-panel-2);color:var(--text);
}
.toc a {display:block;padding-block:8px;font-size:14px}
.toc a:hover,.toc a[aria-current="location"] {color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.toc.is-sticky {position:sticky;top:16px;z-index:2}
.faq-item {border-bottom:1px solid var(--border);padding-block:8px}
.faq-item summary {
  position:relative;list-style:none;padding:22px 40px 22px 0;
  font-size:18px;font-weight:var(--weight-semibold);cursor:pointer;
}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"+";position:absolute;right:6px;top:20px;font-size:24px;font-weight:var(--weight-medium)}
.faq-item[open] summary::after {content:"−"}
.faq-answer {padding:0 40px 24px 0;color:var(--text-muted)}
.faq-answer > :last-child {margin-bottom:0}
.term-card,.client-card,.article-card {
  min-width:0;padding:32px;border-radius:var(--r-card);
  background:var(--bg-panel);color:var(--text);
}
.term-card h3,.client-card h3,.article-card h3 {margin:14px 0 16px}
.term-card p,.client-card p,.article-card p {color:var(--text-muted)}
.term-card p:last-child,.article-card p:last-child {margin-bottom:0}
.term-name {font-family:var(--font-mono);font-size:14px;color:var(--text-muted)}
.client-top {display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.client-top h3 {margin:0}
.app-logo {width:56px;height:56px;flex-shrink:0}
.client-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.client-meta {font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.client-card.is-retired {border:1px solid var(--border-strong)}
.badge,.tag {
  display:inline-flex;align-items:center;gap:7px;
  max-width:100%;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--bg-panel-2);color:var(--text-muted);
  font-size:12px;font-weight:var(--weight-semibold);line-height:1.5;
  overflow-wrap:anywhere;white-space:normal;vertical-align:middle;
}
.badge-primary {background:var(--accent);color:var(--bg-panel)}
.badge-recommended {background:var(--mist);color:var(--text)}
.badge-retired {background:var(--bg-panel-2);color:var(--text-muted);border:1px solid var(--border-strong)}
.tag::before {content:"";width:6px;height:6px;border-radius:var(--r-circle);background:var(--wine);flex-shrink:0}
.tag.is-mist::before {background:var(--mist)}
.tag.is-olive::before {background:var(--olive)}
.article-meta {display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-muted)}
.article-card h3 {font-size:22px}
.article-card h3 a:hover {text-decoration:underline;text-underline-offset:5px}
.article-link {font-size:14px;font-weight:var(--weight-semibold)}
.callout {
  margin:32px 0;padding:24px 28px;border-left:3px solid var(--accent);
  border-radius:0 var(--r-panel) var(--r-panel) 0;
  background:var(--bg-panel-2);color:var(--text);
}
.callout p:last-child {margin-bottom:0}
.callout-title {display:block;margin-bottom:10px;font-weight:var(--weight-bold)}
.table-scroll {max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em;padding:16px 20px;border-bottom:1px solid var(--border);
  vertical-align:top;word-break:normal;overflow-wrap:normal;white-space:normal;
}
.data-table th,.prose table th {background:var(--bg-panel-2);color:var(--text);font-weight:var(--weight-semibold)}
.data-table td,.prose table td {background:var(--bg-panel);color:var(--text)}
.prose table {
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;min-width:0;border-collapse:collapse;margin-block:32px;
}
.data-table code,.prose table code {overflow-wrap:anywhere;white-space:normal}
.dl-fab {
  position:fixed;right:24px;bottom:24px;z-index:var(--layer-fab);
  display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);
  min-height:56px;padding:14px 22px;border-radius:var(--r-pill);
  background:var(--text);color:var(--bg);
  font-size:14px;font-weight:var(--weight-semibold);
}
.dl-fab:hover {background:var(--text-hover);color:var(--bg)}
.dl-fab svg {width:20px;height:20px;flex-shrink:0}
.article-download {
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:64px;padding:32px;border-radius:var(--r-card);
  background:var(--bg-panel-2);color:var(--text);
}
.article-download h2 {font-size:24px;margin:0 0 10px}
.article-download p {margin:0;color:var(--text-muted)}
.article-download-copy {flex:1 1 240px;min-width:0}
.cards {position:relative;height:480px;margin-top:34px;overflow:hidden}
.cards-track {position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:12px}
.config-card {position:relative;flex:none;width:37vw;height:480px;border-radius:var(--r-plate);overflow:hidden}
.card-mist {background:var(--mist);color:var(--text);--plate:var(--mist-mid)}
.card-olive {background:var(--olive);color:var(--text);--plate:var(--olive-mid)}
.card-wine {background:var(--wine);color:var(--bg-panel);--plate:var(--wine-mid)}
.stack {position:absolute;top:54px}
.stack::before {
  content:"";position:absolute;left:20px;right:20px;top:-14px;height:80px;
  border-radius:var(--r-stack);background:var(--plate);
}
.stack > * {position:relative}
.card-mist .stack {width:360px;right:max(16px,calc((31.5vw - 372px) / 2))}
.card-olive .stack {width:340px;left:calc(50% - 170px)}
.card-wine .stack {width:200px;left:max(24px,calc((31.5vw - 212px) / 2))}
.card-wine .stack::before {left:18px;right:18px;border-radius:var(--r-plate)}
.sw {
  position:relative;flex:none;width:30px;height:17px;border-radius:var(--r-pill);
  background:var(--sw-off,var(--border-strong));display:inline-block;
}
.sw::after {
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:var(--r-circle);background:var(--sw-knob,var(--bg-panel));
}
.sw.is-on {background:var(--sw-on,var(--accent))}
.sw.is-on::after {left:15px}
.win {
  height:340px;display:flex;flex-direction:column;border-radius:var(--r-panel);
  background:var(--mist-deep);color:var(--mist-paper);overflow:hidden;
  --sw-on:var(--mist);--sw-off:var(--mist-line);--sw-knob:var(--mist-paper);
}
.win-bar {
  height:32px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px 0 14px;background:var(--mist-ink);color:var(--mist-paper);
}
.win-title {font-family:var(--font-mono);font-size:11.5px;color:var(--mist-soft);letter-spacing:0.02em}
.win-ctrl {display:flex;gap:16px;color:var(--mist-soft);font-size:12px}
.win-menu {
  height:34px;flex:none;display:flex;align-items:center;gap:20px;padding-inline:14px;
  border-bottom:1px solid var(--mist-line);font-size:12.5px;font-weight:var(--weight-medium);
}
.win-list {flex:1;padding:10px 12px 8px;min-height:0}
.win-head,.win-row {display:grid;grid-template-columns:34px 1.3fr 1.3fr 34px 1fr;column-gap:10px;align-items:center;padding-inline:8px}
.win-head {height:24px;font-size:11px;color:var(--mist-paper);border-bottom:1px solid var(--mist-line);margin-bottom:6px}
.win-row {height:29px;border-radius:var(--r-small)}
.win-row i {display:block;height:6px;border-radius:var(--r-pill);background:var(--mist-line)}
.win-row i:nth-child(1) {width:80%}
.win-row i:nth-child(2) {width:74%}
.win-row i:nth-child(3) {width:86%}
.win-row i:nth-child(4) {width:70%}
.win-row i:nth-child(5) {width:56%}
.win-row:nth-child(odd) i:nth-child(2) {width:58%}
.win-row:nth-child(odd) i:nth-child(3) {width:68%}
.win-row:nth-child(4) i:nth-child(5) {width:72%}
.win-row.is-sel {background:var(--mist-row);color:var(--mist-paper)}
.win-row.is-sel i {background:var(--mist-soft)}
.win-foot {
  flex:none;display:grid;gap:9px;padding:12px 14px;
  background:var(--mist-ink);color:var(--mist-paper);border-top:1px solid var(--mist-line);font-size:11.5px;
}
.ctl {display:flex;align-items:center;gap:8px}
.ctl-k {color:var(--mist-soft);flex-shrink:0}
.ctl-sel {
  display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:2px 10px;
  border-radius:var(--r-small);background:var(--mist-deep);color:var(--mist-paper);
  border:1px solid var(--mist-line);font-weight:var(--weight-medium);
}
.ctl-tun {margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:var(--weight-medium)}
.code {height:340px;border-radius:var(--r-panel);background:var(--olive-deep);color:var(--cream);overflow:hidden}
.code-bar {
  height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 10px;
  background:var(--olive-ink);color:var(--cream);font-family:var(--font-mono);
}
.code-tab {font-size:11.5px;color:var(--cream);background:var(--olive-deep);border-radius:var(--r-tiny);padding:3px 9px}
.code-path {font-size:11px;color:var(--olive-soft);letter-spacing:0.04em}
.code-body {counter-reset:ln;padding:14px 16px 0 0;font-family:var(--font-mono);font-size:12px;line-height:1.62;color:var(--olive-soft);overflow-x:auto}
.code-body .ln {display:block;white-space:pre}
.code-body .ln::before {counter-increment:ln;content:counter(ln);display:inline-block;width:34px;padding-right:14px;text-align:right;color:var(--olive-soft)}
.code-body .k,.code-body .v {color:var(--olive-soft)}
.code-body .s {color:var(--cream);font-weight:var(--weight-semibold)}
.phone {
  height:396px;padding:12px 14px;border-radius:var(--r-phone);
  background:var(--paper);color:var(--text);
  --sw-on:var(--accent);--sw-off:var(--border-strong);--sw-knob:var(--bg-panel);
}
.phone-cam {width:9px;height:9px;border-radius:var(--r-circle);background:var(--text);margin:0 auto}
.phone-bar {display:flex;align-items:center;gap:9px;margin-top:16px}
.phone-bar span {font-size:15px;font-weight:var(--weight-bold);letter-spacing:-0.01em}
.phone-sec {margin:18px 0 2px;font-size:11px;font-weight:var(--weight-semibold);color:var(--accent);letter-spacing:0.02em}
.opt {display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:10px;border-bottom:1px solid var(--border)}
.opt b {display:block;font-size:12.5px;font-weight:var(--weight-semibold);line-height:1.4}
.opt small {display:block;font-size:10.5px;color:var(--text-muted);line-height:1.45;margin-top:1px}
.swatch-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.swatch {min-width:0}
.swatch-chip {height:76px;border-radius:var(--r-panel);border:1px solid var(--border);margin-bottom:8px}
.swatch code {font-size:12px}
.swatch-bg {background:var(--bg)}
.swatch-panel {background:var(--bg-panel)}
.swatch-panel2 {background:var(--bg-panel-2)}
.swatch-border {background:var(--border)}
.swatch-border-strong {background:var(--border-strong)}
.swatch-accent {background:var(--accent)}
.swatch-accent-dark {background:var(--accent-dark)}
.swatch-text {background:var(--text)}
.swatch-hover {background:var(--text-hover)}
.swatch-muted {background:var(--text-muted)}
.swatch-success {background:var(--success)}
.swatch-warn {background:var(--warn)}
.swatch-error {background:var(--error)}
.swatch-mist {background:var(--mist)}
.swatch-mist-mid {background:var(--mist-mid)}
.swatch-mist-deep {background:var(--mist-deep)}
.swatch-mist-ink {background:var(--mist-ink)}
.swatch-mist-row {background:var(--mist-row)}
.swatch-mist-line {background:var(--mist-line)}
.swatch-mist-soft {background:var(--mist-soft)}
.swatch-mist-paper {background:var(--mist-paper)}
.swatch-olive {background:var(--olive)}
.swatch-olive-mid {background:var(--olive-mid)}
.swatch-olive-deep {background:var(--olive-deep)}
.swatch-olive-ink {background:var(--olive-ink)}
.swatch-olive-dim {background:var(--olive-dim)}
.swatch-olive-soft {background:var(--olive-soft)}
.swatch-cream {background:var(--cream)}
.swatch-wine {background:var(--wine)}
.swatch-wine-mid {background:var(--wine-mid)}
.swatch-paper {background:var(--paper)}
.swatch-clear {background:var(--clear)}
.sample-row {display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-block:24px}
.type-sample-display {font-family:var(--font-display);font-size:var(--size-h1);font-weight:var(--weight-display);line-height:1.15}
.preview-note {font-size:14px;color:var(--text-muted)}
@media (max-width:960px) {
  .feature-station {grid-template-columns:170px minmax(0,1fr);gap:24px}
  .feature-stage {padding:28px}
}
@media (max-width:760px) {
  .cards {height:auto;overflow:visible;margin-top:30px}
  .cards-track {position:static;transform:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 8px}
  .config-card {width:calc(100vw - 40px);height:440px;scroll-snap-align:center}
  .card-mist .stack,.card-olive .stack {left:16px;right:16px;width:auto}
  .card-wine .stack {left:calc(50% - 100px)}
  .win-head,.win-row {grid-template-columns:30px 1.2fr 1.2fr 30px 1fr;column-gap:8px}
  .code-body {font-size:11px}
}
@media (max-width:640px) {
  .feature-station {grid-template-columns:minmax(0,1fr);gap:24px}
  .feature-tabs[role="tablist"] {flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .feature-tabs [role="tab"] {font-size:15px;min-height:44px;padding:10px 0 10px 12px}
  .feature-tabs [role="tab"][aria-selected="true"]::before {top:14px;bottom:14px}
  .feature-stage {padding:20px}
  .settings-window {padding:18px}
  .setting-line {flex-wrap:wrap}
  .setting-value {text-align:left}
  .client-card,.article-card,.term-card {padding:24px}
  .toc {padding:16px 20px;gap:4px 20px}
  .faq-item summary {font-size:16px}
  .callout {padding:20px}
  .dl-fab {right:20px;bottom:20px;padding:12px 18px}
  .article-download {padding:24px}
}