:root {
    --ink: #f2f7ff;
    --ink-soft: #c5d4ea;
    --ink-faint: #91a9ca;
    --blue: #75bdff;
    --blue-deep: #123678;
    --cyan: #81e3f4;
    --warm: #f0c78a;
    --page-width: 1180px;
    --section-gap: clamp(88px, 10vw, 148px);
    --spring: cubic-bezier(0.175, 0.885, 0.32, 2.2);
    --soft-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 24px 70px rgba(0, 8, 30, 0.22);
    --shadow-hover: 0 30px 80px rgba(0, 8, 30, 0.32);
    --focus-ring: 0 0 0 3px rgba(105, 215, 238, 0.45);
    /* Compatibility aliases used by the original standalone article pages. */
    --primary-color: #d6e8ff;
    --secondary-color: #75bdff;
    --accent-color: #81e3f4;
    --text-color: var(--ink);
    --text-light: var(--ink-soft);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 118px;
}

body {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    padding-bottom: 118px;
    background-color: #051430;
    background-image: none;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 11, 40, 0.03), rgba(2, 10, 38, 0.13));
}

body.intro-running {
    overflow: hidden;
}

button,
a {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
}

svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

::selection {
    color: #fff;
    background: rgba(38, 100, 225, 0.78);
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    padding: 10px 16px;
    color: #fff;
    background: #102a66;
    border-radius: 999px;
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Opening sequence */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(79, 144, 255, 0.36), transparent 34%),
        linear-gradient(150deg, rgba(5, 22, 58, 0.94), rgba(12, 46, 105, 0.92)),
        url("../images/video/forest-still.jpg") center / cover;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.72s var(--soft-ease),
        visibility 0.72s step-end;
}

.intro-overlay::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(110deg, transparent 43%, rgba(255, 255, 255, 0.22) 50%, transparent 57%);
    transform: translateX(-65%) rotate(-8deg);
    opacity: 0;
}

.intro-overlay.is-playing::after {
    animation: introSweep 1.2s 0.35s var(--soft-ease) forwards;
}

.intro-overlay.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.intro-overlay.is-leaving .intro-brand {
    transform: translateY(-12px) scale(1.035);
    opacity: 0;
}

.intro-skipped .intro-overlay {
    display: none;
}

.intro-brand {
    position: relative;
    z-index: 2;
    width: min(88vw, 560px);
    text-align: center;
    transition: all 0.5s var(--soft-ease);
}

.intro-mark {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    place-items: center;
    font-family: "Songti SC", "STSong", serif;
    font-size: 30px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 24px;
    background: transparent;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 0 rgba(255, 255, 255, 0.18),
        0 18px 50px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
}

.intro-kicker,
.intro-caption {
    margin: 0;
    letter-spacing: 0.24em;
    opacity: 0;
    transform: translateY(12px);
}

.intro-kicker {
    font-size: 11px;
    font-weight: 700;
}

.intro-title {
    margin: 12px 0 16px;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(52px, 9vw, 92px);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
}

.intro-line {
    width: min(280px, 58vw);
    height: 1px;
    margin: 0 auto 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.intro-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translateX(-110%);
}

.intro-caption {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.74);
}

.intro-overlay.is-playing .intro-mark {
    animation: introMark 0.65s 0.08s var(--spring) forwards;
}

.intro-overlay.is-playing .intro-kicker {
    animation: introRise 0.55s 0.25s var(--soft-ease) forwards;
}

.intro-overlay.is-playing .intro-title {
    animation: introTitle 0.7s 0.32s var(--spring) forwards;
}

.intro-overlay.is-playing .intro-line span {
    animation: introLine 0.7s 0.6s var(--soft-ease) forwards;
}

.intro-overlay.is-playing .intro-caption {
    animation: introRise 0.55s 0.72s var(--soft-ease) forwards;
}

.intro-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.intro-orbit-one {
    width: 56vw;
    height: 56vw;
    animation: orbitFloat 9s ease-in-out infinite;
}

.intro-orbit-two {
    width: 78vw;
    height: 78vw;
    animation: orbitFloat 12s 0.8s ease-in-out infinite reverse;
}

@keyframes introMark {
    0% { opacity: 0; transform: scale(0.72) rotate(-8deg); }
    72% { opacity: 1; transform: scale(1.07) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes introRise {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes introTitle {
    0% { opacity: 0; transform: translateY(24px) scale(0.96); letter-spacing: 0.2em; }
    100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.12em; }
}

@keyframes introLine {
    to { transform: translateX(110%); }
}

@keyframes introSweep {
    0% { opacity: 0; transform: translateX(-65%) rotate(-8deg); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(65%) rotate(-8deg); }
}

@keyframes orbitFloat {
    0%, 100% { transform: scale(0.96) rotate(0deg); opacity: 0.55; }
    50% { transform: scale(1.04) rotate(5deg); opacity: 1; }
}

/* Ambient field */
.ambient-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.ambient-blob,
.cursor-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
}

.ambient-blob-one {
    top: 9%;
    left: -8%;
    width: 34vw;
    height: 34vw;
    background: radial-gradient(circle, rgba(123, 190, 255, 0.1), transparent 68%);
    animation: ambientDrift 14s ease-in-out infinite;
}

.ambient-blob-two {
    right: -8%;
    top: 38%;
    width: 38vw;
    height: 38vw;
    background: radial-gradient(circle, rgba(255, 235, 190, 0.055), transparent 68%);
    animation: ambientDrift 17s 1.4s ease-in-out infinite reverse;
}

.cursor-aurora {
    left: 0;
    top: 0;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(129, 219, 255, 0.17), rgba(108, 197, 255, 0.04) 38%, transparent 70%);
    transform: translate3d(calc(var(--ambient-x, 50vw) - 190px), calc(var(--ambient-y, 30vh) - 190px), 0);
    transition: opacity 0.35s ease;
    will-change: transform;
}

.grain {
    position: absolute;
    inset: 0;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

@keyframes ambientDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(5vw, -3vh, 0) scale(1.08); }
}

/* Floating navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 18px 20px 0;
}

.topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: min(100%, var(--page-width));
    min-height: 70px;
    margin: 0 auto;
    padding: 8px 10px 8px 16px;
    border-radius: 28px;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 178px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    font-family: "Songti SC", "STSong", serif;
    font-size: 19px;
    background: transparent;
    border-radius: 15px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28);
}

.brand-copy {
    display: grid;
    gap: 1px;
}

.brand-copy strong {
    font-family: "Songti SC", "STSong", serif;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.brand-copy small {
    color: var(--ink-faint);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.nav-link {
    position: relative;
    display: grid;
    min-width: 66px;
    min-height: 42px;
    place-items: center;
    padding: 0 12px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 650;
    border-radius: 16px;
    transition:
        color 0.25s ease,
        transform 0.3s var(--spring),
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px) scale(1.02);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0;
    transform: translateX(-50%) scale(0);
    transition: all 0.3s var(--spring);
}

.nav-link.active::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.nav-cta,
.spring-button,
.icon-action,
.topic-chip,
.social-link {
    --hover-scale: 1;
    --hover-lift: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    cursor: pointer;
}

.nav-cta {
    min-height: 48px;
    padding: 0 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 18px;
    background: rgba(8, 28, 73, 0.2);
}

.nav-cta svg,
.spring-button svg,
.text-link svg,
.resource-link svg {
    width: 17px;
    height: 17px;
    transition: transform 0.3s var(--spring);
}

.nav-cta:hover svg,
.spring-button:hover svg,
.text-link:hover svg,
.resource-link:hover svg {
    transform: translateX(3px) scale(1.08);
}

.menu-toggle {
    display: none;
}

/* Page composition */
.page-shell {
    width: min(calc(100% - 40px), var(--page-width));
    margin: 0 auto;
}

.page-stage {
    min-height: calc(100dvh - 92px);
}

.page-section {
    scroll-margin-top: 112px;
}

.hero-section {
    padding-top: clamp(42px, 6vw, 76px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.55fr);
    gap: 22px;
    align-items: stretch;
}

.profile-card,
.focus-card,
.stat-card,
.article-card,
.resource-card,
.about-section {
    border-radius: 32px;
}

.profile-card {
    display: flex;
    flex-direction: column;
    min-height: 530px;
    padding: clamp(28px, 4vw, 48px);
}

.profile-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 650;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #51c995;
    box-shadow: 0 0 0 5px rgba(81, 201, 149, 0.14);
}

.profile-avatar {
    position: relative;
    display: grid;
    width: 90px;
    height: 90px;
    margin: 54px 0 28px;
    place-items: center;
    color: #fff;
    font-family: "Songti SC", "STSong", serif;
    font-size: 37px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.52), transparent 24%),
        transparent;
    border-radius: 31px;
    box-shadow: 0 18px 40px rgba(15, 55, 128, 0.25);
}

.profile-avatar::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(43, 103, 213, 0.18);
    border-radius: 38px;
    transform: rotate(7deg);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.profile-card h1 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.profile-role {
    margin: 14px 0 20px;
    color: #a9d6ff;
    font-size: 15px;
    font-weight: 700;
}

.profile-intro {
    max-width: 34em;
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.9;
}

.profile-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 30px;
}

.spring-button {
    min-height: 50px;
    padding: 0 20px;
    color: #d8ebff;
    font-size: 13px;
    font-weight: 750;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
}

.primary-action {
    color: #fff;
    background: rgba(5, 23, 62, 0.22);
}

.icon-action {
    width: 50px;
    height: 50px;
    color: #bce5ff;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
}

.icon-action svg {
    width: 20px;
    height: 20px;
}

.hero-dashboard {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 22px;
}

.focus-card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: clamp(30px, 4vw, 52px);
}

.focus-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.focus-heading h2,
.section-heading h2,
.about-copy h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.focus-heading h2 {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.28;
}

.focus-index,
.about-number {
    color: rgba(201, 227, 255, 0.34);
    font-family: Georgia, serif;
    font-size: 62px;
    font-style: italic;
    line-height: 1;
}

.focus-card > p {
    max-width: 48em;
    margin: 28px 0 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

.focus-track {
    height: 5px;
    margin-top: auto;
    overflow: hidden;
    background: rgba(38, 83, 156, 0.11);
    border-radius: 999px;
}

.focus-track span {
    display: block;
    width: 68%;
    height: 100%;
    background: linear-gradient(90deg, #2d69dc, #73d8ec);
    border-radius: inherit;
}

.focus-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    color: var(--ink-faint);
    font-size: 11px;
}

.focus-meta strong {
    color: #a9d8ff;
    letter-spacing: 0.08em;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.stat-card {
    display: grid;
    min-height: 176px;
    padding: 28px 32px;
    align-content: end;
}

.stat-number {
    font-family: Georgia, serif;
    font-size: 50px;
    line-height: 1;
}

.stat-label {
    margin-top: 10px;
    font-weight: 750;
}

.stat-card small {
    margin-top: 5px;
    color: var(--ink-faint);
    font-size: 11px;
}

.topic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 0;
}

.topic-label {
    margin-right: 6px;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.topic-chip {
    min-height: 42px;
    padding: 0 17px;
    color: #d4eaff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}

.content-block {
    padding-top: var(--section-gap);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 0.55fr);
    gap: 30px;
    align-items: end;
    margin-bottom: 32px;
}

.section-heading h2 {
    font-size: clamp(42px, 5vw, 64px);
}

.section-heading h1 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.section-heading > p {
    margin: 0 0 8px;
    color: var(--ink-soft);
    line-height: 1.8;
}

/* Writing layout */
.article-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(310px, 0.7fr);
    gap: 22px;
}

.article-featured {
    display: grid;
    grid-template-rows: minmax(230px, 1fr) auto;
    min-height: 590px;
    overflow: hidden;
    cursor: pointer;
}

.article-visual {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 70% 30%, rgba(107, 220, 241, 0.55), transparent 23%),
        linear-gradient(145deg, rgba(18, 59, 136, 0.94), rgba(35, 93, 185, 0.82));
}

.article-cover img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s var(--soft-ease), filter 0.45s ease;
}

.article-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 17, 49, 0.04), rgba(3, 17, 49, 0.42));
    pointer-events: none;
}

.article-featured:hover .article-cover img {
    transform: scale(1.025);
    filter: saturate(1.05) contrast(1.03);
}

.article-number {
    position: absolute;
    top: 28px;
    left: 32px;
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    opacity: 0.7;
}

.article-glyph {
    position: absolute;
    right: 8%;
    bottom: -6%;
    font-family: Georgia, serif;
    font-size: clamp(108px, 15vw, 210px);
    font-style: italic;
    letter-spacing: -0.12em;
    opacity: 0.16;
    transform: rotate(-7deg);
    transition: transform 0.6s var(--spring), opacity 0.4s ease;
}

.article-featured:hover .article-glyph {
    opacity: 0.24;
    transform: rotate(-3deg) scale(1.04);
}

.visual-orbit {
    position: absolute;
    right: 14%;
    top: 17%;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.035), 0 0 0 58px rgba(255, 255, 255, 0.025);
}

.article-copy {
    position: relative;
    padding: 30px 34px 34px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.article-meta span {
    color: #8fd6ff;
}

.article-copy h2,
.article-copy h3 {
    margin: 18px 0 12px;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.35;
}

.article-copy > p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #a9ddff;
    font-size: 13px;
    font-weight: 750;
}

.article-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.article-compact {
    display: grid;
    grid-template-columns: 74px 1fr;
    min-height: 0;
    cursor: pointer;
}

.compact-index {
    display: grid;
    place-items: center;
    color: rgba(200, 226, 255, 0.42);
    font-family: Georgia, serif;
    font-size: 32px;
    font-style: italic;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.article-compact .article-copy {
    display: flex;
    flex-direction: column;
    padding: 28px;
}

.article-compact .article-copy h2,
.article-compact .article-copy h3 {
    font-size: clamp(23px, 2.2vw, 31px);
}

.article-compact .text-link {
    align-self: flex-end;
    margin-top: auto;
}

/* Resource library */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.resource-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
    min-height: 220px;
    padding: 22px;
}

.resource-card.is-extra:not(.is-visible) {
    display: none;
}

.resource-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #d7edff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.04em;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.58);
}

.resource-copy {
    min-width: 0;
}

