.i55-page {
  --i55-red: var(--accent);
  --i55-rail: color-mix(in srgb, var(--ink), transparent 72%);
  --i55-soft: color-mix(in srgb, var(--surface-2), transparent 20%);
  min-width: 0;
  overflow: clip;
}

.i55-page *,
.i55-page *::before,
.i55-page *::after { min-width: 0; }

.i55-concept-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-top: 18px;
  padding-bottom: 18px;
}

.i55-concept-nav > span,
.i55-eyebrow {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.i55-concept-nav > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.i55-concept-nav a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--surface);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  text-decoration: none;
}
.i55-concept-nav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--page); }

.i55-hero { padding: clamp(74px, 10vw, 132px) 0 clamp(52px, 8vw, 92px); }
.i55-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.i55-hero__meta span,
.i55-hero__proof span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 760;
}
.i55-hero h1 {
  max-width: 1080px;
  margin: 18px 0 22px;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: .84;
  letter-spacing: -.075em;
  overflow-wrap: anywhere;
}
.i55-hero__dek { max-width: 880px; margin: 0; color: var(--muted); font-size: clamp(1.15rem, 2.5vw, 1.65rem); line-height: 1.48; }
.i55-hero__proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.i55-stage { display: grid; gap: 22px; align-items: start; padding-bottom: clamp(72px, 10vw, 120px); }
.i55-node {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.i55-node__number { color: var(--accent); font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.i55-node__copy { display: grid; gap: 4px; }
.i55-node__copy small { color: var(--muted); font-size: .61rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.i55-node__copy strong { font-size: .94rem; line-height: 1.18; letter-spacing: -.02em; overflow-wrap: anywhere; }
.i55-node__count { color: var(--muted); font-size: .68rem; font-weight: 820; }
.i55-node[aria-pressed="true"] { border-bottom-color: var(--accent); }
.i55-node[aria-pressed="true"] .i55-node__copy strong { color: var(--accent); }
.i55-node:focus-visible,
.i55-page a:focus-visible,
.i55-page summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.i55-inspector {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 104px);
  overflow: auto;
  border-radius: 26px;
  padding: 26px;
  background: var(--ink);
  color: var(--page);
  box-shadow: var(--shadow);
}
.i55-inspector__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: color-mix(in srgb, var(--page), transparent 42%); font-size: .63rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.i55-inspector__status span:first-child { color: var(--accent); }
.i55-inspector__index { margin: clamp(40px, 8vh, 76px) 0 8px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
.i55-inspector h2 { margin: 0; color: var(--page); font-size: clamp(2rem, 4vw, 3.55rem); line-height: .96; letter-spacing: -.055em; overflow-wrap: anywhere; }
.i55-inspector__thesis { color: color-mix(in srgb, var(--page), transparent 28%); line-height: 1.5; }
.i55-inspector dl { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; border-top: 1px solid color-mix(in srgb, var(--page), transparent 78%); border-bottom: 1px solid color-mix(in srgb, var(--page), transparent 78%); }
.i55-inspector dl div { padding: 13px 0; }
.i55-inspector dl div + div { border-left: 1px solid color-mix(in srgb, var(--page), transparent 78%); padding-left: 14px; }
.i55-inspector dt { color: color-mix(in srgb, var(--page), transparent 45%); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.i55-inspector dd { margin: 2px 0 0; color: var(--page); font-size: 1.4rem; font-weight: 850; }
.i55-inspector__routes { margin-top: 2px; }
.i55-inspector__routes ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.i55-inspector__routes li { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; border-left: 3px solid var(--accent); padding: 8px 0 8px 11px; }
.i55-inspector__routes li > span { grid-row: span 2; color: var(--accent); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.i55-inspector__routes li a { color: var(--page); font-size: .75rem; font-weight: 760; line-height: 1.3; }
.i55-inspector__routes li small { color: color-mix(in srgb, var(--page), transparent 40%); font-size: .65rem; line-height: 1.35; }
.i55-inspector__routes .i55-empty-route { display: block; color: color-mix(in srgb, var(--page), transparent 35%); }
.i55-empty-route p { margin: 4px 0 0; font-size: .72rem; }
.i55-inspector__action { align-self: flex-start; margin-top: 22px; border-radius: 999px; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); font-size: .76rem; font-weight: 820; text-decoration: none; }

[data-edge-group="continue"] { border-color: var(--accent) !important; }
[data-edge-group="foundations"] { border-color: var(--ink) !important; }
[data-edge-group="applications"] { border-color: var(--trust) !important; }
[data-edge-group="companions"] { border-color: var(--muted) !important; }
[data-edge-group="counterpoints"] { border-color: #9b5f16 !important; }
.i55-inspector [data-edge-group="foundations"] { border-color: var(--page) !important; }

.i55-legend { display: grid; grid-template-columns: minmax(250px, .7fr) 1.3fr; gap: 44px; align-items: end; border-top: 1px solid var(--line); padding: 34px 0; }
.i55-legend h2 { max-width: 520px; margin: 7px 0 0; font-size: clamp(2rem, 4vw, 4.25rem); line-height: .98; letter-spacing: -.055em; }
.i55-legend ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); list-style: none; }
.i55-legend li { border-left: 5px solid var(--accent); padding: 14px; background: var(--page); }
.i55-legend li span { font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.i55-legend li p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* Concept A: semantic constellation. Collection records define the neighborhoods. */
.i55-constellation { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.i55-constellation__field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 18px; padding: 22px 0 40px; }
.i55-cluster { grid-column: span 6; border-top: 4px solid var(--ink); padding-top: 13px; }
.i55-cluster:nth-child(2), .i55-cluster:nth-child(5) { grid-column: span 7; }
.i55-cluster:nth-child(3), .i55-cluster:nth-child(6) { grid-column: span 5; }
.i55-cluster header { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.i55-cluster header > span { color: var(--accent); font-size: .65rem; font-weight: 900; }
.i55-cluster h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -.035em; }
.i55-cluster header small { color: var(--muted); font-size: .62rem; }
.i55-cluster > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.i55-cluster:nth-child(odd) { transform: translateY(24px); }
.i55-arc-index { display: grid; grid-template-columns: minmax(250px, .52fr) 1.48fr; gap: 52px; border-top: 1px solid var(--line); padding: 64px 0 100px; }
.i55-arc-index h2 { margin: 7px 0 0; font-size: clamp(2.4rem, 5vw, 5.3rem); line-height: .92; letter-spacing: -.06em; }
.i55-arc-index ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.i55-arc-index li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 12px; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--line); padding: 13px 0 13px 14px; }
.i55-arc-index li span { color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.i55-arc-index li strong { font-size: .77rem; line-height: 1.3; }
.i55-arc-index li i { color: var(--accent); font-style: normal; }
.i55-arc-index li small { grid-column: 2 / -1; color: var(--muted); font-size: .69rem; }

/* Concept B: editorial transit. The nominated surface keeps every direction on the map. */
.i55-transit-intro { padding-bottom: 42px; }
.i55-transit { grid-template-columns: minmax(0, 1fr) minmax(310px, 390px); }
.i55-transit__map { border-top: 1px solid var(--line); }
.i55-station { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); }
.i55-station__rail { position: relative; display: grid; place-items: start center; padding-top: 18px; }
.i55-station__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--i55-rail); transform: translateX(-50%); }
.i55-station:first-child .i55-station__rail::before { top: 26px; }
.i55-station:last-child .i55-station__rail::before { bottom: calc(100% - 27px); }
.i55-station__rail span { position: relative; z-index: 1; width: 31px; height: 31px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--page); color: var(--ink); font-size: .58rem; font-weight: 900; }
.i55-station__body { border-bottom: 1px solid var(--line); padding: 0 0 24px; }
.i55-station .i55-node { grid-template-columns: auto minmax(0, 1fr) auto; border-bottom: 0; padding: 16px 0 10px; }
.i55-station .i55-node__number { display: none; }
.i55-station .i55-node__copy strong { font-size: clamp(1.1rem, 2vw, 1.55rem); }
.i55-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.i55-services li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; border: 1px solid var(--line); border-left: 5px solid var(--accent); padding: 11px; background: var(--surface); }
.i55-services li span { grid-row: span 2; color: var(--muted); font-size: .57rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.i55-services li a { font-size: .72rem; font-weight: 800; line-height: 1.25; }
.i55-services li small { color: var(--muted); font-size: .65rem; line-height: 1.3; }
.i55-services .i55-empty-route { display: block; grid-column: 1 / -1; }

/* Concept C: publication cockpit. Index, focus, and relationship stream remain independent. */
.i55-cockpit { grid-template-columns: minmax(250px, .72fr) minmax(350px, 1fr) minmax(300px, .9fr); }
.i55-cockpit__index { border-top: 4px solid var(--ink); }
.i55-cockpit__index header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 13px 0; }
.i55-cockpit__index header span { color: var(--muted); font-size: .65rem; }
.i55-cockpit__index .i55-node { padding: 11px 0; }
.i55-cockpit__index .i55-node__copy strong { font-size: .78rem; }
.i55-cockpit__index .i55-node__count { display: none; }
.i55-cockpit__stream { border-top: 4px solid var(--accent); }
.i55-cockpit__stream header { border-bottom: 1px solid var(--line); padding: 13px 0; }
.i55-cockpit__stream h2 { margin: 5px 0 0; font-size: 1.45rem; letter-spacing: -.035em; }
.i55-cockpit__stream ol { display: grid; margin: 0; padding: 0; list-style: none; }
.i55-cockpit__stream li { display: grid; grid-template-columns: 30px 1fr; gap: 9px; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--line); padding: 12px 0 12px 10px; }
.i55-cockpit__stream li > span { color: var(--muted); font-size: .61rem; font-weight: 850; }
.i55-cockpit__stream li > div { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3px 7px; }
.i55-cockpit__stream small { grid-column: 1 / -1; color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.i55-cockpit__stream strong { font-size: .69rem; line-height: 1.25; }
.i55-cockpit__stream i { color: var(--accent); font-style: normal; }
.i55-cockpit__stream p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: .65rem; }

