*{box-sizing:border-box}body{margin:0;padding:16px;background:#182f36;color:#363c37;font:14px/1.6 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:14px;background:#f6efdb;border:2px solid #87aaa5;border-radius:17px}main:has(#home:not([hidden]),#pause:not([hidden]),#end:not([hidden])){max-width:680px}button,select{font:inherit;min-height:44px;padding:8px 12px;border:1px solid #b4c6bd;border-radius:9px;background:#fffaf0;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:hover:enabled{background:#e5efe4}button.primary{background:#167f85;border-color:#167f85;color:#fffdf2}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c98023;outline-offset:3px}a{color:#236b71}h1{font-size:28px;margin:8px 0 18px}p{margin:8px 0}.brand{font-size:12px;color:#626959}.menu{min-height:430px;padding:24px 12px;text-align:center;border-radius:12px;background:repeating-linear-gradient(0deg,transparent,transparent 47px,#dfebe1 48px),repeating-linear-gradient(90deg,#fff9e9,#fff9e9 47px,#dfebe1 48px)}.title{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0}.title span{font-size:56px;color:#bd513c;line-height:1}.title h1{margin:0}.menu>p{max-width:380px;margin:12px auto;color:#626959}.menu-actions{display:grid;gap:12px;width:min(100%,260px);margin:20px auto 12px}.menu-actions button{min-height:50px}.language{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.language label{display:flex;align-items:center;gap:8px}.language input{width:22px;height:22px;accent-color:#167f85}header{display:flex;align-items:center;justify-content:space-between;gap:12px}#level{font-size:12px;margin-left:8px;color:#626959}#score{font-size:12px}#lesson{margin:12px 0}.mission{padding:12px 16px;background:#fff5d4;border:1px solid #c8b579;border-radius:12px;font-weight:600}.play-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:12px}.scene{position:relative;overflow:hidden;border-radius:12px;border:1px solid #8eaca1;background:#f1dfb8}.scene svg{display:block;width:100%;transition:transform .8s}.scene.depart svg{transform:scale(1.18);transform-origin:80% 60%}#device-badge{position:absolute;bottom:8px;left:10px;background:#fffaf0ee;border:1px solid #b4c6bd;border-radius:20px;padding:3px 10px;font-size:12px}#fan-rotor{transform-origin:70px 76px}.fan-on #fan-rotor{animation:spin .65s linear infinite}#steam{opacity:1;transition:opacity .6s}.vent-on #steam{opacity:.06}.heater-on #heater-light{fill:#e97645}.heater-on #steam{animation:steam 1.3s ease-in-out infinite alternate}#door-left,#door-right{transition:transform .6s}.door-on #door-left,.unlocked #door-left{transform:translateX(-55px)}.door-on #door-right,.unlocked #door-right{transform:translateX(55px)}#game:has(.running) .node{pointer-events:none}.case-display{padding:10px 12px;background:#e4ece1;border-radius:9px;margin:10px 0}.case-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.case-list span{padding:4px 8px;border:1px solid #b4c6bd;border-radius:6px;background:#fffaf0;font-size:12px}.case-list .pass{color:#1a7063;background:#e1eee0}.case-list .fail{color:#9b312a;background:#f8dfd6}#status{min-height:48px}#replay{width:100%}.panel{padding:12px;background:#fffaf0;border-radius:12px}#instruction{min-height:40px;margin:0 0 4px;font-size:13px}.chart{height:320px;position:relative;max-width:400px;margin:auto}.chart>svg{position:absolute;inset:0;width:100%;height:100%}.chart svg>path{fill:none;stroke:#648d87;stroke-width:2;marker-end:url(#arrow)}.chart svg text{text-anchor:middle;fill:#4e7168;font:12px system-ui}.terminal{position:absolute;left:34%;width:32%;text-align:center;border:1px solid #8eaaa0;border-radius:20px;background:#f4f0dc;line-height:28px}.begin{top:0}.finish{bottom:0}.node{position:absolute;border-radius:3px;padding:7px;font-size:13px;min-height:50px;line-height:1.4;background:#f5f1de}.condition{top:63px;left:17%;width:66%;height:94px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);padding:14px 27px;border:0;background:#dce9dc}.yes{left:2%;width:44%;top:195px}.no{right:2%;width:44%;top:195px}.node[aria-pressed=true]{background:#fbe4b7;box-shadow:inset 0 0 0 3px #be893e}.node.traced{background:#cee7e4}.node:focus-visible{outline:none;background:#f4d49a;box-shadow:inset 0 0 0 3px #9b5d15}#patch-panel{border-top:1px solid #dddac7;padding-top:12px;margin-top:12px}#patch-title{font-size:13px}#patch-options{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}#patch-options button{flex:1;font-size:13px}#patch-options button[aria-pressed=true]{background:#fbe4b7;border-color:#b67924}#test{width:100%}#review{text-align:left;max-width:560px;margin:18px auto}#review summary{cursor:pointer;padding:12px;background:#fffaf0;border-radius:9px}#review article{background:#fffaf0;border:1px solid #b4c6bd;padding:12px;border-radius:9px;margin-top:10px}#review small{display:block;color:#626959}.bad-flash{animation:flash .45s}body:has(#pause:not([hidden])) *{animation-play-state:paused!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes steam{to{opacity:.55;transform:translateY(-5px)}}@keyframes flash{50%{background:#f5c5b8}}@media(max-width:650px){body{padding:4px}main{padding:10px}.play-layout{grid-template-columns:1fr;gap:12px}.scene{max-width:430px;margin:auto}.scene svg{max-height:235px}.title h1{font-size:clamp(18px,5.8vw,28px)}.title span{font-size:40px}header{flex-wrap:wrap}.chart{height:320px}#status{min-height:0}#score{margin-left:auto}.panel{padding:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fan-on #fan-rotor{transform:rotate(35deg)}}

button.primary:hover:enabled{background:#126e73}

.node:disabled{opacity:1;cursor:default}.chart{height:280px}.condition{top:19.6875%;height:29.375%;min-height:44px}.yes,.no{top:60.9375%;height:15.625%;min-height:44px}#lesson{background:#fff5d4;border:1px solid #c8b579;border-radius:12px;padding:12px}#lesson-copy{font-size:13px;line-height:1.7;margin:8px 0}.practice #status,.practice #cases{display:none}.practice .scene svg{max-height:225px}.intro .scene *{animation-play-state:paused!important}.practice #replay{margin-top:8px}.condition{padding:12px 28px;font-size:12px}.node.yes,.node.no{padding:6px}

/* Fault atmosphere remains until every test case passes; device motion still follows each case. */
#heavy-steam,#boiling,#overflow,#door-warning{opacity:0;transition:opacity .7s}
#danger-tint{opacity:0;transition:opacity .7s}
#warning-lamp{opacity:.2;transition:opacity .7s}
.fault #warning-lamp{opacity:1}
.fault #danger-tint{opacity:.09;animation:danger-glow 2.8s ease-in-out infinite alternate}
.fault #device-badge{border-color:#bd7050;background:#fff0d9f5}
.fault-vent #heavy-steam{opacity:.72;animation:fog-drift 3s ease-in-out infinite alternate}
.fault-heat.heater-on #heavy-steam{opacity:.48;animation:fog-drift 2.5s ease-in-out infinite alternate}
.fault-heat.heater-on #boiling,.fault-heat.heater-on #overflow{opacity:.9}
.fault-heat.heater-on #boiling{animation:water-rise 1s ease-in-out infinite alternate}
.fault-heat.heater-on #water-ripples{animation:water-rise .9s ease-in-out infinite alternate}
.fault-door #door-warning{opacity:1}
.fault-door #heavy-steam{opacity:.32;animation:fog-drift 3s ease-in-out infinite alternate}
.repaired #warning-lamp path:first-of-type{fill:#65a486;stroke:#427c6e}
.repaired #warning-lamp{opacity:1}
.repaired #warning-lamp ellipse{fill:#6fbe98}
@keyframes danger-glow{to{opacity:.18}}
@keyframes fog-drift{to{transform:translate(-7px,-9px)}}
@keyframes water-rise{to{transform:translateY(-3px)}}

/* The chart has fixed vertical coordinates; only its width responds to the screen. */
.chart{height:360px;isolation:isolate}
.chart>svg{z-index:-1}
.chart svg>.join-line{marker-end:none}
.condition{top:55.8px;left:7.5%;width:85%;height:135px;min-height:0;padding:0;clip-path:none;display:flex;align-items:center;justify-content:center;border:0;background:transparent!important;box-shadow:none!important;font-size:13px}
.condition::before{content:"";position:absolute;inset:0;z-index:-1;background:#dce9dc;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.condition span{display:block;width:57%;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.condition.traced::before{background:#cee7e4}
.condition[aria-pressed=true]::before{background:#fbe4b7}
.condition:focus-visible::before{background:#f4d49a}
.condition:focus-visible{outline:3px solid #9b5d15;outline-offset:3px}
.node.yes,.node.no{top:262.8px;height:46.8px;min-height:44px;width:43%;font-size:13px}
.node.yes{left:2.25%}.node.no{right:2.25%}
.branch-label{position:absolute;top:207px;padding:2px 8px;background:#fffaf0;color:#4e7168;font-size:12px;line-height:20px}
.yes-label{left:5%}.no-label{right:5%}
.terminal{height:27px;line-height:25px}
#patch-options button{flex:1 1 125px;overflow-wrap:anywhere}

.chart.complex-condition{height:480px}.complex-condition .condition{top:74.4px;height:180px}.complex-condition .node.yes,.complex-condition .node.no{top:350.4px;height:62.4px}.complex-condition .branch-label{top:276px}.complex-condition .terminal{height:36px;line-height:34px}.complex-condition .condition span{font-size:12px;line-height:1.3;width:62%}