/* HATA identity. Shared by the standalone route and the fetched arcade section. */
html body.hata-theme:has(.hata-section),
.hata-section {
    --bg-color: #14120f;
    --panel-color: #211c17;
    --panel-color-strong: #0d0b09;
    --font-color: #eee8dd;
    --muted-color: #c2b8a9;
    --heading-color: #fff4e3;
    --theme-color: #f2a15d;
    --border-color: #68452c;
    --grid-line: rgba(213, 165, 120, 0.035);
    --hata-ink: #14120f;
    --hata-paper: #f7f0e5;
    --hata-ember: #f28a38;
    --hata-red: #ec3b1b;
    --hata-green: #91b49a;
    --hata-amber: #f2a15d;
    --hata-blue: #9db6cb;
    background: var(--bg-color) !important;
    color: var(--font-color) !important;
    color-scheme: dark;
}

.hata-section :is(a, summary):focus-visible {
    outline: 2px solid var(--hata-ember);
    outline-offset: 5px;
}

body.hata-theme .hata-section #dsn_header.hata-hero {
    --bg-color: #14120f !important;
    --font-color: #eee8dd !important;
    --heading-color: #fff4e3 !important;
    --theme-color: #f2a15d !important;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 clamp(24px, 5.5vw, 88px);
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(ellipse at 80% 45%, rgba(126, 57, 19, 0.19), transparent 55%),
        #14120f !important;
    color: var(--font-color) !important;
}

.hata-section #dsn_header.hata-hero::before {
    content: none;
}

.hata-section .hata-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1320px;
    min-height: 84px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--hata-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hata-section .hata-hero a {
    color: var(--font-color) !important;
    text-decoration: none;
}

.hata-section .hata-masthead__home span {
    margin: 0 12px;
    color: var(--hata-ember);
}

.hata-section .hata-masthead__explore {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hata-section .hata-masthead__explore > span {
    color: var(--hata-ember);
    font-size: 1.15rem;
}

.hata-section .hata-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 0;
}

.hata-section .hata-hero-copy {
    min-width: 0;
}

.hata-section .hata-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    color: var(--theme-color);
    font-family: var(--hata-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hata-section .hata-hero-eyebrow > span {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--hata-red);
    box-shadow: 0 0 14px rgba(236, 59, 27, 0.4);
}

.hata-section .hata-hero-heading {
    margin: 0;
    color: var(--heading-color);
    font-family: var(--hata-display);
    font-size: clamp(4.8rem, 8vw, 8.2rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 0.085em;
}

.hata-section .hata-hero-heading small {
    display: block;
    margin-top: 18px;
    color: var(--theme-color);
    font-family: var(--hata-mono);
    font-size: clamp(0.84rem, 1.3vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.36em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hata-section .hata-hero-lead {
    margin: 34px 0 0;
    color: var(--heading-color);
    font-family: var(--hata-display);
    font-size: clamp(1.65rem, 2.7vw, 2.6rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.hata-section .hata-hero .hata-hero-value {
    max-width: 49ch;
    margin: 22px 0 0;
    color: var(--muted-color) !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}

.hata-section .hata-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hata-section .hata-hero .hata-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    font-family: var(--hata-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hata-section .hata-hero .hata-button--primary {
    border-color: var(--hata-ember);
    background: var(--hata-ember);
    color: var(--hata-ink) !important;
}

.hata-section .hata-hero .hata-button:hover {
    border-color: var(--hata-paper);
    background: var(--hata-paper);
    color: var(--hata-ink) !important;
}

.hata-section .hata-hero-art {
    position: relative;
    width: 100%;
    max-width: 512px;
    margin: 0 0 0 auto;
    border: 1px solid #805332;
    background: var(--hata-paper);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

.hata-section .hata-hero-art::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--hata-ember), var(--hata-red));
}

.hata-section .hata-hero-art > img {
    display: block;
    width: 100%;
    height: auto;
}

.hata-section .hata-hero-art figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    color: var(--muted-color);
    background: var(--hata-ink);
    font-family: var(--hata-mono);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hata-section .hata-hero-art figcaption > span:first-child {
    margin-right: auto;
    color: var(--heading-color);
    font-weight: 800;
    letter-spacing: 0.2em;
}

.hata-section .hata-hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1320px;
    min-height: 88px;
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
}

.hata-section .hata-hero .hata-hero-proof {
    gap: 24px;
    margin: 0;
}

.hata-section .hata-hero .hata-hero-proof span {
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-color);
    font-family: var(--hata-mono);
    font-size: 0.6rem;
    font-weight: 500;
}

.hata-section .hata-hero-scroll {
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--hata-mono);
    font-size: 0.63rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hata-section .hata-hero-scroll > span {
    color: var(--hata-ember);
    font-size: 1.2rem;
}

.hata-section #hata-content .news-content {
    margin-top: 48px;
}

.hata-section #hata-content .lotus-page {
    gap: clamp(64px, 7vw, 104px);
}

