/* Layout and components use semantic tokens from theme.css, which LifeRPG
   shares with the home pages, as it shares their type and their painted scene
   (scene.css): the build copies both from ../site/. */
:root {
  --radius: 20px;
  /* Helvetica Neue; in Chinese, 仿宋 for text and the heaviest 宋体 for
     headings (theme.css). */
  --body: var(--font-body);
  --display: var(--font-head);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body { background: var(--page-bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
/* no grey box flashing over whatever is tapped: pins, badges and days show their own states */
* { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
a { color: var(--accent); }
::selection { background: var(--accent); color: var(--panel); }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 110; top: -80px; left: 20px; padding: 10px 18px; border-radius: 10px; background: var(--panel); color: var(--ink); }
.skip-link:focus { top: 10px; }
/* The banner: the owner, this page and the level, "[avatar] Tong Xiao | LifeRPG | Lv 3".
   The owner is the home pages' own (docs/family.md, F1) and links to them. */
.site-header { flex: none; position: relative; z-index: 45; }
.header-inner { position: relative; min-height: 58px; padding: 7px max(24px, env(safe-area-inset-right)) 7px max(20px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.owner { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.owner[href]:hover { color: var(--accent); }
.owner img { display: block; width: 34px; height: 34px; border-radius: 50%; }
.title-divider { flex: none; width: 1px; height: 20px; background: var(--line); }
.wordmark { min-width: 0; text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.03em; white-space: nowrap; }
.wordmark:hover { color: var(--accent); }
.dataset-badge { margin-left: -5px; padding: 3px 7px; border-radius: 6px; background: var(--milestone-soft); color: var(--milestone); font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.header-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.segmented { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-raised); }
.segmented button { min-width: 31px; min-height: 30px; padding: 6px 7px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 11px; font-weight: 600; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--control-selected); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
main { flex: 1; min-height: 0; padding: 14px max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
.label { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, .display { font-family: var(--display); font-weight: 600; }
section { scroll-margin-top: 4px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-note { color: var(--ink-faint); font-size: 13px; }
.panel { background: var(--pane); border: 1px solid var(--pane-line); border-radius: var(--radius); }
.profile-menu { position: relative; }
.profile-menu > summary { display: flex; cursor: pointer; list-style: none; border-radius: 50%; }
.profile-menu > summary::-webkit-details-marker, .header-settings > summary::-webkit-details-marker { display: none; }
.level-ring { display: block; position: relative; width: 38px; height: 38px; flex: none; }
.level-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.level-ring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.level-ring .label { font-size: 8px; line-height: 1; }
.level-ring .lv { font-size: 17px; color: var(--ink); line-height: 1; font-weight: 550; }
.banner-popover { position: absolute; top: calc(100% + 13px); z-index: 70; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-solid); box-shadow: var(--shadow-float); }
.profile-details { left: -14px; width: 290px; }
.stats { display: flex; justify-content: space-between; gap: 18px; }
.stat .num-big { font-size: 26px; color: var(--ink); font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.stat .label { margin-top: 4px; font-size: 12.5px; }
.progress-caption { font-size: 13px; color: var(--accent); margin-top: 18px; }
.header-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--ink-dim); border-radius: 9px; border: 1px solid var(--line-faint); background: var(--panel); cursor: pointer; list-style: none; }
.header-icon:hover { color: var(--ink); background: var(--surface-raised); }
.header-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header-icon circle { fill: var(--panel); }
.header-settings { position: relative; }
.settings-popover { right: 0; width: 210px; display: grid; gap: 10px; }
.settings-popover .label:not(:first-child) { margin-top: 6px; }
.settings-popover .segmented button { flex: 1; }
.bar { height: 4px; background: var(--surface-raised); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--dc, var(--accent)); transition: width 700ms cubic-bezier(.22,.61,.36,1); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.5 var(--body); color: var(--ink-dim); border: 1px solid var(--line-faint); border-radius: 7px; padding: 4px 8px; background: var(--panel); text-decoration: none; text-align: left; }
.badge .dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--bc, var(--ink-faint)); }
.badge.clickable { cursor: pointer; transition: background 150ms; }
.badge.clickable:hover { background: var(--surface-hover); color: var(--ink); }
.hm-legend i { background: var(--heat-0); }
.hm-legend i[data-l="1"] { background: var(--heat-1); }
.hm-legend i[data-l="2"] { background: var(--heat-2); }
.hm-legend i[data-l="3"] { background: var(--heat-3); }
.hm-legend i[data-l="4"] { background: var(--heat-4); }

/* ---- skill net ----
   Pure icons joined by vines to the hero: a disc in its domain's color with
   its icon, sized by its level, ringed by its XP toward the next. Nothing moves
   at rest. A badge in focus keeps its path to the hero bright and dims the
   rest. app.js lays the net out to fit its box; a box too small for legible
   badges scrolls. */
.skill-board { position: relative; display: flex; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.skill-board.scrolls { mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.skill-net { display: block; flex: none; margin: auto; overflow: visible; -webkit-user-select: none; user-select: none; }
.link { fill: none; stroke: color-mix(in srgb, var(--lc) 55%, transparent); stroke-linecap: round; transition: opacity 180ms ease-out, stroke 180ms ease-out; }
.node { transition: opacity 180ms ease-out; }
.skill-net.focusing .node:not(.on-path), .skill-net.focusing .link:not(.on-path) { opacity: .16; }
.link.on-path { stroke: var(--lc); }
.node, .hero-node { cursor: pointer; outline: none; }
.hit { fill: transparent; }
.badge { transform-origin: 0 0; transition: transform 200ms cubic-bezier(.3, 1.4, .55, 1); }
.node:hover .badge, .node:focus-visible .badge, .hero-node:hover .badge, .hero-node:focus-visible .badge { transform: scale(1.1); }
.node.active .badge { transform: scale(1.08); }
.xp-track { fill: none; stroke: var(--ring-track); stroke-width: 2.4; }
.xp-fill { fill: none; stroke: var(--nc, var(--accent)); stroke-width: 2.6; stroke-linecap: round; }
.hero-node .xp-fill { stroke: var(--accent); stroke-width: 3; }
.disc { fill: var(--nc); }
.hero-node .disc { fill: #cfe8f7; }
/* the selected skill: its disc edged in white */
.node.active .disc { stroke: var(--panel-solid); stroke-width: 2.5; }
.icon { color: #fff; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon .fx { display: none; }
.glyph { fill: #fff; font-family: var(--body); font-weight: 700; text-anchor: middle; pointer-events: none; }
/* the first drawing grows outward from the hero */
.skill-net.animate .badge { animation: pop 560ms cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: var(--delay); }
.skill-net.animate .link { animation: grow-vine 600ms ease-out backwards; animation-delay: calc(var(--delay) - 180ms); }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow-vine { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }

/* ---- cards: a skill's beside it on hover, a pick's above the tab bar ----
   The icon acts out its skill (or place, or day) in a disc of its color. */
.card-inner { display: flex; flex-direction: column; }
.card-art { display: grid; place-items: center; padding: 18px 0 8px; will-change: transform; }
.card-disc { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--nc); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--nc) 30%, transparent); }
/* a soft glow around the disc, fading out evenly on every side (behind it, unclipped) */
.card-disc::after { content: ""; position: absolute; z-index: -1; inset: -48%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--nc) 24%, transparent), color-mix(in srgb, var(--nc) 8%, transparent) 60%, transparent); pointer-events: none; }
.card-hero { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0, 0, 0, .18); animation: a-bob 2.6s ease-in-out infinite; }
.card-body { padding: 6px 16px 4px; min-width: 0; text-align: center; }
.card-title { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.card-level { font-size: 13px; font-weight: 650; color: var(--nc); white-space: nowrap; }
.card-sub { margin-top: 1px; font-size: 13px; color: var(--ink-faint); }
.card-desc { margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.card-progress { margin-top: 10px; }
.card-progress .bar { margin: 0 0 4px; height: 5px; }
.card-progress .bar > i { background: var(--nc); }
.card-progress span { font-size: 12.5px; color: var(--ink-faint); }
.card-action {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 14px 14px; min-height: 38px;
  border: 0; border-radius: 12px; background: var(--accent); color: var(--panel); cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.card-action span { font-size: 18px; line-height: 1; }
.card-action:hover { filter: brightness(1.08); }
.skill-card { position: fixed; z-index: 80; width: 284px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-solid); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.skill-card.open { opacity: 1; transform: none; }
.peek { display: none; }

/* ---- the icons' little acts (cards only) ----
   Each plays twice; app.js starts the act again after a rest, while the card
   is open. Every act starts and ends in the icon's resting pose, so nothing
   jumps between the act and the rest: particles (floating notes, bubbles,
   petals, the scan line, the ripple) are hidden at rest, and staggered parts
   wait, rather than starting partway through. */
.anim-icon { width: 44px; height: 44px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.anim-icon .glyph { stroke: none; font-size: 15px; }
.anim-icon .a-pop, .anim-icon .a-blink, .anim-icon .a-stamp, .anim-icon .a-twinkle, .anim-icon .a-turn, .anim-icon .a-beat,
.anim-icon .a-hop, .anim-icon .a-ripple, .anim-icon .a-lift { transform-box: fill-box; transform-origin: center; }
.anim-icon .a-float, .anim-icon .a-fall, .anim-icon .a-rise, .anim-icon .a-scan, .anim-icon .a-ripple { opacity: 0; }
.anim-icon .a-bob { animation: a-bob 2.6s ease-in-out 2; }
.anim-icon .a-float { animation: a-float 2.8s ease-in-out 2; animation-delay: calc(var(--i, 0) * 1.4s); }
.anim-icon .a-press { animation: a-press 1.5s ease-in-out 2; animation-delay: calc(var(--i, 0) * .5s); }
.anim-icon .a-read { animation: a-read 3s ease-in-out 2; }
.anim-icon .a-twinkle { animation: a-twinkle 1.8s ease-in-out 2; animation-delay: calc(var(--i, 0) * .9s); }
.anim-icon .a-pop { animation: a-pop 1.8s ease-in-out 2; animation-delay: calc(var(--i, 0) * .3s); }
.anim-icon .a-swing { animation: a-swing 1.1s ease-in-out 2; }
.anim-icon .a-rock { animation: a-rock 2.2s ease-in-out 2; }
.anim-icon .a-pluck { animation: a-pluck 2.4s ease-in-out 2; }
.anim-icon .a-strum { animation: a-strum .9s ease-in-out 2; }
.anim-icon .a-wave { animation: a-wave 1.4s ease-in-out 2; animation-delay: calc(var(--i, 0) * .25s); }
.anim-icon .a-turn { animation: a-turn 2.4s ease-in-out 2; animation-delay: calc(var(--i, 0) * 1.2s); }
.anim-icon .a-fall { animation: a-fall 3.2s linear 2; animation-delay: calc(var(--i, 0) * 1.6s); }
.anim-icon .a-stamp { animation: a-stamp 2.2s ease-in-out 2; }
.anim-icon .a-write { stroke-dasharray: 1 1; animation: a-write 2.6s ease-in-out 2; animation-delay: calc(var(--i, 0) * .35s); }
.anim-icon .a-rise { animation: a-rise 2s ease-in 2; animation-delay: calc(var(--i, 0) * .66s); }
.anim-icon .a-glow { animation: a-glow 1.6s ease-in-out 2; animation-delay: calc(var(--i, 0) * .4s); }
.anim-icon .a-rec { animation: a-rec 1.2s steps(1) 2; }
.anim-icon .a-snip-a { animation: a-snip-a .9s ease-in-out 2; }
.anim-icon .a-snip-b { animation: a-snip-b .9s ease-in-out 2; }
.anim-icon .a-blink { animation: a-blink 3s ease-in-out 2; }
.anim-icon .a-scan { animation: a-scan 2.2s ease-in-out 2; }
.anim-icon .a-steam { animation: a-steam 2.4s ease-in-out 2; animation-delay: calc(var(--i, 0) * .8s); }
.anim-icon .a-flicker { animation: a-flicker .7s ease-in-out 2; }
.anim-icon .a-lift { animation: a-lift 1.4s ease-in-out 2; }
.anim-icon .a-beat { animation: a-beat 1.2s ease-in-out 2; }
.anim-icon .a-pullup { animation: a-pullup 1.6s ease-in-out 2; }
.anim-icon .a-arms { animation: a-arms 1.6s ease-in-out 2; }
.anim-icon .a-legs { animation: a-legs 1.6s ease-in-out 2; }
.anim-icon .a-plate { animation: a-plate 1.6s ease-in-out 2; }
.anim-icon .a-hop { animation: a-hop 1.6s ease-in-out 2; }
.anim-icon .a-ripple { animation: a-ripple 1.6s ease-out 2; }
@keyframes a-bob { 50% { transform: translateY(-1px); } }
@keyframes a-float { 0% { opacity: 0; transform: translateY(2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes a-press { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(1.3px); } }
@keyframes a-read { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 0); } 50% { transform: translate(0, -4px); } 75% { transform: translate(4px, -2px); } }
@keyframes a-twinkle { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.45) rotate(45deg); opacity: .45; } }
@keyframes a-pop { 0%, 40%, 100% { transform: none; } 20% { transform: scale(1.3); } }
@keyframes a-swing { 0%, 100% { transform: none; } 25% { transform: rotate(-24deg); } 75% { transform: rotate(24deg); } }
@keyframes a-rock { 0%, 100% { transform: none; } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes a-pluck { 0%, 100% { transform: none; } 17% { transform: translateX(4.7px); } 33% { transform: translateX(9.3px); } 50% { transform: translateX(14px); } 67% { transform: translateX(9.3px); } 83% { transform: translateX(4.7px); } }
@keyframes a-strum { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes a-wave { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes a-turn { 0%, 100% { transform: none; } 50% { transform: scaleX(.12); } }
@keyframes a-fall { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, 16px) rotate(200deg); } }
@keyframes a-stamp { 0%, 100% { transform: none; } 40% { transform: scale(1.14) rotate(-6deg); } 60% { transform: scale(.96) rotate(3deg); } }
/* the line wipes away from its start, then draws itself in again: whole at both ends */
@keyframes a-write { 0%, 12% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -1; } 88%, 100% { stroke-dashoffset: -2; } }
@keyframes a-rise { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes a-glow { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* the REC light blinks off and on, ending lit as it rests */
@keyframes a-rec { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes a-snip-a { 0%, 100% { transform: none; } 50% { transform: rotate(12deg); } }
@keyframes a-snip-b { 0%, 100% { transform: none; } 50% { transform: rotate(-12deg); } }
@keyframes a-blink { 0%, 86%, 100% { transform: none; } 92% { transform: scaleY(.1); } }
@keyframes a-scan { 0% { transform: none; opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } }
/* a wisp rises and fades, then comes back from below while out of sight */
@keyframes a-steam { 0%, 100% { opacity: 1; transform: none; } 45% { opacity: 0; transform: translateY(-2.5px); } 50% { opacity: 0; transform: translateY(1.5px); } }
@keyframes a-flicker { 0%, 100% { transform: none; } 33% { transform: rotate(-3deg); } 66% { transform: scale(.85, 1.15) rotate(4deg); } }
@keyframes a-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes a-beat { 0%, 30%, 60%, 100% { transform: none; } 15%, 45% { transform: scale(1.2); } }
@keyframes a-pullup { 0%, 15%, 100% { transform: none; } 45%, 60% { transform: translateY(-2.5px); } }
@keyframes a-arms { 0%, 15%, 100% { transform: none; } 45%, 60% { transform: scaleY(.62); } }
@keyframes a-legs { 0%, 15%, 100% { transform: none; } 45%, 60% { transform: scale(1.3); } }
@keyframes a-plate { 0%, 15%, 100% { transform: none; } 45%, 60% { transform: translate(1.8px, -.3px); } }
@keyframes a-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-3px); } 55% { transform: scale(1.05, .95); } }
@keyframes a-ripple { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3); } }

/* ---- atlas (world map) ----
   The map fills its box at every size, with its legend and source credit
   floating along the bottom. */
.atlas-wrap { position: relative; overflow: hidden; }
.atlas-map { position: relative; flex: 1; min-height: 0; }
#atlas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#atlas, #atlas * { -webkit-user-select: none; user-select: none; }
#atlas.panning { cursor: grabbing; }
/* Map lines keep a steady on-screen width: --map-unit is the map length of
   one screen pixel, set as the map zooms (app.js). */
.country { fill: var(--map-land); stroke: var(--map-line); stroke-width: calc(1px * var(--map-unit, 1)); outline: none; }
.country.visited {
  fill: color-mix(in srgb, var(--accent) calc(var(--va, .2) * 100%), transparent); stroke: color-mix(in srgb, var(--accent) 35%, transparent);
  cursor: pointer; transition: fill 150ms ease-out;
}
.country.visited:hover, .country.visited:focus-visible { fill: color-mix(in srgb, var(--accent) calc((var(--va, .2) + .12) * 100%), transparent); }
.country:focus-visible, .city-pin:focus-visible { outline: none; }
.country.visited:focus-visible { stroke: var(--accent); stroke-width: calc(1.5px * var(--map-unit, 1)); }
.country.visited.active { fill: color-mix(in srgb, var(--accent) calc((var(--va, .2) + .12) * 100%), transparent); stroke: var(--accent); }
.map-boundaries { pointer-events: none; }
.map-boundaries path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.region-boundary { stroke: var(--map-region); stroke-width: calc(1.3px * var(--map-unit, 1)); }
.municipal-boundary { stroke: var(--map-city); stroke-width: calc(.6px * var(--map-unit, 1)); }
/* One row along the bottom: the boundary legend at the left, the source
   credit in the corner, folded into its info button once the map is used. */
.map-footer { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.map-legend, .map-attribution { border-radius: 13px; background: var(--map-overlay); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; padding: 5px 11px; font-size: 11.5px; line-height: 18px; color: var(--ink-dim); }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 18px; flex: none; }
.region-key { border-top: 1.5px solid var(--map-region); }
.municipal-key { border-top: 1px solid var(--map-city); }
.map-footer:has(.map-attribution:not(.collapsed)) .map-legend { display: none; }
.map-attribution { flex: none; display: flex; align-items: center; min-height: 26px; max-width: 100%; margin-left: auto; font-size: 10.5px; line-height: 1.4; pointer-events: auto; }
.map-attribution a { padding: 4px 0 4px 11px; color: var(--ink-faint); text-decoration: none; }
.map-attribution a:hover { color: var(--ink); text-decoration: underline; }
.map-attribution.collapsed a { display: none; }
.map-credit-toggle { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-faint); cursor: pointer; }
.map-credit-toggle::before { content: ""; position: absolute; inset: -8px; }
.map-credit-toggle:hover { color: var(--ink); }
.map-credit-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.map-credit-toggle .dot { fill: currentColor; }
.city-pin { cursor: pointer; outline: none; }
.city-pin .pin-body {
  fill: var(--map-pin); stroke: var(--panel); stroke-width: 1.2;
  transition: fill 150ms ease-out, transform 150ms ease-out;
}
.city-pin .pin-hole { fill: var(--panel); transition: transform 150ms ease-out; }
.city-pin:hover .pin-body, .city-pin:focus-visible .pin-body { fill: var(--map-pin-hover); }
.city-pin:focus-visible .pin-body { stroke: var(--ink); stroke-width: 2; }
#tooltip .tt-ev { color: var(--ink-dim); font-size: 12.5px; margin-top: 3px; }
.city-label {
  fill: var(--ink); font-family: var(--body); pointer-events: none;
  paint-order: stroke; stroke: var(--panel); stroke-width: 2px;
}
.atlas-back { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--panel-solid); }

