:root {
    --refresh-paper: #fffdf8;
    --refresh-paper-strong: #fff8ef;
    --refresh-ink: #241b18;
    --refresh-muted: #766960;
    --refresh-line: rgba(57, 40, 27, 0.1);
    --refresh-accent: #d26843;
    --refresh-accent-soft: #fff0e1;
    --refresh-teal: #5b968c;
    --refresh-shadow: 0 26px 60px rgba(57, 40, 27, 0.08);
}

.site-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.site-wordmark-mark {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 28%, #fff6ea, rgba(255, 222, 190, 0.94) 45%, rgba(233, 172, 127, 0.94) 100%);
    color: #9f4b30;
    box-shadow: 0 12px 22px rgba(212, 106, 70, 0.2);
}

.site-wordmark-text {
    font-size: 1rem;
    line-height: 1;
}

.boxmoe-category-nav {
    margin-left: -0.35rem;
}

.boxmoe-category-nav .dropdown-menu {
    min-width: 12rem;
}

.boxmoe-category-nav .dropdown-item.active {
    color: var(--refresh-ink);
    background: rgba(210, 104, 67, 0.08);
}

body.home .home-spotlight,
body.blog .home-spotlight {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
    gap: 24px;
    margin-bottom: 34px;
    padding: 32px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 217, 177, 0.7), transparent 20%),
        radial-gradient(circle at 90% 85%, rgba(173, 219, 213, 0.28), transparent 26%),
        linear-gradient(140deg, rgba(255, 252, 247, 0.98), rgba(248, 241, 233, 0.96));
    border: 1px solid var(--refresh-line);
    box-shadow: var(--refresh-shadow);
    overflow: hidden;
}

body.home .home-spotlight,
body.blog .home-spotlight {
    display: none !important;
}

body.home .home-spotlight::before,
body.blog .home-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.35) 40%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

.home-spotlight-copy,
.home-spotlight-meta {
    position: relative;
    z-index: 1;
}

.home-spotlight-kicker {
    color: var(--refresh-teal);
}

.home-spotlight h2 {
    margin: 0 0 14px;
    color: var(--refresh-ink);
    font-size: clamp(2rem, 3.8vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.home-spotlight p {
    max-width: 48rem;
    color: var(--refresh-muted);
    font-size: 16px;
    line-height: 1.9;
}

.home-spotlight-meta {
    align-content: stretch;
}

.home-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 148px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(57, 40, 27, 0.08);
    box-shadow: 0 18px 35px rgba(57, 40, 27, 0.06);
}

.home-stat-card strong {
    color: var(--refresh-accent);
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.home-stat-card span {
    color: var(--refresh-muted);
    font-size: 12px;
    letter-spacing: 0.14em;
}

.home-post-card.list-one.post-list {
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 238, 0.96));
    border: 1px solid var(--refresh-line);
    box-shadow: 0 18px 42px rgba(57, 40, 27, 0.06);
}

.home-post-card.list-one.post-list::after,
.home-post-card.list-one.post-list::before {
    display: none !important;
}

.home-post-media {
    padding-right: 18px;
}

.home-post-media img {
    border-radius: 24px !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-post-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-post-copy .post-title {
    margin-bottom: 14px;
    color: var(--refresh-ink);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.2;
}

.home-post-copy .post-content {
    color: var(--refresh-muted);
    line-height: 1.9;
}

.home-post-author-role,
.home-post-date {
    color: var(--refresh-muted);
}

.home-sprite {
    position: fixed;
    left: clamp(12px, 2vw, 26px);
    bottom: clamp(12px, 2vw, 22px);
    z-index: 18;
    width: clamp(78px, 9vw, 118px);
    pointer-events: none;
    user-select: none;
}

.home-wisp {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    animation: wispFloat 4.8s ease-in-out infinite;
}

.home-wisp-core {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(225, 248, 255, 0.95) 48%, rgba(158, 223, 240, 0.78) 72%, rgba(118, 194, 221, 0.42) 100%);
    box-shadow:
        0 0 26px rgba(148, 225, 242, 0.65),
        0 0 56px rgba(188, 238, 247, 0.45);
}

