:root{--paper:#111a26;--ink:#eaf2f7;--green:#7fe0ca;--line:#314354;--muted:#aebfcd;--front:#62cbef;--back:#edc274;--sidebar-width:348px;--fresh:#56c3ff;--used:#ff995e}*{box-sizing:border-box}body{margin:0;background:#0b121c;color:var(--ink);font:18px/1.45 'Microsoft YaHei','PingFang SC',sans-serif;height:100dvh;overflow:hidden;display:flex;flex-direction:column}button,input,select{font:inherit;color:inherit}button,select{min-height:44px;border:1px solid var(--line);background:#1b2b3b;border-radius:7px;padding:6px 11px;cursor:pointer}button:hover{background:#263e50;border-color:#718e9f}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:2px}button.active,button[aria-pressed=true]{background:#25483f;border-color:var(--green);color:#d8fff3}button:disabled{opacity:.5}header{display:flex;justify-content:space-between;align-items:center;padding:5px 16px;gap:12px;height:54px;flex-shrink:0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px}.mark{width:36px;height:36px;border:1px solid var(--green);border-radius:50%;color:var(--green);font:26px Georgia;display:grid;place-items:center}h1{font-size:24px;margin:0;line-height:1.2}.brand p{display:none}.header-actions{display:flex;gap:7px}#help{min-width:44px}.lessons{display:flex;gap:4px;padding:4px 16px;background:#142030;flex-shrink:0;overflow-x:auto}.lessons button{border:0;background:transparent;white-space:nowrap}.lessons button.active{background:#285046;color:#cffff1}#workspace{display:flex;flex:1;flex-direction:column;min-height:0;background:#0d1624}main{display:grid;grid-template-columns:minmax(300px,1fr) 8px var(--sidebar-width);flex:1;min-height:0;border-top:1px solid var(--line)}.stage{display:flex;flex-direction:column;min-height:0;min-width:0}.stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px;min-height:54px;background:#121f2d}.stage-top h2{font-size:22px;margin:0}.stage-top p{font-size:18px;color:var(--muted);margin:0;display:none}#view-switch{display:flex;gap:4px;flex-wrap:wrap}#view-switch button.active{font-weight:700}#visuals{display:flex;flex:1;min-height:0;padding:0 8px}#three-wrap{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#0d1624}#canvas-wrap{position:absolute;inset:52px 0 44px}canvas{display:block;width:100%;height:100%;touch-action:none}.three-toolbar{position:absolute;inset:5px 5px auto 5px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;z-index:2}.three-toolbar button{background:#1c2f40e8;padding:6px 9px}#stage-fullscreen{margin-left:auto}.model-caption{position:absolute;left:10px;right:10px;bottom:7px;color:var(--muted);font-size:18px;line-height:1.4;pointer-events:none}.stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px;min-height:52px;color:var(--muted)}.stage-bottom>div{display:flex;gap:5px}#status{font-size:18px}#sidebar-splitter{cursor:col-resize;background:#101a27;border-inline:1px solid var(--line);touch-action:none}#sidebar-splitter:hover,#sidebar-splitter:focus-visible{background:#5e9f99}body.resizing{user-select:none}.explanation{overflow:auto;min-height:0;background:#162332;padding:14px}.eyebrow{color:var(--green);margin:0 0 7px}.explanation h2{font-size:25px;line-height:1.35;margin:0 0 12px}.lead{font-size:22px;line-height:1.5;margin:0 0 14px}#topic-names{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}#topic-names button{padding:6px 8px;flex-grow:1}.insight{padding:11px 0;border-top:1px solid var(--line)}.insight strong{display:block;color:var(--green);margin-bottom:5px}.insight p{margin:0}#card-content>button{display:block;width:100%;text-align:left;margin:6px 0}.quiet{background:none;border:0;text-align:left;padding:6px 0;color:var(--muted)}.note{color:var(--muted)}#return-question{width:100%;margin:8px 0}#flow-legend{position:absolute;left:10px;top:57px;z-index:1;font-size:18px;display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:7px;background:#14283bdc;pointer-events:none}#flow-legend .fresh{color:var(--fresh)}#flow-legend .used{color:var(--used)}#flow-legend .nutrient{color:#edc274}#flow-legend small{display:none}.air-key{padding:0 0 12px;margin-bottom:14px;border-bottom:1px solid var(--line)}.air-key h3{font-size:22px;margin:0 0 9px}.air-type{display:flex;gap:9px;margin:8px 0}.air-type i{display:block;width:12px;height:12px;flex:none;border-radius:50%;margin-top:8px;box-shadow:0 0 12px currentColor}.air-type.fresh{color:var(--fresh)}.air-type.used{color:var(--used)}.air-type p{color:var(--ink);margin:0;font-size:18px}.air-type strong{display:block}.air-key .key-note{color:var(--muted);margin:9px 0 0;font-size:18px}.air-route{padding:9px 0 0;border-top:1px solid var(--line);margin-top:10px}.air-route strong{display:block;color:var(--green);font-size:22px}#air-route{font-size:18px;margin:5px 0 0}.settings{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}label{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px}input[type=range]{min-height:44px;width:125px;accent-color:var(--green)}.settings p{font-size:18px;color:var(--muted)}#load{position:absolute;inset:0;background:#102031f2;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center}#load p{font-size:18px}progress{width:260px;accent-color:var(--green)}#selected-label{position:absolute;background:#183c39ee;border-left:3px solid var(--green);padding:6px 12px;border-radius:5px;transform:translate(-50%,-100%);pointer-events:none;font-size:18px;max-width:220px}#specimen-select{position:absolute;left:10px;bottom:48px;z-index:2;background:#1b3041}#cut-controls{position:absolute;bottom:48px;right:9px;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 7px;background:#142638ec;border-radius:7px}#cut-controls input{width:80px}.footer-line{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:5px 14px;font-size:18px;color:var(--muted);min-height:44px}body.breathing .footer-line{display:none}#resp-controls{border-top:1px solid var(--line);background:#162635;display:flex;flex-direction:column;padding:6px 12px;gap:5px;flex-shrink:0}.resp-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.resp-actions button{min-width:90px}#play{background:#285447;border-color:var(--green);font-weight:700}.resp-actions select{max-width:240px}.phase-steps{display:flex;gap:5px;flex:1}.phase-steps button{flex:1;white-space:nowrap}.resp-state{display:flex;align-items:center;gap:15px;min-height:44px}.resp-state strong{font-size:22px;color:var(--green);white-space:nowrap}.resp-state p{font-size:22px;margin:0;line-height:1.35}#phase-progress{height:5px;border-radius:3px;background:#334858;overflow:hidden}#phase-progress::before{content:'';display:block;height:100%;width:var(--progress,0%);background:var(--green)}body[data-breath=exhale] #phase-progress::before{background:var(--used)}body[data-breath=exhale] #phase{color:var(--used)}dialog{background:#182738;border:1px solid #5a7889;border-radius:12px;color:var(--ink);max-width:850px;width:calc(100% - 32px);max-height:88dvh;padding:25px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#0009}dialog p,dialog li{font-size:18px;line-height:1.7}dialog a{color:var(--green)}#dialog-close{float:right;min-width:44px;font-size:24px}.capture-preview{display:block;max-width:100%;max-height:58dvh;object-fit:contain;margin:auto}.save-image{display:inline-block;background:#285447;color:white!important;padding:10px 16px;border-radius:7px;text-decoration:none;min-height:44px}.correct{background:#235447!important}.wrong{background:#713629!important}.feedback{border-left:3px solid var(--green);padding:10px}[hidden]{display:none!important}body.focus main{grid-template-columns:1fr}body.focus .explanation,body.focus #sidebar-splitter{display:none}body.teaching-fullscreen header,body.teaching-fullscreen .lessons{display:none}body.teaching-fullscreen #workspace,#workspace:fullscreen{height:100dvh;flex:none;width:100%;background:#0d1624}body.teaching-fullscreen .footer-line{display:none}
@media(max-width:1450px){:root{--sidebar-width:320px}.phase-steps button{padding:6px 8px}.resp-actions{gap:4px}.three-toolbar button{padding:6px 8px}#status{max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.explanation{padding:12px}.explanation h2{font-size:24px}}
@media(max-width:1000px){.three-toolbar button[data-view]{display:none}#flow-legend{top:58px}.resp-actions{flex-wrap:wrap}.phase-steps{flex-basis:100%;order:-1}}
@media(max-width:900px){body{height:auto;min-height:100dvh;overflow:auto}header{height:auto;min-height:54px;flex-wrap:wrap;padding:6px 9px}h1{font-size:22px}.header-actions{gap:4px}.header-actions button{padding:6px 8px}.lessons{padding:4px;gap:0}.lessons button{padding:7px 8px}#workspace{display:flex;flex:none;min-height:0}main{display:contents}.stage{height:68dvh;min-height:500px;order:0}.stage-top{padding:6px 9px;gap:5px;flex-wrap:wrap}.stage-top h2{font-size:20px}.stage-top #view-switch{margin-left:auto}.explanation{order:2;border-top:1px solid var(--line);overflow:visible;padding:16px}#sidebar-splitter{display:none}footer{display:contents}#resp-controls{order:1;padding:8px;gap:7px}.footer-line{order:3}.phase-steps{order:-1;flex-basis:100%;display:grid;grid-template-columns:repeat(2,1fr)}.phase-steps button{white-space:normal;line-height:1.2;padding:7px}.resp-actions button{min-width:76px}.resp-actions select{flex:1;max-width:none;min-width:120px}.resp-state{align-items:flex-start;gap:8px}.resp-state strong{font-size:22px}.resp-state p{font-size:22px}.three-toolbar{gap:3px}.three-toolbar button{padding:6px 7px;font-size:18px}#stage-fullscreen{margin-left:0}.three-toolbar #pan-mode{display:none}#flow-legend{top:102px;left:7px;padding:5px 7px;font-size:18px;gap:1px}#canvas-wrap{top:144px;bottom:57px}.model-caption{font-size:18px}.stage-bottom{padding:4px 8px;justify-content:center}.stage-bottom #status,.stage-bottom #capture{display:none}#cut-controls{left:7px;right:7px;bottom:60px;justify-content:center}#specimen-select{bottom:166px;left:8px}#three-wrap:has(#cut-controls:not([hidden])) #canvas-wrap{bottom:170px}body.focus{height:100dvh;overflow:hidden}body.focus #workspace{flex:1;min-height:0}body.focus main{display:flex;flex:1;min-height:0}body.focus .stage{height:auto;min-height:0;flex:1}body.focus footer{display:flex;flex-direction:column;flex:none}body.focus .footer-line{display:none}body.focus #canvas-wrap{top:144px;bottom:54px}body.teaching-fullscreen{height:100dvh;overflow:hidden}body.teaching-fullscreen #workspace{overflow:auto}body.teaching-fullscreen:not(.focus) .stage{height:66dvh;min-height:450px}body.teaching-fullscreen:not(.focus) .explanation{max-height:60dvh;overflow:auto}}
body.breathing .explanation>.eyebrow,body.breathing .explanation>.lead{display:none}body.breathing .explanation>h2{font-size:22px;margin:8px 0 10px}.colour-note summary{min-height:44px;font-size:18px}.air-key{padding-bottom:10px;margin-bottom:10px}.air-route{margin-top:3px}.air-type{margin:6px 0}
@media(max-width:900px){#flow-legend{top:56px}#canvas-wrap,body.focus #canvas-wrap{top:112px}}
@media(max-width:900px){body.focus .brand,body.focus .model-caption,body.focus .stage-bottom{display:none}body.focus #canvas-wrap{bottom:12px}body.focus header{min-height:54px;justify-content:flex-end}}