/* ---- heatmap ---- */
.heatmap-panel { container-type: inline-size; overflow-x: auto; padding-bottom: 4px; }
/* Week columns fill the width, up to a comfortable cell size: smaller on a
   short screen, leaving the skills and map their room. */
.heatmap {
  --gap: clamp(2px, .42cqw, 4px);
  --cell: clamp(9px, calc((100cqw - (var(--weeks) - 1) * var(--gap)) / var(--weeks)), clamp(10px, calc(100vh / 58), 17px));
  width: max-content;
}
.hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); width: max-content; }
.hm-cell { width: var(--cell); height: var(--cell); border-radius: 3px; background: var(--heat-0); border: 1px solid transparent; }
.hm-cell[data-l="1"] { background: var(--heat-1); border-color: transparent; }
.hm-cell[data-l="2"] { background: var(--heat-2); border-color: transparent; }
.hm-cell[data-l="3"] { background: var(--heat-3); border-color: transparent; }
.hm-cell[data-l="4"] { background: var(--heat-4); border-color: transparent; }
.hm-pad { width: var(--cell); height: var(--cell); }
.hm-month { display: contents; }
.hm-month-head, .hm-lead { display: none; }
.hm-months { display: flex; width: max-content; margin-bottom: 4px; }
.hm-months > * { flex: none; font-size: 12px; color: var(--ink-faint); }
.hm-month-link { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.hm-month-link:hover, .hm-month-link.active { color: var(--ink); }
.hm-month-link.active { font-weight: 600; }
.hm-legend { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.hm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---- timeline ---- */
.pill {
  font: 500 13px/1.4 var(--body); padding: 9px 17px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: var(--surface-raised); color: var(--ink-dim);
  transition: background 150ms, color 150ms;
}
.pill:hover { background: var(--surface-hover); color: var(--ink); }
.pill.on { background: var(--ink); color: var(--panel); }
.atlas-back { background: var(--panel-solid); border-color: var(--line); }
.timeline-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 156px;
  gap: 48px; align-items: start;
}
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline-month {
  position: relative; scroll-margin-top: 90px;
  padding: 0 0 18px 4px; color: var(--ink-faint);
  font-family: var(--display); font-size: 13px; font-weight: 650;
  letter-spacing: .02em;
}
.timeline-month::after {
  content: ""; display: inline-block; width: 42px; height: 1px;
  margin: 0 0 3px 10px; background: var(--line-faint);
}
.t-entry { position: relative; padding: 28px 32px; margin-bottom: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-faint); box-shadow: var(--shadow); }
.t-entry > .dot {
  position: absolute; left: -26px; top: 32px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--tc, var(--ink-faint));
}
.t-entry.milestone > .dot { background: var(--milestone); border-color: var(--milestone); }
.t-entry .when { display: flex; gap: 10px; align-items: baseline; }
.t-entry .date { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kind {
  font-size: 11.5px; font-weight: 650;
  color: var(--ink-faint); border: 1px solid var(--line); padding: 0 8px; border-radius: 999px;
}
.t-entry.milestone .kind { color: var(--milestone); background: var(--milestone-soft); border-color: transparent; }
.t-entry h3 { font-family: var(--display); font-size: 18px; font-weight: 650; margin-top: 12px; letter-spacing: -.025em; line-height: 1.35; }
.t-entry.milestone h3::before { content: "★ "; color: var(--milestone); font-size: 14px; }
/* post-style markdown typography */
.t-entry .notes { color: var(--ink-dim); font-size: 14.5px; margin-top: 12px; max-width: 88ch; line-height: 1.7; }
.notes p + p, .notes p + ul, .notes ul + p, .notes p + ol { margin-top: 9px; }
.notes a { color: var(--accent); }
.notes strong { color: var(--ink); font-weight: 650; }
.notes h1, .notes h2, .notes h3, .notes h4 {
  font-family: var(--display); font-weight: 650; color: var(--ink);
  font-size: 16px; margin: 14px 0 6px; letter-spacing: 0.02em;
}
.notes ul, .notes ol { margin: 9px 0 9px 4px; padding-left: 18px; }
.notes li { margin: 4px 0; }
.notes li::marker { color: var(--accent); }
.notes blockquote {
  border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin: 12px 0;
  color: var(--ink-dim); font-style: italic;
}
.notes code {
  background: var(--panel-solid); border: 1px solid var(--line-faint);
  padding: 0 6px; border-radius: 4px; font-size: 13px;
}
.notes pre { background: var(--panel-solid); border: 1px solid var(--line-faint); padding: 10px 14px; border-radius: 8px; overflow-x: auto; margin: 10px 0; }
.notes pre code { background: none; border: 0; padding: 0; }
.notes img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.notes hr { border: 0; border-top: 1px solid var(--line-faint); margin: 14px 0; }
.t-entry .chips { margin-top: 10px; }

/* date minimap + progressive timeline loading */
.timeline-minimap {
  position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto;
  border-left: 1px solid var(--line-faint); padding-left: 18px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.mini-year + .mini-year { margin-top: 10px; }
.mini-year summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink-dim); cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 13px; font-weight: 650;
}
.mini-year summary::-webkit-details-marker { display: none; }
.mini-year summary::before {
  content: "+"; width: 12px; color: var(--ink-faint); font-family: var(--body);
  font-size: 13px; font-weight: 400;
}
.mini-year[open] summary::before { content: "−"; }
.mini-year summary > span:first-of-type { flex: 1; }
.mini-year-count { color: var(--ink-faint); font-family: var(--body); font-size: 10px; font-weight: 500; }
.mini-months { margin: 7px 0 2px 19px; display: flex; flex-direction: column; gap: 2px; }
.mini-months button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-faint);
  padding: 7px 8px; cursor: pointer; font: 11.5px/1.4 var(--body); text-align: left;
  transition: color 150ms ease-out, background 150ms ease-out;
}
.mini-months button:hover { color: var(--ink); background: var(--surface-hover); }
.mini-months button.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mini-months button .num { color: inherit; opacity: .7; font-size: 10px; }
.timeline-loader {
  min-height: 30px; margin: 2px 0 0 38px; display: flex; align-items: center; gap: 9px;
  color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
/* ---- media gallery (post-style) ---- */
.gallery {
  display: grid; gap: 3px; margin-top: 12px; max-width: 560px;
  border-radius: 10px; overflow: hidden;
}
.gallery.g1 { grid-template-columns: 1fr; max-width: 460px; }
.gallery.g2 { grid-template-columns: 1fr 1fr; }
.gallery.g3, .gallery.gmany { grid-template-columns: repeat(3, 1fr); }
.gallery.g4 { grid-template-columns: 1fr 1fr; max-width: 440px; }
.tile { position: relative; margin: 0; cursor: zoom-in; background: var(--panel-solid); overflow: hidden; }
.gallery:not(.g1) .tile { aspect-ratio: 1; }
.tile img, .tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.g1 .tile img, .g1 .tile video { height: auto; max-height: 420px; }
.tile img { transition: transform 300ms ease-out; }
.tile:hover img { transform: scale(1.04); }
.tile .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; pointer-events: none;
  background: rgba(8, 10, 20, 0.55); border: 1px solid rgba(232, 234, 242, 0.35);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; padding-left: 3px;
}
.video-tile { width: 100%; height: 100%; background: var(--surface-raised); }
.g1 .video-tile { aspect-ratio: 16 / 9; }
a.tile { display: block; cursor: pointer; }
.tile .video-host {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; pointer-events: none;
  background: rgba(8, 10, 20, 0.6); color: #fff; font-size: 11px; font-weight: 500;
}

