:root { --friction-ink:#173047; --friction-muted:#5e7080; --friction-blue:#176da3; --friction-orange:#d7682b; --friction-teal:#17877b; --friction-line:#d6e4ea; }
* { box-sizing:border-box; }
body.friction-page { margin:0; min-height:100vh; overflow-x:hidden; color:var(--friction-ink); background:linear-gradient(180deg,#f5fbfd 0%,#edf5f6 100%); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.friction-main { width:min(1320px,calc(100% - 32px)); margin:0 auto; padding:12px 0 22px; }
body.friction-page.xinyu-tool .tool-heading { padding:4px 0 10px; text-align:center; }
.friction-page .eyebrow { margin:0 0 3px; color:#307593; font-size:11px; font-weight:900; }
body.friction-page.xinyu-tool .tool-heading h1 { margin:0; color:#15334b; font-size:clamp(27px,3vw,40px); letter-spacing:-.03em; text-wrap:balance; }
.friction-page .lead { max-width:820px; margin:5px auto 0; color:var(--friction-muted); font-size:13px; font-weight:650; }
.friction-page .chips { display:flex; justify-content:center; gap:6px; margin-top:7px; }
.friction-page .chip { padding:3px 8px; border:1px solid #c9dce4; border-radius:999px; color:#426276; background:#fff; font-size:10px; font-weight:850; }
.friction-lab { display:grid; grid-template-columns:minmax(0,1fr) 330px; min-height:470px; overflow:hidden; border:1px solid var(--friction-line); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(35,75,92,.12); }
.friction-lab .stage { min-width:0; border-right:1px solid #e0eaee; }
.friction-lab .stage-head { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 16px; border-bottom:1px solid #e1eaed; background:#f7fbfc; }
.stage-kicker { margin:0 0 2px; color:#2f7b86; font-size:9px; font-weight:900; letter-spacing:.1em; }
.friction-lab .stage-title { margin:0; color:#173b51; font-size:18px; }
.friction-lab .stage-meta { margin:0; color:#5b7481; font-size:11px; font-weight:850; text-align:right; }
.permanent-truth { margin:8px 14px 0; padding:7px 10px; border-left:3px solid #e4a64e; border-radius:8px; color:#6c5a3b; background:#fff9ec; font-size:10px; font-weight:750; }
.experiment-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:9px 14px 0; }
.trial-card { min-width:0; padding:9px 10px 8px; border:1px solid #dbe6ea; border-radius:14px; background:linear-gradient(155deg,#fff,#f4fafb); }
.trial-card > header { min-height:43px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:7px; }
.trial-letter { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--friction-teal); font-size:14px; font-weight:950; }
.trial-letter.is-b { background:var(--friction-orange); }
.trial-conditions { min-width:0; margin:0; color:#526b79; font-size:10px; line-height:1.35; font-weight:750; }
.trial-readout { min-width:45px; color:#244960; font-size:20px; text-align:right; white-space:nowrap; }
.spring-gauge { width:100%; height:68px; display:block; overflow:visible; }
.gauge-body { fill:#f8fcfd; stroke:#a9c1ca; stroke-width:2; }
.gauge-axis,.gauge-tick { stroke:#58778a; vector-effect:non-scaling-stroke; }
.gauge-axis { stroke-width:2; }.gauge-tick { stroke-width:1; }
.gauge-label { fill:#536b79; font-size:12px; font-weight:850; text-anchor:middle; }
.gauge-unit { fill:#6a7c87; font-size:11px; font-weight:850; }
.gauge-pointer { fill:var(--friction-orange); stroke:#a74318; stroke-width:1; opacity:0; }
[data-phase="running"] .gauge-pointer,[data-phase="settled"] .gauge-pointer { opacity:1; }
.motion-track { position:relative; height:51px; margin-top:1px; overflow:hidden; border-radius:10px; background:linear-gradient(180deg,#edf5f3 0 67%,#c8d7d5 68% 75%,#e6efed 76%); }
.block { position:absolute; left:43%; top:13px; width:42px; height:25px; display:grid; place-items:center; border:2px solid #2b5263; border-radius:5px; color:#214353; background:#d9ece8; font-size:11px; font-weight:950; transform:translateX(calc(-50% + var(--travel,0px))); }
.block-b { background:#f9e4d3; }
.force-vector { position:absolute; top:25px; z-index:2; height:3px; border-radius:999px; color:#345a70; background:currentColor; opacity:0; }
[data-phase="running"] .force-vector,[data-phase="settled"] .force-vector { opacity:1; }
.force-vector span { position:absolute; bottom:7px; color:inherit; font-size:10px; font-weight:950; white-space:nowrap; }
.friction-vector { left:calc(43% - 21px + var(--travel,0px)); color:#345a70; transform:translateX(-100%); }
.friction-vector::before { position:absolute; left:-1px; top:-5px; border-right:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; content:""; }
.friction-vector span { left:0; }
.pull-vector { left:calc(43% + 21px + var(--travel,0px)); color:#b65223; }
.pull-vector::after { position:absolute; right:-1px; top:-5px; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; content:""; }
.pull-vector span { right:0; }
.balance-line { margin:5px 0 0; color:#2e746e; font-size:10px; font-weight:900; text-align:center; }
.comparison-readouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:8px 14px 0; }
.comparison-readouts span { display:flex; align-items:center; justify-content:center; gap:10px; min-height:42px; border:1px solid #cfe0e5; border-radius:11px; color:#5b6f7b; background:#f4f9fa; font-size:10px; font-weight:850; }
.comparison-readouts strong { color:#194c65; font-size:20px; }
.local-conclusion { min-height:38px; display:grid; place-items:center; margin:8px 14px 12px; padding:7px 10px; border-radius:10px; color:#174f49; background:#e8f6f1; font-size:11px; font-weight:850; text-align:center; }
.local-conclusion[hidden] { display:none; }
.friction-lab .control-panel { min-width:0; padding:14px; background:#fbfdfd; }
.control-title span { color:#38808a; font-size:9px; font-weight:900; }
.control-title h2 { margin:3px 0 10px; color:#213e52; font-size:20px; line-height:1.22; text-wrap:balance; }
.preset-grid { display:grid; gap:7px; }
.preset-button { min-height:58px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; width:100%; padding:8px 10px; border:1px solid #d3e1e5; border-radius:10px; color:#2e4e60; background:#fff; text-align:left; cursor:pointer; }
.preset-button strong { font-size:13px; }.preset-button span { color:#697c88; font-size:9px; font-weight:750; }
.preset-button.active { border-color:#3b958d; box-shadow:inset 3px 0 #21877d; background:#f1faf7; }
.preset-button.is-complete::after { content:"已完成"; grid-column:1/-1; color:#248277; font-size:8px; font-weight:900; }
.action-row { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:7px; margin-top:9px; }
.action-row button { min-height:44px; border-radius:9px; font:inherit; font-size:11px; font-weight:900; cursor:pointer; }
.primary-action { border:1px solid #176f68; color:#fff; background:#177f76; }.reset-button { border:1px solid #cddbe0; color:#496270; background:#fff; }
.primary-action:disabled { opacity:.55; cursor:default; }
.question { min-height:45px; display:grid; place-items:center; margin:9px 0 0; padding:7px 9px; border-radius:9px; color:#536c79; background:#eef5f7; font-size:10px; font-weight:800; text-align:center; }
.overall-conclusions { margin-top:9px; padding:9px; border:1px solid #cbe1da; border-radius:10px; color:#315f59; background:#eff9f5; }
.overall-conclusions[hidden] { display:none; }.overall-conclusions strong { font-size:10px; }.overall-conclusions p { margin:4px 0 0; font-size:8px; line-height:1.4; font-weight:750; }
.scope-note { margin:9px 0 0; color:#76868e; font-size:8px; line-height:1.5; font-weight:750; }
.friction-page .classroom-screen-toggle { min-height:44px; }.friction-page .fullscreen-button { width:44px; height:44px; flex-basis:44px; }
@media (max-width:980px) { .friction-main{width:calc(100% - 24px)} .friction-lab{grid-template-columns:1fr} .friction-lab .stage{border-right:0;border-bottom:1px solid #e0eaee} .friction-lab .control-panel{display:grid;grid-template-columns:145px minmax(0,1fr);gap:8px 12px} .control-title{grid-row:1/4}.preset-grid{grid-column:2}.action-row,.question,.overall-conclusions,.scope-note{grid-column:1/-1;margin-top:0} }
@media (max-width:720px) { .friction-page .tool-heading h1{font-size:25px} .experiment-pair{grid-template-columns:1fr} .trial-card{padding-top:7px} .spring-gauge{height:59px} .motion-track{height:44px}.block{top:10px}.force-vector{top:22px} .friction-lab .control-panel{display:block}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.preset-button{display:block;min-height:60px;text-align:center}.preset-button span{display:block;margin-top:3px}.action-row,.question,.scope-note{margin-top:8px} }
@media (max-width:430px) { .friction-main{width:calc(100% - 16px);padding-top:8px}body.friction-page.xinyu-tool .tool-heading{padding:0 0 8px}.friction-page .tool-heading h1{font-size:22px;line-height:1.24;text-wrap:balance}.friction-page .lead{font-size:11px}.friction-lab{border-radius:14px}.friction-lab .stage-head{padding:8px 10px}.friction-lab .stage-title{font-size:15px}.stage-meta{max-width:118px}body.friction-page.xinyu-tool .permanent-truth{margin:7px 8px 0;font-size:10px}.experiment-pair{gap:7px;padding:7px 8px 0}.trial-card{padding:6px 8px}.trial-card>header{min-height:38px}.trial-conditions{font-size:9px}.trial-readout{font-size:17px}.spring-gauge{height:55px}.comparison-readouts{gap:7px;margin:7px 8px 0}.comparison-readouts strong{font-size:18px}.local-conclusion{margin:7px 8px 9px;font-size:10px}.friction-lab .control-panel{padding:10px}.control-title h2{font-size:17px}.preset-grid{gap:5px}.preset-button{min-height:62px;padding:7px 4px}.preset-button strong{font-size:11px}.preset-button span{font-size:8px}.action-row button{min-height:44px}.question{min-height:40px}body.friction-page.xinyu-tool #overallConclusions p{font-size:10px;line-height:1.45}.friction-page .chips{margin-top:5px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }