@font-face {
    font-family: "ZCOOL KuaiLe Local";
    src: url("fonts/ZCOOLKuaiLe-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --home-sky: #e8f6fd;
    --home-sky-strong: #d9effa;
    --home-card: rgba(255, 255, 255, 0.96);
    --home-card-soft: #f7fbfd;
    --home-line: #d7e4eb;
    --home-line-strong: #bed4df;
    --home-text: #24313a;
    --home-muted: #72838e;
    --home-blue: #16add1;
    --home-blue-dark: #087d9d;
    --home-yellow: #d79b18;
    --home-danger: #b65248;
    --home-shadow: 0 18px 45px rgba(61, 103, 124, 0.13);
}

body {
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.92), transparent 28rem),
        linear-gradient(180deg, var(--home-sky-strong), var(--home-sky));
}

.page {
    width: 100%;
    max-width: none;
    align-content: start;
    padding: 0;
}

.home-screen {
    width: 100%;
    --home-transition-overlap: 96px;
    --home-transition-wave-height: 108px;
    --home-transition-content-gap: 18px;
    color: var(--home-text);
}

.home-topbar {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 5;
    width: min(calc(100vw - 36px), 1480px);
    margin: 0;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 32px rgba(42, 86, 108, 0.1);
    backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

.home-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--home-text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.home-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-nav,
.home-tools,
.category-strip,
.profile-links {
    display: flex;
    align-items: center;
}

.home-nav {
    justify-content: flex-start;
    gap: 5px;
}

.home-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #4e606a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.home-nav-item.is-active {
    background: #e7f7fb;
    color: var(--home-blue-dark);
}

a.home-nav-item,
button.home-nav-item {
    cursor: pointer;
}

.home-nav-item:hover,
.home-nav-item:focus-visible,
.home-nav-menu.is-open > .home-nav-item {
    border-color: rgba(22, 135, 238, 0.58);
    background: rgba(229, 246, 255, 0.72);
    color: #1687ee;
    box-shadow: 0 6px 18px rgba(22, 135, 238, 0.12);
}

.home-nav-item:focus-visible {
    outline: 2px solid rgba(22, 135, 238, 0.42);
    outline-offset: 2px;
}

.home-nav-menu {
    position: relative;
}

.home-nav-trigger {
    height: 100%;
}

.home-nav-chevron {
    display: inline-block;
    transition: transform 180ms ease;
}

.home-nav-menu.is-open .home-nav-chevron {
    transform: rotate(180deg);
}

.home-nav-dropdown {
    width: 270px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 20;
    padding: 10px;
    border: 1px solid rgba(71, 158, 207, 0.38);
    border-radius: 16px;
    background: rgba(248, 253, 255, 0.86);
    box-shadow: 0 18px 42px rgba(41, 93, 120, 0.18);
    backdrop-filter: blur(18px);
    animation: home-feature-menu-in 180ms ease-out;
}

.home-nav-dropdown[hidden] {
    display: none;
}

.home-nav-dropdown .snake-entry {
    min-height: 122px;
    margin: 0;
    padding: 16px;
    box-shadow: none;
}

@keyframes home-feature-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-module-note {
    color: #9aabb4;
    font-size: 10px;
    font-weight: 500;
}

.home-tools {
    justify-content: flex-end;
    gap: 7px;
}

.search-placeholder {
    min-width: 150px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 10px;
    background: rgba(232, 243, 248, 0.9);
    color: #9aabb4;
    font-size: 12px;
}

.tool-placeholder {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #52646e;
    font-size: 17px;
    cursor: default;
}

.tool-placeholder[aria-disabled="true"] {
    opacity: 0.78;
}

.home-hero {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-image: url("backgrounds/point-a/hero-scene-v1.webp");
    background-position: 50% 50%;
    background-size: cover;
    /* The hero and content stage overlap; an outer shadow here reads as a hard seam. */
    box-shadow: none;
    isolation: isolate;
}

/* Let CSS paint the preloaded hero while JS prepares the decoded rotation layers. */
.home-hero.has-section-background {
    background-image: none;
}

[data-background-pool] {
    isolation: isolate;
}

.section-background-layer {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0;
    background-position: 50% 50%;
    background-size: cover;
    transition: opacity 1.6s ease;
}

.section-background-layer.is-visible {
    opacity: 1;
}

/* The first frame is immediate; only later rotations cross-fade. */
.section-background-layer.is-initial {
    transition: none;
}

.backgrounds-managed:not(.home-effects-ready) .home-wave-parallax use {
    animation-play-state: paused;
}

.home-hero > .section-background-layer,
.home-hero::after {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--home-transition-overlap)),
        rgba(0, 0, 0, 0.76) calc(100% - var(--home-transition-overlap) + 24px),
        rgba(0, 0, 0, 0.28) calc(100% - 24px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--home-transition-overlap)),
        rgba(0, 0, 0, 0.76) calc(100% - var(--home-transition-overlap) + 24px),
        rgba(0, 0, 0, 0.28) calc(100% - 24px),
        transparent 100%
    );
}

.home-content-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    z-index: 1;
    margin-top: calc(0px - var(--home-transition-overlap));
    padding: calc(var(--home-transition-overlap) + var(--home-transition-content-gap)) 0 56px;
    scroll-margin-top: 0;
    isolation: isolate;
}

.home-content-stage.has-section-background {
    overflow: hidden;
}

.home-content-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(244, 251, 255, 0.02) 0,
        rgba(244, 251, 255, 0.07) var(--home-transition-overlap),
        rgba(241, 249, 253, 0.16) calc(var(--home-transition-overlap) + 140px),
        rgba(241, 249, 253, 0.2) 100%
    );
    pointer-events: none;
}

.home-transition-waves {
    width: 100%;
    height: var(--home-transition-wave-height);
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.72) 18%,
        #000 48%,
        rgba(0, 0, 0, 0.72) 70%,
        rgba(0, 0, 0, 0.18) 91%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.72) 18%,
        #000 48%,
        rgba(0, 0, 0, 0.72) 70%,
        rgba(0, 0, 0, 0.18) 91%,
        transparent 100%
    );
}

.home-transition-waves svg {
    width: calc(100% + 4px);
    height: 100%;
    display: block;
    overflow: visible;
}

.home-wave-parallax use {
    fill: #edf8fd;
    will-change: transform;
    backface-visibility: hidden;
}

.home-wave-parallax use:nth-child(1) {
    opacity: 0.15;
    animation: home-gentle-wave 7s cubic-bezier(0.5, 0.5, 0.45, 0.5) -2s infinite;
}

.home-wave-parallax use:nth-child(2) {
    opacity: 0.25;
    animation: home-gentle-wave 10s cubic-bezier(0.5, 0.5, 0.45, 0.5) -3s infinite;
}

.home-wave-parallax use:nth-child(3) {
    opacity: 0.38;
    animation: home-gentle-wave 13s cubic-bezier(0.5, 0.5, 0.45, 0.5) -4s infinite;
}

.home-wave-parallax use:nth-child(4) {
    opacity: 0.52;
    animation: home-gentle-wave 20s cubic-bezier(0.5, 0.5, 0.45, 0.5) -5s infinite;
}

@keyframes home-gentle-wave {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.home-content-stage > .section-background-layer {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    inset: 0 auto auto 50%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: translateX(-50%);
}

.home-content-stage > .section-background-layer.is-visible {
    opacity: 0.86;
}

.sakura-petal-layer {
    width: 100vw;
    height: 100vh;
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    max-width: none;
    aspect-ratio: auto;
    pointer-events: none;
    user-select: none;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 50%, rgba(12, 54, 76, 0.18), rgba(8, 24, 36, 0.08) 42%, rgba(8, 24, 36, 0.22)),
        linear-gradient(180deg, rgba(7, 35, 58, 0.22), rgba(7, 35, 58, 0.44));
}

.hero-copy {
    width: min(88%, 760px);
    padding: 40px 24px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.48);
}

.hero-title {
    max-width: none;
    font-size: clamp(42px, 7vw, 78px);
    line-height: 1.06;
    letter-spacing: -0.055em;
}

.hero-typewriter {
    min-height: 1.8em;
    margin-top: 20px;
    font-size: clamp(15px, 2vw, 20px);
    font-family: "ZCOOL KuaiLe Local", "KaiTi", cursive;
    font-weight: 400;
    letter-spacing: 0.08em;
    transition: opacity 560ms ease;
}

.hero-typewriter.is-clearing {
    opacity: 0;
}

.typewriter-cursor {
    width: 2px;
    height: 1.05em;
    display: inline-block;
    margin-left: 4px;
    background: currentColor;
    vertical-align: -0.1em;
    opacity: 0;
}

.typewriter-cursor.is-active {
    opacity: 1;
    animation: home-cursor 850ms steps(1) infinite;
}

