:root { --ink:#27333a; --muted:#6a767b; --paper:#f6f8f8; --panel:#fff; --line:#dce4e5; --primary:#3f7d75; --primary-soft:#e8f4f1; --accent:#d77b45; --accent-soft:#fff0e7; --blue:#4a78a8; --blue-soft:#eaf2fb; --yellow:#b9922e; --yellow-soft:#fff7db; --danger:#af4d46; }
* { box-sizing:border-box; }
html, body, #app { min-height:100%; margin:0; }
body { overflow:hidden; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button, input { font:inherit; }
button { color:inherit; }
.app-shell { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.app-header { min-height:64px; display:grid; grid-template-columns:190px minmax(0,1fr) 110px; align-items:center; gap:12px; padding:8px 20px; border-bottom:1px solid var(--line); background:#fff; }
.module-brand { min-width:0; display:flex; align-items:center; gap:9px; }
.home-link { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; color:var(--primary); background:#fff; text-decoration:none; font-size:19px; font-weight:900; }
.brand-copy small,.brand-copy strong { display:block; }
.brand-copy small { color:var(--primary); font-size:8px; font-weight:950; }
.brand-copy strong { font-family:Georgia,"Times New Roman",serif; font-size:16px; }
.demo-tabs { min-width:0; display:flex; justify-content:center; gap:5px; overflow:auto; scrollbar-width:none; }
.demo-tabs button { min-width:142px; height:38px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:6px; color:var(--primary); background:var(--primary-soft); font-size:10px; font-weight:900; white-space:nowrap; }
.nav-number { color:var(--primary); font-family:ui-monospace,monospace; font-size:8px; }
.lab-status { display:flex; justify-content:flex-end; align-items:center; gap:6px; color:var(--muted); font-size:9px; font-weight:850; }
.lab-status i { width:8px; height:8px; border-radius:50%; background:var(--primary); }
.feature-page { flex:1; min-height:0; padding:13px 20px 18px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.feature-heading { min-height:72px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.heading-copy { min-width:0; }
.eyebrow,.section-label { color:var(--primary); font-size:8px; font-weight:950; letter-spacing:.03em; text-transform:uppercase; }
.feature-heading h1 { margin:3px 0 4px; font-family:Georgia,"Times New Roman",serif; font-size:27px; line-height:1; }
.feature-heading p { max-width:760px; margin:0; color:var(--muted); font-size:10px; font-weight:700; line-height:1.45; }
.feature-actions { display:flex; align-items:center; gap:6px; }
.complete-chip,.status-chip { min-height:29px; padding:6px 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; color:#316b64; background:var(--primary-soft); font-size:8px; font-weight:900; white-space:nowrap; }
.status-chip { color:#796126; background:var(--yellow-soft); }
.status-chip.ready { color:#316b64; background:var(--primary-soft); }
.tool-button { width:35px; height:35px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:18px; font-weight:900; cursor:pointer; }
.guided-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 252px; gap:10px; }
.guided-layout.complete { grid-template-columns:minmax(0,1fr); }
.workspace { min-width:0; min-height:0; display:flex; flex-direction:column; gap:9px; }
.panel { min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 8px 22px rgb(38 57 60 / 4%); }
.mode-row { min-height:41px; padding:5px 7px; display:flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.mode-row>span { padding:0 5px; color:var(--muted); font-size:8px; font-weight:900; }
.mode-row button { min-height:29px; padding:0 9px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:8px; font-weight:900; cursor:pointer; }
.mode-row button.active { border-color:var(--primary); color:#fff; background:var(--primary); }
.mode-row p { margin:0 4px 0 auto; color:var(--muted); font-size:8px; font-weight:700; }
.lab-grid { flex:1; min-height:0; display:grid; grid-template-columns:175px minmax(460px,1fr) 270px; gap:10px; }
.pack-list { min-height:0; padding:12px; display:flex; flex-direction:column; gap:7px; overflow:auto; }
.pack-list>header,.equipment>header,.control-panel>header,.observation>header,.conclusion>header,.archive>header { padding-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:7px; border-bottom:1px solid var(--line); }
.pack-list>header b,.archive>header b { color:var(--muted); font-size:8px; }
.pack-button { min-height:91px; padding:10px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-left:4px solid var(--pack); border-radius:6px; background:#fff; text-align:left; cursor:pointer; }
.pack-button.active { border-color:var(--pack); background:color-mix(in srgb,var(--pack),white 94%); box-shadow:inset 0 0 0 1px var(--pack); }
.pack-button span,.pack-button small,.pack-button i { color:var(--muted); font-size:8px; font-style:normal; font-weight:750; }
.pack-button strong { margin:5px 0 3px; font-size:11px; }
.pack-button i { margin-top:auto; color:var(--pack); font-weight:900; }
.scope-note { margin-top:auto; padding:10px; border-left:3px solid var(--blue); background:var(--blue-soft); }
.scope-note b { font-size:9px; }
.scope-note p { margin:4px 0 0; color:#426887; font-size:8px; font-weight:700; line-height:1.45; }
.main-stack,.side-stack { min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; }
.main-stack { overflow:auto; }
.equipment,.control-panel,.observation,.conclusion,.archive { padding:14px; }
.equipment h2,.control-panel h2,.observation h2,.conclusion h2 { margin:4px 0 0; font-size:16px; }
.equipment-grid { margin-top:11px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.equipment-card { min-height:64px; padding:7px; display:grid; grid-template-columns:20px 1fr; gap:4px 6px; align-items:center; border:1px solid var(--line); border-radius:5px; background:#fff; text-align:left; cursor:pointer; }
.equipment-card i { width:20px; height:20px; display:grid; place-items:center; border-radius:4px; color:var(--primary); background:var(--primary-soft); font-style:normal; font-weight:950; }
.equipment-card span { font-size:9px; font-weight:900; }
.equipment-card b { grid-column:2; color:var(--muted); font-size:7px; }
.equipment-card.selected { border-color:var(--primary); background:var(--primary-soft); }
.equipment-card.selected b { color:var(--primary); }
.equipment-note { margin:8px 0 0; color:var(--muted); font-size:8px; font-weight:700; }
.scene { min-height:205px; margin-top:11px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#f8faf9; position:relative; }
.scene-label { position:absolute; top:10px; left:12px; z-index:2; color:var(--muted); font-size:8px; font-weight:900; }
.scene-foot { position:absolute; right:12px; bottom:10px; left:12px; color:var(--muted); font-size:8px; font-weight:750; text-align:center; }
.surface { height:24px; position:absolute; right:35px; bottom:45px; left:35px; border-top:2px solid #647876; background:repeating-linear-gradient(90deg,#dcebea 0 15px,#cfe1df 15px 29px); }
.surface.rough { background:repeating-linear-gradient(45deg,#b7c3bc 0 3px,#ebefe9 3px 8px); }
.block { width:90px; height:55px; position:absolute; bottom:68px; left:38%; display:grid; place-items:center; border-radius:5px; color:#fff; background:#4e7771; box-shadow:inset 0 -8px rgb(0 0 0 / 11%); font-size:9px; font-weight:900; }
.block.rough { background:#6c6753; }
.block i { position:absolute; top:-17px; color:#3f4a4d; font-size:10px; font-style:normal; letter-spacing:2px; }
.spring-scale { width:150px; height:44px; position:absolute; top:57px; right:17%; padding:7px 10px; display:flex; justify-content:space-between; align-items:center; border:2px solid #779b97; border-radius:5px; background:#fff; }
.spring-scale span { color:var(--muted); font-size:7px; font-weight:800; }.spring-scale b { color:var(--primary); font-family:ui-monospace,monospace; font-size:13px; }
.pull-line { width:150px; position:absolute; top:100px; right:31%; border-top:2px dashed var(--accent); transform:rotate(18deg); transform-origin:right; }
.control-strip { padding-top:11px; display:grid; grid-template-columns:165px minmax(155px,1fr) auto; align-items:end; gap:12px; }
.control-group,.range-control { display:grid; gap:5px; }.control-group>span,.range-control span { color:var(--muted); font-size:8px; font-weight:850; }.range-control b { color:var(--ink); }
.segmented { display:flex; gap:4px; }.segmented button { flex:1; min-height:31px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:8px; font-weight:900; cursor:pointer; }.segmented button.active { color:#fff; border-color:var(--primary); background:var(--primary); }
.range-control input { width:100%; accent-color:var(--primary); }.action-button { min-height:35px; padding:0 11px; border:1px solid var(--primary); border-radius:5px; color:#fff; background:var(--primary); font-size:9px; font-weight:900; cursor:pointer; white-space:nowrap; }.action-button.soft { color:var(--primary); background:var(--primary-soft); }.action-button:disabled,.conclusion-option:disabled { cursor:not-allowed; opacity:.45; }
.lever-scene { background:linear-gradient(180deg,#f8faf9 0 72%,#ecefe9 72%); }.fulcrum { width:76px; height:63px; position:absolute; bottom:28px; left:calc(50% - 38px); clip-path:polygon(50% 0,100% 100%,0 100%); background:#d0a54d; }.lever-beam { width:76%; height:12px; position:absolute; bottom:87px; left:12%; border-radius:7px; background:#8d6d4b; transform:rotate(var(--tilt)); transform-origin:center; transition:transform .2s; }.pivot { width:13px; height:13px; position:absolute; top:0; left:calc(50% - 6px); border:3px solid #fff; border-radius:50%; background:#d0a54d; }.lever-side { position:absolute; top:-53px; display:grid; gap:7px; justify-items:center; color:#516469; font-size:8px; font-weight:850; }.lever-side b { padding:7px; border-radius:5px; color:#fff; background:#5f8882; letter-spacing:2px; font-size:10px; }.lever-side.left { left:8%; }.lever-side.right { right:8%; }.balance-readout { position:absolute; right:15px; bottom:18px; padding:7px 9px; border-radius:4px; color:#7f4a37; background:var(--accent-soft); font-size:8px; font-weight:900; }.balance-readout.balanced { color:#286b63; background:var(--primary-soft); }
.reflection-scene { background:radial-gradient(circle at 50% 73%,#fff 0 1px,transparent 2px 17px,#e9eff2 18px 19px,transparent 20px),#f8fafb; }.mirror { width:70%; position:absolute; bottom:49px; left:15%; border-top:7px solid #8199a6; box-shadow:0 -3px 0 #cbd8df; }.normal-line { height:130px; position:absolute; bottom:49px; left:50%; border-left:2px dashed #8fa0aa; }.laser { width:138px; position:absolute; bottom:49px; left:calc(50% - 138px); border-top:3px solid #df554e; transform:rotate(calc(-1 * var(--angle))); transform-origin:right center; }.laser.outgoing { left:50%; transform:rotate(calc(-1 * var(--angle))); transform-origin:left center; }.angle-chip { position:absolute; top:61px; padding:6px 7px; border-radius:4px; color:#416b8d; background:var(--blue-soft); font-size:8px; font-weight:900; }.angle-chip.left { left:18%; }.angle-chip.right { right:18%; }
.lever-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }.reflection-controls { grid-template-columns:minmax(220px,.65fr) 1fr; align-items:center; }.control-hint { padding:9px; border-left:3px solid var(--blue); color:#416b8d; background:var(--blue-soft); font-size:8px; font-weight:750; line-height:1.45; }
.observation { flex:1; min-height:200px; }.observation-value { margin:11px 0; padding:11px; display:grid; grid-template-columns:1fr auto; align-items:center; border-left:4px solid var(--accent); background:var(--accent-soft); }.observation-value span,.observation-value small { color:var(--muted); font-size:8px; font-weight:800; }.observation-value strong { color:#914b29; font-family:Georgia,serif; font-size:24px; }.observation-value small { grid-column:1 / -1; margin-top:4px; }.reading-list { display:grid; gap:3px; }.reading-row { padding:7px 0; display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:7px; border-top:1px solid var(--line); font-size:8px; }.reading-row b { color:var(--accent); }.reading-row span { font-weight:900; }.reading-row small { color:var(--muted); text-align:right; }.empty-state { padding:14px 5px; color:var(--muted); font-size:8px; font-weight:700; text-align:center; }
.side-stack { overflow:auto; }.task-card { margin-top:10px; padding:10px; border-left:4px solid var(--yellow); background:var(--yellow-soft); }.task-card span { color:#786122; font-size:8px; font-weight:900; }.task-card p { margin:5px 0 0; color:#685b36; font-size:9px; font-weight:750; line-height:1.5; }.conclusion-options { margin-top:10px; display:grid; gap:5px; }.conclusion-option { min-height:48px; padding:8px; display:grid; grid-template-columns:22px 1fr; gap:7px; align-items:start; border:1px solid var(--line); border-radius:5px; background:#fff; text-align:left; font-size:8px; font-weight:800; cursor:pointer; }.conclusion-option b { width:20px; height:20px; display:grid; place-items:center; border-radius:4px; color:var(--blue); background:var(--blue-soft); }.conclusion-option.correct { border-color:var(--primary); background:var(--primary-soft); }.conclusion-option.wrong { border-color:var(--danger); background:#fff0ee; }.feedback { margin-top:9px; padding:10px; border-left:3px solid var(--primary); background:var(--primary-soft); }.feedback.bad { border-color:var(--danger); background:#fff0ee; }.feedback b { font-size:9px; }.feedback p { margin:4px 0 0; color:var(--muted); font-size:8px; font-weight:700; line-height:1.45; }.inline-button { margin-top:7px; min-height:26px; border:0; color:var(--danger); background:transparent; font-size:8px; font-weight:900; cursor:pointer; }.evidence-meter { margin-top:10px; display:grid; grid-template-columns:1fr auto; gap:5px; color:var(--muted); font-size:8px; font-weight:800; }.evidence-meter i { grid-column:1 / -1; height:6px; overflow:hidden; border-radius:4px; background:#edf0ee; }.evidence-meter i::after { content:""; display:block; width:var(--progress); height:100%; background:var(--primary); }.archive { min-height:205px; }.archive-row { padding:8px 0; display:grid; grid-template-columns:48px minmax(0,1fr); gap:3px 7px; border-bottom:1px solid var(--line); }.archive-row span,.archive-row small { color:var(--muted); font-size:7px; font-weight:750; }.archive-row strong { font-size:8px; }.archive-row small { grid-column:2; }.archive-note { margin-top:9px; padding:8px; border-left:3px solid var(--blue); color:#416b8d; background:var(--blue-soft); font-size:7px; font-weight:750; line-height:1.45; }
.guide-sidebar { z-index:60; min-width:0; padding:17px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 10px 26px rgb(40 50 52 / 10%); }.guide-head { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; font-weight:900; }.guide-head b { margin-left:auto; color:var(--primary); }.guide-head button { min-height:29px; padding:4px 8px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--muted); font-size:8px; font-weight:850; cursor:pointer; }.guide-current { margin-top:15px; padding:15px 0; border-top:4px solid var(--primary); border-bottom:1px solid var(--line); }.guide-current span { color:var(--primary); font-size:9px; font-weight:900; }.guide-current h2 { margin:6px 0 10px; font-size:20px; line-height:1.2; }.guide-current p { margin:0; color:var(--muted); font-size:10px; font-weight:750; line-height:1.55; }.guide-steps { margin-top:auto; display:grid; gap:6px; }.guide-step { min-height:36px; padding:4px 6px; display:grid; grid-template-columns:24px 1fr; align-items:center; gap:7px; border-radius:6px; color:#a4acad; }.guide-step b { width:23px; height:23px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:8px; }.guide-step span { font-size:9px; font-weight:800; }.guide-step.active { color:#286b63; background:var(--primary-soft); }.guide-step.active b { color:#fff; border-color:var(--primary); background:var(--primary); }.guide-step.done { color:var(--primary); }.text-button { width:100%; min-height:37px; margin-top:9px; border:1px solid var(--primary); border-radius:5px; color:var(--primary); background:var(--primary-soft); font-size:9px; font-weight:900; cursor:pointer; }.guide-followup { margin:8px 0 0; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-size:8px; font-weight:800; line-height:1.4; }.guide-overlay { z-index:45; pointer-events:none; position:fixed; inset:0; }.guide-shade { position:fixed; background:rgb(28 39 41 / 56%); transition:all .2s; }.guide-frame { position:fixed; border:3px solid var(--primary); border-radius:9px; box-shadow:0 0 0 4px rgb(63 125 117 / 19%); transition:all .2s; }.toast { z-index:100; position:fixed; left:50%; bottom:24px; max-width:min(520px,calc(100vw - 32px)); transform:translateX(-50%); padding:11px 15px; border-radius:7px; color:#fff; background:#27333a; box-shadow:0 10px 26px rgb(35 42 43 / 22%); font-size:10px; font-weight:800; text-align:center; }
@media (max-width:1180px) { .lab-grid { grid-template-columns:160px minmax(420px,1fr) 250px; }.equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.control-strip { grid-template-columns:145px 1fr auto; } }
@media (max-width:930px) { body { overflow:auto; }.app-shell { height:auto; min-height:100dvh; overflow:visible; }.app-header { min-height:70px; grid-template-columns:140px minmax(0,1fr); padding:8px 12px; }.lab-status { display:none; }.demo-tabs { justify-content:flex-start; }.feature-page { min-height:calc(100dvh - 70px); overflow:visible; }.guided-layout { display:block; }.guide-sidebar { position:fixed; right:10px; bottom:10px; left:10px; max-height:42vh; overflow:auto; }.guide-steps { display:none; }.lab-grid { min-height:0; grid-template-columns:160px minmax(0,1fr); }.side-stack { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; overflow:visible; }.main-stack { overflow:visible; } }
@media (max-width:620px) { .app-header { grid-template-columns:103px minmax(0,1fr); }.brand-copy small { display:none; }.demo-tabs button { min-width:118px; height:42px; font-size:9px; }.feature-page { padding:10px; }.feature-heading { display:block; }.feature-actions { margin-top:8px; }.mode-row { flex-wrap:wrap; }.mode-row p { width:100%; margin:1px 5px 4px; }.lab-grid { display:block; }.pack-list { margin-bottom:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.pack-list>header,.scope-note { grid-column:1 / -1; }.pack-button { min-height:75px; padding:7px; }.pack-button small { display:none; }.scope-note { margin-top:0; }.main-stack { gap:9px; }.equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.scene { min-height:200px; }.control-strip,.lever-controls,.reflection-controls { grid-template-columns:1fr; }.side-stack { display:block; }.side-stack>* { margin-top:9px; }.reading-row { grid-template-columns:22px minmax(0,1fr); }.reading-row small { grid-column:2; text-align:left; }.guide-sidebar { max-height:46vh; }.feature-heading h1 { font-size:24px; }.reflection-scene .angle-chip { top:45px; }.angle-chip.left { left:7%; }.angle-chip.right { right:7%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }