:root {
    --pf-bg: #f4efe6;
    --pf-ink: #1a1612;
    --pf-muted: #6f665c;
    --pf-line: #e0d6c8;
    --pf-paper: #fcf9f3;
    --pf-accent: #8f2d1c;
    --pf-accent-soft: #f4ddd3;
    --pf-gold: #b08958;
    --pf-wash: color-mix(in srgb, var(--pf-paper) 72%, var(--pf-bg));
    --pf-accent-hover: color-mix(in srgb, var(--pf-accent) 78%, #000);
    --pf-on-accent: #fff;
    --pf-ok: #2f5d3a;
    --pf-ok-soft: #e8f0e6;
    --pf-glow-a: color-mix(in srgb, var(--pf-accent) 18%, transparent);
    --pf-glow-b: color-mix(in srgb, var(--pf-gold) 16%, transparent);
    --pf-header-bg: color-mix(in srgb, var(--pf-bg) 82%, transparent);
    --pf-shadow: 0 16px 36px color-mix(in srgb, var(--pf-ink) 8%, transparent);
    --pf-width: 1120px;
    --pf-nav: 72px;
    --pf-serif: "Songti SC", "STSong", "KaiTi", "SimSun", Georgia, serif;
    --pf-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.pf-body {
    margin: 0;
    min-height: 100vh;
    background: var(--pf-bg) !important;
    color: var(--pf-ink) !important;
    font-family: var(--pf-sans);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

body.pf-body a {
    color: inherit;
    text-decoration: none;
}

.pf-body input::placeholder,
.pf-body textarea::placeholder {
    color: color-mix(in srgb, var(--pf-muted) 82%, var(--pf-ink));
    opacity: 1;
}

.pf-body input::-webkit-input-placeholder,
.pf-body textarea::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--pf-muted) 82%, var(--pf-ink));
    opacity: 1;
}

.pf-body input::-moz-placeholder,
.pf-body textarea::-moz-placeholder {
    color: color-mix(in srgb, var(--pf-muted) 82%, var(--pf-ink));
    opacity: 1;
}

.pf-body input:-webkit-autofill,
.pf-body input:-webkit-autofill:hover,
.pf-body input:-webkit-autofill:focus,
.pf-body textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--pf-ink);
    caret-color: var(--pf-ink);
    box-shadow: 0 0 0 1000px var(--pf-bg) inset;
    transition: background-color 99999s ease-out;
}

.pf-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--pf-accent);
    background:
        radial-gradient(920px 460px at 8% -10%, var(--pf-glow-a), transparent 58%),
        radial-gradient(720px 380px at 100% 0%, var(--pf-glow-b), transparent 52%),
        linear-gradient(180deg, var(--pf-wash) 0%, var(--pf-bg) 280px);
}

.pf-wrap::after {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pf-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--pf-nav);
    border-bottom: 1px solid color-mix(in srgb, var(--pf-line) 90%, transparent);
    background: var(--pf-header-bg);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.pf-header-inner,
.pf-footer-inner,
.pf-main,
.pf-prose,
.pf-studio-body {
    min-width: 0;
}

.pf-header.is-scrolled {
    box-shadow: 0 10px 28px rgba(48, 36, 24, 0.06);
}

.pf-header-inner,
.pf-footer-inner,
.pf-main {
    width: 90%;
    max-width: var(--pf-width);
    margin: 0 auto;
}

.pf-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.pf-brand {
    display: flex;
    align-items: center;
    line-height: 1;
}

.pf-brand strong {
    font-family: var(--pf-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: lowercase;
}

.pf-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pf-nav a {
    padding: 8px 16px;
    color: var(--pf-muted);
    font-size: 14px;
    border-radius: 999px;
}

.pf-nav a:hover,
.pf-nav a.is-active {
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
}

.pf-nav a.pf-nav-write {
    margin-left: 10px;
    color: var(--pf-on-accent);
    background: var(--pf-accent);
}

.pf-nav-toggle {
    display: none;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    background: var(--pf-paper);
    color: var(--pf-ink);
    cursor: pointer;
}

.pf-main {
    flex: 1;
    padding: 56px 0 108px;
}

.pf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 56px;
    align-items: end;
    padding: 18px 0 64px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-hero-copy {
    position: relative;
    padding-left: 22px;
}

.pf-hero-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--pf-accent), transparent);
}

.pf-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--pf-accent);
    font-size: 12px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
}

.pf-hero h1 {
    margin: 0 0 16px;
    max-width: 9em;
    font-family: var(--pf-sans);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0.04em;
}

.pf-identity {
    margin: 0 0 18px;
    color: var(--pf-gold);
    font-size: 14px;
    letter-spacing: 0.2em;
}

.pf-hero .pf-intro {
    max-width: 38em;
    margin: 0 0 32px;
    color: var(--pf-muted);
}

.pf-hero .pf-intro p {
    margin: 0 0 0.7em;
}

.pf-hero .pf-intro p:last-child {
    margin-bottom: 0;
}

.pf-hero .pf-intro ul,
.pf-hero .pf-intro ol {
    margin: 0 0 0.7em;
    padding-left: 1.2em;
}

.pf-hero-aside {
    position: relative;
    width: 100%;
    max-width: 280px;
    justify-self: end;
    padding: 22px 22px 20px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 4px 28px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
}

.pf-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pf-accent);
    box-shadow: inset 0 0 0 3px var(--pf-accent);
    color: var(--pf-accent);
    font-family: var(--pf-serif);
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--pf-paper) 94%, transparent);
}

.pf-hero-aside .pf-seal {
    position: absolute;
    top: -14px;
    right: 18px;
    width: 52px;
    height: 52px;
    font-size: 26px;
    transform: rotate(-8deg);
}

.pf-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-hero-aside .pf-stat:last-of-type {
    border-bottom: 0;
}

.pf-stat b {
    font-family: var(--pf-serif);
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.pf-stat span {
    justify-self: end;
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.16em;
}

.pf-aside-note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--pf-line);
    color: var(--pf-muted);
    font-size: 12px;
    line-height: 1.7;
}

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

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--pf-line);
    background: var(--pf-paper);
    color: var(--pf-ink);
    font-size: 14px;
    cursor: pointer;
}

.pf-btn-primary {
    background: var(--pf-accent);
    color: var(--pf-on-accent) !important;
    border-color: var(--pf-accent);
    font-weight: 600;
}

.pf-btn-primary:hover {
    background: var(--pf-accent-hover);
}

.pf-btn-ghost:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

.pf-section {
    padding-top: 64px;
}

.pf-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.pf-section-head h2 {
    margin: 0;
    font-family: var(--pf-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.pf-section-head a {
    color: var(--pf-muted);
    font-size: 14px;
    border-bottom: 1px solid transparent;
}

.pf-section-head a:hover {
    color: var(--pf-accent);
    border-bottom-color: var(--pf-accent);
}

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

.pf-home-projects .pf-card {
    min-height: 0;
    padding: 22px;
}

.pf-home-projects .pf-card-cover {
    width: calc(100% + 44px);
    height: 118px;
    margin: -22px -22px 16px;
}

.pf-home-projects .pf-card-meta {
    margin-bottom: 12px;
}

.pf-home-projects .pf-card h3 {
    font-size: 18px;
}

.pf-home-projects .pf-card p {
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-home-lines a {
    display: grid;
    grid-template-columns: 7.2em minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    min-height: 52px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pf-line);
    color: inherit;
}

.pf-home-lines a:hover {
    text-decoration: none;
}

.pf-home-lines a:hover strong {
    color: var(--pf-accent);
}

.pf-home-lines time {
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.pf-home-lines strong {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.45;
}

.pf-home-jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 56px;
}

.pf-home-jump a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    min-height: 132px;
    padding: 22px 24px 20px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 22px 22px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
    color: inherit;
    align-content: start;
}

.pf-home-jump a:hover {
    text-decoration: none;
    border-color: var(--pf-accent);
}

.pf-home-jump span {
    color: var(--pf-gold);
    font-size: 13px;
    letter-spacing: 0.18em;
}

.pf-home-jump strong {
    font-family: var(--pf-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.pf-home-jump p {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    color: var(--pf-muted);
    font-size: 14px;
    line-height: 1.7;
}

.pf-project-grid,
.pf-article-list {
    display: grid;
    width: 100%;
    gap: 18px;
}

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

.pf-card {
    display: flex;
    flex-direction: column;
    min-height: 248px;
    padding: 28px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 26px 26px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pf-card-cover {
    display: block;
    width: calc(100% + 56px);
    height: 168px;
    margin: -28px -28px 18px;
    object-fit: cover;
    background: var(--pf-accent-soft);
}

a.pf-card:hover {
    transform: translateY(-6px);
    border-color: var(--pf-accent);
    box-shadow: 0 22px 40px color-mix(in srgb, var(--pf-ink) 12%, transparent);
}

.pf-card-feature {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 8%, transparent), transparent 46%),
        var(--pf-paper);
}

.pf-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.16em;
}

.pf-card-index {
    font-family: var(--pf-serif);
    color: var(--pf-accent);
    font-size: 22px;
    letter-spacing: 0;
}

.pf-card h3 {
    margin: 0 0 10px;
    font-family: var(--pf-sans);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.pf-card p {
    margin: 0 0 22px;
    color: var(--pf-muted);
    flex: 1;
}

.pf-tags,
.pf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-tags span,
.pf-chip {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--pf-accent-soft);
    color: var(--pf-accent);
    font-size: 12px;
}

.pf-article {
    display: grid;
    width: 100%;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pf-line);
    background: transparent;
    border-radius: 0;
}

a.pf-article:hover h3 {
    color: var(--pf-accent);
}

.pf-article-cover,
.pf-article-fallback {
    width: 100%;
    height: 118px;
    border-radius: 4px 16px 16px 4px;
    object-fit: cover;
    background: var(--pf-accent-soft);
}

.pf-article-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pf-serif);
    font-size: 32px;
    color: var(--pf-accent);
}

.pf-article h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-family: var(--pf-serif);
}

.pf-article p {
    margin: 0;
    color: var(--pf-muted);
}

.pf-article-meta {
    margin-bottom: 8px;
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pf-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.pf-filter-tags {
    margin: -6px 0 28px;
}

.pf-filter a {
    padding: 6px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    background: var(--pf-paper);
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-filter a:hover,
.pf-filter a.is-on {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    color: var(--pf-on-accent);
}

.pf-empty {
    padding: 48px 24px;
    border: 1px dashed var(--pf-line);
    border-radius: 18px;
    color: var(--pf-muted);
    text-align: center;
    background: color-mix(in srgb, var(--pf-paper) 70%, transparent);
}

.pf-missing {
    max-width: 28em;
    padding: 24px 0 80px;
}

.pf-missing h1 {
    margin: 8px 0 12px;
    font-family: var(--pf-sans);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.pf-missing p {
    margin: 0 0 28px;
    color: var(--pf-muted);
    font-size: 16px;
    line-height: 1.7;
}

.pf-page-title {
    max-width: 42em;
    margin-bottom: 44px;
}

.pf-page-title-wide {
    max-width: none;
}

.pf-index-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-index-head h1 {
    margin: 0 0 10px;
    font-family: var(--pf-sans);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.pf-index-head p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 16px;
}

.pf-index-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.pf-index-count b {
    font-family: var(--pf-serif);
    font-size: 56px;
    font-weight: 400;
    line-height: 0.9;
    color: var(--pf-accent);
}

.pf-index-count span {
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.18em;
}

.pf-index-bar {
    padding: 22px 0 24px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-index-row {
    display: grid;
    grid-template-columns: 3em minmax(0, 1fr);
    gap: 20px 28px;
    align-items: baseline;
}

.pf-index-row + .pf-index-row {
    margin-top: 16px;
}

.pf-index-row > span {
    color: var(--pf-gold);
    font-size: 12px;
    letter-spacing: 0.22em;
    white-space: nowrap;
}

.pf-index-row > span label {
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.pf-index-row nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
}

.pf-index-row a {
    color: var(--pf-muted);
    font-size: 15px;
}

.pf-index-row a:hover,
.pf-index-row a.is-on {
    color: var(--pf-accent);
}

.pf-index-row a.is-on {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--pf-accent);
}

.pf-index-row.pf-index-search {
    align-items: center;
    margin: 0;
}

.pf-index-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 380px);
    height: 34px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 14px 14px 4px;
    background: var(--pf-paper);
}

.pf-index-search-box:focus-within {
    border-color: var(--pf-accent);
}

.pf-index-search-box input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pf-ink);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.pf-index-search-box input[type="search"]::-webkit-search-decoration,
.pf-index-search-box input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.pf-index-search-clear {
    flex-shrink: 0;
    color: var(--pf-muted);
    font-size: 13px;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.pf-index-search-clear:hover {
    color: var(--pf-accent);
}

.pf-index-search-box button {
    flex-shrink: 0;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--pf-accent);
    color: var(--pf-on-accent);
    font-size: 12px;
    font-family: inherit;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.pf-index-search-box button:hover {
    background: var(--pf-accent-hover);
}

.pf-index-chips {
    gap: 8px !important;
}

.pf-index-chips a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    background: var(--pf-paper);
    color: var(--pf-muted);
    font-size: 13px;
    box-shadow: none;
    font-weight: 400;
}

.pf-index-chips a:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
}

.pf-index-chips a.is-on {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    color: var(--pf-on-accent);
    font-weight: 600;
    box-shadow: none;
}

.pf-index-list {
    width: 100%;
}

.pf-index-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 220px;
    gap: 36px;
    align-items: center;
    width: 100%;
    padding: 32px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-index-item time {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-index-item time span {
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.16em;
}

.pf-index-item time strong {
    font-family: var(--pf-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--pf-ink);
}

.pf-index-copy h2 {
    margin: 0 0 8px;
    font-family: var(--pf-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
}

.pf-index-item:hover h2 {
    color: var(--pf-accent);
}

.pf-index-copy p {
    margin: 0 0 12px;
    color: var(--pf-muted);
    font-size: 15px;
    line-height: 1.7;
}

.pf-index-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pf-index-cover {
    width: 100%;
    height: 132px;
    object-fit: cover;
    border-radius: 4px 18px 18px 4px;
    background: var(--pf-accent-soft);
}

.pf-index-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pf-serif);
    font-size: 36px;
    color: var(--pf-accent);
}

.pf-page-title h1 {
    margin: 0 0 12px;
    font-family: var(--pf-sans);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.pf-page-title .pf-identity {
    margin-bottom: 12px;
}

.pf-page-title p,
.pf-page-lead {
    margin: 0;
    color: var(--pf-muted);
    font-size: 18px;
}

.pf-page-lead p {
    margin: 0 0 0.7em;
}

.pf-page-lead p:last-child {
    margin-bottom: 0;
}

.pf-about-id {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-about-id.has-photo {
    grid-template-columns: 168px minmax(0, 1fr);
}

.pf-about-photo {
    width: 168px;
    height: 210px;
    object-fit: cover;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 4px 28px;
    background: var(--pf-accent-soft);
    box-shadow: var(--pf-shadow);
}

.pf-about-id .pf-seal {
    position: static;
    top: auto;
    right: auto;
    width: 88px;
    height: 88px;
    font-size: 40px;
    transform: rotate(-8deg);
}

.pf-about-id h1 {
    margin: 0 0 6px;
    font-family: var(--pf-serif);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.15;
}

.pf-about-role {
    margin: 0 0 18px;
    color: var(--pf-accent);
    font-size: 14px;
    letter-spacing: 0.16em;
}

.pf-about-id .pf-page-lead {
    max-width: 38em;
}

.pf-about-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.pf-about-topics span {
    padding: 4px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    color: var(--pf-ink);
    font-size: 13px;
}

.pf-about-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.72fr);
    gap: 40px 56px;
    align-items: center;
}

.pf-about-body {
    max-width: none;
    margin: 0;
    font-size: 17px;
    line-height: 1.9;
}

.pf-about-aside {
    align-self: center;
    padding: 20px 20px 16px;
    border: 1px solid var(--pf-line);
    border-radius: 10px;
    background: var(--pf-paper);
}

.pf-about-aside h3 {
    margin: 0 0 12px;
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
}

.pf-about-aside .pf-about-topics {
    gap: 6px;
}

.pf-about-aside .pf-about-topics span {
    background: var(--pf-bg);
}

.pf-about-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 8px;
    background: var(--pf-line);
}

.pf-about-facts.has-topics {
    margin-top: 16px;
}

.pf-about-facts a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--pf-paper);
}

.pf-about-facts a:hover {
    background: var(--pf-bg);
}

.pf-about-facts a:hover b,
.pf-about-facts a:hover span {
    color: var(--pf-accent);
}