.home-wisp-core::before,
.home-wisp-core::after {
    content: "";
    position: absolute;
    top: 26%;
    width: 28%;
    height: 34%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(145, 205, 224, 0.24);
    filter: blur(0.2px);
}

.home-wisp-core::before {
    left: -8%;
    transform: rotate(-28deg);
}

.home-wisp-core::after {
    right: -8%;
    transform: rotate(28deg);
}

.home-wisp-eye {
    position: absolute;
    top: 42%;
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(64, 123, 144, 0.16);
    overflow: hidden;
}

.home-wisp-eye.left {
    left: 29%;
}

.home-wisp-eye.right {
    right: 29%;
}

.home-wisp-eye .pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48%;
    height: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #467f98;
    box-shadow: 0 0 8px rgba(70, 127, 152, 0.35);
}

.home-wisp-trail {
    position: absolute;
    inset: 0;
}

.home-wisp-trail span {
    position: absolute;
    border-radius: 50%;
    background: rgba(205, 242, 251, 0.78);
    box-shadow: 0 0 12px rgba(205, 242, 251, 0.65);
    animation: driftTrail 4.5s ease-in-out infinite;
}

.home-wisp-trail span:nth-child(1) {
    width: 12px;
    height: 12px;
    left: 6%;
    bottom: 24%;
}

.home-wisp-trail span:nth-child(2) {
    width: 8px;
    height: 8px;
    left: 14%;
    bottom: 8%;
    animation-delay: 1.1s;
}

.home-wisp-trail span:nth-child(3) {
    width: 9px;
    height: 9px;
    right: 10%;
    top: 16%;
    animation-delay: 2s;
}

@keyframes wispFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes driftTrail {
    0%, 100% { transform: translateY(0) scale(0.95); opacity: 0.55; }
    50% { transform: translateY(-10px) scale(1.08); opacity: 1; }
}

.article-shell {
    position: relative;
}

.article-shell::before,
.article-shell::after {
    display: none !important;
}

.article-page {
    border-radius: 34px;
    border: 1px solid var(--refresh-line);
    background:
        radial-gradient(circle at top right, rgba(255, 228, 194, 0.3), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 243, 236, 0.96));
    box-shadow: var(--refresh-shadow);
}

.article-hero {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(57, 40, 27, 0.08);
}

.article-side-tools {
    background: none !important;
}

.article-layout.article-layout-simple {
    display: block;
}

.article-toc-inline {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 18px;
}

.article-toc-inline .post-toc-btn {
    display: none !important;
}

.article-toc-inline .post-toc {
    display: block !important;
    position: static !important;
}

.article-quick-card {
    display: none !important;
}

.article-side-tools::before,
.article-side-tools::after,
.article-quick-card::before,
.article-quick-card::after {
    display: none !important;
}

.article-quick-card,
.article-toc .post-toc,
.article-nav-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(57, 40, 27, 0.08) !important;
    box-shadow: 0 16px 30px rgba(57, 40, 27, 0.05);
}

body.single .article-page::before,
body.single .article-page::after,
body.single .article-content::before,
body.single .article-content::after,
body.single .boxmoe-container::before,
body.single .boxmoe-container::after,
body.single .blog-single::before,
body.single .blog-single::after {
    display: none !important;
    content: none !important;
}

.article-quick-kicker,
.toc-title {
    color: var(--refresh-accent);
}

.article-content,
.article-content p,
.article-content li,
.article-content blockquote {
    color: var(--refresh-ink);
}

.article-content {
    font-size: 16px;
    line-height: 1.95;
}

.article-actions .action-btn {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(57, 40, 27, 0.08);
}

.error-zen {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255, 219, 189, 0.5), transparent 26%),
        radial-gradient(circle at bottom right, rgba(189, 232, 228, 0.42), transparent 24%),
        linear-gradient(140deg, #fffdf9, #f5ede3);
    color: var(--refresh-ink);
}