.resource-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.resource-heading h3 {
    margin: 2px 0 0;
    overflow: hidden;
    font-family: "Songti SC", "STSong", serif;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-order {
    color: rgba(208, 229, 255, 0.42);
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
}

.resource-description {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.6;
}

.resource-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.resource-details span {
    padding: 4px 8px;
    color: #c9def7;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.resource-link {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: end;
    padding-top: 14px;
    color: #b8e1ff;
    font-size: 12px;
    font-weight: 750;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.resource-link[aria-disabled="true"] {
    color: var(--ink-faint);
    cursor: not-allowed;
}

.section-action {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.resource-toggle {
    min-width: 220px;
}

.resource-toggle.is-expanded svg {
    transform: rotate(180deg);
}

/* About */
.about-section {
    display: grid;
    grid-template-columns: 100px minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 34px;
    align-items: start;
    margin-top: var(--section-gap);
    padding: clamp(32px, 5vw, 58px);
}

.about-copy h2 {
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.4;
}

.about-note p {
    margin: 4px 0 26px;
    color: var(--ink-soft);
    line-height: 1.9;
}

.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.social-link {
    min-height: 40px;
    padding: 0 15px;
    color: #d4eaff;
    font-size: 11px;
    font-weight: 750;
    border-radius: 999px;
}

.social-link[aria-disabled="true"] {
    opacity: 0.56;
    cursor: not-allowed;
}

/* MapleBlog-inspired fixed liquid footer dock. */
.site-dock {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 120;
    width: min(calc(100% - 40px), var(--page-width));
    padding: 11px 18px;
    color: var(--ink-soft);
    border-radius: 28px;
    transform: translate3d(-50%, 0, 0);
    transition:
        transform 0.3s var(--spring),
        padding 0.38s var(--soft-ease),
        box-shadow 0.3s ease;
}

.site-dock.liquid-surface {
    position: fixed;
    transform: translate3d(calc(-50% + var(--magnet-x, 0px)), var(--magnet-y, 0px), 0);
}

.dock-collapsed,
.dock-expanded,
.dock-copyright,
.dock-actions,
.dock-menu,
.dock-stats {
    display: flex;
    align-items: center;
}

.dock-collapsed {
    min-height: 42px;
    justify-content: space-between;
    gap: 20px;
}

.dock-copyright {
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.dock-copyright-extra {
    color: var(--ink-faint);
    font-size: 9px;
    letter-spacing: 0.18em;
}

.dock-actions,
.dock-menu {
    gap: 4px;
}

.dock-action,
.dock-menu a {
    min-height: 36px;
    padding: 0 13px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.3s var(--spring),
        opacity 0.25s ease;
}

.dock-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dock-icon-action {
    width: 36px;
    padding-inline: 0;
    justify-content: center;
}

.dock-action-logo {
    display: block;
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s var(--spring);
}

.dock-icon-action:hover .dock-action-logo {
    transform: scale(1.08);
}

.dock-action:hover,
.dock-menu a:hover,
.dock-menu a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px) scale(1.04);
}

.dock-action[aria-disabled="true"] {
    opacity: 0.58;
}

.dock-top {
    width: 0;
    padding-inline: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.dock-top.is-visible {
    width: 70px;
    padding-inline: 13px;
    opacity: 1;
    pointer-events: auto;
}

.dock-top svg {
    width: 15px;
    height: 15px;
}

.dock-expanded {
    max-height: 0;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border-top: 1px solid transparent;
    opacity: 0;
    transform: translateY(8px);
    transition:
        max-height 0.38s var(--soft-ease),
        padding 0.38s var(--soft-ease),
        opacity 0.28s ease,
        transform 0.38s var(--soft-ease),
        border-color 0.28s ease;
}

.site-dock.is-expanded {
    padding: 13px 18px 15px;
}

.site-dock.is-expanded .dock-expanded {
    max-height: 82px;
    padding-top: 10px;
    border-top-color: rgba(255, 255, 255, 0.13);
    opacity: 1;
    transform: translateY(0);
}

.dock-stats {
    gap: 9px;
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.dock-stats i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
}

/* Article index and migrated article pages */
.articles-index-page {
    padding: clamp(42px, 6vw, 76px) 0 clamp(80px, 10vw, 130px);
}

.articles-intro {
    padding: 8px 0 36px;
}

.articles-intro .section-heading {
    margin-bottom: 0;
}

.article-card {
    color: inherit;
}

.container {
    width: min(calc(100% - 32px), 920px);
    margin: 0 auto;
    padding: 34px 0;
}

.article-container {
    position: relative;
    isolation: isolate;
}

.article-body {
    padding-bottom: 16px;
}

/* Long-form pages keep the dock in the document flow so it never covers text or images. */
.article-body .site-dock,
.article-body .site-dock.liquid-surface {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(calc(100% - 40px), var(--page-width));
    margin: 24px auto 0;
    transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
}

.article-page {
    padding: clamp(34px, 5vw, 68px) 0 80px;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0 0 18px 8px;
    color: #cce6ff;
    font-size: 12px;
    font-weight: 750;
    transition: color 0.25s ease, transform 0.3s var(--spring);
}

.article-back svg {
    width: 17px;
    height: 17px;
    transition: transform 0.3s var(--spring);
}

.article-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.article-back:hover svg {
    transform: translateX(-3px);
}

.article-detail {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px);
    border-radius: 38px;
}

.article-detail-header {
    max-width: 790px;
    margin: 0 auto clamp(38px, 6vw, 68px);
    padding-bottom: clamp(30px, 4vw, 46px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.article-detail-header h1 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(38px, 6vw, 66px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.18;
    text-wrap: balance;
}

.article-subtitle {
    margin: 16px 0 0;
    color: #a9d6ff;
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 700;
}

.article-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 24px;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.article-detail-meta span:first-child {
    color: #a9ddff;
}

.article-lead {
    max-width: 62ch;
    margin: 26px 0 0;
    color: var(--ink-soft);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.85;
}

.article-detail .article-content {
    max-width: 790px;
    margin: 0 auto;
    color: #d8e4f4;
    font-size: 16px;
    line-height: 1.95;
}

.article-detail .article-content > p {
    margin: 0 0 24px;
}

.article-detail .article-content h2 {
    margin: 56px 0 18px;
    color: #f2f7ff;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.article-callout {
    margin: 0 0 34px;
    padding: 20px 22px;
    color: #d8e9fb;
    border: 1px solid rgba(137, 214, 255, 0.22);
    border-radius: 22px;
    background: rgba(8, 31, 78, 0.34);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
}

.article-callout strong {
    display: block;
    margin-bottom: 6px;
    color: #bce9ff;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.article-callout p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.article-callout-warning {
    border-color: rgba(240, 199, 138, 0.28);
    background: rgba(80, 48, 12, 0.24);
}

.article-callout-warning strong {
    color: #f7d9a7;
}

.article-figure {
    margin: 34px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(2, 13, 42, 0.34);
    box-shadow: 0 18px 46px rgba(0, 8, 30, 0.22);
}

.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: rgba(244, 248, 255, 0.95);
}

.article-figure figcaption {
    padding: 12px 16px 14px;
    color: var(--ink-faint);
    font-size: 11px;
    line-height: 1.55;
}

.article-figure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 34px 0;
}

.article-figure-grid .article-figure {
    margin: 0;
}

.article-figure-grid .article-figure img {
    height: 360px;
}

.article-content code,
.code-block code {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.article-content :not(pre) > code {
    padding: 0.16em 0.38em;
    color: #bce9ff;
    border-radius: 6px;
    background: rgba(3, 17, 49, 0.42);
}

.code-block {
    margin: 20px 0 28px;
    padding: 18px 20px;
    color: #c9ecff;
    border: 1px solid rgba(129, 227, 244, 0.16);
    border-radius: 16px;
    background: rgba(2, 12, 38, 0.55);
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.article-steps {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: article-step;
}

.article-steps > li {
    position: relative;
    padding: 12px 0 34px 58px;
    counter-increment: article-step;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.article-steps > li::before {
    content: counter(article-step, decimal-leading-zero);
    position: absolute;
    top: 21px;
    left: 0;
    color: rgba(168, 219, 255, 0.55);
    font-family: Georgia, serif;
    font-size: 22px;
    font-style: italic;
}

.article-steps > li > h2 {
    margin-top: 6px;
}

.article-source {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    margin-top: 34px;
    padding: 0 17px;
    color: #d6edff;
    font-size: 12px;
    font-weight: 750;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    transition: color 0.25s ease, background 0.25s ease, transform 0.3s var(--spring);
}

.article-source svg {
    width: 16px;
    height: 16px;
}

.article-source:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    transform: translateY(-2px) scale(1.01);
}

.article-content ul {
    padding-left: 1.4em;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content pre,
.code-block {
    max-width: 100%;
    overflow-x: auto;
}

.back-link {
    border-radius: 18px !important;
}

/* Reveal and focus */
.reveal-card {
    opacity: 0;
    translate: 0 20px;
    transition:
        opacity 0.58s var(--soft-ease),
        translate 0.64s var(--soft-ease);
}

.reveal-card.is-visible {
    opacity: 1;
    translate: 0 0;
    transition-delay: var(--entrance-delay, 0ms);
}

/* The existing opening scene holds the first viewport until it clears. */
body.intro-running .reveal-card.is-visible {
    opacity: 0;
    translate: 0 20px;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 1040px) {
    .topbar {
        grid-template-columns: auto 1fr auto;
    }

    .brand-link {
        min-width: 150px;
    }

    .brand-copy small {
        display: none;
    }

    .nav-link {
        min-width: 58px;
        padding-inline: 9px;
    }

    .hero-grid {
        grid-template-columns: minmax(290px, 0.85fr) minmax(0, 1.15fr);
    }

    .resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    html {
        scroll-padding-top: 92px;
    }

    .site-header {
        padding: 12px 12px 0;
    }

    .topbar {
        min-height: 62px;
        padding: 7px 8px 7px 12px;
        border-radius: 24px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .brand-link {
        min-width: 0;
    }

    .brand-copy strong {
        font-size: 16px;
    }

    .menu-toggle {
        position: relative;
        z-index: 6;
        display: grid;
        grid-column: 3;
        width: 46px;
        height: 46px;
        padding: 0;
        place-content: center;
        gap: 6px;
        color: var(--ink);
        border: 0;
        border-radius: 16px;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 19px;
        height: 1.5px;
        background: currentColor;
        transition: transform 0.3s var(--spring);
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(3.75px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-3.75px) rotate(-45deg);
    }

    .topbar.liquid-surface > .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        display: grid;
        gap: 5px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 24px;
        background: rgba(5, 20, 58, 0.48);
        box-shadow: 0 24px 60px rgba(0, 8, 30, 0.34);
        backdrop-filter: blur(18px) saturate(1.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top;
        transition: all 0.3s var(--spring);
    }

    .topbar.liquid-surface > .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .nav-link {
        min-height: 46px;
    }

    .nav-cta {
        display: none;
    }

    .page-shell {
        width: min(calc(100% - 24px), var(--page-width));
    }

    .hero-section {
        padding-top: 28px;
    }

    .hero-grid,
    .article-showcase {
        grid-template-columns: 1fr;
    }

    .profile-card {
        min-height: 510px;
    }

    .focus-card {
        min-height: 310px;
    }

    .article-featured {
        min-height: 540px;
    }

    .article-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 1fr;
    }

    .article-compact {
        grid-template-columns: 60px 1fr;
        min-height: 280px;
    }

    .article-compact .article-meta time {
        display: none;
    }

    .article-detail {
        border-radius: 30px;
    }

    .article-figure-grid .article-figure img {
        height: 300px;
    }

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

    .about-section {
        grid-template-columns: 70px 1fr;
    }

    .about-note {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    :root {
        --section-gap: 84px;
    }

    body {
        background-attachment: scroll;
    }

    .intro-title {
        font-size: 54px;
    }

    .intro-orbit-one {
        width: 110vw;
        height: 110vw;
    }

    .intro-orbit-two {
        width: 150vw;
        height: 150vw;
    }

    .brand-copy {
        display: none;
    }

    .topbar {
        grid-template-columns: auto 1fr auto;
    }

    .profile-card,
    .focus-card,
    .stat-card,
    .article-card,
    .resource-card,
    .about-section {
        border-radius: 26px;
    }

    .profile-card {
        min-height: 500px;
        padding: 28px;
    }

    .profile-avatar {
        margin-top: 40px;
    }

    .focus-card {
        min-height: 340px;
        padding: 28px;
    }

    .focus-index {
        font-size: 44px;
    }

    .stat-grid {
        gap: 12px;
    }

    .stat-card {
        min-height: 154px;
        padding: 22px;
    }

    .stat-number {
        font-size: 40px;
    }

    .topic-row {
        gap: 8px;
    }

    .topic-label {
        width: 100%;
        margin-bottom: 2px;
    }

    .topic-chip {
        min-height: 38px;
        padding-inline: 14px;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    .section-heading h2 {
        font-size: 42px;
    }

    .section-heading h1 {
        font-size: 42px;
    }

    .section-heading > p {
        font-size: 13px;
    }

    .article-featured {
        min-height: 520px;
        grid-template-rows: 240px auto;
    }

    .article-copy {
        padding: 25px;
    }

    .article-stack {
        grid-template-columns: 1fr;
    }

    .article-compact {
        min-height: 238px;
    }

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

    .resource-card {
        min-height: 190px;
    }

    .about-section {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 30px;
    }

    .about-number {
        font-size: 46px;
    }

    .about-note {
        grid-column: 1;
    }

    .site-dock {
        bottom: 10px;
        width: calc(100% - 24px);
        padding: 8px 10px 8px 14px;
        border-radius: 23px;
    }

    .dock-collapsed {
        min-height: 44px;
        gap: 8px;
    }

    .dock-copyright {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .dock-copyright-extra,
    .dock-actions > a,
    .dock-expanded {
        display: none;
    }

    .dock-top,
    .dock-top.is-visible {
        width: 58px;
        padding-inline: 10px;
        opacity: 1;
        pointer-events: auto;
    }

    .container {
        width: calc(100% - 20px);
        padding-top: 16px;
    }

    .article-container {
        margin: 12px auto !important;
        padding: 24px !important;
        border-radius: 24px !important;
    }

    .article-detail-header h1 {
        font-size: 34px;
    }

    .article-detail .article-content {
        font-size: 15px;
    }

    .article-figure,
    .article-figure-grid {
        margin-block: 24px;
    }

    .article-figure-grid {
        grid-template-columns: 1fr;
    }

    .article-figure-grid .article-figure img {
        height: auto;
        max-height: 560px;
    }

    .article-steps > li {
        padding-left: 42px;
    }

    .article-steps > li::before {
        font-size: 18px;
    }
}

@media (hover: none), (pointer: coarse) {
    .cursor-aurora {
        display: none;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .intro-overlay {
        display: none;
    }

    .reveal-card {
        opacity: 1;
        translate: none;
    }
}

/* Homepage modules inspired by MapleBlog's information hierarchy. */
.home-page {
    padding-bottom: 64px;
}

.profile-action-logo {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.home-activity-card {
    min-height: 356px;
}

.activity-calendar {
    margin-top: auto;
    padding-top: 28px;
    overflow: hidden;
}

.activity-months {
    display: flex;
    justify-content: space-between;
    margin: 0 2px 8px;
    color: var(--ink-faint);
    font-size: 9px;
}

.activity-grid {
    display: grid;
    grid-template-rows: repeat(7, 8px);
    grid-auto-flow: column;
    grid-auto-columns: 8px;
    gap: 3px;
    width: 100%;
    min-height: 74px;
    overflow: hidden;
}

.activity-cell {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(188, 218, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.activity-cell.is-spacer {
    background: transparent;
    box-shadow: none;
}

.activity-level-1 { background: rgba(86, 157, 235, 0.48); }
.activity-level-2 { background: rgba(91, 198, 237, 0.74); }
.activity-level-3 {
    background: #88e8f6;
    box-shadow: 0 0 12px rgba(129, 227, 244, 0.58);
}

.activity-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--ink-faint);
    font-size: 9px;
}

.activity-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(188, 218, 255, 0.1);
}

.activity-legend i:nth-of-type(2) { background: rgba(91, 198, 237, 0.5); }
.activity-legend i:nth-of-type(3) { background: #88e8f6; }

.home-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 22px;
}

.home-panel,
.home-message-card {
    border-radius: 32px;
}

.home-panel {
    min-height: 430px;
    padding: clamp(28px, 4vw, 42px);
}

.home-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.home-panel-heading h3,
.home-message-card h3 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 600;
    line-height: 1.2;
}

.home-panel-heading > span {
    color: rgba(201, 227, 255, 0.38);
    font-family: Georgia, serif;
    font-size: 25px;
    font-style: italic;
}

.recommendation-list {
    display: grid;
}

.recommendation-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 82px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.24s ease, transform 0.32s var(--spring), background 0.24s ease;
}

.recommendation-list a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.035);
    transform: translateX(4px);
}

.recommendation-list a > span {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.recommendation-list small {
    color: #8fd6ff;
    font-size: 9px;
    letter-spacing: 0.1em;
}

.recommendation-list time {
    color: var(--ink-faint);
    font-family: Georgia, serif;
    font-size: 12px;
}

.home-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #b8e1ff;
    font-size: 12px;
    font-weight: 750;
}

.home-panel-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--spring);
}

.home-panel-link:hover svg {
    transform: translateX(4px);
}

.update-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.update-list li {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    min-height: 92px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.update-list time {
    color: #8fd6ff;
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
}

.update-list strong {
    font-size: 13px;
}

.update-list p {
    margin: 8px 0 0;
    color: var(--ink-faint);
    font-size: 11px;
    line-height: 1.65;
}

.home-message-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    min-height: 220px;
    padding: clamp(30px, 5vw, 52px);
}

.home-message-card > div > p:last-child {
    max-width: 58em;
    margin: 18px 0 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

/* Full-screen article image viewer. */
.article-content .article-figure img.is-viewable-image {
    cursor: zoom-in;
    transition: filter 0.25s ease, transform 0.35s var(--spring);
}

.article-content .article-figure img.is-viewable-image:hover {
    filter: brightness(1.035) saturate(1.025);
    transform: scale(1.004);
}

.article-content .article-figure img.is-viewable-image:focus-visible {
    outline: 3px solid rgba(129, 227, 244, 0.72);
    outline-offset: 4px;
}

.image-viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    border: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(38, 91, 180, 0.22), transparent 42%),
        rgba(2, 10, 33, 0.72);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.22s ease, transform 0.32s var(--soft-ease);
}

.image-viewer[open] {
    display: block;
}

.image-viewer.is-open {
    opacity: 1;
    transform: scale(1);
}

.image-viewer::backdrop {
    background: rgba(1, 7, 24, 0.72);
    backdrop-filter: blur(18px) saturate(0.88);
    -webkit-backdrop-filter: blur(18px) saturate(0.88);
}

.image-viewer-stage {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.image-viewer-stage.is-zoomed {
    cursor: grab;
}

.image-viewer-stage.is-zoomed:active {
    cursor: grabbing;
}

.image-viewer-image {
    display: block;
    max-width: calc(100vw - 72px);
    max-height: calc(100dvh - 144px);
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
    filter: drop-shadow(0 26px 60px rgba(0, 4, 22, 0.46));
}

.image-viewer .image-viewer-toolbar.liquid-surface {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px;
    border-radius: 22px;
    transform: translateX(-50%);
}

.image-viewer-control,
.image-viewer-scale,
.image-viewer-close {
    display: grid;
    place-items: center;
    color: #e9f5ff;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.image-viewer-control {
    width: 42px;
    height: 42px;
    border-radius: 15px;
}

.image-viewer-control svg,
.image-viewer-close svg {
    width: 19px;
    height: 19px;
}

.image-viewer-scale {
    min-width: 72px;
    min-height: 42px;
    padding: 0 12px;
    color: #bfe8ff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 15px;
}

.image-viewer-control:hover,
.image-viewer-scale:hover,
.image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.image-viewer-control:disabled {
    opacity: 0.35;
    cursor: default;
}

.image-viewer .image-viewer-close.liquid-surface {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 7;
    width: 48px;
    height: 48px;
    border-radius: 18px;
}

.image-viewer-caption {
    position: absolute;
    left: 26px;
    bottom: 31px;
    z-index: 5;
    max-width: min(34vw, 430px);
    margin: 0;
    color: rgba(224, 240, 255, 0.78);
    font-size: 11px;
    line-height: 1.6;
    pointer-events: none;
}

@media (max-width: 820px) {
    .home-lower-grid {
        grid-template-columns: 1fr;
    }

    .home-message-card {
        grid-column: 1;
    }

    .activity-grid {
        grid-auto-columns: 7px;
        gap: 2px;
    }

    .activity-cell {
        width: 7px;
        height: 7px;
    }

    .image-viewer-caption {
        left: 18px;
        bottom: 92px;
        max-width: calc(100vw - 36px);
    }
}

@media (max-width: 560px) {
    .home-page {
        padding-bottom: 34px;
    }

    .profile-actions {
        flex-wrap: wrap;
    }

    .home-activity-card {
        min-height: 390px;
    }

    .activity-grid {
        grid-template-rows: repeat(7, 5px);
        grid-auto-columns: 5px;
        gap: 2px;
        min-height: 47px;
    }

    .activity-cell {
        width: 5px;
        height: 5px;
        border-radius: 1.5px;
    }

    .home-panel,
    .home-message-card {
        border-radius: 26px;
    }

    .home-panel {
        min-height: 0;
        padding: 28px;
    }

    .home-message-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px;
    }

    .home-message-card .spring-button {
        justify-self: start;
    }

    .recommendation-list a {
        gap: 10px;
    }

    .image-viewer-image {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 164px);
    }

    .image-viewer .image-viewer-toolbar.liquid-surface {
        bottom: 16px;
    }

    .image-viewer .image-viewer-close.liquid-surface {
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
    }

    .image-viewer-caption {
        bottom: 82px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-content .article-figure img.is-viewable-image,
    .image-viewer,
    .image-viewer-image,
    .recommendation-list a {
        transition: none !important;
    }
}

/* Entrance choreography: quiet movement on top of the existing glass system. */
.site-header {
    animation: navigation-arrive 0.56s 0.04s both var(--soft-ease);
}

.site-dock {
    animation: dock-arrive 0.62s 0.34s both var(--soft-ease);
}

body.intro-running .site-header,
body.intro-running .site-dock {
    animation-play-state: paused;
}

@keyframes navigation-arrive {
    from { opacity: 0; translate: 0 -16px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes dock-arrive {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

.profile-card.reveal-card > .profile-topline,
.profile-card.reveal-card > .profile-avatar,
.profile-card.reveal-card > .eyebrow,
.profile-card.reveal-card > h1,
.profile-card.reveal-card > .profile-role,
.profile-card.reveal-card > .profile-intro,
.profile-card.reveal-card > .profile-actions {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.45s var(--soft-ease), translate 0.52s var(--soft-ease);
}

.profile-card.is-visible > .profile-topline,
.profile-card.is-visible > .profile-avatar,
.profile-card.is-visible > .eyebrow,
.profile-card.is-visible > h1,
.profile-card.is-visible > .profile-role,
.profile-card.is-visible > .profile-intro,
.profile-card.is-visible > .profile-actions {
    opacity: 1;
    translate: 0 0;
}

body.intro-running .profile-card.is-visible > .profile-topline,
body.intro-running .profile-card.is-visible > .profile-avatar,
body.intro-running .profile-card.is-visible > .eyebrow,
body.intro-running .profile-card.is-visible > h1,
body.intro-running .profile-card.is-visible > .profile-role,
body.intro-running .profile-card.is-visible > .profile-intro,
body.intro-running .profile-card.is-visible > .profile-actions {
    opacity: 0;
    translate: 0 10px;
}

.profile-card.is-visible > .profile-topline { transition-delay: 0.08s; }
.profile-card.is-visible > .profile-avatar { transition-delay: 0.15s; }
.profile-card.is-visible > .eyebrow { transition-delay: 0.21s; }
.profile-card.is-visible > h1 { transition-delay: 0.26s; }
.profile-card.is-visible > .profile-role { transition-delay: 0.31s; }
.profile-card.is-visible > .profile-intro { transition-delay: 0.36s; }
.profile-card.is-visible > .profile-actions { transition-delay: 0.42s; }

.topic-row.reveal-card .topic-chip {
    opacity: 0;
    translate: 0 9px;
    transition: opacity 0.42s var(--soft-ease), translate 0.5s var(--soft-ease);
}

.topic-row.is-visible .topic-chip {
    opacity: 1;
    translate: 0 0;
}

.topic-row.is-visible .topic-chip:nth-of-type(1) { transition-delay: 0.05s; }
.topic-row.is-visible .topic-chip:nth-of-type(2) { transition-delay: 0.12s; }
.topic-row.is-visible .topic-chip:nth-of-type(3) { transition-delay: 0.19s; }
.topic-row.is-visible .topic-chip:nth-of-type(4) { transition-delay: 0.26s; }
.topic-row.is-visible .topic-chip:nth-of-type(5) { transition-delay: 0.33s; }

.home-activity-card.is-visible .activity-level-1,
.home-activity-card.is-visible .activity-level-2,
.home-activity-card.is-visible .activity-level-3 {
    animation: activity-ignite 0.5s both var(--soft-ease);
}

.home-activity-card.is-visible .activity-level-1 { animation-delay: 0.46s; }
.home-activity-card.is-visible .activity-level-2 { animation-delay: 0.58s; }
.home-activity-card.is-visible .activity-level-3 { animation-delay: 0.7s; }

body.intro-running .home-activity-card.is-visible .activity-cell {
    animation-play-state: paused;
}

@keyframes activity-ignite {
    from { opacity: 0.15; }
    to { opacity: 1; }
}

@media (max-width: 560px) {
    .reveal-card,
    body.intro-running .reveal-card.is-visible {
        translate: 0 12px;
    }

    .reveal-card.is-visible {
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-dock,
    .home-activity-card.is-visible .activity-cell {
        animation: none !important;
    }

    .reveal-card,
    .reveal-card.is-visible,
    .profile-card.reveal-card > *,
    .topic-row.reveal-card .topic-chip {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* ===================================================================
   Homepage revamp — video background, night radio, exploration modules.
   Appended to css/style.css. Everything here is scoped to the homepage
   except the layout adjustments for nav-cta / topic-chip / profile-actions,
   which keep those existing components usable in tighter containers.
   =================================================================== */

/* ---------- Homepage video background layer ---------- */

.site-video-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #04122e url("../images/video/forest-still.jpg") center / cover no-repeat;
}

.site-video-layer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.85s var(--soft-ease);
}

.site-video-layer video.is-ready {
    opacity: 0.92;
}

/* Readability scrim. Deliberately uneven: darker on the left where the
   intro text sits, kept clear in the middle so the light beam survives. */
.site-video-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(3, 13, 36, 0.62) 0%, rgba(3, 13, 36, 0.3) 38%, rgba(3, 13, 36, 0.08) 62%, rgba(3, 13, 36, 0.3) 100%),
        linear-gradient(180deg, rgba(3, 13, 36, 0.36) 0%, rgba(3, 13, 36, 0.08) 34%, rgba(3, 13, 36, 0.52) 100%);
}

/* The homepage owns its background now, so the shared page background
   must stand down — otherwise it paints over the video. */
body.video-bg {
    background-color: #051430;
    background-image: none;
}

/* Keep just a whisper of the original page veil for depth. */
body.video-bg::before {
    background: linear-gradient(180deg, rgba(2, 11, 40, 0.12), rgba(2, 10, 38, 0.3));
}

/* ---------- Reuse the existing glass system in tighter containers ---------- */

.nav-cta .nav-cta-label {
    display: inline;
}

.profile-actions .spring-button {
    padding-inline: 16px;
    white-space: nowrap;
}

.topic-chip.is-pending {
    opacity: 0.44;
    cursor: not-allowed;
}

/* ---------- Homepage module rhythm ---------- */

.home-page {
    padding-bottom: 72px;
}

.home-module {
    padding-top: clamp(56px, 6.5vw, 96px);
}

.module-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.module-heading h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.module-heading .eyebrow {
    margin: 0 0 6px;
}

.module-index {
    color: rgba(201, 227, 255, 0.34);
    font-family: Georgia, serif;
    font-size: 27px;
    font-style: italic;
    line-height: 1;
}

.module-sub {
    max-width: 46em;
    margin: 0 0 20px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

/* ---------- Hero: intro card + night radio ---------- */

.home-hero {
    padding-top: clamp(34px, 5vw, 62px);
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 22px;
    align-items: stretch;
}

.profile-card.is-compact {
    min-height: 0;
    padding: clamp(28px, 3.4vw, 44px);
}

.profile-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-card.is-compact .profile-avatar {
    margin: 0;
    width: 66px;
    height: 66px;
    font-size: 27px;
    border-radius: 22px;
}

.profile-card.is-compact .profile-avatar::after {
    inset: -7px;
    border-radius: 27px;
}

.profile-heading-text {
    min-width: 0;
}

.profile-card.is-compact h1 {
    font-size: clamp(34px, 4vw, 50px);
}

.profile-card.is-compact .profile-role {
    margin: 8px 0 0;
    font-size: 13px;
}

.profile-card.is-compact .profile-intro {
    margin: 22px 0 0;
    font-size: 13.5px;
    line-height: 1.85;
}

.profile-card.is-compact .profile-actions {
    padding-top: 26px;
}

/* ---------- Night radio ---------- */

.radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.radio-card-body {
    display: grid;
    grid-template-columns: clamp(112px, 14vw, 154px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: center;
    padding: clamp(24px, 3vw, 34px);
}

.radio-cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    background: rgba(4, 20, 50, 0.4);
    box-shadow: 0 16px 40px rgba(0, 8, 30, 0.34);
}

.radio-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-cover-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 26%, rgba(129, 227, 244, 0.18), transparent 62%);
    pointer-events: none;
}

.radio-meta {
    min-width: 0;
}

.radio-meta h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
}

.radio-status {
    margin: 10px 0 0;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.7;
}

.radio-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.radio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 17px;
    color: #d8ebff;
    font-size: 13px;
    font-weight: 750;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.radio-button svg {
    width: 17px;
    height: 17px;
}

.radio-button[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.radio-button[disabled]:hover {
    --hover-lift: 0px;
    --hover-scale: 1;
    box-shadow: none;
    filter: none;
}

.radio-toggle svg {
    transition: transform 0.3s var(--spring);
}

.radio-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.radio-empty-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    color: #f0d6a6;
    font-size: 11.5px;
    line-height: 1.7;
    border: 1px solid rgba(240, 199, 138, 0.26);
    border-radius: 15px;
    background: rgba(80, 48, 12, 0.22);
}

.radio-panel {
    max-height: 0;
    padding: 0 clamp(24px, 3vw, 34px);
    overflow: hidden;
    border-top: 1px solid transparent;
    opacity: 0;
    transition:
        max-height 0.42s var(--soft-ease),
        padding 0.42s var(--soft-ease),
        opacity 0.3s ease,
        border-color 0.3s ease;
}

.radio-card.is-open .radio-panel {
    max-height: 540px;
    padding: 22px clamp(24px, 3vw, 34px) clamp(24px, 3vw, 32px);
    border-top-color: rgba(255, 255, 255, 0.13);
    opacity: 1;
}

.radio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-control {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #e9f5ff;
    border: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
}

.radio-control svg {
    width: 18px;
    height: 18px;
}

.radio-control:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2);
}

