:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #071019; color: #e8f1ef; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 75% 20%, #173a40 0, transparent 40%), #071019; }
.shell { width: min(1240px, calc(100% - 40px)); margin: auto; }
.topbar, .footer { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; border-bottom: 1px solid #22444a; }
.footer { border: 0; border-top: 1px solid #22444a; color: #6e9396; font-size: 11px; letter-spacing: .16em; }
.brand { color: #e8f1ef; font-size: 16px; font-weight: 800; letter-spacing: .28em; text-decoration: none; }
.brand span { color: #f3bb67; }
.status, .eyebrow, .map-label, .map-coordinates { color: #82aeb0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #78d7b0; box-shadow: 0 0 12px #78d7b0; }
.hero { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px, 6vw, 90px); align-items: center; min-height: calc(100vh - 150px); padding: 50px 0 70px; }
.eyebrow { color: #f3bb67; }
h1 { margin: 22px 0; font-size: clamp(56px, 8vw, 112px); line-height: .88; letter-spacing: -.075em; }
h1 em { color: #78d7b0; font-style: normal; }
.lede { max-width: 370px; color: #9db7b8; font-size: 17px; line-height: 1.6; }
.controls { display: flex; gap: 8px; margin-top: 28px; }
button { min-height: 42px; padding: 0 16px; border: 1px solid #355b60; border-radius: 5px; background: #0d2229; color: #dceae5; cursor: pointer; font: inherit; }
button:hover, button:focus-visible { border-color: #f3bb67; outline: 2px solid #f3bb67; outline-offset: 2px; }
.map-frame { position: relative; min-height: min(68vw, 680px); overflow: hidden; border: 1px solid #2d5b60; border-radius: 8px; background: #091920; box-shadow: 0 30px 80px #0008; }
canvas { display: block; width: 100%; height: 100%; min-height: min(68vw, 680px); cursor: grab; touch-action: none; }
canvas:active { cursor: grabbing; }
.map-label, .map-coordinates { position: absolute; pointer-events: none; }
.map-label-north { top: 22px; right: 24px; }
.map-label-center { top: 50%; left: 50%; color: #f3bb67; transform: translate(-50%, -50%) rotate(-16deg); }
.map-coordinates { right: 24px; bottom: 22px; text-align: right; line-height: 1.7; }
@media (max-width: 800px) { .shell { width: min(100% - 24px, 620px); } .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 44px; } .map-frame, canvas { min-height: 70vw; } h1 { font-size: clamp(58px, 18vw, 94px); } .status { display: none; } }