@font-face {
  font-family: "JetBrainsMono Nerd Font Mono";
  src: url("fonts/JetBrainsMonoNerdFontMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMono Nerd Font Mono";
  src: url("fonts/JetBrainsMonoNerdFontMono-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #0b1119;
  --void-warm: #13161c;
  --panel: #111d29;
  --panel-bright: #172a38;
  --paper: #edf0df;
  --ink: #dfe8df;
  --soft: #a6b8b1;
  --quiet: #708986;
  --rule: #2b4c54;
  --aqua: #75dfd1;
  --sun: #ffc867;
  --rose: #ff9fa3;
  --violet: #b9a6ff;
  --lime: #b3e285;
  --measure: 92rem;
  --ui-size: .74rem;
  font-family: "JetBrainsMono Nerd Font Mono", "JetBrains Mono", ui-monospace,
    SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html {
  min-width: 20rem;
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% -18%, rgb(86 210 196 / 16%), transparent 33rem),
    radial-gradient(circle at -10% 14%, rgb(255 196 103 / 10%), transparent 27rem),
    linear-gradient(145deg, rgb(13 27 40 / 92%), rgb(10 14 22 / 98%) 62%, rgb(21 18 36 / 96%));
  line-height: 1.72;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .32;
  background-image:
    linear-gradient(rgb(134 188 182 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(134 188 182 / 5%) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

a { color: inherit; text-decoration-color: rgb(117 223 209 / 57%); text-underline-offset: .17em; }
a:hover { color: var(--aqua); }

button,
input { color: inherit; font: inherit; }

button { border: 0; }
button:not(:disabled) { cursor: pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-en { display: none; }
html[data-language="en"] .language-kai { display: none; }
html[data-language="en"] .language-en { display: inline; }
html[data-language="en"] .language-en.block { display: block; }
html[data-language="kai"] .language-kai.block { display: block; }

.page-shell { width: min(100% - 1.25rem, var(--measure)); margin: clamp(.5rem, 2vw, 1.65rem) auto; }

.writer-monitor {
  position: relative;
  padding: clamp(.35rem, 1.1vw, .9rem) clamp(.35rem, 1.1vw, .9rem) 0;
}

/* The US$3.14 Monitor: off-white, almost gray, softly yellowed, visibly
   chipped, and still convinced it can contain a whole cosmos. */
.monitor-case {
  position: relative;
  padding: clamp(.65rem, 1.5vw, 1.25rem) clamp(.65rem, 1.5vw, 1.25rem) .78rem;
  isolation: isolate;
  border: 1px solid #8f8b7c;
  border-radius: 1.5rem 1.5rem .85rem .85rem;
  background:
    radial-gradient(circle at 9% 6%, rgb(255 250 213 / 72%), transparent 11rem),
    radial-gradient(circle at 88% 98%, rgb(136 116 76 / 18%), transparent 15rem),
    linear-gradient(150deg, #d9d4c3, #bbb5a3 48%, #cec8b6);
  box-shadow: 0 1.3rem 2.2rem rgb(0 0 0 / 38%), inset .08rem .08rem rgb(255 255 246 / 72%), inset -.16rem -.16rem rgb(90 88 77 / 22%);
}

.monitor-case::before,
.monitor-case::after {
  position: absolute;
  z-index: 3;
  width: 1.3rem;
  height: 1.3rem;
  pointer-events: none;
  content: "";
}
.monitor-case::before { top: -.08rem; left: -.08rem; border-top: .25rem solid #767368; border-left: .25rem solid #767368; border-radius: .35rem 0 0; transform: rotate(-4deg); }
.monitor-case::after { right: -.08rem; bottom: 1.65rem; border-right: .3rem solid #777367; border-bottom: .18rem solid #777367; border-radius: 0 0 .35rem; transform: rotate(3deg); }

.monitor-top-bezel { display: flex; justify-content: center; gap: .32rem; height: .45rem; margin-bottom: .45rem; }
.monitor-top-bezel span { width: .2rem; height: .2rem; border-radius: 50%; background: rgb(77 76 70 / 38%); box-shadow: inset 0 .05rem rgb(255 255 246 / 55%); }

.monitor-screen {
  position: relative;
  z-index: 1;
  max-height: min(79svh, 58rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: .42rem solid #4f514a;
  border-radius: 1.05rem 1.05rem .55rem .55rem;
  background: #060b10;
  box-shadow: inset 0 0 0 .12rem #151713, inset 0 0 2.8rem rgb(0 0 0 / 82%);
  scrollbar-color: #809a93 #101820;
}

.monitor-screen::after {
  position: sticky;
  z-index: 30;
  top: 0;
  display: block;
  height: 0;
  pointer-events: none;
  box-shadow: inset 0 1.5rem 1.5rem -1.5rem rgb(255 255 237 / 18%);
  content: "";
}

.browser-window {
  min-height: calc(100svh - 6rem);
  overflow: visible;
  border: 1px solid #385563;
  border-radius: .62rem;
  background: #0d1723;
  box-shadow: 0 0 0 1px rgb(117 223 209 / 5%) inset;
}

.monitor-lower-bezel { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .65rem; min-height: 2.2rem; padding: .45rem .3rem 0; color: #65645b; }
.monitor-model { display: inline-flex; align-items: center; gap: .23rem; color: #514f47; font-family: Arial, sans-serif; font-size: .47rem; font-weight: 700; letter-spacing: .08em; }
.monitor-model b { font-size: .82rem; font-style: italic; letter-spacing: -.08em; transform: skew(-8deg); }
.monitor-model i { display: block; width: 1.25rem; height: .48rem; border: 1px solid rgb(78 77 70 / 42%); background: linear-gradient(125deg, #67a9b7 0 34%, #e7bd5f 34% 59%, #b46e8d 59%); clip-path: polygon(0 20%, 100% 0, 100% 78%, 0 100%); }
.monitor-model small { color: #777367; font-size: .36rem; letter-spacing: .07em; }
.monitor-led { width: .36rem; height: .36rem; border-radius: 50%; background: #88b96b; box-shadow: 0 0 .45rem #88b96b, inset 0 -.08rem rgb(0 0 0 / 34%); }
.monitor-price-sticker { display: inline-block; padding: .16rem .38rem; color: #3f443d; border: 1px solid #b0924e; background: #e6cf7a; box-shadow: .08rem .08rem 0 rgb(74 67 43 / 25%); font-size: .64rem; font-weight: 700; letter-spacing: -.05em; transform: rotate(-5deg); }
.monitor-silverfish { position: absolute; z-index: 5; right: 6.2rem; bottom: .77rem; width: .88rem; height: .19rem; border-radius: 70% 30% 30% 70%; background: linear-gradient(90deg, #787a77, #d3d3c9 58%, #72736f); box-shadow: .18rem 0 0 -.06rem #a7a9a0; opacity: 0; transform: translate(-1.2rem, .75rem) rotate(18deg) scale(.74); transform-origin: center; will-change: transform, opacity; animation: silverfish-crosses-price 13.5s cubic-bezier(.4, 0, .2, 1) 1.8s infinite; }
.monitor-silverfish::before,
.monitor-silverfish::after { position: absolute; right: -.08rem; width: .28rem; height: 1px; background: #6e706c; content: ""; transform-origin: left center; }
.monitor-silverfish::before { top: -.06rem; transform: rotate(-28deg); }
.monitor-silverfish::after { bottom: -.06rem; transform: rotate(27deg); }

@keyframes silverfish-crosses-price {
  0%, 10% { opacity: 0; transform: translate(-1.2rem, .75rem) rotate(18deg) scale(.74); }
  14% { opacity: .88; transform: translate(-.72rem, .43rem) rotate(10deg) scale(.88); }
  30% { opacity: .94; transform: translate(.55rem, .14rem) rotate(5deg) scale(.94); }
  43% { opacity: .95; transform: translate(2.2rem, -.05rem) rotate(-4deg) scale(1); }
  51% { opacity: .9; transform: translate(3.45rem, .06rem) rotate(9deg) scale(.92); }
  59% { opacity: .45; transform: translate(4.05rem, .42rem) rotate(23deg) scale(.74); }
  63%, 100% { opacity: 0; transform: translate(4.4rem, .78rem) rotate(28deg) scale(.62); }
}

.monitor-stand { display: flex; justify-content: center; height: 1.7rem; }
.monitor-stand span { width: 16%; min-width: 7rem; border: 1px solid #8f8b7c; border-top: 0; background: linear-gradient(90deg, #aaa595, #d1cbbb 50%, #9f9b8d); box-shadow: inset .1rem 0 rgb(255 255 246 / 42%); }
.monitor-stand::after { width: 31%; min-width: 13rem; height: .52rem; align-self: end; border: 1px solid #858174; border-radius: 50% 50% .18rem .18rem; background: linear-gradient(#d2ccbb, #a19c8e); box-shadow: 0 .3rem .55rem rgb(0 0 0 / 22%); content: ""; }

.writer-keyboard { width: min(76%, 52rem); margin: .15rem auto 0; padding: .45rem .8rem .58rem; border: 1px solid #7b786d; border-radius: .22rem .22rem .7rem .7rem; background: linear-gradient(155deg, #d2ccbb, #9d998d); box-shadow: 0 .75rem 1.25rem rgb(0 0 0 / 25%), inset .08rem .08rem rgb(255 255 246 / 48%); transform: perspective(22rem) rotateX(52deg); transform-origin: top; }
.keyboard-row { display: flex; justify-content: center; gap: .22rem; margin-bottom: .2rem; }
.keyboard-row span { display: grid; width: 1.5rem; height: .86rem; place-items: center; color: #b9e7db; border: 1px solid #424943; border-radius: .12rem; background: #1d2524; box-shadow: inset 0 -.09rem #0d1111, 0 0 .25rem rgb(139 255 220 / 12%); font-size: .43rem; }
.keyboard-bottom { margin-bottom: 0; }
.keyboard-row .keyboard-space { width: 9rem; }

.skip-link {
  position: absolute;
  z-index: 5;
  top: -4rem;
  left: 1rem;
  padding: .65rem .85rem;
  color: var(--void);
  background: var(--sun);
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

.browser-chrome { position: sticky; z-index: 20; top: 0; background: linear-gradient(180deg, #142332, #0d1824); }

.browser-tab-strip {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 2.8rem;
  padding: .45rem .7rem 0;
  border-bottom: 1px solid #385563;
  background: linear-gradient(180deg, #1b2d3e, #122232);
}

.browser-tabs { display: flex; align-items: end; min-width: 0; gap: .3rem; overflow-x: auto; }
.browser-tab {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 14rem;
  gap: .42rem;
  padding: .48rem .7rem .45rem;
  color: #93aaa7;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: .48rem .48rem 0 0;
  font-size: .61rem;
  text-decoration: none;
}
.browser-tab > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-tab .tab-icon { color: var(--sun); font-size: .75rem; }
.browser-tab i { margin-left: .2rem; color: #708986; font-size: .72rem; font-style: normal; }
.browser-tab:hover { color: var(--paper); background: rgb(117 223 209 / 8%); }
.browser-tab.is-active { position: relative; color: var(--paper); border-color: #385563; background: #0d1723; }
.browser-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: #0d1723; content: ""; }
.browser-new-tab { padding: .35rem .55rem .5rem; color: #75dfd1; font-size: 1rem; }
.io-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-height: 4.75rem;
  padding: .65rem .8rem;
}

.browser-controls { display: flex; gap: .2rem; }
.browser-control {
  display: grid;
  width: 1.78rem;
  height: 1.78rem;
  place-items: center;
  color: #a6b8b1;
  border: 1px solid #385563;
  border-radius: .35rem;
  background: rgb(6 15 23 / 62%);
  font-size: 1rem;
  line-height: 1;
}
.browser-control:hover { color: #0b1119; border-color: #75dfd1; background: #75dfd1; }
.browser-reload { font-size: .74rem; }

.address-form { min-width: 0; }

.address-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #385563;
  border-radius: .45rem;
  background: rgb(5 12 19 / 76%);
  box-shadow: 0 0 0 1px rgb(117 223 209 / 4%) inset;
}

.address-bar span {
  padding: .5rem .55rem .5rem .72rem;
  color: var(--aqua);
  font-size: .7rem;
}

.address-bar input {
  min-width: 0;
  width: 100%;
  padding: .5rem .72rem .5rem 0;
  color: #c7d8d3;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .72rem;
}

.header-tools { display: flex; align-items: center; justify-content: end; gap: .55rem; }

.language-toggle,
.bookmark-button {
  padding: .48rem .65rem;
  color: var(--soft);
  border: 1px solid var(--rule);
  background: rgb(19 34 46 / 80%);
  font-size: .65rem;
  letter-spacing: .04em;
}

.language-toggle:hover,
.bookmark-button:hover { color: var(--void); border-color: var(--aqua); background: var(--aqua); }
.language-toggle[aria-pressed="true"],
.bookmark-button.is-saved { color: var(--void); border-color: var(--sun); background: var(--sun); }

.network-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .45rem .8rem;
  overflow-x: auto;
  border-top: 1px solid rgb(97 132 141 / 36%);
  border-bottom: 1px solid #385563;
  background: rgb(7 16 25 / 54%);
  scrollbar-width: thin;
}

.bookmark-label { flex: 0 0 auto; margin-right: .22rem; color: #6e9092; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }

.network-nav a {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  flex: 0 0 auto;
  padding: .42rem .6rem;
  color: var(--quiet);
  font-size: .64rem;
  text-decoration: none;
  text-transform: uppercase;
}

.network-nav a[aria-current="page"] { color: var(--aqua); background: rgb(117 223 209 / 9%); }
.network-nav a:hover { color: var(--aqua); }
.bookmark-icon { color: var(--sun); font-size: .69rem; }
.portal-bookmark .bookmark-icon { color: var(--aqua); }

.io-main { padding: clamp(2rem, 5vw, 4.8rem) clamp(.85rem, 2.5vw, 2.8rem) 6.5rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  padding-bottom: clamp(2rem, 6vw, 5.5rem);
}

.eyebrow,
.provenance,
.micro-label,
.network-kicker {
  margin: 0;
  color: var(--aqua);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.hero h1,
.network-masthead h1,
.page-title {
  margin: .65rem 0 1.1rem;
  color: var(--paper);
  font-size: clamp(2.3rem, 7vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -.09em;
  line-height: .98;
}

.lede { max-width: 60ch; margin: 0; color: var(--soft); font-size: clamp(.98rem, 2vw, 1.13rem); }

.cosmos-card {
  position: relative;
  min-height: 13rem;
  padding: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(140deg, rgb(117 223 209 / 12%), rgb(185 166 255 / 7%));
}

.cosmos-card::after {
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgb(255 200 103 / 44%);
  border-radius: 47% 53% 41% 59%;
  content: "";
  transform: rotate(-18deg);
}

.cosmos-card p { max-width: 26ch; margin: 0; color: var(--soft); font-size: .78rem; }
.cosmos-card strong { display: block; margin: 1.25rem 0 .4rem; color: var(--sun); font-size: 1.7rem; letter-spacing: -.07em; }

.section-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.75rem 0 1.1rem; }
.section-header h2 { margin: 0; color: var(--paper); font-size: clamp(1.15rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -.06em; }
.section-header a { flex: 0 0 auto; color: var(--aqua); font-size: .67rem; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.service-card {
  min-height: 11rem;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  background: rgb(15 29 40 / 80%);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.service-card:hover { color: var(--ink); border-color: var(--aqua); background: rgb(31 57 70 / 82%); transform: translateY(-2px); }
.service-card .service-icon { display: block; color: var(--sun); font-size: 1.45rem; }
.service-card h2 { margin: .9rem 0 .35rem; color: var(--paper); font-size: 1rem; font-weight: 600; letter-spacing: -.05em; }
.service-card p { margin: 0; color: var(--soft); font-size: .72rem; line-height: 1.62; }

.transmission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.artifact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: linear-gradient(160deg, rgb(21 42 54 / 81%), rgb(14 25 35 / 88%));
}

.artifact-card[data-provenance="unverified"] { border-color: rgb(185 166 255 / 54%); }
.artifact-card[data-provenance="sponsored"] { border-color: rgb(255 200 103 / 46%); }
.artifact-card[data-provenance="anomalous"] { border-color: rgb(255 159 163 / 48%); }
.artifact-card[hidden] { display: none; }

.artifact-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--quiet); font-size: .59rem; letter-spacing: .07em; text-transform: uppercase; }
.provenance { color: var(--aqua); font-size: .56rem; }
.artifact-card h3 { margin: .95rem 0 .6rem; color: var(--paper); font-size: .92rem; font-weight: 600; letter-spacing: -.045em; line-height: 1.28; }
.artifact-card .artifact-text { margin: 0; color: var(--soft); font-size: .71rem; line-height: 1.68; white-space: pre-line; }
.artifact-social { display: flex; flex-wrap: wrap; align-items: center; gap: .34rem .48rem; margin-top: .75rem; font-size: .52rem; line-height: 1.35; }
.artifact-emoji { font-style: normal; font-size: .86rem; line-height: 1; }
.social-topic { color: inherit; text-decoration: none; white-space: nowrap; }
.social-topic:hover { text-decoration: underline; }
.artifact-card footer { display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .95rem; }
.artifact-author { color: var(--aqua); font-size: .62rem; text-decoration: none; }
.artifact-open { color: var(--sun); font-size: .62rem; }

.filter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: .85rem;
  border: 1px solid var(--rule);
  background: rgb(8 18 27 / 58%);
}

.filter-panel input { min-width: 0; width: 100%; padding: .58rem .68rem; color: var(--paper); border: 1px solid var(--rule); background: rgb(12 25 35 / 80%); font-size: .71rem; }
.filter-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.filter-tags button { padding: .45rem .55rem; color: var(--quiet); border: 1px solid var(--rule); background: transparent; font-size: .58rem; }
.filter-tags button[aria-pressed="true"] { color: var(--void); border-color: var(--aqua); background: var(--aqua); }

.network-masthead { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1.7rem; border-bottom: 1px solid var(--rule); }
.network-masthead h1 { margin-bottom: .55rem; font-size: clamp(2rem, 6vw, 4.6rem); }
.network-masthead p { max-width: 52ch; margin: 0; color: var(--soft); font-size: .82rem; }
.network-icon { flex: 0 0 auto; color: var(--sun); font-size: clamp(2.4rem, 6vw, 5rem); }

.artifact-page { width: min(100%, 62rem); }
.artifact-page article { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--rule); background: rgb(12 27 37 / 81%); }
.artifact-page h1 { margin: .75rem 0 1rem; color: var(--paper); font-size: clamp(1.75rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -.075em; line-height: 1.05; }
.artifact-body { margin: 0; color: var(--ink); font-size: clamp(.94rem, 2vw, 1.08rem); white-space: pre-line; }
.translation-note { margin: 1.5rem 0 0; padding: .85rem; color: var(--soft); border-left: 2px solid var(--sun); background: rgb(255 200 103 / 7%); font-size: .75rem; }
.artifact-details { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.4rem 0 0; }
.tag { display: inline-block; padding: .28rem .45rem; color: var(--aqua); border: 1px solid rgb(117 223 209 / 34%); font-size: .58rem; text-decoration: none; }
.artifact-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.person-page { width: min(100%, 62rem); }
.person-page article { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--rule); background: rgb(12 27 37 / 81%); }
.person-page h1 { margin: .65rem 0; color: var(--paper); font-size: clamp(1.8rem, 5vw, 3.3rem); font-weight: 600; letter-spacing: -.075em; }
.person-page .bio { max-width: 58ch; color: var(--soft); font-size: .86rem; }
.person-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.6rem 0; }
.person-facts div { padding: .65rem; border: 1px solid var(--rule); color: var(--soft); font-size: .65rem; }
.person-facts b { display: block; margin-bottom: .18rem; color: var(--aqua); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; }

.empty-results { display: none; margin: 1rem 0; padding: 1rem; color: var(--soft); border: 1px dashed var(--rule); }
.empty-results.is-visible { display: block; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 7rem; padding: 0 clamp(.85rem, 2.5vw, 2.8rem); color: var(--quiet); border-top: 1px solid var(--rule); font-size: .63rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--aqua); }
.io-parody-disclaimer { max-width: 75ch; }

/* Googol is IO's deliberately old local search engine: cheerful, centered,
   and very certain that a page with a white field can explain the universe. */
.googol-home { min-height: 43rem; padding-top: clamp(2.5rem, 9vw, 7rem); background: #fbfbf5; color: #263845; }
.googol-portal { max-width: 46rem; margin: 0 auto; text-align: center; }
.googol-status { margin: 0 0 1.6rem; color: #68777c; font-family: Arial, sans-serif; font-size: .66rem; letter-spacing: .03em; }
.googol-logo { display: flex; justify-content: center; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.4rem, 13vw, 8.8rem); font-weight: 700; letter-spacing: -.14em; line-height: .82; }
.googol-logo span:nth-child(1) { color: #7bb7ff; }
.googol-logo span:nth-child(2) { color: #ffcc67; }
.googol-logo span:nth-child(3) { color: #ee818f; }
.googol-logo span:nth-child(4) { color: #75dfd1; }
.googol-logo span:nth-child(5) { color: #b9a6ff; }
.googol-logo span:nth-child(6) { color: #b3e285; }
.googol-tagline { margin: 1.3rem 0 1.75rem; color: #475b66; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.googol-form { margin: 0 auto; }
.googol-form input { width: min(100%, 38rem); padding: .82rem 1rem; color: #10202a; border: 2px inset #71939a; border-radius: .15rem; background: #fbf9ed; box-shadow: inset .08rem .08rem .2rem rgb(0 0 0 / 20%); font-family: Arial, sans-serif; font-size: .88rem; }
.googol-form input:focus-visible { outline-color: #ffcc67; }
.googol-form div { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1rem; }
.googol-form button { padding: .55rem .8rem; color: #e8f0e7; border: 2px outset #4f7480; border-radius: .12rem; background: linear-gradient(#537989, #284553); box-shadow: 0 .12rem 0 rgb(0 0 0 / 27%); font-family: Arial, sans-serif; font-size: .7rem; font-weight: 700; }
.googol-form button:hover { color: #10202a; border-color: #ffe172; background: #ffe172; }
.googol-form button:active { border-style: inset; box-shadow: none; transform: translateY(.1rem); }
.googol-fineprint { margin: 1.4rem 0 0; color: #68777c; font-size: .58rem; }
.googol-directory { width: min(100%, 54rem); margin: clamp(3rem, 8vw, 6rem) auto 0; padding: .55rem; color: #40535f; border: 1px solid #b7c3c6; background: #fff; box-shadow: .14rem .14rem 0 rgb(45 69 80 / 11%); font-family: Arial, sans-serif; text-align: left; }
.googol-directory > p { margin: 0 0 .5rem; padding-bottom: .45rem; color: #315e8c; border-bottom: 1px solid #cfd8d9; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.googol-directory > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.googol-directory-link { display: flex; gap: .5rem; min-width: 0; padding: .52rem; color: #40535f; border: 1px solid transparent; text-decoration: none; }
.googol-directory-link:hover { color: #1d4059; border-color: #91b3c0; background: #edf6f8; }
.googol-directory-link .service-icon { flex: 0 0 auto; color: #c76a36; font-size: 1.1rem; }
.googol-directory-link b,
.googol-directory-link small,
.googol-directory-link code { display: block; }
.googol-directory-link b { color: #245e9c; font-size: .72rem; }
.googol-directory-link small { overflow: hidden; margin-top: .12rem; color: #64767a; font-size: .59rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.googol-directory-link code { margin-top: .18rem; color: #61844c; font-size: .52rem; }
.googol-results { margin-top: clamp(3rem, 8vw, 6rem); }
.googol-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.googol-results .section-header h2 { color: #263845; }
.googol-results .micro-label { color: #587782; }
.googol-results .empty-results { color: #53666d; border-color: #aebfc3; background: #fff; }

/*
  Destination interfaces
  ----------------------
  The header remains IO's browser chrome.  Everything below it is allowed to
  become a different public culture: a wire desk, a neighborhood page, a
  short-form stream, an anonymous board, a market, or a civic record.  These
  use recognizable public-interface archetypes without reproducing a real
  service's name, logo, or exact trade dress.
*/
.network-link.service-output-wire:hover { color: #ffc867; }
.network-link.service-nearfield:hover { color: #ffb3c7; }
.network-link.service-drift:hover { color: #8bdfff; }
.network-link.service-hushboard:hover { color: #b9e285; }
.network-link.service-port-exchange:hover { color: #f4a6ff; }
.network-link.service-last-notice:hover { color: #f8e9be; }

.service-card.service-output-wire { border-top: 3px solid #ffc867; }
.service-card.service-nearfield { border-top: 3px solid #ff9fa3; }
.service-card.service-drift { border-top: 3px solid #75dfd1; }
.service-card.service-hushboard { border-top: 3px solid #b3e285; }
.service-card.service-port-exchange { border-top: 3px solid #e7a0ff; }
.service-card.service-last-notice { border-top: 3px solid #f0ddb1; }

.artifact-card.service-output-wire { border-top: 3px solid #ffc867; }
.artifact-card.service-nearfield { border-radius: .65rem; border-color: rgb(255 159 163 / 50%); background: linear-gradient(150deg, rgb(63 40 54 / 92%), rgb(25 31 43 / 92%)); }
.artifact-card.service-drift { border-radius: 1rem; border-color: rgb(117 223 209 / 52%); background: linear-gradient(150deg, rgb(14 42 55 / 92%), rgb(10 24 36 / 92%)); }
.artifact-card.service-hushboard { border-color: rgb(179 226 133 / 48%); background: #0b120a; }
.artifact-card.service-port-exchange { border-color: rgb(231 160 255 / 52%); background: linear-gradient(145deg, rgb(57 29 74 / 95%), rgb(23 28 52 / 95%)); }
.artifact-card.service-last-notice { border-color: rgb(240 221 177 / 48%); background: linear-gradient(145deg, rgb(42 42 37 / 95%), rgb(18 25 29 / 95%)); }

.service-site {
  position: relative;
  margin-top: .8rem;
  padding: clamp(1rem, 3vw, 2.8rem);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.service-site::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: .36rem;
  background: var(--aqua);
  content: "";
}

.service-site > * { position: relative; z-index: 1; }

.service-masthead { padding-top: 1.8rem; }
.service-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 1rem;
  align-items: center;
  margin: 1.15rem 0 2rem;
  padding: .8rem .95rem;
  border: 1px solid var(--rule);
  font-size: .64rem;
}
.service-controls p { margin: 0; color: var(--soft); }
.service-controls small { color: var(--quiet); font-size: .56rem; text-align: right; }
.service-tabs { display: flex; flex-wrap: wrap; gap: .32rem; }
.service-tab { padding: .32rem .46rem; border: 1px solid currentcolor; color: var(--quiet); font-size: .56rem; text-transform: uppercase; }
.service-tab[aria-current="true"] { color: var(--paper); background: var(--panel-bright); }
.service-feed { align-items: start; }

/*
  Destination furniture
  ---------------------
  A browser can keep one set of controls while the places it opens have their
  own civic habits. These are intentionally legible silhouettes: a newspaper
  desk, a neighborhood wall, a fast public stream, an anonymous board, a
  shopping arcade, and a records office. The particular colors, language,
  labels, and local absurdities belong to IO.
*/
.wire-site-layout,
.nearfield-site-layout,
.drift-site-layout,
.market-site-layout,
.notice-site-layout { align-items: start; }

.wire-site-layout {
  display: grid;
  grid-template-columns: minmax(9rem, 11.5rem) minmax(0, 1fr) minmax(10rem, 13rem);
  gap: 1rem;
}
.wire-rail,
.wire-correction-rail {
  padding: .8rem;
  color: #334f5d;
  border-top: .3rem solid #193a4a;
  border-bottom: 1px solid #587986;
  background: rgb(255 252 241 / 64%);
  font-size: .62rem;
}
.wire-rail > p,
.wire-correction-rail > p { margin: 0 0 .6rem; color: #bd571e; font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wire-rail ul,
.wire-correction-rail ul { padding: 0; margin: 0; list-style: none; }
.wire-rail li { padding: .48rem 0; border-top: 1px solid rgb(88 121 134 / 35%); font-weight: 700; text-transform: uppercase; }
.wire-correction-rail strong { display: block; margin: .18rem 0 .4rem; color: #173548; font-size: 1.05rem; line-height: 1.08; }
.wire-correction-rail small { display: block; color: #546d75; line-height: 1.55; }
.wire-correction-rail hr { height: 2px; margin: .9rem 0; border: 0; background: #193a4a; }

.nearfield-site-layout {
  display: grid;
  grid-template-columns: minmax(9.75rem, 12.5rem) minmax(0, 48rem) minmax(10rem, 13rem);
  gap: 1rem;
  justify-content: center;
}
.nearfield-site-layout > div,
.drift-site-layout > div,
.market-site-layout > div,
.notice-site-layout > div { min-width: 0; }
.nearfield-side {
  padding: .78rem;
  border: 1px solid rgb(255 211 219 / 30%);
  border-radius: .8rem;
  background: rgb(35 25 46 / 50%);
  box-shadow: 0 .35rem 1rem rgb(0 0 0 / 9%);
  font-size: .62rem;
}
.nearfield-side > p { margin: 0 0 .55rem; color: #ffb3c7; font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nearfield-side ul { padding: 0; margin: 0 0 .8rem; list-style: none; }
.nearfield-side li { padding: .43rem 0; color: #e9cfd0; border-top: 1px solid rgb(255 211 219 / 14%); }
.nearfield-side strong { display: block; margin-bottom: .38rem; color: #fff2e9; font-size: .78rem; }
.nearfield-side small { display: block; color: #c7a8b2; line-height: 1.55; }
.nearfield-side hr { height: 1px; margin: .85rem 0; border: 0; background: rgb(255 211 219 / 25%); }
.nearfield-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  margin: 0 0 .85rem;
  padding: .7rem .85rem;
  border: 1px solid #af7286;
  border-radius: .8rem;
  background: linear-gradient(145deg, rgb(87 53 75 / 95%), rgb(47 37 59 / 96%));
}
.nearfield-composer p { margin: 0; padding: .5rem .65rem; color: #c7a8b2; border-radius: 999px; background: rgb(255 242 233 / 8%); font-size: .64rem; }
.service-nearfield .nearfield-site-layout .service-feed,
.service-nearfield .nearfield-site-layout .filter-panel { max-width: none; }

.drift-site-layout {
  display: grid;
  grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 45rem) minmax(10rem, 13rem);
  gap: 1.15rem;
  justify-content: center;
}
.drift-rail,
.drift-trends {
  padding: .75rem;
  border: 1px solid rgb(139 223 255 / 27%);
  border-radius: 1rem;
  background: rgb(5 18 29 / 48%);
  font-size: .62rem;
}
.drift-rail { position: sticky; top: 1rem; }
.drift-rail-mark { margin: 0 0 .65rem; color: #8bdfff; font-size: 2rem; line-height: 1; }
.drift-rail ul,
.drift-trends ul { padding: 0; margin: 0 0 .7rem; list-style: none; }
.drift-rail li { padding: .55rem .3rem; color: #cfeef4; border-radius: .5rem; font-weight: 700; }
.drift-rail li:first-child { color: #092131; background: #8bdfff; }
.drift-rail small,
.drift-trends small { display: block; color: #759ca9; line-height: 1.55; }
.drift-trends > p { margin: 0 0 .62rem; color: #8bdfff; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drift-trends li { padding: .52rem 0; color: #cfeef4; border-top: 1px solid rgb(139 223 255 / 15%); font-weight: 700; }
.drift-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .75rem;
  padding: .72rem .9rem;
  color: #8bdfff;
  border: 1px solid #33738a;
  border-radius: 1rem;
  background: rgb(8 29 43 / 86%);
  font-size: .69rem;
}
.drift-composer small { flex: 0 0 auto; padding: .25rem .48rem; color: #082131; border-radius: 999px; background: #8bdfff; font-size: .5rem; font-weight: 700; text-transform: uppercase; }
.service-drift .drift-site-layout .service-feed { max-width: none; }

.hush-site-layout { max-width: 63rem; margin: 0 auto; }
.hush-boardbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .65rem;
  padding: .46rem .7rem;
  color: #40633c;
  border: 1px solid #a4bb8e;
  background: #dbe9cc;
  font-size: .61rem;
}
.hush-boardbar span { color: #275225; text-decoration: underline; text-underline-offset: .14em; }
.hush-boardbar b { margin-left: auto; color: #885d2e; }
.hush-warning { margin: .5rem 0; padding: .52rem .72rem; color: #6d5a37; border: 1px dashed #b69e70; background: #fff6d8; font-size: .6rem; text-align: center; }

.market-site-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: 1rem;
}
.market-rail {
  padding: .85rem;
  border: 1px solid #b26ec1;
  border-radius: .4rem;
  background: linear-gradient(160deg, rgb(73 37 103 / 88%), rgb(40 37 81 / 88%));
  font-size: .62rem;
}
.market-rail > p { margin: 0 0 .55rem; color: #ffe172; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.market-rail ul { padding: 0; margin: 0; list-style: none; }
.market-rail li { padding: .52rem 0; color: #f1d6f5; border-top: 1px solid rgb(255 220 255 / 16%); }
.market-rail hr { height: 1px; margin: .82rem 0; border: 0; background: rgb(255 220 255 / 25%); }
.market-rail small { color: #cfaed4; line-height: 1.55; }
.market-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .9rem;
  padding: .78rem .95rem;
  color: #38204d;
  border: 1px solid #ffe172;
  background: linear-gradient(100deg, #ffe172, #f4a6ff 55%, #75dfd1);
  box-shadow: .22rem .22rem 0 rgb(43 21 68 / 23%);
  font-size: .64rem;
}
.market-promo b { flex: 0 0 auto; font-size: .92rem; }
.market-promo span { max-width: 54ch; font-weight: 700; text-align: right; }
.service-port-exchange .market-site-layout .service-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.notice-site-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 53rem);
  gap: 1.25rem;
  justify-content: center;
}
.notice-rail {
  padding: .82rem;
  border: 1px solid #9a9c8d;
  background: rgb(255 253 244 / 52%);
  font-size: .62rem;
}
.notice-rail > p { margin: 0 0 .6rem; color: #496a68; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.notice-rail ul { padding: 0; margin: 0; list-style: none; }
.notice-rail li { padding: .48rem 0; color: #59675e; border-top: 1px solid #c1c3b1; }
.notice-rail hr { height: 2px; margin: .85rem 0; border: 0; background: #67746c; }
.notice-rail small { display: block; color: #6e7468; line-height: 1.55; }
.notice-intake {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .85rem;
  padding: .7rem .85rem;
  border: 2px double #829087;
  background: rgb(255 252 241 / 70%);
}
.notice-intake span { color: #9d6b37; font-size: 1.4rem; }
.notice-intake p { margin: 0; color: #59675e; font-size: .65rem; }
.service-last-notice .notice-site-layout .service-feed { max-width: none; }

.artifact-detail-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.2rem 0 1.45rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule);
  color: var(--quiet);
  font-size: .59rem;
  line-height: 1.5;
  text-transform: uppercase;
}
.artifact-detail-source span:first-child { color: var(--aqua); font-weight: 700; }

/* Output Wire: an overconfident public newsroom which worships corrections
   almost as much as it avoids making them. */
.service-output-wire .service-site,
.service-output-wire .service-detail {
  --panel: #f6f0df;
  --panel-bright: #e1d6bb;
  --paper: #142737;
  --ink: #203446;
  --soft: #4e6471;
  --quiet: #6d746c;
  --rule: #2e5263;
  --aqua: #0e7a80;
  --sun: #bd571e;
  background: #ede4cf;
  color: #203446;
  box-shadow: 0 .75rem 2.8rem rgb(0 0 0 / 22%);
  font-family: Georgia, "Times New Roman", serif;
}
.service-output-wire .service-site::before { background: #bd571e; }
.service-output-wire .network-kicker,
.service-output-wire .micro-label { color: #bd571e; }
.service-output-wire .network-masthead h1 { max-width: 12ch; text-transform: uppercase; }
.service-output-wire .service-controls { border-width: 2px 0 1px; background: rgb(255 252 241 / 48%); font-family: Arial, sans-serif; }
.service-output-wire .service-tabs { justify-content: end; }
.service-output-wire .service-tab { border-width: 0; border-right: 1px solid #7d8c8d; }
.service-output-wire .service-tab[aria-current="true"] { color: #f6f0df; background: #193a4a; }
.service-output-wire .filter-panel { border-color: #426675; background: #f7f1e2; }
.service-output-wire .filter-panel input { border-color: #71909a; background: #fffdf7; }
.service-output-wire .filter-tags button[aria-pressed="true"] { color: #fffdf7; border-color: #bd571e; background: #bd571e; }
.service-output-wire .service-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-output-wire .wire-card { min-height: 17rem; padding: 1.05rem 1.1rem; border: 1px solid #587986; border-top: .4rem solid #bd571e; border-radius: 0; background: #fffaf0; box-shadow: .22rem .22rem 0 rgb(46 82 99 / 18%); }
.service-output-wire .wire-card:nth-child(5n + 1) { grid-column: span 2; min-height: 14rem; }
.wire-card-header,
.wire-byline { display: flex; justify-content: space-between; gap: .7rem; color: #48606a; font-size: .55rem; letter-spacing: .09em; text-transform: uppercase; }
.wire-card-header span:first-child { color: #bd571e; font-weight: 700; }
.wire-rule { height: 1px; margin: .6rem 0 .85rem; background: #2e5263; }
.service-output-wire .wire-card h3 { margin: 0 0 .7rem; color: #173548; font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: -.07em; line-height: 1.1; text-transform: uppercase; }
.service-output-wire .wire-card .artifact-text { color: #3f5663; }
.wire-topics { color: #48606a; border-top: 1px dotted #b9c9c5; padding-top: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.wire-topics .social-topic { color: #0e7a80; }
.wire-byline { align-items: end; margin-top: auto; padding-top: .85rem; border-top: 1px solid #b9c9c5; text-transform: none; letter-spacing: 0; }
.wire-byline .artifact-author { color: #0e7a80; }
.wire-byline i { color: #bd571e; font-style: normal; }
.service-output-wire .artifact-detail-card,
.service-output-wire .person-detail-card { border: 2px solid #2e5263; background: #fffaf0; color: #203446; box-shadow: .35rem .35rem 0 rgb(46 82 99 / 18%); }

/* Nearfield: a warm neighborhood web that quietly knows too much about who
   brought soup, who needs help, and whose cousin is avoiding the group chat. */
.service-nearfield .service-site,
.service-nearfield .service-detail {
  --panel: #edf3f9;
  --panel-bright: #d7e5f1;
  --paper: #18344e;
  --ink: #273f56;
  --soft: #536d84;
  --quiet: #70869a;
  --rule: #9eb8ce;
  --aqua: #315e8c;
  --sun: #d77c4a;
  background: linear-gradient(#f6f8fb, #dce8f2 19rem, #edf2f7);
  color: #273f56;
  font-family: Arial, Helvetica, sans-serif;
}
.service-nearfield .service-site::before { height: 2rem; background: #315e8c; }
.service-nearfield .network-masthead { padding-top: 2.6rem; border-bottom: 2px solid #9eb8ce; }
.service-nearfield .network-masthead h1 { color: #234e79; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.08em; }
.service-nearfield .network-masthead p { color: #536d84; }
.service-nearfield .network-icon { color: #315e8c; transform: none; }
.service-nearfield .service-controls { border: 1px solid #b9cde0; border-radius: .15rem; background: #f7fbff; box-shadow: 0 .1rem .25rem rgb(34 69 99 / 10%); }
.service-nearfield .service-controls p { color: #536d84; }
.service-nearfield .service-tab { color: #315e8c; border-color: #b9cde0; border-radius: .12rem; }
.service-nearfield .service-tab[aria-current="true"] { color: #f7fbff; background: #315e8c; }
.service-nearfield .service-feed { max-width: 48rem; grid-template-columns: 1fr; margin: 0 auto; }
.service-nearfield .filter-panel { max-width: 48rem; margin-right: auto; margin-left: auto; border: 1px solid #b9cde0; border-radius: .15rem; background: #f7fbff; }
.service-nearfield .filter-panel input { color: #273f56; border-color: #9eb8ce; background: #fff; }
.service-nearfield .nearfield-card { min-height: 0; padding: 1rem; border: 1px solid #b8cce0; border-radius: .15rem; background: #fff; box-shadow: 0 .12rem .28rem rgb(34 69 99 / 13%); }
.nearfield-profile { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.nearfield-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; color: #fff; border: 2px solid #d8e4ef; border-radius: 50%; background: #487cae; font-size: .62rem; font-weight: 700; }
.nearfield-profile .artifact-author { color: #234e79; font-size: .68rem; font-weight: 700; }
.nearfield-profile small { display: block; color: #71869a; font-size: .55rem; }
.nearfield-profile b { color: #315e8c; letter-spacing: .14em; }
.service-nearfield .nearfield-card h3 { margin: 1rem 0 .45rem; color: #234e79; font-size: .92rem; }
.service-nearfield .nearfield-card .artifact-text { color: #3e566d; }
.nearfield-topics { color: #58728a; }
.nearfield-topics .social-topic { color: #315e8c; }
.nearfield-reactions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; padding: .65rem 0; color: #315e8c; border-top: 1px solid #d8e4ef; border-bottom: 1px solid #d8e4ef; font-size: .59rem; }
.nearfield-card footer { display: flex; justify-content: space-between; gap: .7rem; margin-top: .8rem; color: #71869a; font-size: .55rem; }
.nearfield-card .artifact-open { color: #d06a3d; }
.service-nearfield .artifact-detail-card,
.service-nearfield .person-detail-card { border: 1px solid #b8cce0; border-radius: .15rem; background: #fff; color: #273f56; }
.service-nearfield .nearfield-side { border-color: #b8cce0; border-radius: .15rem; background: #f7fbff; box-shadow: 0 .1rem .25rem rgb(34 69 99 / 10%); }
.service-nearfield .nearfield-side > p { color: #315e8c; }
.service-nearfield .nearfield-side li { color: #3e566d; border-color: #d8e4ef; }
.service-nearfield .nearfield-side strong { color: #234e79; }
.service-nearfield .nearfield-side small { color: #71869a; }
.service-nearfield .nearfield-side hr { background: #d8e4ef; }
.service-nearfield .nearfield-composer { border-color: #b8cce0; border-radius: .15rem; background: #fff; box-shadow: 0 .1rem .25rem rgb(34 69 99 / 10%); }
.service-nearfield .nearfield-composer p { color: #71869a; background: #edf3f9; }

/* Drift: an unstable, fast-moving short-form stream that makes every passing
   thought look briefly like a weather system. */
.service-drift .service-site,
.service-drift .service-detail {
  --panel: #f7fbff;
  --panel-bright: #e5f4fb;
  --paper: #152e40;
  --ink: #294657;
  --soft: #5c7480;
  --quiet: #78909b;
  --rule: #b7d9e7;
  --aqua: #2b93bf;
  --sun: #d9783e;
  background: #edf8fd;
  color: #294657;
  font-family: Arial, Helvetica, sans-serif;
}
.service-drift .service-site::before { height: 2.7rem; background: #56b5dc; }
.service-drift .network-masthead { max-width: 45rem; margin: 0 auto; }
.service-drift .service-controls,
.service-drift .filter-panel,
.service-drift .service-feed { max-width: 45rem; margin-right: auto; margin-left: auto; }
.service-drift .service-controls { grid-template-columns: 1fr; border-color: #b7d9e7; background: #fff; }
.service-drift .service-controls small { text-align: left; }
.service-drift .service-tabs { order: -1; }
.service-drift .service-tab { border-radius: 999px; }
.service-drift .service-tab[aria-current="true"] { color: #fff; background: #2b93bf; }
.service-drift .filter-panel { border-color: #b7d9e7; background: #fff; }
.service-drift .filter-panel input { color: #294657; border-color: #b7d9e7; background: #fff; }
.service-drift .service-feed { grid-template-columns: 1fr; gap: 0; overflow: hidden; border: 1px solid #b7d9e7; border-radius: .25rem; }
.service-drift .drift-card { min-height: 0; padding: 1rem 1.15rem; border: 0; border-bottom: 1px solid #d6eaf3; border-radius: 0; background: #fff; }
.service-drift .drift-card:last-child { border-bottom: 0; }
.drift-profile { display: flex; align-items: center; gap: .55rem; }
.drift-avatar { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #56b5dc, #8cceda); font-size: .64rem; font-weight: 700; }
.drift-profile .artifact-author { color: #1c6c90; font-size: .7rem; font-weight: 700; text-decoration: none; }
.drift-profile small { display: block; color: #78909b; font-size: .55rem; }
.drift-title { margin: .8rem 0 .2rem; color: #2b93bf; font-size: .68rem; font-weight: 700; }
.service-drift .drift-card .artifact-text { color: #294657; font-size: .78rem; line-height: 1.65; }
.drift-topics { color: #2b93bf; }
.drift-topics .social-topic { color: #1c6c90; }
.drift-actions { display: flex; align-items: center; gap: 1.15rem; margin-top: .9rem; color: #78909b; font-size: .59rem; }
.drift-actions .artifact-open { margin-left: auto; color: #d9783e; }
.service-drift .artifact-detail-card,
.service-drift .person-detail-card { border: 1px solid #b7d9e7; border-radius: .25rem; background: #fff; color: #294657; }
.service-drift .drift-rail,
.service-drift .drift-trends { border-color: #b7d9e7; background: #fff; }
.service-drift .drift-rail-mark,
.service-drift .drift-trends > p { color: #2b93bf; }
.service-drift .drift-rail li,
.service-drift .drift-trends li { color: #386174; }
.service-drift .drift-rail li:first-child { color: #fff; background: #2b93bf; }
.service-drift .drift-rail small,
.service-drift .drift-trends small { color: #78909b; }
.service-drift .drift-composer { color: #78909b; border-color: #b7d9e7; border-radius: .25rem; background: #fff; }
.service-drift .drift-composer small { color: #fff; background: #2b93bf; }

/* Hushboard: an anonymous image-and-receipt board where every blurry square is
   a revelation and every revelation immediately becomes an argument about
   receipts. Its antique cheerful palette cannot make its certainty healthy. */
.service-hushboard .service-site,
.service-hushboard .service-detail {
  --panel: #edf4dd;
  --panel-bright: #dbe9cc;
  --paper: #18351d;
  --ink: #29432c;
  --soft: #5e765c;
  --quiet: #70836a;
  --rule: #89a47a;
  --aqua: #386c35;
  --sun: #9a6330;
  background: repeating-linear-gradient(0deg, rgb(58 103 52 / 4%) 0 1px, transparent 1px 4px), #edf4dd;
  color: #29432c;
  font-family: "Courier New", Courier, monospace;
}
.service-hushboard .service-site::before { height: .15rem; background: #386c35; }
.service-hushboard .network-masthead { padding-bottom: 1.1rem; border-bottom: 1px dashed #89a47a; }
.service-hushboard .network-masthead h1 { color: #386c35; font-size: clamp(1.7rem, 5vw, 3.6rem); letter-spacing: .02em; text-transform: uppercase; }
.service-hushboard .network-icon { color: #386c35; }
.service-hushboard .service-controls { border-color: #89a47a; background: rgb(255 255 239 / 52%); }
.service-hushboard .service-controls p { color: #5e765c; }
.service-hushboard .service-tab[aria-current="true"] { color: #f6faee; background: #386c35; }
.service-hushboard .filter-panel { border-style: dashed; border-color: #89a47a; background: rgb(255 255 239 / 66%); }
.service-hushboard .filter-panel input { color: #29432c; border-color: #89a47a; background: #fffef4; }
.service-hushboard .filter-tags button { color: #5e765c; }
.service-hushboard .filter-tags button[aria-pressed="true"] { color: #f6faee; border-color: #386c35; background: #386c35; }
.service-hushboard .service-feed { display: block; max-width: 63rem; margin: 0 auto; }
.service-hushboard .hushboard-card { min-height: 0; margin-bottom: .5rem; padding: .8rem; border: 1px solid #a4bb8e; background: #fffef4; }
.hushboard-card header,
.hushboard-card footer { display: flex; justify-content: space-between; gap: 1rem; color: #597653; font-size: .58rem; }
.hush-message { margin: .7rem 0; padding: .65rem .75rem; border-left: 2px solid #6d965e; background: rgb(170 203 143 / 12%); }
.hush-message::before { display: block; float: left; width: 4.25rem; height: 3.25rem; margin: .08rem .7rem .3rem 0; color: #5c804d; border: 1px solid #89a47a; background: repeating-linear-gradient(135deg, #d9e9c9 0 .28rem, #c7deb6 .28rem .56rem); content: "[ FILE ]"; font-size: .48rem; line-height: 3.25rem; text-align: center; }
.hush-message::after { display: table; clear: both; content: ""; }
.hush-message p { margin: 0; }
.hush-title { color: #985a2a; font-size: .7rem; }
.service-hushboard .hush-message .artifact-text { margin-top: .4rem; color: #29432c; font-size: .68rem; line-height: 1.6; }
.hush-topics { color: #597653; border-top: 1px dashed #a4bb8e; padding-top: .5rem; }
.hush-topics .social-topic { color: #386c35; }
.hushboard-card .artifact-open { color: #386c35; text-decoration: none; }
.service-hushboard .artifact-detail-card,
.service-hushboard .person-detail-card { border: 1px dashed #89a47a; background: #fffef4; color: #29432c; }

/* Port Exchange: a cheerful market whose friendliness has been trained to
   disguise legal clauses, labor shortages, and the price of a functioning
   door. */
.service-port-exchange .service-site,
.service-port-exchange .service-detail {
  --panel: #fbfbff;
  --panel-bright: #e5def1;
  --paper: #311951;
  --ink: #3e2c52;
  --soft: #665b73;
  --quiet: #83778e;
  --rule: #b09abf;
  --aqua: #79369a;
  --sun: #c75d25;
  background: linear-gradient(#fafafe, #eeeaf4 16rem, #f8f7fb);
  color: #3e2c52;
  font-family: Verdana, Geneva, sans-serif;
}
.service-port-exchange .service-site::before { height: 2.2rem; background: linear-gradient(90deg, #743494 0 45%, #c75d25 45% 58%, #f0b74d 58%); }
.service-port-exchange .network-masthead { padding-top: 3rem; border-bottom: 2px solid #b09abf; }
.service-port-exchange .network-masthead h1 { color: #642e84; letter-spacing: -.11em; }
.service-port-exchange .network-masthead p { color: #665b73; }
.service-port-exchange .service-controls { border: 1px solid #c9bad3; border-radius: .15rem; background: #fff; }
.service-port-exchange .service-controls p { color: #665b73; }
.service-port-exchange .service-tab { color: #79369a; border-color: #c9bad3; transform: none; }
.service-port-exchange .service-tab[aria-current="true"] { color: #fff; background: #743494; }
.service-port-exchange .filter-panel { border-color: #c9bad3; background: #fff; }
.service-port-exchange .filter-panel input { color: #3e2c52; border-color: #c9bad3; background: #fff; }
.service-port-exchange .service-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-port-exchange .port-card { min-height: 18rem; padding: .7rem; border: 1px solid #c9bad3; border-radius: 0; background: #fff; box-shadow: .16rem .16rem 0 rgb(69 47 86 / 13%); }
.port-listing-image { display: flex; align-items: end; justify-content: space-between; min-height: 5.4rem; padding: .65rem; color: #4d3260; background: linear-gradient(135deg, #f3d86b, #e7cee5 55%, #c4e0d2); }
.port-listing-image span { font-size: 2.2rem; }
.port-listing-image small { max-width: 11ch; font-size: .48rem; font-weight: 700; text-align: right; text-transform: uppercase; }
.port-listing-copy { padding: .65rem .35rem 0; }
.port-seller { margin: 0; color: #776787; font-size: .53rem; }
.port-seller .artifact-author { color: #743494; text-decoration: none; }
.service-port-exchange .port-card h3 { margin: .6rem 0 .4rem; color: #54216f; font-size: .78rem; line-height: 1.3; }
.service-port-exchange .port-card .artifact-text { color: #5f526d; font-size: .64rem; line-height: 1.55; }
.port-topics { color: #776787; }
.port-topics .social-topic { color: #79369a; }
.port-card footer { display: flex; justify-content: space-between; gap: .4rem; margin-top: auto; padding: .65rem .35rem .1rem; border-top: 1px solid #e1d9e7; }
.port-price { color: #c75d25; font-size: .75rem; font-weight: 700; }
.port-price small { color: #776787; font-size: .47rem; font-weight: 400; }
.port-card .artifact-open { color: #3f837d; font-size: .58rem; }
.service-port-exchange .artifact-detail-card,
.service-port-exchange .person-detail-card { border: 1px solid #c9bad3; background: #fff; color: #3e2c52; }
.service-port-exchange .market-rail { border-color: #c9bad3; border-radius: 0; background: #fff; }
.service-port-exchange .market-rail > p { color: #743494; }
.service-port-exchange .market-rail li { color: #5f526d; border-color: #e1d9e7; }
.service-port-exchange .market-rail hr { background: #c9bad3; }
.service-port-exchange .market-rail small { color: #776787; }
.service-port-exchange .market-promo { color: #4d3260; border-color: #e5bf4e; background: linear-gradient(90deg, #f2d76a, #f5e39a 59%, #f0d1e8); box-shadow: .15rem .15rem 0 rgb(69 47 86 / 14%); }

/* Last Notice: a civic record that refuses to turn mourning into a feed, even
   while its civic machinery still gives grief a form number. */
.service-last-notice .service-site,
.service-last-notice .service-detail {
  --panel: #f1ead8;
  --panel-bright: #dfd2b6;
  --paper: #263238;
  --ink: #344148;
  --soft: #5d6765;
  --quiet: #7b8074;
  --rule: #67746c;
  --aqua: #496a68;
  --sun: #9d6b37;
  background: linear-gradient(145deg, #e9dfc9, #f7f0e1 47%, #d8cfb9);
  color: #344148;
  font-family: Georgia, "Times New Roman", serif;
}
.service-last-notice .service-site::before { height: .18rem; background: #496a68; }
.service-last-notice .network-masthead { border-bottom: 2px double #67746c; }
.service-last-notice .network-masthead h1 { max-width: 13ch; font-size: clamp(1.95rem, 5.3vw, 4.2rem); }
.service-last-notice .network-icon { color: #9d6b37; }
.service-last-notice .service-controls { border-width: 1px 0; background: rgb(255 253 244 / 42%); }
.service-last-notice .service-tab { border-width: 0 0 1px; }
.service-last-notice .service-tab[aria-current="true"] { color: #f8f1e0; background: #496a68; }
.service-last-notice .filter-panel { border-color: #9a9c8d; background: rgb(255 253 244 / 52%); }
.service-last-notice .filter-panel input { border-color: #9a9c8d; background: #fffdf5; }
.service-last-notice .filter-tags button[aria-pressed="true"] { color: #fffdf5; border-color: #496a68; background: #496a68; }
.service-last-notice .service-feed { max-width: 53rem; grid-template-columns: 1fr; margin: 0 auto; }
.service-last-notice .notice-card { min-height: 0; padding: 1.1rem 1.25rem; border: 2px double #829087; background: rgb(255 252 241 / 74%); box-shadow: .2rem .25rem 0 rgb(81 88 72 / 12%); }
.notice-card header { display: flex; align-items: center; gap: .65rem; color: #59675e; }
.notice-mark { color: #9d6b37; font-size: 1.5rem; }
.notice-card header b { display: block; color: #496a68; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; }
.notice-card header small { display: block; margin-top: .12rem; color: #7b8074; font-size: .54rem; }
.service-last-notice .notice-card h3 { margin: .95rem 0 .45rem; color: #30444a; font-size: 1.05rem; font-weight: 600; }
.service-last-notice .notice-card .artifact-text { color: #59675e; font-size: .73rem; }
.notice-topics { color: #7b8074; font-size: .5rem; }
.notice-topics .social-topic { color: #496a68; }
.notice-card footer { display: flex; justify-content: space-between; gap: .7rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid #c1c3b1; }
.notice-card .artifact-author { color: #496a68; }
.notice-card .artifact-open { color: #9d6b37; }
.service-last-notice .artifact-detail-card,
.service-last-notice .person-detail-card { border: 2px double #829087; background: rgb(255 252 241 / 74%); color: #344148; }

@media (max-width: 1050px) {
  .wire-site-layout,
  .nearfield-site-layout,
  .drift-site-layout,
  .market-site-layout,
  .notice-site-layout { grid-template-columns: minmax(0, 1fr); }

  .wire-rail,
  .nearfield-side,
  .drift-rail,
  .drift-trends,
  .market-rail,
  .notice-rail {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
  }

  .wire-rail > p,
  .nearfield-side > p,
  .drift-trends > p,
  .market-rail > p,
  .notice-rail > p { flex: 0 0 auto; margin: 0; }
  .wire-rail ul,
  .nearfield-side ul,
  .drift-rail ul,
  .drift-trends ul,
  .market-rail ul,
  .notice-rail ul { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: .3rem .8rem; min-width: 0; margin: 0; }
  .wire-rail li,
  .nearfield-side li,
  .drift-rail li,
  .drift-trends li,
  .market-rail li,
  .notice-rail li { padding: 0; border: 0; }
  .wire-correction-rail { display: none; }
  .nearfield-side strong,
  .nearfield-side small,
  .nearfield-side hr,
  .drift-rail-mark,
  .drift-rail small,
  .drift-trends small,
  .market-rail hr,
  .market-rail small,
  .notice-rail hr,
  .notice-rail small { display: none; }
  .drift-rail { position: static; }
}

@media (max-width: 760px) {
  .service-site { margin-top: .5rem; padding: .8rem; }
  .service-controls { grid-template-columns: 1fr; }
  .service-controls small { text-align: left; }
  .service-output-wire .service-feed,
  .service-port-exchange .service-feed { grid-template-columns: 1fr; }
  .service-output-wire .wire-card:nth-child(5n + 1) { grid-column: auto; }
  .artifact-detail-source { align-items: start; flex-direction: column; gap: .45rem; }
  .wire-rail,
  .nearfield-side,
  .drift-rail,
  .drift-trends,
  .market-rail,
  .notice-rail { display: none; }
  .nearfield-composer,
  .drift-composer,
  .market-promo,
  .notice-intake { border-radius: .45rem; }
  .market-promo { align-items: start; flex-direction: column; gap: .25rem; }
  .market-promo span { text-align: left; }
  .hush-boardbar { justify-content: start; }
  .hush-boardbar b { margin-left: 0; }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 1.3rem, var(--measure)); }
  .writer-monitor { padding: 0; }
  .monitor-case { padding: .42rem; border-radius: .8rem .8rem .45rem .45rem; }
  .monitor-screen { max-height: none; overflow: visible; border-width: .25rem; border-radius: .55rem .55rem .35rem .35rem; }
  .browser-window { min-height: calc(100vh - 1.3rem); border-radius: .35rem; }
  .browser-chrome { position: static; }
  .monitor-lower-bezel { min-height: 1.7rem; }
  .monitor-silverfish { right: 5rem; bottom: .54rem; transform: scale(.8) rotate(10deg); }
  .monitor-stand { height: .9rem; }
  .monitor-stand::after { min-width: 9rem; }
  .writer-keyboard { width: 92%; margin-top: 0; transform: perspective(18rem) rotateX(48deg); }
  .browser-tab-strip { padding: .35rem .45rem 0; }
  .browser-tab { max-width: 9.5rem; padding: .42rem .52rem .38rem; }
  .browser-tab i { display: none; }
  .io-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem; min-height: auto; padding: .5rem; }
  .address-form { grid-column: 1 / -1; grid-row: 2; padding-bottom: .1rem; }
  .browser-control { width: 1.55rem; height: 1.55rem; }
  .header-tools { gap: .25rem; }
  .language-toggle { padding: .42rem .48rem; }
  .bookmark-label { display: none; }
  .network-nav { padding: .42rem .5rem; }
  .hero, .network-masthead { grid-template-columns: 1fr; align-items: start; }
  .cosmos-card { min-height: 9rem; }
  .service-grid, .transmission-grid, .googol-results-grid { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
  .person-facts { grid-template-columns: 1fr; }
  .site-footer { align-items: start; flex-direction: column; padding: 1.2rem 0; }
  .googol-home { min-height: 36rem; padding-top: 3.8rem; }
  .googol-logo { font-size: clamp(4rem, 23vw, 6rem); }
  .googol-directory > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .monitor-silverfish { animation: none; opacity: .82; transform: rotate(10deg); }
}
