*{box-sizing:border-box}body{margin:0;background:#f0f1ed;color:#293b37;font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:34px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;pointer-events:auto;font-size:13px;font-weight:700;letter-spacing:1.8px}.logo{font-family:Georgia,serif;font-size:44px;letter-spacing:-5px;border-right:1px solid #cbd2cb;padding-right:22px;line-height:48px}.brand small{display:block;font-size:8px;letter-spacing:1.5px;margin-top:7px;font-weight:400}.badge{font-size:11px;background:#ffffffb8;padding:12px 17px;border:1px solid #fff;border-radius:30px}.badge i{display:inline-block;background:#8a9e82;width:6px;height:6px;border-radius:50%;margin-right:8px}.intro{position:absolute;top:160px;left:44px;pointer-events:none}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#7a8880}h1{font-family:Georgia,serif;font-weight:400;font-size:56px;line-height:1.05;letter-spacing:-2px;margin:19px 0}p{font-size:13px;line-height:1.8;color:#7c8780}.legend{display:flex;gap:14px;margin-top:28px;font-size:10px;color:#7b857f}.legend i{display:inline-block;width:7px;height:7px;margin-right:5px;background:#fff;border:1px solid #bcc6bd}.legend span:nth-child(2) i{background:#c4c9bd}.legend span:nth-child(3) i{background:#a4b597}aside{position:absolute;bottom:120px;left:42px;width:280px;background:#ffffffd9;backdrop-filter:blur(16px);padding:24px;border:1px solid white;border-radius:4px;box-shadow:0 10px 40px #46534306}h2{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:13px 0 9px}aside p{font-size:12px;margin:0}.stats{display:flex;gap:42px;margin:22px 0;border-top:1px solid #e4e8e1;padding-top:18px}.stats b{display:block;font-size:25px;font-weight:400}.stats span{display:block;font-size:10px;color:#819084;margin-top:6px}aside small{font-size:9px;color:#98a198}.sidecontrols{position:absolute;right:40px;top:45%;background:#ffffffd9;border:1px solid white;border-radius:30px;padding:6px;display:grid;gap:3px}button{cursor:pointer;color:#40544a;font-family:inherit;border:0;background:transparent;transition:background .2s}button:hover{background:#e5eae1}button:focus-visible{outline:2px solid #718971;outline-offset:3px}.sidecontrols button{width:38px;height:38px;font-size:22px;border-radius:50%}.divider{height:1px;background:#e0e5dc;margin:3px 7px}.compass{position:absolute;right:51px;bottom:130px;text-align:center;font-size:10px;color:#7c8a7d}.compass div{font-size:38px;margin-top:7px}footer{position:absolute;bottom:28px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;gap:15px}.hint{font-size:10px;color:#899189}.hint span{font-size:20px;vertical-align:middle;margin-right:8px}.hint em{margin:0 9px}nav{background:#ffffffdf;padding:6px;border:1px solid white;border-radius:30px;display:flex;gap:4px}nav button{border-radius:24px;padding:13px 20px;font-size:11px}nav button.active{background:#3e5448;color:white}#rotate{font-size:11px;border:1px solid #d1d9ce;border-radius:30px;padding:14px 18px}#rotate[aria-pressed=true]{background:#dce4d7}#tooltip{position:fixed;display:none;background:#344d40;color:white;padding:9px 13px;border-radius:4px;font-size:11px;pointer-events:none}#error{position:absolute;top:50%;left:35%;right:20%;background:white;padding:30px}@media(max-width:900px){header{top:22px;left:24px;right:24px}.badge{display:none}.intro{top:115px;left:24px}h1{font-size:42px}.intro p,.legend{display:none}aside{left:24px;bottom:110px;width:230px;padding:18px}.hint{display:none}footer{left:20px;right:20px;bottom:20px;justify-content:center}nav button{padding:12px}#rotate span{display:none}.sidecontrols{right:20px}.compass{right:32px}aside small{font-size:8px}}@media(max-height:650px){.intro{top:105px}h1{font-size:36px}.intro p,.legend{display:none}aside{bottom:95px;padding:16px}.stats{margin:10px 0;padding-top:10px}}

@media(max-width:600px){header{left:18px;top:18px}.brand{font-size:10px;gap:10px}.brand small{font-size:6px}.intro{left:18px;top:100px}h1{font-size:30px}.intro .eyebrow{font-size:8px}aside{display:none;left:18px;bottom:100px;width:210px;padding:15px}aside.selected{display:block}aside .stats{display:none}.sidecontrols{right:12px;top:40%;padding:3px}.sidecontrols button{width:30px;height:32px}.compass{right:19px;bottom:105px;font-size:7px}footer{left:10px;right:10px;gap:5px}nav{padding:4px}nav button{padding:11px 9px;font-size:9px}#rotate{padding:12px 10px}h2{font-size:20px}}

header{justify-content:flex-end}

.legend{display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap}.legend button{font-size:11px;padding:10px 12px;border:1px solid #cbd3c8;border-radius:22px;background:#ffffffd9;min-height:36px}.legend button:nth-child(2) i{background:#c4c9bd}.legend button:nth-child(3) i{background:#a4b597}.legend button[aria-pressed="false"]{background:#e6e8e3;color:#858b85;text-decoration:line-through}.legend button[aria-pressed="false"] i{background:transparent}.legend button:hover{background:#dce5d7}h1{max-width:400px}@media(max-width:600px){.intro{top:38px;right:12px}.legend{margin-top:16px;gap:5px}.legend button{padding:9px;font-size:10px}h1{font-size:32px;max-width:280px}}