:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  --ink: #17201d;
  --paper: #f4f0df;
  --signal: #d84c3f;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #9ed5d1;
}

body {
  color: var(--ink);
  overscroll-behavior: none;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  isolation: isolate;
}

#city {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

.identity,
.clock,
.construction,
.room-label {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 24%);
}

.identity {
  top: max(28px, env(safe-area-inset-top));
  left: max(30px, env(safe-area-inset-left));
}

.identity p,
.identity h1,
.identity span,
.clock span,
.construction,
.room-label {
  margin: 0;
}

.identity p,
.clock span,
.identity span,
.construction {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 750;
}

.identity p {
  margin-bottom: 4px;
  color: var(--signal);
}

.identity h1 {
  font-size: 42px;
  line-height: 0.95;
  font-weight: 900;
}

.identity span {
  display: block;
  margin-top: 9px;
  opacity: 0.72;
}

.clock {
  top: max(30px, env(safe-area-inset-top));
  right: max(30px, env(safe-area-inset-right));
  text-align: right;
}

.clock time {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
}

.clock span {
  display: block;
  margin-top: 5px;
  opacity: 0.66;
}

.construction {
  right: max(30px, env(safe-area-inset-right));
  bottom: max(25px, env(safe-area-inset-bottom));
  left: max(30px, env(safe-area-inset-left));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  color: var(--paper);
  text-shadow: 0 1px 2px rgb(0 0 0 / 72%);
}

.event-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

#event {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-mark {
  width: 7px;
  height: 7px;
  margin-right: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #68716d;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 28%);
}

.live-mark.connected {
  background: #26a06c;
}