/* 10+ media items become one focused carousel instead of a wall of thumbnails */
.gallery.media-carousel { display: block; max-width: 590px; overflow: visible; border-radius: 0; }
.carousel-viewport {
  overflow: hidden; border-radius: 10px; background: var(--panel-solid);
  touch-action: pan-y; cursor: grab;
}
.carousel-viewport:active { cursor: grabbing; }
.carousel-track {
  display: flex; transform: translateX(0);
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1); will-change: transform;
}
.gallery.media-carousel .carousel-slide {
  flex: 0 0 100%; aspect-ratio: 16 / 10; cursor: zoom-in;
}
.carousel-slide img, .carousel-slide video { user-select: none; -webkit-user-drag: none; }
.carousel-toolbar {
  display: flex; align-items: center; gap: 16px; min-height: 42px;
  padding: 8px 2px 0;
}
.carousel-meta { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex: 1; }
.carousel-count { flex-shrink: 0; color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.carousel-caption {
  overflow: hidden; color: var(--ink-dim); font-size: 13px;
  text-overflow: ellipsis; white-space: nowrap;
}
.carousel-actions { display: flex; gap: 6px; }
.carousel-actions button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 18px; line-height: 1;
  transition: border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
}
.carousel-actions button:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }
.carousel-actions button:disabled { cursor: default; opacity: .28; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 12, 14, .94); backdrop-filter: blur(16px);
  --ink: #f5f5f7; --ink-dim: #d0d0d6; --ink-faint: #a1a1a9; --panel-solid: #2c2c30; --line: #48484e;
}
.lightbox.open { display: flex; }
.lb-stage { display: flex; flex-direction: column; align-items: center; max-width: min(92vw, 1100px); }
.lb-media { display: flex; align-items: center; justify-content: center; }
.lb-media img, .lb-media video { max-width: min(92vw, 1100px); max-height: 76vh; border-radius: 8px; }
.lb-media iframe { width: min(92vw, 960px); aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.lb-page { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.lb-page img { max-height: 68vh; }
.lb-caption { color: var(--ink-dim); margin-top: 14px; font-size: 13.5px; max-width: 70ch; text-align: center; }
.lb-btn {
  position: fixed; z-index: 101; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink-dim);
  cursor: pointer; font-size: 18px; line-height: 1;
  transition: color 150ms, border-color 150ms;
}
.lb-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
/* Small and see-through, so it doesn't hide the photo behind it; the ::before keeps a fingertip-sized target. */
.lb-close { top: 16px; right: 16px; width: 30px; height: 30px; font-size: 11px; background: rgba(44, 44, 48, .45); border-color: rgba(255, 255, 255, .16); }
.lb-close:hover { background: rgba(44, 44, 48, .8); }
.lb-close::before { content: ""; position: absolute; inset: -7px; }
.lb-count {
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%);
  color: var(--ink-faint); font-size: 12px; letter-spacing: 0.12em;
}

