/* Shared art direction: ECHO / The Continuity Engine. */
.future-site {
  --bg: var(--echo-ground);
  --text: var(--echo-ink);
  --muted: var(--echo-ink-muted);
  --dim: var(--echo-ink-faint);
  --line: var(--echo-line);
  --line-strong: var(--echo-line-strong);
  --blue: var(--echo-ink-muted);
  --cyan: var(--echo-core);
  --violet: var(--echo-ink-muted);
  --accent: var(--echo-core);
  --content: 1360px;
  --gutter: clamp(24px, 4.6vw, 88px);
  --mono: var(--echo-font-telemetry);
  background: var(--bg);
  color: var(--text);
}
.future-site main { background: var(--bg); }
.future-site a:focus-visible, .future-site button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.skip-link { position: fixed; top: 10px; left: 12px; transform: translateY(-180%); padding: 14px 20px; z-index: 100; border-radius: var(--echo-radius-sm); color: var(--echo-on-action); background: var(--echo-action); }
.skip-link:focus { transform: none; }
.reading-progress { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--accent); pointer-events: none; }
.future-site .site-header, .future-site .universe-header { height: 88px; grid-template-columns: 1fr auto 1fr; border-bottom: 1px solid var(--line); }
.future-site .site-header::before, .future-site .universe-header::before { background: linear-gradient(rgba(9, 10, 12, .929), rgba(9, 10, 12, .6) 70%, rgba(9, 10, 12, 0)); }
.future-site .site-header.is-scrolled, .future-site .universe-header.scrolled { height: 72px; }
.future-site .site-header.is-scrolled::before, .future-site .universe-header.scrolled::before { background: rgba(9, 10, 12, .851); backdrop-filter: blur(20px); }
.future-site .brand { gap: 12px; min-height: 44px; }
.future-site .brand .echo-wordmark-svg { width: auto; height: 19px; }
.future-site .main-nav, .future-site .universe-nav { gap: clamp(20px, 2.5vw, 40px); }
.future-site .main-nav a, .future-site .universe-nav a { min-height: 44px; display: flex; align-items: center; font-size: 11px; color: var(--echo-ink-muted); letter-spacing: .08em; }
.future-site .main-nav a::after { background: var(--accent); }
.future-site .locale-switch button { min-width: 32px; min-height: 44px; color: var(--echo-ink-muted); font-size: 10px; }
.future-site .locale-switch button.active { color: var(--accent); }
.future-site .enter-link, .future-site .back-echo { border: 1px solid var(--echo-line-strong); min-height: 38px; border-radius: var(--echo-radius-sm); background: transparent; color: var(--echo-ink); font-size: 10px; transition: border-color var(--echo-duration-fast) var(--echo-ease), background var(--echo-duration-fast) var(--echo-ease); }
.future-site .enter-link i { background: var(--echo-core); box-shadow: none; }
.future-site .enter-link:hover, .future-site .back-echo:hover { border-color: var(--echo-line-strong); background: var(--echo-line); }
.future-site .universe-brand { min-height: 44px; }

