/* Kiyori atmosphere + navbar theme control. */

/* Give the empty page areas a living, layered Kiyori atmosphere. */
:root[data-theme="dark"] body:before {
    background:
        radial-gradient(420px 320px at 12% 18%, rgba(236, 112, 194, .09), transparent 72%),
        radial-gradient(520px 420px at 86% 24%, rgba(137, 104, 255, .13), transparent 72%),
        radial-gradient(460px 360px at 72% 78%, rgba(73, 102, 255, .08), transparent 72%),
        radial-gradient(350px 300px at 24% 88%, rgba(240, 105, 184, .07), transparent 72%);
}
:root[data-theme="dark"] body:after {
    opacity: .34;
    background-image:
        radial-gradient(circle at 15px 18px, rgba(238, 147, 214, .20) 0 1px, transparent 1.7px),
        radial-gradient(circle at 58px 44px, rgba(164, 139, 255, .16) 0 1px, transparent 1.7px),
        linear-gradient(rgba(210,179,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,179,255,.028) 1px, transparent 1px);
    background-size: 78px 78px, 112px 112px, 78px 78px, 78px 78px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}

:root[data-theme="light"] body:before {
    background:
        radial-gradient(430px 330px at 10% 18%, rgba(220, 94, 171, .10), transparent 72%),
        radial-gradient(520px 420px at 88% 20%, rgba(136, 102, 216, .15), transparent 72%),
        radial-gradient(460px 360px at 74% 78%, rgba(98, 119, 214, .09), transparent 72%),
        radial-gradient(360px 300px at 22% 88%, rgba(235, 132, 192, .09), transparent 72%);
}
:root[data-theme="light"] body:after {
    opacity: .32;
    background-image:
        radial-gradient(circle at 15px 18px, rgba(185, 91, 155, .16) 0 1px, transparent 1.7px),
        radial-gradient(circle at 58px 44px, rgba(112, 91, 183, .13) 0 1px, transparent 1.7px),
        linear-gradient(rgba(102,76,115,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102,76,115,.032) 1px, transparent 1px);
    background-size: 78px 78px, 112px 112px, 78px 78px, 78px 78px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}

/* The theme switch now lives inside the real navbar action group. */
.kiyori-theme-toggle {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(255,255,255,.055);
    color: #cfc5dc;
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.14);
    backdrop-filter: blur(16px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.kiyori-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(237,118,196,.38);
    background: rgba(237,118,196,.10);
    color: #ffe1f3;
}
.kiyori-theme-toggle .theme-icon { font-size: 15px; line-height: 1; }
:root[data-theme="light"] .kiyori-theme-toggle {
    background: rgba(255,255,255,.48);
    border-color: rgba(91,65,104,.15);
    color: #695a73;
    box-shadow: inset 0 1px rgba(255,255,255,.85), 0 8px 22px rgba(76,52,84,.10);
}
:root[data-theme="light"] .kiyori-theme-toggle:hover {
    background: rgba(218,101,169,.11);
    border-color: rgba(121,89,202,.30);
    color: #7651a8;
}

