* { box-sizing: border-box; }

:root {
  --layout-edge: #07040d;
  --layout-deep: var(--bg-deep, #0f0a1c);
  --layout-field: #0b0712;
  --layout-surface: var(--surface, #251938);
  --layout-raised: var(--surface-elev, #30224a);
  --layout-line: rgba(169, 139, 214, .18);
  --layout-line-soft: rgba(169, 139, 214, .09);
  --layout-sky: var(--kin-skyblue, #03ccd9);
  --layout-gold: var(--kid-sun-gold, #eaaa00);
  --layout-cream: var(--kin-cream-white, #ffffe6);
  --layout-lavender: var(--kin-lavender, #a98bd6);
  --layout-mint: var(--kin-mint, #8fe6c6);
  --layout-danger: var(--danger, #dc525c);
  --rail-width: 72px;
  --title-height: 42px;
  --instrument-height: 68px;
  --composer-height: 68px;
  --panel-width: 410px;
}

html, body, #app { width: 100%; height: 100%; }

html { background: var(--layout-edge); }

body {
  margin: 0;
  overflow: hidden;
  background: var(--layout-edge);
  color: var(--fg, var(--layout-cream));
  font-family: var(--font-body, Avenir, sans-serif);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select, input[type='checkbox'], input[type='range'] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--layout-sky);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 84px;
  top: -60px;
  padding: 10px 14px;
  border-radius: 0 0 8px 8px;
  background: var(--layout-sky);
  color: #071416;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

.desktop-app {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--title-height) minmax(0, 1fr);
  overflow: hidden;
  background: var(--layout-edge);
}

.titlebar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 455px minmax(0, 1fr) 250px;
  align-items: center;
  min-width: 0;
  padding: 0 14px;
  background: #0f0a18;
  border-bottom: 1px solid var(--layout-line);
  box-shadow: 0 1px 0 rgba(0,0,0,.64);
}

.window-controls { display: flex; align-items: center; gap: 8px; }
.title-left { min-width: 0; display: flex; align-items: center; gap: 14px; }
.global-receiver-version select {
  width: 104px;
  height: 25px;
  padding: 0 22px 0 8px;
  border: 1px solid rgba(169,139,214,.2);
  border-radius: 6px;
  background: #171020;
  color: rgba(255,255,230,.68);
  font-size: 8px;
  font-weight: 800;
}
.reset-to-default {
  height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(169,139,214,.2);
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,230,.5);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.reset-to-default:hover { border-color: rgba(3,204,217,.38); color: var(--layout-cream); background: rgba(3,204,217,.06); }
.window-controls i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.window-controls i:nth-child(1) { background: #ff5f57; }
.window-controls i:nth-child(2) { background: #ffbd2e; }
.window-controls i:nth-child(3) { background: #28c840; }
.window-controls span { margin-left: 9px; color: rgba(255,255,230,.42); font-size: 10px; font-weight: 800; letter-spacing: .15em; }

.title-identity {
  justify-self: center;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,230,.44);
  font-size: 10px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.title-identity img { width: 20px; height: 20px; object-fit: contain; }
.title-identity > span { color: var(--layout-gold); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.title-identity strong { color: rgba(255,255,230,.78); }
.title-identity b { color: var(--layout-cream); }
.title-identity > i { color: rgba(169,139,214,.28); font-style: normal; }

.title-state { justify-self: end; display: flex; align-items: center; gap: 14px; }
.title-state > span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,230,.46); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.title-state > span i, .system-presence i { width: 6px; height: 6px; border-radius: 50%; background: var(--layout-mint); box-shadow: 0 0 10px rgba(143,230,198,.7); }
.title-state button { height: 26px; padding: 0 10px; border: 1px solid rgba(3,204,217,.22); border-radius: 7px; background: rgba(3,204,217,.06); color: var(--layout-sky); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.app-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }

.toolrail {
  position: relative;
  z-index: 42;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 9px;
  background: #0c0713;
  border-right: 1px solid var(--layout-line);
}

.vault-entry, .avatar-entry, .rail-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: rgba(255,255,230,.48);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.rail-action:hover, .vault-entry:hover, .avatar-entry:hover { color: var(--layout-cream); background: rgba(48,34,74,.5); transform: translateY(-1px); }
.rail-action.active, .vault-entry.active, .avatar-entry.active { color: var(--layout-sky); border-color: rgba(3,204,217,.28); background: rgba(3,204,217,.08); box-shadow: inset 0 0 18px rgba(3,204,217,.035); }
.rail-action.active::before, .vault-entry.active::before, .avatar-entry.active::before { content: ''; position: absolute; left: -14px; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--layout-sky); box-shadow: 0 0 10px rgba(3,204,217,.6); }

.vault-entry { height: 48px; }
.vault-entry img { width: 37px; height: 37px; object-fit: contain; }
.vault-entry > span { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); color: rgba(255,255,230,.32); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rail-divider { width: 36px; height: 1px; margin: 12px 0 8px; background: var(--layout-line); }
.rail-primary { display: flex; flex-direction: column; gap: 2px; }
.rail-spacer { flex: 1; min-height: 8px; }

.rail-role-icon {
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.role-icon-receiver { -webkit-mask-image: url('assets/role-icons/receiver.svg'); mask-image: url('assets/role-icons/receiver.svg'); }
.role-icon-transmitter { -webkit-mask-image: url('assets/role-icons/transmitter.svg'); mask-image: url('assets/role-icons/transmitter.svg'); }
.role-icon-connector { -webkit-mask-image: url('assets/role-icons/connector.svg'); mask-image: url('assets/role-icons/connector.svg'); }
.role-icon-creator { -webkit-mask-image: url('assets/role-icons/creator.svg'); mask-image: url('assets/role-icons/creator.svg'); }
.role-icon-inspector { -webkit-mask-image: url('assets/role-icons/inspector.svg'); mask-image: url('assets/role-icons/inspector.svg'); }
.role-icon-broker { -webkit-mask-image: url('assets/role-icons/broker.svg'); mask-image: url('assets/role-icons/broker.svg'); }
.role-icon-envoy { -webkit-mask-image: url('assets/interface-icons/envoy.svg'); mask-image: url('assets/interface-icons/envoy.svg'); }
.role-icon-sentinel { -webkit-mask-image: url('assets/interface-icons/sentinel.svg'); mask-image: url('assets/interface-icons/sentinel.svg'); }
.role-icon-metrics { -webkit-mask-image: url('assets/interface-icons/metrics.svg'); mask-image: url('assets/interface-icons/metrics.svg'); }
.role-icon-sponsor { -webkit-mask-image: url('assets/interface-icons/sponsor.svg'); mask-image: url('assets/interface-icons/sponsor.svg'); }
.rail-action.placeholder { color: rgba(255,255,230,.32); }
.rail-action.placeholder:hover { color: var(--layout-lavender); }

.avatar-entry { margin-top: 5px; border-radius: 50%; }
.avatar-entry > img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(169,139,214,.52); box-shadow: 0 0 0 2px #0c0713, 0 0 0 3px rgba(234,170,0,.42); }
.avatar-entry > i { position: absolute; right: 2px; bottom: 3px; width: 9px; height: 9px; border: 2px solid #0c0713; border-radius: 50%; background: var(--layout-mint); }

.rail-tooltip {
  position: absolute;
  z-index: 80;
  left: 57px;
  top: 50%;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--layout-line);
  border-radius: 8px;
  background: rgba(25,17,39,.97);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-5px,-50%);
  transition: opacity .15s ease, transform .15s ease;
  text-align: left;
}
.rail-tooltip b, .rail-tooltip small { display: block; }
.rail-tooltip b { color: var(--layout-cream); font-size: 11px; }
.rail-tooltip small { margin-top: 2px; color: rgba(255,255,230,.48); font-size: 9px; }
.rail-action:hover .rail-tooltip, .avatar-entry:hover .rail-tooltip { opacity: 1; transform: translate(0,-50%); }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--layout-field); }

.instrument-bar {
  position: relative;
  z-index: 38;
  min-width: 0;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 128px;
  align-items: stretch;
  background: rgba(18,11,29,.98);
  border-bottom: 1px solid var(--layout-line);
  box-shadow: 0 5px 24px rgba(0,0,0,.18);
}
.field-orientation { display: flex; flex-direction: column; justify-content: center; padding: 0 18px 0 22px; border-right: 1px solid var(--layout-line-soft); }
.field-orientation span { color: var(--layout-sky); font-size: 8px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.field-orientation strong { margin-top: 4px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 16px; font-weight: 400; letter-spacing: .01em; }
.instrument-bar nav { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(116px, 1fr)); overflow-x: auto; scrollbar-width: none; }
.instrument-bar nav::-webkit-scrollbar { display: none; }
.instrument { position: relative; min-width: 116px; padding: 0 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 0; border-right: 1px solid var(--layout-line-soft); background: transparent; text-align: left; }
.instrument:hover, .instrument.active { background: linear-gradient(180deg, rgba(48,34,74,.56), rgba(37,25,56,.2)); }
.instrument.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--layout-sky); box-shadow: 0 0 8px rgba(3,204,217,.5); }
.instrument > span { color: rgba(255,255,230,.4); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.instrument > strong { margin-top: 5px; color: rgba(255,255,230,.84); font-size: 11px; font-weight: 700; white-space: nowrap; }
.instrument > i { position: absolute; right: 10px; top: 12px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: rgba(234,170,0,.14); color: var(--layout-gold); font-size: 8px; font-style: normal; font-weight: 900; }
.needs-attention > strong { color: var(--layout-gold); }
.system-presence { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--layout-line-soft); }
.system-presence span { display: flex; align-items: center; gap: 7px; color: var(--layout-mint); font-family: var(--font-display, Georgia, serif); font-size: 15px; }
.system-presence small { margin-top: 3px; color: rgba(255,255,230,.32); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.field-shell { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 35%, rgba(94,63,148,.14), transparent 43%), var(--layout-field); }
.field-shell::before { content: ''; position: absolute; inset: 0; z-index: -5; background-image: linear-gradient(rgba(169,139,214,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(169,139,214,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center, black 20%, transparent 78%); }
.field-shell::after { content: ''; position: absolute; inset: 0; z-index: -4; pointer-events: none; background: radial-gradient(circle at 16% 23%, var(--layout-gold) 0 1px, transparent 2px), radial-gradient(circle at 76% 18%, var(--layout-sky) 0 1px, transparent 2px), radial-gradient(circle at 84% 68%, var(--layout-lavender) 0 1px, transparent 2px), radial-gradient(circle at 27% 78%, var(--layout-mint) 0 1px, transparent 2px); opacity: .7; }
.mode-world { position: absolute; inset: 0; overflow: hidden; }

.composed-world {
  background:
    radial-gradient(circle at 50% 34%, rgba(94,63,148,.18), transparent 44%),
    radial-gradient(circle at 18% 70%, rgba(3,204,217,.035), transparent 29%),
    #090512;
}
.composed-backdrop { position: absolute; inset: 0 0 7%; width: 100%; height: 93%; pointer-events: none; }
.composed-connection { fill: none; stroke: url(#composedPath); stroke-width: 1.35; filter: drop-shadow(0 0 5px rgba(169,139,214,.18)); }
.composed-connection.secondary { stroke: rgba(169,139,214,.16); stroke-dasharray: 4 9; }
.composed-orientation { position: absolute; z-index: 4; left: 24px; top: 19px; }
.composed-orientation > span, .composed-context {
  color: var(--layout-sky);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.composed-orientation h2 { margin: 5px 0 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 24px; font-weight: 400; line-height: 1; }
.composed-orientation p { margin: 6px 0 0; color: rgba(255,255,230,.36); font-size: 9px; }
.composed-context { position: absolute; z-index: 4; right: 24px; top: 24px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,230,.36); }
.composed-context i { width: 5px; height: 5px; border-radius: 50%; background: var(--layout-mint); box-shadow: 0 0 10px rgba(143,230,198,.58); }

.composed-card {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgba(169,139,214,.24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(28,20,41,.97), rgba(16,10,25,.95));
  box-shadow: inset 0 1px rgba(255,255,230,.035), 0 0 0 1.5px #050309, 0 18px 42px rgba(0,0,0,.36);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.composed-card:hover, .composed-card:focus-visible, .composed-card.selected { z-index: 10; border-color: rgba(3,204,217,.48); box-shadow: inset 0 1px rgba(255,255,230,.045), 0 0 0 1.5px #050309, 0 20px 50px rgba(0,0,0,.45), 0 0 30px rgba(3,204,217,.07); }
.composed-alliance { left: 5.2%; top: 28%; width: clamp(220px, 19vw, 272px); min-height: 292px; }
.composed-alliance:hover, .composed-alliance:focus-visible, .composed-alliance.selected { transform: translateY(-3px); }
.composed-invitation { left: 50%; top: 9%; width: clamp(440px, 38vw, 520px); min-height: 390px; padding: 19px; transform: translateX(-50%); border-color: rgba(234,170,0,.4); }
.composed-invitation:hover, .composed-invitation:focus-visible, .composed-invitation.selected { border-color: rgba(234,170,0,.64); transform: translateX(-50%) translateY(-3px); box-shadow: inset 0 1px rgba(255,255,230,.045), 0 0 0 1.5px #050309, 0 22px 54px rgba(0,0,0,.47), 0 0 34px rgba(234,170,0,.08); }
.composed-contribution { right: 5%; top: 29%; width: clamp(230px, 20vw, 286px); min-height: 306px; }
.composed-contribution:hover, .composed-contribution:focus-visible, .composed-contribution.selected { transform: translateY(-3px); }
.composed-sigil { flex: 0 0 auto; display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 7px; }
.composed-sigil img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.46)); }
.composed-invitation-head { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 16px; align-items: start; }
.composed-invitation-head .composed-sigil { width: 118px; height: 118px; margin: 2px 0 0; }
.composed-kicker { display: flex; align-items: center; gap: 6px; color: rgba(255,255,230,.48); font-size: 7px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.composed-kicker.sky { color: var(--layout-sky); }
.composed-kicker.gold { color: var(--layout-gold); }
.composed-kicker > i { width: 5px; height: 5px; border-radius: 50%; background: var(--layout-mint); }
.composed-card h2, .composed-card h3 { margin: 5px 0 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-weight: 400; line-height: 1.04; }
.composed-card h2 { font-size: 27px; }
.composed-card h3 { font-size: 21px; text-align: center; }
.composed-card > p, .composed-invitation-head p { margin: 7px 0 0; color: rgba(255,255,230,.52); font-size: 9.5px; line-height: 1.48; }
.composed-card > p { text-align: center; }
.composed-motion { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 8px; border: 1px solid rgba(169,139,214,.14); border-radius: 8px; background: rgba(48,34,74,.22); color: rgba(255,255,230,.45); font-size: 8px; }
.composed-motion i { width: 6px; height: 6px; border-radius: 50%; background: var(--layout-mint); box-shadow: 0 0 0 3px rgba(143,230,198,.08); }
.composed-alliance > button { align-self: center; margin-top: auto; }
.composed-alice-note { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid rgba(169,139,214,.21); border-radius: 10px; background: rgba(48,34,74,.3); }
.composed-alice { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #604b0b; border-radius: 50%; background: var(--layout-gold); color: #17110b; font-family: var(--font-display, Georgia, serif); font-size: 16px; box-shadow: 0 0 0 2px #0f0a1c, 0 0 0 3px rgba(169,139,214,.3); }
.composed-alice-note strong { display: block; color: var(--layout-lavender); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.composed-alice-note p { margin: 4px 0 0; color: rgba(255,255,230,.64); font-family: var(--font-callout, var(--font-body)); font-size: 9px; line-height: 1.47; }
.composed-actions { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.composed-text-button { min-height: 34px; padding: 0 6px; border: 0; background: transparent; color: rgba(255,255,230,.5); font-size: 8px; font-weight: 900; }
.composed-text-button:hover { color: var(--layout-sky); }
.composed-choices { display: grid; gap: 5px; margin-top: 10px; }
.composed-choices button { min-height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border: 1px solid rgba(169,139,214,.15); border-radius: 7px; background: rgba(48,34,74,.24); color: rgba(255,255,230,.54); font-size: 8px; text-align: left; }
.composed-choices button:hover { border-color: rgba(3,204,217,.34); color: var(--layout-cream); background: rgba(48,34,74,.4); }
.composed-choices b { color: var(--layout-sky); font-size: 12px; }

.world-grid, .graph-lines { position: absolute; inset: 2% 2% 8%; width: 96%; height: 90%; }
.setting-structure { position: absolute; width: 110px; height: 92px; transform: rotate(30deg) skewX(-30deg); border: 1px solid rgba(169,139,214,.13); background: rgba(48,34,74,.09); }
.setting-structure::before, .setting-structure::after { content: ''; position: absolute; background: rgba(94,63,148,.11); border: 1px solid rgba(169,139,214,.13); }
.setting-structure::before { left: 18px; top: -42px; width: 72px; height: 42px; }
.setting-structure::after { right: -28px; top: 14px; width: 27px; height: 74px; }
.structure-left { left: 17%; top: 25%; }
.structure-right { right: 17%; bottom: 23%; transform: rotate(30deg) skewX(-30deg) scale(.75); }
.setting-beacon { position: absolute; left: 50%; top: 51%; width: 80px; height: 80px; transform: translate(-50%,-50%); border: 1px solid rgba(234,170,0,.23); border-radius: 50%; }
.setting-beacon::before, .setting-beacon::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(3,204,217,.18); border-radius: 50%; }
.setting-beacon::after { inset: 24px; background: radial-gradient(circle, rgba(234,170,0,.5), rgba(234,170,0,.08) 45%, transparent 47%); }
.setting-beacon i, .setting-beacon b { position: absolute; left: 50%; top: 50%; width: 132px; height: 1px; background: rgba(169,139,214,.14); transform-origin: center; }
.setting-beacon i { transform: translate(-50%,-50%) rotate(45deg); }
.setting-beacon b { transform: translate(-50%,-50%) rotate(-45deg); }

.field-object {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: clamp(165px, 15vw, 224px);
  min-height: 118px;
  padding: 14px 15px 13px;
  border: 1px solid var(--object-line, var(--layout-line));
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(38,26,57,.92), rgba(18,12,28,.88));
  box-shadow: 0 16px 40px rgba(0,0,0,.25), inset 0 1px rgba(255,255,230,.025);
  transform: translate(-50%,-50%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-align: left;
}
.field-object:hover, .field-object:focus-visible { z-index: 8; transform: translate(-50%, calc(-50% - 4px)); border-color: var(--object-accent); box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 24px var(--object-glow); }
.field-object.selected { z-index: 9; transform: translate(-50%, calc(-50% - 5px)) scale(1.025); border-color: var(--object-accent); box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 30px var(--object-glow); }
.field-object .object-orbit { position: absolute; left: 13px; top: 14px; width: 10px; height: 10px; border: 1px solid var(--object-accent); border-radius: 50%; box-shadow: 0 0 12px var(--object-glow); }
.field-object .object-orbit::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--object-accent); }
.object-kicker { display: block; margin-left: 17px; color: var(--object-accent); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.field-object h3 { margin: 8px 0 5px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 20px; font-weight: 400; line-height: 1.05; }
.field-object p { margin: 0; color: rgba(255,255,230,.55); font-size: 10px; line-height: 1.45; }
.field-object > small { display: block; margin-top: 9px; color: rgba(255,255,230,.34); font-size: 8px; }
.object-sky { --object-accent: var(--layout-sky); --object-line: rgba(3,204,217,.24); --object-glow: rgba(3,204,217,.13); }
.object-gold { --object-accent: var(--layout-gold); --object-line: rgba(234,170,0,.26); --object-glow: rgba(234,170,0,.13); }
.object-mint { --object-accent: var(--layout-mint); --object-line: rgba(143,230,198,.23); --object-glow: rgba(143,230,198,.11); }
.object-lavender { --object-accent: var(--layout-lavender); --object-line: rgba(169,139,214,.28); --object-glow: rgba(169,139,214,.14); }

.mode-caption { position: absolute; left: 26px; bottom: calc(var(--composer-height) + 22px); display: flex; flex-direction: column; }
.mode-caption > span { color: var(--layout-sky); font-size: 8px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mode-caption > strong { margin-top: 3px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 19px; font-weight: 400; }
.mode-caption > small { margin-top: 2px; color: rgba(255,255,230,.33); font-size: 8px; }

.pulse-world { background: radial-gradient(ellipse at 51% 48%, rgba(3,204,217,.06), transparent 29%), radial-gradient(ellipse at center, rgba(94,63,148,.12), transparent 60%); }
.pulse-radar { position: absolute; left: 50%; top: 48%; width: min(68vw, 780px); aspect-ratio: 1.8; transform: translate(-50%,-50%); border: 1px solid rgba(169,139,214,.08); border-radius: 50%; }
.pulse-radar i { position: absolute; inset: 14%; border: 1px solid rgba(169,139,214,.07); border-radius: inherit; }
.pulse-radar i:nth-child(2) { inset: 29%; }
.pulse-radar i:nth-child(3) { inset: 44%; }
.pulse-radar span { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(3,204,217,.12), transparent); transform: rotate(28deg); transform-origin: center; }
.pulse-filters { position: absolute; z-index: 12; left: 24px; top: 18px; display: flex; gap: 6px; }

.graph-world { background: radial-gradient(circle at center, rgba(234,170,0,.045), transparent 36%); }
.graph-lines path { fill: none; stroke: rgba(169,139,214,.24); stroke-width: 1.2; stroke-dasharray: 4 6; }
.graph-legend { position: absolute; top: 20px; left: 24px; display: flex; gap: 13px; color: rgba(255,255,230,.4); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.graph-legend span { display: flex; align-items: center; gap: 6px; }
.dot-gold, .dot-sky, .dot-mint, .dot-lavender { width: 7px; height: 7px; border-radius: 50%; }
.dot-gold { background: var(--layout-gold); }
.dot-sky { background: var(--layout-sky); }
.dot-mint { background: var(--layout-mint); }
.dot-lavender { background: var(--layout-lavender); }

.theater-world { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: var(--composer-height); background: radial-gradient(circle at 50% 42%, rgba(94,63,148,.16), transparent 33%), #090610; text-align: center; }
.theater-halo { position: absolute; left: 50%; top: 45%; width: 440px; height: 440px; transform: translate(-50%,-50%); border: 1px solid rgba(169,139,214,.08); border-radius: 50%; box-shadow: inset 0 0 80px rgba(94,63,148,.08); }
.theater-halo::before, .theater-halo::after { content: ''; position: absolute; inset: 16%; border: 1px solid rgba(234,170,0,.06); border-radius: 50%; }
.theater-halo::after { inset: 34%; border-color: rgba(3,204,217,.08); }
.theater-ki, .theater-sigil { position: relative; z-index: 2; width: 112px; height: 112px; object-fit: contain; color: var(--layout-sky); filter: drop-shadow(0 0 26px rgba(3,204,217,.2)); }
.theater-ki { display: grid; place-items: center; border: 1px solid rgba(3,204,217,.25); border-radius: 50%; background: rgba(3,204,217,.035); }
.theater-kicker { position: relative; z-index: 2; margin-top: 19px; color: var(--layout-gold); font-size: 8px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.theater-world h2 { position: relative; z-index: 2; max-width: 630px; margin: 9px 0 7px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: clamp(30px, 3.2vw, 50px); font-weight: 400; line-height: 1; }
.theater-world > p { position: relative; z-index: 2; max-width: 520px; margin: 0; color: rgba(255,255,230,.52); font-size: 12px; line-height: 1.6; }
.theater-actions { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 20px; }

.notification-stack { position: absolute; z-index: 22; right: 18px; top: 18px; width: 290px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; }
.field-message { position: relative; padding: 10px 30px 10px 12px; border: 1px solid var(--message-line); border-left: 2px solid var(--message-accent); border-radius: 9px; background: rgba(20,13,31,.86); box-shadow: 0 12px 30px rgba(0,0,0,.18); backdrop-filter: blur(14px); pointer-events: auto; }
.field-message .message-kind { color: var(--message-accent); font-size: 7px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.field-message > button { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: rgba(255,255,230,.3); }
.field-message > button:hover { color: var(--layout-cream); background: rgba(255,255,230,.05); }
.field-message > strong { display: block; margin-top: 3px; color: rgba(255,255,230,.82); font-size: 10px; }
.field-message p { margin: 3px 0 0; color: rgba(255,255,230,.43); font-size: 9px; line-height: 1.35; }
.field-message > small { display: block; margin-top: 5px; color: rgba(255,255,230,.28); font-size: 7px; }
.tone-sky { --message-accent: var(--layout-sky); --message-line: rgba(3,204,217,.19); }
.tone-gold { --message-accent: var(--layout-gold); --message-line: rgba(234,170,0,.2); }
.tone-mint { --message-accent: var(--layout-mint); --message-line: rgba(143,230,198,.18); }

.selection-bar { position: absolute; z-index: 30; left: 50%; top: 16px; transform: translateX(-50%); min-width: 420px; height: 44px; display: flex; align-items: center; gap: 5px; padding: 4px 5px 4px 12px; border: 1px solid rgba(3,204,217,.25); border-radius: 12px; background: rgba(21,14,32,.92); box-shadow: 0 14px 36px rgba(0,0,0,.3); backdrop-filter: blur(16px); }
.selection-bar > span { min-width: 0; flex: 1; display: grid; grid-template-columns: 8px auto; grid-template-rows: 1fr 1fr; column-gap: 8px; }
.selection-bar > span i { grid-row: 1 / 3; align-self: center; }
.selection-bar small { color: rgba(255,255,230,.35); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.selection-bar strong { overflow: hidden; color: var(--layout-cream); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.selection-bar button { height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--layout-line); border-radius: 8px; background: rgba(48,34,74,.4); color: rgba(255,255,230,.67); font-size: 8px; font-weight: 800; }
.selection-bar button:hover { border-color: rgba(3,204,217,.35); color: var(--layout-sky); }
.selection-bar button:last-child { width: 32px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }

.ki-composer { position: absolute; z-index: 32; left: 50%; bottom: 14px; width: min(720px, calc(100% - 52px)); min-height: var(--composer-height); display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px 42px; align-items: center; gap: 7px; padding: 8px 9px 8px 10px; border: 1px solid rgba(169,139,214,.28); border-radius: 14px; background: rgba(24,16,36,.95); box-shadow: 0 18px 48px rgba(0,0,0,.35), inset 0 1px rgba(255,255,230,.025); transform: translateX(-50%); backdrop-filter: blur(16px); }
.ki-composer > img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; border: 1px solid rgba(3,204,217,.24); background: rgba(3,204,217,.03); }
.composer-copy { min-width: 0; display: flex; flex-direction: column; }
.composer-copy > span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,230,.36); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.composer-copy > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--layout-mint); box-shadow: 0 0 8px rgba(143,230,198,.55); }
.composer-copy input { min-width: 0; width: 100%; margin-top: 4px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--layout-cream); font-size: 11px; }
.composer-copy input::placeholder { color: rgba(255,255,230,.28); }
.composer-context, .composer-send { display: grid; place-items: center; border-radius: 50%; }
.composer-context { width: 32px; height: 32px; border: 1px solid rgba(169,139,214,.24); background: transparent; color: var(--layout-lavender); }
.composer-send { width: 40px; height: 40px; border: 1px solid rgba(3,204,217,.4); background: var(--layout-sky); color: #071416; box-shadow: 0 0 0 3px #130d1e, 0 0 0 4px rgba(234,170,0,.3); }
.composer-send:hover { filter: brightness(1.08); }

.expandable-panel {
  position: absolute;
  z-index: 36;
  right: 14px;
  top: 12px;
  bottom: calc(var(--composer-height) + 26px);
  width: min(var(--panel-width), calc(100% - 28px));
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(169,139,214,.27);
  border-radius: 16px;
  background: rgba(18,12,28,.965);
  box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,230,.03);
  backdrop-filter: blur(20px);
}
.expandable-panel > header, .inspector > header { display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 19px; border-bottom: 1px solid var(--layout-line); background: linear-gradient(180deg, rgba(48,34,74,.34), transparent); }
.expandable-panel > header span, .inspector > header span { color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.expandable-panel > header h2, .inspector > header h2 { margin: 3px 0 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 22px; font-weight: 400; line-height: 1; }
.expandable-panel > header button, .inspector > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: rgba(255,255,230,.4); }
.expandable-panel > header button:hover, .inspector > header button:hover { border-color: var(--layout-line); color: var(--layout-cream); background: rgba(48,34,74,.35); }
.panel-scroll { min-height: 0; overflow-y: auto; padding: 17px 18px 24px; scrollbar-color: rgba(169,139,214,.22) transparent; scrollbar-width: thin; }
.panel-lede { margin: 0 0 17px; color: rgba(255,255,230,.54); font-size: 11px; line-height: 1.55; }
.panel-section { margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--layout-line-soft); }
.panel-section h3, .creation-groups h3 { margin: 0 0 10px; color: rgba(255,255,230,.72); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: rgba(255,255,230,.65); font-size: 9px; font-weight: 800; }
.section-heading h3 { margin: 0; }
.section-heading > span { color: var(--layout-gold); }
.section-heading > button { border: 0; background: transparent; color: var(--layout-sky); font-size: 8px; font-weight: 800; }
.state-live { padding: 3px 7px; border-radius: 9px; background: rgba(143,230,198,.09); color: var(--layout-mint) !important; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }

.primary-button, .secondary-button { min-height: 34px; padding: 0 13px; border-radius: 8px; font-size: 9px; font-weight: 900; letter-spacing: .02em; }
.primary-button { border: 1px solid rgba(3,204,217,.5); background: var(--layout-sky); color: #071416; }
.primary-button:hover { filter: brightness(1.08); }
.secondary-button { border: 1px solid var(--layout-line); background: rgba(48,34,74,.42); color: rgba(255,255,230,.72); }
.secondary-button:hover { border-color: rgba(169,139,214,.4); color: var(--layout-cream); }
.wide { width: 100%; }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.panel-actions > * { flex: 1; }

.ki-action { width: 100%; min-height: 42px; margin-top: 18px; display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(3,204,217,.23); border-radius: 10px; background: rgba(3,204,217,.055); color: var(--layout-sky); text-align: left; }
.ki-action span { color: rgba(255,255,230,.72); font-size: 9px; font-weight: 800; }
.ki-action:hover { border-color: rgba(3,204,217,.48); background: rgba(3,204,217,.09); }

select, textarea, .field-label input { width: 100%; border: 1px solid var(--layout-line); border-radius: 9px; background: rgba(48,34,74,.24); color: rgba(255,255,230,.75); }
select { height: 38px; padding: 0 10px; }
textarea { resize: vertical; min-height: 108px; padding: 10px; line-height: 1.45; }
.field-label { display: block; margin-top: 13px; color: rgba(255,255,230,.44); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.field-label select, .field-label textarea { margin-top: 6px; text-transform: none; letter-spacing: normal; }

.chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 28px; padding: 0 10px; border: 1px solid var(--layout-line); border-radius: 14px; background: rgba(48,34,74,.22); color: rgba(255,255,230,.48); font-size: 8px; }
.chip:hover, .chip.active { border-color: rgba(3,204,217,.33); background: rgba(3,204,217,.08); color: var(--layout-sky); }
.range-label { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: rgba(255,255,230,.65); font-size: 9px; font-weight: 800; }
.range-label output { color: var(--layout-sky); }
.range-label input { grid-column: 1 / 3; width: 100%; accent-color: var(--layout-sky); }
.toggle-list { display: flex; flex-direction: column; }
.toggle-list label { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--layout-line-soft); color: rgba(255,255,230,.65); font-size: 9px; font-weight: 800; }
.toggle-list label span small { display: block; margin-top: 2px; color: rgba(255,255,230,.3); font-size: 8px; font-weight: 400; }
.toggle-list input { width: 30px; height: 17px; accent-color: var(--layout-sky); }

.vault-balance { padding: 17px; border: 1px solid rgba(234,170,0,.25); border-radius: 13px; background: radial-gradient(circle at 85% 20%, rgba(234,170,0,.12), transparent 36%), rgba(48,34,74,.2); }
.vault-balance span, .metric-grid span { color: rgba(255,255,230,.38); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vault-balance strong { display: block; margin: 5px 0 2px; color: var(--layout-gold); font-family: var(--font-display, Georgia, serif); font-size: 38px; font-weight: 400; line-height: 1; }
.vault-balance small, .metric-grid small { color: rgba(255,255,230,.35); font-size: 8px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.metric-grid article { min-width: 0; padding: 11px; border: 1px solid var(--layout-line-soft); border-radius: 9px; background: rgba(48,34,74,.17); }
.metric-grid strong { display: block; margin: 5px 0 1px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 20px; font-weight: 400; }
.allocation { display: flex; flex-direction: column; gap: 10px; }
.allocation span { position: relative; padding-bottom: 8px; display: flex; justify-content: space-between; color: rgba(255,255,230,.48); font-size: 8px; }
.allocation span::before, .allocation span::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; }
.allocation span::before { right: 0; background: rgba(169,139,214,.1); }
.allocation span::after { width: var(--amount); background: linear-gradient(90deg, var(--layout-sky), var(--layout-lavender)); }
.allocation b { color: var(--layout-cream); }

.plain-list, .connection-list, .jump-list, .flow-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { min-height: 47px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 2px 8px; border-bottom: 1px solid var(--layout-line-soft); font-size: 9px; }
.plain-list li > span { color: rgba(255,255,230,.57); }
.plain-list li > b { color: rgba(255,255,230,.75); font-size: 8px; }
.plain-list li > small { grid-column: 1 / 3; color: rgba(255,255,230,.28); font-size: 7px; }
.boundary-note { margin-top: 14px; padding: 9px 10px; display: grid; grid-template-columns: auto 1fr; gap: 8px; border: 1px solid rgba(234,170,0,.16); border-radius: 8px; background: rgba(234,170,0,.035); color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.4; }
.boundary-note b { color: var(--layout-gold); text-transform: uppercase; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--layout-line); border-radius: 9px; background: rgba(48,34,74,.18); }
.segmented button { height: 29px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,230,.4); font-size: 8px; font-weight: 800; }
.segmented button.active { background: rgba(3,204,217,.08); color: var(--layout-sky); }
.connection-list li { min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--layout-line-soft); }
.mini-avatar, .connection-glyph { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(169,139,214,.35); border-radius: 50%; background: var(--layout-raised); color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); }
.mini-avatar { border-color: rgba(234,170,0,.4); color: var(--layout-gold); }
.connection-list div b, .connection-list div small { display: block; }
.connection-list div b { color: rgba(255,255,230,.75); font-size: 9px; }
.connection-list div small { margin-top: 2px; color: rgba(255,255,230,.3); font-size: 7px; }
.connection-list li > button { border: 0; background: transparent; color: var(--layout-sky); font-size: 8px; }

.create-with-ki { width: 100%; min-height: 64px; display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(3,204,217,.26); border-radius: 11px; background: linear-gradient(135deg, rgba(3,204,217,.08), rgba(94,63,148,.12)); color: var(--layout-sky); text-align: left; }
.create-with-ki b, .create-with-ki small { display: block; }
.create-with-ki b { color: var(--layout-cream); font-size: 10px; }
.create-with-ki small { margin-top: 3px; color: rgba(255,255,230,.36); font-size: 8px; }
.creation-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; margin-top: 18px; }
.creation-groups section > div { display: flex; flex-direction: column; }
.creation-groups section button { min-height: 35px; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--layout-line-soft); background: transparent; color: rgba(255,255,230,.54); font-size: 9px; text-align: left; }
.creation-groups section button:hover { color: var(--layout-sky); }
.creation-groups section button i { width: 6px; height: 6px; border: 1px solid var(--layout-lavender); transform: rotate(45deg); }

.package-list { display: flex; flex-direction: column; gap: 10px; }
.package-card { display: grid; grid-template-columns: 70px 1fr; gap: 11px; padding: 10px; border: 1px solid var(--layout-line); border-radius: 12px; background: rgba(48,34,74,.18); }
.package-card.loaded { border-color: rgba(3,204,217,.36); }
.package-art { width: 70px; height: 76px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--package-line); border-radius: 9px; background: radial-gradient(circle, var(--package-glow), transparent 68%), #0e0916; }
.package-art img { width: 62px; height: 62px; object-fit: contain; }
.package-art span { color: var(--package-color); font-family: var(--font-display, Georgia, serif); font-size: 23px; }
.art-gold { --package-line: rgba(234,170,0,.27); --package-glow: rgba(234,170,0,.14); --package-color: var(--layout-gold); }
.art-sky { --package-line: rgba(3,204,217,.25); --package-glow: rgba(3,204,217,.12); --package-color: var(--layout-sky); }
.art-mint { --package-line: rgba(143,230,198,.25); --package-glow: rgba(143,230,198,.12); --package-color: var(--layout-mint); }
.package-card > div:nth-child(2) > span { color: var(--layout-gold); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.package-card h3 { margin: 4px 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 18px; font-weight: 400; }
.package-card p { margin: 0; color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.4; }
.package-card small { display: block; margin-top: 5px; color: rgba(255,255,230,.3); font-size: 7px; }
.package-card > button { grid-column: 1 / 3; width: 100%; }

.history-search { height: 38px; display: grid; grid-template-columns: 24px 1fr; align-items: center; padding: 0 9px; border: 1px solid var(--layout-line); border-radius: 9px; background: rgba(48,34,74,.18); color: rgba(255,255,230,.35); }
.history-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--layout-cream); font-size: 9px; cursor: text; }
.history-search input::placeholder { color: rgba(255,255,230,.26); }
.history-filters { margin: 10px 0 6px; }
.history-list { display: flex; flex-direction: column; }
.history-list > button { min-height: 64px; display: grid; grid-template-columns: 46px 1fr 18px; align-items: center; gap: 8px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--layout-line-soft); background: transparent; text-align: left; }
.history-list > button:hover { background: rgba(48,34,74,.14); }
.history-list time { color: rgba(255,255,230,.29); font-size: 8px; }
.history-list span i, .history-list span b, .history-list span small { display: block; }
.history-list span i { color: var(--layout-sky); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.history-list span b { margin-top: 2px; color: rgba(255,255,230,.7); font-size: 9px; }
.history-list span small { margin-top: 2px; color: rgba(255,255,230,.29); font-size: 7px; }
.history-list > button > svg { color: rgba(255,255,230,.25); }
.empty-state { padding: 25px 0; color: rgba(255,255,230,.38); font-size: 10px; text-align: center; }

.avatar-hero { display: grid; grid-template-columns: 98px 1fr; align-items: center; gap: 15px; }
.avatar-hero > img { width: 98px; height: 98px; object-fit: cover; border: 1px solid rgba(234,170,0,.36); border-radius: 50%; box-shadow: 0 0 0 4px #130d1e, 0 0 0 5px rgba(169,139,214,.24); }
.avatar-hero span { color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.avatar-hero h3 { margin: 4px 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 28px; font-weight: 400; }
.avatar-hero p { margin: 0; color: rgba(255,255,230,.42); font-size: 8px; line-height: 1.45; }
.avatar-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.avatar-states button { min-width: 0; padding: 5px 3px 6px; border: 1px solid var(--layout-line); border-radius: 9px; background: rgba(48,34,74,.16); }
.avatar-states button.active { border-color: rgba(3,204,217,.4); background: rgba(3,204,217,.06); }
.avatar-states img { width: 48px; height: 48px; max-width: 100%; border-radius: 50%; object-fit: cover; }
.avatar-states span { display: block; margin-top: 3px; overflow: hidden; color: rgba(255,255,230,.45); font-size: 7px; text-overflow: ellipsis; text-transform: capitalize; }

.mode-options { display: flex; flex-direction: column; gap: 8px; }
.mode-options button { position: relative; min-height: 92px; padding: 13px 38px 12px 14px; display: grid; grid-template-columns: 1fr auto; align-content: center; border: 1px solid var(--layout-line); border-radius: 11px; background: rgba(48,34,74,.16); text-align: left; }
.mode-options button:hover, .mode-options button.active { border-color: rgba(3,204,217,.35); background: linear-gradient(135deg, rgba(3,204,217,.06), rgba(94,63,148,.1)); }
.mode-options button > span { color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 19px; }
.mode-options button > small { align-self: center; color: var(--layout-sky); font-size: 7px; font-weight: 800; }
.mode-options button > p { grid-column: 1 / 3; margin: 5px 0 0; color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.4; }
.mode-options button > svg { position: absolute; right: 13px; top: 50%; color: rgba(255,255,230,.25); transform: translateY(-50%); }

.breadcrumbs { display: flex; align-items: center; gap: 6px; color: rgba(255,255,230,.32); font-size: 8px; }
.breadcrumbs button { border: 0; background: transparent; color: rgba(255,255,230,.44); font-size: 8px; }
.breadcrumbs i { font-style: normal; }
.breadcrumbs strong { color: var(--layout-sky); }
.map-mini { position: relative; height: 210px; margin-top: 13px; overflow: hidden; border: 1px solid var(--layout-line); border-radius: 12px; background: radial-gradient(circle at center, rgba(3,204,217,.08), transparent 28%), rgba(48,34,74,.13); }
.map-mini > button { position: absolute; width: 66px; height: 30px; border: 1px solid rgba(169,139,214,.25); border-radius: 16px; background: #171020; color: rgba(255,255,230,.55); font-size: 8px; }
.map-mini > button:nth-of-type(1) { left: 50%; top: 50%; transform: translate(-50%,-50%); border-color: rgba(3,204,217,.4); color: var(--layout-sky); }
.map-mini > button:nth-of-type(2) { left: 13%; top: 22%; }
.map-mini > button:nth-of-type(3) { right: 13%; top: 22%; }
.map-mini > button:nth-of-type(4) { left: 13%; bottom: 13%; }
.map-mini > button:nth-of-type(5) { right: 13%; bottom: 13%; }
.map-you { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); color: var(--layout-mint); font-size: 7px; }
.map-mini::before, .map-mini::after { content: ''; position: absolute; left: 20%; right: 20%; top: 38%; height: 1px; background: rgba(169,139,214,.14); transform: rotate(21deg); }
.map-mini::after { transform: rotate(-21deg); }
.jump-list li > button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--layout-line-soft); background: transparent; text-align: left; }
.jump-list li > button > span { color: var(--layout-gold); font-size: 18px; }
.jump-list b, .jump-list small { display: block; }
.jump-list b { color: rgba(255,255,230,.65); font-size: 9px; }
.jump-list small { margin-top: 2px; color: rgba(255,255,230,.28); font-size: 7px; }

.economics-ring { position: relative; width: 178px; height: 178px; margin: 4px auto 15px; display: grid; place-items: center; }
.economics-ring > div { position: absolute; z-index: 2; text-align: center; }
.economics-ring strong, .economics-ring span { display: block; }
.economics-ring strong { color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 31px; font-weight: 400; }
.economics-ring span { margin-top: 2px; color: rgba(255,255,230,.34); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.economics-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.economics-ring circle { fill: none; stroke: rgba(169,139,214,.09); stroke-width: 5; }
.economics-ring circle.value { stroke: var(--layout-sky); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 86; filter: drop-shadow(0 0 4px rgba(3,204,217,.35)); }
.flow-list li { min-height: 54px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--layout-line-soft); }
.flow-list > li > i { width: 7px; height: 7px; border-radius: 50%; }
.flow-list .in { background: var(--layout-mint); }
.flow-list .out { background: var(--layout-gold); }
.flow-list .hold { background: var(--layout-lavender); }
.flow-list b, .flow-list small { display: block; }
.flow-list b { color: rgba(255,255,230,.63); font-size: 9px; }
.flow-list small { margin-top: 2px; color: rgba(255,255,230,.28); font-size: 7px; }
.flow-list li > strong { color: rgba(255,255,230,.72); font-size: 9px; }

.attention-summary { min-height: 76px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(234,170,0,.24); border-radius: 11px; background: rgba(234,170,0,.045); }
.attention-summary strong { color: var(--layout-gold); font-family: var(--font-display, Georgia, serif); font-size: 42px; font-weight: 400; }
.attention-summary span { color: rgba(255,255,230,.53); font-size: 10px; line-height: 1.4; }
.decision-card { margin-top: 10px; padding: 13px; border: 1px solid var(--layout-line); border-radius: 11px; background: rgba(48,34,74,.16); }
.decision-card.urgent { border-color: rgba(234,170,0,.25); }
.decision-card > span, .pattern-card > span { color: var(--layout-gold); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.decision-card h3, .pattern-card h3 { margin: 5px 0; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 18px; font-weight: 400; }
.decision-card p, .pattern-card p { margin: 0; color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.45; }
.decision-card > div { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.decision-card small { color: rgba(255,255,230,.28); font-size: 7px; }
.decision-card button { border: 0; background: transparent; color: var(--layout-sky); font-size: 8px; }

.culture-constellation { position: relative; height: 130px; margin-bottom: 10px; border: 1px solid var(--layout-line-soft); border-radius: 50%; }
.culture-constellation::before, .culture-constellation::after { content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: rgba(169,139,214,.18); transform: rotate(18deg); }
.culture-constellation::after { transform: rotate(-24deg); }
.culture-constellation i { position: absolute; width: 11px; height: 11px; border: 1px solid var(--layout-lavender); border-radius: 50%; background: var(--layout-deep); box-shadow: 0 0 12px rgba(169,139,214,.3); }
.culture-constellation i:nth-child(1) { left: 22%; top: 35%; }
.culture-constellation i:nth-child(2) { left: 47%; top: 20%; border-color: var(--layout-gold); }
.culture-constellation i:nth-child(3) { right: 22%; top: 58%; border-color: var(--layout-sky); }
.culture-constellation i:nth-child(4) { left: 41%; bottom: 17%; border-color: var(--layout-mint); }
.pattern-card { padding: 14px; border: 1px solid rgba(169,139,214,.24); border-radius: 11px; background: linear-gradient(135deg, rgba(94,63,148,.16), rgba(3,204,217,.035)); }
.pattern-card > small { display: block; margin-top: 8px; color: rgba(255,255,230,.28); font-size: 7px; }

.inspector { position: absolute; z-index: 37; right: calc(var(--panel-width) + 26px); top: 72px; width: 330px; overflow: hidden; border: 1px solid rgba(234,170,0,.3); border-radius: 14px; background: rgba(18,12,28,.97); box-shadow: 0 24px 65px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.inspector > header { min-height: 68px; }
.inspector > header span { color: var(--layout-gold); }
.inspector-body { padding: 16px; }
.inspector-body > p { margin: 0; color: rgba(255,255,230,.54); font-size: 10px; line-height: 1.55; }
.inspector dl { margin: 15px 0 0; }
.inspector dl div { padding: 9px 0; border-top: 1px solid var(--layout-line-soft); }
.inspector dt { color: rgba(255,255,230,.3); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.inspector dd { margin: 3px 0 0; color: rgba(255,255,230,.65); font-size: 9px; line-height: 1.4; }

.toast { position: absolute; z-index: 60; left: 50%; bottom: calc(var(--composer-height) + 28px); min-width: 300px; max-width: 520px; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 9px; border: 1px solid rgba(143,230,198,.3); border-radius: 12px; background: rgba(19,13,30,.96); box-shadow: 0 18px 44px rgba(0,0,0,.4); transform: translateX(-50%); }
.toast > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(143,230,198,.08); color: var(--layout-mint); }
.toast span { color: rgba(255,255,230,.7); font-size: 9px; }

.calm-motion *, .calm-motion *::before, .calm-motion *::after { animation: none !important; transition: none !important; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.text-button { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--layout-sky); font-size: 9px; font-weight: 800; }
.danger-text { color: var(--layout-danger) !important; }

.receiver-panel {
  left: 14px;
  right: auto;
  top: 12px;
  bottom: 12px;
  width: clamp(620px, 56vw, 760px);
  max-width: calc(100% - 28px);
  grid-template-rows: 74px minmax(0, 1fr);
  border-color: rgba(3,204,217,.27);
  background: rgba(15,10,28,.975);
  box-shadow: 24px 24px 80px rgba(0,0,0,.58), inset 0 1px rgba(255,255,230,.035);
}
.receiver-panel > header { padding-left: 22px; }
.receiver-title { display: flex; align-items: center; gap: 13px; }
.receiver-title > .rail-role-icon { width: 30px; height: 30px; color: var(--layout-sky); filter: drop-shadow(0 0 8px rgba(3,204,217,.26)); }
.receiver-shell { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.receiver-sticky { position: relative; z-index: 2; padding: 13px 18px 0; border-bottom: 1px solid var(--layout-line); background: linear-gradient(180deg, rgba(37,25,56,.88), rgba(18,12,28,.97)); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.receiver-scroll { min-height: 0; overflow-y: auto; padding: 17px 18px 30px; scrollbar-color: rgba(169,139,214,.24) transparent; scrollbar-width: thin; }
.receiver-profile-bar { display: flex; align-items: end; gap: 10px; }
.receiver-profile-bar label { flex: 1; color: rgba(255,255,230,.42); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.receiver-profile-bar select { height: 34px; margin-top: 5px; color: var(--layout-cream); text-transform: none; letter-spacing: normal; }
.receiver-profile-bar .state-live { margin-bottom: 8px; }

.receiver-command { position: relative; margin-top: 11px; display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 8px 14px; padding: 11px 12px; border: 1px solid rgba(3,204,217,.2); border-radius: 12px; background: linear-gradient(120deg, rgba(3,204,217,.055), rgba(94,63,148,.09)); }
.receiver-command > div:first-child span { color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.receiver-command h3 { margin: 3px 0 2px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 16px; font-weight: 400; }
.receiver-command p { margin: 0; color: rgba(255,255,230,.38); font-size: 7px; line-height: 1.35; }
.receiver-command textarea { grid-column: 2; grid-row: 1 / 3; min-height: 69px; padding: 9px 10px; font-size: 9px; }
.receiver-command-actions { align-self: end; display: flex; align-items: center; gap: 4px; }
.receiver-proposal { grid-column: 1 / 3; padding: 10px; border: 1px solid rgba(234,170,0,.24); border-radius: 9px; background: rgba(234,170,0,.04); }
.receiver-proposal > span { color: var(--layout-gold); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.receiver-proposal ul { margin: 7px 0; padding-left: 17px; color: rgba(255,255,230,.68); font-size: 9px; line-height: 1.5; }
.receiver-proposal p { color: rgba(255,255,230,.52); font-size: 8px; }
.receiver-proposal > div { display: flex; gap: 7px; }
.receiver-tabs { margin-top: 11px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.receiver-tabs::-webkit-scrollbar { display: none; }
.receiver-tabs button { position: relative; min-width: max-content; height: 36px; padding: 0 10px; border: 0; background: transparent; color: rgba(255,255,230,.44); font-size: 8px; font-weight: 900; }
.receiver-tabs button:hover, .receiver-tabs button.active { color: var(--layout-cream); }
.receiver-tabs button.active::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--layout-sky); box-shadow: 0 0 8px rgba(3,204,217,.5); }

.receiver-view { display: flex; flex-direction: column; gap: 12px; }
.receiver-help { margin: 0; color: rgba(255,255,230,.45); font-size: 9px; line-height: 1.5; }
.receiver-card { padding: 14px; border: 1px solid var(--layout-line); border-radius: 12px; background: rgba(48,34,74,.15); }
.receiver-card > h3, .receiver-section h3, .vibe-card h3 { margin: 0 0 8px; color: rgba(255,255,230,.78); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.receiver-card > p { margin: 5px 0; color: rgba(255,255,230,.6); font-size: 9px; line-height: 1.5; }
.receiver-card > small { color: rgba(255,255,230,.34); font-size: 8px; line-height: 1.4; }
.receiver-metrics { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 9px; }
.receiver-metrics article { min-width: 0; padding: 13px; border: 1px solid rgba(169,139,214,.16); border-radius: 11px; background: radial-gradient(circle at 100% 0, rgba(3,204,217,.06), transparent 45%), rgba(48,34,74,.16); }
.receiver-metrics span, .receiver-label-group > span { color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.receiver-metrics strong { display: block; margin-top: 5px; overflow: hidden; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 21px; font-weight: 400; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.receiver-metrics small { display: block; margin-top: 3px; color: rgba(255,255,230,.34); font-size: 7px; }
.receiver-label-group { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: start; gap: 8px; margin-top: 8px; }
.receiver-label-group > span { padding-top: 5px; color: rgba(255,255,230,.35); }
.summary-chip { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid rgba(3,204,217,.2); border-radius: 13px; background: rgba(3,204,217,.055); color: rgba(255,255,230,.68); font-size: 8px; }
button.summary-chip { cursor: pointer; }
.receiver-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.receiver-compact-list, .receiver-preview-list { margin: 0; padding: 0; list-style: none; }
.receiver-compact-list li { min-height: 39px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--layout-line-soft); }
.receiver-compact-list b { color: rgba(255,255,230,.7); font-size: 9px; }
.receiver-compact-list span { margin-top: 2px; color: rgba(255,255,230,.35); font-size: 7px; }
.receiver-preview-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.receiver-preview-list li { padding: 10px; border: 1px solid var(--layout-line-soft); border-radius: 9px; background: rgba(15,10,28,.32); }
.receiver-preview-list b, .receiver-preview-list small { display: block; }
.receiver-preview-list b { margin: 5px 0 3px; color: rgba(255,255,230,.72); font-size: 9px; }
.receiver-preview-list small { color: rgba(255,255,230,.34); font-size: 7px; line-height: 1.4; }
.receiver-type { display: inline-flex; width: max-content; color: var(--layout-gold); font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.receiver-footer-actions { display: flex; justify-content: flex-end; gap: 8px; }
.receiver-empty { padding: 17px; color: rgba(255,255,230,.38); font-size: 9px; text-align: center; }

.receiver-profile-create > div, .receiver-topic-entry, .receiver-inline-edit { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.receiver-profile-create input, .receiver-topic-entry input, .receiver-inline-edit input, .receiver-date-grid input, .receiver-tools input, .transmitter-row input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--layout-line); border-radius: 8px; background: rgba(48,34,74,.24); color: var(--layout-cream); }
.receiver-profile-list { display: flex; flex-direction: column; gap: 8px; }
.receiver-profile-row { display: grid; grid-template-columns: minmax(160px,1fr) 1.6fr; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--layout-line); border-radius: 11px; background: rgba(48,34,74,.12); }
.receiver-profile-row.active { border-color: rgba(3,204,217,.32); background: rgba(3,204,217,.045); }
.receiver-profile-row > div:first-child span, .receiver-profile-row > div:first-child b, .receiver-profile-row > div:first-child small { display: block; }
.receiver-profile-row > div:first-child span { color: var(--layout-sky); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.receiver-profile-row > div:first-child b { margin-top: 3px; color: var(--layout-cream); font-family: var(--font-display, Georgia, serif); font-size: 17px; font-weight: 400; }
.receiver-profile-row > div:first-child small { margin-top: 3px; color: rgba(255,255,230,.34); font-size: 7px; }
.receiver-profile-row > div:nth-child(2) { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.receiver-profile-row > div:nth-child(2) button, .transmitter-actions button, .receiver-add-grid button, .receiver-restore { min-height: 29px; padding: 0 8px; border: 1px solid var(--layout-line); border-radius: 7px; background: rgba(48,34,74,.22); color: rgba(255,255,230,.58); font-size: 7px; font-weight: 800; }
.receiver-confirm, .receiver-inline-edit { grid-column: 1 / 3; }
.receiver-confirm { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 9px; border-top: 1px solid rgba(220,82,92,.18); color: rgba(255,255,230,.6); font-size: 8px; }
.receiver-confirm button { min-height: 28px; border: 1px solid rgba(220,82,92,.35); border-radius: 7px; background: rgba(220,82,92,.08); color: var(--layout-danger); }
.receiver-restore { width: 100%; color: var(--layout-mint); }

.receiver-tools { display: grid; grid-template-columns: minmax(0,1fr) 124px 105px; gap: 7px; }
.receiver-search { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; padding: 0 8px; border: 1px solid var(--layout-line); border-radius: 9px; color: rgba(255,255,230,.35); background: rgba(48,34,74,.14); }
.receiver-search input { height: 34px; padding: 0; border: 0; background: transparent; }
.receiver-tools select { height: 36px; font-size: 8px; }
.receiver-section { margin-top: 4px; }
.transmitter-list { display: flex; flex-direction: column; gap: 8px; }
.transmitter-row { display: grid; grid-template-columns: minmax(150px,1.5fr) minmax(112px,.75fr) 68px minmax(125px,.9fr) auto; align-items: end; gap: 7px; padding: 11px; border: 1px solid var(--layout-line); border-radius: 11px; background: rgba(48,34,74,.13); }
.transmitter-main b, .transmitter-main small { display: block; }
.transmitter-main b { margin: 4px 0 2px; color: rgba(255,255,230,.78); font-size: 10px; }
.transmitter-main small { color: rgba(255,255,230,.32); font-size: 7px; line-height: 1.35; }
.transmitter-row label { color: rgba(255,255,230,.34); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.transmitter-row label select, .transmitter-row label input { width: 100%; height: 31px; margin-top: 4px; padding: 0 6px; font-size: 7px; text-transform: none; }
.transmitter-actions { display: flex; gap: 4px; }
.transmitter-detail { grid-column: 1 / 6; padding-top: 9px; border-top: 1px solid var(--layout-line-soft); }
.transmitter-detail dl { margin: 0; display: grid; grid-template-columns: 1fr .55fr 1.2fr; gap: 11px; }
.transmitter-detail dt { color: var(--layout-sky); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.transmitter-detail dd { margin: 3px 0 0; color: rgba(255,255,230,.48); font-size: 8px; line-height: 1.4; }
.receiver-add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.receiver-add-grid article { display: flex; flex-direction: column; min-height: 115px; padding: 10px; border: 1px solid var(--layout-line-soft); border-radius: 9px; background: rgba(48,34,74,.1); }
.receiver-add-grid b { margin: 5px 0 3px; color: rgba(255,255,230,.7); font-size: 9px; }
.receiver-add-grid small { flex: 1; color: rgba(255,255,230,.34); font-size: 7px; line-height: 1.4; }
.receiver-add-grid button { margin-top: 8px; color: var(--layout-sky); }

.receiver-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.receiver-choice { min-height: 48px; padding: 8px 10px; border: 1px solid var(--layout-line); border-radius: 9px; background: rgba(48,34,74,.15); color: rgba(255,255,230,.55); text-align: left; }
.receiver-choice.active { border-color: rgba(3,204,217,.34); background: rgba(3,204,217,.065); color: var(--layout-cream); }
.receiver-choice b, .receiver-choice small { display: block; }
.receiver-choice b { font-size: 9px; }
.receiver-choice small { margin-top: 3px; color: rgba(255,255,230,.3); font-size: 7px; }
.receiver-card details { border-top: 1px solid var(--layout-line-soft); }
.receiver-card summary { padding: 11px 0; color: rgba(255,255,230,.6); font-size: 9px; font-weight: 800; cursor: pointer; }
.receiver-focus-list { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 10px; }

.receiver-boundary { padding: 12px; border: 1px solid rgba(234,170,0,.2); border-radius: 10px; background: rgba(234,170,0,.035); }
.receiver-boundary b { color: var(--layout-gold); font-size: 9px; }
.receiver-boundary p { margin: 4px 0 0; color: rgba(255,255,230,.43); font-size: 8px; line-height: 1.45; }
.vibe-card { padding: 14px; border: 1px solid var(--layout-line); border-radius: 12px; background: rgba(48,34,74,.14); }
.vibe-card header { display: flex; justify-content: space-between; gap: 12px; }
.vibe-card header span { color: var(--layout-sky); font-size: 7px; font-weight: 900; }
.vibe-card header h3 { margin: 4px 0 0; }
.vibe-card header strong { color: var(--layout-gold); font-family: var(--font-display, Georgia, serif); font-size: 19px; font-weight: 400; }
.vibe-card > p { margin: 7px 0 13px; color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.4; }
.vibe-range { position: relative; height: 22px; }
.vibe-range > i { position: absolute; left: var(--vibe-low); right: calc(100% - var(--vibe-high)); top: 9px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--layout-lavender), var(--layout-sky)); box-shadow: 0 0 9px rgba(3,204,217,.2); }
.vibe-range input { position: absolute; inset: 0; width: 100%; margin: 0; pointer-events: none; appearance: none; background: transparent; }
.vibe-range input::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid #171020; border-radius: 50%; appearance: none; background: var(--layout-sky); box-shadow: 0 0 0 1px rgba(3,204,217,.48); pointer-events: auto; }
.vibe-range input:first-of-type::-webkit-slider-thumb { background: var(--layout-lavender); }
.vibe-range input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #171020; border-radius: 50%; background: var(--layout-sky); pointer-events: auto; }
.vibe-poles, .vibe-card footer { display: flex; justify-content: space-between; }
.vibe-poles { color: rgba(255,255,230,.36); font-size: 7px; }
.vibe-card footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--layout-line-soft); color: rgba(255,255,230,.37); font-size: 7px; }
.vibe-card footer b { color: var(--layout-mint); }

.receiver-strength { display: block; margin-top: 15px; }
.receiver-strength output { display: block; margin-bottom: 7px; color: var(--layout-gold); font-family: var(--font-display, Georgia, serif); font-size: 34px; text-align: center; }
.receiver-strength input { width: 100%; accent-color: var(--layout-sky); }
.receiver-strength > div { display: flex; justify-content: space-between; color: rgba(255,255,230,.47); font-size: 8px; }
.receiver-strength > div span:nth-child(2) { text-align: center; }
.receiver-strength > div span:last-child { text-align: right; }
.receiver-strength b { display: block; color: rgba(255,255,230,.27); font-size: 7px; }
.receiver-preview-copy { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: rgba(3,204,217,.05); color: rgba(255,255,230,.58); font-size: 8px; line-height: 1.4; }
.receiver-preset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.receiver-preset-grid .receiver-choice { min-height: 39px; text-align: center; }
.receiver-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.receiver-date-grid label { color: rgba(255,255,230,.4); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.receiver-date-grid input { width: 100%; margin-top: 5px; color-scheme: dark; }

/* Receiver experiment 0.02 — a full-Field graphical projection that preserves Layout chrome. */
.receiver-v2 {
  position: absolute;
  z-index: 120;
  inset: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 76px auto minmax(0,1fr) 76px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(94,63,148,.2), transparent 42%),
    linear-gradient(150deg, #08040e, #11091d 45%, #08050f);
  color: var(--layout-cream);
}
.receiver-v2-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.receiver-v2-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(169,139,214,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(169,139,214,.08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, transparent 0, black 18%, black 78%, transparent 100%);
}
.receiver-v2-atmosphere i { position: absolute; width: 360px; height: 360px; border: 1px solid rgba(169,139,214,.1); border-radius: 50%; box-shadow: 0 0 70px rgba(94,63,148,.12); }
.receiver-v2-atmosphere i:nth-child(1) { left: -160px; top: 16%; }
.receiver-v2-atmosphere i:nth-child(2) { right: -180px; top: 34%; width: 500px; height: 500px; }
.receiver-v2-atmosphere i:nth-child(3) { left: 35%; bottom: -280px; width: 620px; height: 620px; }
.receiver-v2-atmosphere i:nth-child(4) { left: 28%; top: 18%; width: 110px; height: 110px; border-color: rgba(3,204,217,.1); }

.receiver-v2-topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px,1fr) minmax(180px,250px) auto 44px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(169,139,214,.2);
  background: rgba(10,6,17,.86);
  box-shadow: 0 14px 38px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}
.receiver-v2-brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.receiver-v2-brand > .rail-role-icon { width: 34px; height: 34px; color: var(--layout-sky); filter: drop-shadow(0 0 10px rgba(3,204,217,.28)); }
.receiver-v2-brand span, .receiver-version-select > span, .receiver-v2-profile > span, .receiver-v2-sort > span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,230,.36);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.receiver-v2-brand h1 { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 25px; font-weight: 400; line-height: 1; }
.receiver-version-select select, .receiver-v2-profile select, .receiver-v2-sort select {
  height: 34px;
  border: 1px solid rgba(169,139,214,.24);
  border-radius: 8px;
  background: rgba(37,25,56,.9);
  color: var(--layout-cream);
  font-size: 10px;
  font-weight: 800;
}
.receiver-version-select select { min-width: 118px; }
.receiver-v2-profile select { width: 100%; }
.receiver-v2-manage, .receiver-v2-close, .receiver-v2-controls button, .receiver-v2-box-actions button, .receiver-v2-inspector button, .receiver-v2-recommendations button, .receiver-v2-ki button, .receiver-v2-more, .receiver-v2-profile-manager button {
  min-height: 34px;
  border: 1px solid rgba(169,139,214,.24);
  border-radius: 8px;
  background: rgba(37,25,56,.72);
  color: rgba(255,255,230,.72);
  font-size: 9px;
  font-weight: 800;
}
.receiver-v2-manage { padding: 0 12px; white-space: nowrap; }
.receiver-v2-close { display: grid; place-items: center; width: 38px; padding: 0; border-radius: 50%; }
.receiver-v2 button:hover { border-color: rgba(3,204,217,.45); color: var(--layout-cream); background: rgba(3,204,217,.09); }
.receiver-v2 button.add { border-color: rgba(3,204,217,.36); background: rgba(3,204,217,.09); color: var(--layout-sky); }
.receiver-v2 button.danger-text { color: #ff9ea5; }

.receiver-v2-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(240px,1.2fr) minmax(430px,1.8fr) 130px auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(169,139,214,.12);
  background: rgba(15,10,28,.76);
}
.receiver-v2-search { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(169,139,214,.22); border-radius: 10px; background: rgba(37,25,56,.54); color: rgba(169,139,214,.72); }
.receiver-v2-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--layout-cream); font-size: 10px; }
.receiver-v2-search input::placeholder { color: rgba(255,255,230,.28); }
.receiver-v2-controls nav { min-width: 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; }
.receiver-v2-controls nav button { flex: 0 0 auto; padding: 0 10px; background: transparent; }
.receiver-v2-controls nav button.active { border-color: rgba(3,204,217,.4); background: rgba(3,204,217,.1); color: var(--layout-sky); }
.receiver-v2-sort { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; }
.receiver-v2-sort > span { margin: 0; }
.receiver-v2-sort select { width: 100%; }
.receiver-v2-recommend-button { padding: 0 12px; color: var(--layout-gold) !important; border-color: rgba(234,170,0,.28) !important; }
.receiver-v2-undo { padding: 0 11px; }

.receiver-v2-scroll { min-height: 0; overflow: auto; padding: 24px 22px 42px; scroll-behavior: smooth; }
.receiver-v2-field-heading { max-width: 1480px; margin: 0 auto 18px; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.receiver-v2-field-heading > div:first-child > span { color: var(--layout-sky); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.receiver-v2-field-heading h2 { margin: 5px 0 3px; font-family: var(--font-display, Georgia, serif); font-size: 31px; font-weight: 400; }
.receiver-v2-field-heading p { max-width: 750px; margin: 0; color: rgba(255,255,230,.43); font-size: 10px; line-height: 1.55; }
.receiver-v2-field-heading > div:last-child { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(169,139,214,.14); border-radius: 9px; background: rgba(37,25,56,.28); text-align: right; }
.receiver-v2-field-heading > div:last-child span, .receiver-v2-field-heading > div:last-child strong { display: block; }
.receiver-v2-field-heading > div:last-child span { color: rgba(255,255,230,.3); font-size: 7px; text-transform: uppercase; }
.receiver-v2-field-heading > div:last-child strong { margin-top: 2px; color: var(--layout-lavender); font-size: 10px; }

.receiver-v2-grid { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(285px,1fr)); gap: 15px; align-items: stretch; }
.receiver-v2-box {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 132px minmax(174px,auto) auto auto;
  overflow: hidden;
  border: 1px solid rgba(169,139,214,.2);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(48,34,74,.8), rgba(20,13,31,.94));
  box-shadow: 0 14px 40px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}
.receiver-v2-box:hover { transform: translateY(-2px); border-color: rgba(169,139,214,.42); }
.receiver-v2-box.selected { border-color: rgba(3,204,217,.7); box-shadow: 0 0 0 1px rgba(3,204,217,.18), 0 16px 44px rgba(0,0,0,.3); }
.receiver-v2-box.available { border-style: dashed; }
.receiver-v2-box.muted { opacity: .52; filter: saturate(.55); }
.receiver-v2-box.muted::after { content: 'Muted'; position: absolute; top: 14px; right: 14px; padding: 5px 8px; border-radius: 99px; background: rgba(7,4,13,.78); color: rgba(255,255,230,.72); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-box.held { box-shadow: inset 4px 0 var(--layout-gold), 0 14px 40px rgba(0,0,0,.23); }
.receiver-v2-box.unavailable { opacity: .44; }
.receiver-v2-box.unavailable .receiver-v2-visual::after { content: 'Unavailable in this context'; position: absolute; inset: auto 12px 12px; padding: 7px; border-radius: 7px; background: rgba(7,4,13,.86); font-size: 8px; font-weight: 800; text-align: center; }
.receiver-v2-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(169,139,214,.29), rgba(7,4,13,.64)); border-bottom: 1px solid rgba(169,139,214,.14); }
.receiver-v2-visual::before { content: ''; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(169,139,214,.14); border-radius: 50%; box-shadow: 0 0 0 24px rgba(169,139,214,.025), 0 0 0 48px rgba(169,139,214,.015); }
.receiver-v2-visual img { position: relative; width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 9px 16px rgba(0,0,0,.38)); }
.receiver-v2-visual > span { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(3,204,217,.42); border-radius: 50%; color: var(--layout-sky); font-family: var(--font-display, Georgia, serif); font-size: 21px; background: rgba(3,204,217,.06); box-shadow: 0 0 24px rgba(3,204,217,.12); }
.receiver-v2-visual small { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); padding: 4px 7px; border-radius: 5px; background: rgba(7,4,13,.78); color: rgba(255,255,230,.55); font-size: 7px; line-height: 1.25; }
.kind-realm .receiver-v2-visual { background: radial-gradient(circle, rgba(3,204,217,.2), rgba(7,4,13,.68)); }
.kind-power-map .receiver-v2-visual { background: radial-gradient(circle, rgba(234,170,0,.18), rgba(7,4,13,.68)); }
.kind-package .receiver-v2-visual { background: radial-gradient(circle, rgba(143,230,198,.16), rgba(7,4,13,.68)); }
.receiver-v2-copy { padding: 14px 15px 10px; }
.receiver-v2-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.receiver-v2-box-head span { color: var(--layout-sky); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.receiver-v2-box-head b { font-size: 7px; font-weight: 800; }
.verification-verified { color: var(--layout-mint); }
.verification-provisional { color: var(--layout-gold); }
.receiver-v2-copy h2 { margin: 8px 0 2px; font-family: var(--font-display, Georgia, serif); font-size: 22px; font-weight: 400; line-height: 1.1; }
.receiver-v2-copy h3 { margin: 0 0 8px; color: var(--layout-lavender); font-size: 9px; }
.receiver-v2-copy p { margin: 0; color: rgba(255,255,230,.52); font-size: 9px; line-height: 1.5; }
.receiver-v2-copy > small { display: block; margin-top: 8px; color: rgba(255,255,230,.29); font-size: 7px; }
.receiver-v2-tuning { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 15px 13px; }
.receiver-v2-tuning label { min-width: 0; }
.receiver-v2-tuning label > span { display: flex; justify-content: space-between; color: rgba(255,255,230,.66); font-size: 8px; font-weight: 900; }
.receiver-v2-tuning output { color: var(--layout-sky); }
.receiver-v2-tuning input { width: 100%; margin: 8px 0 5px; accent-color: var(--layout-sky); }
.receiver-v2-scale { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 4px; color: rgba(255,255,230,.23); font-size: 6px; }
.receiver-v2-scale span:nth-child(2) { text-align: center; }
.receiver-v2-scale span:last-child { text-align: right; }
.receiver-v2-tuning small { display: block; min-height: 20px; color: rgba(255,255,230,.3); font-size: 7px; line-height: 1.3; }
.receiver-v2-box-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 10px 15px 14px; border-top: 1px solid rgba(169,139,214,.1); }
.receiver-v2-remove-confirm { position: absolute; z-index: 3; inset: auto 10px 10px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; padding: 10px; border: 1px solid rgba(220,82,92,.45); border-radius: 10px; background: rgba(28,9,18,.97); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.receiver-v2-remove-confirm span { font-size: 8px; line-height: 1.35; }
.receiver-v2-remove-confirm button { min-height: 30px; }
.receiver-v2-more { display: block; min-width: 180px; margin: 20px auto 0; padding: 0 16px; }
.receiver-v2-empty { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed rgba(169,139,214,.2); border-radius: 15px; text-align: center; }
.receiver-v2-empty h2 { margin: 0 0 7px; font-family: var(--font-display, Georgia, serif); font-weight: 400; }
.receiver-v2-empty p { color: rgba(255,255,230,.42); }

.receiver-v2-recommendations { max-width: 1480px; margin: 0 auto 18px; padding: 15px; border: 1px solid rgba(234,170,0,.24); border-radius: 14px; background: linear-gradient(135deg, rgba(234,170,0,.06), rgba(48,34,74,.44)); }
.receiver-v2-recommendations > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.receiver-v2-recommendations header span { color: var(--layout-gold); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-recommendations h2 { margin: 2px 0 0; font-family: var(--font-display, Georgia, serif); font-size: 19px; font-weight: 400; }
.receiver-v2-recommendations > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.receiver-v2-recommendations article { padding: 11px; border: 1px solid rgba(169,139,214,.15); border-radius: 10px; background: rgba(7,4,13,.36); }
.receiver-v2-recommendations article > span { color: var(--layout-sky); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-recommendations h3 { margin: 4px 0; font-size: 11px; }
.receiver-v2-recommendations p, .receiver-v2-recommendations small { color: rgba(255,255,230,.4); font-size: 8px; line-height: 1.4; }
.receiver-v2-recommendations article > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.receiver-v2-recommendations article button { min-height: 29px; padding: 0 8px; font-size: 7px; }

.receiver-v2-inspector, .receiver-v2-profile-manager {
  position: absolute;
  z-index: 8;
  top: 76px;
  right: 0;
  bottom: 76px;
  width: min(560px,100%);
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border-left: 1px solid rgba(3,204,217,.27);
  background: rgba(14,8,23,.97);
  box-shadow: -22px 0 70px rgba(0,0,0,.48);
  backdrop-filter: blur(22px);
}
.receiver-v2-inspector > header, .receiver-v2-profile-manager > header { position: relative; display: grid; grid-template-columns: 112px 1fr 38px; align-items: center; gap: 13px; padding: 15px; border-bottom: 1px solid rgba(169,139,214,.16); }
.receiver-v2-inspector > header .receiver-v2-visual { width: 112px; height: 86px; border: 1px solid rgba(169,139,214,.18); border-radius: 10px; }
.receiver-v2-inspector > header .receiver-v2-visual::before { width: 90px; height: 90px; }
.receiver-v2-inspector > header .receiver-v2-visual img { width: 58px; height: 58px; }
.receiver-v2-inspector header > div > span, .receiver-v2-profile-manager header span { color: var(--layout-sky); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-inspector header h2, .receiver-v2-profile-manager header h2 { margin: 3px 0; font-family: var(--font-display, Georgia, serif); font-size: 22px; font-weight: 400; }
.receiver-v2-inspector header p, .receiver-v2-profile-manager header p { margin: 0; color: rgba(255,255,230,.38); font-size: 8px; line-height: 1.4; }
.receiver-v2-inspector-scroll { min-height: 0; overflow: auto; padding: 15px; }
.receiver-v2-distinction { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 12px; border: 1px solid rgba(234,170,0,.22); border-radius: 10px; background: rgba(234,170,0,.04); }
.receiver-v2-distinction b { color: var(--layout-gold); font-size: 9px; }
.receiver-v2-distinction span { color: rgba(255,255,230,.54); font-size: 8px; }
.receiver-v2-inspector dl { margin: 13px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.receiver-v2-inspector dl div { min-width: 0; padding: 9px; border: 1px solid rgba(169,139,214,.11); border-radius: 8px; background: rgba(48,34,74,.18); }
.receiver-v2-inspector dt { color: rgba(255,255,230,.29); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-inspector dd { margin: 4px 0 0; color: rgba(255,255,230,.67); font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.receiver-v2-inspector-actions { display: flex; gap: 8px; }
.receiver-v2-inspector-actions button { flex: 1; }

.receiver-v2-profile-manager { grid-template-rows: auto auto minmax(0,1fr) auto; width: min(620px,100%); }
.receiver-v2-profile-manager > header { grid-template-columns: 1fr 38px; }
.receiver-v2-profile-create { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border-bottom: 1px solid rgba(169,139,214,.12); }
.receiver-v2-profile-create input, .receiver-v2-profile-rename input { min-width: 0; height: 38px; padding: 0 11px; border: 1px solid rgba(169,139,214,.22); border-radius: 8px; background: rgba(37,25,56,.62); color: var(--layout-cream); }
.receiver-v2-profile-compare { padding: 12px 14px; border-bottom: 1px solid rgba(169,139,214,.12); background: rgba(3,204,217,.035); }
.receiver-v2-profile-compare > header { display: flex; align-items: center; justify-content: space-between; color: var(--layout-sky); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.receiver-v2-profile-compare > header button { min-height: 28px; padding: 0 8px; }
.receiver-v2-profile-compare > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.receiver-v2-profile-compare article { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 9px; border: 1px solid rgba(169,139,214,.12); border-radius: 8px; }
.receiver-v2-profile-compare article b { font-size: 9px; }
.receiver-v2-profile-compare article strong { color: var(--layout-gold); font-family: var(--font-display, Georgia, serif); font-size: 18px; font-weight: 400; }
.receiver-v2-profile-compare article small { grid-column: 1 / -1; color: rgba(255,255,230,.35); font-size: 7px; }
.receiver-v2-profile-compare > p { margin: 8px 0 0; color: rgba(255,255,230,.48); font-size: 8px; }
.receiver-v2-profile-list { min-height: 0; overflow: auto; padding: 12px; }
.receiver-v2-profile-list article { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(169,139,214,.14); border-radius: 10px; background: rgba(48,34,74,.18); }
.receiver-v2-profile-list article.active { border-color: rgba(3,204,217,.34); background: rgba(3,204,217,.045); }
.receiver-v2-profile-list article span, .receiver-v2-profile-list article small { display: block; color: rgba(255,255,230,.32); font-size: 7px; }
.receiver-v2-profile-list h3 { margin: 3px 0; font-size: 11px; }
.receiver-v2-profile-list article > div:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.receiver-v2-profile-list article button { min-height: 30px; padding: 0 8px; font-size: 7px; }
.receiver-v2-profile-confirm, .receiver-v2-profile-rename { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid rgba(169,139,214,.1); }
.receiver-v2-profile-confirm span { flex: 1; color: rgba(255,255,230,.65) !important; }
.receiver-v2-profile-rename input { flex: 1; }
.receiver-v2-profile-manager > footer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(169,139,214,.13); }
.receiver-v2-profile-manager > footer button { flex: 1; }

.receiver-v2-ki {
  position: relative;
  z-index: 10;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-top: 1px solid rgba(3,204,217,.22);
  background: rgba(9,5,15,.94);
  box-shadow: 0 -18px 50px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.ki-word-circle { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(234,170,0,.52); border-radius: 50%; background: radial-gradient(circle, rgba(234,170,0,.14), rgba(7,4,13,.8)); color: var(--layout-gold); font-family: 'Goudy Heavyface', 'Goudy Old Style', Georgia, serif; font-size: 19px; font-weight: 900; box-shadow: 0 0 22px rgba(234,170,0,.1); }
.receiver-v2-ki label { min-width: 0; }
.receiver-v2-ki label span { display: block; color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.receiver-v2-ki input { width: 100%; border: 0; outline: 0; padding: 4px 0; background: transparent; color: var(--layout-cream); font-size: 11px; }
.receiver-v2-ki input::placeholder { color: rgba(255,255,230,.28); }
.receiver-v2-voice-actions { display: flex; align-items: center; gap: 7px; }
.receiver-v2-voice-actions button { min-width: 78px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--layout-sky); }
.receiver-v2-voice-actions .receiver-v2-preview { min-width: 90px; }
.interface-icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; background: currentColor; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.icon-microphone { -webkit-mask-image: url('assets/interface-icons/microphone.svg'); mask-image: url('assets/interface-icons/microphone.svg'); }
.icon-voice-live { -webkit-mask-image: url('assets/interface-icons/voice-live.svg'); mask-image: url('assets/interface-icons/voice-live.svg'); }
.receiver-v2-ki-proposal { position: absolute; right: 18px; bottom: 68px; width: min(460px,calc(100vw - 36px)); padding: 13px; border: 1px solid rgba(3,204,217,.38); border-radius: 12px; background: rgba(16,10,27,.98); box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.receiver-v2-ki-proposal > span { color: var(--layout-sky); font-size: 9px; font-weight: 900; }
.receiver-v2-ki-proposal ul { margin: 9px 0; padding-left: 17px; color: rgba(255,255,230,.58); font-size: 8px; line-height: 1.5; }
.receiver-v2-ki-proposal > div { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 1100px) {
  .receiver-v2 { grid-template-rows: 72px auto minmax(0,1fr) 72px; }
  .receiver-v2-topbar { grid-template-columns: 1fr minmax(160px,220px) auto 40px; padding: 0 14px; gap: 8px; }
  .receiver-v2-controls { grid-template-columns: minmax(210px,1fr) minmax(360px,1.4fr) 120px auto; padding: 9px 14px; }
  .receiver-v2-undo { display: none; }
  .receiver-v2-grid { grid-template-columns: repeat(2,minmax(280px,1fr)); }
  .receiver-v2-inspector, .receiver-v2-profile-manager { top: 72px; bottom: 72px; }
}

@media (max-width: 760px) {
  .receiver-v2 { grid-template-rows: auto auto minmax(0,1fr) auto; }
  .receiver-v2-topbar { grid-template-columns: 1fr auto 40px; padding: 9px 10px; }
  .receiver-v2-brand { grid-row: 1; }
  .receiver-v2-profile { grid-column: 2; grid-row: 1; min-width: 145px; }
  .receiver-v2-manage { grid-column: 2; }
  .receiver-v2-close { grid-column: 3; grid-row: 1; }
  .receiver-v2-controls { grid-template-columns: 1fr auto; padding: 8px 10px; }
  .receiver-v2-search { grid-column: 1 / -1; }
  .receiver-v2-controls nav { grid-column: 1 / -1; order: 2; }
  .receiver-v2-sort { grid-column: 1; }
  .receiver-v2-recommend-button { grid-column: 2; }
  .receiver-v2-scroll { padding: 18px 10px 32px; }
  .receiver-v2-grid { grid-template-columns: 1fr; }
  .receiver-v2-field-heading { align-items: start; }
  .receiver-v2-field-heading > div:last-child { display: none; }
  .receiver-v2-recommendations > div { grid-template-columns: 1fr; }
  .receiver-v2-inspector, .receiver-v2-profile-manager { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .receiver-v2-profile-list article { grid-template-columns: 1fr; }
  .receiver-v2-ki { grid-template-columns: 42px minmax(0,1fr); padding: 8px 10px; }
  .receiver-v2-voice-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); }
  .receiver-v2-voice-actions button, .receiver-v2-voice-actions .receiver-v2-preview { min-width: 0; }
  .ki-word-circle { width: 40px; height: 40px; font-size: 17px; }
}

@media (max-width: 480px) {
  .receiver-v2-topbar { grid-template-columns: 1fr 40px; }
  .receiver-v2-profile { grid-column: 1; grid-row: 2; }
  .receiver-v2-manage { grid-column: 1; grid-row: 3; }
  .receiver-v2-close { grid-column: 2; grid-row: 1; }
  .receiver-v2-brand > .rail-role-icon { width: 29px; height: 29px; }
  .receiver-v2-brand h1 { font-size: 22px; }
  .receiver-v2-controls { grid-template-columns: 1fr; }
  .receiver-v2-sort, .receiver-v2-recommend-button { grid-column: 1; }
  .receiver-v2-controls nav { grid-column: 1; }
  .receiver-v2-box { grid-template-rows: 118px auto auto auto; }
  .receiver-v2-tuning { grid-template-columns: 1fr; }
  .receiver-v2-remove-confirm { grid-template-columns: 1fr 1fr; }
  .receiver-v2-remove-confirm span { grid-column: 1 / -1; }
  .receiver-v2-inspector > header { grid-template-columns: 80px 1fr 38px; }
  .receiver-v2-inspector > header .receiver-v2-visual { width: 80px; }
  .receiver-v2-inspector dl { grid-template-columns: 1fr; }
  .receiver-v2-ki { grid-template-columns: 38px minmax(0,1fr); }
  .ki-word-circle { width: 36px; height: 36px; }
}
.refined-ledger article > div:nth-child(2) { display:block; }
.value-row { grid-template-columns:72px minmax(0,1fr) auto; }
.value-row > strong { font-size:15px; white-space:nowrap; }

/* Unified Layout Site 0.02 */
.release-stamp { overflow: hidden; max-width: 265px; color: rgba(255,255,230,.5); font-size: 8px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.release-stamp:hover { color: var(--layout-sky); }
.receiver-v2, .transmitter-v2 { grid-template-rows: 76px auto minmax(0,1fr); padding-bottom: 72px; }
.universal-ki { position: absolute; z-index: 180; left: 0; right: 0; bottom: 0; min-height: 72px; }
.universal-ki input { cursor: text; }
.universal-preview { border-color: rgba(234,170,0,.38) !important; color: var(--layout-gold) !important; }

.expression-explorer, .tool-workspace {
  position: absolute; inset: 0; overflow: auto; padding-bottom: 92px; color: var(--layout-cream);
  background: radial-gradient(circle at 52% 12%, rgba(94,63,148,.25), transparent 42%), linear-gradient(145deg,#090510,#120a20 50%,#090510);
}
.expression-atmosphere, .tool-atmosphere { position: fixed; inset: var(--title-height) 0 72px var(--rail-width); pointer-events: none; background-image: linear-gradient(rgba(169,139,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(169,139,214,.035) 1px,transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 30%,black,transparent 75%); }
.expression-explorer > header, .tool-workspace-header { position: relative; max-width: 1400px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 34px 22px; }
.expression-explorer > header span, .tool-workspace-header span, .creator-groups > section > span { color: var(--layout-gold); font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.expression-explorer > header h1, .tool-workspace-header h1 { margin: 6px 0; font-family: var(--font-display,Georgia,serif); font-size: clamp(29px,4vw,49px); font-weight: 400; }
.expression-explorer > header p, .tool-workspace-header p { max-width: 760px; margin: 0; color: rgba(255,255,230,.52); font-size: 11px; line-height: 1.55; }
.expression-create, .tool-close { flex: 0 0 auto; min-height: 38px; padding: 0 15px; border: 1px solid rgba(234,170,0,.35); border-radius: 9px; background: rgba(234,170,0,.08); color: var(--layout-gold); font-size: 9px; font-weight: 900; }
.tool-close { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.expression-controls, .tool-filterbar { position: sticky; z-index: 4; top: 0; max-width: 1332px; margin: 0 auto 18px; display: grid; grid-template-columns: minmax(260px,1.5fr) repeat(5,minmax(105px,auto)) auto; gap: 8px; padding: 10px; border: 1px solid rgba(169,139,214,.16); border-radius: 12px; background: rgba(12,7,20,.9); backdrop-filter: blur(18px); }
.expression-controls label, .tool-filterbar label { display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid rgba(169,139,214,.17); border-radius: 8px; background: rgba(7,4,13,.62); color: var(--layout-lavender); }
.expression-controls input, .tool-filterbar input { min-width: 0; width: 100%; height: 36px; border: 0; outline: 0; background: transparent; color: var(--layout-cream); font-size: 10px; }
.expression-controls select, .expression-controls button, .tool-filterbar select { min-height: 38px; padding: 0 10px; border: 1px solid rgba(169,139,214,.17); border-radius: 8px; background: #120b20; color: rgba(255,255,230,.65); font-size: 9px; font-weight: 800; }
.expression-controls button.active { border-color: rgba(234,170,0,.42); color: var(--layout-gold); }
.expression-grid, .tool-card-grid { position: relative; max-width: 1332px; margin: auto; display: grid; grid-template-columns: repeat(3,minmax(250px,1fr)); gap: 14px; padding: 0 0 34px; }
.expression-card, .tool-card { min-width: 0; overflow: hidden; border: 1px solid rgba(169,139,214,.17); border-radius: 14px; background: linear-gradient(145deg,rgba(48,34,74,.64),rgba(14,8,24,.82)); box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.expression-art { position: relative; height: 128px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,rgba(3,204,217,.13),rgba(7,4,13,.7)); }
.expression-art::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(169,139,214,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(169,139,214,.05) 1px,transparent 1px); background-size:22px 22px; }
.expression-art img { position: relative; width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.expression-art > span { position:relative; display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(234,170,0,.38); border-radius:50%; color:var(--layout-gold); font: 24px var(--font-display,Georgia,serif); text-transform:uppercase; }
.expression-art i { position:absolute; right:10px; bottom:9px; padding:5px 8px; border-radius:99px; background:rgba(7,4,13,.78); color:var(--layout-sky); font-size:7px; font-style:normal; font-weight:900; text-transform:uppercase; }
.expression-copy { padding: 16px; }
.expression-copy > span, .tool-card > span { color: var(--layout-sky); font-size: 7px; font-weight: 900; letter-spacing:.1em; text-transform:uppercase; }
.expression-copy h2, .tool-card h2 { margin:5px 0; font-family:var(--font-display,Georgia,serif); font-size:21px; font-weight:400; }
.expression-copy p, .tool-card p { min-height: 42px; margin:0 0 11px; color:rgba(255,255,230,.49); font-size:9px; line-height:1.55; }
.expression-copy dl { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:0 0 10px; }
.expression-copy dl div { min-width:0; padding:7px; border-radius:7px; background:rgba(7,4,13,.38); }
.expression-copy dt { color:rgba(255,255,230,.27); font-size:6px; text-transform:uppercase; }.expression-copy dd { overflow:hidden; margin:3px 0 0; color:rgba(255,255,230,.7); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.expression-copy small { display:block; margin-top:6px; color:rgba(255,255,230,.37); font-size:7px; line-height:1.45; }.expression-copy small b { color:rgba(255,255,230,.58); }
.expression-card footer { display:grid; grid-template-columns:auto auto 1fr; gap:6px; padding:10px; border-top:1px solid rgba(169,139,214,.12); }
.expression-card footer button, .tool-actions button, .creator-stage-actions button, .tool-tabs button, .sentinel-presets button, .inspector-ledger button { min-height:32px; padding:0 10px; border:1px solid rgba(169,139,214,.18); border-radius:7px; background:rgba(169,139,214,.05); color:rgba(255,255,230,.57); font-size:8px; font-weight:800; }
.expression-card footer button.primary, .ki-action-review .primary { border-color:rgba(234,170,0,.38); background:rgba(234,170,0,.1); color:var(--layout-gold); }

.tool-workspace { overflow:hidden; padding:0 0 72px; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
.tool-workspace-header { width:100%; max-width:none; margin:0; padding:22px 28px 17px; border-bottom:1px solid rgba(169,139,214,.14); background:rgba(10,6,17,.72); backdrop-filter:blur(18px); }
.tool-workspace-header h1 { font-size:32px; }.tool-workspace-header p { font-size:9px; }
.tool-tabs { position:relative; z-index:2; display:flex; gap:5px; padding:8px 28px; overflow-x:auto; border-bottom:1px solid rgba(169,139,214,.12); background:rgba(10,6,17,.64); }
.tool-tabs button.active { border-color:rgba(3,204,217,.4); color:var(--layout-sky); background:rgba(3,204,217,.08); }
.tool-workspace-scroll { position:relative; min-height:0; overflow:auto; padding:22px 28px 38px; }
.tool-workspace-scroll > .tool-card-grid { padding-bottom:0; }
.tool-card { padding:17px; }.tool-card small { display:block; min-height:28px; color:rgba(255,255,230,.32); font-size:7px; line-height:1.45; }
.tool-card.feature { border-color:rgba(234,170,0,.32); background:linear-gradient(145deg,rgba(84,54,19,.35),rgba(18,10,26,.85)); }
.tool-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.tool-actions button:disabled { opacity:.35; cursor:not-allowed; }
.creator-groups { max-width:1332px; margin:0 auto 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.creator-groups section { padding:12px; border:1px solid rgba(169,139,214,.15); border-radius:10px; background:rgba(37,25,56,.38); }.creator-groups section div { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.creator-groups button { min-height:29px; border:1px solid rgba(169,139,214,.15); border-radius:6px; background:rgba(7,4,13,.5); color:rgba(255,255,230,.55); font-size:7px; }
.creator-flow { max-width:1332px; margin:auto; padding:20px; border:1px solid rgba(169,139,214,.17); border-radius:14px; background:rgba(21,13,35,.7); }.creator-flow > div:first-child h2 { margin:5px 0; font:28px var(--font-display,Georgia,serif); }.creator-flow > div:first-child p { color:rgba(255,255,230,.42); font-size:9px; }
.creator-fields { display:grid; grid-template-columns:1fr 2fr 1fr 1.3fr; gap:9px; margin:16px 0; }.creator-fields label { color:rgba(255,255,230,.4); font-size:7px; font-weight:900; text-transform:uppercase; }.creator-fields input,.creator-fields textarea,.creator-fields select { width:100%; min-height:36px; margin-top:5px; padding:8px; border:1px solid rgba(169,139,214,.17); border-radius:7px; outline:0; background:rgba(7,4,13,.6); color:var(--layout-cream); font-size:9px; text-transform:none; }.creator-fields textarea { resize:vertical; }
.layout-example-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }.layout-example { min-height:130px; padding:10px; border:1px solid rgba(169,139,214,.15); border-radius:9px; background:rgba(37,25,56,.35); color:rgba(255,255,230,.58); text-align:left; }.layout-example.selected { border-color:rgba(234,170,0,.45); box-shadow:inset 0 0 20px rgba(234,170,0,.05); }.layout-example span,.layout-example b,.layout-example p { display:block; }.layout-example span { color:var(--layout-gold); font:16px var(--font-display,Georgia,serif); }.layout-example b { margin:5px 0; color:rgba(255,255,230,.36); font-size:6px; }.layout-example p { margin:0; color:rgba(255,255,230,.43); font-size:7px; line-height:1.4; }.creator-stage-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:14px; }
.inspector-ledger { max-width:1332px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.inspector-ledger article { padding:15px; border:1px solid rgba(169,139,214,.15); border-radius:10px; background:rgba(37,25,56,.4); }.inspector-ledger article > span { color:var(--layout-sky); font-size:7px; font-weight:900; }.inspector-ledger h2 { margin:5px 0; font:18px var(--font-display,Georgia,serif); }.inspector-ledger p,.inspector-ledger small { color:rgba(255,255,230,.4); font-size:8px; }.inspector-ledger article div { display:flex; gap:5px; margin-top:9px; }
.distinction-strip { max-width:1332px; margin:14px auto 0; display:flex; flex-wrap:wrap; gap:7px; padding:11px; border-left:3px solid var(--layout-gold); background:rgba(234,170,0,.05); }.distinction-strip b,.distinction-strip span { font-size:7px; }.distinction-strip b { color:var(--layout-gold); }.distinction-strip span { color:rgba(255,255,230,.45); }
.broker-metrics,.envoy-grid,.sentinel-grid { max-width:1332px; margin:0 auto 15px; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.broker-metrics article,.envoy-grid article,.sentinel-grid article { padding:16px; border:1px solid rgba(169,139,214,.15); border-radius:11px; background:rgba(37,25,56,.42); }.broker-metrics span,.broker-metrics small { display:block; color:rgba(255,255,230,.36); font-size:7px; }.broker-metrics strong { display:block; margin:6px 0; color:var(--layout-gold); font:25px var(--font-display,Georgia,serif); }
.sentinel-presets { max-width:1332px; margin:0 auto 14px; display:flex; align-items:center; gap:6px; }.sentinel-presets > span { margin-right:8px; color:rgba(255,255,230,.42); font-size:8px; }.sentinel-presets button.active { border-color:rgba(3,204,217,.4); color:var(--layout-sky); }.sentinel-grid { grid-template-columns:repeat(2,1fr); }.sentinel-grid h2,.envoy-grid h2 { margin:5px 0 9px; font:19px var(--font-display,Georgia,serif); }.sentinel-grid label { display:grid; grid-template-columns:1fr auto; gap:7px; color:rgba(255,255,230,.55); font-size:8px; }.sentinel-grid input { grid-column:1/-1; width:100%; }.sentinel-grid output { color:var(--layout-gold); }.sentinel-boundaries { max-width:1332px; margin:auto; padding:16px; border:1px solid rgba(169,139,214,.15); border-radius:11px; background:rgba(37,25,56,.35); }.sentinel-boundaries h2 { margin:0 0 10px; font:20px var(--font-display,Georgia,serif); }.sentinel-boundaries > div { display:flex; flex-wrap:wrap; gap:6px; }.sentinel-boundaries span { padding:6px 9px; border-radius:99px; background:rgba(169,139,214,.08); color:rgba(255,255,230,.5); font-size:7px; }

.active-expression-bar { position:absolute; z-index:35; top:0; left:0; right:0; min-height:64px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:8px 18px; border-bottom:1px solid rgba(234,170,0,.24); background:rgba(10,6,17,.92); backdrop-filter:blur(16px); }.active-expression-bar > div span,.active-expression-bar > div strong,.active-expression-bar > div small { display:block; }.active-expression-bar span { color:var(--layout-gold); font-size:7px; text-transform:uppercase; }.active-expression-bar strong { margin:2px 0; font:16px var(--font-display,Georgia,serif); }.active-expression-bar small { color:rgba(255,255,230,.35); font-size:7px; }.active-expression-bar button { min-height:31px; border:1px solid rgba(169,139,214,.18); border-radius:7px; background:rgba(37,25,56,.5); color:rgba(255,255,230,.6); font-size:8px; }
.active-expression-bar + .mode-world { padding-top:64px; }
.world-layout { overflow:hidden; background:linear-gradient(#1a1736 0 45%,#101426 46%); }.world-sky { position:absolute; inset:0 0 42%; background:radial-gradient(circle at 50% 28%,rgba(234,170,0,.34),transparent 4%),radial-gradient(circle at 50% 58%,rgba(94,63,148,.5),transparent 38%); }.world-ground { position:absolute; inset:43% -20% -35%; transform:perspective(600px) rotateX(58deg); background-image:linear-gradient(rgba(3,204,217,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(3,204,217,.15) 1px,transparent 1px); background-size:70px 70px; }.world-portal { position:absolute; display:grid; place-items:center; width:150px; height:190px; border:2px solid rgba(3,204,217,.5); border-radius:80px 80px 16px 16px; background:radial-gradient(circle,rgba(3,204,217,.15),rgba(9,5,15,.5)); box-shadow:0 0 50px rgba(3,204,217,.13); }.world-portal.one{left:18%;top:30%}.world-portal.two{right:18%;top:35%;border-color:rgba(234,170,0,.5)}.world-portal span,.world-portal b { font-size:8px; }.world-portal span { color:var(--layout-sky); }.world-presence { position:absolute; left:50%; bottom:18%; transform:translateX(-50%); text-align:center; }.world-presence > span { display:grid; place-items:center; width:58px;height:58px;margin:auto;border:1px solid var(--layout-gold);border-radius:50%;background:#251938;color:var(--layout-gold);font:22px var(--font-display,Georgia,serif); }.world-presence b,.world-presence small { display:block; margin-top:4px; }.world-presence small { color:rgba(255,255,230,.4);font-size:7px}.world-copy { position:absolute; left:28px; top:90px; max-width:340px; }.world-copy span { color:var(--layout-gold);font-size:8px;text-transform:uppercase}.world-copy h2 { margin:7px 0;font:32px var(--font-display,Georgia,serif)}.world-copy p { color:rgba(255,255,230,.5);font-size:10px;line-height:1.5}
.reader-layout { overflow:auto; padding:90px 18px 110px; background:radial-gradient(circle at 50% 20%,rgba(234,170,0,.09),transparent 40%),#0b0712; }.reader-paper { max-width:760px; margin:auto; padding:54px 64px; border:1px solid rgba(234,170,0,.22); background:#f4ecd9;color:#221a2d;box-shadow:0 25px 70px rgba(0,0,0,.45)}.reader-paper header span { color:#765895;font-size:9px;font-weight:900;text-transform:uppercase}.reader-paper h1{margin:12px 0;font:42px var(--font-display,Georgia,serif)}.reader-deck{font:18px/1.45 Georgia,serif}.reader-byline{padding:12px 0;border-block:1px solid rgba(34,26,45,.18);font-size:9px}.reader-columns{margin-top:24px;column-count:2;column-gap:34px;font:14px/1.7 Georgia,serif}.reader-columns p{margin-top:0}.reader-columns blockquote{margin:20px 0;padding:16px;border-left:3px solid #765895;color:#60447e;font-size:18px}.reader-columns aside{break-inside:avoid;padding:12px;background:rgba(118,88,149,.08)}.reader-columns aside span{display:block;font:9px Avenir,sans-serif}.reader-columns button{margin-top:8px;border:0;background:#765895;color:white;padding:8px 12px}.mode-caption { position:absolute; right:18px; bottom:86px; padding:11px 14px; border:1px solid rgba(169,139,214,.2); border-radius:9px; background:rgba(10,6,17,.82); }.mode-caption span,.mode-caption strong,.mode-caption small{display:block}.mode-caption span{color:var(--layout-gold);font-size:7px;text-transform:uppercase}.mode-caption strong{margin:3px 0;font:14px var(--font-display,Georgia,serif)}.mode-caption small{color:rgba(255,255,230,.35);font-size:7px}
.game-layout{overflow:auto;padding:94px 20px 120px;background:radial-gradient(circle at 50% 18%,rgba(234,170,0,.2),transparent 35%),linear-gradient(145deg,#090510,#21122f)}.game-board{max-width:920px;margin:auto;padding:28px;border:1px solid rgba(234,170,0,.3);border-radius:18px;background:linear-gradient(145deg,rgba(48,34,74,.8),rgba(10,6,17,.94));box-shadow:0 25px 80px rgba(0,0,0,.5)}.game-board header{text-align:center}.game-board header span{color:var(--layout-gold);font-size:8px;font-weight:900;text-transform:uppercase}.game-board h1{margin:7px 0;font:38px var(--font-display,Georgia,serif)}.game-board header p{color:rgba(255,255,230,.5);font-size:10px}.game-score{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0}.game-score article{padding:14px;border:1px solid rgba(169,139,214,.18);border-radius:10px;background:rgba(7,4,13,.4);text-align:center}.game-score span,.game-score strong,.game-score small{display:block}.game-score span{color:var(--layout-sky);font-size:8px}.game-score strong{margin:5px;color:var(--layout-gold);font:25px var(--font-display,Georgia,serif)}.game-score small{color:rgba(255,255,230,.34);font-size:7px}.game-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:9px}.game-path button{min-height:100px;border:1px solid rgba(169,139,214,.22);border-radius:12px;background:rgba(37,25,56,.6);color:var(--layout-cream)}.game-path button:hover{border-color:var(--layout-gold)}.game-path b,.game-path small{display:block}.game-path b{font:18px var(--font-display,Georgia,serif)}.game-path small{margin-top:6px;color:rgba(255,255,230,.38);font-size:7px}.game-path i{color:var(--layout-gold);font-style:normal}.game-board footer{display:flex;justify-content:center;gap:7px;margin-top:20px}.game-board footer button{min-height:34px;padding:0 12px;border:1px solid rgba(169,139,214,.2);border-radius:7px;background:rgba(169,139,214,.06);color:rgba(255,255,230,.62);font-size:8px}

.ki-action-review { position:absolute; z-index:260; right:18px; bottom:76px; width:min(650px,calc(100vw - 110px)); max-height:min(640px,calc(100vh - 130px)); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; border:1px solid rgba(234,170,0,.38); border-radius:14px; background:rgba(13,8,22,.99); box-shadow:0 24px 80px rgba(0,0,0,.62); }.ki-action-review > header { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px;border-bottom:1px solid rgba(169,139,214,.14)}.ki-action-review > header span{color:var(--layout-gold);font-size:8px;font-weight:900;text-transform:uppercase}.ki-action-review > header h2{margin:4px 0 0;font:20px var(--font-display,Georgia,serif)}.ki-action-review button{min-height:32px;padding:0 10px;border:1px solid rgba(169,139,214,.2);border-radius:7px;background:rgba(169,139,214,.06);color:rgba(255,255,230,.62);font-size:8px;font-weight:800}.ki-review-toolbar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid rgba(169,139,214,.1)}.ki-review-toolbar span{margin-left:auto;color:rgba(255,255,230,.35);font-size:7px}.ki-action-list{min-height:0;overflow:auto;padding:10px 14px}.ki-action-list > label{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:8px;padding:12px;border:1px solid rgba(169,139,214,.13);border-radius:9px;background:rgba(37,25,56,.34)}.ki-action-list input{margin-top:3px}.ki-action-list b,.ki-action-list em,.ki-action-list small,.ki-action-list i{display:block}.ki-action-list b{font-size:10px}.ki-action-list em{margin:4px 0;color:rgba(255,255,230,.53);font-size:8px;font-style:normal;line-height:1.45}.ki-action-list small{color:rgba(255,255,230,.34);font-size:7px;line-height:1.4}.ki-action-list i{margin-top:7px;color:var(--layout-sky);font-size:6px;font-style:normal;font-weight:900;letter-spacing:.1em}.ki-action-review > footer{display:grid;grid-template-columns:auto auto 1fr 1fr;gap:7px;padding:11px 14px;border-top:1px solid rgba(169,139,214,.12)}.ki-revise{padding:16px}.ki-revise p{color:rgba(255,255,230,.5);font-size:9px;line-height:1.5}.ki-revise textarea{width:100%;padding:10px;border:1px solid rgba(169,139,214,.2);border-radius:8px;background:#090510;color:var(--layout-cream);font-size:9px;resize:vertical}.ki-revise div{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}

@media (max-width: 1100px) {
  .titlebar { grid-template-columns: minmax(300px,1fr) auto; }.title-identity { display:none; }
  .expression-grid,.tool-card-grid { grid-template-columns:repeat(2,1fr); padding-inline:18px; }.expression-controls,.tool-filterbar { margin-inline:18px; }
  .layout-example-grid{grid-template-columns:repeat(4,1fr)}.creator-fields{grid-template-columns:1fr 1fr}.creator-groups{grid-template-columns:repeat(2,1fr)}
  .receiver-v2,.transmitter-v2{grid-template-rows:72px auto minmax(0,1fr);padding-bottom:72px}
}
@media (max-width: 760px) {
  :root{--rail-width:58px;--title-height:52px}.titlebar{grid-template-columns:1fr auto;padding:0 8px}.window-controls span,.release-stamp,.title-state>span{display:none}.title-left{gap:7px}.reset-to-default{padding-inline:7px}.app-body{grid-template-columns:var(--rail-width) minmax(0,1fr)}.toolrail{overflow-y:auto}.vault-entry,.avatar-entry,.rail-action{width:40px;height:40px}.rail-action.active::before,.vault-entry.active::before,.avatar-entry.active::before{left:-9px}.rail-role-icon{width:21px;height:21px}
  .expression-explorer>header,.tool-workspace-header{padding:20px 14px 14px}.expression-explorer>header h1,.tool-workspace-header h1{font-size:27px}.expression-explorer>header p{font-size:9px}.expression-controls,.tool-filterbar{position:relative;grid-template-columns:1fr 1fr;margin-inline:10px}.expression-controls label,.tool-filterbar label{grid-column:1/-1}.expression-grid,.tool-card-grid,.inspector-ledger{grid-template-columns:1fr;padding-inline:10px}.tool-workspace-scroll{padding:14px 10px 28px}.tool-tabs{padding-inline:10px}.creator-groups,.creator-fields,.layout-example-grid,.broker-metrics,.envoy-grid,.sentinel-grid{grid-template-columns:1fr}.reader-paper{padding:34px 25px}.reader-columns{column-count:1}.world-portal{transform:scale(.72)}.world-portal.one{left:6%}.world-portal.two{right:5%}.world-copy{top:82px;left:18px;max-width:260px}.universal-ki{grid-template-columns:42px minmax(0,1fr);padding:8px 10px}.universal-ki .receiver-v2-voice-actions{grid-column:1/-1}.ki-action-review{right:8px;bottom:116px;width:calc(100vw - 76px)}.ki-action-review>footer{grid-template-columns:1fr 1fr}.receiver-v2,.transmitter-v2{padding-bottom:116px}.tool-workspace{padding-bottom:116px}.expression-explorer{padding-bottom:136px}
}
@media (max-width: 480px) {
  .expression-controls,.tool-filterbar{grid-template-columns:1fr}.expression-controls>*{grid-column:1}.expression-card footer{grid-template-columns:1fr 1fr}.expression-card footer .primary{grid-column:1/-1}.reader-paper h1{font-size:30px}.ki-action-review{inset:8px 8px 116px 8px;width:auto;max-height:none}.world-portal.two{display:none}
}

.package-actions { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.package-actions > button { width: 100%; }

@media (max-width: 1180px) {
  :root { --rail-width: 64px; --panel-width: 380px; }
  .titlebar { grid-template-columns: 235px minmax(0,1fr) 190px; }
  .field-orientation { display: none; }
  .instrument-bar { grid-template-columns: minmax(0,1fr) 106px; }
  .field-object { width: 175px; }
  .notification-stack { width: 245px; }
  .inspector { right: 18px; top: 96px; }
  .expandable-panel + .inspector { right: calc(var(--panel-width) + 24px); }
  .composed-alliance { left: 3%; width: 210px; }
  .composed-invitation { width: 410px; }
  .composed-contribution { right: 3%; width: 220px; }
  .composed-card h2 { font-size: 23px; }
}

@media (max-width: 860px) {
  :root { --title-height: 38px; --instrument-height: 60px; --rail-width: 58px; --composer-height: 62px; }
  .titlebar { grid-template-columns: 155px minmax(0,1fr) 100px; padding: 0 9px; }
  .window-controls, .title-identity img, .title-identity > span, .title-state > span { display: none; }
  .title-left { gap: 7px; }
  .global-receiver-version select { width: 96px; }
  .reset-to-default { padding: 0 7px; }
  .title-identity { gap: 5px; font-size: 8px; }
  .title-state button { padding: 0 7px; font-size: 7px; }
  .toolrail { padding-top: 7px; }
  .vault-entry, .avatar-entry, .rail-action { width: 40px; height: 40px; }
  .rail-primary { gap: 0; }
  .instrument-bar nav { grid-template-columns: repeat(5, minmax(105px,1fr)); }
  .system-presence { display: none; }
  .instrument-bar { grid-template-columns: minmax(0,1fr); }
  .field-object { width: 158px; min-height: 105px; padding: 11px; }
  .field-object h3 { font-size: 17px; }
  .field-object p { display: none; }
  .notification-stack { right: 10px; top: 10px; width: 210px; }
  .field-message p, .field-message small { display: none; }
  .selection-bar { top: 9px; min-width: 0; width: calc(100% - 230px); left: 10px; transform: none; }
  .selection-bar button { width: 32px; padding: 0; justify-content: center; }
  .selection-bar button:not(:last-child) { font-size: 0; }
  .ki-composer { bottom: 9px; width: calc(100% - 20px); }
  .mode-caption { left: 16px; bottom: calc(var(--composer-height) + 17px); }
  .expandable-panel { right: 8px; top: 8px; bottom: calc(var(--composer-height) + 18px); width: min(390px, calc(100% - 16px)); }
  .receiver-panel { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; border: 0; border-radius: 0; grid-template-rows: 64px minmax(0,1fr); }
  .receiver-sticky { padding: 9px 10px 0; }
  .receiver-command { grid-template-columns: 1fr; }
  .receiver-command textarea { grid-column: 1; grid-row: auto; min-height: 58px; }
  .receiver-proposal { grid-column: 1; }
  .receiver-scroll { padding: 12px 10px 24px; }
  .receiver-metrics, .receiver-summary-grid { grid-template-columns: 1fr; }
  .receiver-tools { grid-template-columns: 1fr 1fr; }
  .receiver-search { grid-column: 1 / 3; }
  .transmitter-row { grid-template-columns: 1fr 1fr; }
  .transmitter-main, .transmitter-detail { grid-column: 1 / 3; }
  .transmitter-detail dl { grid-template-columns: 1fr; }
  .receiver-add-grid { grid-template-columns: 1fr 1fr; }
  .receiver-preset-grid { grid-template-columns: 1fr 1fr; }
  .inspector, .expandable-panel + .inspector { right: 8px; top: 80px; width: min(330px, calc(100% - 16px)); }
  .composed-world { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 82px 10px calc(var(--composer-height) + 94px); }
  .composed-backdrop { position: fixed; opacity: .52; }
  .composed-orientation { left: 14px; top: 14px; }
  .composed-context { right: 14px; top: 18px; }
  .composed-card, .composed-invitation {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    margin-bottom: 9px;
    transform: none;
  }
  .composed-card:hover, .composed-card:focus-visible, .composed-card.selected,
  .composed-invitation:hover, .composed-invitation:focus-visible, .composed-invitation.selected { transform: translateY(-2px); }
  .composed-alliance, .composed-contribution { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; column-gap: 12px; }
  .composed-alliance .composed-sigil, .composed-contribution .composed-sigil { grid-row: 1 / 5; width: 72px; height: 72px; }
  .composed-alliance h3, .composed-contribution h3, .composed-alliance > p, .composed-contribution > p { text-align: left; }
  .composed-alliance > button, .composed-motion, .composed-choices { grid-column: 2; justify-self: stretch; }
  .composed-invitation { order: -1; }
}

@media (max-width: 520px) {
  :root { --rail-width: 48px; }
  .titlebar { grid-template-columns: minmax(0,1fr) auto; gap: 6px; padding: 0 7px; }
  .title-left { gap: 5px; }
  .global-receiver-version select { width: 96px; }
  .reset-to-default { padding: 0 6px; font-size: 7px; }
  .title-identity { display: none; }
  .title-state { gap: 0; }
  .title-state button { height: 24px; padding: 0 6px; font-size: 6px; }
  .toolrail { padding-left: 0; padding-right: 0; }
  .vault-entry, .avatar-entry, .rail-action { width: 36px; height: 36px; }
  .vault-entry img { width: 31px; height: 31px; }
  .avatar-entry > img { width: 32px; height: 32px; }
  .rail-divider { width: 30px; }
  .instrument { min-width: 98px; padding: 0 9px; }
  .instrument-bar nav { grid-template-columns: repeat(5, 98px); overflow-x: auto; }
  .notification-stack { display: none; }
  .setting-world, .pulse-world, .graph-world {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 18px 10px calc(var(--composer-height) + 92px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .world-grid, .graph-lines { inset: 0; width: 100%; height: 100%; opacity: .35; }
  .setting-structure, .setting-beacon, .pulse-radar { opacity: .28; pointer-events: none; }
  .field-object {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-height: 104px;
    flex: 0 0 auto;
    transform: none !important;
  }
  .field-object:hover, .field-object.selected { transform: translateY(-2px) !important; }
  .field-object p { display: block; font-size: 9px; }
  .pulse-filters, .graph-legend {
    position: relative;
    left: auto;
    top: auto;
    order: -2;
    flex: 0 0 auto;
    flex-wrap: wrap;
  }
  .mode-caption {
    position: relative;
    left: auto;
    bottom: auto;
    order: -3;
    flex: 0 0 auto;
    margin: 0 0 5px;
  }
  .mode-caption > strong { font-size: 17px; }
  .selection-bar { left: 7px; top: 7px; width: calc(100% - 14px); transform: none; }
  .selection-bar > span small { display: none; }
  .ki-composer {
    bottom: 7px;
    width: calc(100% - 12px);
    grid-template-columns: 38px minmax(0,1fr) 38px;
    gap: 5px;
    padding: 7px;
  }
  .ki-composer > img { width: 34px; height: 34px; }
  .composer-context { display: none; }
  .composer-send { width: 36px; height: 36px; }
  .composer-copy > span { font-size: 6px; }
  .composer-copy input { font-size: 9px; }
  .expandable-panel { right: 5px; top: 5px; bottom: calc(var(--composer-height) + 14px); width: calc(100% - 10px); }
  .receiver-panel { position: fixed; inset: 0; width: 100vw; height: 100vh; }
  .receiver-title > .rail-role-icon { width: 24px; height: 24px; }
  .receiver-profile-row { grid-template-columns: 1fr; }
  .receiver-profile-row > div:nth-child(2) { justify-content: flex-start; }
  .receiver-confirm, .receiver-inline-edit { grid-column: 1; }
  .receiver-choice-grid, .receiver-add-grid, .receiver-preview-list { grid-template-columns: 1fr; }
  .receiver-command > div:first-child p { display: none; }
  .inspector, .expandable-panel + .inspector { right: 5px; top: 66px; width: calc(100% - 10px); }
  .toast { left: 6px; right: 6px; bottom: calc(var(--composer-height) + 17px); min-width: 0; max-width: none; transform: none; }
  .theater-world { padding-left: 14px; padding-right: 14px; }
  .theater-halo { width: 280px; height: 280px; }
  .theater-world h2 { font-size: 28px; }
  .theater-world > p { font-size: 10px; }
}

@media (max-height: 760px) {
  :root { --title-height: 36px; --instrument-height: 58px; --composer-height: 60px; }
  .rail-action, .vault-entry, .avatar-entry { width: 39px; height: 39px; }
  .rail-divider { margin: 7px 0 5px; }
  .field-object { min-height: 98px; padding: 10px 12px; }
  .field-object p { display: none; }
  .field-object h3 { font-size: 17px; }
  .notification-stack { gap: 5px; }
  .field-message p { display: none; }
}

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

/* Transmitter 0.02 — the outward-facing complement to Receiver 0.02. */
.transmitter-v2 { grid-template-rows: 72px auto minmax(0,1fr) 68px; }
.transmitter-v2 .receiver-v2-brand > .rail-role-icon { color: var(--layout-gold); filter: drop-shadow(0 0 11px rgba(234,170,0,.25)); }
.tx-top-state { justify-self: end; padding: 8px 11px; border: 1px solid rgba(234,170,0,.2); border-radius: 8px; background: rgba(234,170,0,.045); text-align: right; }
.tx-top-state span, .tx-top-state strong { display: block; }
.tx-top-state span { color: rgba(255,255,230,.32); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.tx-top-state strong { margin-top: 2px; color: var(--layout-gold); font-size: 9px; }
.tx-controls { grid-template-columns: minmax(260px,1.2fr) minmax(480px,2fr) 152px; }
.tx-mobile-steps { display: none; }
.tx-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0,2fr) minmax(330px,1fr); overflow: hidden; }
.tx-library { min-width: 0; overflow: auto; padding: 22px 18px 34px; border-right: 1px solid rgba(169,139,214,.15); }
.tx-library > header { max-width: 1040px; margin: 0 auto 15px; }
.tx-library > header span { color: var(--layout-gold); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tx-library > header h2 { margin: 5px 0 2px; font-family: var(--font-display, Georgia, serif); font-size: 29px; font-weight: 400; }
.tx-library > header p { max-width: 720px; margin: 0; color: rgba(255,255,230,.42); font-size: 9px; line-height: 1.5; }
.tx-seed-grid { max-width: 1040px; margin: auto; display: grid; grid-template-columns: repeat(2,minmax(250px,1fr)); gap: 11px; }
.tx-seed-card { min-width: 0; display: grid; grid-template-columns: 76px minmax(0,1fr); grid-template-rows: 1fr auto; overflow: hidden; border: 1px solid rgba(169,139,214,.17); border-radius: 12px; background: linear-gradient(145deg,rgba(37,25,56,.82),rgba(15,9,25,.82)); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.tx-seed-card.selected { border-color: rgba(234,170,0,.55); box-shadow: inset 3px 0 var(--layout-gold),0 14px 34px rgba(0,0,0,.24); }
.tx-seed-visual { position: relative; display: grid; place-items: center; min-height: 126px; border-right: 1px solid rgba(169,139,214,.12); background: radial-gradient(circle,rgba(234,170,0,.12),rgba(7,4,13,.52)); }
.tx-seed-visual img { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.tx-seed-visual > span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(234,170,0,.34); border-radius: 50%; color: var(--layout-gold); font-family: var(--font-display,Georgia,serif); font-size: 15px; }
.tx-seed-visual i { position: absolute; left: 6px; right: 6px; bottom: 7px; padding: 4px; border-radius: 4px; background: rgba(7,4,13,.76); color: rgba(255,255,230,.56); font-size: 6px; font-style: normal; font-weight: 900; text-align: center; text-transform: uppercase; }
.tx-seed-copy { min-width: 0; padding: 12px 12px 8px; }
.tx-seed-copy > span { color: var(--layout-gold); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.tx-seed-copy h3 { margin: 6px 0 4px; font-family: var(--font-display,Georgia,serif); font-size: 18px; font-weight: 400; }
.tx-seed-copy p { margin: 0; color: rgba(255,255,230,.47); font-size: 8px; line-height: 1.45; }
.tx-seed-copy small { display: block; margin-top: 7px; color: rgba(255,255,230,.27); font-size: 6px; }
.tx-seed-actions { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1.5fr; gap: 6px; padding: 8px; border-top: 1px solid rgba(169,139,214,.1); }
.tx-seed-actions button, .tx-builder button, .tx-overlay button { min-height: 31px; border: 1px solid rgba(169,139,214,.22); border-radius: 7px; background: rgba(169,139,214,.05); color: rgba(255,255,230,.64); font-size: 8px; font-weight: 800; }
.tx-seed-actions button.add, .tx-overlay button.add { border-color: rgba(234,170,0,.36); background: rgba(234,170,0,.08); color: var(--layout-gold); }
.tx-seed-actions button.remove { color: rgba(255,255,230,.4); }
.tx-builder { min-height: 0; overflow: auto; padding: 16px 14px 30px; background: rgba(9,5,18,.46); }
.tx-builder > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tx-builder > header span, .tx-section-title > span { color: var(--layout-gold); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tx-builder > header h2 { margin: 3px 0 0; font-family: var(--font-display,Georgia,serif); font-size: 22px; font-weight: 400; }
.tx-builder > header > strong { padding: 6px 8px; border-radius: 99px; background: rgba(234,170,0,.1); color: var(--layout-gold); font-size: 8px; }
.tx-builder-section { margin-top: 9px; padding: 11px; border: 1px solid rgba(169,139,214,.15); border-radius: 10px; background: rgba(37,25,56,.4); }
.tx-section-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tx-section-title small { color: rgba(255,255,230,.28); font-size: 6px; }
.tx-builder textarea, .tx-builder input, .tx-builder select { width: 100%; box-sizing: border-box; border: 1px solid rgba(169,139,214,.22); border-radius: 7px; outline: 0; background: rgba(7,4,13,.62); color: var(--layout-cream); font: inherit; font-size: 9px; }
.tx-builder textarea { min-height: 78px; resize: vertical; padding: 9px; line-height: 1.45; }
.tx-builder input, .tx-builder select { height: 34px; padding: 0 8px; }
.tx-message label { display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 8px; margin-top: 7px; color: rgba(255,255,230,.46); font-size: 7px; }
.tx-payload ol { max-height: 174px; overflow: auto; margin: 7px 0 0; padding: 0; list-style: none; }
.tx-payload li { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 0; border-bottom: 1px solid rgba(169,139,214,.1); }
.tx-payload li span, .tx-payload li b, .tx-payload li small { display: block; }
.tx-payload li b { font-size: 8px; }
.tx-payload li small { margin-top: 2px; color: rgba(255,255,230,.3); font-size: 6px; }
.tx-payload li > div { display: flex; gap: 3px; }
.tx-payload li button { min-width: 27px; min-height: 26px; padding: 0; }
.tx-payload li.empty { color: rgba(255,255,230,.33); font-size: 8px; }
.tx-payload-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 8px; }
.tx-recipient-view { margin: 7px 0 0; color: rgba(255,255,230,.48); font-size: 7px; line-height: 1.5; }
.tx-recipient-view small { color: rgba(255,255,230,.28); }
.tx-destinations > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 190px; overflow: auto; }
.tx-destinations > input { margin-bottom: 7px; }
.tx-destinations article { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 27px; gap: 3px; }
.tx-destinations article > button:last-child { min-height: 58px; padding: 0; color: var(--layout-lavender); }
.tx-destinations button { min-width: 0; min-height: 58px; padding: 7px; text-align: left; }
.tx-destinations button span, .tx-destinations button b, .tx-destinations button small { display: block; overflow: hidden; text-overflow: ellipsis; }
.tx-destinations button span { color: var(--layout-lavender); font-size: 6px; text-transform: uppercase; }
.tx-destinations button b { margin: 3px 0; font-size: 8px; }
.tx-destinations button small { color: rgba(255,255,230,.27); font-size: 6px; white-space: nowrap; }
.tx-destinations button.selected { border-color: rgba(234,170,0,.48); background: rgba(234,170,0,.09); color: var(--layout-cream); }
.tx-privacy-check { margin-top: 9px; padding: 10px; border: 1px solid rgba(169,139,214,.17); border-radius: 10px; background: rgba(37,25,56,.35); }
.tx-privacy-check > div { display: flex; justify-content: space-between; gap: 10px; }
.tx-privacy-check > div span { color: rgba(255,255,230,.35); font-size: 7px; text-transform: uppercase; }
.tx-privacy-check > div strong { color: var(--layout-gold); font-size: 8px; }
.tx-privacy-check.ready { border-color: rgba(143,230,198,.33); }.tx-privacy-check.ready > div strong { color: #8fe6c6; }
.tx-privacy-check.blocked { border-color: rgba(255,126,136,.38); }.tx-privacy-check.blocked > div strong { color: #ff9ea5; }
.tx-privacy-check p { margin: 7px 0 0; color: rgba(255,255,230,.36); font-size: 7px; }
.tx-privacy-check ul { margin: 7px 0 0; padding: 0; list-style: none; }
.tx-privacy-check li { display: flex; gap: 6px; padding: 5px 0; border-top: 1px solid rgba(169,139,214,.08); }
.tx-privacy-check li i { width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #8fe6c6; }.tx-privacy-check.blocked li i { background: #ff9ea5; }
.tx-privacy-check li b, .tx-privacy-check li small { display: block; }.tx-privacy-check li b { font-size: 7px; }.tx-privacy-check li small { margin-top: 2px; color: rgba(255,255,230,.35); font-size: 6px; line-height: 1.35; }
.tx-review-button, .tx-prepare { width: 100%; margin-top: 9px; border-color: rgba(234,170,0,.4) !important; background: rgba(234,170,0,.11) !important; color: var(--layout-gold) !important; }
.tx-overlay { position: absolute; z-index: 25; top: 72px; right: 0; bottom: 68px; width: min(620px,calc(100% - 60px)); display: grid; grid-template-rows: auto minmax(0,1fr); border-left: 1px solid rgba(234,170,0,.3); background: rgba(13,8,22,.985); box-shadow: -20px 0 65px rgba(0,0,0,.5); }
.tx-overlay > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px; border-bottom: 1px solid rgba(169,139,214,.14); }
.tx-overlay > header span { color: var(--layout-gold); font-size: 7px; font-weight: 900; text-transform: uppercase; }.tx-overlay > header h2 { margin: 4px 0 0; font-family: var(--font-display,Georgia,serif); font-size: 24px; font-weight: 400; }.tx-overlay > header button { width: 36px; border-radius: 50%; }
.tx-overlay-scroll { overflow: auto; padding: 17px 17px 30px; }.tx-overlay-scroll > p { color: rgba(255,255,230,.55); font-size: 10px; line-height: 1.55; }
.tx-overlay dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.tx-overlay dl div { padding: 9px; border: 1px solid rgba(169,139,214,.12); border-radius: 7px; background: rgba(37,25,56,.32); }.tx-overlay dt { color: rgba(255,255,230,.27); font-size: 6px; text-transform: uppercase; }.tx-overlay dd { margin: 4px 0 0; color: rgba(255,255,230,.68); font-size: 8px; line-height: 1.4; }
.tx-expression-note, .tx-outcomes { margin: 12px 0; padding: 11px; border-left: 3px solid var(--layout-gold); background: rgba(234,170,0,.055); }.tx-expression-note b { color: var(--layout-gold); font-size: 9px; }.tx-expression-note p, .tx-outcomes p { margin: 4px 0 0; color: rgba(255,255,230,.48); font-size: 8px; line-height: 1.5; }
.tx-review { width: min(700px,calc(100% - 60px)); }.tx-review-anatomy { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; }.tx-review-anatomy article { padding: 13px; border: 1px solid rgba(169,139,214,.16); border-radius: 10px; background: rgba(37,25,56,.4); }.tx-review-anatomy article span { color: var(--layout-gold); font-size: 8px; font-weight: 900; text-transform: uppercase; }.tx-review-anatomy article p { min-height: 44px; color: rgba(255,255,230,.66); font-size: 9px; line-height: 1.5; }.tx-review-anatomy article small { color: rgba(255,255,230,.3); font-size: 7px; }.tx-review-anatomy > i { align-self: center; color: var(--layout-gold); font: 20px var(--font-display,Georgia,serif); }
.tx-review-summary { margin-top: 12px; }.tx-outcomes h3 { margin: 0; color: var(--layout-gold); font-size: 9px; }.tx-prepared { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid rgba(143,230,198,.35); border-radius: 9px; background: rgba(143,230,198,.07); color: #8fe6c6; font-size: 9px; }.tx-prepare:disabled { opacity: .35; cursor: not-allowed; }.tx-review-footnote { display: block; margin-top: 7px; color: rgba(255,255,230,.3); font-size: 7px; line-height: 1.45; text-align: center; }
.tx-ki { border-top-color: rgba(234,170,0,.18); }.tx-ki .ki-word-circle { border-color: rgba(234,170,0,.5); color: var(--layout-gold); box-shadow: 0 0 18px rgba(234,170,0,.12); }.tx-ki label > span { color: var(--layout-gold); }

@media (max-width: 1100px) {
  .transmitter-v2 { grid-template-rows: 72px auto minmax(0,1fr) 72px; }
  .tx-controls { grid-template-columns: minmax(210px,1fr) minmax(390px,1.7fr) 125px; }
  .tx-workspace { grid-template-columns: minmax(0,1.5fr) minmax(310px,1fr); }
  .tx-seed-grid { grid-template-columns: 1fr; }
  .tx-overlay { top: 72px; bottom: 72px; }
}

@media (max-width: 760px) {
  .transmitter-v2 { grid-template-rows: auto auto auto minmax(0,1fr) auto; }
  .transmitter-v2 .receiver-v2-topbar { grid-template-columns: 1fr auto 40px; }
  .tx-top-state { grid-column: 2; grid-row: 1; }
  .transmitter-v2-close { grid-column: 3 !important; }
  .tx-controls { grid-template-columns: 1fr auto; }
  .tx-controls .receiver-v2-search, .tx-controls nav { grid-column: 1 / -1; }
  .tx-mobile-steps { display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 10px; border-bottom: 1px solid rgba(169,139,214,.13); }
  .tx-mobile-steps button { min-height: 30px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(255,255,230,.38); font-size: 8px; font-weight: 900; }.tx-mobile-steps button.active { border-bottom-color: var(--layout-gold); color: var(--layout-gold); }
  .tx-workspace { display: block; overflow: auto; }
  .tx-library, .tx-builder { overflow: visible; }
  .tx-library { padding: 16px 10px 24px; border: 0; }
  .tx-builder { padding: 14px 10px 30px; }
  .tx-seed-grid { grid-template-columns: 1fr; }
  .tx-overlay { inset: 0; width: 100%; height: 100%; border: 0; }
  .tx-ki { grid-template-columns: 42px minmax(0,1fr); }
  .tx-step-seeds .tx-builder { display: none; }
  .tx-step-signal .tx-library, .tx-step-destinations .tx-library, .tx-step-review .tx-library { display: none; }
  .tx-step-signal .tx-destinations, .tx-step-signal .tx-privacy-check, .tx-step-signal .tx-review-button { display: none; }
  .tx-step-destinations .tx-message, .tx-step-destinations .tx-payload, .tx-step-destinations .tx-sender-section { display: none; }
}

@media (max-width: 480px) {
  .transmitter-v2 .receiver-v2-topbar { grid-template-columns: 1fr 40px; }
  .tx-top-state { grid-column: 1; grid-row: 2; justify-self: stretch; text-align: left; }
  .transmitter-v2-close { grid-column: 2 !important; grid-row: 1 !important; }
  .tx-destinations > div, .tx-overlay dl, .tx-review-anatomy { grid-template-columns: 1fr; }
  .tx-review-anatomy > i { justify-self: center; }
  .tx-seed-card { grid-template-columns: 68px minmax(0,1fr); }
}

/* Final row ownership: the universal Ki dock is shared by every route. */
.receiver-v2, .transmitter-v2 { grid-template-rows: 76px auto minmax(0,1fr); padding-bottom: 72px; }
@media (max-width: 1100px) { .receiver-v2, .transmitter-v2 { grid-template-rows: 72px auto minmax(0,1fr); padding-bottom: 72px; } }
@media (max-width: 760px) { .receiver-v2, .transmitter-v2 { grid-template-rows: auto auto minmax(0,1fr); padding-bottom: 116px; } }

.expression-inspector{position:absolute;z-index:210;top:18px;right:18px;bottom:90px;width:min(480px,calc(100% - 36px));overflow:auto;padding:18px;border:1px solid rgba(3,204,217,.35);border-radius:14px;background:rgba(13,8,22,.98);box-shadow:0 24px 70px rgba(0,0,0,.58)}.expression-inspector header{display:flex;align-items:center;justify-content:space-between;gap:12px}.expression-inspector header span{color:var(--layout-sky);font-size:7px;font-weight:900;text-transform:uppercase}.expression-inspector h2{margin:5px 0;font:24px var(--font-display,Georgia,serif)}.expression-inspector header button{width:36px;height:36px;border:1px solid rgba(169,139,214,.2);border-radius:50%;background:rgba(169,139,214,.06);color:var(--layout-cream)}.expression-inspector>p,.expression-inspector>small{color:rgba(255,255,230,.5);font-size:9px;line-height:1.55}.expression-inspector dl{display:grid;gap:7px}.expression-inspector dl div{padding:9px;border:1px solid rgba(169,139,214,.12);border-radius:8px;background:rgba(37,25,56,.35)}.expression-inspector dt{color:rgba(255,255,230,.3);font-size:6px;text-transform:uppercase}.expression-inspector dd{margin:4px 0 0;color:rgba(255,255,230,.68);font-size:8px;line-height:1.45}.expression-inspector>.primary{width:100%;min-height:36px;margin-top:12px;border:1px solid rgba(234,170,0,.4);border-radius:8px;background:rgba(234,170,0,.1);color:var(--layout-gold);font-size:9px;font-weight:900}
.sentinel-columns{max-width:1332px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sentinel-columns>section{padding:17px;border:1px solid rgba(169,139,214,.15);border-radius:11px;background:rgba(37,25,56,.4)}.sentinel-columns>section>span{color:var(--layout-sky);font-size:7px;font-weight:900;text-transform:uppercase}.sentinel-columns h2{margin:5px 0;font:20px var(--font-display,Georgia,serif)}.sentinel-columns p{color:rgba(255,255,230,.42);font-size:8px;line-height:1.5}.sentinel-range{display:block;margin-top:12px}.sentinel-range>span{display:flex;justify-content:space-between;color:rgba(255,255,230,.58);font-size:8px}.sentinel-range output{color:var(--layout-gold)}.sentinel-range input{width:100%;margin-top:6px}.boundary-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.boundary-presets button,.sentinel-list button{min-height:32px;border:1px solid rgba(169,139,214,.18);border-radius:7px;background:rgba(169,139,214,.05);color:rgba(255,255,230,.57);font-size:8px}.boundary-presets button.active{border-color:rgba(3,204,217,.4);color:var(--layout-sky)}.boundary-row{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(169,139,214,.09);color:rgba(255,255,230,.5);font-size:8px}.boundary-row select{height:29px;border:1px solid rgba(169,139,214,.18);border-radius:6px;background:#120b20;color:var(--layout-cream);font-size:7px}.sentinel-list{display:grid;gap:6px;margin-top:12px}.sentinel-list button{display:flex;justify-content:space-between;gap:8px;padding:0 9px;text-align:left}.sentinel-list b{color:var(--layout-gold);font-size:7px}
@media(max-width:760px){.sentinel-columns{grid-template-columns:1fr}.expression-inspector{inset:8px 8px 124px 8px;width:auto}}

/* Purpose-led product refinement */
.field-home {
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 0 0 118px;
  color: var(--layout-cream);
  background:
    radial-gradient(circle at 74% 2%, rgba(104,216,255,.11), transparent 31%),
    radial-gradient(circle at 21% 20%, rgba(168,118,255,.12), transparent 34%),
    linear-gradient(160deg, #10091b 0%, #0a0611 52%, #130b20 100%);
}
.field-atmosphere { position: fixed; inset: 0 0 0 60px; pointer-events: none; opacity: .6; background-image: linear-gradient(rgba(169,139,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(169,139,214,.035) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom,#000,transparent 68%); }
.field-hero { position: relative; max-width: 1440px; margin: auto; display: grid; grid-template-columns: minmax(300px,.85fr) minmax(570px,1.35fr); align-items: end; gap: 40px; padding: 52px 42px 26px; }
.field-welcome > span,.purpose-story > span,.discovery-heading span,.workspace-intro span,.workspace-panel header span,.metrics-purpose > span,.metric-chart-card header span,.movement-table header span { color: var(--layout-gold); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.field-welcome h1 { max-width: 610px; margin: 8px 0 10px; font: 400 clamp(44px,5.3vw,80px)/.95 var(--font-display,Georgia,serif); letter-spacing: -.035em; }
.field-welcome p { max-width: 560px; margin: 0; color: rgba(255,255,230,.62); font-size: 15px; line-height: 1.6; }
.network-glance { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(169,139,214,.18); border-radius: 16px; background: rgba(169,139,214,.14); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.network-glance .prototype-note { grid-column: 1/-1; padding: 9px 14px; background: rgba(7,4,13,.82); color: rgba(255,255,230,.42); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.network-glance article { min-height: 91px; padding: 17px 15px; background: rgba(24,14,38,.88); }
.network-glance strong,.network-glance small { display: block; }.network-glance strong { color: var(--layout-cream); font: 400 25px/1 var(--font-display,Georgia,serif); }.network-glance small { max-width: 100px; margin-top: 8px; color: rgba(255,255,230,.48); font-size: 10px; line-height: 1.3; }
.purpose-spotlight { position: relative; max-width: 1356px; margin: 10px auto 50px; display: grid; grid-template-columns: minmax(360px,1.2fr) minmax(380px,1fr) auto; align-items: center; gap: 28px; overflow: hidden; padding: 28px 30px; border: 1px solid color-mix(in srgb,var(--purpose-color),transparent 62%); border-radius: 22px; background: linear-gradient(115deg,color-mix(in srgb,var(--purpose-color),transparent 88%),rgba(23,13,37,.91) 46%,rgba(12,7,20,.95)); box-shadow: 0 26px 75px rgba(0,0,0,.32); }
.purpose-spotlight::before { content:""; position:absolute; width:310px; height:310px; right:-100px; top:-190px; border-radius:50%; background:var(--purpose-color); opacity:.14; filter:blur(24px); }
.purpose-story { position: relative; }.purpose-story label { display: block; margin: 8px 0 5px; color: rgba(255,255,230,.48); font-size: 10px; }.purpose-story select,.metrics-purpose select { min-width: 210px; height: 36px; padding: 0 34px 0 11px; border: 1px solid color-mix(in srgb,var(--purpose-color),transparent 57%); border-radius: 9px; background: rgba(9,5,15,.72); color: var(--layout-cream); font-size: 11px; font-weight: 800; }
.purpose-story h2 { max-width: 680px; margin: 13px 0 6px; font: 400 clamp(23px,2.4vw,34px)/1.08 var(--font-display,Georgia,serif); }.purpose-story p { margin:0; color:rgba(255,255,230,.48); font-size:11px; line-height:1.5; }
.purpose-stats { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; }.purpose-stats article { padding:12px; border:1px solid rgba(255,255,230,.07); border-radius:11px; background:rgba(4,2,8,.28); }.purpose-stats strong,.purpose-stats small { display:block; }.purpose-stats strong { font: 400 22px var(--font-display,Georgia,serif); }.purpose-stats small { margin-top:4px; color:rgba(255,255,230,.42); font-size:8px; text-transform:uppercase; }
.purpose-actions { position:relative; display:grid; gap:8px; }.purpose-actions button,.workspace-intro > button,.workspace-callout button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(169,139,214,.24); border-radius: 9px; background: rgba(169,139,214,.07); color: rgba(255,255,230,.72); font-size: 10px; font-weight: 900; white-space: nowrap; }.purpose-actions .primary,.workspace-intro > .primary { border-color: color-mix(in srgb,var(--purpose-color,#a876ff),transparent 46%); background: color-mix(in srgb,var(--purpose-color,#a876ff),transparent 84%); color: var(--layout-cream); }
.field-discovery { position: relative; max-width: 1440px; margin: auto; padding: 0 42px; }.discovery-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:16px; }.discovery-heading h2 { margin:5px 0 0; font: 400 clamp(25px,3vw,39px)/1.08 var(--font-display,Georgia,serif); }.discovery-heading > p { margin:0 0 5px; color:rgba(255,255,230,.38); font-size:10px; }
.discovery-controls { position:sticky; z-index:8; top:0; display:grid; grid-template-columns:minmax(260px,1.7fr) repeat(4,minmax(120px,.7fr)) auto; gap:8px; padding:10px; border:1px solid rgba(169,139,214,.18); border-radius:13px; background:rgba(11,6,18,.91); box-shadow:0 15px 45px rgba(0,0,0,.26); backdrop-filter:blur(18px); }
.discovery-search { display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid rgba(169,139,214,.2); border-radius:8px; background:rgba(4,2,8,.42); color:var(--layout-lavender); }.discovery-search input { width:100%; min-width:0; height:38px; border:0; outline:0; background:transparent; color:var(--layout-cream); font-size:11px; }.discovery-controls select,.saved-filter { min-height:40px; padding:0 10px; border:1px solid rgba(169,139,214,.19); border-radius:8px; background:#130c20; color:rgba(255,255,230,.68); font-size:9px; font-weight:800; }.saved-filter { background:rgba(169,139,214,.06); }.saved-filter.active { border-color:rgba(234,170,0,.45); color:var(--layout-gold); }
.experience-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:15px; }.experience-card { min-width:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; border:1px solid rgba(169,139,214,.16); border-radius:15px; background:linear-gradient(160deg,rgba(38,23,58,.77),rgba(15,9,25,.91)); box-shadow:0 16px 45px rgba(0,0,0,.18); transition:transform .2s ease,border-color .2s ease; }.experience-card:hover { transform:translateY(-3px); border-color:rgba(169,139,214,.38); }.experience-visual { position:relative; min-height:155px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(168,118,255,.25),transparent 52%),linear-gradient(145deg,#28183e,#100918); }.experience-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,6,18,.74),transparent 52%); }.experience-visual img { width:94px; height:94px; object-fit:contain; filter:drop-shadow(0 15px 22px rgba(0,0,0,.4)); }.experience-visual > span { font:italic 64px var(--font-display,Georgia,serif); color:rgba(255,255,230,.11); text-transform:uppercase; }.experience-visual i { position:absolute; z-index:2; left:12px; bottom:11px; padding:5px 8px; border-radius:99px; background:rgba(8,4,13,.72); color:rgba(255,255,230,.7); font-size:8px; font-style:normal; font-weight:900; }.experience-visual button { position:absolute; z-index:3; top:10px; right:10px; width:34px; height:34px; border:1px solid rgba(255,255,230,.17); border-radius:50%; background:rgba(8,4,13,.72); color:var(--layout-gold); font-size:15px; }
.experience-body { padding:15px 15px 13px; }.experience-body > span { color:var(--layout-sky); font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.experience-body h3 { margin:6px 0 7px; font:400 22px/1.06 var(--font-display,Georgia,serif); }.experience-body > p { min-height:48px; margin:0; color:rgba(255,255,230,.57); font-size:10px; line-height:1.55; }.experience-meta { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }.experience-meta em { padding:4px 7px; border-radius:99px; background:rgba(169,139,214,.08); color:rgba(255,255,230,.45); font-size:7px; font-style:normal; }.experience-body > small { display:block; padding-top:10px; border-top:1px solid rgba(169,139,214,.1); color:rgba(255,255,230,.39); font-size:8px; line-height:1.45; }.experience-body > small b { color:rgba(255,255,230,.62); }.experience-card footer { display:grid; grid-template-columns:1fr 1.6fr; gap:7px; padding:0 15px 15px; }.experience-card footer button { min-height:36px; border:1px solid rgba(169,139,214,.18); border-radius:8px; background:rgba(169,139,214,.06); color:rgba(255,255,230,.63); font-size:9px; font-weight:900; }.experience-card footer .primary { border-color:rgba(3,204,217,.34); background:rgba(3,204,217,.09); color:var(--layout-sky); }

.tool-workspace-header { padding: 25px 32px 20px; }.tool-workspace-header span { font-size:9px; }.tool-workspace-header h1 { margin:4px 0 5px; font-size:38px; }.tool-workspace-header p { max-width:780px; font-size:12px; line-height:1.5; }.tool-close { width:42px; height:42px; flex:0 0 auto; }.tool-tabs { gap:7px; padding:9px 32px; }.tool-tabs button { min-height:35px; padding:0 14px; font-size:9px; }.tool-workspace-scroll { padding:24px 32px 45px; }
.workspace-intro { max-width:1332px; margin:0 auto 18px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:20px 22px; border:1px solid rgba(169,139,214,.14); border-radius:14px; background:linear-gradient(110deg,rgba(168,118,255,.08),rgba(37,25,56,.36)); }.workspace-intro h2 { margin:5px 0; font:400 26px/1.1 var(--font-display,Georgia,serif); }.workspace-intro p { max-width:730px; margin:0; color:rgba(255,255,230,.48); font-size:11px; line-height:1.5; }
.connection-grid { max-width:1332px; margin:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.connection-card { min-width:0; padding:18px; border:1px solid rgba(169,139,214,.16); border-radius:14px; background:linear-gradient(145deg,rgba(37,25,56,.55),rgba(14,8,24,.73)); }.connection-card > span { color:var(--layout-sky); font-size:9px; font-weight:900; text-transform:uppercase; }.connection-card > h3 { margin:7px 0; font:400 23px var(--font-display,Georgia,serif); }.connection-card > p { color:rgba(255,255,230,.52); font-size:11px; line-height:1.55; }.connection-person { display:grid; grid-template-columns:48px 1fr; gap:13px; align-items:start; }.connection-person > i { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(168,118,255,.42); border-radius:14px; background:rgba(168,118,255,.1); color:var(--layout-lavender); font:400 22px var(--font-display,Georgia,serif); }.connection-person span { color:var(--layout-sky); font-size:8px; font-weight:900; text-transform:uppercase; }.connection-person h3 { margin:5px 0 4px; font:400 22px var(--font-display,Georgia,serif); }.connection-person p { margin:0; color:rgba(255,255,230,.5); font-size:10px; line-height:1.45; }.permission-note { margin:15px 0; padding:11px 12px; border-left:3px solid var(--layout-lavender); border-radius:0 8px 8px 0; background:rgba(169,139,214,.07); }.permission-note small,.permission-note strong { display:block; }.permission-note small { color:rgba(255,255,230,.33); font-size:7px; font-weight:900; text-transform:uppercase; }.permission-note strong { margin-top:4px; color:rgba(255,255,230,.68); font-size:9px; font-weight:700; line-height:1.45; }.connection-card footer { display:flex; flex-wrap:wrap; gap:7px; }.connection-card footer button,.workspace-panel button,.value-row button,.opportunity-row button,.governance-card button,.movement-table > header button { min-height:34px; padding:0 11px; border:1px solid rgba(169,139,214,.2); border-radius:7px; background:rgba(169,139,214,.06); color:rgba(255,255,230,.62); font-size:8px; font-weight:900; }.connection-card footer .primary,.governance-card .primary { border-color:rgba(3,204,217,.38); background:rgba(3,204,217,.08); color:var(--layout-sky); }.connection-card button:disabled { opacity:.35; }
.workspace-callout { max-width:1332px; margin:14px auto 0; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border:1px solid rgba(234,170,0,.2); border-radius:13px; background:rgba(234,170,0,.05); }.workspace-callout span { color:var(--layout-gold); font-size:8px; font-weight:900; text-transform:uppercase; }.workspace-callout h3 { margin:4px 0; font:400 20px var(--font-display,Georgia,serif); }.workspace-callout p { margin:0; color:rgba(255,255,230,.45); font-size:9px; }
.creator-groups { gap:12px; margin-bottom:18px; }.creator-groups section { padding:15px; border-radius:12px; }.creator-groups section div { gap:7px; margin-top:11px; }.creator-groups button { min-height:33px; padding:0 10px; font-size:8px; }.creator-flow { border-radius:14px; }.creator-flow > div:first-child h2 { font-size:27px; }.creator-fields label { font-size:9px; }.creator-fields input,.creator-fields textarea,.creator-fields select { font-size:10px; }.layout-example p { font-size:8px; line-height:1.45; }.creator-stage-actions .primary { border-color:rgba(3,204,217,.4); color:var(--layout-sky); }
.tool-filterbar { position:relative; max-width:1332px; grid-template-columns:minmax(300px,1fr) 160px 150px; margin-bottom:14px; }.refined-ledger { grid-template-columns:1fr; gap:7px; }.refined-ledger article { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:13px; padding:13px 15px; }.refined-ledger article > i { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(3,204,217,.25); border-radius:50%; background:rgba(3,204,217,.06); color:var(--layout-sky); font-size:9px; font-style:normal; }.refined-ledger article > div { margin:0; }.refined-ledger article > div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; }.refined-ledger h2 { margin:3px 0; font-size:17px; }.refined-ledger p { margin:0; font-size:9px; }.refined-ledger article span { font-size:7px; }
.refined-metrics { gap:12px; margin-bottom:17px; }.refined-metrics article { min-height:123px; padding:19px; }.refined-metrics span { font-size:8px; text-transform:uppercase; }.refined-metrics strong { margin:9px 0; font-size:31px; }.refined-metrics small { font-size:9px; line-height:1.4; }
.broker-layout { max-width:1332px; margin:auto; display:grid; grid-template-columns:1.25fr .75fr; gap:13px; }.workspace-panel { padding:18px; border:1px solid rgba(169,139,214,.15); border-radius:14px; background:rgba(37,25,56,.4); }.workspace-panel > header,.metric-chart-card > header,.movement-table > header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:12px; }.workspace-panel h2,.metric-chart-card h2,.movement-table h2 { margin:4px 0 0; font:400 22px var(--font-display,Georgia,serif); }.value-row { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid rgba(169,139,214,.11); }.value-row > strong { color:var(--layout-gold); font:400 17px var(--font-display,Georgia,serif); }.value-row b,.value-row small { display:block; }.value-row b { color:rgba(255,255,230,.7); font-size:10px; }.value-row small { margin-top:3px; color:rgba(255,255,230,.37); font-size:8px; }.opportunity-row { padding:12px 0; border-top:1px solid rgba(169,139,214,.11); }.opportunity-row span { color:var(--layout-gold); font-size:9px; font-weight:900; }.opportunity-row h3 { margin:5px 0 3px; font:400 17px var(--font-display,Georgia,serif); }.opportunity-row small { display:block; margin-bottom:9px; color:rgba(255,255,230,.38); font-size:8px; }
.refined-envoy { grid-template-columns:repeat(3,1fr); gap:12px; }.refined-envoy article { min-height:240px; padding:20px; }.refined-envoy .governance-card > span { color:var(--layout-sky); font-size:8px; font-weight:900; text-transform:uppercase; }.refined-envoy h2 { margin:8px 0; font-size:23px; }.refined-envoy p { min-height:55px; color:rgba(255,255,230,.54); font-size:10px; line-height:1.55; }.refined-envoy small { color:rgba(255,255,230,.42); font-size:8px; line-height:1.45; }.decision-progress { height:5px; overflow:hidden; margin:16px 0 9px; border-radius:99px; background:rgba(169,139,214,.13); }.decision-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--layout-lavender),var(--layout-sky)); }.mandate-list { display:grid; gap:5px; margin:13px 0; }.mandate-list small { padding-left:13px; position:relative; }.mandate-list small::before { content:'✓'; position:absolute; left:0; color:var(--layout-sky); }.refined-envoy .governance-card > button,.refined-envoy .governance-card > div:last-child { margin-top:14px; }.governance-history { max-width:1332px; margin:14px auto 0; }
.sentinel-columns > section { padding:20px; border-radius:14px; }.sentinel-columns > section > span { font-size:8px; }.sentinel-columns h2 { font-size:23px; }.sentinel-columns p { font-size:9px; }.sentinel-range > span,.boundary-row,.sentinel-list button { font-size:9px; }.sentinel-range { margin-top:15px; }.boundary-presets button { min-height:36px; font-size:9px; }.boundary-row { padding:8px 0; }.boundary-row select { width:120px; font-size:8px; }.sentinel-list button { min-height:38px; }.sentinel-list b { font-size:8px; }

.tool-metrics .tool-workspace-scroll { padding-top:24px; }.metrics-top { --purpose-color:#a876ff; max-width:1332px; margin:auto; display:grid; grid-template-columns:minmax(320px,.85fr) minmax(560px,1.15fr); gap:18px; }.metrics-purpose { position:relative; overflow:hidden; padding:24px; border:1px solid color-mix(in srgb,var(--purpose-color),transparent 58%); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--purpose-color),transparent 87%),rgba(18,10,29,.92)); }.metrics-purpose::after { content:""; position:absolute; width:220px; height:220px; right:-110px; bottom:-130px; border-radius:50%; background:var(--purpose-color); opacity:.14; filter:blur(20px); }.metrics-purpose label { display:block; margin:15px 0 6px; color:rgba(255,255,230,.42); font-size:9px; }.metrics-purpose h2 { position:relative; margin:18px 0 9px; font:400 clamp(26px,3vw,40px)/1.08 var(--font-display,Georgia,serif); }.metrics-purpose p { position:relative; color:rgba(255,255,230,.48); font-size:10px; line-height:1.55; }.metrics-scoreboard { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.metrics-scoreboard article { min-width:0; padding:17px; border:1px solid rgba(169,139,214,.15); border-radius:13px; background:rgba(37,25,56,.42); }.metrics-scoreboard small,.metrics-scoreboard strong,.metrics-scoreboard em { display:block; }.metrics-scoreboard small { min-height:24px; color:rgba(255,255,230,.39); font-size:8px; font-weight:900; text-transform:uppercase; }.metrics-scoreboard strong { margin:9px 0 6px; font:400 27px var(--font-display,Georgia,serif); }.metrics-scoreboard em { color:var(--layout-sky); font-size:7px; font-style:normal; line-height:1.35; }
.metric-panels { max-width:1332px; margin:14px auto; display:grid; grid-template-columns:1.25fr .75fr; gap:13px; }.metric-chart-card { min-height:280px; padding:20px; border:1px solid rgba(169,139,214,.15); border-radius:15px; background:rgba(37,25,56,.39); }.metric-chart-card > header select { height:32px; border:1px solid rgba(169,139,214,.17); border-radius:7px; background:#120b20; color:rgba(255,255,230,.6); font-size:8px; }.metric-chart-card > header > small { color:rgba(255,255,230,.35); font-size:8px; }.participation-chart { height:150px; display:flex; align-items:end; gap:8px; padding:15px 4px 0; border-bottom:1px solid rgba(169,139,214,.13); background:linear-gradient(to bottom,rgba(169,139,214,.035) 1px,transparent 1px); background-size:100% 34px; }.participation-chart > div { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }.participation-chart i { width:100%; max-width:26px; height:var(--h); min-height:8px; border-radius:5px 5px 1px 1px; background:linear-gradient(to top,var(--layout-lavender),var(--layout-sky)); box-shadow:0 0 18px rgba(3,204,217,.12); }.participation-chart small { color:rgba(255,255,230,.3); font-size:6px; }.chart-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; }.chart-legend span { color:rgba(255,255,230,.42); font-size:8px; }.chart-legend i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--layout-lavender); }.chart-legend .returning { background:var(--layout-sky); }.chart-legend .earning { background:var(--layout-gold); }
.flow-stack { display:grid; gap:10px; margin-top:20px; }.flow-stack > div { position:relative; overflow:hidden; min-height:35px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 11px; border-radius:7px; background:rgba(169,139,214,.06); color:rgba(255,255,230,.7); font-size:9px; }.flow-stack > div::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--c); opacity:.17; }.flow-stack span,.flow-stack strong { position:relative; }.metric-insight { margin:18px 0 0; padding:12px; border-left:3px solid var(--layout-gold); background:rgba(234,170,0,.05); color:rgba(255,255,230,.53); font:400 15px/1.45 var(--font-display,Georgia,serif); }
.movement-table { max-width:1332px; margin:auto; overflow:hidden; border:1px solid rgba(169,139,214,.15); border-radius:15px; background:rgba(20,12,32,.68); }.movement-table > header { padding:20px 20px 14px; }.movement-table > header p { margin:5px 0 0; color:rgba(255,255,230,.4); font-size:9px; }.movement-head,.movement-row { display:grid; grid-template-columns:minmax(280px,1.6fr) repeat(5,minmax(90px,.55fr)); align-items:center; gap:12px; }.movement-head { padding:9px 20px; border-top:1px solid rgba(169,139,214,.11); border-bottom:1px solid rgba(169,139,214,.11); color:rgba(255,255,230,.3); font-size:7px; font-weight:900; text-transform:uppercase; }.movement-row { width:100%; min-height:68px; padding:10px 20px; border:0; border-bottom:1px solid rgba(169,139,214,.09); background:transparent; color:rgba(255,255,230,.66); text-align:left; }.movement-row:hover,.movement-row.active { background:rgba(169,139,214,.06); }.movement-row > span { min-width:0; display:grid; grid-template-columns:10px minmax(0,1fr); gap:2px 9px; }.movement-row > span i { grid-row:1/3; width:8px; height:8px; margin-top:3px; border-radius:50%; }.movement-row b { font:400 16px var(--font-display,Georgia,serif); }.movement-row small { overflow:hidden; color:rgba(255,255,230,.35); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }.movement-row strong { font-size:9px; }.movement-row em { color:#75e1b9; font-size:9px; font-style:normal; font-weight:900; }

@media (max-width: 1180px) {
  .field-hero { grid-template-columns:1fr; align-items:start; }.network-glance { max-width:760px; }.purpose-spotlight { margin-inline:28px; grid-template-columns:1fr 1fr; }.purpose-actions { grid-column:1/-1; grid-template-columns:1fr 1fr; }.experience-grid { grid-template-columns:repeat(3,1fr); }.discovery-controls { grid-template-columns:minmax(250px,1.5fr) repeat(3,minmax(105px,.6fr)); }.discovery-controls .saved-filter { grid-column:auto; }.metrics-top { grid-template-columns:1fr; }.metrics-scoreboard { grid-template-columns:repeat(6,1fr); }.metrics-scoreboard article { padding:13px; }.metrics-scoreboard strong { font-size:22px; }.movement-head,.movement-row { grid-template-columns:minmax(240px,1.5fr) repeat(5,minmax(75px,.5fr)); }
}
@media (max-width: 900px) {
  .field-hero,.field-discovery { padding-inline:22px; }.purpose-spotlight { margin-inline:22px; grid-template-columns:1fr; }.purpose-actions { grid-column:auto; }.experience-grid { grid-template-columns:repeat(2,1fr); }.discovery-controls { position:relative; grid-template-columns:1fr 1fr; }.discovery-search { grid-column:1/-1; }.connection-grid,.broker-layout,.metric-panels { grid-template-columns:1fr; }.refined-envoy { grid-template-columns:1fr 1fr; }.metrics-scoreboard { grid-template-columns:repeat(3,1fr); }.movement-head { display:none; }.movement-row { grid-template-columns:minmax(220px,1fr) repeat(3,90px); }.movement-row > strong:nth-of-type(3),.movement-row > strong:nth-of-type(4) { display:none; }
}
@media (max-width: 760px) {
  .field-home { padding-bottom:148px; }.field-atmosphere { left:48px; }.field-hero { gap:24px; padding-top:30px; }.field-welcome h1 { font-size:48px; }.field-welcome p { font-size:13px; }.network-glance { grid-template-columns:1fr 1fr; }.network-glance article { min-height:80px; }.purpose-spotlight { margin:2px 12px 36px; padding:21px 18px; }.purpose-stats { grid-template-columns:1fr 1fr; }.purpose-actions { grid-template-columns:1fr; }.field-discovery { padding-inline:12px; }.discovery-heading { align-items:start; flex-direction:column; }.discovery-heading h2 { font-size:28px; }.experience-grid { grid-template-columns:1fr; }.experience-visual { min-height:190px; }.tool-workspace-header { padding:18px 14px 14px; }.tool-workspace-header h1 { font-size:31px; }.tool-workspace-header p { font-size:10px; }.tool-tabs { padding-inline:10px; }.tool-workspace-scroll { padding:14px 10px 34px; }.workspace-intro,.workspace-callout { align-items:flex-start; flex-direction:column; }.workspace-intro h2 { font-size:23px; }.connection-grid { grid-template-columns:1fr; }.creator-groups { grid-template-columns:1fr 1fr; }.tool-filterbar { grid-template-columns:1fr; margin-inline:0; }.refined-ledger article { grid-template-columns:28px 1fr; }.refined-ledger article > div:last-child { grid-column:2; justify-content:flex-start; }.refined-envoy { grid-template-columns:1fr; }.metrics-scoreboard { grid-template-columns:1fr 1fr; }.metrics-top { gap:10px; }.participation-chart { gap:4px; }.movement-row { grid-template-columns:1fr 70px; gap:8px; }.movement-row > strong:not(:first-of-type),.movement-row em { display:none; }.movement-row > strong:first-of-type { text-align:right; }.sentinel-columns { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .field-welcome h1 { font-size:40px; }.network-glance strong { font-size:22px; }.purpose-story h2 { font-size:24px; }.purpose-stats { grid-template-columns:1fr 1fr; }.discovery-controls { grid-template-columns:1fr; }.discovery-search { grid-column:auto; }.creator-groups { grid-template-columns:1fr; }.metrics-scoreboard { grid-template-columns:1fr 1fr; }.metrics-purpose { padding:18px; }.metrics-purpose h2 { font-size:27px; }.metric-chart-card { padding:15px; }.participation-chart small { writing-mode:vertical-rl; }.movement-row { padding-inline:13px; }.value-row { grid-template-columns:50px 1fr; }.value-row button { grid-column:2; justify-self:start; }
}

/* ==========================================================================
   Purposeful Field V0.09 — Receiver, five-layer Field, About, Builder Notes
   Violet-led semantic layer. Appended intentionally to preserve prior releases.
   ========================================================================== */

:root {
  --purpose-bg: var(--bg-deep, #0f0a1c);
  --purpose-field: var(--kin-deep-violet, #1a1129);
  --purpose-surface: color-mix(in srgb, var(--surface, #251938) 82%, transparent);
  --purpose-raised: color-mix(in srgb, var(--surface-elev, #30224a) 88%, transparent);
  --purpose-line: color-mix(in srgb, var(--kin-lavender, #a98bd6) 24%, transparent);
  --purpose-line-strong: color-mix(in srgb, var(--kin-lavender, #a98bd6) 46%, transparent);
  --purpose-copy: color-mix(in srgb, var(--kin-cream-white, #ffffe6) 72%, transparent);
  --purpose-copy-soft: color-mix(in srgb, var(--kin-cream-white, #ffffe6) 48%, transparent);
  --purpose-copy-faint: color-mix(in srgb, var(--kin-cream-white, #ffffe6) 32%, transparent);
  --purpose-sky: var(--kin-skyblue, #03ccd9);
  --purpose-gold: var(--kid-sun-gold, #eaaa00);
  --purpose-cream: var(--kin-cream-white, #ffffe6);
  --purpose-lavender: var(--kin-lavender, #a98bd6);
  --purpose-violet: var(--kin-royal-violet, #5e3f94);
  --purpose-mint: var(--kin-mint, #8fe6c6);
  --purpose-radius-sm: 9px;
  --purpose-radius: 15px;
  --purpose-radius-md: var(--purpose-radius);
  --purpose-radius-lg: 23px;
  --purpose-shadow: 0 22px 64px rgba(0, 0, 0, .34);
}

.field-icon-mask {
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
  -webkit-mask: url('assets/interface-icons/field.svg') center / contain no-repeat;
  mask: url('assets/interface-icons/field.svg') center / contain no-repeat;
}

.rail-action:focus-visible .rail-tooltip,
.vault-entry:focus-visible .rail-tooltip,
.avatar-entry:focus-visible .rail-tooltip,
.vault-entry:hover .rail-tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}

.field-rail-action { margin-bottom: 2px; }
.field-rail-action + .rail-primary { display: flex; flex-direction: column; gap: 2px; }

.titlebar {
  grid-template-columns: minmax(650px, 1.25fr) minmax(270px, .75fr) auto;
  gap: 12px;
}

.title-left { overflow: visible; }
.source-switcher {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--purpose-copy-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}
.source-switcher > span {
  color: var(--purpose-sky);
  font-size: 7px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.source-switcher select {
  width: 184px;
  height: 27px;
  min-width: 0;
  padding: 0 26px 0 9px;
  border: 1px solid var(--purpose-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--purpose-field) 90%, black);
  color: var(--purpose-cream);
  font-size: 9px;
  font-weight: 800;
}
.source-switcher small {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  left: 42px;
  width: max-content;
  max-width: 300px;
  padding: 8px 10px;
  border: 1px solid var(--purpose-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--purpose-bg) 96%, transparent);
  color: var(--purpose-copy);
  box-shadow: var(--purpose-shadow);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.source-switcher:hover small,
.source-switcher:focus-within small { opacity: 1; transform: none; }

.realm-receiver,
.purposeful-field,
.about-page,
.builder-notes {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding: 28px 0 140px;
  padding-bottom: 132px;
  color: var(--purpose-cream);
  background:
    radial-gradient(circle at 76% 4%, color-mix(in srgb, var(--purpose-sky) 10%, transparent), transparent 29%),
    radial-gradient(circle at 15% 18%, color-mix(in srgb, var(--purpose-violet) 22%, transparent), transparent 36%),
    linear-gradient(154deg, var(--purpose-bg), color-mix(in srgb, var(--purpose-field) 68%, #09050f) 54%, #09050f);
}

.realm-atmosphere,
.purposeful-field-atmosphere,
.about-atmosphere {
  position: fixed;
  inset: var(--title-height) 0 0 var(--rail-width);
  overflow: hidden;
  pointer-events: none;
}
.realm-atmosphere::before,
.about-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--purpose-lavender) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--purpose-lavender) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 52% 25%, black, transparent 72%);
}
.realm-atmosphere::after,
.about-atmosphere::after {
  content: '';
  position: absolute;
  width: min(80vw, 1100px);
  height: min(42vw, 560px);
  left: 50%;
  top: 8%;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 15%, transparent);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

.realm-receiver button,
.realm-receiver input,
.realm-receiver select,
.purposeful-field button,
.purposeful-field select,
.about-page a,
.builder-notes a,
.purposeful-dialog button,
.purposeful-dialog input {
  font-size: 12px;
}

.realm-receiver button,
.purposeful-field button,
.purposeful-dialog button,
.about-page a,
.builder-notes a {
  min-height: 40px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-sm);
  background: color-mix(in srgb, var(--purpose-raised) 55%, transparent);
  color: var(--purpose-copy);
  font-weight: 800;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.realm-receiver button:hover,
.purposeful-field button:hover,
.purposeful-dialog button:hover,
.about-page a:hover,
.builder-notes a:hover {
  border-color: color-mix(in srgb, var(--purpose-sky) 48%, transparent);
  background: color-mix(in srgb, var(--purpose-sky) 9%, var(--purpose-raised));
  color: var(--purpose-cream);
}
.realm-receiver button:active,
.purposeful-field button:active,
.purposeful-dialog button:active { transform: translateY(1px); }
.realm-receiver button.primary,
.purposeful-field button.primary,
.purposeful-dialog button.primary {
  border-color: color-mix(in srgb, var(--purpose-sky) 55%, transparent);
  background: color-mix(in srgb, var(--purpose-sky) 13%, var(--purpose-raised));
  color: var(--purpose-sky);
}

.realm-receiver-header {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
  padding: clamp(30px, 4vw, 58px) clamp(20px, 4vw, 52px) 24px;
}
.realm-receiver-header > div > span,
.realm-filter-title span,
.purposeful-empty > span,
.realm-join-boundary strong,
.purposeful-field-header > div > span,
.source-access-note > span,
.purpose-field-controls > header span,
.purpose-throughline > span,
.field-provenance > span,
.field-layer > header span,
.accessibility-equivalent > span,
.about-page header > span,
.about-story-grid section > span,
.about-prototype span,
.about-notes span,
.builder-notes > header span,
.builder-notes > section > span,
.purposeful-dialog > header span,
.realm-detail-story > span,
.realm-detail-grid > section > span,
.realm-detail-boundaries span,
.work-detail-columns > section > span,
.throughline-chain article span {
  color: var(--purpose-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.realm-receiver-header h1 {
  max-width: 900px;
  margin: 8px 0 10px;
  font: 400 clamp(38px, 4.4vw, 66px) / .98 var(--font-display, Georgia, serif);
  letter-spacing: -.025em;
}
.realm-receiver-header p {
  max-width: 850px;
  margin: 0;
  color: var(--purpose-copy);
  font-size: 14px;
  line-height: 1.6;
}
.realm-receiver-header .tool-close {
  margin-top: 4px;
  border-color: var(--purpose-line-strong);
  background: color-mix(in srgb, var(--purpose-raised) 70%, transparent);
}

.realm-filter-shell {
  position: relative;
  z-index: 5;
  max-width: 1400px;
  margin: 0 auto 28px;
  padding: 15px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-bg) 87%, transparent);
  box-shadow: var(--purpose-shadow);
  backdrop-filter: blur(22px);
}
.realm-search-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
}
.realm-search-row label,
.topic-search {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--purpose-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--purpose-field) 65%, transparent);
  color: var(--purpose-lavender);
}
.realm-search-row input,
.topic-search input {
  min-width: 0;
  width: 100%;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--purpose-cream);
}
.realm-search-row input::placeholder,
.topic-search input::placeholder { color: var(--purpose-copy-faint); }
.realm-filter-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 3px 10px;
}
.realm-filter-title h2 { margin: 4px 0 0; font: 400 24px var(--font-display, Georgia, serif); }
.realm-filter-title p {
  max-width: 680px;
  margin: 0;
  color: var(--purpose-copy-soft);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}
.realm-filter-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.realm-filter-buttons button { min-height: 36px; padding: 0 12px; }
.realm-filter-buttons button.active {
  border-color: color-mix(in srgb, var(--purpose-sky) 55%, transparent);
  background: color-mix(in srgb, var(--purpose-sky) 12%, transparent);
  color: var(--purpose-sky);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purpose-sky) 10%, transparent);
}
.realm-filter-buttons .topics-trigger {
  margin-left: 4px;
  border-color: color-mix(in srgb, var(--purpose-gold) 44%, transparent);
  color: var(--purpose-gold);
}
.realm-filter-buttons .state-filter { border-style: dashed; }
.realm-sort-row {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--purpose-line);
}
.realm-sort-row label {
  display: grid;
  gap: 5px;
  color: var(--purpose-copy-soft);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.realm-sort-row select,
.field-filter-grid select {
  min-width: 170px;
  height: 40px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-sm);
  background: color-mix(in srgb, var(--purpose-field) 86%, black);
  color: var(--purpose-cream);
}
.realm-sort-row > button { min-width: 196px; }

.realm-library {
  position: relative;
  z-index: 2;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(290px, 1fr));
  gap: 17px;
}
.realm-library-card {
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--purpose-raised) 75%, transparent), color-mix(in srgb, var(--purpose-bg) 91%, transparent));
  box-shadow: 0 16px 45px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .025);
  transition: border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.realm-library-card:hover { border-color: var(--purpose-line-strong); transform: translateY(-2px); }
.realm-library-card.is-muted { opacity: .6; filter: saturate(.62); }
.realm-identity {
  --realm-tone: var(--purpose-sky);
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--purpose-line);
  background: radial-gradient(circle at 48% 44%, color-mix(in srgb, var(--realm-tone) 25%, transparent), transparent 42%), color-mix(in srgb, var(--purpose-bg) 83%, transparent);
}
.realm-tone-1 { --realm-tone: var(--purpose-mint); }
.realm-tone-2 { --realm-tone: var(--purpose-lavender); }
.realm-tone-3 { --realm-tone: var(--purpose-gold); }
.realm-tone-4 { --realm-tone: #c13f83; }
.realm-tone-5 { --realm-tone: #57c08f; }
.realm-identity::before,
.realm-identity::after,
.realm-identity i {
  content: '';
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--realm-tone) 34%, transparent);
  border-radius: 50%;
}
.realm-identity::before { width: 94px; height: 94px; }
.realm-identity::after { width: 68px; height: 68px; border-style: dashed; transform: rotate(18deg); }
.realm-identity i { width: 118px; height: 42px; transform: rotate(-28deg); }
.realm-identity > span {
  position: relative;
  z-index: 2;
  color: var(--realm-tone);
  font: 400 26px var(--font-display, Georgia, serif);
  text-shadow: 0 0 22px color-mix(in srgb, var(--realm-tone) 38%, transparent);
}
.realm-card-copy { min-width: 0; padding: 18px 17px 14px; }
.realm-card-copy > span {
  color: var(--purpose-sky);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.realm-card-copy h2 { margin: 7px 0 8px; font: 400 25px / 1.04 var(--font-display, Georgia, serif); }
.realm-card-copy > p { margin: 0; color: var(--purpose-copy); font-size: 11px; line-height: 1.5; }
.realm-card-copy dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 15px 0;
}
.realm-card-copy dl div { min-width: 0; }
.realm-card-copy dt { color: var(--purpose-copy-faint); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.realm-card-copy dd { margin: 3px 0 0; color: var(--purpose-copy); font-size: 10px; overflow-wrap: anywhere; }
.realm-card-states { display: flex; flex-wrap: wrap; gap: 5px; }
.realm-card-states span {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 17%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--purpose-lavender) 7%, transparent);
  color: var(--purpose-copy-soft);
  font-size: 8px;
}
.realm-library-card > footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 7px;
  padding: 12px;
  border-top: 1px solid var(--purpose-line);
  background: color-mix(in srgb, var(--purpose-bg) 62%, transparent);
}
.realm-library-card .realm-join.is-joined,
.realm-detail-dialog .primary.is-joined {
  border-color: color-mix(in srgb, var(--purpose-mint) 55%, transparent);
  background: color-mix(in srgb, var(--purpose-mint) 11%, transparent);
  color: var(--purpose-mint);
}
.purposeful-empty {
  grid-column: 1 / -1;
  padding: clamp(46px, 8vw, 94px) 24px;
  border: 1px dashed var(--purpose-line-strong);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-surface) 32%, transparent);
  text-align: center;
}
.purposeful-empty h2 { margin: 8px 0; font: 400 clamp(28px, 3vw, 42px) var(--font-display, Georgia, serif); }
.purposeful-empty p { max-width: 650px; margin: 0 auto 18px; color: var(--purpose-copy); line-height: 1.55; }
.realm-join-boundary {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 40px));
  margin: 22px auto 0;
  padding: 16px 19px;
  border-left: 3px solid var(--purpose-gold);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--purpose-gold) 6%, var(--purpose-bg));
}
.realm-join-boundary p { margin: 5px 0 0; color: var(--purpose-copy); font-size: 11px; line-height: 1.55; }

/* --- V0.09 Field composition ------------------------------------------------ */
.purposeful-field-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(108, 70, 166, .13), transparent 37%),
    radial-gradient(ellipse at 76% 58%, rgba(83, 187, 190, .055), transparent 29%),
    radial-gradient(ellipse at 18% 75%, rgba(226, 171, 45, .04), transparent 28%);
}
.purposeful-field-atmosphere::before,
.purposeful-field-atmosphere::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  height: 520px;
  border: 1px solid rgba(168, 118, 255, .095);
  border-radius: 50%;
  transform: rotate(-3deg);
}
.purposeful-field-atmosphere::before { top: 370px; }
.purposeful-field-atmosphere::after { top: 1050px; transform: rotate(4deg); }
.purposeful-field-atmosphere i,
.purposeful-field-atmosphere b {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purpose-gold);
  box-shadow: 0 0 18px color-mix(in srgb, var(--purpose-gold) 68%, transparent);
}
.purposeful-field-atmosphere i:nth-child(1) { top: 260px; left: 15%; }
.purposeful-field-atmosphere i:nth-child(2) { top: 780px; right: 13%; background: var(--purpose-sky); }
.purposeful-field-atmosphere i:nth-child(3) { top: 1510px; left: 24%; background: var(--purpose-mint); }
.purposeful-field-atmosphere b { top: 1130px; right: 31%; width: 4px; height: 4px; background: var(--purpose-lavender); }

.purposeful-field-header {
  position: relative;
  z-index: 2;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, .75fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: end;
}
.purposeful-field-header h1,
.about-page > header h1,
.builder-notes > header h1 {
  margin: 8px 0 11px;
  font: 400 clamp(38px, 4.5vw, 68px) / .98 var(--font-display, Georgia, serif);
  letter-spacing: -.027em;
}
.purposeful-field-header > div > p,
.about-page > header > p,
.builder-notes > header > p {
  max-width: 820px;
  margin: 0;
  color: var(--purpose-copy);
  font-size: 14px;
  line-height: 1.65;
}
.purposeful-field-header aside {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--purpose-gold) 30%, transparent);
  border-radius: var(--purpose-radius-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--purpose-gold) 6%, var(--purpose-raised)), color-mix(in srgb, var(--purpose-bg) 92%, transparent));
  box-shadow: var(--purpose-shadow);
}
.purposeful-field-header aside strong {
  display: block;
  color: var(--purpose-gold);
  font: 400 27px var(--font-display, Georgia, serif);
}
.purposeful-field-header aside p { margin: 7px 0 11px; color: var(--purpose-copy); font-size: 11px; line-height: 1.48; }
.purposeful-field-header aside small { color: var(--purpose-copy-faint); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.source-access-note,
.field-provenance {
  position: relative;
  z-index: 2;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto 16px;
  display: flex;
  align-items: baseline;
  gap: 15px;
  padding: 11px 15px;
  border-left: 3px solid var(--purpose-mint);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--purpose-mint) 5%, var(--purpose-bg));
}
.source-access-note span,
.field-provenance span {
  flex: 0 0 auto;
  color: var(--purpose-mint);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.source-access-note p,
.field-provenance p { margin: 0; color: var(--purpose-copy-soft); font-size: 10px; line-height: 1.45; }
.source-access-note strong { color: var(--purpose-cream); }

.purpose-field-controls {
  position: relative;
  z-index: 3;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto 18px;
  padding: 15px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-bg) 88%, transparent);
  box-shadow: var(--purpose-shadow);
  backdrop-filter: blur(22px);
}
.purpose-field-controls > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}
.purpose-field-controls > header span { color: var(--purpose-sky); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.purpose-field-controls > header h2 { margin: 4px 0 0; font: 400 23px var(--font-display, Georgia, serif); }
.purpose-field-controls > header > button { min-width: 110px; }
.field-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 9px;
}
.field-filter-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--purpose-copy-soft);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.field-filter-grid select { width: 100%; min-width: 0; }
.field-filter-grid .force-control select {
  border-color: color-mix(in srgb, var(--purpose-gold) 45%, transparent);
  color: var(--purpose-gold);
}
.field-view-switch {
  align-self: end;
  min-height: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--purpose-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--purpose-field) 75%, transparent);
}
.field-view-switch button { min-width: 0; min-height: 32px; border: 0; background: transparent; }
.field-view-switch button:disabled { cursor: not-allowed; opacity: .48; }
.field-view-switch button.active {
  background: color-mix(in srgb, var(--purpose-lavender) 15%, transparent);
  color: var(--purpose-lavender);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purpose-lavender) 23%, transparent);
}

.purpose-throughline {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: 24px auto 12px;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid color-mix(in srgb, var(--purpose-gold) 30%, transparent);
  border-radius: var(--purpose-radius-lg);
  background: radial-gradient(circle at 72% 15%, color-mix(in srgb, var(--purpose-gold) 8%, transparent), transparent 30%), color-mix(in srgb, var(--purpose-raised) 78%, transparent);
  box-shadow: var(--purpose-shadow);
  text-align: center;
}
.purpose-throughline > span { color: var(--purpose-gold); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.purpose-throughline > div { margin: 12px 0 9px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.purpose-throughline strong { color: var(--purpose-copy); font-size: 11px; }
.purpose-throughline i { color: var(--purpose-gold); font-style: normal; }
.purpose-throughline h2 { margin: 0; color: var(--purpose-cream); font: 400 clamp(23px, 3vw, 38px) var(--font-display, Georgia, serif); }
.purpose-throughline > p { max-width: 760px; margin: 0 auto; color: var(--purpose-copy-soft); font-size: 10px; line-height: 1.5; }
.field-provenance { width: min(1120px, calc(100% - 40px)); border-left-color: var(--purpose-lavender); background: color-mix(in srgb, var(--purpose-lavender) 5%, var(--purpose-bg)); }
.field-provenance span { color: var(--purpose-lavender); }

.five-layer-field {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 40px));
  margin: 24px auto 0;
  padding: 18px clamp(14px, 3vw, 40px) 26px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 13%, transparent);
  border-radius: 50% 50% 32px 32px / 5% 5% 32px 32px;
  background: linear-gradient(180deg, rgba(13, 8, 23, .28), rgba(31, 20, 50, .34));
}
.field-relationship-legend {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto -4px;
  color: var(--purpose-copy-faint);
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}
.field-relationship-legend strong {
  margin-right: 5px;
  color: var(--purpose-lavender);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.field-connection-lines {
  position: absolute;
  inset: 65px 0 auto;
  width: 100%;
  height: calc(100% - 90px);
  z-index: 0;
  pointer-events: none;
  opacity: .46;
}
.field-connection-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--purpose-lavender) 31%, transparent);
  stroke-width: 1.25;
  stroke-dasharray: 3 10;
}
.field-connection-lines path:first-child { stroke: color-mix(in srgb, var(--purpose-gold) 40%, transparent); stroke-dasharray: none; }
.field-layer { position: relative; z-index: 1; padding: 20px 0 28px; }
.field-layer + .field-layer { border-top: 1px solid color-mix(in srgb, var(--purpose-lavender) 11%, transparent); }
.field-layer > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}
.field-layer > header span { color: var(--purpose-copy-faint); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.field-layer > header h2 { margin: 4px 0 0; font: 400 clamp(24px, 2.4vw, 35px) var(--font-display, Georgia, serif); }
.field-layer > header > p {
  margin: 0;
  padding: 5px 9px;
  border: 1px solid var(--purpose-line);
  border-radius: 999px;
  color: var(--purpose-copy-soft);
  font-size: 8px;
}
.field-layer-items { display: grid; gap: 14px; align-items: start; }
.field-layer-focus .field-layer-items,
.field-layer-near .field-layer-items,
.field-layer-active .field-layer-items,
.field-layer-context .field-layer-items { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.field-layer-focus .purpose-work-card:nth-child(1) { grid-column: 4 / 10; }
.field-layer-focus .purpose-work-card:nth-child(2) { grid-column: 1 / 6; }
.field-layer-focus .purpose-work-card:nth-child(3) { grid-column: 8 / 13; }
.field-layer-near .purpose-work-card:nth-child(-n+3) { grid-column: span 4; }
.field-layer-near .purpose-work-card:nth-child(4) { grid-column: 3 / 7; }
.field-layer-near .purpose-work-card:nth-child(5) { grid-column: 7 / 11; }
.field-layer-active .purpose-work-card:nth-child(-n+4) { grid-column: span 3; }
.field-layer-active .purpose-work-card:nth-child(n+5) { grid-column: span 4; }
.field-layer-context .purpose-work-card { grid-column: span 3; }

.purpose-work-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--purpose-raised) 88%, transparent), color-mix(in srgb, var(--purpose-bg) 88%, transparent));
  box-shadow: 0 13px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.purpose-work-card:hover { transform: translateY(-2px); border-color: var(--purpose-line-strong); box-shadow: 0 17px 42px rgba(0, 0, 0, .3); }
.purpose-work-card.is-illustrative { border-style: dashed; }
.purpose-work-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.purpose-work-card > header > span { color: var(--purpose-sky); font-size: 7px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.purpose-work-card > header em {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--purpose-lavender) 9%, transparent);
  color: var(--purpose-lavender);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.purpose-work-card h3 { margin: 9px 0 7px; font: 400 clamp(19px, 1.6vw, 25px) / 1.08 var(--font-display, Georgia, serif); }
.purpose-work-card > p { margin: 0 0 11px; color: var(--purpose-copy); font-size: 10px; line-height: 1.45; }
.purpose-work-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.purpose-work-meta span {
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 14%, transparent);
  border-radius: 999px;
  color: var(--purpose-copy-soft);
  font-size: 7px;
  overflow-wrap: anywhere;
}
.purpose-work-card > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--purpose-line);
}
.purpose-work-card > footer button { flex: 1 1 auto; min-width: 76px; padding-inline: 8px; }
.purpose-work-card > footer .primary { border-color: color-mix(in srgb, var(--purpose-sky) 44%, transparent); color: var(--purpose-sky); }
.why-here {
  margin-top: 11px;
  padding: 10px 11px;
  border-left: 2px solid var(--purpose-gold);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--purpose-gold) 5%, transparent);
}
.why-here strong { color: var(--purpose-gold); font-size: 8px; }
.why-here p { margin: 5px 0; color: var(--purpose-copy); font-size: 9px; line-height: 1.45; }
.why-here small { color: var(--purpose-copy-faint); font-size: 7px; }
.field-layer-context .purpose-work-card { padding: 12px; opacity: .86; }
.field-layer-context .purpose-work-card h3 { font-size: 18px; }
.field-layer-context .purpose-work-meta span:nth-child(n+2) { display: none; }
.field-layer-context .purpose-work-card > footer button { min-height: 32px; font-size: 7px; }

.field-layer-far .field-layer-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.far-cluster {
  min-width: 0;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-md);
  background: color-mix(in srgb, var(--purpose-surface) 35%, transparent);
}
.far-cluster > button {
  width: 100%;
  min-height: 100px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 15px;
  border: 0;
  background: transparent;
  text-align: left;
}
.far-cluster > button span { color: var(--purpose-sky); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.far-cluster > button strong { font: 400 20px var(--font-display, Georgia, serif); }
.far-cluster > button small { color: var(--purpose-copy-faint); font-size: 8px; }
.far-cluster-items { display: grid; gap: 10px; padding: 0 11px 11px; }
.far-cluster-items .purpose-work-card { box-shadow: none; }
.layer-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 25px;
  border: 1px dashed var(--purpose-line);
  border-radius: var(--purpose-radius-md);
  color: var(--purpose-copy-soft);
  text-align: center;
}
.layer-empty small { color: var(--purpose-copy-faint); font-size: 8px; }
.accessibility-equivalent {
  position: relative;
  z-index: 2;
  width: min(820px, calc(100% - 40px));
  margin: 22px auto 0;
  padding: 20px;
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-raised) 60%, transparent);
  text-align: center;
}
.accessibility-equivalent > span { color: var(--purpose-mint); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.accessibility-equivalent h2 { margin: 5px 0; font: 400 24px var(--font-display, Georgia, serif); }
.accessibility-equivalent p { margin: 0 auto 12px; color: var(--purpose-copy-soft); font-size: 10px; line-height: 1.5; }

/* The list view is a presentation change only: eligibility and DOM order stay put. */
.purposeful-field.is-list-view .five-layer-field { border-radius: var(--purpose-radius-lg); }
.purposeful-field.is-list-view .field-connection-lines { display: none; }
.purposeful-field.is-list-view .field-layer-items,
.purposeful-field.is-list-view .far-cluster-items { grid-template-columns: 1fr; }
.purposeful-field.is-list-view .purpose-work-card,
.purposeful-field.is-list-view .field-layer .purpose-work-card:nth-child(n) { grid-column: 1 / -1; opacity: 1; }
.purposeful-field.is-list-view .field-layer-context .purpose-work-meta span { display: inline-block; }
.purposeful-field.is-list-view .field-layer-context .purpose-work-card h3 { font-size: 22px; }

/* --- V0.09 dialogs: visible, bounded, keyboard-readable --------------------- */
.purposeful-dialog-backdrop {
  position: fixed;
  inset: var(--title-height) 0 0 var(--rail-width);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(4, 2, 9, .76);
  backdrop-filter: blur(15px) saturate(.78);
}
.purposeful-dialog {
  width: min(1100px, 100%);
  max-height: calc(100dvh - var(--title-height) - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 32%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 2%, rgba(168, 118, 255, .11), transparent 28%),
    linear-gradient(155deg, #1b1128, #0c0713 72%);
  box-shadow: 0 30px 110px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .035);
}
.purposeful-dialog > header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--purpose-line);
  background: color-mix(in srgb, var(--purpose-bg) 91%, transparent);
  backdrop-filter: blur(20px);
}
.purposeful-dialog > header h1 { margin: 5px 0 4px; font: 400 clamp(28px, 3.2vw, 43px) / 1 var(--font-display, Georgia, serif); }
.purposeful-dialog > header p { margin: 0; color: var(--purpose-copy-soft); font-size: 10px; line-height: 1.45; }
.purposeful-dialog > header > button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}
.purposeful-dialog > footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--purpose-line);
  background: color-mix(in srgb, var(--purpose-bg) 93%, transparent);
  backdrop-filter: blur(20px);
}
.purposeful-dialog > footer > span { margin-right: auto; color: var(--purpose-copy-faint); font-size: 8px; }
.purposeful-dialog button { min-height: 38px; }
.purposeful-dialog > footer .primary { min-width: 170px; }

.topic-dialog { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.topic-dialog > .topic-search { margin: 14px 18px 0; }
.topic-columns {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 13px 18px;
  overflow: auto;
}
.topic-columns > section {
  min-width: 0;
  min-height: 260px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--purpose-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--purpose-surface) 37%, transparent);
}
.topic-columns > section > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--purpose-line);
}
.topic-columns > section > header > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--purpose-gold) 42%, transparent);
  border-radius: 50%;
  color: var(--purpose-gold);
  font-size: 9px;
  font-weight: 900;
}
.topic-columns h2 { margin: 0; font: 400 20px var(--font-display, Georgia, serif); }
.topic-columns header p { margin: 2px 0 0; color: var(--purpose-copy-faint); font-size: 8px; }
.topic-choice-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}
.topic-choice-list button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}
.topic-choice-list button small { color: var(--purpose-copy-faint); font-size: 7px; }
.topic-choice-list button.active {
  border-color: color-mix(in srgb, var(--purpose-sky) 44%, transparent);
  background: color-mix(in srgb, var(--purpose-sky) 9%, transparent);
  color: var(--purpose-sky);
}
.topic-choice-list.compact { grid-template-columns: 1fr 1fr; }
.topic-choice-list.compact button { justify-content: center; text-align: center; }
.topic-choice-list > p { padding: 12px; color: var(--purpose-copy-faint); font-size: 9px; line-height: 1.45; }
.topic-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px 13px;
  padding: 10px 12px;
  border: 1px solid var(--purpose-line);
  border-radius: 10px;
}
.topic-selected > strong { flex: 0 0 auto; color: var(--purpose-copy-soft); font-size: 8px; text-transform: uppercase; }
.topic-selected > div { display: flex; flex-wrap: wrap; gap: 5px; }
.topic-selected button { min-height: 29px; padding: 0 8px; border-radius: 999px; color: var(--purpose-lavender); }
.topic-selected > div > span { color: var(--purpose-copy-faint); font-size: 8px; }