.hero-scroll-guide {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 5vh, 54px);
    z-index: 2;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42));
    animation: hero-scroll-float 1.8s ease-in-out infinite;
}

.hero-scroll-guide::before {
    content: "";
    width: 22px;
    height: 22px;
    border-right: 5px solid currentColor;
    border-bottom: 5px solid currentColor;
    transform: translateY(-5px) rotate(45deg);
}

.hero-scroll-guide:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.82);
    outline-offset: 4px;
}

@keyframes home-cursor {
    50% { opacity: 0; }
}

@keyframes hero-scroll-float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 9px); }
}

.home-workspace {
    width: min(calc(100% - 40px), 1480px);
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 300px;
    align-items: start;
    gap: 16px;
    position: relative;
    z-index: 3;
    margin: 0 auto;
}

.site-uptime-card {
    --uptime-hour-angle: 0deg;
    --uptime-minute-angle: 0deg;
    --uptime-second-angle: 0deg;
    width: min(calc(100% - 40px), 590px);
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    margin: 34px auto 0;
    padding: 14px 58px 14px 92px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(239, 249, 255, 0.86));
    box-shadow: 0 12px 28px rgba(68, 139, 190, 0.17), inset 0 0 18px rgba(255, 255, 255, 0.72);
    color: #1687ee;
}

.uptime-copy {
    font-family: "ZCOOL KuaiLe Local", "YouYuan", "Microsoft YaHei", sans-serif;
    font-size: clamp(14px, 1.55vw, 18px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.55;
    text-align: center;
}

.uptime-copy strong {
    font: inherit;
    color: #087cf0;
}

.uptime-spark {
    position: absolute;
    right: 20px;
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 0 12px #7bbcff, 0 0 20px #7bbcff;
    animation: uptime-spark 1.9s ease-in-out infinite;
}

.uptime-orbit {
    width: 84px;
    height: 70px;
    position: absolute;
    left: 9px;
    top: 50%;
    isolation: isolate;
    transform: translateY(-50%);
}

.uptime-clock-face {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    border: 3px solid #2e98f4;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 0 5px rgba(65, 157, 244, 0.19),
        0 0 18px rgba(36, 139, 237, 0.45);
    transform: translate(-50%, -50%);
}

.uptime-clock-face::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(46, 152, 244, 0.36);
    border-radius: 50%;
}

.uptime-clock-hand {
    width: 2px;
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 2;
    border-radius: 999px;
    background: #167fe0;
    transform-origin: 50% 100%;
}

.uptime-clock-hour {
    height: 12px;
    transform: translateX(-50%) rotate(var(--uptime-hour-angle));
}

.uptime-clock-minute {
    height: 17px;
    transform: translateX(-50%) rotate(var(--uptime-minute-angle));
}

.uptime-clock-second {
    width: 1px;
    height: 18px;
    background: #66b7ff;
    transform: translateX(-50%) rotate(var(--uptime-second-angle));
}

.uptime-clock-center {
    width: 6px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    border-radius: 50%;
    background: #1687ee;
    transform: translate(-50%, -50%);
}

