/*
 * Theme Name: SoulMate
 * Description: 森木志博客自用模板
 * Version: 1.0
 * Author: 森木志
 */

@import url("assets/fonts/OldSong/result.css");

:root {
    --bg: #f3ead2;
    --text: #2e382f;
    --muted: #626b61;
    --line: #d9ceb2;
    --soft: #eee3c8;
    --accent: #3f654f;
    --surface: #f8f2df;
    --surface-elevated: #efe3c4;
    --surface-tint: #f5edd8;
    --surface-muted: #e8ddc0;
    --subtle-text: #92978d;
    --shadow-color: #000;
    --mark-bg: #ddd6a9;
    --selection-bg: #3f654f;
    --selection-text: #fff;
    --panel-bg: color-mix(in srgb, var(--surface) 76%, var(--bg));
    --panel-bg-strong: color-mix(in srgb, var(--surface) 82%, var(--bg));
    --panel-bg-subtle: color-mix(in srgb, var(--surface) 20%, transparent);
    --panel-bg-medium: color-mix(in srgb, var(--surface) 42%, transparent);
    --panel-border: color-mix(in srgb, var(--text) 26%, var(--line));
    --panel-border-soft: color-mix(in srgb, var(--accent) 22%, var(--line));
    --panel-shadow: 0 18px 50px color-mix(in srgb, var(--shadow-color) 18%, transparent);
    --divider-color: color-mix(in srgb, var(--line) 40%, transparent);
    --interactive-hover: color-mix(in srgb, var(--accent) 5%, transparent);
    --canvas-background-image: url("assets/img/textures/paper.png");
    --canvas-background-size: 180px 180px;
    --font-sans: "OldSong", "Songti SC", "SimSun", serif;
    --radius-md: 3px;
    --frame-width: 900px;
    --sidebar-width: 220px;
    --layout-gap: 56px;
}

html[data-palette="pine"]:not(.theme-dark) {
    --bg: #dfe9d8;
    --text: #1f3829;
    --muted: #546756;
    --line: #b5c8b4;
    --soft: #d1dfcd;
    --accent: #2d6546;
    --surface: #f0f3e8;
    --surface-elevated: #d4e1d0;
    --surface-tint: #e8efe2;
    --surface-muted: #c8d8c4;
    --subtle-text: #829383;
    --mark-bg: #d7d39e;
    --selection-bg: #2d6546;
    --panel-bg: #edf2e7;
    --panel-bg-strong: #f4f6ee;
    --panel-bg-subtle: color-mix(in srgb, var(--surface) 56%, transparent);
    --panel-bg-medium: color-mix(in srgb, var(--surface) 74%, transparent);
    --panel-border: color-mix(in srgb, var(--accent) 26%, var(--line));
    --panel-border-soft: color-mix(in srgb, var(--accent) 20%, var(--line));
    --panel-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 9%, transparent);
    --divider-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    --interactive-hover: color-mix(in srgb, var(--accent) 7%, transparent);
    --canvas-background-image: url("assets/img/textures/pine.png");
    --canvas-background-size: 102px 102px;
}

html[data-palette="moon"]:not(.theme-dark) {
    --bg: #e9ece8;
    --text: #27383a;
    --muted: #5c6868;
    --line: #c6ccc6;
    --soft: #dde5e1;
    --accent: #3d686c;
    --surface: #f4f6f2;
    --surface-elevated: #dde5e1;
    --surface-tint: #eef2ee;
    --surface-muted: #d3dcd6;
    --subtle-text: #8c9896;
    --mark-bg: #d9ddb9;
    --selection-bg: #3d686c;
    --panel-bg: color-mix(in srgb, var(--surface) 72%, var(--bg));
    --panel-bg-strong: color-mix(in srgb, var(--surface) 88%, var(--bg));
    --panel-bg-subtle: color-mix(in srgb, var(--surface) 44%, transparent);
    --panel-bg-medium: color-mix(in srgb, var(--surface) 64%, transparent);
    --panel-border: color-mix(in srgb, var(--accent) 18%, var(--line));
    --panel-border-soft: color-mix(in srgb, var(--accent) 14%, var(--line));
    --panel-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 7%, transparent);
    --divider-color: color-mix(in srgb, var(--accent) 14%, var(--line));
    --interactive-hover: color-mix(in srgb, var(--accent) 5%, transparent);
    --canvas-background-image: url("assets/img/textures/moon.png");
    --canvas-background-size: 180px 180px;
}

html.theme-dark {
    --bg: #161c25;
    --text: #e3ebf8;
    --muted: #9eabc1;
    --line: #2c3544;
    --grid-line: color-mix(in srgb, var(--line) 20%, transparent);
    --soft: #1e2732;
    --accent: #adc6f5;
    --surface: #fff;
    --surface-elevated: #f8f8f6;
    --surface-tint: #f8faf7;
    --surface-muted: #eef3ee;
    --subtle-text: #cfd4dc;
    --shadow-color: #000;
    --mark-bg: #f2f1c8;
    --selection-bg: #58756e;
    --selection-text: #fff;
    --panel-bg: color-mix(in srgb, var(--soft) 76%, var(--bg));
    --panel-bg-strong: color-mix(in srgb, var(--soft) 82%, var(--bg));
    --panel-bg-subtle: color-mix(in srgb, var(--surface) 20%, transparent);
    --panel-bg-medium: color-mix(in srgb, var(--surface) 42%, transparent);
    --panel-border: color-mix(in srgb, var(--text) 26%, var(--line));
    --panel-border-soft: color-mix(in srgb, var(--accent) 22%, var(--line));
    --panel-shadow: 0 18px 50px color-mix(in srgb, var(--shadow-color) 18%, transparent);
    --divider-color: color-mix(in srgb, var(--line) 40%, transparent);
    --interactive-hover: color-mix(in srgb, var(--accent) 5%, transparent);
    --canvas-background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    --canvas-background-size: 5px 5px;
}

::selection {
    color: var(--selection-text);
    background: var(--selection-bg);
}

@view-transition {
    navigation: auto;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background-color: var(--bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    background-position: center top;
}

body {
    width: min(var(--frame-width), calc(100% - 32px));
    margin: 0 auto;
    color: var(--text);
    background: transparent;
    font-size: 13px;
    line-height: 1.82;
    font-family: var(--font-sans);
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    column-gap: var(--layout-gap);
    align-items: start;
}

button,
input,
textarea,
select {
    font-family: var(--font-sans);
}

main.main {
    transition: opacity .24s ease, transform .26s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0);
    overflow: clip;
}

main.main.is-pjax-enter {
    opacity: 0.01;
    transform: translateY(8px);
}

main.main.is-pjax-enter-active {
    opacity: 1;
    transform: translateY(0);
}

#sen-pjax-progress {
    position: fixed;
    right: 12px;
    top: 25px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--line) 58%, transparent);
    border-top-color: color-mix(in srgb, var(--accent) 92%, var(--surface) 8%);
    border-right-color: color-mix(in srgb, var(--accent) 36%, transparent);
    background: transparent;
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    transform: scale(.82);
}

#sen-pjax-progress.is-active {
    opacity: 1;
    transform: scale(1);
}

.sen-sr-only {
    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;
}

.is-pjax-pending {
    opacity: 0.55;
    pointer-events: none;
    cursor: progress;
}

html.is-pjax-loading #sen-pjax-progress.is-active {
    animation: senPjaxSpinner .82s linear infinite;
}

html,
body,
.site-header,
.site-footer,
.note-item,
.archive-item,
.entry,
.page-top,
:is(.page-content, .entry-content, .post-content),
.sen-comment-card,
.memo-item,
.icon-btn,
.nav-link,
.mobile-nav-link,
.archive-nav a,
.sen-comments-nav a,
.memo-btn,
.sen-comment-like,
    .sen-comment-reply,
    .sen-short-post,
    .sen-short-collapse,
    .sen-short-tabs,
    .sen-github-card {
    transition: color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, opacity .24s ease, transform .24s ease;
}


::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 9999;
    pointer-events: none;
}

::view-transition-new(root) {
    z-index: 1;
    pointer-events: none;
}

html.theme-dark::view-transition-old(root) {
    z-index: 1;
}

html.theme-dark::view-transition-new(root) {
    z-index: 9999;
}

html.is-palette-transition::view-transition-old(root) {
    z-index: 1;
}

html.is-palette-transition::view-transition-new(root) {
    z-index: 9999;
}

html.is-theme-transition.theme-dark::view-transition-old(root),
html.is-theme-transition:not(.theme-dark)::view-transition-new(root) {
    z-index: 1;
}

html.is-theme-transition.theme-dark::view-transition-new(root),
html.is-theme-transition:not(.theme-dark)::view-transition-old(root) {
    z-index: 9999;
}

html.is-theme-transition,
html.is-theme-transition *,
html.is-theme-transition *::before,
html.is-theme-transition *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

::view-transition-image-pair(root) {
    isolation: isolate;
}

::view-transition-group(root) {
    animation: none;
}

.sen-media-host {
    position: relative;
}

.sen-media-shell {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 3px;
    overflow: hidden;
}

:is(.entry-content, .page-content, .post-content) > .sen-media-shell,
:is(.entry-content, .page-content, .post-content) > p > .sen-media-shell,
:is(.entry-content, .page-content, .post-content) > p > a > .sen-media-shell,
:is(.entry-content, .page-content, .post-content) > .sen-media-shell:has(> a),
:is(.entry-content, .page-content, .post-content) > p > .sen-media-shell:has(> a) {
    display: block;
    width: 100%;
}

.sen-media-shell > a,
.sen-media-shell > img {
    display: block;
    max-width: 100%;
    border-radius: inherit;
}

.sen-media-host.is-media-loading {
    background: color-mix(in srgb, var(--soft) 92%, var(--bg) 8%);
}

.sen-media-host img {
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

.sen-media-host.is-media-loading img:not(.biaoqing):not(.sticker),
.sen-media-host.is-media-complete img:not(.biaoqing):not(.sticker) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
}

.sen-media-host.is-media-loaded img:not(.biaoqing):not(.sticker),
img.is-media-loaded:not(.biaoqing):not(.sticker) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.sen-media-host.is-media-error:is(.is-content-media, .is-memo-media) img:not(.biaoqing):not(.sticker) {
    display: none;
}

.is-media-disabled {
    pointer-events: none;
    cursor: default;
}

