:root { color-scheme: light dark; font: 14px/1.45 system-ui, sans-serif; color: #233531; background: #f5f7f5; --border: #d3ddd8; --panel: #fff; --accent: #256b53; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { min-width: 36px; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 11px; background: var(--panel); color: inherit; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); background: #e6f1eb; }
button:disabled, input:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid #369674; outline-offset: 3px; }
input { accent-color: var(--accent); }
input[type="range"] { width: 95px; vertical-align: middle; }
label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.viewer { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
header { background: var(--panel); border-bottom: 1px solid var(--border); padding: 8px 12px; z-index: 1; }
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.terrain-controls { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); gap: 16px; }
.controls { display: inline-flex; gap: 5px; align-items: center; }
.brand { letter-spacing: .08em; white-space: nowrap; }
.brand span { font-weight: 400; letter-spacing: 0; margin-left: 8px; color: #657a70; }
#position { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
output { font-variant-numeric: tabular-nums; }
.terrain-controls output { min-width: 30px; font-size: 12px; }
#map { flex: 1; min-height: 0; position: relative; touch-action: none; background: #d8dee6; overflow: hidden; cursor: grab; }
#map:active { cursor: grabbing; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
[hidden] { display: none !important; }
footer { padding: 6px 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; border-top: 1px solid var(--border); background: var(--panel); }
.hint { margin-left: auto; color: #657a70; }
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #e0ebe3, #f6f5ed); }
.login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 32px; box-shadow: 0 15px 50px #153d2610; }
.login-card h1 { font-size: 28px; line-height: 1.2; font-weight: 600; }
.eyebrow { font-size: 11px; letter-spacing: .15em; color: var(--accent); font-weight: 700; }
.login-card form { display: grid; gap: 10px; margin-top: 24px; }
.login-card input:not([type="hidden"]) { padding: 10px; border: 1px solid var(--border); border-radius: 5px; width: 100%; }
.login-card button { background: var(--accent); color: white; margin-top: 12px; }
.validation-summary-errors { color: #b13535; }
.validation-summary-valid { display: none; }
@media (max-width: 700px) { .hint, .brand span { display: none; } #position { order: 5; width: 100%; margin: 0; } .toolbar { gap: 8px; } .toolbar form { margin-left: auto; } .terrain-controls { gap: 8px 12px; } input[type="range"] { width: 75px; } }
@media (prefers-color-scheme: dark) { :root { color: #dce8e1; background: #18221e; --panel: #202e28; --border: #41554a; --accent: #64bc96; } .brand span, .hint { color: #a3b6aa; } button:hover:not(:disabled) { background: #304b3d; } .login-page { background: linear-gradient(145deg, #152c20, #24352b); } .login-card button { color: #152c20; } }