@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
*{box-sizing:border-box}body{margin:0;background:#91aca4;color:#293e33;font:14px 'DM Sans',sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none}button,a,summary{cursor:pointer}button{font:inherit;color:inherit;border:0}header{position:absolute;top:24px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;gap:12px;text-decoration:none;color:#203b2a;font-size:34px;align-items:center}.brand span{font-size:15px;letter-spacing:3px;font-weight:700}.brand small{display:block;font-size:8px;letter-spacing:2.3px;margin-top:6px}.resources{display:flex;gap:8px;align-items:center}.resources>*{background:#f9f8eddd;padding:12px 16px;border-radius:30px;font-size:12px}aside{position:absolute;left:32px;top:115px;width:300px;padding:28px;background:#fcfaf1ed;border-radius:4px 26px 26px 4px;box-shadow:0 15px 60px #233f3010}.eyebrow{font-size:9px;letter-spacing:2px;color:#7b8c6b}h1{font:500 38px/1.13 'Playfair Display',Georgia,serif;margin:17px 0}.intro{color:#758171;line-height:1.7;font-size:12px}.progress{height:4px;background:#e1e4d5;border-radius:8px;margin:25px 0 14px}.progress i{display:block;height:100%;background:#75954e;transition:width .5s}#stepCount{font-size:9px;letter-spacing:1.5px;color:#8a9779}h2{font-size:17px;font-weight:500;margin:12px 0 8px}#stepDesc{font-size:12px;line-height:1.6;color:#6e7c6a;min-height:39px}.primary,.secondary{width:100%;padding:13px;border-radius:8px;margin:5px 0}.primary{background:#375a38;color:#fff}.primary:hover{background:#527847}.secondary{background:#e8ecdd;font-size:11px}kbd{float:right}details{margin-top:12px;font-size:11px}ol{padding-left:20px;line-height:1.9;max-height:125px;overflow:auto}#hint{border-top:1px solid #dfe4d4;padding-top:15px;font-size:10px;line-height:1.6;color:#8b947f}nav{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#fcfaf1ee;border-radius:14px;padding:8px;white-space:nowrap}nav span{font-size:8px;letter-spacing:2px;padding:0 12px;color:#8a927b}nav button{padding:12px 17px;background:transparent;border-radius:8px;font-size:12px}nav button:hover{background:#e1e8d4}.compass{position:absolute;right:40px;top:110px;text-align:center;font-size:22px;color:#fff9}.view{position:absolute;right:25px;bottom:146px;display:flex;flex-direction:column;gap:7px}.view>*{background:#fcfaf1dd;padding:11px 14px;border-radius:8px;text-decoration:none;font-size:11px;color:#375a38}footer{position:absolute;bottom:24px;left:32px;right:32px;display:flex;justify-content:space-between;font-size:10px;color:#eaf1e4;text-shadow:0 1px 3px #142c29}footer b{font-weight:600}footer i{color:#c6df9b}#toast{position:absolute;top:90px;left:50%;transform:translateX(-50%);padding:12px 22px;background:#2b463cec;color:white;border-radius:30px;opacity:0;transition:opacity .3s;pointer-events:none}#touch{display:none;position:absolute;right:18px;bottom:195px;text-align:center}#touch button{width:43px;height:43px;margin:2px;border-radius:12px;background:#fcfaf1cc;touch-action:none}@media(max-width:760px){header{top:15px;left:15px;right:15px}.brand span{font-size:10px;letter-spacing:1px}.brand small{font-size:6px}.resources{gap:3px}.resources>*{padding:8px;font-size:9px}#sound{display:none}aside{left:12px;top:83px;width:218px;padding:17px;background:#fcfaf1e8}h1{font-size:27px;margin:10px 0}.intro{display:none}.progress{margin-top:15px}#hint{display:none}details{margin-top:6px}nav{bottom:60px;width:calc(100% - 24px);justify-content:space-between}nav span{display:none}nav button{padding:10px 8px;font-size:10px}footer{bottom:13px;left:16px}footer>span:last-child{display:none}footer>span{font-size:8px}.view{bottom:110px;right:15px}.compass{display:none}#touch{display:block}#toast{top:67px;font-size:11px;width:max-content;max-width:90vw}}

.wardrobe{position:absolute;left:32px;top:125px;background:#fff9eeed;border-radius:20px;padding:26px;width:270px;box-shadow:0 15px 50px #263a2720}.wardrobe[hidden]{display:none}.wardrobe small{letter-spacing:2px;font-size:9px;color:#83936f}.wardrobe h2{font:36px Georgia;margin:12px 0}.wardrobe p{font-size:12px;color:#748068;line-height:1.8}.swatches{display:flex;gap:9px;margin:20px 0}.swatches button{height:31px;width:31px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px #263a2740}.swatches button:focus{outline:2px solid #375a38}@media(max-width:760px){.wardrobe{left:12px;top:83px;width:205px;padding:18px}.swatches{gap:5px}.swatches button{width:27px;height:27px}.view{gap:4px}.view>*{padding:9px;font-size:10px}}

.guide{max-width:490px;width:calc(100% - 30px);max-height:90vh;overflow:auto;border:0;border-radius:24px;padding:30px;color:#354a36;background:#fffaf0;font:13px/1.65 'DM Sans',sans-serif}.guide::backdrop{background:#193b368c;backdrop-filter:blur(7px)}.guide h2{font:30px/1.2 Georgia}.guide small{font-size:9px;letter-spacing:2px;color:#8a9875}.guide ol{max-height:none;padding-left:20px;line-height:1.7}.guide li{padding:7px 0}.guide p{color:#6f7e67;font-size:12px}@media(max-width:760px){#hint{display:block;font-size:10px;padding-top:8px;margin-bottom:0}aside{padding:14px}aside h1{font-size:23px}.view{bottom:109px}#touch{bottom:365px}.guide{padding:23px}}