/* ---- link/file attachments ---- */
.attachments { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.attach-link {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim); border: 1px solid var(--line-faint);
  padding: 5px 12px; border-radius: 8px; text-decoration: none;
}
.attach-link:hover { color: var(--ink); border-color: var(--ink-faint); }
.attach-link .ico { color: var(--accent); }

/* ---- tooltip ---- */
#tooltip {
  position: fixed; z-index: 50; pointer-events: none; display: none;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow-float);
  max-width: 240px;
}
#tooltip .tt-sub { color: var(--ink-dim); font-size: 12.5px; margin-top: 2px; }
#tooltip .bar { margin-top: 7px; width: 130px; }
#tooltip .bar > i { transition: none; }

/* compact fixed control; the text label reveals without covering the feed */
.back-to-top {
  position: absolute; z-index: 40; right: 20px; bottom: 20px;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel-solid); color: var(--ink-dim); cursor: pointer;
  box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms, border-color 150ms, color 150ms;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.back-to-top > span:first-child { font-size: 17px; }
.back-to-top > span:last-child {
  position: absolute; right: 50px; top: 50%; width: max-content; transform: translate(5px, -50%);
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-solid); color: var(--ink-dim); font: 13px/1.3 var(--body);
  opacity: 0; pointer-events: none; transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.back-to-top:hover > span:last-child, .back-to-top:focus-visible > span:last-child { opacity: 1; transform: translate(0, -50%); }

