:root { --ink:#30352f; --muted:#73756e; --paper:#faf9f4; --panel:#fff; --line:#e4e0d4; --primary:#4e8077; --primary-soft:#e8f3ef; --accent:#b46b45; --accent-soft:#fff0e8; --blue:#4d7ca3; --blue-soft:#eaf2f9; --yellow:#aa8b35; --yellow-soft:#fff7df; --danger:#ae514b; }
* { 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) 150px; 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; 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 { 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; align-items:flex-start; justify-content:space-between; 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:#376c64; background:var(--primary-soft); font-size:8px; font-weight:900; white-space:nowrap; }.status-chip { color:#80692b; background:var(--yellow-soft); }.status-chip.ready { color:#376c64; 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(51 47 33 / 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(470px,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,.prediction>header,.operation>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:88px; 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:7px; font-style:normal; font-weight:750; }.pack-button strong { margin:5px 0 3px; font-size:10px; }.pack-button i { margin-top:auto; color:var(--pack); font-weight:900; }.safe-note { margin-top:auto; padding:10px; border-left:3px solid var(--accent); background:var(--accent-soft); }.safe-note b { color:#8d4e30; font-size:9px; }.safe-note p { margin:4px 0 0; color:#875f50; 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,.side-stack { overflow:auto; }.equipment,.prediction,.operation,.observation,.conclusion,.archive { padding:14px; }.equipment h2,.prediction h2,.operation h2,.observation h2,.conclusion h2 { margin:4px 0 0; font-size:16px; }.equipment-grid { margin-top:11px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }.equipment-card { min-height:62px; 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:8px; 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; }
.prediction { min-height:143px; }.prediction-options { margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.prediction-option { min-height:56px; padding:8px; display:grid; grid-template-columns:19px 1fr; gap:6px; align-items:start; border:1px solid var(--line); border-radius:5px; background:#fff; text-align:left; font-size:8px; font-weight:800; cursor:pointer; }.prediction-option b { width:19px; height:19px; display:grid; place-items:center; border-radius:4px; color:var(--blue); background:var(--blue-soft); }.prediction-option.selected { border-color:var(--blue); background:var(--blue-soft); }.prediction>p { margin:7px 0 0; color:var(--muted); font-size:8px; font-weight:700; }
.scene { min-height:190px; margin-top:10px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#fafbf8; position:relative; }.scene-label { position:absolute; top:10px; left:12px; z-index:3; 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; }.digital-scale { width:125px; height:45px; position:absolute; top:45px; left:15%; padding:7px 9px; display:flex; align-items:center; justify-content:space-between; border:2px solid #839491; border-radius:5px; background:#fff; }.digital-scale span { color:var(--muted); font-size:7px; font-weight:800; }.digital-scale strong { color:var(--primary); font-family:ui-monospace,monospace; font-size:12px; }.beaker { width:100px; height:115px; position:absolute; right:20%; bottom:21px; overflow:hidden; border:3px solid #91a4a2; border-top:0; border-radius:0 0 13px 13px; }.beaker::before { content:""; width:118px; position:absolute; top:0; left:-12px; border-top:3px solid #91a4a2; }.beaker .liquid { width:100%; height:var(--fill); position:absolute; bottom:0; background:linear-gradient(#dcefe8,#a9d6c8); }.beaker .grains { position:absolute; right:12px; bottom:16px; color:#fff; font-size:14px; letter-spacing:4px; }.beaker .grains.dissolved { opacity:.2; }.beaker span { position:absolute; right:0; bottom:6px; left:0; color:#385d59; font-size:7px; font-weight:900; text-align:center; }.water-mark { position:absolute; top:67px; right:6%; padding:7px; border-radius:4px; color:#3d746b; background:var(--primary-soft); font-size:8px; font-weight:900; }
.tube-row { height:100%; padding:45px 14% 32px; display:flex; align-items:end; justify-content:space-between; }.test-tube { width:78px; height:106px; position:relative; border:3px solid #9faeab; border-top:0; border-radius:0 0 17px 17px; }.test-tube::before { content:""; width:88px; position:absolute; top:0; left:-8px; border-top:3px solid #9faeab; }.test-tube i { height:56px; position:absolute; right:4px; bottom:4px; left:4px; border-radius:0 0 12px 12px; background:var(--liquid); transition:background .2s; }.test-tube b { position:absolute; top:115px; left:50%; width:100px; transform:translateX(-50%); color:var(--muted); font-size:7px; text-align:center; }.test-tube.selected { box-shadow:0 0 0 3px var(--yellow-soft); }.dropper { position:absolute; top:37px; left:calc(50% - 48px); padding:6px 8px; border:1px solid var(--line); border-radius:4px; color:#765f87; background:#f2ebf6; font-size:8px; font-weight:900; }
.sample-cup { width:92px; height:88px; position:absolute; bottom:42px; padding:9px; border:2px solid #8da6b4; border-radius:5px 5px 12px 12px; background:#fff; }.sample-cup.left { left:15%; }.sample-cup.right { right:15%; }.sample-cup b,.sample-cup span { display:block; font-size:8px; }.sample-cup b { color:#426b8a; }.sample-cup span { margin-top:4px; color:var(--muted); font-size:7px; }.sample-cup i { height:27px; position:absolute; right:8px; bottom:8px; left:8px; border-radius:0 0 6px 6px; background:#dcecf4; }.mix-arrow { position:absolute; bottom:83px; left:calc(50% - 8px); color:var(--accent); font-size:24px; font-weight:900; }.reaction-tube { width:90px; height:98px; position:absolute; top:40px; left:calc(50% - 45px); overflow:hidden; border:3px solid #a5aaa6; border-top:0; border-radius:0 0 17px 17px; }.reaction-tube::before { content:""; width:100px; position:absolute; top:0; left:-8px; border-top:3px solid #a5aaa6; }.reaction-tube i { height:52px; position:absolute; right:4px; bottom:3px; left:4px; border-radius:0 0 12px 12px; background:#e8eff2; }.reaction-tube i.cloudy { background:linear-gradient(#edf2f1,#f8f8f2 50%,#fff 51%); }.reaction-tube b { position:absolute; right:0; bottom:13px; left:0; color:#59676b; font-size:8px; text-align:center; }
.funnel { width:112px; height:88px; position:absolute; top:43px; left:calc(50% - 56px); clip-path:polygon(0 0,100% 0,63% 52%,56% 100%,44% 100%,37% 52%); background:#93a9b2; }.filter-paper { position:absolute; top:5px; left:5px; width:102px; height:54px; clip-path:polygon(0 0,100% 0,58% 95%,42% 95%); background:#fbf5d7; }.filter-paper.ready { background:#e8d8a6; }.guide-rod { width:6px; height:100px; position:absolute; top:54px; left:25%; border-radius:4px; background:#9a7d5c; transform:rotate(-23deg); }.guide-rod.ready { background:#587c82; }.source-mixture { width:80px; height:50px; position:absolute; top:35px; left:10%; border-radius:4px 4px 13px 13px; background:linear-gradient(#dce3df 0 50%,#b8c5a5 50%); }.source-mixture.pouring { transform:rotate(-18deg); }.receiver { width:104px; height:74px; position:absolute; right:17%; bottom:28px; overflow:hidden; border:3px solid #91a4a2; border-top:0; border-radius:0 0 13px 13px; }.receiver::before { content:""; width:115px; position:absolute; top:0; left:-8px; border-top:3px solid #91a4a2; }.receiver i { height:31px; position:absolute; right:3px; bottom:0; left:3px; background:#e8eeee; }.receiver i.clear { background:#cce6e0; }.receiver b { position:absolute; right:0; bottom:9px; left:0; color:#416a65; font-size:8px; text-align:center; }.residue { position:absolute; top:112px; left:calc(50% - 23px); color:#806c39; font-size:8px; font-weight:900; opacity:0; }.residue.visible { opacity:1; }
.control-strip { padding-top:11px; display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:11px; }.range-control { display:grid; gap:5px; }.range-control span { color:var(--muted); font-size:8px; font-weight:850; }.range-control b { color:var(--ink); }.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:disabled,.filter-step:disabled,.conclusion-option:disabled { cursor:not-allowed; opacity:.45; }.indicator-controls { grid-template-columns:minmax(180px,.8fr) auto 1fr; align-items:center; }.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 { border-color:var(--primary); color:#fff; background:var(--primary); }.control-hint,.rule-card { padding:9px; border-left:3px solid var(--blue); background:var(--blue-soft); }.control-hint { color:#416987; font-size:8px; font-weight:750; line-height:1.45; }.fixed-controls { grid-template-columns:1fr auto; }.rule-card b,.rule-card span { display:block; }.rule-card b { color:#416987; font-size:9px; }.rule-card span { margin-top:4px; color:#58758c; font-size:8px; font-weight:700; line-height:1.4; }.filter-steps { padding-top:11px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }.filter-step { min-height:42px; padding:6px; display:grid; grid-template-columns:18px 1fr; align-items:center; gap:5px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:8px; font-weight:850; text-align:left; cursor:pointer; }.filter-step b { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#856d27; background:var(--yellow-soft); font-size:7px; }.filter-step.done { border-color:var(--primary); background:var(--primary-soft); }.filter-step.done b { color:#fff; background:var(--primary); }
.observation { flex:1; min-height:185px; }.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:#914b2f; font-family:Georgia,serif; font-size:23px; }.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; }
.task-card { margin-top:10px; padding:10px; border-left:4px solid var(--yellow); background:var(--yellow-soft); }.task-card span { color:#80692b; font-size:8px; font-weight:900; }.task-card p { margin:5px 0 0; color:#705f38; 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; }.archive { min-height:202px; }.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:#416987; 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(56 50 32 / 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:#aaa89f; }.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:#376c64; 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(42 45 38 / 56%); transition:all .2s; }.guide-frame { position:fixed; border:3px solid var(--primary); border-radius:9px; box-shadow:0 0 0 4px rgb(78 128 119 / 18%); 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:#30352f; box-shadow:0 10px 26px rgb(35 37 32 / 22%); font-size:10px; font-weight:800; text-align:center; }
@media(max-width:1180px) { .lab-grid { grid-template-columns:160px minmax(430px,1fr) 250px; }.equipment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@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); }.main-stack,.side-stack { overflow:visible; }.side-stack { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; } }
@media(max-width:620px) { .app-header { grid-template-columns:103px minmax(0,1fr); }.brand-copy small { display:none; }.demo-tabs button { min-width:122px; 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(2,minmax(0,1fr)); }.pack-list>header,.safe-note { grid-column:1 / -1; }.pack-button { min-height:76px; padding:7px; }.pack-button small { display:none; }.safe-note { margin-top:0; }.equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.prediction-options { grid-template-columns:1fr; }.scene { min-height:200px; }.control-strip,.indicator-controls,.fixed-controls { grid-template-columns:1fr; }.filter-steps { grid-template-columns:1fr 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; }.tube-row { padding-right:8%; padding-left:8%; }.test-tube { width:64px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }