/* Generated by scripts/split-css.js from shared.css: the rules the generated pages and the profiles can use. Do not edit: edit shared.css, then run node scripts/split-css.js. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/cinzel-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/cinzel-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 300 400; font-display: swap; src: url(/fonts/crimson-pro-italic-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 300 400; font-display: swap; src: url(/fonts/crimson-pro-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 300 400; font-display: swap; src: url(/fonts/crimson-pro-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/crimson-pro-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/crimson-pro-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/crimson-pro-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 600; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Noto Serif'); unicode-range: U+02BB; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 300 400; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Noto Serif Italic'); unicode-range: U+02BB; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-sans-3-normal-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-sans-3-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-sans-3-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/baloo-2-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/nunito-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro Fallback'; font-style: normal; font-weight: 300 500; src: local('Georgia'); size-adjust: 89.75%; ascent-override: 100.28%; descent-override: 23.4%; line-gap-override: 0%; }
@font-face { font-family: 'Crimson Pro Fallback'; font-style: normal; font-weight: 600 700; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 80.17%; ascent-override: 112.26%; descent-override: 26.19%; line-gap-override: 0%; }
@font-face { font-family: 'Crimson Pro Fallback'; font-style: italic; font-weight: 300 500; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 80.74%; ascent-override: 111.47%; descent-override: 26.01%; line-gap-override: 0%; }
@font-face { font-family: 'Cinzel Fallback'; font-style: normal; font-weight: 400 500; src: local('Georgia'); size-adjust: 120.5%; ascent-override: 81.33%; descent-override: 30.71%; line-gap-override: 0%; }
@font-face { font-family: 'Cinzel Fallback'; font-style: normal; font-weight: 600 700; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 107.25%; ascent-override: 91.38%; descent-override: 34.5%; line-gap-override: 0%; }
@font-face { font-family: 'Source Sans 3 Fallback'; font-style: normal; font-weight: 400 500; src: local('Arial'), local('ArialMT'); size-adjust: 92.75%; ascent-override: 109.97%; descent-override: 43.13%; line-gap-override: 0%; }
@font-face { font-family: 'Source Sans 3 Fallback'; font-style: normal; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 89.48%; ascent-override: 113.99%; descent-override: 44.7%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-style: normal; font-weight: 400 500; src: local('Arial'), local('ArialMT'); size-adjust: 101.25%; ascent-override: 99.75%; descent-override: 34.57%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; font-style: normal; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 99.75%; ascent-override: 101.25%; descent-override: 35.09%; line-gap-override: 0%; }
@font-face { font-family: 'Baloo 2 Fallback'; font-style: normal; font-weight: 400 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 90%; ascent-override: 120%; descent-override: 57.78%; line-gap-override: 0%; }
@font-face { font-family: 'Baloo 2 Fallback'; font-style: normal; font-weight: 700 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 95%; ascent-override: 113.68%; descent-override: 54.74%; line-gap-override: 0%; }
:root {
    --bg: #0b0c10;
    --surface: #12141a;
    --border: #2a2d3a;
    --field-border: #606478;   /* form fields: 3:1 against the page (WCAG 1.4.11); --border is for cards and rules */
    --text: #e8e0d0;
    --muted: #958a76;
    --gold: #c9a84c;
    --gold-light: #e8c97a;
    --gold-rgb: 201,168,76;        /* for translucent gold: rgba(var(--gold-rgb), a) */
    --gold-light-rgb: 232,201,122;
    --cm-silver: #b4bcc6;          /* connections map: lineage and past ties */
    --cm-thread: rgba(236,232,224,0.42);  /* connections map: second-step threads */
    --cm-glint: #f7d67c;           /* connections map: the rule lines' glimmer (stays gold: never mistaken for silver) */
    /* Type: Cinzel for display only, Source Sans 3 for interface text, Crimson Pro for reading */
    --font-display: 'Cinzel', 'Cinzel Fallback', Georgia, serif;
    --font-ui: 'Source Sans 3', 'Source Sans 3 Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-text: 'Crimson Pro', 'Crimson Pro Fallback', Georgia, serif;
    --container: 1200px;
    --radius: 3px;
    --border-radius-lg: 6px;
    --error: #c0392b;
    --success: #5a9e6f;
    --shadow: rgba(0,0,0,0.5);
    --overlay: rgba(0,0,0,0.72);
    --shimmer-mid: rgba(42,45,58,0.5);
  }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    min-height: 100vh;
    overflow-x: hidden;
  }
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }
header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 36px 24px 20px;
    border-bottom: 1px solid var(--border);
  }
header h1 {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    text-shadow: 0 0 40px rgba(var(--gold-rgb),0.3);
  }
header p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
    font-style: italic;
    letter-spacing: 0.04em;
  }
.ornament {
    display: inline-block;
    color: var(--gold);
    opacity: 0.5;
    margin: 0 12px;
    font-size: 18px;
  }
.controls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
.tab {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 16px; /* not "normal": that changes with the font, and the late font swap moved the explorer's chart */
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
    text-transform: uppercase; font-weight: 600;}
.tab:hover { border-color: var(--gold); color: var(--gold); }
.tab.active { background: var(--gold); color: #0b0c10; border-color: var(--gold); font-weight: 600; }
#chart svg {
    display: block;
    width: 100%;
  }
.axis text {
    fill: var(--muted);
    font-family: var(--font-text);
    font-size: 14px;
  }
.axis line, .axis path {
    stroke: var(--border);
  }
.grid line {
    stroke: var(--border);
    stroke-opacity: 0.4;
    stroke-dasharray: 2,4;
  }
.grid path { stroke: none; }
#tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: 3px;
    padding: 10px 14px;
    font-size: 13px;
    max-width: 220px;
    z-index: 100;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  }
#tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
.legend {
    position: relative;
    z-index: 1;
    padding: 16px 24px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
[data-theme="light"] {
    --bg: #f4efe4;
    --surface: #ebe4d5;
    --border: #c8b896;
    --field-border: #8f7d58;
    --text: #2a2010;
    --muted: #665632;
    --gold: #76590f;
    --gold-light: #6b4e0a;
    --gold-rgb: 139,105,20;
    --gold-light-rgb: 107,78,10;
    --cm-silver: #7d8894;
    --cm-thread: rgba(42,32,16,0.42);
    --cm-glint: #b08a1c;
    --error: #b52a1d;
    --success: #3a7d52;
    --shadow: rgba(0,0,0,0.2);
    --overlay: rgba(0,0,0,0.5);
    --shimmer-mid: rgba(200,184,150,0.7);
  }
[data-theme="light"] body::before { opacity: 0.15; }
[data-theme="light"] .site-nav.scrolled { background: rgba(244,239,228,0.92); }
.nav-toggles { display: flex; align-items: center; gap: 8px; }
.nav-toggle-btn {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.02em;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 4px 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
  }
.nav-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
.info-stats {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
.info-stat { display: flex; justify-content: space-between; align-items: center; }
.info-stat-label { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; font-weight: 600;}
.info-stat-val { font-family: var(--font-text); font-size: 16px; color: var(--text); }
#profiles { position: relative; z-index: 1; }
.profile-detail-inner { max-width: 860px; margin: 0 auto; padding: 40px 40px 56px; }
.profile-detail-header {
    display: flex; align-items: center; gap: 28px;
    padding-bottom: 28px; border-bottom: 1px solid var(--border); margin-bottom: 36px;
  }
.profile-detail-logo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
.profile-detail-region {
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--gold); opacity: 0.7; margin: 0 0 6px; font-weight: 600;}
.profile-detail-name {
    font-family: var(--font-display); font-size: clamp(18px, 3vw, 28px);
    color: var(--gold-light); letter-spacing: 0.06em; margin: 0;
  }
.profile-section-block { margin-bottom: 36px; }
.profile-section-title {
    font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
.profile-section-body {
    font-family: var(--font-text);
    font-size: 18px; line-height: 1.8; color: var(--text);
  }
.profile-section-body p { margin: 0 0 12px; }
.profile-section-body p:last-child { margin-bottom: 0; }
.profile-summary {
    font-family: var(--font-text);
    font-style: italic; font-weight: 300; font-size: 19px;
    color: var(--muted); line-height: 1.75;
    border-top: 1px solid var(--border); padding-top: 28px;
    margin: 40px 0 0;
  }
.profile-references { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.profile-references-title {
    font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold);
    margin: 0 0 16px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
.profile-references-list { list-style: none; padding: 0; margin: 0; }
.profile-references-list li {
    font-family: var(--font-text);
    font-size: 15px; line-height: 1.65; color: var(--muted);
    padding: 6px 0 6px 20px; text-indent: -20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
.profile-references-list li:last-child { border-bottom: none; }
@media (max-width: 600px) {
.profile-detail-inner { padding: 20px 16px 48px; }
.profile-detail-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.profile-section-body { font-size: 15px; }
.profile-summary { font-size: 15px; }
}
html { scroll-behavior: smooth; }
section { scroll-margin-top: 60px; }
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 200;
    transition: background 0.3s, border-color 0.3s;
  }
.site-nav.scrolled {
    background: rgba(11,12,16,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
.nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
  }
.nav-logo-text { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.16em; color: var(--gold); transition: color 0.2s; }
.nav-logo:hover .nav-logo-text { color: var(--gold-light); }
.nav-links { display: flex; gap: 32px; }
@media (min-width: 769px) {
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
}
.nav-link {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s; font-weight: 600;}
.nav-link:hover { color: var(--gold); }
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    position: relative;
    z-index: 1;
  }
.hero-ornament {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--gold);
    opacity: 0.6;
    margin: 0 auto 20px;
  }
@keyframes scrollPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
#research { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; scroll-margin-top: 60px; }
.research-title { font-family: var(--font-display); font-size: clamp(22px, 4vw, 40px); color: var(--gold-light); margin: 16px 0 8px; letter-spacing: 0.12em; }
.research-subtitle { font-family: var(--font-text); font-size: 18px; font-style: italic; color: var(--muted); margin: 0 0 48px; }
#explorer { display: none; }
footer {
    padding: 48px 40px 24px;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
  }
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
  }
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
.footer-logo {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.18em;
    color: var(--gold-light);
  }
.footer-brand-tag {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
  }
.footer-social { display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.footer-social-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); transition:opacity 0.2s; }
.footer-social-link:hover { opacity:0.8; color:var(--text); }
.footer-social-text { font-family:var(--font-ui); font-size:12px; letter-spacing: 0.02em; color:inherit; transition:color 0.2s; }
.footer-links {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
  }
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
.footer-col-title {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.7;
    margin-bottom: 4px; font-weight: 600;}
.footer-link {
    font-size: 15px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
    font-family: var(--font-text);
  }
.footer-link:hover { color: var(--text); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    letter-spacing: 0.03em;
  }
#explorer { transition: padding-right 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
@media (max-width: 768px) {
.site-nav { padding: 0 20px; gap: 12px; }
.nav-links { gap: 18px; }
.nav-toggle-btn { font-size: 12px; padding: 4px 8px; }
.hero { padding: 100px 24px 60px; }
.tab { font-size: 12px; padding: 5px 10px; white-space: nowrap; flex-shrink: 0; }
.profile-detail-inner { padding: 32px 24px 48px; }
}
@media (max-width: 480px) {
.site-nav { padding: 0 14px; height: 54px; }
.nav-links { display: none; }
.nav-toggle-btn { font-size: 12px; padding: 4px 7px; }
.nav-toggles { gap: 6px; }
section { scroll-margin-top: 54px; }
.hero { padding: 86px 18px 48px; }
.tab { font-size: 12px; padding: 5px 8px; min-height: 30px; }
.legend { padding: 0 8px; }
.axis text { font-size: 12px; }
.profile-detail-inner { padding: 16px 14px 40px; }
.profile-detail-logo { width: 72px; height: 72px; }
.profile-section-body { font-size: 14px; line-height: 1.75; }
.form-input, input, select, textarea { font-size: 16px; }
.footer-links { gap: 24px; }
.profile-summary { font-size: 14px; padding-top: 20px; margin-top: 28px; }
.profile-references-list li { font-size: 13px; }
}
@keyframes overlayFadeIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(4px); }
  }
@keyframes overlayFadeOut {
    from { opacity: 1; backdrop-filter: blur(4px); }
    to   { opacity: 0; backdrop-filter: blur(0px); }
  }
@keyframes modalBoxIn {
    0%   { opacity: 0; transform: scale(0.88) translateY(24px); box-shadow: 0 0 0 rgba(0,0,0,0); }
    60%  { opacity: 1; transform: scale(1.02) translateY(-3px); }
    100% { opacity: 1; transform: scale(1)    translateY(0);    box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
  }
@keyframes modalBoxOut {
    from { opacity: 1; transform: scale(1)    translateY(0);    }
    to   { opacity: 0; transform: scale(0.92) translateY(12px); }
  }
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 500; padding: 20px;
  }
.modal-overlay.is-open,
  .thankyou-overlay.is-open { animation: overlayFadeIn  0.3s  ease forwards; }
.modal-overlay.closing,
  .thankyou-overlay.closing { animation: overlayFadeOut 0.22s ease forwards; }
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes shakeIn {
    0%   { opacity: 0; transform: translateX(0); }
    15%  { opacity: 1; transform: translateX(-7px); }
    35%  { transform: translateX(7px); }
    55%  { transform: translateX(-4px); }
    75%  { transform: translateX(4px); }
    100% { opacity: 1; transform: translateX(0); }
  }
#about { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; scroll-margin-top: 60px; }
.nav-hamburger { display: none; }
@media (max-width: 480px) {
.nav-hamburger {
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; line-height: 1; color: var(--gold);
      background: none; border: none; cursor: pointer;
      min-width: 44px; min-height: 44px; padding: 0;
    }
}
.nav-dropdown {
    display: none; position: absolute; top: 54px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction: column; z-index: 999;
  }
.nav-dropdown.open { display: flex; }
.nav-dropdown-link {
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text); text-decoration: none;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    transition: color 0.2s, background 0.2s; font-weight: 600;}
.nav-dropdown-link:hover { color: var(--gold); background: rgba(var(--gold-rgb),0.05); }
.nav-dd-display { display: none; }
@media (max-width: 480px) {
#theme-toggle, #nav-kids-btn { display: none; }
.nav-dd-display { display: flex; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.nav-dd-btn { flex: 1; min-height: 44px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.nav-dd-btn:hover, .nav-dd-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
}
.pagination-btn {
    font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em;
    padding: 8px 16px; border: 1px solid var(--border);
    background: none; color: var(--muted); cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
.pagination-btn:hover { border-color: var(--gold); color: var(--gold); }
.pagination-btn.active { border-color: var(--gold); color: var(--gold); }
@keyframes sectionSlideIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
body.page-entering {
    animation: pageFadeIn 0.38s cubic-bezier(0.22,1,0.36,1) backwards;
  }
body.page-leaving {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
  }
@media (max-width: 768px) {
.pagination-btn { font-size: 12px; padding: 7px 12px; }
}
.info-share-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
.info-share-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px;
  display: flex; align-items: center;
  transition: color 0.2s;
}
.info-share-btn:hover { color: var(--gold); }
.detail-cite-row {
  margin-top: 28px; padding-top: 16px;
  border-top: 0.5px solid var(--border);
}
.detail-cite-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s; font-weight: 600;}
.detail-cite-btn:hover { color: var(--gold); }
.detail-cite-icon { font-size: 18px; color: var(--gold); line-height: 1; }
.cite-dropdown {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  margin-top: 10px;
}
.cite-dropdown.open { max-height: 500px; }
.cite-block {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border);
}
.cite-block:last-child { border-bottom: none; }
.cite-block-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cite-label {
  font-family: var(--font-ui); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600;}