.error-zen-shell {
    min-height: 100vh;
    padding: 28px;
    display: grid;
    place-items: center;
}

.error-zen-card {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
    gap: 24px;
    padding: 24px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 65px rgba(57, 40, 27, 0.1);
    backdrop-filter: blur(20px);
}

.error-zen-visual {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 224, 195, 0.8), transparent 24%),
        radial-gradient(circle at 65% 60%, rgba(177, 225, 219, 0.6), transparent 28%),
        linear-gradient(160deg, #fff6ee, #f6efe6 55%, #efe5d8);
    border: 1px solid rgba(57, 40, 27, 0.08);
}

.error-zen-orbit,
.error-zen-orbit::before,
.error-zen-orbit::after {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(91, 150, 140, 0.22);
}

.error-zen-orbit {
    width: 320px;
    height: 320px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.error-zen-orbit::before,
.error-zen-orbit::after {
    content: "";
    inset: 26px;
}

.error-zen-orbit::after {
    inset: 56px;
}

.error-zen-sphere {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 168px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.96), rgba(255, 226, 193, 0.92) 42%, rgba(228, 189, 150, 0.9) 70%, rgba(211, 130, 85, 0.82) 100%);
    box-shadow:
        inset -20px -24px 38px rgba(163, 92, 53, 0.16),
        0 18px 44px rgba(210, 104, 67, 0.16);
}

.error-zen-dot {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(57, 40, 27, 0.12);
}

.error-zen-dot.dot-a {
    width: 16px;
    height: 16px;
    left: 18%;
    top: 26%;
}

.error-zen-dot.dot-b {
    width: 22px;
    height: 22px;
    right: 16%;
    top: 22%;
}

.error-zen-dot.dot-c {
    width: 14px;
    height: 14px;
    right: 24%;
    bottom: 22%;
}

.error-zen-code {
    position: absolute;
    left: 32px;
    bottom: 28px;
    font-size: clamp(4rem, 10vw, 7rem);
    line-height: 0.88;
    font-weight: 800;
    letter-spacing: -0.08em;
    color: rgba(36, 27, 24, 0.12);
}

.error-zen-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 8px 12px 8px;
}

.error-zen-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--refresh-teal);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}

.error-zen-kicker::before {
    content: "";
    width: 38px;
    height: 1px;
    background: currentColor;
}

.error-zen-copy h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 4vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    color: var(--refresh-ink);
}

.error-zen-copy p {
    margin: 0 0 26px;
    max-width: 34rem;
    color: var(--refresh-muted);
    font-size: 16px;
    line-height: 1.9;
}

.error-zen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.error-zen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(57, 40, 27, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--refresh-ink);
    font-weight: 700;
}

.error-zen-btn.primary {
    background: var(--refresh-accent);
    border-color: var(--refresh-accent);
    color: #fff;
    box-shadow: 0 16px 28px rgba(210, 104, 67, 0.18);
}

.error-zen-meta {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.error-zen-pill {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(57, 40, 27, 0.08);
    color: var(--refresh-muted);
    font-size: 12px;
}

@media (max-width: 991px) {
    body.home .home-spotlight,
    body.blog .home-spotlight,
    .error-zen-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.home .home-spotlight,
    body.blog .home-spotlight {
        padding: 22px;
        border-radius: 26px;
    }

    .home-post-card.list-one.post-list {
        padding: 14px;
    }

    .home-post-media {
        padding-right: 0;
        margin-bottom: 14px;
    }

    .home-sprite {
        width: 76px;
        left: 10px;
        bottom: 10px;
    }

    .error-zen-shell {
        padding: 14px;
    }

    .error-zen-card {
        padding: 14px;
        border-radius: 28px;
    }

    .error-zen-visual {
        min-height: 360px;
        border-radius: 24px;
    }
}
/* Home pet sprite refresh */
.home-post-author-meta {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.home-sprite {
    width: clamp(108px, 11vw, 156px);
}

.home-pet {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    --pet-x: 0px;
    --pet-y: 0px;
    animation: petFloat 4.8s ease-in-out infinite;
}

.home-pet-shadow {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 6%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 163, 74, 0.42), rgba(255, 163, 74, 0.06) 72%, transparent 100%);
    filter: blur(2px);
    animation: petShadow 4.8s ease-in-out infinite;
}

