.mare-page {
    background: #fbfbfa;
    --mare-nav-offset: clamp(86px, 5.2vw, 92px);
    overflow-x: clip;
}

.mare-hero {
    margin-top: var(--mare-nav-offset);
    height: calc(100dvh - var(--mare-nav-offset));
    min-height: calc(100dvh - var(--mare-nav-offset));
    padding-top: 0;
    display: flex;
    align-items: center;
    background: #fbfbfa;
}

.mare-hero-shell {
    width: 100%;
    max-width: none;
    padding: 0;
}

.mare-hero-grid {
    height: calc(100dvh - var(--mare-nav-offset));
    min-height: calc(100dvh - var(--mare-nav-offset));
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #f6f3ee 0%, #edeae7 100%);
    box-shadow: none;
}

.mare-hero-left {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(22px, 2.6vw, 36px);
    background: #edeae7;
}

.mare-view-menu-wrap {
    width: fit-content;
    border: 1px solid rgba(79, 74, 67, 0.42);
    border-radius: 999px;
    padding: 4px;
    background: rgba(251, 251, 250, 0.86);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

.mare-view-btn {
    appearance: none;
    border: 1px solid rgba(79, 74, 67, 0.44);
    background: transparent;
    border-radius: 999px;
    padding: 0.34rem 1rem;
    color: #24201d;
    font-size: 1.02rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(79, 74, 67, 0);
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.mare-view-btn:hover {
    transform: translateY(-2px);
    background: rgba(36, 36, 36, 0.11);
    border-color: rgba(79, 74, 67, 0.48);
    box-shadow: 0 12px 24px rgba(79, 74, 67, 0.12);
}

.mare-view-btn.is-pressed {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 6px 14px rgba(79, 74, 67, 0.08);
}

.mare-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
    min-height: clamp(300px, 44vh, 430px);
    padding: clamp(30px, 3.3vw, 46px);
    background: #edeae7;
    border-radius: 16px;
    overflow: hidden;
}

.mare-copy-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.mare-copy-corner-tl {
    top: 1px;
    left: 1px;
    border-top: 2px solid rgba(79, 74, 67, 0.58);
    border-left: 2px solid rgba(79, 74, 67, 0.58);
    border-top-left-radius: 12px;
}

.mare-copy-corner-tr {
    top: 1px;
    right: 1px;
    border-top: 2px solid rgba(79, 74, 67, 0.58);
    border-right: 2px solid rgba(79, 74, 67, 0.58);
    border-top-right-radius: 12px;
}

.mare-copy-corner-bl {
    bottom: 1px;
    left: 1px;
    border-bottom: 2px solid rgba(79, 74, 67, 0.58);
    border-left: 2px solid rgba(79, 74, 67, 0.58);
    border-bottom-left-radius: 12px;
}

.mare-copy-corner-br {
    bottom: 1px;
    right: 1px;
    border-bottom: 2px solid rgba(79, 74, 67, 0.58);
    border-right: 2px solid rgba(79, 74, 67, 0.58);
    border-bottom-right-radius: 12px;
}

.mare-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.86rem;
    color: #6e675e;
    margin-bottom: 0.8rem;
}

.mare-copy h1 {
    font-size: clamp(2.8rem, 7.2vw, 5.2rem);
    line-height: 0.95;
    color: #181818;
    margin-bottom: 0.85rem;
}