.cite-copy-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em;
  color: var(--muted); transition: color 0.2s;
}
.cite-copy-btn:hover { color: var(--gold); }
.cite-text {
  font-family: var(--font-text); font-size: 15px;
  color: var(--text); line-height: 1.6; user-select: text;
}
#dataset {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px;
  text-align: center; scroll-margin-top: 60px;
}
#research-series {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px;
  text-align: center; scroll-margin-top: 60px;
}
#contributors {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px;
  text-align: center; scroll-margin-top: 60px;
}
@keyframes contributorShimmer {
  0% { background-position: -400px 0; } 100% { background-position: 400px 0; }
}
#today-in-history { min-height: 100vh; }
.tih-page-header {
  padding: 120px 24px 48px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.tih-full-wrap {
  max-width: 1200px; margin: 0 auto; padding: 40px 40px 64px;
}
.tih-full-loading {
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em;
  color: var(--muted); text-align: center; padding: 48px 0; opacity: 0.5;
}
.tih-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px;
}
.tih-event-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-left: 2px solid var(--gold);
  border-radius: 4px; padding: 24px 20px;
  transition: border-color 0.2s;
}
.tih-event-card:hover { border-color: var(--gold); }
.tih-has-thumb { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.tih-hero-kicker { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.tih-event-thumb { display: block; width: 168px; height: 112px; border-radius: 3px; overflow: hidden; border: 0.5px solid var(--border); background: var(--bg); }
.tih-event-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.tih-event-main { min-width: 0; }
.day-events .tih-event-year { display: flex; align-items: center; gap: 10px; }
.tih-ago { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--muted); border: 0.5px solid var(--border); border-radius: 999px; padding: 1px 9px; margin-left: auto; white-space: nowrap; }
.tih-event-hero { border-color: rgba(var(--gold-rgb), 0.55); background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.07), transparent 55%), var(--surface); }
.tih-event-hero .tih-event-title { font-size: 16px; }
@media (max-width: 480px) {
.tih-has-thumb { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
.tih-has-thumb .tih-event-main { display: contents; }
.tih-has-thumb .tih-event-thumb { width: 96px; height: 72px; grid-row: span 2; }
.tih-has-thumb .tih-event-main > :not(.tih-event-year):not(.tih-event-title) { grid-column: 1 / -1; }
.tih-event-hero.tih-has-thumb { grid-template-columns: minmax(0, 1fr); }
.tih-event-hero .tih-event-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; grid-row: auto; margin-bottom: 10px; }
}
.tih-event-year {
  font-family: var(--font-ui); font-size: 12px;
  letter-spacing: 0.02em; color: var(--gold); margin: 0 0 8px;
}
.tih-event-title {
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em;
  color: var(--gold-light); margin: 0 0 10px; line-height: 1.55;
}
.tih-event-desc {
  font-family: var(--font-text); font-size: 15px;
  color: var(--text); line-height: 1.6; opacity: 0.8; margin: 0;
}
.tih-share-btn {
  position: absolute; bottom: 4px; right: 4px;
  background: none; border: none; color: var(--gold);
  cursor: pointer; padding: 10px; line-height: 0;
  opacity: 0; transition: opacity 0.2s, color 0.2s;
}
.tih-event-card:hover .tih-share-btn { opacity: 0.7; }
.tih-share-btn:hover { opacity: 1 !important; color: var(--gold-light); }
.tih-share-tooltip {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--gold);
  color: var(--gold-light); font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.02em; padding: 8px 20px;
  z-index: 500; pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s;
}
.tih-share-tooltip.visible { opacity: 1; }
.tih-share-dropdown {
  position: absolute; bottom: 36px; right: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 2px; min-width: 130px; z-index: 100; overflow: hidden;
}
.tih-share-dd-item {
  display: flex; align-items: center; width: 100%; background: none; border: none;
  text-align: left; padding: 10px 16px; min-height: 44px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em;
  color: var(--muted); transition: color 0.15s, background 0.15s;
}
.tih-share-dd-item:hover { color: var(--gold); background: rgba(var(--gold-rgb),0.06); }
.tih-date-sep {
  display: block; width: 60px; height: 1px;
  background: var(--gold); opacity: 0.6; margin: 8px auto;
}
.tih-date-dow {
  display: block;
  font-family: var(--font-ui); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 30px; font-weight: 600;}
.tih-date-full {
  display: block;
  font-family: var(--font-display); font-size: 22px;
  letter-spacing: 0.08em; color: var(--gold);
  margin-top: 30px;
}
#tih-subheading { font-style: normal; }
#tih-subheading .tih-date-full { font-size: 26px; }
.tih-pinned-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 4px; padding: 24px 20px 20px 20px;
  margin-bottom: 24px;
}
#tih-pinned-wrap { margin-bottom: 8px; }
.tih-pinned-icon {
  position: absolute; top: 12px; left: 12px;
  color: var(--gold); opacity: 0.75; line-height: 0;
}
.tih-pinned-label {
  font-family: var(--font-ui); font-size: 12px;
  letter-spacing: 0.02em; font-variant: small-caps;
  color: var(--gold); margin: 0 0 8px; padding-left: 24px;
}
.tih-pinned-title {
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em;
  color: var(--gold-light); margin: 0 0 10px; line-height: 1.55;
}
.tih-pinned-desc {
  font-family: var(--font-text); font-size: 15px;
  color: var(--text); line-height: 1.6; opacity: 0.8; margin: 0;
}
.tih-pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px; padding: 24px 0 8px;
}
.tih-pg-btn {
  min-width: 36px; height: 36px; padding: 0 8px;
  background: none; border: 1px solid transparent;
  color: var(--muted); font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.02em;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
  border-radius: 2px;
}
.tih-pg-btn:hover { color: var(--gold); border-color: var(--border); }
.tih-pg-btn.active { color: var(--gold-light); border-color: var(--gold); }
.tih-pg-btn.prev-next { font-size: 12px; letter-spacing: 0.08em; }
.tih-pg-ellipsis {
  color: var(--muted); font-family: var(--font-ui);
  font-size: 12px; padding: 0 2px; line-height: 36px;
}
@media (max-width: 900px) {
.tih-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.tih-page-header { padding: 90px 20px 28px; }
.tih-full-wrap { padding: 24px 16px 48px; }
.tih-grid { grid-template-columns: 1fr; gap: 14px; }
.tih-pg-btn { min-width: 44px; height: 44px; font-size: 13px; }
.tih-share-btn { opacity: 0.7; }
.tih-share-dropdown { max-height: 60vh; overflow-y: auto; }
}
.tih-skeleton-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 4px; padding: 24px 20px;
  animation: skshimmer 1.6s ease-in-out infinite;
}
@keyframes skshimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.tih-sk-year { height: 14px; width: 60px;  background: var(--border); border-radius: 2px; margin-bottom: 12px; }
.tih-sk-title { height: 18px; width: 80%;   background: var(--border); border-radius: 2px; margin-bottom: 10px; }
.tih-sk-desc { height: 14px; width: 95%;   background: var(--border); border-radius: 2px; }
.tih-error-state { text-align: center; padding: 48px 24px; color: var(--muted); font-family: var(--font-text); }
.tih-retry-btn {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 20px; border: 0.5px solid var(--gold); background: none; color: var(--gold);
  cursor: pointer; margin-top: 12px; display: inline-block; font-weight: 600;}
.tih-retry-btn:hover { background: rgba(var(--gold-rgb),0.08); }
.nav-group-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-group-wrap.open .nav-group-menu { display: block; }
.nav-group-menu {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%); min-width: 176px;
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 3px; z-index: 300; padding: 6px 0;
  box-shadow: 0 8px 24px var(--shadow);
}
.nav-group-menu a, .nav-group-menu button {
  display: block; width: 100%; font-family: var(--font-ui); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  padding: 10px 18px; text-decoration: none; background: none; border: none;
  text-align: left; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, background 0.15s; font-weight: 600;}
.nav-group-menu a:hover, .nav-group-menu button:hover { color: var(--gold); background: rgba(var(--gold-rgb),0.04); }
.nav-parent-btn {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; cursor: pointer; padding: 0;
  transition: color 0.2s; font-weight: 600;}
.nav-parent-btn:hover, .nav-group-wrap.open .nav-parent-btn { color: var(--gold); }
.nav-parent-btn.active-group { color: var(--gold); }
#newsletter-section {
  max-width: 600px; margin: 0 auto; padding: 60px 40px;
  text-align: center; border-top: 0.5px solid var(--border);
}
.footer-newsletter { margin-top: 0; }
.footer-nl-label {
  display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold); opacity: 0.7; margin-bottom: 8px; font-weight: 600;}
.footer-nl-form { display: flex; gap: 4px; }
.footer-feed { display: inline-flex !important; align-items: center; gap: 7px; margin-top: 14px; }
.footer-feed::before { content: ''; width: 12px; height: 12px; flex: 0 0 12px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='3'/%3E%3Cpath d='M2 9a13 13 0 0 1 13 13h-4A9 9 0 0 0 2 13zM2 2a20 20 0 0 1 20 20h-4A16 16 0 0 0 2 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='3'/%3E%3Cpath d='M2 9a13 13 0 0 1 13 13h-4A9 9 0 0 0 2 13zM2 2a20 20 0 0 1 20 20h-4A16 16 0 0 0 2 6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.footer-nl-form input {
  font-family: var(--font-text); font-size: 14px; padding: 6px 10px;
  background: var(--bg); border: 0.5px solid var(--border); border-radius: 2px;
  color: var(--text); outline: none; flex: 1; min-width: 0; transition: border-color 0.2s;
}
.footer-nl-form input:focus { border-color: var(--gold); }
.footer-nl-form button {
  font-family: var(--font-ui); font-size: 13px; padding: 6px 10px;
  border: 0.5px solid var(--gold); background: none; color: var(--gold); cursor: pointer; transition: background 0.2s;
}
.footer-nl-form button:hover { background: rgba(var(--gold-rgb),0.08); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.empire-stats-panel {
  margin: 28px 0 36px;
  padding: 24px 20px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 4px;
}
.empire-stats-title {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold); opacity: 0.9; margin: 0 0 16px; font-weight: 600;}
.empire-stats-top {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: flex-start; margin-bottom: 20px;
}
.empire-overall-wrap { display: flex; flex-direction: column; gap: 4px; }
.empire-overall-score {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  color: var(--gold-light); letter-spacing: 0.02em; line-height: 1;
}
.empire-overall-label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;}
.empire-rank-label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold); opacity: 0.85; font-weight: 600;}
.empire-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.empire-tag {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
  border: 0.5px solid rgba(var(--gold-rgb),0.5); border-radius: 2px; padding: 3px 9px; font-weight: 600;}