.hata-section #hata-content .lotus-page section[id] {
    scroll-margin-top: 150px;
}

.hata-section #hata-content .hata-brand-band {
    padding: 12px 22px;
    border-color: #9d7654;
    background: var(--hata-paper);
    color: var(--hata-ink);
    color-scheme: light;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: none;
}

.hata-section #hata-content .hata-brand-band__content {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
}

.hata-section #hata-content .hata-brand-band__rule::before {
    background: linear-gradient(90deg, #d34320 0 72px, transparent 72px 90px, #c7b6a2 90px 100%);
}

.hata-section #hata-content .hata-brand-band__lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--hata-ink) !important;
}

.hata-section #hata-content .hata-brand-band__lockup img {
    width: 102px;
    height: auto;
    flex-shrink: 0;
}

.hata-section #hata-content .hata-brand-band__lockup > span {
    font-family: var(--hata-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.hata-section #hata-content .hata-brand-band__lockup small {
    display: block;
    margin-top: 5px;
    font-family: var(--hata-mono);
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hata-section #hata-content .hata-brand-band__labels a {
    border-color: #c7b6a2;
    color: var(--hata-ink) !important;
    font-size: 0.63rem;
    letter-spacing: 0.07em;
}

.hata-section #hata-content .post-content .hata-brand-band__labels a:is(:hover, :focus-visible, .is-active) {
    background: #aa3c19;
    color: #fff4e3 !important;
}

.hata-section #hata-content .lotus-eyebrow,
.hata-section #hata-content .lotus-card-label {
    color: var(--theme-color) !important;
}

.hata-section #hata-content .lotus-dek {
    color: var(--muted-color) !important;
}

.hata-section #hata-content .lotus-intro h2 {
    max-width: 950px;
    font-size: clamp(2.35rem, 4.5vw, 4rem);
}

.hata-section #hata-content .lotus-section__header::after {
    background: linear-gradient(90deg, var(--hata-ember) 0 96px, transparent 96px 116px, var(--border-color) 116px 100%);
}

.hata-section #hata-content :is(.lotus-signal-grid > div, .hata-cycle, .hata-stack-map, .hata-stack-layer__modules > div, .hata-system__content li, .lotus-status-card) {
    background: var(--panel-color);
    border-color: var(--border-color);
}

.hata-section #hata-content :is(.lotus-signal-grid, .hata-cycle > div, .hata-stack-layer, .hata-stack-layer > header, .hata-system, .hata-system__content ul, .hata-system__content li, .hata-development-list, .hata-development-list article, .lotus-plugin-grid, .lotus-plugin-group) {
    border-color: var(--border-color);
}

.hata-section #hata-content :is(.lotus-signal-grid span, .hata-cycle span, .hata-stack-layer > header > span, .hata-system__index) {
    color: var(--theme-color);
}

.hata-section #hata-content :is(.hata-cycle small, .hata-stack-layer__modules span, .hata-system__heading > span, .hata-system__content li span, .hata-development-list p, .lotus-plugin-group p) {
    color: var(--muted-color) !important;
}

.hata-section #hata-content :is(.hata-stack-layer__modules strong, .hata-system__heading strong, .hata-system__content li strong, .lotus-signal-grid strong) {
    color: var(--heading-color);
}

.hata-section #hata-content .hata-cycle > div::after {
    background: var(--panel-color);
    color: var(--hata-ember);
}

.hata-section #hata-content .hata-stack-layer > header {
    background: #18120e;
}

.hata-section #hata-content .hata-stack-layer > header small {
    color: var(--muted-color);
}

.hata-section #hata-content .hata-stack-layer__modules > div.is-primary {
    background: #2d2118;
}

.hata-section #hata-content .hata-stack-layer__modules > div:hover {
    background: #35271c;
}

.hata-section #hata-content .hata-system summary {
    color: var(--heading-color);
}

.hata-section #hata-content .hata-system__toggle::before,
.hata-section #hata-content .hata-system__toggle::after {
    background: var(--hata-ember);
}

.hata-section #hata-content .hata-system summary:focus-visible {
    outline: 2px solid var(--hata-ember);
    outline-offset: 5px;
}

.hata-section #hata-content .hata-system summary:is(:hover, :focus-visible),
.hata-section #hata-content .hata-system[open] summary {
    background: rgba(242, 138, 56, 0.055);
}