.next-build {
  width: min(280px, 34vw);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.track {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: rgb(244 240 223 / 28%);
}

.track span {
  display: block;
  width: 0;
  height: 100%;
  background: currentColor;
  transition: width 800ms ease;
}

.room-label {
  left: 0;
  top: 0;
  max-width: 220px;
  padding: 5px 7px;
  color: var(--paper);
  background: rgb(23 32 29 / 88%);
  border-left: 2px solid var(--signal);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 180ms ease;
}

.room-label.visible {
  opacity: 1;
}

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

.tableau .identity,
.tableau .clock,
.tableau .construction,
.tableau .room-label,
.tableau .sr-only {
  display: none;
}

.district-nav {
  position: absolute;
  z-index: 3;
  top: 130px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 495px;
  max-width: calc(100% - 40px);
  color: var(--ink);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  flex: 0 0 34px;
  padding: 7px;
  border: 0;
  border-radius: 3px;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
}

.icon-button img { width: 18px; height: 18px; }
.icon-button:hover, .icon-button[aria-pressed="true"] { background: #f5d36b; }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.icon-button:focus-visible, #district-select:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

#district-select {
  min-width: 0;
  flex: 1;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  line-height: 1.3;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#district-select option { color: #17201d; background: #f3f5ee; }
.tableau .district-nav { display: none; }

.inspector[hidden] { display: none; }
.inspector { position: absolute; z-index: 5; top: 126px; right: 24px; bottom: 82px; width: 372px; max-width: calc(100% - 32px); display: flex; flex-direction: column; color: #263c36; background: #f4f7f3; border: 1px solid #c3d1c9; box-shadow: 0 8px 30px rgb(20 36 33 / 18%); border-radius: 6px; }
.inspector-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px 7px 18px; border-bottom: 1px solid #d4ddd6; font-size: 11px; font-weight: 800; }
.inspector-bar { gap: 8px; }
#inspector-caption { flex: 1; }
#inspector-back[hidden] { display: none; }
.inspector-body { padding: 16px 18px 22px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.inspector h2 { margin: 5px 0 7px; font-size: 23px; line-height: 1.15; overflow-wrap: anywhere; }
.inspector h2[tabindex="-1"]:focus { outline: none; }
.inspector h3 { margin: 22px 0 9px; font-size: 15px; }
.week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; padding: 0; margin: 10px 0; list-style: none; }
.week-day { min-width: 0; display: grid; gap: 5px; padding: 7px 0; text-align: center; background: #e1ebe4; border-top: 3px solid #779f85; }
.week-day.rest-day { background: #f3e5dc; border-color: #c67e5d; }
.week-day.today { outline: 2px solid #334b43; outline-offset: -2px; }
.week-day span { font-size: 10px; }
.week-day strong { font-size: 14px; }
.week-day small { font-size: 9px; }
.inspector .week-status, .inspector .week-choice { margin: 8px 0; font-size: 12px; }
.inspector .week-pattern { margin: 8px 0; font-size: 11px; color: #64766c; }
.inventory-stock { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.inventory-stock strong { font-size: 20px; }
.inventory-stock span { font-size: 12px; color: #64766c; }
.inventory-meter { display: block; width: 100%; height: 14px; accent-color: #267d78; }
.inspector .inventory-since { color: #64766c; font-size: 11px; }
.inspector .daytime-reason, .inspector .daytime-time { color: #64766c; font-size: 12px; }
.daytime-history .text-action { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; }
.inspector p { font-size: 14px; line-height: 1.5; }
.inspector .inspector-eyebrow { margin: 0; font-size: 11px; font-weight: 750; text-transform: uppercase; color: #597266; }
.inspector-address { margin: 0 0 16px; color: #587065; }
.building-select { width: 100%; height: 36px; margin-bottom: 18px; padding: 0 8px; font: 600 13px system-ui; background: #fff; color: #263c36; border: 1px solid #bbcdc2; border-radius: 3px; }
.facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px 12px; margin: 13px 0 18px; font-size: 13px; line-height: 1.4; }
.facts dt { color: #597065; } .facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.floorplan { display: grid; gap: 3px; margin: 18px 0 12px; border-bottom: 5px solid #879e91; padding-bottom: 3px; }
.floor-row { display: grid; grid-template-columns: 27px repeat(4, minmax(0, 1fr)); gap: 3px; height: 38px; }
.floor-number { align-self: center; font-size: 10px; font-weight: 800; color: #597065; }
.room-cell { position: relative; padding: 0; border: 1px solid #cbd5cd; background: #e8eee7; cursor: pointer; min-width: 0; }
.room-cell.occupied { background: #f3dfad; border-color: #cfb679; }
.room-cell.workplace { background: #c4dfd4; border-color: #78a398; }
.room-cell.construction, .room-unbuilt { background: repeating-linear-gradient(135deg, transparent, transparent 5px, #d9ded8 5px, #d9ded8 6px); }
.room-unbuilt { opacity: .4; border: 1px dashed #c2ccc4; }
.room-cell:hover, .room-cell:focus-visible, .room-cell.selected { outline: 2px solid #cc5143; outline-offset: -2px; }
.room-door { position: absolute; right: 2px; top: 2px; font: 700 8px system-ui; color: #263c36; background: #f1f4ec; padding: 1px 3px; }
.room-interior { display: block; position: absolute; inset: 0; overflow: hidden; }
.room-sprite { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-cell.available .room-sprite { opacity: 0.55; }
.room-cell.common { border-color: #4a897c; }
.room-cell.fitting { border-color: #b9883f; }
.room-cell.fitting::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgb(181 137 67 / 22%) 9px, rgb(181 137 67 / 22%) 11px); pointer-events: none; }
.mind-section { border-bottom: 1px solid #c5d2c9; padding-bottom: 16px; margin-bottom: 18px; }
.mind-section h3:first-child { margin-top: 16px; }
.resident-nature { margin-bottom: 3px; font-weight: 650; }
.resident-tastes { color: #5c7068; margin: 0 0 15px; }
.need-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 12px; margin: 7px 0; }
.need-meter { width: 100%; height: 10px; accent-color: #568e7b; }
.need-meter::-webkit-meter-bar { background: #dfe6e0; border: 0; border-radius: 0; }
.need-meter::-webkit-meter-optimum-value { background: #568e7b; }
.need-meter.quiet::-webkit-meter-optimum-value { background: #ae7682; }
.need-meter.discovery::-webkit-meter-optimum-value { background: #b79c4d; }
.need-meter.fatigue::-webkit-meter-optimum-value { background: #a26358; }
.evening-choice { border-left: 3px solid #548675; padding: 2px 0 2px 12px; }
.evening-choice strong { font-size: 15px; }
.evening-choice p { margin: 7px 0; }
.evening-choice small, .memory-since { color: #63796e; }
.evening-choice .text-action { display: block; }
.familiar-people { display: grid; }
.team-section:empty, .everyday-section:empty { display: none; }
.team-section, .everyday-section { border-bottom: 1px solid #c5d2c9; padding-bottom: 16px; margin-bottom: 18px; }
.everyday-people { display: grid; }
.everyday-people .text-action { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; }
.everyday-people .portrait { width: 38px; height: 38px; }
.everyday-people strong, .everyday-people small { display: block; overflow-wrap: anywhere; }
.everyday-people small { color: #65776b; font-size: 11px; font-weight: 400; margin-top: 3px; }
.everyday-people .present .portrait { border-left: 3px solid #3b8b7d; }
.inspector .team-summary, .inspector .team-address, .inspector .everyday-since { color: #63796e; font-size: 12px; }
.everyday-context h4 { margin: 14px 0 0; font-size: 13px; }
.familiar-people strong, .familiar-people small { display: block; overflow-wrap: anywhere; }
.familiar-people small { color: #65776b; font-size: 11px; font-weight: 400; margin-top: 3px; }
.community-section { border-top: 1px solid #c5d2c9; }
.community-section:empty { display: none; }
.meeting-section:empty { display: none; }
.meeting-section { border-bottom: 1px solid #c5d2c9; padding-bottom: 14px; }
.meeting-host { font-weight: 650; }
.meeting-status { border-left: 3px solid #548675; padding-left: 10px; }
.room-focus-button { flex-shrink: 0; }
.room-navigation { position: absolute; top: 130px; left: 30px; display: flex; gap: 6px; align-items: center; max-width: calc(100% - 60px); z-index: 3; }
.room-navigation select { min-width: 0; max-width: 260px; height: 36px; border: 0; border-bottom: 1px solid #667f73; background: #dce7df; color: #263c36; font: 600 12px system-ui; }
.room-navigation a { display: grid; place-items: center; }
.room-heading { position: absolute; top: 181px; left: 30px; right: 30px; pointer-events: none; }
.room-heading h2 { margin: 0; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.room-heading p { margin: 7px 0 0; font-size: 12px; overflow-wrap: anywhere; }
#room-gathering { font-weight: 650; color: #824552; }
#room-gathering[hidden] { display: none; }
#room-circle[hidden] { display: none; }
#room-circle { color: #805865; font-size: 11px; font-weight: 700; }
.circle-section .chronicle-venue-image { margin: 20px 0 10px; }
.circle-rhythm { color: #89585f; font-weight: 700; }
.circle-section.compact { border-bottom: 1px solid #c5d2c9; padding-bottom: 12px; }
.circle-section.compact .circle-rhythm, .circle-state, .circle-origin { color: #607368; font-size: 12px; }
.circle-members .chronicle-person { grid-template-columns: 38px minmax(0, 1fr); }
.circle-session { padding: 12px 0; border-bottom: 1px solid #c5d2c9; }
.circle-session summary { cursor: pointer; font-size: 13px; font-weight: 650; line-height: 1.5; }
.circle-session summary:focus-visible { outline: 2px solid #bc5660; outline-offset: 2px; }
.making-section { margin: 18px 0; border-top: 1px solid #c5d2c9; padding-top: 14px; }
.making-overview { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; align-items: center; }
.making-picture { display: block; width: 100%; aspect-ratio: 1; }
.making-copy h3 { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.making-status, .making-work, .making-caption { font-size: 11px; color: #5b7269; line-height: 1.5; }
.making-copy p { margin: 6px 0; }
.making-caption { margin: 5px 0 12px; }
.making-contributors { border-top: 1px solid #c5d2c9; padding: 12px 0; }
.making-contributors summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.chronicle-creation { aspect-ratio: 1; object-fit: contain; }
@media (max-width: 400px) { .making-overview { grid-template-columns: 88px minmax(0,1fr); gap: 10px; } }
#event { color: inherit; text-decoration: none; }
#event[href] { pointer-events: auto; text-decoration: underline; text-underline-offset: 3px; }
.room-navigation[hidden], .room-heading[hidden], .in-room .district-nav, .in-room .construction { display: none; }
.in-room .scene { min-height: 0; }
.tableau .room-navigation, .tableau .room-heading { display: none; }
@media (max-width: 600px) {
  .room-navigation { top: 108px; left: 20px; max-width: calc(100% - 40px); }
  .room-navigation select { flex: 1; width: 170px; }
  .room-heading { top: 166px; left: 20px; right: 20px; }
  .room-heading h2 { font-size: 22px; }
}
@media (max-height: 500px) {
  .in-room .identity h1 { font-size: 23px; }
  .in-room .identity { top: 16px; }
  .room-navigation { top: 94px; }
  .room-heading { top: 16px; left: 280px; right: 135px; }
  .room-heading h2 { font-size: 18px; }
}
@media (max-height: 500px) and (max-width: 600px) {
  .in-room .identity p, .in-room .identity span { display: none; }
  .room-navigation { top: 118px; }
  .room-heading { top: 58px; left: 20px; right: 20px; }
  #room-gathering { display: none; }
}
.project-work { font-size: 12px !important; color: #5e7168; }
.room-feature { margin: 18px 0 12px; }
.room-feature-image { display: block; width: 100%; height: auto; aspect-ratio: 2; background: #dce6e0; }
.room-feature figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #c5d2c9; }
.room-feature strong { font-size: 14px; overflow-wrap: anywhere; }
.room-feature figcaption span { font-size: 11px; color: #5d7269; text-align: right; }
.room-person { position: absolute; left: 25px; bottom: 0; width: 4px; height: 9px; background: var(--coat); border-top: 3px solid #c18e65; }
.workplace .furniture { width: 30px; height: 8px; background: #b99c6b; border: 0; }
.workplace .garden .furniture { background: #639468; height: 10px; border-bottom: 3px solid #ab856b; }
.room-note { padding: 8px 10px; border-left: 2px solid #cd6953; background: #e9eee7; }
.resident-list { display: grid; }
.text-action { border: 0; border-bottom: 1px solid #c4d1c9; background: transparent; padding: 11px 0; color: #22685c; cursor: pointer; text-align: left; font: 650 13px/1.5 system-ui; }
.text-action:hover { color: #ad473d; }
.text-action:focus-visible, .building-select:focus-visible { outline: 2px solid #c45748; outline-offset: 2px; }
.resident-list .text-action { display: flex; gap: 10px; align-items: center; width: 100%; }
.resident-list strong, .resident-list small { display: block; }
.resident-list small { font-size: 12px; color: #65776b; font-weight: 400; }
.resident-swatch { width: 18px; height: 24px; flex: 0 0 18px; border-radius: 8px 8px 2px 2px; border-top: 7px solid #c49673; background: var(--coat); }
.resident-identity { display: grid; grid-template-columns: 72px minmax(0, 1fr) 36px; align-items: center; gap: 15px; }
.portrait { width: 72px; height: 72px; image-rendering: pixelated; border-radius: 3px; }
.resident-activity { padding: 10px 12px; background: #dcebe1; border-left: 3px solid #387867; font-weight: 700; }
.journey-section { border-top: 1px solid #d1dacf; margin-top: 20px; }
.journey-progress { width: 100%; height: 7px; accent-color: #438b79; }
.journey-eta { color: #637768; margin-top: 4px; }
.portal-link { position: absolute; z-index: 3; right: 30px; top: 90px; width: 32px; height: 32px; display: grid; place-items: center; background: rgb(255 255 255 / 50%); border-radius: 3px; }
.portal-link img { width: 17px; height: 17px; }
.tableau .inspector, .tableau .portal-link { display: none; }

.tableau #city {
  pointer-events: none;
  cursor: none;
}

@media (max-width: 640px) {
  .inspector { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: 61%; }
  .inspector-body { padding: 12px 14px 18px; }
  .portal-link { top: 64px; right: 20px; width: 26px; height: 26px; }
  .district-nav { gap: 3px; }
  .district-nav .icon-button { width: 29px; flex-basis: 29px; padding: 5px; }
  .district-nav { top: 105px; left: 20px; }
  .identity {
    top: max(20px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
  }

  .identity h1 {
    font-size: 30px;
  }

  .identity p,
  .identity span,
  .clock span,
  .construction {
    font-size: 10px;
  }

  .clock {
    top: max(21px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
  }

  .clock time {
    font-size: 22px;
  }

  .construction {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(20px, env(safe-area-inset-left));
    display: block;
  }

  .next-build {
    width: 100%;
    margin-top: 9px;
    text-align: left;
  }
}

@media (max-width: 360px) {
  .identity h1 { font-size: 24px; }
  .clock span { max-width: 76px; }
  .identity span { max-width: 195px; }
}

@media (max-height: 500px) and (min-width: 641px) {
  .inspector { top: 68px; bottom: 12px; width: 330px; }
  .portal-link { top: 65px; right: 20px; }
  .district-nav { top: 17px; left: auto; right: 130px; width: 330px; }
  .identity { top: 14px; left: 20px; }
  .identity h1 { font-size: 28px; }
  .identity span { margin-top: 5px; }
  .clock { top: 14px; right: 20px; }
  .clock time { font-size: 22px; }
  .construction { bottom: 12px; left: 20px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .track span,
  .room-label {
    transition: none;
  }
}

.inspector.with-chronicle { position: fixed; width: 490px; background: #f8faf8; }
.chronicle-section, .chronicle-moment { min-width: 0; }
.chronicle-section h2 { margin-top: 7px; font-size: 25px; }
.chronicle-scope { margin: 4px 0 12px; color: #596b63; }
.chronicle-filter { display: block; width: 100%; height: 40px; margin: 20px 0 7px; padding: 0 9px; border: 1px solid #b8c8c0; border-radius: 3px; color: #263c36; background: #fff; font: 600 13px system-ui; }
.chronicle-filter:focus-visible, .chronicle-entry:focus-visible { outline: 2px solid #bb4c54; outline-offset: 2px; }
.inspector .chronicle-count { margin: 0 0 23px; font-size: 11px; color: #60736a; }
.inspector .chronicle-day { margin: 23px 0 3px; padding: 0 0 9px; border-bottom: 1px solid #9eb3a7; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.chronicle-entry { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-height: 94px; padding: 12px 0; border: 0; border-bottom: 1px solid #d8e0db; color: #263c36; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.chronicle-entry:hover { background: #edf3ef; }
.chronicle-thumbnail { display: block; width: 86px; height: 64px; object-fit: cover; border-radius: 3px; }
.chronicle-landmark { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; color: #506e63; background: #dfeae5; font: 700 11px system-ui; }
.chronicle-landmark img { width: 26px; height: 26px; }
.chronicle-entry-text { min-width: 0; }
.chronicle-entry-text > * { display: block; overflow-wrap: anywhere; }
.chronicle-hour { color: #927054; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.chronicle-entry strong { margin: 3px 0 5px; font-size: 14px; line-height: 1.35; }
.chronicle-outcome { color: #536c60; font-size: 11px; line-height: 1.5; }
.chronicle-entry.gathering .chronicle-hour { color: #a44953; }
.inspector .chronicle-retention { border-top: 1px solid #d3ddd6; margin-top: 22px; padding-top: 12px; color: #627369; font-size: 11px; }
.chronicle-empty { padding: 20px 0; color: #65756b; }
.chronicle-status { border-left: 3px solid #bc5660; padding: 3px 0 3px 12px; font-weight: 650; }
.chronicle-venue { margin: 20px 0 0; }
.chronicle-venue-image { display: block; width: 100%; height: auto; aspect-ratio: 2; }
.chronicle-venue figcaption { padding: 9px 0; color: #5d7066; font-size: 11px; line-height: 1.5; }
.chronicle-person { display: grid; width: 100%; grid-template-columns: 38px minmax(0, 1fr) 50px; gap: 10px; align-items: center; }
.chronicle-person .portrait { width: 38px; height: 38px; }
.chronicle-person strong, .chronicle-person small { display: block; overflow-wrap: anywhere; }
.chronicle-person small { margin-top: 3px; color: #64776b; font-size: 11px; font-weight: 450; }
.chronicle-duration { width: 50px; height: 8px; }
.chronicle-duration::-webkit-meter-bar { border: 0; border-radius: 0; background: #e0e7e1; }
.chronicle-duration::-webkit-meter-optimum-value { background: #b75963; }
.follow-navigation { position: absolute; top: 130px; left: 30px; display: flex; gap: 6px; align-items: center; width: 360px; max-width: calc(100% - 60px); z-index: 3; }
.follow-navigation select { min-width: 0; flex: 1; height: 36px; border: 0; border-bottom: 1px solid #668477; background: #e6eee8; color: #263c36; font: 600 12px system-ui; }
.follow-heading { position: absolute; top: 182px; left: 30px; max-width: min(680px,calc(100% - 60px)); z-index: 2; pointer-events: none; }
.follow-heading h2 { margin: 0; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.follow-heading p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.follow-navigation[hidden], .follow-heading[hidden], .following .district-nav, .following .construction { display: none; }
.neighbors-view .district-nav, .neighbors-view .construction { display: none; }
.neighbors-view .scene { min-height: 0; }
#neighbors-navigation { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px 34px; }
#neighbors-navigation[hidden] { display: none; }
#neighbors-context { grid-column: 2 / 5; width: 100%; }
.neighbors-people { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.neighbors-people[hidden], .tableau .neighbors-people, .tableau #neighbors-navigation, .tableau #neighbors-heading { display: none; }
.neighbor-node { position: absolute; height: calc(var(--portrait-size) + 54px); padding: 0; border: 0; background: none; color: #263c36; text-align: center; font: inherit; cursor: pointer; pointer-events: auto; }
.neighbor-node .portrait { display: block; margin: 0 auto 0; width: var(--portrait-size); height: var(--portrait-size); border: 2px solid #93aaa0; border-radius: 3px; }
.neighbor-node.central .portrait { border-color: #bb5c68; }
.neighbor-node.together .portrait { border-color: #c0982f; }
.neighbor-node strong { display: block; height: 28px; font-size: 12px; line-height: 14px; margin-top: 1px; }
.neighbor-node strong span { display: block; }
.neighbor-node small { display: block; height: 25px; padding: 2px 0 0; font-size: 10px; line-height: 11px; color: #536e63; overflow-wrap: anywhere; }
.neighbor-node small span { display: block; }
.neighbor-node:hover .portrait, .neighbor-node:focus-visible .portrait { border-color: #ba4d60; outline: 2px solid #f2cd62; outline-offset: 2px; }
.neighbor-node:focus-visible { outline: none; }
.familiar-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.familiar-title h3 { margin: 0; }
.familiar-title h4 { margin: 0; }
.neighbor-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.neighbor-pair .text-action { padding: 0; text-align: center; }
.neighbor-pair .portrait { display: block; margin: 0 auto 8px; }
.neighbor-pair strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.neighbor-now { border-left: 3px solid #c0982f; padding-left: 10px; }
.following .scene { min-height: 0; }
.tableau .follow-navigation, .tableau .follow-heading { display: none; }
@media (max-width: 640px) {
  .follow-navigation { top: 108px; left: 20px; max-width: calc(100% - 40px); }
  .follow-heading { top: 164px; left: 20px; max-width: calc(100% - 40px); }
  .follow-heading h2 { font-size: 20px; }
}
@media (max-height: 500px) {
  .following .identity { top: 16px; }
  .neighbors-view .identity { top: 16px; }
  .neighbors-view .identity h1 { font-size: 23px; }
  .neighbors-view .identity p, .neighbors-view .identity span { display: none; }
  .following .identity h1 { font-size: 23px; }
  .following .identity p, .following .identity span { display: none; }
  .follow-navigation { top: 60px; left: 20px; max-width: calc(100% - 80px); }
  .follow-heading { top: 104px; left: 20px; max-width: calc(100% - 40px); }
  .follow-heading h2 { font-size: 18px; }
}
@media (max-height: 500px) and (min-width: 380px) {
  #neighbors-navigation { width: 560px; grid-template-columns: 34px minmax(80px,1fr) 34px 34px minmax(100px,1fr); }
  #neighbors-context { grid-column: auto; }
}
@media (max-width: 640px) {
  .inspector.with-chronicle { top: 154px; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: none; }
  .chronicle-section h2 { font-size: 23px; }
}
@media (max-height: 500px) {
  .inspector.with-chronicle { top: 8px; bottom: 8px; max-height: none; }
}

.in-house .scene { min-height: 0; }
.in-house .identity { top: 20px; }
.in-house .identity h1 { font-size: 23px; }
.in-house .identity span, .in-house .district-nav, .in-house .construction { display: none; }
.house-heading { position: absolute; top: 84px; left: 30px; right: 30px; pointer-events: none; z-index: 2; }
.house-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.house-heading p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.house-navigation { position: absolute; left: 30px; top: 164px; width: 470px; max-width: calc(100% - 60px); display: grid; grid-template-columns: 34px minmax(0,1fr) 34px 34px; gap: 6px; z-index: 3; }
.house-navigation select { width: 100%; min-width: 0; height: 36px; padding: 0 4px; border: 0; border-bottom: 1px solid #6c8981; background: #edf3f0; color: #264940; font: 600 12px system-ui; }
#house-floor { grid-column: 2 / 5; }
.house-doors { position: absolute; left: 50%; bottom: max(20px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(1160px,calc(100% - 40px)); max-height: 32%; overflow-y: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; z-index: 2; }
.house-door { grid-column: span var(--span); min-width: 0; padding: 8px 10px; border: 0; border-top: 2px solid #6f9489; border-radius: 0; background: rgb(239 245 241 / 95%); color: #264940; text-align: left; font: 12px/1.35 system-ui; cursor: pointer; }
.house-door strong, .house-door span, .house-door small { display: block; overflow-wrap: anywhere; }
.house-door strong { font-size: 13px; margin: 3px 0; }
.house-door small { font-size: 10px; color: #536e65; }
.house-door:hover, .house-door:focus-visible { border-top-color: #c75a67; background: #fff; }
.house-navigation[hidden], .house-heading[hidden], .house-doors[hidden], .tableau .house-navigation, .tableau .house-heading, .tableau .house-doors { display: none; }
@media (max-width: 600px) {
  .house-heading { top: 78px; left: 20px; right: 20px; }
  .house-heading h2 { font-size: 18px; }
  .house-navigation { left: 20px; max-width: calc(100% - 40px); }
  .house-doors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .house-door { grid-column: span var(--mobile-span); }
}
@media (max-height: 500px) {
  .in-house .identity { top: 16px; }
  .in-house .identity p { display: none; }
  .house-heading { top: 16px; left: 220px; right: 135px; }
  .house-heading h2 { font-size: 16px; }
  #house-status { display: none; }
  .house-navigation { width: calc(100% - 40px); left: 20px; max-width: none; grid-template-columns: 34px minmax(70px,1fr) minmax(130px,1fr) 34px 34px; }
  #house-back { order: 1; }
  #house-select { order: 2; }
  #house-floor { order: 3; grid-column: auto; }
  #house-profile { order: 4; }
  #house-tableau { order: 5; }
  .house-doors { top: var(--house-content-top,160px); right: 20px; bottom: 12px; left: auto; transform: none; width: 34%; max-height: none; grid-template-columns: minmax(0,1fr); align-content: start; }
  .house-door { grid-column: 1; }
}
@media (max-height: 500px) and (max-width: 600px) {
  .house-heading { top: 50px; left: 20px; right: 20px; }
}
@media (max-height: 500px) and (max-width: 379px) {
  .house-navigation { grid-template-columns: 34px minmax(0,1fr) 34px 34px; }
  #house-profile { order: 3; }
  #house-tableau { order: 4; }
  #house-floor { order: 5; grid-column: 2 / 5; }
  .house-doors { top: auto; left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 40px); max-height: 28%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .house-door { grid-column: span var(--mobile-span); }
}