.pf-about-facts b {
    font-family: var(--pf-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.pf-about-facts span {
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.pf-about-body p {
    margin: 0 0 0.9em;
}

.pf-about-body p:last-child {
    margin-bottom: 0;
}

.pf-about-meta {
    margin: 18px 0 0;
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.pf-about-block {
    margin-bottom: 56px;
}

.pf-about-block:last-child {
    margin-bottom: 8px;
}

.pf-about-catalog {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pf-line);
}

.pf-about-row {
    display: grid;
    grid-template-columns: 48px 72px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-about-row-note {
    grid-template-columns: 92px minmax(0, 1fr);
}

.pf-about-row b,
.pf-about-row time {
    color: var(--pf-muted);
    font-family: var(--pf-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pf-about-row img,
.pf-about-thumb {
    width: 72px;
    height: 52px;
    border-radius: 4px 12px 12px 4px;
    object-fit: cover;
    background: var(--pf-accent-soft);
}

.pf-about-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-accent);
    font-family: var(--pf-serif);
    font-size: 20px;
}

.pf-about-row-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pf-about-row-copy strong {
    font-size: 18px;
    font-family: var(--pf-serif);
    font-weight: 600;
}

.pf-about-row-copy em,
.pf-about-row-copy i {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pf-muted);
    font-style: normal;
    font-size: 13px;
}

.pf-about-row:hover strong {
    color: var(--pf-accent);
}

.pf-about-skills {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pf-line);
}

.pf-about-skill {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 12px 28px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-about-skill dt {
    margin: 0;
    color: var(--pf-accent);
    font-size: 13px;
    letter-spacing: 0.16em;
}

.pf-about-skill dd {
    margin: 0;
    color: var(--pf-ink);
    font-size: 16px;
    line-height: 1.8;
}

.pf-about-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pf-line);
}

.pf-about-contact li {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 12px 28px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-about-contact span {
    color: var(--pf-accent);
    font-size: 13px;
    letter-spacing: 0.16em;
}

.pf-about-contact a,
.pf-about-contact em {
    color: var(--pf-ink);
    font-size: 16px;
    font-style: normal;
    word-break: break-all;
}

.pf-about-contact a:hover {
    color: var(--pf-accent);
}

.pf-panel {
    padding: 30px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 28px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
}

.pf-panel h2 {
    margin: 0 0 20px;
    font-family: var(--pf-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.pf-timeline {
    display: grid;
    gap: 28px;
    border-left: 2px solid var(--pf-accent-soft);
    padding-left: 20px;
}

.pf-timeline h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.pf-timeline .pf-year {
    color: var(--pf-accent);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.pf-timeline ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--pf-muted);
}

.pf-skill {
    margin-bottom: 20px;
}

.pf-skill:last-child {
    margin-bottom: 0;
}

.pf-skill b {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.pf-read-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.pf-read-wrap.has-side {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 36px;
    align-items: start;
}

.pf-read {
    padding: 36px 44px 48px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 28px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
}

.pf-read-back {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-read-back:hover {
    color: var(--pf-accent);
}

.pf-read-head {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-read-head .pf-kicker {
    margin-bottom: 12px;
}

.pf-read-head h1 {
    margin: 0 0 14px;
    font-family: var(--pf-sans);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0.03em;
}

.pf-read-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-read-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-read-tags a,
.pf-read-tags span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pf-accent-soft);
    color: var(--pf-accent);
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.pf-read-cate {
    color: var(--pf-accent);
    font-size: 13px;
}

.pf-article-lead {
    width: 100%;
    max-height: 420px;
    margin: 0 0 28px;
    border-radius: 4px 22px 22px 4px;
    object-fit: cover;
}

.pf-project-go {
    margin: -8px 0 28px;
}

.pf-prose {
    color: var(--pf-ink);
    font-size: 17px;
    line-height: 1.9;
}

.pf-prose p,
.pf-prose li,
.pf-prose span,
.pf-prose div,
.pf-prose td,
.pf-prose th {
    font-family: var(--pf-sans) !important;
    background-color: transparent !important;
}

.pf-prose p {
    margin: 0 0 1.1em;
}

.pf-prose p[align="center"],
.pf-prose h2[align="center"] {
    color: var(--pf-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pf-prose h2,
.pf-prose h3,
.pf-prose h4 {
    margin: 1.8em 0 0.7em;
    color: var(--pf-ink);
    font-family: var(--pf-sans);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.pf-prose h2 {
    padding-left: 12px;
    border-left: 2px solid var(--pf-accent);
    font-size: 22px;
}

.pf-prose h3 {
    font-size: 18px;
}

.pf-prose h4 {
    font-size: 16px;
}

.pf-prose ul,
.pf-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.pf-prose li {
    margin: 0 0 0.4em;
}

.pf-prose a {
    color: var(--pf-accent);
    border-bottom: 1px solid var(--pf-accent-soft);
}

.pf-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px auto 12px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-paper);
}

.pf-prose blockquote {
    margin: 0 0 1.3em;
    padding: 6px 0 6px 16px;
    border-left: 3px solid var(--pf-accent);
    color: var(--pf-muted);
}

.pf-prose hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--pf-line);
}

.pf-prose table {
    width: 100%;
    margin: 0 0 1.3em;
    border-collapse: collapse;
    font-size: 15px;
}

.pf-prose th,
.pf-prose td {
    padding: 8px 12px;
    border: 1px solid var(--pf-line);
}

.pf-prose th {
    background: color-mix(in srgb, var(--pf-accent-soft) 58%, var(--pf-paper));
    font-weight: 600;
}

.pf-prose code {
    padding: 0.1em 0.4em;
    border-radius: 4px;
    background: var(--pf-accent-soft);
    color: var(--pf-accent);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88em;
}

.pf-prose pre,
.pf-prose .prettyprint {
    margin: 0 0 1.3em;
    padding: 16px 18px;
    overflow-x: auto;
    border-radius: 4px 14px 14px 4px;
    background: color-mix(in srgb, #161310 88%, var(--pf-accent)) !important;
    color: #f3eadf;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 13px;
    line-height: 1.65;
}

.pf-prose pre code,
.pf-prose .prettyprint code {
    background: transparent !important;
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
}

.pf-prose pre .pln { color: #f3eadf; }
.pf-prose pre .pun, .pf-prose pre .opn, .pf-prose pre .clo { color: color-mix(in srgb, #f3eadf 72%, var(--pf-gold)); }
.pf-prose pre .str, .pf-prose pre .atv { color: #e2c48a; }
.pf-prose pre .kwd { color: #e8b4a8; }
.pf-prose pre .com { color: color-mix(in srgb, #f3eadf 42%, #161310); }
.pf-prose pre .typ { color: #c4d4b8; }
.pf-prose pre .lit { color: #c9b896; }
.pf-prose pre .tag { color: #d7b2a4; }
.pf-prose pre .atn { color: #b7c9c2; }

.pf-read-side {
    position: sticky;
    top: calc(var(--pf-nav) + 20px);
    padding: 18px 16px 16px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 18px 18px 4px;
    background: var(--pf-paper);
}

.pf-read-side-kicker {
    margin: 0 4px 12px;
    color: var(--pf-accent);
    font-size: 11px;
    letter-spacing: 0.28em;
}

.pf-read-side-nav {
    display: grid;
    gap: 2px;
}

.pf-read-side-nav a {
    display: block;
    padding: 10px 8px;
    border-radius: 8px;
}

.pf-read-side-nav a:hover,
.pf-read-side-nav a.is-on {
    background: var(--pf-accent-soft);
}

.pf-read-side-nav a.is-on strong {
    color: var(--pf-accent);
}

.pf-read-side-nav span {
    display: block;
    margin-bottom: 4px;
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.pf-read-side-nav strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.pf-read-side-more {
    display: inline-block;
    margin: 12px 8px 0;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-read-side-more:hover {
    color: var(--pf-accent);
}

.pf-pager {
    margin-top: 32px;
}

.pf-pager .paginator {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--pf-muted);
}

.pf-pager .paginator a,
.pf-pager .paginator .current {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--pf-line);
    background: var(--pf-paper);
}

.pf-pager .paginator .current {
    background: var(--pf-accent);
    color: var(--pf-on-accent);
    border-color: transparent;
}

.pf-alert {
    display: none;
    position: fixed;
    top: 88px;
    left: 50%;
    z-index: 80;
    width: auto;
    max-width: 360px;
    padding: 12px 36px 12px 16px;
    border-radius: 12px;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    box-shadow: var(--pf-shadow);
    transform: translateX(-50%);
}

.pf-alert p {
    margin: 0;
    font-size: 14px;
}

.pf-alert .close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--pf-muted);
}

.pf-alert.alert-danger {
    display: block;
    border-color: color-mix(in srgb, var(--pf-accent) 40%, var(--pf-line));
    background: var(--pf-accent-soft);
    color: var(--pf-ink);
}

.pf-alert.alert-success {
    display: block;
    border-color: color-mix(in srgb, var(--pf-ok) 40%, var(--pf-line));
    background: var(--pf-ok-soft);
    color: var(--pf-ok);
}

.pf-footer {
    border-top: 1px solid var(--pf-line);
    padding: 36px 0 42px;
}

.pf-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-footer-brand {
    font-family: var(--pf-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-ink);
    letter-spacing: 0.22em;
    text-transform: lowercase;
    margin-bottom: 6px;
}

.pf-footer a:hover {
    color: var(--pf-accent);
}

.pf-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

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

.pf-auth-card {
    padding: 32px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 28px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
}

.pf-auth-card h2 {
    margin: 0 0 8px;
    font-family: var(--pf-sans);
    font-size: 22px;
    font-weight: 600;
}

.pf-auth-card .pf-auth-hint {
    margin: 0 0 24px;
    color: var(--pf-muted);
    font-size: 14px;
}

.pf-field {
    margin-bottom: 16px;
}

.pf-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--pf-muted);
}

.pf-field input:not([type="file"]):not([type="checkbox"]):not([type="color"]):not([type="radio"]),
.pf-field select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-bg);
    color: var(--pf-ink);
    font-size: 15px;
    outline: none;
}

.pf-field select,
.pf-table-row select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f665c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

html[data-period="night"] .pf-field select,
html[data-period="night"] .pf-table-row select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23d4cbc0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pf-field input:not([type="file"]):not([type="checkbox"]):not([type="color"]):not([type="radio"]):focus,
.pf-field select:focus {
    border-color: var(--pf-accent);
}

.pf-field-hint {
    margin-left: 8px;
    color: var(--pf-gold);
    font-size: 12px;
    font-weight: 400;
}

.pf-auth-card .pf-btn {
    width: 100%;
    margin-top: 6px;
}

.pf-auth-social {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pf-line);
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-auth-social a {
    margin-right: 14px;
    color: var(--pf-ink);
    border-bottom: 1px solid var(--pf-line);
}

.pf-auth-social a:hover {
    color: var(--pf-accent);
}

@media (max-width: 900px) {
    body.pf-nav-lock {
        overflow: hidden;
    }

    .pf-header-inner,
    .pf-footer-inner,
    .pf-main {
        width: calc(100% - 32px);
    }

    .pf-hero,
    .pf-about-grid,
    .pf-about-split,
    .pf-about-id,
    .pf-project-grid,
    .pf-article,
    .pf-auth-grid,
    .pf-book-lead,
    .pf-home-jump {
        grid-template-columns: 1fr;
    }

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

    .pf-home-jump {
        gap: 14px;
        padding-top: 36px;
    }

    .pf-hero {
        gap: 28px;
        padding: 8px 0 36px;
    }

    .pf-about-id,
    .pf-about-id.has-photo {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
        padding-bottom: 24px;
    }

    .pf-about-split {
        gap: 24px;
    }

    .pf-about-photo {
        width: 132px;
        height: 164px;
    }

    .pf-about-id h1 {
        font-size: 34px;
    }

    .pf-about-id .pf-seal {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    .pf-about-row {
        grid-template-columns: 36px 56px minmax(0, 1fr);
        gap: 10px;
    }

    .pf-about-row-note {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .pf-about-skill {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 0;
    }

    .pf-about-row img,
    .pf-about-thumb {
        width: 56px;
        height: 40px;
    }

    .pf-about-row time:last-child {
        display: none;
    }

    .pf-hero h1,
    .pf-page-title h1,
    .pf-index-head h1 {
        font-size: 30px;
        letter-spacing: 0.04em;
    }

    .pf-hero-copy {
        padding-left: 0;
    }

    .pf-hero-copy::before {
        display: none;
    }

    .pf-hero-aside {
        max-width: none;
        justify-self: stretch;
        padding: 22px 18px 18px;
    }

    .pf-hero-aside .pf-seal {
        width: 48px;
        height: 48px;
        font-size: 24px;
        top: -12px;
        right: 14px;
    }

    .pf-actions .pf-btn {
        min-height: 44px;
        flex: 1 1 auto;
    }

    .pf-section {
        padding-top: 40px;
    }

    .pf-panel {
        padding: 20px 16px;
    }

    .pf-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        height: 40px;
        z-index: 2;
    }

    .pf-header.is-open .pf-nav-toggle {
        border-color: var(--pf-accent);
        color: var(--pf-accent);
        background: var(--pf-accent-soft);
    }

    .pf-nav {
        display: none;
        position: absolute;
        top: var(--pf-nav);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--pf-nav));
        overflow-y: auto;
        padding: 10px 16px 18px;
        background: var(--pf-bg);
        border-bottom: 1px solid var(--pf-line);
        box-shadow: 0 18px 28px rgba(48, 36, 24, 0.08);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .pf-header.is-open .pf-nav {
        display: flex;
    }

    .pf-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 16px;
        color: var(--pf-ink);
    }

    .pf-nav a.pf-nav-write {
        margin: 6px 0 0;
        justify-content: center;
        color: var(--pf-accent);
        background: var(--pf-accent-soft);
    }

    .pf-nav a.pf-nav-write.is-active {
        color: var(--pf-on-accent);
        background: var(--pf-accent);
    }

    .pf-article-cover,
    .pf-article-fallback,
    .pf-index-cover {
        height: 180px;
    }

    .pf-main {
        padding: 28px 0 72px;
    }

    .pf-page-title {
        margin-bottom: 28px;
    }

    .pf-page-title p,
    .pf-page-lead {
        font-size: 16px;
    }

    .pf-read {
        padding: 22px 16px 28px;
    }

    .pf-read-head h1 {
        font-size: 24px;
    }

    .pf-read-wrap.has-side {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pf-read-side {
        position: static;
    }

    .pf-article-lead {
        max-height: 220px;
        margin-bottom: 20px;
    }

    .pf-prose {
        font-size: 16px;
        line-height: 1.8;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .pf-prose h2 {
        font-size: 19px;
    }

    .pf-prose table,
    .pf-prose pre,
    .pf-prose .prettyprint {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pf-index-head {
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 18px;
    }

    .pf-index-count b {
        font-size: 36px;
    }

    .pf-index-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pf-index-row nav {
        gap: 8px 16px;
    }

    .pf-index-search-box {
        width: 100%;
    }

    .pf-about-contact li {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pf-index-item {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 0;
    }

    .pf-index-item time {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .pf-index-copy h2 {
        font-size: 22px;
    }

    .pf-index-cover {
        order: -1;
    }

    .pf-card-cover {
        height: 140px;
    }

    .pf-footer {
        padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
    }

    .pf-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .pf-field input:not([type="file"]),
    .pf-field select,
    .pf-form textarea,
    .pf-table-row input,
    .pf-table-row select {
        font-size: 16px;
    }
}

body.pf-app .content-wrapper,
body.pf-app .page-shell {
    background: transparent !important;
    color: var(--pf-ink) !important;
    padding: 40px 0 72px !important;
}

body.pf-app .page-container {
    width: 90%;
    max-width: var(--pf-width);
    margin: 0 auto;
}

body.pf-app .page-hero {
    max-width: 42em;
    margin-bottom: 32px;
}

body.pf-app .page-hero h1,
body.pf-app .panel-heading,
body.pf-app .user-nav-item,
body.pf-app label {
    color: var(--pf-ink) !important;
}

body.pf-app .page-hero h1 {
    font-family: var(--pf-sans);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 8px 0 10px;
    letter-spacing: 0.04em;
}

body.pf-app .page-hero p,
body.pf-app .page-hero .page-badge {
    color: var(--pf-muted) !important;
}

body.pf-app .page-badge {
    display: inline-block;
    color: var(--pf-accent) !important;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: none !important;
    padding: 0 !important;
}

body.pf-app .panel,
body.pf-app .panel-default,
body.pf-app .panel-success,
body.pf-app .panel-info,
body.pf-app .user-sidebar {
    background: var(--pf-paper) !important;
    border: 1px solid var(--pf-line) !important;
    color: var(--pf-ink) !important;
    border-radius: 4px 22px 22px 4px;
    box-shadow: var(--pf-shadow);
}

body.pf-app .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--pf-line) !important;
    font-family: var(--pf-serif);
    font-size: 18px;
}

body.pf-app .form-control {
    background: var(--pf-paper) !important;
    border-color: var(--pf-line) !important;
    color: var(--pf-ink) !important;
    height: 42px;
    border-radius: 10px;
    box-shadow: none !important;
}

body.pf-app .btn-success,
body.pf-app .btn-primary {
    background: var(--pf-accent) !important;
    border-color: var(--pf-accent) !important;
    color: var(--pf-on-accent) !important;
}

body.pf-app .btn-default {
    background: var(--pf-paper) !important;
    border-color: var(--pf-line) !important;
    color: var(--pf-ink) !important;
}

body.pf-app .table {
    color: var(--pf-ink);
}

body.pf-app .table-striped > tbody > tr:nth-of-type(odd) {
    background: color-mix(in srgb, var(--pf-accent-soft) 42%, var(--pf-paper));
}

body.pf-app .user-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
}

body.pf-app .user-nav {
    display: grid;
    gap: 6px;
}

body.pf-app .user-nav-item {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
}

body.pf-app .user-nav-item.is-active {
    background: var(--pf-accent-soft) !important;
    color: var(--pf-accent) !important;
}

body.pf-app .form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

body.pf-app .form-row-inline .form-control {
    width: auto;
    min-width: 180px;
}

body.pf-app .table-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

body.pf-app .user-avatar-preview,
body.pf-app .user-avatar-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pf-accent-soft);
    color: var(--pf-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.pf-app .user-avatar-block {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    body.pf-app .user-layout {
        grid-template-columns: 1fr;
    }
}

.pf-auth-single {
    max-width: 420px;
}

body.pf-is-login .pf-alert {
    display: none !important;
}

body.pf-is-login .pf-footer {
    display: none;
}

body.pf-is-login .pf-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--pf-nav));
    padding: 32px 0;
}

.pf-login-board {
    width: 100%;
    max-width: 820px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 4px 28px 4px 28px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
}

.pf-login-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px 32px;
    color: var(--pf-ink);
    background:
        radial-gradient(420px 240px at 0% 0%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 70%),
        linear-gradient(160deg, var(--pf-bg) 0%, color-mix(in srgb, var(--pf-paper) 42%, var(--pf-bg)) 100%);
}

.pf-login-copy h1 {
    margin: 0 0 10px;
    color: var(--pf-ink);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.pf-login-copy > p {
    margin: 0 0 22px;
    color: var(--pf-muted);
}

.pf-login-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-login-list li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--pf-accent) 18%, var(--pf-line));
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-login-list b {
    min-width: 2.5em;
    color: var(--pf-ink);
    font-weight: 600;
}

.pf-login-mark {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pf-accent);
    box-shadow: inset 0 0 0 2px var(--pf-accent);
    color: var(--pf-accent);
    font-family: var(--pf-serif);
    font-size: 24px;
    transform: rotate(-8deg);
    background: var(--pf-paper);
}

.pf-login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
    background: var(--pf-paper);
    color: var(--pf-ink);
    border-left: 1px solid var(--pf-line);
}

.pf-login-card h2 {
    margin: 0 0 6px;
    color: var(--pf-ink);
    font-size: 22px;
    font-weight: 600;
}

.pf-login-card .pf-auth-hint {
    margin: 0 0 18px;
    color: var(--pf-muted);
}

.pf-pass {
    position: relative;
}

.pf-pass input {
    padding-right: 58px;
}

.pf-pass-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--pf-muted);
    font-size: 13px;
    cursor: pointer;
}

.pf-pass-toggle:hover {
    color: var(--pf-accent);
}

.pf-login-tip {
    display: none;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    line-height: 1.5;
}

.pf-login-tip.is-error,
.pf-login-tip.is-ok {
    display: block;
}

.pf-login-tip.is-error {
    color: var(--pf-accent);
}

.pf-login-tip.is-ok {
    color: var(--pf-ok);
}

@keyframes pf-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.pf-login-tip.is-shake,
.pf-pass.is-shake {
    animation: pf-shake 0.38s ease;
}

.pf-login-card .pf-btn {
    width: 100%;
    margin-top: 8px;
}

.pf-login-card .pf-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

@media (max-width: 860px) {
    body.pf-is-login .pf-main {
        align-items: flex-start;
        min-height: 0;
        padding: 20px 0 40px;
    }

    .pf-login-board {
        grid-template-columns: 1fr;
        border-radius: 4px 18px 18px 4px;
    }

    .pf-login-copy {
        padding: 28px 24px 20px;
    }

    .pf-login-copy h1 {
        font-size: 28px;
    }

    .pf-login-mark {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .pf-login-card {
        padding: 24px;
        border-left: 0;
        border-top: 1px solid var(--pf-line);
    }
}

body.pf-is-studio .pf-main {
    padding: 36px 0 80px;
}

.pf-studio {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pf-studio-side {
    position: sticky;
    top: calc(var(--pf-nav) + 20px);
    padding: 18px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 18px 18px 4px;
    background: var(--pf-paper);
}

.pf-studio-group + .pf-studio-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pf-line);
}

.pf-studio-kicker {
    margin: 0 12px 8px;
    color: var(--pf-accent);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.pf-studio-nav {
    display: grid;
    gap: 2px;
}

.pf-studio-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--pf-muted);
    font-size: 14px;
}

.pf-studio-nav a:hover,
.pf-studio-nav a.is-active {
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
}

.pf-studio-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-studio-head h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pf-studio-head-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.pf-studio-head-title h1 {
    margin: 0;
}

.pf-studio-head-note {
    color: var(--pf-muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.pf-studio-head p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 14px;
}

.pf-studio-head p a {
    margin-left: 10px;
    color: var(--pf-accent);
}

.pf-studio-head p a:hover {
    border-bottom: 1px solid var(--pf-accent);
}

.pf-notice {
    margin-bottom: 16px;
    color: var(--pf-ok);
    font-size: 13px;
}

.pf-notice.is-warn {
    color: var(--pf-accent);
}

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

.pf-stat-card {
    padding: 18px 16px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 16px 16px 4px;
    background: var(--pf-paper);
}

.pf-stat-card:hover {
    border-color: var(--pf-accent);
}

.pf-stat-card b {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
}

.pf-stat-card span {
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-studio-head .pf-actions {
    flex-shrink: 0;
}

.pf-dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 36px;
    align-items: end;
}

.pf-dash-hero-copy h2 {
    margin: 0 0 10px;
    font-family: var(--pf-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
}

.pf-dash-kicker {
    margin: 0 0 10px;
    color: var(--pf-accent);
    font-size: 12px;
    letter-spacing: 0.14em;
}

.pf-dash-tagline,
.pf-dash-intro {
    margin: 0;
    color: var(--pf-muted);
    font-size: 14px;
    line-height: 1.75;
}

.pf-dash-intro {
    margin-top: 10px;
    max-width: 38em;
}

.pf-dash-more {
    display: inline-block;
    margin-top: 16px;
    color: var(--pf-accent);
    font-size: 13px;
    border-bottom: 1px solid transparent;
}

.pf-dash-more:hover {
    border-bottom-color: var(--pf-accent);
}

.pf-dash-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pf-dash-facts a {
    padding: 14px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 14px 14px 4px;
    background: color-mix(in srgb, var(--pf-paper) 72%, transparent);
}

.pf-dash-facts a:hover {
    border-color: var(--pf-accent);
}

.pf-dash-facts b {
    display: block;
    margin-bottom: 4px;
    font-family: var(--pf-serif);
    font-size: 24px;
    line-height: 1;
    color: var(--pf-accent);
}

.pf-dash-facts span {
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-dash-board {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 0;
}

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

.pf-dash-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.pf-dash-head h2 em {
    margin-left: 6px;
    color: var(--pf-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
}

.pf-dash-head a {
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-dash-head a:hover {
    color: var(--pf-accent);
}

.pf-dash-empty {
    padding: 18px 0 4px;
    color: var(--pf-muted);
    font-size: 14px;
}

.pf-dash-empty a {
    color: var(--pf-accent);
}

.pf-dash-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-dash-notes li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-dash-notes li:first-child {
    padding-top: 0;
}

.pf-dash-notes li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-dash-notes time {
    display: block;
    padding-top: 2px;
    color: var(--pf-muted);
}

.pf-dash-notes time span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.pf-dash-notes time strong {
    display: block;
    font-family: var(--pf-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--pf-ink);
}

.pf-dash-notes a {
    min-width: 0;
}

.pf-dash-notes b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

.pf-dash-notes a:hover b {
    color: var(--pf-accent);
}

.pf-dash-notes i {
    display: block;
    margin-top: 4px;
    color: var(--pf-muted);
    font-style: normal;
    font-size: 12px;
}

.pf-dash-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pf-dash-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 4px 16px 16px 4px;
    background: color-mix(in srgb, var(--pf-paper) 68%, transparent);
}

.pf-dash-tile:hover {
    border-color: var(--pf-accent);
}

.pf-dash-tile img,
.pf-dash-tile-mark {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
    background: var(--pf-accent-soft);
}

.pf-dash-tile-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-accent);
    font-family: var(--pf-serif);
    font-size: 28px;
}

.pf-dash-tile span {
    display: block;
    padding: 10px 12px 12px;
}

.pf-dash-tile b,
.pf-dash-tile i {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.pf-dash-tile b {
    margin-bottom: 3px;
    font-size: 13px;
}

.pf-dash-tile i {
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-dash-aside {
    margin-top: 0;
}

.pf-dash-skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
}

.pf-dash-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pf-line);
}

.pf-dash-meta h3 {
    margin: 0 0 10px;
    color: var(--pf-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.pf-dash-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-dash-pills a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    font-size: 13px;
}

.pf-dash-pills a:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

.pf-dash-visit {
    margin-bottom: 0;
}

.pf-dash-charts {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
    gap: 16px;
    margin: 0 0 16px;
    align-items: stretch;
}

.pf-dash-charts .pf-panel {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-width: 0;
}

.pf-chart-month {
    grid-column: 1 / -1;
}

.pf-mix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex: 1;
}

.pf-mix-ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

.pf-mix-ring::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: var(--pf-paper);
}

.pf-mix-ring strong,
.pf-mix-ring span {
    position: relative;
    z-index: 1;
}

.pf-mix-ring strong {
    font-family: var(--pf-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.pf-mix-ring span {
    margin-top: 6px;
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.pf-mix ul {
    width: 100%;
    max-width: 220px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-mix li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-mix li:first-child {
    padding-top: 0;
}

.pf-mix li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-mix i {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.pf-mix i.is-article {
    background: var(--pf-accent);
}

.pf-mix i.is-other {
    background: color-mix(in srgb, var(--pf-gold) 42%, var(--pf-line));
}

.pf-mix li span {
    flex: 1;
    min-width: 0;
    color: var(--pf-ink);
    font-size: 13px;
    white-space: nowrap;
}

.pf-mix li b {
    flex-shrink: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pf-mix li em {
    flex-shrink: 0;
    min-width: 2.6em;
    color: var(--pf-muted);
    font-style: normal;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pf-mix > p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-hbars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    flex: 1;
}

.pf-hbars > div {
    min-width: 0;
}

.pf-hbar-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.pf-hbar-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.pf-hbar-meta em {
    flex-shrink: 0;
    color: var(--pf-muted);
    font-size: 12px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.pf-hbars b {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--pf-line);
}

.pf-hbars i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-accent) 48%, var(--pf-line));
}

.pf-hbars i.is-lead {
    background: var(--pf-accent);
}

.pf-month-plot {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-height: 168px;
    padding: 4px 4px 24px;
}

.pf-month-plot > div {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.pf-month-plot strong {
    height: 16px;
    margin-bottom: 6px;
    color: var(--pf-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pf-month-plot b {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 22px;
    flex: 1;
}

.pf-month-plot i {
    display: block;
    width: 100%;
    min-height: 2px;
    background: color-mix(in srgb, var(--pf-accent) 28%, var(--pf-line));
    border-radius: 3px 3px 0 0;
}

.pf-month-plot i.has {
    min-height: 6px;
    background: color-mix(in srgb, var(--pf-accent) 48%, var(--pf-line));
}

.pf-month-plot .is-now i {
    background: var(--pf-accent);
}

.pf-month-plot em {
    position: absolute;
    bottom: -20px;
    left: 50%;
    color: var(--pf-muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

.pf-month-plot .is-now em {
    color: var(--pf-accent);
    font-weight: 600;
}

.pf-dash-head span {
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-visit-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.pf-visit-kpis > div,
.pf-visit-kpis > a {
    padding: 14px 14px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 16px 16px 4px;
    background: var(--pf-paper);
}

.pf-visit-kpis > a:hover {
    border-color: var(--pf-accent);
}

.pf-visit-kpis b {
    display: block;
    font-family: var(--pf-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pf-ink);
}

.pf-visit-kpis span {
    display: block;
    margin-top: 8px;
    color: var(--pf-ink);
    font-size: 13px;
}

.pf-visit-kpis i {
    display: block;
    margin-top: 4px;
    color: var(--pf-muted);
    font-size: 12px;
    font-style: normal;
}

.pf-visit-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    align-items: stretch;
    min-height: 0;
}

.pf-visit-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pf-visit-pane:first-child {
    padding-right: 28px;
    border-right: 1px solid var(--pf-line);
}

.pf-visit-pane:last-child {
    padding-left: 28px;
}

.pf-visit-pane .pf-dash-head {
    margin-bottom: 14px;
}

.pf-visit-plot {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 6px 12px 0 8px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 14px 4px 4px;
    background: var(--pf-bg);
}

.pf-visit-grid {
    position: absolute;
    top: 26px;
    right: 12px;
    bottom: 30px;
    left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.pf-visit-grid span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pf-muted);
    font-size: 10px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pf-visit-grid span::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--pf-line);
}

.pf-visit-grid span:last-child::after {
    border-top-style: solid;
}

.pf-visit-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 7px;
    flex: 1;
    min-height: 168px;
    padding: 2px 2px 28px 28px;
}

.pf-visit-col {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.pf-visit-col strong {
    height: 16px;
    margin-bottom: 6px;
    color: var(--pf-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pf-visit-col b {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
    max-width: 22px;
    flex: 1;
}

.pf-visit-col i {
    display: block;
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    background: color-mix(in srgb, var(--pf-accent) 42%, var(--pf-line));
    border-radius: 3px 3px 0 0;
}

.pf-visit-col i.is-uv {
    background: color-mix(in srgb, var(--pf-gold) 62%, var(--pf-line));
}

.pf-visit-col i.has {
    min-height: 4px;
}

.pf-visit-col.is-today i.is-pv {
    background: var(--pf-accent);
}

.pf-visit-col.is-today i.is-uv {
    background: var(--pf-gold);
}

.pf-visit-col em {
    position: absolute;
    bottom: 8px;
    left: 50%;
    color: var(--pf-muted);
    font-size: 10px;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

.pf-visit-col.is-today em {
    color: var(--pf-accent);
    font-weight: 600;
}

.pf-visit-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-visit-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    background: color-mix(in srgb, var(--pf-accent) 42%, var(--pf-line));
    border-radius: 2px;
    vertical-align: -1px;
}

.pf-visit-legend i.is-pv {
    background: color-mix(in srgb, var(--pf-accent) 42%, var(--pf-line));
}

.pf-visit-legend i.is-uv {
    margin-left: 10px;
    background: color-mix(in srgb, var(--pf-gold) 62%, var(--pf-line));
}

.pf-visit-legend i.is-today {
    margin-left: 14px;
    background: var(--pf-accent);
}

.pf-visit-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-visit-top li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    flex: 1;
    padding: 6px 0;
}

.pf-visit-top li + li {
    border-top: 1px solid var(--pf-line);
}

.pf-visit-top em {
    color: var(--pf-muted);
    font-family: var(--pf-serif);
    font-size: 13px;
    font-style: normal;
}

.pf-visit-top a {
    min-width: 0;
}

.pf-visit-top b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.pf-visit-top a:hover b {
    color: var(--pf-accent);
}

.pf-visit-top a span {
    display: block;
    height: 3px;
    margin-top: 6px;
    background: var(--pf-line);
    border-radius: 99px;
    overflow: hidden;
}

.pf-visit-top a span i {
    display: block;
    height: 100%;
    background: var(--pf-accent-soft);
    border-radius: 99px;
}

.pf-visit-top li:first-child a span i {
    background: var(--pf-accent);
}

.pf-visit-top var {
    color: var(--pf-muted);
    font-size: 12px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.pf-dash-pills-inline {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pf-line);
}

.pf-dash-site-foot {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--pf-line);
    color: var(--pf-muted);
    font-size: 12px;
    line-height: 1.6;
}

.pf-dash-site-foot span {
    display: block;
    margin-top: 2px;
}

.pf-dash-site-foot a {
    color: var(--pf-accent);
}

.pf-dash-catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 0 0;
}

.pf-dash-catalog-block + .pf-dash-catalog-block {
    padding-left: 24px;
    margin-left: 24px;
    border-left: 1px solid var(--pf-line);
}

.pf-dash-catalog-block .pf-dash-head {
    margin-bottom: 8px;
}

.pf-dash-catalog-block .pf-dash-empty {
    padding: 4px 0 0;
}

.pf-dash-catalog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-dash-catalog-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    min-height: 34px;
    padding: 7px 0;
    border-bottom: 1px solid var(--pf-line);
}

.pf-dash-catalog-list li:first-child a {
    padding-top: 2px;
}

.pf-dash-catalog-list li:last-child a {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-dash-catalog-list b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.pf-dash-catalog-list a:hover b {
    color: var(--pf-accent);
}

.pf-dash-catalog-list i {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pf-muted);
    font-style: normal;
    font-size: 12px;
    white-space: nowrap;
}

.pf-dash-pills em {
    color: var(--pf-muted);
    font-style: normal;
    font-size: 12px;
}

.pf-studio .pf-panel {
    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 18px 18px 4px;
    background: var(--pf-paper);
}

.pf-form {
    max-width: 920px;
}

.pf-table-head,
.pf-table-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.pf-table-head.pf-cols-3,
.pf-table-row.pf-cols-3 {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 140px;
}

.pf-table-head {
    margin-bottom: 8px;
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-table-row {
    margin-bottom: 8px;
}

.pf-table-row input,
.pf-table-row select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pf-line);
    border-radius: 8px;
    background-color: var(--pf-bg);
    color: var(--pf-ink);
    font-size: 14px;
    outline: none;
}

.pf-table-row input:focus,
.pf-table-row select:focus {
    border-color: var(--pf-accent);
}

.pf-stack {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pf-line);
}

.pf-stack:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-stack textarea {
    margin-top: 8px;
}

.pf-form .pf-field:last-child {
    margin-bottom: 0;
}

.pf-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 10px;
    background: var(--pf-paper);
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.7;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.pf-form textarea:focus {
    border-color: var(--pf-accent);
}

.pf-form-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.pf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pf-form-foot {
    margin-top: 18px;
}

.pf-block {
    margin-bottom: 14px;
    padding: 14px 0 0;
    border-top: 1px solid var(--pf-line);
}

.pf-block:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.pf-manage-list {
    display: grid;
    gap: 8px;
}

.pf-manage-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-paper);
}

.pf-manage-row em {
    color: var(--pf-accent);
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.pf-manage-row span {
    display: block;
    margin-top: 3px;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-manage-ops {
    display: flex;
    gap: 12px;
    white-space: nowrap;
    font-size: 13px;
}

.pf-manage-ops a {
    color: var(--pf-muted);
}

.pf-manage-ops a:hover {
    color: var(--pf-accent);
}

.st-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pf-paper);
    border: 1px solid var(--pf-line);
    border-radius: 4px 18px 18px 4px;
    overflow: hidden;
    box-shadow: var(--pf-shadow);
}

.st-table th,
.st-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pf-line);
    font-size: 14px;
    vertical-align: middle;
}

