:root {
    --paper: #f3efe6;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-strong: rgba(255, 255, 255, 0.88);
    --ink: #123629;
    --ink-soft: #486157;
    --accent: #d85e3a;
    --accent-cool: #2f7d74;
    --line: rgba(18, 54, 41, 0.12);
    --shadow: 0 22px 65px rgba(18, 54, 41, 0.12);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --font-body: "Segoe UI", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 18%, rgba(75, 161, 150, 0.26), transparent 20%),
        radial-gradient(circle at 78% 14%, rgba(216, 94, 58, 0.16), transparent 18%),
        linear-gradient(180deg, #dbece6 0%, #eef3ef 28%, var(--paper) 100%);
}

body[data-theme="night"] {
    --paper: #0f1d1f;
    --surface: rgba(18, 29, 31, 0.74);
    --surface-strong: rgba(18, 29, 31, 0.9);
    --ink: #ecf3ee;
    --ink-soft: #bad0c6;
    --line: rgba(255, 255, 255, 0.12);
    --shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
    background:
        radial-gradient(circle at 12% 18%, rgba(66, 118, 109, 0.28), transparent 20%),
        radial-gradient(circle at 78% 14%, rgba(216, 94, 58, 0.14), transparent 18%),
        linear-gradient(180deg, #132325 0%, #101c1f 28%, #0d1517 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(243, 239, 230, 0.7);
    border-bottom: 1px solid var(--line);
}

body[data-theme="night"] .site-header {
    background: rgba(15, 29, 31, 0.72);
}

.site-header--overlay {
    position: fixed;
    inset: 0 0 auto 0;
    background: rgba(243, 239, 230, 0.5);
}

.site-header--map-shell {
    background: linear-gradient(180deg, rgba(2, 5, 10, 0.96), rgba(2, 5, 10, 0.8) 78%, rgba(2, 5, 10, 0));
    border-bottom: 0;
    backdrop-filter: blur(10px);
}

.toolbar.presura-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    width: min(100%, calc(100% - 24px));
    margin: 0 auto;
    min-height: 72px;
    padding: 10px 18px 12px;
}