.realm-detail-dialog,
.work-detail-dialog { grid-template-rows: auto minmax(0, 1fr) auto; }
.realm-detail-landscape,
.work-detail-dialog > .throughline-chain,
.work-detail-dialog > .work-detail-columns,
.work-detail-dialog > .prototype-safety,
.work-detail-dialog > .board-record,
.realm-detail-grid,
.realm-detail-boundaries { grid-row: 2; }
.realm-detail-dialog { overflow-y: auto; }
.realm-detail-dialog > header,
.realm-detail-dialog > footer { grid-column: 1; }
.realm-detail-landscape {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: 22px;
  padding: 20px 22px;
}
.realm-detail-art {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--purpose-gold) 25%, transparent);
  border-radius: var(--purpose-radius-lg);
  background: radial-gradient(circle, color-mix(in srgb, var(--purpose-gold) 16%, transparent), transparent 47%), var(--purpose-field);
}
.realm-detail-art::before,
.realm-detail-art i,
.realm-detail-art b { content: ''; position: absolute; border: 1px solid color-mix(in srgb, var(--purpose-gold) 42%, transparent); border-radius: 50%; }
.realm-detail-art::before { width: 176px; height: 176px; }
.realm-detail-art i { width: 122px; height: 122px; border-style: dashed; transform: rotate(18deg); }
.realm-detail-art b { width: 210px; height: 76px; transform: rotate(-27deg); }
.realm-detail-art span { position: relative; z-index: 1; color: var(--purpose-gold); font: 400 52px var(--font-display, Georgia, serif); text-shadow: 0 0 28px rgba(226, 171, 45, .4); }
.realm-detail-story { align-self: center; }
.realm-detail-story h2 { margin: 7px 0 10px; font: 400 clamp(28px, 3.2vw, 43px) / 1.06 var(--font-display, Georgia, serif); }
.realm-detail-story > p { margin: 0; color: var(--purpose-copy); font-size: 11px; line-height: 1.6; }
.realm-detail-story aside { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--purpose-mint); background: color-mix(in srgb, var(--purpose-mint) 5%, transparent); }
.realm-detail-story aside strong { color: var(--purpose-mint); font-size: 8px; text-transform: uppercase; }
.realm-detail-story aside p { margin: 5px 0 0; color: var(--purpose-copy-soft); font-size: 9px; line-height: 1.5; }
.realm-detail-grid,
.realm-detail-boundaries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 22px 18px;
}
.realm-detail-grid > section,
.realm-detail-boundaries article,
.work-detail-columns > section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--purpose-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--purpose-surface) 34%, transparent);
}
.realm-detail-grid dl { margin: 10px 0 0; display: grid; gap: 8px; }
.realm-detail-grid dl div { min-width: 0; }
.realm-detail-grid dt { color: var(--purpose-copy-faint); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.realm-detail-grid dd { margin: 3px 0 0; color: var(--purpose-copy); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.realm-detail-boundaries article:nth-child(1) { border-top-color: color-mix(in srgb, var(--purpose-mint) 52%, transparent); }
.realm-detail-boundaries article:nth-child(2) { border-top-color: color-mix(in srgb, var(--purpose-gold) 52%, transparent); }
.realm-detail-boundaries article:nth-child(3) { border-top-color: color-mix(in srgb, var(--purpose-lavender) 52%, transparent); }
.realm-detail-boundaries p { margin: 6px 0 0; color: var(--purpose-copy-soft); font-size: 9px; line-height: 1.48; }

.work-detail-dialog { overflow-y: auto; }
.work-detail-dialog > .throughline-chain,
.work-detail-dialog > .work-detail-columns,
.work-detail-dialog > .prototype-safety,
.work-detail-dialog > .board-record { grid-row: auto; }
.throughline-chain {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  padding: 19px 21px 13px;
}
.throughline-chain article {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--purpose-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--purpose-surface) 38%, transparent);
}
.throughline-chain article strong { font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.throughline-chain > i { align-self: center; color: var(--purpose-gold); font-style: normal; }
.work-detail-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 21px 13px; }
.work-detail-columns h2 { margin: 7px 0; font: 400 21px / 1.1 var(--font-display, Georgia, serif); }
.work-detail-columns p { margin: 0; color: var(--purpose-copy); font-size: 9px; line-height: 1.5; }
.work-detail-columns small { display: block; margin-top: 10px; color: var(--purpose-copy-faint); font-size: 7px; line-height: 1.45; }
.prototype-safety,
.board-record { margin: 0 21px 16px; padding: 11px 13px; border-left: 3px solid var(--purpose-gold); background: color-mix(in srgb, var(--purpose-gold) 6%, transparent); color: var(--purpose-copy-soft); font-size: 8px; line-height: 1.5; }
.board-record { border-left-color: var(--purpose-lavender); background: color-mix(in srgb, var(--purpose-lavender) 5%, transparent); }