/* Wide screens: one page, no scrolling. Up to 1800px, Skills, Map and
   Activity stack as wide strips beside the timeline. Wider, the timeline grows
   and Activity moves under it, leaving Skills and Map the left side. */
.journal-workspace {
  display: grid; gap: 14px; height: 100%; min-height: 0;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 600px);
  grid-template-rows: minmax(230px, 2.2fr) minmax(130px, 1fr) auto;
  grid-template-areas: "skills timeline" "map timeline" "activity timeline";
  /* only when the window is too short for the panes */
  overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
@media (min-width: 1800px) {
  .journal-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(600px, 36vw, 940px);
    grid-template-rows: minmax(300px, 2.6fr) minmax(0, 1fr) auto;
    grid-template-areas: "skills timeline" "map timeline" "map activity";
  }
}
.explorer { display: contents; }
#skills-section { grid-area: skills; }
#atlas-section { grid-area: map; }
#activity-section { grid-area: activity; }
.timeline-dock { grid-area: timeline; }
.explore-view { display: flex; min-width: 0; min-height: 0; }
.explore-view > .panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.explore-view:focus { outline: none; }
.explore-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-height: 24px; margin-bottom: 10px; }
.pane-title { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.pane-head .section-note { margin-left: auto; font-size: 13.5px; }
/* The skill net fills its card, a board with the pane's title floating on it. */
.skills-card { position: relative; overflow: hidden; }
.skills-card .pane-head { position: absolute; z-index: 2; top: 12px; left: 18px; margin: 0; pointer-events: none; }
.skills-card .pane-head .section-note { margin-left: 0; }
.skill-board { position: absolute; inset: 0; }
/* The map fills its card too, its title and totals floating at the top left. */
.atlas-wrap .pane-head { position: absolute; z-index: 2; top: 10px; left: 10px; margin: 0; min-height: 0; padding: 3px 12px; gap: 10px; border-radius: 13px; background: var(--map-overlay); }
.atlas-wrap .pane-head .section-note { margin-left: 0; }
.atlas-back { top: 10px; right: 10px; left: auto; }
/* a selected place: the same pin, deeper and a little larger, growing from its tip */
.city-pin.active .pin-body { fill: var(--map-pin-active); stroke-width: 1.6; }
.city-pin.active .pin-body, .city-pin.active .pin-hole { transform: scale(1.2); }
.activity-card { padding: 14px 20px 12px; }
.activity-card .pane-head { margin-bottom: 6px; }
.activity-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--ink-faint); }
.hm-note:empty { display: none; }
.activity-summary > div { display: flex; align-items: baseline; gap: 5px; }
.activity-summary strong { font-size: 14px; font-weight: 650; color: var(--ink); }
.stat-icon { flex: none; align-self: center; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.events-icon circle { fill: currentColor; }
.day-key { flex: none; align-self: center; width: 11px; height: 11px; margin: 1px; border-radius: 3px; background: var(--heat-2); }
#tooltip .tt-place { display: flex; align-items: center; gap: 4px; }
#tooltip .tt-place .stat-icon { width: 12px; height: 12px; color: var(--map-pin); }
.hm-cell { padding: 0; cursor: pointer; }
.hm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }
/* The selected day keeps its one black border, even when focus comes back to it. */
.hm-cell.active { outline: 2px solid var(--ink); outline-offset: 1px; }
/* A range of days, such as a month: the days outside it fade, rather than
   every day inside getting a ring. */