.sen-media-host.is-content-media.is-media-error {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 3px;
}

.sen-media-error-state {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: color-mix(in srgb, var(--soft) 76%, var(--bg) 24%);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
}

.sen-media-error-state iconify-icon {
    width: 24px;
    height: 24px;
    color: color-mix(in srgb, var(--muted) 78%, var(--accent));
}

.sen-image-frame.is-media-error[data-title]::after {
    display: none;
}

.memo-photo-link.is-media-error .sen-media-error-state {
    height: 100%;
    min-height: 0;
    gap: 5px;
    padding: 8px;
    font-size: 0.68rem;
}

.memo-photo-link.is-media-error .sen-media-error-state iconify-icon {
    width: 20px;
    height: 20px;
}

.memo-photos-grid.count-1 .memo-photo-link.is-media-error {
    width: 320px;
    max-width: 100%;
}

@media (max-width: 720px) {
    .sen-media-error-state {
        min-height: 140px;
    }

    .memo-photo-link.is-media-error .sen-media-error-state {
        min-height: 0;
    }
}

.sen-media-spinner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--accent) 76%, var(--muted));
    pointer-events: none;
    transition: opacity .22s ease;
}

.sen-media-spinner-svg {
    width: 22px;
    height: 22px;
    animation: senMediaSpin .8s linear infinite;
}

.sen-media-host.is-media-complete .sen-media-spinner,
.sen-media-host.is-media-loaded .sen-media-spinner,
.sen-media-host.is-media-error .sen-media-spinner {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .site-header,
    .site-footer,
    .note-item,
    .archive-item,
    .entry,
    .page-top,
    :is(.page-content, .entry-content, .post-content),
    .sen-comment-card,
    .memo-item,
    .icon-btn,
    .nav-link,
    .mobile-nav-link,
    .archive-nav a,
    .sen-comments-nav a,
    .memo-btn,
    .memo-compose-card,
    .memo-compose-close,
    .memo-image-add,
    .memo-compose-emoji-btn,
    .memo-compose-submit,
    .memo-confirm-card,
    .memo-login-modal,
    .memo-login-card,
    .soulmate-devtools-notice,
    .soulmate-devtools-notice-card,
    .about-reward-card,
    .sen-toast,
    .sen-comment-like,
    .sen-comment-reply,
    .sen-short-post,
    .sen-short-collapse,
    .sen-short-tabs,
    .sen-github-card,
    .palette-dialog,
    .palette-dialog-panel,
    .palette-option {
        transition: none !important;
        animation: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

@keyframes senPjaxSpinner {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes senMediaSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 701px) {
    html {
        overflow-y: scroll;
        scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
        scrollbar-width: thin;
    }
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 58%, transparent);
}

@media (max-width: 720px) {
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    *::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

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

.shell,
.content-shell {
    width: auto;
    margin: 0;
}

.site-header {
    width: auto;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 20;
    align-self: start;
    background: transparent;
    height: 100vh;
    padding-top: 78px;
    padding-bottom: 8px;
}

.site-header-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.header-left {
    display: none;
}

.header-center {
    justify-self: center;
}

.header-right {
    display: none;
}

.brand {
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.brand-mode {
    display: inline-flex;
    align-items: center;
    transition: opacity .2s ease, visibility .2s ease;
}

.brand-dark {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.brand-logo {
    height: 24px;
    width: auto;
    display: block;
}

.brand-title {
    display: inline-block;
}

.sidebar-profile {
    margin-top: auto;
    margin-left: 0;
    width: 92px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    position: relative;
}

html.theme-dark .brand-dark {
    opacity: 1;
    visibility: visible;
}

html.theme-dark .brand-light {
    opacity: 0;
    visibility: hidden;
}

.site-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 0;
    margin: 0;
}

.sidebar-tools {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    margin-bottom: auto;
    min-height: 44px;
}

.sidebar-palette-btn iconify-icon {
    transition: transform .22s ease;
}

.sidebar-palette-btn:hover iconify-icon {
    transform: rotate(-12deg) scale(1.06);
}

.sidebar-profile-dark {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.theme-dark .sidebar-profile-light {
    opacity: 0;
    visibility: hidden;
}

html.theme-dark .sidebar-profile-dark {
    opacity: 1;
    visibility: visible;
}

.nav-link {
    min-height: 0;
    width: auto;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    overflow: visible;
    color: var(--muted);
    border-radius: 0;
    transition: color .2s ease, background-color .2s ease, transform .12s ease;
    background: transparent;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--text) 44%, transparent);
}

.nav-link-btn {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.nav-link-text {
    position: static;
    transform: none;
    opacity: 1;
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1.3;
    margin: 0.625rem 0;
    padding: 0 0.18rem;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    text-decoration-color: transparent;
}

.nav-link:hover .nav-link-text,
.nav-link.is-active .nav-link-text {
    color: var(--bg);
    background: var(--text);
}

.icon-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.icon-btn:hover {
    color: var(--text);
}

.btn-login iconify-icon {
    transition: transform .26s ease;
}

.btn-login:hover iconify-icon {
    transform: translateX(2px) scale(1.06);
}

.nav-menu-btn {
    display: none;
}

.main {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin-left: 0;
    padding: 78px 0 72px 0;
    flex: 1 0 auto;
    min-width: 0;
}

.panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-empty-text {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.96rem;
}

.site-footer {
    --footer-size: 0.64rem;
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    padding: 28px 0 8px;
    font-size: var(--footer-size);
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
    margin-top: 0;
    display: grid !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    max-width: 100%;
    overflow-x: clip;
    z-index: 1;
    background: transparent;
    grid-template-columns: calc(var(--sidebar-width) + var(--layout-gap)) minmax(0, 1fr) auto;
}

.site-footer::after {
    display: none;
}

.site-footer-tagline,
.site-footer-bottom {
    grid-column: 2 / 4;
}

.site-footer-tagline {
    justify-self: start;
}

.site-footer-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 18px;
    min-width: 0;
}

.site-footer-meta {
    min-width: 0;
}

.site-footer-line {
    margin: 0;
}

.site-footer-right {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    color: var(--muted);
    margin-left: 0;
}

.site-footer-right a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
    padding-bottom: 1px;
}

.site-footer-right a:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--text) 42%, transparent);
}

.sen-backtop {
    --backtop-core-size: 1.08rem;
    position: fixed;
    right: 22px;
    top: 72%;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 3px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.95);
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
    background: color-mix(in srgb, var(--bg) 88%, var(--soft) 12%);
    box-shadow: none;
}

.sen-backtop-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: var(--backtop-core-size);
    color: var(--accent);
    display: inline-flex;
    opacity: 1;
    transition: opacity .2s ease, transform .2s ease;
}

.sen-backtop-label {
    display: none;
}

.sen-backtop.is-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.sen-backtop:hover {
    transform: translateY(-1px) scale(1.01);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    background: color-mix(in srgb, var(--soft) 46%, var(--bg));
}

.sen-backtop:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 68%, var(--line));
    outline-offset: 2px;
}

.mobile-drawer {
    display: none;
}

.palette-dialog {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.palette-dialog[hidden] {
    display: none;
}

.palette-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
}

.palette-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 19, 28, 0.34);
}

.palette-dialog-panel {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    color: var(--text);
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    box-shadow: var(--panel-shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.palette-dialog.is-open .palette-dialog-panel {
    opacity: 1;
    transform: translateY(0);
}

html.theme-dark .palette-dialog-panel {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.palette-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.palette-dialog-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0;
}

.palette-dialog-close {
    flex: 0 0 30px;
}

.palette-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.palette-option {
    min-width: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: var(--radius-md);
    color: var(--muted);
    background: color-mix(in srgb, var(--soft) 42%, transparent);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.palette-option:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    transform: translateY(-1px);
}

.palette-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
    outline-offset: 2px;
}

.palette-option.is-selected {
    color: var(--text);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--soft));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.palette-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: var(--radius-md);
    background: var(--soft);
}

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

.palette-option-paper .palette-cover {
    --preview-bg: #f3ead2;
    --preview-text: #2e382f;
    --preview-line: #d9ceb2;
    --preview-accent: #3f654f;
    --preview-texture: url("assets/img/textures/paper.png");
    --preview-texture-size: 180px 180px;
}

.palette-option-pine .palette-cover {
    --preview-bg: #dfe9d8;
    --preview-text: #1f3829;
    --preview-line: #b5c8b4;
    --preview-accent: #2d6546;
    --preview-texture: url("assets/img/textures/pine.png");
    --preview-texture-size: 102px 102px;
}

.palette-option-moon .palette-cover {
    --preview-bg: #e9ece8;
    --preview-text: #27383a;
    --preview-line: #c6ccc6;
    --preview-accent: #3d686c;
    --preview-texture: url("assets/img/textures/moon.png");
    --preview-texture-size: 180px 180px;
}

.palette-option-dark .palette-cover {
    --preview-bg: #161c25;
    --preview-text: #e3ebf8;
    --preview-line: #2c3544;
    --preview-accent: #6f938a;
    --preview-texture:
        linear-gradient(to right, color-mix(in srgb, var(--preview-line) 24%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--preview-line) 24%, transparent) 1px, transparent 1px);
    --preview-texture-size: 5px 5px;
}

.palette-cover.is-fallback {
    background-color: var(--preview-bg);
    background-image: var(--preview-texture);
    background-size: var(--preview-texture-size);
}

.palette-cover.is-fallback::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 28%;
    top: 28%;
    height: 2px;
    background: var(--preview-text);
    box-shadow: 0 10px 0 color-mix(in srgb, var(--preview-text) 64%, transparent), 0 20px 0 color-mix(in srgb, var(--preview-text) 38%, transparent);
}

.palette-cover.is-fallback::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 16%;
    height: 6px;
    background: var(--preview-accent);
}

.palette-option-name {
    display: block;
    margin-top: 8px;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0;
}

.entry {
    padding: 8px 0;
}

.entry h1 {
    margin: 0 0 6px;
}

.entry-meta {
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.entry-time,
.entry-reads {
    text-transform: none;
}

.entry-tail {
    margin-top: 28px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.entry-like {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--muted) 84%, var(--text));
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.entry-like-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    font-size: 1.3rem;
}

.entry-like-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.entry-like:hover {
    color: color-mix(in srgb, var(--text) 78%, var(--accent));
}

.entry-like.is-liked {
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
    cursor: default;
}