.hata-section #hata-content .hata-system__heading small {
    color: var(--theme-color);
}

.hata-section #hata-content .hata-system__workflow {
    background: #2d2118;
    color: var(--font-color);
}

.hata-section #hata-content .hata-output-section {
    border: 1px solid var(--border-color);
    background: #0d0b09;
}

.hata-section #hata-content .hata-output-pipeline {
    border-color: var(--border-color);
    color: var(--muted-color);
}

.hata-section #hata-content .hata-status-dot {
    background: var(--panel-color);
}

.hata-section #hata-content .hata-development-list article[data-status="shipping"] .hata-status-dot {
    background: var(--hata-green);
}

.hata-section #hata-content .hata-development-list article[data-status="active"] .hata-status-dot {
    background: var(--hata-amber);
}

.hata-section #hata-content .hata-development-list article[data-status="expanding"] .hata-status-dot {
    background: var(--hata-blue);
}

.hata-section #hata-content .lotus-status-card::before {
    background: var(--theme-color);
}

.hata-section #hata-content .lotus-status-card.is-now::before {
    background: var(--hata-green);
}

.hata-section #hata-content .lotus-status-card.is-reference::before {
    background: var(--hata-blue);
}

.hata-section #hata-content .hata-closing {
    grid-template-columns: 136px minmax(0, 1fr) auto;
    gap: 28px;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--hata-ember);
    background: #211912;
}

.hata-section #hata-content .hata-closing__identity {
    padding: 12px 8px;
    background: var(--hata-paper);
}

.hata-section #hata-content .hata-closing__identity img {
    display: block;
    width: 100%;
    height: auto;
}

.hata-section #hata-content .hata-closing .lotus-eyebrow {
    color: var(--theme-color) !important;
}

.hata-section #hata-content .hata-closing h2 {
    color: var(--heading-color) !important;
}

.hata-section #hata-content .hata-closing__actions {
    flex-direction: column;
}

.hata-section #hata-content .hata-closing__actions a {
    border-color: var(--border-color);
    color: var(--font-color) !important;
}

.hata-section #hata-content .hata-closing__actions a:is(:first-child, :hover, :focus-visible) {
    border-color: var(--hata-ember);
    background: var(--hata-ember);
    color: var(--hata-ink) !important;
}

@media (max-width: 1100px) {
    .hata-section .hata-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hata-section #hata-content .hata-closing {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .hata-section #hata-content .hata-closing__actions {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .hata-section .hata-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 42px 0;
    }

    .hata-section .hata-hero-heading {
        font-size: clamp(4.8rem, 15vw, 7.5rem);
    }

    .hata-section .hata-hero-lead {
        font-size: 2rem;
    }

    .hata-section .hata-hero-actions {
        flex-direction: row;
    }

    .hata-section .hata-hero-art {
        max-width: 440px;
        margin: 0 auto;
    }

    .hata-section .hata-hero-foot {
        flex-wrap: wrap;
        padding: 18px 0;
        gap: 12px;
    }

    .hata-section .hata-hero .hata-hero-proof {
        column-gap: 20px;
        row-gap: 4px;
    }

    .hata-section #hata-content .hata-brand-band__content {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hata-section #hata-content .hata-brand-band__lockup img {
        width: 80px;
    }

    .hata-section #hata-content .hata-brand-band__labels {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .hata-section .hata-masthead {
        min-height: 72px;
        font-size: 0.56rem;
        letter-spacing: 0.03em;
    }

    .hata-section .hata-masthead__home {
        max-width: 155px;
        line-height: 1.8;
    }

    .hata-section .hata-masthead__home span {
        margin: 0 5px;
    }

    .hata-section .hata-masthead__explore {
        gap: 8px;
        text-align: right;
    }

    .hata-section .hata-hero-eyebrow {
        font-size: 0.59rem;
        letter-spacing: 0.045em;
    }

    .hata-section .hata-hero-actions,
    .hata-section .hata-hero .hata-button {
        width: 100%;
    }

    .hata-section .hata-hero-art figcaption {
        padding: 12px;
        font-size: 0.5rem;
    }

    .hata-section #hata-content .hata-brand-band {
        padding: 12px;
    }

    .hata-section #hata-content .hata-brand-band__labels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-color: #c7b6a2;
    }

    .hata-section #hata-content .hata-closing {
        grid-template-columns: 1fr;
    }

    .hata-section #hata-content .hata-closing__identity {
        width: 124px;
    }

    .hata-section #hata-content .hata-closing__actions {
        grid-column: auto;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hata-section .hata-button {
        transition: none !important;
    }
}