.hm-grid.has-range .hm-cell.active:not(:focus-visible) { outline: none; }
.hm-grid.has-range .hm-cell:not(.active) { opacity: .35; }
/* iOS only sends taps on the gaps between days to elements that look clickable. */
@media (pointer: coarse) { .hm-grid { cursor: pointer; } }
.heatmap-panel { padding: 4px 3px 4px; }
.timeline-dock { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; color: var(--ink); background: var(--pane); border: 1px solid var(--pane-line); border-radius: var(--radius); }
.timeline-toolbar { padding: 16px 18px 14px; flex: none; border-bottom: 1px solid var(--pane-line); }
.timeline-toolbar .section-head { align-items: center; margin-bottom: 12px; gap: 12px; }
.timeline-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.timeline-heading h2:focus { outline: none; }
.result-count { color: var(--ink-faint); font-size: 13.5px; white-space: nowrap; }
.text-button { border: 0; background: none; color: var(--ink-faint); font-size: 13.5px; font-weight: 600; padding: 5px 0; cursor: pointer; }
.text-button:hover { color: var(--accent); }
.filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: none; color: var(--ink-dim); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.filter-trigger:hover, .filter-trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface-raised); }
.filter-trigger > span:first-child { font-size: 16px; font-weight: 400; line-height: 1; }
.filter-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; }
.filter-plus { color: var(--ink-faint); font-size: 14px; margin-left: 2px; }
.filter-trigger.has-value { border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); background: var(--accent-soft); }
.filter-count { min-width: 16px; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px; }
.milestone-toggle { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; line-height: 1.3; padding: 6px 10px 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-dim); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.milestone-toggle:hover { color: var(--ink); background: var(--surface-raised); }
.milestone-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.milestone-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; }
.milestone-toggle:has(:checked) { border-color: transparent; color: var(--milestone); background: var(--milestone-soft); }
.milestone-toggle:has(:checked) svg { fill: currentColor; }
.milestone-toggle:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
#reset-filters { margin-left: auto; padding: 5px 2px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 92px; overflow-y: auto; padding: 2px; }
.filter-chip { border: 0; background: var(--surface-raised); color: var(--ink-dim); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 5px 8px; cursor: pointer; max-width: 100%; }
.filter-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip:hover { background: var(--surface-hover); color: var(--ink); }
.filter-chip > span:last-child { color: var(--ink-faint); font-size: 13px; line-height: 1; }
.timeline-layout { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 0; flex: 1; min-height: 0; padding: 0 14px 0 0; }
.timeline-viewport { overflow-y: auto; min-width: 0; height: 100%; padding: 22px 14px 22px 20px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-y: contain; border-radius: 0 0 0 22px; }
.timeline-viewport:focus-visible { outline-offset: -4px; }
.timeline { padding-left: 15px; }
.timeline::before { left: 2px; background: var(--line-faint); }
.timeline-month { padding: 0 0 14px; }
.timeline-month::after { width: 24px; }
.t-entry { padding: 18px; margin-bottom: 22px; border-radius: 13px; background: var(--surface); border: 0; box-shadow: none; }
.t-entry > .dot { width: 7px; height: 7px; left: -16px; top: 25px; background: var(--panel); border-width: 1.5px; }
.t-entry.milestone > .dot { background: var(--milestone); }
.t-entry h3 { margin-top: 9px; }
.t-entry .notes { overflow-wrap: anywhere; }
.t-entry .when { flex-wrap: wrap; gap: 6px; }
.kind { padding: 0 7px; }
.badge { background: transparent; }
.timeline-index { padding: 23px 0 14px 9px; border-left: 1px solid var(--line-faint); height: 100%; min-height: 0; display: flex; flex-direction: column; }
.index-label { flex: none; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 16px; letter-spacing: .03em; }
.timeline-minimap { position: static; border: 0; padding: 0; max-height: none; overflow-y: auto; }
.mini-year summary { font-size: 12.5px; gap: 3px; }
.mini-year summary::before { width: 8px; font-size: 11.5px; }
.mini-year-count { display: none; }
.mini-months { margin: 7px 0 12px; gap: 2px; }
.mini-months button { padding: 7px 5px; font-size: 12px; gap: 2px; }
.mini-months button .num { font-size: 10.5px; }
.timeline-loader { margin: 0 0 0 15px; font-size: 13px; flex-wrap: wrap; justify-content: space-between; }
.timeline-empty { padding: 45px 12px; text-align: center; }
.timeline-empty > span { display: block; font-size: 34px; font-weight: 300; color: var(--ink-faint); margin-bottom: 16px; }
.timeline-empty h3 { font-size: 18px; font-weight: 650; }
.timeline-empty p { font-size: 14.5px; color: var(--ink-faint); margin: 10px 0 22px; }
.timeline-layout:has(.timeline-index[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* The month index needs a wide timeline; a narrower one gives the feed its room. */
.timeline-dock { container-type: inline-size; }
@container (max-width: 520px) {
  .timeline-index { display: none; }
  .timeline-layout { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  /* The filters keep to one row: without their "+", as on phones. */
  .filter-plus { display: none; }
}
.timeline:empty::before { display: none; }

/* Small, searchable surfaces appear only while editing a facet. */
.filter-popover { position: fixed; z-index: 60; width: 338px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 17px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float); }
.picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.picker-heading h3 { font-size: 15px; font-weight: 650; }
.picker-close { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: var(--surface-raised); color: var(--ink-faint); cursor: pointer; font-size: 17px; }
.picker-search { width: 100%; font: 14px var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-faint); border-radius: 8px; padding: 10px 12px; margin-bottom: 9px; outline-offset: 1px; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-options { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; scrollbar-width: thin; }
.picker-option { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 9px 7px; cursor: pointer; }
.picker-option:hover { background: var(--surface-raised); }
.picker-option:has(:checked) { background: var(--accent-soft); }
.picker-option input { accent-color: var(--accent); width: 14px; height: 14px; flex: none; }
.option-mark { font-size: 17px; color: var(--option-color); }
.option-name { font-size: 14px; display: flex; flex-direction: column; }
.option-name small { font-size: 12px; color: var(--ink-faint); }
.option-count { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.picker-hint { border-top: 1px solid var(--line-faint); margin-top: 12px; padding-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
.picker-no-results { padding: 24px 6px; font-size: 14px; color: var(--ink-faint); }
.date-mode { margin-bottom: 14px; }
.date-mode button { flex: 1; }
.date-fields { display: flex; gap: 10px; }
.date-fields label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-faint); }
.date-fields input { width: 100%; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: 13px var(--body); }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; }
.calendar-heading strong { font-size: 13.5px; font-weight: 650; }
.calendar-heading button { border: 0; background: none; color: var(--ink-dim); width: 28px; height: 28px; font-size: 22px; cursor: pointer; border-radius: 7px; }
.calendar-heading button:hover { background: var(--surface-raised); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calendar-grid .weekday { color: var(--ink-faint); font-size: 11.5px; padding: 3px 0 7px; }
.calendar-grid button { position: relative; border: 0; border-radius: 7px; background: none; color: var(--ink-dim); height: 31px; font: 12.5px var(--body); cursor: pointer; }
.calendar-grid button:hover { background: var(--surface-raised); }
.calendar-grid button.selected { background: var(--ink); color: var(--panel); }
.calendar-grid button.in-range { background: var(--accent-soft); color: var(--accent); }
.calendar-grid button.has-events::after { content: ""; position: absolute; left: calc(50% - 1px); bottom: 3px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.date-presets { display: flex; gap: 6px; margin: 13px 0; }
.date-presets button { border: 1px solid var(--line-faint); background: none; color: var(--ink-dim); border-radius: 6px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.date-presets button:hover { background: var(--surface-raised); }
.date-apply { width: 100%; border: 0; border-radius: 8px; background: var(--ink); color: var(--panel); padding: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.date-error { font-size: 12.5px; color: var(--ink); margin-bottom: 8px; }
.date-error:empty { display: none; }

/* Narrow screens are a mobile app: one section at a time, full bleed, chosen
   from a tab bar along the bottom. The timeline is the fourth tab. */
.tab-bar { display: none; }
@media (max-width: 1099px) {
  body { background: var(--panel); }
  .site-header { background: var(--nav-bg); border-bottom: 1px solid var(--line-faint); }
  .header-inner { min-height: 54px; padding-top: 8px; padding-bottom: 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  main { position: relative; padding: 0; }
  .journal-workspace, .explorer { display: block; height: 100%; overflow: hidden; }
  /* Each section keeps its own scroll position while another tab is open. */
  .explore-view { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .explore-view:focus-visible { outline-offset: -2px; border-radius: 0; }
  .explore-view > .panel { flex: 1 0 auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  /* The tab bar names the section, so its heading is only for screen readers. */
  .pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pane-head { min-height: 0; }
  /* The skills tab is the board itself, edge to edge. */
  .skills-card { position: static; overflow: visible; padding: 12px 0 16px; background: none; }
  .skills-card .pane-head { position: static; margin-bottom: 4px; }
  .skill-board { position: relative; inset: auto; flex: 1 0 auto; overflow: visible; }
  /* The map fills the screen edge to edge, its stats floating on it. */
  #atlas-section { padding: 0; overflow: hidden; }
  .atlas-wrap { padding: 0; }
  .atlas-map { border-radius: 0; }
  .atlas-wrap .pane-head { position: absolute; z-index: 2; top: 12px; right: max(12px, env(safe-area-inset-right)); margin: 0; }
  .atlas-wrap .section-note { padding: 4px 10px; border-radius: 13px; background: var(--map-overlay); }
  .atlas-wrap .pane-head { left: auto; padding: 0; background: none; }
  .atlas-back { top: 12px; right: auto; left: max(12px, env(safe-area-inset-left)); }
  .map-footer { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: 12px; }
  /* Activity: the totals as tiles, the year below them, then the legend. */
  .activity-card { display: flex; flex-direction: column; padding: 16px 0 24px; }
  .activity-card .pane-head { display: contents; }
  .activity-summary { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
  .activity-summary > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: 2px 6px; padding: 11px 12px 10px; border-radius: 14px; background: var(--surface); }
  .activity-summary > div > :first-child { grid-row: 1; }
  .activity-summary strong { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
  .activity-summary > div > span { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; }
  .activity-summary > .hm-note { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 5px; padding: 0 2px; background: none; }
  .activity-summary > .hm-note strong { font-size: 14px; }
  .activity-summary > .hm-note > span { font-size: 13px; }
  .heatmap-panel { order: 2; }
  .heatmap { --cell: clamp(9px, calc((100cqw - (var(--weeks) - 1) * var(--gap)) / var(--weeks)), 17px); }
  .hm-legend { order: 3; justify-content: flex-end; margin-top: 18px; }
  .hm-months > * { font-size: 11.5px; }
  /* The timeline tab: filters on top, the feed below, no card around it. */
  .timeline-dock { border: 0; border-radius: 0; box-shadow: none; }
  /* The timeline tab: one row of filters, Clear all at its end, sliding sideways if it must. */
  .timeline-toolbar { padding: 10px 0; }
  .timeline-toolbar .section-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px max(16px, env(safe-area-inset-right)) 2px max(16px, env(safe-area-inset-left)); }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex: none; }
  .active-filters { margin: 8px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .timeline-viewport { padding-left: max(18px, env(safe-area-inset-left)); border-radius: 0; }
  .filter-popover { width: 350px; }
  .tab-bar {
    display: flex; justify-content: center; flex: none; position: relative; z-index: 45;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--nav-bg); border-top: 1px solid var(--line-faint);
  }
  .tab-bar a {
    position: relative; flex: 1; max-width: 168px; min-height: 54px; padding: 7px 4px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--ink-faint); font-size: 10.5px; font-weight: 550; line-height: 1.2; text-decoration: none;
    transition: color 150ms;
  }
  .tab-bar a:hover { color: var(--ink-dim); }
  .tab-bar a:focus-visible { outline-offset: -4px; border-radius: 12px; }
  .tab-bar a[aria-current="page"] { color: var(--accent); font-weight: 650; }
  .tab-bar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .tab-bar a[aria-current="page"] svg { stroke-width: 1.9; }
  .tab-bar .heat-icon rect { stroke: none; fill: currentColor; opacity: .3; }
  .tab-bar .heat-icon .on { opacity: 1; }
  /* A pick's card, rising above the tab bar (or dropping from the top when
     the pick is low on the screen); tapping it opens the pick's events. */
  .peek {
    display: block; position: absolute; z-index: 30; left: 0; right: 0; bottom: 12px;
    width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 540px; margin: 0 auto;
    overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--panel-solid);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22); transform: translateY(calc(100% + 24px)); transition: transform 280ms cubic-bezier(.2, .9, .3, 1);
  }
  .peek.at-top { top: 12px; bottom: auto; transform: translateY(calc(-100% - 24px)); }
  .peek.open { transform: none; }
  .peek.actionable { cursor: pointer; }
  .peek .card-inner { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; }
  .peek .card-art { align-self: stretch; padding: 14px 0 14px 14px; background: none; }
  .peek .card-disc { width: 64px; height: 64px; }
  .peek .card-hero { width: 64px; height: 64px; }
  .peek .anim-icon { width: 38px; height: 38px; }
  .peek .card-body { padding: 12px 46px 10px 12px; text-align: left; }
  .peek .card-title { justify-content: flex-start; font-size: 17px; }
  .peek .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 14px; }
  .peek .card-progress { margin-top: 7px; }
  .peek .card-action { grid-column: 1 / -1; margin: 2px 12px 12px; min-height: 42px; font-size: 14px; }
  .peek-close { position: absolute; z-index: 3; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--ink-dim); cursor: pointer; font-size: 17px; line-height: 1; }
  .peek-close::before { content: ""; position: absolute; inset: -7px; }
}
/* A portrait screen has height to spare: the year becomes twelve month
   calendars, a week to a row, and fits without sideways scrolling. */
@media (max-width: 1099px) and (orientation: portrait) {
  .heatmap-panel { overflow: visible; }
  .heatmap { width: auto; --gap: 3px; }
  .hm-months, .hm-pad { display: none; }
  .hm-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; width: auto; }
  .hm-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap); align-content: start; }
  .hm-month-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; margin-bottom: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-dim); white-space: nowrap; }
  button.hm-month-head { margin: -3px -5px 0; padding: 3px 5px; border: 0; border-radius: 6px; background: none; font-family: inherit; text-align: left; cursor: pointer; }
  button.hm-month-head:hover { background: var(--surface-raised); color: var(--ink); }
  /* A whole selected month is ringed once, instead of each of its days. */
  .hm-month.active { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
  .hm-month.active .hm-month-head { color: var(--ink); }
  .hm-month-count { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-faint); }
  .hm-month-count .stat-icon { width: 11px; height: 11px; }
  .hm-lead { display: block; }
  .hm-cell { width: auto; height: auto; aspect-ratio: 1; }
  @container (min-width: 560px) {
    .hm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
    .hm-month-head { font-size: 13.5px; }
  }
}
@media (max-width: 720px) {
  .header-controls { gap: 8px; }
  .header-icon { width: 34px; height: 34px; }
  .level-ring { width: 36px; height: 36px; }
  /* The profile opens across the banner, so it stays on screen. */
  .profile-menu { position: static; }
  .profile-details { left: max(12px, env(safe-area-inset-left)); right: auto; width: min(320px, calc(100% - 24px)); }
  .site-title { gap: 10px; }
  .owner { gap: 9px; font-size: 17px; }
  .owner img { width: 32px; height: 32px; }
  .title-divider { height: 18px; }
  .wordmark { font-size: 16px; }
  .dataset-badge { padding: 2px 5px; font-size: 9px; }
  .heatmap { --gap: 3px; }
}
@media (max-width: 480px) {
  .timeline-toolbar .section-head { gap: 8px; }
  .timeline-heading { gap: 8px; }
  .result-count, .text-button { font-size: 12.5px; }
  .filter-bar { gap: 6px; }
  .filter-trigger { padding: 6px 8px; font-size: 13px; gap: 4px; }
  /* Room for Clear all on the same row: the milestone filter keeps just its star. */
  .milestone-toggle { padding: 6px 9px; }
  .milestone-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .filter-plus { display: none; }
  .timeline-index { display: none; }
  .timeline-layout { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .timeline-viewport { padding-left: 16px; padding-right: 16px; }
  .t-entry { padding: 18px; }
  .t-entry .notes { font-size: 15px; }
  .gallery.media-carousel { max-width: 100%; }
  .carousel-toolbar, .carousel-meta { gap: 7px; }
  .carousel-caption { font-size: 13px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .back-to-top { right: 14px; bottom: 14px; }
}
@media (max-width: 360px) {
  .header-controls { gap: 6px; }
  .header-icon { width: 30px; height: 30px; }
  .level-ring { width: 32px; height: 32px; }
  .level-ring .lv { font-size: 14px; }
  .owner { gap: 7px; font-size: 16px; }
  .site-title { gap: 7px; }
  .owner img { width: 30px; height: 30px; }
  .wordmark { font-size: 15px; }
  .activity-summary strong { font-size: 21px; }
}
/* ---- over the home pages' painted scene (scene.css, body.scenic) ----
   The panes are the scene's glass; the ink and the accent are the scene's
   own, and what is drawn in the accent follows it, as on the home pages. */
.scenic {
  --pane: var(--glass); --pane-line: var(--glass-line); --nav-bg: var(--chrome);
  /* Lines in the ink, so they show on the sky and on the glass alike. */
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-faint: color-mix(in srgb, var(--ink) 9%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  /* Activity: an empty day is a film of ink, so it shows on any picture,
     light or dark; a day with events is solid, and strong from one event
     on (most days have one), so it stands out from the empty ones. */
  --heat-0: color-mix(in srgb, var(--ink) 13%, transparent);
  --heat-1: color-mix(in srgb, var(--accent) 72%, var(--panel-solid));
  --heat-2: color-mix(in srgb, var(--accent) 84%, var(--panel-solid));
  --heat-3: color-mix(in srgb, var(--accent) 93%, var(--panel-solid));
  --heat-4: var(--accent);
}
.scenic :is(.panel, .timeline-dock) { box-shadow: 0 12px 40px rgba(10, 20, 40, .06); }
@media (max-width: 1099px) {
  /* No panes on phones: the sections lie on the scene. The bars let it show
     through, softly, as the home pages' tab bar does. */
  .scenic :is(.panel, .timeline-dock) { box-shadow: none; }
  .scenic .site-header { border-bottom-color: var(--chrome-line); }
  .scenic .tab-bar { background: color-mix(in srgb, var(--bar) 80%, transparent); border-top-color: var(--chrome-line); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
  .scenic .tab-bar a:not([aria-current]) { color: var(--ink-dim); }
  /* The full-screen map keeps a calm sea: the scene under its glass. */
  .scenic .atlas-map { background: var(--glass); }
}
/* Chinese, as on the home pages: 仿宋 text with Latin in Helvetica Neue
   Light, and the heaviest 宋体 for headings. 仿宋 is thin, so Chinese text is
   a pixel or two larger than English: 16 px to read, 15 px for notes and
   buttons (the home pages' sizes), the small labels to match. Dates and
   figures are Latin and keep their size. */
:root[lang^="zh"] body { font-weight: 300; }
:root[lang^="zh"] :is(h1, h2) { font-weight: 900; letter-spacing: 0; }
:root[lang^="zh"] .pane-title { font-size: 27px; letter-spacing: .04em; }
:root[lang^="zh"] :is(.t-entry h3, .card-title) { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
:root[lang^="zh"] :is(.t-entry .notes, .card-desc, .timeline-empty p) { font-size: 16px; }
:root[lang^="zh"] :is(.section-note, .pane-head .section-note, .result-count, .text-button, .activity-summary, .card-sub, .progress-caption) { font-size: 15px; }
:root[lang^="zh"] :is(.filter-trigger, .milestone-toggle, .timeline-month, .option-name) { font-size: 14px; }
:root[lang^="zh"] :is(.badge.clickable, .filter-chip, .stat .label, .hm-legend, .attach-link) { font-size: 13.5px; }
:root[lang^="zh"] :is(.kind, .hm-months > *, .index-label) { font-size: 12.5px; }
@media (max-width: 1099px) {
  :root[lang^="zh"] .tab-bar a { font-size: 11.5px; font-weight: 400; }
  :root[lang^="zh"] .tab-bar a[aria-current="page"] { font-weight: 600; }
  :root[lang^="zh"] .activity-summary > div > span { font-size: 14px; }
  :root[lang^="zh"] .hm-month-head { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  /* A card's icon still acts out its skill: small, in place, and with rests.
     The skill net's entry fades in, in the same order, without zooming. */
  *:not(.anim-icon *):not(.skill-net.animate *) { animation: none !important; transition: none !important; }
  .skill-net.animate .badge, .skill-net.animate .link { animation-name: fade !important; }
}