/* --- V0.09 About and Builder Notes ----------------------------------------- */
.about-page > header,
.builder-notes > header {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 28px;
}
.about-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 18%, rgba(67, 213, 177, .085), transparent 24%),
    radial-gradient(circle at 78% 32%, rgba(168, 118, 255, .11), transparent 29%),
    linear-gradient(115deg, transparent 28%, rgba(226, 171, 45, .025) 50%, transparent 72%);
}
.about-story-grid {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.about-story-grid section {
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: clamp(19px, 2.5vw, 30px);
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--purpose-raised) 72%, transparent), color-mix(in srgb, var(--purpose-bg) 86%, transparent));
  box-shadow: var(--purpose-shadow);
}
.about-story-grid h2,
.about-prototype h2,
.about-notes h2 { margin: 8px 0; font: 400 clamp(24px, 2.3vw, 33px) / 1.06 var(--font-display, Georgia, serif); }
.about-story-grid p,
.about-prototype p,
.about-notes p { margin: 0; color: var(--purpose-copy); font-size: 11px; line-height: 1.6; }
.about-story-grid a { margin-top: auto; align-self: start; }
.about-prototype,
.about-notes {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr);
  gap: 32px;
  align-items: center;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-raised) 54%, transparent);
}
.about-prototype { border-left: 3px solid var(--purpose-gold); }
.about-notes { grid-template-columns: 1fr auto; border-left: 3px solid var(--purpose-sky); }
.about-notes a { white-space: nowrap; }