.empire-radar-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.empire-radar-wrap svg { width: 100%; height: auto; display: block; }
.empire-dim-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 20px;
}
.empire-dim { display: flex; flex-direction: column; gap: 3px; }
.empire-dim-label {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text); opacity: 0.6; font-weight: 600;}
.empire-dim-row { display: flex; align-items: center; gap: 8px; }
.empire-dim-bar-wrap {
  flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.empire-dim-bar { height: 100%; background: var(--gold); border-radius: 2px; }
.empire-dim-val {
  font-family: var(--font-ui); font-size: 12px; color: var(--gold-light);
  min-width: 20px; text-align: right;
}
@media (max-width: 480px) {
.empire-overall-score { font-size: 32px; }
.empire-stats-panel { padding: 18px 14px; }
.empire-dim-grid { grid-template-columns: 1fr; }
}
.compare-radar-wrap { max-width: 300px; width: 100%; }
.compare-stats-top { margin-bottom: 16px; }
.enc-link {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s;
  }
.enc-link:hover, .enc-link:focus-visible { color: var(--gold-light); text-decoration-style: solid; }
.enc-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.profile-section-block { display: flow-root; }
.profile-section-fig {
    float: right; width: 240px; margin: 4px 0 14px 28px;
    border: 0.5px solid var(--border); padding: 6px; background: var(--surface, transparent);
  }
.profile-section-fig img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.profile-section-fig figcaption {
    font-family: var(--font-text); font-size: 15px; line-height: 1.4;
    color: var(--muted); margin: 6px 2px 0;
  }
.profile-section-fig figcaption > a { color: var(--gold); text-decoration: none; }
.profile-section-fig figcaption > a:hover { color: var(--gold-light); }
.profile-section-fig-credit { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.profile-section-fig-credit a { color: inherit; text-decoration: none; }
.profile-section-fig-credit a:hover { color: var(--gold); }
@media (max-width: 600px) {
.profile-section-fig { float: none; width: auto; margin: 0 0 14px; }
.profile-section-fig img { max-height: 260px; }
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 2000;
  background: var(--gold); color: var(--bg); padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }
.nav-link[aria-current="page"], .nav-group-menu a[aria-current="page"], .nav-dropdown-link[aria-current="page"] { color: var(--gold); }
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: var(--gold);
    background: none; border: none; cursor: pointer;
    min-width: 44px; min-height: 44px; padding: 0;
  }
.nav-dropdown { top: 60px; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 480px) {
.nav-dropdown { top: 54px; max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px); }
}
.nav-dropdown-group {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 16px 24px 6px;
}
button.nav-dropdown-link { background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; width: 100%; }
h2.profile-section-title { font-weight: 400; }
.profile-section-block, .profile-summary, #empire-stats-panel, #detail-references { scroll-margin-top: 84px; }
.empire-meta { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.info-stat-val .enc-link { text-decoration-thickness: 1px; }
.profile-detail-inner { position: relative; }
.empire-toc { margin: 0 0 28px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.empire-toc-title { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.empire-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.empire-toc a { font-family: var(--font-ui); font-size: 14px; color: var(--text); text-decoration: none; }
.empire-toc a:hover, .empire-toc a[aria-current] { color: var(--gold); }
@media (min-width: 1300px) {
.empire-toc { position: absolute; top: 0; bottom: 0; left: -210px; width: 180px; margin: 0; padding: 0; border: 0; }
.empire-toc > * { position: sticky; }
.empire-toc-title { top: 90px; }
.empire-toc ul { top: 116px; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); }
.empire-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; }
.empire-toc a[aria-current] { border-left-color: var(--gold); }
}
.related-empires { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.related-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.related-prevnext .related-card { flex: 0 1 300px; }
.related-prevnext .related-card:last-child:not(:first-child) { text-align: right; grid-template-columns: 1fr 40px; }
.related-prevnext .related-card:last-child:not(:first-child) img { order: 2; grid-row: 1 / span 3; grid-column: 2; }
.related-card {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.related-card:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.05); }
.related-card img { width: 40px; height: 40px; object-fit: contain; grid-row: 1 / span 3; }
.related-card-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.related-card-name { font-family: var(--font-display); font-size: 15px; color: var(--gold-light); line-height: 1.3; }
.related-card-dates { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
@media (max-width: 600px) {
.related-prevnext { flex-direction: column; }
.related-prevnext .related-card { flex: 1 1 auto; }
}
.profile-detail-header .info-stat { gap: 16px; }
.profile-detail-header .info-stat-label { white-space: nowrap; }
.profile-detail-header .info-stat-val { text-align: right; }
@media (max-width: 1299px) {
.empire-toc { border-top: 0; padding-top: 0; }
}
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
.related-grid { grid-template-columns: 1fr; }
}
.nav-search-btn {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 30px;
  background: transparent; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.nav-search-btn:hover { color: var(--gold); border-color: var(--gold); }
.site-search { position: fixed; inset: 0; z-index: 3000; background: var(--overlay); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.site-search[hidden] { display: none; }
.site-search-box { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px var(--shadow); overflow: hidden; }
.site-search-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
#site-search-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-family: var(--font-ui); font-size: 17px; padding: 16px 0; }
.site-search-close { font-family: var(--font-ui); font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 2px; padding: 3px 8px; cursor: pointer; }
.site-search-results { list-style: none; margin: 0; padding: 6px; max-height: 55vh; overflow-y: auto; }
.site-search-results:empty { display: none; }
.site-search-results a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: 2px; text-decoration: none; color: var(--text); }
.site-search-results li.active a, .site-search-results a:hover { background: rgba(var(--gold-rgb), 0.1); color: var(--gold-light); }
.ss-name { font-family: var(--font-text); font-size: 18px; }
.ss-type { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.site-search-results li.ss-all { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.site-search-results li.ss-all a { justify-content: flex-start; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.site-search-hint { font-family: var(--font-ui); font-size: 14px; color: var(--muted); padding: 14px 18px; margin: 0; }
.site-search-results li[role="option"]:not(.ss-all):not(.ss-rec) > a:first-child { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 7px 10px; }
.ss-pic { width: 40px; height: 40px; border-radius: 2px; overflow: hidden; background: var(--bg); }
.ss-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ss-pic img.ss-emblem { object-fit: contain; object-position: center; }
.ss-name { min-width: 0; overflow-wrap: anywhere; }
.site-search-results a.ss-twin { display: inline-block; margin: -6px 0 6px 62px; padding: 2px 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--gold); background: none; text-decoration: underline; text-underline-offset: 3px; }
.ss-head { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 2px; }
.ss-clear button, .ss-dym { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ss-dym { padding: 4px 0; font-size: inherit; }
.ss-clear { padding: 4px 10px 6px; }
@media (max-width: 520px) {
.site-search-results li[role="option"]:not(.ss-all):not(.ss-rec) > a:first-child { grid-template-columns: 40px minmax(0, 1fr); }
.site-search-results li[role="option"]:not(.ss-all):not(.ss-rec) > a:first-child .ss-pic { grid-row: span 2; }
.site-search-results .ss-type { grid-column: 2; white-space: normal; }
.ss-name { font-size: 17px; }
}
@media (pointer: coarse) {
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}
.shr { -webkit-tap-highlight-color: transparent; position: fixed; inset: 0; z-index: 3100; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 16px; animation: shr-fade 0.18s ease; }
.shr-box { width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px var(--shadow); padding: 14px 18px 18px; }
.shr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shr-t { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-light); }
.shr-x { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.shr-x:hover, .shr-x:focus-visible { color: var(--gold); border-color: var(--gold); }
.shr-pic { margin: 0 0 10px; text-align: center; }
.shr-pic img { display: block; width: 100%; height: auto; max-height: 46vh; max-height: 46dvh; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); -webkit-touch-callout: default; user-select: auto; }
.shr-pic img:not([src]) { aspect-ratio: 1200 / 630; }
.shr-save { margin: 6px 0 0; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.shr-save:empty { display: none; }
.shr-line { margin: 0 0 12px; padding: 10px 12px; font-family: var(--font-text); font-size: 16px; line-height: 1.45; color: var(--text); background: rgba(var(--gold-rgb), 0.06); border-left: 2px solid rgba(var(--gold-rgb), 0.6); border-radius: 0 6px 6px 0; white-space: pre-line; }
.shr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.shr-acts:empty { display: none; }
.shr-act { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; color: var(--bg); background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; }
.shr-act.shr-dl, .shr-more { color: var(--gold); background: none; }
.shr-act[hidden] { display: none; }
.shr-more { width: 100%; margin-top: 10px; }
.shr-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 600px) {
.shr-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shr-app { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 64px; padding: 9px 4px 7px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.shr-app:hover, .shr-app:focus-visible { border-color: rgba(var(--gold-rgb), 0.7); color: var(--gold-light); }
.ia-tip { margin: 14px 0 0; padding: 10px 12px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; }
.ia-tip b { color: var(--text); font-weight: 600; }
.ia-open { display: inline-block; margin-top: 6px; color: var(--gold); font-weight: 600; }
body.shr-open { overflow: hidden; }
@keyframes shr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shr-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) {
.shr { align-items: flex-end; padding: 0; }
.shr-box { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); animation: shr-up 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
}
@media (prefers-reduced-motion: reduce) {
.shr, .shr-box { animation: none; }
}
.page-share-row { margin: 14px 0 0; }
.info-share-row .page-share::before { content: '\2197'; font-size: 12px; }
@media (max-width: 600px) {
.empire-page .info-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.empire-page .info-share-btn { justify-content: center; white-space: nowrap; min-height: 44px; padding: 8px 10px; }
}
.featured-region { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
#newsletter-section { margin-top: 32px; }
#site-search-input::-webkit-search-cancel-button, #home-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
html, body { overflow-x: clip; }
#research, #about, #contributors { min-height: auto; justify-content: flex-start; padding-top: 120px; }
@media (max-width: 700px) {
#research, #about, #contributors { padding-top: 96px; }
}
.tih-page-header { padding-bottom: 32px; }
@keyframes band-flash { 0% { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.35), 0 0 34px rgba(var(--gold-rgb), 0.3); } 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); } }
@media (max-width: 600px) {
.nav-search-btn, .nav-toggle-btn { min-width: 40px; min-height: 40px; }
.nav-logo { padding: 10px 0; }
.tab, .enc-chip { min-height: 40px; }
.footer-social-link { min-height: 40px; display: inline-flex; align-items: center; }
.empire-toc a { display: inline-flex; align-items: center; min-height: 40px; }
.series-copy-link, .detail-cite-btn { min-height: 40px; }
#about a[href^="mailto:"] { display: inline-block; padding: 10px 0; }
}
@media (max-width: 420px) {
.nav-logo-text { font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; }
}
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }
@media (max-width: 600px) {
.info-share-btn, .enc-random, .cite-copy-btn { min-height: 40px; min-width: 40px; }
}
.enc-preview {
  position: fixed; z-index: 2500; width: min(360px, calc(100vw - 16px)); display: flex; gap: 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 14px 40px var(--shadow);
}
.enc-preview[hidden] { display: none; }
.enc-preview img { width: 96px; height: 96px; flex: 0 0 96px; object-fit: cover; border-radius: 2px; background: var(--bg); }
.enc-preview > div { min-width: 0; }
.enc-preview-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin: 0 0 2px; }
.enc-preview-name { font-family: var(--font-display); font-size: 17px; color: var(--gold-light); margin: 0 0 6px; line-height: 1.25; }
.enc-preview-text { font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: var(--text); margin: 0 0 8px; }
.enc-preview-more { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; }
.enc-preview-more:hover { color: var(--gold-light); }
@media (max-width: 480px) {
.enc-preview img { width: 72px; height: 72px; flex-basis: 72px; }
.enc-preview-more { display: inline-flex; min-height: 40px; align-items: center; }
}
.empire-glance { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 0 0 28px; scroll-margin-top: 84px; }
.empire-glance-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.empire-glance-title, .empire-dyk-title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.empire-glance ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.empire-glance li { font-family: var(--font-text); font-size: 17px; line-height: 1.5; color: var(--text); }
.empire-glance li::marker { color: var(--gold); }
.empire-dyk { border-left: 3px solid var(--gold); background: rgba(var(--gold-rgb), 0.07); padding: 18px 20px; border-radius: 0 var(--radius) var(--radius) 0; }
.empire-dyk p:last-child { font-family: var(--font-text); font-size: 17px; font-style: italic; line-height: 1.55; color: var(--text); margin: 0; }
.rise-fall { margin: 36px 0 8px; scroll-margin-top: 84px; }
.rf-chart { margin: 0 0 18px; }
.rf-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.rf-base { stroke: var(--border); stroke-width: 1; }
.rf-area { fill: rgba(var(--gold-rgb), 0.14); }
.rf-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.rf-peak { fill: var(--gold-light); }
.rf-peak-label, .rf-axis { font-family: var(--font-ui); font-size: 13px; fill: var(--muted); }
.rf-peak-label { fill: var(--gold-light); font-weight: 600; }
.rf-ev circle { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; }
.rf-ev line { stroke: var(--gold); }
.rf-ev text { font-family: var(--font-ui); font-size: 10px; font-weight: 600; fill: var(--gold-light); }
.rf-chart figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 6px; }
.rf-events { list-style: none; counter-reset: ev; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.rf-events li { counter-increment: ev; position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 8px 0 8px 22px; }
.rf-events li::before { content: counter(ev); position: absolute; left: -11px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--gold); font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--gold-light); display: flex; align-items: center; justify-content: center; }
.rf-year { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); padding-top: 2px; }
.rf-text { font-family: var(--font-text); font-size: 17px; line-height: 1.5; color: var(--text); }
@media (max-width: 700px) {
.empire-glance { grid-template-columns: 1fr; }
.rf-events li { grid-template-columns: 1fr; gap: 2px; }
}
.empire-dyk { align-self: start; }
.rise-fall { margin-bottom: 40px; }
@media (max-width: 600px) {
.rf-peak-label, .rf-axis { font-size: 26px; }
.rf-ev text { font-size: 18px; }
.rf-ev circle { r: 13px; }
}
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.quiz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.tih-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tih-tag { font-family: var(--font-ui); font-size: 13px; text-decoration: none; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); color: var(--text); }
.tih-tag.enc-link { color: var(--gold); text-decoration: none; }
.tih-tag:hover { border-color: var(--gold); color: var(--gold-light); }
.tih-tag-profile { background: rgba(var(--gold-rgb), 0.12); border-color: rgba(var(--gold-rgb), 0.5); color: var(--gold-light); font-weight: 600; }
@media (max-width: 600px) {
.tih-tag { padding: 8px 12px; }
}
.paths-page { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 110px 24px 80px; }
.paths-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.path-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.path-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.path-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); height: 120px; background: var(--bg); }
.path-thumbs img { width: 100%; height: 120px; object-fit: cover; display: block; }
.path-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.path-card-title { font-family: var(--font-display); font-size: 21px; color: var(--gold-light); }
.path-card-tag { font-family: var(--font-text); font-size: 16px; line-height: 1.5; color: var(--text); }
.path-view { display: grid; gap: 22px; max-width: 860px; margin: 0 auto; }
.path-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 5vw, 42px); color: var(--gold-light); line-height: 1.15; margin: 6px 0 12px; }
.path-intro { font-family: var(--font-text); font-size: 20px; line-height: 1.65; color: var(--text); max-width: 65ch; }
.path-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.path-progress { margin: 0 0 16px; }
.path-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.path-bar i { display: block; height: 100%; min-width: 0; background: var(--gold); border-radius: 3px; transition: width 0.6s; }
.path-progress p { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.path-continue { color: var(--gold); font-weight: 600; }
.path-step.is-read { position: relative; border-color: rgba(var(--gold-rgb), 0.45); }
.path-step.is-read::after { content: '\2713'; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--bg); font-family: var(--font-ui); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.path-card { position: relative; }
.path-card-progress { position: absolute; top: 10px; right: 10px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--bg); background: var(--gold); border-radius: 999px; padding: 3px 10px; box-shadow: 0 2px 8px var(--shadow); }
.path-journey { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 950; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: min(720px, calc(100% - 24px)); padding: 10px 10px 10px 16px; background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 30px var(--shadow); font-family: var(--font-ui); font-size: 13px; }
.pj-path { color: var(--gold); font-weight: 700; text-decoration: none; }
.pj-at { color: var(--muted); }
.pj-next { margin-left: auto; color: var(--text); font-weight: 600; text-decoration: none; }
.pj-next:hover, .pj-path:hover { color: var(--gold-light); }
.pj-x { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; min-height: 32px; }
.pj-x:hover { color: var(--gold); }
body.has-journey .to-top { bottom: 92px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.listen-row { margin: 10px 0 4px; }
.listen-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 22px; background: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.listen-btn:hover, .listen-btn:focus-visible, .listen-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.listen-bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 960; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; background: var(--surface); border: 1px solid var(--gold); border-radius: 30px; box-shadow: 0 10px 30px var(--shadow); font-family: var(--font-ui); font-size: 13px; font-weight: 600; max-width: calc(100vw - 24px); }
.listen-bar[hidden] { display: none; }
.listen-bar button { font: inherit; color: var(--text); background: none; border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; cursor: pointer; min-height: 34px; }
.listen-bar button:hover, .listen-bar button:focus-visible { border-color: var(--gold); color: var(--gold); }
.listen-bar .lb-play { background: var(--gold); border-color: var(--gold); color: var(--bg); min-width: 80px; }
.listen-bar .lb-play:hover, .listen-bar .lb-play:focus-visible { background: var(--gold-light); color: var(--bg); }
.lb-pos { color: var(--muted); white-space: nowrap; padding: 0 4px; }
.listen-bar .lb-voice { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 6px 10px; min-height: 34px; max-width: 190px; text-overflow: ellipsis; cursor: pointer; }
.listen-bar .lb-voice:hover, .listen-bar .lb-voice:focus-visible { border-color: var(--gold); }
@media (max-width: 480px) {
.listen-bar .lb-voice { max-width: 118px; }
}
.is-speaking { background: rgba(var(--gold-rgb), 0.12); box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0.12); border-radius: 2px; transition: background 0.3s, box-shadow 0.3s; }
body.has-listen .to-top { bottom: 84px; }
body.has-listen.has-journey .listen-bar { bottom: 84px; }
body.has-listen.has-journey .to-top { bottom: 150px; }
@media (max-width: 480px) {
.lb-pos { display: none; }
.listen-bar { gap: 6px; }
}
@media print {
.listen-row, .listen-bar { display: none !important; }
}
body.has-journey #site-footer { padding-bottom: 90px; }
.path-step { display: flex; gap: 16px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: border-color 0.2s; }
.path-step:hover { border-color: var(--gold); }
.path-step img, .path-step-ph { width: 84px; height: 84px; flex: 0 0 84px; object-fit: cover; border-radius: 2px; background: var(--bg); }
.path-step-ph { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; color: var(--gold); }
.path-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.path-step-kind { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.path-step-name { font-family: var(--font-display); font-size: 19px; color: var(--gold-light); }
.path-step-why { font-family: var(--font-text); font-size: 16px; line-height: 1.5; }
@media (max-width: 600px) {
.paths-page { padding: 90px 16px 60px; }
.paths-grid { grid-template-columns: 1fr; }
.path-step img, .path-step-ph { width: 64px; height: 64px; flex-basis: 64px; }
.path-intro { font-size: 18px; }
}
.path-head { border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.cx-map { background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.06), transparent 65%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 420px; }
.cm-svg { width: 100%; height: auto; display: block; }
.cm-line { fill: none; stroke-dasharray: 1 1; animation: cm-draw 0.8s ease-out both; }
.cm-strong { stroke: var(--gold); stroke-width: 3.4; filter: url(#cm-glow2); animation: cm-draw 0.8s ease-out both, cm-glim 4.5s ease-in-out infinite; }
.cm-light { stroke: var(--gold); stroke-width: 2; opacity: 0.8; filter: url(#cm-glow); }
.cm-lineage { stroke: var(--cm-silver); stroke-width: 2.2; }
.cm-past { stroke: var(--cm-silver); stroke-width: 1.6; opacity: 0.7; }
.cm-thread { stroke: var(--cm-thread); stroke-width: 0.8; }
.cm-bundle { stroke: var(--gold); stroke-width: 8; opacity: 0.2; }
.cm-thread.cm-dim { opacity: 0.35; }
.cm-bundle.cm-dim { opacity: 0.07; }
.cm-still .cm-line { animation: none; }
.cm-still .cm-strong { animation: cm-glim 4.5s ease-in-out infinite; }
@keyframes cm-draw { from { stroke-dashoffset: 1; } }
@keyframes cm-glim { 50% { stroke: var(--cm-glint); } }
.cm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--muted); }
.cm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cm-legend b { color: var(--text); font-weight: 600; }
.cm-sw { display: inline-block; flex: none; width: 26px; height: 0; border-top: 2px solid var(--gold); }
.cm-sw-strong { border-top-width: 3px; box-shadow: 0 0 6px 1px rgba(var(--gold-rgb), 0.7); }
.cm-sw-light { opacity: 0.8; box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.45); }
.cm-sw-lineage { border-top-color: var(--cm-silver); }
.cm-sw-past { border-top: 1.5px solid var(--cm-silver); opacity: 0.7; }
.cm-sw-thread { border-top: 1px solid var(--cm-thread); }
.cm-sw-bundle { border-top: 7px solid rgba(var(--gold-rgb), 0.25); }
.cm-node { cursor: pointer; }
.cm-node circle { fill: var(--bg); stroke: var(--gold); stroke-width: 1.5; transition: r 0.2s; }
.cm-node.cm-prof circle { fill: var(--gold); }
.cm-centre circle { fill: var(--gold-light); stroke: var(--gold-light); filter: url(#cm-glow); }
.cm-node text { font-family: var(--font-ui); font-size: 12px; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.cm-centre text { font-family: var(--font-display); font-size: 17px; fill: var(--gold-light); stroke-width: 9px; stroke-linejoin: round; }
.cm-n2 text { font-size: 11px; fill: var(--muted); }
.cm-out circle { fill: var(--muted); stroke: none; opacity: 0.5; }
.cm-gone { opacity: 0.25; }
.cm-node:hover circle, .cm-node:focus circle { stroke-width: 3; }
.cm-node:focus { outline: none; }
.cm-node:focus-visible text { fill: var(--gold-light); text-decoration: underline; }
.cx-soon, .cx-none, .cm-empty { font-family: var(--font-text); font-style: italic; color: var(--muted); margin: 0; }
.cm-node text.cm-lbl-hidden { display: none; }
.cm-node:hover text.cm-lbl-hidden, .cm-node:focus text.cm-lbl-hidden { display: inline; }
.cm-node:hover text, .cm-node:focus text { fill: var(--gold-light); }
.cx-map { position: relative; }
.cm-group circle { fill: rgba(var(--gold-rgb), 0.16); stroke: var(--gold); stroke-dasharray: 3 3; }
.cm-group:hover circle, .cm-group:focus circle { fill: rgba(var(--gold-rgb), 0.3); }
.cm-group text { font-style: italic; fill: var(--gold-light); }
.cm-node text.cm-group-n { font-style: normal; font-weight: 600; font-size: 12px; fill: var(--gold-light); }
.cm-group-rest { cursor: default; }
.cm-back { position: absolute; top: 10px; left: 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; min-height: 36px; cursor: pointer; }
.cm-back:hover { border-color: var(--gold); }
.mini-connections { margin: 36px 0 8px; }
.mini-connections .cx-map { min-height: 0; }
.mini-connections-more { display: inline-block; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; }
@media (max-width: 600px) {
.cm-node text { font-size: 18px; }
.cm-centre text { font-size: 24px; }
.cm-n2 text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cm-svg .cm-line { animation: none; }
}
.enc-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.enc-wrap { max-width: 920px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.enc-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 28px; }
.enc-stats { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em; color: var(--muted); }
.enc-controls { position: sticky; top: 64px; z-index: 5; background: var(--bg); padding: 12px 0; border-bottom: 0.5px solid var(--border); display: grid; gap: 10px; }
.enc-search { width: 100%; font-family: var(--font-text); font-size: 18px; padding: 10px 14px; background: var(--surface); color: var(--text); border: 0.5px solid var(--border); border-radius: 2px; }
.enc-search:focus { outline: 1px solid var(--gold); }
.enc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.enc-chip { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; background: none; color: var(--muted); border: 0.5px solid var(--border); border-radius: 2px; cursor: pointer; font-weight: 600; }
.enc-chip:hover { color: var(--gold); border-color: var(--gold); }
.enc-chip[aria-pressed="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.enc-chip .n { opacity: .7; margin-left: 4px; }
.enc-tags { padding: 10px 12px; border-left: 2px solid var(--gold); background: var(--surface); }
.enc-row[hidden] { display: none; }
.enc-sort { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.enc-kicker a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.enc-count { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.enc-list { list-style: none; padding: 0; }
.enc-item a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 0.5px solid var(--border); color: var(--text); text-decoration: none; }
.enc-item a:hover .enc-name { color: var(--gold); }
.enc-name { font-size: 18px; font-weight: 600; min-width: 0; }
.enc-type { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 6px; white-space: nowrap; font-weight: 600; }
.enc-snip { grid-column: 1 / -1; font-size: 15px; color: var(--muted); line-height: 1.5; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.enc-empty { padding: 40px 0; color: var(--muted); font-size: 17px; list-style: none; }
.enc-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.enc-kicker { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.enc-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; color: var(--text); text-wrap: balance; margin: 4px 0; }
.enc-meta { font-size: 16px; color: var(--muted); }
.enc-meta .dates { color: var(--text); }
.enc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.enc-desc { font-size: 20px; line-height: 1.7; color: var(--text); max-width: 65ch; }
.enc-fig { width: 280px; max-width: 100%; border: 0.5px solid var(--border); background: var(--surface); padding: 8px; margin: 0; }
.enc-fig img { display: block; width: 100%; height: auto; }
.enc-fig figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.enc-fig figcaption a { color: var(--muted); }
.enc-section-title { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.enc-mentions { display: flex; flex-wrap: wrap; gap: 8px; }
.enc-mentions a { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em; color: var(--gold); text-decoration: none; border: 0.5px solid var(--border); padding: 6px 10px; border-radius: 2px; }
.enc-mentions a:hover { border-color: var(--gold); }
.enc-mentions .secs { color: var(--muted); font-family: var(--font-text); letter-spacing: 0; text-transform: none; margin-left: 4px; }
.enc-item.has-img a { grid-template-columns: 56px minmax(0,1fr) auto; column-gap: 14px; }
.enc-item.has-img .enc-snip { grid-column: 2 / -1; }
.enc-thumb { grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--surface); }
@media (max-width: 600px) {
.enc-item a { grid-template-columns: minmax(0, 1fr); }
.enc-item.has-img a { grid-template-columns: 56px minmax(0, 1fr); }
.enc-item.has-img .enc-type { grid-column: 2; }
.enc-type { white-space: normal; padding-top: 0; line-height: 1.4; }
}
.srch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 2px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.srch-row label { display: inline-flex; align-items: center; gap: 6px; }
.srch-row select { font-family: var(--font-ui); font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 6px 8px; max-width: 220px; }
.srch-check input { width: 16px; height: 16px; accent-color: var(--gold); }
@media (max-width: 600px) {
.srch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srch-row label { flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.srch-row label:first-child, .srch-row .srch-check { grid-column: 1 / -1; }
.srch-row select { max-width: 100%; width: 100%; padding: 8px; }
.srch-row .srch-check { flex-direction: row; align-items: center; gap: 10px; }
}
.enc-count-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.enc-random, .enc-random-link { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--border); border-radius: 2px; padding: 5px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.enc-random:hover, .enc-random-link:hover { border-color: var(--gold); }
.enc-seealso { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.enc-seealso a { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 2px; text-decoration: none; color: var(--text); }
.enc-seealso a:hover { border-color: var(--gold); }
.enc-seealso img, .enc-seealso .ph { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 2px; background: var(--surface); }
.ph { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.ph::before { content: ''; width: 55%; height: 55%; background: rgba(var(--gold-rgb), 0.6); -webkit-mask: var(--ph-i) center / contain no-repeat; mask: var(--ph-i) center / contain no-repeat; }
.ph, .ph-term, .ph-factor { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 3v5h5M9 12h8M9 16h8M9 20h5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.ph-person { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3.5 22a8.5 8.5 0 0 1 17 0z'/%3E%3C/svg%3E"); }
.ph-conflict { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l11 11M21 3L10 14M6 16l-3 3 2 2 3-3M18 16l3 3-2 2-3-3M5 13l6 6M19 13l-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ph-place { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E"); }
.ph-event { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z'/%3E%3C/svg%3E"); }
.ph-polity { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 8l4.8 4.2L12 4l4.7 8.2L21.5 8 19 19H5zM5 20.5h14V22H5z'/%3E%3C/svg%3E"); }
.ph-group { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.4'/%3E%3Ccircle cx='16.5' cy='8.5' r='3'/%3E%3Cpath d='M1.5 20a6.5 6.5 0 0 1 13 0zM13.5 20a5.5 5.5 0 0 1 9 -4.2V20z'/%3E%3C/svg%3E"); }
.ph-institution { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 5v2H2V7zM4 10.5h3V18H4zM10.5 10.5h3V18h-3zM17 10.5h3V18h-3zM2 19.5h20V22H2z'/%3E%3C/svg%3E"); }
.ph-idea { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 22h6v-1.6H9zM12 2a7 7 0 0 0-4 12.7V19h8v-4.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.ph-work { --ph-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h7a3 3 0 0 1 2 1 3 3 0 0 1 2-1h7v15h-7a2 2 0 0 0-2 2 2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); }
.enc-seealso .nm { display: block; font-size: 17px; line-height: 1.25; }
.enc-seealso .tp { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.enc-article-foot { margin: 0; }
@media (max-width: 720px) {
.enc-body { grid-template-columns: 1fr; }
.enc-fig { width: 100%; max-width: 360px; order: -1; }
.enc-desc { font-size: 18px; }
.enc-controls { position: static; }
.enc-sort { margin-left: 0; }
}
.st-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.st-wrap { max-width: 980px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.st-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 24px; }
.st-lede { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 640px; font-style: italic; }
.st-stats { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.st-filters { position: sticky; top: 64px; z-index: 5; background: var(--bg); padding: 12px 0; border-bottom: 0.5px solid var(--border); display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) 120px; gap: 8px; align-items: end; }
.st-filters label { display: grid; gap: 4px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.st-filters input, .st-filters select { width: 100%; font-family: var(--font-ui); font-size: 15px; padding: 8px 10px; color: var(--text); background: var(--surface); border: 0.5px solid var(--border); border-radius: 2px; min-height: 40px; }
.st-filters input:focus, .st-filters select:focus { outline: 1px solid var(--gold); }
.st-count-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 4px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.st-random { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--border); border-radius: 2px; padding: 5px 12px; cursor: pointer; text-decoration: none; letter-spacing: 0; text-transform: none; }
.st-random:hover { border-color: var(--gold); }
.st-list { list-style: none; padding: 0; }
.st-list:empty { min-height: 100vh; }
.st-item a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 0.5px solid var(--border); color: var(--text); text-decoration: none; }
.st-item a:hover .st-name { color: var(--gold); }
.st-name { font-size: 18px; font-weight: 600; min-width: 0; }
.st-yrs { font-family: var(--font-ui); font-size: 13px; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.st-sub { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.st-sub b { color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.st-more { display: block; margin: 18px auto 0; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--border); border-radius: 2px; padding: 8px 18px; min-height: 40px; cursor: pointer; }
.st-more:hover { border-color: var(--gold); }
.st-empty { padding: 40px 0; color: var(--muted); font-size: 17px; }
.st-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.st-kicker { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.st-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 5vw, 44px); line-height: 1.15; color: var(--text); text-wrap: balance; margin: 4px 0; }
.st-meta { font-size: 17px; color: var(--muted); }
.st-teaser { font-size: 21px; line-height: 1.55; color: var(--text); font-style: italic; max-width: 62ch; }
.st-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
.st-text h2 { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 18px 0 6px; }
.st-text h2:first-child { margin-top: 0; }
.st-text p { font-size: 19px; line-height: 1.7; color: var(--text); max-width: 65ch; }
.st-pending { font-style: italic; color: var(--muted); font-size: 17px; }
.st-side { display: grid; gap: 16px; }
.st-fig { border: 0.5px solid var(--border); background: var(--surface); padding: 8px; margin: 0; }
.st-fig img { display: block; width: 100%; height: auto; }
.st-fig figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.st-fig figcaption a { color: var(--muted); }
.st-emblem { border: 0.5px solid var(--border); background: radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb), 0.10), transparent 65%), var(--surface); padding: 18px 16px 14px; text-align: center; }
.st-emblem svg { width: 46%; max-width: 130px; height: auto; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; display: block; margin: 0 auto 8px; }
.st-emblem-type { font-family: var(--font-display); font-size: 18px; color: var(--gold-light); text-transform: capitalize; margin: 0; }
.st-emblem-region { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 12px; }
.st-span { position: relative; height: 6px; background: rgba(var(--gold-rgb), 0.12); border-radius: 3px; }
.st-span-bar { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6); }
.st-span-axis { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 10px; color: var(--muted); margin-top: 4px; }
.st-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-family: var(--font-ui); font-size: 14px; border: 0.5px solid var(--border); background: var(--surface); padding: 14px 16px; margin: 0; }
.st-facts dt { color: var(--muted); font-weight: 600; }
.st-facts dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.st-sec-title { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.st-lineage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-lineage a, .st-lineage .here { font-family: var(--font-ui); font-size: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 2px; color: var(--gold); text-decoration: none; }
.st-lineage a:hover { border-color: var(--gold); }
.st-lineage .here { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.st-lineage .arr { color: var(--muted); }
.st-lineage .col { display: grid; gap: 6px; }
.st-ties { list-style: none; padding: 0; display: grid; gap: 0; }
.st-ties li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 17px; }
.st-ties a { color: var(--gold); text-decoration: none; }
.st-ties .dt { font-family: var(--font-ui); font-size: 13px; color: var(--muted); white-space: nowrap; }
.st-mapwrap .cx-map { min-height: 0; }
.st-maplink { display: inline-block; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; }
.st-conf { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
.st-filters { grid-template-columns: 1fr 1fr; position: static; }
.st-filters .st-q { grid-column: 1 / -1; }
.st-body { grid-template-columns: 1fr; }
.st-side { order: -1; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
.st-text p { font-size: 18px; }
}
@media (max-width: 600px) {
.st-random, .st-maplink { display: inline-flex; align-items: center; min-height: 44px; }
.st-ties a { display: inline-block; padding: 10px 0; }
.st-lineage a, .st-lineage .here { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 520px) {
.st-side { grid-template-columns: 1fr; }
.st-fig, .st-emblem { max-width: 280px; }
}
.ref-crumbs { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.ref-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; }
.ref-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--muted); opacity: .6; }
.ref-crumbs a { color: var(--muted); text-decoration: none; }
.ref-crumbs a:hover { color: var(--gold); }
.ref-crumbs [aria-current] { color: var(--text); }
.ref-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 22px; }
.ref-lede { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 680px; font-style: italic; }
.ref-sec-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--gold); margin: 34px 0 12px; }
.ref-letters { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; margin: 0 0 18px; padding: 10px 0; border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); }
.ref-letters a, .ref-letters span { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid transparent; border-radius: 2px; color: var(--gold); text-decoration: none; }
.ref-letters span { color: var(--muted); opacity: .5; }
.ref-letters a:hover { border-color: var(--gold); }
.ref-letters a[aria-current] { background: var(--gold); color: var(--bg); }
.ref-centuries, .ref-regions { font-size: 13px; font-weight: 600; }
@media (min-width: 701px) {
.ref-centuries { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ref-centuries a, .ref-centuries span { padding: 0 4px; }
}
.ref-group h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--gold); margin: 30px 0 4px; }
.ref-group h2 .n { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ref-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0 0; font-family: var(--font-ui); }
.ref-pager a, .ref-pager span, .ref-pager button { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 2px; color: var(--gold); background: none; text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ref-pager a:hover, .ref-pager button:hover { border-color: var(--gold); }
.ref-pager [aria-current] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.ref-pager .gap { border-color: transparent; color: var(--muted); cursor: default; }
.ref-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ref-prevnext a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 2px; text-decoration: none; color: var(--text); min-width: 0; }
.ref-prevnext a:hover { border-color: var(--gold); }
.ref-prevnext .next { grid-column: 2; text-align: right; }
.ref-prevnext .lbl { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ref-prevnext .nm { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-cite { border: 0.5px solid var(--border); background: var(--surface); padding: 12px 16px; }
.ref-cite summary { cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.ref-cite dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; margin: 14px 0 2px; }
.ref-cite dt { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); padding-top: 4px; }
.ref-cite dd { margin: 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.ref-copy { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--border); border-radius: 2px; padding: 2px 8px; margin-left: 6px; cursor: pointer; }
.ref-copy:hover { border-color: var(--gold); }
.ref-updated { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 0; }
.ref-az { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ref-az a { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 2px; text-decoration: none; background: var(--surface); }
.ref-az a:hover { border-color: var(--gold); }
.ref-az b { font-family: var(--font-display); font-size: 26px; color: var(--gold); font-weight: 600; line-height: 1; }
.ref-az span { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.ref-cent-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.ref-cent-list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 0.5px solid var(--border); color: var(--text); text-decoration: none; font-size: 17px; }
.ref-cent-list a:hover { color: var(--gold); }
.ref-cent-list span { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.day-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.day-wrap { max-width: 860px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.day-wrap > .ref-crumbs { margin: 0; }
.day-events { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.day-events .tih-event-title { font-size: 21px; margin: 0; }
.day-cal-wrap { border-top: 0.5px solid var(--border); padding-top: 18px; }
.day-ppl-note { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 14px 0 26px; max-width: 70ch; }
.day-ppl .enc-seealso .tp { text-transform: none; letter-spacing: 0.02em; }
.day-cal-year { max-width: 1100px; margin: 34px auto 0; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.day-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.day-cal-month h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--gold); margin: 0 0 8px; }
.day-cal { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day-cal a, .day-cal span { display: flex; align-items: center; justify-content: center; min-height: 32px; font-family: var(--font-ui); font-size: 13px; border: 1px solid var(--border); border-radius: 2px; color: var(--text); text-decoration: none; }
.day-cal a:hover { border-color: var(--gold); color: var(--gold); }
.day-cal span[aria-current], .day-cal a.is-today { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 600; }
#tih-grid { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto 40px; gap: 14px; }
#tih-grid .tih-event-year { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
#tih-pinned-wrap { max-width: 820px; margin: 0 auto 14px; }
.tih-day-link { text-align: center; margin: 18px 0 0; }
.map { display: block; width: 100%; height: auto; }
.map-land { fill: rgba(var(--gold-rgb), 0.13); stroke: rgba(var(--gold-rgb), 0.5); stroke-width: 0.8px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-dot-s, .map-dot-p, .map-dot-n, .map-dot-me, .map-dot-halo, .map-dot-ap, .map-dot-bg { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-cty .map-land { fill: rgba(var(--gold-rgb), 0.06); stroke: rgba(var(--gold-rgb), 0.32); }
.map-land-hi { fill: rgba(var(--gold-rgb), 0.34); stroke: var(--gold-light); stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px rgba(var(--gold-rgb), 0.55)); animation: map-light 1.4s ease-out both; }
@keyframes map-light { from { fill: rgba(var(--gold-rgb), 0.06); filter: drop-shadow(0 0 0 rgba(var(--gold-rgb), 0)); } 60% { filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.8)); } }
.map-dot-bg { stroke: var(--bg); stroke-opacity: 0.8; stroke-width: 8px; }
.map-dot-s { stroke: var(--text); stroke-opacity: 0.55; stroke-width: 3.2px; }
.map-dot-p { stroke: var(--gold); stroke-width: 6px; }
.map-dot-n { stroke: var(--gold); stroke-opacity: 0.75; stroke-width: 4.5px; }
.map-tie { fill: none; stroke: var(--gold); stroke-opacity: 0.35; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.map-dot-halo { stroke: var(--gold); stroke-opacity: 0.22; stroke-width: 24px; }
.map-dot-me { stroke: var(--gold-light); stroke-width: 10px; }
.map-dot-ap { stroke: var(--gold-light); stroke-opacity: 0.5; stroke-width: 10px; }
.map-bub circle { fill: rgba(var(--gold-rgb), 0.28); stroke: var(--gold); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill 0.15s; }
.map-bub a:hover circle, .map-bub a:focus circle { fill: rgba(var(--gold-rgb), 0.75); }
.map-key { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map-key .k-p { background: var(--gold); }
.map-key .k-s { background: var(--text); opacity: 0.55; width: 6px; height: 6px; }
.cty-map, .cen-map, .cty-bubbles { margin: 0 0 8px; border: 0.5px solid var(--border); border-radius: 2px; padding: 10px; background: radial-gradient(ellipse at 50% 45%, rgba(var(--gold-rgb), 0.07), transparent 70%), var(--surface); }
.cty-map figcaption, .cen-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 8px; }
.cty-map figcaption a, .cen-map figcaption a { margin-left: auto; color: var(--gold); font-weight: 600; text-decoration: none; }
.st-locator { margin: 0; border: 0.5px solid var(--border); background: var(--surface); padding: 6px; }
.st-locator > a { display: block; }
.st-locator > a:hover .map { opacity: 0.9; }
.st-locator figcaption { font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--muted); margin: 6px 2px 2px; }
.st-locator figcaption a { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pcard { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); text-decoration: none; color: var(--text); transition: border-color 0.15s, transform 0.15s; }
.pcard:hover { border-color: var(--gold); transform: translateY(-1px); }
.pcard-logo { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; }
.pcard-mono { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.pcard-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcard-n { font-family: var(--font-display); font-size: 16px; color: var(--gold-light); line-height: 1.25; }
.pcard-y, .pcard-s { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.pcard-s b { color: var(--gold); font-weight: 600; }
.cty-page, .cen-page, .yr-page, .pp-page, .pass-page, .qz-page, .atl-page, .write-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.cty-wrap, .cen-wrap, .yr-wrap, .pp-wrap, .pass-wrap, .qz-wrap, .atl-wrap { margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.cty-wrap, .cen-wrap, .yr-wrap, .pp-wrap, .pass-wrap { max-width: 1040px; }
.cty-kicker { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0; }
.cty-head .research-title, .cen-head .research-title, .yr-head .research-title { margin: 2px 0 4px; }
.cty-note { font-size: 16px; color: var(--muted); margin: -4px 0 12px; }
.ref-sec-title .n { font-family: var(--font-ui); font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.cty-scale { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin: 0 0 2px; padding-left: calc(42% + 12px); }
.cty-cent { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 18px 0 4px; }
.cty-cent a { color: var(--gold); text-decoration: none; }
.cty-tl { list-style: none; padding: 0; margin: 0; }
.cty-tl li { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; border-bottom: 0.5px solid var(--border); }
.cty-tl a { display: flex; flex-direction: column; text-decoration: none; color: var(--text); min-width: 0; }
.cty-tl a:hover .cty-n { color: var(--gold); }
.cty-n { font-size: 17px; line-height: 1.3; }
.cty-y { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.cty-track { position: relative; height: 8px; background: rgba(var(--gold-rgb), 0.08); border-radius: 4px; }
.cty-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(var(--gold-rgb), 0.55); min-width: 3px; }
.cty-bar.is-prof { background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5); }
.cty-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cty-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-ui); font-size: 14px; color: var(--text); text-decoration: none; }
.cty-chips a:hover { border-color: var(--gold); color: var(--gold-light); }
.cty-chips span { color: var(--muted); font-size: 12px; }
.cty-chips .cty-all { color: var(--gold); font-weight: 600; border-color: transparent; }
.cen-states a { font-size: 16px; }
.cen-all summary { cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); margin: 10px 0; }
.cen-more { margin: 12px 0 0; }
.cen-days { list-style: none; padding: 0; margin: 0; }
.cen-days a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 0.5px solid var(--border); text-decoration: none; color: var(--text); }
.cen-days a:hover .nm { color: var(--gold); }
.cen-days .dt { font-family: var(--font-ui); font-size: 13px; color: var(--gold); font-weight: 600; }
.cen-days .nm { font-size: 17px; line-height: 1.4; }
.cen-hist { margin: 0 0 28px; padding-bottom: 4px; }
.cen-bars { list-style: none; padding: 0; margin: 0; display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--border); }
.cen-bars li { flex: 1 1 0; height: 100%; min-width: 0; }
.cen-bars a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; text-decoration: none; }
.cen-bar { display: block; background: rgba(var(--gold-rgb), 0.45); border-radius: 2px 2px 0 0; transition: background 0.15s; }
.cen-bars a:hover .cen-bar, .cen-bars a:focus .cen-bar { background: var(--gold); }
.cen-lbl { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; }
.cen-bars li:not(:nth-child(5n+1)) .cen-lbl { display: none; }
.cen-hist figcaption { font-family: var(--font-ui); font-size: 12px; color: var(--muted); text-align: center; margin-top: 26px; }
.cen-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cen-cards a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); text-decoration: none; color: var(--text); }
.cen-cards a:hover { border-color: var(--gold); }
.cen-c-t { font-family: var(--font-display); font-size: 18px; color: var(--gold-light); }
.cen-c-d { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cen-c-n { font-family: var(--font-ui); font-size: 13px; color: var(--text); }
.cen-c-p { font-size: 15px; color: var(--muted); font-style: italic; line-height: 1.4; }
.yr-events .tih-event-title a { color: inherit; text-decoration: none; }
.yr-events .tih-event-title a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.yr-events .tih-event-year a, .day-events .tih-event-year a { color: inherit; text-decoration: none; font-weight: 600; }
.yr-events .tih-event-year a:hover, .day-events .tih-event-year a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yr-map { margin-top: 26px; }
.cty-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(var(--gold-rgb), 0.4); }
.cty-kicker a:hover { border-bottom-color: var(--gold); }
.yr-near a { min-width: 52px; }
.yr-prof { list-style: none; padding: 0; margin: 0; }
.yr-prof li { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 9px 0; border-bottom: 0.5px solid var(--border); }
.yr-prof-n { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--gold-light); font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.yr-prof-n:hover span { color: var(--gold); }
.yr-prof-n .pcard-logo { width: 28px; height: 28px; flex: 0 0 28px; }
.yr-prof-n .pcard-mono { font-size: 14px; }
.yr-prof-t { font-size: 17px; line-height: 1.45; color: var(--text); }
@media (max-width: 600px) {
.yr-prof li { grid-template-columns: minmax(0, 1fr); }
}
.yr-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 18px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.yr-jump label { font-weight: 600; color: var(--text); }
.yr-jump input, .yr-jump select { font-family: var(--font-ui); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 8px 10px; }
.yr-jump input { width: 7.5em; }
.yr-jump button { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: 0; border-radius: 2px; padding: 10px 16px; cursor: pointer; }
.yr-jump button:hover { background: var(--gold-light); }
.yr-jump-note { flex-basis: 100%; font-size: 13px; }
.yr-page .ref-group { scroll-margin-top: 90px; }
.ref-group h2 a { color: inherit; text-decoration: none; }
.ref-group h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.yr-page .ref-prevnext, .pp-page .ref-prevnext { margin-top: 34px; }
.pp-chart { margin: 0; }
.pp-tl a { flex-direction: row; align-items: center; gap: 10px; }
.pp-av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; object-position: center 25%; background: rgba(var(--gold-rgb), 0.08); }
.pp-nm { display: flex; flex-direction: column; min-width: 0; }
.pp-tl .cty-n { font-size: 16px; }
.pp-tl .cty-bar.pp-life { background: rgba(var(--gold-rgb), 0.8); }
.pp-tl .cty-bar.pp-dim { background: rgba(var(--gold-rgb), 0.3); }
.pp-chart figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 10px; }
.pp-chart figcaption a { color: var(--gold); font-weight: 600; text-decoration: none; }
.pp-status { font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin: 10px 0 12px; }
.shelf-passport { display: block; margin-top: 8px; padding: 9px 12px 4px; border-top: 0.5px solid var(--border); font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; }
.shelf-passport:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-letters { position: sticky; top: 60px; z-index: 5; background: var(--bg); }
.gl-letter, .gl-list > div { scroll-margin-top: 130px; }
.gl-letter h2 { font-family: var(--font-display); font-size: 30px; color: var(--gold); margin: 28px 0 6px; border-bottom: 0.5px solid var(--border); padding-bottom: 6px; }
.gl-list { margin: 0; }
.gl-list > div { padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.gl-list > div:target { background: rgba(var(--gold-rgb), 0.08); }
.gl-list dt { font-family: var(--font-display); font-size: 18px; }
.gl-list dt a { color: var(--gold-light); text-decoration: none; }
.gl-list dt a:hover { color: var(--gold); }
.gl-aka { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.gl-list dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--text); max-width: 70ch; }
.st-facts a, .enc-meta a:not(.enc-link), .enc-kicker a, .qz-how a, .atl-about a, .cty-note a { color: var(--gold); text-decoration: none; }
.st-facts a:hover, .enc-meta a:not(.enc-link):hover, .enc-kicker a:hover, .qz-how a:hover, .atl-about a:hover, .cty-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.paths-wrap { max-width: 1100px; margin: 0 auto; }
.paths-wrap > .ref-crumbs { max-width: 860px; margin-left: auto; margin-right: auto; }
.path-tagline { font-family: var(--font-text); font-size: 20px; font-style: italic; color: var(--muted); margin: 0 0 10px; }
.atl-viewtog { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.atl-viewtog button { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 7px 14px; min-height: 36px; cursor: pointer; }
.atl-viewtog button + button { border-left: 1px solid var(--border); }
.atl-viewtog button[aria-pressed="true"] { color: var(--gold); background: rgba(var(--gold-rgb), 0.1); }
.home-map canvas:not([hidden]) { display: block; width: 100%; }
@keyframes atl-pulse { 50% { stroke-opacity: 0.25; } }
.l-p, .l-s { font-family: var(--font-ui); paint-order: stroke; stroke: var(--bg); stroke-width: 0.3em; stroke-linejoin: round; pointer-events: none; }
.l-p { fill: var(--gold-light); font-weight: 600; }
.l-s { fill: var(--text); }
.atl-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; }
.atl-zoom button { width: 36px; height: 36px; font-size: 18px; line-height: 1; color: var(--gold); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; cursor: pointer; }
.atl-zoom button:hover { border-color: var(--gold); }
.atl-tip { position: absolute; z-index: 10; max-width: 260px; background: var(--surface); border: 1px solid var(--gold); border-radius: 3px; padding: 10px 12px; box-shadow: 0 8px 24px var(--shadow); font-family: var(--font-ui); }
.atl-tip p { margin: 0; }
.atl-tip-n { font-family: var(--font-display); font-size: 16px; color: var(--gold-light); line-height: 1.25; }
.atl-tip-y { font-size: 13px; color: var(--text); margin-top: 2px !important; }
.atl-tip-k, .atl-tip-a { font-size: 12px; color: var(--muted); margin-top: 2px !important; }
.atl-tip-k b { color: var(--gold); }
.atl-cents { margin: 12px 0 18px; }
.hub-grid { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; max-width: 1100px; width: 100%; text-align: left; }
.hub-group { max-width: 1100px; margin: 0 auto 34px; text-align: left; }
.hub-group-t { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); margin: 0 0 12px; }
.hub-group .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
.hub-group .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.hub-group .hub-grid { grid-template-columns: minmax(0, 1fr); }
}
.home-map { margin: 0; }
.home-map > a { display: block; border: 0.5px solid var(--border); border-radius: 3px; background: radial-gradient(ellipse at 50% 45%, rgba(var(--gold-rgb), 0.09), transparent 70%), var(--surface); transition: border-color 0.2s; }
.home-map > a:hover { border-color: var(--gold); }
.home-map figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 8px; }
.home-map figcaption b { color: var(--gold-light); }
.home-map figcaption a { color: var(--gold); font-weight: 600; text-decoration: none; }
.doors { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.door { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; height: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.door:hover { border-color: var(--gold); transform: translateY(-2px); }
.cen-bars-home { height: 130px; }
.nav-group-menu-wide { min-width: 460px; padding: 8px; }
.nav-group-wrap.open .nav-group-menu-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-group-menu-wide a { white-space: normal; padding: 9px 12px; border-radius: 2px; }
.nav-group-menu-wide a b { display: block; font-weight: 600; }
.nav-group-menu-wide a span { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--muted); }
@media (max-width: 980px) {
.doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.ref-centuries { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ref-centuries a, .ref-centuries span { flex: 0 0 auto; }
.atl-zoom button { width: 40px; height: 40px; }
.cty-tl li { grid-template-columns: 1fr; gap: 4px; }
.cty-scale { padding-left: 0; }
.cen-days a { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 520px) {
.doors { grid-template-columns: 1fr; }
.cen-bars { height: 110px; }
}
@keyframes ct-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.od-set { margin: 0 0 26px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 80px; }
.od-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0; }
.od-title { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); color: var(--gold-light); margin: 4px 0 10px; }
.od-desc { font-size: 18px; line-height: 1.65; color: var(--text); max-width: 70ch; margin: 0 0 16px; }
.od-desc a, .od-notes a, .od-explore a { color: var(--gold); }
.od-facts { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.od-facts b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--gold-light); }
.od-dl { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.od-dl-btn { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid var(--gold); border-radius: 2px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; transition: background 0.15s, color 0.15s; }
.od-dl-btn:hover { background: var(--gold); color: var(--bg); }
.od-dl-btn span { font-size: 12px; font-weight: 400; opacity: 0.8; }
.od-table-wrap { overflow-x: auto; margin: 0 0 14px; }
.dataset-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.dataset-table caption { caption-side: top; text-align: left; padding: 0 0 8px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dataset-table th { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.dataset-table td { padding: 8px 10px; border-bottom: 0.5px solid var(--border); color: var(--text); vertical-align: middle; }
.dataset-table td a { color: var(--gold-light); text-decoration: none; }
.dataset-table td a:hover { text-decoration: underline; }
.dataset-table tr:last-child td { border-bottom: 0; }
.od-spark { display: block; width: 120px; height: 30px; }
.od-spark polyline { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.od-cols summary { cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.od-cols dl { margin: 10px 0 0; }
.od-cols dt { margin-top: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.od-cols dd { margin: 2px 0 0; font-size: 16px; line-height: 1.6; }
.od-explore { margin: 14px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
@media (max-width: 560px) {
.od-set { padding: 18px; }
}
.footer-fix { margin: 0 auto 22px; padding: 0 0 18px; border-bottom: 0.5px solid var(--border); font-family: var(--font-ui); font-size: 13px; color: var(--muted); text-align: center; }
.footer-fix a { margin-left: 4px; color: var(--gold); font-weight: 600; text-decoration: none; }
.footer-fix a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-toggles { position: relative; }
.shelf-menu { position: absolute; top: calc(100% + 14px); right: 0; width: 330px; max-width: calc(100vw - 24px); max-height: min(70vh, 480px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); padding: 10px; z-index: 1002; }
.shelf-menu[hidden] { display: none; }
.shelf-save { display: block; width: 100%; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); background: rgba(var(--gold-rgb), 0.07); border: 1px dashed rgba(var(--gold-rgb), 0.5); border-radius: var(--radius); padding: 9px 10px; min-height: 40px; cursor: pointer; margin-bottom: 4px; }
.shelf-save:hover { border-color: var(--gold); }
.shelf-save.is-saved { border-style: solid; background: rgba(var(--gold-rgb), 0.12); }
.shelf-head { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 4px; }
.shelf-menu a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: var(--radius); text-decoration: none; }
.shelf-menu a:hover { background: rgba(var(--gold-rgb), 0.06); }
.shelf-n { font-family: var(--font-text); font-size: 15px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-t { font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; }
.shelf-empty { font-family: var(--font-text); font-style: italic; font-size: 14px; color: var(--muted); margin: 4px; }
.read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.7); z-index: 1200; pointer-events: none; }
.footer-quote-btn { background: none; border: 0; color: var(--gold); font-size: 14px; cursor: pointer; padding: 2px 10px; min-height: 32px; opacity: 0.7; }
.footer-quote-btn:hover, .footer-quote-btn:focus-visible { opacity: 1; }
.footer-quote { font-family: var(--font-text); font-style: italic; font-size: 15px; color: var(--muted); text-align: center; margin: 0 auto; max-width: 680px; padding: 0 16px 18px; }
.footer-quote-by { font-style: normal; font-size: 13px; color: var(--gold); white-space: nowrap; }
.nav-group-menu .nav-surprise b { color: var(--gold); }
@media (max-width: 600px) {
.shelf-menu { position: fixed; top: 66px; left: 12px; right: 12px; width: auto; }
}
.ref-lede a { color: var(--gold); text-decoration-color: rgba(var(--gold-rgb), 0.45); }
.ref-lede a:hover { color: var(--gold-light); }
.ref-lede a b { color: var(--gold-light); }
@keyframes fp-in { from { opacity: 0; transform: translateX(26px); } }
.path-types { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.path-types a { color: var(--gold); text-decoration: none; font-weight: 600; }
.path-types a:hover { color: var(--gold-light); text-decoration: underline; }
.sp-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.sp-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.sp-head { margin: 10px 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.sp-portrait { display: block; width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(var(--gold-rgb), 0.55); background: var(--surface); }
.sp-portrait img, .sp-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sp-card.has-pic { position: relative; }
.sp-card.has-pic .sp-card-k, .sp-card.has-pic .sp-card-t { padding-right: 64px; }
.sp-card-pic { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), 0.45); background: var(--bg); }
.sp-title { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 42px); line-height: 1.15; color: var(--gold-light); margin: 6px 0 8px; text-wrap: balance; }
.sp-by { font-family: var(--font-text); font-size: 19px; font-style: italic; color: var(--muted); margin: 0; }
.sp-sec { margin: 0 0 26px; }
.sp-sec h2 { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.sp-sec p { font-family: var(--font-text); font-size: 19px; line-height: 1.7; color: var(--text); margin: 0; max-width: 68ch; }
.sp-quote { margin: 4px 0 10px; padding: 18px 24px; border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.09), transparent 75%); border-radius: 0 var(--radius) var(--radius) 0; }
.sp-quote p { font-family: var(--font-text); font-size: clamp(21px, 2.6vw, 26px); font-style: italic; line-height: 1.5; color: var(--gold-light); }
.sp-quote p::before { content: '\201C'; }
.sp-quote p::after { content: '\201D'; }
.sp-para { padding: 14px 20px; border: 1px dashed rgba(var(--gold-rgb), 0.45); border-radius: var(--radius); font-style: italic; }
.sp-sec p.sp-source { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.sp-full { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; }
.sp-full-link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px; border: 1px solid rgba(var(--gold-rgb), 0.55); border-radius: 22px; background: rgba(var(--gold-rgb), 0.08); font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold-light); text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.sp-full-link:hover, .sp-full-link:focus-visible { background: rgba(var(--gold-rgb), 0.18); border-color: var(--gold); }
.sp-full-src { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.sp-full:empty { display: none; }
.sp-share { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 22px; background: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.sp-share:hover, .sp-share:focus-visible { color: var(--gold); border-color: var(--gold); }
.sp-share::before { content: '\2197'; font-size: 12px; }
.enc-disc { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.disc-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.disc-card:hover, .disc-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.disc-img { display: block; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.disc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.disc-b { display: grid; gap: 3px; padding: 10px 12px 12px; }
.disc-t { font-family: var(--font-display); font-size: 16px; line-height: 1.2; color: var(--gold-light); overflow-wrap: anywhere; }
.disc-k { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
.enc-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ref-az + .enc-article-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.sp-led { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.sp-sec .sp-led-k { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.sp-led .tih-tags { margin-top: 0; }
.sp-ft-body p, .sp-sec .sp-ft-body p { font-family: var(--font-text); font-size: 18px; line-height: 1.75; color: var(--text); margin: 0 0 1em; max-width: 68ch; }
.sp-ft-body p:last-child { margin-bottom: 0; }
.sp-ft-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.sp-ft-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--font-ui); }
.sp-ft-fold > summary::-webkit-details-marker { display: none; }
.sp-ft-open { font-size: 15px; font-weight: 600; color: var(--gold-light); }
.sp-ft-open::before { content: '\25B8'; display: inline-block; margin-right: 8px; color: var(--gold); transition: transform 0.2s; }
.sp-ft-fold[open] .sp-ft-open::before { transform: rotate(90deg); }
.sp-ft-meta { font-size: 13px; color: var(--muted); }
.sp-ft-fold > summary:hover .sp-ft-open, .sp-ft-fold > summary:focus-visible .sp-ft-open { text-decoration: underline; text-underline-offset: 3px; }
.sp-ft-fold[open] > summary { border-bottom: 1px solid var(--border); }
.sp-ft-fold .sp-ft-body { padding: 20px 22px 18px; }
.sp-sec p.sp-ft-credit { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 10px; }
.sp-ft-credit a { color: var(--gold); }
@media (max-width: 600px) {
.sp-ft-fold .sp-ft-body { padding: 16px 14px 12px; }
.sp-ft-body p, .sp-sec .sp-ft-body p { font-size: 17px; }
}
.sp-card-ft { color: var(--gold); }
.sp-era { margin: 0 0 34px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sp-card { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.sp-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.sp-card-k { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.sp-card-t { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--gold-light); }
.sp-card-q { font-family: var(--font-text); font-size: 15px; font-style: italic; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card-by { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.essay-page, .rs-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.essay-wrap { max-width: 780px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.essay-head { margin: 10px 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.essay-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.essay-kicker a { color: var(--gold); text-decoration: none; }
.essay-kicker a:hover, .essay-kicker a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.essay-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: 0.02em; color: var(--gold-light); margin: 0 0 10px; text-wrap: balance; }
.essay-sub { font-family: var(--font-text); font-size: clamp(19px, 2.4vw, 23px); font-style: italic; line-height: 1.4; color: var(--muted); margin: 0; text-wrap: balance; }
.essay-head .listen-row, .essay-head .page-share-row { display: inline-block; margin: 16px 4px 0; vertical-align: middle; }
.essay-fig { margin: 0 0 30px; }
.essay-fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); }
.essay-cover img { width: min(100%, 520px); }
.essay-fig figcaption { max-width: 62ch; margin: 10px auto 0; font-family: var(--font-text); font-size: 16px; font-style: italic; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.essay-credit { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; font-style: normal; }
.essay-credit a { color: var(--gold); }
.essay-toc { margin: 0 0 36px; padding: 18px 22px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: var(--radius); }
.essay-toc-k { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.essay-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 34px; }
.essay-toc li { font-family: var(--font-text); font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0 0 4px; break-inside: avoid; }
.essay-toc a { color: var(--text); text-decoration: none; }
.essay-toc a:hover, .essay-toc a:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.essay-body h2, .essay-reading h2 { font-family: var(--font-display); font-size: clamp(21px, 2.7vw, 26px); line-height: 1.25; letter-spacing: 0.03em; color: var(--gold-light); margin: 46px 0 14px; padding-top: 20px; border-top: 1px solid var(--border); scroll-margin-top: 84px; text-wrap: balance; }
.essay-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.essay-body p { font-family: var(--font-text); font-size: 20px; line-height: 1.75; color: var(--text); margin: 0 0 1.05em; max-width: 68ch; }
.essay-body > h2:first-child + p::first-letter { float: left; font-family: var(--font-display); font-size: 3.4em; line-height: 0.86; color: var(--gold); padding: 6px 10px 0 0; }
.essay-body a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.essay-body a:hover, .essay-body a:focus-visible { color: var(--gold-light); text-decoration-color: currentColor; }
.essay-table-wrap { overflow-x: auto; margin: 8px 0 26px; }
.essay-table { width: 100%; min-width: 460px; border-collapse: collapse; font-family: var(--font-ui); font-size: 15px; }
.essay-table caption { caption-side: top; text-align: left; padding-bottom: 8px; font-family: var(--font-text); font-size: 16px; font-style: italic; color: var(--muted); }
.essay-table th, .essay-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.essay-table th:first-child { text-align: left; }
.essay-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); border-bottom-color: rgba(var(--gold-rgb), 0.5); }
.essay-table tbody th { font-weight: 600; }
.essay-reading { margin: 0; }
.essay-refs { list-style: none; margin: 0; padding: 0; }
.essay-refs li { font-family: var(--font-text); font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 9px; padding-left: 1.6em; text-indent: -1.6em; }
.essay-profs { margin: 44px 0 10px; }
.cm-by { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 0; }
.cm-note { margin: 0 0 30px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: var(--radius); }
.cm-note p { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 1.55; color: var(--muted); }
.cm-note a { color: var(--gold); }
.cm-body h3 { font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.3; letter-spacing: 0.02em; color: var(--gold-light); margin: 1.7em 0 0.55em; }
.cm-body p.cm-src { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); margin: -0.6em 0 1.3em; }
.essay-view .ref-cite { margin-top: 30px; }
.essay-view .ref-prevnext { margin-top: 30px; }
@media (max-width: 600px) {
.essay-toc ol { columns: 1; }
.essay-body p { font-size: 18.5px; line-height: 1.7; }
.essay-body > h2:first-child + p::first-letter { font-size: 3em; }
}
.rs-grid { list-style: none; margin: 8px 0 44px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.rs-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.rs-card:hover, .rs-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.rs-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--border); }
.rs-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 22px 20px; }
.rs-num, .rs-cta { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.rs-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: 0.03em; color: var(--gold-light); }
.rs-sub { font-family: var(--font-text); font-size: 17px; font-style: italic; line-height: 1.4; color: var(--muted); }
.rs-desc { font-family: var(--font-text); font-size: 17px; line-height: 1.6; color: var(--text); }
.rs-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.rs-time { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.ws-page { position: relative; z-index: 1; padding: 96px 0 72px; min-height: 100vh; }
.ws-wrap { max-width: 860px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.ws-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 34px 26px; margin-top: 10px; }
.ws-head { border-bottom: 2px solid var(--gold); padding-bottom: 16px; margin-bottom: 22px; }
.ws-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.ws-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); line-height: 1.15; color: var(--gold-light); margin: 0 0 8px; text-wrap: balance; }
.ws-lede { font-family: var(--font-text); font-size: 18px; font-style: italic; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.ws-who { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin: 0 0 14px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.ws-who span { border-bottom: 1px solid var(--border); padding: 14px 0 3px; }
.ws-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0; }
.ws-print { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold-light); background: rgba(var(--gold-rgb), 0.08); border: 1px solid rgba(var(--gold-rgb), 0.55); border-radius: 22px; padding: 8px 15px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.ws-print:hover, .ws-print:focus-visible { background: rgba(var(--gold-rgb), 0.18); border-color: var(--gold); }
.ws-tools a { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.ws-task { margin: 0 0 26px; }
.ws-task h2, .ws-key h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--gold-light); margin: 0 0 6px; }
.ws-n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--bg); font-family: var(--font-ui); font-size: 13px; font-weight: 700; }
.ws-how { font-family: var(--font-text); font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.ws-order, .ws-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-order li, .ws-mb li { display: flex; align-items: center; gap: 12px; font-family: var(--font-text); font-size: 18px; color: var(--text); }
.ws-box { flex: none; width: 30px; height: 30px; border: 1.5px solid var(--gold); border-radius: 4px; }
.ws-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.ws-match ol { margin: 0; padding-left: 26px; display: grid; gap: 10px; align-content: start; }
.ws-ma li { font-family: var(--font-text); font-size: 18px; color: var(--text); padding: 3px 0; }
.ws-mb { list-style-position: outside; }
.ws-mb li { font-family: var(--font-ui); font-size: 15px; }
.ws-terms li b { font-family: var(--font-text); font-size: 18px; color: var(--text); }
.ws-lines { display: grid; gap: 0; margin: 2px 0 4px; }
.ws-lines span, .ws-line1 { display: block; height: 30px; border-bottom: 1px solid var(--border); }
.ws-qs { margin: 0; padding-left: 24px; display: grid; gap: 14px; }
.ws-qs li p { font-family: var(--font-text); font-size: 18px; line-height: 1.55; color: var(--text); margin: 0; }
.ws-mapfig { margin: 0 0 10px; }
.ws-map { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ws-pins circle { fill: var(--gold); stroke: var(--bg); stroke-width: 8; }
.ws-pins text { fill: var(--bg); font-family: var(--font-ui); font-weight: 700; text-anchor: middle; }
.ws-mapfig figcaption { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 4px; }
.ws-bank { font-family: var(--font-text); font-size: 17px; line-height: 1.6; color: var(--text); margin: 6px 0 8px; }
.ws-blanks { margin: 0; padding-left: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.ws-src { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin: 22px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.ws-key { margin-top: 22px; border: 1px dashed rgba(var(--gold-rgb), 0.55); border-radius: var(--radius); }
.ws-key > summary { cursor: pointer; padding: 12px 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.ws-key[open] > summary { border-bottom: 1px dashed rgba(var(--gold-rgb), 0.55); }
.ws-key-b { padding: 16px 20px 6px; }
.ws-key-t { font-family: var(--font-display); font-size: 20px; color: var(--gold-light); margin: 0 0 14px; }
.ws-key section { margin: 0 0 16px; }
.ws-key h2 { font-size: 17px; }
.ws-key-list { margin: 0; padding-left: 26px; display: grid; gap: 4px; font-family: var(--font-text); font-size: 17px; color: var(--text); }
.ws-key-list span { color: var(--muted); }
.ws-key-terms { margin: 0; display: grid; gap: 6px; font-family: var(--font-text); font-size: 16px; line-height: 1.5; }
.ws-key-terms dt { font-weight: 700; color: var(--text); }
.ws-key-terms dd { margin: 0 0 6px; color: var(--muted); }
.ws-key-note { font-family: var(--font-text); font-size: 16px; font-style: italic; color: var(--muted); margin: 0; }
.ws-guide-sec { margin: 0 0 30px; }
.ws-guide-sec p { font-family: var(--font-text); font-size: 18px; line-height: 1.65; color: var(--text); max-width: 70ch; }
.ws-guide-sec a { color: var(--gold); }
.ws-guide-h { font-family: var(--font-display); font-size: 19px; color: var(--gold-light); margin: 20px 0 10px; }
.ws-guide-h .n { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.ws-guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px 18px; }
.ws-guide-list a { display: block; padding: 7px 0; border-bottom: 1px solid var(--border); font-family: var(--font-text); font-size: 17px; color: var(--text); text-decoration: none; }
.ws-guide-list a:hover, .ws-guide-list a:focus-visible { color: var(--gold); }
.ws-ideas { margin: 0; display: grid; gap: 4px; }
.ws-ideas dt { font-family: var(--font-display); font-size: 17px; color: var(--gold-light); margin-top: 10px; }
.ws-ideas dd { margin: 0; font-family: var(--font-text); font-size: 17px; line-height: 1.6; color: var(--text); max-width: 70ch; }
@media (max-width: 600px) {
.ws-sheet { padding: 22px 16px 18px; }
.ws-match, .ws-blanks { grid-template-columns: 1fr; }
.ws-who { grid-template-columns: 1fr; gap: 4px; }
}
@media print {
@page { size: A4; margin: 13mm 13mm 14mm; }
.ws-page .ref-crumbs, .ws-tools, .ws-key > summary, .ws-key:not([open]), .essay-page .page-share-row, .essay-toc, .essay-profs, .essay-view .ref-cite { display: none !important; }
.ws-page, .essay-page { padding: 0 !important; }
.ws-sheet { border: 0 !important; padding: 0 !important; background: #fff !important; }
.ws-head { border-bottom-color: #6b4f12 !important; }
.ws-task { break-inside: avoid; margin-bottom: 18px; }
.ws-key { break-before: page; border: 0 !important; }
.ws-key-b { padding: 0 !important; }
.ws-n { background: #fff !important; color: #111 !important; border: 1.5px solid #111; }
.ws-box { border-color: #111 !important; }
.ws-lines span, .ws-line1, .ws-who span { border-bottom-color: #888 !important; }
.ws-map { border-color: #999 !important; }
.ws-mapfig .ws-map { max-height: 72mm; width: auto; max-width: 100%; margin: 0 auto; }
.ws-qs .ws-lines span:nth-child(n+3) { display: none; }
.ws-head { padding-bottom: 8px; margin-bottom: 14px; }
.ws-title { font-size: 20pt; }
.ws-task h2 { font-size: 14pt; margin-bottom: 3px; }
.ws-how, .ws-order li, .ws-mb li, .ws-ma li, .ws-terms li b, .ws-qs li p, .ws-bank { font-size: 11pt !important; line-height: 1.4; }
.ws-how { margin-bottom: 6px; }
.ws-order, .ws-terms, .ws-match ol { gap: 4px; }
.ws-box { width: 6.5mm; height: 6.5mm; }
.ws-qs { gap: 6px; }
.ws-lines span, .ws-line1 { height: 8mm; }
.ws-pins circle { fill: #fff !important; stroke: #111 !important; stroke-width: 10; }
.ws-pins text { fill: #111 !important; }
.essay-body p { font-size: 11.5pt; }
}
@keyframes gm-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes gm-bump { 40% { transform: scale(1.35); color: var(--gold); } }
@keyframes gm-fade { from { opacity: 0; } }
@keyframes gm-rise { from { opacity: 0; transform: translateY(24px) scale(0.92); } }
@keyframes gm-star { from { opacity: 0; transform: scale(0.2) rotate(-90deg); } }
.gm-nl { margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--border); max-width: 420px; }
.gm-nl-t { font-family: var(--font-text); font-size: 15px; color: var(--text); margin: 0 0 8px; }
.gm-nl-row { display: flex; gap: 6px; }
.gm-nl-row input { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; }
.gm-nl-row input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.gm-nl-row button { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--bg); background: var(--gold); border: 0; border-radius: 999px; padding: 0 16px; cursor: pointer; }
.gm-nl-row button:disabled { opacity: 0.6; cursor: default; }
.gm-nl-msg { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 6px 0 0; min-height: 1em; }
.gm-nl-ok { font-family: var(--font-text); font-size: 15px; color: var(--success); margin: 0; }
@keyframes gm-conf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)); } }
@keyframes gm-deal { from { opacity: 0; transform: translateY(26px) scale(0.7) rotate(-6deg); } }
@keyframes gm-pop { 45% { transform: scale(1.1); } }
@keyframes gm-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes gm-right { 40% { box-shadow: 0 0 0 4px rgba(90, 158, 111, 0.35); } }
@keyframes gm-yr { from { opacity: 0; transform: translateX(-12px); } }
@keyframes gm-line { from { transform: scaleY(0); } }
@keyframes gm-shimmer { to { background-position: -200% 0; } }
@keyframes gm-home { 40% { filter: brightness(1.35); } }
@keyframes gm-drop { from { transform: translateY(-22px); opacity: 0; } }
.to-top { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 900; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: border-color 0.2s, transform 0.2s; }
.to-top:hover { border-color: var(--gold); transform: translateY(-2px); }
.to-top[hidden] { display: none; }
.scribe-sec { margin: 40px 0 8px; scroll-margin-top: 84px; }
.scribe-lede { font-family: var(--font-text); font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
.scribe-more { font-family: var(--font-ui); font-size: 14px; margin: 14px 0 0; }
.scribe-more a { color: var(--gold); text-decoration: none; }
.scribe-more a:hover { text-decoration: underline; }
.scr-loading { font-family: var(--font-ui); font-size: 14px; color: var(--muted); padding: 24px; border: 1px dashed var(--border); border-radius: var(--border-radius-lg); text-align: center; }
.scr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.scr-scripts { display: flex; flex-wrap: wrap; gap: 8px; }
.scr-script { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; min-height: 36px; cursor: pointer; }
.scr-script[aria-checked="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.scr-about { font-family: var(--font-text); font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.scr-board { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: var(--border-radius-lg); padding: 18px 20px 14px; }
.scr-out { min-height: 92px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(34px, 6vw, 52px); line-height: 1.35; color: var(--text); overflow-wrap: anywhere; transition: opacity 0.2s; }
.scr-out.is-loading { opacity: 0.4; }
.scr-out.is-empty::before { content: 'Your words will appear here'; font-family: var(--font-text); font-style: italic; font-size: 20px; color: var(--muted); }
.scr-out.is-vertical .scr-text { writing-mode: vertical-rl; max-height: 320px; letter-spacing: 0.08em; }
.scr-roman { font-family: var(--font-text); font-style: italic; font-size: 19px; color: var(--gold-light); text-align: center; margin: 8px 0 0; overflow-wrap: anywhere; min-height: 1.4em; }
.scr-type { display: grid; gap: 6px; }
.scr-lab { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scr-in, .scr-py { width: 100%; box-sizing: border-box; font-family: var(--font-text); font-size: 18px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; resize: vertical; }
.scr-in:focus, .scr-py:focus { outline: none; border-color: var(--gold); }
.scr-han { display: grid; gap: 6px; margin-top: 6px; }
.scr-han[hidden], .scr-pic[hidden] { display: none; }
.scr-cands { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-cand { display: grid; justify-items: center; gap: 1px; min-width: 64px; max-width: 120px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; }
.scr-cand:hover, .scr-cand:focus-visible { border-color: var(--gold); }
.scr-cg { font-size: 28px; line-height: 1.2; font-family: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", PMingLiU, serif; }
.scr-cp { font-family: var(--font-ui); font-size: 13px; color: var(--gold); }
.scr-cm { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-align: center; line-height: 1.25; }
.scr-none { font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin: 0; }
.scr-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.scr-opt { font-family: var(--font-ui); font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.scr-opt input { accent-color: var(--gold); width: 16px; height: 16px; }
.scr-kb { border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; background: rgba(var(--gold-rgb), 0.03); }
.scr-groups { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding-right: 4px; scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
.scr-grp-t { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.scr-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-key { display: grid; justify-items: center; align-content: start; gap: 1px; width: 84px; min-height: 64px; padding: 6px 6px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, transform 0.1s; }
.scr-key:hover, .scr-key:focus-visible { border-color: var(--gold); }
.scr-key:active { transform: scale(0.96); }
.scr-key.is-word { border-color: rgba(var(--gold-rgb), 0.45); }
.scr-key.is-det { border-style: dashed; }
.scr-kg { font-size: 28px; line-height: 1.25; min-height: 1.25em; }
.scr[data-engine="hiero"] .scr-kg, .scr[data-engine="syllabic"] .scr-kg { line-height: 1.6; min-height: 1.6em; }
.scr-kv { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); line-height: 1.2; }
.scr-kh { font-family: var(--font-ui); font-size: 11px; color: var(--muted); line-height: 1.25; text-align: center; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scr-kb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.scr-act { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; min-height: 38px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.scr-act:hover { border-color: var(--gold); }
.scr-act[hidden] { display: none; }
.scr-act.scr-make, .scr-act.scr-primary { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.scr-act.scr-make:hover, .scr-act.scr-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
.scr-note { font-family: var(--font-text); font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.scr-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scr-try { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.scr-sample { font-family: var(--font-text); font-size: 16px; line-height: 1.35; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 5px 12px; cursor: pointer; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.scr-sample:hover { border-color: var(--gold); }
.scr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scr-pic { display: grid; gap: 10px; justify-items: start; }
.scr-pic-img { width: min(480px, 100%); height: auto; border-radius: var(--border-radius-lg); border: 1px solid var(--border); box-shadow: 0 10px 30px var(--shadow); }
.scr-pic-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.scr-pic-tip, .scr-status { font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin: 0; min-height: 1em; }
@media (max-width: 600px) {
.scr-key { width: 72px; min-height: 60px; }
.scr-kg { font-size: 24px; }
.scr-groups { max-height: 380px; }
.scr-board { padding: 14px 12px 10px; }
}
:root { --fm-a: #f0c24f; --fm-b: #6cc4d8; }
[data-theme="light"] { --fm-a: #c27a12; --fm-b: #12798f; }
:root[data-kids="1"] { --fm-a: #ffc247; --fm-b: #7fd6ff; }
:root[data-kids="1"][data-theme="light"] { --fm-a: #ea580c; --fm-b: #0e7490; }
.fm-sec { margin: 40px 0 8px; scroll-margin-top: 84px; }
.fm-lede { font-family: var(--font-text); font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
.fm-more { font-family: var(--font-ui); font-size: 14px; margin: 14px 0 0; }
.fm-more a { color: var(--gold); text-decoration: none; }
.fm-more a:hover { text-decoration: underline; }
.ty-sec { margin: 40px 0 8px; scroll-margin-top: 84px; }
.ty-lede { font-family: var(--font-text); font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
.ty { max-width: 760px; min-height: 220px; }
.ty-loading { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.ty-dots { display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.ty-dots li { width: 26px; height: 5px; border-radius: 3px; background: var(--border); }
.ty-dots li.now { background: var(--gold); }
.ty-dots li.ok { background: var(--success); }
.ty-dots li.no { background: var(--error); }
.ty-card { border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--surface); padding: 18px 20px 20px; }
.ty-count { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.ty-prompt { font-family: var(--font-display); font-size: 20px; color: var(--gold-light); margin: 0 0 6px; text-wrap: balance; }
.ty-q { font-family: var(--font-text); font-size: 19px; line-height: 1.5; color: var(--text); margin: 0 0 14px; }
.ty-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.ty-opts.ty-long { grid-template-columns: minmax(0, 1fr); }
.ty-opt { font-family: var(--font-text); font-size: 17px; line-height: 1.35; text-align: left; color: var(--text); background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; min-height: 46px; }
.ty-opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
.ty-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ty-opt:disabled { cursor: default; opacity: 0.75; }
.ty-opt.ty-right { border-color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); opacity: 1; }
.ty-opt.ty-wrong { border-color: var(--error); background: color-mix(in srgb, var(--error) 14%, transparent); opacity: 1; }
.ty-opt.ty-right::after { content: ' \2713'; color: var(--success); font-weight: 700; }
.ty-opt.ty-wrong::after { content: ' \2717'; color: var(--error); font-weight: 700; }
.ty-why { font-family: var(--font-text); font-size: 17px; line-height: 1.5; color: var(--text); margin: 14px 0 0; }
.ty-why:empty { display: none; }
.ty-why a, .ty-actions a { color: var(--gold); text-decoration: none; }
.ty-why a:hover, .ty-actions a:hover { text-decoration: underline; }
.ty-next, .ty-again { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); background: none; border: 1px solid var(--gold); border-radius: var(--radius); padding: 8px 16px; margin: 14px 0 0; cursor: pointer; }
.ty-next:hover, .ty-again:hover { background: rgba(var(--gold-rgb), 0.1); }
.ty-end { text-align: center; }
.ty-score { font-family: var(--font-display); font-size: 22px; color: var(--muted); margin: 4px 0 6px; }
.ty-score span { font-size: 44px; color: var(--gold-light); }
.ty-msg { font-family: var(--font-text); font-size: 19px; color: var(--text); margin: 0 0 6px; }
.ty-best { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 0; }
.ty-actions { font-family: var(--font-ui); font-size: 14px; display: flex; gap: 16px; justify-content: center; align-items: baseline; flex-wrap: wrap; margin: 6px 0 0; }
@media (max-width: 560px) {
.ty-opts { grid-template-columns: minmax(0, 1fr); }
.ty-card { padding: 14px 14px 16px; }
}
:root { --cat-0: #3987e5; --cat-1: #c98500; --cat-2: #d55181; --cat-3: #008300; }
[data-theme="light"] { --cat-0: #2a78d6; --cat-1: #eda100; --cat-2: #e87ba4; --cat-3: #008300; }
.fc-group { margin: 28px 0 8px; }
.fc-gnote { font-family: var(--font-text); font-size: 17px; color: var(--muted); margin: -4px 0 12px; }
.fc-decks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fc-deck { display: flex; gap: 12px; align-items: center; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.fc-deck:hover { border-color: var(--gold); }
.fc-deck:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fc-deck-img { flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.fc-deck-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.fc-deck-img img[src*="/logos/"] { object-fit: contain; padding: 3px; }
.fc-deck-mono { font-family: var(--font-display); font-size: 22px; color: var(--gold); border: 1px solid var(--border); }
.fc-deck-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-deck-t { font-family: var(--font-display); font-size: 16px; line-height: 1.25; color: var(--gold-light); }
.fc-deck-n, .fc-deck-s { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.fc-deck-s { color: var(--success); font-weight: 600; }
.fc-deck-s:empty { display: none; }
.fm-loading { font-family: var(--font-ui); font-size: 14px; color: var(--muted); padding: 24px; border: 1px dashed var(--border); border-radius: var(--border-radius-lg); text-align: center; }
.fm { display: grid; gap: 12px; }
.fm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fm-when { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-family: var(--font-ui); font-size: 15px; color: var(--muted); }
.fm-cent { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.03em; color: var(--text); }
.fm-play { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--bg); background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 7px 18px 7px 14px; min-height: 40px; cursor: pointer; }
.fm-play:hover { background: var(--gold-light); border-color: var(--gold-light); }
.fm-play-i { width: 12px; height: 12px; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.fm-play.is-on .fm-play-i { clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }
.fm-map { position: relative; aspect-ratio: 2 / 1; background: radial-gradient(ellipse at 50% 45%, rgba(var(--gold-rgb), 0.05), transparent 70%), var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; }
.fm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fm-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.fm-msg[hidden], .fm-pick[hidden], .fm-legend li[hidden] { display: none; }
.fm-areas { mix-blend-mode: screen; }
[data-theme="light"] .fm-areas { mix-blend-mode: multiply; }
.fm-area { transition: opacity 0.9s ease; }
.fm-stop-a { stop-color: var(--fm-a); }
.fm-stop-b { stop-color: var(--fm-b); }
.fm-route { transition: opacity 0.6s; }
.fm-route-p { fill: none; stroke: var(--fm-a); stroke-linecap: round; }
.fm-route-b .fm-route-p { stroke: var(--fm-b); }
.fm-arrow { fill: var(--fm-a); }
.fm-route-b .fm-arrow { fill: var(--fm-b); }
.fm-route.is-new .fm-route-p { stroke-dasharray: 1 1; animation: fm-draw 1.4s ease-out both; }
.fm-route.is-new .fm-arrow { animation: fm-show 0.4s 1.1s both; }
@keyframes fm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fm-show { from { opacity: 0; } to { opacity: 1; } }
.fm-mark { cursor: pointer; transition: opacity 0.6s; outline: none; }
.fm-shape { stroke-width: 1.5px; }
.fm-origin .fm-shape, .fm-origin-s { fill: var(--fm-a); stroke: var(--bg); }
.fm-mark-b.fm-origin .fm-shape { fill: var(--fm-b); }
.fm-place .fm-shape, .fm-place-s { fill: var(--text); stroke: var(--bg); }
.fm-last .fm-shape, .fm-last-s { fill: none; stroke: var(--text); stroke-width: 2px; }
.fm-mark:focus-visible .fm-shape { stroke: var(--gold-light); stroke-width: 3px; }
.fm-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.fm-mark.is-now .fm-label, .fm-mark:hover .fm-label, .fm-mark:focus-visible .fm-label { opacity: 1; }
.fm-slide { display: grid; gap: 2px; }
.fm-range { width: 100%; min-height: 28px; accent-color: var(--gold); cursor: pointer; }
.fm-ends { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.fm-note { margin: 0; min-height: 3.1em; font-family: var(--font-text); font-size: 18px; line-height: 1.55; color: var(--text); max-width: 75ch; }
.fm-pick { margin: 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--gold); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--muted); }
.fm-pick b { color: var(--text); }
.fm-pick-y { color: var(--gold); margin-right: 4px; }
.fm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.fm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fm-k { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--fm-a) 0, transparent 70%); }
.fm-k1 { opacity: 0.5; }
.is-compare .fm-k { background: radial-gradient(circle, var(--muted) 0, transparent 70%); }
.fm-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.fm-sw-a { background: var(--fm-a); }
.fm-sw-b { background: var(--fm-b); }
.fm-legend .fm-k-a, .fm-legend .fm-k-b { color: var(--text); font-weight: 600; }
.fm-ki { width: 18px; height: 18px; overflow: visible; }
.fm-ki-r { width: 26px; height: 12px; }
.fm-route-k { fill: none; stroke: var(--fm-a); stroke-width: 1.6px; }
.fm-arrow-k { fill: var(--fm-a); }
.fm-words { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--muted); }
.fm-words summary { cursor: pointer; color: var(--gold); width: max-content; max-width: 100%; }
.fm-words-b p, .fm-words-b ul { margin: 8px 0 0; }
.fm-words-b ul { padding-left: 20px; }
.fm-words-b b { color: var(--text); }
.fm-src { margin: 0; font-family: var(--font-ui); font-size: 12px; line-height: 1.5; color: var(--muted); }
.is-compare .fm-mark-a.fm-place .fm-shape { fill: var(--fm-a); }
.is-compare .fm-mark-b.fm-place .fm-shape { fill: var(--fm-b); }
.is-compare .fm-mark-a.fm-last .fm-shape { stroke: var(--fm-a); }
.is-compare .fm-mark-b.fm-last .fm-shape { stroke: var(--fm-b); }
.fm-vs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.fm-vs { font-family: var(--font-ui); font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; min-height: 36px; max-width: 100%; }
.fm-vs:focus { outline: none; border-color: var(--gold); }
.fm-howto { margin-top: 36px; }
.fm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fm.is-globe .fm-map { aspect-ratio: 16 / 10; }
.fm-svg[hidden], .fm-globe[hidden], .fm-zoom[hidden], .fm-refollow[hidden], .fm-wheel[hidden], .fm-tip[hidden] { display: none; }
.fm-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; outline: none; }
.fm-globe:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fm.is-turning .fm-globe { cursor: grabbing; }
.fm-tip { pointer-events: none; }
.fm-tip .atl-tip-k { line-height: 1.45; }
.fm-refollow { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; box-shadow: 0 4px 14px var(--shadow); }
.fm-refollow:hover { border-color: var(--gold); }
.fm-wheel { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px var(--shadow); }
.fm-how { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.fm-area, .fm-route { cursor: pointer; }
@media (max-width: 600px) {
.fm-map { aspect-ratio: 4 / 3; }
.fm.is-globe .fm-map { aspect-ratio: 1 / 1; }
.fm-cent { font-size: 19px; }
.fm-note { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.fm-area, .fm-route, .fm-mark, .fm-label { transition: none; }
.fm-route.is-new .fm-route-p, .fm-route.is-new .fm-arrow { animation: none; }
}
.gm-fc-img img, .gm-ocard img, .gm-pz-strip img, .gm-wt img, .path-thumbs img, .path-step img, .enc-thumb, .enc-seealso img,
.enc-preview img, .hub-card-img img, .door-img img, .rs-pic img, .quiz-img, .tih-strip-pic img,
.kd-potd img, .kd-door-img img, .profile-section-fig img, .contributor-avatar img { object-position: center 25%; }
.ref-prevnext a { align-content: start; }
.ref-prevnext .nm { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 480px) {
[data-kids="1"] .cen-bars li:not(:nth-child(10n+1)) .cen-lbl { display: none; }
}
@media (pointer: coarse) {
.ref-crumbs a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
.ref-cite summary, .od-cols summary, .tl-regions-wrap summary, .pass-restore summary, .fm-words summary, .ct-faq summary { padding-block: 10px; margin-block: -10px; }
.cen-all summary { padding-block: 8px; margin-block: 2px; }
.ref-copy { min-height: 34px; }
}
:root[data-kids="1"] {
  --bg: #17123a; --surface: #221b4f; --border: #3d3480; --field-border: #7a6fc0; --text: #f6f1ff; --muted: #b9addf;
  --gold: #ffc247; --gold-light: #ffd97a; --gold-rgb: 255,194,71; --gold-light-rgb: 255,217,122;
  --error: #ff6b6b; --success: #4cd38a; --shadow: rgba(0,0,0,0.45); --overlay: rgba(10,6,40,0.75); --shimmer-mid: rgba(61,52,128,0.5);
  --font-display: 'Baloo 2', 'Baloo 2 Fallback', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Nunito', 'Nunito Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-text: 'Nunito', 'Nunito Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 14px; --border-radius-lg: 20px;
  --kd-pop1: #ff7eb6; --kd-pop2: #6fd6ff; --kd-pop2-rgb: 111,214,255; --kd-pop3: #8be38b;
}
:root[data-kids="1"][data-theme="light"] {
  --bg: #fff8ea; --surface: #ffffff; --border: #f0d9a8; --field-border: #a8873f; --text: #2a2147; --muted: #6a6090;
  --gold: #c2410c; --gold-light: #9a3412; --gold-rgb: 234,88,12; --gold-light-rgb: 154,52,18;
  --error: #d6336c; --success: #2f9e44; --shadow: rgba(80,50,0,0.16); --overlay: rgba(42,33,71,0.6); --shimmer-mid: rgba(240,217,168,0.6);
  --kd-pop1: #e64980; --kd-pop2: #1c7ed6; --kd-pop2-rgb: 28,126,214; --kd-pop3: #2f9e44;
}
[data-kids="1"] body { background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.6px), radial-gradient(rgba(255,194,71,0.08) 1px, transparent 1.6px); background-size: 34px 34px, 52px 52px; background-position: 0 0, 17px 23px; }
[data-kids="1"][data-theme="light"] body { background-image: radial-gradient(rgba(234,88,12,0.08) 1.2px, transparent 1.8px); background-size: 30px 30px; }
[data-kids="1"] :is(h1, h2, h3, .research-title, .enc-title, .sp-title, .st-title, .profile-detail-name, .gm-done-t, .ref-sec-title) { text-transform: none; letter-spacing: 0.005em; }
[data-kids="1"] .research-title, [data-kids="1"] .enc-title, [data-kids="1"] .sp-title, [data-kids="1"] .st-title { font-weight: 800; }
[data-kids="1"] .enc-link { text-decoration-thickness: 2px; }
[data-kids="1"] .enc-desc, [data-kids="1"] .st-teaser, [data-kids="1"] .sp-sec p:not(.sp-source):not(.sp-ft-credit), [data-kids="1"] .profile-section-body p { font-size: 20px; line-height: 1.75; }
.kd-short, .kd-note, .kd-story { display: none; }
.kd-col { min-width: 0; }
[data-kids="1"] .kd-short { display: block; margin: 0 0 16px; padding: 16px 18px; border-radius: var(--border-radius-lg); background: rgba(var(--gold-rgb), 0.12); border: 2px dashed rgba(var(--gold-rgb), 0.55); font-family: var(--font-text); font-size: 21px; line-height: 1.6; color: var(--text); }
[data-kids="1"] .kd-short b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
[data-kids="1"] .kd-note { display: block; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--kd-pop2-rgb), 0.12); border-left: 4px solid var(--kd-pop2); font-family: var(--font-ui); font-size: 15px; color: var(--text); }
[data-kids="1"] .kd-story { display: inline-flex; align-items: center; justify-self: start; align-self: start; gap: 8px; margin: 6px 0 24px; font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: var(--bg); background: var(--gold); border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.2); }
[data-kids="1"] .kd-story:hover { background: var(--gold-light); }
[data-kids="1"]:not(.kd-open) .enc-article .enc-desc,
[data-kids="1"]:not(.kd-open) .profile-section-block,
[data-kids="1"]:not(.kd-open) .profile-references,
[data-kids="1"]:not(.kd-open) .st-text,
[data-kids="1"]:not(.kd-open) .cm-body,
[data-kids="1"]:not(.kd-open) .kd-rough { display: none; }
[data-kids="1"].kd-open .kd-story, [data-kids="1"].kd-open .kd-short { display: none; }
[data-kids="1"] .kd-short .kd-story { display: flex; width: fit-content; margin: 12px 0 0; }
[data-kids="1"] .ref-cite, [data-kids="1"] .ref-updated { display: none; }
.nav-kids-btn svg { display: block; }
.nav-kids-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(var(--gold-rgb), 0.16); }
[data-kids="1"] .nav-kids-btn { animation: kd-wiggle 0.6s 0.4s; }
@keyframes kd-wiggle { 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
@keyframes kd-bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes kd-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.kd-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 15px; font-weight: 800; text-decoration: none; color: var(--bg); background: var(--gold); border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.2); transition: transform 0.15s, background 0.2s; }
.kd-btn:hover { transform: translateY(-2px); background: var(--gold-light); }
.kd-daily[hidden], .kd-btn[hidden], .kd-fact-row a[hidden] { display: none; }
.kd-h2 { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 34px); color: var(--gold-light); margin: 34px 0 6px; }
.kd-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.kd-door { position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; text-decoration: none; border: 3px solid var(--border); transition: transform 0.2s, border-color 0.2s; }
.kd-door:hover { transform: translateY(-4px); border-color: var(--gold); }
.kd-door-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.kd-door:hover .kd-door-img img { transform: scale(1.06); }
.kd-door::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,0.78)); }
.kd-door-t { position: absolute; left: 16px; right: 16px; bottom: 30px; z-index: 1; font-family: var(--font-display); font-size: 25px; line-height: 1.1; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.kd-door-n { position: absolute; left: 16px; bottom: 11px; z-index: 1; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #ffe08a; }
.kd-sec { margin: 40px 0 0; scroll-margin-top: 90px; }
.kd-h { font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); line-height: 1.1; color: var(--gold-light); margin: 0 0 4px; }
.kd-intro { font-family: var(--font-text); font-size: 18px; color: var(--muted); margin: 0 0 16px; }
.kd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.kd-card { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; border: 2px solid var(--border); background: var(--surface); text-decoration: none; color: inherit; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.kd-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 10px 0 rgba(var(--gold-rgb), 0.22); }
.kd-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.kd-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.kd-card-b { display: grid; gap: 4px; padding: 12px 14px 16px; }
.kd-card-t { font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: var(--gold-light); }
.kd-card-d { font-family: var(--font-text); font-size: 16px; line-height: 1.5; color: var(--text); }
.kd-more { margin: 14px 0 0; }
@media (max-width: 720px) {
.kd-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kd-door { border-radius: 18px; }
.kd-door-t { left: 12px; right: 10px; bottom: 26px; font-size: 19px; }
.kd-door-n { left: 12px; bottom: 9px; font-size: 12px; }
}
@media (max-width: 560px) {
.kd-cards { grid-template-columns: 1fr; gap: 10px; }
.kd-card { flex-direction: row; border-radius: 18px; }
.kd-card-img { position: relative; flex: 0 0 108px; aspect-ratio: auto; min-height: 108px; }
.kd-card-img img { position: absolute; inset: 0; }
.kd-card-b { padding: 10px 12px 12px; align-content: start; }
.kd-card-t { font-size: 18px; }
.kd-card-d { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.kd-owl, .kd-owl .kd-blink, [data-kids="1"] .nav-kids-btn { animation: none; }
}
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="color"], [type="hidden"], [type="image"], [type="file"]), select, textarea):not(:focus) { border-color: var(--field-border); }
@media print {
:root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --surface: #fff; --text: #111; --muted: #555; --gold: #6b4f12; --gold-light: #6b4f12; --border: #ccc; }
html, body { background: #fff !important; color: #111 !important; }
body::before, body::after { display: none !important; }
#site-nav, #site-footer, .skip-link, .to-top, .read-progress, .path-journey, .site-search, .enc-preview, #contact-modal, .modal-overlay,
  .empire-toc, .info-share-row, .detail-cite-row, .empire-view-explorer, .tih-share-btn, .tih-share-dropdown, .home-search,
  .ref-prevnext, .ref-updated a, .ref-copy, .enc-controls, .enc-random, .st-filters, .st-random, .st-more, .st-mapwrap,
  .mini-connections, #connections, .quiz, #newsletter-section, .explorer-teaser, .playback-bar,
  .atl-time, .atl-jumps, .atl-tools, .atl-zoom, .qz-cats, .gl-letters, .ty-sec { display: none !important; }
.empire-page, .enc-page, .st-page, .day-page, main { padding-top: 0 !important; min-height: 0 !important; }
a { color: #111 !important; }
.enc-link { color: inherit !important; text-decoration: none !important; }
img, figure, svg, .st-facts, .ref-cite { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
.enc-fig, .st-fig, .profile-section-fig { border-color: #ccc !important; background: #fff !important; }
}