.mare-subtitle {
    color: #5f584f;
    font-size: clamp(1.02rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    width: 100%;
    max-width: none;
}

.mare-subtitle:empty {
    display: none;
}

.mare-back-link {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    text-decoration: none;
    color: #4f4a43;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.2rem;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.mare-back-link:hover,
.mare-back-link:focus-visible {
    border-bottom-color: rgba(79, 74, 67, 0.28);
}

.mare-hero-right {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #d6d0c9;
}

.mare-hero-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(237, 234, 231, 0.3) 0%, rgba(79, 74, 67, 0.18) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mare-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mare-hero-right.is-switching img {
    opacity: 0.18;
    filter: blur(10px);
    transform: scale(1.045);
}

.mare-hero-right.is-switching::after {
    opacity: 1;
}

.mare-main {
    background: #fbfbfa;
}

.mare-highlights-section {
    min-height: calc(100dvh - var(--mare-nav-offset));
    background: #f7f4ef;
    width: 100%;
    box-sizing: border-box;
}

.mare-highlights-grid {
    min-height: calc(100dvh - var(--mare-nav-offset));
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    box-sizing: border-box;
}

.mare-highlights-left {
    padding: clamp(26px, 3.5vw, 54px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f7f4ef;
    width: 100%;
    box-sizing: border-box;
}

.mare-highlights-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    width: min(1280px, 96vw);
}

.mare-highlight-card {
    --mare-card-corner: rgba(79, 74, 67, 0.56);
    position: relative;
    border: 0;
    border-radius: 14px;
    background: transparent;
    padding: 1.55rem 1.45rem;
    min-height: 226px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--highlight-delay, 0ms);
}

.mare-highlight-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mare-highlight-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.mare-highlight-corner-tl {
    top: 1px;
    left: 1px;
    border-top: 2px solid var(--mare-card-corner);
    border-left: 2px solid var(--mare-card-corner);
    border-top-left-radius: 12px;
}

.mare-highlight-corner-tr {
    top: 1px;
    right: 1px;
    border-top: 2px solid var(--mare-card-corner);
    border-right: 2px solid var(--mare-card-corner);
    border-top-right-radius: 12px;
}

.mare-highlight-corner-bl {
    bottom: 1px;
    left: 1px;
    border-bottom: 2px solid var(--mare-card-corner);
    border-left: 2px solid var(--mare-card-corner);
    border-bottom-left-radius: 12px;
}

.mare-highlight-corner-br {
    bottom: 1px;
    right: 1px;
    border-bottom: 2px solid var(--mare-card-corner);
    border-right: 2px solid var(--mare-card-corner);
    border-bottom-right-radius: 12px;
}

.mare-highlight-icon {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(79, 74, 67, 0.45);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
}

.mare-highlight-icon svg {
    width: 26px;
    height: 26px;
    stroke: #4f4a43;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mare-highlight-card h3 {
    margin: 0 0 0.55rem;
    color: #2f2b27;
    font-size: 1.35rem;
}

.mare-highlight-card p {
    margin: 0;
    color: #5f584f;
    font-size: 1.16rem;
    line-height: 1.55;
}

.mare-highlight-card.mare-highlight-card-icon {
    min-height: 0;
    padding: 1.35rem 1rem 1.15rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.mare-highlight-card.mare-highlight-card-icon .mare-highlight-icon {
    margin-bottom: 0;
    width: 74px;
    height: 74px;
    border: 0;
}

.mare-highlight-card.mare-highlight-card-icon h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.mare-highlight-card.mare-highlight-card-icon p {
    display: none;
}

.mare-highlight-symbol {
    position: relative;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
}

.mare-highlight-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mare-highlight-symbol .mare-icon-dark {
    display: none;
}

.mare-icon-guide-row {
    margin-top: 1.4rem;
    display: flex;
    justify-content: center;
}

.mare-highlights-left-showcase {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.mare-highlights-showcase {
    --mare-card-corner: rgba(79, 74, 67, 0.56);
    position: relative;
    width: min(1280px, 100%);
    max-width: 100%;
    padding: clamp(1.8rem, 3vw, 2.8rem);
    margin: 0 auto;
    box-sizing: border-box;
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.34), transparent 48%),
        rgba(251, 251, 250, 0.18);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mare-highlights-showcase.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mare-highlights-intro {
    text-align: center;
    margin: 0 auto clamp(1.5rem, 2vw, 2rem);
    max-width: 760px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s;
}

.mare-highlights-showcase.is-visible .mare-highlights-intro {
    opacity: 1;
    transform: translateY(0);
}

.mare-highlights-kicker {
    margin: 0 0 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    color: #6e675e;
}

.mare-highlights-intro h2 {
    margin: 0;
    color: #221f1b;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
    line-height: 1.12;
    font-weight: 600;
}

.mare-highlights-cards-showcase {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-top: 0;
    border-left: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.mare-highlights-cards-showcase.is-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mare-highlights-cards-showcase.is-dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mare-highlights-cards-showcase .mare-highlight-card {
    min-height: 0;
    background: transparent;
    border-right: 1px solid rgba(79, 74, 67, 0.14);
    border-bottom: 1px solid rgba(79, 74, 67, 0.14);
}

.mare-highlights-cards-showcase .mare-highlight-card .mare-highlight-corner {
    display: none;
}

.mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon {
    padding: clamp(1.55rem, 2.2vw, 2rem) clamp(1rem, 1.6vw, 1.4rem);
    min-height: 190px;
    border-radius: 0;
    border: 0;
    background:
        radial-gradient(circle at top, rgba(251, 251, 250, 0.08), transparent 58%),
        transparent;
    transition: transform 0.3s ease, background 0.3s ease;
}

.mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon:hover,
.mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon:focus-within {
    transform: translateY(-4px);
    background:
        radial-gradient(circle at top, rgba(251, 251, 250, 0.13), transparent 60%),
        rgba(79, 74, 67, 0.03);
}

.mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon h3 {
    max-width: 14ch;
    font-size: 0.96rem;
}

.mare-energy-strip {
    margin-top: clamp(1.1rem, 1.8vw, 1.5rem);
    width: min(760px, 100%);
    max-width: 100%;
    padding: clamp(0.95rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.35rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border: 1px solid rgba(79, 74, 67, 0.16);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 52%),
        rgba(79, 74, 67, 0.035);
    display: grid;
    gap: 0.7rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease 0.18s, transform 0.45s ease 0.18s, background 0.3s ease, border-color 0.3s ease;
}

.mare-highlights-showcase.is-visible + .mare-energy-strip {
    opacity: 1;
    transform: translateY(0);
}

.mare-energy-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.mare-energy-label {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6e675e;
}

.mare-energy-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.mare-energy-step {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border-radius: 18px;
    border: 1px solid rgba(79, 74, 67, 0.14);
    background: rgba(251, 251, 250, 0.82);
    color: #4f4a43;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

.mare-energy-step.is-active {
    transform: translateY(-2px);
    border-color: rgba(32, 29, 26, 0.2);
    color: #1d1b19;
    box-shadow: 0 16px 30px rgba(34, 31, 27, 0.18);
}

.mare-energy-step[data-energy-step="A++"] { background-image: linear-gradient(135deg, rgba(95, 186, 89, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="A+"] { background-image: linear-gradient(135deg, rgba(146, 206, 97, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="A"] { background-image: linear-gradient(135deg, rgba(180, 211, 116, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="B"] { background-image: linear-gradient(135deg, rgba(230, 200, 88, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="C"] { background-image: linear-gradient(135deg, rgba(226, 142, 108, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="D"] { background-image: linear-gradient(135deg, rgba(220, 108, 88, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step[data-energy-step="E"] { background-image: linear-gradient(135deg, rgba(214, 79, 79, 0.20), rgba(251, 251, 250, 0.82)); }
.mare-energy-step.is-active[data-energy-step="A++"] { background: linear-gradient(135deg, #73cc6a 0%, #e6f6dd 100%); }
.mare-energy-step.is-active[data-energy-step="A+"] { background: linear-gradient(135deg, #9cdb6f 0%, #edf7df 100%); }
.mare-energy-step.is-active[data-energy-step="A"] { background: linear-gradient(135deg, #bdd67d 0%, #f1f6df 100%); }
.mare-energy-step.is-active[data-energy-step="B"] { background: linear-gradient(135deg, #efd45f 0%, #fbf1c7 100%); }
.mare-energy-step.is-active[data-energy-step="C"] { background: linear-gradient(135deg, #eb9f7c 0%, #f9ddd0 100%); }
.mare-energy-step.is-active[data-energy-step="D"] { background: linear-gradient(135deg, #e1785f 0%, #f7d6cb 100%); }
.mare-energy-step.is-active[data-energy-step="E"] { background: linear-gradient(135deg, #d94f4f 0%, #f5c4c4 100%); }

.mare-icon-guide-row-showcase {
    margin-top: clamp(1.35rem, 2vw, 1.9rem);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease 0.28s, transform 0.45s ease 0.28s;
}

.mare-highlights-showcase.is-visible .mare-icon-guide-row-showcase {
    opacity: 1;
    transform: translateY(0);
}

.mare-icon-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.72rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(79, 74, 67, 0.42);
    background: rgba(251, 251, 250, 0.9);
    color: #2a2622;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mare-icon-guide-link:hover,
.mare-icon-guide-link:focus-visible {
    transform: translateY(-1px);
    background: rgba(237, 234, 231, 0.98);
    border-color: rgba(79, 74, 67, 0.58);
}

.mare-story-section {
    min-height: calc(100dvh - var(--mare-nav-offset));
    display: flex;
    align-items: center;
    background: #edeae7;
    padding: clamp(52px, 7vh, 96px) 0;
}

.mare-story-section .container {
    width: min(1540px, 95vw);
    max-width: none;
}

.mare-story-label {
    margin: 0 0 0.7rem;
    color: #6e675e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.84rem;
    font-weight: 700;
}

.mare-word-band-text {
    margin: 0;
    max-width: 40ch;
    color: #202020;
    font-size: clamp(2rem, 3vw, 4.4rem);
    line-height: 1.08;
    font-weight: 500;
}

.mare-word-band-text .mare-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.52s ease, transform 0.52s ease;
    transition-delay: var(--word-delay, 0ms);
}

.mare-word-band-text.is-visible .mare-word {
    opacity: 1;
    transform: translateY(0);
}

.mare-tech {
    padding: 3rem 0;
    border-top: 1px solid rgba(214, 208, 201, 0.6);
}

.mare-tech.alt {
    background: #f2eee7;
}

.mare-tech h2 {
    color: #2c2926;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin-bottom: 1rem;
}

.mare-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(174, 166, 154, 0.45);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.76);
}

.mare-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border: 0;
}

.mare-table th,
.mare-table td {
    border: 1px solid rgba(174, 166, 154, 0.35);
    padding: 0.72rem 0.8rem;
    text-align: left;
    color: #45403a;
}

.mare-table thead th {
    background: #e9e3d9;
}

.mare-table-center td,
.mare-table-center th:not(:first-child) {
    text-align: center;
}

.mare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.mare-mini-card {
    border: 1px solid rgba(174, 166, 154, 0.45);
    background: rgba(255, 255, 255, 0.78);
    border-radius: 12px;
    padding: 1rem;
}

.mare-mini-card h3 {
    color: #302c28;
    margin-bottom: 0.4rem;
}

.mare-mini-card p {
    color: #635c52;
}

.mare-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    text-decoration: none;
    border: 1px solid rgba(79, 74, 67, 0.46);
    border-radius: 999px;
    padding: 0.42rem 0.92rem;
    color: #2f2b27;
    font-weight: 600;
    background: rgba(251, 251, 250, 0.86);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mare-mini-btn:hover {
    transform: translateY(-1px);
    background: rgba(36, 36, 36, 0.1);
}

.mare-drawing {
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
}

.mare-drawing img {
    width: 100%;
    max-width: 720px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 12px;
}

.mare-drawing-actions {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.mare-download-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.mare-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0.58rem 0.9rem;
    text-decoration: none;
    border: 1px solid rgba(79, 74, 67, 0.46);
    border-radius: 12px;
    color: #24201d;
    font-weight: 650;
    font-size: 1.08rem;
    line-height: 1.25;
    text-align: center;
    background: rgba(251, 251, 250, 0.9);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.mare-download-link:hover {
    transform: translateY(-1px);
    background: rgba(36, 36, 36, 0.1);
}

[data-theme="dark"] .mare-hero {
    background: #050505;
}

[data-theme="dark"] .mare-hero-grid {
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1e1d 100%);
    box-shadow: none;
}

[data-theme="dark"] .mare-hero-left {
    background: #141414;
}

[data-theme="dark"] .mare-view-menu-wrap {
    border-color: rgba(242, 239, 235, 0.4);
    background: rgba(20, 20, 20, 0.58);
}

[data-theme="dark"] .mare-view-btn {
    color: #dbd5ce;
    border-color: rgba(242, 239, 235, 0.45);
}

[data-theme="dark"] .mare-view-btn:hover {
    background: rgba(242, 239, 235, 0.12);
    color: #f2efeb;
}

[data-theme="dark"] .mare-copy {
    background: #141414;
}

[data-theme="dark"] .mare-copy-corner-tl,
[data-theme="dark"] .mare-copy-corner-tr,
[data-theme="dark"] .mare-copy-corner-bl,
[data-theme="dark"] .mare-copy-corner-br {
    border-color: rgba(242, 239, 235, 0.6);
}

[data-theme="dark"] .mare-main,
[data-theme="dark"] .mare-tech {
    background: linear-gradient(135deg, #000000 0%, #413f3e 100%);
    border-top-color: rgba(88, 87, 86, 0.7);
}

[data-theme="dark"] .mare-highlights-section {
    background: #0f0f0f;
}

[data-theme="dark"] .mare-highlights-left {
    background: #0f0f0f;
}

[data-theme="dark"] .mare-highlight-card {
    background: transparent;
}

[data-theme="dark"] .mare-highlight-card {
    --mare-card-corner: rgba(242, 239, 235, 0.58);
}

[data-theme="dark"] .mare-highlight-icon {
    border-color: rgba(242, 239, 235, 0.45);
}

[data-theme="dark"] .mare-highlight-icon svg {
    stroke: #dbd5ce;
}

[data-theme="dark"] .mare-highlight-card h3 {
    color: #f2efeb;
}

[data-theme="dark"] .mare-highlight-card p {
    color: #d1cbc3;
}

[data-theme="dark"] .mare-highlight-card.mare-highlight-card-icon h3 {
    color: #f2efeb;
}

[data-theme="dark"] .mare-highlight-symbol .mare-icon-light {
    display: none;
}

[data-theme="dark"] .mare-highlight-symbol .mare-icon-dark {
    display: block;
}

[data-theme="dark"] .mare-icon-guide-link {
    background: rgba(20, 20, 20, 0.8);
    color: #f2efeb;
    border-color: rgba(242, 239, 235, 0.34);
}

[data-theme="dark"] .mare-icon-guide-link:hover,
[data-theme="dark"] .mare-icon-guide-link:focus-visible {
    background: rgba(48, 46, 44, 0.94);
    border-color: rgba(242, 239, 235, 0.5);
}

[data-theme="dark"] .mare-highlights-showcase {
    --mare-card-corner: rgba(242, 239, 235, 0.58);
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.06), transparent 50%),
        rgba(255, 255, 255, 0.01);
}

[data-theme="dark"] .mare-highlights-kicker {
    color: #a39c94;
}

[data-theme="dark"] .mare-highlights-intro h2 {
    color: #f2efeb;
}

[data-theme="dark"] .mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 55%),
        transparent;
}

[data-theme="dark"] .mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon:hover,
[data-theme="dark"] .mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon:focus-within {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 58%),
        rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .mare-energy-strip {
    border-color: rgba(242, 239, 235, 0.16);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.07), transparent 52%),
        rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .mare-energy-label {
    color: #a39c94;
}

[data-theme="dark"] .mare-energy-step {
    border-color: rgba(242, 239, 235, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: #e7e1d8;
}

[data-theme="dark"] .mare-energy-step.is-active {
    background: linear-gradient(135deg, #f2efeb 0%, #cfc8bf 100%);
    border-color: rgba(242, 239, 235, 0.22);
    color: #1d1b19;
}

[data-theme="dark"] .mare-highlights-cards-showcase {
    border-top: 0;
    border-left: 0;
}

[data-theme="dark"] .mare-highlights-cards-showcase .mare-highlight-card {
    border-right-color: rgba(242, 239, 235, 0.16);
    border-bottom-color: rgba(242, 239, 235, 0.16);
}

[data-theme="dark"] .mare-story-section {
    background: #2f2e2d;
}

[data-theme="dark"] .mare-story-label {
    color: #cfc8bf;
}

[data-theme="dark"] .mare-word-band-text {
    color: #f2efeb;
}

[data-theme="dark"] .mare-tech.alt {
    background: linear-gradient(135deg, #090909 0%, #2a2928 100%);
}

[data-theme="dark"] .mare-copy h1,
[data-theme="dark"] .mare-tech h2,
[data-theme="dark"] .mare-mini-card h3 {
    color: #f2efeb;
}

[data-theme="dark"] .mare-eyebrow,
[data-theme="dark"] .mare-subtitle,
[data-theme="dark"] .mare-back-link,
[data-theme="dark"] .mare-mini-card p {
    color: #dbd5ce;
}

[data-theme="dark"] .mare-back-link {
    border-bottom-color: transparent;
}

[data-theme="dark"] .mare-back-link:hover,
[data-theme="dark"] .mare-back-link:focus-visible {
    border-bottom-color: rgba(242, 239, 235, 0.35);
}

[data-theme="dark"] .mare-table,
[data-theme="dark"] .mare-mini-card,
[data-theme="dark"] .mare-drawing {
    background: rgba(15, 15, 15, 0.88);
    border-color: rgba(88, 87, 86, 0.75);
}

[data-theme="dark"] .mare-table-wrap {
    background: rgba(15, 15, 15, 0.88);
    border-color: rgba(88, 87, 86, 0.75);
}

[data-theme="dark"] .mare-drawing {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .mare-table thead th {
    background: rgba(65, 63, 62, 0.95);
}

[data-theme="dark"] .mare-table th,
[data-theme="dark"] .mare-table td {
    color: #f2efeb;
    border-color: rgba(88, 87, 86, 0.55);
}

[data-theme="dark"] .mare-table tbody th {
    color: #dbd5ce;
    background: rgba(34, 34, 34, 0.78);
}

[data-theme="dark"] .mare-mini-btn,
[data-theme="dark"] .mare-download-link {
    color: #dbd5ce;
    border-color: rgba(242, 239, 235, 0.44);
    background: rgba(20, 20, 20, 0.62);
}

[data-theme="dark"] .mare-mini-btn:hover,
[data-theme="dark"] .mare-download-link:hover {
    color: #f2efeb;
    background: rgba(242, 239, 235, 0.12);
}

[data-theme="dark"] .mare-download-item p {
    color: #d1cbc3;
}

@media (max-width: 960px) {
    html,
    body,
    .mare-page,
    .mare-hero,
    .mare-hero-shell,
    .mare-hero-grid,
    .mare-main {
        overflow-x: clip;
        max-width: 100%;
    }

    .mare-hero-grid {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }

    .mare-hero-left {
        display: contents;
    }

    .mare-view-menu-wrap {
        order: 1;
        width: fit-content;
        margin: 0 clamp(16px, 4vw, 24px) 12px;
    }

    .mare-hero-right {
        order: 2;
        min-height: 44vh;
    }

    .mare-copy {
        order: 3;
        min-height: 0;
        margin: 12px clamp(16px, 4vw, 24px) 0;
    }

    .mare-grid {
        grid-template-columns: 1fr;
    }

    .mare-highlights-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mare-highlights-left {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mare-highlights-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .mare-highlights-showcase {
        width: min(640px, calc(100% - 2px));
        padding: 1.4rem 0.85rem 1.25rem;
        margin-left: auto;
        margin-right: auto;
        position: static;
    }

    .mare-highlights-intro {
        margin-bottom: 1.15rem;
    }

    .mare-highlights-cards-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .mare-highlights-cards-showcase.is-wide,
    .mare-highlights-cards-showcase.is-dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mare-highlights-cards-showcase .mare-highlight-card.mare-highlight-card-icon {
        min-height: 0;
        padding: 1.1rem 0.55rem 1rem;
    }

    .mare-energy-head {
        justify-content: center;
    }

    .mare-energy-scale {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mare-energy-strip {
        width: min(640px, calc(100% - 2px));
        margin-left: auto;
        margin-right: auto;
        position: static;
    }

    .mare-story-section {
        min-height: auto;
    }

    .mare-drawing-actions {
        grid-template-columns: 1fr;
        max-width: none;
    }
}
/* High contrast overrides */
html[data-contrast="high"] body,
html[data-contrast="high"] .mare-page,
html[data-contrast="high"] .mare-main,
html[data-contrast="high"] .mare-hero,
html[data-contrast="high"] .mare-story-section,
html[data-contrast="high"] .mare-highlights-section,
html[data-contrast="high"] .mare-tech,
html[data-contrast="high"] .mare-tech.alt,
html[data-contrast="high"] .footer {
    background: #000000 !important;
    color: #ffffff !important;
}

html[data-contrast="high"] a,
html[data-contrast="high"] p,
html[data-contrast="high"] h1,
html[data-contrast="high"] h2,
html[data-contrast="high"] h3,
html[data-contrast="high"] h4,
html[data-contrast="high"] h5,
html[data-contrast="high"] h6,
html[data-contrast="high"] li,
html[data-contrast="high"] span,
html[data-contrast="high"] strong {
    color: #ffffff !important;
}

html[data-contrast="high"] .card,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .box,
html[data-contrast="high"] .table,
html[data-contrast="high"] .table-wrap,
html[data-contrast="high"] .grid,
html[data-contrast="high"] .content {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-contrast="high"] .mare-hero-shell,
html[data-contrast="high"] .mare-hero-grid,
html[data-contrast="high"] .mare-hero-left,
html[data-contrast="high"] .mare-copy,
html[data-contrast="high"] .mare-story-section .container,
html[data-contrast="high"] .mare-highlights-left,
html[data-contrast="high"] .mare-highlights-showcase,
html[data-contrast="high"] .mare-highlight-card,
html[data-contrast="high"] .mare-highlight-card.mare-highlight-card-icon,
html[data-contrast="high"] .mare-mini-card,
html[data-contrast="high"] .mare-tech .container,
html[data-contrast="high"] .mare-tech .mare-table-wrap,
html[data-contrast="high"] .mare-table thead th,
html[data-contrast="high"] .mare-table th,
html[data-contrast="high"] .mare-table td,
html[data-contrast="high"] .mare-back-link,
html[data-contrast="high"] .mare-view-btn,
html[data-contrast="high"] .mare-icon-guide-link,
html[data-contrast="high"] .mare-download-item,
html[data-contrast="high"] .mare-download-link,
html[data-contrast="high"] .mare-mini-btn {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .mare-page .navbar,
html[data-contrast="high"] .mare-page .nav-cluster,
html[data-contrast="high"] .mare-page .nav-cluster.active {
    background: #000000 !important;
    background-image: none !important;
}

html[data-contrast="high"] .mare-page .nav-menu,
html[data-contrast="high"] .mare-page .nav-menu > li,
html[data-contrast="high"] .mare-page .nav-mega,
html[data-contrast="high"] .mare-page .nav-dropdown,
html[data-contrast="high"] .mare-page .nav-menu a,
html[data-contrast="high"] .mare-page .nav-mega-toggle,
html[data-contrast="high"] .mare-page .nav-dropdown-toggle {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .mare-page .mare-hero-right,
html[data-contrast="high"] .mare-page .mare-hero-right img,
html[data-contrast="high"] .mare-page .mare-highlight-symbol,
html[data-contrast="high"] .mare-page .mare-highlight-symbol img {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .mare-page .mare-highlight-symbol .mare-icon-light {
    display: none !important;
}

html[data-contrast="high"] .mare-page .mare-highlight-symbol .mare-icon-dark {
    display: block !important;
}

html[data-contrast="high"] .mare-page .mare-energy-strip,
html[data-contrast="high"] .mare-page .mare-energy-head,
html[data-contrast="high"] .mare-page .mare-energy-scale,
html[data-contrast="high"] .mare-page .mare-energy-step,
html[data-contrast="high"] .mare-page .mare-energy-step.is-active {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-contrast="high"] .mare-page .mare-energy-strip,
html[data-contrast="high"] .mare-page .mare-energy-step {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

html[data-contrast="high"] .mare-page .mare-energy-step.is-active {
    border-color: #ffffff !important;
    font-weight: 700;
}

html[data-contrast="high"] .a11y-nav-btn {
    background: transparent url("Accessibility Gradient.png") center/cover no-repeat !important;
    border: 0 !important;
    color: transparent !important;
}

html[data-contrast="high"] .a11y-nav-btn::before {
    content: none !important;
}