.builder-notes { background: linear-gradient(180deg, #0a0611, #110a1b); }
.builder-notes > nav {
  position: sticky;
  top: 0;
  z-index: 8;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 18px;
  display: flex;
  gap: 5px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--purpose-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--purpose-bg) 91%, transparent);
  box-shadow: var(--purpose-shadow);
  backdrop-filter: blur(20px);
}
.builder-notes > nav a { flex: 0 0 auto; min-height: 34px; padding: 0 11px; }
.builder-notes > section {
  position: relative;
  z-index: 1;
  width: min(1020px, calc(100% - 40px));
  margin: 0 auto 14px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--purpose-line);
  border-radius: var(--purpose-radius-lg);
  background: color-mix(in srgb, var(--purpose-raised) 54%, transparent);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .18);
}
.builder-notes > section h2 { margin: 7px 0 9px; font: 400 clamp(26px, 3vw, 38px) / 1.05 var(--font-display, Georgia, serif); }
.builder-notes > section > p { color: var(--purpose-copy); font-size: 11px; line-height: 1.65; }
.builder-notes code {
  display: block;
  margin: 16px 0 0;
  padding: 13px 15px;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--purpose-sky) 19%, transparent);
  border-radius: 9px;
  background: rgba(4, 9, 15, .72);
  color: var(--purpose-sky);
  font: 9px / 1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.builder-layer-row,