.toolbar__modules {
    min-width: 0;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.toolbar__modules::-webkit-scrollbar {
    display: none;
}

.toolbar__brand,
.site-header__actions--map-shell {
    position: relative;
    z-index: 1;
}

.site-header__actions--map-shell {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    flex-shrink: 0;
    white-space: nowrap;
}

.site-header--map-shell .site-header__inner {
    width: min(100%, calc(100% - 24px));
    margin-top: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.site-header--map-shell .site-nav {
    gap: 8px;
    color: rgba(238, 244, 239, 0.84);
}

.site-header--map-shell .brand .meta,
.site-header--map-shell .site-nav a {
    color: rgba(238, 244, 239, 0.74);
}

.site-header__actions--map-shell {
    gap: 10px;
}

.brand-mark--weather {
    width: 42px;
    height: 42px;
    position: relative;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(8, 16, 24, 0.28);
    overflow: hidden;
}

.brand-mark__glyph {
    position: relative;
    z-index: 2;
    font-size: 1.45rem;
    font-weight: 900;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #16345f;
    transform: translateX(2px);
}

.brand-mark__wing {
    position: absolute;
    left: 6px;
    right: 18px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7aa7ff, #2f8dff 72%, #1d5ecf);
    transform-origin: left center;
}

.brand-mark__wing--top {
    top: 10px;
    transform: skewX(-22deg);
}

.brand-mark__wing--bottom {
    top: 19px;
    right: 14px;
    transform: skewX(-26deg);
}

.brand-copy {
    display: grid;
    gap: 0;
    line-height: 1;
}

.brand-copy strong {
    font-size: 1rem;
    text-transform: lowercase;
    letter-spacing: 0;
    font-weight: 800;
}

.brand-copy .meta {
    margin-top: 3px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(143, 185, 255, 0.94);
}

.site-nav--map-modules {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    margin: 0 auto;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(8, 14, 22, 0.48);
    backdrop-filter: blur(10px);
}

.site-module {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(232, 239, 246, 0.9);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: none;
    position: relative;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-module__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(143, 185, 255, 0.98);
    font-size: 0.7rem;
    line-height: 1;
}

.site-module__label {
    line-height: 1;
    white-space: nowrap;
}

.site-module::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 3px;
    left: 10px;
    height: 1px;
    border-radius: 999px;
    background: transparent;
    transition: background 160ms ease, opacity 160ms ease;
    opacity: 0;
}

.site-module.button--primary,
.site-module.is-active,
.site-module--link:hover {
    color: #2f8dff;
    background: rgba(47, 141, 255, 0.08);
    border-color: rgba(47, 141, 255, 0.16);
}

.site-module.button--primary::after,
.site-module.is-active::after {
    background: #2f8dff;
    opacity: 1;
}

.site-module.button--primary .site-module__icon,
.site-module.is-active .site-module__icon,
.site-module:hover .site-module__icon {
    background: rgba(47, 141, 255, 0.14);
    color: #9ec3ff;
}

.site-module.button--ghost {
    background: transparent;
    border: 0;
}

.site-module.is-passive {
    opacity: 0.72;
}

.site-module.is-passive:hover {
    transform: none;
}

.site-module--link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.site-time-chip {
    display: grid;
    gap: 1px;
    min-width: 86px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(8, 14, 22, 0.9);
    text-align: center;
    color: #f2f6fb;
}

.site-time-chip strong {
    font-size: 1rem;
    line-height: 1;
}

.site-time-chip span {
    font-size: 0.82rem;
    color: rgba(242, 246, 251, 0.76);
}

.button--icon {
    min-width: 46px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    color: #eef4ef;
    background: rgba(8, 14, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.14);
}

.site-header--map-shell .site-nav a:hover {
    color: #eef4ef;
}

.site-header__inner,
.hero__toolbar,
.search-bar,
.feature-grid,
.weather-grid,
.footer__inner,
.section-heading {
    display: flex;
    gap: 16px;
}

.site-header__inner,
.footer__inner {
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff7ef;
    background: linear-gradient(135deg, var(--accent-cool), var(--ink));
    box-shadow: var(--shadow);
}

.site-nav {
    display: flex;
    gap: 18px;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.site-nav a.is-active {
    color: var(--ink);
    font-weight: 700;
}

.button,
button,
input,
select {
    font: inherit;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.9rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
    box-shadow: none;
}

.button--primary {
    color: #fff8f0;
    background: linear-gradient(135deg, var(--accent), #ca7d32);
    box-shadow: 0 18px 30px rgba(216, 94, 58, 0.24);
}

.button--ghost {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.hero {
    position: relative;
    z-index: 1;
    padding: 46px 0 28px;
}

.hero--compact h1 {
    max-width: 13ch;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
}

.hero--map-desk {
    padding-block: 24px 16px;
}

.hero--map-desk .hero__card {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
    align-items: end;
    gap: 12px 32px;
    padding: 24px 28px;
}

.hero--map-desk .eyebrow {
    grid-column: 1 / -1;
    justify-self: start;
}

.hero--map-desk h1 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2rem, 3vw, 3.25rem);
}

.hero--map-desk p {
    max-width: 68ch;
    margin: 0;
}

@media (max-width: 767px) {
    .hero--map-desk {
        padding-block: 12px;
    }

    .hero--map-desk .hero__card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px;
    }

    .hero--map-desk h1 {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
    }
}

.hero__card,
.panel,
.tile {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.hero__card {
    position: relative;
    overflow: hidden;
    padding: 28px;
}

.hero__card::before {
    content: "";
    position: absolute;
    inset: auto -8% -22% auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(216, 94, 58, 0.2), transparent 65%);
    pointer-events: none;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(47, 125, 116, 0.1);
    color: var(--accent-cool);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero h1,
.section-heading h2 {
    margin: 16px 0 10px;
    font-family: var(--font-display);
    line-height: 0.95;
}

.hero h1 {
    max-width: 11ch;
    font-size: clamp(3rem, 8vw, 6.25rem);
}

.hero p {
    max-width: 46rem;
    color: var(--ink-soft);
    font-size: 1.06rem;
}

.hero.hero--map-desk h1 {
    max-width: 18ch;
    margin-block: 0;
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1;
}

.hero__toolbar {
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
}

.search-bar {
    flex-wrap: wrap;
    align-items: center;
    padding: 14px;
    margin-top: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
}

.search-bar__field {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.metric-strip,
.forecast-list,
.city-list,
.stack-list,
.settings-grid,
.timeline-grid {
    display: grid;
    gap: 14px;
}

.metric-strip {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 24px;
}

.tile {
    padding: 18px;
}

.tile__label,
.stat-label,
.meta {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.tile__value {
    margin-top: 10px;
    font-size: 1.8rem;
    font-weight: 600;
}

.section {
    position: relative;
    z-index: 1;
    padding: 24px 0;
}

.section--tight {
    padding-top: 20px;
}

.section-heading--compact {
    margin-bottom: 12px;
}

.section-heading {
    align-items: end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-heading p {
    max-width: 42rem;
    margin: 0;
    color: var(--ink-soft);
}

.feature-grid,
.weather-grid {
    align-items: stretch;
}

.feature-grid {
    flex-wrap: wrap;
}

.feature-grid > * {
    flex: 1 1 220px;
}

.weather-grid {
    flex-wrap: wrap;
}

.weather-grid > *:first-child {
    flex: 1.4 1 400px;
}

.weather-grid > *:last-child {
    flex: 1 1 320px;
}

.panel {
    position: relative;
    z-index: 1;
    padding: 22px;
}

.weather-now {
    display: grid;
    gap: 18px;
}

.weather-now__summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.temperature {
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 0.9;
    font-family: var(--font-display);
}

.forecast-list {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.forecast-item,
.stack-item,
.setting-card {
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(47, 125, 116, 0.08);
}

.map-card {
    min-height: 360px;
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 0;
}

.map-card--interactive {
    min-height: 560px;
}

.landing-main {
    padding-top: 0;
}

.landing-map {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #03070d;
    padding-bottom: 46px;
}

.landing-map__canvas {
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    width: 100%;
    height: 100vh;
}

.map-wind-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.92;
}

.map-temperature-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.map-temperature-label {
    position: absolute;
    transform: translate(-50%, -120%);
    color: #ffd27a;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-shadow:
        0 1px 2px rgba(3, 6, 10, 0.92),
        0 0 8px rgba(3, 6, 10, 0.45);
    opacity: 0.96;
    will-change: transform, left, top;
}

.map-powered-by {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(18, 54, 41, 0.12);
    background: rgba(255, 248, 240, 0.9);
    color: rgba(23, 53, 44, 0.88);
    font-size: 0.7rem;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(18, 54, 41, 0.14);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.map-powered-by a {
    color: rgba(18, 54, 41, 0.96);
    text-decoration: none;
}

.map-powered-by a:hover {
    color: #123629;
    text-decoration: underline;
}

.map-powered-by--landing {
    bottom: 74px;
}

body[data-theme="night"] .map-powered-by {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(7, 12, 18, 0.72);
    color: rgba(236, 243, 238, 0.84);
}

body[data-theme="night"] .map-powered-by a {
    color: rgba(255, 255, 255, 0.92);
}

.landing-map__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 10, 11, 0.3) 0%, rgba(5, 10, 11, 0.08) 20%, rgba(5, 10, 11, 0.42) 100%),
        radial-gradient(circle at left top, rgba(10, 18, 19, 0.44), transparent 35%);
    pointer-events: none;
    z-index: 1;
}

.landing-panel,
.landing-overlay-card {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(6, 10, 16, 0.94), rgba(5, 9, 14, 0.84));
    color: #eef4ef;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px);
}

.landing-panel {
    padding: 18px;
}

.landing-panel .meta,
.landing-overlay-card .meta {
    color: rgba(238, 244, 239, 0.76);
}

.landing-search-shell {
    top: 92px;
    left: 20px;
    width: min(364px, calc(100% - 32px));
    display: grid;
    gap: 12px;
    padding: 12px 12px 14px;
    border-radius: 18px;
}

.landing-search-shell__search {
    margin: 0;
}

.landing-search-shell__search-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.landing-search-shell__search-icon {
    color: rgba(238, 244, 239, 0.72);
    font-size: 1rem;
}

.landing-search-shell__input {
    width: 100%;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #eef4ef;
    outline: 0;
}

.landing-search-shell__input::placeholder {
    color: rgba(238, 244, 239, 0.52);
}

.landing-search-shell__locate {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #74a7ff, #2f8dff);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(47, 141, 255, 0.28);
}

.landing-search-shell__source {
    font-size: 0.76rem;
    font-weight: 700;
    color: #8fb9ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.landing-now-strip {
    display: grid;
    gap: 10px;
    padding: 10px 12px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-now-strip__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-now-strip__temp {
    font-size: 3.6rem;
    line-height: 0.9;
    font-weight: 700;
    color: #f7fafc;
}

.landing-now-strip__place {
    display: grid;
    gap: 2px;
}

.landing-now-strip__place strong {
    font-size: 1rem;
}

.landing-now-strip__place span {
    font-size: 0.84rem;
    color: rgba(238, 244, 239, 0.74);
}

.landing-now-strip__meta {
    display: flex;
    gap: 8px;
}

.landing-now-pill {
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.landing-now-pill strong {
    font-size: 0.96rem;
}

.landing-now-pill small {
    color: rgba(238, 244, 239, 0.64);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
}

.landing-now-strip__summary {
    font-size: 0.9rem;
    color: rgba(238, 244, 239, 0.78);
}

.search-bar--map-search {
    margin-top: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
}

.search-bar--map-search .search-bar__field {
    padding: 0.72rem 0.78rem;
    color: #eef4ef;
}

.landing-radar-panel {
    display: grid;
    gap: 10px;
}

.landing-radar-panel__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-radar-panel--demo {
    padding-top: 2px;
}

.landing-radar-panel__palette-line {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #104a8a 0%, #17a5ff 16%, #0cd26d 36%, #ffe600 56%, #ff9f00 72%, #ff3b00 86%, #d014f5 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.landing-radar-panel__toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.radar-source-picker--panel {
    gap: 6px;
}

.landing-side-tools {
    position: absolute;
    top: 88px;
    left: 20px;
    z-index: 6;
    display: grid;
    gap: 8px;
}

.landing-side-tools__button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(6, 10, 16, 0.9);
    color: #eef4ef;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.73rem;
    font-weight: 700;
}

.landing-side-tools__button:hover {
    transform: translateY(-1px);
    background: rgba(10, 18, 25, 0.94);
    border-color: rgba(47, 141, 255, 0.42);
}

.landing-side-tools__button--icon.is-active {
    border-color: rgba(47, 141, 255, 0.44);
    color: #56a5ff;
}

.city-list--inline {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: auto;
    padding-top: 2px;
}

.city-list--search {
    max-height: 200px;
}

.city-list--inline:empty {
    display: none;
}

.city-card--inline .city-pill {
    display: grid;
    gap: 3px;
    min-height: 66px;
    padding: 10px 12px;
}

.city-card--inline .city-pill strong {
    font-size: 0.92rem;
}

.alert-banner {
    position: absolute;
    top: 88px;
    left: 84px;
    right: 20px;
    z-index: 7;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 27, 36, 0.96), rgba(11, 17, 24, 0.88));
    color: #eef4ef;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.alert-banner__level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #071014;
    background: #f6c453;
}

.alert-banner[data-alert-level="minor"] .alert-banner__level {
    background: #57d07c;
}

.alert-banner[data-alert-level="moderate"] .alert-banner__level {
    background: #f6c453;
}

.alert-banner[data-alert-level="severe"] .alert-banner__level {
    background: #ff8c42;
}

.alert-banner[data-alert-level="extreme"] .alert-banner__level {
    background: #ff4d4f;
    color: #fff;
}

.alert-banner[data-alert-level="minor"] {
    border-color: rgba(87, 208, 124, 0.36);
    box-shadow: 0 12px 32px rgba(20, 80, 42, 0.22);
}

.alert-banner[data-alert-level="moderate"] {
    border-color: rgba(246, 196, 83, 0.34);
    box-shadow: 0 12px 32px rgba(110, 78, 16, 0.22);
}

.alert-banner[data-alert-level="severe"] {
    border-color: rgba(255, 140, 66, 0.38);
    box-shadow: 0 12px 32px rgba(120, 57, 17, 0.24);
}

.alert-banner[data-alert-level="extreme"] {
    border-color: rgba(255, 77, 79, 0.42);
    box-shadow: 0 12px 34px rgba(120, 18, 28, 0.26);
}

.alert-banner__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.alert-banner__body strong,
.alert-banner__body span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-banner__body strong {
    font-size: 0.94rem;
}

.alert-banner__body span {
    font-size: 0.8rem;
    color: rgba(238, 244, 239, 0.76);
}

.alert-banner__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(238, 244, 239, 0.8);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.alert-banner__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.landing-panel--timeline {
    right: 16px;
    left: 16px;
    bottom: 42px;
    padding: 12px 18px 10px;
    border-radius: 16px;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(7, 12, 18, 0.56), rgba(5, 9, 14, 0.44));
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

.landing-timeline__grid {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

.landing-overlay-card {
    padding: 14px 16px;
}

.landing-footer-line {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 30px;
    padding: 6px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(6, 13, 14, 0.98);
    color: #eef4ef;
    backdrop-filter: blur(14px);
}

.landing-footer-line__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(143, 211, 202, 0.86);
}

.landing-footer-line__text {
    font-size: 0.8rem;
    color: rgba(238, 244, 239, 0.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-footer-line__meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.74rem;
    color: rgba(238, 244, 239, 0.62);
}

.map-toolbar,
.map-actions,
.radar-player__meta,
.radar-player__controls {
    display: flex;
    gap: 14px;
}

.map-toolbar,
.radar-player__meta {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.map-actions {
    flex-wrap: wrap;
}

.radar-source-picker {
    display: inline-grid;
    gap: 4px;
    min-width: 110px;
}

.radar-source-picker select {
    min-height: 36px;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
}

.site-header--map-shell .radar-source-picker select,
body[data-theme="night"] .radar-source-picker select {
    min-height: 38px;
    border-radius: 10px;
    background: rgba(18, 29, 31, 0.62);
    color: #ecf3ee;
    border-color: rgba(255, 255, 255, 0.12);
}

.radar-player--minimal {
    display: grid;
    gap: 10px;
}

.radar-player__topline,
.radar-player__footerline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.radar-player__controls--minimal {
    justify-content: flex-start;
    gap: 8px;
}

.radar-player__topline strong {
    font-size: 0.85rem;
    color: #eef4ef;
}

.radar-player__topline--timeline {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.radar-player__cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.radar-player__timeline-meta {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
}

.radar-player__timeline-meta .meta {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(238, 244, 239, 0.62);
}

.radar-control {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #eef4ef;
    cursor: pointer;
    font-size: 0.78rem;
}

.radar-control--play {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(31, 124, 255, 0.92);
    border-color: rgba(47, 141, 255, 0.18);
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(31, 124, 255, 0.22);
}

.radar-control--wide {
    width: 100%;
    justify-content: space-between;
}

.radar-control--icon {
    min-width: 32px;
    padding: 0;
}

.radar-player__slider--minimal {
    gap: 0;
}

.radar-player__slider--minimal input[type="range"] {
    height: 18px;
    appearance: none;
    background: transparent;
}

.radar-player__slider--minimal input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f8dff 0%, #2f8dff var(--radar-progress, 0%), rgba(255, 255, 255, 0.12) var(--radar-progress, 0%), rgba(255, 255, 255, 0.12) 100%);
}

.radar-player__slider--minimal input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 2px solid #dbe9ff;
    border-radius: 50%;
    background: #2f8dff;
    box-shadow: 0 4px 14px rgba(47, 141, 255, 0.28);
}

.radar-player__slider--minimal input[type="range"]::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.radar-player__slider--minimal input[type="range"]::-moz-range-progress {
    height: 2px;
    border-radius: 999px;
    background: #2f8dff;
}

.radar-player__slider--minimal input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid #dbe9ff;
    border-radius: 50%;
    background: #2f8dff;
}

.radar-timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding: 12px 2px 0;
}

