/* Segmented abilities: one split panel, never a wall of feature cards. */
.tabs { min-width:0; }
.tabs [role="tablist"] { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; width:fit-content; max-width:100%; padding:6px; margin:0 auto 28px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); }
.tabs [role="tab"] { flex-shrink:0; min-height:44px; padding:10px 18px; border:0; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:14px; font-weight:600; line-height:1.5; }
.tabs [role="tab"]:hover { color:var(--text); }
.tabs [role="tab"][aria-selected="true"] { background:var(--accent-dark); color:var(--on-dark); }
.tabs [role="tabpanel"] { min-width:0; }
.feature-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:var(--r-section); overflow:hidden; background:var(--bg-panel-2); color:var(--on-dark); }
.feature-copy { min-width:0; padding:52px; background:var(--bg-panel-2); color:var(--on-dark); }
.feature-copy p { color:var(--on-dark-muted); line-height:1.85; }
.feature-copy .chip { background:var(--device-edge); color:var(--on-dark); font-weight:500; }
.feature-material { display:grid; align-content:center; min-width:0; padding:48px; background:var(--accent-dark); color:var(--on-dark); }
.material-window { min-width:0; padding:24px; border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); }
.material-window pre { margin-bottom:0; font-size:12px; }
.material-window h3 { font-size:15px; }
.toc { position:sticky; top:16px; z-index:10; margin-top:24px; margin-bottom:32px; padding:12px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-btn); }
.toc--static { position:static; }
.toc ul { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.toc a { display:block; padding:10px 14px; border-radius:var(--r-btn); font-size:14px; color:var(--text-muted); }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel); color:var(--text); }
.faq-group { border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); }
.faq-item { min-width:0; padding-inline:24px; }
.faq-item + .faq-item { border-top:1px solid var(--border); }
.faq-item summary { position:relative; min-height:64px; padding:20px 32px 20px 0; list-style:none; cursor:pointer; font-weight:600; overflow-wrap:anywhere; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:18px; font:500 22px/1.3 var(--font-body); color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__answer { padding-bottom:20px; color:var(--text-muted); line-height:1.85; }
.faq-item__answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); }
.term-card__category { margin-bottom:12px; color:var(--text-muted); font-size:12px; font-weight:600; }
.term-card h3 { font-size:21px; }
.term-card p { margin-bottom:0; color:var(--text-muted); line-height:1.85; }
.appstore-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:100%; min-height:58px; padding:12px 24px; border:0; border-radius:var(--r-btn); background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-btn); text-align:left; line-height:1.2; transition:background-color var(--motion-fast) ease,transform var(--motion-fast) ease; }
.appstore-button svg { width:26px; height:30px; }
.appstore-button__copy { display:block; min-width:0; }
.appstore-button small { display:block; margin-bottom:3px; font-size:12px; }
.appstore-button strong { display:block; font-size:17px; font-weight:700; }
.appstore-button:hover { background:var(--accent-strong); color:var(--accent-ink); transform:translateY(-1px); }
.appstore-button--ink { background:var(--bg-panel-2); color:var(--on-dark); }
.appstore-button--ink:hover { background:var(--accent-dark); color:var(--on-dark); }
.fact-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0; padding:0; list-style:none; }
.fact-pill { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.fact-pill__label { color:var(--text-muted); }
.status-dot { width:7px; height:7px; border-radius:var(--r-pill); flex-shrink:0; background:var(--success); }
.badge { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:5px 11px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.badge--forest { background:var(--accent-dark); color:var(--on-dark); }
.shot-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:32px; }
.official-shot { width:100%; max-width:280px; margin:0; padding:0; flex-shrink:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot { outline:1px solid var(--border); border-radius:var(--r-shot); background:var(--bg); color:var(--text); }
.official-shot figcaption { padding-top:12px; padding-bottom:12px; padding-inline:12px; font-size:13px; line-height:1.65; color:var(--text-muted); }
.device-entry { min-height:360px; padding:56px 52px 60px; border-radius:var(--r-section); background:var(--bg-panel-2); color:var(--on-dark); text-align:center; }
.device-entry--ipad { background:var(--accent-dark); color:var(--on-dark); }
.device-entry__icon { display:block; width:48px; height:48px; margin:0 auto 20px; }
.device-entry h2,.device-entry h3 { margin:0; font-size:30px; line-height:1.25; }
.device-entry p { max-width:30em; margin:16px auto 0; color:var(--on-dark-muted); font-size:15.5px; line-height:1.75; }
.device-entry .btn { margin-top:28px; }
.article-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border-radius:var(--r-float); background:var(--bg-panel); color:var(--text); border:1px solid var(--border); }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px; font-size:12px; color:var(--text-muted); }
.article-card h3 { font-size:21px; line-height:1.5; }
.article-card h3 a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.article-card p { color:var(--text-muted); font-size:14px; line-height:1.85; }
.article-card__more { margin-top:auto; color:var(--accent-dark); font-size:14px; font-weight:600; }
.callout { margin:28px 0; padding:24px 28px; border-left:4px solid var(--accent); border-radius:var(--r-inset); background:var(--bg-panel); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout__title { display:block; margin-bottom:8px; font-weight:700; }
.settings-list { list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); }
.settings-list li + li { border-top:1px solid var(--border); }
.settings-list a,.settings-list__row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:14px 20px; }
.settings-list__chevron { flex-shrink:0; color:var(--text-muted); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-inset); }
.data-table { width:100%; border-collapse:collapse; font-size:14px; background:var(--bg); color:var(--text); }
.data-table th,.data-table td,.prose table th,.prose table td,.document-body table th,.document-body table td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th,.document-body table th { background:var(--bg-panel); color:var(--text); font-weight:600; }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.document-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; margin:24px 0; background:var(--bg); color:var(--text); }
.data-table code,.prose table code,.document-body table code { overflow-wrap:anywhere; word-break:normal; }
.dl-fab { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:25; display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px); min-height:56px; padding:14px 20px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); font-size:14px; font-weight:600; }
.dl-fab svg { width:22px; height:22px; color:var(--accent-dark); }
.article-store-card { margin-top:48px; padding:32px; border-radius:var(--r-section); background:var(--accent-dark); color:var(--on-dark); }
.article-store-card p { color:var(--on-dark-muted); }
.article-store-card h2 { font-size:26px; }
.article-store-card .btn { margin-top:8px; }