.action-boundary-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.builder-layer-row b,
.action-boundary-line b { padding: 7px 10px; border: 1px solid var(--purpose-line); border-radius: 999px; color: var(--purpose-copy-soft); font-size: 8px; }
.action-boundary-line i { color: var(--purpose-gold); font-style: normal; }
.event-example { margin-top: 15px; padding: 14px; border-left: 3px solid var(--purpose-sky); background: color-mix(in srgb, var(--purpose-sky) 5%, transparent); }
.event-example strong { color: var(--purpose-sky); font-size: 9px; }
.event-example p { margin: 6px 0 0; color: var(--purpose-copy-soft); font-size: 9px; line-height: 1.55; }
.notification-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
.notification-matrix article { padding: 13px; border: 1px solid var(--purpose-line); border-radius: 9px; background: color-mix(in srgb, var(--purpose-field) 65%, transparent); }
.notification-matrix strong { color: var(--purpose-cream); font-size: 9px; }
.notification-matrix p { margin: 6px 0 0; color: var(--purpose-copy-soft); font-size: 8px; line-height: 1.5; }
.builder-notes ol { margin: 14px 0 18px; padding-left: 22px; color: var(--purpose-copy); font-size: 10px; line-height: 1.65; }
#about-overview,
#source-selector,
#field-controls,
#purpose-throughline,
#focus-layer,
#near-layer,
#active-horizon,
#context-field,
#far-horizon,
#realm-filters,
#realm-library,
#receiver-field-model,
#five-layers,
#event-model,
#notifications,
#action-boundary,
#prototype-boundary,
#open-decisions { scroll-margin-top: 84px; }