.nav-actions {
    flex: 0 0 auto;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.nav-actions > * { flex-shrink: 0; }

/* Kiyori hero: turn the existing character asset into a deliberate key-visual stage. */
.hero-visual.kiyori-hero {
    isolation: isolate;
    background:
        radial-gradient(ellipse at 50% 74%, rgba(169,140,255,.22), transparent 34%),
        radial-gradient(ellipse at 78% 28%, rgba(237,118,196,.12), transparent 30%),
        radial-gradient(ellipse at 18% 24%, rgba(101,121,255,.10), transparent 32%),
        linear-gradient(145deg, rgba(27,20,43,.97), rgba(8,7,14,.99));
    border-color: rgba(196,169,255,.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -60px 100px rgba(0,0,0,.20),
        0 35px 90px rgba(0,0,0,.32);
}
.hero-visual.kiyori-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 22%, rgba(255,255,255,.55) 0 1px, transparent 1.7px),
        radial-gradient(circle at 83% 17%, rgba(237,118,196,.55) 0 1px, transparent 1.8px),
        radial-gradient(circle at 76% 68%, rgba(169,140,255,.42) 0 1px, transparent 1.7px),
        radial-gradient(circle at 22% 76%, rgba(255,211,239,.32) 0 1px, transparent 1.7px);
    opacity: .55;
}
.kiyori-hero .kiyori-orbit {
    inset: 8% 13%;
    z-index: 1;
    border-color: rgba(169,140,255,.11);
    box-shadow: 0 0 80px rgba(169,140,255,.06);
}
.kiyori-hero .kiyori-orbit:after {
    color: #f1a1d3;
    text-shadow: 0 0 22px rgba(237,118,196,.7);
}
.kiyori-hero .kiyori-character {
    z-index: 3;
    filter: drop-shadow(0 22px 24px rgba(0,0,0,.42)) drop-shadow(0 0 34px rgba(169,140,255,.14));
}
.kiyori-hero .kiyori-nameplate {
    z-index: 6;
    background: linear-gradient(145deg, rgba(18,14,29,.84), rgba(10,8,17,.68));
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
}
.kiyori-hero .kiyori-chip {
    z-index: 6;
    background: rgba(169,140,255,.09);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

:root[data-theme="light"] .hero-visual.kiyori-hero {
    background:
        radial-gradient(ellipse at 50% 74%, rgba(169,140,255,.20), transparent 34%),
        radial-gradient(ellipse at 78% 28%, rgba(237,118,196,.14), transparent 30%),
        radial-gradient(ellipse at 18% 24%, rgba(101,121,255,.09), transparent 32%),
        linear-gradient(145deg, rgba(249,244,250,.97), rgba(233,225,239,.98));
    border-color: rgba(104,78,121,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -60px 100px rgba(115,82,125,.06),
        0 30px 70px rgba(76,52,84,.13);
}
:root[data-theme="light"] .hero-visual.kiyori-hero:after { opacity: .42; }
:root[data-theme="light"] .kiyori-hero .kiyori-orbit { border-color: rgba(117,88,150,.13); }
:root[data-theme="light"] .kiyori-hero .kiyori-nameplate {
    background: rgba(255,252,255,.72);
    border-color: rgba(91,65,104,.13);
    box-shadow: 0 18px 40px rgba(76,52,84,.12), inset 0 1px rgba(255,255,255,.95);
}
:root[data-theme="light"] .kiyori-hero .kiyori-nameplate strong { color: #403649; }
:root[data-theme="light"] .kiyori-hero .kiyori-nameplate span { color: #786c7f; }
:root[data-theme="light"] .kiyori-hero .kiyori-chip {
    color: #725c91;
    background: rgba(169,140,255,.10);
    border-color: rgba(117,88,150,.16);
}

@media (max-width: 1080px) {
    .nav-inner { gap: 24px; }
    .desktop-nav { gap: 19px; }
    .desktop-nav a { font-size: 12px; }
    .api-pill { display: none; }
}
@media (max-width: 820px) {
    .kiyori-theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
    .kiyori-hero .kiyori-orbit { inset: 10% 12%; }
}
@media (max-width: 560px) {
    .kiyori-theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
    .nav-actions { gap: 7px; }
    .hero-visual.kiyori-hero {
        background:
            radial-gradient(ellipse at 50% 72%, rgba(169,140,255,.20), transparent 42%),
            radial-gradient(ellipse at 75% 25%, rgba(237,118,196,.10), transparent 35%),
            linear-gradient(145deg, rgba(27,20,43,.98), rgba(8,7,14,.99));
    }
    :root[data-theme="light"] .hero-visual.kiyori-hero {
        background:
            radial-gradient(ellipse at 50% 72%, rgba(169,140,255,.18), transparent 42%),
            radial-gradient(ellipse at 75% 25%, rgba(237,118,196,.11), transparent 35%),
            linear-gradient(145deg, rgba(249,244,250,.98), rgba(233,225,239,.99));
    }
}
@media (prefers-reduced-motion: reduce) { .kiyori-theme-toggle { transition: none; } }