/* Hero still life: the screen is abstract geometry, not application UI. */
.canvas { position:relative; margin:0; height:clamp(540px,78vh,760px); border-radius:var(--r-section); background:var(--accent-dark); color:var(--on-dark); overflow:hidden; container-type:size; }
.canvas__tag { position:absolute; top:26px; right:26px; z-index:3; display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 52px); padding:8px 14px; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--on-dark); font-size:13px; font-weight:600; line-height:1.3; box-shadow:var(--shadow-tag); }
.canvas__tag-dot { width:7px; height:7px; border-radius:var(--r-pill); background:var(--lime); flex-shrink:0; }
.stage { position:absolute; left:50%; bottom:0; width:100%; height:100%; width:min(100cqw,100cqh); height:min(100cqw,100cqh); transform:translateX(-50%); }
.scene { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.s-desk { fill:var(--desk-tint); }
.s-line { stroke:var(--desk-line); stroke-width:1.5; }
.s-cast { fill:var(--cast); }
.s-pot { fill:var(--pot); }
.s-pot-shade { fill:var(--pot-shade); }
.s-leaf-1 { fill:var(--leaf-1); }
.s-leaf-2 { fill:var(--leaf-2); }
.s-vein { fill:none; stroke:var(--leaf-vein); stroke-width:1.4; stroke-linecap:round; opacity:.35; }
.s-stand { fill:var(--stand); }
.s-stand-shade { fill:var(--stand-shade); }
.s-stand-edge { fill:var(--stand-edge); }
.s-arm { fill:none; stroke:var(--stand-shade); stroke-width:14; stroke-linecap:round; }
.s-device { fill:var(--device); }
.s-device-rim { fill:none; stroke:var(--device-edge); stroke-width:1.5; }
.s-btn { fill:var(--device-edge); }
.s-arc { fill:none; stroke:var(--arc); stroke-width:1.4; stroke-linecap:round; }
.s-arc--outer { opacity:.6; }
.st-deep { stop-color:var(--accent-dark); }
.st-lagoon { stop-color:var(--accent); }
.st-mid { stop-color:var(--screen-mid); }
.screen-fill { fill:url(#screenGrad); }
.screen-pan { animation:screen-pan 12s ease-in-out infinite alternate; }
@keyframes screen-pan { from { transform:translateX(0); } to { transform:translateX(-372px); } }
.float { position:absolute; z-index:2; }
.float--rules { left:5%; top:19%; width:318px; transform:rotate(-2.5deg); }
.float--share { left:9%; top:55%; width:344px; transform:rotate(1.8deg); z-index:1; }
.float__card { padding:16px; border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); animation:card-drift 7s ease-in-out infinite; }
.float--share .float__card { animation-delay:-3.5s; }
@keyframes card-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.float__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.float__title { margin:0; font-size:13px; font-weight:700; letter-spacing:-.005em; color:var(--text); }
.float__meta { font:400 11.5px/1.5 var(--font-mono); color:var(--text-muted); }
.code { margin:0; padding:10px 12px; list-style:none; border-radius:var(--r-inset); background:var(--bg-panel); color:var(--text); font:400 12.5px/1.95 var(--font-mono); counter-reset:ln; overflow-x:auto; }
.code li { display:flex; gap:12px; white-space:nowrap; counter-increment:ln; color:var(--text-muted); }
.code li::before { content:counter(ln); width:10px; flex-shrink:0; text-align:right; color:var(--text-muted); }
.tok { color:var(--text); font-weight:600; }
.kw { position:relative; z-index:0; color:var(--text); font-weight:600; }
.kw::before { content:""; position:absolute; z-index:-1; inset:2px -4px; border-radius:var(--r-highlight); background:var(--lime); opacity:0; animation:keyword-in .7s ease-out forwards; }
.code li:nth-child(2) .kw::before { animation-delay:.9s; }
.code li:nth-child(4) .kw::before { animation-delay:1.6s; }
@keyframes keyword-in { from { opacity:0; } to { opacity:1; } }
.protos { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.protos li { max-width:100%; padding:5px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); font:500 12px/1.3 var(--font-mono); overflow-wrap:anywhere; }
.sub { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--border); }
.sub__label { font-size:11.5px; font-weight:500; color:var(--text-muted); }
.sub__url { font:400 11.5px/1.5 var(--font-mono); color:var(--text-muted); overflow-wrap:anywhere; }
.duo { padding-bottom:96px; }
.duo__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }

/* Preview-only furniture; no fabricated screenshots or image dependencies. */
.preview-block + .preview-block { margin-top:56px; }
.preview-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.preview-row--top { align-items:flex-start; }
.preview-shot-placeholder { display:grid; place-content:center; aspect-ratio:750/1334; border-radius:var(--r-shot); background:var(--bg-panel); color:var(--text-muted); text-align:center; font-size:14px; }
.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(--r-inset); overflow:hidden; background:var(--bg); color:var(--text); }
.swatch__paint { display:block; height:64px; }
.swatch code { display:block; padding:10px 12px; font-size:12px; }
.swatch--bg .swatch__paint { background:var(--bg); }
.swatch--panel .swatch__paint { background:var(--bg-panel); }
.swatch--ink .swatch__paint { background:var(--bg-panel-2); }
.swatch--border .swatch__paint { background:var(--border); }
.swatch--border-strong .swatch__paint { background:var(--border-strong); }
.swatch--accent .swatch__paint { background:var(--accent); }
.swatch--accent-strong .swatch__paint { background:var(--accent-strong); }
.swatch--forest .swatch__paint { background:var(--accent-dark); }
.swatch--lime .swatch__paint { background:var(--lime); }
.swatch--text .swatch__paint { background:var(--text); }
.swatch--muted .swatch__paint { background:var(--text-muted); }
.swatch--faint .swatch__paint { background:var(--text-faint); }
.swatch--success .swatch__paint { background:var(--success); }
.swatch--warn .swatch__paint { background:var(--warn); }
.swatch--error .swatch__paint { background:var(--error); }
.swatch--screen .swatch__paint { background:var(--screen-mid); }
.swatch--leaf1 .swatch__paint { background:var(--leaf-1); }
.swatch--leaf2 .swatch__paint { background:var(--leaf-2); }
.swatch--pot .swatch__paint { background:var(--pot); }
.swatch--pot-shade .swatch__paint { background:var(--pot-shade); }
.swatch--stand .swatch__paint { background:var(--stand); }
.swatch--stand-shade .swatch__paint { background:var(--stand-shade); }
.swatch--stand-edge .swatch__paint { background:var(--stand-edge); }
.swatch--device .swatch__paint { background:var(--device); }
.swatch--device-edge .swatch__paint { background:var(--device-edge); }
.swatch--arc .swatch__paint { background:var(--arc); }
.swatch--desk-line .swatch__paint { background:var(--desk-line); }
.swatch--desk-tint .swatch__paint { background:var(--desk-tint); }
.swatch--cast .swatch__paint { background:var(--cast); }
.swatch--veil .swatch__paint { background:var(--veil); }
.swatch--dark-muted .swatch__paint { background:var(--bg-panel-2); box-shadow:inset 0 32px var(--on-dark-muted); }
.preview-display { font-family:var(--font-display); font-size:var(--h1-size); font-weight:700; line-height:1.16; letter-spacing:var(--track-cjk); }
.preview-mobile-menu { display:none; }
.preview-mobile-menu summary { list-style:none; }

