body {
    background:linear-gradient(145deg,#fff9f7 0%,#ffeef4 100%);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:#2e2a2b;
    line-height:1.5;
    scroll-behavior:smooth;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.sakura-flurry {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
}
.petal {
    position:absolute;
    top:-10%;
    pointer-events:none;
    z-index:10;
    border-radius:40% 60% 70% 30%;
    animation:fall linear forwards;
    will-change:transform,opacity;
}
@keyframes fall {
    0% {
        transform:translateY(-20vh) rotate(0deg);
        opacity:0.6;
    }
    80% {
        opacity:0.9;
    }
    100% {
        transform:translateY(100vh) rotate(360deg);
        opacity:0;
    }
}
.blog-footer {
    text-align:center;
    padding:1.5rem 0 0.5rem;
    color:#b88a98;
    font-size:0.85rem;
    line-height:1.9;
    margin-top:1rem;
}
.blog-footer p {
    margin:0.15rem 0;
}
.blog-footer .sakura-icon {
    color:#e982a2;
}
.blog-title {
    font-size:2.8rem;
    font-weight:600;
    font-family:'Noto Serif SC',serif;
    background:linear-gradient(135deg,#e6728f,#b34262);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    display:inline-flex;
    align-items:center;
    gap:10px;
    letter-spacing:-0.5px;
}
.blog-title i {
    background:none;
    color:#ec8ca8;
    font-size:2.2rem;
}
.subhead {
    margin-top:0.5rem;
    font-size:0.95rem;
    color:#b45f6e;
    background:#fff0f3aa;
    display:inline-block;
    padding:0.3rem 1.2rem;
    border-radius:40px;
    backdrop-filter:blur(2px);
}
hr.sakura-divider {
    margin:2rem 0;
    border:none;
    height:2px;
    background:linear-gradient(90deg,transparent,#f7bfd2,#ff90b5,#f7bfd2,transparent);
}
.social-links {
    display:flex;
    justify-content:center;
    gap:1.8rem;
    margin:2rem 0 1rem;
    flex-wrap:wrap;
}
.social-links a {
    background:#fff1f4;
    width:44px;
    height:44px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#dc7c99;
    font-size:1.4rem;
    transition:var(--d-2);
    text-decoration:none;
    border:1px solid #ffd2df;
}
.social-links a:hover {
    background:#ffe2ea;
    color:#b84f6e;
    translate:0 -3px;
}
@media (max-width:768px) {
    body {
        -webkit-text-size-adjust:100%;
    }
    .about-container,.container,main,.page-container {
        padding:0.8rem 0.9rem 2rem !important;
        margin:0.5rem 0.4rem !important;
    }
    .blog-title {
        font-size:1.55rem !important;
    }
    .subhead {
        font-size:0.85rem !important;
    }
    .intro-name {
        font-size:1.35rem !important;
    }
    .sakura-avatar-frame {
        width:100px !important;
        height:100px !important;
    }
    .info-grid,.grid,.card-grid {
        grid-template-columns:1fr !important;
        gap:0.6rem;
    }
    .profile-card,.card,.post-card {
        padding:1rem !important;
    }
    img,video,iframe,canvas {
        max-width:100% !important;
        height:auto;
    }
    .sakura-flurry,#sakura-flurry {
        opacity:0.3;
    }
    table {
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }
}
@media (max-width:1024px) {
}
@media (max-width:768px) {
    body {
        font-size:15px !important;
        -webkit-text-size-adjust:100% !important;
    }
    .about-container,.container,main,.page-container,.profile-card,.card,.post-card,.page-card {
        width:auto !important;
        max-width:100% !important;
        margin:0.5rem 0.5rem !important;
        padding:1rem 0.9rem !important;
        box-sizing:border-box !important;
    }
    a,button,.btn,input[type="submit"],input[type="button"] {
        -webkit-tap-highlight-color:rgba(255,182,193,0.25) !important;
    }
    /* 触控目标下限 44x44（WCAG 2.5.5 与 iOS HIG 的 44pt 都是这个数）。
       原来写 40px，而且带 !important —— mobile.css 那节「A4 触控目标放大」
       里的 44px 全被它压住，等于白写。实测全站 303 个控件不达标，这一条是
       约 250 个的主要来源。
       min-width 也必须给：图标型按钮（收藏心 .track-fav、App Bar 的两个钮）
       高度够但只有 35~36px 宽。
       .pl-view 仍排除在外 —— 音乐页那一行控件是特意排成不换行的。 */
    button:not(.pl-view),.btn {
        min-height:44px !important;
        min-width:44px !important;
        padding:0.5rem 1.1rem !important;
        font-size:0.95rem !important;
    }
    /* 上面那条的 1.1rem 横向内边距是按普通按钮定的，但 .tv-ep 是选集网格里的
       方块，宽度只有 66px，塞进 35.2px 的左右内边距后文字就被挤成「第…」了。
       这类按钮的内边距与字号都由 tv.css 自己管，这里整体交还（padding 与
       font-size 都还原成 tv.css 的值）。放在上面那条之后才压得住 —— 同权重下
       后者胜。min-height:44px 不还原：触控下限仍由上面那条兜住，
       而 .tv-ep 靠 tv.css 的纵向内边距本来就有 44px 高。 */
    button.tv-ep,
    button.tv-ep-tab {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .blog-title {
        font-size:1.5rem !important;
    }
    .subhead {
        font-size:0.85rem !important;
        line-height:1.6 !important;
    }
    .intro-name {
        font-size:1.35rem !important;
    }
    .sakura-avatar-frame {
        width:96px !important;
        height:96px !important;
        margin:0 auto 0.8rem !important;
    }
    .info-grid,.grid,.card-grid,.link-grid {
        grid-template-columns:1fr !important;
        gap:0.7rem !important;
    }
    img,video,iframe,canvas,audio {
        max-width:100% !important;
        height:auto !important;
    }
    .sakura-flurry,#sakura-flurry {
        opacity:0.3 !important;
    }
    table {
        display:block !important;
        overflow-x:auto !important;
    }
    .social-links {
        gap:1rem !important;
    }
    .social-links a {
        min-width:44px !important;
        min-height:44px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
}
@media (max-width:420px) {
    .blog-title {
        font-size:1.3rem !important;
    }
}
#page-progress {
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:linear-gradient(90deg,#ffc2d1,#ff8fab);
    z-index:99999;
    border-radius:0 3px 3px 0;
    box-shadow:0 0 8px #ff8fab88;
}
.reveal-init {
    opacity:0 !important;
    transform:translateY(26px) !important;
}
.reveal-in {
    opacity:1;
    transform:translateY(0);
    transition:opacity var(--d-5) var(--e-out),transform var(--d-5) var(--e-out) !important;
}
a, button, .btn, .link-card {
    transition:transform var(--d-2) var(--e-spring),box-shadow var(--d-2) var(--e-out),background var(--d-2) var(--e-out) !important;
}
button:hover, .btn:hover {
    translate:0 -2px;
}
a:active,button:active,.btn:active {
    transform:translateY(0) scale(.96);
}
@media (prefers-reduced-motion:reduce) {
    .reveal-init {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    #page-progress {
        display:none;
    }
}
.blog-title {
    background:linear-gradient(90deg,#ffb6c1,#ff8fab,#c98cf5,#ffb6c1);
    background-size:300% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:titleFlow 6s ease-in-out infinite;
}
@keyframes titleFlow {
    0% {
        background-position:0% 50%;
    }
    50% {
        background-position:100% 50%;
    }
    100% {
        background-position:0% 50%;
    }
}
.profile-card,.card,.post-card,.page-card,.player-card,.work-card {
    animation:cardFloat 6s ease-in-out infinite;
}
.profile-card:nth-child(2n),.card:nth-child(2n),.work-card:nth-child(2n) {
    animation-delay:1.2s;
}
.profile-card:nth-child(3n),.card:nth-child(3n),.work-card:nth-child(3n) {
    animation-delay:2.4s;
}
@keyframes cardFloat {
    0%,100% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-6px);
    }
}
body {
    background-size:200% 200% !important;
    animation:bgFlow 18s ease-in-out infinite;
}
@keyframes bgFlow {
    0% {
        background-position:0% 0%;
    }
    50% {
        background-position:100% 100%;
    }
    100% {
        background-position:0% 0%;
    }
}
.page-tab,.btn,.ctrl-btn,.mode-chip {
    animation:btnGlow 3s ease-in-out infinite;
}
@keyframes btnGlow {
    0%,100% {
        box-shadow:0 0 0 0 rgba(255,143,171,0);
    }
    50% {
        box-shadow:0 0 14px 2px rgba(255,143,171,.35);
    }
}
.subhead {
    animation:breath 4s ease-in-out infinite;
}
@keyframes breath {
    0%,100% {
        opacity:.75;
    }
    50% {
        opacity:1;
    }
}
.social-links a i {
    transition:transform var(--d-4) var(--e-spring);
}
.social-links a:hover i {
    rotate:20deg;
    scale:1.25;
}
@media (max-width:768px),(prefers-reduced-motion:reduce) {
    .profile-card,.card,.post-card,.page-card,.player-card,.work-card {
        animation:none !important;
    }
    body {
        animation:none !important;
    }
    .blog-title {
        animation:none !important;
        -webkit-text-fill-color:#b34262 !important;
        background:none !important;
    }
    .page-tab,.btn,.ctrl-btn,.mode-chip {
        animation:none !important;
    }
}
body.custom-cursor,body.custom-cursor a,body.custom-cursor button,body.custom-cursor .work-card,body.custom-cursor input,body.custom-cursor .btn,body.custom-cursor .page-tab,body.custom-cursor .ctrl-btn,body.custom-cursor .mode-chip,body.custom-cursor .link-card {
    cursor:none !important;
}
#sakura-cursor {
    position:fixed;
    left:0;
    top:0;
    font-size:22px;
    line-height:1;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 0 8px rgba(255,182,193,.85));
    transition:font-size var(--d-1) var(--e-out);
}
body.custom-cursor a:hover ~ #sakura-cursor,#sakura-cursor:hover {
    font-size:26px;
}
.sakura-tail {
    position:fixed;
    pointer-events:none;
    z-index:99998;
    line-height:1;
    opacity:.95;
    animation:tailFall 1.1s ease-out forwards;
    will-change:transform,opacity;
}
@keyframes tailFall {
    0% {
        opacity:.95;
        transform:translate(0,0) rotate(0deg) scale(1);
    }
    100% {
        opacity:0;
        transform:translate(var(--dx,40px),var(--dy,60px)) rotate(var(--dr,120deg)) scale(.45);
    }
}
@media (max-width:768px),(prefers-reduced-motion:reduce) {
    #sakura-cursor,.sakura-tail {
        display:none !important;
    }
    body.custom-cursor,body.custom-cursor a,body.custom-cursor button {
        cursor:auto !important;
    }
}
::-webkit-scrollbar {
    width:8px;
    height:8px;
}
::-webkit-scrollbar-track {
    background:rgba(255,238,242,0.4);
    border-radius:10px;
}
::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg,#f3a0bb,#e57397);
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg,#e57397,#c25f7e);
}
* {
    scrollbar-width:thin;
    scrollbar-color:#e57397 rgba(255,238,242,0.4);
}
html {
    scroll-behavior:smooth;
}
::selection {
    background:#f3a0bb;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.15);
}
input,textarea,select {
    font-family:inherit;
    transition:border-color var(--d-2),box-shadow var(--d-2),background var(--d-2);
}
input:focus,textarea:focus,select:focus {
    outline:none;
    border-color:#e57397 !important;
    box-shadow:0 0 0 3px rgba(229,115,151,0.18);
}
button,.btn,.page-tab,.ctrl-btn,.mood-btn,.emoji-item,.copy-msg-btn,.quote-refresh {
    -webkit-tap-highlight-color:transparent;
}
button:active,.btn:active,.page-tab:active,.ctrl-btn:active,.mood-btn:active,.emoji-item:active {
    transform:scale(0.96) !important;
}
.profile-card,.card,.post-card,.page-card,.player-card,.work-card,.section-block,.media-card,.message-card,.tool-panel,.poem-card,.word-card,.mood-card,.lunar-card,.countdown-card,.pomodoro-card,.journal-weather,.week-weather,.gh-event,.hot-item,.advice-box,.bili-stats,.stat-item,.clock-item,.time-machine,.ghchart-box,.random-img-box img {
    transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out);
}
@media (hover:hover) {
    .post-card:hover,.media-card:hover,.message-card:hover,.stat-item:hover,.clock-item:hover,.hot-item:hover,.gh-event:hover {
        translate:0 -3px;
        box-shadow:0 8px 20px rgba(229,115,151,0.15);
    }
}
.random-img-box img:hover {
    scale:1.01;
}
a {
    transition:color var(--d-2) var(--e-out),opacity var(--d-2) var(--e-out);
}
.giscus-wrapper iframe {
    border-radius:10px;
}
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    * {
        transition:none !important;
    }
}
.sakura-spinner {
    display:inline-block;
    width:16px;
    height:16px;
    border:2px solid rgba(243,160,187,0.3);
    border-top-color:#e57397;
    border-radius:50%;
    animation:sakuraSpin 0.7s linear infinite;
    vertical-align:-2px;
    margin-right:6px;
}
@keyframes sakuraSpin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes petalFloat {
    0%,100% {
        transform:translateY(0) rotate(0deg);
        opacity:1;
    }
    50% {
        transform:translateY(-8px) rotate(20deg);
        opacity:0.7;
    }
}
.status-message.loading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.btn-primary {
    background:linear-gradient(135deg,#f3a0bb,#e57397);
    border:none;
    padding:10px 20px;
    border-radius:40px;
    color:#fff;
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    transition:all var(--d-2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:inherit;
    box-shadow:0 3px 10px rgba(229,115,151,0.25);
}
.btn-primary:hover {
    translate:0 -2px;
    box-shadow:0 5px 16px rgba(229,115,151,0.4);
    filter:brightness(1.05);
}
.btn-secondary {
    background:#ffecf0;
    border:1px solid #ffcdda;
    padding:10px 20px;
    border-radius:40px;
    color:#c25f7e;
    font-weight:500;
    font-size:0.85rem;
    cursor:pointer;
    transition:all var(--d-2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:inherit;
}
.btn-secondary:hover {
    background:#ffe2ea;
    color:#a34f6b;
    translate:0 -2px;
}
.btn-cherry,.cherry-btn {
    background:#ffeef2;
    border:1px solid #ffcdda;
    padding:8px 18px;
    border-radius:40px;
    font-size:0.85rem;
    font-weight:500;
    color:#bf6a85;
    cursor:pointer;
    transition:all var(--d-2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:inherit;
}
.btn-cherry:hover,.cherry-btn:hover {
    background:#ffe2ea;
    color:#a34f6b;
    translate:0 -2px;
}
.btn-sm {
    padding:4px 12px !important;
    font-size:0.8rem !important;
    gap:6px !important;
}
.button-group {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-cherry):not(.cherry-btn):not(.bn-item):not(.submit-btn):not(.submit-glow):not(.unlock-btn):not(.copy-drive-btn):not(.quote-refresh):not(.sort-btn):not(.tool-tab):not(.page-tab):not(.mood-btn):not(.ctrl-btn):not(.play-main):not(.mode-chip):not(.filter-tab):not(.external-link):not(.social-links a) {
    color:#c2557a !important;
    text-decoration:none !important;
    border-bottom:1px solid #ffb3c9;
    transition:color var(--d-2) var(--e-out),border-bottom-color var(--d-2) var(--e-out);
}
a:not(.btn):not(.bn-item):not(.external-link):not(.social-links a):hover {
    color:#a14563 !important;
    border-bottom-color:#e57397;
}
#sakura-loading-layer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(160deg,#fff7f4,#ffeef4,#ffdde8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:opacity var(--d-3) var(--e-out);
}
#sakura-loading-layer.fade-out {
    opacity:0;
}
#sakura-loading-layer .loading-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
#sakura-loading-layer .loading-text {
    color:#c2557a;
    font-size:.85rem;
    letter-spacing:2px;
}
html.app-loading #page-progress {
    opacity:0;
}
html.app-ready #sakura-loading-layer {
    display:none;
}
h1.blog-title {
    margin:0;
    padding:0;
}