.radar-timeline__ticks {
    position: relative;
    display: block;
    height: 42px;
}

.radar-timeline__ticks::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.12)),
        rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.radar-timeline__tick {
    position: relative;
    z-index: 1;
    position: absolute;
    top: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 38px;
    color: rgba(238, 244, 239, 0.56);
    font-size: 0.64rem;
    transform: translateX(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.radar-timeline__tick-marker {
    width: 2px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.radar-timeline__tick.is-observed {
    color: rgba(238, 244, 239, 0.58);
}

.radar-timeline__tick.is-forecast {
    color: rgba(143, 185, 255, 0.78);
}

.radar-timeline__tick.is-forecast .radar-timeline__tick-marker {
    background: rgba(143, 185, 255, 0.34);
}

.radar-timeline__tick.is-active {
    color: #eef4ef;
}

.radar-timeline__tick.is-active .radar-timeline__tick-marker {
    width: 4px;
    height: 24px;
    background: #2f8dff;
    box-shadow: 0 0 0 4px rgba(47, 141, 255, 0.12);
}

.radar-timeline__tick-label {
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
}

.radar-timeline__current {
    position: absolute;
    top: -3px;
    left: calc(var(--radar-progress, 0%) - 22px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(47, 141, 255, 0.96);
    color: #eef4ef;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    box-shadow: 0 10px 22px rgba(47, 141, 255, 0.24);
}

.radar-player__controls {
    flex-wrap: wrap;
}

.radar-player__slider {
    display: grid;
    gap: 8px;
}

.radar-player__slider input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

[data-radar-frame-card].is-active {
    border-color: rgba(216, 94, 58, 0.28);
    background: rgba(216, 94, 58, 0.1);
}

.map-canvas-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
    contain: layout paint;
    min-height: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 125, 116, 0.22), transparent 20%),
        linear-gradient(180deg, rgba(9, 24, 28, 0.08), rgba(9, 24, 28, 0.14)),
        #dceae4;
}

.map-canvas {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 420px;
}

.map-canvas__surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.map-canvas__surface.leaflet-container,
.map-canvas .leaflet-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 125, 116, 0.18), transparent 20%),
        linear-gradient(180deg, rgba(9, 24, 28, 0.08), rgba(9, 24, 28, 0.14)),
        #dceae4;
    font: inherit;
}

