/* 视觉：亮色产品站。机台是扁平插画（白色腔体、浅灰腔内、一层落影），晶圆是唯一的彩色主体，信号橙只用于“激活”。 */
:root {
	--paper: #eef0f3;
	--paper-2: #e2e6eb;
	--surface: #ffffff;
	--well: #e4e8ed;
	--metal: #c9d0d9;
	--metal-2: #a3acb8;
	--edge: #c8ced7;
	--shade: rgba(24, 32, 48, .1);
	--ink: #111418;
	--ink-2: #3d4450;
	--ink-3: #626a77;
	--line: #d3d8df;
	--ghost: #e2e5ea;
	--accent: #ff4f00;
	--radius: 12px;
	--sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--col-left: clamp(24px, 7vw, 128px);
	--col-w: min(540px, 40vw);
	color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	transition: background-color .7s ease, color .7s ease;
}
/* 机台背后一团柔光，替代原来的图纸网点 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(60vw 70vh at 74% 52%, var(--surface), transparent 70%);
	opacity: .9;
	pointer-events: none;
	transition: opacity .7s;
}
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }

/* ---------- 舞台 ---------- */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#stage * { vector-effect: non-scaling-stroke; }
#stage .trace { vector-effect: none; }
.wall { fill: var(--surface); stroke: var(--edge); stroke-width: 1; stroke-linejoin: round; transition: fill .7s, stroke .7s; }
.shade { fill: var(--shade); stroke: none; transition: fill .7s; }
.well { fill: var(--well); stroke: none; transition: fill .7s; }
.seat { fill: none; stroke: var(--edge); stroke-width: 1; }
.pin { fill: var(--surface); stroke: var(--metal-2); stroke-width: 1; }
.bolt { fill: var(--metal-2); }
.handle { fill: var(--metal); }
.rail { fill: var(--metal); opacity: .55; transition: fill .7s; }
.valve { stroke: var(--metal-2); stroke-width: 3; stroke-linecap: round; }
.part { fill: var(--metal); stroke: var(--metal-2); stroke-width: 1; transition: fill .7s; }
.hub { fill: var(--surface); }
.fork { fill: var(--metal-2); }
.cap { fill: var(--metal); }
.pulse { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0; }
.world-text { font-family: var(--sans); font-size: 7px; font-weight: 500; fill: var(--ink-3); letter-spacing: .04em; }

/* 激活：橙线沿引线描到工位，再绕外壁一圈；移开时收回 */
#stage .trace {
	fill: none; stroke: var(--accent); stroke-width: calc(var(--u) * 2px);
	stroke-dasharray: 1 1; stroke-dashoffset: 1;
	transition: stroke-dashoffset .25s ease-in;
}
#stage .trace.lead.hot { stroke-dashoffset: 0; transition: stroke-dashoffset .2s ease-out; }
#stage .hot > .trace { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.3, .6, .2, 1) .16s; }

/* 参数页的材质晶圆：画布盖在 SVG 晶圆上，交接时互相淡入淡出 */
#wafer-gl { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s; }
#stage .wafer > .spin, #stage .wafer-sheen { transition: opacity .35s; }
body.gl-wafer #wafer-gl { opacity: 1; }
body.gl-wafer #stage .wafer > .spin, body.gl-wafer #stage .wafer-sheen { opacity: 0; }

