/* Shared editorial and application-entry components */
.badge,.tag {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  max-width:100%; min-height:30px; padding:3px 14px;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-panel-2); color:var(--c-muted);
  box-shadow:var(--shadow-xs); font-size:13px; overflow-wrap:anywhere;
}
.badge b { color:var(--c-text) }
.pulse { width:8px; height:8px; border-radius:var(--r-circle); background:var(--c-success); box-shadow:0 0 0 4px var(--c-success-soft); flex:none }
.tag { gap:6px; min-height:28px; padding:3px 10px; box-shadow:none; font-size:12px }
.tag--success { background:var(--c-success-soft); color:var(--c-success-ink); border-color:var(--c-note-direct-edge) }
.tag--warn { background:var(--c-warn-soft); color:var(--c-warn-ink) }
.tag--error { background:var(--c-error-soft); color:var(--c-error-ink); border-color:var(--c-note-reject-edge) }
.facts { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.facts li { max-width:100%; padding:6px 12px; background:var(--c-panel-2); color:var(--c-muted); border:1px solid var(--c-border); border-radius:var(--r-pill); font-size:12px; overflow-wrap:anywhere }
.facts strong { color:var(--c-text) }
.appstore-button { min-height:56px; background:var(--c-accent); color:var(--c-text); box-shadow:var(--shadow-cta); gap:12px }
.appstore-button > svg { width:26px; height:28px }
.appstore-button__words { display:flex; flex-direction:column; text-align:left; line-height:1.25; gap:3px }
.appstore-button__words small { font-size:11px }
.appstore-button__words strong { font-size:16px }
.official-shot { width:100%; max-width:280px; flex-shrink:0; margin:0 auto; color:var(--c-muted) }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-tile) }
.official-shot img,.shot-placeholder { border:1px solid var(--c-border) }
.official-shot figcaption { font-size:13px; line-height:1.6; margin-top:12px }
.shot-placeholder { aspect-ratio:750/1334; display:grid; place-items:center; border-radius:var(--r-tile); background:var(--c-panel); color:var(--c-muted); text-align:center; padding:20px }
.device-card { display:flex; align-items:flex-start; gap:24px }
.device-card__icon { width:48px; height:64px; flex:none; color:var(--c-text) }
.device-card__body { min-width:0 }
.device-card p { color:var(--c-muted) }
.device-card a { text-underline-offset:.3em }
.article-card { display:flex; flex-direction:column; gap:16px }
.article-card h3 { margin:0; font-size:21px }
.article-card h3 a { text-decoration:none }
.article-card h3 a:hover { text-decoration:underline }
.article-card p { color:var(--c-muted); margin:0 }
.article-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--c-muted) }
.term-card dt { font-family:var(--font-mono); font-weight:var(--weight-heading); font-size:20px; margin-bottom:12px; overflow-wrap:anywhere }
.term-card dd { margin:0; color:var(--c-muted) }
.callout { margin:28px 0; padding:22px 24px; border:1px solid var(--c-note-proxy-edge); border-left:4px solid var(--c-accent); border-radius:var(--r-md); background:var(--c-note-proxy); color:var(--c-text) }
.callout p:last-child { margin-bottom:0 }
.callout--success { background:var(--c-success-soft); color:var(--c-success-ink); border-color:var(--c-note-direct-edge); border-left-color:var(--c-success) }
.callout--warn { background:var(--c-warn-soft); color:var(--c-warn-ink); border-color:var(--c-warn); border-left-color:var(--c-warn) }
.callout--error { background:var(--c-error-soft); color:var(--c-error-ink); border-color:var(--c-note-reject-edge); border-left-color:var(--c-error) }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-lg); margin-bottom:40px }
.toc a { padding:9px 14px; min-height:44px; border-radius:var(--r-pill); text-decoration:none; font-size:14px }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-accent); color:var(--c-text) }
.toc--sticky { position:sticky; top:16px; z-index:10 }
.faq-list { border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel-2); color:var(--c-text); box-shadow:var(--shadow-sm) }
.faq-item { padding:0 24px }
.faq-item + .faq-item { border-top:1px solid var(--c-border) }
.faq-item summary { position:relative; padding:22px 32px 22px 0; cursor:pointer; list-style:none; font-weight:var(--weight-heading) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font-family:var(--font-mono); font-size:20px; color:var(--c-muted) }
.faq-item[open] summary::after { content:"−" }
.faq-item > div { padding-bottom:22px; color:var(--c-muted) }
.faq-item p:last-child { margin:0 }
.feature-tabs { max-width:100%; min-width:0 }
.feature-tabs [role="tablist"] { display:flex; align-items:center; width:max-content; max-width:100%; margin:0 auto 64px; padding:8px; gap:6px; overflow-x:auto; scrollbar-width:thin; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-pill); box-shadow:var(--shadow-sm) }
.feature-tabs [role="tab"] { flex:none; min-height:44px; padding:10px 22px; border:0; border-radius:var(--r-pill); background:var(--c-clear); color:var(--c-muted); font-size:15px; white-space:nowrap }
.feature-tabs [role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-text) }
.feature-tabs [role="tabpanel"]:not([hidden]) { animation:panel-in var(--duration-panel) ease-out }
@keyframes panel-in { from { opacity:0 } to { opacity:1 } }
.feature-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center }
.feature-detail p { color:var(--c-muted); line-height:1.9 }
.mini-board { position:relative; min-width:0; min-height:280px; padding:60px 24px; display:flex; flex-direction:column; justify-content:center; gap:24px; background-color:var(--c-panel-2); color:var(--c-text); background-image:radial-gradient(var(--c-border) 1px,var(--c-clear) 1px); background-size:18px 18px; border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow-x:clip }
.mini-note { padding:16px; border:1px solid var(--c-note-proxy-edge); border-radius:var(--r-note); background:var(--c-note-proxy); color:var(--c-text); box-shadow:var(--shadow-note) }
.mini-board .mini-note + .mini-note { position:relative }
.mini-board .mini-note + .mini-note::before { content:""; position:absolute; left:32px; bottom:100%; height:25px; border-left:1px dashed var(--c-violet) }
.mini-board__label { position:absolute; top:16px; right:16px; max-width:calc(100% - 32px); padding:3px 10px; border:1px solid var(--c-violet); border-radius:var(--r-pill); background:var(--c-violet-soft); color:var(--c-violet-ink); font-size:12px; overflow-wrap:anywhere }
.table-scroll { min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-md) }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--c-panel-2); color:var(--c-text) }
.data-table th,.data-table td,.prose th,.prose td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--c-border); overflow-wrap:normal; word-break:normal; vertical-align:top }
.data-table th,.prose th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-heading) }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; background:var(--c-panel-2); color:var(--c-text) }
.data-table code,.prose td code { overflow-wrap:anywhere; white-space:normal }
.dl-fab { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:15; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:14px 18px; border:1px solid var(--c-note-proxy-edge); border-radius:var(--r-md); background:var(--c-accent); color:var(--c-text); box-shadow:var(--shadow-sm); text-decoration:none; font-size:14px }
.dl-fab svg { width:22px; height:22px; flex:none }
.dl-fab span { min-width:0; overflow-wrap:anywhere }
.article-store-card { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:64px }
.article-store-card > div { min-width:0 }
.article-store-card h2 { font-size:24px; margin-bottom:12px }
.article-store-card .btn { flex-shrink:0 }
.group-list { border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel-2); color:var(--c-text); box-shadow:var(--shadow-sm) }
.group-list a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; min-height:60px; text-decoration:none }
.group-list a + a { border-top:1px solid var(--c-border) }
.group-list a::after { content:"›"; color:var(--c-muted) }