.map-canvas__surface.leaflet-container .leaflet-pane,
.map-canvas__surface.leaflet-container .leaflet-control-container,
.map-canvas .leaflet-pane,
.map-canvas .leaflet-control-container {
    z-index: inherit;
}

.map-canvas__surface.leaflet-container .leaflet-control-zoom a,
.map-canvas .leaflet-control-zoom a {
    border: 0;
    color: #eef4ef;
    background: rgba(9, 16, 22, 0.9);
}

.map-canvas__surface.leaflet-container .leaflet-control-attribution,
.map-canvas .leaflet-control-attribution {
    padding: 2px 8px;
    border-radius: 10px 0 0 0;
    background: rgba(12, 21, 22, 0.78);
    color: rgba(238, 244, 239, 0.76);
}

.map-canvas__surface.leaflet-container .leaflet-control-attribution a,
.map-canvas .leaflet-control-attribution a {
    color: inherit;
}

.presura-radar-tile,
.presura-satellite-tile {
    width: 256px !important;
    height: 256px !important;
}

.presura-radar-tile {
    image-rendering: pixelated;
}

.presura-weather-label,
.presura-wind-marker {
    background: transparent;
    border: 0;
}

.presura-weather-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 12, 18, 0.84);
    color: #f5f7fb;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.presura-weather-label.is-temperature span {
    color: #ffd27a;
}