/* A single viewport-sized canvas, with a CSS fallback when canvas is unavailable. */
.future-site .future-hero { position: relative; isolation: isolate; display: block; height: min(980px, 100svh); min-height: 820px; max-height: none; overflow: hidden; background: var(--echo-ground); }
.future-site .future-hero::before { content: ""; position: absolute; z-index: 2; inset: 0; opacity: .16; background-image: url("/home/assets/grain.svg"); background-size: 180px; mask-image: none; pointer-events: none; }
.future-site .future-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(9, 10, 12, .467) 0%, transparent 56%), linear-gradient(0deg, var(--echo-ground) 0%, transparent 25%); pointer-events: none; }
.singularity-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.singularity-fallback { position: absolute; right: -4%; top: 17%; width: 54%; aspect-ratio: 1; border: 1px solid rgba(238, 241, 244, .31); border-radius: 50%; background: radial-gradient(ellipse, var(--echo-ground) 42%, rgba(102, 117, 136, .467) 43%, rgba(238, 241, 244, .502) 44%, transparent 45%, rgba(121, 135, 154, .141) 53%, transparent 69%); transform: rotate(-30deg) scaleY(.7); box-shadow: none; }
.scene-ready .singularity-fallback { display: none; }
.hero-coordinate, .hero-bottomline { position: absolute; z-index: 4; width: min(calc(100% - var(--gutter) * 2), var(--content)); left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; }
.hero-coordinate { top: 122px; font: 9px var(--mono); letter-spacing: .13em; color: var(--echo-ink-muted); }
.hero-coordinate > span::before { content: "+"; margin-right: 15px; color: var(--echo-ink-muted); }
.future-hero-copy { position: relative; z-index: 3; width: min(calc(100% - var(--gutter) * 2), var(--content)); margin: 0 auto; padding-top: clamp(176px, 22vh, 235px); pointer-events: none; }
.future-hero-copy a { pointer-events: auto; }
.signal-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--echo-ink-muted); font: 10px var(--mono); letter-spacing: .16em; }
.signal-eyebrow > i { width: 6px; height: 6px; border-radius: 50%; background: var(--echo-core); box-shadow: var(--echo-glow-core); animation: echo-core-breathe 2.4s ease-in-out infinite; }
/* The hero carries the drawn ECHO wordmark (inline SVG), never live text set in a font. */
.future-site .echo-wordmark { --wordmark-width: clamp(338px, 39vw, 560px); position: relative; display: block; width: fit-content; margin: 0 0 34px; color: var(--echo-ink); line-height: 0; }
.future-site .echo-wordmark .echo-wordmark-svg { width: var(--wordmark-width); height: auto; }
.future-site .echo-wordmark > span { position: absolute; left: calc(100% + 20px); bottom: 6px; width: max-content; padding: 0; margin: 0; color: var(--echo-ink-muted); font: 500 9px/1 var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; white-space: nowrap; }
.hero-manifesto { margin: 0 0 23px; color: var(--echo-ink); font-size: clamp(25px, 3.3vw, 46px); line-height: 1.12; font-weight: 360; letter-spacing: -.045em; }
.hero-manifesto > span { color: var(--echo-ink-muted); }
.future-hero-title { margin: 0 0 14px; color: var(--echo-ink); font-size: 19px; font-weight: 400; letter-spacing: .17em; line-height: 1.5; }
.future-hero-description { max-width: 370px; margin: 0; font-size: 12px; line-height: 1.95; color: var(--echo-ink-muted); letter-spacing: .04em; }
.future-hero-actions { margin-top: 29px; display: flex; align-items: center; gap: 27px; }
.future-primary { min-height: 50px; min-width: 183px; display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 21px; background: var(--echo-action); color: var(--echo-on-action); border: 1px solid var(--echo-action); border-radius: var(--echo-radius-sm); font-size: 11px; font-weight: 500; letter-spacing: .07em; transition: opacity var(--echo-duration-fast) var(--echo-ease); }
.future-primary b { font-size: 20px; font-weight: 400; }
.future-primary:hover { opacity: .88; }
.future-secondary { min-height: 48px; display: inline-flex; align-items: center; gap: 16px; color: var(--echo-ink-muted); font-size: 11px; }
.future-secondary:hover { color: var(--accent); }
.future-secondary > span:last-child { font-size: 16px; }
.orbital-caption { position: absolute; z-index: 3; right: max(var(--gutter), calc((100vw - var(--content)) / 2)); bottom: 170px; display: flex; align-items: center; gap: 15px; color: var(--echo-ink-muted); font: 9px var(--mono); letter-spacing: .12em; pointer-events: none; }
.crosshair { color: var(--echo-ink-muted); font: 150 34px var(--echo-font-sans); }
.orbital-caption b, .orbital-caption div > span { display: block; font-weight: 400; }
.orbital-caption div > span { margin-top: 7px; font-size: 7px; color: var(--echo-ink-muted); }
.hero-bottomline { bottom: 27px; padding-top: 21px; border-top: 1px solid var(--echo-line); }
.future-scroll { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--echo-ink-muted); font-size: 10px; letter-spacing: .12em; }
.scroll-orbit { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--echo-line-strong); border-radius: 50%; font-size: 17px; transition: transform .2s; }
.future-scroll:hover .scroll-orbit { transform: translateY(3px); color: var(--accent); }
.hero-frequency { display: flex; align-items: center; gap: 3px; color: var(--echo-ink-muted); font: 8px var(--mono); letter-spacing: .14em; }
.hero-frequency i { width: 2px; height: 5px; background: var(--echo-ink-muted); animation: frequency 2.4s ease-in-out infinite alternate; }
.hero-frequency i:nth-child(3n) { height: 20px; animation-delay: -.8s; }
.hero-frequency i:nth-child(3n + 1) { height: 10px; animation-delay: -1.4s; }
.hero-frequency > span { margin-left: 16px; }
.scene-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; color: var(--echo-ink-muted); cursor: pointer; font: 9px var(--mono); letter-spacing: .08em; }
.scene-toggle:hover { color: var(--accent); }
.scene-toggle[hidden] { display: none; }
.pause-icon { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.motion-paused .pause-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

/* Three distinct destinations, treated as windows rather than dashboard cards. */
.gateway-section { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 1fr 1fr 1fr; width: min(calc(100% - var(--gutter) * 2), var(--content)); margin: 0 auto; padding: 36px 0 44px; gap: 16px; scroll-margin-top: 90px; }
.gateway-intro { display: flex; flex-direction: column; justify-content: center; padding-right: 20px; }
.gateway-intro > span { font-size: 17px; line-height: 1.3; letter-spacing: -.035em; font-weight: 420; }
.gateway-intro > p { margin: 17px 0 0; font-size: 10px; color: var(--echo-ink-muted); line-height: 1.7; }
.gateway { position: relative; overflow: hidden; min-height: 175px; padding: 23px; border: 1px solid var(--line); border-radius: var(--echo-radius-md); background: var(--echo-surface); transition: border-color .3s, background .3s; }
.gateway:hover { border-color: var(--echo-line-strong); background-color: var(--echo-surface-raised); }
.gateway-index { display: block; position: relative; z-index: 2; color: var(--echo-ink-muted); font: 8px var(--mono); letter-spacing: .1em; }
.gateway > strong { display: block; position: relative; z-index: 2; margin-top: 21px; font-size: 13px; line-height: 1.5; font-weight: 400; max-width: 190px; }
.gateway-bottom { position: absolute; z-index: 2; left: 23px; right: 23px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; color: var(--echo-ink-muted); font: 7px var(--mono); letter-spacing: .09em; }
.gateway-bottom b { color: var(--accent); font-size: 20px; font-weight: 400; transition: transform .2s; }
.gateway:hover .gateway-bottom b { transform: translate(3px, -3px); }
.gateway-orbit { position: absolute; width: 140px; height: 140px; right: -50px; top: 22px; border: 1px solid var(--echo-line-strong); border-radius: 50%; transform: rotate(-35deg) scaleX(.7); box-shadow: none; }
.gateway-orbit::after { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(238, 241, 244, .161); border-radius: 50%; }
.gateway-grid { position: absolute; right: -14px; top: 19px; width: 100px; height: 130px; background-image: linear-gradient(var(--echo-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--echo-line-strong) 1px, transparent 1px); background-size: 18px 18px; transform: perspective(150px) rotateY(-30deg) rotateX(15deg); mask-image: linear-gradient(90deg, transparent, #000); }
.gateway-story { background-image: linear-gradient(90deg, rgba(9, 10, 12, .937), rgba(9, 10, 12, .533)), url('/universe/novel/assets/illustration-white-harbor-agnes-v1.png'); background-size: cover; background-position: center 45%; }
.epoch-divider { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 24px var(--gutter); border-block: 1px solid var(--line); background: var(--echo-surface); color: var(--echo-ink-muted); font-family: var(--echo-font-display); font-size: clamp(11px, 1.05vw, 15px); letter-spacing: .22em; font-weight: 400; overflow: hidden; white-space: nowrap; }
.epoch-divider i { color: var(--echo-ink-faint); font-size: 15px; font-style: normal; }

/* Consistent editorial rhythm across the existing content. */
.future-site .site-section, .future-site .universe-section, .future-site .canon-snapshot { background: transparent; border-color: var(--line); }
.future-site .site-section::before { pointer-events: none; }
.future-site .section-copy .kicker, .future-site .kicker { color: var(--echo-ink-muted); font-family: var(--echo-font-display); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.future-site .section-copy h2, .future-site .section-heading h2 { font-weight: 380; letter-spacing: -.05em; font-size: clamp(34px, 3.8vw, 58px); }
.future-site .section-body, .future-site .heading-copy, .future-site .atlas-copy > p:not(.kicker) { color: var(--echo-ink-muted); font-size: 13px; line-height: 1.9; }
.future-site .localized-line { color: var(--echo-ink); }
.future-site .ecosystem-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 70px; padding-block: 130px; }
.future-site .ecosystem-copy h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.18; }
.future-site .ecosystem-copy h2 span { color: var(--echo-ink-muted); font-size: 1em; font-weight: inherit; }
.future-site .ecosystem-map { border-radius: var(--echo-radius-lg); border-color: var(--line); background: radial-gradient(ellipse at 50% 46%, rgba(238, 241, 244, .05), transparent 60%), var(--echo-surface); }
.future-site .epoch-map::before { background-image: linear-gradient(rgba(238, 241, 244, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 241, 244, .035) 1px, transparent 1px); }
.future-site .epoch-map::after { color: var(--echo-ink-muted); }
.future-site .ecosystem-orbit { border-color: var(--echo-line-strong); }
.future-site .ecosystem-core { border-color: var(--echo-line-strong); background: var(--echo-surface-raised); box-shadow: var(--echo-shadow-raised); }
.future-site .ecosystem-core::before, .future-site .ecosystem-core::after { border-color: var(--echo-line); }
.future-site .ecosystem-node { border-radius: var(--echo-radius-md); border-color: var(--line); background: var(--echo-surface-raised); }
.future-site .ecosystem-node b, .future-site .era-signals b { color: var(--echo-ink-muted); }
.future-site .ecosystem-node strong { color: var(--echo-ink); }
.future-site .ecosystem-node small, .future-site .identity-anchor small, .future-site .era-signals small { color: var(--echo-ink-muted); }
.future-site .identity-anchor { color: var(--echo-ink-muted); }
.future-site .era-signals span { background: linear-gradient(90deg, var(--echo-surface), transparent); border-color: var(--echo-line-strong); }
.future-site .products-section { background: transparent; }
.future-site .product-card, .future-site .capability-card, .future-site .capability-core, .future-site .capability-identity, .future-site .agent-card, .future-site .flow-board, .future-site .roadmap-stages article, .future-site .enter-panel, .future-site .product-backplane { border-radius: var(--echo-radius-md); border-color: var(--line); background-color: var(--echo-surface); }
.future-site .flow-board, .future-site .enter-panel { border-radius: var(--echo-radius-lg); }
.future-site .system-card, .future-site .agent-card { background: var(--echo-surface); }
.future-site .product-card:hover, .future-site .agent-card:hover { border-color: var(--echo-line-strong); background: var(--echo-surface-raised); }
.future-site .product-copy h3 { color: var(--echo-ink); font-weight: 450; }
.future-site .product-role { color: var(--echo-ink-muted); }
.future-site .product-copy > p:last-child, .future-site .agent-card > p, .future-site .capability-card p, .future-site .roadmap-stages p { color: var(--echo-ink-muted); }
.future-site .product-index, .future-site .product-signal { color: var(--echo-ink-muted); }
/* Status tags: like a nameplate on an instrument. Release stages are neutral and told apart by their
   label and a short line, never by colour: beta solid, preview dashed, private dotted, concept a dashed frame. */
.future-site .status { gap: 7px; border-radius: var(--echo-radius-xs); background: transparent; border-color: var(--echo-line-strong); color: var(--echo-ink-muted); font-family: var(--echo-font-telemetry); font-weight: 500; letter-spacing: .08em; }
.future-site .status::before { content: ""; flex: none; width: 10px; height: 2px; background: currentColor; }
.future-site .status-beta { color: var(--echo-ink); }
.future-site .status-preview::before { background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px, currentColor 6px); }
.future-site .status-private::before { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.future-site .status-concept { border-style: dashed; }
.future-site .status-concept::before { content: none; }
:root[lang^="zh"] .future-site .status { letter-spacing: 0; }
.future-site .product-backplane { background: var(--echo-surface); }
.future-site .product-backplane b, .future-site .product-backplane span { color: var(--echo-ink-muted); }
.future-site .capability-core, .future-site .capability-identity { background: var(--echo-surface); }
.future-site .capability-core { border-radius: var(--echo-radius-lg); }
.future-site .capability-core::before, .future-site .capability-core::after { border-color: var(--echo-line-strong); }
.future-site .universe-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 70px; }
.future-site .universe-visual { border-radius: var(--echo-radius-lg); border-color: var(--line); background: radial-gradient(ellipse, rgba(238, 241, 244, .04), transparent), var(--echo-surface); }
.future-site .universe-orbit { border-color: var(--echo-line-strong); }
.future-site .universe-feature { border-radius: var(--echo-radius-md); border-color: var(--line); background: var(--echo-surface-raised); }
.future-site .universe-feature b { color: var(--echo-ink-muted); }
.future-site .universe-feature span { color: var(--echo-ink-muted); }
.future-site .outline-link { border-color: var(--echo-line-strong); color: var(--echo-ink); border-radius: var(--echo-radius-sm); min-height: 46px; }
.future-site .outline-link b { color: var(--accent); }
.future-site .final-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 70px; }
.future-site .enter-panel { background: var(--echo-surface); }
.future-site .site-footer small, .future-site .site-footer nav a { color: var(--echo-ink-muted); }
.future-site .final-section::before { background: radial-gradient(ellipse, rgba(238, 241, 244, .05), transparent 68%); }
.future-site .roadmap-stages span { color: var(--echo-ink-muted); }
.future-site .result-bubble { color: var(--echo-ink); }
.future-site .result-bubble i { border-color: var(--echo-core); color: var(--echo-core); box-shadow: none; }