.st-table th {
    background: color-mix(in srgb, var(--pf-accent-soft) 50%, var(--pf-paper));
    color: var(--pf-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.st-table tr:last-child td {
    border-bottom: 0;
}

.st-table tbody tr:hover td {
    background: color-mix(in srgb, var(--pf-accent-soft) 32%, var(--pf-paper));
}

.st-table .muted {
    color: var(--pf-muted);
    font-size: 13px;
}

.st-ops {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    white-space: nowrap;
}

.st-ops a {
    color: var(--pf-muted);
    font-size: 13px;
}

.st-ops a:hover {
    color: var(--pf-accent);
}

.st-ops a.is-danger:hover {
    color: var(--pf-accent);
}

.ke-container {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--pf-line) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--pf-paper);
}

.ke-toolbar {
    background: var(--pf-paper) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pf-line) !important;
    padding: 4px 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ke-toolbar .ke-outline {
    border-color: transparent !important;
}

.ke-toolbar .ke-outline:hover,
.ke-toolbar .ke-on {
    border-color: var(--pf-line) !important;
    background: var(--pf-wash) !important;
}

.ke-statusbar {
    background: var(--pf-paper) !important;
    border: 0 !important;
    border-top: 1px solid var(--pf-line) !important;
}

html[data-period="night"] .ke-icon {
    filter: invert(1);
}