.presura-weather-label.is-humidity span {
    color: #9cd5ff;
}

.presura-weather-label.is-pressure span {
    color: #d8f2c2;
}

.presura-weather-label.is-rain span {
    color: #aee8ff;
}

.presura-weather-label.is-wind span {
    color: #eef4ef;
}

.presura-wind-marker {
    width: 30px;
    height: 30px;
}

.presura-wind-marker__arrow,
.presura-wind-marker__speed {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.presura-wind-marker__arrow {
    font-size: 1rem;
    color: rgba(245, 248, 250, 0.95);
    text-shadow: 0 0 8px rgba(8, 14, 22, 0.55);
}

.presura-wind-marker__speed {
    inset: auto auto -18px 50%;
    transform: translateX(-50%);
    min-width: 28px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(7, 12, 18, 0.82);
    color: #eef4ef;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.4;
}

.map-canvas__overlay {
    inset: auto 18px 18px 18px;
    z-index: 4;
}

.map-loading {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(15, 29, 31, 0.76);
    color: #f7f1e8;
    box-shadow: 0 18px 34px rgba(18, 54, 41, 0.18);
    backdrop-filter: blur(12px);
}

.map-loading__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef8c53;
    box-shadow: 0 0 0 0 rgba(239, 140, 83, 0.7);
    animation: presuraPulse 1.5s ease infinite;
}

.map-legend {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: grid;
    gap: 10px;
    min-width: 206px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-md);
    background: rgba(255, 248, 240, 0.92);
    color: #17352c;
    box-shadow: 0 18px 34px rgba(18, 54, 41, 0.16);
    backdrop-filter: blur(16px);
}

.map-legend--floating {
    top: 182px;
    right: 20px;
    left: auto;
    min-width: 0;
}

body[data-theme="night"] .map-legend {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(12, 21, 22, 0.88);
    color: #ecf3ee;
}

.map-legend__header,
.map-legend__ticks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.map-legend__scale {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(18, 54, 41, 0.26));
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(18, 54, 41, 0.06);
}

