.tabs { min-width:0; }
.tabs [role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tabs [role="tab"] {
  min-height:44px; padding:11px 20px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--panel); color:var(--text-soft);
  font-weight:var(--weight-semibold); text-align:left;
}
.tabs [role="tab"]:hover { background:var(--panel-2); color:var(--text); }
.tabs [role="tab"][aria-selected="true"] {
  background:var(--accent-tint); color:var(--accent-dark); border-color:var(--accent-lip);
}
.tabs [role="tabpanel"] { min-width:0; scroll-margin-top:calc(var(--bar-h) + 24px); }
.feature-tabs {
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px; align-items:start;
}
.feature-tabs [role="tablist"] { display:flex; flex-direction:column; gap:0; }
.feature-tabs [role="tab"] {
  position:relative; display:block; width:100%; padding:24px 24px 24px 62px;
  border:0; border-bottom:1px solid var(--border); border-radius:0;
  background:var(--clear); color:var(--text);
}
.feature-tabs [role="tab"]::before {
  content:""; position:absolute; left:24px; top:28px; width:20px; height:20px;
  border:2px solid var(--border-strong); border-radius:var(--r-round);
}
.feature-tabs [role="tab"][aria-selected="true"] {
  background:var(--panel); color:var(--text); border-radius:var(--r-card);
  border-bottom-color:var(--clear); box-shadow:var(--shadow-soft);
}
.feature-tabs [role="tab"][aria-selected="true"]::before {
  content:"✓"; display:grid; place-items:center; font-size:var(--fs-xs);
  background:var(--accent); color:var(--white); border-color:var(--accent);
}
.tab__title { display:block; font-size:var(--fs-lead); }
.tab__sub { display:block; font-weight:var(--weight-normal); font-size:var(--fs-label); color:var(--muted); margin-top:6px; }
.feature-tray {
  padding:36px; border:1px solid var(--wash-edge); border-radius:var(--r-tray);
  background:linear-gradient(135deg,var(--wash-1),var(--wash-2)); color:var(--text);
}
.feature-tray--teal { background:linear-gradient(135deg,var(--success-tint),var(--panel)); color:var(--text); border-color:var(--border); }
.mini-ui {
  margin-bottom:28px; padding:24px; border:1px solid var(--border); border-radius:var(--r-window);
  background:var(--panel); color:var(--text); box-shadow:var(--shadow-panel);
}
.mini-ui__bar { font-size:var(--fs-small); font-weight:var(--weight-semibold); padding-bottom:14px; border-bottom:1px solid var(--border); }
.mini-ui__row { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:16px; font-size:var(--fs-label); }
.feature-tray p { line-height:1.85; color:var(--text-soft); margin-bottom:0; }
.toc {
  position:sticky; top:calc(var(--bar-h) + 12px); z-index:10; display:flex; flex-wrap:wrap; gap:8px;
  overflow-x:visible; max-width:100%; padding:10px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs);
  overscroll-behavior-inline:contain;
}
.toc a { display:block; flex-shrink:0; padding:9px 16px; border-radius:var(--r-pill); font-size:var(--fs-label); }
.toc a:hover,.toc a[aria-current="location"] { background:var(--accent-tint); color:var(--accent-dark); }
.faq { border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); }
.faq+.faq { margin-top:12px; }
.faq summary { position:relative; padding:23px 60px 23px 26px; cursor:pointer; font-weight:var(--weight-semibold); list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:26px; top:21px; font-size:var(--fs-h3); color:var(--accent-dark); }
.faq[open] summary::after { content:"−"; }
.faq__answer { padding:0 26px 24px; color:var(--muted); line-height:1.85; }
.faq__answer p:last-child { margin-bottom:0; }
.term-card { position:relative; border-top:3px solid var(--success); }
.term-card__category { font-size:var(--fs-xs); color:var(--success-ink); margin-bottom:12px; }
.term-card dt { font-size:var(--fs-h3); font-weight:var(--weight-bold); margin-bottom:12px; }
.term-card dd { margin:0; color:var(--muted); }
.client-card { position:relative; }
.client-card--featured { border-color:var(--accent-lip); box-shadow:var(--shadow-panel); }
.client-card__head { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-bottom:20px; }
.client-card__head h3 { margin:0; }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.client-card__version { display:block; color:var(--muted); font-family:var(--font-mono); font-size:var(--fs-small); margin-top:6px; }
.badge,.tag {
  display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 11px;
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:var(--weight-semibold);
  background:var(--panel-2); color:var(--text-soft); overflow-wrap:anywhere;
}
.badge--first { background:var(--accent-tint); color:var(--accent-dark); }
.badge--recommended { background:var(--success-tint); color:var(--success-ink); }
.badge--retired { background:var(--warn-tint); color:var(--warn-ink); }
.tag { font-weight:var(--weight-medium); border:1px solid var(--border); }
.article-card { display:flex; flex-direction:column; }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; font-size:var(--fs-small); color:var(--muted); }
.article-card h3 { font-size:var(--fs-h3); line-height:1.5; }
.article-card p { color:var(--muted); }
.article-card__link { margin-top:auto; padding-top:16px; color:var(--accent-dark); font-size:var(--fs-label); font-weight:var(--weight-semibold); }
.callout {
  margin:28px 0; padding:24px 28px; border:1px solid var(--border);
  border-left:4px solid var(--success); border-radius:var(--r-md);
  background:var(--success-tint); color:var(--text-soft);
}
.callout--warn { background:var(--warn-tint); color:var(--text-soft); border-left-color:var(--warn); }
.callout--important { background:var(--accent-tint); color:var(--text-soft); border-left-color:var(--accent); }
.callout p:last-child { margin-bottom:0; }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:var(--r-md); -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--fs-label); }
.data-table :is(th,td),.prose table :is(th,td),.article-body table :is(th,td) {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border);
  overflow-wrap:normal; word-break:normal; vertical-align:top;
}
.data-table th,.prose table th,.article-body table th { background:var(--panel-2); color:var(--text); font-weight:var(--weight-semibold); }
.data-table td,.prose table td,.article-body table td { background:var(--panel); color:var(--text-soft); }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; min-width:0; border-collapse:collapse; text-align:left;
}
.download-end {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding:32px; border:1px solid var(--wash-edge); border-radius:var(--r-card);
  background:linear-gradient(135deg,var(--wash-2),var(--accent-tint)); color:var(--text);
}
.download-end__copy { min-width:0; flex:1 1 260px; }
.download-end__copy h2 { font-size:var(--fs-h3); margin-bottom:8px; }
.download-end__copy p { margin-bottom:0; color:var(--muted); }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:30;
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px);
  min-height:60px; padding:12px 20px; background:var(--panel); color:var(--text);
  border:1px solid var(--accent-lip); border-radius:var(--r-pill); box-shadow:var(--shadow-panel);
}
.dl-fab__icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:var(--r-round); background:var(--accent-tint); color:var(--accent-dark); }
.dl-fab svg { width:20px; height:20px; }
.dl-fab b { display:block; font-size:var(--fs-label); }
.dl-fab small { display:block; color:var(--muted); font-size:var(--fs-xs); }
.dl-fab:hover { border-color:var(--accent); }
.stage { position:relative; margin:0; height:580px; min-width:0; }
.tray {
  position:absolute; inset:0; overflow:hidden; border-radius:var(--r-tray);
  background:linear-gradient(135deg,var(--wash-1) 0%,var(--wash-2) 70%); color:var(--text);
  border:1px solid var(--wash-edge);
}
.tray::before,.tray::after { content:""; position:absolute; inset:0; }
.tray::before { background:var(--wash-sheen); clip-path:polygon(10% 0,34% 0,0 52%,0 16%); }
.tray::after { background:var(--wash-sheen-2); clip-path:polygon(40% 0,45% 0,0 70%,0 62%); }
.win {
  position:absolute; top:40px; left:40px; width:min(580px,calc(100% - 80px));
  background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-window);
  box-shadow:var(--shadow-window); overflow:hidden;
}
.win__bar { display:flex; align-items:center; height:40px; padding-left:16px; border-bottom:1px solid var(--border-soft); }
.win__app { display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-small); font-weight:var(--weight-semibold); }
.win__app i { width:14px; height:14px; border-radius:var(--r-mini); background:var(--accent-tint); border:1.5px solid var(--accent); }
.win__ctrl { margin-left:auto; display:flex; }
.win__ctrl span { width:44px; height:40px; display:grid; place-items:center; color:var(--muted); font-size:var(--fs-small); }
.win__menu { display:flex; flex-wrap:wrap; gap:2px; padding:5px 10px; border-bottom:1px solid var(--border-soft); font-size:var(--fs-small); color:var(--text-soft); }
.win__menu span { padding:4px 10px; border-radius:var(--r-sm); }
.win__menu .on { background:var(--panel-2); color:var(--text); }
.win__body { padding:22px 28px 8px; }
.win__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; }
.win__title { margin:0; font-size:20px; font-weight:var(--weight-bold); letter-spacing:-.01em; }
.win__hint { font-size:var(--fs-caption); color:var(--muted); }
.todo { list-style:none; margin:12px 0 0; padding:0; }
.todo li { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; padding:10px 0; border-top:1px solid var(--border-soft); }
.tick { width:20px; height:20px; margin-top:1px; border-radius:var(--r-round); border:2px solid currentColor; display:grid; place-items:center; flex-shrink:0; }
.tick svg { width:10px; height:10px; }
.tick .ck { fill:none; stroke:var(--white); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tick--coral { color:var(--accent); background:var(--accent-tint); }
.tick--amber { color:var(--warn); background:var(--warn-tint); }
.tick--teal { color:var(--success); background:var(--success-tint); }
.tick.is-done { background:currentColor; }
.todo__t { font-size:var(--fs-label); font-weight:var(--weight-semibold); line-height:1.4; color:var(--text); }
.todo__t em { font-style:normal; color:var(--muted); margin:0 5px; font-weight:var(--weight-normal); }
.todo__s { margin-top:2px; font-size:var(--fs-caption); line-height:1.5; color:var(--muted); }
.todo .done .todo__t { color:var(--muted); }
.win__status { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 16px; background:var(--panel-2); color:var(--text-soft); border-top:1px solid var(--border); }
.select { display:inline-flex; align-items:center; gap:26px; min-height:28px; padding:4px 12px; background:var(--panel); color:var(--text-soft); border:1px solid var(--border-strong); border-radius:var(--r-sm); font-size:var(--fs-xs); }
.select svg { width:10px; height:10px; color:var(--muted); }
.phone {
  position:absolute; right:-26px; bottom:-34px; width:204px; height:408px; padding:9px;
  border-radius:var(--r-phone); background:linear-gradient(160deg,var(--bezel-hi),var(--bezel)); color:var(--text);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-phone); transform:rotate(-6deg);
}
.phone::before,.phone::after { content:""; position:absolute; right:-3px; width:3px; border-radius:var(--r-mini); background:var(--border-strong); }
.phone::before { top:92px; height:46px; }
.phone::after { top:150px; height:28px; }
.phone__screen { position:relative; height:100%; overflow:hidden; display:flex; flex-direction:column; background:var(--panel); color:var(--text); border-radius:var(--r-screen); border:1px solid var(--border); }
.phone__status { position:relative; height:28px; display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:0 18px; flex-shrink:0; }
.phone__cam { position:absolute; left:50%; top:9px; width:9px; height:9px; margin-left:-4.5px; border-radius:var(--r-round); background:var(--camera); }
.sig { display:flex; align-items:flex-end; gap:1.5px; height:8px; }
.sig i { width:2px; background:var(--text-soft); border-radius:var(--r-mini); }
.sig i:nth-child(1) { height:3px; }
.sig i:nth-child(2) { height:5px; }
.sig i:nth-child(3) { height:8px; }
.bat { width:14px; height:7px; border-radius:var(--r-mini); border:1.2px solid var(--text-soft); position:relative; }
.bat::after { content:""; position:absolute; inset:1px 3px 1px 1px; background:var(--text-soft); border-radius:var(--r-mini); }
.phone__bar { display:flex; align-items:center; gap:10px; padding:4px 14px 12px; }
.phone__bar svg { width:16px; height:16px; color:var(--text-soft); }
.phone__bar b { font-family:var(--font-display); font-size:var(--fs-nav); font-weight:var(--weight-bold); letter-spacing:-.01em; }
.phone__bar .add { margin-left:auto; }
.drawer { margin:0 10px; padding:4px; background:var(--panel-2); color:var(--text-soft); border-radius:var(--r-md); }
.drawer__item { display:flex; align-items:center; gap:9px; padding:10px; border-radius:var(--r-md); font-size:var(--fs-caption); font-weight:var(--weight-semibold); }
.drawer__item svg { width:15px; height:15px; color:var(--muted); }
.drawer__item.on { background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift); }
.drawer__item.on svg { color:var(--accent); }
.vpn { margin:10px 10px 0; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); border-radius:var(--r-md); }
.vpn b { display:block; font-size:var(--fs-caption); font-weight:var(--weight-semibold); }
.vpn span { display:block; font-size:var(--fs-xs); color:var(--muted); }
.switch { position:relative; width:32px; height:19px; border-radius:var(--r-pill); background:var(--accent); color:var(--white); flex-shrink:0; }
.switch::after { content:""; position:absolute; top:2.5px; right:2.5px; width:14px; height:14px; border-radius:var(--r-round); background:var(--white); box-shadow:var(--shadow-xs); }
.phone__fill { flex:1; }
.phone__foot { height:56px; display:flex; align-items:center; padding:0 14px; border-top:1px solid var(--border-soft); background:var(--panel-2); color:var(--muted); font-size:var(--fs-xs); }
.fab { position:absolute; right:14px; bottom:30px; width:50px; height:50px; border-radius:var(--r-round); display:grid; place-items:center; background:var(--accent); color:var(--white); box-shadow:var(--shadow-fab); }
.fab svg { width:20px; height:20px; }
.fab .pw { fill:none; stroke:var(--white); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.spark { position:absolute; top:-13px; right:150px; width:22px; height:22px; color:var(--warn); }
.okdot { position:absolute; left:-12px; bottom:70px; width:22px; height:22px; border-radius:var(--r-round); display:grid; place-items:center; background:var(--success-tint); color:var(--success-ink); border:1px solid var(--panel); }
.okdot svg { width:11px; height:11px; }
.okdot .ck { fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.band { position:relative; height:200px; margin-top:-6px; overflow-x:clip; }
.band svg { position:absolute; inset:0; width:100%; height:100%; }
.band__a { fill:var(--teal-band-1); }
.band__b { fill:var(--teal-band-2); }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:16px; }
.swatch { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--panel); color:var(--text); }
.swatch__paint { display:block; height:66px; border-bottom:1px solid var(--border); }
.swatch code { display:block; padding:12px; font-size:var(--fs-xs); }
.sw-bg { background:var(--bg); }
.sw-panel { background:var(--panel); }
.sw-panel-2 { background:var(--panel-2); }
.sw-border { background:var(--border); }
.sw-border-soft { background:var(--border-soft); }
.sw-border-strong { background:var(--border-strong); }
.sw-accent { background:var(--accent); }
.sw-accent-dark { background:var(--accent-dark); }
.sw-accent-tint { background:var(--accent-tint); }
.sw-accent-lip { background:var(--accent-lip); }
.sw-text { background:var(--text); }
.sw-text-soft { background:var(--text-soft); }
.sw-muted { background:var(--muted); }
.sw-faint { background:var(--faint); }
.sw-success { background:var(--success); }
.sw-success-ink { background:var(--success-ink); }
.sw-success-tint { background:var(--success-tint); }
.sw-warn { background:var(--warn); }
.sw-warn-ink { background:var(--warn-ink); }
.sw-warn-tint { background:var(--warn-tint); }
.sw-error { background:var(--error); }
.sw-white { background:var(--white); }
.sw-wash-1 { background:var(--wash-1); }
.sw-wash-2 { background:var(--wash-2); }
.sw-wash-edge { background:var(--wash-edge); }
.sw-wash-sheen { background:var(--wash-sheen); }
.sw-wash-sheen-2 { background:var(--wash-sheen-2); }
.sw-teal-band-1 { background:var(--teal-band-1); }
.sw-teal-band-2 { background:var(--teal-band-2); }
.sw-glow-coral { background:var(--glow-coral); }
.sw-glow-teal { background:var(--glow-teal); }
.sw-bezel-hi { background:var(--bezel-hi); }
.sw-bezel { background:var(--bezel); }
.sw-camera { background:var(--camera); }
.sw-veil { background:var(--veil); }
.sw-clear { background:var(--clear); }
.preview-type { margin-bottom:28px; }
.preview-type .h1 { margin-top:0; }
.preview-static-nav { padding:20px var(--gutter); background:var(--panel); color:var(--text); border-bottom:1px solid var(--border); }
.preview-static-nav ul { list-style:none; margin:0; padding:0; }
.preview-static-nav a { display:block; min-height:44px; padding:10px 12px; }
.preview-menu { display:none; }
.preview-menu>summary { list-style:none; }
.preview-menu>summary::-webkit-details-marker { display:none; }
@media (max-width:1280px) {
  .preview-menu { display:block; }
  .preview-menu .preview-static-nav { position:absolute; top:var(--bar-h); left:0; right:0; max-height:calc(100dvh - var(--bar-h)); overflow-y:auto; }
}
@media (max-width:1080px) {
  .stage { max-width:720px; width:100%; margin-inline:auto; }
  .feature-tabs { gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
}
@media (max-width:640px) {
  .feature-tabs { display:block; }
  .feature-tabs [role="tablist"] { margin-bottom:20px; }
  .feature-tabs [role="tab"] { padding-block:18px; }
  .feature-tabs [role="tab"]::before { top:23px; }
  .feature-tray { padding:24px; }
  .toc { border-radius:var(--r-md); }
  .stage { height:auto; padding:20px 20px 150px; }
  .win { position:relative; top:auto; left:auto; width:100%; }
  .win__body { padding:18px 18px 6px; }
  .win__ctrl span { width:28px; }
  .win__menu { gap:0; padding-inline:6px; }
  .win__menu span { padding-inline:5px; font-size:var(--fs-xs); }
  .win__hint { display:none; }
  .todo li { gap:8px; }
  .todo__t { font-size:var(--fs-small); }
  .todo__s { font-size:var(--fs-xs); }
  .phone { width:150px; height:300px; right:6px; bottom:-20px; padding:7px; transform:none; }
  .phone__bar { padding-inline:10px; gap:6px; }
  .phone__bar b { font-size:var(--fs-small); }
  .drawer__item { padding:7px; gap:5px; font-size:var(--fs-xs); }
  .vpn { padding:7px 9px; gap:4px; }
  .vpn span { display:none; }
  .phone__foot { height:44px; }
  .fab { width:40px; height:40px; bottom:22px; }
  .spark { right:40px; }
  .okdot { left:0; }
  .dl-fab { right:20px; bottom:16px; padding:10px 16px; }
  .download-end { padding:24px; }
  .callout { padding:20px; }
  .band { height:130px; }
}