.home-pet-body {
    position: absolute;
    inset: 0;
    transform: translate(var(--pet-x), var(--pet-y));
    transition: transform 180ms ease-out;
}

.home-pet-dog {
    position: absolute;
    left: 50%;
    top: 8%;
    width: 64%;
    height: 56%;
    transform: translateX(-50%);
    border-radius: 44% 44% 38% 38%;
    background: linear-gradient(180deg, #fffefb 0%, #fff7ef 52%, #ffe9da 100%);
    box-shadow: 0 18px 26px rgba(135, 88, 61, 0.08);
}

.home-pet-ear {
    position: absolute;
    top: 2%;
    width: 24%;
    height: 22%;
    border-radius: 48% 52% 62% 38%;
    background: #f0d7ca;
}

.home-pet-ear.left {
    left: 4%;
    transform: rotate(-18deg);
}

.home-pet-ear.right {
    right: 4%;
    transform: scaleX(-1) rotate(-18deg);
}

.home-pet-eye {
    position: absolute;
    top: 37%;
    width: 14%;
    height: 16%;
    border-radius: 50%;
    background: #3a2e2a;
    overflow: hidden;
}

.home-pet-eye.left {
    left: 26%;
}

.home-pet-eye.right {
    right: 26%;
}

.home-pet-eye .pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 34%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}

.home-pet-nose {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10%;
    height: 7%;
    transform: translateX(-50%);
    border-radius: 50% 50% 65% 65%;
    background: #6e4f47;
}

.home-pet-mouth {
    position: absolute;
    left: 50%;
    top: 57%;
    width: 16%;
    height: 10%;
    transform: translateX(-50%);
    border-bottom: 3px solid #6e4f47;
    border-radius: 0 0 32px 32px;
}

.home-pet-blush {
    position: absolute;
    top: 48%;
    width: 12%;
    height: 9%;
    border-radius: 50%;
    background: rgba(255, 177, 168, 0.72);
}

.home-pet-blush.left {
    left: 12%;
}

.home-pet-blush.right {
    right: 12%;
}

.home-pet-paw {
    position: absolute;
    bottom: -1%;
    width: 18%;
    height: 13%;
    border-radius: 38px;
    background: linear-gradient(180deg, #fffaf5, #ffe9d8);
}

.home-pet-paw.left {
    left: 16%;
    transform: rotate(6deg);
}

.home-pet-paw.right {
    right: 16%;
    transform: rotate(-6deg);
}

.home-pet-bowl {
    position: absolute;
    left: 50%;
    bottom: 11%;
    width: 82%;
    height: 36%;
    transform: translateX(-50%);
    border-radius: 30% 30% 38% 38%;
    background: linear-gradient(180deg, #cc4b2f 0%, #c84228 28%, #b23822 100%);
    box-shadow: inset 0 -10px 0 rgba(105, 33, 21, 0.16);
}

.home-pet-bowl-rim {
    position: absolute;
    inset: 0 0 auto 0;
    height: 18%;
    border-radius: 999px;
    background: linear-gradient(180deg, #92311f, #7f2819);
}

.home-pet-bowl-base {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 28%;
    height: 16%;
    transform: translateX(-50%);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #8b2f1e, #6f2618);
}

.home-pet-bowl-line {
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgba(255, 196, 173, 0.22);
    border-color: rgba(255, 196, 173, 0.22) transparent transparent transparent;
}

.home-pet-bowl-line.line-1 {
    left: 12%;
    top: 34%;
    width: 38%;
    height: 28%;
    transform: rotate(10deg);
}

.home-pet-bowl-line.line-2 {
    right: 12%;
    top: 30%;
    width: 34%;
    height: 24%;
    transform: rotate(-12deg);
}

.home-pet-bowl-line.line-3 {
    left: 30%;
    bottom: 18%;
    width: 28%;
    height: 16%;
    transform: rotate(6deg);
}

.home-pet-sparkles {
    position: absolute;
    inset: 0;
}

.home-pet-sparkles span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 213, 172, 0.82);
    box-shadow: 0 0 10px rgba(255, 213, 172, 0.7);
    animation: petSparkle 4.5s ease-in-out infinite;
}

.home-pet-sparkles span:nth-child(1) {
    width: 10px;
    height: 10px;
    left: 2%;
    top: 24%;
}

.home-pet-sparkles span:nth-child(2) {
    width: 8px;
    height: 8px;
    right: 6%;
    top: 18%;
    animation-delay: 1.1s;
}

.home-pet-sparkles span:nth-child(3) {
    width: 9px;
    height: 9px;
    left: 16%;
    bottom: 18%;
    animation-delay: 2s;
}

@keyframes petFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes petShadow {
    0%, 100% { transform: scale(0.94); opacity: 0.72; }
    50% { transform: scale(1); opacity: 0.92; }
}

@keyframes petSparkle {
    0%, 100% { transform: translateY(0) scale(0.95); opacity: 0.55; }
    50% { transform: translateY(-10px) scale(1.08); opacity: 1; }
}

.home-sprite {
    width: clamp(118px, 12vw, 168px);
}

.home-anime {
    position: relative;
    width: 100%;
    aspect-ratio: 0.82;
    --anime-x: 0px;
    --anime-y: 0px;
    animation: animeFloat 5.2s ease-in-out infinite;
}

.home-anime-shadow {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 4%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 157, 214, 0.28), rgba(94, 157, 214, 0.04) 70%, transparent 100%);
    filter: blur(4px);
    animation: animeShadow 5.2s ease-in-out infinite;
}

.home-anime-frame {
    position: absolute;
    inset: 0;
    border-radius: 32px 32px 26px 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,248,255,.8));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 20px 46px rgba(46, 91, 135, 0.16);
    overflow: hidden;
    transform: translate(var(--anime-x), var(--anime-y));
    transition: transform 180ms ease-out;
}

.home-anime-frame::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,239,184,.56), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events: none;
}

.home-anime-character {
    position: absolute;
    inset: 8px 8px 18px;
    border-radius: 24px 24px 18px 18px;
    background-size: cover;
    background-position: center 18%;
    transform: translate(calc(var(--anime-x) * 1.25), calc(var(--anime-y) * 1.25));
    transition: transform 180ms ease-out;
}

.home-anime-badge {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20, 37, 58, 0.78);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 18px rgba(20, 37, 58, 0.2);
}

.home-anime-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-anime-orbs span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 214, 132, 0.88);
    box-shadow: 0 0 14px rgba(255, 214, 132, 0.72);
    animation: animeOrb 4.4s ease-in-out infinite;
}

.home-anime-orbs span:nth-child(1) {
    width: 12px;
    height: 12px;
    left: -2px;
    top: 24%;
}

.home-anime-orbs span:nth-child(2) {
    width: 8px;
    height: 8px;
    right: 4px;
    top: 15%;
    animation-delay: 1.1s;
}

.home-anime-orbs span:nth-child(3) {
    width: 10px;
    height: 10px;
    left: 14%;
    bottom: 16%;
    animation-delay: 2s;
}

@keyframes animeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes animeShadow {
    0%, 100% { transform: scale(0.94); opacity: 0.72; }
    50% { transform: scale(1); opacity: 0.95; }
}

@keyframes animeOrb {
    0%, 100% { transform: translateY(0) scale(0.95); opacity: 0.6; }
    50% { transform: translateY(-8px) scale(1.08); opacity: 1; }
}

/* Anime sprite override */
.home-sprite {
    width: clamp(138px, 13.5vw, 196px);
    z-index: 42;
}