.entry-like.is-loading {
    opacity: .6;
}

.entry-sign {
    width: 90px;
    max-width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    color: color-mix(in srgb, var(--accent) 34%, var(--muted) 66%);
    opacity: .92;
}

.entry-poster-hook {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.entry-sign > svg {
    width: 100%;
    height: auto;
    display: none;
}

.entry-sign > .entry-sign-light {
    display: block;
}

.entry-sign > .entry-sign-dark {
    display: none;
}

html.theme-dark .entry-sign > .entry-sign-light {
    display: none;
}

html.theme-dark .entry-sign {
    color: color-mix(in srgb, var(--accent) 54%, var(--text) 46%);
    opacity: .88;
}

html.theme-dark .entry-sign > .entry-sign-dark {
    display: block;
}

.archive-title {
    margin: 0;
    font-size: 1.22rem;
    letter-spacing: 2px;
}

.page-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 30px;
}

.page-kicker {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-intro {
    padding: 0;
    margin: 0 0 18px;
    color: var(--muted);
}

.page-title-header,
.page-title-bar {
    padding-bottom: 0;
    border-bottom: 0;
}

.page-title-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 28px;
}

.page-title-header-plain {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.page-title-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 30px;
}

.page-title-heading {
    display: block;
    margin: 0;
    line-height: 1.1;
}

.page-title-eyebrow {
    margin: 0;
    color: color-mix(in srgb, var(--muted) 84%, var(--text));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-title-description {
    max-width: 58ch;
    margin: 0;
    color: color-mix(in srgb, var(--text) 72%, var(--muted));
    font-size: 0.92rem;
    line-height: 1.75;
}

.page-title-primary {
    font-size: 1.34rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}

/* 统一页面标题 */
.archive-item {
    padding: 18px 0 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}

.archive-item h2 {
    margin: 0 0 4px;
    font-size: 1.08rem;
}

.archive-item time {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.archive-item p {
    margin: 2px 0 0;
    color: var(--muted);
}

.archive-nav {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.82rem;
}

.archive-nav a,
.archive-nav .page-state,
.archive-nav .is-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.archive-nav a {
    color: var(--text);
}

.archive-nav a:hover {
    color: var(--bg);
    background: var(--text);
}

.archive-nav .page-state {
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.archive-nav .page-state,
.archive-nav .is-disabled {
    text-decoration: none;
}

.archive-nav .is-disabled {
    color: color-mix(in srgb, var(--muted) 45%, var(--line));
    cursor: default;
}

.sen-404-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 62vh, 620px);
}

.sen-404-card {
    width: 100%;
    max-width: 620px;
    text-align: center;
}

.sen-404-kicker {
    margin: 0 0 8px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}

.sen-404-card h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    line-height: 1.2;
}

.sen-404-desc {
    margin: 12px 0 10px;
    color: var(--muted);
}

.sen-404-path {
    margin: 0;
    color: color-mix(in srgb, var(--muted) 84%, var(--text));
    font-size: 0.9rem;
}

.sen-404-path code {
    font-family: var(--font-sans);
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 65%, transparent);
    border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
}

.sen-404-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.sen-404-btn {
    min-height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    font-size: 0.88rem;
}

.sen-404-btn.is-primary {
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.notes-page {
    max-width: none;
    min-width: 0;
    padding-right: 18px;
}

.notes-page > .note-item:first-of-type {
    padding-top: 4px;
}

.about-page {
    display: flex;
    flex-direction: column;
    gap: 34px;
    max-width: 820px;
}

.about-sheet {
    width: 100%;
}

.about-title-header {
    margin-bottom: 28px;
}

.about-title-note {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.75;
}

.about-overview {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 0 34px;
    align-items: start;
    margin-bottom: 30px;
}

.about-overview-grid {
    display: grid;
    grid-template-rows: repeat(4, auto);
    align-items: baseline;
    row-gap: 8px;
}

.about-profile-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 26px;
}

.about-profile-label {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.about-profile-text {
    color: var(--text);
    font-size: 0.72rem;
    line-height: 1.55;
}

.about-overview-grid .about-action-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.72rem;
    line-height: 1.55;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.about-overview-grid .about-action-link:hover {
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
    background: transparent;
}

.about-mobile-media {
    display: none;
}

.about-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    column-gap: 24px;
    row-gap: 8px;
    align-items: baseline;
    justify-items: center;
    text-align: center;
}

.about-stat-label {
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
    font-size: 0.72rem;
    line-height: 1.55;
    min-height: 26px;
}

.about-stat-value {
    color: var(--text);
    font-size: inherit;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
}

.about-content {
    max-width: 100%;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.about-content > *:first-child {
    margin-top: 0;
}

.about-content p {
    max-width: 40em;
}

.about-comments {
    margin-top: 2px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.about-action-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.about-action-link:hover {
    color: var(--bg);
    background: var(--text);
}

.about-reward-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(14, 19, 28, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.about-reward-card {
    position: relative;
    width: min(320px, 100%);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    padding: 24px 20px 20px;
    box-shadow: var(--panel-shadow);
    animation: memoComposeIn .18s ease-out both;
}

html.theme-dark .about-reward-card {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.about-reward-card.is-list {
    width: min(360px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.about-reward-quote {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
}

.about-reward-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-reward-close:hover {
    color: var(--text);
}

.about-reward-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.about-reward-tab {
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    padding: 4px 0;
    cursor: pointer;
    font-size: 0.78rem;
}

.about-reward-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--text);
}

.about-reward-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.about-reward-panel img {
    width: min(200px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
    border-radius: 0;
}

.about-reward-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.about-reward-list-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.about-reward-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
    font-size: 0.78rem;
}

.about-reward-row:last-child {
    border-bottom: 0;
}

.about-reward-nick {
    color: var(--text);
}

.about-reward-nick a {
    color: var(--text);
    text-decoration: none;
}

.about-reward-nick a:hover {
    color: var(--accent);
}

.about-reward-date {
    color: var(--muted);
    font-size: 0.72rem;
}

.about-reward-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 20px 0;
}

.about-ad-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.about-ad-btn {
    min-width: 72px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.about-ad-btn:hover {
    color: var(--text);
    border-color: var(--text);
}

.about-ad-btn.is-ok {
    color: var(--bg);
    border-color: var(--accent);
    background: var(--accent);
}

.about-comments,
.movie-records-comments {
    margin-top: 20px;
}

.note-item {
    padding: 18px 0 34px;
    border-bottom: 0;
}

.note-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 6px;
}

.note-head h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.32;
}

.note-head h2 a {
    color: var(--text);
    display: inline;
    line-height: 1.18;
    padding: 0 0.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.note-cat {
    font-size: 0.76rem;
    color: var(--muted);
    text-decoration: none;
}

.note-excerpt {
    margin: 0 0 12px;
    color: color-mix(in srgb, var(--text) 92%, var(--muted));
    font-size: 0.88rem;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-page-home .page-top,
.notes-page-archive .page-top {
    max-width: 58ch;
}

.notes-page-home .archive-title,
.notes-page-archive .archive-title {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    letter-spacing: 0.01em;
}

.notes-page-home .page-intro,
.notes-page-archive .page-intro {
    max-width: 54ch;
    margin-bottom: 0;
    font-size: 0.94rem;
    line-height: 1.85;
}

.note-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: 0.74rem;
}

.note-more {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    color: color-mix(in srgb, var(--text) 92%, var(--accent));
    font-size: 0.76rem;
    letter-spacing: 0;
    margin-left: auto;
    transition: color .2s ease;
}

.note-more:hover {
    color: var(--bg);
    background: var(--text);
}

a:not(.nav-link):not(.mobile-nav-link):not(.icon-btn):not(.brand):not(.sidebar-profile):not(.sen-github-card):not(.sen-short-post):not(.feed-card):not(.archive-year-list a):hover {
    color: var(--bg);
    background: var(--text);
    text-decoration-color: currentColor;
}

.sidebar-profile-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebar-profile-avatar {
    width: 100%;
    max-width: 92px;
    max-height: 50px;
    height: auto;
    display: block;
    border-radius: 0;
    object-fit: contain;
    border: 0;
}

.sidebar-profile-fallback {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.08em;
}

.archive-fold {
    max-width: 800px;
}

.archive-ledger {
    overflow: hidden;
    border: 1px solid var(--panel-border-soft);
    border-radius: 3px;
    background: var(--panel-bg-subtle);
}

.archive-year-group {
    position: relative;
    border: 0;
    margin: 0;
}

.archive-year-group + .archive-year-group::before {
    content: "";
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    background: var(--divider-color);
    pointer-events: none;
}

.archive-year-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    border-radius: 0;
    transition: color .18s ease, background-color .18s ease;
}

.archive-year-group summary:hover {
    background: var(--interactive-hover);
}

.archive-year-group summary:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 68%, var(--line));
    outline-offset: -1px;
}

.archive-year-group[open] summary {
    color: var(--accent);
}

.archive-year-group summary::-webkit-details-marker {
    display: none;
}

.archive-year {
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--text);
}

.archive-count {
    font-size: 0.84rem;
    color: var(--muted);
}

.archive-year-list {
    margin: 0;
    padding: 0 18px 14px;
    list-style: none;
}

.archive-year-list li {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--divider-color) 68%, transparent);
}

.archive-year-list li:last-child {
    border-bottom: 0;
}

.archive-year-list time {
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.archive-year-list a {
    color: var(--text);
    text-decoration: none;
}

.archive-year-list a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.archive-year-list a:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 68%, var(--line));
    outline-offset: 3px;
    border-radius: 3px;
}

.links-intro {
    margin-bottom: 18px;
    color: var(--muted);
}

.link-list-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.link-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 18px 18px 20px;
}

.link-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.link-title {
    display: inline-flex;
    align-items: center;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 0;
    text-decoration: none;
    text-decoration-color: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.link-title:hover,
.link-title:focus-visible {
    color: var(--bg);
    background: var(--text);
    text-decoration: none;
    text-decoration-color: transparent;
}

.link-status-pulse {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 86%, var(--surface-elevated) 14%);
    border: 1px solid color-mix(in srgb, var(--line) 34%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--text) 7%, transparent);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.link-status-pulse::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: inherit;
    background: currentColor;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 22%, transparent);
}

.link-status-pulse.is-loading {
    color: color-mix(in srgb, var(--muted) 78%, var(--subtle-text) 22%);
}

