/* =========================================================
TouchBridge project page — minimal blog style
想改主题色/字体，只需要改下面 :root 里的变量
========================================================= */
:root {
--text: #1d1d1f;
--muted: #6e6e73;
--faint: #a1a1a6;
--line: #e8e2d8;
--bg: #faf8f4; /* 页面背景：暖米白 */
--surface: #fffefb; /* 卡片 / 导航栏 / 图表底色 */
--bg-soft: #f2eee7;
--accent: #2a6fdb; /* 主题色：链接、强调数字 */
--serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; /* 标题 */
--sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* 正文 */
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* 图注、小标签 */
--col: 880px; /* 正文栏宽：文字、图片、视频、表格统一用这个宽度，左右边缘对齐 */
--wide: 880px; /* 宽图宽度（与正文同宽） */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--serif);
font-size: 18px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; display: block; }
/* ---------------- Hero / cover ---------------- */
.hero {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 72px 24px 40px;
text-align: center;
font-family: var(--sans);
}
.hero-inner { max-width: 1100px; margin: 0 auto; width: 100%; }
.venue {
display: inline-block;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}
.title {
font-size: clamp(3rem, 8vw, 5.6rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.02;
margin: 0;
}
.subtitle {
font-size: clamp(1.15rem, 2.4vw, 1.6rem);
font-weight: 400;
color: #3a3a3c;
margin: 18px auto 0;
max-width: 920px;
line-height: 1.35;
letter-spacing: -0.01em;
}
.authors {
margin: 36px auto 0;
max-width: 860px;
font-size: 17px;
line-height: 1.9;
}
.authors span { white-space: nowrap; margin: 0 9px; }
.authors a { color: var(--text); }
.authors a:hover { color: var(--accent); text-decoration: none; }
.authors sup, .affils sup { font-size: 11px; color: var(--muted); margin-left: 1px; }
.affils {
margin: 10px auto 0;
max-width: 900px;
font-size: 14.5px;
color: var(--muted);
line-height: 1.8;
}
.affils span { white-space: nowrap; margin: 0 8px; }
.equal { font-size: 13px; color: var(--faint); margin-top: 4px; }
.links { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 18px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
font-size: 14.5px;
font-weight: 500;
background: #fff;
transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--text); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.soon { color: var(--faint); cursor: default; }
.btn.soon:hover { border-color: var(--line); }
.demo-strip {
margin: 56px auto 0;
max-width: 1240px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.demo-strip figure { margin: 0; }
.demo-strip video {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 10px;
background: var(--bg-soft);
}
.demo-strip figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.scroll-hint {
margin-top: 36px; font-size: 12px; color: var(--faint);
letter-spacing: .1em; text-transform: uppercase;
}
/* ---------------- Article ---------------- */
.article { padding: 24px 24px 80px; border-top: 1px solid var(--line); }
.col { max-width: var(--col); margin: 0 auto; }
section { padding-top: 64px; }
.kicker {
font-family: var(--sans); font-size: 13px; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 6px;
}
h2 {
font-family: var(--sans); font-size: 2rem; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 22px;
}
h3 {
font-family: var(--sans); font-size: 1.25rem; font-weight: 600;
letter-spacing: -0.01em; margin: 42px 0 10px;
}
p { margin: 0 0 18px; }
ul, ol { padding-left: 1.3em; margin: 0 0 18px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }
.lead { font-size: 21px; color: #3a3a3c; }
/* figures */
figure.fig { margin: 34px auto; }
figure.fig.wide { max-width: var(--wide); margin-left: 50%; transform: translateX(-50%); width: min(var(--wide), calc(100vw - 48px)); }
figure.fig img, figure.fig video { width: 100%; border-radius: 8px; }
figure.fig figcaption {
font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted);
margin-top: 12px; max-width: var(--col); margin-left: auto; margin-right: auto;
}
figure.fig figcaption b { color: var(--text); font-weight: 600; }
.video-frame { position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; }
/* placeholder box — 用于还没准备好的内容 */
.placeholder {
border: 1.5px dashed #c7c7cc; border-radius: 10px; background: var(--bg-soft);
color: var(--faint); font-family: var(--sans); font-size: 14px;
display: flex; align-items: center; justify-content: center; text-align: center;
min-height: 220px; padding: 20px;
}
/* key numbers */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
margin: 30px 0; font-family: var(--sans);
}
.stat { padding: 20px 10px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .num { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.stat .lbl { font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
/* callout */
.callout {
border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin: 26px 0;
font-style: italic; color: #3a3a3c;
}
/* tables */
.table-wrap { overflow-x: auto; margin: 26px 0; }
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14.5px; }
caption { caption-side: bottom; text-align: left; font-size: 13.5px; color: var(--muted); padding-top: 10px; line-height: 1.5; }
th, td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 600; border-bottom: 1.5px solid var(--text); white-space: normal; vertical-align: bottom; line-height: 1.3; }
th:first-child, td:first-child { text-align: left; }
tr.ours td { font-weight: 600; background: #f3f7fe; }
.y { color: #1f9d55; } .n { color: #c7c7cc; } .nv { color: #a1a1a6; }
/* video grid for rollouts */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.video-grid figure { margin: 0; }
.video-grid video { width: 100%; border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-soft); }
.video-grid figcaption { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 6px; }
/* math */
.math { overflow-x: auto; margin: 20px 0; }
/* bibtex */
pre.bib {
background: var(--bg-soft); border-radius: 8px; padding: 18px 20px;
font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-x: auto; margin: 0;
}
/* footer */
footer { border-top: 1px solid var(--line); padding: 36px 24px 60px; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--faint); }
/* mobile */
@media (max-width: 760px) {
body { font-size: 17.5px; }
.demo-strip { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(3) { border-left: none; }
.stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.video-grid { grid-template-columns: 1fr; }
h2 { font-size: 1.65rem; }
.authors { font-size: 16px; }
.authors span, .affils span { margin: 0 6px; }
.hero { padding-left: 16px; padding-right: 16px; }
.article { padding-left: 16px; padding-right: 16px; }
figure.fig.wide { width: calc(100vw - 32px); }
}
/* side-by-side figures: ……
*/
.fig-row { display: flex; gap: 24px; align-items: flex-start; margin: 34px auto; }
.fig-row.wide { width: min(var(--wide), calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.fig-row figure { margin: 0; flex: var(--ar, 1) 1 0; min-width: 0; }
.fig-row img, .fig-row video { width: 100%; border-radius: 8px; }
.fig-row figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 12px; }
.fig-row figcaption b { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
.fig-row { flex-direction: column; gap: 28px; }
.fig-row.wide { width: calc(100vw - 32px); }
}
/* magnifier: wrap an image in …
(lens logic in main.js) */
.fig-row { margin-bottom: 8px; }
.zoom { position: relative; overflow: hidden; border-radius: 8px; }
.fig-row .zoom img, .zoom img { width: 100%; display: block; border-radius: 0; transition: transform .25s ease; transform-origin: center; }
.zoom-hint { font-family: var(--sans); font-size: 12.5px; color: var(--faint); text-align: center; margin: 6px 0 30px; }
@media (hover: hover) and (pointer: fine) { .zoom { cursor: crosshair; } }
/* magnifier lens shown above the cursor (see main.js) */
.zoom-lens {
position: fixed; z-index: 80; pointer-events: none; border-radius: 50%;
background-color: #fff; background-repeat: no-repeat;
border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(29,29,31,.12), 0 16px 40px rgba(29,29,31,.28);
opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease;
}
.zoom-lens.on { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .zoom-lens { transition: none; } }
@media (hover: none), (pointer: coarse) { .zoom-hint { display: none; } .fig-row { margin-bottom: 34px; } }
/* affiliations with emblems */
.affils { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 30px; margin-top: 14px; }
.affil { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.affils .affil span { margin: 0; white-space: nowrap; }
.affil img { height: 52px; width: auto; display: block; }
@media (max-width: 760px) {
.affils { gap: 14px 18px; }
.affil { width: calc(50% - 9px); }
.affils .affil span { white-space: normal; font-size: 13px; line-height: 1.4; }
.affil img { height: 42px; }
}
.affils + .equal { margin-top: 16px; }
/* cover badge: human-data-only */
.data-badge {
display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
margin: 44px auto 0; padding: 7px 16px 7px 7px;
border: 1px solid #d6e3fa; background: #f3f7fe; border-radius: 999px;
font-family: var(--sans); font-size: 14.5px; color: #3a3a3c; line-height: 1.4;
}
.data-badge .tag {
background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px;
letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.data-badge b { color: var(--accent); font-weight: 600; }
.data-badge + .demo-strip { margin-top: 22px; }
@media (max-width: 760px) {
.data-badge { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; text-align: center; }
}
/* badge inside the Demo section */
section .data-badge { margin: 0 0 20px; font-size: 13.5px; gap: 8px; padding: 6px 14px 6px 6px; }
section .data-badge .tag { font-size: 11.5px; padding: 4px 10px; }
section .data-badge + p { margin-top: 0; }
/* ---------- flowchart videos: human demo -> retarget & render -> real-robot replay ---------- */
.flow-head, .flow-row {
display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);
align-items: center;
}
.flow-head { margin-bottom: 4px; font-family: var(--sans); }
.flow-step {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.25;
}
.flow-step i {
font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
}
.flow-arrow { display: flex; justify-content: center; color: var(--accent); }
.flow-arrow svg { width: 22px; height: 22px; }
.flow-task {
font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin: 18px 0 8px;
}
.flow-row video {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--bg-soft);
}
figure.fig.flow figcaption { margin-top: 16px; }
@media (max-width: 760px) {
.flow-head, .flow-row { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); }
.flow-step { flex-direction: column; gap: 4px; font-size: 11.5px; }
.flow-step i { width: 18px; height: 18px; font-size: 11px; }
.flow-arrow svg { width: 14px; height: 14px; }
.flow-row video { border-radius: 5px; }
.flow-task { font-size: 11px; margin: 14px 0 6px; }
}
/* =====================================================================
v15: compact method/experiments, animated charts
===================================================================== */
:root {
--s1: var(--accent); /* ours / human-derived */
--s2: #e0895a; /* teleoperated */
--base: #a3abb6; /* baseline bars */
--track: #ece7df; /* bar track */
--bad: #c4473a; --bad-bg: #fdf4f3; --bad-line: #f2d6d2;
--good-bg: #f3f7fe; --good-line: #d6e3fa;
}
.brief { color: #3a3a3c; }
h4.mini {
font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em;
margin: 34px 0 12px;
}
/* Vive Tracker vs TouchBridge-Cap */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 6px; font-family: var(--sans); }
.cmp { border-radius: 10px; padding: 14px 16px; border: 1px solid; }
.cmp p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: #3a3a3c; }
.cmp p b { font-weight: 600; color: var(--text); }
.cmp-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.cmp-ic { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.cmp-bad { background: var(--bad-bg); border-color: var(--bad-line); }
.cmp-bad .cmp-ic { background: var(--bad); }
.cmp-good { background: var(--good-bg); border-color: var(--good-line); }
.cmp-good .cmp-ic { background: var(--accent); }
/* headline numbers (3.1) */
.headline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin: 6px 0 4px; font-family: var(--sans);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hl-item { padding: 18px 18px 16px 0; }
.hl-item + .hl-item { border-left: 1px solid var(--line); padding-left: 22px; }
.hl-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hl-ours { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.hl-vs { font-size: 1rem; color: var(--faint); font-weight: 500; }
.hl-ref { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--muted); }
.hl-lbl { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
/* animated grouped bar charts */
.bars-fig { font-family: var(--sans); }
.bars-legend { display: flex; justify-content: center; gap: 22px; font-size: 13.5px; color: #3a3a3c; margin-bottom: 14px; }
.bars-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-1 { background: var(--s1); } .sw-2 { background: var(--s2); }
.bars-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bc-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.bc-sub { font-size: 12px; color: var(--muted); margin: 2px 0 12px; }
.bc-plot { position: relative; height: 210px; margin-left: 30px; border-bottom: 1px solid #c9ccd2; }
.bc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed #e3e5ea; }
.bc-tick { position: absolute; right: calc(100% + 6px); transform: translateY(-50%); font-size: 11px; color: var(--muted);
font-variant-numeric: tabular-nums; }
.bc-groups { position: absolute; inset: 0; display: flex; }
.bc-group { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; position: relative; }
.bc-bar { width: min(18px, 34%); position: relative; height: var(--h); border-radius: 4px 4px 0 0;
transform-origin: bottom; transform: scaleY(0);
transition: transform .9s cubic-bezier(.22,.8,.24,1) var(--d, 0s); cursor: default; }
.bc-bar.s1 { background: var(--s1); } .bc-bar.s2 { background: var(--s2); }
.bc-group.single .bc-bar { width: min(26px, 52%); }
.bc-val { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 700;
color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-ann { position: absolute; left: 0; right: 0; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--accent);
transform: translateY(-100%); white-space: nowrap; }
.bc-val, .bc-ann { opacity: 0; transition: opacity .4s ease var(--d2, .9s); }
.bc-xl { display: flex; margin-left: 30px; margin-top: 7px; }
.bc-xl span { flex: 1; text-align: center; font-size: 11px; line-height: 1.25; color: #3a3a3c; padding: 0 1px; }
.bc-xl span.avg { font-weight: 700; color: var(--text); }
.is-in .bc-bar { transform: scaleY(1); }
.is-in .bc-val, .is-in .bc-ann { opacity: 1; }
.bc-bar:hover { filter: brightness(1.08); }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: #1d1d1f; color: #fff; font-family: var(--sans);
font-size: 12.5px; line-height: 1.35; padding: 6px 9px; border-radius: 6px; white-space: nowrap;
transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s; }
.viz-tip.on { opacity: 1; }
.viz-tip b { font-weight: 600; }
/* ranked horizontal bars (downstream policy performance) */
.rank-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px auto 0; font-family: var(--sans); }
.rank-cards.wide { width: min(var(--wide), calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.rank-card { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 14px; background: #fff; min-width: 0; }
.rank-card.main { grid-column: 1 / -1; }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rc-title { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.rank-card.main .rc-title { font-size: 1.7rem; }
.rc-delta { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.rc-row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 86px; align-items: center; gap: 14px; padding: 6px 0; }
.rank-card.main .rc-row { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 110px; }
.rc-label { font-size: 13.5px; color: #3a3a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-track { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.rc-fill { height: 100%; width: var(--w); border-radius: 999px; background: var(--base);
transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.22,.8,.24,1) var(--d, 0s); }
.rc-val { text-align: right; font-size: 15px; font-weight: 500; color: #3a3a3c; font-variant-numeric: tabular-nums; }
.rc-row.ours .rc-label { font-weight: 600; color: var(--text); }
.rc-row.ours .rc-label b { font-weight: 700; color: var(--accent); }
.rc-row.ours .rc-fill { background: var(--accent); }
.rc-row.ours .rc-val { font-size: 1.55rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.rank-card.main .rc-row.ours .rc-val { font-size: 2rem; }
.rc-split { border-top: 1px dashed var(--line); margin: 6px 0; }
.is-in .rc-fill { transform: scaleX(1); }
.rank-note { font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
.bc-bar, .rc-fill { transition: none; transform: none; }
.bc-val, .bc-ann { transition: none; opacity: 1; }
}
@media (max-width: 760px) {
.compare { grid-template-columns: 1fr; }
.headline { grid-template-columns: 1fr; }
.hl-item + .hl-item { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }
.hl-ours { font-size: 2rem; } .hl-ref { font-size: 1.4rem; }
.bars-panels { grid-template-columns: 1fr; gap: 30px; }
.rank-cards { grid-template-columns: 1fr; }
.rank-cards.wide { width: calc(100vw - 32px); }
.rank-card { padding: 14px 14px 10px; }
.rc-row, .rank-card.main .rc-row { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 58px; gap: 10px; }
.rc-label { font-size: 12.5px; }
.rc-row.ours .rc-val, .rank-card.main .rc-row.ours .rc-val { font-size: 1.25rem; }
.rc-title, .rank-card.main .rc-title { font-size: 1.3rem; }
}
/* label offsets for paired bars; wrap long labels on phones */
.bc-group:not(.single) .bc-bar.s1 .bc-val { left: auto; right: 2px; transform: none; }
.bc-group:not(.single) .bc-bar.s2 .bc-val { left: 2px; transform: none; }
@media (max-width: 760px) {
.rc-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
}
/* 72.5% vs 77.5% annotation */
.hl-pair { display: flex; align-items: flex-end; gap: 14px; }
.hl-stack { display: flex; flex-direction: column; gap: 6px; }
.hl-pair .hl-vs { padding-bottom: 24px; }
.hl-pair .hl-ours, .hl-pair .hl-ref { line-height: 1.05; }
.hl-tag { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.hl-tag-ours { color: var(--accent); }
.hl-claim { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #3a3a3c; }
.hl-pill { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--good-bg);
border: 1px solid var(--good-line); color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (min-width: 761px) { .headline { grid-template-columns: 1.5fr 1fr; } }
@media (max-width: 760px) {
.hl-pair { gap: 10px; }
.hl-pair .hl-ours { font-size: 2rem; } .hl-pair .hl-ref { font-size: 1.45rem; }
.hl-pair .hl-vs { padding-bottom: 22px; }
.hl-tag { font-size: 11px; }
}
/* ---------- tracking video + synchronized tactile curves ---------- */
.tac-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.tac-video { position: relative; }
.tac-video video { width: 100%; border-radius: 8px; display: block; background: #000; }
.tac-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color: #fff; font-family: var(--sans);
font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; pointer-events: none; }
.tac-panel { display: flex; flex-direction: column; font-family: var(--sans); min-width: 0; }
.tac-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.tac-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tac-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tac-plots { flex: 1; display: grid; grid-template-rows: repeat(5, 1fr); gap: 6px; min-height: 260px; }
.tac-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 58px; align-items: center; gap: 10px; min-height: 0; }
.tac-name { font-size: 13px; font-weight: 600; color: #3a3a3c; }
.tac-row.flat .tac-name { color: var(--faint); }
.tac-svg { width: 100%; height: 100%; min-height: 40px; display: block; overflow: visible; }
.tac-svg .bg { fill: var(--bg-soft); }
.tac-svg .grid { stroke: #e1e4e9; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tac-svg .full { fill: none; stroke: #cfd4db; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tac-svg .played { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tac-svg .area { fill: var(--accent); opacity: .12; }
.tac-svg .head { stroke: #1d1d1f; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tac-val { text-align: right; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tac-row.flat .tac-val { color: var(--faint); font-weight: 500; font-size: 11.5px; }
.tac-axis { display: grid; grid-template-columns: 62px minmax(0, 1fr) 58px; gap: 10px; margin-top: 4px; }
.tac-axis .ticks { position: relative; height: 26px; font-size: 11px; color: var(--muted); }
.tac-axis .ticks span { position: absolute; top: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.tac-axis .ticks em { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.tac-axis .ymax { font-size: 11px; color: var(--muted); text-align: right; }
@media (max-width: 760px) {
.tac-grid { grid-template-columns: 1fr; gap: 14px; }
.tac-plots { min-height: 230px; }
.tac-row, .tac-axis { grid-template-columns: 52px minmax(0, 1fr) 50px; gap: 8px; }
}
.tac-scale { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.zoom-hint { text-align: left; }
/* task flowchart inside each downstream-policy card; cards stacked full width */
.rc-flow { display: grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);
align-items: center; margin: 0 0 10px; }
.rc-flow img { width: 100%; aspect-ratio: 197 / 129; object-fit: cover; border-radius: 4px; display: block; background: var(--bg-soft); }
.rc-arrow { display: flex; justify-content: center; color: var(--accent); }
.rc-arrow svg { width: 11px; height: 11px; }
@media (max-width: 760px) {
.rc-flow { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); }
.rc-arrow svg { width: 11px; height: 11px; }
.rc-flow img { border-radius: 4px; }
}
/* ---------- top navigation bar: floating, frosted, highlights the current section ---------- */
.topbar {
position: fixed; z-index: 60; top: calc(12px + env(safe-area-inset-top, 0px));
left: max(16px, calc((100vw - var(--col)) / 2)); right: max(16px, calc((100vw - var(--col)) / 2));
height: 54px; padding: 0 8px 0 16px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-family: var(--sans);
background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 30px rgba(29, 29, 31, .07);
}
.topbar .brand { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.topbar .brand:hover { text-decoration: none; color: var(--accent); }
.toc { display: flex; align-items: center; gap: 2px; }
.toc a {
padding: 8px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted);
transition: color .15s, background-color .15s; white-space: nowrap;
}
.toc a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.toc a.active { color: var(--accent); background: #eaf1fd; }
.nav-toggle {
display: none; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px;
background: #fff; color: var(--text); font: 600 13px var(--sans); cursor: pointer;
}
.nav-toggle .cur { color: var(--accent); }
section[id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
.topbar { height: 50px; padding: 0 6px 0 14px; top: calc(8px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; }
.nav-toggle { display: inline-flex; }
.toc {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 32px rgba(29,29,31,.10);
display: none;
}
.topbar.open .toc { display: flex; }
.toc a { padding: 11px 12px; font-size: 14.5px; }
section[id] { scroll-margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .toc a { transition: none; } }
/* evaluation-setting chips on 3.2 sub-headings */
.mini-env { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2;
}
.env svg { width: 15px; height: 15px; flex: none; }
.env-sim { color: #5b4bc4; background: #f1effc; border: 1px solid #ddd8f6; }
.env-real { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
/* hover feel on downstream-policy cards (lift + soft shadow) and task frames (pop out) */
.rank-card { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.rc-flow img { position: relative; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, filter .28s ease; }
@media (hover: hover) and (pointer: fine) {
.rank-card:hover { transform: translateY(-4px); border-color: #c9daf6; box-shadow: 0 22px 48px rgba(29, 29, 31, .10); }
.rank-card:hover .rc-flow img { filter: saturate(1.06); }
.rc-flow img:hover { z-index: 2; transform: scale(1.18); filter: saturate(1.12);
box-shadow: 0 12px 26px rgba(29, 29, 31, .22); cursor: zoom-in; }
}
@media (prefers-reduced-motion: reduce) {
.rank-card, .rc-flow img { transition: none; }
.rank-card:hover, .rc-flow img:hover { transform: none; }
}
/* TouchBridge wordmark colours, sampled from the teaser logo */
.t-touch, .t-bridge { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-touch { color: #f0702a; background-image: linear-gradient(180deg, #fb8d33 0%, #f6782b 55%, #e2591d 100%); }
.t-bridge { color: #0b5aa6; background-image: linear-gradient(90deg, #08458e 0%, #0a59a8 45%, #1f74c6 100%); }
.title .t-touch, .title .t-bridge { padding-bottom: .06em; } /* keep descenders (g) inside the gradient */
.topbar .brand:hover .t-touch, .topbar .brand:hover .t-bridge { filter: brightness(1.08); }
/* ---------- page background: soft off-white, white surfaces, brand-tinted cover ---------- */
html { background: var(--bg); }
.hero {
background:
radial-gradient(900px 520px at 12% -8%, rgba(251, 141, 51, .13), transparent 62%),
radial-gradient(900px 520px at 88% -8%, rgba(31, 116, 198, .13), transparent 62%),
linear-gradient(180deg, #fdfcf9 0%, var(--bg) 100%);
}
.article { border-top-color: #e8e2d8; }
.btn, .nav-toggle, .rank-card, .toc { background-color: var(--surface); }
@media (min-width: 761px) { .toc { background: transparent; } }
.tac-svg .bg { fill: var(--surface); }
.flow-row video, .demo-strip video { background: #ece7de; }
footer { border-top-color: #e8e2d8; }
/* ---------- typography (in the spirit of pi.website): sans body, serif display, mono captions ---------- */
body { font-family: var(--sans); font-size: 18px; line-height: 1.625; color: #141414; }
p, li { color: #1c1c1e; }
.title { font-family: var(--sans); font-weight: 800; letter-spacing: -0.035em; }
.subtitle { font-family: var(--serif); font-weight: 400; color: #5e5e5e; letter-spacing: -0.005em; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
h2 { font-family: var(--serif); font-weight: 400; font-size: 2.35rem; letter-spacing: -0.015em; line-height: 1.15; }
h3 { font-family: var(--sans); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.005em; }
h4.mini { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; letter-spacing: 0; }
.kicker { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; }
figure.fig figcaption, .fig-row figcaption { font-family: var(--mono); font-size: 13px; line-height: 1.6; }
figure.fig figcaption b, .fig-row figcaption b { font-weight: 600; }
.callout { font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.45; }
.rc-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
.topbar .brand { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.toc a { font-size: 14.5px; }
.stat .num, .hl-ours, .hl-ref, .rc-row.ours .rc-val { font-family: var(--sans); }
@media (max-width: 760px) {
body { font-size: 17px; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.28rem; }
}
/* motivation: faithful-vs-scalable trade-off cards */
.tradeoff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 8px; font-family: var(--sans); }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.tcard.ours { border-color: #c9daf6; background: #f6f9ff; box-shadow: 0 10px 26px rgba(42, 111, 219, .08); }
.tcard-h { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.25; color: var(--text); min-height: 2.5em; display: flex; align-items: flex-start; }
.tcard.ours .tcard-h { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; font-size: 1.3rem; }
.tchips { display: flex; gap: 6px; margin: 8px 0 10px; flex-wrap: wrap; }
.tchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid; }
.tchip b { font-size: 11px; }
.tchip.ok { color: #1f7a4d; background: #eefaf3; border-color: #cdeedb; }
.tchip.no { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.tcard p { margin: 0; font-size: 15px; line-height: 1.5; color: #3a3a3c; }
@media (max-width: 760px) {
.tradeoff { grid-template-columns: 1fr; }
.tcard-h { min-height: 0; }
}
/* hero: "human data only" statement above the rollout strip (editorial, no heavy fill) */
.data-banner {
max-width: 1240px; margin: 52px auto 0; padding: 22px 6px;
display: flex; align-items: center; justify-content: center; gap: 34px;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
font-family: var(--sans); text-align: left;
}
.db-zero { display: flex; align-items: center; gap: 14px; padding-right: 34px; border-right: 1px solid var(--line); flex-shrink: 0; }
.db-zero .n {
font-family: var(--sans); font-size: 66px; font-weight: 800; line-height: .85; letter-spacing: -0.04em;
color: #e2591d; background-image: linear-gradient(180deg, #fb8d33 0%, #f6782b 55%, #e2591d 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .04em;
}
.db-zero .u { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--muted); }
.db-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.db-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.db-tag {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
color: #1c1c1e; background: var(--surface); border: 1px solid #ddd5c8; padding: 4px 11px; border-radius: 999px;
}
.db-tag.auto { color: #17683f; border-color: #cfe6d8; background: #f1f8f3; }
.db-txt { font-family: var(--serif); font-size: 1.85rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.012em; color: #141414; }
.db-txt em { font-style: italic; color: #0b5aa6; }
.live { width: 7px; height: 7px; border-radius: 50%; background: #22a861; animation: livepulse 1.8s ease-out infinite; flex-shrink: 0; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(34,168,97,.55); } 70%,100% { box-shadow: 0 0 0 6px rgba(34,168,97,0); } }
.data-banner + .demo-strip { margin-top: 22px; }
/* small corner chip on every rollout video */
.demo-strip figure { position: relative; }
.demo-strip figure::before {
content: "Autonomous"; position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none;
font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #1c1c1e;
padding: 3px 9px 3px 19px; border-radius: 999px;
background: radial-gradient(circle at 9.5px 50%, #22a861 3px, transparent 3.5px), rgba(255,254,251,.88);
box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }
@media (max-width: 760px) {
.data-banner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 2px; margin-top: 38px; }
.db-zero { border-right: 0; padding-right: 0; }
.db-zero .n { font-size: 56px; }
.db-txt { font-size: 1.45rem; }
.demo-strip figure::before { font-size: 9px; top: 6px; left: 6px; padding: 2px 7px 2px 16px; background: radial-gradient(circle at 8px 50%, #22a861 2.6px, transparent 3px), rgba(255,254,251,.88); }
}
/* banner without sentence: center it; note under the rollout strip */
.data-banner { padding: 18px 6px; gap: 30px; }
.db-zero { padding-right: 30px; }
.demo-note { max-width: 1240px; margin: 14px auto 0; font-family: var(--sans); font-size: 13.5px; font-style: italic; color: var(--muted); text-align: center; }
@media (max-width: 760px) {
.data-banner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.db-zero { border-right: 1px solid var(--line); padding-right: 20px; }
.db-zero .n { font-size: 48px; }
.db-zero .u { font-size: 11px; }
.db-tags { flex-direction: column; align-items: flex-start; gap: 6px; }
.db-tag { font-size: 11px; padding: 3px 9px; }
}
/* "contact-rich" pill: warm touch-orange */
.db-tag.contact { color: #b4501b; border-color: #f2d5bf; background: #fdf3ea; }
.tdot { width: 7px; height: 7px; border-radius: 50%; background: #f0702a; flex-shrink: 0; }
/* ---------- 2.2 Tac-Retarget: objective + canvas animations ---------- */
.tr-eq {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px;
margin: 22px 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
font-family: var(--serif); font-style: italic; font-size: 1.45rem; color: #1c1c1e;
}
.tr-eq sub, .tr-eq sup { font-size: .58em; }
.tr-min { font-style: normal; margin-right: 6px; }
.tr-min sub { font-style: italic; }
.tr-op { font-style: normal; color: var(--muted); }
.tr-term { padding: 1px 8px 3px; border-radius: 8px; }
.tr-term.c { background: #fdf0e4; color: #b4501b; }
.tr-term.g { background: #f2ecff; color: #6a3fc7; }
.tr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: .12em; }
.tr-dot.c { background: #f0702a; }
.tr-dot.g { background: #8c5cf0; }
figure.tr-viz { margin-top: 18px; margin-bottom: 30px; }
figure.tr-viz canvas {
display: block; width: 100%; border-radius: 14px; background: #121110;
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(20,16,10,.16);
}
@media (max-width: 760px) { .tr-eq { font-size: 1.15rem; padding: 12px 10px; } }
/* ---------- 3.2 contact preservation: method x task gallery ---------- */
figure.rv-fig { margin-top: 18px; margin-bottom: 34px; }
.rv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rv-grid {
display: grid; grid-template-columns: 112px repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 700px;
padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px rgba(60,45,20,.06);
font-family: var(--sans);
}
.rv-corner { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); align-self: end; padding-bottom: 4px; }
.rv-task { font-size: 14.5px; font-weight: 600; color: #1c1c1e; text-align: center; padding-bottom: 2px; align-self: end; }
.rv-letter { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); margin-right: 6px; }
.rv-method { display: flex; flex-direction: column; justify-content: center; font-size: 14px; line-height: 1.25; color: #1c1c1e; padding-right: 4px; }
.rv-method b { font-weight: 600; }
.rv-method span { font-size: 12.5px; color: var(--muted); }
.rv-method.ours b { background-image: linear-gradient(90deg, #f0702a, #fb8d33); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f0702a; font-weight: 700; }
.rv-method.ours span { color: #c25a1f; font-weight: 600; }
.rv-cell {
position: relative; border-radius: 12px; background: #fbfaf7; border: 1px solid #ece6dc; overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rv-cell.ours { background: linear-gradient(180deg, #fff6ee 0%, #fffaf5 100%); border-color: #f6cfb2; }
.rv-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60,45,20,.10); }
.rv-img { position: relative; aspect-ratio: 1.42; overflow: hidden; border-radius: 10px 10px 0 0; }
.rv-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); transform-origin: var(--rx) var(--ry); }
.rv-cell:hover .rv-img img { transform: translate(calc(50% - var(--rx)), calc(50% - var(--ry))) scale(2.4); }
.rv-ring {
position: absolute; left: var(--rx); top: var(--ry); width: var(--rr); aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: 50%; border: 2.5px solid currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,.55);
transition: transform .45s cubic-bezier(.2,.7,.2,1), left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), border-width .45s ease, opacity .45s ease;
}
.rv-cell:hover .rv-ring { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(2.4); border-width: 1px; box-shadow: none; opacity: .75; }
.rv-cell:hover .rv-ring::after { animation: none; }
.rv-cell.ok .rv-ring { color: #22a861; }
.rv-cell.bad .rv-ring { color: #e5484d; }
.rv-ring::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: rvpulse 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes rvpulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.6); opacity: 0; } }
.rv-verdict {
display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 10px 10px; padding: 4px 0;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; border-radius: 999px;
}
.rv-verdict i { font-style: normal; font-weight: 700; }
.rv-cell.ok .rv-verdict { color: #17683f; background: #edf8f1; }
.rv-cell.bad .rv-verdict { color: #b4282d; background: #fdeeee; }
@media (prefers-reduced-motion: reduce) { .rv-ring::after { animation: none; } .rv-cell, .rv-img img { transition: none; } }
@media (max-width: 760px) {
.rv-scroll { margin: 0 -16px; padding: 0 16px; }
.rv-grid { grid-template-columns: 86px repeat(4, 150px); min-width: 0; width: max-content; padding: 12px; gap: 8px; }
.rv-method { font-size: 12.5px; }
.rv-method span { font-size: 11px; }
}
/* "drag to rotate" badge next to the contact-graph heading */
.env.env-drag { color: #17683f; background: #edf8f1; border: 1px solid #cfe6d8; text-transform: none; letter-spacing: 0; font-weight: 600; }
.env.env-drag svg { width: 14px; height: 14px; }
/* "coming soon" tag on link buttons that are not live yet */
.btn.soon::after { content: "soon"; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); }