* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    color: #000080;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 1.04rem, 1.08rem);
    line-height: 1.4;
    background:
        radial-gradient(circle at top left, rgba(255, 210, 240, 0.9), transparent 34rem),
        radial-gradient(circle at 86% 8%, rgba(183, 235, 255, 0.88), transparent 32rem),
        radial-gradient(circle at 50% 115%, rgba(255, 234, 181, 0.72), transparent 34rem),
        linear-gradient(135deg, #fff8fb 0%, #edf7ff 48%, #fff5df 100%);
    background-attachment: fixed;
}

a {
    color: #0056d6;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

a:hover {
    text-decoration-thickness: 0.14em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0.18rem solid #0056d6;
    outline-offset: 0.16rem;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    z-index: 20;
    transform: translate(-50%, -150%);
    padding: 0.7rem 1rem;
    border-radius: 999rem;
    background: #ffffff;
    color: #000080;
    font-weight: 700;
    box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 128, 0.14);
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

.page-shell {
    container-type: inline-size;
    width: min(100% - 1rem, 76rem);
    margin: 0 auto;
    padding: 1rem 0.5rem 2.5rem;
}

.hero,
.content-card,
.data-card {
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1.3rem 3rem rgba(0, 0, 128, 0.12);
    backdrop-filter: blur(1rem);
}

.hero {
    padding: clamp(1.1rem, 5cqi, 2.35rem);
    text-align: center;
}

h1,
h2 {
    margin: 0 auto 1rem;
    max-width: 50rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.25rem;
    font-size: clamp(1.7rem, 5.4cqi, 2.55rem);
}

h2 {
    font-size: 1.55rem;
    font-size: clamp(1.25rem, 3.8cqi, 1.9rem);
}

.content-card > h2,
.data-card > h2 {
    text-align: center;
}

p {
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
}

.hero p,
.content-card p {
    max-width: 46rem;
    margin-right: auto;
    margin-left: auto;
}

strong {
    font-weight: 760;
}

.breadcrumb {
    font-size: 0.98rem;
    font-weight: 700;
    text-align: center;
}

.hero-link-after-image {
    margin-top: 1rem;
    margin-bottom: 0;
}

.hero-figure {
    width: min(100%, 42rem);
    margin: 1.4rem auto 0;
}

.hero-figure a {
    display: block;
}

.hero-figure img {
    width: 100%;
    border-radius: 1.2rem;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 128, 0.16);
}

.content-card,
.data-card {
    margin-top: 1rem;
    padding: clamp(1rem, 3cqi, 1.8rem);
}

.source-note {
    color: #5f6074;
    font-size: 0.88rem;
    font-style: italic;
    text-align: center;
}

.source-note a {
    color: #5f6074;
}

.table-wrap {
    width: 100%;
    overflow: visible;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 128, 0.08);
}

.viastar {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1rem;
}

.viastar caption {
    caption-side: top;
    max-width: 100%;
    padding: 0 0 0.8rem;
    color: #000080;
    font-size: clamp(1rem, 2.8cqi, 1.16rem);
    font-weight: 800;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

.col-beach {
    width: 37%;
}

.col-time {
    width: 24%;
}

.col-water,
.col-air {
    width: 19.5%;
}

.viastar th,
.viastar td {
    padding: 0.76rem 0.7rem;
    border-bottom: 1px solid rgba(0, 0, 128, 0.12);
    vertical-align: middle;
}

.viastar thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 244, 255, 0.98)),
        #ffffff;
    color: var(--uimavesi-table-heading-color, #4f2a9d);
    font-size: clamp(1.05rem, 2.9cqi, 1.24rem);
    font-weight: 850;
    text-align: left;
    box-shadow: 0 0.55rem 1.25rem rgba(0, 0, 128, 0.1);
}

.viastar tbody tr {
    background: rgba(255, 255, 255, 0.44);
}

.viastar tbody tr:nth-child(even) {
    background: rgba(240, 248, 255, 0.48);
}

.viastar tbody tr:hover {
    background: rgba(255, 244, 205, 0.62);
}

.viastar td[data-align="right"],
.viastar th[data-align="right"] {
    text-align: right;
}

.viastar td:nth-child(2),
.viastar td:nth-child(3),
.viastar td:nth-child(4) {
    white-space: nowrap;
}

.viastar td:first-child {
    overflow-wrap: anywhere;
}

.weather-icon {
    display: inline-block;
    min-width: 1.35em;
    text-align: center;
    vertical-align: -0.08em;
}

.internal-message {
    width: min(100%, 44rem);
    margin: 1rem auto;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 128, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
    text-align: center;
    font-weight: 750;
}

@media (max-width: 44rem) {
    body {
        background-attachment: scroll;
    }

    .page-shell {
        width: min(100% - 0.5rem, 76rem);
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .hero,
    .content-card,
    .data-card {
        border-radius: 1rem;
    }

    .hero {
        padding: 1rem 0.75rem;
    }

    .content-card,
    .data-card {
        padding: 0.9rem 0.45rem;
    }

    h1 {
        font-size: clamp(1.55rem, 8cqi, 2.1rem);
    }

    h2 {
        font-size: clamp(1.18rem, 5.6cqi, 1.45rem);
    }

    .viastar {
        font-size: 0.88rem;
    }

    .viastar caption {
        padding-right: 0.2rem;
        padding-left: 0.2rem;
        font-size: 0.98rem;
        line-height: 1.3;
    }

    .viastar th,
    .viastar td {
        padding: 0.56rem 0.34rem;
    }

    .viastar thead th {
        font-size: 0.96rem;
    }

    .col-beach {
        width: 34%;
    }

    .col-time {
        width: 25%;
    }

    .col-water,
    .col-air {
        width: 20.5%;
    }

    .weather-icon {
        min-width: 1.05em;
    }
}

@media (max-width: 24rem) {
    .viastar {
        font-size: 0.82rem;
    }

    .viastar th,
    .viastar td {
        padding: 0.5rem 0.26rem;
    }

    .viastar thead th {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}