.link-status-pulse.is-up {
    color: #39b86f;
}

.link-status-pulse.is-unknown {
    color: #ff9205;
}

.link-status-pulse.is-down {
    color: #d75a4a;
}

.link-desc {
    display: block;
    width: 100%;
    min-width: 0;
    color: color-mix(in srgb, var(--text) 72%, var(--muted));
    font-size: 0.88rem;
    line-height: 1.7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.movie-records-page {
    max-width: 800px;
}

.feed-page {
    max-width: 800px;
}

.feed-cards {
    overflow: hidden;
    border: 1px solid var(--panel-border-soft);
    border-radius: 3px;
    background: var(--panel-bg-medium);
}

.feed-card {
    border: 0;
    border-radius: 0;
    padding: 18px 20px;
    color: inherit;
    background: transparent;
}

.feed-cards > .feed-card:first-child {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 2px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    transition: color .18s ease, background-color .18s ease;
}

.feed-cards > a.feed-card:first-child:hover {
    color: var(--text);
    background: var(--interactive-hover);
}

.feed-card:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 68%, var(--line));
    outline-offset: -3px;
}

.feed-card-icon {
    display: inline-flex;
    grid-row: 1 / 3;
    align-items: center;
    font-size: 1.1rem;
    color: var(--accent);
}

.feed-card-title {
    font-size: 1rem;
    font-weight: 700;
}

.feed-card-code {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
}

.feed-card-desc,
.feed-card code {
    font-size: 0.82rem;
    color: var(--muted);
}

.feed-card code {
    overflow-wrap: anywhere;
    word-break: break-word;
    user-select: all;
}

.sen-comments {
    margin-top: 26px;
    width: 100%;
    max-width: none;
}

.sen-comment-respond {
    margin-bottom: 22px;
}

.sen-comment-item > .sen-comment-respond {
    margin: 12px 0 0;
    width: 100%;
}

.cancel-comment-reply {
    font-size: 0.84rem;
    color: var(--muted);
    margin-left: auto;
}

.cancel-comment-reply a {
    color: var(--accent);
}

.sen-comment-form-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 0;
    min-height: 34px;
    position: relative;
    z-index: 2;
}

.sen-comments-head h3 {
    margin: 0 0 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
}

.sen-comments-head iconify-icon {
    font-size: 0.95rem;
    color: var(--muted);
}

.sen-comments-head-dot {
    color: color-mix(in srgb, var(--muted) 78%, var(--line));
}

.sen-comments-head-count {
    color: var(--text);
}

.sen-comments-list {
    margin-bottom: 22px;
}

.sen-comments-list .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sen-comment-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.sen-comment-item.is-comment-entering {
    opacity: 0;
    transform: translateY(10px);
}

.sen-comment-item.is-comment-entering.is-comment-entered {
    opacity: 1;
    transform: translateY(0);
}

.sen-comments.is-submitting {
    opacity: 1;
}

.sen-comments.is-refreshing {
    opacity: .82;
}

.sen-comments.is-refreshing.is-refreshed {
    opacity: 1;
}

.sen-comment-item + .sen-comment-item {
    margin-top: 30px;
}

.sen-comment-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.sen-comment-item:hover .sen-comment-card {
    transform: none;
}

.sen-comment-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-top: 1px;
    border-radius: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}

.sen-comment-avatar img {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 3px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
    object-fit: cover;
}

.sen-comment-main {
    min-width: 0;
    flex: 1;
    border-bottom: 0;
    padding-bottom: 4px;
}

.sen-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.88rem;
    line-height: 1.15;
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
}

.sen-comment-author {
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, var(--text) 96%, var(--accent) 4%);
    font-weight: 700;
    font-size: .85rem;
}

.sen-comment-author-link {
    color: inherit;
    text-decoration: none;
}

.sen-comment-author-link:hover {
    color: color-mix(in srgb, var(--text) 84%, var(--accent) 16%);
    text-decoration: none;
}

.sen-comment-badge {
    display: inline-block;
    width: auto;
    height: 16px;
    vertical-align: middle;
}

.sen-comment-parent {
    color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
    letter-spacing: .01em;
    font-weight: 600;
}

.sen-comment-date {
    color: color-mix(in srgb, var(--muted) 94%, var(--text) 6%);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.sen-comment-pending {
    color: #d34b4b;
    font-size: 0.78rem;
    font-weight: 700;
}

.sen-relative-time.is-exact {
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.sen-comment-body {
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: break-word;
    color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
}

.sen-comment-body p {
    margin: 0 0 6px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    line-height: inherit;
}

.sen-comment-body p:last-child {
    margin-bottom: 0;
}

.sen-comment-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.72rem;
    line-height: 1;
    color: color-mix(in srgb, var(--muted) 94%, var(--text) 6%);
}

.sen-comment-like,
.sen-comment-reply a {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.sen-comment-like {
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color .2s ease, opacity .2s ease;
    font-weight: 600;
}

.sen-comment-like:hover,
.sen-comment-reply a:hover {
    color: var(--text);
}

.sen-comment-like.is-liked {
    color: color-mix(in srgb, var(--text) 82%, var(--accent));
    cursor: default;
}

.sen-comment-like.is-loading {
    opacity: .6;
    pointer-events: none;
}

.comment-children {
    list-style: none;
    margin-left: 0;
    margin-top: 15px;
    padding: 0;
}

.comment-children .comment-children {
    margin-left: 0;
    margin-top: 12px;
}

.comment-children .sen-comment-item + .sen-comment-item {
    margin-top: 30px;
}

.sen-comment-form {
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg) 70%, var(--soft) 30%);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

.sen-comment-form:focus-within {
    border-color: color-mix(in srgb, var(--text) 72%, var(--accent) 28%);
}

.sen-comment-form.is-relocating {
    opacity: .72;
    transform: translateY(4px);
}

.sen-comment-form.is-submitting {
    opacity: 1;
}

.sen-comment-form.is-submitting .sen-comment-editor {
    opacity: .72;
}

.sen-comment-login-tip {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
}

.sen-comment-login-tip-guest {
    color: var(--muted);
}

.sen-comment-editor-wrap {
    position: relative;
}

.sen-comment-editor {
    width: 100%;
    min-height: 138px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, var(--soft));
    padding: 12px;
    background: color-mix(in srgb, var(--bg) 94%, var(--soft) 6%);
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-word;
    transition: background-color .2s ease, opacity .2s ease;
}

.sen-comment-editor:focus {
    outline: none;
}

.sen-comment-editor:empty::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
    pointer-events: none;
}

.sen-comment-emoji-panel {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg) 96%, var(--soft));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
}

.sen-comment-emoji-switch {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px 0;
    min-height: 34px;
    background: color-mix(in srgb, var(--bg) 96%, var(--soft));
}

.sen-comment-emoji-tabs {
    display: inline-flex;
    gap: 6px;
}

.sen-comment-emoji-tab {
    border: 1px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 2px 2px 0 0;
    background: transparent;
    color: var(--muted);
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

.sen-comment-emoji-tab.is-active {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent) 72%, var(--text));
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.sen-comment-emoji-tab:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    outline-offset: 1px;
    color: var(--text);
}

.sen-comment-emoji-close {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.sen-comment-emoji-close:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sen-comment-emoji-close:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    outline-offset: 1px;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sen-comment-emoji-close iconify-icon {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
}

.sen-comment-emoji-list,
.memo-emoji-list {
    flex: 1;
    overflow: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 8px;
    align-content: start;
}

.sen-comment-emoji-item {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.sen-comment-emoji-item:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sen-comment-emoji-item:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sen-comment-emoji-item img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

.sen-comment-editor .biaoqing,
.sen-comment-editor .sticker,
.sen-comment-body .biaoqing,
.sen-comment-body .sticker {
    width: 25px;
    height: 25px;
    vertical-align: -4px;
}

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

.sen-comment-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--bg) 88%, var(--soft) 12%);
    position: relative;
    overflow: hidden;
}

.sen-comment-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sen-comment-tool {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: color .2s ease, background-color .2s ease;
}

.sen-comment-tool iconify-icon,
.sen-comment-submit iconify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    flex: 0 0 auto;
}

.sen-comment-tool:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sen-comment-tool:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    outline-offset: -2px;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.sen-comment-tool:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.sen-comment-submit {
    color: var(--accent);
}

.sen-comment-submit.is-loading iconify-icon {
    animation: senSpin 0.85s linear infinite;
}

.sen-comment-profile-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 8px;
    background: color-mix(in srgb, var(--bg) 92%, var(--soft));
    border-top: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    transform-origin: right center;
    transform: scaleX(0.02);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: paint;
    z-index: 5;
}

.sen-comment-profile-panel.is-open {
    transform: scaleX(1);
    opacity: 1;
    pointer-events: auto;
}

.sen-comment-profile-inline-form {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr auto;
    gap: 6px;
    width: 100%;
    align-items: center;
    transform: translate3d(10px, 0, 0);
    opacity: 0.9;
    transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1), opacity .22s ease;
}

.sen-comment-profile-panel.is-open .sen-comment-profile-inline-form {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.sen-comment-profile-inline-form input {
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 3px;
    height: 35px;
    padding: 0 8px;
    background: color-mix(in srgb, var(--soft) 34%, transparent);
    color: var(--text);
    min-width: 0;
    font-size: 0.82rem;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.sen-comment-profile-inline-form input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.sen-comment-inline-save {
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 3px;
    height: 35px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--soft) 42%, transparent);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.8rem;
}

.sen-comment-inline-save:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.sen-comment-inline-save:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.sen-comment-hidden {
    display: none;
}

.sen-comments-closed {
    color: var(--muted);
    padding: 10px 0;
}

.sen-comments-nav {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.82rem;
    padding: 0;
    flex-wrap: wrap;
}

.sen-comments-nav > span {
    display: inline-flex;
    align-items: center;
}

.sen-comments-nav a,
.sen-comments-nav .page-state,
.sen-comments-nav .is-disabled {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease, background-color .2s ease;
}

.sen-comments-nav a:hover {
    background: var(--text);
    color: var(--bg);
}

.sen-comments-nav .is-disabled {
    color: color-mix(in srgb, var(--muted) 45%, var(--line));
    cursor: default;
    text-decoration: none;
}

.sen-comments-nav .page-state {
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
    cursor: default;
    text-decoration: none;
}