/* Universe continues the same visual language; all narrative controls remain intact. */
.universe-edition .canon-snapshot { padding-block: 85px; }
.universe-edition .canon-snapshot h2 { font-weight: 350; font-size: clamp(25px, 3vw, 42px); }
.universe-edition .question-grid article { border-color: var(--line); background: var(--echo-surface); border-radius: var(--echo-radius-md); }
.universe-edition .question-grid article > span { color: var(--echo-ink-muted); }
.universe-edition .question-grid p { color: var(--echo-ink); }
.universe-edition .season-focus, .universe-edition .atlas-board, .universe-edition .media-focus, .universe-edition .governance-flow article, .universe-edition .protocol-list article { border-radius: var(--echo-radius-md); border-color: var(--line); background: var(--echo-surface); }
.universe-edition .season-focus, .universe-edition .atlas-board, .universe-edition .media-focus { border-radius: var(--echo-radius-lg); }
.universe-edition .season-focus { position: relative; }
.universe-edition .season-focus::before { opacity: .25; }
.universe-edition [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.universe-edition .season-tab { border-radius: var(--echo-radius-md); }
.universe-edition .atlas-tab, .universe-edition .media-tab { border-radius: var(--echo-radius-sm); }
.universe-edition .season-tab.active, .universe-edition .atlas-tab.active, .universe-edition .media-tab.active { color: var(--echo-ink); border-color: var(--echo-line-strong); background: var(--echo-surface-raised); }
.universe-edition .atlas-node { border-radius: var(--echo-radius-md); }
.universe-edition .atlas-node.active { border-color: var(--echo-core); background: var(--echo-surface-raised); color: var(--echo-ink); }
.universe-edition .atlas-detail, .universe-edition .canon-rule { border-color: var(--line); }
.universe-edition .atlas-detail p, .universe-edition .season-focus > p, .universe-edition .media-copy > p { color: var(--echo-ink-muted); }
.universe-edition .atlas-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); }
.universe-edition .community-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); }
.universe-edition .badge { border-radius: var(--echo-radius-xs); }
.universe-edition .final-universe { border-radius: var(--echo-radius-lg); background: var(--echo-surface); }
.universe-edition .final-universe p { color: var(--echo-ink-muted); }