.map-legend__ticks {
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.map-legend.is-steps {
    min-width: 0;
    width: 88px;
    padding: 10px 8px 10px;
}

.map-legend.is-steps .map-legend__header {
    display: grid;
    gap: 3px;
    justify-content: start;
    align-items: start;
}

.map-legend.is-steps .map-legend__header .meta {
    font-size: 0.55rem;
    line-height: 1.2;
}

.map-legend.is-steps .map-legend__scale {
    display: grid;
    gap: 2px;
    height: auto;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.map-legend.is-steps .map-legend__row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 4px;
}

.map-legend.is-steps .map-legend__step {
    min-height: 12px;
    border-radius: 2px;
}

.map-legend--floating.is-steps {
    top: 188px;
    right: 18px;
    width: 72px;
    padding: 9px 7px 10px;
}


.map-legend.is-steps .map-legend__ticks {
    display: none;
}

.map-legend.is-steps .map-legend__tick-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

.map-preview {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(16, 53, 60, 0.12), rgba(16, 53, 60, 0.16)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%23dceae4'/%3E%3Cg fill='none' stroke='%232f7d74' stroke-width='2' opacity='.28'%3E%3Cpath d='M156 166c55-32 118-47 170-36 61 13 90 57 137 64 61 9 107-43 167-39 62 3 123 72 174 88'/%3E%3Cpath d='M190 274c34-25 97-33 145-19 53 15 88 52 146 54 54 2 84-21 130-13 41 7 66 35 103 58'/%3E%3Cpath d='M170 386c62-31 110-35 154-20 40 13 92 56 152 52 55-4 93-41 143-47 46-5 94 14 131 36'/%3E%3C/g%3E%3Cg fill='%23d85e3a' opacity='.18'%3E%3Ccircle cx='245' cy='175' r='25'/%3E%3Ccircle cx='525' cy='280' r='48'/%3E%3Ccircle cx='690' cy='220' r='33'/%3E%3C/g%3E%3C/svg%3E") center/cover;
}

.map-preview--large {
    min-height: 320px;
}

.map-preview__overlay {
    position: absolute;
    inset: auto 20px 20px 20px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 248, 240, 0.9);
    color: #18372d;
}

body[data-theme="night"] .map-preview__overlay {
    background: rgba(15, 29, 31, 0.88);
    color: #ecf3ee;
}

.city-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.city-list--compact {
    margin-bottom: 18px;
}

.city-card {
    display: grid;
    gap: 8px;
}

.city-card__link {
    font-size: 0.92rem;
    color: var(--accent-cool);
}

.stack-item[href] {
    border: 1px solid transparent;
}

.stack-item[href]:hover,
.city-card__link:hover {
    color: var(--accent);
}

.city-pill {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.landing-panel .city-pill {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #eef4ef;
}

.landing-panel .city-card__link {
    color: #8fd3ca;
}

.landing-panel .city-card {
    gap: 6px;
}

.landing-panel .tile__label {
    font-size: 0.76rem;
}

.landing-panel strong,
.landing-overlay-card strong {
    letter-spacing: -0.01em;
}

.landing-panel .button--ghost {
    color: #eef4ef;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.landing-panel .button--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.landing-panel .button--primary {
    box-shadow: 0 16px 28px rgba(216, 94, 58, 0.22);
}

.landing-panel .button[disabled] {
    opacity: 0.58;
}

.footer--map-only {
    display: none;
}

.landing-map__canvas .maplibregl-ctrl-top-left,
.landing-map__canvas .maplibregl-ctrl-top-right {
    top: 88px;
}

.landing-map__canvas .maplibregl-ctrl-left,
.landing-map__canvas .maplibregl-ctrl-top-left {
    left: 20px;
}

.landing-map__canvas .maplibregl-ctrl-group {
    border-radius: 10px !important;
    background: rgba(6, 10, 16, 0.9) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.landing-map__canvas .maplibregl-ctrl button {
    width: 42px;
    height: 42px;
    background-color: transparent !important;
}

.landing-map__canvas .maplibregl-ctrl button span {
    filter: invert(1) brightness(1.4);
}

.landing-panel .status-banner {
    background: rgba(216, 94, 58, 0.18);
    color: #ffe7dd;
}

.settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 16px;
    margin-bottom: 16px;
}

.timeline-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.setting-card {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
}

.setting-card select {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface-strong);
}

.stack-item {
    display: grid;
    gap: 8px;
}

.route-stack {
    margin-bottom: 18px;
}

.route-stack__hero {
    border: 1px solid rgba(216, 94, 58, 0.18);
    background: rgba(216, 94, 58, 0.08);
}

.signal-grid > * {
    flex: 1 1 280px;
}

.signal-card {
    display: grid;
    gap: 12px;
}

.signal-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
}

.signal-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.signal-card__brief {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(18, 54, 41, 0.06);
}

.signal-card--watch {
    border-color: rgba(216, 94, 58, 0.24);
    background: rgba(216, 94, 58, 0.08);
}

.signal-card--windy {
    border-color: rgba(47, 125, 116, 0.24);
    background: rgba(47, 125, 116, 0.08);
}

.signal-card--heat {
    border-color: rgba(202, 125, 50, 0.24);
    background: rgba(202, 125, 50, 0.08);
}

.signal-summary-list {
    margin-top: 18px;
}

.route-hub-grid > * {
    flex: 1 1 280px;
}

.route-hub-card {
    display: grid;
    gap: 12px;
}

.route-hub-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.footer {
    position: relative;
    z-index: 1;
    padding: 32px 0 42px;
    color: var(--ink-soft);
}

.project-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.language-switch__label {
    color: var(--ink-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.language-switch__list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.language-switch__link,
.project-page-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.language-switch__link:hover,
.project-page-nav__link:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

.language-switch__link.is-active,
.project-page-nav__link.is-active {
    border-color: rgba(216, 94, 58, 0.24);
    background: rgba(216, 94, 58, 0.12);
    color: var(--ink);
}

.project-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-page {
    display: grid;
    gap: 22px;
}

.project-page__hero {
    padding: 4px 0 0;
}

.project-page__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 18px;
    align-items: stretch;
}

.project-page__hero-copy,
.project-page__hero-visual,
.project-page__footer-card,
.project-page__related-card {
    min-width: 0;
}

.project-page__hero-copy {
    display: grid;
    gap: 14px;
    padding: 22px 24px 24px;
}

.project-page__hero-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.project-page-nav--hero {
    justify-content: flex-end;
}

.project-page__title {
    margin: 0;
    max-width: 10.5ch;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.7vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.project-page__lead {
    margin: 0;
    max-width: 40rem;
    color: var(--ink-soft);
    font-size: 0.98rem;
    line-height: 1.62;
}

.project-page--about .project-page__title {
    max-width: 8.2ch;
}

.project-page--sources .project-page__title,
.project-page--disclaimer .project-page__title {
    max-width: 9.2ch;
}

.project-page__metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
}

.project-page__metric-tile {
    padding: 16px 18px;
}

.project-page__hero-visual {
    position: relative;
    display: grid;
    gap: 14px;
    overflow: hidden;
    padding: 22px;
    background:
        linear-gradient(160deg, rgba(27, 93, 84, 0.14), rgba(216, 94, 58, 0.08)),
        radial-gradient(circle at top right, rgba(216, 94, 58, 0.14), transparent 42%),
        radial-gradient(circle at bottom left, rgba(47, 125, 116, 0.22), transparent 48%),
        var(--surface);
}

.project-page__hero-visual::before {
    content: "";
    position: absolute;
    inset: auto -10% -30% auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
    pointer-events: none;
}

.project-page__hero-visual::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(32, 97, 89, 0.08);
    border-radius: calc(var(--radius-xl) - 8px);
    background:
        radial-gradient(circle at 12% 22%, rgba(84, 185, 220, 0.11), transparent 18%),
        radial-gradient(circle at 44% 64%, rgba(33, 135, 127, 0.12), transparent 20%),
        radial-gradient(circle at 72% 30%, rgba(235, 169, 58, 0.1), transparent 16%);
    pointer-events: none;
}

.project-page__visual-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-page__visual-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.project-page__visual-header h2 {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    line-height: 1.02;
}

.project-page__visual-language {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.project-page__visual-copy {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.project-page__visual-map {
    position: relative;
    z-index: 1;
    min-height: 180px;
    border: 1px solid rgba(32, 97, 89, 0.1);
    border-radius: calc(var(--radius-lg) + 2px);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(236, 245, 241, 0.55)),
        radial-gradient(circle at 74% 36%, rgba(84, 185, 220, 0.28), transparent 20%),
        radial-gradient(circle at 26% 66%, rgba(33, 135, 127, 0.18), transparent 22%),
        linear-gradient(140deg, rgba(14, 74, 68, 0.02), rgba(14, 74, 68, 0.08));
}

.project-page__visual-map::before,
.project-page__visual-map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.project-page__visual-map::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 34% 46%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 24%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 66% 52%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 30%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 72%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 78%, rgba(7, 63, 58, 0.11) 0 2px, transparent 3px);
    opacity: 0.92;
}

.project-page__visual-map::after {
    background:
        linear-gradient(24deg, transparent 47.5%, rgba(10, 87, 80, 0.08) 48%, transparent 48.5%) 0 0 / 100% 100%,
        linear-gradient(158deg, transparent 51%, rgba(84, 185, 220, 0.08) 51.5%, transparent 52%) 0 0 / 100% 100%;
    opacity: 0.75;
}

.project-page__visual-band,
.project-page__visual-dot {
    position: absolute;
    display: block;
}

.project-page__visual-band {
    height: 18px;
    border-radius: 999px;
    filter: blur(0.2px);
    opacity: 0.86;
}

.project-page__visual-band--one {
    top: 34%;
    left: 10%;
    width: 54%;
    transform: rotate(-20deg);
    background: linear-gradient(90deg, rgba(84, 185, 220, 0.2), rgba(84, 185, 220, 0.54), rgba(33, 135, 127, 0.28));
}

.project-page__visual-band--two {
    top: 49%;
    left: 34%;
    width: 42%;
    transform: rotate(-8deg);
    background: linear-gradient(90deg, rgba(84, 185, 220, 0.18), rgba(33, 135, 127, 0.54), rgba(235, 169, 58, 0.34));
}

.project-page__visual-band--three {
    top: 63%;
    left: 48%;
    width: 30%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(33, 135, 127, 0.18), rgba(235, 169, 58, 0.42), rgba(217, 92, 92, 0.22));
}

.project-page__visual-dot {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    background: rgba(7, 63, 58, 0.74);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

.project-page__visual-dot--a {
    top: 24%;
    left: 16%;
}

.project-page__visual-dot--b {
    top: 38%;
    left: 44%;
}

.project-page__visual-dot--c {
    top: 56%;
    left: 67%;
}

.project-page__visual-dot--d {
    top: 72%;
    left: 31%;
}

.project-page__visual-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.project-page__visual-stat,
.project-page__visual-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(8px);
}

.project-page__visual-stat {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
}

.project-page__visual-stat strong {
    font-size: 1.1rem;
}

.project-page__visual-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.project-page__visual-card {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
}

.project-page__visual-card strong {
    font-size: 1rem;
    line-height: 1.25;
}

.project-page__visual-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.project-page__notice-wrap {
    padding-top: 0;
}

.project-doc-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.project-doc-grid--editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-page__section {
    padding-top: 0;
    margin-top: -4px;
}

.project-page__section-grid {
    display: grid;
    grid-template-columns: minmax(220px, 292px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.project-page__section-intro {
    display: grid;
    gap: 10px;
}

.project-page__section-intro h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.2vw, 2.25rem);
    line-height: 1.02;
}

.project-page__section-intro p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.58;
    font-size: 0.96rem;
}

.project-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.project-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.26rem;
    line-height: 1.06;
}

.project-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.56;
}

