.tabs { min-width:0; }
.tablist,[role="tablist"] { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:32px; margin-bottom:20px; }
[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 18px; background:var(--surface); color:var(--text-muted);
  border:1px solid var(--border); border-radius:var(--r-pill); font-size:14px; line-height:1.4;
}
[role="tab"]:hover { border-color:var(--border-strong); color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--text); color:var(--on-accent); border-color:var(--text); box-shadow:var(--shadow-sm); }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px; }
.toc { display:flex; flex-wrap:wrap; gap:8px 22px; padding:18px 0; margin-bottom:32px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); color:var(--text-muted); }
.toc a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.toc a:hover { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; }
.toc-sticky { position:sticky; top:0; z-index:10; }
.faq-item { border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; min-height:72px; padding:20px 0; list-style:none; font-size:17px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex-shrink:0; font-family:var(--font-mono); color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-bottom:24px; max-width:54em; color:var(--text-muted); line-height:1.85; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); min-width:0; }
.term-card h3 { font-size:22px; }
.term-en { display:block; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:5px; overflow-wrap:anywhere; }
.term-card p { margin-top:18px; font-size:15px; line-height:1.85; color:var(--text-muted); }
.client-card { padding:30px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); min-width:0; }
.client-card + .client-card { margin-top:24px; }
.client-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.client-logo { width:56px; height:56px; flex-shrink:0; }
.client-title { min-width:0; flex:1; }
.client-title h3 { font-size:24px; }
.client-card p { margin-top:18px; color:var(--text-muted); line-height:1.8; }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:13px; color:var(--text-muted); }
[data-rev]:empty { display:none; }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.badge,.tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; padding:4px 10px; font-size:12px; line-height:1.5; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); white-space:normal; overflow-wrap:anywhere; }
.badge-first { background:var(--text); color:var(--on-accent); border-color:var(--text); }
.badge-recommended { background:var(--bg-panel); color:var(--text); border-color:var(--border-strong); }
.badge-archived { background:var(--bg-panel-2); color:var(--text-muted); border-style:dashed; }
.fact-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.status-dot { width:6px; height:6px; border-radius:var(--r-round); background:var(--success); color:var(--text); flex-shrink:0; }
.article-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--text-muted); font-size:12px; margin-bottom:22px; }
.article-card h3 { font-size:23px; line-height:1.5; }
.article-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; }
.article-card p { margin-top:16px; font-size:15px; line-height:1.8; color:var(--text-muted); }
.article-card .text-link { align-self:flex-start; margin-top:24px; font-size:14px; }
.callout { margin:24px 0; padding:22px 24px; border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--r); background:var(--bg-panel); color:var(--text); font-size:15px; line-height:1.85; }
.callout strong { display:block; margin-bottom:6px; 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%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r); }
.data-table { border-collapse:collapse; width:100%; font-size:14px; background:var(--surface); color:var(--text); }
.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; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th,.article-body table th { font-weight:var(--weight-medium); background:var(--bg-panel); color:var(--text); }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  width:100%; max-width:100%; min-width:0; border-collapse:collapse;
  background:var(--surface); color:var(--text); font-size:14px;
}
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:25;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  max-width:calc(100vw - 40px); min-height:60px; padding:12px 20px;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); font-size:14px;
}
.dl-fab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.dl-fab small { display:block; font-size:12px; color:var(--text-muted); }
.dl-fab:hover { border-color:var(--border-strong); }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:56px; padding:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-sm); }
.article-download p { margin-top:8px; color:var(--text-muted); font-size:14px; }
.article-download h2 { font-size:24px; margin:0; }
.scape {
  position:relative; overflow:hidden; height:clamp(540px,calc(100vh - 230px),660px);
  height:clamp(540px,calc(100svh - 230px),660px); border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding:0 24px 70px; isolation:isolate; background:var(--lake); color:var(--text);
}
.sc-sky { position:absolute; left:0; right:0; top:0; height:62%; z-index:-3; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 56%,var(--horizon) 100%); color:var(--text); }
.sc-glow { position:absolute; left:50%; top:62%; width:78%; height:46%; z-index:-2; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center,var(--glow) 0%,var(--transparent) 66%); color:var(--text); }
.sc-ridge { position:absolute; left:0; bottom:38%; width:100%; height:24%; z-index:-2; filter:blur(.4px); }
.sc-ridge .ridge-far,.sc-mirror .ridge-far { fill:var(--ridge-far); }
.sc-ridge .ridge-near,.sc-mirror .ridge-near { fill:var(--ridge); }
.sc-lake { position:absolute; left:0; right:0; top:62%; bottom:0; z-index:-3; overflow:hidden; background:linear-gradient(180deg,var(--lake-top) 0%,var(--lake) 34%,var(--lake-deep) 100%); color:var(--text); }
.sc-mirror { position:absolute; left:0; top:0; width:100%; height:34%; transform:scaleY(-1); opacity:.26; filter:blur(1.4px); }
.sheen { position:absolute; height:1px; background:linear-gradient(90deg,var(--transparent) 0%,var(--sheen) 50%,var(--transparent) 100%); color:var(--text); }
.sheen.s1 { top:14%; left:6%; width:44%; }
.sheen.s2 { top:33%; left:52%; width:40%; opacity:.8; }
.sheen.s3 { top:55%; left:14%; width:58%; opacity:.65; }
.sheen.s4 { top:78%; left:40%; width:46%; opacity:.5; }
.mb { position:relative; z-index:2; width:min(560px,80%); }
.mb-lid { position:relative; padding:10px 10px 12px; background:var(--graphite); color:var(--on-accent); border-radius:var(--r-lid); box-shadow:0 0 0 1.5px var(--alu-lo),inset 0 0 0 1px var(--graphite-edge),0 14px 22px -14px rgba(var(--shade),.4),0 40px 70px -34px rgba(var(--shade),.5); }
.mb-notch { position:absolute; top:10px; left:50%; z-index:4; width:12%; aspect-ratio:6.2/1; transform:translateX(-50%); background:var(--graphite); color:var(--on-accent); border-radius:var(--r-notch); }
.mb-notch::after { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:var(--r-round); transform:translate(-50%,-55%); background:var(--graphite-edge); color:var(--on-accent); }
.mb-screen { position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-xs); background:linear-gradient(160deg,var(--wall-a) 0%,var(--wall-b) 100%); color:var(--text); container-type:inline-size; }
.mb-screen::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(118deg,var(--highlight) 0%,var(--highlight-clear) 36%); color:var(--text); }
.scr { position:absolute; inset:0; display:flex; flex-direction:column; font-size:11px; font-size:2.06cqw; line-height:1.35; }
.menubar { flex:none; height:1.75em; display:flex; align-items:center; gap:1.3em; padding:0 1.1em; font-size:.86em; color:var(--text); background:var(--glass); border-bottom:1px solid var(--glass-line); }
.menubar svg { width:1em; height:1em; fill:currentColor; }
.menubar b { font-weight:var(--weight-strong); }
.desk { flex:1; display:grid; place-items:center; padding:0 4%; }
.win { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-window); overflow:hidden; box-shadow:0 .1em .25em rgba(var(--shade),.08),0 1.4em 3em -1em rgba(var(--shade),.32); }
.win-bar { position:relative; height:2.3em; display:flex; align-items:center; gap:.48em; padding:0 .95em; background:var(--surface); color:var(--text); border-bottom:1px solid var(--border); }
.tl { width:.8em; height:.8em; border-radius:var(--r-round); box-shadow:inset 0 0 0 .06em rgba(var(--shade),.16); flex-shrink:0; }
.tl-r { background:var(--tl-red); color:var(--text); }
.tl-y { background:var(--tl-amber); color:var(--text); }
.tl-g { background:var(--tl-green); color:var(--text); }
.win-title { position:absolute; left:50%; transform:translateX(-50%); font-size:.95em; font-weight:var(--weight-medium); white-space:nowrap; }
.win-body { display:grid; grid-template-columns:8.6em minmax(0,1fr); }
.win-side { padding:.8em .55em; background:var(--bg-panel); color:var(--text-muted); border-right:1px solid var(--border); }
.win-side ul { list-style:none; padding:0; margin:0; }
.win-side li { padding:.4em .75em; margin-bottom:.12em; border-radius:var(--r-sidebar); font-size:.95em; }
.win-side .is-on { background:var(--bg-panel-2); color:var(--text); font-weight:var(--weight-medium); }
.win-main { padding:1em 1.2em; }
.set-label { font-size:.88em; color:var(--text-muted); margin-bottom:.45em; }
.seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:.2em; background:var(--bg-panel-2); color:var(--text-muted); border-radius:var(--r-segment); }
.seg span { height:1.9em; display:grid; place-items:center; border-radius:var(--r-control); font-size:.95em; }
.seg .seg-on { background:var(--surface); color:var(--text); font-weight:var(--weight-medium); box-shadow:0 .06em .2em rgba(var(--shade),.14); }
.set-card { margin-top:.85em; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-setting); }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:1em; height:2.5em; padding:0 .9em; font-size:.95em; }
.set-row + .set-row { border-top:1px solid var(--border); }
.sw { position:relative; width:2.5em; height:1.45em; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); flex-shrink:0; }
.sw::after { content:""; position:absolute; top:.15em; left:.15em; width:1.15em; height:1.15em; border-radius:var(--r-round); background:var(--surface); color:var(--text); box-shadow:0 .06em .18em rgba(var(--shade),.25); }
.sw-on { background:var(--accent); color:var(--on-accent); box-shadow:none; }
.sw-on::after { left:calc(100% - 1.3em); }
.fld { min-width:7.6em; padding:.2em .6em; text-align:right; font-family:var(--font-mono); font-size:.92em; color:var(--text); background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-control); }
.win-foot { margin-top:.85em; padding-top:.6em; border-top:1px dashed var(--border-strong); display:flex; align-items:center; gap:.5em; font-size:.9em; color:var(--text-muted); }
.win-foot svg { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.win-foot code { color:var(--text); font-size:1em; }
.mb-base { position:relative; height:18px; perspective:300px; perspective-origin:50% 0; }
.mb-deck { position:absolute; top:0; left:-4%; width:108%; height:28px; transform:rotateX(66deg); transform-origin:50% 0; background:linear-gradient(180deg,var(--alu-dark) 0%,var(--alu) 22%,var(--alu-hi) 100%); color:var(--text); border-radius:var(--r-deck); }
.mb-lip { position:absolute; top:11px; left:-9%; width:118%; height:7px; background:linear-gradient(180deg,var(--alu-hi) 0%,var(--alu) 55%,var(--alu-lo) 100%); color:var(--text); border-radius:var(--r-lip); box-shadow:inset 0 1px 0 var(--lip-light); }
.mb-groove { position:absolute; top:0; left:50%; width:14%; height:4px; transform:translateX(-50%); background:linear-gradient(180deg,var(--alu-dark) 0%,var(--alu-lo) 100%); color:var(--text); border-radius:var(--r-groove); box-shadow:0 1px 0 var(--groove-light); }
.mb-shadow { position:absolute; left:50%; transform:translateX(-50%); z-index:-1; border-radius:var(--r-round); }
.mb-shadow-a { top:14px; width:114%; height:14px; filter:blur(3px); background:radial-gradient(ellipse at center,rgba(var(--shade),.42) 0%,rgba(var(--shade),0) 70%); color:var(--text); }
.mb-shadow-b { top:8px; width:146%; height:50px; filter:blur(10px); background:radial-gradient(ellipse at center,rgba(var(--shade),.2) 0%,rgba(var(--shade),0) 70%); color:var(--text); }
.feature-stage { position:relative; isolation:isolate; overflow:hidden; padding:64px; border:1px solid var(--border); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--ridge-far),var(--lake)); color:var(--text); }
.demo-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:center; }
.demo-layout .win { font-size:14px; }
.demo-layout .win-main { min-height:210px; padding:24px; }
.demo-copy { font-size:15px; line-height:1.9; }
.demo-copy h3 { margin-bottom:16px; }
.demo-input { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.demo-input label { width:100%; font-size:13px; color:var(--text-muted); }
.demo-input input,.demo-select { min-width:0; width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text); }
.demo-note { margin-top:18px; font-size:13px; color:var(--text-muted); }
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.swatch { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); color:var(--text); }
.swatch-color { display:block; height:64px; color:var(--text); border-bottom:1px solid var(--border); }
.swatch code { display:block; padding:10px; font-size:12px; }
.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); color:var(--on-accent); }
.sw-accent-dark { background:var(--accent-dark); color:var(--on-accent); }
.sw-text { background:var(--text); color:var(--on-accent); }
.sw-muted { background:var(--text-muted); color:var(--on-accent); }
.sw-faint { background:var(--text-faint); }
.sw-success { background:var(--success); }
.sw-warn { background:var(--warn); }
.sw-error { background:var(--error); color:var(--on-accent); }
.sw-surface { background:var(--surface); }
.sw-on-accent { background:var(--on-accent); }
.sw-shade { background:rgb(var(--shade)); color:var(--on-accent); }
.sw-sky-top { background:var(--sky-top); }
.sw-sky-mid { background:var(--sky-mid); }
.sw-horizon { background:var(--horizon); }
.sw-glow { background:var(--glow); }
.sw-ridge { background:var(--ridge); }
.sw-ridge-far { background:var(--ridge-far); }
.sw-lake-top { background:var(--lake-top); }
.sw-lake { background:var(--lake); }
.sw-lake-deep { background:var(--lake-deep); }
.sw-sheen { background:var(--sheen); }
.sw-graphite { background:var(--graphite); color:var(--on-accent); }
.sw-edge { background:var(--graphite-edge); color:var(--on-accent); }
.sw-alu-hi { background:var(--alu-hi); }
.sw-alu { background:var(--alu); }
.sw-alu-lo { background:var(--alu-lo); }
.sw-alu-dark { background:var(--alu-dark); }
.sw-wall-a { background:var(--wall-a); }
.sw-wall-b { background:var(--wall-b); }
.sw-glass { background:var(--glass); }
.sw-glass-line { background:var(--glass-line); }
.sw-highlight { background:var(--highlight); }
.sw-highlight-clear { background:var(--highlight-clear); }
.sw-lip-light { background:var(--lip-light); }
.sw-groove-light { background:var(--groove-light); }
.sw-veil { background:var(--veil); }
.sw-red { background:var(--tl-red); }
.sw-amber { background:var(--tl-amber); }
.sw-green { background:var(--tl-green); }
.sw-transparent { background:var(--transparent); }
.type-samples > * + * { margin-top:24px; }
.preview-label { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:20px; }
.preview-fab { position:static; margin-top:24px; }
@media (max-width:980px) {
  .scape { height:auto; padding:64px 16px 64px; }
  .mb { width:min(560px,88%); }
  .feature-stage { padding:40px; }
  .demo-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
}
@media (max-width:640px) {
  .scape { padding:48px 10px 52px; }
  .mb-lid { padding:6px 6px 8px; border-radius:var(--r-lid-mobile); }
  .mb-notch { top:6px; }
  .feature-stage { padding:24px 18px; }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-card,.term-card,.article-card { padding:22px; }
  .dl-fab { right:20px; bottom:20px; padding:12px 16px; }
  .fact-row { flex-direction:row; }
}