.radio-control[disabled] {
    opacity: 0.34;
    cursor: not-allowed;
}

.radio-timeline {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    color: var(--ink-faint);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.radio-progress {
    width: 100%;
    accent-color: var(--cyan);
}

.radio-progress:disabled {
    opacity: 0.4;
}

.radio-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--ink-faint);
    font-size: 10px;
}

.radio-volume svg {
    width: 16px;
    height: 16px;
}

.radio-volume input {
    width: min(190px, 46%);
    accent-color: var(--cyan);
}

.radio-playlist {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    max-height: 168px;
    overflow-y: auto;
}

.radio-playlist li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 4px;
    color: var(--ink-faint);
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.radio-playlist li span:first-child {
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
}

.radio-playlist li strong {
    color: var(--ink-soft);
    font-weight: 700;
}

.radio-playlist li em {
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
}

.radio-playlist li.is-playing strong {
    color: #a9ddff;
}

/* ---------- Module 2: what I am tinkering with ---------- */

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

.tinker-card {
    min-height: 196px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 30px;
}

.tinker-glyph {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #d7edff;
    font-size: 19px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.tinker-card h3 {
    margin: 22px 0 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: 21px;
    font-weight: 650;
}

.tinker-card p {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.75;
}

/* ---------- Module 3: content constellation ---------- */

.constellation-card {
    position: relative;
    min-height: 268px;
    padding: clamp(26px, 3vw, 40px);
    border-radius: 32px;
    overflow: hidden;
}

.constellation-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
}

