/* v3.9 · dark starfield. All backgrounds are CSS; no video, blur, or particle DOM. */
:root {
  color-scheme: dark;
  --portal-motion-version: 3.9;
  --bg: #04070e;
  --paper: #101c2b;
  --surface: #122235;
  --ink: #f0f6ff;
  --muted: #afbed2;
  --teal: #81e3dc;
  --teal-deep: #9af2e7;
  --mint: #153c42;
  --violet: #c0b3ff;
  --line: #31455d;
  --on-accent: #062329;
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --page-gutter: clamp(28px, 6vw, 120px);
  --section-space: clamp(30px, 4.8vw, 72px);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  /* The static dark fallback also works before JavaScript, or with it disabled. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
a, button, input { outline-offset: 5px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #89efe3; }
button:focus-visible { position: relative; z-index: 2; }
::selection { background: #b8c0ff; color: #080f1b; }
[hidden] { display: none !important; }
.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; }
.skip { position: fixed; left: 14px; top: 12px; z-index: 99; max-width: calc(100% - 28px); padding: 10px 20px; background: var(--teal-deep); color: var(--on-accent); transform: translateY(-180%); border-radius: 10px; overflow-wrap: anywhere; font-weight: 700; }
.skip:focus { transform: translateY(0); }
.shell { width: min(1480px, calc(100% - var(--page-gutter))); min-width: 0; margin-inline: auto; }
body > .masthead, body > main, body > .footer, body > aside, body > .logo-intro-notice, body > noscript { position: relative; z-index: 1; }
.ambient { display: none; }

/* Fixed to the viewport, including at the footer: never a full-document GPU texture. */
.portal-motion {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint;
  background:
    radial-gradient(circle at 5% 14%, #d6e7ff80 0 .7px, transparent 1.4px),
    radial-gradient(circle at 11% 63%, #a9e7eb6b 0 .8px, transparent 1.5px),
    radial-gradient(circle at 17% 35%, #e7edff70 0 .7px, transparent 1.3px),
    radial-gradient(circle at 22% 88%, #c8caff75 0 .8px, transparent 1.5px),
    radial-gradient(circle at 29% 8%, #d8ebff80 0 .7px, transparent 1.4px),
    radial-gradient(circle at 34% 55%, #b8d9ff5e 0 .6px, transparent 1.3px),
    radial-gradient(circle at 40% 77%, #d6e7ff70 0 .7px, transparent 1.4px),
    radial-gradient(circle at 47% 26%, #b9deec6b 0 .8px, transparent 1.5px),
    radial-gradient(circle at 53% 94%, #cbd5ff70 0 .7px, transparent 1.4px),
    radial-gradient(circle at 59% 48%, #d6e7ff5e 0 .6px, transparent 1.3px),
    radial-gradient(circle at 65% 12%, #e7edff75 0 .8px, transparent 1.5px),
    radial-gradient(circle at 71% 69%, #a9e7eb6b 0 .7px, transparent 1.4px),
    radial-gradient(circle at 78% 33%, #c8caff80 0 .7px, transparent 1.4px),
    radial-gradient(circle at 84% 87%, #d8ebff70 0 .8px, transparent 1.5px),
    radial-gradient(circle at 91% 52%, #b9deec6b 0 .6px, transparent 1.3px),
    radial-gradient(circle at 96% 7%, #e7edff70 0 .7px, transparent 1.4px),
    radial-gradient(ellipse at 16% 18%, #0e2536 0, transparent 54%),
    radial-gradient(ellipse at 84% 73%, #111525 0, transparent 58%),
    linear-gradient(145deg, #04070e, #0c232f 49%, #04070e);
}
.portal-motion::before {
  content: "";
  position: absolute;
  /* 5% overscan per edge. The 2.5% travel remains comfortably inside this crop. */
  inset: -5%;
  opacity: .76;
  transform: translate3d(0, 0, 0);
  background:
    radial-gradient(ellipse at 18% 26%, #17516a75 0, transparent 43%),
    radial-gradient(ellipse at 76% 24%, #3a346859 0, transparent 42%),
    radial-gradient(ellipse at 68% 84%, #13505b70 0, transparent 46%),
    radial-gradient(ellipse at 36% 68%, #0d142b94 0, transparent 48%);
}
.portal-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .65;
  background:
    radial-gradient(circle at 8% 39%, #dff7ff 0 .8px, #7ebde83b 1.2px, transparent 3px),
    radial-gradient(circle at 19% 75%, #d0cbff 0 .7px, transparent 2px),
    radial-gradient(circle at 31% 20%, #dcffff 0 .8px, transparent 2px),
    radial-gradient(circle at 43% 91%, #a9d5ff 0 .7px, transparent 2px),
    radial-gradient(circle at 56% 6%, #d0cbff 0 .8px, transparent 2px),
    radial-gradient(circle at 67% 57%, #dcffff 0 .7px, transparent 2px),
    radial-gradient(circle at 79% 16%, #dff7ff 0 .8px, #7ebde83b 1.2px, transparent 3px),
    radial-gradient(circle at 89% 78%, #d0cbff 0 .8px, transparent 2px),
    radial-gradient(circle at 95% 32%, #dcffff 0 .7px, transparent 2px);
}
@media (prefers-reduced-motion: no-preference) {
  .portal-motion.is-ready::before { animation: portal-field-drift 28s ease-in-out -7s infinite alternate; }
  .portal-motion.is-ready::after { animation: portal-star-twinkle 8s ease-in-out -2s infinite alternate; }
  .portal-motion.is-paused::before, .portal-motion.is-paused::after,
  body.intro-open .portal-motion::before, body.intro-open .portal-motion::after { animation-play-state: paused; }
  @keyframes portal-field-drift {
    from { transform: translate3d(-2.5%, -2%, 0); opacity: .6; }
    to { transform: translate3d(2.5%, 2%, 0); opacity: .92; }
  }
  @keyframes portal-star-twinkle { from { opacity: .35; } to { opacity: .86; } }
}

/* Near-opaque surfaces keep text stable as the ambient field moves behind them. */
.masthead { min-height: 78px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: clamp(10px, 1.2vw, 16px); align-items: center; min-width: 0; max-width: 100%; flex: 1 1 190px; }
.brand-mark { width: 48px; min-height: 48px; flex: 0 0 48px; display: grid; place-items: center; position: relative; padding: 6px; border: 1px solid #3c6576; border-radius: 15px 15px 15px 5px; background: linear-gradient(145deg, #183440, #142236 62%, #23263f); color: var(--teal-deep); box-shadow: inset 0 1px 0 #c7efff14, 0 6px 18px #00000030; font-size: 20px; font-weight: 800; letter-spacing: -1px; overflow-wrap: anywhere; }
.brand-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.brand-mark span { position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; background: var(--violet); border-radius: 50%; box-shadow: 0 0 0 4px #0b1421; }
.brand-name { min-width: 0; font-size: clamp(17px, 1.5vw, 23px); font-weight: 750; letter-spacing: 1.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.brand-name small { display: block; font-size: 9px; letter-spacing: 1.7px; font-weight: 650; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.masthead nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 29px); align-items: center; justify-content: flex-end; min-width: 0; max-width: 100%; flex: 0 1 auto; font-size: 12px; }
.nav-directory { min-width: 0; color: var(--muted); overflow-wrap: anywhere; padding-block: 9px; }
.nav-main { display: flex; align-items: center; justify-content: center; gap: 20px; min-width: 0; max-width: 100%; border: 1px solid #406276; border-radius: 999px; padding: 9px 18px; background: #142638f5; box-shadow: 0 3px 12px #00000024, inset 0 1px 0 #dbf3ff0d; color: #c7f6f1; font-weight: 650; overflow-wrap: anywhere; }
.nav-main > span:first-child { flex-shrink: 0; font-size: 20px; line-height: 1; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); align-items: center; position: relative; min-height: 0; padding-block: clamp(18px, 2vw, 28px); gap: clamp(20px, 2.3vw, 34px); }
.hero-copy { min-width: 0; max-width: 940px; }
.eyebrow { font-size: 10px; letter-spacing: 2.3px; line-height: 1.8; color: var(--teal); font-weight: 750; margin: 0 0 17px; overflow-wrap: anywhere; }
.hero .eyebrow { display: inline-flex; max-width: 100%; gap: 8px; align-items: center; padding: 5px 10px; margin: 0 0 10px; border: 1px solid #355967; border-radius: 999px; background: #112733ed; font-size: clamp(10px, .85vw, 12px); line-height: 1.6; letter-spacing: .08em; }
.hero .eyebrow > span { width: 4px; height: 4px; flex: 0 0 4px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 4px #81e3dc12; }
.hero h1 { font-weight: 700; font-size: clamp(28px, 2.75vw, 42px); line-height: 1.3; letter-spacing: -.5px; margin: 0 0 10px; max-width: 920px; text-wrap: balance; overflow-wrap: anywhere; color: #f4f7ff; text-shadow: 0 3px 24px #04070e40; }
.hero-intro { font-size: clamp(13px, 1.05vw, 15px); line-height: 1.75; color: var(--muted); max-width: 760px; margin: 0 0 14px; overflow-wrap: anywhere; }
.hero-link { display: inline-flex; gap: 20px; align-items: center; justify-content: space-between; min-height: 42px; max-width: 100%; font-size: 12px; font-weight: 700; padding: 8px 16px; border: 1px solid #5da89e; border-radius: 12px; background: linear-gradient(125deg, #8be5d6, #acd5f1); box-shadow: 0 5px 18px #00000030, inset 0 1px 0 #ffffff30; color: var(--on-accent); overflow-wrap: anywhere; }
.hero-link span { flex-shrink: 0; font-size: 20px; line-height: 1; }
/* Legacy vector artwork remains compatible with the same compact dark theme. */
.hero-art { position: relative; min-width: 0; width: 100%; max-width: 300px; height: clamp(190px, 17vw, 230px); justify-self: end; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 5% 7%; z-index: -2; border-radius: 50%; background: radial-gradient(ellipse at 35% 45%, #22716f44, transparent 62%), radial-gradient(ellipse at 72% 56%, #7461a847, transparent 64%); }
.art-grid { position: absolute; inset: 0; background-image: radial-gradient(#a2c1ea42 .8px, transparent .8px); background-size: 19px 19px; -webkit-mask-image: radial-gradient(ellipse, #000 23%, transparent 71%); mask-image: radial-gradient(ellipse, #000 23%, transparent 71%); }
.art-circle { position: absolute; width: min(59%, 176px); aspect-ratio: 1; border: 1px solid #6fc7ca42; border-radius: 50%; z-index: -1; }
.circle-one { background: radial-gradient(circle at 35% 30%, #1a474b55, #1623332b 65%, #29264f44); box-shadow: inset 0 0 30px #8ccbdd0a; }
.circle-two { width: min(78%, 234px); border-style: dashed; border-color: #9292d447; transform: rotate(18deg); }
.connection-lines { position: absolute; width: 100%; height: 100%; color: #64a6b6; }
.connection-lines circle { fill: #8fd6d4; stroke: #10212f; stroke-width: 4px; }
.hub-tile { width: 124px; min-height: 120px; max-width: 75%; position: relative; padding: 23px 10px 12px; border: 1px solid #3c6479; border-radius: 18px; background: linear-gradient(145deg, #1a3544 8%, #152a39 58%, #282841 100%); box-shadow: 0 24px 48px #00000035, inset 0 1px 0 #dbf3ff14; transform: rotate(-7deg); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hub-window { position: absolute; top: 11px; left: 13px; display: flex; gap: 4px; }
.hub-window i { width: 3px; height: 3px; border-radius: 50%; background: #87d9d7; }
.hub-window i:first-child { background: var(--violet); }
.hub-tile svg { width: 68px; max-width: 100%; height: 55px; margin-bottom: 7px; fill: #204d50; stroke: #8ce7db; stroke-width: 1.5; stroke-linejoin: round; }
.hub-tile svg path:first-child { fill: #3f827e; }
.hub-tile > span:last-child { color: #c4d9e5; font-size: 5.5px; font-weight: 750; letter-spacing: 1px; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.mini-tile { position: absolute; width: 42px; height: 42px; border: 1px solid #3a5a71; border-radius: 12px; background: linear-gradient(145deg, #1d3446, #172738); color: #a4dcf5; box-shadow: 0 10px 24px #00000030, inset 0 1px 0 #dbf3ff12; display: grid; place-items: center; }
.mini-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-code { left: 10%; top: 15%; transform: rotate(-9deg); }
.tile-chart { right: 10%; top: 10%; background: linear-gradient(145deg, #24334c, #19293c); color: #afcaff; transform: rotate(9deg); }
.tile-connect { left: 11%; bottom: 8%; background: linear-gradient(145deg, #1c3a3c, #173038); color: #91e5d7; transform: rotate(6deg); }
.tile-spark { right: 8%; bottom: 10%; border-color: #554c78; background: linear-gradient(145deg, #352e4e, #25243e); color: var(--violet); transform: rotate(-8deg); }
.tile-spark svg { fill: #514779; }
.art-spark { position: absolute; font-size: 16px; font-weight: 300; color: #88cfcc; }
.spark-one { top: 1%; left: 34%; }
.spark-two { bottom: 0; right: 30%; color: var(--violet); }
.art-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #a4b7db; }
.dot-one { top: 43%; right: 1%; }
.dot-two { bottom: 29%; left: 2%; background: #82c9c7; }

.directory { padding-top: 0; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 16px; }
.section-heading > div:first-child { min-width: 0; flex: 1 1 180px; }
.section-heading .eyebrow { margin-bottom: 3px; font-size: 8px; letter-spacing: 2px; }
.section-heading h2 { font-size: clamp(21px, 1.85vw, 28px); font-weight: 700; letter-spacing: .1px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.heading-dot { color: var(--violet); }
.site-total { display: flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
.site-total strong { font-size: clamp(28px, 2.5vw, 36px); font-weight: 450; letter-spacing: -1.5px; line-height: 1.2; color: var(--teal); overflow-wrap: anywhere; }
.site-total span { font-size: 11px; color: var(--muted); letter-spacing: 1px; overflow-wrap: anywhere; }
.directory-tools { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; flex: 1 1 390px; }
.filter { max-width: 100%; min-width: 0; border: 1px solid #6f8ca6; background: #111d2ef5; color: #bfcee1; border-radius: 10px; padding: 9px 14px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; min-height: 44px; line-height: 1.7; text-align: center; }
.filter.active { background: linear-gradient(120deg, #8be5d6, #b8c0ff); border-color: #a4e7df; box-shadow: 0 4px 16px #00000035; color: var(--on-accent); font-weight: 750; }
.search { display: flex; align-items: center; gap: 10px; width: min(100%, 290px); min-width: 0; flex: 0 1 290px; border: 1px solid #6f8ca6; border-radius: 12px; padding: 5px 14px; background: #101c2bf7; color: #a7c8df; box-shadow: inset 0 1px 0 #dbf3ff0a; }
.search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px #81e3dc26; }
.search svg { height: 17px; width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.search input { border: 0; background: transparent; color: var(--ink); caret-color: var(--teal); font-size: 12px; width: 100%; padding: 6px 0; min-width: 0; }
.search input::placeholder { color: #afbed2; opacity: 1; }
.search input:focus-visible { outline: none; }
.site-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(20px, 2vw, 30px); }
.site-card { --card-accent: #81dfcf; --card-tint: #183c41; position: relative; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(145deg, #142234f7, #101a2bf7); border: 1px solid #33485f; border-radius: 22px; padding: 11px 11px 0; box-shadow: 0 12px 30px #00000030, 0 1px 3px #00000024, inset 0 1px 0 #d1eaff0a; }
.site-card:nth-child(3n + 2) { --card-accent: #9cbcff; --card-tint: #24354f; }
.site-card:nth-child(3n) { --card-accent: #c0b3ff; --card-tint: #332d4f; }
.site-card::before { content: ""; pointer-events: none; position: absolute; top: -1px; left: 25px; right: 25px; height: 2px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--card-accent), transparent); opacity: .72; }
.site-card:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px #81e3dc26, 0 12px 30px #00000040; }
.card-image { position: relative; overflow: hidden; background: #0c1726; border: 1px solid #4a62796b; border-radius: 13px; aspect-ratio: 16 / 10; flex: 0 0 auto; }
.card-image img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.image-index { position: absolute; left: 12px; top: 12px; color: #effbff; background: #0b1726ed; border: 1px solid #7b9bb66b; border-radius: 7px; padding: 4px 8px; font-size: 9px; font-weight: 600; letter-spacing: 1px; box-shadow: 0 2px 7px #00000030; }
.image-index span { color: #b7c8dc; margin: 0 2px; }
.card-content { padding: clamp(20px, 1.8vw, 26px) clamp(12px, 1.3vw, 20px) 19px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; margin-bottom: 11px; }
.category { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font-size: 10px; color: #c0cee1; letter-spacing: .5px; font-weight: 700; overflow-wrap: anywhere; }
.category::before { content: ""; display: block; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 2px; background: var(--card-accent); }
.current-site { min-width: 0; max-width: 100%; font-size: 9px; color: #8ff1d5; padding: 2px 7px; background: #13382f; border: 1px solid #3f7364; border-radius: 5px; overflow-wrap: anywhere; }
.card-content h3 { font-size: clamp(20px, 1.65vw, 24px); font-weight: 700; line-height: 1.5; letter-spacing: .1px; margin: 0 0 7px; color: var(--ink); overflow-wrap: anywhere; }
.card-url { margin: 0 0 13px; color: #9bcaee; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.8; letter-spacing: -.1px; overflow-wrap: anywhere; word-break: normal; }
.description { font-size: 13px; line-height: 1.9; color: var(--muted); margin: 0 0 23px; overflow-wrap: anywhere; }
.open-site { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; margin-top: auto; border-top: 1px solid #34465d; padding-top: 13px; font-size: 12px; font-weight: 700; color: #c7f6f1; min-height: 46px; overflow-wrap: anywhere; }
.open-site > span:first-child { min-width: 0; }
.link-arrow { display: grid; place-items: center; flex: 0 0 32px; height: 32px; background: var(--card-tint); border: 1px solid #4d6681; border-radius: 11px; font-size: 18px; font-weight: 400; }
.empty-state { text-align: center; border: 1px dashed #526d89; padding: clamp(32px, 5vw, 64px) 20px; border-radius: 22px; background: #101c2bf7; overflow-wrap: anywhere; }
.empty-state > span { font-size: 40px; color: var(--teal); }
.empty-state h3 { font-size: 20px; font-weight: 650; }
.empty-state p, .no-sites { color: var(--muted); overflow-wrap: anywhere; }
.empty-state button { max-width: 100%; background: var(--teal-deep); border: 1px solid #a4e7df; border-radius: 10px; padding: 12px 22px; color: var(--on-accent); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.directory-end { display: flex; align-items: center; justify-content: center; gap: 18px; margin: clamp(29px, 3vw, 43px) 0 clamp(32px, 4vw, 56px); }
.directory-end p { min-width: 0; font-size: 8px; letter-spacing: 1.8px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.directory-end > span { width: 42px; height: 1px; flex: 0 1 42px; background: linear-gradient(90deg, transparent, #617d99); }
.directory-end > span:last-child { transform: rotate(180deg); }

.closing { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 36px; padding: clamp(26px, 3.2vw, 46px); background: linear-gradient(115deg, #122d36f5, #152437f7 60%, #24223cf7); border: 1px solid #3c536c; border-radius: 22px; margin-bottom: clamp(32px, 3.5vw, 50px); box-shadow: inset 0 1px 0 #dbf3ff0e, 0 8px 24px #00000026; }
.closing::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 90% 0, transparent 95px, #a4b5ff17 96px, transparent 97px), radial-gradient(circle at 90% 0, transparent 125px, #a4b5ff17 126px, transparent 127px); pointer-events: none; }
.closing > div { min-width: 0; flex: 1 1 300px; }
.closing .eyebrow { font-size: 8px; margin-bottom: 9px; }
.closing h2 { font-size: clamp(22px, 2vw, 29px); font-weight: 650; line-height: 1.6; margin: 0; letter-spacing: .3px; overflow-wrap: anywhere; }
.closing-link { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-width: 0; max-width: 100%; flex: 0 1 auto; color: #c7f6f1; font-size: 13px; font-weight: 700; position: relative; z-index: 1; overflow-wrap: anywhere; }
.closing-link > span:first-child { min-width: 0; }
.closing-link small { display: block; color: #b9c9e0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.8; font-weight: 400; margin-top: 4px; overflow-wrap: anywhere; }
.closing-link > span:nth-child(2) { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; border: 1px solid #546c84; background: #23384bf2; box-shadow: inset 0 1px 0 #dbf3ff10; font-size: 23px; font-weight: 400; flex-shrink: 0; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--line); padding: 28px 0 32px; gap: 22px 30px; color: var(--muted); font-size: 10px; }
.footer > div { min-width: 0; max-width: 100%; }
.footer > div:first-child { flex: 1 1 260px; }
.footer-brand { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; max-width: 100%; font-size: 17px; letter-spacing: 1.5px; color: #d2e5f6; font-weight: 700; overflow-wrap: anywhere; }
.footer-brand span { min-width: 0; font-size: 7px; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; }
.footer p { margin: 7px 0 0; overflow-wrap: anywhere; }
.footer-right { text-align: right; }
.footer-right > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; margin-top: 10px; }
.footer-right a { min-width: 0; overflow-wrap: anywhere; }

.motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 2px; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #4b6079; border-radius: 11px; background: #142235f7; color: #dce9f7; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.motion-toggle-status { color: #bfcee1; font-size: 11px; }
.motion-toggle[aria-pressed="true"] { border-color: #5eaaa1; background: #123436f7; color: #c7f6f1; }
.motion-toggle[aria-pressed="true"] .motion-toggle-status { color: #a9e6db; }
.motion-toggle:disabled { cursor: default; color: #afbed2; opacity: 1; }
.motion-toggle--floating { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 4px 18px #00000050; }
body.has-floating-motion-control { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.motion-toggle--floating:focus-visible { position: fixed; z-index: 50; }

/* Hover movement is reserved for precise pointing devices; focus works everywhere. */
@media (hover: hover) and (pointer: fine) {
  .nav-directory, .footer a { transition: color .18s ease; }
  .nav-main, .hero-link, .filter, .motion-toggle, .closing-link > span:nth-child(2), .link-arrow { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .site-card { transition: border-color .23s ease, transform .23s ease, box-shadow .23s ease; }
  .card-image img { transition: transform .45s ease; }
  .nav-directory:hover, .footer a:hover { color: var(--teal-deep); }
  .nav-main:hover { border-color: #78c2bd; background: #1d3b4c; box-shadow: 0 4px 14px #00000035; }
  .hero-link:hover { border-color: #bdfff3; background: #b4f3e7; box-shadow: 0 6px 20px #00000040; }
  .filter:not(.active):hover { background: #21354a; border-color: #6d9eaf; color: #e0fbf7; }
  .motion-toggle:not(:disabled):hover { border-color: #81c9c3; }
  .site-card:hover { border-color: #6b9aab; transform: translateY(-4px); box-shadow: 0 18px 36px #00000045, 0 3px 8px #00000030; }
  .site-card:hover .card-image img { transform: scale(1.025); }
  .open-site:hover .link-arrow, .closing-link:hover > span:nth-child(2) { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--on-accent); }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; }
  .hero-art { height: 190px; }
  .site-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 27px); }
  .card-content { padding: 22px 16px 20px; }
  .card-content h3 { font-size: clamp(21px, 2.3vw, 24px); }
}
@media (max-width: 960px) {
  .directory-tools { align-items: stretch; gap: 14px; }
  .filters { flex-basis: 100%; }
  .search { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 900px) {
  .hero { display: block; padding-block: 20px; }
  .hero-art { display: none; }
  .hero-copy, .hero h1 { max-width: 100%; }
}
@media (max-width: 640px) {
  :root { --page-gutter: clamp(28px, 8vw, 46px); }
  /* Mobile composites just one animated layer; the points remain still. */
  .portal-motion.is-ready::before { animation-duration: 36s; }
  .portal-motion.is-ready::after { animation: none; opacity: .6; }
  .masthead { min-height: 78px; gap: 14px; padding-block: 12px; }
  .brand { flex-basis: 165px; gap: 10px; }
  .brand-mark { width: 42px; min-height: 42px; flex-basis: 42px; border-radius: 13px 13px 13px 4px; font-size: 18px; }
  .brand-mark svg { width: 29px; height: 29px; }
  .brand-name { font-size: 18px; letter-spacing: 1px; }
  .brand-name small { font-size: 7px; letter-spacing: 1.1px; margin-top: 4px; }
  .masthead nav { font-size: 10px; flex-shrink: 1; }
  .nav-directory { display: none; }
  .nav-main { gap: 10px; padding: 9px 12px; }
  .nav-main > span:first-child { font-size: 17px; }
  .hero { padding-block: 18px; }
  .hero h1 { font-size: clamp(26px, 6.7vw, 34px); line-height: 1.3; margin-bottom: 10px; letter-spacing: 0; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 9px; padding: 4px 9px; letter-spacing: .02em; }
  .hero-intro { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
  .hero-link { font-size: 11px; padding: 7px 14px; }
  .section-heading { padding-top: 15px; margin-bottom: 14px; gap: 12px; }
  .section-heading > div:first-child { flex-basis: 160px; }
  .section-heading .eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .section-heading h2 { font-size: clamp(20px, 4.5vw, 26px); letter-spacing: 0; }
  .site-total { flex-direction: column; align-items: center; gap: 0; }
  .site-total strong { font-size: 31px; }
  .site-total span { font-size: 8px; letter-spacing: .5px; }
  .directory-tools { gap: 13px; margin-bottom: 16px; }
  .filters { gap: 6px; }
  .filter { padding: 8px 12px; font-size: 11px; }
  .search { padding-block: 6px; }
  .site-list { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .site-card { border-radius: 20px; padding: 10px 10px 0; }
  .card-content { padding: 21px 14px 19px; }
  .card-content h3 { font-size: clamp(21px, 5.5vw, 25px); }
  .description { font-size: 13px; margin-bottom: 22px; }
  .directory-end { margin: 28px 0 33px; gap: 10px; }
  .directory-end p { font-size: 7px; letter-spacing: 1px; }
  .directory-end > span { width: 20px; flex-basis: 20px; }
  .closing { padding: clamp(22px, 5vw, 30px); align-items: flex-start; flex-direction: column; gap: 22px; border-radius: 18px; margin-bottom: 32px; }
  .closing > div { flex: 0 1 auto; }
  .closing h2 { font-size: clamp(21px, 5vw, 25px); }
  .closing-link { width: 100%; gap: 16px; }
  .closing-link > span:nth-child(2) { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }
  .footer { align-items: flex-start; flex-direction: column; padding: 25px 0 28px; gap: 18px; }
  .footer > div:first-child { flex: 0 1 auto; }
  .footer-brand { font-size: 16px; gap: 4px 12px; }
  .footer-brand span { font-size: 7px; }
  .footer-right { text-align: left; width: 100%; }
  .footer-right > div { justify-content: space-between; }
  .footer-right p { font-size: 9px; }
  .motion-toggle { padding-inline: 9px; font-size: 10px; }
  .motion-toggle-status { font-size: 10px; }
}
@media (max-width: 370px) {
  .masthead { align-items: flex-start; }
  .brand { flex-basis: 100%; }
  .brand-name { font-size: 17px; }
  .masthead nav { width: 100%; justify-content: space-between; gap: 12px; }
  .nav-directory { display: block; }
  .nav-main { flex: 0 1 auto; }
  .card-content { padding-inline: 11px; }
  .filter { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .portal-motion::before { transform: none; opacity: .76; }
  .portal-motion::after { opacity: .6; }
  .site-card:hover, .site-card:hover .card-image img { transform: none; }
}
@media print {
  :root { color-scheme: light; --bg: #fff; --paper: #fff; --ink: #111; --muted: #333; --teal: #222; --teal-deep: #222; --line: #aaa; }
  html, body { background: #fff !important; color: #111 !important; }
  body.has-floating-motion-control { padding-bottom: 0; }
  .portal-motion, .ambient, .hero-art, .directory-tools, .nav-main, .motion-toggle, .closing, .footer-right > div { display: none !important; }
  .shell { width: 100%; }
  .masthead { min-height: 75px; }
  .hero { display: block; padding-block: 16px; }
  .hero h1 { font-size: 27px; color: #111; text-shadow: none; }
  .hero .eyebrow { background: #fff; border-color: #aaa; color: #222; }
  .hero-link { display: none; }
  .brand-name, .brand-name small, .nav-directory, .eyebrow, .site-total strong, .site-total span, .category, .card-content h3, .card-url, .description, .directory-end p, .footer, .footer-brand, .footer-brand span { color: #111 !important; }
  .site-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .site-card { break-inside: avoid; border: 1px solid #aaa; background: #fff; box-shadow: none; padding: 6px 6px 0; }
  .site-card::before { display: none; }
  .card-image { border-color: #aaa; }
  .image-index { color: #111; background: #fff; border-color: #777; box-shadow: none; }
  .image-index span { color: #333; }
  .current-site { color: #111; background: #fff; border-color: #777; }
  .card-content { padding: 12px 6px; }
  .card-content h3 { font-size: 15px; }
  .description { font-size: 10px; }
  .card-url { font-size: 9px; }
  .open-site { display: none; }
  .empty-state { background: #fff; border-color: #777; }
  .empty-state button { color: #111; background: #fff; border: 1px solid #777; }
  .directory-end { margin-bottom: 25px; }
}