.sen-comments-nav .is-current a {
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--text);
}

.movie-page-top {
    margin-bottom: 18px;
}

.movie-records-page {
    max-width: 820px;
}

.movie-records-intro {
    margin-bottom: 18px;
}

.movie-records-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 18px;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: 0;
}

.movie-records-meta-line {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--muted);
}

.movie-records-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.movie-records-about-btn {
    display: inline-block;
    padding: 0;
    border: 0;
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 0;
}

.movie-records-plugin-wrap .mr-output {
    padding-top: 2px;
}

.movie-records-plugin-wrap .mr-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    justify-content: initial !important;
    align-items: stretch !important;
    width: 100%;
}

.movie-records-plugin-wrap .mr-item {
    flex: none !important;
    width: auto !important;
    min-width: 0;
}

.movie-records-plugin-wrap .mr-ticket {
    width: 330px !important;
    min-width: 0;
    height: 220px !important;
    border: 1px dashed color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 0;
    padding: 8px;
    background: color-mix(in srgb, var(--bg) 92%, var(--soft) 8%);
    color: color-mix(in srgb, var(--text) 86%, var(--muted));
    box-shadow: none;
}

.movie-records-plugin-wrap .mr-ticket-face {
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 76%, var(--soft) 24%) !important;
}

.movie-records-plugin-wrap .mr-ticket-tail {
    border-radius: 0;
    background: color-mix(in srgb, var(--text) 82%, var(--muted)) !important;
    color: color-mix(in srgb, var(--bg) 96%, transparent);
}

.movie-records-plugin-wrap .mr-row,
.movie-records-plugin-wrap .mr-row-lg span,
.movie-records-plugin-wrap .mr-watch-time,
.movie-records-plugin-wrap .mr-meta-tag,
.movie-records-plugin-wrap .mr-release-date,
.movie-records-plugin-wrap .mr-theater,
.movie-records-plugin-wrap .mr-seat-label,
.movie-records-plugin-wrap .mr-cinema-name,
.movie-records-plugin-wrap .mr-film-title-en {
    color: color-mix(in srgb, var(--text) 82%, var(--muted)) !important;
}

.movie-records-plugin-wrap .mr-film-title-zh {
    color: var(--text) !important;
    font-size: 0.94rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.movie-records-plugin-wrap .mr-film-title-en {
    font-size: 0.74rem;
    line-height: 1.35;
}

.movie-records-plugin-wrap .mr-theater,
.movie-records-plugin-wrap .mr-meta-tag,
.movie-records-plugin-wrap .mr-release-date {
    border-color: color-mix(in srgb, var(--line) 88%, transparent) !important;
    border-radius: 0 !important;
    background: transparent;
}

.movie-records-plugin-wrap .mr-seat-label {
    border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent) !important;
}

.movie-records-plugin-wrap .mr-qrcode {
    opacity: 0.92;
    color: color-mix(in srgb, var(--text) 74%, var(--muted));
}

.movie-records-plugin-wrap .mr-page-navigator {
    margin-top: 26px;
}

.movie-records-plugin-wrap .mr-page-navigator ul {
    gap: 10px;
}

.movie-records-plugin-wrap .mr-page-navigator a,
.movie-records-plugin-wrap .mr-page-navigator span {
    border: 1px dashed color-mix(in srgb, var(--line) 88%, transparent) !important;
    border-radius: var(--radius-md) !important;
    background: color-mix(in srgb, var(--soft) 45%, transparent) !important;
    color: var(--muted) !important;
    padding: 5px 12px !important;
    min-width: 34px;
}

.movie-records-plugin-wrap .mr-page-navigator a:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    color: var(--text) !important;
}

.movie-records-plugin-wrap .mr-page-navigator .current a,
.movie-records-plugin-wrap .mr-page-navigator .current span {
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    color: var(--text) !important;
}

.movie-records-plugin-wrap {
    min-width: 0;
}

.movie-records-plugin-wrap .mr-output,
.movie-records-plugin-wrap .movie-pages-error {
    border-top: 0;
    padding-top: 0;
}

.movie-pages-error p {
    margin: 0 0 8px;
    color: var(--muted);
}

.movie-pages-error p:last-child {
    margin-bottom: 0;
}

.memos-page {
    max-width: 860px;
}

.memos-top {
    margin-bottom: 30px;
}

.memos-top .page-title-header {
    width: 100%;
}

.memos-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.memos-title-row .page-title-heading {
    min-width: 0;
}

.memos-compose-bar {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.memo-btn {
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--soft) 58%, var(--bg));
    color: var(--text);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 78%, transparent);
    transition: transform .14s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.memo-btn:hover,
.movie-records-about-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.memo-compose-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(14, 19, 28, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.memo-compose-card {
    width: min(540px, 100%);
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    box-shadow: var(--panel-shadow);
    animation: memoComposeIn .18s ease-out both;
}

.memo-compose-modal.is-uploading .memo-compose-card {
    box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow-color) 22%, transparent);
}

#memo-form.is-busy .memo-compose-body,
#memo-form.is-submitting .memo-compose-body {
    opacity: .94;
}

.memo-compose-modal.is-success .memo-compose-card {
    box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow-color) 22%, transparent);
}

.memo-compose-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 14px 0 20px;
    border-bottom: 1px solid var(--line);
}

.memo-compose-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

.memo-compose-close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, transform .1s ease;
}

.memo-compose-close iconify-icon {
    font-size: 17px;
}

.memo-compose-close:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.memo-compose-close:active {
    transform: translateY(1px);
}

.memo-compose-input {
    display: block;
    width: 100%;
    min-height: 132px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    resize: vertical;
    border-radius: 3px;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--text);
    line-height: 1.9;
    caret-color: var(--accent);
    transition: border-color .14s ease;
}

.memo-compose-input::placeholder {
    color: var(--muted);
    opacity: .78;
}

.memo-compose-input:focus,
.memo-compose-input:focus-visible {
    border-color: color-mix(in srgb, var(--text) 38%, var(--line));
    outline: 0;
}

.memo-compose-editor-wrap {
    position: relative;
}

.memo-compose-body {
    position: relative;
    padding: 18px 20px 0;
}

.memo-compose-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px 20px 12px;
}

.memo-compose-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.memo-image-add,
.memo-compose-emoji-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: color .14s ease, background-color .14s ease, transform .1s ease;
}

.memo-image-add iconify-icon,
.memo-compose-emoji-btn iconify-icon {
    font-size: 18px;
}

.memo-image-add:hover,
.memo-compose-emoji-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.memo-image-add:active,
.memo-compose-emoji-btn:active {
    transform: translateY(1px);
}

.memo-compose-submit {
    width: 72px;
    height: 34px;
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: var(--bg);
    background: var(--accent);
    cursor: pointer;
    transition: filter .14s ease, transform .1s ease, opacity .14s ease;
}

.memo-compose-submit:hover {
    filter: brightness(.94);
}

.memo-compose-submit:active {
    transform: translateY(1px);
}

.memo-emoji-panel {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--panel-bg-strong);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    border: 1px solid color-mix(in srgb, var(--text) 38%, var(--line));
    border-radius: 3px;
    overflow: hidden;
}

html.theme-dark .memo-compose-card,
html.theme-dark .memo-emoji-panel {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.memo-emoji-head {
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.memo-emoji-tabs {
    display: inline-flex;
    gap: 6px;
}

.memo-emoji-tab {
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

.memo-emoji-tab.is-active {
    color: var(--text);
    border-color: var(--line);
    background: color-mix(in srgb, var(--soft) 68%, transparent);
}

.memo-emoji-item {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.memo-emoji-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.memo-emoji-item img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.memo-image-preview {
    margin: 0;
}

.image-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

#memo-image-preview .image-preview-list {
    display: flex;
}

.image-preview-item {
    width: 68px;
    height: 68px;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    cursor: move;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.image-preview-item.is-dragging {
    opacity: 0.55;
}

.image-preview-item.is-uploading {
    cursor: progress;
}

.image-preview-item.is-uploading img {
    opacity: 0.55;
    filter: saturate(0.9);
}

.image-add-tile {
    flex: 0 0 34px;
}

@keyframes memoComposeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.memo-hidden {
    display: none;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview-uploading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -18px 0 0 -14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #fff;
    animation: memoPreviewSpin .8s linear infinite;
    pointer-events: none;
}

.image-preview-status {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(17, 20, 18, 0.74);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}

.image-preview-item button {
    position: absolute;
    right: 4px;
    top: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
}

@keyframes memoPreviewSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.memo-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 24px;
}

.memo-item {
    position: relative;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 14px;
}

.memo-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.memo-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.memo-avatar-shell {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}

.memo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.memo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: block;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
    object-fit: cover;
}

.memo-author-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    flex: 1;
    min-width: 0;
}

.memo-author-name {
    font-size: 0.92rem;
    line-height: 1.35;
}

.memo-delete-btn {
    border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    opacity: 0;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, opacity .2s ease, transform .14s ease;
}

.memo-delete-btn:hover {
    color: #c45151;
    border-color: color-mix(in srgb, #c45151 55%, var(--line));
    background: color-mix(in srgb, #c45151 9%, transparent);
    transform: translateY(-1px);
}

.memo-item:hover .memo-delete-btn,
.memo-item:focus-within .memo-delete-btn {
    opacity: 1;
}

.memo-time,
.memo-images,
.no-memos {
    font-size: 0.8rem;
    color: var(--muted);
}

.memo-content {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

:is(.entry-content, .page-content, .post-content) p,
:is(.entry-content, .page-content, .post-content) li > p:only-child {
    font-weight: 400;
    font-size: 0.96rem;
    letter-spacing: 2px;
    line-height: 2em;
    text-align: justify;
    margin: 0 0 2em;
    word-break: break-all;
    overflow-wrap: break-word;
    color: color-mix(in srgb, var(--text) 92%, var(--muted));
    text-wrap: pretty;
}

:is(.entry-content, .page-content, .post-content) :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.6em 0 0.9em;
    line-height: 1.35;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

:is(.entry-content, .page-content, .post-content) h6 {
    color: var(--text);
}

:is(.entry-content, .page-content, .post-content) :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0.25em;
}

:is(.entry-content, .page-content, .post-content) :is(h1, h2, h3, h4, h5, h6)::before {
    background-color: color-mix(in srgb, var(--text) 78%, var(--muted));
    border-radius: .2rem;
    content: "";
    margin-inline-end: .5em;
    padding: 0 2px;
    width: 8px;
    height: 1.05em;
    flex: 0 0 8px;
}

:is(.entry-content, .page-content, .post-content) blockquote {
    position: relative;
    margin: 1.5em 0;
    padding: 12px 18px;
    border: 0;
    border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    border-radius: 0 2px 2px 0;
    background: color-mix(in srgb, var(--soft) 38%, transparent);
    color: color-mix(in srgb, var(--text) 86%, var(--muted));
}

:is(.entry-content, .page-content, .post-content) blockquote::before {
    content: none;
}

:is(.entry-content, .page-content, .post-content) blockquote > *:first-child {
    margin-top: 0;
}

:is(.entry-content, .page-content, .post-content) blockquote > *:last-child {
    margin-bottom: 0;
}

:is(.entry-content, .page-content, .post-content) :is(ul, ol) {
    margin: 0 0 1.55em;
    padding-left: 1.5em;
    color: color-mix(in srgb, var(--text) 92%, var(--muted));
}

:is(.entry-content, .page-content, .post-content) :is(ul, ol) :is(ul, ol) {
    margin-top: 0.55em;
    margin-bottom: 0.7em;
}

:is(.entry-content, .page-content, .post-content) li {
    margin: 0 0 0.55em;
    padding-left: 0.18em;
    line-height: 1.9;
}

:is(.entry-content, .page-content, .post-content) li:last-child {
    margin-bottom: 0;
}

:is(.entry-content, .page-content, .post-content) ul > li::marker {
    color: color-mix(in srgb, var(--accent) 58%, var(--text));
}

:is(.entry-content, .page-content, .post-content) ol > li::marker {
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
    font-weight: 600;
}

:is(.entry-content, .page-content, .post-content) table {
    width: 100%;
    min-width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--soft) 18%, transparent);
    font-size: 0.92rem;
}

:is(.entry-content, .page-content, .post-content) thead {
    background: color-mix(in srgb, var(--soft) 48%, transparent);
}

:is(.entry-content, .page-content, .post-content) :is(th, td) {
    padding: 10px 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 72%, transparent);
    text-align: center;
    vertical-align: top;
    line-height: 1.7;
}