.constellation-lines line {
    stroke: rgba(129, 227, 244, 0.3);
    stroke-width: 0.18;
    stroke-dasharray: 1.2 1.2;
}

.constellation-field {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px clamp(18px, 3vw, 40px);
    align-items: center;
    min-height: 190px;
    margin-top: 8px;
}

.star-node {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 16px 10px;
    text-align: center;
    border-radius: 22px;
    transition: background 0.28s ease;
}

.star-node:hover {
    background: rgba(255, 255, 255, 0.05);
}

.star-dot {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffffff, var(--cyan) 46%, rgba(43, 118, 198, 0.72) 100%);
    box-shadow: 0 0 14px rgba(129, 227, 244, 0.48);
    transition: transform 0.3s var(--spring), box-shadow 0.3s ease;
}

.star-node:hover .star-dot,
.star-node:focus-visible .star-dot {
    transform: scale(1.38);
    box-shadow: 0 0 24px rgba(129, 227, 244, 0.72);
}

.star-node.is-pending .star-dot {
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.5), rgba(125, 158, 198, 0.42) 100%);
    box-shadow: none;
}

.star-label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.star-node.is-pending .star-label {
    color: var(--ink-faint);
}

.star-meta {
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* ---------- Module 4: random discovery ---------- */

.discover-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 32px;
}

.discover-card h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
}

.discover-card > div > p {
    max-width: 44em;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

.discover-pool {
    display: inline-block;
    margin-top: 16px;
    padding: 5px 12px;
    color: #bfe8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.discover-button.is-swapping span {
    opacity: 0.35;
}

.discover-button span {
    transition: opacity 0.2s ease;
}

/* ---------- Module 5: site activity timeline ---------- */

.timeline-card {
    padding: clamp(26px, 3.4vw, 40px);
    border-radius: 32px;
}

.update-list.is-timeline li:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }
}

@media (max-width: 820px) {
    .home-hero-grid,
    .discover-card,
    .tinker-grid {
        grid-template-columns: 1fr;
    }

    .radio-card-body {
        grid-template-columns: clamp(96px, 24vw, 132px) minmax(0, 1fr);
    }

    .constellation-field {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 20px;
    }

    .discover-card .spring-button {
        justify-self: start;
    }
}

@media (max-width: 560px) {
    .home-module {
        padding-top: 54px;
    }

    .radio-card-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .radio-cover {
        width: min(180px, 54vw);
        margin: 0 auto;
    }

    .radio-meta {
        text-align: center;
    }

    .radio-actions,
    .radio-controls,
    .radio-volume {
        justify-content: center;
    }

    .radio-volume input {
        width: 46%;
    }

    .tinker-card {
        min-height: 0;
        border-radius: 26px;
    }

    .constellation-card,
    .discover-card,
    .timeline-card {
        border-radius: 26px;
    }

    .constellation-field {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .update-list li {
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-video-layer video {
        transition: none;
    }

    .star-dot,
    .radio-toggle svg {
        transition: none;
    }
}

/* ===================================================================
   Round 2 — site-wide video background.
   Every page (homepage, intro, article list, three articles, software,
   plugins, about) shares one identical layer. Layer order, bottom to top:
     .site-video-layer (z -2)  →  .ambient-layer (z -1)  →  content (auto)
   The light blobs must sit ABOVE the video, otherwise the pointer aurora
   and drifting blobs get painted over by an opaque video surface.
   =================================================================== */

.site-video-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #04122e url("../images/video/forest-still.jpg") center / cover no-repeat;
}

.site-video-layer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.85s var(--soft-ease);
}

.site-video-layer video.is-ready {
    opacity: 0.94;
}

/* Readability scrim. Deliberately uneven: darker on the left where the
   intro text sits, kept clear in the middle so the light beam survives. */
.site-video-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(3, 13, 36, 0.6) 0%, rgba(3, 13, 36, 0.3) 38%, rgba(3, 13, 36, 0.08) 62%, rgba(3, 13, 36, 0.28) 100%),
        linear-gradient(180deg, rgba(3, 13, 36, 0.38) 0%, rgba(3, 13, 36, 0.1) 34%, rgba(3, 13, 36, 0.5) 100%);
}

/* Long-form pages move the background behind them while reading, so they
   get extra darkening. Still transparent — never a solid card. */
body.article-page-bg .site-video-scrim {
    background:
        linear-gradient(100deg, rgba(3, 13, 36, 0.74) 0%, rgba(3, 13, 36, 0.44) 40%, rgba(3, 13, 36, 0.3) 66%, rgba(3, 13, 36, 0.46) 100%),
        linear-gradient(180deg, rgba(3, 13, 36, 0.52) 0%, rgba(3, 13, 36, 0.24) 30%, rgba(3, 13, 36, 0.64) 100%);
}

/* Every page now owns its background, so the shared page background
   must stand down — otherwise it paints over the video. */
body.video-bg {
    background-color: #051430;
    background-image: none;
}

/* Keep just a whisper of the original page veil for depth. */
body.video-bg::before {
    background: linear-gradient(180deg, rgba(2, 11, 40, 0.12), rgba(2, 10, 38, 0.3));
}