/* --- V0.09 persistent Ki ---------------------------------------------------- */
.universal-ki {
  position: absolute;
  z-index: 180;
  left: 50%;
  right: auto;
  bottom: 16px;
  width: min(960px, calc(100% - 48px));
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--purpose-sky) 27%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--purpose-bg) 92%, transparent);
  box-shadow: 0 20px 64px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(22px) saturate(1.08);
  transform: translateX(-50%);
}
.universal-ki .ki-word-circle {
  width: 44px;
  height: 44px;
  color: var(--purpose-gold);
  font-family: 'Goudy Heavyface', 'Goudy Old Style', Georgia, serif;
}
.universal-ki > label { min-width: 0; }
.universal-ki > label > span { color: var(--purpose-sky); }
.universal-ki > label input { min-height: 30px; font-size: 11px; }
.ki-plus-wrap { position: relative; display: grid; place-items: center; }
.ki-plus-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 29%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--purpose-lavender) 8%, transparent);
  color: var(--purpose-lavender);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}
.ki-plus-button[aria-expanded='true'] { border-color: var(--purpose-gold); color: var(--purpose-gold); transform: rotate(45deg); }
.ki-plus-menu {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: calc(100% + 18px);
  width: min(300px, calc(100vw - var(--rail-width) - 32px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--purpose-lavender) 32%, transparent);
  border-radius: 13px;
  background: rgba(14, 8, 24, .98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .6);
}
.ki-plus-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--purpose-line); }
.ki-plus-menu > header strong { color: var(--purpose-gold); font: 400 17px var(--font-display, Georgia, serif); }
.ki-plus-menu > header button { width: 32px; min-width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.ki-plus-menu > button[role='menuitem'] {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid var(--purpose-line);
  border-radius: 0;
  background: transparent;
  color: var(--purpose-copy);
  text-align: left;
}
.ki-plus-menu > button[role='menuitem']:hover,
.ki-plus-menu > button[role='menuitem']:focus-visible { background: color-mix(in srgb, var(--purpose-sky) 8%, transparent); color: var(--purpose-cream); }
.ki-plus-menu > small { display: block; padding: 10px 12px; color: var(--purpose-copy-faint); font-size: 7px; line-height: 1.45; }
.universal-ki .receiver-v2-voice-actions { min-width: 0; }
.universal-ki .receiver-v2-voice-actions button { min-height: 38px; }
.universal-ki .universal-preview { border-color: color-mix(in srgb, var(--purpose-gold) 40%, transparent) !important; color: var(--purpose-gold) !important; }
.universal-ki .ki-action-review {
  right: 0;
  bottom: calc(100% + 14px);
  width: min(650px, calc(100vw - var(--rail-width) - 48px));
  max-height: min(640px, calc(100dvh - var(--title-height) - 116px));
}

/* Detail dialogs need one scroll surface because their content has several peers. */
.realm-detail-dialog,
.work-detail-dialog { display: block; overflow-y: auto; }
.realm-detail-dialog > header,
.work-detail-dialog > header { top: 0; }
.realm-detail-dialog > footer,
.work-detail-dialog > footer { bottom: 0; }

/* On a wide canvas, the controls and Purpose share the first working plane.
   This keeps the immediate work visible without weakening either explanation. */
.field-opening-plane { display: block; }
@media (min-width: 1240px) {
  .field-opening-plane {
    position: relative;
    z-index: 2;
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 12px;
    align-items: stretch;
  }
  .field-opening-plane > .purpose-field-controls {
    width: auto;
    margin: 0 0 16px;
  }
  .field-opening-plane > .purpose-throughline {
    width: auto;
    margin: 0 0 16px;
    display: grid;
    align-content: center;
  }
  .purposeful-field-header {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 24px;
    margin-bottom: 14px;
  }
  .purposeful-field-header h1 { font-size: clamp(44px, 3.5vw, 52px); }
  .source-access-note { margin-bottom: 12px; }
  .purpose-throughline h2 { font-size: clamp(23px, 2.35vw, 34px); }
  .field-provenance { margin-bottom: 0; }
  .five-layer-field { margin-top: 12px; }
}

/* --- V0.09 responsive composition ----------------------------------------- */
@media (max-width: 1380px) {
  .titlebar { grid-template-columns: minmax(590px, 1fr) auto; }
  .title-identity { display: none; }
  .title-left { gap: 10px; }
  .release-stamp { max-width: 185px; }
  .realm-library { grid-template-columns: repeat(2, minmax(290px, 1fr)); }
  .field-filter-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
}

@media (max-width: 1120px) {
  .titlebar { grid-template-columns: minmax(0, 1fr) auto; }
  .window-controls span { display: none; }
  .release-stamp { max-width: 140px; }
  .source-switcher select { width: 156px; }
  .purposeful-field-header { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 24px; }
  .field-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .field-view-switch { grid-column: span 2; }
  .field-layer-context .purpose-work-card { grid-column: span 4; }
  .notification-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .throughline-chain { grid-template-columns: 1fr; }
  .throughline-chain > i { justify-self: center; transform: rotate(-90deg); }
}

@media (max-width: 900px) {
  .realm-receiver,
  .purposeful-field,
  .about-page,
  .builder-notes { scroll-behavior: auto; }
  .purposeful-field-header { grid-template-columns: 1fr; align-items: start; }
  .purposeful-field-header aside { max-width: 600px; }
  .field-filter-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .field-view-switch { grid-column: auto; }
  .source-access-note,
  .field-provenance { align-items: start; flex-direction: column; gap: 5px; }
  .five-layer-field { border-radius: var(--purpose-radius-lg); }
  .field-connection-lines { display: none; }
  .field-layer-items,
  .far-cluster-items,
  .field-layer-far .field-layer-items { grid-template-columns: 1fr; }
  .field-layer .purpose-work-card:nth-child(n),
  .field-layer-context .purpose-work-card { grid-column: 1 / -1; opacity: 1; }
  .field-layer-context .purpose-work-meta span { display: inline-block; }
  .field-layer-context .purpose-work-card h3 { font-size: 22px; }
  .about-story-grid { grid-template-columns: 1fr; }
  .about-story-grid section { min-height: 0; }
  .about-prototype,
  .about-notes { grid-template-columns: 1fr; gap: 14px; }
  .about-notes a { justify-self: start; }
  .realm-detail-landscape { grid-template-columns: 1fr; }
  .realm-detail-art { min-height: 190px; }
  .realm-detail-grid,
  .realm-detail-boundaries,
  .work-detail-columns { grid-template-columns: 1fr; }
  .topic-columns { grid-template-columns: 1fr; overflow: visible; }
  .topic-columns > section { min-height: 230px; }
  .topic-dialog { overflow-y: auto; }
  .topic-choice-list { max-height: 260px; }
}

@media (max-width: 760px) {
  .title-left { gap: 6px; }
  .release-stamp { display: none; }
  .source-switcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .source-switcher select { width: 146px; }
  .source-switcher small { left: 0; max-width: min(280px, calc(100vw - 82px)); }
  .realm-receiver,
  .purposeful-field,
  .about-page,
  .builder-notes { padding-bottom: 156px; }
  .realm-atmosphere,
  .purposeful-field-atmosphere,
  .about-atmosphere { left: var(--rail-width); }
  .realm-receiver-header { padding: 26px 14px 18px; gap: 12px; }
  .realm-receiver-header h1 { font-size: 39px; }
  .realm-filter-shell,
  .purpose-field-controls { width: calc(100% - 24px); }
  .realm-search-row { grid-template-columns: 1fr; }
  .realm-filter-title { align-items: start; flex-direction: column; gap: 8px; }
  .realm-filter-title p { text-align: left; }
  .realm-sort-row { align-items: stretch; flex-direction: column; }
  .realm-sort-row label,
  .realm-sort-row select,
  .realm-sort-row > button { width: 100%; }
  .realm-library { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .realm-library-card { grid-template-columns: 96px minmax(0, 1fr); }
  .realm-library-card > footer { grid-template-columns: 1fr 1fr 1fr; }
  .realm-join-boundary { width: calc(100% - 24px); }
  .purposeful-field-header,
  .source-access-note,
  .purpose-field-controls,
  .purpose-throughline,
  .field-provenance,
  .five-layer-field,
  .accessibility-equivalent,
  .about-page > header,
  .about-story-grid,
  .about-prototype,
  .about-notes,
  .builder-notes > header,
  .builder-notes > nav,
  .builder-notes > section { width: calc(100% - 24px); }
  .purposeful-field-header { margin-top: 25px; }
  .field-filter-grid { grid-template-columns: 1fr; }
  .field-view-switch { grid-column: auto; }
  .five-layer-field { padding-inline: 12px; }
  .purpose-work-card > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .purpose-work-card > footer .primary { grid-column: 1 / -1; }
  .notification-matrix { grid-template-columns: 1fr; }
  .purposeful-dialog-backdrop { padding: 8px; }
  .purposeful-dialog { width: 100%; max-height: calc(100dvh - var(--title-height) - 16px); border-radius: 13px; }
  .purposeful-dialog > header { padding: 16px 14px 13px; }
  .purposeful-dialog > footer { flex-wrap: wrap; padding: 11px; }
  .purposeful-dialog > footer > span { width: 100%; margin-right: 0; }
  .topic-dialog > .topic-search { margin-inline: 11px; }
  .topic-columns { padding-inline: 11px; }
  .topic-selected { margin-inline: 11px; align-items: start; flex-direction: column; }
  .realm-detail-landscape { padding: 14px; }
  .realm-detail-grid,
  .realm-detail-boundaries { padding-inline: 14px; }
  .work-detail-columns { padding-inline: 14px; }
  .throughline-chain { padding-inline: 14px; }
  .prototype-safety,
  .board-record { margin-inline: 14px; }
  .universal-ki {
    bottom: 10px;
    width: calc(100% - 20px);
    min-height: 112px;
    grid-template-columns: 38px 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 8px 10px;
  }
  .universal-ki .ki-word-circle { width: 40px; height: 40px; }
  .universal-ki .receiver-v2-voice-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .universal-ki .receiver-v2-voice-actions button,
  .universal-ki .receiver-v2-voice-actions .receiver-v2-preview { min-width: 0; }
  .universal-ki .ki-action-review { right: 0; bottom: calc(100% + 8px); width: 100%; max-height: calc(100dvh - var(--title-height) - 142px); }
}

@media (max-width: 540px) {
  .window-controls { display: none; }
  .titlebar { padding-inline: 6px; }
  .title-state button { padding-inline: 7px; font-size: 7px; }
  .reset-to-default { padding-inline: 7px; font-size: 7px; }
  .source-switcher select { width: min(145px, 38vw); font-size: 8px; }
  .realm-library-card { min-height: 0; grid-template-columns: 1fr; }
  .realm-identity { min-height: 142px; border-right: 0; border-bottom: 1px solid var(--purpose-line); }
  .realm-library-card > footer { grid-template-columns: 1fr; }
  .realm-filter-buttons button { flex: 1 1 calc(50% - 6px); }
  .realm-filter-buttons .topics-trigger { margin-left: 0; }
  .purpose-throughline > div { flex-direction: column; }
  .purpose-throughline i { transform: rotate(90deg); }
  .field-layer > header { align-items: start; }
  .about-page > header h1,
  .builder-notes > header h1 { font-size: 38px; }
  .topic-choice-list.compact { grid-template-columns: 1fr; }
  .purposeful-dialog > footer button { flex: 1 1 calc(50% - 8px); }
  .purposeful-dialog > footer .primary { min-width: 0; }
  .universal-ki { grid-template-columns: 34px 38px minmax(0, 1fr); }
  .universal-ki .ki-word-circle { width: 36px; height: 36px; font-size: 16px; }
  .ki-plus-button { width: 34px; height: 34px; font-size: 21px; }
  .universal-ki .receiver-v2-voice-actions button { padding-inline: 5px; font-size: 7px; }
  .universal-ki .interface-icon { width: 15px; height: 15px; }
  .universal-ki .ki-action-review { inset: auto 0 calc(100% + 8px); max-height: calc(100dvh - var(--title-height) - 142px); }
}

@media (max-width: 410px) {
  .source-switcher select { width: 128px; }
  .reset-to-default { max-width: 58px; white-space: normal; line-height: 1.05; }
  .title-state button { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .realm-receiver-header h1,
  .purposeful-field-header h1 { font-size: 35px; }
  .realm-receiver-header p,
  .purposeful-field-header > div > p { font-size: 12px; }
  .realm-library-card > footer { grid-template-columns: 1fr; }
  .purposeful-dialog > header h1 { font-size: 27px; }
  .universal-ki > label input { font-size: 10px; }
  .universal-ki .receiver-v2-voice-actions button > span:last-child { display: none; }
  .universal-ki .receiver-v2-voice-actions .receiver-v2-preview { font-size: 7px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .universal-ki { bottom: 8px; min-height: 58px; padding-block: 6px; }
  .universal-ki .ki-word-circle { width: 39px; height: 39px; }
  .realm-receiver,
  .purposeful-field,
  .about-page,
  .builder-notes { padding-bottom: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-receiver,
  .purposeful-field,
  .about-page,
  .builder-notes { scroll-behavior: auto; }
  .realm-library-card,
  .purpose-work-card,
  .ki-plus-button,
  .realm-receiver button,
  .purposeful-field button,
  .purposeful-dialog button,
  .rail-action,
  .vault-entry,
  .avatar-entry,
  .rail-tooltip,
  .source-switcher small { transition: none !important; }
  .realm-library-card:hover,
  .purpose-work-card:hover,
  .rail-action:hover,
  .vault-entry:hover,
  .avatar-entry:hover { transform: none; }
}

@media (forced-colors: active) {
  .field-icon-mask,
  .rail-role-icon,
  .interface-icon { background: ButtonText; }
  .realm-library-card,
  .purpose-work-card,
  .purposeful-dialog,
  .purpose-field-controls,
  .realm-filter-shell { border-color: CanvasText; }
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible { outline-color: Highlight; }
}