/* Concept D: relationship orbit. The original visual idea, repaired as a focused neighborhood. */
.i55-orbit-intro { padding-bottom: 42px; }
.i55-orbit { grid-template-columns: minmax(0, 1fr) minmax(310px, 390px); }
.i55-orbit__field {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at center, transparent 0 13%, var(--line) 13.2% 13.4%, transparent 13.6% 31%, var(--line) 31.2% 31.4%, transparent 31.6%),
    var(--surface);
}
.i55-orbit__field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.i55-orbit__field svg > path[data-i55-orbit-edge] { fill: none; stroke-width: 2.4; opacity: 0; vector-effect: non-scaling-stroke; }
.i55-orbit__field svg > path[data-i55-active="true"] { opacity: .78; }
.i55-orbit__field svg > path[data-i55-direction="incoming"] { stroke-dasharray: 6 6; }
.i55-orbit__field marker path { fill: var(--accent); }
.i55-orbit__field [data-edge-group="continue"] { stroke: var(--accent); }
.i55-orbit__field [data-edge-group="foundations"] { stroke: var(--ink); }
.i55-orbit__field [data-edge-group="applications"] { stroke: var(--trust); }
.i55-orbit__field [data-edge-group="companions"] { stroke: var(--muted); }
.i55-orbit__field [data-edge-group="counterpoints"] { stroke: #9b5f16; }
.i55-orbit-node { position: absolute; z-index: 2; width: 144px; transform: translate(-50%, -50%); }
.i55-orbit-node .i55-node {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--page);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink), transparent 88%);
}
.i55-orbit-node .i55-node__copy small { font-size: .52rem; }
.i55-orbit-node .i55-node__copy strong { font-size: .69rem; }
.i55-orbit-node .i55-node__count { display: none; }
.i55-orbit-node .i55-node[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 78%); }
.i55-orbit-node:last-of-type .i55-node { border-width: 2px; background: var(--ink); color: var(--page); }