:is(.entry-content, .page-content, .post-content) th {
    color: var(--text);
    font-weight: 700;
}

:is(.entry-content, .page-content, .post-content) tbody tr:last-child td {
    border-bottom: 0;
}

:is(.entry-content, .page-content, .post-content) em {
    font-style: italic;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

:is(.entry-content, .page-content, .post-content) del {
    color: color-mix(in srgb, var(--text) 56%, var(--muted));
    text-decoration-thickness: 1px;
}

:is(.entry-content, .page-content, .post-content) mark {
    padding: 0.08em 0.32em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 18%, var(--mark-bg));
    color: var(--text);
}

:is(.entry-content, .page-content, .post-content) kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg) 88%, var(--soft));
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
    font-size: 0.86em;
    line-height: 1.5;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--shadow-color) 4%, transparent);
}

:is(.entry-content, .page-content, .post-content) > *:last-child {
    margin-bottom: 0;
}

:is(.entry-content, .page-content, .post-content) hr {
    border: 0;
    border-top: .28em dashed color-mix(in srgb, var(--text) 34%, transparent);
    margin: 3em 0;
    opacity: 0.78;
}

:is(.entry-content, .page-content, .post-content) a {
    display: inline;
    word-break: normal;
    overflow-wrap: anywhere;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 52%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: color-mix(in srgb, var(--accent) 76%, var(--text));
    transition: color .2s ease, text-decoration-color .2s ease;
}

:is(.entry-content, .page-content, .post-content) a:hover,
:is(.entry-content, .page-content, .post-content) a:focus-visible {
    color: var(--text);
    background: transparent;
    text-decoration-color: var(--accent);
    outline: 1px solid color-mix(in srgb, var(--accent) 54%, transparent);
    outline-offset: 2px;
}

:is(.entry-content, .page-content, .post-content) a[href]::before {
    content: none;
}

:is(.entry-content, .page-content, .post-content) strong {
    display: inline;
    margin: 0;
    padding: 0;
    background: linear-gradient(transparent 72%, color-mix(in srgb, var(--accent) 13%, transparent) 72%);
    color: color-mix(in srgb, var(--text) 84%, var(--accent));
    font-weight: 700;
    line-height: inherit;
}

:is(.entry-content, .page-content, .post-content) a img {
    display: block;
}

:is(.entry-content, .page-content, .post-content) img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.sen-image-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 3px;
    overflow: hidden;
}

.sen-photos .sen-image-frame,
.memo-images .sen-image-frame,
.memo-photos-grid .sen-image-frame {
    display: block;
    width: 100%;
    height: 100%;
}

.sen-image-frame > a,
.sen-image-frame > img {
    display: block;
    max-width: 100%;
    border-radius: inherit;
}

.sen-photos .sen-image-frame > a,
.memo-images .sen-image-frame > a,
.memo-photos-grid .sen-image-frame > a {
    width: 100%;
    height: 100%;
}

.sen-photo > .sen-image-frame,
.sen-photo > .sen-image-frame > a,
.sen-photo > .sen-image-frame > a > img,
.sen-photo > .sen-image-frame > img {
    width: 100%;
    height: 100%;
}

.sen-image-frame[data-title]::after {
    content: attr(data-title);
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 10px;
    border-radius: 3px;
    background: rgba(32, 34, 38, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.76rem;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    word-break: break-word;
    pointer-events: none;
}

:is(.entry-content, .page-content, .post-content) pre {
    margin: 1.2em 0;
    position: relative;
    padding: 16px 18px;
    border: 1px solid transparent;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 3px;
    background: color-mix(in srgb, var(--soft) 64%, var(--bg));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 50%, var(--line));
    color: var(--text);
    overflow-x: auto;
    line-height: 1.75;
    font-size: 0.88rem;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

:is(.entry-content, .page-content, .post-content) pre::before {
    content: none;
}

:is(.entry-content, .page-content, .post-content) pre[data-code-lang] {
    padding-top: 36px;
}

:is(.entry-content, .page-content, .post-content) pre[data-code-lang]::after {
    content: attr(data-code-lang);
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0;
    line-height: 1;
}

:is(.entry-content, .page-content, .post-content) pre code {
    display: block;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

:is(.entry-content, .page-content, .post-content) :not(pre) > code {
    display: inline-block;
    margin: 0 0.12em;
    padding: 0.08em 0.38em;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    border-radius: 2px;
    background: color-mix(in srgb, var(--soft) 52%, transparent);
    color: color-mix(in srgb, var(--text) 82%, var(--accent));
    font-size: 0.9em;
    line-height: 1.5;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

:is(.entry-content, .page-content, .post-content) table code {
    white-space: nowrap;
}

.sen-github-card {
    display: grid;
    gap: 6px;
    margin: 1.3em 0;
    padding: 14px 16px;
    border: 1px solid var(--panel-border-soft);
    border-left: 3px solid color-mix(in srgb, var(--accent) 56%, var(--line));
    border-radius: 3px;
    background: color-mix(in srgb, var(--soft) 22%, transparent);
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.sen-github-card::before {
    content: none;
}

.sen-github-card-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 0;
    color: color-mix(in srgb, var(--text) 74%, var(--muted));
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sen-github-card-title {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.45;
    word-break: break-word;
}

.sen-github-card-meta {
    color: color-mix(in srgb, var(--text) 66%, var(--muted));
    font-size: 0.82rem;
    line-height: 1.5;
}

.sen-github-card-url {
    color: color-mix(in srgb, var(--text) 58%, var(--muted));
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: break-all;
}

.sen-github-card:hover {
    color: inherit;
    background: color-mix(in srgb, var(--soft) 34%, transparent);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    box-shadow: none;
}

:is(.entry-content, .page-content, .post-content) a:has(> img) {
    display: block;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}

:is(.entry-content, .page-content, .post-content) a[href]:has(> img)::before {
    content: none;
}

:is(.entry-content, .page-content, .post-content) .sen-photo,
:is(.entry-content, .page-content, .post-content) .sen-photo::after {
    padding-right: 0;
    text-decoration: none;
    content: none;
}

.sen-short-collapse {
    margin: 1em 0;
    border: 1px solid var(--panel-border-soft);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--soft) 20%, transparent);
}

.sen-short-collapse > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text);
    list-style: none;
}

.sen-short-collapse > summary::before {
    content: ">";
    color: var(--accent);
    font-family: Consolas, Monaco, monospace;
    transition: transform .18s ease;
}

.sen-short-collapse[open] > summary::before {
    transform: rotate(90deg);
}

.sen-short-collapse > summary::-webkit-details-marker {
    display: none;
}

.sen-short-collapse-body {
    border-top: 1px solid var(--panel-border-soft);
    padding: 12px 14px;
}

.sen-short-tabs {
    margin: 1em 0;
    border: 1px solid var(--panel-border-soft);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--soft) 18%, transparent);
}

.sen-short-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px;
    border-bottom: 1px solid var(--panel-border-soft);
}

.sen-short-tab-btn {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 9px 8px 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
}

.sen-short-tab-btn.is-active {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent) 70%, var(--text));
    background: transparent;
}

.sen-short-tabs-panels {
    padding: 12px 14px;
}

.sen-short-collapse-body > :last-child,
.sen-short-tab-panel > :last-child {
    margin-bottom: 0;
}

.sen-short-tab-panel {
    display: none;
}

.sen-short-tab-panel.is-active {
    display: block;
}

.sen-short-post {
    position: relative;
    display: block;
    margin: 1.1em 0;
    padding: 12px 44px 12px 14px;
    border: 1px solid var(--panel-border-soft);
    border-left: 3px solid color-mix(in srgb, var(--accent) 56%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--soft) 20%, transparent);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.sen-short-post::after {
    content: "\2197";
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    color: color-mix(in srgb, var(--muted) 78%, var(--text));
    background: transparent;
    font-size: 0.8rem;
    line-height: 1;
}

:is(.entry-content, .page-content, .post-content) .sen-short-post {
    display: block;
    padding-left: 14px;
    margin-left: 0;
    margin-right: 0;
    overflow-wrap: normal;
}

:is(.entry-content, .page-content, .post-content) .sen-short-post::before {
    content: none;
}

