/* ============================================================ 开源物理模型库 · 共享设计系统 kit.css (v2 学科色驱动) 单一 --accent 入口（每页设学科色），color-mix 自动派生全套配色。 所有模型统一引用，勿在模型内另写一套。画布绘制仍用 hex（见 kit.js PHYS）。 ============================================================ */ :root{ /* 表面 / 文字 */ --bg:#f4f6fb; --panel:#ffffff; --ink:#19223a; --muted:#697489; --line:#e8edf5; --line-strong:#cdd7e6; /* 主题色入口：每个模型页用 覆盖为学科色 */ --accent:#4f46e5; --accent-soft:color-mix(in srgb, var(--accent) 12%, #fff); --accent-line:color-mix(in srgb, var(--accent) 26%, var(--line)); --accent-ink:color-mix(in srgb, var(--accent) 72%, #15203a); /* 物理语义（图例/文字用；画布用 hex）*/ --c-object:#15803d; --c-image:#ea580c; --c-light:#f59e0b; --c-aux:#94a3b8; --c-velocity:#16a34a; --c-force:#ef4444; --c-accel:#8b5cf6; --c-current:#2563eb; --c-voltage:#10b981; --c-field-b:#6366f1; --c-field-e:#e11d48; --c-mark:#dc2626; /* 圆角 / 间距 / 阴影 / 动效 */ --r-sm:10px; --r-md:14px; --r-lg:18px; --gap:16px; --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04); --shadow-md:0 10px 26px -10px rgba(30,30,90,.16); --shadow-lg:0 18px 40px -14px rgba(30,30,90,.24); --ease:cubic-bezier(.2,.7,.3,1); font-synthesis:none; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif; background: radial-gradient(900px 460px at 78% -12%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%), radial-gradient(700px 420px at 8% 4%, color-mix(in srgb,var(--accent) 6%,transparent), transparent 55%), var(--bg); color:var(--ink); line-height:1.55; display:flex; flex-direction:column; min-height:100vh; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .serif{font-family:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif} /* ---------- 顶栏（兼容
与 .app-header） ---------- */ header,.app-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:14px 22px;background:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} header .back,.app-header .back{font-size:13px;color:var(--muted);text-decoration:none; font-weight:600;transition:color .15s;display:inline-flex;align-items:center;gap:3px} header .back:hover,.app-header .back:hover{color:var(--accent)} header h1,.app-header h1{font-size:18.5px;margin:0;font-weight:600;letter-spacing:.4px; display:inline-flex;align-items:center;gap:9px} header h1::before,.app-header h1::before{content:"";width:9px;height:9px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} .chip{font-size:12px;color:var(--accent);background:var(--accent-soft); padding:4px 12px;border-radius:999px;white-space:nowrap;font-weight:600; border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)} .goal{flex-basis:100%;font-size:12.5px;color:var(--muted);margin-top:-2px} .goal b{color:var(--ink);font-weight:600} /* 模式切换 演示/探索 */ .mode-switch{margin-left:auto;display:flex;background:var(--bg);border-radius:999px;padding:3px;border:1px solid var(--line)} .mode-switch button{border:0;background:transparent;font-size:13px;padding:6px 16px;border-radius:999px; cursor:pointer;color:var(--muted);font-weight:600;transition:.18s var(--ease)} .mode-switch button.on{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)} /* ---------- 主布局 ---------- */ main{flex:1;display:grid;grid-template-columns:1fr 332px;gap:var(--gap);padding:var(--gap); align-items:start;width:100%;max-width:1240px;margin:0 auto} @media (max-width:860px){ main{grid-template-columns:1fr} } .stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;position:relative;box-shadow:var(--shadow-md)} .stage canvas,canvas{display:block;width:100%;touch-action:none} .stage.grab canvas{cursor:grab} .stage.grab canvas:active{cursor:grabbing} .hint,.stage .hint{position:absolute;left:12px;bottom:11px;font-size:12px;color:var(--muted); background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:6px 11px;border-radius:var(--r-sm);pointer-events:none;box-shadow:var(--shadow-sm)} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--line)} .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle} /* 播放控制条 */ .transport{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)} .transport .btn{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm); padding:7px 14px;font-size:13px;cursor:pointer;font-weight:600;color:var(--ink);transition:.15s} .transport .btn:hover{border-color:var(--accent);color:var(--accent)} .transport .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .transport .btn.primary:hover{filter:brightness(1.06);color:#fff} .transport input[type=range]{flex:1;accent-color:var(--accent)} .transport .right{margin-left:auto;font-size:12px;color:var(--muted)} /* ---------- 右侧面板 ---------- */ .panel{display:flex;flex-direction:column;gap:var(--gap)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:16px 18px;box-shadow:var(--shadow-sm)} .card h2{font-size:12.5px;margin:0 0 13px;color:var(--accent-ink);font-weight:700;letter-spacing:.6px; display:flex;align-items:center;gap:7px} .card h2::before{content:"";width:4px;height:13px;border-radius:3px;background:var(--accent);flex:none} .ctrl{margin-bottom:15px} .ctrl:last-child{margin-bottom:0} .ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px} /* 数值徽章（兼容 .v 与 ）*/ .ctrl label .v,.ctrl label b{color:var(--accent-ink);font-variant-numeric:tabular-nums;font-weight:700; background:var(--accent-soft);padding:1px 9px;border-radius:7px;font-size:12.5px} /* 自定义滑块：填充进度由 JS 设 --p（见 kit.js fillRange）；无 --p 时 accent-color 兜底 */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;cursor:pointer;outline:none;margin:9px 0;accent-color:var(--accent); background:linear-gradient(to right,var(--accent) var(--p,50%), #dde5ef var(--p,50%))} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff; border:3px solid var(--accent);box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .12s var(--ease)} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)} input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)} input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--accent);border-radius:50%;background:#fff} input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#dde5ef} input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)} /* 分段控件 */ .seg{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px} .seg button{flex:1;border:0;background:transparent;border-radius:9px; padding:8px 4px;font-size:13px;cursor:pointer;font-weight:600;color:var(--muted);transition:.18s var(--ease);line-height:1.25} .seg button:hover{color:var(--ink)} .seg button.on{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm); font-size:13px;background:var(--bg);color:var(--ink);transition:border-color .15s} select:focus{outline:none;border-color:var(--accent)} /* 开关组 */ .toggles{display:flex;flex-wrap:wrap;gap:8px} .toggles label{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer; background:var(--bg);padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--line);transition:.15s} .toggles label:hover{border-color:var(--line-strong)} .toggles label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .toggles input{accent-color:var(--accent)} /* 数据读数 */ .readout{display:grid;grid-template-columns:1fr 1fr;gap:9px} .readout.c3{grid-template-columns:1fr 1fr 1fr} .readout .item{background:var(--bg);border-radius:var(--r-md);padding:10px 12px} .readout .item span{display:block;font-size:11px;color:var(--muted);margin-bottom:1px} .readout .item b{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700} .verdict{margin-top:11px;padding:12px 14px;border-radius:var(--r-md);font-size:13px; background:var(--accent-soft);border-left:3px solid var(--accent)} .verdict .use{display:block;margin-top:3px;color:var(--muted);font-size:12.5px} .formula{margin-top:9px;font-size:12.5px;color:var(--muted);background:var(--bg); border-radius:var(--r-md);padding:11px 13px;line-height:1.7;font-variant-numeric:tabular-nums} .formula b{color:var(--ink)} .presets{display:flex;flex-wrap:wrap;gap:8px} .presets button{flex:1;min-width:82px;border:1px solid var(--line);background:var(--panel); border-radius:var(--r-md);padding:9px 6px;font-size:12.5px;cursor:pointer;font-weight:600;color:var(--ink);transition:.15s} .presets button:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm)} .think{font-size:13px;color:var(--muted)} .think ul{margin:6px 0 0;padding-left:18px} .think li{margin:5px 0} /* 双模式显隐 */ .explore-only{display:block} body.demo .explore-only{display:none} body.demo .readout .item b{font-size:18px}