html[data-period="night"] .ke-toolbar .ke-outline:hover,
html[data-period="night"] .ke-toolbar .ke-on {
    background: var(--pf-accent-soft) !important;
}

.pf-cover {
    position: relative;
    display: block;
    margin: -22px -22px 24px;
    overflow: hidden;
    border-radius: 4px 18px 0 0;
    cursor: pointer;
}

.pf-cover input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.pf-pic-preview {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--pf-line);
    border-radius: 4px 16px 16px 4px;
    background: var(--pf-accent-soft);
    color: var(--pf-muted);
    font-size: 14px;
}

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

.pf-pic input[type="file"] {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
}

.pf-cover-stage {
    position: relative;
    display: block;
    height: 200px;
    overflow: hidden;
    background: var(--pf-accent-soft);
    border-bottom: 1px solid var(--pf-line);
}

.pf-cover.is-drag .pf-cover-stage {
    background: color-mix(in srgb, var(--pf-accent-soft) 70%, var(--pf-line));
}

.pf-cover-placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: 0;
    color: var(--pf-muted);
    font-size: 14px;
    letter-spacing: 0.12em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pf-cover:hover .pf-cover-placeholder {
    color: var(--pf-ink);
}

.pf-cover-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-cover.has-file .pf-cover-img {
    display: block;
}

