.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; gap:8px; padding:10px; margin:0 0 36px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); }
.tab-list [role="tab"] { position:relative; flex:1 1 0; min-width:0; min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:0; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font:var(--weight-bold) 15px/1.4 var(--font-body); text-align:center; }
.tab-list [role="tab"]:hover { background:var(--bg-panel-2); color:var(--ink-deep); }
.tab-list [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--white); }
.tab-progress { position:absolute; left:18px; right:18px; bottom:5px; height:2px; background:var(--white-40); border-radius:var(--r-pill); transform:scaleX(0); transform-origin:left; }
.tabs.is-playing [aria-selected="true"] .tab-progress { animation:tab-clock 8s linear both; }
[role="tabpanel"] { min-width:0; }
[role="tabpanel"]:focus-visible { border-radius:var(--r-card); }
@keyframes tab-clock { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.feature-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; padding-top:32px; padding-bottom:48px; }
.feature-kicker { margin:0 0 20px; font-weight:var(--weight-heavy); font-size:22px; }
.feature-kicker::before { content:"✦"; margin-right:10px; color:var(--accent); }
.feature-copy h3 { font-size:clamp(28px,2.8vw,40px); line-height:1.3; margin:0 0 24px; }
.feature-copy p { line-height:1.9; color:var(--text-muted); }
.device-stage { position:relative; min-width:0; aspect-ratio:620/520; isolation:isolate; }
.stage-blob { position:absolute; inset:6% 4% 3% 9%; border-radius:42% 58% 62% 38% / 38% 38% 62% 62%; background:var(--grad-hero); color:var(--ink-deep); transform:rotate(-12deg); z-index:-1; }
.stage-window { position:absolute; left:15%; right:0; top:6%; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); overflow:hidden; }
.window-chrome { display:flex; align-items:center; gap:6px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg-panel); color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.window-chrome .ed-dot { width:8px; height:8px; }
.window-chrome span:last-child { margin-left:8px; }
.stage-window pre { margin:0; border:0; border-radius:0; background:var(--bg); color:var(--text); font-size:clamp(9px,1vw,13px); padding:24px; }
.stage-phone { position:absolute; top:39%; left:0; width:35%; padding:14px; border:6px solid var(--text); border-radius:var(--r-panel); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); }
.phone-notch { width:38%; height:8px; margin:0 auto 16px; border-radius:var(--r-pill); background:var(--text); }
.stage-phone h4 { margin:0 0 12px; font-size:13px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:6px; padding-block:13px; border-top:1px solid var(--border); font-size:11px; }
.switch-sample { display:inline-block; width:25px; height:14px; padding:2px; border-radius:var(--r-pill); background:var(--accent); color:var(--white); flex-shrink:0; }
.switch-sample::after { content:""; display:block; margin-left:auto; width:10px; height:10px; border-radius:var(--r-circle); background:var(--white); }
.switch-sample.is-off { background:var(--bg-panel-2); color:var(--text); }
.switch-sample.is-off::after { margin-left:0; }
.stage-rule { position:absolute; left:40%; right:1%; top:64%; padding:18px; border:1px solid var(--border); border-radius:var(--r-small); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); font-size:12px; }
.stage-rule::before { content:""; position:absolute; top:51px; width:20%; right:100%; height:1px; background:var(--accent); }
.stage-rule p { margin-bottom:10px; font-weight:var(--weight-bold); }
.stage-rule code { display:block; padding:9px; border:1px solid var(--accent); border-radius:var(--r-editor); font-size:10px; overflow-wrap:anywhere; color:var(--accent-dark); }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; margin:0 0 32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-soft); }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:var(--r-pill); color:var(--text-muted); font-size:14px; }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel); color:var(--accent-dark); text-decoration:none; }
.toc-sticky { position:sticky; top:16px; z-index:10; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-soft); margin-bottom:12px; }
.faq-item summary { position:relative; list-style:none; padding:24px 64px 24px 24px; font-weight:var(--weight-bold); cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:21px; font-size:24px; color:var(--accent); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-soft); }
.term-card h3 { margin:12px 0; }
.term-card p { color:var(--text-muted); margin-bottom:0; }
.term-en { font-family:var(--font-mono); font-size:12px; color:var(--accent-dark); }
.badge,.tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; padding:5px 11px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--accent-dark); font-size:12px; line-height:1.4; font-weight:var(--weight-bold); white-space:normal; overflow-wrap:anywhere; }
.badge-first { background:var(--accent); color:var(--white); border-color:var(--accent); }
.badge-recommend { background:var(--bg-panel-2); color:var(--accent-dark); border-color:var(--bg-panel-2); }
.badge-archived { background:var(--bg-panel); color:var(--text-muted); }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.client-card { position:relative; display:flex; flex-direction:column; gap:24px; }
.client-card.is-first { border-color:var(--accent); }
.client-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.client-heading h3 { margin:0; }
.client-card p { color:var(--text-muted); }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; color:var(--text-muted); font-size:13px; }
.client-meta dt { font-weight:var(--weight-bold); }
.client-meta dd { margin:0; }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
[data-version]:empty { display:none; }
.post-card { display:flex; flex-direction:column; gap:16px; }
.post-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); }
.post-card h3 { margin:0; font-size:22px; }
.post-card h3 a { color:var(--text); }
.post-card h3 a:hover { color:var(--accent); }
.post-card p { color:var(--text-muted); margin:0; }
.post-card .post-link { margin-top:auto; font-weight:var(--weight-bold); font-size:14px; }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--r-small); background:var(--bg-panel); color:var(--text); }
.callout h3 { font-size:18px; margin:0 0 10px; }
.callout p:last-child { margin-bottom:0; }
.callout-warning { border-left-color:var(--warn); }
.table-wrap { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:var(--r-small); overscroll-behavior-x:contain; }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--bg); color:var(--text); font-size:14px; }
.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; 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(--bg-panel); color:var(--text); font-weight:var(--weight-bold); }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table { display:block; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; background:var(--bg); color:var(--text); }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:48px; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-soft); }
.article-download h2 { font-size:24px; margin:0 0 10px; }
.article-download p { margin:0; color:var(--text-muted); }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:30; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:60px; max-width:calc(100% - 40px); padding:14px 22px; border:1px solid var(--white-24); border-radius:var(--r-pill); background:var(--accent); color:var(--white); box-shadow:var(--shadow-btn); font-weight:var(--weight-bold); }
.dl-fab:hover { background:var(--accent-dark); color:var(--white); text-decoration:none; }
.dl-fab svg { width:22px; height:22px; }
.dl-fab small { display:block; font-size:11px; font-weight:var(--weight-normal); }
.has-article-fab .site-footer { padding-bottom:112px; }
.preview-block { padding-top:72px; padding-bottom:12px; }
.preview-block>h2 { margin-top:0; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.swatch { padding:12px; border:1px solid var(--border); border-radius:var(--r-small); background:var(--bg); color:var(--text); }
.swatch i { display:block; height:66px; border:1px solid var(--border); border-radius:var(--r-editor); margin-bottom:10px; }
.swatch code { font-size:11px; }
.sw-bg { background:var(--bg); }
.sw-panel { background:var(--bg-panel); }
.sw-panel-2 { background:var(--bg-panel-2); }
.sw-border { background:var(--border); }
.sw-accent { background:var(--accent); }
.sw-accent-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-ink { background:var(--ink-deep); }
.sw-sakura { background:var(--sakura); }
.sw-peach { background:var(--peach); }
.sw-tangerine { background:var(--tangerine); }
.sw-vermilion { background:var(--vermilion); }
.sw-violet { background:var(--glass-violet); }
.sw-orchid { background:var(--glass-orchid); }
.sw-scene-mid { background:var(--scene-mid); }
.sw-scene-bottom { background:var(--scene-bottom); }
.sw-desk-top { background:var(--desk-top); }
.sw-desk-bottom { background:var(--desk-bottom); }
.sw-metal-hi { background:var(--metal-hi); }
.sw-metal-lo { background:var(--metal-lo); }
.sw-band { background:var(--band-peach); }
.sw-gradient { background:var(--grad-hero); }
.type-display { font:var(--weight-heavy) clamp(34px,3.35vw,48px)/1.14 var(--font-display); color:var(--ink-deep); }
.type-mono { font-family:var(--font-mono); }
.preview-spacer { margin-top:32px; }
.preview-footer { margin-top:80px; }
@media (max-width:960px) {
  .feature-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .device-stage { width:100%; max-width:620px; margin-inline:auto; }
  .stage-window pre { font-size:12px; }
}
@media (max-width:640px) {
  .tab-list,[role="tablist"] { border-radius:var(--r-card); gap:6px; flex-wrap:wrap; padding:8px; }
  .tab-list [role="tab"] { flex:1 1 calc(50% - 6px); min-height:46px; padding:10px 8px; font-size:13px; }
  .feature-layout { padding-bottom:16px; }
  .feature-copy h3 { font-size:28px; }
  .device-stage { aspect-ratio:620/620; }
  .stage-phone { width:38%; padding:10px; border-width:4px; border-radius:var(--r-card); }
  .stage-window { left:10%; }
  .stage-window pre { font-size:9px; padding:15px; }
  .window-chrome { padding:10px; font-size:10px; }
  .stage-rule { top:67%; left:42%; padding:10px; }
  .stage-rule code { font-size:8px; padding:6px; }
  .setting-row { font-size:9px; padding-block:10px; }
  .stage-phone h4 { font-size:11px; }
  .toc { gap:4px; padding:10px; }
  .toc a { font-size:12px; padding:10px; }
  .callout { padding:20px; }
  .dl-fab { bottom:calc(16px + env(safe-area-inset-bottom)); right:20px; padding:12px 18px; min-height:52px; }
  .dl-fab small { display:none; }
  .article-download { padding:24px; }
  .type-display { font-size:30px; }
}
@media (prefers-reduced-motion:reduce) {
  .tabs.is-playing .tab-progress { animation:none; }
}