.tab-set { min-width: 0; }
.segmented-tabs,[role="tablist"].segmented-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); box-shadow: var(--shadow-low); }
.segmented-tabs [role="tab"] { min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--radius-pill); background: var(--clear); color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--weight-semibold); }
.segmented-tabs [role="tab"]:hover { background: var(--bg-panel); color: var(--text); }
.segmented-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-low); }
[role="tabpanel"] { min-width: 0; }
.feature-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px; border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); }
.feature-copy p { margin-top: 18px; color: var(--text-muted); line-height: 1.9; }
.feature-copy .text-link { display: inline-block; margin-top: 22px; }
.field-chips,.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.field-chip { display: inline-block; max-width: 100%; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.mini-stage { position: relative; min-height: 290px; isolation: isolate; }
.mini-back { position: absolute; inset: 0 0 45px 48px; padding: 24px; border: 1px solid var(--frame-tint-soft); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-low); }
.mini-front { position: relative; margin: 45px 30px 0 0; padding: 24px; border: 1px solid var(--frame-tint); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-mid); z-index: 1; }
.mini-title { margin-bottom: 16px; font-weight: var(--weight-bold); font-size: var(--fs-label); }
.mini-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding-block: 10px; border-bottom: 1px solid var(--bg-panel-2); font-size: var(--fs-sm); }
.mini-line:last-child { border-bottom: 0; }
.toc { position: sticky; top: 16px; z-index: 10; display: flex; gap: 8px; align-items: center; overflow-x: auto; max-width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); box-shadow: var(--shadow-low); overscroll-behavior-x: contain; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; padding: 10px 16px; border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--fs-label); }
.toc a:hover,.toc a[aria-current="location"] { background: var(--accent-tint); color: var(--accent-dark); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-low); }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary { position: relative; min-height: 64px; padding: 20px 56px 20px 24px; list-style: none; cursor: pointer; font-weight: var(--weight-semibold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 18px; color: var(--accent); font-size: var(--fs-subtitle); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); }
.faq-answer p + p { margin-top: 12px; }
.term-card { border-top: 3px solid var(--accent); }
.term-card dt { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--fs-subtitle); }
.term-card dd { margin: 14px 0 0; color: var(--text-muted); }
.term-category { margin-bottom: 12px; color: var(--accent); font-size: var(--fs-xs); font-weight: var(--weight-semibold); }
.badge-pill,.tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.badge-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.badge-recommended { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-ring); }
.badge-retired { background: var(--bg-panel-2); color: var(--text-muted); border-color: var(--border); }
.download-card { position: relative; }
.download-card.is-primary { border-color: var(--accent-ring); box-shadow: var(--shadow-hi); }
.download-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.download-card-head h3 { font-size: var(--fs-h2); }
.download-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; color: var(--text-muted); font-size: var(--fs-sm); }
.download-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.download-note { margin-top: 16px; font-size: var(--fs-sm); color: var(--text-muted); }
.article-card { display: flex; flex-direction: column; gap: 16px; }
.article-card h3 { font-size: var(--fs-subtitle); line-height: 1.5; }
.article-card h3 a:hover { color: var(--accent); }
.article-card p { margin-top: 0; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--text-muted); font-size: var(--fs-xs); }
.article-card > .text-link { margin-top: auto; padding-top: 8px; }
.callout { margin: 24px 0; padding: 22px 24px; border: 1px solid var(--accent-ring); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); }
.callout-title { margin-bottom: 8px; font-weight: var(--weight-bold); }
.callout p { color: var(--text-muted); }
.callout-warning { border-left-color: var(--warn); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-label); }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width: 7em; padding: 16px 20px; vertical-align: top; overflow-wrap: normal; word-break: normal; border-bottom: 1px solid var(--border); }
.data-table th,.prose table th,.article-body table th { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-semibold); }
.data-table td,.prose table td,.article-body table td { background: var(--bg); color: var(--text-muted); }
.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; }
.article-body { min-width: 0; }
.article-body > div,.prose > div { min-width: 0; max-width: 100%; }
.download-guide { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding: 28px 32px; border: 1px solid var(--frame-tint); border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-low); }
.download-guide-copy { flex: 1 1 240px; min-width: 0; }
.download-guide-copy h2 { font-size: var(--fs-h3); }
.download-guide-copy p { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-label); }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100% - 32px); padding: 10px 18px 10px 14px; border: 1px solid var(--frame-tint); border-radius: var(--radius-pill); background: var(--bg); color: var(--accent); font-size: var(--fs-label); font-weight: var(--weight-semibold); box-shadow: var(--shadow-mid); transition: transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease); }
.dl-fab .ico { width: 17px; height: 17px; stroke-width: 2; }
.dl-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }

.hero { position: relative; padding-top: 26px; overflow-x: clip; }
.hero-grid { position: absolute; left: 50%; top: 300px; width: 1440px; height: 620px; transform: translateX(-50%); z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 52% 62% at 50% 46%,var(--mask-solid) 34%,var(--clear) 82%); mask-image: radial-gradient(ellipse 52% 62% at 50% 46%,var(--mask-solid) 34%,var(--clear) 82%); }
.cell { position: absolute; border: 1px solid var(--line-blue); border-radius: var(--radius-screen); }
.cell.amber { border-color: var(--line-amber); }
.cell.pink { border-color: var(--line-pink); }
.c1 { left: 120px; top: 60px; width: 260px; height: 220px; }
.c2 { left: 300px; top: 180px; width: 300px; height: 260px; }
.c3 { left: 40px; top: 300px; width: 220px; height: 260px; }
.c4 { left: 1060px; top: 40px; width: 280px; height: 240px; }
.c5 { left: 900px; top: 160px; width: 320px; height: 280px; }
.c6 { left: 1180px; top: 320px; width: 220px; height: 240px; }
.c7 { left: 580px; top: 36px; width: 300px; height: 190px; }
.c8 { left: 440px; top: 360px; width: 560px; height: 250px; }
.c9 { left: 210px; top: 470px; width: 300px; height: 150px; }
.c10 { left: 940px; top: 470px; width: 300px; height: 150px; }
.hero-in { position: relative; z-index: 1; max-width: 1312px; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; max-width: 100%; padding: 4px 14px 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-muted); box-shadow: var(--shadow-low); font-size: var(--fs-sm); font-weight: var(--weight-medium); margin-bottom: 18px; }
.pulse { position: relative; width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-round); background: var(--accent); color: var(--on-accent); }
.hero h1 { font-size: var(--fs-hero); font-weight: var(--weight-display); line-height: 1.14; letter-spacing: var(--tracking-display); }
.h1-line { display: block; }
.lede { max-width: 720px; margin-top: 20px; font-size: var(--fs-lede); line-height: 1.6; color: var(--text-muted); }
.lede strong { color: var(--text); font-weight: var(--weight-semibold); }
.lede .grad-text { font-weight: var(--weight-bold); }
.platforms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; min-height: 34px; }
.platforms-label { font-size: var(--fs-sm); color: var(--text-muted); margin-right: 4px; }
.plat { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 14px 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--weight-medium); transition: border-color var(--duration) var(--ease),color var(--duration) var(--ease),background var(--duration) var(--ease); }
.plat svg { width: 15px; height: 15px; flex-shrink: 0; }
.plat:hover { border-color: var(--accent-ring); color: var(--accent); background: var(--accent-tint); }
.stage { position: relative; width: 1100px; height: 412px; margin: 22px auto 0; z-index: 1; }
.win { position: absolute; left: 230px; top: 24px; width: 640px; height: 356px; display: grid; grid-template-columns: 150px minmax(0,1fr); background: var(--bg); color: var(--text); border: 1px solid var(--frame-tint); border-radius: var(--radius-lg); box-shadow: var(--shadow-hi); overflow: hidden; z-index: 2; text-align: left; }
.side { display: flex; flex-direction: column; gap: 4px; padding: 22px 12px; background: var(--grad-brand); color: var(--on-accent-soft); }
.side-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-nav); letter-spacing: var(--tracking-brand); color: var(--on-accent); padding-inline: 10px; margin-bottom: 16px; }
.side-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.side-item .ico { width: 17px; height: 17px; }
.side-item.is-active { background: var(--on-accent-veil); color: var(--on-accent); }
.main { display: flex; flex-direction: column; padding: 18px 60px 18px 24px; min-width: 0; }
.bar { display: flex; align-items: center; gap: 10px; }
.field { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; white-space: nowrap; }
.field .ico { width: 15px; height: 15px; }
.bar-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.bar-btn .ico { width: 14px; height: 14px; stroke-width: 2; }
.section-label { margin: 20px 0 10px 2px; font-size: var(--fs-xs); font-weight: var(--weight-semibold); color: var(--text-muted); letter-spacing: var(--tracking-label); }
.rows { display: flex; flex-direction: column; gap: 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 10px 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--bg); color: var(--text); }
.set-name { font-size: var(--fs-setting); font-weight: var(--weight-semibold); color: var(--text); }
.set-ctrl { display: flex; align-items: center; gap: 10px; }
.set-val { font-size: var(--fs-control); color: var(--text-muted); }
.toggle { position: relative; width: 34px; height: 20px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--bg-panel-2); color: var(--text); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-round); background: var(--bg); color: var(--text); box-shadow: var(--shadow-low); }
.toggle.is-on { background: var(--accent); color: var(--on-accent); }
.toggle.is-on::after { left: 16px; }
.select { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel); color: var(--text); font-size: var(--fs-control); }
.select .ico { width: 14px; height: 14px; color: var(--text-muted); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-panel-2); color: var(--text-muted); }
.seg-opt { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: var(--radius-pill); font-size: var(--fs-control); font-weight: var(--weight-medium); }
.seg-opt.is-on { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold); }
.win-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bg-panel-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.phone { position: absolute; left: 50px; top: 96px; width: 196px; height: 300px; padding: 7px; border-radius: var(--radius-phone); background: var(--text); color: var(--on-dark); box-shadow: var(--shadow-mid); z-index: 3; text-align: left; }
.phone::after { content: ""; position: absolute; right: -2px; top: 78px; width: 3px; height: 40px; border-radius: var(--radius-line); background: var(--text); color: var(--on-dark); }
.screen { position: relative; height: 100%; border-radius: var(--radius-screen); background: var(--bg); color: var(--text); overflow: hidden; }
.cam { position: absolute; top: 9px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--radius-round); background: var(--text); color: var(--on-dark); }
.app-head { display: flex; align-items: center; gap: 8px; padding: 30px 14px 12px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-nav); letter-spacing: var(--tracking-brand); color: var(--text); border-bottom: 1px solid var(--bg-panel-2); }
.app-head .ico { width: 16px; height: 16px; color: var(--text-muted); }
.p-row { display: flex; align-items: center; gap: 10px; height: 44px; margin-inline: 12px; border-bottom: 1px solid var(--bg-panel-2); font-size: var(--fs-control); font-weight: var(--weight-medium); color: var(--text); }
.p-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--accent-tint); color: var(--accent); }
.p-ico .ico { width: 14px; height: 14px; }
.grow { flex: 1; }
.p-row .chev { width: 14px; height: 14px; color: var(--text-muted); }
.p-row .toggle { width: 30px; height: 18px; }
.p-row .toggle::after { width: 14px; height: 14px; }
.p-row .toggle.is-on::after { left: 14px; }
.p-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; display: flex; align-items: center; padding-inline: 14px; background: var(--bg-panel); color: var(--text-muted); border-top: 1px solid var(--border); font-size: var(--fs-tiny); }
.fab { position: absolute; right: 14px; bottom: 30px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-round); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-cta); }
.fab .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.code-card { position: absolute; left: 818px; top: 0; width: 284px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-code); box-shadow: var(--shadow-mid); overflow: hidden; z-index: 3; text-align: left; }
.code-head { display: flex; align-items: center; gap: 6px; height: 38px; padding-inline: 14px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text-muted); }
.dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: var(--radius-round); }
.dot.r { background: var(--error); }
.dot.y { background: var(--warn); }
.dot.g { background: var(--success); }
.code-name { margin-left: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.code { padding: 13px 16px 15px; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: var(--fs-code-mini); line-height: 1.7; background: var(--bg-panel); color: var(--text-muted); white-space: pre; overflow-x: auto; }
.code .k { color: var(--accent); font-weight: var(--weight-medium); }
.code .s { color: var(--text); }
.status { position: absolute; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 12px; border-radius: var(--radius-pill); background: var(--text); color: var(--on-dark); font-size: var(--fs-sm); font-weight: var(--weight-medium); white-space: nowrap; box-shadow: var(--shadow-pill); z-index: 4; }
.status-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: var(--radius-round); background: var(--grad-tri); }
.st-a { left: 150px; top: 6px; }
.st-b { left: 724px; top: 352px; }
.st-c { left: 130px; top: 376px; }
.peek { max-width: 1312px; margin: 14px auto 0; padding-inline: var(--gutter); }
.peek-panel { padding: 44px 48px 56px; border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); }
.peek h2 { font-size: var(--fs-h2); font-weight: var(--weight-display); }
.preview-stack { display: grid; gap: 24px; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.swatch { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); color: var(--text); }
.swatch-color { height: 76px; 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(--bg-panel); }
.sw-panel2 { background: var(--bg-panel-2); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-dark { background: var(--accent-dark); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-amber { background: var(--amber); }
.sw-magenta { background: var(--magenta); }
.sw-violet { background: var(--violet); }
.sw-gradient { background: var(--grad-tri); }
.sw-tint { background: var(--accent-tint); }

@media (max-width: 1180px) and (min-width: 961px) {
  .stage { transform: scale(.84); transform-origin: top center; margin-bottom: -66px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .stage { transform: scale(.66); transform-origin: top center; margin-bottom: -140px; }
}
@media (max-width: 800px) {
  .feature-panel { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 32px; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: var(--fs-h1-mobile); }
}
@media (max-width: 760px) {
  .hero-in { padding-inline: var(--gutter); }
  .platforms { height: auto; }
  .platforms-label { width: 100%; margin: 0; }
  .stage { transform: none; width: auto; height: auto; margin: 24px var(--gutter) 0; }
  .win { position: relative; left: auto; top: auto; width: 100%; height: auto; grid-template-columns: minmax(0,1fr); }
  .side { flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .side-title { width: 100%; margin-bottom: 6px; }
  .main { padding: 16px; }
  .phone,.code-card,.status { display: none; }
  .win-foot { margin-top: 18px; }
  .peek { padding-inline: var(--gutter); }
  .peek-panel { padding: 32px 24px; }
  .peek h2 { font-size: var(--fs-h3); }
}
@media (max-width: 640px) {
  .segmented-tabs { border-radius: var(--radius-lg); gap: 4px; }
  .segmented-tabs [role="tab"] { padding: 10px 13px; }
  .feature-panel { padding: 28px 20px; }
  .mini-back { inset-inline: 24px 0; padding: 18px; }
  .mini-front { margin-right: 12px; padding: 18px; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .download-guide { padding: 24px 20px; }
  .dl-fab { right: 16px; bottom: 16px; }
  .bar { flex-wrap: wrap; }
  .field { flex-basis: 100%; white-space: normal; }
  .set-row { flex-wrap: wrap; }
  .set-ctrl { flex-wrap: wrap; min-width: 0; }
  .hero .badge { font-size: var(--fs-xs); }
  .hero .lede { font-size: var(--fs-body); }
}