/* WAREHOUSE OS 2.1 · CIVILIZATION MOBILE A
   Dedicated app surface; the original responsive route and backend contract remain unchanged. */
.civilization-page.civilization-app-page {
  width: min(100%, 480px); min-height: 100svh; margin: 0 auto; padding-top: 0;
  overflow-x: clip; background: #F4F1E8; box-shadow: 0 0 0 1px rgba(18, 18, 18, .16);
}
  .civ-mobile-a {
    --civ-mobile-paper: #F4F1E8;
    --civ-mobile-ink: #121212;
    --civ-mobile-muted: #625E58;
    --civ-mobile-red: #DC2A20;
    --civ-mobile-yellow: #F5D20A;
    --civ-mobile-blue: #2161A9;
    --civ-mobile-green: #1F704F;
    --civ-mobile-orange: #BD5D19;
    --civ-mobile-purple: #75439A;
    --civ-mobile-rule: rgba(18, 18, 18, .24);
    --civ-theme-primary: var(--civ-mobile-red);
    --civ-theme-secondary: var(--civ-mobile-blue);
    --civ-theme-highlight: var(--civ-mobile-yellow);
    --civ-theme-ink: var(--civ-mobile-ink);
    --civ-theme-paper: var(--civ-mobile-paper);
    min-width: 0; min-height: 100svh; padding-bottom: calc(70px + env(safe-area-inset-bottom)); position: relative; color: var(--civ-mobile-ink); background: var(--civ-mobile-paper);
  }
  .civ-mobile-a button, .civ-mobile-a input { color: inherit; font: inherit; touch-action: manipulation; }

  .civ-mobile-topbar {
    min-height: calc(58px + env(safe-area-inset-top)); padding: max(10px, env(safe-area-inset-top)) 12px 10px; position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
    border: 1px solid var(--civ-mobile-ink); border-bottom: 2px solid var(--civ-mobile-ink);
    background: rgba(244, 241, 232, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .civ-mobile-brand { min-width: 0; display: flex; align-items: center; gap: 8px; font: 800 7.5px/1.3 var(--f-mono); letter-spacing: .1em; }
  .civ-mobile-brand i { width: 19px; height: 19px; position: relative; flex: 0 0 auto; background: var(--civ-mobile-red); }
  .civ-mobile-brand i::before { content: ""; position: absolute; inset: 4px 9px 4px 4px; background: var(--civ-mobile-paper); }
  .civ-mobile-top-actions { display: flex; border: 1px solid var(--civ-mobile-ink); }
  .civ-mobile-top-actions button { min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-right: 1px solid var(--civ-mobile-ink); background: transparent; font: 850 8px var(--f-mono); letter-spacing: .06em; }
  .civ-mobile-top-actions button:last-child { border-right: 0; color: #FFF; background: var(--civ-mobile-red); font-size: 15px; }

  .civ-mobile-hero {
    min-height: 500px; padding: 22px 16px 27px; position: relative; overflow: hidden;
    border: 1px solid var(--civ-mobile-ink); border-top: 0; border-bottom-width: 2px;
    background-color: var(--civ-mobile-paper);
    background-image: linear-gradient(var(--civ-mobile-rule) 1px, transparent 1px), linear-gradient(90deg, var(--civ-mobile-rule) 1px, transparent 1px);
    background-size: 46px 46px;
  }
  .civ-mobile-kicker { position: relative; z-index: 5; color: var(--civ-mobile-red); font: 850 7.5px var(--f-mono); letter-spacing: .12em; }
  .civ-mobile-hero h1 { margin: 78px 0 0; position: relative; z-index: 5; font-size: clamp(102px, 30vw, 126px); font-weight: 900; line-height: .72; letter-spacing: -.12em; }
  .civ-mobile-word { width: min(100%, 370px); height: 65px; margin-top: 31px; display: grid; position: relative; z-index: 6; isolation: isolate; overflow: hidden; font-size: clamp(34px, 10.5vw, 47px); font-weight: 850; line-height: 1; letter-spacing: -.072em; white-space: nowrap; }
  .civ-mobile-word-layer { grid-area: 1 / 1; align-self: end; position: relative; line-height: inherit; letter-spacing: inherit; white-space: nowrap; pointer-events: none; }
  .civ-mobile-word-outline { z-index: 5; color: transparent; -webkit-text-stroke: 2px var(--civ-mobile-ink); }
  .civ-mobile-word-color { z-index: 4; color: transparent; background: linear-gradient(90deg, var(--civ-mobile-red) 0 18%, var(--civ-mobile-yellow) 18% 36%, var(--civ-mobile-blue) 36% 56%, var(--civ-mobile-green) 56% 76%, var(--civ-mobile-orange) 76% 90%, var(--civ-mobile-purple) 90% 100%); -webkit-background-clip: text; background-clip: text; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation: civ-mobile-color-pass 7.2s cubic-bezier(.2,.72,.2,1) infinite; }
  .civ-mobile-word-offset { z-index: 2; color: transparent; opacity: 0; animation-duration: 7.2s; animation-timing-function: ease; animation-iteration-count: infinite; }
  .civ-mobile-word-offset.is-red { -webkit-text-stroke: 2px var(--civ-mobile-red); animation-name: civ-mobile-register-red; }
  .civ-mobile-word-offset.is-blue { -webkit-text-stroke: 2px var(--civ-mobile-blue); animation-name: civ-mobile-register-blue; }
  .civ-mobile-word-offset.is-green { -webkit-text-stroke: 2px var(--civ-mobile-green); animation-name: civ-mobile-register-green; }
  .civ-mobile-word-bars { grid-area: 1 / 1; position: absolute; inset: 7px 0 2px; z-index: 1; pointer-events: none; }
  .civ-mobile-word-bars b { height: 7px; position: absolute; left: 0; right: 0; display: block; transform: scaleX(0); transform-origin: left; opacity: 0; animation: 7.2s ease infinite; }
  .civ-mobile-word-bars b:nth-child(1) { top: 12%; background: var(--civ-mobile-red); animation-name: civ-mobile-bar-red; }
  .civ-mobile-word-bars b:nth-child(2) { top: 46%; background: var(--civ-mobile-blue); animation-name: civ-mobile-bar-blue; }
  .civ-mobile-word-bars b:nth-child(3) { top: 78%; background: var(--civ-mobile-green); animation-name: civ-mobile-bar-green; }
  .civ-mobile-hero > p { max-width: 340px; margin: 20px 0 0; position: relative; z-index: 5; color: var(--civ-mobile-muted); font-size: 12px; line-height: 1.75; }
  .civ-mobile-hero > aside { width: 84px; height: 102px; padding: 10px; position: absolute; right: 16px; top: 69px; z-index: 4; color: var(--civ-mobile-paper); background: var(--civ-mobile-ink); }
  .civ-mobile-hero > aside small { display: block; font: 800 6.5px/1.45 var(--f-mono); letter-spacing: .08em; }
  .civ-mobile-hero > aside strong { display: block; margin-top: 27px; color: var(--civ-mobile-yellow); font: 900 42px/.7 var(--f-mono); letter-spacing: -.12em; }
  .civ-mobile-geometry { width: 132px; height: 132px; position: absolute; right: -26px; bottom: 43px; z-index: 2; border: 1px solid var(--civ-mobile-red); box-shadow: -20px -20px 0 rgba(245, 210, 10, .9); animation: civ-mobile-geometry 7.2s ease-in-out infinite alternate; }

  .civ-mobile-filter-panel { border: 1px solid var(--civ-mobile-ink); border-top: 0; background: var(--civ-mobile-paper); }
  .civ-mobile-domains { min-height: 56px; display: flex; overflow-x: auto; border-bottom: 1px solid var(--civ-mobile-ink); scrollbar-width: none; }
  .civ-mobile-domains::-webkit-scrollbar { display: none; }
  .civ-mobile-domains button { min-width: 74px; padding: 10px 11px 13px; position: relative; flex: 1 0 auto; border: 0; border-right: 1px solid var(--civ-mobile-ink); background: transparent; font: 800 8px var(--f-mono); letter-spacing: .04em; }
  .civ-mobile-domains button::after { content: ""; height: 3px; position: absolute; left: 11px; right: 11px; bottom: 7px; background: var(--civ-signal); transform: scaleX(.28); transform-origin: left; }
  .civ-mobile-domains button.is-active { color: #FFF; background: var(--civ-signal); }
  .civ-mobile-domains button.is-active::after { background: var(--civ-accent); transform: scaleX(1); }
  .civ-mobile-search { min-height: 46px; padding: 7px 12px; display: flex; align-items: center; gap: 8px; }
  .civ-mobile-search span { color: var(--civ-mobile-red); font-weight: 900; }
  .civ-mobile-search input { width: 100%; height: 30px; border: 0; outline: 0; background: transparent; font-size: 12px; }

  .civ-mobile-error { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--civ-mobile-red); border-top: 0; color: var(--civ-mobile-red); font-size: 11px; }
  .civ-mobile-error button { min-height: 32px; padding: 0 10px; border: 1px solid currentColor; background: transparent; font: 800 8px var(--f-mono); }
  .civ-mobile-feed { padding-bottom: 2px; border: 1px solid var(--civ-mobile-ink); border-top: 0; }
  .civ-mobile-feed > header { min-height: 58px; padding: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--civ-mobile-ink); }
  .civ-mobile-feed > header h2 { margin: 0; font-size: 21px; letter-spacing: -.045em; }
  .civ-mobile-feed > header span { font: 800 7px var(--f-mono); letter-spacing: .08em; text-align: right; }
  .civ-mobile-thought { border-bottom: 1px solid var(--civ-mobile-ink); }
  .civ-mobile-thought-main { width: 100%; min-height: 166px; padding: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); border: 0; background: transparent; text-align: left; }
  .civ-mobile-thought-no { padding: 14px 8px; color: var(--civ-signal); border-right: 1px solid var(--civ-mobile-ink); font: 900 29px/.8 var(--f-mono); letter-spacing: -.08em; }
  .civ-mobile-thought-copy { min-width: 0; padding: 14px 13px 15px; display: block; }
  .civ-mobile-thought-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--civ-mobile-muted); font: 800 7px var(--f-mono); letter-spacing: .07em; }
  .civ-mobile-thought-copy > strong { margin: 17px 0 8px; display: block; font-size: 21px; line-height: 1.14; letter-spacing: -.04em; }
  .civ-mobile-thought-short { display: block; color: var(--civ-mobile-muted); overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.65; }
  .civ-mobile-thought footer { min-height: 40px; padding-left: 12px; display: flex; align-items: stretch; border-top: 1px solid var(--civ-mobile-rule); font: 800 7px var(--f-mono); letter-spacing: .05em; }
  .civ-mobile-thought footer > span { margin-right: auto; display: flex; align-items: center; }
  .civ-mobile-thought footer button { padding: 0 9px; border: 0; border-left: 1px solid var(--civ-mobile-ink); background: transparent; font: inherit; }
  .civ-mobile-thought footer button:last-child { color: #FFF; background: var(--civ-mobile-ink); }
  .civ-mobile-empty { min-height: 180px; padding: 26px 14px; color: var(--civ-mobile-muted); font: 800 10px var(--f-mono); }

  /* B · A real mobile chronology, not the desktop timeline squeezed into a phone. */
  .civ-mobile-chronology { min-height: calc(100svh - 58px); color: var(--civ-theme-ink); border: 1px solid var(--civ-theme-ink); border-top: 0; background: var(--civ-theme-paper); transition: color .35s ease, background-color .35s ease; }
  .civ-mobile-chronology-head { min-height: 330px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 92px; color: var(--civ-theme-ink); border-bottom: 2px solid var(--civ-theme-ink); background-color: var(--civ-theme-paper); background-image: linear-gradient(color-mix(in srgb, var(--civ-theme-ink) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--civ-theme-ink) 14%, transparent) 1px, transparent 1px); background-size: 48px 48px; transition: color .35s ease, background-color .35s ease; }
  .civ-mobile-chronology-head > div { padding: 24px 17px 28px; position: relative; z-index: 8; display: flex; flex-direction: column; }
  .civ-mobile-chronology-head > div > span { color: var(--civ-theme-primary); font: 850 8px var(--f-mono); letter-spacing: .12em; }
  .civ-mobile-chronology-head strong { max-width: 64%; margin-top: auto; font-size: clamp(48px, 15vw, 68px); line-height: .88; letter-spacing: -.09em; }
  .civ-mobile-chronology-head p { max-width: 270px; margin: 18px 0 0; color: color-mix(in srgb, var(--civ-theme-ink) 68%, transparent); font-size: 12px; line-height: 1.7; }
  .civ-mobile-chronology-head > aside { padding: 20px 10px; position: relative; z-index: 8; display: flex; flex-direction: column; border-left: 1px solid var(--civ-theme-ink); }
  .civ-mobile-chronology-head > aside b { color: var(--civ-theme-secondary); font: 900 55px/.8 var(--f-mono); letter-spacing: -.12em; }
  .civ-mobile-chronology-head > aside span { margin-top: auto; font: 800 7px/1.55 var(--f-mono); letter-spacing: .08em; }
  .civ-mobile-chrono-disc { width: 45%; aspect-ratio: 1; position: absolute; right: -7%; top: -4%; z-index: 1; border: 25px solid var(--civ-theme-highlight); border-radius: 50%; box-shadow: 0 0 0 25px var(--civ-theme-secondary); opacity: .92; animation: civ-mobile-chrono-disc 7.2s ease-in-out infinite; }
  .civ-mobile-chrono-frame { width: 38%; height: 76%; position: absolute; right: 9%; top: 12%; z-index: 3; border: 2px solid var(--civ-theme-ink); animation: civ-mobile-chrono-frame 7.2s cubic-bezier(.3,.8,.2,1) infinite; }
  .civ-mobile-chrono-bar { height: 12px; position: absolute; left: 42%; right: 5%; z-index: 5; transform: scaleX(0); transform-origin: left; animation: civ-mobile-chrono-bar 7.2s ease infinite; }
  .civ-mobile-chrono-bar.is-red { top: 31%; background: var(--civ-theme-primary); }
  .civ-mobile-chrono-bar.is-blue { top: 38%; background: var(--civ-theme-secondary); animation-delay: .22s; }
  .civ-mobile-chrono-bar.is-green { top: 45%; background: var(--civ-theme-highlight); animation-delay: .44s; }
  .civ-mobile-chronology[data-domain="judgement"] .civ-mobile-chrono-disc { width: 22%; height: 70%; aspect-ratio: auto; right: 31%; top: 15%; border: 0; border-radius: 0; background: color-mix(in srgb, var(--civ-theme-primary) 22%, transparent); box-shadow: 72px 0 0 color-mix(in srgb, var(--civ-theme-secondary) 17%, transparent); animation-name: civ-mobile-chrono-judge; }
  .civ-mobile-chronology[data-domain="judgement"] .civ-mobile-chrono-frame { width: 2px; height: 80%; right: 38%; top: 10%; border: 0; background: var(--civ-theme-ink); animation-name: civ-mobile-chrono-axis; }
  .civ-mobile-chronology[data-domain="technology"] .civ-mobile-chrono-disc { width: 42%; right: -2%; top: -5%; border: 24px solid var(--civ-theme-primary); border-radius: 0; box-shadow: -22px 22px 0 color-mix(in srgb, var(--civ-theme-secondary) 46%, transparent); opacity: .3; animation-name: civ-mobile-chrono-tech; }
  .civ-mobile-chronology[data-domain="technology"] .civ-mobile-chrono-frame { border-color: var(--civ-theme-secondary); box-shadow: 12px 12px 0 color-mix(in srgb, var(--civ-theme-highlight) 72%, transparent); animation-name: civ-mobile-chrono-tech-frame; }
  .civ-mobile-chronology[data-domain="technology"] .civ-mobile-chrono-bar { height: 8px; }
  .civ-mobile-chronology[data-domain="organization"] .civ-mobile-chrono-disc { width: 43%; right: -4%; top: 0; border: 22px solid var(--civ-theme-primary); box-shadow: 0 0 0 22px color-mix(in srgb, var(--civ-theme-secondary) 42%, transparent); opacity: .62; animation-name: civ-mobile-chrono-network; }
  .civ-mobile-chronology[data-domain="organization"] .civ-mobile-chrono-frame { width: 28%; height: auto; aspect-ratio: 1; right: 31%; top: 27%; border-radius: 50%; border-color: var(--civ-theme-secondary); background: color-mix(in srgb, var(--civ-theme-highlight) 34%, transparent); animation-name: civ-mobile-chrono-node; }
  .civ-mobile-chronology[data-domain="time"] .civ-mobile-chrono-disc { width: 47%; right: -7%; top: -3%; border-color: var(--civ-theme-primary); box-shadow: 0 0 0 22px color-mix(in srgb, var(--civ-theme-highlight) 72%, transparent); animation-name: civ-mobile-chrono-time-orbit; }
  .civ-mobile-chronology[data-domain="time"] .civ-mobile-chrono-frame { width: 2px; height: 42%; right: 28%; top: 22%; border: 0; background: var(--civ-theme-ink); transform-origin: bottom; animation: civ-mobile-chrono-time-hand 8s linear infinite; }
  .civ-mobile-chronology[data-domain="ethics"] .civ-mobile-chrono-disc { width: 35%; right: 4%; top: 8%; border: 18px solid var(--civ-theme-primary); background: color-mix(in srgb, var(--civ-theme-primary) 12%, transparent); box-shadow: -64px 38px 0 color-mix(in srgb, var(--civ-theme-secondary) 24%, transparent); animation-name: civ-mobile-chrono-ethics; }
  .civ-mobile-chronology[data-domain="ethics"] .civ-mobile-chrono-frame { width: 2px; height: 82%; right: 39%; top: 9%; border: 0; background: var(--civ-theme-ink); animation-name: civ-mobile-chrono-axis; }
  .civ-mobile-timeline { margin: 0; padding: 26px 12px 34px; position: relative; list-style: none; }
  .civ-mobile-timeline::before { content: ""; width: 1px; position: absolute; left: 78px; top: 0; bottom: 0; background: var(--civ-mobile-ink); }
  .civ-mobile-timeline > li { --civ-signal: var(--civ-mobile-red); margin: 0 0 26px; display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 13px; position: relative; }
  .civ-mobile-timeline > li::before { content: ""; width: 11px; height: 11px; position: absolute; left: 61px; top: 16px; z-index: 2; border: 2px solid var(--civ-mobile-paper); border-radius: 50%; background: var(--civ-signal); box-shadow: 0 0 0 1px var(--civ-mobile-ink); }
  .civ-mobile-timeline > li.is-current::before { box-shadow: 0 0 0 1px var(--civ-mobile-ink), 0 0 0 6px color-mix(in srgb, var(--civ-signal) 24%, transparent); }
  .civ-mobile-time { padding-top: 9px; display: flex; flex-direction: column; align-items: flex-start; }
  .civ-mobile-time time { font: 800 7px var(--f-mono); letter-spacing: .02em; }
  .civ-mobile-time b { margin-top: 10px; color: var(--civ-signal); font: 900 26px/.8 var(--f-mono); letter-spacing: -.09em; }
  .civ-mobile-time-card { min-width: 0; padding: 15px 14px 0; overflow: hidden; border: 1px solid var(--civ-mobile-ink); border-top: 5px solid var(--civ-signal); background: var(--civ-mobile-paper); text-align: left; box-shadow: 5px 5px 0 color-mix(in srgb, var(--civ-signal) 16%, transparent); }
  .civ-mobile-timeline > li.is-current .civ-mobile-time-card { color: var(--civ-mobile-paper); background: var(--civ-mobile-ink); }
  .civ-mobile-time-domain { color: var(--civ-signal); font: 850 7px var(--f-mono); letter-spacing: .1em; }
  .civ-mobile-time-card > strong { margin: 17px 0 9px; display: block; overflow-wrap: anywhere; font-size: 22px; line-height: 1.12; letter-spacing: -.045em; }
  .civ-mobile-time-card > p { margin: 0 0 13px; color: var(--civ-mobile-muted); font-size: 11.5px; line-height: 1.65; }
  .civ-mobile-timeline > li.is-current .civ-mobile-time-card > p { color: rgba(244,241,232,.7); }
  .civ-mobile-time-card > small { margin-bottom: 13px; display: block; font: 750 7.5px/1.6 var(--f-mono); }
  .civ-mobile-time-card > small span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .civ-mobile-time-card > footer { min-height: 42px; margin: 0 -14px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid currentColor; font: 850 7px var(--f-mono); letter-spacing: .05em; }
  .civ-mobile-time-card > footer b { color: var(--civ-signal); }

  /* C · Single-column long-form poster reader for touch and uninterrupted reading. */
  .civ-mobile-reader { min-height: calc(100svh - 58px); color: var(--civ-theme-ink); border: 1px solid var(--civ-theme-ink); border-top: 0; background: var(--civ-theme-paper); transition: color .35s ease, background-color .35s ease; }
  .civ-mobile-reader-index { min-height: 52px; position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 18; display: flex; overflow-x: auto; border-bottom: 2px solid var(--civ-theme-ink); background: color-mix(in srgb, var(--civ-theme-paper) 96%, transparent); scrollbar-width: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .civ-mobile-reader-index::-webkit-scrollbar { display: none; }
  .civ-mobile-reader-index button { min-width: 66px; min-height: 52px; padding: 7px 8px; flex: 1 0 auto; border: 0; border-right: 1px solid var(--civ-theme-ink); background: transparent; text-align: left; }
  .civ-mobile-reader-index button b, .civ-mobile-reader-index button span { display: block; }
  .civ-mobile-reader-index button b { color: var(--civ-signal); font: 900 15px/.9 var(--f-mono); }
  .civ-mobile-reader-index button span { margin-top: 5px; font: 800 6.5px var(--f-mono); letter-spacing: .05em; }
  .civ-mobile-reader-index button.is-active { color: var(--civ-theme-paper); background: var(--civ-theme-ink); }
  .civ-mobile-reader-cover { min-height: calc(100svh - 112px); padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; background-color: var(--civ-theme-paper); background-image: linear-gradient(color-mix(in srgb, var(--civ-theme-ink) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--civ-theme-ink) 12%, transparent) 1px, transparent 1px); background-size: 44px 44px; }
  .civ-mobile-reader-cover > header { display: flex; justify-content: space-between; gap: 10px; font: 850 7.5px var(--f-mono); letter-spacing: .08em; }
  .civ-mobile-reader-figure { height: 162px; margin: 32px -16px 23px; padding: 0 16px; position: relative; display: flex; align-items: flex-end; border-top: 1px solid var(--civ-theme-ink); border-bottom: 1px solid var(--civ-theme-ink); }
  .civ-mobile-reader-figure strong { position: relative; z-index: 3; color: var(--civ-theme-primary); font: 900 120px/.68 var(--f-mono); letter-spacing: -.14em; }
  .civ-mobile-reader-figure span { margin: 0 0 12px auto; position: relative; z-index: 3; font: 850 7px/1.55 var(--f-mono); letter-spacing: .08em; text-align: right; }
  .civ-mobile-reader-figure i { width: 168px; height: 168px; position: absolute; right: -40px; top: -22px; border: 34px solid color-mix(in srgb, var(--civ-theme-primary) 70%, transparent); border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--civ-theme-secondary) 24%, transparent); opacity: .64; animation: civ-mobile-reader-orbit 12s linear infinite; }
  .civ-mobile-reader-figure i::before, .civ-mobile-reader-figure i::after { content: ""; position: absolute; }
  .civ-mobile-reader-kicker { color: var(--civ-theme-primary); font: 850 7px var(--f-mono); letter-spacing: .11em; }
  .civ-mobile-reader-cover h1 { max-width: 430px; margin: 18px 0 22px; overflow-wrap: anywhere; font-size: clamp(39px, 12vw, 58px); line-height: .98; letter-spacing: -.07em; }
  .civ-mobile-reader-cover blockquote { margin: 0 0 20px; padding: 14px 15px 15px; position: relative; z-index: 2; color: var(--civ-theme-ink); border: 0; border-left: 5px solid var(--civ-theme-primary); background: var(--civ-theme-highlight); font-size: 16px; font-weight: 760; line-height: 1.55; }
  .civ-mobile-reader-cover blockquote span { margin-bottom: 8px; display: block; font: 850 7px var(--f-mono); letter-spacing: .1em; }
  .civ-mobile-reader-cover > p { margin: 0 0 24px; color: color-mix(in srgb, var(--civ-theme-ink) 72%, transparent); font-size: 15px; line-height: 1.82; }
  .civ-mobile-reader-cover > footer { min-height: 48px; margin: auto -16px -16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border-top: 1px solid var(--civ-theme-ink); }
  .civ-mobile-reader-cover > footer button { min-height: 48px; padding: 8px; border: 0; border-right: 1px solid var(--civ-theme-ink); background: var(--civ-theme-paper); font: 850 7.5px var(--f-mono); }
  .civ-mobile-reader-cover > footer button:last-child { border-right: 0; color: var(--civ-theme-paper); background: var(--civ-theme-ink); }
  .civ-mobile-reading-body { color: #141414; border-top: 8px solid var(--civ-theme-ink); background: #F4F1E8; }
  .civ-mobile-reading-body > header, .civ-mobile-lenses > header { min-height: 54px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid currentColor; font: 850 7.5px var(--f-mono); letter-spacing: .09em; }
  .civ-mobile-reading-section { padding: 30px 17px 34px; border-bottom: 1px solid var(--civ-mobile-ink); }
  .civ-mobile-reading-section > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: end; gap: 12px; color: var(--civ-theme-primary); }
  .civ-mobile-reading-section > div strong { font: 900 52px/.72 var(--f-mono); letter-spacing: -.1em; }
  .civ-mobile-reading-section > div span { padding-bottom: 2px; font: 850 7px var(--f-mono); letter-spacing: .08em; }
  .civ-mobile-reading-section h2 { margin: 24px 0 20px; overflow-wrap: anywhere; font-size: 27px; line-height: 1.12; letter-spacing: -.045em; }
  .civ-mobile-reading-section p { margin: 0 0 18px; font-size: 16px; line-height: 1.9; text-align: justify; text-justify: inter-ideograph; }
  .civ-mobile-lenses { color: var(--civ-theme-paper); background: var(--civ-theme-ink); }
  .civ-mobile-lenses > header b { color: var(--civ-theme-highlight); font-size: 18px; }
  .civ-mobile-lenses > article { min-height: 120px; display: grid; grid-template-columns: 58px minmax(0, 1fr); border-bottom: 1px solid rgba(244,241,232,.35); }
  .civ-mobile-lenses > article > strong { padding: 18px 10px; color: var(--civ-theme-highlight); border-right: 1px solid rgba(244,241,232,.35); font: 900 25px/.9 var(--f-mono); }
  .civ-mobile-lenses > article > div { padding: 18px 15px 20px; }
  .civ-mobile-lenses h3 { margin: 0 0 10px; color: var(--civ-theme-highlight); font-size: 18px; }
  .civ-mobile-lenses p { margin: 0; color: rgba(244,241,232,.76); font-size: 13px; line-height: 1.75; }
  .civ-mobile-reader[data-domain="judgement"] .civ-mobile-reader-figure i { width: 112px; height: 122px; right: 22px; top: 18px; border: 0; border-radius: 0; background: color-mix(in srgb, var(--civ-theme-primary) 24%, transparent); box-shadow: 56px 0 0 color-mix(in srgb, var(--civ-theme-secondary) 18%, transparent); animation: civ-mobile-reader-balance 6.8s ease-in-out infinite; }
  .civ-mobile-reader[data-domain="technology"] .civ-mobile-reader-figure i { width: 130px; height: 130px; right: -8px; top: 6px; border: 24px solid color-mix(in srgb, var(--civ-theme-primary) 72%, transparent); border-radius: 0; box-shadow: -22px 22px 0 color-mix(in srgb, var(--civ-theme-secondary) 36%, transparent); animation: civ-mobile-reader-tech 6.4s steps(4, end) infinite; }
  .civ-mobile-reader[data-domain="organization"] .civ-mobile-reader-figure i { border-color: color-mix(in srgb, var(--civ-theme-primary) 72%, transparent); box-shadow: 0 0 0 20px color-mix(in srgb, var(--civ-theme-secondary) 25%, transparent); animation: civ-mobile-reader-network 7.6s ease-in-out infinite; }
  .civ-mobile-reader[data-domain="organization"] .civ-mobile-reader-figure i::before, .civ-mobile-reader[data-domain="organization"] .civ-mobile-reader-figure i::after { width: 16px; height: 16px; border-radius: 50%; background: var(--civ-theme-highlight); box-shadow: 52px 36px 0 var(--civ-theme-secondary); }
  .civ-mobile-reader[data-domain="organization"] .civ-mobile-reader-figure i::before { left: -34px; top: 34px; }
  .civ-mobile-reader[data-domain="organization"] .civ-mobile-reader-figure i::after { right: 18px; bottom: -26px; }
  .civ-mobile-reader[data-domain="time"] .civ-mobile-reader-figure i { border-color: color-mix(in srgb, var(--civ-theme-primary) 72%, transparent); box-shadow: 0 0 0 18px color-mix(in srgb, var(--civ-theme-highlight) 45%, transparent); animation: civ-mobile-reader-orbit 12s linear infinite; }
  .civ-mobile-reader[data-domain="time"] .civ-mobile-reader-figure i::after { width: 2px; height: 58px; left: 50%; top: 50%; background: var(--civ-theme-ink); transform-origin: top; animation: civ-mobile-reader-hand 7s linear infinite; }
  .civ-mobile-reader[data-domain="ethics"] .civ-mobile-reader-figure i { width: 132px; height: 132px; right: -2px; top: 10px; border: 20px solid color-mix(in srgb, var(--civ-theme-primary) 64%, transparent); box-shadow: -58px 28px 0 color-mix(in srgb, var(--civ-theme-secondary) 23%, transparent); animation: civ-mobile-reader-ethics 7.2s ease-in-out infinite; }

  /* D · Personal reading notebook. Ownership comes from the API; publishing and poster export reuse Civilization. */
  .civ-mobile-notebook { min-height: calc(100svh - 58px); color: var(--civ-mobile-ink); border: 1px solid var(--civ-mobile-ink); border-top: 0; background: var(--civ-mobile-paper); }
  .civ-mobile-notebook-head { min-height: 344px; padding: 22px 17px 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; color: #F4F1E8; border-bottom: 2px solid var(--civ-mobile-ink); background-color: #171717; background-image: linear-gradient(rgba(244,241,232,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,232,.12) 1px, transparent 1px); background-size: 48px 48px; }
  .civ-mobile-notebook-head > span { position: relative; z-index: 4; color: var(--civ-mobile-yellow); font: 850 8px var(--f-mono); letter-spacing: .12em; }
  .civ-mobile-notebook-head > strong { max-width: 305px; margin-top: auto; position: relative; z-index: 4; font-size: clamp(48px, 15vw, 65px); line-height: .88; letter-spacing: -.085em; }
  .civ-mobile-notebook-head > p { max-width: 286px; margin: 18px 0 0; position: relative; z-index: 4; color: rgba(244,241,232,.7); font-size: 12px; line-height: 1.7; }
  .civ-mobile-notebook-count { width: 116px; min-height: 116px; padding: 13px; position: absolute; right: 15px; top: 52px; z-index: 5; display: flex; flex-direction: column; color: var(--civ-mobile-ink); background: var(--civ-mobile-yellow); }
  .civ-mobile-notebook-count b { font: 900 50px/.76 var(--f-mono); letter-spacing: -.12em; }
  .civ-mobile-notebook-count span { margin-top: auto; font: 850 6.5px/1.55 var(--f-mono); letter-spacing: .06em; }
  .civ-mobile-notebook-head > i { position: absolute; display: block; pointer-events: none; }
  .civ-mobile-notebook-head > i:first-of-type { width: 190px; height: 190px; right: -64px; bottom: -36px; border: 32px solid rgba(33,97,169,.62); border-radius: 50%; animation: civ-mobile-note-orbit 11s linear infinite; }
  .civ-mobile-notebook-head > i:last-of-type { width: 102px; height: 138px; right: 50px; bottom: 16px; border: 1px solid #F4F1E8; box-shadow: -18px 18px 0 rgba(220,42,32,.62); animation: civ-mobile-note-register 7.2s ease-in-out infinite; }
  .civ-mobile-note-create { width: 100%; min-height: 86px; padding: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: stretch; color: #FFF; border: 0; border-bottom: 2px solid var(--civ-mobile-ink); background: var(--civ-mobile-red); text-align: left; }
  .civ-mobile-note-create > b { display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.55); font: 300 42px var(--f-sans); }
  .civ-mobile-note-create > span { padding: 17px 15px; display: flex; flex-direction: column; justify-content: center; }
  .civ-mobile-note-create strong { font-size: 20px; line-height: 1.1; }
  .civ-mobile-note-create small { margin-top: 7px; font: 800 7px var(--f-mono); letter-spacing: .08em; }
  .civ-mobile-note-empty { min-height: 280px; padding: 31px 18px; display: grid; align-content: start; grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px; }
  .civ-mobile-note-empty > b { grid-row: 1 / 3; color: var(--civ-mobile-red); font: 900 54px/.76 var(--f-mono); letter-spacing: -.1em; }
  .civ-mobile-note-empty > strong { font-size: 23px; line-height: 1.1; }
  .civ-mobile-note-empty > p { margin: 15px 0 0; color: var(--civ-mobile-muted); font-size: 12px; line-height: 1.75; }
  .civ-mobile-note-list { padding: 0 12px 34px; }
  .civ-mobile-note-list > article { margin-top: 18px; border: 1px solid var(--civ-mobile-ink); border-top: 6px solid var(--civ-signal); background: #FFFDF7; box-shadow: 5px 5px 0 color-mix(in srgb, var(--civ-signal) 16%, transparent); }
  .civ-mobile-note-list > article > header { min-height: 38px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--civ-mobile-ink); font: 850 7px var(--f-mono); letter-spacing: .07em; }
  .civ-mobile-note-list > article > header b { padding: 5px 7px; color: var(--civ-mobile-red); border: 1px solid currentColor; }
  .civ-mobile-note-list > article > header b.is-published { color: var(--civ-mobile-green); }
  .civ-mobile-note-main { width: 100%; min-height: 155px; padding: 14px 13px 16px; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 11px; border: 0; background: transparent; text-align: left; }
  .civ-mobile-note-main > span { grid-row: 1 / 4; color: var(--civ-signal); font: 900 31px/.8 var(--f-mono); letter-spacing: -.08em; }
  .civ-mobile-note-main > strong { overflow-wrap: anywhere; font-size: 21px; line-height: 1.13; letter-spacing: -.04em; }
  .civ-mobile-note-main > p { margin: 11px 0 0; color: var(--civ-mobile-muted); font-size: 11.5px; line-height: 1.68; }
  .civ-mobile-note-list > article > footer { min-height: 44px; display: flex; align-items: stretch; border-top: 1px solid var(--civ-mobile-ink); font: 850 7px var(--f-mono); letter-spacing: .04em; }
  .civ-mobile-note-list > article > footer > span { margin-right: auto; padding: 0 11px; display: flex; align-items: center; color: var(--civ-mobile-muted); }
  .civ-mobile-note-list > article > footer button { padding: 0 10px; border: 0; border-left: 1px solid var(--civ-mobile-ink); background: transparent; font: inherit; }
  .civ-mobile-note-list > article > footer button:last-child { color: #FFF; background: var(--civ-mobile-ink); }

  .civ-mobile-bottom-nav {
    width: min(480px, 100vw); min-height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); position: fixed; left: 50%; bottom: 0; z-index: 60; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--civ-mobile-ink); border-top-width: 2px;
    background: rgba(244, 241, 232, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .civ-mobile-bottom-nav button { min-width: 0; min-height: 58px; padding: 7px 3px 6px; border: 0; border-right: 1px solid var(--civ-mobile-ink); background: transparent; }
  .civ-mobile-bottom-nav button:last-child { border-right: 0; }
  .civ-mobile-bottom-nav button b, .civ-mobile-bottom-nav button span { display: block; }
  .civ-mobile-bottom-nav button b { font: 900 10px var(--f-mono); }
  .civ-mobile-bottom-nav button span { margin-top: 3px; overflow: hidden; font: 750 6.5px var(--f-mono); text-overflow: ellipsis; white-space: nowrap; }
  .civ-mobile-bottom-nav button.is-active { color: #FFF; background: var(--civ-mobile-ink); }
  .civ-mobile-bottom-nav button.is-create { color: #FFF; background: var(--civ-mobile-red); }
  .civ-mobile-bottom-nav button.is-notebook { color: var(--civ-mobile-red); }
  .civ-mobile-bottom-nav button.is-notebook.is-active { color: #FFF; background: var(--civ-mobile-red); }

  @keyframes civ-mobile-color-pass {
    0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 1; }
    18.53%, 26.19% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; }
    31.94%, 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 0; }
  }
  @keyframes civ-mobile-register-red { 0%, 5.11% { opacity: 0; transform: translate(-9px, 5px); } 10.86%, 21.40% { opacity: .8; transform: translate(-9px, 5px); } 31.94%, 100% { opacity: 0; transform: translate(0, 0); } }
  @keyframes civ-mobile-register-blue { 0%, 7.99% { opacity: 0; transform: translate(8px, -4px); } 13.42%, 23% { opacity: .72; transform: translate(8px, -4px); } 31.94%, 100% { opacity: 0; transform: translate(0, 0); } }
  @keyframes civ-mobile-register-green { 0%, 10.86% { opacity: 0; transform: translate(3px, 7px); } 15.97%, 24.28% { opacity: .62; transform: translate(3px, 7px); } 31.94%, 100% { opacity: 0; transform: translate(0, 0); } }
  @keyframes civ-mobile-bar-red { 0%, .56% { transform: scaleX(0); transform-origin: left; opacity: .8; } 9.58% { transform: scaleX(1); transform-origin: left; opacity: .8; } 9.76% { transform: scaleX(1); transform-origin: right; opacity: .8; } 17.92%, 100% { transform: scaleX(0); transform-origin: right; opacity: 0; } }
  @keyframes civ-mobile-bar-blue { 0%, 2.08% { transform: scaleX(0); transform-origin: left; opacity: .8; } 11.11% { transform: scaleX(1); transform-origin: left; opacity: .8; } 11.28% { transform: scaleX(1); transform-origin: right; opacity: .8; } 19.44%, 100% { transform: scaleX(0); transform-origin: right; opacity: 0; } }
  @keyframes civ-mobile-bar-green { 0%, 3.61% { transform: scaleX(0); transform-origin: left; opacity: .8; } 12.64% { transform: scaleX(1); transform-origin: left; opacity: .8; } 12.81% { transform: scaleX(1); transform-origin: right; opacity: .8; } 20.97%, 100% { transform: scaleX(0); transform-origin: right; opacity: 0; } }
  @keyframes civ-mobile-geometry { to { transform: translate(-12px, 12px) rotate(6deg); } }
  @keyframes civ-mobile-chrono-frame { 0%, 10% { transform: translate(45%, 0); } 27%, 72% { transform: translate(0, 0); } 88%, 100% { transform: translate(0, 110%); } }
  @keyframes civ-mobile-chrono-disc { 0%, 100% { transform: translate(18%, -12%) rotate(0); } 50% { transform: translate(-8%, 10%) rotate(24deg); } }
  @keyframes civ-mobile-chrono-bar { 0%, 8% { transform: scaleX(0); transform-origin: left; } 22%, 34% { transform: scaleX(1); transform-origin: left; } 35% { transform-origin: right; } 52%, 100% { transform: scaleX(0); transform-origin: right; } }
  @keyframes civ-mobile-chrono-judge { 0%, 100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
  @keyframes civ-mobile-chrono-axis { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
  @keyframes civ-mobile-chrono-tech { 0%, 100% { transform: translate(16px, -10px) rotate(0); } 50% { transform: translate(-12px, 12px) rotate(90deg); } }
  @keyframes civ-mobile-chrono-tech-frame { 0%, 100% { transform: translate(18px, -10px); } 50% { transform: translate(-12px, 14px); } }
  @keyframes civ-mobile-chrono-network { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.08); } }
  @keyframes civ-mobile-chrono-node { 0%, 100% { transform: translate(-8px, 8px) scale(.88); } 50% { transform: translate(12px, -8px) scale(1.04); } }
  @keyframes civ-mobile-chrono-time-orbit { to { transform: rotate(360deg); } }
  @keyframes civ-mobile-chrono-time-hand { to { transform: rotate(360deg); } }
  @keyframes civ-mobile-chrono-ethics { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(12px); } }
  @keyframes civ-mobile-reader-orbit { to { transform: rotate(360deg); } }
  @keyframes civ-mobile-reader-balance { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
  @keyframes civ-mobile-reader-tech { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 12px); } }
  @keyframes civ-mobile-reader-network { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.04); } }
  @keyframes civ-mobile-reader-hand { to { transform: rotate(360deg); } }
  @keyframes civ-mobile-reader-ethics { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }
  @keyframes civ-mobile-note-orbit { to { transform: rotate(360deg); } }
  @keyframes civ-mobile-note-register { 0%, 100% { transform: translate(-8px, 8px); } 50% { transform: translate(10px, -8px); } }
@media (max-width: 520px) {
  .civilization-page.civilization-app-page { width: 100%; margin: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .civ-mobile-word-color, .civ-mobile-word-offset, .civ-mobile-word-bars b, .civ-mobile-geometry, .civ-mobile-chrono-disc, .civ-mobile-chrono-frame, .civ-mobile-chrono-bar, .civ-mobile-reader-figure i, .civ-mobile-reader-figure i::before, .civ-mobile-reader-figure i::after, .civ-mobile-notebook-head > i { animation: none; }
}