*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f6ee;color:#254238;font-family:Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}header{padding:22px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dbe0d4}.brand{font-size:33px;font-weight:900;letter-spacing:-2px;color:#e44638;text-decoration:none}.brand span{display:inline-block;font-size:10px;letter-spacing:2px;color:#254238;margin-left:22px}nav{display:flex;gap:28px;align-items:center;font-size:12px}nav a{color:inherit;text-decoration:none}.pill{padding:10px 15px;border-radius:25px;background:#e6ebdc}.intro{margin:40px 5% 30px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2.5px;color:#6d8154}h1{font-size:clamp(32px,3.8vw,57px);letter-spacing:-2px;line-height:1.08;margin:14px 0 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#71815a}.intro p{font-size:13px;line-height:1.8;color:#758070}.world{margin:0 5%;border-radius:14px;overflow:hidden;background:#244639;box-shadow:0 15px 45px #243b3417}.bar{display:flex;justify-content:space-between;gap:12px;color:#f3f4e7;padding:16px 23px;font-size:10px;letter-spacing:1.2px}.bar i{display:inline-block;width:6px;height:6px;background:#cce6a3;border-radius:50%;margin-right:8px}.stage{position:relative;height:560px;background:#c9d6c5}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.mission{position:absolute;top:20px;left:20px;background:#fffdf0ee;padding:17px 20px;width:244px;border-radius:8px;pointer-events:none;box-shadow:0 5px 20px #31453617}.mission small{font-size:8px;letter-spacing:1.6px;color:#71815a}.mission b{display:block;font-size:14px;margin:9px 0}.mission p{font-size:11px;line-height:1.6;margin:0;color:#6d7b67}.view{position:absolute;right:18px;top:18px;display:flex;gap:6px}.view button{background:#fffdf0df;color:#254238;border:0;border-radius:5px;padding:9px 12px;font-size:10px}#hint{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);background:#244639ee;color:#fff;border-radius:30px;padding:11px 20px;font-size:12px;white-space:nowrap;max-width:95%;text-align:center}.touch{position:absolute;bottom:15px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:end}.pad{text-align:center}.pad button,.actions button{border:1px solid #fff8;background:#f9f8eddd;color:#254238;border-radius:10px;width:43px;height:36px;touch-action:none;user-select:none}.pad div{display:flex;gap:4px;margin-top:4px}.actions{display:flex;gap:8px}.actions button{width:65px;height:52px;font-size:12px}.actions small{font-size:8px;opacity:.6}.bottom{align-items:center;letter-spacing:0}kbd{background:#4c6755;border:1px solid #839478;border-radius:3px;padding:3px 5px;margin:0 5px 0 12px}.cards{margin:28px 5% 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article{border:1px solid #d9dfcf;border-radius:8px;padding:22px;background:#fcfbf5;transition:.3s}.cards article.complete{background:#e8efdd;border-color:#93af78}.cards article.complete h2:after{content:' ✓';color:#548045}.cards span{font-size:9px;letter-spacing:1.5px;color:#7d8d67}h2{font-size:18px;font-weight:500;margin:12px 0}.cards p{font-size:12px;line-height:1.7;color:#72806c;margin:0}footer{margin:0 5% 28px;display:flex;justify-content:space-between;font-size:10px;color:#7b8673;gap:15px}dialog{border:0;border-radius:14px;padding:30px;width:390px;max-width:90%;color:#254238;background:#fffdf2;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#19372f66}dialog small{font-size:10px;letter-spacing:2px;color:#82936a}dialog h2{font-family:Georgia;font-size:27px}dialog p{font-size:14px;line-height:1.7}dialog button{border:0;background:#254238;color:white;border-radius:6px;padding:12px 18px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e5e9d8;color:#254238}#loading[hidden]{display:none}@media(max-width:700px){header{padding:17px 5%}nav a{display:none}nav{gap:0}.brand span{display:none}.pill{font-size:10px}.intro{display:block;margin-top:28px}.intro p{margin-top:18px;font-size:12px}.stage{height:530px}.mission{top:12px;left:12px;width:195px;padding:12px}.mission b{font-size:12px}.mission p{font-size:10px}.view{top:12px;right:12px;flex-direction:column}.cards{grid-template-columns:1fr;gap:10px}.cards article{padding:18px}.bar{padding:13px;font-size:8px}.bottom>span:first-child{max-width:74%;line-height:2.4}kbd{margin-left:0}footer{flex-direction:column;line-height:1.5}#hint{font-size:10px;white-space:normal;width:max-content}}
