/* 页面外壳与原型保持一致：页头搜索、移动端底栏及低对比度背景动效。 */
.site-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: middle;
}

.site-main {
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - 170px);
}
.site-header { background: white; height: 85px; }
.header-inner { gap: 38px; height: 100%; min-height: 0; }
.header-inner nav { align-self: stretch; align-items: stretch; flex-shrink: 0; }
.header-inner nav a { position: relative; }
.header-inner nav a[aria-current="page"]::after { bottom: 15px; }

.site-main > .site-width {
    position: relative;
    z-index: 1;
}

.home-ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    user-select: none;
}

.ambient-glow {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    animation: ambient-drift 24s ease-in-out infinite alternate;
}

.glow-indigo {
    top: -160px;
    left: -390px;
    background: radial-gradient(ellipse, oklch(.90 .055 280 / .6), transparent 70%);
}

.glow-pink {
    top: 310px;
    right: -400px;
    background: radial-gradient(ellipse, oklch(.93 .05 350 / .48), transparent 70%);
    animation-delay: -9s;
}

.glow-blue {
    top: 940px;
    left: -400px;
    background: radial-gradient(ellipse, oklch(.93 .045 240 / .55), transparent 70%);
    animation-delay: -16s;
}

.ambient-piece {
    position: absolute;
    color: oklch(.65 .10 280 / .28);
    animation: ambient-float 16s ease-in-out infinite alternate;
}

.ambient-piece .site-icon {
    width: 26px;
    height: 26px;
    stroke-width: 1.2;
}

.ambient-piece-1 { top: 70px; left: 1.4%; }
.ambient-piece-2 { top: 480px; right: 1.2%; animation-delay: -6s; }
.ambient-piece-3 { top: 810px; left: 2%; animation-delay: -10s; }
.ambient-piece-4 { top: 1180px; right: 2%; animation-delay: -3s; }
.ambient-piece-5 { bottom: 230px; left: 1.2%; animation-delay: -7s; }
.ambient-piece-6 { right: 1.4%; bottom: 70px; animation-delay: -12s; }

.site-body .home-ambient {
    opacity: .65;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 255px;
    min-width: 200px;
    height: 44px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
}

.header-search:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.header-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    flex: 1;
    border: 0;
    padding: 0;
    border-radius: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
}

.header-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.header-search button {
    min-height: 36px;
    flex-shrink: 0;
    padding: 4px 0 4px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.header-search button:hover,
.header-search button:focus-visible {
    color: var(--primary);
}

.header-shelf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    margin-left: 0;
    padding: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.header-shelf:hover,
.header-shelf:focus-visible,
.header-shelf[aria-current="page"] {
    color: var(--primary);
    background: var(--lavender);
}

.welcome-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.date-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.date-label .site-icon {
    width: 17px;
    height: 17px;
}

.ambient-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lavender);
    color: var(--primary);
}

.ambient-control:hover,
.ambient-control:focus-visible {
    background: oklch(.92 .035 280);
}

.ambient-control[aria-pressed="true"] {
    color: var(--primary);
}

.ambient-control[aria-pressed="false"] {
    background: var(--surface);
    color: var(--muted);
}

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

.site-footer > .ambient-control {
    margin-left: auto;
}

.mobile-nav {
    display: none;
}

.home-motion-paused .home-ambient > * {
    animation-play-state: paused;
}
/* 脚本未加载或失败时保持静止，不出现无法暂停的持续动画。 */
body:not(.ambient-ready) .home-ambient > * { animation-play-state: paused; }

@keyframes ambient-drift {
    to { transform: translate(28px, 38px) scale(1.06); }
}

@keyframes ambient-float {
    from { transform: translateY(-8px) rotate(-8deg); }
    to { transform: translateY(10px) rotate(9deg); }
}

@media (max-width: 1200px) {
    .site-width { width: calc(100% - 64px); }
    .header-inner { gap: 26px; }
    .header-inner nav { gap: 16px; }
    .brand { font-size: 22px; }
    .header-search { width: 220px; }
    .header-shelf { font-size: 12px; }
}

@media (max-width: 1000px) {
    .header-inner { gap: 16px; }
    .header-inner nav { gap: 12px; }
    .header-inner nav a { font-size: 14px; }
    .brand { font-size: 21px; }
    .brand img { width: 37px; height: 42px; }
    .header-search { width: 210px; }
    .header-shelf span { display: none; }
    .header-shelf { gap: 4px; }
}
@media (min-width: 761px) and (max-width: 850px) {
    .header-inner { gap: 12px; }
    .header-search { min-width: 140px; }
}

@media (max-width: 760px) {
    .site-width { width: calc(100% - 40px); }
    .brand { font-size: 22px; }
    .site-main {
        min-height: calc(100svh - 132px);
    }

    .site-main > .site-width {
        width: calc(100% - 40px);
    }

    .site-header {
        height: 132px;
    }

    .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 64px 52px;
        gap: 0 20px;
        padding-top: 0;
    }

    .header-inner nav {
        display: none;
    }

    .header-shelf {
        grid-column: 2;
        grid-row: 1;
    }

    .header-shelf span {
        display: inline;
    }

    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        height: 44px;
        margin-left: 0;
    }

    .header-search input {
        font-size: 16px;
    }
    .header-search button { min-width: 44px; min-height: 44px; }
    .home-welcome { padding: 22px 0 17px; gap: 8px; }
    .site-body .comic-notice { bottom: calc(80px + env(safe-area-inset-bottom)); }

    .home-ambient .ambient-glow {
        width: 440px;
        height: 600px;
    }

    .home-ambient .glow-indigo,
    .home-ambient .glow-blue {
        left: -260px;
    }

    .home-ambient .glow-pink {
        right: -280px;
    }

    .ambient-piece {
        display: none;
    }

    .welcome-actions {
        gap: 0;
    }

    .date-label {
        display: none;
    }

    .site-footer {
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 8px max(8px, env(safe-area-inset-right))
            calc(7px + env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
        border-top: 1px solid var(--line);
        background: white;
    }

    .mobile-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        min-height: 44px;
        color: var(--muted);
        font-size: 11px;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav a[aria-current="page"] {
        color: var(--primary);
        font-weight: 600;
    }

    .mobile-nav .site-icon {
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-ambient > *,
    .home-motion-paused .home-ambient > * {
        animation: none;
    }

    .ambient-control {
        display: none !important;
    }
}