.hero { padding-top:34px; padding-bottom:0 }
.floor { position:absolute; left:50%; bottom:0; width:2600px; margin-left:-1300px; height:460px; z-index:0; pointer-events:none; background-image:linear-gradient(var(--floor-line) 1px,var(--clear) 1px),linear-gradient(90deg,var(--floor-line) 1px,var(--clear) 1px); background-size:56px 56px; background-position:center bottom; transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%; mask-image:linear-gradient(to top,var(--clear) 0%,var(--mask-solid) 22%,var(--mask-solid) 50%,var(--clear) 90%) }
.bento { position:relative; z-index:1; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px }
.cell-main { grid-column:3 / span 8; background:var(--bg); color:var(--text); padding:24px 40px 22px; display:flex; flex-direction:column; align-items:center; text-align:center }
.badge { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; max-width:100%; padding:4px 13px 4px 4px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12.5px; font-weight:var(--weight-medium); line-height:1.5 }
.badge-tag { padding:1px 9px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-weight:var(--weight-bold); font-size:var(--fs-xs); flex-shrink:0 }
.hero .badge { margin:0 }
.hero-title { margin:16px 0 0; font-size:clamp(30px,3.4vw,48px); line-height:1.12; letter-spacing:-.02em }
.hl { position:relative; z-index:0; white-space:nowrap }
.hl::before { content:""; position:absolute; left:-.07em; right:-.07em; bottom:.04em; height:.4em; background:var(--accent-hl); border-radius:var(--r-xs); transform:skewX(-8deg); z-index:-1 }
.lede { margin:12px auto 0; max-width:620px; font-size:var(--fs-lede); line-height:1.65; color:var(--text-muted) }
.lede strong { color:var(--text); font-weight:var(--weight-bold) }
.facts { margin:12px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--text-muted) }
.facts .mono { font-family:var(--font-mono); font-size:12.5px; color:var(--text) }
.facts .dot { display:inline-block; margin-inline:8px; color:var(--text-muted) }
.devices,.fact-pills { list-style:none; margin:14px 0 0; padding:0; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap }
.dev,.fact-pill { display:inline-flex; align-items:center; gap:6px; min-height:30px; max-width:100%; padding:5px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text); font-size:12.5px; font-weight:var(--weight-semibold); line-height:1.4; overflow-wrap:anywhere }
.dev svg { width:16px; height:16px; color:var(--text-muted) }
a.dev:hover { border-color:var(--accent); color:var(--accent-dark) }
.devices-sep { width:1px; height:16px; background:var(--border); color:var(--text); margin-inline:4px }
.dev-store { background:var(--bg-panel-2); border-color:var(--bg-panel-2); color:var(--accent-dark) }
.cell-side { grid-column:span 2; padding:18px; display:flex; flex-direction:column; justify-content:space-between; gap:16px }
.cell-side:first-child { grid-column:1 / span 2 }
.tier-2 { background:var(--bg-panel); color:var(--text) }
.tier-3 { background:var(--bg-panel-2); color:var(--text) }
.side-label { display:flex; align-items:center; gap:8px; font:var(--weight-normal) 11px/1.6 var(--font-mono); letter-spacing:.04em; color:var(--text-muted) }
.status-dot { width:7px; height:7px; border-radius:var(--r-pill); background:var(--success); color:var(--text); box-shadow:0 0 0 3px var(--accent-soft); flex-shrink:0 }
.side-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.side-chips li { font-family:var(--font-mono); font-size:11.5px; line-height:1.2; padding:6px 9px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--bg); color:var(--text) }
.side-title { margin:0; font-size:19px; letter-spacing:-.015em; line-height:1.25 }
.side-desc { margin:6px 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted) }
.side-more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:12.5px; font-weight:var(--weight-bold); color:var(--accent-dark) }
.note-card { grid-column:span 4; background:var(--bg); color:var(--text); overflow:hidden; display:flex; flex-direction:column }
.band { position:relative; height:156px; padding-top:22px; display:flex; justify-content:center; align-items:flex-start; border-bottom:1px solid var(--border); color:var(--text); background-image:linear-gradient(var(--band-grid) 1px,var(--clear) 1px),linear-gradient(90deg,var(--band-grid) 1px,var(--clear) 1px); background-size:18px 18px; background-position:-1px -1px }
.band-mist { background-color:var(--band-mist) }
.band-apricot { background-color:var(--band-apricot) }
.band-lilac { background-color:var(--band-lilac) }
.float { position:relative; width:min(300px,calc(100% - 40px)); padding:11px 14px 13px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-float); box-shadow:var(--shadow-float); text-align:left }
.float-head { display:flex; justify-content:space-between; align-items:center; gap:6px; font:var(--weight-normal) 11px/14px var(--font-mono); color:var(--text-muted) }
.float-head b { font-weight:var(--weight-bold); color:var(--text) }
.float-head .tag { font-family:var(--font-body); font-size:10.5px; padding:0 6px; border-radius:var(--r-xs); background:var(--bg-panel); color:var(--text-muted) }
.float-line { margin-top:9px; font-family:var(--font-mono); font-size:12.5px; line-height:20px; color:var(--text); white-space:nowrap }
.float-line.sm { font-size:var(--fs-xs) }
.mk { --lead:22px; position:relative; color:var(--accent-dark); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px }
.mk::before { content:""; position:absolute; left:50%; top:calc(100% + 5px); width:5px; height:5px; margin-left:-2.5px; border-radius:var(--r-pill); background:var(--accent) }
.mk::after { content:""; position:absolute; left:50%; top:calc(100% + 10px); height:var(--lead); border-left:1px dashed var(--accent) }
.gloss { position:absolute; top:calc(100% + 10px + var(--lead)); white-space:nowrap; font:var(--weight-semibold) var(--fs-xs)/1 var(--font-body); color:var(--accent-dark); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-btn); padding:6px 9px; box-shadow:var(--shadow-1) }
.anchor-end .gloss { right:calc(50% - 14px) }
.anchor-start .gloss { left:calc(50% - 14px) }
.anchor-mid .gloss { left:50%; transform:translateX(-50%) }
.routes { margin-top:9px; display:flex; gap:6px }
.route { display:inline-flex; align-items:center; height:26px; padding:0 10px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:var(--weight-semibold); color:var(--text-muted); line-height:1 }
.route.mk { text-decoration:none; border:2px solid var(--accent); padding:0 9px; color:var(--accent-dark); background:var(--accent-soft) }
.route.mk::before { top:calc(100% + 4px) }
.route.mk::after { top:calc(100% + 9px) }
.route.mk .gloss { top:calc(100% + 9px + var(--lead)) }
.card-body { padding:16px 22px 18px }
.card-title { margin:0; font-size:18px; letter-spacing:-.015em; line-height:1.3 }
.card-desc { margin:5px 0 0; font-size:13.5px; line-height:1.6; color:var(--text-muted) }
.card-desc code { font-size:12.5px; color:var(--text) }
.statusbar { position:relative; z-index:1; margin-top:26px; min-height:34px; display:flex; align-items:center; gap:26px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-family:var(--font-mono); font-size:11.5px; white-space:nowrap; overflow:hidden }
.sb-tag { padding:2px 7px; border:1px solid var(--border); border-radius:var(--r-xs); background:var(--bg-panel); color:var(--text-muted); font-family:var(--font-body); font-size:11px; font-weight:var(--weight-semibold); line-height:1.3 }
.sb-item { display:inline-flex; align-items:center; gap:8px }
.sb-right { margin-left:auto }
.tabs { display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px }
[role="tablist"] { display:flex; flex-direction:column; gap:4px; min-width:0 }
[role="tab"] { position:relative; min-height:48px; padding:12px 18px; border:0; border-left:3px solid var(--clear); border-radius:var(--r-btn); background:var(--bg); color:var(--text-muted); font-weight:var(--weight-medium); text-align:left }
[role="tab"]:hover { background:var(--bg-panel); color:var(--text) }
[role="tab"][aria-selected="true"] { border-left-color:var(--accent); background:var(--bg-panel); color:var(--accent-dark); font-weight:var(--weight-heavy) }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px }
.manuscript { background:var(--bg-panel); color:var(--text); padding:32px; border:1px solid var(--border); border-radius:var(--r-card) }
.manuscript pre { border:0; padding:0; margin:0; background:var(--bg-panel); color:var(--text) }
.rule-mark { color:var(--accent-dark); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:5px }
.annotation { position:relative; max-width:500px; margin:28px -16px -16px auto; padding:22px; border:2px solid var(--accent); border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); font-size:var(--fs-label); line-height:1.85 }
.annotation::before { content:""; position:absolute; height:28px; left:26px; bottom:100%; border-left:1px dashed var(--accent) }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text) }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-btn); color:var(--text-muted); font-size:var(--fs-label) }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel-2); color:var(--accent-dark) }
.toc.is-sticky { position:sticky; top:12px; z-index:5 }
.faq-item { border-bottom:1px solid var(--border); background:var(--bg); color:var(--text) }
.faq-item summary { padding:20px 32px 20px 0; cursor:pointer; font-weight:var(--weight-bold); position:relative; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:20px; color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:20px; color:var(--text-muted); max-width:760px }
.faq-answer p { margin:0 }
.term-card { border-top:3px solid var(--accent) }
.term-card dt { font:var(--weight-bold) 18px/1.5 var(--font-mono); overflow-wrap:anywhere }
.term-card dd { margin:12px 0 0; color:var(--text-muted); font-size:var(--fs-label) }
.store-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:100%; padding:10px 22px; border:1px solid var(--accent); border-radius:var(--r-btn); background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn); text-align:left }
.store-button:hover { background:var(--accent-dark); color:var(--on-accent); border-color:var(--accent-dark) }
.store-button svg { width:26px; height:28px }
.store-button span { display:block }
.store-button small { display:block; font-size:11px; line-height:1.3 }
.store-button strong { display:block; font-size:var(--fs-body); line-height:1.4; font-weight:var(--weight-bold) }
.official-shot { width:min(100%,280px); max-width:280px; margin:0 auto; padding:0; flex-shrink:0 }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot) }
.official-shot { border:1px solid var(--border); border-radius:var(--r-shot); background:var(--bg); color:var(--text) }
.official-shot figcaption { margin-top:12px; padding-inline:8px; padding-bottom:12px; font-size:var(--fs-xs); color:var(--text-muted); text-align:center }
.shot-row { display:flex; align-items:flex-start; justify-content:center; gap:32px }
.shot-placeholder { width:100%; aspect-ratio:750 / 1334; display:grid; place-items:center; border-radius:var(--r-shot); background:var(--bg-panel-2); color:var(--text-muted); font-size:var(--fs-label); text-align:center }
.device-card { display:flex; align-items:flex-start; gap:24px }
.device-card > svg { width:48px; height:64px; color:var(--accent-dark) }
.device-card h3 { margin:0 0 8px }
.device-card p { margin:0 0 16px; color:var(--text-muted); font-size:var(--fs-label) }
.article-card { display:flex; flex-direction:column; gap:14px }
.article-card h3 { margin:0; font-size:var(--fs-h3) }
.article-card p { margin:0; color:var(--text-muted); font-size:var(--fs-label) }
.article-card .article-meta { color:var(--accent-dark); font-size:var(--fs-xs) }
.article-card .text-link { margin-top:auto; font-size:var(--fs-label) }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); font-size:var(--fs-label) }
.callout p { margin:0 }
.callout strong { color:var(--accent-dark) }
.dl-fab { position:fixed; z-index:35; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:52px; padding:12px 18px; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-dark); border-radius:var(--r-card); box-shadow:var(--shadow-btn); font-size:var(--fs-label); font-weight:var(--weight-bold) }
.dl-fab svg { width:22px; height:22px }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-accent) }
.article-store-note { margin-top:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.article-store-note h2 { margin:0 0 8px; font-size:var(--fs-h3) }
.article-store-note p { margin:0; font-size:var(--fs-label); color:var(--text-muted) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--r-card) }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-label); text-align:left }
.data-table th,.data-table td,.prose th,.prose td { min-width:7em; padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:normal; word-break:normal }
.data-table th,.prose th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-bold) }
.data-table td,.prose td { background:var(--bg); color:var(--text) }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; overscroll-behavior-inline:contain }
.prose table code,.data-table code { overflow-wrap:anywhere; white-space:normal }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px }
.swatch { border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; font-size:var(--fs-xs); background:var(--bg); color:var(--text) }
.swatch span { display:block; height:64px; border-bottom:1px solid var(--border) }
.swatch code { display:block; padding: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) }
.sw-dark { background:var(--accent-dark) }
.sw-hl { background:var(--accent-hl) }
.sw-soft { background:var(--accent-soft) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-faint { background:var(--text-faint) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-mist { background:var(--band-mist) }
.sw-apricot { background:var(--band-apricot) }
.sw-lilac { background:var(--band-lilac) }
.sw-grid { background:var(--band-grid) }
.sw-floor { background:var(--floor-line) }
.sw-white { background:var(--on-accent) }
.sw-mask { background:var(--mask-solid) }
.sw-veil { background:var(--veil) }
.sw-clear { background:var(--clear) }
.demo-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center }
.demo-heading { font-size:var(--fs-h1); margin:16px 0 }
.preview-mobile-nav { display:none }
@media (min-width:821px) {
  .side-row,.cards { display:contents }
}
@media (max-width:1180px) {
  .cell-main { grid-column:1 / -1; grid-row:1 }
  .cell-side,.cell-side:first-child { grid-column:span 6 }
}
@media (max-width:820px) {
  .hero { padding-top:20px }
  .bento { display:flex; flex-direction:column; gap:12px }
  .cell-main { order:-1; padding:22px 18px 20px }
  .hero-title { font-size:clamp(24px,4vw,30px) }
  .lede { font-size:14.5px }
  .hero .actions { width:100% }
  .hero .btn { flex:1 1 100% }
  .side-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .cell-side { min-width:0 }
  .cards { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scroll-padding-inline:0; scrollbar-width:none }
  .cards::-webkit-scrollbar { display:none }
  .note-card { min-width:0; flex:0 0 86%; scroll-snap-align:start }
  .float-line { font-size:11.5px }
  .float-line.sm { font-size:11px }
  .tabs { grid-template-columns:minmax(0,1fr); gap:20px }
  [role="tablist"] { flex-direction:row; overflow-x:auto; padding-bottom:6px; gap:8px }
  [role="tab"] { flex-shrink:0; border:1px solid var(--border); border-radius:var(--r-pill); white-space:nowrap }
  [role="tab"][aria-selected="true"] { border-color:var(--accent) }
  .annotation { margin:28px 0 0; max-width:100% }
  .sb-hide-sm { display:none }
}
@media (max-width:640px) {
  .hero .badge { font-size:11px; gap:5px }
  .facts .dot { margin-inline:4px }
  .devices,.fact-pills { gap:6px; flex-direction:row; flex-wrap:wrap }
  .dev { padding-inline:8px; font-size:11px }
  .devices-sep { display:none }
  .manuscript { padding:20px }
  .shot-row { flex-direction:column; align-items:center }
  .article-store-note { flex-direction:column; align-items:flex-start }
  .preview-mobile-nav { display:block; margin-left:auto }
  .preview-mobile-nav summary { min-height:44px; display:flex; align-items:center; cursor:pointer }
  .preview-mobile-nav nav { position:absolute; left:0; right:0; top:100%; padding:16px; background:var(--bg); color:var(--text); border:1px solid var(--border) }
  .preview-mobile-nav a { display:block; padding:12px; min-height:44px }
}
@media (max-width:520px) {
  .side-row { grid-template-columns:minmax(0,1fr) }
  .float { width:calc(100% - 24px); padding-inline:10px }
  .float-line { font-size:10px }
  .float-line.sm { font-size:9px }
  .route { padding-inline:7px; font-size:11px }
  .route.mk { padding-inline:6px }
  .gloss { font-size:10px; padding-inline:7px }
}