.wafer-body { fill: url(#wGrad); }
.wafer-edge { fill: none; stroke: var(--metal-2); stroke-width: 1; }
.wafer-sheen { fill: url(#wSheen); pointer-events: none; }
.die { fill: transparent; stroke: rgba(30, 30, 60, .16); stroke-width: .6; transition: fill .4s; }
.m-dies .die.pick { fill: var(--accent); fill-opacity: .82; }
.heat { fill: url(#heatGrad); opacity: 0; transition: opacity .6s; }

.ov { opacity: 0; transition: opacity .5s; }
.m-rings .ov-rings, .m-split .ov-split, .m-stages .ov-stages { opacity: 1; }
.ring { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: .5; transition: stroke .2s, stroke-width .2s; }
.ring.hot { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2.4; }
.ring-t, .tick-t { font-family: var(--sans); font-weight: 600; font-size: 2.6px; fill: var(--ink); text-anchor: middle; }
.tick-t { font-size: 3.4px; fill: var(--ink-3); }
.half { fill: var(--ink); fill-opacity: .07; }
.split-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.big-t { font-family: var(--sans); font-weight: 700; font-size: 15px; fill: var(--ink); letter-spacing: -.03em; }
.tick { stroke: var(--ink-3); stroke-width: 1.2; }
.tick.lit { stroke: var(--ink); stroke-width: 3; }
.tick.fail, .tick-t.fail { stroke: var(--accent); fill: var(--accent); }
.tick-t.lit { fill: var(--ink); }

.hits * { fill: transparent; cursor: pointer; }
.leader { stroke: var(--ink-3); stroke-width: 1; }
.leader-dot { fill: var(--ink); }
.leaders { transition: opacity .3s; }
body:not([data-route="home"]) .leaders,
body:not([data-route="home"]) .hits { opacity: 0; pointer-events: none; }

.topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 6;
	display: flex; align-items: center; gap: 40px;
	padding: 28px var(--col-left) 0;
	pointer-events: none;
}
.topbar > * { pointer-events: auto; }
/* 标志：墨色方块 + 浅色 E + 信号橙横（静态文件见 brand/） */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 32px; height: 32px; flex: none; }
.mark-tile { fill: var(--ink); transition: fill .7s; }
.mark-e { fill: var(--paper); transition: fill .7s; }
.mark-bar { fill: var(--accent); }
.wordmark { font: 500 20px var(--sans); letter-spacing: -.01em; }
.wordmark b { font-weight: 700; }
.topnav { display: flex; gap: 34px; margin-left: auto; font-size: 16px; font-weight: 500; }
.topnav a { text-decoration: none; color: var(--ink-2); display: flex; gap: 7px; align-items: baseline; padding: 6px 0; border-bottom: 2px solid transparent; }
.topnav a i { font: normal 500 12.5px var(--sans); color: var(--ink-3); }
.topnav a:hover, .topnav a[aria-current] { color: var(--ink); }
.topnav a[aria-current] { border-bottom-color: var(--accent); }

/* ---------- 首页工位标注 ---------- */
.st-label {
	position: fixed; z-index: 4;
	display: flex; flex-direction: column; gap: 1px;
	text-decoration: none; white-space: nowrap;
	transition: opacity .3s, color .2s;
}
.st-label .id { font: 500 11px var(--sans); letter-spacing: .1em; color: var(--ink-3); }
.st-label b { font-size: 16px; font-weight: 500; }
.st-label .en { font: 500 10.5px var(--sans); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.st-label.hot b { color: var(--accent); }
.al-r { transform: translate(calc(-100% - 10px), -50%); align-items: flex-end; text-align: right; }
.al-l { transform: translate(10px, -50%); }
.al-c { transform: translate(-50%, calc(-100% - 8px)); align-items: center; text-align: center; }
.al-b { transform: translate(-50%, 8px); align-items: center; text-align: center; }
body:not([data-route="home"]) .st-label { opacity: 0; pointer-events: none; }

/* 滚动提示：钉在正文栏底部的尺寸线，写着下一节是什么；读到页末就收起 */
.scrollcue {
	position: fixed; left: var(--col-left); width: var(--col-w); bottom: 0; z-index: 5;
	padding-bottom: 24px; background: var(--paper);
	pointer-events: none; opacity: 0; transform: translateY(8px);
	transition: opacity .3s, transform .3s, background-color .7s;
}
.scrollcue.show { opacity: 1; transform: none; transition-delay: .5s; }
.scrollcue::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; }
.scrollcue button {
	position: relative; width: 100%; display: flex; align-items: center; gap: 14px;
	padding: 13px 0 12px; border: 0; border-top: 1px solid var(--line); background: var(--paper);
	color: var(--ink); font: 11px var(--sans); letter-spacing: .1em; text-align: left; cursor: pointer;
	transition: background-color .7s;
}
.scrollcue.show button { pointer-events: auto; }
.sc-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.sc-bar b { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.sc-n { color: var(--ink-3); white-space: nowrap; }
.sc-t { flex: 1; font: 14px var(--sans); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.sc-arrow { width: 10px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; animation: bob 1.6s ease-in-out infinite; }
.scrollcue button:hover .sc-t, .scrollcue button:hover .sc-arrow { color: var(--accent); }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------- 页面 ---------- */
.page {
	position: fixed; inset: 0; z-index: 3;
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--line) transparent;
	background: linear-gradient(90deg, var(--paper) 0, var(--paper) calc(var(--col-left) + var(--col-w) + 24px), transparent calc(var(--col-left) + var(--col-w) + 160px));
	transition: background .7s;
}
.page:not([data-page="home"]) { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 76px, #000 128px); mask-image: linear-gradient(180deg, transparent 0, transparent 76px, #000 128px); }
.page[data-page="home"] { background: none; pointer-events: none; }
.page[data-page="home"] .col { pointer-events: auto; }
.page.leaving { opacity: 0; transition: opacity .25s; }
.col { margin-left: var(--col-left); width: var(--col-w); padding: 22vh 0 18vh; }
.page.on .col > * { animation: rise .8s cubic-bezier(.2, .7, .1, 1) both; }
.page.on .col > :nth-child(2) { animation-delay: .08s; }
.page.on .col > :nth-child(3) { animation-delay: .16s; }
.page.on .col > :nth-child(n + 4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.kicker { display: flex; align-items: center; gap: 14px; font: 500 12px var(--sans); letter-spacing: .14em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 28px; }
.kicker::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.page[data-page="home"] .col { width: min(560px, 36vw); }
.display { font-size: clamp(40px, 4.5vw, 84px); line-height: 1.06; font-weight: 300; letter-spacing: -.04em; }
.display b, .title b { font-weight: 700; }
.title { font-size: clamp(32px, 3vw, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -.035em; }
.lead { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--ink-2); max-width: 30em; }
.idx { font: 700 clamp(44px, 4.5vw, 72px)/.9 var(--sans); letter-spacing: -.05em; color: var(--ghost); margin-bottom: 18px; transition: color .7s; }

.link { font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 36px; margin-top: 9vh; padding-top: 18px; border-top: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(30px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stats li:first-child b { color: var(--accent); }
.stats span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.swap-note { margin-top: 18px; }
.form-actions { margin-top: 0; }
.actions { display: flex; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.btn {
	display: inline-flex; align-items: center; gap: 14px;
	height: 48px; padding: 0 22px;
	background: var(--ink); color: var(--paper); border: 0; border-radius: 999px;
	font: 500 14px var(--sans); letter-spacing: .06em; text-decoration: none; cursor: pointer;
	transition: background-color .2s;
}
.btn::after { content: "→"; font-family: var(--sans); }
.btn:hover { background: var(--accent); color: #fff; }
.btn.sm { height: 42px; padding: 0 20px; font-size: 14.5px; }


.blk { margin-top: 11vh; }
.blk-h {
	position: relative; display: flex; align-items: baseline; gap: 14px;
	font: 600 19px var(--sans); color: var(--ink);
	padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.blk-h span:first-child { font: 600 12px var(--sans); letter-spacing: .08em; color: var(--accent); }
.blk h3 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; margin-bottom: 14px; }
.body { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }

.layers li { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: default; }
.layers .n, .stages .n { font: 500 12.5px var(--sans); color: var(--ink-3); padding-top: 4px; }
.layers b { font-size: 17px; font-weight: 500; transition: color .2s; }
.layers small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.layers li:hover b, .layers li:hover .n { color: var(--accent); }

.spec { margin-top: 20px; display: grid; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 112px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.spec dt { font: 500 13px var(--sans); color: var(--ink-3); padding-top: 2px; }

.stages { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.stages li { display: grid; grid-template-columns: 30px 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-3); transition: color .2s; }
.stages li.lit { color: var(--ink); }
.stages li.lit .n { color: var(--ink); }
.stages li.fail, .stages li.fail .n { color: var(--accent); }
.stage-state { margin-top: 14px; font: 13px var(--sans); color: var(--ink-2); min-height: 1.5em; }


.next { display: block; margin-top: 12vh; padding-top: 16px; border-top: 1px solid var(--line); text-decoration: none; }
.next small { font: 500 12.5px var(--sans); letter-spacing: .06em; color: var(--ink-3); }
.next b { display: block; margin-top: 8px; font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; letter-spacing: -.03em; transition: color .2s; }
.next:hover b { color: var(--accent); }

/* 设备方案：巨字溢出版心；每种机型一张操作界面主页截图 */
.sol { margin-top: 11vh; }
.word { font: 700 clamp(48px, 5vw, 84px)/.9 var(--sans); letter-spacing: -.04em; color: var(--ghost); white-space: nowrap; margin-bottom: 14px; }
.shot { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px var(--shade), 0 10px 30px var(--shade); }
.shot-link { display: block; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 9px 14px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); }
.sol .spec { margin: 0 0 18px; }
.ticks li { position: relative; padding: 9px 0 9px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 1px; background: var(--ink); }

/* 仿真 */
.swap { display: grid; gap: 8px; margin-top: 24px; }
.swap-row { display: grid; grid-template-columns: 54px repeat(4, 1fr); gap: 6px; align-items: stretch; }
.swap-row > span { font: 500 12.5px var(--sans); color: var(--ink-3); align-self: center; }
.swap-row > div { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 8px; font-size: 13.5px; text-align: center; }
.swap-row > div.diff { border-color: var(--accent); color: var(--accent); }
.chart { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); transition: background-color .7s; }
.chart svg { display: block; width: 100%; height: auto; }
.grid { stroke: var(--line); stroke-width: 1; }
.axis-t { font: 10.5px var(--sans); fill: var(--ink-3); }
.c-target { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.c-tc { fill: none; stroke: var(--accent); stroke-width: 2; }
.c-power { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.c-head { stroke: var(--ink); stroke-width: 1; }
.readout { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.readout div { padding: 10px 12px; font: 500 12px var(--sans); letter-spacing: .04em; color: var(--ink-3); border-right: 1px solid var(--line); }
.readout div:last-child { border-right: 0; }
.readout b { display: block; margin-top: 4px; font: 500 20px var(--sans); color: var(--ink); letter-spacing: -.02em; }
.fine { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.steps li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.steps .n { font: 500 12.5px var(--sans); color: var(--ink-3); }
.steps b { font-weight: 500; font-size: 16px; }
.steps small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.tag { font: 500 12px var(--sans); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.tag.office { border-color: var(--accent); color: var(--accent); }

/* 参数 */
.nums li { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nums .v { font: 600 clamp(40px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -.04em; }
.nums li:first-child .v { color: var(--accent); }
.nums span { font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* 价值 / 团队背景 */
.values li { display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); }
.values .n { font-size: 12.5px; font-weight: 500; color: var(--accent); padding-top: 4px; }
.values b { font-size: 18px; font-weight: 600; }
.values p { margin-top: 6px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }

/* 预约 */
.form { display: grid; gap: 26px; margin-top: 8px; }
.field label { display: block; font: 500 13px var(--sans); color: var(--ink-3); margin-bottom: 4px; }
.field input, .field textarea {
	width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent;
	padding: 10px 0; font: 16px var(--sans); color: var(--ink); border-radius: 0; outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { font: 13.5px var(--sans); padding: 8px 16px; background: transparent; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#form-note { font: 13px var(--sans); color: var(--accent); min-height: 1.4em; }

.dock { display: none; }

/* ---------- 工位页：机台淡成背景，正文铺满两栏（首页除外） ---------- */
#stage { transition: opacity .6s; }
@media (min-width: 760px) {
	body:not([data-route="home"]) { --col-w: min(1120px, calc(100vw - 2 * var(--col-left))); }
	body:not([data-route="home"]):not(.travel) #stage { opacity: .18; }
	body.gl-wafer:not(.travel) #wafer-gl { opacity: .1; }
	.page:not([data-page="home"]) { background: none; }
	.page header { max-width: 680px; }
	.page:not([data-page="home"]) .col { padding-top: 16vh; }

	/* 左栏讲是什么，右栏放列表、表格、图 */
	.blk, .sol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-flow: row dense; column-gap: 56px; align-items: start; }
	.blk > *, .sol > * { grid-column: 1; }
	.blk > .blk-h, .sol > .blk-h, .sol > .word { grid-column: 1 / -1; }
	.blk > :is(ol, ul, dl, .swap, .chart, form, .fine, .stage-state) { grid-column: 2; }
	.sol > .shot { grid-column: 2; grid-row: 3 / span 3; margin: 0; }

	/* 没有左栏文字的段落整段铺满，列表横排 */
	.blk:not(:has(> h3, > .body)) > * { grid-column: 1 / -1; }
	.blk > .values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
	.blk > .values li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line); }
	.blk > .layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
	.blk:not(:has(> h3, > .body)) > .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
	.blk > .form { max-width: 720px; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 759px) {
	:root { --col-left: 20px; --col-w: calc(100vw - 40px); }
	.st-label, .topnav { display: none; }
	.topbar { padding-top: 18px; justify-content: space-between; }
	.page { background: linear-gradient(180deg, transparent 0, transparent 38vh, var(--paper) 46vh); background-attachment: local; }
	.page[data-page="home"] { background: none; }
	.col { padding: 50vh 0 120px; }
	.page[data-page="home"] .col { width: var(--col-w); padding-top: 86px; }
	.scrollcue { bottom: 46px; padding-bottom: 6px; }
	.display { font-size: 38px; }
	.lead { font-size: 15px; margin-top: 18px; }
	.actions { margin-top: 24px; }
	.stats { grid-template-columns: repeat(2, auto); gap: 20px 32px; margin-top: 32px; }
	.blk, .sol { margin-top: 12vh; }
	.word { font-size: 72px; }
	.stages { grid-template-columns: 1fr; }
	.swap-row { grid-template-columns: 40px repeat(4, 1fr); }
	.swap-row > div { font-size: 11px; padding: 8px 4px; }
	.two { grid-template-columns: 1fr; }
	.nums li { grid-template-columns: 1fr; gap: 4px; }
	.dock {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
		background: var(--paper); border-top: 1px solid var(--ink); overflow-x: auto;
	}
	.dock a { flex: 1 0 auto; padding: 14px 12px; text-align: center; text-decoration: none; font: 11px var(--sans); letter-spacing: .06em; color: var(--ink-2); }
	.dock a[aria-current] { color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}