/* An open floral masthead above a textured sheet of reading paper. */
@property --folio-flower-phase-x {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --folio-flower-phase-y {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
:root {
    --folio-pattern-width: 1932px;
    --folio-flower-x: 42px;
    --folio-flower-y: 28px;
    --folio-flower-turn: 4.5deg;
    --folio-frame-inset: 25px;
    --folio-corner-size: 102px;
    --folio-frame-line: #fffaf0;
    --folio-paper: #f6f5f1;
    --folio-paper-grain-opacity: .7;
    --folio-paper-grain-blend: multiply;
    --folio-paper-grain-filter: contrast(1.12);
    --folio-pattern-opacity: 1;
    --folio-flower-opacity: 1;
    --folio-surround-filter: none;
    --folio-paper-highlight: #ffffff60;
    --folio-paper-edge-light: #ffffffed;
    --folio-paper-edge-shade: #64728c33;
    --folio-paper-contact: #4551667a;
    --folio-paper-shadow: #29273945;
    --folio-masthead-ink: #30394e;
    --folio-ink: #3c465c;
    --folio-muted: #545d6e;
    --folio-accent: #4b6084;
    --folio-gold: #a58a66;
    --folio-rule: #74809b36;
    --folio-wash: #dde2eb7a;
    --folio-content-width: 1040px;
    --folio-gutter: 40px;
    --folio-ease: cubic-bezier(.22, 1, .36, 1);
    --folio-motion-fast: 180ms;
    --folio-motion-panel: 320ms;
    --folio-motion-reveal: 640ms;
    --folio-motion-stagger: 45ms;
    --folio-motion-page: 360ms;
    --folio-serif: 'Noto Serif SC', 'Noto Serif CJK SC', 'Folio Noto Serif SC', serif;
    --folio-ui: 'Noto Sans SC', 'Noto Sans CJK SC', 'Folio Noto Sans SC', sans-serif;
    --folio-brand-font: 'Great Vibes', 'Folio Great Vibes', var(--folio-serif);
    --folio-display-font: var(--folio-brand-font);
    --folio-heading-font: var(--folio-serif);
    --folio-excerpt-font: var(--folio-serif);
    --folio-nav-font: var(--folio-ui);
    --folio-date-font: 'Cormorant Garamond', 'Folio Cormorant Garamond', var(--folio-serif);
    --font-serif: var(--folio-serif);
    --font-title: var(--folio-heading-font);
    --font-eng: var(--folio-brand-font);
    --font-code: 'Noto Sans Mono', 'Noto Sans Mono CJK SC', 'Folio Noto Sans Mono', var(--folio-ui), monospace;
    --font-mono: var(--font-code);
    --font-sans: var(--folio-ui);
    --color-paper: var(--folio-paper);
    --color-ink: var(--folio-ink);
    --color-seal: var(--folio-accent);
    --color-seal-fill: var(--folio-accent);
    --color-text-heading: var(--folio-ink);
    --color-text-body: var(--folio-ink);
    --color-text-chrome: var(--folio-muted);
    --color-text-subtle: var(--folio-muted);
    --color-text-faint: var(--folio-rule);
    --color-border-strong: var(--folio-rule);
    --color-border-decorative: var(--folio-rule);
    --color-focus-ring: var(--folio-accent);
    --color-bg-panel: var(--folio-paper);
    --color-bg-inset: var(--folio-wash);
    --color-code-bg: #f0ebee;
    --color-code-gutter: #e9e3e9;
    --color-code-keyword: #77508b;
    --color-scrollbar-thumb: #a99db4;
    --color-scrollbar-track: var(--folio-paper);
}
html[data-theme='dark'] {
    --folio-paper: #34435a;
    --folio-paper-grain-opacity: .58;
    --folio-paper-grain-blend: screen;
    --folio-paper-grain-filter: invert(1) contrast(1.12);
    --folio-surround-filter: brightness(.75) saturate(.92);
    --folio-paper-highlight: #e7e4db12;
    --folio-paper-edge-light: #dce6f366;
    --folio-paper-edge-shade: #15233b7a;
    --folio-paper-contact: #101e3e99;
    --folio-paper-shadow: #08132c66;
    --folio-masthead-ink: #f4f0e7;
    --folio-ink: #edf1f8;
    --folio-muted: #cad3e1;
    --folio-accent: #d1dff3;
    --folio-gold: #c7b992;
    --folio-rule: #c7d2e02e;
    --folio-wash: #c3d1e51a;
    --color-code-bg: #253247;
    --color-code-gutter: #2e3b50;
    --color-code-keyword: #c6ade6;
    --color-code-string: #aec5b3;
    --color-code-number: #d6bd9e;
    --color-code-attr: #d6bd9e;
    --color-scrollbar-track: #273950;
    --color-scrollbar-thumb: #8797b1;
}
html { scroll-padding-top: 32px; background: var(--folio-paper); }
body.folio-body {
    position: relative;
    display: flow-root;
    min-width: 300px;
    min-height: 100svh;
    height: auto;
    color: var(--folio-ink);
    font-family: var(--folio-serif);
    background: var(--folio-paper);
    opacity: 1;
    transition: opacity var(--folio-motion-fast) var(--folio-ease);
    -webkit-font-smoothing: antialiased;
}
/* Assemble one complete first scene rather than exposing late background
   images behind text that is already visible. No-JS pages stay readable. */
/* Opacity hides the assembled scene without suppressing CSS image loads. */
html[data-folio-loading] .folio-body { opacity: 0; transition: none; pointer-events: none; }
html[data-folio-loading] :is(.folio-header, .folio-hero h1, .folio-hero .folio-text-link, .folio-paper-surface, .folio-inner .folio-main, .folio-flowers, .folio-petal, [data-folio-reveal]) { animation-play-state: paused; }
html[data-folio-navigation] .folio-body { transition: none; }
.folio-body ::selection { background: var(--folio-rule); color: var(--folio-ink); }
.folio-body :focus-visible { outline: 2px solid var(--folio-accent); outline-offset: 5px; }
.folio-frame { position: absolute; inset: var(--folio-frame-inset); z-index: 1; pointer-events: none; }
.folio-frame::before, .folio-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .5;
    background:
        linear-gradient(var(--folio-frame-line), var(--folio-frame-line)) center top / calc(100% - var(--folio-corner-size) * 2) 1px no-repeat,
        linear-gradient(var(--folio-frame-line), var(--folio-frame-line)) center bottom / calc(100% - var(--folio-corner-size) * 2) 1px no-repeat,
        linear-gradient(var(--folio-frame-line), var(--folio-frame-line)) left center / 1px calc(100% - var(--folio-corner-size) * 2) no-repeat,
        linear-gradient(var(--folio-frame-line), var(--folio-frame-line)) right center / 1px calc(100% - var(--folio-corner-size) * 2) no-repeat;
}
.folio-frame::after { inset: 6px; opacity: .35; }
.folio-corner { position: absolute; width: var(--folio-corner-size); height: var(--folio-corner-size); background: url('../images/corner.svg') center / contain no-repeat; opacity: .8; }
.folio-corner-tl { top: -1px; left: -1px; }
.folio-corner-tr { top: -1px; right: -1px; transform: rotate(90deg); }
.folio-corner-bl { bottom: -1px; left: -1px; transform: rotate(-90deg); }
.folio-corner-br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.folio-frame-star { position: absolute; width: 16px; height: 22px; background: var(--folio-frame-line); opacity: .7; clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%); }
.folio-frame-star-top { top: -8px; left: calc(50% - 8px); }
.folio-frame-star-bottom { bottom: -8px; left: calc(50% - 8px); }
.folio-frame-star-left { left: -5px; top: calc(50% - 11px); }
.folio-frame-star-right { right: -5px; top: calc(50% - 11px); }
.folio-surround {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    filter: var(--folio-surround-filter);
}
.folio-pattern {
    position: absolute;
    inset: 0;
    background: url('../images/floral-paper-display.webp') center top / var(--folio-pattern-width) auto repeat;
    opacity: var(--folio-pattern-opacity);
}
.folio-flowers {
    position: absolute;
    top: calc(110svh + (100% - 110svh) * (var(--flower-row) - 2) / 4);
    width: clamp(190px, 21vw, 340px);
    aspect-ratio: 1;
    background: center / contain no-repeat;
    opacity: var(--folio-flower-opacity);
    transform-origin: 55% 80%;
    transform: translate3d(
        calc(sin(var(--folio-flower-phase-x)) * var(--folio-flower-x)),
        calc(sin(var(--folio-flower-phase-y)) * var(--folio-flower-y)), 0)
        rotate(calc(cos(var(--folio-flower-phase-y)) * var(--folio-flower-turn)));
    animation:
        folio-blossom-x var(--flower-period-x) linear var(--flower-delay-x) infinite,
        folio-blossom-y var(--flower-period-y) linear var(--flower-delay-y) infinite reverse;
}
.folio-flowers:nth-of-type(-n+5) { top: calc(9svh + var(--flower-row) * 48svh); }
.folio-flowers-left { left: 1%; }
.folio-flowers-right { right: 1%; margin-top: 85px; animation-direction: reverse, normal; }
.folio-flowers:nth-child(4n) { width: clamp(170px, 18vw, 300px); }
.folio-flowers:nth-child(3n) { --folio-flower-turn: -5deg; }
.folio-blossom-1 { background-image: url('../images/blossom-1.webp'); }
.folio-blossom-2 { background-image: url('../images/blossom-2.webp'); }
.folio-blossom-3 { background-image: url('../images/blossom-3.webp'); }
.folio-blossom-4 { background-image: url('../images/blossom-4.webp'); }
.folio-blossom-5 { background-image: url('../images/blossom-5.webp'); }
.folio-garden { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.folio-petal {
    --petal-x: 24px;
    --petal-y: clamp(110px, 18svh, 170px);
    --petal-turn: 105deg;
    --petal-period: 24s;
    position: absolute;
    top: calc((var(--petal-row) - 4) * 12%);
    width: 34px;
    height: 25px;
    background: url('../images/petal.webp') center / contain no-repeat;
    opacity: .6;
    animation: folio-petal var(--petal-period) linear var(--petal-delay) infinite;
}
.folio-petal-left { left: 5%; }
.folio-petal-right { right: 5%; --petal-x: -24px; --petal-turn: -95deg; --petal-period: 28s; }
.folio-garden .folio-petal:nth-child(-n+10) { top: calc(3svh + var(--petal-row) * 17svh); }
.folio-garden .folio-petal:nth-child(4n+3) { left: 7%; width: 28px; height: 21px; --petal-x: -18px; --petal-period: 30s; }
.folio-garden .folio-petal:nth-child(4n+4) { right: 7%; width: 30px; height: 22px; --petal-x: 20px; --petal-period: 26s; }
.folio-shell { position: relative; z-index: 2; width: min(var(--folio-content-width), calc(100% - 192px)); margin: 54px auto 72px; }
.folio-sheet {
    position: relative;
    z-index: 1;
    isolation: isolate;
}
.folio-paper-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    isolation: isolate;
    pointer-events: none;
    /* Filtering only this empty decoration preserves fixed TOC positioning. */
    filter: drop-shadow(1px 4px 1px var(--folio-paper-contact)) drop-shadow(4px 14px 18px var(--folio-paper-shadow));
}
.folio-paper-surface::before, .folio-paper-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    mask:
        linear-gradient(#000, #000) center / calc(100% - 6px) calc(100% - 6px) no-repeat,
        url('../images/paper-edge-top.svg') left top / 512px 4px repeat-x,
        url('../images/paper-edge-bottom.svg') left bottom / 512px 4px repeat-x,
        url('../images/paper-edge-left.svg') left top / 4px 512px repeat-y,
        url('../images/paper-edge-right.svg') right top / 4px 512px repeat-y;
}
.folio-paper-surface::before {
    background:
        linear-gradient(90deg, var(--folio-paper-highlight), transparent 24px, transparent calc(100% - 28px), var(--folio-paper-edge-shade)),
        linear-gradient(0deg, var(--folio-paper-edge-shade), transparent 16px),
        radial-gradient(ellipse at 0 0, var(--folio-paper-highlight), transparent 70%),
        var(--folio-paper);
    box-shadow: inset 1px 1px 0 var(--folio-paper-edge-light), inset -2px -2px 0 var(--folio-paper-edge-shade);
}
.folio-paper-surface::after {
    /* Handmade Paper by Le Marquis, CC BY-SA 3.0. See images/PAPER-LICENSE.md. */
    background: url('../images/paper-handmade.webp') 0 0 / 120px 120px repeat;
    opacity: var(--folio-paper-grain-opacity);
    mix-blend-mode: var(--folio-paper-grain-blend);
    filter: var(--folio-paper-grain-filter);
}
.folio-foreground { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: .55; }
.folio-foreground .folio-petal {
    --petal-x: 46px;
    --petal-y: clamp(160px, 26svh, 240px);
    --petal-period: 34s;
    top: calc((var(--petal-row) - 3) * 21%);
    left: 24%;
    width: 28px;
    height: 21px;
}
.folio-foreground .folio-petal:nth-child(-n+4) { top: calc(5svh + var(--petal-row) * 18svh); }
.folio-foreground .folio-petal:nth-child(2n) { left: 72%; --petal-x: -38px; --petal-turn: -85deg; --petal-period: 38s; }
.folio-foreground .folio-petal:nth-child(3n) { left: 48%; width: 24px; height: 18px; --petal-period: 30s; }
.folio-header, .folio-main, .folio-footer { position: relative; z-index: 1; }
.folio-header :focus-visible, .folio-hero :focus-visible { outline-color: currentColor; }
.folio-header { display: flex; align-items: center; min-height: 66px; margin: 0 var(--folio-gutter); gap: 28px; }
.folio-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--folio-brand-font); color: var(--folio-muted); font-size: 29px; font-weight: 400; white-space: nowrap; }
.brand-flower { width: 24px; height: 30px; color: var(--folio-accent); transition: transform var(--folio-motion-panel) var(--folio-ease); }
.folio-brand:hover .brand-flower { transform: rotate(-12deg); }
.folio-home .folio-brand { justify-content: center; width: 36px; height: 40px; }
.folio-header :is(.folio-brand, .brand-flower, .folio-nav-link, .folio-icon-button), .folio-hero, .folio-hero .folio-text-link, .folio-hero .folio-count { color: var(--folio-masthead-ink); }
.folio-desktop-nav { margin-left: auto; display: flex; gap: 32px; }
.folio-nav-link { position: relative; padding: 12px 2px; color: var(--folio-muted); font-family: var(--folio-nav-font); font-size: 13px; font-weight: 400; letter-spacing: .12em; white-space: nowrap; }
.folio-nav-link::after { content: ''; position: absolute; left: 0; right: .12em; bottom: 4px; height: 1px; background: var(--folio-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--folio-motion-panel) var(--folio-ease); }
.folio-nav-link:hover::after, .folio-nav-link[aria-current='page']::after { transform: scaleX(1); }
.folio-nav-link[aria-current='page'] { color: var(--folio-accent); }
.folio-header .folio-nav-link[aria-current='page'] { color: var(--folio-masthead-ink); font-weight: 500; }
.folio-header .folio-nav-link::after { background: currentColor; }
.folio-actions { display: flex; gap: 6px; margin-left: 4px; }
.folio-icon-button { display: grid; width: 40px; height: 40px; border-radius: 50%; place-items: center; cursor: pointer; color: var(--folio-muted); transition: background-color var(--folio-motion-fast), color var(--folio-motion-fast), transform var(--folio-motion-panel) var(--folio-ease); }
.folio-icon-button:active { transform: scale(.94); }
.folio-icon-button svg { transition: transform var(--folio-motion-panel) var(--folio-ease); }
/* Upstream ID styles must not darken the menu against the floral masthead. */
.folio-header #menuBtn { background: transparent; border-color: transparent; color: var(--folio-masthead-ink); }
.folio-header .folio-icon-button:hover, .folio-header #menuBtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--folio-masthead-ink); }
.folio-icon-button svg { width: 17px; height: 17px; color: inherit; }
.folio-menu-button, .folio-mobile-nav { display: none; }
html:not(.js) .folio-actions { display: none; }
.folio-hero { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 var(--folio-gutter); padding: 36px 0 38px; }
.folio-hero h1 { min-width: 0; margin: 0; font-family: var(--folio-display-font); font-size: clamp(68px, 7vw, 94px); font-style: normal; font-weight: 400; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; animation: folio-arrive var(--folio-motion-reveal) var(--folio-ease) var(--folio-motion-stagger) backwards; }
.folio-journal { padding: 0 var(--folio-gutter); scroll-margin-top: 30px; }
.folio-text-link { display: inline-flex; flex-shrink: 0; align-items: baseline; gap: 10px; padding-block: 8px; color: var(--folio-muted); font-family: var(--folio-ui); font-size: 12px; line-height: 1.7; white-space: nowrap; }
.folio-text-link > :last-child { transition: transform var(--folio-motion-panel) var(--folio-ease); }
.folio-text-link:hover > :last-child { transform: translate(2px, -2px); }
.folio-text-link:hover { color: var(--folio-accent); }
.folio-count { font-family: var(--folio-date-font); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--folio-accent); }
.folio-entry { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; padding: 40px 0 36px; border-bottom: 1px solid var(--folio-rule); }
[data-folio-reveal].is-visible { animation: folio-entry-arrive var(--folio-motion-reveal) var(--folio-ease) calc(var(--folio-reveal-order, 0) * var(--folio-motion-stagger)) backwards; }
.folio-article .prose-shiro > [data-folio-reveal].is-visible, .folio-footer[data-folio-reveal].is-visible, .folio-tag-cloud[data-folio-reveal].is-visible { animation-name: folio-fade-in; }
.folio-entry-date { align-self: start; padding-top: 5px; color: var(--folio-muted); font-family: var(--folio-date-font); font-size: 12px; line-height: 1.3; letter-spacing: .08em; }
.folio-calendar { display: flex; flex-direction: column; align-items: flex-start; }
.folio-entry-date .folio-day { font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.04em; color: var(--folio-accent); margin: 4px 0; }
.folio-entry h2 { margin: 0; font-family: var(--folio-heading-font); font-size: 26px; line-height: 1.55; font-weight: 500; letter-spacing: .025em; text-wrap: pretty; }
.folio-entry h2 a { display: inline-block; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .3em; transition: color var(--folio-motion-fast), text-decoration-color var(--folio-motion-panel); }
.folio-entry h2 a:hover { text-decoration-line: underline; text-decoration-color: var(--folio-rule); }
.folio-entry h2 a:hover { color: var(--folio-accent); }
.folio-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--folio-ui); font-size: 12px; line-height: 1.8; color: var(--folio-muted); }
.folio-entry-meta { margin-top: 12px; }
.folio-meta-group { display: inline-flex; align-items: center; gap: 6px; }
.folio-meta-category, .folio-meta-details [role='list'] { color: var(--folio-accent); font-size: 14px; font-weight: 500; }
.folio-post-meta svg { width: 12px; height: 12px; color: inherit; opacity: .75; }
.folio-post-meta .folio-tags, .folio-post-meta .folio-meta-details { display: contents; font: inherit; }
.folio-post-meta .tag-pill { gap: 3px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font: inherit; color: var(--folio-muted); }
.folio-post-meta .tag-pill::before { content: '#'; opacity: .6; }
.folio-post-meta .tag-pill svg { display: none; }
.folio-post-meta .tag-pill:hover { color: var(--folio-accent); border-bottom-color: var(--folio-rule); }
.folio-meta-details > span[aria-hidden] { display: none; }
.folio-meta-details > div:first-child { font-family: var(--folio-date-font); font-size: 16px; }
.folio-excerpt.prose-shiro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 6em; max-width: 46em; width: 100%; font-family: var(--folio-excerpt-font); font-size: 16px; font-style: italic; line-height: 2; text-align: left; color: var(--folio-muted); margin: 14px 0 0; }
.folio-excerpt.prose-shiro :is(p, blockquote, h1, h2, h3, h4, ul, ol) { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.folio-excerpt.prose-shiro :is(blockquote, p)::before, .folio-excerpt.prose-shiro :is(blockquote, p)::after { content: none; }
.folio-excerpt.prose-shiro :is(img, figure, pre, table, iframe) { display: none; }
.folio-read-link { display: inline-flex; align-items: center; gap: 13px; min-height: 32px; margin-top: 14px; color: var(--folio-accent); font-family: var(--folio-ui); font-size: 12px; letter-spacing: .08em; }
.folio-read-link span { font-family: var(--folio-ui); font-size: 20px; line-height: 1; transition: transform var(--folio-motion-panel) var(--folio-ease); }
.folio-read-link:hover span { transform: translateX(6px); }
.folio-home .pagination { margin: 40px 0 0; }
.folio-home .pagination .current { color: var(--folio-accent); }
.folio-inner .folio-header { margin-bottom: 24px; }
.folio-inner .folio-main { max-width: 860px; margin: 0 auto; padding: 64px var(--folio-gutter) 10px; min-height: 360px; }
.folio-inner .page-title, .folio-inner .section-title { font-family: var(--folio-heading-font); color: var(--folio-ink); font-size: clamp(28px, 3vw, 36px); font-weight: 500; line-height: 1.65; letter-spacing: .025em; text-wrap: pretty; }
.folio-inner .prose-shiro { max-width: 42em; font-family: var(--folio-serif); font-size: 17px; line-height: 2.1; color: var(--folio-ink); }
.folio-inner .prose-shiro p { margin: 1.5em 0; }
.folio-inner .prose-shiro blockquote { border-left: 2px solid var(--folio-accent); padding: 4px 24px; background: var(--folio-wash); border-radius: 0 3px 3px 0; color: var(--folio-muted); }
.folio-inner .prose-shiro blockquote::before, .folio-inner .prose-shiro blockquote::after { content: none; }
.folio-inner .prose-shiro blockquote p { margin: .8em 0; }
.folio-inner .prose-shiro :is(h2, h3, h4) { color: var(--folio-ink); }
.folio-inner .prose-shiro :is(pre, figure.highlight) { font-size: 13px; line-height: 1.7; }
.folio-inner .section-divider { border-color: var(--folio-rule); }
.folio-inner .section-heading { color: var(--folio-accent); }
.folio-article { max-width: 42rem; margin-inline: auto; }
.folio-article-header { margin-bottom: 36px; padding-bottom: 26px; border-bottom: 1px solid var(--folio-rule); }
.folio-article-header .page-title { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.55; text-wrap: balance; }
.folio-article-meta { margin-top: 18px; }
.folio-article .prose-shiro { --shiro-code-bleed: 1rem; max-width: none; line-height: 2; }
.folio-article .prose-shiro > :first-child { margin-top: 0; }
.folio-article .prose-shiro > :last-child { margin-bottom: 0; }
.folio-article .prose-shiro p { margin-block: 1.3em; }
.folio-article .prose-shiro :is(h2, h3, h4) { font-weight: 500; line-height: 1.6; }
.folio-article .prose-shiro h2 { margin: 2.2em 0 .8em; padding-bottom: .4em; border-bottom: 1px solid var(--folio-rule); font-size: 25px; }
.folio-article .prose-shiro h3 { font-size: 21px; }
.folio-article .prose-shiro blockquote { margin-block: 1.8em; border-left-width: 1px; font-weight: 400; }
.folio-article .prose-shiro > pre, .folio-article .prose-shiro figure.highlight { border: 1px solid var(--folio-rule); border-radius: 3px; }
.folio-article .prose-shiro > table { font-family: var(--folio-ui); font-size: 14px; line-height: 1.8; }
.folio-article .prose-shiro > table th { background: var(--folio-wash); font-weight: 500; }
.folio-article .prose-shiro > table :is(th, td) { padding: 10px 14px; }
.folio-article .prose-shiro figcaption { margin-top: 12px; font-family: var(--folio-ui); font-size: 12px; line-height: 1.8; text-align: center; }
.folio-article > .folio-post-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-block: 28px; border-block: 1px solid var(--folio-rule); font-family: var(--folio-heading-font); font-size: 19px; line-height: 1.8; }
.folio-post-navigation .post-nav-link { max-width: none; min-height: 44px; gap: 12px; color: var(--folio-ink); }
.folio-post-navigation .post-nav-link[rel='next'] { justify-content: flex-end; text-align: right; }
.folio-post-navigation .post-nav-link:hover { color: var(--folio-accent); }
.folio-post-navigation .post-nav-title { -webkit-line-clamp: 2; text-decoration-color: var(--folio-rule); text-underline-offset: .25em; }
.folio-post-navigation .post-nav-link > span[aria-hidden] { flex-shrink: 0; font-family: var(--folio-ui); font-size: 20px; }
.folio-post-navigation + .giscus { margin-top: 0; padding-top: 32px; border-top: 0; }
.comment-network-hint { margin: 0; color: var(--folio-muted); font-family: var(--folio-ui); font-size: 12px; line-height: 1.8; }
.folio-article > .comment-network-hint { margin-top: 24px; }
.comment-network-hint + .giscus { margin-top: 0; padding-top: 12px; border-top: 0; }
.folio-directory { max-width: 42rem; margin-inline: auto; }
.folio-directory-header { margin-bottom: 36px; padding-bottom: 26px; border-bottom: 1px solid var(--folio-rule); }
.folio-directory-header .section-title { margin: 0; line-height: 1.55; }
.folio-directory-label { margin: 0 0 10px; color: var(--folio-muted); font-family: var(--folio-ui); font-size: 12px; letter-spacing: .12em; }
.folio-archive { display: grid; gap: 40px; }
.folio-archive-year { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; align-items: start; }
.folio-archive .section-heading { margin: 0; padding: 4px 0 0; border: 0; font-family: var(--folio-date-font); font-size: 40px; font-weight: 400; line-height: 1.1; }
.folio-directory-list { display: grid; }
.folio-directory-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--folio-rule); }
.folio-directory-row:first-child { padding-top: 4px; }
.folio-directory-date { color: var(--folio-muted); font-family: var(--folio-date-font); font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.7; white-space: nowrap; }
.folio-directory-post-title { min-width: 0; margin: 0; color: var(--folio-ink); font-family: var(--folio-heading-font); font-size: 18px; font-weight: 400; line-height: 1.8; }
.folio-directory .category-block--has-posts { margin-bottom: 36px; }
.folio-directory .category-block--has-posts:last-child { margin-bottom: 0; }
.folio-directory .category-block-head { gap: 10px; }
.folio-directory .category-block--has-posts .category-block-head { margin-bottom: 14px; padding-block: 0 12px; }
.folio-directory .category-node-icon { color: var(--folio-accent); width: 14px; height: 14px; }
.folio-directory .category-block--has-posts .category-node-name { color: var(--folio-ink); font-family: var(--folio-heading-font); font-size: 27px; font-weight: 500; }
.folio-directory .category-node-count { color: var(--folio-accent); font-family: var(--folio-date-font); font-size: 26px; }
.folio-directory .category-more-row { justify-content: flex-start; margin-top: 16px; }
.folio-directory .category-more-row .btn-ink { padding: 6px 0; border: 0; background: transparent; color: var(--folio-accent); font-family: var(--folio-ui); font-size: 12px; }
.folio-tag-cloud { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 18px 26px; min-height: 18rem; padding: 28px 0 40px; font-family: var(--folio-serif); font-size: clamp(14px, 1.5vw, 18px); text-align: center; }
.folio-tag-cloud a { --tag-cloud-turn: 0deg; display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; min-height: 44px; padding-block: 4px; color: var(--folio-ink); line-height: 1.3; overflow-wrap: anywhere; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .25em; transform: rotate(var(--tag-cloud-turn)); transition: transform var(--folio-motion-panel) var(--folio-ease), color var(--folio-motion-fast), text-decoration-color var(--folio-motion-fast); }
.folio-tag-cloud a:nth-child(4n + 1) { --tag-cloud-turn: -3deg; color: var(--folio-accent); }
.folio-tag-cloud a:nth-child(5n + 2) { --tag-cloud-turn: 3deg; }
.folio-tag-cloud .folio-tag-count { flex-shrink: 0; padding-top: 2px; color: var(--folio-muted); font-family: var(--folio-date-font); font-size: 13px; line-height: 1; opacity: .75; }
.folio-tag-cloud a:is(:hover, :focus-visible) { color: var(--folio-accent); text-decoration-line: underline; text-decoration-color: var(--folio-rule); transform: rotate(0deg) scale(1.06); }
.folio-directory .pagination { margin-top: 32px; }
.folio-footer { padding: 16px var(--folio-gutter) 18px; text-align: center; }
.folio-endmark { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--folio-gold); margin: 0 0 14px; font-size: 21px; line-height: 1; }
.folio-endmark span { width: 55px; height: 1px; background: var(--folio-rule); }
.folio-footer-links { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 0 0 20px; font-size: 11px; color: var(--folio-muted); }
.folio-footer-links a { display: inline-flex; align-items: center; gap: 5px; }
.folio-footer-links svg { width: 12px; height: 12px; }
.folio-footer a:hover { color: var(--folio-accent); }
.folio-colophon { display: flex; justify-content: center; gap: 10px; font-family: var(--folio-ui); font-size: 11px; color: var(--folio-muted); }
.folio-build { font-family: var(--folio-ui); font-size: 9px; color: var(--folio-muted); opacity: .8; margin-top: 10px; letter-spacing: .025em; }
.folio-body .back-to-top { background: var(--folio-paper); color: var(--folio-accent); border: 1px solid var(--folio-rule); box-shadow: 0 2px 16px #29203610; }
.folio-body .progress-bar { background: var(--folio-accent); }
.folio-guestbook .folio-article-header { margin-bottom: 28px; }
.folio-guestbook-intro.prose-shiro { margin-top: 18px; color: var(--folio-muted); font-size: 17px; line-height: 1.9; }
.folio-guestbook-intro.prose-shiro p { margin: 0; }
.folio-guestbook .giscus { margin-top: 0; padding-top: 0; border-top: 0; min-height: 320px; }
.folio-article .giscus { border-color: var(--folio-rule); }
html[data-theme='dark'] .folio-frame { opacity: .72; }
html[data-theme='dark'] .folio-garden { opacity: .6; }
html[data-theme='dark'] .folio-body .progress-bar { background: var(--folio-masthead-ink); }
html[data-theme='dark'] .folio-foreground .folio-petal { filter: brightness(1.35); }
html[data-folio-paused] :is(.folio-flowers, .folio-petal) { animation-play-state: paused; }
/* Keep fixed article controls outside transformed ancestors. Only the empty
   paper decoration moves; the main article uses an opacity entrance. */
.folio-header { animation: folio-arrive var(--folio-motion-reveal) var(--folio-ease) backwards; }
.folio-hero .folio-text-link { animation: folio-arrive var(--folio-motion-reveal) var(--folio-ease) calc(2 * var(--folio-motion-stagger)) backwards; }
.folio-paper-surface { animation: folio-arrive var(--folio-motion-reveal) var(--folio-ease) calc(2 * var(--folio-motion-stagger)) backwards; }
.folio-inner .folio-main { animation: folio-fade-in var(--folio-motion-reveal) var(--folio-ease) calc(2 * var(--folio-motion-stagger)) backwards; }
/* A native page fade already introduces these elements. Keep this marker for
   the document's lifetime so an entrance cannot restart when the fade ends. */
html[data-folio-navigation] :is(.folio-header, .folio-hero h1, .folio-hero .folio-text-link, .folio-paper-surface, .folio-inner .folio-main) { animation: none; }
:is(.folio-nav-link, .folio-text-link, .folio-footer-links a, .pagination a, .post-nav-link) { transition: color var(--folio-motion-fast), transform var(--folio-motion-panel) var(--folio-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .folio-icon-button:hover, .folio-footer-links a:hover, .pagination a:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
    /* Native navigation and Shiro's existing theme toggle share a cross-fade.
       Unsupported browsers retain ordinary links and the entrance sequence. */
    @view-transition { navigation: auto; }
    ::view-transition-group(root) { animation-duration: var(--folio-motion-page); animation-timing-function: var(--folio-ease); }
    ::view-transition-old(root) { animation: folio-fade-out var(--folio-motion-page) var(--folio-ease) both; }
    ::view-transition-new(root) { animation: folio-fade-in var(--folio-motion-page) var(--folio-ease) both; }
    /* Keep the previous page visible until the incoming scene can be painted. */
    html[data-folio-loading]::view-transition-group(root),
    html[data-folio-loading]::view-transition-old(root),
    html[data-folio-loading]::view-transition-new(root) { animation-play-state: paused; }
}
@keyframes folio-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes folio-entry-arrive { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes folio-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes folio-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes folio-blossom-x {
    from { --folio-flower-phase-x: 0deg; }
    to { --folio-flower-phase-x: 360deg; }
}
@keyframes folio-blossom-y {
    from { --folio-flower-phase-y: 0deg; }
    to { --folio-flower-phase-y: 360deg; }
}
@keyframes folio-petal {
    0% { opacity: 0; transform: translate(0, -12px) rotate(-25deg); }
    18% { opacity: .65; }
    75% { opacity: .55; }
    100% { opacity: 0; transform: translate(var(--petal-x), var(--petal-y)) rotate(var(--petal-turn)); }
}
@media (max-width: 1100px) {
    :root { --folio-gutter: 28px; }
    .folio-shell { width: calc(100% - 128px); }
    .folio-desktop-nav { gap: 24px; }
}
@media (max-width: 767px) {
    /* Flowers remain separate in narrow margins; never scale the paper up. */
    :root { --folio-gutter: 18px; --folio-frame-inset: 10px; --folio-corner-size: 42px; --folio-pattern-width: min(1932px, calc((100vw - 40px) * 2.9)); --folio-flower-x: 22px; --folio-flower-y: 18px; --folio-flower-turn: 3.5deg; }
    .folio-frame::after { inset: 4px; }
    .folio-frame-star { width: 10px; height: 15px; }
    .folio-frame-star-top { top: -6px; left: calc(50% - 5px); }
    .folio-frame-star-bottom { bottom: -6px; left: calc(50% - 5px); }
    .folio-frame-star-left { left: -3px; }
    .folio-frame-star-right { right: -3px; }
    .folio-petal { width: 23px; height: 17px; --petal-x: 6px; --petal-y: 80px; }
    .folio-flowers, .folio-flowers:nth-child(4n) { width: 170px; }
    .folio-flowers-left { left: -90px; }
    .folio-flowers-left:nth-child(2) { top: 25svh; }
    .folio-flowers-right { right: -90px; }
    .folio-garden .folio-petal:nth-child(4n+3), .folio-garden .folio-petal:nth-child(4n+4) { display: none; }
    .folio-petal-left { left: 2%; }
    .folio-petal-right { right: 2%; --petal-x: -6px; }
    .folio-foreground .folio-petal { width: 21px; height: 16px; --petal-x: 16px; --petal-y: 150px; }
    .folio-foreground .folio-petal:nth-child(2n) { --petal-x: -14px; }
    .folio-foreground .folio-petal:nth-child(3n) { display: none; }
    .folio-shell { width: calc(100% - 48px); margin: 42px auto 46px; }
    .folio-header { flex-wrap: wrap; justify-content: space-between; gap: 0; min-height: 58px; }
    .folio-brand { font-size: 25px; gap: 6px; }
    .brand-flower { width: 22px; height: 28px; }
    .folio-actions { margin: 0 -5px 0 0; gap: 0; }
    .folio-icon-button { width: 36px; height: 42px; }
    .folio-desktop-nav { display: none; }
    .folio-menu-button { display: grid; }
    .folio-mobile-nav { display: grid; flex-basis: 100%; grid-template-rows: 1fr; }
    .folio-mobile-nav-content { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; margin-inline: -8px; padding: 8px 8px 18px; }
    html.js .folio-mobile-nav { grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows var(--folio-motion-panel) var(--folio-ease), opacity var(--folio-motion-fast), visibility 0s var(--folio-motion-panel); }
    html.js .folio-mobile-nav-content { overflow: clip; padding-block: 0; transform: translateY(-6px); transition: padding var(--folio-motion-panel) var(--folio-ease), transform var(--folio-motion-panel) var(--folio-ease); }
    html.js .folio-mobile-nav[data-open='true'] { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition-delay: 0s; }
    html.js .folio-mobile-nav[data-open='true'] .folio-mobile-nav-content { padding-block: 8px 18px; transform: translateY(0); }
    .folio-mobile-nav .folio-nav-link { padding: 12px 6px; }
    .folio-hero { padding: 35px 0 28px; gap: 12px; flex-wrap: wrap; }
    .folio-hero h1 { font-size: clamp(46px, 12vw, 70px); }
    .folio-journal { padding-bottom: 8px; }
    .folio-text-link { font-size: 10px; gap: 7px; }
    .folio-count { font-size: 15px; }
    .folio-entry { grid-template-columns: 34px minmax(0, 1fr); gap: 20px; padding: 30px 0 27px; }
    .folio-entry-date { font-size: 10px; }
    .folio-entry-date .folio-day { font-size: 34px; }
    .folio-entry h2 { font-size: 22px; line-height: 1.6; }
    .folio-post-meta { font-size: 11px; gap: 5px 10px; }
    .folio-meta-category, .folio-meta-details [role='list'] { font-size: 13px; }
    .folio-entry-meta { margin-top: 10px; }
    .folio-meta-category svg, .folio-meta-reading svg { display: none; }
    .folio-excerpt.prose-shiro { font-size: 14px; -webkit-line-clamp: 3; margin-top: 13px; }
    .folio-read-link { margin-top: 12px; font-size: 11px; }
    .folio-inner .folio-main { padding: 40px var(--folio-gutter) 5px; }
    .folio-inner .prose-shiro { font-size: 16px; line-height: 2; }
    .folio-inner .prose-shiro blockquote { padding-inline: 16px; }
    .folio-inner .page-title, .folio-inner .section-title { font-size: 26px; }
    .folio-inner .section-heading { font-size: 25px; }
    .folio-article-header { margin-bottom: 28px; padding-bottom: 22px; }
    .folio-article-header .page-title { font-size: 28px; }
    .folio-article-meta { margin-top: 14px; }
    .folio-article .prose-shiro { --shiro-code-bleed: 0rem; }
    .folio-article .prose-shiro h2 { font-size: 22px; }
    .folio-article .prose-shiro h3 { font-size: 19px; }
    .folio-article > .folio-post-navigation { gap: 16px; padding-block: 22px; font-size: 17px; }
    .folio-post-navigation .post-nav-link { gap: 8px; }
    .folio-directory-header { margin-bottom: 28px; padding-bottom: 22px; }
    .folio-archive { gap: 32px; }
    .folio-archive-year { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .folio-archive .section-heading { font-size: 34px; }
    .folio-directory-row { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding-block: 14px; }
    .folio-directory-date { font-size: 15px; }
    .folio-directory-post-title { font-size: 16px; }
    .folio-directory .category-block--has-posts .category-node-name { font-size: 24px; }
    .folio-tag-cloud { gap: 12px 18px; min-height: 15rem; padding-block: 18px 28px; }
    .folio-footer { padding-bottom: 22px; }
    .folio-colophon { flex-direction: column; gap: 6px; font-size: 11px; }
    .folio-build { font-size: 8px; line-height: 1.7; }
    .folio-guestbook-intro.prose-shiro { font-size: 15px; }
}
@media (max-width: 374px) {
    :root { --folio-gutter: 14px; }
    .folio-brand { font-size: 24px; }
    .folio-icon-button { width: 30px; }
    .folio-hero { gap: 8px; }
    .folio-hero h1 { font-size: 45px; }
    .folio-entry { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .folio-flowers { transform: none; }
    .folio-icon-button:active { transform: none; }
}