.i55-structured { border-top: 1px solid var(--line); padding: clamp(72px, 10vw, 120px) 0; }
.i55-structured > header { max-width: 900px; padding-bottom: 46px; }
.i55-structured > header h2 { max-width: 780px; margin: 8px 0 14px; font-size: clamp(3rem, 7vw, 7rem); line-height: .9; letter-spacing: -.065em; }
.i55-structured > header > p:last-child { max-width: 720px; color: var(--muted); font-size: 1.04rem; }
.i55-structured > section { border-top: 1px solid var(--line); padding: 38px 0 52px; }
.i55-structured__source { display: grid; grid-template-columns: 64px minmax(0, 820px); gap: 18px; }
.i55-structured__source > span { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.i55-structured__source small { color: var(--muted); font-size: .62rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.i55-structured__source h3 { margin: 4px 0 10px; font-size: clamp(1.9rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.05em; overflow-wrap: anywhere; }
.i55-structured__source p { margin: 0; color: var(--muted); }
.i55-edge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0 82px; }
.i55-edge-card { display: grid; gap: 14px; border: 1px solid var(--line); border-top: 5px solid var(--accent); padding: 18px; background: var(--surface); }
.i55-edge-card__path { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr); gap: 5px 8px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.i55-edge-card__path span { color: var(--muted); font-size: .57rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.i55-edge-card__path strong { font-size: .69rem; line-height: 1.3; overflow-wrap: anywhere; }
.i55-edge-card__path i { color: var(--accent); font-style: normal; }
.i55-edge-card__meaning > span { color: var(--accent); font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.i55-edge-card__meaning h3 { margin: 5px 0 8px; font-size: 1.25rem; line-height: 1.12; }
.i55-edge-card__meaning p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.i55-edge-card > a { justify-self: start; font-size: .72rem; font-weight: 800; }
.i55-structured__empty { grid-column: 1 / -1; margin: 0; border-left: 4px solid var(--line); padding: 14px; color: var(--muted); }
.i55-templates { display: none; }

@media (max-width: 1120px) {
  .i55-cockpit { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); }
  .i55-cockpit__stream { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .i55-cockpit__stream header { grid-column: 1 / -1; }
  .i55-orbit-node { width: 126px; }
  .i55-orbit-node .i55-node__copy strong { font-size: .63rem; }
}

@media (max-width: 900px) {
  .i55-stage,
  .i55-constellation,
  .i55-transit,
  .i55-cockpit { grid-template-columns: 1fr; }
  .i55-orbit { grid-template-columns: 1fr; }
  .i55-inspector { position: relative; top: auto; max-height: none; }
  .i55-constellation__field { order: 1; }
  .i55-constellation .i55-inspector { order: 2; }
  .i55-transit__map { order: 1; }
  .i55-transit .i55-inspector { order: 2; }
  .i55-cockpit__index { order: 1; }
  .i55-cockpit .i55-inspector { order: 2; }
  .i55-cockpit__stream { order: 3; grid-column: auto; }
  .i55-orbit__field { order: 1; }
  .i55-orbit .i55-inspector { order: 2; }
  .i55-edge-grid { margin-left: 0; }
}

@media (max-width: 760px) {
  .i55-concept-nav { grid-template-columns: 1fr; }
  .i55-concept-nav > div { justify-content: flex-start; }
  .i55-concept-nav a { flex: 1 1 145px; text-align: center; }
  .i55-hero { padding-top: 60px; }
  .i55-hero h1 { font-size: clamp(3.5rem, 19vw, 6.2rem); }
  .i55-hero__proof span { flex: 1 1 140px; text-align: center; }
  .i55-legend { grid-template-columns: 1fr; gap: 24px; }
  .i55-legend ul { grid-template-columns: 1fr; }
  .i55-constellation__field { grid-template-columns: 1fr; gap: 24px; }
  .i55-cluster,
  .i55-cluster:nth-child(2),
  .i55-cluster:nth-child(3),
  .i55-cluster:nth-child(5),
  .i55-cluster:nth-child(6) { grid-column: 1; transform: none; }
  .i55-cluster > div { grid-template-columns: 1fr; }
  .i55-arc-index { grid-template-columns: 1fr; gap: 28px; }
  .i55-arc-index li { grid-template-columns: 74px minmax(0, 1fr); }
  .i55-arc-index li i { display: none; }
  .i55-arc-index li strong:last-of-type { grid-column: 2; }
  .i55-arc-index li small { grid-column: 2; }
  .i55-station { grid-template-columns: 36px minmax(0, 1fr); }
  .i55-station__rail span { width: 25px; height: 25px; border-width: 2px; }
  .i55-station:first-child .i55-station__rail::before { top: 22px; }
  .i55-station:last-child .i55-station__rail::before { bottom: calc(100% - 23px); }
  .i55-services { grid-template-columns: 1fr; }
  .i55-node { grid-template-columns: auto minmax(0, 1fr); }
  .i55-node__count { grid-column: 2; }
  .i55-inspector { border-radius: 18px; padding: 22px; }
  .i55-inspector__index { margin-top: 38px; }
  .i55-cockpit__stream { grid-template-columns: 1fr; }
  .i55-orbit__field {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    border-radius: 18px;
    padding: 14px;
    background: var(--surface);
  }
  .i55-orbit__field svg { display: none; }
  .i55-orbit-node { position: static; width: auto; transform: none; }
  .i55-orbit-node .i55-node { height: 100%; }
  .i55-structured__source { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .i55-edge-grid { grid-template-columns: 1fr; }
  .i55-edge-card__path { grid-template-columns: auto minmax(0, 1fr); }
  .i55-edge-card__path i { display: none; }
}

@media (max-width: 390px) {
  .i55-hero h1 { letter-spacing: -.065em; }
  .i55-concept-nav a { flex-basis: 100%; }
  .i55-node__copy strong { font-size: .82rem; }
  .i55-inspector h2 { font-size: 2rem; }
  .i55-edge-card { padding: 15px; }
  .i55-orbit__field { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .i55-page *,
  .i55-page *::before,
  .i55-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