.pf-cover.has-file .pf-cover-placeholder {
    display: none;
}

.pf-cover-mask {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(26, 22, 18, 0.42);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.16em;
}

.pf-cover.has-file:hover .pf-cover-mask {
    display: flex;
}

.pf-cover-preview {
    display: block;
    width: 140px;
    height: 88px;
    margin-bottom: 10px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 900px) {
    body.pf-is-studio .pf-main {
        padding: 20px 0 64px;
    }

    .pf-studio {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pf-studio-side {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        gap: 0;
        padding: 10px 10px 8px;
        -webkit-overflow-scrolling: touch;
    }

    .pf-studio-group {
        display: flex;
        flex-shrink: 0;
        align-items: center;
    }

    .pf-studio-group + .pf-studio-group {
        margin-top: 0;
        padding-top: 0;
        margin-left: 6px;
        padding-left: 10px;
        border-top: 0;
        border-left: 1px solid var(--pf-line);
    }

    .pf-studio-kicker {
        display: none;
    }

    .pf-studio-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .pf-studio-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .pf-studio-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .pf-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pf-dash-hero,
    .pf-dash-board,
    .pf-dash-catalog,
    .pf-dash-charts,
    .pf-dash-skill-grid,
    .pf-dash-meta,
    .pf-visit-split {
        grid-template-columns: 1fr;
    }

    .pf-dash-charts {
        grid-template-columns: 1fr;
    }

    .pf-chart-month {
        grid-column: auto;
    }

    .pf-mix-ring {
        width: 112px;
        height: 112px;
    }

    .pf-dash-catalog-block + .pf-dash-catalog-block {
        margin: 16px 0 0;
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid var(--pf-line);
    }

    .pf-visit-pane:first-child {
        padding-right: 0;
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid var(--pf-line);
    }

    .pf-visit-pane:last-child {
        padding-left: 0;
    }

    .pf-visit-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .pf-studio-head .pf-actions {
        width: 100%;
    }

    .pf-studio-head .pf-actions .pf-btn {
        flex: 1 1 auto;
        min-height: 40px;
        padding: 0 14px;
    }

    .pf-form-row,
    .pf-table-head,
    .pf-table-row,
    .pf-table-head.pf-cols-3,
    .pf-table-row.pf-cols-3 {
        grid-template-columns: 1fr;
    }

    .pf-manage-row {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
    }

    .pf-manage-ops {
        grid-column: 2;
        flex-wrap: wrap;
        white-space: normal;
    }

    .st-table {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .st-table thead {
        display: none;
    }

    .st-table tbody,
    .st-table tr,
    .st-table td {
        display: block;
        width: 100%;
    }

    .st-table tr {
        margin-bottom: 10px;
        padding: 14px;
        border: 1px solid var(--pf-line);
        border-radius: 12px;
        background: var(--pf-paper);
    }

    .st-table td {
        padding: 4px 0;
        border: 0;
    }

    .st-table td:first-child {
        font-weight: 600;
        font-size: 16px;
    }

    .st-ops {
        justify-content: flex-start;
        padding-top: 8px;
        flex-wrap: wrap;
    }

    .pf-cover {
        margin: -20px -16px 20px;
    }

    .pf-cover-stage {
        height: 160px;
    }

    body.pf-is-studio .pf-form {
        max-width: none;
    }

    .ke-container {
        max-width: 100% !important;
    }
}

.pf-comment-compose {
    position: relative;
    margin: 32px 0 8px;
    padding: 24px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 22px 22px 4px;
    background: var(--pf-paper);
}

.pf-comment-form .pf-field:last-of-type {
    margin-bottom: 0;
}

.pf-comment-form textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-bg);
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.7;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.pf-comment-form textarea:focus {
    border-color: var(--pf-accent);
}

.pf-comment-honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pf-comment-ok,
.pf-comment-err {
    margin: 0 0 14px;
    font-size: 13px;
}

.pf-comment-ok {
    color: var(--pf-ok);
}

.pf-comment-err {
    color: var(--pf-accent);
}

.pf-comment-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.pf-comment-foot span {
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-comment-list {
    margin-top: 12px;
}

.pf-comment-thread {
    border-bottom: 1px solid var(--pf-line);
}

.pf-comment-thread .pf-comment {
    border-bottom: 0;
}

.pf-comment {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0 12px;
}

.pf-comment-replies {
    margin: 0 0 10px 64px;
    padding-left: 16px;
    border-left: 1px solid var(--pf-line);
}

.pf-comment.is-reply {
    padding: 12px 0;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
}

.pf-comment.is-reply .pf-comment-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.pf-comment-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pf-accent-soft);
}

.pf-comment-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-accent);
    font-family: var(--pf-serif);
    font-size: 20px;
}

.pf-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 6px;
}

.pf-comment-meta strong {
    font-size: 15px;
    font-weight: 600;
}

.pf-comment-meta time {
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-comment-to {
    color: var(--pf-gold);
    font-size: 13px;
}

.pf-comment-reply,
.pf-comment-del {
    border: 0;
    padding: 0;
    background: none;
    color: var(--pf-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.pf-comment-del {
    margin-left: auto;
}

.pf-comment-reply:hover,
.pf-comment-del:hover {
    color: var(--pf-accent);
}

.pf-comment-replying {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--pf-ink);
    font-size: 13px;
}

.pf-comment-replying b {
    font-weight: 600;
}

.pf-comment-replying button {
    border: 0;
    padding: 0;
    background: none;
    color: var(--pf-muted);
    font-size: 13px;
    cursor: pointer;
}

.pf-comment-replying button:hover {
    color: var(--pf-accent);
}

.pf-comment-compose.is-reply {
    border-color: var(--pf-accent);
}

.pf-comment-body p {
    margin: 0;
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.pf-comment-blank {
    color: var(--pf-muted) !important;
}

@media (max-width: 900px) {
    .pf-comment-compose {
        margin-top: 24px;
        padding: 18px 16px;
    }

    .pf-comment-form input:not([type="file"]),
    .pf-comment-form textarea {
        font-size: 16px;
    }

    .pf-comment-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-comment-foot .pf-btn {
        width: 100%;
    }

    .pf-comment {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 0 10px;
    }

    .pf-comment-replies {
        margin-left: 20px;
        padding-left: 12px;
    }

    .pf-comment.is-reply {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .pf-comment-avatar {
        width: 40px;
        height: 40px;
    }
}

.pf-toc {
    display: grid;
    gap: 2px;
    margin: 0 0 18px;
}

.pf-toc a {
    display: block;
    padding: 6px 8px;
    color: var(--pf-muted);
    font-size: 13px;
    line-height: 1.45;
    border-radius: 8px;
}

.pf-toc a.is-h3 {
    padding-left: 18px;
    font-size: 12px;
}

.pf-toc a:hover,
.pf-toc a.is-on {
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
}

.pf-read-side-kicker.is-later {
    margin-top: 18px;
}

.pf-read-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--pf-line);
}

.pf-read-pager-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--pf-line);
    border-radius: 4px 16px 16px 4px;
    background: var(--pf-paper);
}

.pf-read-pager-item.is-next {
    text-align: right;
}

.pf-read-pager-item span {
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.12em;
}

.pf-read-pager-item strong {
    color: var(--pf-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.pf-read-pager-item:hover {
    border-color: var(--pf-accent);
}

.pf-read-pager-item:hover strong {
    color: var(--pf-accent);
}

.pf-read-pager-item.is-empty {
    border: 0;
    background: transparent;
}

.pf-prose h2,
.pf-prose h3 {
    scroll-margin-top: calc(var(--pf-nav) + 16px);
}

.pf-theme-field .pf-field-hint {
    display: block;
    margin: 0 0 12px;
}

.pf-theme-today {
    margin: 0 0 12px;
    color: var(--pf-accent);
    font-size: 13px;
}

.pf-theme-group {
    margin: 0 0 14px;
}

.pf-theme-group-label {
    margin: 0 0 8px;
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-theme-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.pf-theme-auto-help {
    margin: 8px 0 0;
    max-width: 42em;
    color: var(--pf-muted);
    font-size: 13px;
    line-height: 1.7;
}

.pf-theme-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    background: var(--chip-bg, var(--pf-paper));
    color: var(--pf-ink);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.pf-theme-chip.is-on,
.pf-theme-chip:hover {
    border-color: var(--chip-accent, var(--pf-accent));
    color: var(--chip-accent, var(--pf-accent));
}

html[data-period="night"] .pf-theme-chip {
    background: color-mix(in srgb, var(--chip-accent, var(--pf-accent)) 22%, var(--pf-paper));
    border-color: color-mix(in srgb, var(--chip-accent, var(--pf-accent)) 40%, var(--pf-line));
    color: var(--pf-ink);
}

html[data-period="night"] .pf-theme-chip.is-on,
html[data-period="night"] .pf-theme-chip:hover {
    background: color-mix(in srgb, var(--chip-accent, var(--pf-accent)) 32%, var(--pf-paper));
    border-color: var(--chip-accent, var(--pf-accent));
    color: var(--pf-ink);
}

html[data-period="night"] .pf-theme-group-label,
html[data-period="night"] .pf-theme-auto-help,
html[data-period="night"] .pf-field label {
    color: color-mix(in srgb, var(--pf-ink) 82%, var(--pf-muted));
}

.pf-field label.pf-theme-auto {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--pf-ink);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.pf-theme-auto input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    outline: none;
}

.pf-theme-check {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid var(--pf-line);
    border-radius: 4px;
    background: var(--pf-paper);
}

.pf-theme-auto:hover .pf-theme-check {
    border-color: var(--pf-accent);
}

.pf-theme-auto input:focus-visible + .pf-theme-check {
    border-color: var(--pf-accent);
    box-shadow: 0 0 0 3px var(--pf-accent-soft);
}

.pf-theme-auto input:checked + .pf-theme-check {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
}

.pf-theme-auto input:checked + .pf-theme-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--pf-on-accent);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.pf-theme-colors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

.pf-theme-colors label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--pf-muted);
    font-size: 12px;
}

.pf-theme-colors input[type="color"] {
    width: 100%;
    height: 36px;
    padding: 0;
    border: 1px solid var(--pf-line);
    border-radius: 8px;
    background: var(--pf-paper);
    cursor: pointer;
}

html[data-period="night"] {
    color-scheme: dark;
    --pf-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    --pf-header-bg: color-mix(in srgb, var(--pf-bg) 86%, transparent);
    --pf-glow-a: color-mix(in srgb, var(--pf-accent) 7%, transparent);
    --pf-glow-b: color-mix(in srgb, var(--pf-gold) 6%, transparent);
    --pf-wash: color-mix(in srgb, var(--pf-paper) 36%, var(--pf-bg));
}

html[data-period="night"] .pf-wrap::after {
    opacity: 0.02;
}

html[data-mourning="1"] {
    --pf-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    --pf-header-bg: color-mix(in srgb, var(--pf-bg) 90%, transparent);
    --pf-wash: var(--pf-bg);
}

html[data-theme="mianhuai"] {
    color-scheme: light;
    --pf-on-accent: #fff;
    --pf-glow-a: transparent;
    --pf-glow-b: transparent;
    --pf-shadow: none;
    --pf-header-bg: var(--pf-bg);
    --pf-wash: var(--pf-bg);
}

html[data-theme="mianhuai"] .pf-wrap {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

html[data-theme="mianhuai"] .pf-wrap::after {
    opacity: 0;
}

html[data-mourning="1"][data-period="night"] .pf-theme-chip,
html[data-mourning="1"][data-period="night"] .pf-theme-chip.is-on,
html[data-mourning="1"][data-period="night"] .pf-theme-chip:hover {
    background: var(--pf-paper);
    border-color: var(--pf-line);
    color: var(--pf-ink);
}

html[data-mourning="1"][data-period="night"] .pf-theme-chip.is-on,
html[data-mourning="1"][data-period="night"] .pf-theme-chip:hover {
    border-color: var(--chip-accent, var(--pf-accent));
}

@media (max-width: 700px) {
    .pf-read-pager {
        grid-template-columns: 1fr;
    }

    .pf-read-pager-item.is-next {
        text-align: left;
    }

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

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

.pf-game-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 18px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pf-game-card:hover {
    transform: translateY(-6px);
    border-color: var(--pf-accent);
    box-shadow: 0 22px 40px color-mix(in srgb, var(--pf-ink) 12%, transparent);
    text-decoration: none;
    color: inherit;
}

.pf-game-cover {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--pf-accent-soft);
}

.pf-game-play {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pf-ink);
    color: var(--pf-bg);
    font-size: 13px;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pf-game-card:hover .pf-game-play {
    opacity: 1;
    transform: translateY(0);
}

.pf-game-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.pf-game-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--pf-muted);
    font-size: 12px;
    letter-spacing: 0.12em;
}