@media (max-width:1080px) {
  .canvas { height:600px; }
  .duo__grid { grid-template-columns:minmax(0,1fr); }
  .feature-copy { padding:36px; }
  .feature-material { padding:32px; }
  .preview-mobile-menu { display:block; }
  .preview-mobile-menu .mobile-drawer { position:absolute; top:var(--bar-h); }
}
@media (max-width:768px) {
  .canvas { height:520px; }
  .float--rules { width:262px; left:4%; }
  .float--share { width:280px; left:6%; }
  .code { font-size:11px; }
  .protos li { font-size:11px; }
  .sub__url,.sub__label { font-size:10.5px; }
  .device-entry { padding:44px 28px 48px; }
  .feature-split { grid-template-columns:minmax(0,1fr); }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .float--rules,.float--share { transform:none; max-width:calc(100% - 24px); }
  .canvas__tag { top:20px; right:20px; font-size:11px; }
  .feature-copy,.feature-material { padding:28px 24px; }
  .material-window { padding:18px; }
  .tabs [role="tablist"] { border-radius:var(--r-float); gap:4px; }
  .tabs [role="tab"] { padding:10px 12px; font-size:12px; }
  .fact-row { justify-content:center; gap:8px; }
  .fact-pill { padding:6px 10px; font-size:12px; }
  .shot-row { flex-direction:column; align-items:center; }
  .official-shot { margin-inline:auto; }
  .toc { position:static; }
  .faq-item { padding-inline:18px; }
  .callout { padding:20px; }
  .article-store-card { padding:28px 24px; }
  .dl-fab { font-size:13px; padding:12px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .float__card,.screen-pan { animation:none; }
  .kw::before { animation:none; opacity:1; }
  .appstore-button { transition:none; }
}