/* 测量物体运动的速度：斜面、秒表与读数专属样式。小车松绿，时间读数蜡黄，误差焦点赤陶。 */
.figure-wrap{--fig-ratio:840/410}
.figure-wrap>svg{overflow:visible}
.disclaimer{position:absolute;right:4px;bottom:2px;font-size:.7rem;font-weight:700;color:var(--muted);background:var(--panel);border-radius:999px;padding:.18rem .55rem}

/* 斜面 SVG */
.ground{stroke:#B9B2A2;stroke-width:3}
.ramp-body{fill:#F3EBD8;stroke:none}
.rail{stroke:var(--ink);stroke-width:12;stroke-linecap:round}
.rail-inner{stroke:var(--hair);stroke-width:5;stroke-linecap:round}
.ruler-line{stroke:#8A8474;stroke-width:2}
.tick-mark{stroke:#6E6A60;stroke-width:2}
.route{stroke:var(--pine);stroke-width:8;stroke-linecap:round;opacity:.55}
.route-target{stroke:var(--pine);stroke-width:6;stroke-linecap:round;stroke-dasharray:8 11;opacity:.22}
.stopper{fill:var(--pine-deep)}
.pt{fill:var(--bg);stroke:var(--ink);stroke-width:3.5}
.point-label{font:900 22px var(--serif);fill:var(--ink)}
.ruler-label{font-size:16px;fill:var(--muted);font-weight:700}
.mini-note{font-size:15px;fill:var(--pine-deep);font-weight:800}
.cart-body{filter:drop-shadow(0 3px 2px rgba(26,26,46,.16))}
.wheel{fill:var(--bg);stroke:var(--ink);stroke-width:4}
.hub{fill:var(--honey)}
.distance-bracket{stroke:var(--pine-deep);fill:var(--pine-deep);font-size:15px;font-weight:800}
.distance-bracket line{stroke-width:2.5}.distance-bracket text{stroke:var(--bg);stroke-width:5px;paint-order:stroke}
.front-guide{stroke:var(--ink);fill:var(--honey);stroke-width:2.5}
.ghost-marker{stroke:#B08A1E;fill:var(--honey);stroke-width:2.5}
.ghost-marker text{fill:var(--ink);stroke:var(--honey-soft);stroke-width:7px;paint-order:stroke;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

/* 分段比较：两条斜面并排 */
.pair{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair section{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--hair);border-radius:var(--r);padding:6px 8px;background:var(--bg)}
.pair h4{margin:0;font:900 .95rem var(--serif);color:var(--ink)}
.pair svg{width:100%;height:100%;display:block;overflow:visible}

/* 秒表：夜色面板 + 蜡黄数字 */
.watch{min-height:0;display:grid;align-content:center;gap:6px;padding:4px 6px}
.clock{display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(239,200,90,.18);padding-top:6px}
.clock:first-child{border-top:0;padding-top:0}
.clock small{color:#CFC8B4;font-size:.76rem;font-weight:700}
.clock b{font:900 clamp(1.5rem,2.6vw,2.4rem)/1.05 var(--serif);color:var(--honey);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock.big b{font-size:clamp(2.2rem,4.2vw,3.6rem)}
.clock.late small{color:#E9A493}.clock.late b{color:var(--honey);text-decoration:underline 3px var(--terra);text-underline-offset:6px}

/* 读数：时间读数蜡黄高亮，误差焦点赤陶 */
.metric.time b{background:linear-gradient(transparent 60%,var(--honey) 60%);align-self:flex-start;padding:0 2px}
.metric.time-late b{align-self:flex-start;padding:0 2px;background:linear-gradient(transparent 60%,var(--terra-soft) 60%);color:var(--terra)}
.metric.terra b{color:var(--terra)}
.metric .wait{font:700 .95rem var(--sans);color:var(--muted);letter-spacing:.02em}

/* 侧栏 */
.record b.q{color:var(--terra)}
.bars{display:grid;gap:9px}
.bar-row{display:grid;grid-template-columns:38px 1fr 64px;align-items:center;gap:8px;font-size:.84rem;font-weight:700;font-variant-numeric:tabular-nums}
.bar-row b{text-align:right;font-family:var(--serif)}
.bar-track{height:10px;background:var(--hair);border-radius:999px;overflow:hidden}
.bar-track i{height:100%;display:block;border-radius:999px;background:var(--pine)}
.side-tip b{color:var(--ink)}
.side .rule-card{margin-top:auto}
.rule-card.concealed{background:var(--panel);color:var(--muted);border:1.5px dashed #CFC6B2}
.rule-card.concealed .rule-zone{color:var(--muted)}.rule-card.concealed .rule-img{font-size:1rem;font-family:var(--sans);font-weight:700}

/* 控制台 */
.scrubber-label{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;color:#DCE5DF;font-size:.8rem;font-weight:700}
.scrubber-label input{flex:1;min-width:80px;accent-color:var(--honey)}
.controls output{font-variant-numeric:tabular-nums;color:var(--honey);font-weight:800;font-size:.8rem;white-space:nowrap}
.pick{display:flex;align-items:center;gap:6px;color:#DCE5DF;font-size:.8rem;font-weight:700;white-space:nowrap}
.pick select{border:1.5px solid rgba(254,252,246,.28);background:var(--pine-deep);color:#F3EEDF;border-radius:6px;padding:.3rem .35rem}
.pick input[type=checkbox],.pick input[type=range]{accent-color:var(--honey)}
.settings .pick input[type=range]{width:110px}

/* 录制画幅 */
body.presentation .disclaimer{font-size:1rem;padding:.3rem .8rem}
body.presentation .clock small{font-size:1.1rem}body.presentation .clock b{font-size:3.4rem}body.presentation .clock.big b{font-size:5rem}
body.presentation .metric .wait{font-size:1.3rem}
body.presentation .bar-row{font-size:1.15rem;grid-template-columns:52px 1fr 92px}
body.presentation .side-tip{font-size:1.1rem}body.presentation .pair h4{font-size:1.3rem}
body.presentation .rule-card.concealed .rule-img{font-size:1.3rem}

@media (max-width:1180px){.controls .check{display:none}}
@media (max-width:860px){
  #stage,.main,.left{align-content:start}.app-shell{align-content:start}
  .figure-wrap.has-pair{aspect-ratio:auto}
  .pair{grid-template-columns:1fr}.pair svg{height:auto;aspect-ratio:840/410}
  .scrubber-label{flex-basis:100%;min-width:0}
  .controls .spacer{display:none}
}
.metric.result b{color:var(--pine-deep)}