.home-anime {
    position: relative;
    width: 100%;
    aspect-ratio: 0.9;
    --anime-x: 0px;
    --anime-y: 0px;
    animation: animeFloatDeluxe 5.8s ease-in-out infinite;
}

.home-anime-shadow {
    left: 16%;
    right: 16%;
    bottom: 2%;
    height: 10%;
    background: radial-gradient(circle, rgba(76, 125, 190, 0.22), rgba(76, 125, 190, 0.04) 72%, transparent 100%);
    filter: blur(6px);
}

.home-anime-frame {
    inset: 10px 4px 12px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.9)),
        linear-gradient(145deg, rgba(170, 214, 255, 0.15), rgba(255, 210, 236, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        0 24px 44px rgba(63, 109, 165, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translate(var(--anime-x), var(--anime-y)) rotate(calc(var(--anime-x) * 0.18deg));
    backdrop-filter: blur(16px);
}

.home-anime-frame::before {
    inset: 0;
    border-radius: 34px;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 230, 180, 0.58), transparent 16%),
        radial-gradient(circle at 78% 12%, rgba(171, 223, 255, 0.42), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
}

.home-anime-aura {
    position: absolute;
    inset: 16px 18px 24px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 222, 185, 0.4), transparent 26%),
        radial-gradient(circle at 70% 70%, rgba(173, 224, 255, 0.34), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.home-anime-character {
    inset: 16px 18px 30px;
    border-radius: 26px;
    background-size: cover;
    background-position: center 14%;
    box-shadow:
        inset 0 -28px 44px rgba(28, 44, 77, 0.18),
        0 12px 28px rgba(70, 112, 171, 0.12);
    transform: translate(calc(var(--anime-x) * 1.3), calc(var(--anime-y) * 1.3)) scale(1.02);
}

.home-anime-character::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        linear-gradient(0deg, rgba(22, 34, 58, 0.14), rgba(22, 34, 58, 0));
}

.home-anime-badge {
    bottom: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(17, 34, 55, 0.82);
    color: #fff8f1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.home-anime-orbs span:nth-child(1) {
    width: 14px;
    height: 14px;
    left: 2px;
    top: 18%;
}

.home-anime-orbs span:nth-child(2) {
    width: 10px;
    height: 10px;
    right: -2px;
    top: 24%;
}

.home-anime-orbs span:nth-child(3) {
    width: 12px;
    height: 12px;
    left: 22%;
    bottom: 10%;
}

.home-anime-ribbons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-anime-ribbons span {
    position: absolute;
    width: 28px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 187, 209, 0.88), rgba(255, 232, 165, 0.92));
    box-shadow: 0 8px 18px rgba(255, 192, 203, 0.25);
    opacity: 0.82;
    animation: animeRibbon 5.4s ease-in-out infinite;
}

.home-anime-ribbons span:first-child {
    right: -6px;
    bottom: 26px;
    transform: rotate(28deg);
}

.home-anime-ribbons span:last-child {
    left: -10px;
    top: 34px;
    width: 22px;
    transform: rotate(-22deg);
    animation-delay: 1.3s;
}

@keyframes animeFloatDeluxe {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-1.2deg); }
}

@keyframes animeRibbon {
    0%, 100% { transform: translateY(0) rotate(28deg); opacity: 0.7; }
    50% { transform: translateY(-6px) rotate(34deg); opacity: 1; }
}

.home-anime-ribbons span:last-child {
    animation-name: animeRibbonAlt;
}

@keyframes animeRibbonAlt {
    0%, 100% { transform: translateY(0) rotate(-22deg); opacity: 0.72; }
    50% { transform: translateY(-5px) rotate(-14deg); opacity: 1; }
}

@media (max-width: 768px) {
    .home-sprite {
        width: 104px;
    }

    .home-anime-frame {
        border-radius: 26px;
    }

    .home-anime-character,
    .home-anime-aura {
        inset: 12px 12px 24px;
        border-radius: 20px;
    }
}