.pf-game-meta b {
    font-family: var(--pf-serif);
    color: var(--pf-accent);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
}

.pf-game-body h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
}

.pf-game-body p {
    margin: 0;
    color: var(--pf-muted);
    line-height: 1.6;
}

.pf-game-art {
    position: absolute;
    inset: 0;
}

.art-miner {
    background:
        linear-gradient(180deg, #74c4f0 0 42%, #e8c15a 42% 48%, #c9a227 48% 70%, #a8842a 70% 100%);
}

.art-miner .art-char {
    position: absolute;
    left: 50%;
    top: 18px;
    width: 86px;
    height: 69px;
    margin-left: -43px;
    z-index: 2;
}

.art-miner .art-rope {
    position: absolute;
    left: 50%;
    top: 78px;
    width: 2px;
    height: 78px;
    margin-left: -12px;
    background: #2f3b3f;
    transform: rotate(28deg);
    transform-origin: top center;
    z-index: 1;
}

.art-miner .art-nugget {
    position: absolute;
    z-index: 2;
}

.art-miner .n1 { left: 18%; bottom: 28%; width: 36px; height: 36px; }
.art-miner .n2 { right: 16%; bottom: 18%; width: 52px; height: 52px; }
.art-miner .n3 { left: 46%; bottom: 14%; width: 31px; height: 23px; }
.art-miner .n4 { left: 28%; bottom: 10%; width: 36px; height: 36px; }

.art-bricks {
    background: #8bb9e5;
    padding: 22px 18px 0;
}

.art-brick-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.art-brick-row i {
    display: block;
    width: 36px;
    height: 12px;
    border-radius: 3px;
}

.art-paddle {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 72px;
    height: 12px;
    margin-left: -36px;
    border-radius: 999px;
    background: #343939;
}

.art-ball {
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #fff;
}

.art-gobang {
    background: #5c3a1e;
}

.art-board {
    position: absolute;
    inset: 22px 28px 22px;
    background:
        linear-gradient(to right, rgba(40, 24, 8, .55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(40, 24, 8, .55) 1px, transparent 1px),
        #deb887;
    background-size: 18px 18px, 18px 18px, auto;
    border-radius: 6px;
    box-shadow: inset 0 0 0 6px #c4a06a;
}

.art-stone {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;
}

.art-stone.black { background: #1a1a1a; box-shadow: inset -2px -2px 0 #444; }
.art-stone.white { background: #f4f0e8; box-shadow: inset -2px -2px 0 #cfc6b8; }
.art-gobang .s1 { left: 38%; top: 36%; }
.art-gobang .s2 { left: 46%; top: 44%; }
.art-gobang .s3 { left: 54%; top: 36%; }
.art-gobang .s4 { left: 46%; top: 28%; }
.art-gobang .s5 { left: 54%; top: 52%; }

.art-gallery {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.art-polaroid {
    position: absolute;
    width: 78px;
    height: 96px;
    padding: 8px 8px 22px;
    background: #f8fafc;
    border-radius: 3px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
}

.art-polaroid::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: 2px;
}

.art-gallery .p1 { left: 22%; top: 28%; transform: rotate(-12deg); }
.art-gallery .p1::after { background: #7dd3fc; }
.art-gallery .p2 { left: 40%; top: 22%; transform: rotate(4deg); z-index: 1; }
.art-gallery .p2::after { background: #fbbf24; }
.art-gallery .p3 { left: 54%; top: 32%; transform: rotate(14deg); }
.art-gallery .p3::after { background: #fb7185; }

.pf-game-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 760px) {
    .pf-game-grid {
        grid-template-columns: 1fr;
    }

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

    .pf-game-cover {
        height: 180px;
    }

    .pf-game-play {
        opacity: 1;
        transform: none;
    }
}

.pf-index-bar + .pf-book-grid {
    margin-top: 28px;
}

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

.pf-book-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 4px 22px 22px 4px;
    background: var(--pf-paper);
    box-shadow: var(--pf-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pf-book-card:hover {
    transform: translateY(-6px);
    border-color: var(--pf-accent);
    box-shadow: 0 22px 40px color-mix(in srgb, var(--pf-ink) 12%, transparent);
    text-decoration: none;
    color: inherit;
}

.pf-book-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 168px;
    padding: 18px 14px 16px 20px;
    color: #f7efe4;
    overflow: hidden;
}

.pf-book-card .pf-book-cover {
    min-height: 100%;
}

.pf-book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: color-mix(in srgb, #000 22%, transparent);
}

.pf-book-mark {
    position: absolute;
    top: 16px;
    right: 12px;
    font-family: var(--pf-serif);
    font-size: 28px;
    line-height: 1;
    opacity: 0.28;
}

.pf-book-cover strong {
    position: relative;
    z-index: 1;
    font-family: var(--pf-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 108px;
}

.pf-book-card.is-classic .pf-book-cover,
.pf-book-cover.is-classic {
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%),
        linear-gradient(90deg, #6c1f14, #a03a28 18%, #8f2d1c);
}

.pf-book-card.is-sishu .pf-book-cover,
.pf-book-cover.is-sishu {
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%),
        linear-gradient(90deg, #1d3a4c, #2f5d73 18%, #24485c);
}

.pf-book-card.is-wujing .pf-book-cover,
.pf-book-cover.is-wujing {
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%),
        linear-gradient(90deg, #3d4a22, #6b7a3a 18%, #556330);
}

.pf-book-card.is-other .pf-book-cover,
.pf-book-cover.is-other {
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%),
        linear-gradient(90deg, #2c3a32, #4d6558 18%, #3e5348);
}

.pf-book-body {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
    min-width: 0;
}

.pf-book-body h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
}

.pf-book-meta {
    margin: 0 0 10px;
    color: var(--pf-gold);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.pf-book-body p {
    margin: 0;
    color: var(--pf-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.pf-book-lead {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 28px;
}

.pf-book-lead .pf-book-cover {
    width: 124px;
    height: 176px;
    border-radius: 3px 14px 14px 3px;
    box-shadow: var(--pf-shadow);
}

.pf-book-lead .pf-read-head {
    margin: 0;
}

.pf-chapter-search {
    margin: 0 0 12px;
}

.pf-chapter-search input {
    width: 100%;
    max-width: 22em;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    background: var(--pf-paper);
    color: var(--pf-ink);
    font: inherit;
}

.pf-chapter-search input:focus {
    outline: none;
    border-color: var(--pf-accent);
}

.pf-chapter-list li[hidden] {
    display: none;
}

.pf-chapter-empty {
    margin-top: 16px;
}

.pf-chapter-block {
    margin-top: 36px;
}

.pf-chapter-block .pf-section-head span {
    color: var(--pf-muted);
    font-size: 13px;
}

.pf-chapter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pf-line);
}

.pf-chapter-list a {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 12px 8px;
    border-bottom: 1px solid var(--pf-line);
    color: inherit;
}

.pf-chapter-list a:hover {
    color: var(--pf-accent);
    text-decoration: none;
}

.pf-chapter-list em {
    color: var(--pf-gold);
    font-family: var(--pf-serif);
    font-style: normal;
    font-size: 13px;
}

.pf-chapter-list strong {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
}

.pf-book-prose {
    font-size: 18px;
    line-height: 1.95;
}

.pf-book-verse {
    font-size: 17px;
    line-height: 2.05;
}

.pf-book-prose .pf-book-verse {
    font-size: 18px;
}

.pf-book-verse p {
    margin: 0;
}

.pf-book-verse .pf-book-verse-gap {
    height: 0.85em;
}

.pf-book-notes {
    margin-top: 36px;
    padding-top: 8px;
    border-top: 1px solid var(--pf-line);
}

.pf-book-notes section + section {
    margin-top: 28px;
}

.pf-book-notes h2 {
    margin: 0 0 14px;
    color: var(--pf-gold);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
}

.pf-book-gloss {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-book-gloss > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pf-line) 78%, transparent);
}

.pf-book-gloss > li:first-child {
    padding-top: 2px;
}

.pf-book-gloss > li:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.pf-book-gloss-n {
    color: var(--pf-gold);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    padding-top: 3px;
}

.pf-book-gloss-body p {
    margin: 0 0 0.55em;
    color: color-mix(in srgb, var(--pf-ink) 78%, var(--pf-muted));
    font-size: 15px;
    line-height: 1.85;
}

.pf-book-gloss-body p:last-child {
    margin-bottom: 0;
}

.pf-book-gloss-body strong {
    color: var(--pf-ink);
    font-weight: 600;
    margin-right: 0.45em;
}

.pf-book-gloss-body i {
    font-style: normal;
    color: var(--pf-gold);
    font-size: 12px;
    letter-spacing: 0.04em;
    margin-right: 0.55em;
}

.pf-book-toc {
    max-height: 62vh;
    overflow: auto;
    padding-right: 4px;
}

@media (max-width: 900px) {
    .pf-book-grid,
    .pf-chapter-list {
        grid-template-columns: 1fr;
    }

    .pf-book-lead .pf-book-cover {
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    .pf-book-card {
        grid-template-columns: 1fr;
    }

    .pf-book-card .pf-book-cover {
        min-height: 150px;
        height: 150px;
    }

    .pf-book-cover strong {
        writing-mode: horizontal-tb;
        height: auto;
        letter-spacing: 0.08em;
    }
}