:root{--bg: #f6f0df;--panel: #fffdf8;--ink: #1f1d1a;--muted: #6a6256;--line: #d7c9b0;--accent: #d96c1a;--accent-strong: #9f4211;--safe: #247b49;--danger: #b53c2f;--shadow: 0 18px 38px rgba(76, 49, 21, .12)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Noto Sans SC,PingFang SC,sans-serif;line-height:1.5;color:var(--ink);background:radial-gradient(circle at top,#fff8e7 0,#f6f0df 55%,#ecdfc5)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:24px}.stage-panel,.control-panel{background:var(--panel);border:1px solid rgba(215,201,176,.85);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.stage-panel h1,.control-panel h2,.teacher-panel h2,.summary-group h2,.task-group h2,.indicator-group h2{margin:0}.subtitle,.stage-caption,.task-prompt,.teacher-note{color:var(--muted)}.stage-panel{display:grid;gap:16px}.stage-card{position:relative;display:grid;place-items:center;gap:14px;min-height:420px;padding:32px 24px;border-radius:22px;background:linear-gradient(180deg,#fff7ec,#f2e0bf);overflow:hidden;isolation:isolate}.stage-card:before{content:"";position:absolute;inset:auto -10% 58%;height:180px;background:radial-gradient(circle,#fff9,#fff0 72%);pointer-events:none}.sample{width:128px;height:128px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 45%),linear-gradient(180deg,#9a7b58,#7f603f);box-shadow:inset 0 1px #ffffff4d,0 12px 24px #583e1f2e;transition:opacity .18s ease,transform .22s ease,filter .22s ease,box-shadow .22s ease}.sample.has-fuel{filter:saturate(1);transform:scale(2)}.sample.no-fuel{opacity:.35;transform:scale(.94);filter:grayscale(.2);box-shadow:inset 0 1px #fff3}.flame{width:46px;height:80px;margin-top:6px;border-radius:55% 55% 45% 45%;background:radial-gradient(circle at 50% 28%,#fff5c4 0 18%,rgba(255,245,196,.15) 18% 28%,transparent 30%),linear-gradient(180deg,#ffe082,#ff9f1a 52%,#d45400);box-shadow:0 0 24px #ff8f0047;opacity:0;transform:translateY(10px) scale(.8);transform-origin:center bottom;transition:opacity .18s ease,transform .22s ease,box-shadow .22s ease,filter .22s ease}.fire-normal .flame,.fire-high .flame{opacity:1;transform:translateY(0) scale(1)}.fire-normal .flame{box-shadow:0 0 28px #ff8f0059}.fire-high .flame{transform:translateY(-2px) scale(1.18);box-shadow:0 0 36px #f606;filter:saturate(1.08)}.stage-caption,.teacher-note{margin:0;text-align:center}.control-panel{display:grid;gap:16px;align-content:start}.control-group,.teacher-panel,.indicator-group,.summary-group,.task-group{display:grid;gap:14px;border:1px solid var(--line);border-radius:18px;padding:16px;background:#fffaf1d1}.control-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.control-group>label,.teacher-panel>label,fieldset label{display:grid;gap:10px}.toggle-row{grid-template-columns:1fr auto;align-items:center}fieldset{margin:0;padding:12px;display:grid;gap:10px;border:1px solid var(--line);border-radius:14px}legend{padding:0 6px;font-weight:600}input[type=range]{width:100%}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}button{border:1px solid rgba(159,66,17,.18);border-radius:999px;padding:10px 16px;color:var(--accent-strong);background:linear-gradient(180deg,#fffaf1fa,#f9e8ceeb);transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}button:hover{border-color:#9f421166;background:linear-gradient(180deg,#fff8ec,#f6e2bf);transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid rgba(217,108,26,.24);outline-offset:2px}.indicator-group ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.condition{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(215,201,176,.7)}.condition:last-child{padding-bottom:0;border-bottom:0}.is-ok strong{color:var(--safe)}.is-fail strong{color:var(--danger)}.summary-group p{margin:0}.task-card{width:100%;display:grid;gap:6px;padding:14px;text-align:left;border:1px solid rgba(215,201,176,.9);border-radius:16px;background:#fffaf1;box-shadow:0 8px 20px #5741270f}.task-card.is-active{border-color:var(--accent);background:linear-gradient(180deg,#fff5e7,#f8e3c4);box-shadow:0 12px 24px #d96c1a24}.task-title{font-weight:700}.fuel-group{display:grid;gap:8px;margin-top:30px}.fuel-group-header{display:flex;align-items:baseline;gap:10px;font-size:.9rem;font-weight:600;color:var(--ink)}.fuel-hint{font-size:.78rem;font-weight:400;color:var(--muted)}.fuel-chips{display:flex;flex-wrap:wrap;gap:8px}.fuel-chips button{min-width:120px}.fuel-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fffaf1;cursor:pointer;transition:all .16s ease;font-family:inherit;font-size:.82rem;color:var(--ink)}.fuel-chip:hover{border-color:var(--accent);background:#fff5e7}.fuel-chip.is-selected{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 2px 8px #d96c1a40}.fuel-chip-none{opacity:.7}.fuel-chip-none:hover{opacity:1}.fuel-emoji{font-size:1.3rem;line-height:1}.fuel-name{font-weight:600}.fuel-ignition{font-size:.72rem;opacity:.7}.fuel-chip.is-selected .fuel-ignition{opacity:.9}.extinguish-group{display:grid;gap:8px}.extinguish-header{font-size:.9rem;font-weight:600;color:var(--ink)}.extinguish-buttons{display:flex;gap:8px;flex-wrap:wrap}.btn-extinguish{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border:1.5px solid var(--danger);border-radius:12px;background:#b53c2f14;color:var(--danger);cursor:pointer;transition:all .16s ease;font-family:inherit;font-size:.82rem}.btn-extinguish:hover{background:#b53c2f2e;border-color:var(--danger);transform:translateY(-1px);box-shadow:0 3px 10px #b53c2f33}.btn-extinguish:active{transform:translateY(0)}.extinguish-icon{font-size:1.4rem;line-height:1}.extinguish-name{font-weight:600}.control-actions{display:flex;gap:10px;align-items:center}.btn-primary{background:linear-gradient(135deg,var(--accent),#e67e22);color:#fff;border:none}.btn-primary:hover{background:linear-gradient(135deg,#c96a1a,#d35400);box-shadow:0 4px 14px #d96c1a59}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-sm{font-size:.78rem;padding:4px 10px}.records-group{display:grid;margin:0 24px 24px;padding:20px;background:var(--panel);border:1px solid rgba(215,201,176,.85);border-radius:24px;box-shadow:var(--shadow);gap:8px}.records-header{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;color:var(--ink)}.records-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--line)}.records-table{width:100%;border-collapse:collapse;font-size:.82rem}.records-table th,.records-table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--line)}.records-table th{background:#fffaf1d1;font-weight:600;color:var(--muted)}.records-table tr:last-child td{border-bottom:none}.safety-notes,.extension-suggestions{border-radius:10px;border:1px solid var(--line);background:#fffaf1d1;padding:0}.safety-notes summary,.extension-suggestions summary{padding:10px 14px;font-weight:600;font-size:.88rem;cursor:pointer;color:var(--ink);list-style:none;display:flex;align-items:center;gap:6px}.safety-notes summary:before,.extension-suggestions summary:before{content:"▸";transition:transform .16s ease}.safety-notes[open] summary:before,.extension-suggestions[open] summary:before{transform:rotate(90deg)}.safety-notes ul,.extension-suggestions ul{padding:0 14px 12px;margin:0;list-style:disc;font-size:.82rem;color:var(--muted);line-height:1.7}.safety-notes li::marker{color:var(--danger)}.extension-suggestions li::marker{color:var(--accent)}.explosion-warning{margin:8px 0 0;padding:8px 14px;border-radius:8px;background:#b53c2f1f;border:1.5px solid var(--danger);color:var(--danger);font-size:.88rem;font-weight:600;animation:warning-pulse 1.5s ease-in-out infinite}@keyframes warning-pulse{0%,to{opacity:1}50%{opacity:.7}}.slider-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.slider-label{font-size:.9rem;font-weight:600;color:var(--ink)}.slider-control{position:relative;display:block;padding:2px 10px}.slider-value{font-size:.88rem;font-weight:600;color:var(--ink);min-width:48px;text-align:right}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:40px;background:transparent;margin:0;cursor:pointer;touch-action:none}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--progress, 0%),var(--line) var(--progress, 0%),var(--line) 100%)}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 4px 10px #d96c1a4d;cursor:grab;transition:transform .16s ease,box-shadow .16s ease}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 6px 14px #d96c1a61}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18);cursor:grabbing}.slider-mark{position:absolute;left:var(--ignition-mark, 0%);top:50%;transform:translate(-50%);width:2px;height:16px;background:var(--danger);opacity:.5;pointer-events:none}.slider-mark-threshold{position:absolute;left:var(--threshold, 12%);background:var(--danger);width:2px;height:18px;top:50%;transform:translate(-50%,-50%);opacity:.6}.slider-mark-threshold:after{content:"12%";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%);font-size:.65rem;color:var(--danger);white-space:nowrap}.sample{position:relative;width:160px;height:110px;transition:opacity .18s ease,transform .22s ease,filter .22s ease}.brazier{width:100%;height:100%;display:block}.sample .flame{position:absolute;bottom:58px;left:50%;margin-left:-12px;margin-top:0;z-index:1}@keyframes heat-pulse{0%,to{filter:saturate(1.1) brightness(1.05) drop-shadow(0 0 6px rgba(217,108,26,.25))}50%{filter:saturate(1.3) brightness(1.15) drop-shadow(0 0 14px rgba(217,108,26,.55))}}.sample.is-heating{animation:heat-pulse 1.8s ease-in-out infinite}.flame{position:relative;width:24px;height:42px;margin-top:3px;border-radius:55% 55% 45% 45%;background:linear-gradient(180deg,#ffad33,#ff7a00 45%,#d45400);box-shadow:0 0 10px #ff8f0040;opacity:0;transform:translateY(5px) scale(.8);transform-origin:center bottom;transition:opacity .5s ease,transform .5s ease,filter .5s ease}.flame:before{content:"";position:absolute;top:6px;right:3px;bottom:4px;left:3px;border-radius:55% 55% 45% 45%;background:linear-gradient(180deg,#ffe082,#ff9f1a 60%,#ff7a00);opacity:.9;transform-origin:center bottom}.flame:after{content:"";position:absolute;top:14px;right:7px;bottom:5px;left:7px;border-radius:55% 55% 45% 45%;background:linear-gradient(180deg,#fff5c4 0%,#ffe082 70%,transparent 100%);opacity:.85;transform-origin:center bottom}.fire-normal .flame{opacity:1;transform:translateY(0) scale(1);animation:flame-sway-outer 2.2s ease-in-out infinite;box-shadow:0 0 28px #ff8f0059}.fire-normal .flame:before{animation:flame-sway-inner 1.8s ease-in-out infinite}.fire-normal .flame:after{animation:flame-sway-core 1.5s ease-in-out infinite}@keyframes flame-sway-outer{0%,to{transform:translateY(0) scale(1) rotate(-1deg)}25%{transform:translateY(-2px) scale(1.04) rotate(1deg)}50%{transform:translateY(1px) scale(.98) rotate(-.5deg)}75%{transform:translateY(-1px) scale(1.02) rotate(.5deg)}}@keyframes flame-sway-inner{0%,to{transform:scaleY(1) rotate(.5deg)}33%{transform:scaleY(1.06) rotate(-.5deg)}66%{transform:scaleY(.97) rotate(0)}}@keyframes flame-sway-core{0%,to{transform:scaleY(1) rotate(0);opacity:.85}50%{transform:scaleY(1.08) rotate(1deg);opacity:.95}}.fire-high .flame{opacity:1;transform:translateY(-3px) scale(1.25);animation:flame-sway-outer-intense 1.4s ease-in-out infinite;box-shadow:0 0 48px #ff66008c,0 0 80px #ff8f0033;filter:saturate(1.2)}.fire-high .flame:before{animation:flame-sway-inner-intense 1.1s ease-in-out infinite}.fire-high .flame:after{animation:flame-sway-core-intense .9s ease-in-out infinite}@keyframes flame-sway-outer-intense{0%,to{transform:translateY(-3px) scale(1.25) rotate(-2deg)}20%{transform:translateY(-6px) scale(1.32) rotate(2deg)}40%{transform:translateY(-2px) scale(1.22) rotate(-1.5deg)}60%{transform:translateY(-7px) scale(1.35) rotate(1.5deg)}80%{transform:translateY(-3px) scale(1.28) rotate(-.5deg)}}@keyframes flame-sway-inner-intense{0%,to{transform:scaleY(1.1) rotate(1deg)}25%{transform:scaleY(1.2) rotate(-1deg)}50%{transform:scaleY(1.05) rotate(.5deg)}75%{transform:scaleY(1.18) rotate(-.5deg)}}@keyframes flame-sway-core-intense{0%,to{transform:scaleY(1.1) rotate(0);opacity:.9}33%{transform:scaleY(1.25) rotate(2deg);opacity:1}66%{transform:scaleY(1.05) rotate(-1deg);opacity:.92}}.status-no-oxygen .flame,.status-no-fuel .flame{opacity:1;animation:flame-die 1s ease-out forwards}@keyframes flame-die{0%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}15%{opacity:.95;transform:translateY(-2px) scale(1.08);filter:brightness(1.4)}30%{opacity:.75;transform:translateY(1px) scale(.95);filter:brightness(.9)}50%{opacity:.45;transform:translateY(4px) scale(.75);filter:brightness(.6)}to{opacity:0;transform:translateY(14px) scale(.35);filter:brightness(.15)}}.sparks{position:absolute;top:42px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#ffe082;opacity:0;pointer-events:none}.sparks:before,.sparks:after{content:"";position:absolute;border-radius:50%;background:#fc6;opacity:0}.sparks:before{width:2px;height:2px;top:-4px;left:-6px}.sparks:after{width:2.5px;height:2.5px;top:2px;left:5px}.fire-high .sparks{animation:spark-fly-1 .7s ease-out infinite}.fire-high .sparks:before{animation:spark-fly-2 .9s ease-out .2s infinite}.fire-high .sparks:after{animation:spark-fly-3 .8s ease-out .5s infinite}@keyframes spark-fly-1{0%{opacity:1;transform:translateY(0) translate(0) scale(1)}to{opacity:0;transform:translateY(-55px) translate(18px) scale(.15)}}@keyframes spark-fly-2{0%{opacity:.9;transform:translateY(0) translate(0) scale(.8)}to{opacity:0;transform:translateY(-45px) translate(-22px) scale(.1)}}@keyframes spark-fly-3{0%{opacity:.8;transform:translateY(0) translate(0) scale(.6)}to{opacity:0;transform:translateY(-65px) translate(8px) scale(.12)}}.smoke{position:absolute;top:40px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#5a4b3c40;opacity:0;pointer-events:none}.smoke:before,.smoke:after{content:"";position:absolute;border-radius:50%;background:#5a4b3c33;opacity:0}.smoke:before{width:14px;height:14px;left:-10px;top:2px}.smoke:after{width:12px;height:12px;left:8px;top:-3px}.fire-normal .smoke,.fire-high .smoke{animation:smoke-rise-main 3s ease-out infinite}.fire-normal .smoke:before,.fire-high .smoke:before{animation:smoke-rise-left 3.4s ease-out .5s infinite}.fire-normal .smoke:after,.fire-high .smoke:after{animation:smoke-rise-right 3.2s ease-out 1s infinite}@keyframes smoke-rise-main{0%{opacity:0;transform:translateY(0) scale(.4)}15%{opacity:.55}to{opacity:0;transform:translateY(-75px) scale(2.2)}}@keyframes smoke-rise-left{0%{opacity:0;transform:translateY(0) scale(.3) translate(0)}15%{opacity:.4}to{opacity:0;transform:translateY(-65px) scale(1.8) translate(-18px)}}@keyframes smoke-rise-right{0%{opacity:0;transform:translateY(0) scale(.3) translate(0)}15%{opacity:.4}to{opacity:0;transform:translateY(-70px) scale(1.6) translate(14px)}}.status-no-oxygen .smoke,.status-no-fuel .smoke{animation:smoke-extinguish-burst 2.2s ease-out forwards}.status-no-oxygen .smoke:before,.status-no-fuel .smoke:before{animation:smoke-extinguish-burst-left 2.5s ease-out .3s forwards}.status-no-oxygen .smoke:after,.status-no-fuel .smoke:after{animation:smoke-extinguish-burst-right 2.3s ease-out .6s forwards}@keyframes smoke-extinguish-burst{0%{opacity:0;transform:translateY(0) scale(.5)}10%{opacity:1;transform:translateY(-8px) scale(1.8);filter:blur(1px)}to{opacity:0;transform:translateY(-100px) scale(4);filter:blur(12px)}}@keyframes smoke-extinguish-burst-left{0%{opacity:0;transform:translateY(0) scale(.4) translate(0)}10%{opacity:.9;transform:translateY(-6px) scale(1.6) translate(-5px);filter:blur(1px)}to{opacity:0;transform:translateY(-90px) scale(3.5) translate(-30px);filter:blur(10px)}}@keyframes smoke-extinguish-burst-right{0%{opacity:0;transform:translateY(0) scale(.4) translate(0)}10%{opacity:.9;transform:translateY(-10px) scale(1.5) translate(5px);filter:blur(1px)}to{opacity:0;transform:translateY(-95px) scale(3.2) translate(25px);filter:blur(10px)}}@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.records-group{margin:0 24px 24px;padding:16px}.control-group-header{align-items:stretch;flex-direction:column}}