:root{font:14px/1.45 Tahoma,Arial,sans-serif;color:#edf3f2;background:#b3c7c9;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{height:100dvh;min-height:500px;position:relative;overflow:hidden}#world{width:100%;height:100%;display:block;outline:none;touch-action:none}header{position:absolute;top:22px;left:26px;right:26px;display:flex;justify-content:space-between;gap:20px;pointer-events:none;color:#182d32;text-shadow:0 1px 12px #e9f5f3}header nav{pointer-events:auto;display:flex;align-items:start;gap:18px}h1{font:42px/1 Georgia,serif;letter-spacing:-1px;margin:0}header p{margin:8px 0 0;font:18px Georgia,serif}a{color:inherit;text-underline-offset:4px}button,select{font:inherit;color:#eef6ff;border:1px solid #9ab7d2;border-radius:5px;background:linear-gradient(#315374,#203951);padding:8px 12px;cursor:pointer;box-shadow:inset 0 1px #ffffff25}button:hover{background:#3c6489}button:active,button.held{background:#152638;box-shadow:inset 0 2px 6px #0008}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #95c8ff;outline-offset:3px}.map{position:absolute;right:24px;top:86px;width:182px;background:#183039df;border:1px solid #b4c9d580;border-radius:7px;overflow:hidden;box-shadow:0 8px 20px #0003}.map canvas{display:block;width:180px;height:180px}.map p{margin:0;padding:6px 9px 0;font-size:11px;font-variant-numeric:tabular-nums}.map span{font-size:10px;display:block;padding:2px 9px 7px;color:#b4c7cb}.dashboard{position:absolute;bottom:30px;left:18px;right:18px;background:linear-gradient(125deg,#153036e8,#172d38ef);border:1px solid #a1b7c080;box-shadow:inset 0 1px #ffffff30,0 8px 20px #14222955;border-radius:9px}.readings{display:flex;gap:24px;align-items:center;padding:11px 14px;border-bottom:1px solid #aec5d330;font-size:12px;font-variant-numeric:tabular-nums}.readings b{font-size:18px;font-weight:400}.readings #status{margin-left:auto;color:#d8e7cb}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px}.controls label{display:flex;gap:7px;align-items:center}.controls #help{margin-left:auto}.boundary{position:absolute;left:15px;right:15px;bottom:5px;text-align:center;font-size:10px;color:#132b30;text-shadow:0 0 8px white;margin:0}#key-help{font-size:12px;margin:0;padding:3px 14px 12px;max-width:900px}.start{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(450px,calc(100% - 36px));padding:30px;background:linear-gradient(125deg,#183036f2,#122b39f2);border:1px solid #c0d7df8c;border-radius:12px;box-shadow:inset 0 1px #ffffff30,0 20px 80px #15212c66;backdrop-filter:blur(12px);z-index:2}.start h2{font:34px/1.12 Georgia,serif;margin:0 0 18px}.start p{color:#cbd9dc}.start dl{display:grid;gap:7px;margin:20px 0}.start dl div{display:grid;grid-template-columns:125px 1fr;gap:10px}.start dt{font-weight:bold}.start dd{margin:0;color:#ccdbdc}.start #begin{width:100%;font-size:17px;padding:11px}.start .small{font-size:11px;line-height:1.5;margin:12px 0 0}.start[hidden]{display:none}.touch{display:none}noscript{position:absolute;top:100px;left:20px;background:#152d36;padding:20px}body[data-view=crew] header,body[data-view=crew] .boundary{color:#eef5ee;text-shadow:0 1px 8px #061515}
@media(pointer:coarse){.touch{position:absolute;left:14px;bottom:calc(var(--dashboard-height,180px) + 48px);display:flex;gap:8px;align-items:center}.touch>div{display:grid;gap:8px}.touch button{width:50px;height:48px;font-size:23px;touch-action:none;user-select:none}}
@media(max-width:700px){header{top:14px;left:16px;right:16px;gap:10px}h1{font-size:32px}header nav{gap:10px;font-size:11px}header button{font-size:11px;padding:5px 8px}header p{font-size:16px;max-width:200px}.map{top:78px;right:12px;width:122px}.map canvas{width:120px;height:120px}.map p{font-size:10px}.map span{font-size:9px}.dashboard{left:7px;right:7px;bottom:33px}.readings{gap:10px;flex-wrap:wrap;padding:8px;font-size:10px}.readings b{font-size:14px}.readings #status{margin-left:0;flex-basis:100%}.controls{gap:6px;padding:7px}.controls button,.controls select{font-size:11px;padding:6px 8px}.controls label{font-size:11px;gap:4px}.controls #help{margin-left:0}.boundary{font-size:9px;bottom:4px;line-height:1.2}.start{top:43%;padding:22px}.start h2{font-size:29px}.start dl{font-size:12px}.start dl div{grid-template-columns:104px 1fr}.start p{font-size:13px}.touch{bottom:calc(var(--dashboard-height,180px) + 48px)}.touch button{width:44px;height:44px}.touch>div{gap:6px}}
@media(max-height:620px){.start{top:45%;padding:18px}.start h2{font-size:25px}.start dl{margin:10px 0}.start .small{display:none}.map{display:none}}