.project-card__list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-soft);
}

.project-card__list li + li {
    margin-top: 0.4rem;
}

.project-notice {
    padding: 20px 22px;
    border-color: rgba(216, 94, 58, 0.2);
    background: rgba(216, 94, 58, 0.08);
}

.project-notice--editorial {
    box-shadow: none;
}

.project-notice p {
    margin: 8px 0 0;
    color: var(--ink);
}

.project-page__footer {
    padding: 4px 0 28px;
}

.project-page__footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: stretch;
}

.project-page__footer-card {
    display: grid;
    gap: 10px;
    padding: 20px 22px;
    background:
        linear-gradient(160deg, rgba(27, 93, 84, 0.08), rgba(216, 94, 58, 0.04)),
        var(--surface);
}

.project-page__footer-card h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.1vw, 2.15rem);
    line-height: 1.02;
}

.project-page__footer-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.58;
    font-size: 0.95rem;
}

.project-page__related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.project-page__related-card {
    display: grid;
    gap: 9px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.project-page__related-card strong {
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.08;
    color: var(--ink);
}

.project-page__related-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.project-page__related-card:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 94, 58, 0.2);
    background: var(--surface-strong);
}

.project-page__related-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-size: 1.12rem;
}

.status-banner {
    display: none;
    padding: 14px 16px;
    margin-top: 16px;
    border-radius: var(--radius-md);
    background: rgba(216, 94, 58, 0.12);
    color: #8f4128;
}

.status-banner.is-visible {
    display: block;
}


.maplibregl-ctrl-group {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: var(--shadow);
}

@keyframes presuraPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 140, 83, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 140, 83, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 140, 83, 0);
    }
}

@media (max-width: 1080px) {
    .landing-footer-line {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .landing-footer-line__meta {
        display: none;
    }
}

@media (max-width: 980px) {
    .toolbar.presura-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 14px;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    .project-tools {
        width: 100%;
        justify-content: space-between;
    }

    .site-nav {
        order: 3;
        width: 100%;
        overflow: auto;
        padding-bottom: 4px;
    }

    .landing-map {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 72px;
    }

    .landing-map__canvas {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 980px;
    }

    .landing-panel,
    .landing-overlay-card,
    .landing-search-shell {
        position: relative;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        margin: 0 16px 16px;
    }

    .alert-banner {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 0 16px 12px;
    }

    .landing-side-tools {
        position: relative;
        top: auto;
        left: auto;
        z-index: 5;
        display: flex;
        margin: 0 16px 12px;
    }

    .landing-panel--timeline {
        margin-bottom: 52px;
    }

    .map-powered-by {
        right: 12px;
        bottom: 8px;
        font-size: 0.64rem;
    }

    .map-powered-by--landing {
        bottom: 56px;
    }

    .landing-search-shell__focus,
    .radar-player__topline,
    .radar-player__footerline {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-footer-line {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 14px;
    }

    .landing-footer-line__text {
        white-space: normal;
    }

    .landing-footer-line__meta {
        display: none;
    }
}

@media (max-width: 820px) {
    .site-nav {
        display: none;
    }

    .alert-banner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
    }

    .map-powered-by {
        left: 12px;
        right: 12px;
        bottom: 8px;
        justify-content: center;
        flex-wrap: wrap;
        line-height: 1.3;
    }

    .alert-banner__close {
        justify-self: end;
    }

    .weather-now__summary,
    .section-heading {
        flex-direction: column;
        align-items: start;
    }

    .language-switch {
        width: 100%;
        justify-content: space-between;
        border-radius: var(--radius-md);
    }

    .project-tools {
        gap: 10px;
    }

    .project-page__hero-grid,
    .project-page__section-grid,
    .project-page__footer-grid {
        grid-template-columns: 1fr;
    }

    .project-page__hero-copy,
    .project-page__hero-visual,
    .project-page__footer-card {
        padding: 22px;
    }

    .project-page__hero-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-page-nav--hero {
        justify-content: flex-start;
    }

    .project-page__visual-stats,
    .project-page__related-grid,
    .project-doc-grid--editorial {
        grid-template-columns: 1fr;
    }

    .radar-player__meta {
        align-items: start;
    }

    .radar-timeline__ticks {
        height: 28px;
    }

    .map-canvas,
    .map-canvas-wrap {
        min-height: 340px;
        height: 340px;
    }

    .map-legend {
        top: 12px;
        left: 12px;
        right: 72px;
        min-width: 0;
    }

    .map-legend--floating {
        top: auto;
        right: 12px;
        bottom: 110px;
        left: auto;
        min-width: 90px;
    }

    .landing-map__canvas .maplibregl-ctrl-top-left,
    .landing-map__canvas .maplibregl-ctrl-top-right {
        top: 92px;
    }

    .map-loading {
        top: 12px;
        right: 12px;
    }

    .city-list--inline {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .project-page-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .project-page-nav__link,
    .language-switch__link {
        min-height: 40px;
    }

    .project-doc-grid {
        grid-template-columns: 1fr;
    }

    .project-page {
        gap: 16px;
    }

    .project-page__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .project-page__hero-copy,
    .project-page__hero-visual,
    .project-page__footer-card,
    .project-page__related-card {
        padding: 18px;
    }

    .project-page__visual-header {
        flex-direction: column;
    }

    .project-page__visual-map {
        min-height: 150px;
    }

    .project-page__visual-language {
        min-width: 46px;
        min-height: 46px;
        border-radius: 14px;
    }
}