@keyframes frequency { from { transform: scaleY(.35); opacity: .4; } to { transform: scaleY(1); opacity: .8; } }
@keyframes future-arrive { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .future-hero-copy { animation: future-arrive 1s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (min-width: 1700px) { .future-site .future-hero { min-height: 900px; } }
@media (max-width: 1150px) {
  .future-site .site-header, .future-site .universe-header { grid-template-columns: auto 1fr auto; gap: 30px; }
  .future-site .main-nav, .future-site .universe-nav { justify-content: center; gap: 20px; }
  .future-site .main-nav a, .future-site .universe-nav a { font-size: 10px; }
  .future-site .enter-link { min-width: 104px; }
  .future-site .ecosystem-layout, .future-site .universe-layout { gap: 30px; }
  .gateway-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gateway-intro { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 14px; }
  .gateway-intro > span br { display: none; }
  .gateway-intro > p { margin: 0; }
  .orbital-caption { bottom: 140px; }
}
@media (max-width: 1000px) {
  .universe-edition .atlas-layout, .universe-edition .community-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .future-site { --gutter: 26px; }
  .future-site .site-header, .future-site .universe-header { height: 70px; min-height: 70px; grid-template-columns: 1fr auto; gap: 0; }
  .future-site .site-header.is-scrolled, .future-site .universe-header.scrolled { height: 70px; }
  .future-site .main-nav, .future-site .universe-nav { position: absolute; top: 70px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); display: flex; justify-content: flex-start; padding: 0 var(--gutter); height: 44px; gap: 27px; overflow-x: auto; scrollbar-width: none; background: rgba(9, 10, 12, .929); border-bottom: 1px solid var(--line); }
  .future-site .main-nav a, .future-site .universe-nav a { font-size: 10px; }
  .future-site .site-header::before, .future-site .universe-header::before { bottom: -44px; }
  .future-site .future-hero { min-height: 850px; }
  .hero-coordinate { top: 146px; font-size: 8px; }
  .future-hero-copy { padding-top: 206px; }
  .future-site .echo-wordmark { --wordmark-width: clamp(300px, 52vw, 455px); }
  .hero-manifesto { font-size: 34px; }
  .future-hero-description { max-width: 320px; }
  .orbital-caption { bottom: 150px; right: 26px; font-size: 8px; }
  .hero-frequency { display: none; }
  .future-site .ecosystem-layout, .future-site .universe-layout, .future-site .final-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 85px; }
  .future-site .final-layout { padding-bottom: 120px; }
  .future-site .ecosystem-map { height: 530px; }
  .future-site .universe-visual { min-height: 550px; }
  .future-site .ecosystem-copy h2 { max-width: 620px; }
  .epoch-divider { gap: 17px; padding-block: 21px; font-size: 12px; }
  .epoch-divider i { font-size: 16px; }
  .future-site .site-section, .future-site .universe-section, .future-site .canon-snapshot, .gateway-section { scroll-margin-top: 132px; }
}
@media (max-width: 600px) {
  .future-site { --gutter: 22px; }
  .future-site .brand .echo-wordmark-svg { height: 16px; }
  .future-site .header-actions, .future-site .universe-actions { gap: 8px; }
  .future-site .locale-switch button { min-width: 30px; min-height: 44px; }
  .future-site .enter-link, .future-site .back-echo { min-width: 92px; font-size: 9px; min-height: 36px; padding-inline: 10px; }
  .future-site .main-nav, .future-site .universe-nav { gap: 26px; }
  .future-site .main-nav a, .future-site .universe-nav a { font-size: 10px; letter-spacing: .04em; }
  .future-site .future-hero { height: auto; min-height: 970px; }
  .hero-coordinate { top: 138px; font-size: 7px; }
  .hero-coordinate > span:last-child { display: none; }
  .future-hero-copy { padding-top: 185px; padding-bottom: 130px; }
  .signal-eyebrow { font-size: 8px; margin-bottom: 24px; }
  .future-site .echo-wordmark { --wordmark-width: clamp(240px, 68vw, 400px); margin-bottom: 24px; }
  .future-site .echo-wordmark > span { left: calc(100% + 12px); font-size: 7px; }
  .hero-manifesto { font-size: 27px; margin-bottom: 288px; }
  .future-hero-title { font-size: 17px; letter-spacing: .11em; }
  .future-hero-description { max-width: 340px; font-size: 12px; }
  .future-hero-actions { gap: 20px; margin-top: 22px; }
  .future-primary { min-width: 167px; min-height: 47px; padding-inline: 16px; }
  .future-secondary { font-size: 10px; gap: 8px; }
  .orbital-caption { display: none; }
  .hero-bottomline { bottom: 17px; padding-top: 13px; }
  .future-scroll { font-size: 9px; }
  .scene-toggle { font-size: 8px; }
  .singularity-fallback { top: 368px; right: 3%; width: 95%; }
  .gateway-section { grid-template-columns: 1fr; padding-block: 30px 36px; gap: 12px; }
  .gateway-intro { display: block; padding-bottom: 14px; }
  .gateway-intro > span { font-size: 15px; }
  .gateway-intro > p { margin-top: 10px; }
  .gateway { min-height: 156px; }
  .gateway > strong { max-width: 230px; margin-top: 18px; }
  .gateway-story { background-position: center 48%; }
  .epoch-divider { font-size: 9px; gap: 12px; letter-spacing: .05em; }
  .epoch-divider span:last-child, .epoch-divider i:last-of-type { display: none; }
  .future-site .section-copy h2, .future-site .section-heading h2 { font-size: 34px; }
  .future-site .ecosystem-copy h2 { font-size: 31px; }
  .future-site .era-signals { grid-template-columns: 1fr; }
  .future-site .ecosystem-map { height: 560px; }
  .future-site .node-cloud, .future-site .node-devices { top: 41%; }
  .future-site .ecosystem-core { top: 44%; width: 80px; }
  .future-site .epoch-core strong { width: 38px; }
  .future-site .epoch-core span { bottom: 9px; font-size: 5px; }
  .future-site .ecosystem-node { width: 100px; padding: 9px; }
  .future-site .universe-visual { min-height: 620px; }
  .universe-edition .future-hero-title { font-size: 16px; letter-spacing: .05em; }
  .universe-edition .future-hero { min-height: 960px; }
  .universe-edition .future-secondary { max-width: 130px; }
}
/* With the sound switch in the header, "进入 ECHO" no longer fits beside it below ~410px:
   it wrapped onto two lines and pushed the switch against the wordmark. */
@media (max-width: 410px) {
  .future-site .header-actions .enter-link { display: none; }
}
@media (max-width: 370px) {
  .future-site { --gutter: 17px; }
  .future-hero-actions { gap: 12px; }
  .future-primary { min-width: 151px; font-size: 10px; }
  .future-site .echo-wordmark > span { left: calc(100% + 9px); }
}
@media (pointer: coarse) {
  .future-site .locale-switch button { min-width: 44px; min-height: 44px; }
  .future-site .enter-link, .future-site .back-echo { min-height: 44px; }
  .future-site .main-nav, .future-site .universe-nav { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .future-site *, .future-site *::before, .future-site *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}