/* The blobs and aurora belong on top of the video. */
.ambient-layer {
    z-index: -1;
}

/* ---------- The "迷山雾" wordmark (replaces the solid blue square) ---------- */

.brand-link {
    gap: 9px;
    min-width: 148px;
}

.brand-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(129, 227, 244, 0.75);
}

.brand-dot-warm {
    background: var(--warm);
    box-shadow: 0 0 10px rgba(240, 199, 138, 0.6);
}

.brand-title {
    color: #fff;
    font-family: "Songti SC", "STSong", serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 14px rgba(0, 8, 30, 0.55);
}

.profile-card.is-compact .brand-dot {
    display: none;
}

.wordmark {
    color: #fff;
    font-family: "Songti SC", "STSong", serif;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-shadow: 0 2px 16px rgba(0, 8, 30, 0.6);
}

.profile-mark {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: 0.3em;
    color: rgba(129, 227, 244, 0.82);
}

/* ---------- Intro sequence, rebuilt for the forest video ---------- */

.intro-overlay {
    background:
        linear-gradient(180deg, rgba(3, 13, 36, 0.5) 0%, rgba(3, 13, 36, 0.24) 38%, rgba(3, 13, 36, 0.6) 100%);
}

.intro-overlay::after {
    display: none;
}

/* The old concentric rings are gone; the forest carries the scene. */
.intro-orbit {
    display: none;
}

.intro-brand {
    display: grid;
    justify-items: center;
    gap: 0;
}

.intro-title {
    margin: 10px 0 16px;
    font-size: clamp(40px, 7vw, 74px);
    letter-spacing: 0.16em;
    text-shadow: 0 6px 34px rgba(0, 8, 30, 0.5);
}

.intro-kicker {
    color: rgba(213, 240, 255, 0.82);
}

.intro-caption {
    color: rgba(255, 255, 255, 0.7);
}

/* Short, restrained entrance: fade from blurred and slightly low. */
.intro-overlay.is-playing .intro-kicker {
    animation: introFadeRise 0.72s 0.1s var(--soft-ease) forwards;
}

.intro-overlay.is-playing .intro-title {
    animation: introWordmark 0.85s 0.22s var(--soft-ease) forwards;
}

.intro-overlay.is-playing .intro-caption {
    animation: introFadeRise 0.7s 0.4s var(--soft-ease) forwards;
}

@keyframes introFadeRise {
    from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes introWordmark {
    from { opacity: 0; transform: translateY(16px); filter: blur(9px); letter-spacing: 0.26em; }
    to { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-overlay {
        display: none;
    }
}

/* ---------- Reuse the existing glass system in tighter containers ---------- */

.nav-cta .nav-cta-label {
    display: inline;
}

.profile-actions .spring-button {
    padding-inline: 16px;
    white-space: nowrap;
}

.topic-chip.is-pending {
    opacity: 0.44;
    cursor: not-allowed;
}

/* ---------- Homepage module rhythm ---------- */

.home-page {
    padding-bottom: 72px;
}

.home-module {
    padding-top: clamp(56px, 6.5vw, 96px);
}

.module-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.module-heading h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.module-heading .eyebrow {
    margin: 0 0 6px;
}

.module-index {
    color: rgba(201, 227, 255, 0.34);
    font-family: Georgia, serif;
    font-size: 27px;
    font-style: italic;
    line-height: 1;
}

.module-sub {
    max-width: 46em;
    margin: 0 0 20px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

/* ---------- Hero: intro card + night radio ---------- */

.home-hero {
    padding-top: clamp(34px, 5vw, 62px);
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 22px;
    align-items: stretch;
}

.profile-card.is-compact {
    min-height: 0;
    padding: clamp(28px, 3.4vw, 44px);
}

.profile-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-card.is-compact .profile-avatar {
    margin: 0;
    width: 66px;
    height: 66px;
    font-size: 27px;
    border-radius: 22px;
}

.profile-card.is-compact .profile-avatar::after {
    inset: -7px;
    border-radius: 27px;
}

.profile-heading-text {
    min-width: 0;
}

.profile-card.is-compact h1 {
    font-size: clamp(34px, 4vw, 50px);
}

.profile-card.is-compact .profile-role {
    margin: 8px 0 0;
    font-size: 13px;
}

.profile-card.is-compact .profile-intro {
    margin: 22px 0 0;
    font-size: 13.5px;
    line-height: 1.85;
}

.profile-card.is-compact .profile-actions {
    padding-top: 26px;
}

/* ---------- Night radio ---------- */

.radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.radio-card-body {
    display: grid;
    grid-template-columns: clamp(112px, 14vw, 154px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: center;
    padding: clamp(24px, 3vw, 34px);
}

.radio-cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    background: rgba(4, 20, 50, 0.4);
    box-shadow: 0 16px 40px rgba(0, 8, 30, 0.34);
}

.radio-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-cover-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 26%, rgba(129, 227, 244, 0.18), transparent 62%);
    pointer-events: none;
}

.radio-meta {
    min-width: 0;
}

.radio-meta h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
}

.radio-status {
    margin: 10px 0 0;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.7;
}

.radio-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.radio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 17px;
    color: #d8ebff;
    font-size: 13px;
    font-weight: 750;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.radio-button svg {
    width: 17px;
    height: 17px;
}

.radio-button[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.radio-button[disabled]:hover {
    --hover-lift: 0px;
    --hover-scale: 1;
    box-shadow: none;
    filter: none;
}

.radio-toggle svg {
    transition: transform 0.3s var(--spring);
}

.radio-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.radio-empty-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    color: #f0d6a6;
    font-size: 11.5px;
    line-height: 1.7;
    border: 1px solid rgba(240, 199, 138, 0.26);
    border-radius: 15px;
    background: rgba(80, 48, 12, 0.22);
}

.radio-panel {
    max-height: 0;
    padding: 0 clamp(24px, 3vw, 34px);
    overflow: hidden;
    border-top: 1px solid transparent;
    opacity: 0;
    transition:
        max-height 0.42s var(--soft-ease),
        padding 0.42s var(--soft-ease),
        opacity 0.3s ease,
        border-color 0.3s ease;
}

.radio-card.is-open .radio-panel {
    max-height: 540px;
    padding: 22px clamp(24px, 3vw, 34px) clamp(24px, 3vw, 32px);
    border-top-color: rgba(255, 255, 255, 0.13);
    opacity: 1;
}

.radio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-control {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #e9f5ff;
    border: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
}

.radio-control svg {
    width: 18px;
    height: 18px;
}

.radio-control:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2);
}

.radio-control[disabled] {
    opacity: 0.34;
    cursor: not-allowed;
}

.radio-timeline {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    color: var(--ink-faint);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.radio-progress {
    width: 100%;
    accent-color: var(--cyan);
}

.radio-progress:disabled {
    opacity: 0.4;
}

.radio-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--ink-faint);
    font-size: 10px;
}

.radio-volume svg {
    width: 16px;
    height: 16px;
}

.radio-volume input {
    width: min(190px, 46%);
    accent-color: var(--cyan);
}

.radio-playlist {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    max-height: 168px;
    overflow-y: auto;
}

.radio-playlist li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 4px;
    color: var(--ink-faint);
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.radio-playlist li span:first-child {
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
}

.radio-playlist li strong {
    color: var(--ink-soft);
    font-weight: 700;
}

.radio-playlist li em {
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
}

.radio-playlist li.is-playing strong {
    color: #a9ddff;
}

/* ---------- Module 2: what I am tinkering with ---------- */

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

.tinker-card {
    min-height: 196px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 30px;
}

.tinker-glyph {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #d7edff;
    font-size: 19px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.tinker-card h3 {
    margin: 22px 0 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: 21px;
    font-weight: 650;
}

.tinker-card p {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.75;
}

/* ---------- Module 3: content constellation ---------- */

.constellation-card {
    position: relative;
    min-height: 268px;
    padding: clamp(26px, 3vw, 40px);
    border-radius: 32px;
    overflow: hidden;
}

.constellation-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
}

.constellation-lines line {
    stroke: rgba(129, 227, 244, 0.3);
    stroke-width: 0.18;
    stroke-dasharray: 1.2 1.2;
}

.constellation-field {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px clamp(18px, 3vw, 40px);
    align-items: center;
    min-height: 190px;
    margin-top: 8px;
}

.star-node {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 16px 10px;
    text-align: center;
    border-radius: 22px;
    transition: background 0.28s ease;
}

.star-node:hover {
    background: rgba(255, 255, 255, 0.05);
}

.star-dot {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffffff, var(--cyan) 46%, rgba(43, 118, 198, 0.72) 100%);
    box-shadow: 0 0 14px rgba(129, 227, 244, 0.48);
    transition: transform 0.3s var(--spring), box-shadow 0.3s ease;
}

.star-node:hover .star-dot,
.star-node:focus-visible .star-dot {
    transform: scale(1.38);
    box-shadow: 0 0 24px rgba(129, 227, 244, 0.72);
}

.star-node.is-pending .star-dot {
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.5), rgba(125, 158, 198, 0.42) 100%);
    box-shadow: none;
}

.star-label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.star-node.is-pending .star-label {
    color: var(--ink-faint);
}

.star-meta {
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* ---------- Module 4: random discovery ---------- */

.discover-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 32px;
}

.discover-card h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
}