.uptime-ring {
    width: 80px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    border: 1.25px solid rgba(53, 151, 241, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(53, 151, 241, 0.12);
    transform: translate(-50%, -50%) rotate(-10deg);
}

.uptime-orbit-ball {
    width: 9px;
    height: 9px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffffff 0 14%, #bfe4ff 26%, #4aa9f5 64%, #187edb 100%);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.95), 0 0 11px rgba(46, 152, 244, 0.72);
    transform: translate(-50%, -50%) translate(39.4px, -6.9px);
    will-change: transform;
    animation: uptime-moon-orbit 6.8s linear infinite;
}

@keyframes uptime-moon-orbit {
    0% {
        z-index: 3;
        transform: translate(-50%, -50%) translate(39.4px, -6.9px) scale(0.9);
    }
    12.5% {
        transform: translate(-50%, -50%) translate(29.7px, 5.5px) scale(0.96);
    }
    25% {
        transform: translate(-50%, -50%) translate(2.6px, 14.8px) scale(1.05);
    }
    37.5% {
        transform: translate(-50%, -50%) translate(-26px, 15.4px) scale(0.98);
    }
    49.99% {
        z-index: 3;
        transform: translate(-50%, -50%) translate(-39.4px, 6.9px) scale(0.9);
    }
    50% {
        z-index: 1;
        transform: translate(-50%, -50%) translate(-39.4px, 6.9px) scale(0.82);
    }
    62.5% {
        transform: translate(-50%, -50%) translate(-29.7px, -5.5px) scale(0.76);
    }
    75% {
        transform: translate(-50%, -50%) translate(-2.6px, -14.8px) scale(0.7);
    }
    87.5% {
        transform: translate(-50%, -50%) translate(26px, -15.4px) scale(0.76);
    }
    99.99% {
        z-index: 1;
        transform: translate(-50%, -50%) translate(39.4px, -6.9px) scale(0.82);
    }
    100% {
        z-index: 3;
        transform: translate(-50%, -50%) translate(39.4px, -6.9px) scale(0.9);
    }
}

@keyframes uptime-spark {
    0%, 100% { opacity: 0.58; transform: scale(0.82) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(18deg); }
}

.home-left,
.home-center,
.home-right {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.home-card,
.category-strip,
.home-content-card,
.calendar-card,
.weather-card {
    border: 1px solid var(--home-line);
    background: var(--home-card);
    box-shadow: 0 9px 28px rgba(68, 106, 124, 0.08);
}

.home-card,
.home-content-card,
.calendar-card,
.weather-card {
    border-radius: 15px;
}

.profile-card {
    overflow: hidden;
}

.profile-visual {
    aspect-ratio: 1.56 / 1;
    min-height: 0;
    background: #e8f8ff;
}

.profile-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 30% 50%;
}

.profile-copy {
    padding: 18px 15px 15px;
    text-align: center;
}

.profile-name {
    overflow-wrap: anywhere;
    font-size: 22px;
    line-height: 1.2;
}

.profile-name-accent {
    width: 23px;
    height: 4px;
    display: block;
    margin: 8px auto 10px;
    border-radius: 99px;
    background: #35aef0;
}

.profile-greeting {
    color: #92989d;
    font-size: 13px;
}

.profile-socials {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.profile-social {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e3f4ff;
    color: #70838d;
    font-size: 12px;
    font-weight: 850;
    cursor: default;
    transition: color 170ms ease, background-color 170ms ease, box-shadow 170ms ease;
}

.profile-social:hover {
    background: #e6f5ff;
    color: #1687ee;
    box-shadow: inset 0 0 0 1px rgba(22, 135, 238, 0.2), 0 4px 12px rgba(22, 135, 238, 0.1);
}

.profile-social svg {
    width: 23px;
    height: 23px;
    display: block;
    fill: currentColor;
}

.profile-social--bilibili svg,
.profile-social--wechat svg {
    width: 25px;
    height: 25px;
}

.profile-social--wechat svg {
    transform: translateY(0.25px);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--home-line);
}

.profile-stat {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 9px 5px;
    border-radius: 10px;
    background: #e3f4ff;
}

.profile-stat span {
    color: #4d7991;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.profile-stat strong {
    color: #1a252c;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.snake-entry {
    width: 100%;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 19px;
    border: 1px solid #cbded4;
    border-radius: 15px;
    background:
        radial-gradient(circle at 92% 10%, rgba(82, 172, 117, 0.16), transparent 7rem),
        #f7fcf8;
    color: var(--home-text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 9px 28px rgba(68, 106, 124, 0.08);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.snake-entry:hover {
    transform: translateY(-2px);
    border-color: #7eb493;
    box-shadow: 0 13px 30px rgba(50, 113, 74, 0.12);
}

.snake-entry-kicker {
    color: #5d7968;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.snake-entry-title {
    margin-top: 4px;
    font-size: 23px;
    font-weight: 850;
}

.snake-entry-action {
    color: #2f6745;
    font-size: 12px;
    font-weight: 800;
}

.weather-card {
    min-height: 250px;
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(127, 162, 255, 0.21), transparent 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 236, 0.92));
    backdrop-filter: blur(12px);
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.weather-header,
.weather-location,
.weather-current,
.weather-condition {
    display: flex;
    align-items: center;
}

.weather-header {
    gap: 10px;
}

.weather-header h2 {
    font-size: 18px;
}

.weather-heading-mark {
    width: 4px;
    height: 22px;
    border-radius: 99px;
    background: #7fa2ff;
}

.weather-location {
    gap: 7px;
    color: var(--home-muted);
    font-size: 12px;
}

.weather-location strong {
    color: var(--home-text);
    font-size: 14px;
}

.weather-location .weather-district {
    color: #5d6871;
    font-size: 12px;
}

.weather-region {
    color: #84929c;
}

.weather-location-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #7fa2ff;
}

.weather-current {
    min-height: 78px;
    justify-content: space-between;
    gap: 12px;
}

.weather-temperature {
    display: flex;
    align-items: flex-start;
    color: #111820;
    line-height: 1;
}

.weather-temperature strong {
    font-size: clamp(42px, 4.2vw, 56px);
    font-weight: 500;
}

.weather-temperature span {
    margin: 4px 0 0 4px;
    color: #84949e;
    font-size: 16px;
}

.weather-condition {
    min-width: 92px;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.weather-symbol {
    display: inline-block;
    color: #7fa2ff;
    font-size: 42px;
    line-height: 1;
    filter: drop-shadow(0 7px 9px rgba(92, 127, 220, 0.15));
    animation: weather-symbol-float 2.8s ease-in-out infinite;
}

.weather-condition strong {
    font-size: 14px;
}

.weather-range {
    color: #8a9aa3;
    font-size: 12px;
    font-weight: 700;
}

.weather-high {
    color: #f05c57;
}

.weather-low {
    color: #568fff;
}

.weather-details[hidden] {
    display: none;
}

.weather-details {
    display: grid;
    gap: 14px;
    padding-top: 4px;
    animation: weather-details-in 220ms ease both;
}

.weather-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
}

.weather-detail-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 3px;
    border-radius: 9px;
}

