.geometry-main { padding-top: 3rem; }
.geometry-main h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
.geometry-controls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.geometry-main label { display: grid; gap: .4rem; font-size: .92rem; }
.geometry-main input[type=number] { min-width: 0; width: 100%; }
.geometry-main button, .geometry-main input[type=number] { padding: .65rem; border: 1px solid #62779d; border-radius: 8px; background: #182238; color: #eaf0ff; font: inherit; }
.geometry-main button { cursor: pointer; }
.geometry-main button:hover { background: #293956; }
.geometry-main button:disabled { opacity: .5; cursor: default; }
.geometry-main input:focus-visible, #globe:focus-visible { outline: 3px solid #b9ccff; outline-offset: 3px; }
.geometry-main input[type=range] { width: 100%; accent-color: #b9ccff; }
.geometry-main input[type=checkbox] { accent-color: #b9edda; }
.control-note { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); margin: 0; }
.geometry-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0,1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.globe-panel, .flight-panel { padding: 1.2rem; }
#globe { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; border-radius: 12px; }
#globe:active { cursor: grabbing; }
#map { display: block; width: 100%; height: auto; }
.flight-panel h2 { margin-top: 0; font-size: 1.6rem; }
.flight-panel label { margin: .9rem 0; }
.flight-buttons { display: flex; gap: .6rem; }
.flight-panel fieldset { border: 1px solid var(--line); border-radius: 8px; margin-top: 1.2rem; }
.flight-panel fieldset label { display: flex; align-items: start; gap: .5rem; }
.geometry-main pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; color: #d6e5ff; }
.legend { font-size: .8rem; }
.route-key { color: #e5c788; } .tangent-key { color: #b9edda; } .north-key { color: #b9ccff; } .east-key { color: #f6bf81; }
@media(max-width: 900px) { .geometry-layout { grid-template-columns: 1fr; } .geometry-controls { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 480px) { .geometry-controls { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion: reduce) { .geometry-main * { scroll-behavior: auto; } }