:root{font-family:Arial,Helvetica,sans-serif;color:#243b32;background:#f5f4ed;color-scheme:light}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1080px;width:calc(100% - 40px);margin:auto}header{display:flex;justify-content:space-between;align-items:center;height:62px;border-bottom:1px solid #d9ded2}header a{font-weight:800;letter-spacing:2px;text-decoration:none;font-size:12px}header span,.eyebrow{font-size:10px;letter-spacing:2px;color:#64756b}a{color:#275d43}h1{font-size:clamp(30px,5vw,44px);letter-spacing:-1.6px;margin:5px 0 10px}h2{font-size:24px;margin:0 0 12px}h3{font-size:19px}p{line-height:1.65}.intro{padding:22px 0 18px}.intro p{margin:5px 0}.workshop{background:#fff;border:1px solid #d6ddcf;border-radius:20px;overflow:hidden;box-shadow:0 12px 30px #203a3309}.room-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 22px}.room-bar label{font-size:12px;font-weight:bold}button,select{font:inherit;border:1px solid #c9d5c2;border-radius:8px;background:#f6f8f0;color:#243b32;padding:11px;min-height:44px}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #dbad39;outline-offset:3px}select{max-width:100%;margin-left:8px;font-size:13px}.play-area{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;padding:24px;background:#203a33;color:#e7f1e9}.board-meta{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px;margin-bottom:12px}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;aspect-ratio:7/5;background:#163026;padding:5px;border-radius:12px}.cell{display:grid;place-items:center;background:#5d7d68;position:relative;border-radius:4px;font-size:26px}.wall{background:#294b3d;box-shadow:inset 0 3px #345a48}.key{color:#ffe091}.exit{background:#cbe875;color:#203a33}.beam:after{content:'';position:absolute;width:85%;height:4px;background:#afc3b0;opacity:.4}.beam.on{background:#925347}.beam.on:after{background:#ffb4a1;opacity:1}.cell svg{height:80%;width:70%;z-index:1;color:#fff7dc}.legend{font:10px monospace;color:#c3d2c7;text-align:center;margin:13px 0 0}.planner h2{font-size:20px}.micro{font-size:12px;margin:0 0 12px;color:#c3d2c7}.directions{display:flex;gap:6px}.directions button{flex:1;font-size:20px;padding:6px;min-width:0}.directions button:nth-child(3){font-size:12px}#queue{min-height:42px;padding:10px;border:1px dashed #789b84;border-radius:8px;overflow-wrap:anywhere;font:15px monospace}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{font-size:12px}.primary{background:#cbe875;border-color:#cbe875;font-weight:bold}#feedback{font-size:13px;min-height:43px}.text-button{background:none;color:#e3efce;text-decoration:underline;border:0;padding:4px 0}#solution{font-size:12px;color:#e1eccb;overflow-wrap:anywhere}.guide,.explain,.faq{padding:32px 0;border-bottom:1px solid #d9ded2}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:24px}.cards p,.explain p,.faq p{font-size:14px;color:#556b5e}.chip{font:10px monospace;border:1px solid #b8c9ac;border-radius:30px;padding:5px 10px}.explain svg{max-width:780px;width:100%;height:auto;display:block}.faq{max-width:800px}.faq details{padding:16px 0;border-bottom:1px solid #d9ded2}.faq summary{cursor:pointer;font-size:14px;font-weight:bold}.next{font-size:14px;padding:10px 0}footer{display:flex;flex-wrap:wrap;gap:22px;padding:26px 0;font-size:12px}footer span{margin-left:auto;color:#64756b}@media(max-width:650px){header,main,footer{width:calc(100% - 28px)}header span{display:none}.intro{padding:15px 0}.intro p{font-size:13px}.room-bar{padding:10px;align-items:end}.room-bar label{max-width:70%}select{display:block;margin:5px 0 0;width:100%;font-size:12px}.room-bar button{font-size:12px}.play-area{grid-template-columns:1fr;gap:19px;padding:14px}.board{max-width:440px;margin:auto}.cards{grid-template-columns:1fr;gap:24px}.planner h2{font-size:18px}.directions button{min-height:44px}.guide h2,.explain h2{font-size:22px}footer span{margin-left:0}.explain svg{min-height:70px}}