.weather-detail-item.is-highlight {
    padding: 8px 6px;
    background: rgba(255, 250, 231, 0.72);
    box-shadow: 0 7px 16px rgba(171, 147, 92, 0.11);
}

.weather-detail-item > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-detail-item small,
.weather-pollutants small {
    color: #606a72;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;
}

.weather-detail-item strong {
    color: #111820;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.weather-detail-icon {
    color: #789cff;
    font-size: 19px;
    line-height: 1;
    text-align: center;
}

.weather-aqi-icon {
    color: #2acb6d;
}

.weather-sunrise-icon {
    color: #ffc400;
}

.weather-sunset-icon {
    color: #ff8b36;
}

.weather-pollutants {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(215, 228, 235, 0.88);
}

.weather-pollutants-icon {
    color: #ef5a61;
    font-size: 20px;
    line-height: 1;
    text-align: center;
}

.weather-pollutants small span {
    color: #96a1aa;
    font-weight: 600;
}

.weather-pollutants p {
    margin-top: 4px;
    color: #273139;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.65;
    white-space: pre-line;
}

.weather-observed {
    color: #707b84;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.weather-more-toggle {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: center;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #7598ff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.weather-more-toggle:hover,
.weather-more-toggle:focus-visible {
    background: rgba(127, 162, 255, 0.12);
    color: #4f7df4;
    transform: translateY(-1px);
}

.weather-more-toggle:focus-visible {
    outline: 2px solid rgba(95, 133, 239, 0.48);
    outline-offset: 2px;
}

.weather-more-dots {
    letter-spacing: 0.12em;
}

.weather-card.is-expanded .weather-more-dots {
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    font-size: 0;
    transform: translateY(3px) rotate(45deg);
}

.weather-status {
    padding-top: 12px;
    border-top: 1px solid var(--home-line);
    color: #91a0a9;
    font-size: 10px;
    line-height: 1.55;
}

.weather-status.is-error {
    color: var(--home-danger);
}

.weather-status a {
    color: inherit;
    text-underline-offset: 2px;
}

@keyframes weather-symbol-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes weather-details-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.category-strip {
    min-height: 58px;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 15px;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 9px;
    background: #eff8fb;
    color: #398099;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.category-chip.is-active {
    background: var(--home-blue);
    color: #ffffff;
}

.category-chip:hover,
.category-chip:focus-visible,
.category-chip.is-active:hover,
.category-chip.is-active:focus-visible {
    background: #e5f6ff;
    color: #1687ee;
    box-shadow: 0 6px 14px rgba(49, 143, 201, 0.16);
    transform: translateY(-2px);
}

.category-chip:focus-visible {
    outline: 2px solid rgba(22, 135, 238, 0.55);
    outline-offset: 2px;
}

.category-note {
    margin-left: auto;
    color: #98a8b0;
    font-size: 10px;
}

.home-content-card {
    min-height: 520px;
    padding: 22px;
}

.logs-placeholder {
    display: none;
    min-height: 430px;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: var(--home-muted);
    text-align: center;
}

.logs-placeholder h2 {
    color: var(--home-text);
    font-size: 25px;
}

body[data-home-view="logs"] .logs-placeholder {
    display: grid;
}

body[data-home-view="logs"] .home-content-card > :not(.logs-placeholder) {
    display: none;
}

.content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--home-line);
}

