:root{--paper:#f3f6f9;--white:#fff;--ink:#173246;--muted:#587083;--blue:#1669ad;--gray:#94a1ac;--orange:#bc6128;--line:#d5e0e8;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0}a{color:var(--blue)}button,input{font:inherit}button{min-height:44px;cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);padding:7px 15px;border-radius:6px}button:hover{border-color:var(--blue)}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #d58a39;outline-offset:3px}input[type=range]{accent-color:var(--blue);height:28px;min-width:0;cursor:pointer}button,summary{touch-action:manipulation}a{text-underline-offset:3px}.top{max-width:1120px;margin:auto;padding:18px 28px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);gap:14px;font-size:.875rem}.top>a:first-child{font-weight:700;color:var(--ink);text-decoration:none}main{max-width:1120px;margin:auto;padding:24px 28px 40px}.chapter{color:var(--blue);font-size:.875rem;letter-spacing:.06em;margin:0}.intro{margin-bottom:24px}.intro h1{font-family:"Microsoft YaHei","Segoe UI",sans-serif;letter-spacing:-.03em;font-size:2rem;line-height:1.4;margin:6px 0 10px}.intro>p:last-child{margin:0;color:var(--muted)}.mobile-break{display:none}.experiment{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:22px 24px 14px}.controls{max-width:800px;margin:auto}.control-heading{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem}.control-heading span{font-style:italic}.control-heading output{font-family:Consolas,monospace;font-size:1.2rem;font-weight:700;color:var(--blue)}#ratio{width:100%;margin:6px 0}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick button{font-size:.9375rem}.quick small{margin-left:8px;font-family:Consolas,monospace;font-size:.8125rem;color:var(--muted)}.quick button[aria-pressed=true]{background:#e8f2fa;border-color:var(--blue);color:var(--blue)}.fixed-condition{font-size:.8125rem;color:var(--muted);margin:10px 0 4px}.fixed-condition b{font-weight:600}.scene-head{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.scene-head h2,.plot-heading h2{font-size:.9375rem;margin:0;font-weight:650}.scene-head span,.plot-heading>span{font-size:.75rem;color:var(--muted)}#bridge{display:block;width:100%;max-height:310px;margin:auto;background:#f9fbfc}.transport{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:11px}.transport label{font-size:.8125rem;white-space:nowrap;margin-left:10px}.transport label output{font-family:Consolas,monospace;color:var(--blue);display:inline-block;min-width:55px}.transport button:first-child{background:var(--blue);border-color:var(--blue);color:white;min-width:80px}#time{width:100%}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);margin-top:13px;padding:12px 0 0}.metrics span{font-size:.8125rem;color:var(--muted)}.metrics b{display:block;font-family:Consolas,"Microsoft YaHei",monospace;font-size:1.4rem;line-height:1.5;color:var(--blue)}.metrics b.reference{color:#6d7c8b}.observation{font-size:.875rem;margin:11px 0 0;color:var(--ink);min-height:1.6em}.plots{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.plots article{min-width:0}.plot-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.plots svg{display:block;width:100%;margin-top:6px;background:white;border-bottom:1px solid var(--line)}.legend,.plot-note{font-size:.75rem;color:var(--muted);margin:8px 0}.legend{display:flex;gap:16px;flex-wrap:wrap}.legend span:before{content:"";display:inline-block;width:18px;margin-right:6px;vertical-align:middle;border-top:2px solid var(--blue)}.legend .gray:before{border-color:var(--gray);border-top-style:dashed}.legend .cursor-key:before{border-color:var(--orange);width:8px}details{border-top:1px solid var(--line);margin-top:8px}summary{min-height:48px;padding:12px 0;cursor:pointer;font-size:.9375rem;font-weight:600}details p{font-size:.875rem;color:var(--muted);margin:8px 0 18px}.damping-control{max-width:680px;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:20px}.damping-control output{margin-left:12px;color:var(--blue);font-weight:700}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.model h3{font-size:.9375rem;margin:8px 0}.equation{font-family:Consolas,"Microsoft YaHei",monospace;line-height:1.95;background:#eaf1f6;padding:14px;border-radius:6px;color:var(--ink)}footer{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;color:var(--muted);font-size:.75rem}svg text{font-family:"Segoe UI","Microsoft YaHei",sans-serif;fill:var(--muted);font-size:16px}
@media(max-width:780px){.top{padding:12px 16px}main{padding:16px 14px 26px}.intro{margin-bottom:15px}.intro h1{font-size:1.5rem}.intro>p:last-child{font-size:.875rem}.experiment{padding:14px 12px 12px}.plots{grid-template-columns:1fr;gap:20px;margin:20px 0}.model-grid{grid-template-columns:1fr;gap:6px}.metrics b{font-size:1.15rem}.transport{grid-template-columns:auto auto 1fr;gap:7px}.transport label{justify-self:end;margin-left:0}.transport #time{grid-column:1/-1;margin:0;height:25px}.scene-head{margin-top:9px}.scene-head span{font-size:.6875rem}.fixed-condition{font-size:.75rem;line-height:1.5}.metrics{gap:6px;margin-top:9px;padding-top:9px}.metrics span{font-size:.6875rem}.quick button{padding:5px;font-size:.875rem}.quick small{display:block;margin:0;font-size:.6875rem}.control-heading{font-size:.875rem}.observation{font-size:.8125rem}.damping-control{grid-template-columns:1fr;gap:2px}.damping-control label{font-size:.875rem}.mobile-break{display:block}.intro p.chapter{font-size:.75rem}#bridge{min-height:160px}.transport button{padding:6px 12px}}
@media(max-width:380px){main{padding:12px 10px}.top{padding:10px}.intro h1{font-size:1.4rem}.experiment{padding:12px 9px}.metrics b{font-size:1rem}.metrics span{font-size:.625rem}.transport label{font-size:.75rem}.scene-head h2{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:780px){#bridge text{font-size:24px!important}.plots svg text{font-size:24px!important}}