/* Approved first-screen composition: light terminal chrome and rule canvas. */
.hero { position:relative; isolation:isolate; overflow:hidden; overflow-x:clip; background:var(--c-bg); color:var(--c-text); border-radius:0 0 var(--r-xl) var(--r-xl); box-shadow:0 1px 0 var(--c-border); padding:32px 24px 26px }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(circle,var(--c-border) 1.1px,var(--c-clear) 1.7px); background-size:22px 22px; background-position:11px 11px; mask-image:linear-gradient(to bottom,var(--c-text) 0,var(--c-text) 72%,var(--c-clear) 100%) }
.glow { position:absolute; z-index:-1; border-radius:var(--r-circle); pointer-events:none; filter:blur(8px); will-change:transform,opacity }
.glow--lilac { width:780px; height:580px; left:50%; margin-left:-840px; top:330px; background:radial-gradient(closest-side,var(--glow-lilac),var(--c-clear)); animation:drift-a 22s ease-in-out infinite alternate }
.glow--peach { width:760px; height:560px; left:50%; margin-left:70px; top:380px; background:radial-gradient(closest-side,var(--glow-peach),var(--c-clear)); animation:drift-b 26s ease-in-out infinite alternate }
@keyframes drift-a { from { transform:translate3d(0,0,0) scale(1); opacity:.88 } to { transform:translate3d(52px,-28px,0) scale(1.08); opacity:1 } }
@keyframes drift-b { from { transform:translate3d(0,0,0) scale(1.04); opacity:1 } to { transform:translate3d(-48px,24px,0) scale(.98); opacity:.84 } }
.hero-copy { max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center }
.hero-copy .badge { margin:0 0 18px; height:30px; padding:0 14px 0 12px }
.hero h1 { letter-spacing:-.02em }
.hero h1 mark { position:relative; z-index:0; background:var(--c-clear); color:inherit; padding:0 .04em; white-space:nowrap }
.hero h1 mark::before { content:""; position:absolute; z-index:-1; left:-.06em; right:-.06em; top:.44em; bottom:-.07em; border-radius:var(--r-xs); background:var(--c-accent) }
.lede { max-width:620px; margin:0 0 16px; font-size:15.5px; line-height:1.62; color:var(--c-muted) }
.lede strong { color:var(--c-text) }
.platforms ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px }
.platforms a { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px; border-radius:var(--r-pill); font-size:13.5px; color:var(--c-muted); text-decoration:none; transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease }
.platforms a:hover { background:var(--c-panel); color:var(--c-text) }
.platforms svg { width:18px; height:18px; flex:none }
.platforms .rule { width:1px; height:16px; background:var(--c-border); margin:0 8px }
.platforms .pill { border:1px solid var(--c-border); background:var(--c-panel-2); color:var(--c-text); padding:0 13px; margin-left:4px }
.board-wrap { position:relative; margin:30px auto 0 }
.board { position:relative; width:1120px; margin:0 auto 17px; padding-top:40px }
.board-tag { position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px 0 10px; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-sm); box-shadow:var(--shadow-xs); font-size:12.5px; white-space:nowrap }
.board-tag svg { width:15px; height:15px; color:var(--c-warn) }
.board-tag code { font-size:12px }
.board-tag .sep { color:var(--c-muted) }
.window { position:relative; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-window); overflow:hidden }
.win-bar { height:40px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid var(--c-border) }
.win-dots { display:flex; gap:7px }
.win-dots i { width:10px; height:10px; border-radius:var(--r-circle); flex:none }
.win-dots i:nth-child(1) { background:var(--c-error) }
.win-dots i:nth-child(2) { background:var(--c-warn) }
.win-dots i:nth-child(3) { background:var(--c-success) }
.win-title { font-family:var(--font-mono); font-size:11.5px; color:var(--c-muted); white-space:nowrap }
.win-title b { color:var(--c-text) }
.win-body { display:grid; grid-template-columns:56px 1fr; height:324px }
.lanes { display:grid; grid-template-rows:repeat(3,1fr); background:var(--c-lane); color:var(--c-muted); border-right:1px solid var(--c-border) }
.lane-head { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-bottom:1px solid var(--c-border) }
.lane-head:last-child { border-bottom:0 }
.lane-head span { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-mono); font-size:11px; font-weight:var(--weight-heading); letter-spacing:.14em; color:var(--c-muted) }
.lane-head i { width:7px; height:7px; border-radius:var(--r-circle); flex:none }
.lane-head--proxy i { background:var(--c-accent) }
.lane-head--direct i { background:var(--c-success) }
.lane-head--reject i { background:var(--c-error) }
.stage { position:relative; min-width:0 }
.stage::before,.stage::after { content:""; position:absolute; left:0; right:0; height:1px; background:var(--c-border) }
.stage::before { top:108px }
.stage::after { top:216px }
.wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.wire { fill:none; stroke:var(--c-line); stroke-width:1 }
.wire--back { stroke:var(--c-violet); stroke-width:1.25; stroke-dasharray:4 4 }
.ah,.start { fill:var(--c-line) }
.ah--back { fill:var(--c-violet) }
.wire-label { font-family:var(--font-body); font-size:10.5px; fill:var(--c-muted) }
.wire-label--back { fill:var(--c-violet-ink); font-weight:var(--weight-heading) }
.note { position:absolute; height:50px; padding:7px 12px; border:1px solid; border-radius:var(--r-note); box-shadow:var(--shadow-note); display:flex; flex-direction:column; justify-content:center; gap:2px; color:var(--c-text) }
.note code { font-size:11.5px; line-height:1.3; color:var(--c-text); white-space:nowrap }
.note span { font-size:10.5px; line-height:1.3; color:var(--c-muted); white-space:nowrap }
.note--proxy { background:var(--c-note-proxy); border-color:var(--c-note-proxy-edge) }
.note--direct { background:var(--c-note-direct); border-color:var(--c-note-direct-edge) }
.note--reject { background:var(--c-note-reject); border-color:var(--c-note-reject-edge) }
.n1 { left:40px; top:29px; width:244px }
.n2 { left:316px; top:137px; width:230px }
.n3 { left:578px; top:245px; width:204px }
.n4 { left:784px; top:29px; width:124px }
.gate { position:absolute; width:60px; height:60px; display:grid; place-items:center }
.gate::before { content:""; position:absolute; width:42px; height:42px; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-line); border-radius:var(--r-gate); transform:rotate(45deg); box-shadow:var(--shadow-xs) }
.gate span { position:relative; font-size:10.5px; color:var(--c-text); white-space:nowrap }
.g1 { left:316px; top:24px }
.g2 { left:578px; top:132px }
.g3 { left:814px; top:240px }
.out { position:absolute; height:30px; padding:0 12px 0 10px; display:inline-flex; align-items:center; gap:7px; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-pill); box-shadow:var(--shadow-xs); font-size:12px; white-space:nowrap }
.out i { width:7px; height:7px; border-radius:var(--r-circle); flex:none }
.out--proxy i { background:var(--c-accent); box-shadow:0 0 0 2px var(--c-note-proxy) }
.out--direct i { background:var(--c-success); box-shadow:0 0 0 2px var(--c-success-soft) }
.out--reject i { background:var(--c-error); box-shadow:0 0 0 2px var(--c-error-soft) }
.o1 { left:408px; top:39px }
.o2 { left:670px; top:147px }
.o3 { left:906px; top:255px }
.o4 { left:940px; top:39px }
.cursor { position:absolute; display:flex; align-items:flex-start; gap:2px; pointer-events:none }
.cursor svg { width:16px; height:16px; flex:none }
.cursor svg path { fill:currentColor; stroke:var(--c-panel-2); stroke-width:1.2; stroke-linejoin:round }
.cursor-tag { margin-top:12px; padding:2px 10px; border:1.5px solid; border-radius:var(--r-pill); font-size:12px; font-weight:var(--weight-heading); line-height:18px; white-space:nowrap }
.cursor--violet { color:var(--c-violet) }
.cursor--violet .cursor-tag { background:var(--c-violet-soft); border-color:var(--c-violet); color:var(--c-violet-ink) }
.cursor--green { color:var(--c-success) }
.cursor--green .cursor-tag { background:var(--c-success-soft); border-color:var(--c-success); color:var(--c-success-ink) }
.cursor--pink { color:var(--c-error); flex-direction:row-reverse }
.cursor--pink svg { transform:scaleX(-1) }
.cursor--pink .cursor-tag { background:var(--c-error-soft); border-color:var(--c-error); color:var(--c-error-ink) }
.c-route { left:68px; top:84px }
.c-sub { left:498px; top:62px }
.c-demand { left:470px; top:250px }
.dock { position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); display:flex; gap:8px }
.dock span { display:inline-flex; align-items:center; height:34px; padding:0 14px; background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-tile); box-shadow:var(--shadow-sm); font-family:var(--font-mono); font-size:11.5px; white-space:nowrap }

/* Preview-only token samples; no inline presentation is needed. */
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:16px }
.swatch { border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-panel-2); color:var(--c-text) }
.swatch::before { content:""; display:block; height:64px; background:var(--sample-color,var(--c-bg)) }
.swatch code { display:block; padding:12px; font-size:11px }
.swatch--bg { --sample-color:var(--c-bg) }
.swatch--panel { --sample-color:var(--c-panel) }
.swatch--white { --sample-color:var(--c-panel-2) }
.swatch--lane { --sample-color:var(--c-lane) }
.swatch--border { --sample-color:var(--c-border) }
.swatch--line { --sample-color:var(--c-line) }
.swatch--faint { --sample-color:var(--c-faint) }
.swatch--text { --sample-color:var(--c-text) }
.swatch--muted { --sample-color:var(--c-muted) }
.swatch--accent { --sample-color:var(--c-accent) }
.swatch--accent-dark { --sample-color:var(--c-accent-dark) }
.swatch--violet { --sample-color:var(--c-violet) }
.swatch--violet-soft { --sample-color:var(--c-violet-soft) }
.swatch--violet-ink { --sample-color:var(--c-violet-ink) }
.swatch--success { --sample-color:var(--c-success) }
.swatch--success-soft { --sample-color:var(--c-success-soft) }
.swatch--success-ink { --sample-color:var(--c-success-ink) }
.swatch--warn { --sample-color:var(--c-warn) }
.swatch--warn-soft { --sample-color:var(--c-warn-soft) }
.swatch--warn-ink { --sample-color:var(--c-warn-ink) }
.swatch--error { --sample-color:var(--c-error) }
.swatch--error-soft { --sample-color:var(--c-error-soft) }
.swatch--error-ink { --sample-color:var(--c-error-ink) }
.swatch--proxy { --sample-color:var(--c-note-proxy) }
.swatch--proxy-edge { --sample-color:var(--c-note-proxy-edge) }
.swatch--direct { --sample-color:var(--c-note-direct) }
.swatch--direct-edge { --sample-color:var(--c-note-direct-edge) }
.swatch--reject { --sample-color:var(--c-note-reject) }
.swatch--reject-edge { --sample-color:var(--c-note-reject-edge) }
.swatch--clear { --sample-color:var(--c-clear) }
.swatch--veil { --sample-color:var(--c-veil) }
.swatch--lilac { --sample-color:var(--glow-lilac) }
.swatch--peach { --sample-color:var(--glow-peach) }
.preview-buttons { display:flex; align-items:center; flex-wrap:wrap; gap:16px }
.preview-facts { margin-top:24px }
.preview-type { margin-top:48px }
.preview-type .type-display { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:var(--size-h1); line-height:1.2 }
.preview-tabs-note { margin-top:24px; font-size:13px; color:var(--c-muted) }
@media (max-width:1220px) {
  .board-wrap { overflow-x:auto; padding:0 16px 28px; margin-bottom:-28px; scrollbar-width:thin; max-width:100% }
  .board { margin-left:0 }
}
@media (max-width:768px) {
  .feature-detail { grid-template-columns:minmax(0,1fr); gap:40px }
  .feature-tabs [role="tablist"] { margin-bottom:40px; border-radius:var(--r-lg) }
  .article-store-card { flex-direction:column; align-items:flex-start }
}
@media (max-width:640px) {
  .hero { padding:26px 16px 22px; border-radius:0 0 var(--r-mobile) var(--r-mobile) }
  .hero h1 { margin-bottom:18px }
  .hero .cta-row { width:100% }
  .hero .btn { flex:1 1 0; padding:10px 14px; font-size:14px }
  .lede { font-size:14.5px }
  .platforms .rule { display:none }
  .board { zoom:.62 }
  .glow--lilac { margin-left:-560px; top:420px }
  .glow--peach { margin-left:-120px; top:480px }
  .device-card { gap:18px }
  .device-card__icon { width:36px; height:52px }
  .feature-tabs [role="tab"] { padding:10px 16px }
  .faq-item { padding-inline:20px }
  .facts { flex-direction:row; flex-wrap:wrap; gap:6px }
  .facts li { padding:5px 9px; font-size:11px }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); padding:12px 16px }
}
@media (prefers-reduced-motion:reduce) {
  .glow { animation:none; will-change:auto }
  .feature-tabs [role="tabpanel"]:not([hidden]) { animation:none }
}