.content-heading {
    margin-bottom: 4px;
    font-size: 21px;
}

.content-intro {
    width: fit-content;
    color: var(--home-muted);
    font-size: 12px;
}

.spoiler-text {
    min-width: 9.5em;
    padding: 1px 4px;
    border-radius: 2px;
    background: #111820;
    color: transparent;
    cursor: help;
    user-select: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.spoiler-text:hover,
.spoiler-text:focus-visible {
    background: transparent;
    color: var(--home-muted);
    user-select: text;
}

.spoiler-text:focus-visible {
    outline: 2px solid var(--home-blue);
    outline-offset: 3px;
}

.post-compose-toggle,
.save-button,
.cancel-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.post-compose-toggle,
.save-button {
    border: 1px solid var(--home-blue-dark);
    background: var(--home-blue);
    color: #ffffff;
}

.post-compose-toggle:hover,
.post-compose-toggle[aria-expanded="true"],
.save-button:hover {
    background: var(--home-blue-dark);
}

.cancel-button {
    border: 1px solid var(--home-line-strong);
    background: #ffffff;
    color: #52636d;
}

.post-editor {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: var(--home-card-soft);
}

.post-editor[hidden],
.posts-empty[hidden] {
    display: none;
}

.editor-field {
    display: grid;
    gap: 6px;
}

.editor-field label {
    color: #50616b;
    font-size: 11px;
    font-weight: 750;
}

.post-editor textarea,
.password-input-wrap input {
    width: 100%;
    border: 1px solid #c8d7df;
    border-radius: 9px;
    background: #ffffff;
    color: var(--home-text);
    font: inherit;
    font-size: 13px;
}

.post-editor textarea {
    min-height: 140px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.7;
}

.post-editor textarea:focus-visible,
.password-input-wrap input:focus-visible {
    outline: 3px solid rgba(22, 173, 209, 0.22);
    outline-offset: 2px;
}

.post-form-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.post-password-field {
    width: min(100%, 300px);
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    height: 40px;
    padding: 0 43px 0 11px;
}

.password-visibility-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 1px;
    right: 1px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.password-eye-icon {
    width: 18px;
    height: 11px;
    display: block;
    position: relative;
    border: 2px solid #72848d;
    border-radius: 50% / 65%;
}

.password-eye-icon::after {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #72848d;
    transform: translate(-50%, -50%);
}

.password-visibility-button.is-visible .password-eye-icon::before {
    content: "";
    width: 22px;
    height: 2px;
    position: absolute;
    top: 3px;
    left: -4px;
    z-index: 2;
    background: #72848d;
    transform: rotate(-35deg);
}

.post-form-actions,
.delete-dialog-actions {
    display: flex;
    gap: 7px;
}

.editor-status {
    min-height: 18px;
    margin-top: 10px;
    color: var(--home-muted);
    font-size: 11px;
}

.editor-status:empty {
    display: none;
}

.editor-status.is-error {
    color: var(--home-danger);
}

.editor-status.is-success {
    color: #34764b;
}

.post-list {
    display: grid;
    gap: 13px;
    margin-top: 16px;
}

.post-item {
    padding: 18px;
    border: 1px solid var(--home-line);
    border-radius: 13px;
    background: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.post-item:hover {
    border-color: #b8d4df;
    box-shadow: 0 10px 22px rgba(61, 103, 124, 0.07);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.post-date {
    color: #81929b;
    font-size: 10px;
}

.post-category {
    padding: 4px 7px;
    border-radius: 7px;
    background: #eaf7fa;
    color: #31809a;
    font-size: 10px;
    font-weight: 750;
}

.post-delete-button {
    margin-left: auto;
    padding: 5px 8px;
    border: 1px solid #e4c8c3;
    border-radius: 7px;
    background: #fffafa;
    color: var(--home-danger);
    font-size: 10px;
    cursor: pointer;
}

.post-content {
    color: #40505a;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.posts-empty {
    min-height: 320px;
    display: grid;
    place-items: center;
}

.empty-state {
    text-align: center;
}

.empty-mark {
    width: 50px;
    height: 42px;
    margin: 0 auto 14px;
    position: relative;
    border: 2px solid #ccd8de;
    border-radius: 9px;
}

.empty-mark::before {
    content: "";
    width: 18px;
    height: 2px;
    position: absolute;
    top: 13px;
    left: 14px;
    background: #ccd8de;
    box-shadow: 0 8px 0 #dce4e8;
}

.empty-title {
    font-size: 16px;
}

.calendar-card {
    padding: 15px;
    background: #fffdf8;
    border-color: #e4ded2;
}

.calendar-header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
}

.calendar-title {
    text-align: center;
    font-size: 16px;
}

.calendar-nav-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f5a52;
    font-size: 21px;
    cursor: pointer;
}

.calendar-nav-button:hover {
    background: #f3ecdf;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.calendar-weekdays {
    margin-bottom: 6px;
    color: #8d887e;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.calendar-grid {
    min-height: 224px;
    align-content: start;
}

.calendar-day {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 2px;
    position: relative;
    padding: 3px 1px 2px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #4f4c46;
    font-family: inherit;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    user-select: none;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.calendar-day:hover {
    border-color: #b8cfdd;
    background: rgba(235, 247, 253, 0.62);
    color: #326b8c;
}

.calendar-day:focus-visible {
    outline: 2px solid rgba(55, 143, 190, 0.42);
    outline-offset: 2px;
}

.calendar-day-number {
    line-height: 1;
}

.calendar-holiday-label {
    max-width: 100%;
    overflow: hidden;
    color: #b56f67;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day.is-holiday:not(.is-today) {
    background: rgba(255, 239, 232, 0.62);
}

.calendar-day.is-outside {
    color: #c7c0b5;
}

.calendar-day.is-outside .calendar-holiday-label {
    opacity: 0.52;
}

.calendar-day.is-today {
    border-color: #4e98bd;
    background: #eef8fc;
    color: #286f93;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(78, 152, 189, 0.34);
}

.calendar-day.is-today::after {
    content: "";
    width: 3px;
    height: 3px;
    position: absolute;
    top: 3px;
    right: 3px;
    border-radius: 50%;
    background: #4e98bd;
}

.calendar-day.is-date-selected,
.calendar-day.is-range-start,
.calendar-day.is-range-end {
    border-color: #d79b18;
    background: rgba(255, 248, 230, 0.92);
    color: #936300;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(215, 155, 24, 0.24);
}

.calendar-day.is-range-start {
    border-color: #e2ad39;
    background: rgba(255, 251, 238, 0.96);
}

.calendar-day.is-range-end {
    border-color: #c88600;
    background: rgba(255, 243, 211, 0.98);
    box-shadow: inset 0 0 0 1px rgba(200, 134, 0, 0.3), 0 2px 7px rgba(173, 119, 6, 0.1);
}

.calendar-day.is-today.is-date-selected,
.calendar-day.is-today.is-range-start,
.calendar-day.is-today.is-range-end {
    border-color: #c88600;
    background: #fff3d3;
    color: #8a5d00;
    box-shadow: inset 0 0 0 1px rgba(200, 134, 0, 0.3);
}

.calendar-footer {
    display: grid;
    gap: 5px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #e7e1d6;
}

.calendar-today-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.calendar-today-label {
    color: #403d37;
    font-size: 12px;
    font-weight: 750;
}

.calendar-today-date,
.calendar-sync-status {
    color: #8e897e;
    font-size: 10px;
}

.calendar-sync-status {
    min-height: 15px;
}

.calendar-sync-status:empty {
    display: none;
}

.calendar-sync-status.has-date-difference,
.calendar-date-difference {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 11px;
    border: 1px solid rgba(104, 163, 194, 0.34);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(237, 248, 253, 0.92), rgba(255, 249, 239, 0.88));
    color: #39799c;
    box-shadow: 0 3px 10px rgba(75, 131, 160, 0.08);
    font-family: "YouYuan", "Microsoft YaHei UI", "PingFang SC", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.25;
}

#calendar-sync-status.has-date-difference::before,
.calendar-date-difference::before {
    content: "✦";
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: #67a8c9;
    font-size: 10px;
    line-height: 1;
    vertical-align: 0;
}

.calendar-sync-status::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    background: #d39a16;
    vertical-align: 1px;
}