.sen-short-post-label {
    display: inline-block;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--text) 50%, var(--muted));
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.sen-short-post strong {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    white-space: normal;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.5;
}

.sen-short-post-excerpt {
    display: block;
    color: color-mix(in srgb, var(--text) 72%, var(--muted));
    font-size: 0.84rem;
    line-height: 1.7;
}

.sen-short-post:hover,
.sen-short-post:focus-visible {
    color: inherit;
    background: color-mix(in srgb, var(--soft) 32%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow: none;
    outline: none;
}

.sen-short-post:hover::after,
.sen-short-post:focus-visible::after {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sen-short-todo {
    margin: 1em 0;
    padding: 10px 12px;
    border: 1px solid var(--panel-border-soft);
    border-left: 3px solid color-mix(in srgb, var(--accent) 56%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--soft) 20%, transparent);
    list-style: none;
}

.sen-short-todo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 4px 0;
}

.sen-short-todo-box {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid transparent;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: var(--accent);
    margin-top: 0.18em;
}

.sen-short-todo-item.is-done .sen-short-todo-text {
    color: var(--muted);
    text-decoration: line-through;
}

.sen-photos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 10px 0 22px;
}

.sen-photos > .sen-image-frame {
    grid-column: span 2;
    border-radius: 3px;
    overflow: hidden;
    background: var(--soft);
}

.sen-photo {
    display: block;
    border-radius: 3px;
    overflow: hidden;
    background: var(--soft);
    grid-column: span 2;
    width: 100%;
    height: 100%;
}

.sen-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.sen-photos.count-1 .sen-photo {
    grid-column: 1 / -1;
}

.sen-photos.count-1 > .sen-image-frame {
    grid-column: 1 / -1;
}

.sen-photos.count-2 .sen-photo {
    grid-column: span 3;
}

.sen-photos.count-2 > .sen-image-frame {
    grid-column: span 3;
}

.sen-photos.count-4 .sen-photo:nth-child(4) {
    grid-column: 1 / -1;
}

.sen-photos.count-4 > .sen-image-frame:nth-child(4) {
    grid-column: 1 / -1;
}

.sen-photos.count-5 .sen-photo:nth-child(4),
.sen-photos.count-5 .sen-photo:nth-child(5) {
    grid-column: span 3;
}

.sen-photos.count-5 > .sen-image-frame:nth-child(4),
.sen-photos.count-5 > .sen-image-frame:nth-child(5) {
    grid-column: span 3;
}

.sen-photos.count-7 .sen-photo:nth-child(7) {
    grid-column: 1 / -1;
}

.sen-photos.count-7 > .sen-image-frame:nth-child(7) {
    grid-column: 1 / -1;
}

.sen-photos.count-8 .sen-photo:nth-child(7),
.sen-photos.count-8 .sen-photo:nth-child(8) {
    grid-column: span 3;
}

.sen-photos.count-8 > .sen-image-frame:nth-child(7),
.sen-photos.count-8 > .sen-image-frame:nth-child(8) {
    grid-column: span 3;
}

.memo-photos-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 86px);
    gap: 6px;
    max-width: 270px;
    justify-content: flex-start;
}

.memo-photo-link {
    display: block;
    width: 86px;
    height: 86px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--soft);
}

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

.memo-photos-grid.count-1 {
    display: block;
    max-width: min(100%, 320px);
}

.memo-photos-grid.count-1 .memo-photo-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    height: 200px;
    background: transparent;
}

.memo-photos-grid.count-1 .memo-photo-link img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.memo-photos-grid.count-2 {
    grid-template-columns: repeat(2, 106px);
    max-width: 218px;
}

.memo-photos-grid.count-2 .memo-photo-link {
    width: 106px;
    height: 106px;
}

.memo-photos-grid.count-4 {
    grid-template-columns: repeat(2, 96px);
    max-width: 198px;
}

.memo-photos-grid.count-4 .memo-photo-link {
    width: 96px;
    height: 96px;
}

.memo-content .biaoqing,
.memo-content .sticker {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    .memo-delete-btn {
        opacity: 1;
    }
}

.memo-login-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(14, 19, 28, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.memo-login-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.soulmate-devtools-notice {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(14, 19, 28, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.soulmate-devtools-notice.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.soulmate-devtools-notice-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(400px, calc(100% - 28px));
    padding: 22px 20px 20px;
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    box-shadow: var(--panel-shadow);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px));
    transition: opacity .22s ease, transform .22s ease;
}

.soulmate-devtools-notice.is-open .soulmate-devtools-notice-card {
    opacity: 1;
    transform: translate(-50%, -50%);
}

html.theme-dark .soulmate-devtools-notice-card {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.soulmate-devtools-notice-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 400;
}

.soulmate-devtools-notice-card p {
    margin: 10px 0 18px;
    color: color-mix(in srgb, var(--muted) 78%, var(--text));
    line-height: 1.8;
}

.soulmate-devtools-notice-ack {
    min-width: 88px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    box-shadow: none;
}

.soulmate-devtools-notice-ack:hover {
    border-color: color-mix(in srgb, var(--accent) 82%, var(--text));
    background: color-mix(in srgb, var(--accent) 86%, var(--text));
    color: var(--bg);
    box-shadow: none;
}

.soulmate-devtools-notice-ack:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
    outline-offset: 3px;
}

.soulmate-devtools-notice-ack:active {
    transform: translateY(1px);
}

.memo-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(14, 19, 28, 0.34);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.memo-confirm-modal:not(.memo-hidden) {
    display: flex;
}

.memo-confirm-card {
    width: min(380px, 100%);
    border-radius: 3px;
    padding: 20px;
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    animation: memoComposeIn .18s ease-out both;
}

html.theme-dark .memo-confirm-card {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.memo-confirm-title {
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 8px;
}

.memo-confirm-msg {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 12px;
}

.memo-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.memo-confirm-btn {
    min-width: 72px;
    height: 34px;
    padding: 0 14px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}

.memo-confirm-btn:hover {
    transform: translateY(-1px);
}

.memo-confirm-btn.is-ok {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
}

#sen-toast-root {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 180;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.sen-toast {
    min-width: 170px;
    max-width: min(320px, calc(100vw - 32px));
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 3px;
    border: 1px solid var(--panel-border);
    background-color: var(--panel-bg-strong);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.65;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 16%, transparent);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.sen-toast iconify-icon {
    flex: 0 0 auto;
    margin-top: 0.2em;
    font-size: 16px;
    color: var(--muted);
}

.sen-toast span {
    min-width: 0;
}

html.theme-dark .sen-toast {
    background-color: color-mix(in srgb, var(--soft) 82%, var(--bg));
}

.sen-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

.sen-toast.is-success {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.sen-toast.is-error {
    border-color: color-mix(in srgb, #b85757 60%, var(--line));
}

.sen-toast.is-warning {
    border-color: color-mix(in srgb, #c09a46 60%, var(--line));
}

@keyframes memoFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.memo-login-card {
    width: min(400px, calc(100% - 28px));
    background-color: var(--panel-bg);
    background-image: var(--canvas-background-image);
    background-size: var(--canvas-background-size);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center;
    opacity: 0;
    box-shadow: var(--panel-shadow);
    transition: opacity .35s ease, transform .35s ease;
}

.memo-login-modal.is-open .memo-login-card {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-duration: .35s, .35s;
}

html.theme-dark .memo-login-card {
    background-color: color-mix(in srgb, var(--soft) 76%, var(--bg));
}

.login-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 400;
}

.login-subtitle,
.login-remember,
.memo-login-close,
#global-login-message,
#login-message {
    color: var(--muted);
}

.login-subtitle {
    margin: 6px 0 12px;
    font-size: 0.86rem;
}

.memo-login-close {
    position: absolute;
    right: 10px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#memo-login-form,
#global-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.login-remember {
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#memo-login-form input[type="text"],
#memo-login-form input[type="password"],
#global-login-form input[type="text"],
#global-login-form input[type="password"] {
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 9px 10px;
    background: transparent;
    color: var(--text);
    outline: 0;
}

#memo-login-form input[type="text"]:focus,
#memo-login-form input[type="password"]:focus,
#global-login-form input[type="text"]:focus,
#global-login-form input[type="password"]:focus {
    border-color: color-mix(in srgb, var(--text) 38%, var(--line));
}

#memo-login-form button[type="submit"],
#global-login-form button[type="submit"] {
    padding: 8px 14px;
    cursor: pointer;
}

#global-login-message,
#login-message {
    font-size: 0.84rem;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #b85757 48%, var(--line));
    border-radius: 3px;
    background: color-mix(in srgb, #b85757 6%, transparent);
}