.discover-card > div > p {
    max-width: 44em;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

.discover-pool {
    display: inline-block;
    margin-top: 16px;
    padding: 5px 12px;
    color: #bfe8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.discover-button.is-swapping span {
    opacity: 0.35;
}

.discover-button span {
    transition: opacity 0.2s ease;
}

/* ---------- Module 5: site activity timeline ---------- */

.timeline-card {
    padding: clamp(26px, 3.4vw, 40px);
    border-radius: 32px;
}

.update-list.is-timeline li:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

/* ===================================================================
   Round 2 — homepage as a two-row Bento that fits one desktop screen.
   Top row: profile (wider) + night radio. Bottom row: tinker, star map,
   random pick / site updates stacked in the last column.
   =================================================================== */

.home-page {
    padding-bottom: clamp(16px, 2vh, 28px);
}

.home-bento {
    display: grid;
    gap: clamp(12px, 1.2vw, 18px);
    padding-top: clamp(6px, 1vh, 14px);
}

.bento-module {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: 32px;
}

.bento-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.bento-head h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(19px, 1.6vw, 25px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bento-index {
    color: rgba(201, 227, 255, 0.32);
    font-family: Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1;
}

/* Compact profile card for the Bento cell. */
.profile-card.is-compact {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(18px, 1.6vw, 26px);
}

.profile-card.is-compact h1 {
    margin: 6px 0 0;
    font-size: clamp(28px, 2.5vw, 38px);
    line-height: 1.04;
    letter-spacing: 0.07em;
}

.profile-card.is-compact .eyebrow,
.profile-card.is-compact .profile-topline {
    display: none;
}

.profile-card.is-compact .profile-role {
    margin: 10px 0 0;
    font-size: 12.5px;
}

.profile-card.is-compact .profile-intro {
    max-width: 38em;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.62;
}

.profile-card.is-compact .profile-actions {
    margin-top: auto;
    padding-top: 16px;
}

.profile-card.is-compact .spring-button,
.profile-card.is-compact .icon-action {
    min-height: 44px;
}

.profile-card.is-compact .icon-action {
    width: 42px;
    height: 42px;
}

/* Tinker module. */
.bento-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bento-list li {
    display: grid;
    gap: 3px;
    padding-left: 13px;
    border-left: 2px solid rgba(129, 227, 244, 0.36);
}

.bento-list strong {
    font-size: 12.5px;
    font-weight: 700;
}

.bento-list span {
    color: var(--ink-faint);
    font-size: 10.5px;
    line-height: 1.45;
}

/* Star map. */
.bento-stars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 7px;
    margin-top: auto;
}

.bento-stars .star-node {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 9px 3px;
    text-align: center;
    border-radius: 16px;
}

.bento-stars .star-dot {
    width: 11px;
    height: 11px;
}

.bento-stars .star-label {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.star-wait {
    display: block;
    margin-top: 1px;
    color: var(--ink-faint);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.star-node.is-pending .star-label {
    color: var(--ink-faint);
}

/* Random discovery. */
.bento-discover {
    justify-content: flex-start;
}

.discover-button {
    width: 100%;
    margin-top: 2px;
}

.discover-pool {
    display: block;
    margin-top: 10px;
    padding: 0;
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-align: center;
    border: 0;
    background: none;
}

/* Site updates, two most recent entries. */
.bento-update-list {
    display: grid;
    gap: 0;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.bento-update-list li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.bento-update-list time {
    color: #8fd6ff;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
}

.bento-update-list span {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
}

/* Rebuilt night radio: the card itself carries the radius now. */
.radio-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    border-radius: 32px;
}

.radio-card-body {
    display: grid;
    grid-template-columns: clamp(84px, 8.4vw, 112px) minmax(0, 1fr);
    gap: clamp(12px, 1.3vw, 18px);
    align-items: start;
    min-height: 0;
    padding: clamp(18px, 1.8vw, 24px);
}

.radio-cover {
    border-radius: 22px;
}

.radio-meta {
    min-width: 0;
}

.radio-meta h2 {
    font-size: clamp(21px, 2vw, 28px);
}

.radio-status {
    margin: 7px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
}

.radio-actions {
    flex-wrap: wrap;
    margin-top: 14px;
}

.radio-button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
}

.radio-panel {
    padding: 0 clamp(18px, 1.8vw, 24px);
}

.radio-card.is-open .radio-panel {
    max-height: 420px;
    padding: 16px clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px);
    overflow-y: auto;
}

.radio-empty-note {
    margin: 0 0 12px;
    font-size: 11px;
}

.radio-controls {
    gap: 8px;
}

.radio-control {
    width: 38px;
    height: 38px;
    border-radius: 13px;
}

.radio-playlist {
    margin-top: 14px;
    max-height: 120px;
}

/* Desktop one-screen layout. Guarded by min-height so a short or zoomed
   viewport keeps normal scrolling and never clips content. */
@media (min-width: 1000px) and (min-height: 700px) {
    /* Desktop budget. Measured minimums for this content are ~271px per upper
       card and ~236px for the lower row; together with the header, gaps and dock
       that needs roughly a 1000px tall window. At 720-921px there is not enough
       room for everything at once, so the page is allowed to scroll and each
       region keeps its own floor — nothing is cut off and no type is shrunk. */
    body.video-bg {
        padding-bottom: 104px;
        --header-space: 92px;
        --dock-space: 84px;
    }

    /* Fixed collapsed height on desktop: the home layout reserves exactly this
       much, so it must not depend on a measurement that changes with state. */
    body.video-bg .site-dock {
        box-sizing: border-box;
        height: 64px;
        padding-block: 0;
    }

    body.video-bg .dock-collapsed {
        min-height: 0;
        height: 100%;
        align-items: center;
    }

    .home-page {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0;
        height: var(--home-shell-height, calc(100vh - 176px));
    }

    .home-bento {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.02fr) minmax(0, 1.02fr);
        grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "profile profile radio radio"
            "tinker  stars   discover updates";
    }

    .bento-profile { grid-area: profile; }
    .radio-card { grid-area: radio; }
    .bento-tinker { grid-area: tinker; }
    .bento-constellation { grid-area: stars; }
    .bento-discover { grid-area: discover; }
    .bento-updates { grid-area: updates; }

    .bento-module {
        overflow: hidden;
    }

    .home-bento > * {
        min-height: 0;
    }

    /* The grid owns the shell's content box, so its rows cannot push past the
       space reserved for the dock. */
    .home-bento {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        padding-top: 4px;
        gap: clamp(10px, 1vw, 14px);
        grid-template-rows: minmax(0, 1.28fr) minmax(0, 1fr);
    }

    .bento-module {
        padding: clamp(14px, 1.4vw, 20px);
    }

    .radio-card-body {
        padding: clamp(14px, 1.4vw, 20px);
    }

    .home-page {
        padding-bottom: 0;
    }
}

/* Tablet: two columns instead of four. */
@media (min-width: 821px) and (max-width: 999px) {
    .home-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento-profile {
        grid-column: 1 / -1;
    }
}

/* Narrow screens keep normal vertical scrolling and full text size. */
@media (max-width: 820px) {
    .home-bento {
        grid-template-columns: 1fr;
    }

    .profile-card.is-compact h1 {
        font-size: clamp(34px, 9vw, 46px);
    }

    .radio-card {
        border-radius: 26px;
    }

    .radio-card-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .radio-cover {
        width: min(176px, 52vw);
        margin: 0 auto;
    }

    .radio-meta {
        text-align: center;
    }

    .radio-actions,
    .radio-controls,
    .radio-volume {
        justify-content: center;
    }

    .bento-stars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .bento-module,
    .profile-card.is-compact {
        border-radius: 26px;
    }

    .bento-stars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-hero-grid,
    .discover-card,
    .tinker-grid {
        grid-template-columns: 1fr;
    }

    .radio-card-body {
        grid-template-columns: clamp(96px, 24vw, 132px) minmax(0, 1fr);
    }

    .constellation-field {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 20px;
    }

    .discover-card .spring-button {
        justify-self: start;
    }
}

@media (max-width: 560px) {
    .home-module {
        padding-top: 54px;
    }

    .radio-card-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .radio-cover {
        width: min(180px, 54vw);
        margin: 0 auto;
    }

    .radio-meta {
        text-align: center;
    }

    .radio-actions,
    .radio-controls,
    .radio-volume {
        justify-content: center;
    }

    .radio-volume input {
        width: 46%;
    }

    .tinker-card {
        min-height: 0;
        border-radius: 26px;
    }

    .constellation-card,
    .discover-card,
    .timeline-card {
        border-radius: 26px;
    }

    .constellation-field {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .update-list li {
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-video-layer video {
        transition: none;
    }

    .star-dot,
    .radio-toggle svg {
        transition: none;
    }
}

/* ===================================================================
   Round 3 — homepage hierarchy and the night radio rebuild.

   Why these rules live together at the end of the file: rounds 1 and 2 ended up
   with several overlapping copies of the homepage rules, which made the cascade
   hard to reason about. Everything for this round is in one block so it can be
   read, reviewed and reverted as a unit.

   Structure changed in index.html to make this possible:
     * .radio-card-body was missing entirely, so the grid and padding that the
       CSS defined had no element to apply to — the title sat 0px from the card
       edge. The internals are now .radio-head (cover + meta) and .radio-panel.
     * the bottom row is wrapped in .bento-lower so it can hold three visually
       different treatments instead of four identical glass panels.
   =================================================================== */

/* ---------- Bento skeleton ---------- */

.home-bento {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 18px);
    padding-top: clamp(6px, 1vh, 14px);
    min-height: 0;
}

/* Flex rather than grid: grid's implicit track sizing kept producing phantom
   tracks (a 0px column plus an extra one), which silently wrapped the third
   panel onto a second row and doubled the row's height. Flex columns are
   predictable and let each panel take its own content height. */
.bento-lower {
    display: flex;
    align-items: stretch;
    gap: clamp(12px, 1.2vw, 18px);
    min-height: 0;
}

.bento-lower > .open-list {
    flex: 1.06 1 0;
    min-width: 0;
}

.bento-lower > .bento-constellation {
    flex: 1.2 1 0;
    min-width: 0;
}

.bento-lower > .info-panel {
    flex: 0.94 1 0;
    min-width: 0;
}

/* ---------- 1) 最近在折腾: open list, deliberately not a glass panel ---------- */

.open-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(6px, 0.7vw, 12px) 0 0 2px;
}

.open-list-items {
    display: grid;
    gap: 0;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.open-list-items > li {
    padding: clamp(12px, 1.3vw, 17px) 2px;
    border-top: 1px solid rgba(214, 235, 255, 0.16);
}

.open-list-items > li:first-child {
    border-top: 0;
}

.open-list-items h3 {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 650;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 12px rgba(0, 10, 30, 0.5);
}

.open-list-items h3::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 9px rgba(129, 227, 244, 0.6);
}

.open-list-items > li:nth-child(2) h3::before {
    background: #a7d8ff;
    box-shadow: 0 0 9px rgba(167, 216, 255, 0.55);
}

.open-list-items > li:nth-child(3) h3::before {
    background: var(--warm);
    box-shadow: 0 0 9px rgba(240, 199, 138, 0.5);
}

.open-list-items p {
    margin: 7px 0 0 14px;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.65;
    text-shadow: 0 1px 10px rgba(0, 10, 30, 0.45);
}

/* ---------- shared module heading ---------- */

.bento-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: clamp(10px, 1vw, 14px);
}

.bento-head h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(19px, 1.6vw, 25px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bento-index {
    color: rgba(201, 227, 255, 0.32);
    font-family: Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1;
}

/* ---------- 2) 内容星图: the one feature panel in the bottom row ---------- */

.bento-module {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: 32px;
}

.bento-stars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 7px;
    margin-top: auto;
}