.calendar-sync-status.is-offline::before {
    background: #a7a49d;
}

.progress-list {
    display: grid;
    gap: 15px;
}

.progress-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.progress-percent {
    color: var(--home-yellow);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.progress-copy strong {
    display: block;
    margin-bottom: 6px;
    color: #59554e;
    font-size: 11px;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #efede8;
}

.progress-fill {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--home-yellow);
    transition: width 220ms ease;
}

.festival-countdown {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e7e1d6;
    text-align: center;
}

.festival-label {
    color: #59554e;
    font-size: 12px;
    font-weight: 750;
}

.festival-days {
    display: block;
    margin: 4px 0 2px;
    color: var(--home-yellow);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.festival-date {
    color: #8e897e;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.delete-dialog {
    width: min(calc(100% - 32px), 440px);
    padding: 0;
    border: 1px solid var(--home-line);
    border-radius: 15px;
    background: #ffffff;
    color: var(--home-text);
    box-shadow: 0 24px 70px rgba(28, 54, 66, 0.28);
}

.delete-dialog::backdrop {
    background: rgba(22, 42, 52, 0.45);
    backdrop-filter: blur(3px);
}

.delete-dialog-form {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.delete-dialog-title {
    font-size: 18px;
}

.delete-dialog-copy {
    color: var(--home-muted);
    font-size: 12px;
    line-height: 1.65;
}

.game-screen {
    margin: 26px auto 56px;
}

@media (max-width: 1180px) {
    .home-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .home-nav {
        display: flex;
        flex-wrap: wrap;
    }

    .home-tools > .search-placeholder,
    .home-tools > .tool-placeholder {
        display: none;
    }

    .home-workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .home-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-screen {
        --home-transition-overlap: 64px;
        --home-transition-wave-height: 72px;
        --home-transition-content-gap: 16px;
    }

    .page {
        width: 100%;
        padding-top: 0;
    }

    .home-topbar {
        top: 10px;
        width: calc(100vw - 20px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 9px 11px;
    }

    .search-placeholder {
        display: none;
    }

    .home-hero {
        min-height: 100vh;
        min-height: 100svh;
        background-position: 50% 50%;
    }

    .home-workspace {
        width: min(calc(100% - 20px), 720px);
        grid-template-columns: 1fr;
        margin: 0 auto;
    }

    .home-left {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .weather-card {
        grid-column: auto;
    }

    .profile-card,
    .snake-entry {
        min-height: 100%;
    }

    .home-center {
        grid-row: 2;
    }

    .home-right {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .home-screen {
        --home-transition-overlap: 52px;
        --home-transition-wave-height: 60px;
        --home-transition-content-gap: 14px;
    }

    .home-brand {
        font-size: 14px;
    }

    .home-nav {
        justify-content: center;
        gap: 3px;
    }

    .home-nav-item {
        gap: 3px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .home-nav-dropdown {
        width: min(270px, calc(100vw - 28px));
        left: -54px;
    }

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

    .home-tools {
        justify-content: flex-end;
    }

    .home-hero {
        min-height: 100vh;
        min-height: 100svh;
        border-radius: 0;
        background-position: 50% 50%;
    }

    .hero-title {
        font-size: clamp(34px, 13vw, 54px);
    }

    .hero-typewriter {
        font-size: 13px;
    }

    .home-workspace {
        margin-top: 0;
    }

    .site-uptime-card {
        width: calc(100% - 30px);
        min-height: 64px;
        margin-top: 26px;
        padding: 12px 42px 12px 76px;
    }

    .uptime-orbit {
        left: 1px;
        transform: translateY(-50%) scale(0.86);
    }

    .uptime-copy {
        font-size: 13px;
        letter-spacing: 0.02em;
    }

    .uptime-spark {
        right: 13px;
        font-size: 18px;
    }

    .home-left,
    .home-right {
        grid-template-columns: 1fr;
    }

    .profile-visual {
        min-height: 0;
    }

    .category-note {
        width: 100%;
        margin-left: 3px;
    }

    .home-content-card {
        min-height: 440px;
        padding: 16px;
    }

    .content-header,
    .post-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .post-password-field {
        width: 100%;
    }

    .post-form-actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sakura-petal-layer {
        display: none;
    }

    .typewriter-cursor {
        display: none;
    }

    .hero-typewriter,
    .snake-entry,
    .post-item {
        transition: none;
    }

    .hero-scroll-guide {
        animation: none;
        transform: translateX(-50%);
    }

    .home-wave-parallax use {
        animation: none;
        transform: translate3d(0, 0, 0);
    }

    .calendar-day {
        transition: none;
    }

    .uptime-orbit-ball,
    .uptime-spark,
    .weather-symbol,
    .weather-details {
        animation: none;
    }
}