@media (max-width: 980px) {
    .feed-card:first-child {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    body.menu-open {
        overflow: hidden;
    }

    .about-page {
        gap: 28px;
        max-width: none;
    }

    .about-title-header {
        margin-bottom: 22px;
    }

    .about-title-note {
        display: none;
    }

    .about-overview {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: stretch;
        margin-bottom: 24px;
    }

    .about-overview.has-mobile-media {
        grid-template-columns: minmax(0, 40%) minmax(0, 60%);
        column-gap: 16px;
    }

    .about-overview-grid {
        gap: 10px;
        padding: 0 0 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    }

    .about-overview.has-mobile-media .about-overview-grid {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .about-mobile-media {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: color-mix(in srgb, var(--soft) 34%, transparent);
    }

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

    .about-summary {
        display: none;
    }

    .about-stat-value {
        margin-top: -2px;
    }

    .about-content p {
        max-width: 100%;
    }

    .sen-404-main {
        min-height: calc(100dvh - 120px);
        align-items: stretch;
    }

    .sen-404-card {
        padding: 16px;
    }

    .sen-404-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sen-404-btn {
        width: 100%;
    }

    .memos-top {
        margin-bottom: 24px;
    }

    .movie-records-meta {
        align-items: flex-start;
    }

    .movie-records-plugin-wrap .mr-output {
        overflow-x: hidden;
    }

    .movie-records-plugin-wrap .mr-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .movie-records-plugin-wrap .mr-item {
        width: 100% !important;
        overflow: hidden;
    }

    .movie-records-plugin-wrap .mr-ticket {
        height: 220px !important;
        padding: 7px;
    }

    .movie-records-plugin-wrap .mr-ticket-face {
        height: 164px;
        padding: 6px 8px;
    }

    .movie-records-plugin-wrap .mr-film-title-zh {
        font-size: 0.84rem;
    }

    .movie-records-plugin-wrap .mr-film-title-en {
        font-size: 0.68rem;
    }

    .memo-compose-modal {
        padding: 14px;
    }

    .memo-compose-card {
        width: 100%;
        padding: 0;
        border-radius: 3px;
    }

    .memo-compose-head h3 {
        font-size: 1rem;
    }

    .memo-compose-input {
        min-height: 150px;
    }

    #memo-image-preview .image-preview-list {
        display: flex;
        gap: 8px;
    }

    .image-preview-item {
        width: 68px;
        height: 68px;
    }

    .memo-photos-grid {
        margin-left: 0;
    }

    .sen-photos,
    .sen-photos.count-2,
    .sen-photos.count-3,
    .sen-photos.count-4,
    .sen-photos.count-5,
    .sen-photos.count-6,
    .sen-photos.count-7,
    .sen-photos.count-8 {
        width: 100%;
        gap: 6px;
    }

    .memo-content {
        max-width: 100%;
    }
    .memo-photos-grid,
    .memo-photos-grid.count-2 {
        max-width: 100%;
    }

    .memo-card {
        gap: 8px;
    }

    .memo-content {
        margin-left: 0;
        max-width: 100%;
    }

    .memo-photos-grid {
        margin-left: 0;
    }

    .sen-comment-tool {
        width: 38px;
        height: 38px;
    }

    .sen-comment-profile-inline-form {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .sen-comment-profile-inline-form input {
        flex: 1 1 0;
        min-width: 0;
        transition: flex-basis .18s ease, flex-grow .18s ease;
    }

    .sen-comment-profile-inline-form input[data-profile-field="author"] {
        flex-grow: 1;
    }

    .sen-comment-profile-inline-form input[data-profile-field="mail"] {
        flex-grow: 1;
    }

    .sen-comment-profile-inline-form input[data-profile-field="url"] {
        flex-grow: 1;
    }

    .sen-comment-profile-inline-form.is-focus-author input[data-profile-field="author"] {
        flex-grow: 2.2;
    }

    .sen-comment-profile-inline-form.is-focus-author input[data-profile-field="mail"],
    .sen-comment-profile-inline-form.is-focus-author input[data-profile-field="url"] {
        flex-grow: 0.75;
    }

    .sen-comment-profile-inline-form.is-focus-mail input[data-profile-field="mail"] {
        flex-grow: 2.2;
    }

    .sen-comment-profile-inline-form.is-focus-mail input[data-profile-field="author"],
    .sen-comment-profile-inline-form.is-focus-mail input[data-profile-field="url"] {
        flex-grow: 0.75;
    }

    .sen-comment-profile-inline-form.is-focus-url input[data-profile-field="url"] {
        flex-grow: 2.2;
    }

    .sen-comment-profile-inline-form.is-focus-url input[data-profile-field="author"],
    .sen-comment-profile-inline-form.is-focus-url input[data-profile-field="mail"] {
        flex-grow: 0.75;
    }

    .sen-comment-inline-save {
        flex: 0 0 auto;
        padding: 0 10px;
    }

    .comment-children {
        margin-left: 0;
        padding-left: 0;
    }

    .sen-comment-item > .sen-comment-respond {
        margin-left: 0;
        width: 100%;
    }

    .sen-comment-card {
        gap: 10px;
    }

    .sen-comment-avatar,
    .sen-comment-avatar img {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .sen-comment-meta {
        font-size: 0.84rem;
        gap: 5px;
    }

    .sen-comment-body {
        font-size: 0.9rem;
    }

    .sen-comment-actions {
        font-size: 0.7rem;
        gap: 12px;
    }

    .sen-comment-date {
        font-size: 0.76rem;
    }

    .memo-compose-body {
        padding: 16px 16px 0;
    }

    .memo-compose-actions {
        gap: 8px;
        padding: 10px 16px 12px;
    }

    .memo-image-add,
    .memo-compose-emoji-btn {
        width: 34px;
        height: 34px;
        font-size: inherit;
    }

    .memo-compose-submit {
        height: 34px;
        font-size: inherit;
    }

    .mobile-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: var(--bg);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .mobile-drawer.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px 4px;
        color: var(--muted);
        font-size: 0.9rem;
        letter-spacing: 0.06em;
    }

    .mobile-drawer-nav {
        min-height: calc(100dvh - 56px);
        padding: 12px 16px 24px;
        display: grid;
        width: min(320px, 100%);
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: 14px 16px;
    }

    .palette-dialog {
        padding: 16px;
    }

    .palette-dialog-panel {
        width: min(100%, 420px);
        max-height: calc(100dvh - 32px);
        padding: 16px;
    }

    .palette-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .palette-option {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .palette-option-name {
        margin-top: 0;
        text-align: left;
    }

    .mobile-nav-link {
        border: 0;
        background: transparent;
        border-radius: var(--radius-md);
        color: var(--muted);
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        min-width: 0;
        width: 100%;
        font: inherit;
        cursor: pointer;
        opacity: 0;
        transform: translateY(12px);
        transition: color .2s ease, opacity .28s ease, transform .28s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.is-active {
        color: var(--text);
    }

    .mobile-nav-link span {
        font-size: 0.84rem;
        letter-spacing: 0.05em;
        text-align: center;
        position: relative;
        display: inline-block;
        padding-bottom: 3px;
    }

    .mobile-nav-link.is-active span::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 20px;
        height: 3px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 68%, var(--text));
    }

    .sen-backtop-desktop {
        display: none;
    }

    :is(.entry-content, .page-content, .post-content) a {
        word-break: break-all;
    }

    .sen-image-frame[data-title]::after {
        left: 8px;
        bottom: 8px;
        max-width: min(62%, calc(100% - 16px));
        padding: 4px 7px;
        font-size: 0.62rem;
        line-height: 1.25;
        border-radius: 8px;
        background: rgba(24, 26, 29, 0.44);
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .sen-image-frame.is-title-visible[data-title]::after {
        opacity: 1;
        transform: translateY(0);
    }

    :is(.entry-content, .page-content, .post-content) pre {
        padding: 14px 12px;
        font-size: 0.82rem;
        border-radius: 3px;
    }

    :is(.entry-content, .page-content, .post-content) pre[data-code-lang] {
        padding-top: 32px;
    }

    :is(.entry-content, .page-content, .post-content) pre[data-code-lang]::after {
        top: 8px;
        right: 10px;
        font-size: 0.62rem;
        padding: 3px 7px;
    }

    :is(.entry-content, .page-content, .post-content) :not(pre) > code {
        font-size: 0.84em;
        padding: 1px 5px;
    }

    .link-list-wrap {
        gap: 14px 16px;
    }

    .link-row {
        gap: 6px;
        padding: 14px 14px 16px;
    }

    .link-title {
        font-size: 0.92rem;
    }

    .link-desc {
        font-size: 0.84rem;
    }

    .page-title-bar {
        align-items: stretch;
    }

    .page-title-primary {
        font-size: 1.14rem;
    }

    .mobile-drawer.is-open .mobile-nav-link {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-drawer.is-open .mobile-nav-link:nth-child(1) { transition-delay: .04s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(2) { transition-delay: .08s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(3) { transition-delay: .12s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(4) { transition-delay: .16s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(5) { transition-delay: .2s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(6) { transition-delay: .24s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(7) { transition-delay: .28s; }
    .mobile-drawer.is-open .mobile-nav-link:nth-child(n+8) { transition-delay: .32s; }

    body {
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .shell,
    .content-shell {
        width: 100%;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header {
        float: none;
        min-width: 100%;
        grid-column: auto;
        grid-row: auto;
        align-self: stretch;
        background: color-mix(in srgb, var(--bg) 96%, transparent);
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header-inner {
        min-height: 64px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
        width: 100%;
    }

    .header-left {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        align-self: center;
    }

    .header-right {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 6px;
        margin-left: 12px;
        justify-content: flex-end;
        white-space: nowrap;
        align-self: center;
    }

    .header-center {
        display: none;
    }

    .sidebar-tools {
        display: none;
    }

    .sidebar-profile-dark {
        display: none !important;
    }

    .header-left,
    .brand {
        min-width: 0;
    }

    .brand {
        max-width: 100%;
    }

    .brand-logo {
        max-width: 100%;
    }

    .header-right .icon-btn:not(.nav-menu-btn):not(.mobile-palette-icon),
    .header-right .sen-backtop:not(.mobile-backtop) {
        display: none;
    }

    .header-right .mobile-palette-icon {
        display: inline-flex;
        order: 1;
    }

    .header-right .nav-menu-btn {
        display: inline-flex;
        order: 2;
    }

    .header-right .icon-btn {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .header-right .icon-btn iconify-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .sidebar-profile {
        display: none;
    }

    .site-nav {
        flex-direction: row;
        gap: 4px;
    }

    .nav-link {
        min-height: 32px;
        padding: 0 9px;
        border-radius: var(--radius-md);
        text-decoration: none;
        text-decoration-color: transparent;
    }

    .nav-link-text {
        display: inline;
        font-size: 0.78rem;
        line-height: 1;
        font-weight: 400;
        letter-spacing: .03em;
        margin: 0;
        padding: 0;
    }

    .main {
        -webkit-mask-image: none;
        mask-image: none;
        grid-column: auto;
        padding-top: 48px;
        padding-bottom: 0;
    }

    .entry,
    .page-content,
    .post-content,
    .notes-page {
        max-width: 100%;
    }

    .site-footer {
        position: static;
        inset: auto;
        grid-column: auto;
        padding: 12px 20px 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "tagline tagline"
            "meta links";
        align-items: end;
        row-gap: 8px;
        column-gap: 14px;
    }

    .site-footer-bottom {
        display: contents;
    }

    .site-footer-tagline,
    .site-footer-meta {
        text-align: left;
    }

    .site-footer-tagline {
        grid-area: tagline;
    }

    .site-footer-meta {
        grid-area: meta;
    }

    .site-footer-right {
        grid-area: links;
        width: max-content;
        max-width: 100%;
        justify-self: end;
        align-self: end;
        text-align: right;
        align-items: center;
        gap: 0;
        white-space: nowrap;
    }

    .site-footer-sep {
        margin: 0 0.42em;
    }

    .notes-page {
        padding-right: 0;
    }

    .notes-page > .note-item:first-of-type {
        padding-top: 0;
    }
}

@keyframes senSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}