.bento-stars .star-node {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 4px 9px;
    text-align: center;
    border-radius: 16px;
    transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.3s var(--spring);
}

.bento-stars .star-node::before {
    content: "";
    position: absolute;
    inset: auto 50% 0 auto;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cyan), rgba(240, 199, 138, 0.7));
    transform: translateX(50%);
    transition: width 0.28s var(--soft-ease);
}

.bento-stars .star-meta {
    color: rgba(201, 227, 255, 0.42);
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
}

.bento-stars .star-label {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.star-wait {
    display: block;
    margin-top: 2px;
    color: var(--ink-faint);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.bento-stars .star-node:hover,
.bento-stars .star-node:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.bento-stars .star-node:hover::before,
.bento-stars .star-node:focus-visible::before,
.bento-stars .star-node.is-active::before {
    width: 62%;
}

.bento-stars .star-node.is-active {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.star-node.is-pending {
    cursor: default;
    opacity: 0.62;
}

.star-node.is-pending:hover,
.star-node.is-pending:focus-visible {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    transform: none;
}

.star-node.is-pending:hover::before,
.star-node.is-pending:focus-visible::before {
    width: 0;
}

.star-hint {
    min-height: 2.7em;
    margin: 14px 0 0;
    padding-top: 11px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.6;
    border-top: 1px solid rgba(214, 235, 255, 0.14);
}

.star-hint.is-pending {
    color: #e0c79a;
}

/* ---------- 3) 随机发现 + 站点近况: one narrow, light information area ---------- */

.info-panel {
    justify-content: space-between;
    gap: 0;
}

.info-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.info-block-updates {
    margin-top: clamp(12px, 1.2vw, 18px);
    padding-top: clamp(12px, 1.2vw, 18px);
    border-top: 1px solid rgba(214, 235, 255, 0.13);
}

.info-panel .bento-head {
    margin-bottom: 10px;
}

.info-panel .bento-head h2 {
    font-size: clamp(17px, 1.3vw, 20px);
}

.discover-button {
    width: 100%;
    margin-top: 0;
}

.info-note {
    margin: 9px 0 0;
    color: var(--ink-faint);
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
}

.info-updates {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-updates li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    align-items: baseline;
    padding: 7px 0;
}

.info-updates li + li {
    border-top: 1px solid rgba(214, 235, 255, 0.1);
}

.info-updates time {
    color: #8fd6ff;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
}

.info-updates span {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
}

/* ---------- Profile card: title, intro and actions as one group ---------- */

.profile-card.is-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: clamp(16px, 1.6vw, 24px);
    min-height: 0;
}

.profile-card.is-compact .eyebrow {
    display: block;
    margin: 0 0 7px;
}

.profile-card.is-compact h1 {
    margin: 0;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: 0.05em;
}

.profile-card.is-compact .profile-role {
    margin: 11px 0 0;
    color: #a9d6ff;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-card.is-compact .profile-intro {
    max-width: 34em;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: clamp(12.5px, 1vw, 14px);
    line-height: 1.66;
}

.profile-card.is-compact .profile-actions {
    /* Was margin-top:auto, which pushed the buttons to the bottom of the card and
       left a large empty gap under the intro. The three parts now read as one
       contiguous group. */
    margin-top: clamp(18px, 1.7vw, 26px);
    padding-top: 0;
}

/* ---------- Night radio: horizontal, self-contained player ---------- */

.radio-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(24px, 2.2vw, 30px);
    border-radius: 32px;
}

.radio-head {
    display: grid;
    grid-template-columns: clamp(104px, min(10.4vw, 19vh), 170px) minmax(0, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    align-items: center;
    min-height: 0;
}

.radio-card .radio-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: rgba(4, 20, 50, 0.35);
    box-shadow: 0 12px 30px rgba(0, 8, 30, 0.28);
}

.radio-card .radio-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

.radio-meta .eyebrow {
    margin: 0 0 7px;
}

.radio-meta h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(28px, 2.2vw, 32px);
    font-weight: 600;
    line-height: 1.1;
}

.radio-status {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.62;
}

.radio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: clamp(14px, 1.4vw, 18px);
}

.radio-button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 12px;
}

/* No audio yet: keep the panel reachable, but do not let a row of dead
   transport controls sit in the middle of the visual. initRadioPlayer()
   sets .is-empty so these hide; the underlying hooks stay in the markup. */
.radio-card.is-empty .radio-controls,
.radio-card.is-empty .radio-timeline,
.radio-card.is-empty .radio-volume,
.radio-card.is-empty .radio-playlist {
    display: none;
}

/* The explanation lives inside the panel, so it must stay visible when the
   visitor expands it — hiding the note here would make the expanded state
   completely empty. */
.radio-card.is-empty .radio-empty-note {
    margin: 0;
    display: block;
}

.radio-panel {
    padding: 0 clamp(24px, 2.2vw, 30px);
}

.radio-card.is-open .radio-panel {
    max-height: 320px;
    padding: 15px clamp(24px, 2.2vw, 30px) clamp(20px, 2vw, 26px);
    overflow-y: auto;
}

.radio-empty-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.68;
}

/* ---------- Responsive ---------- */

@media (min-width: 1000px) and (min-height: 700px) {
    .home-bento {
        flex: 1 1 auto;
        height: 100%;
        gap: clamp(12px, 1.1vw, 18px);
        grid-template-rows: minmax(0, 0.92fr) minmax(0, 1fr);
    }

    .bento-lower {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Short desktops (720-780px tall) leave the top row tight. Rather than
       clipping, the card trims its own rhythm: smaller padding, smaller title,
       tighter spacing. Everything stays readable, nothing is cut off. */
    @media (max-height: 800px) {
        /* Short windows only: the card may scroll internally rather than hide
           text. Chaining is left at the default so the page still scrolls once
           the card reaches its end. */
        .profile-card.is-compact {
            overflow-y: auto;
            overscroll-behavior: auto;
        }

        .home-bento {
            gap: 10px;
        }

        .profile-card.is-compact {
            padding: 16px 18px;
        }

        .profile-card.is-compact .eyebrow {
            margin-bottom: 5px;
            font-size: 9px;
        }

        .profile-card.is-compact h1 {
            font-size: 34px;
        }

        .profile-card.is-compact .profile-role {
            margin-top: 7px;
            font-size: 12.5px;
        }

        .profile-card.is-compact .profile-intro {
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.6;
        }

        .profile-card.is-compact .profile-actions {
            margin-top: 12px;
        }

        .profile-card.is-compact .spring-button,
        .profile-card.is-compact .icon-action {
            min-height: 38px;
        }

        .profile-card.is-compact .icon-action {
            width: 38px;
            height: 38px;
        }
    }

    /* Fill the row instead of shrinking to content: the grid row is taller than
       either card's content, so centring them left dead space and squeezed the
       radio until its own content overflowed. */
    /* Upper cards flex-share whatever is left after the lower row has taken its
       content height, so both stay equal and neither is squeezed by a guess. */
    .bento-profile,
    .radio-card {
        flex: 1 1 0;
        min-height: 0;
    }

    /* Measured totals for this homepage: each upper card needs 288px and the
       lower row needs ~340px, so the column runs about 1100px tall — taller than
       a 720-921px window. The page therefore scrolls, and the lower panels keep
       their natural height instead of being clipped. */
    .bento-lower {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* The lower panels scroll inside the row. Measured content totals ~1300px
       against a 900px window, so one of the two goals in the brief has to give:
       "no overlap, one screen" is honoured, and nothing is hidden because the row
       scrolls instead of clipping. */
    .bento-lower {
        overflow: visible;
    }

    /* NOTE: these two cards must NOT be scroll containers. Their content fits
       exactly, so they have nothing to scroll, yet `overscroll-behavior: contain`
       on a non-scrollable scroll container still swallows the wheel event and
       stops it reaching the page — hovering the cards made the page impossible to
       scroll. They only clip at the rounded corner now. */
    .bento-profile,
    .radio-card {
        overflow: hidden;
        overscroll-behavior: auto;
    }

    .open-list-items > li {
        padding: clamp(7px, 0.7vw, 10px) 2px;
    }

    .open-list-items p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.5;
    }

    /* The open list sits outside a glass panel, so it is aligned with the panels
       beside it rather than pushed down by their padding. */
    .open-list {
        padding-top: 0;
    }

    /* Five nodes and a hint have to coexist with the panel heading in a short
       row, so the nodes lose their sub-labels and tighten up. Colour still
       carries the state. */
    /* The lower row has ~210px of first-screen room. Nodes drop their caption
       wrapper entirely and the hint sits directly under them, so the hint is
       actually readable without scrolling — which is the whole point of it. */
    .bento-stars .star-node {
        padding: 4px 3px;
        gap: 4px;
    }

    .bento-stars .star-meta {
        display: none;
    }

    .bento-stars .star-dot,
    .bento-stars .star-label::before {
        display: none;
    }

    .bento-stars .star-label {
        font-size: 12px;
    }

    .star-hint {
        margin-top: 8px;
        padding-top: 7px;
        font-size: 11.5px;
        line-height: 1.45;
        min-height: 0;
    }

    .info-panel .bento-head {
        margin-bottom: 6px;
    }

    .info-updates li {
        padding: 5px 0;
    }

    .star-hint {
        min-height: 0;
        margin-top: 10px;
        padding-top: 9px;
    }

    .info-block-updates {
        margin-top: 10px;
        padding-top: 10px;
    }

    .info-updates li {
        padding: 6px 0;
    }

    .bento-profile,
    .radio-card {
        align-self: stretch;
        height: auto;
    }

    .bento-profile {
        justify-content: center;
    }

    .radio-card {
        justify-content: center;
    }

    .bento-module,
    .open-list {
        overflow: hidden;
    }
}

@media (max-width: 999px) {
    .bento-lower {
        flex-direction: column;
    }

    .open-list {
        padding: 4px 2px 0;
    }
}

@media (max-width: 820px) {
    .radio-head {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: start;
    }

    .radio-card {
        padding: 22px 20px;
    }

    .radio-card .radio-cover {
        width: min(190px, 52vw);
    }

    .radio-meta {
        width: 100%;
    }

    .radio-card.is-open .radio-panel {
        padding-inline: 20px;
    }

    .radio-panel {
        padding: 0 20px;
    }

    .profile-card.is-compact h1 {
        font-size: clamp(38px, 10vw, 52px);
    }

    .bento-stars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .bento-module,
    .profile-card.is-compact,
    .radio-card {
        border-radius: 26px;
    }

    .bento-stars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .open-list-items p {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bento-stars .star-node,
    .bento-stars .star-node::before {
        transition: none;
    }
}