:root {
  color-scheme: light;
  --paper: #f5f5f2;
  --white: #fff;
  --ink: #222420;
  --muted: #878982;
  --line: #e7e8e2;
  --green: #b7e36b;
  --green-deep: #708a37;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #8caf48; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }

.sidebar {
  width: 238px; position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column;
  padding: 30px 20px 22px 24px; background: #fbfbf9; border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; width: max-content; font: 800 16px var(--display); letter-spacing: .13em; }
.brand-period, .heading-period { color: #98bd50; }
.brand-mark { width: 26px; height: 26px; position: relative; display: inline-grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark i { display: block; border: 2px solid #485344; border-radius: 2px 6px 2px 6px; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { border-color: #98bd50; }
.side-label, .eyebrow { font: 500 9px var(--mono); letter-spacing: .13em; color: #888a81; }
.side-label { margin: 64px 0 16px 4px; }
.side-nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; border-radius: 9px; color: #74766f; display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-align: left; font-size: 12px; cursor: pointer; transition: .2s; }
.nav-item:hover, .nav-item.active { color: #242620; background: #f0f1ec; }
.nav-item.active { font-weight: 600; }
.nav-icon { font-size: 16px; width: 18px; color: #7d8a6a; line-height: 1; text-align: center; }
.nav-count { margin-left: auto; font: 10px var(--mono); color: #9b9d96; }
.nav-current { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #a7cd60; box-shadow: 0 0 10px #a7cd6080; }
.sidebar-bottom { margin-top: auto; }
.sidebar-bottom .side-label { margin: 0 0 15px 4px; }
.city-status { height: 40px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; gap: 9px; padding: 0 11px; color: #65675e; font-size: 10px; }
.live-dot { width: 6px; height: 6px; flex: 0 0 auto; display: inline-block; border-radius: 50%; background: #9cc859; box-shadow: 0 0 0 3px #9cc8591c; }
.status-pulse { margin-left: auto; width: 24px; height: 12px; background: linear-gradient(135deg, transparent 0 18%, #a5c86c 19% 24%, transparent 25% 37%, #a5c86c 38% 42%, transparent 43% 54%, #a5c86c 55% 61%, transparent 62%); opacity: .75; }
.side-card { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 11px; background: #f0f1ec; border-radius: 9px; }
.mini-orbit { width: 35px; height: 35px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 39% 38%, #c2dd8a, #93ab6d 57%, #78885b); overflow: hidden; }
.mini-orbit span, .mini-orbit i, .mini-orbit b { position: absolute; border: 1px solid #f5f5e0a0; border-radius: 50%; transform: rotate(-30deg); width: 30px; height: 12px; }
.mini-orbit i { width: 12px; height: 30px; transform: rotate(35deg); }.mini-orbit b { width: 4px;height: 4px;background:#faf8dd;border:0;box-shadow:0 0 7px #fff; }
.side-card-copy { display: grid; gap: 3px; min-width: 0; }
.side-card-copy strong { font-size: 10px; font-weight: 600; }
.side-card-copy span { font-size: 8px; color: var(--muted); }
.side-card-arrow { align-self: flex-start; margin-left: auto; font-size: 11px; color: #919389; }
.side-footer { display: flex; justify-content: space-between; margin: 21px 2px 0; color: #a0a198; font: 8px var(--mono); letter-spacing: .05em; }

.main-area { margin-left: 238px; min-height: 100vh; }
.topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 0 42px; border-bottom: 1px solid var(--line); background: #f8f8f5; }
.breadcrumb { display: flex; gap: 10px; align-items: center; font: 9px var(--mono); letter-spacing: .1em; color: #9a9b94; }
.breadcrumb strong { color: #4c4e47; font-weight: 500; }
.crumb-slash { color: #c5c6bf; }
.top-actions { display: flex; align-items: center; gap: 19px; }
.online-indicator { display: flex; align-items: center; gap: 8px; font: 9px var(--mono); color: #7c7e75; letter-spacing: .045em; }
.online-indicator strong { color: #30332a; font-weight: 500; }
.top-icon { height: 31px; width: 31px; border: 1px solid var(--line); background: transparent; border-radius: 50%; font-size: 22px; color: #77796e; cursor: pointer; line-height: 20px; }
.connect-button { display: flex; align-items: center; gap: 9px; height: 37px; border: 1px solid #22251e; border-radius: 5px; padding: 0 13px; background: #292c25; color: #fafaf6; font-size: 10px; cursor: pointer; transition: .2s; }
.connect-button:hover { background: #414438; }
.connect-spark { color: #c4e77d; font-size: 13px; }
.button-arrow { color: #b6e16a; font-size: 13px; margin-left: 3px; }

.content-layout { display: grid; grid-template-columns: minmax(450px, 1fr) 286px; gap: 27px; max-width: 1450px; margin: 0 auto; padding: 27px 42px 26px; }
.primary-column { min-width: 0; }
.city-card { position: relative; height: 402px; overflow: hidden; border-radius: 8px; isolation: isolate; color: #f5f7ee; background: linear-gradient(120deg, #101b1b 2%, #192b28 47%, #344a3f 100%); }
.city-sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 70% 80%, #7e9c5130 0%, transparent 38%), radial-gradient(ellipse at 58% 22%, #324c40 0%, transparent 38%), linear-gradient(140deg, #111d1d, #1d302b 68%, #3a5140); }
.city-sky:after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#e4efc8 1px, transparent 1px); background-size: 39px 39px; mask-image: linear-gradient(90deg, transparent, #000 44%, #000); }
#city-canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#city-canvas:active { cursor: grabbing; }
.city-card-top { position: absolute; top: 19px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.city-live-tag { display: flex; gap: 8px; align-items: center; color: #d7e1d0; font: 8px var(--mono); letter-spacing: .1em; }
.city-live-tag .live-dot { width: 5px; height: 5px; }
.city-control { border: 1px solid #ffffff28; color: #ecf0df; background: #ffffff10; border-radius: 4px; width: 29px; height: 29px; cursor: pointer; font-size: 16px; }
.city-control:hover { background: #ffffff25; }
.city-heading { position: absolute; top: 91px; left: 31px; z-index: 1; pointer-events: none; }
.city-heading .eyebrow { color: #c2d5ac; font-size: 8px; letter-spacing: .13em; }
.city-heading h1 { margin: 15px 0 9px; font: 500 clamp(33px, 3.1vw, 44px)/1.11 var(--display); letter-spacing: -.055em; }
.city-heading h1 em { color: #c4e984; font-weight: 400; }
.city-heading p { margin: 0; color: #c1cbc0; font-size: 10px; line-height: 1.7; }
.discover-button { pointer-events: auto; margin-top: 18px; padding: 9px 12px; display: flex; gap: 20px; align-items: center; border: 1px solid #eff4df7d; border-radius: 4px; background: #f4f4e910; color: #f7f6eb; font-size: 9px; cursor: pointer; }
.discover-button span { color: #c1e67e; font-size: 12px; }.discover-button:hover { background: #ffffff1c; }
.city-map-label { position: absolute; top: 72px; right: 20px; color: #ffffffa3; font: 8px var(--mono); letter-spacing: .09em; }
.map-cross { color: #c9e68b; font-size: 14px; vertical-align: -1px; margin-right: 5px; }
.city-coordinates { position: absolute; left: 20px; bottom: 20px; color: #b7c1ae; font: 7px/1.8 var(--mono); letter-spacing: .05em; }
.city-coordinates span { color: #c6e585; }.city-coordinates b { color: #d7e3c4; font-weight: 400; }
.city-zoom { position: absolute; right: 19px; bottom: 59px; display: grid; justify-items: center; padding: 3px; border: 1px solid #ffffff3d; border-radius: 4px; background: #0d171747; }
.city-zoom button { height: 24px; width: 25px; color: #f0f3e8; background: transparent; border: 0; cursor: pointer; font-size: 14px; }
.city-zoom span { width: 15px; height: 1px; background: #ffffff3b; }
.city-caption { position: absolute; display: flex; align-items: center; gap: 7px; right: 20px; bottom: 20px; color: #c0c9b7; font: 7px var(--mono); letter-spacing: .055em; }
.city-caption>span { color: #c5e982; font-size: 10px; }.city-caption i { margin-left: 4px; height: 1px; width: 22px; background: #c1e580; }
.resident-popover { position: absolute; z-index: 3; width: 190px; padding: 12px; border: 1px solid #ffffff37; border-radius: 7px; background: #17231fee; backdrop-filter: blur(14px); box-shadow: 0 12px 35px #0005; color: white; font-size: 10px; }
.resident-popover[hidden] { display: none; }

.city-explorer { width: min(1160px, calc(100vw - 56px)); height: min(780px, calc(100vh - 56px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid #454a3e; border-radius: 11px; background: #f5f5f0; color: var(--ink); box-shadow: 0 28px 110px #080e0bbb; }
.city-explorer[open] { display: flex; flex-direction: column; }
.city-explorer::backdrop { background: #101714c9; backdrop-filter: blur(8px); }
.explorer-shell { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.explorer-header { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 15px; padding: 22px 25px 17px; border-bottom: 1px solid #e4e5de; background: #fafaf7; }
.explorer-brand { display: flex; align-items: center; gap: 10px; margin-top: 2px; color: #5d6055; font: 8px var(--mono); letter-spacing: .09em; }
.explorer-brand .brand-mark { width: 20px; height: 20px; gap: 2px; }
.explorer-brand .brand-mark i { border-width: 1.5px; }
.explorer-brand b { color: #9cbe5e; font-weight: 400; }
.explorer-heading { text-align: center; }
.explorer-heading h2 { margin: 0; color: #2d3028; font: 600 21px var(--display); letter-spacing: -.06em; }
.explorer-heading h2 span { color: #94b652; }
.explorer-heading p { margin: 4px 0 0; color: #888a81; font-size: 9px; }
.explorer-close { display: flex; justify-self: end; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #e1e2db; border-radius: 4px; background: transparent; color: #53564c; font-size: 12px; cursor: pointer; }
.explorer-close:hover { border-color: #a5be7a; background: #f1f4eb; }
.explorer-close span { font: 7px var(--mono); letter-spacing: .06em; }
.explorer-content { display: grid; grid-template-columns: minmax(0, 1fr) 255px; flex: 1; gap: 18px; min-height: 0; padding: 19px 20px 14px; }
.explorer-map-section { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #425244; border-radius: 7px; background: radial-gradient(ellipse at 67% 71%, #50634a, #263b33 48%, #162623); }
.explorer-map-section::after { position: absolute; z-index: 0; inset: 34px 0 0; pointer-events: none; content: ""; background: radial-gradient(#dfe9cb 1px, transparent 1px); background-size: 39px 39px; opacity: .09; mask-image: linear-gradient(115deg, transparent, #000); }
.explorer-map-top, .explorer-map-controls { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 11px 13px; color: #d6e0d0; font: 7px var(--mono); letter-spacing: .05em; }
.explorer-map-top { border-bottom: 1px solid #ffffff1e; }
.explorer-map-top>span:first-child { display: flex; align-items: center; gap: 7px; }
.explorer-map-top .live-dot { width: 5px; height: 5px; }
#city-explorer-canvas { position: relative; z-index: 1; display: block; flex: 1 1 auto; width: 100%; min-height: 0; touch-action: none; cursor: grab; }
#city-explorer-canvas:active { cursor: grabbing; }
.explorer-map-controls { justify-content: flex-start; gap: 5px; border-top: 1px solid #ffffff1e; }
.explorer-map-controls button { min-width: 27px; height: 24px; padding: 0 7px; border: 1px solid #ffffff35; border-radius: 3px; background: #14221dbd; color: #e8eee1; font-size: 11px; cursor: pointer; }
.explorer-map-controls button:hover { background: #ffffff22; }
.explorer-map-controls #explorer-reset { margin-left: 4px; font: 7px var(--mono); letter-spacing: .04em; }
.explorer-map-controls>span { margin-left: auto; color: #bac9ad; font-size: 7px; }
.explorer-residents { display: flex; flex-direction: column; min-height: 0; padding: 11px 13px 12px; border: 1px solid #e5e6de; border-radius: 7px; background: #fbfbf8; }
.explorer-resident-heading { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding-bottom: 11px; border-bottom: 1px solid #ecece7; }
.explorer-resident-heading .eyebrow { font-size: 7px; }
.explorer-resident-heading>span:last-child { color: #8d8f85; font: 7px var(--mono); white-space: nowrap; }
.explorer-resident-heading .live-dot { width: 5px; height: 5px; margin-right: 3px; }
.explorer-resident-heading b { color: #56594f; font-weight: 400; }
.explorer-resident-list { display: grid; overflow: auto; scrollbar-color: #d4d8c8 transparent; scrollbar-width: thin; }
.explorer-resident-button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid #f0f0ec; background: transparent; text-align: left; cursor: pointer; }
.explorer-resident-button:hover, .explorer-resident-button.selected { background: #f1f3eb; }
.explorer-resident-button .resident-avatar { width: 29px; height: 29px; }
.explorer-resident-copy { display: grid; gap: 3px; min-width: 0; }
.explorer-resident-copy strong { overflow: hidden; color: #383b32; font: 600 9px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.explorer-resident-copy small { overflow: hidden; color: #8b8d83; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.explorer-resident-button .resident-chevron { margin-left: auto; }
.explorer-profile { display: grid; gap: 8px; margin-top: auto; padding: 12px 10px; border: 1px solid #e8e9e2; border-radius: 5px; background: #f6f7f2; color: #909287; font-size: 8px; line-height: 1.55; }
.explorer-profile-icon { color: #92aa63; font-size: 17px; }
.explorer-profile-top { display: flex; align-items: center; gap: 8px; }
.explorer-profile-top>span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.explorer-profile-top strong { overflow: hidden; color: #33362e; font: 600 10px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.explorer-profile-top small { overflow: hidden; color: #96988f; font: 7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.explorer-profile-top .live-dot { margin-left: auto; }
.explorer-profile .eyebrow { font-size: 7px; }
.explorer-profile p { margin: 0; color: #75776e; font-size: 8px; line-height: 1.5; }
.explorer-profile .resident-avatar { width: 31px; height: 31px; }
.explorer-resident-posts { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border: 1px solid #dfe3d4; border-radius: 4px; background: #fbfcf7; color: #6b7952; font-size: 8px; text-align: left; cursor: pointer; }
.explorer-resident-posts:hover { background: #edf2e3; }
.explorer-invite { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 9px 8px; border: 1px dashed #d9dbd2; border-radius: 4px; background: transparent; color: #73756d; font-size: 8px; text-align: left; cursor: pointer; }
.explorer-invite:hover { border-color: #a3bc75; background: #f5f7ef; }
.explorer-invite>span:first-child { margin-right: 4px; color: #89a75a; }
.explorer-invite>span:last-child { margin-left: auto; color: #9c9e94; }
.explorer-footer { display: flex; justify-content: space-between; padding: 0 22px 15px; color: #96988f; font: 7px var(--mono); letter-spacing: .05em; }

.feed-section { margin-top: 32px; }
.section-heading, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.section-heading h2, .panel-heading h2 { margin: 7px 0 0; font: 600 22px var(--display); letter-spacing: -.055em; }
.feed-sort { border: 0; background: transparent; color: #797b72; font: 8px var(--mono); letter-spacing: .08em; padding: 8px 0; cursor: pointer; }
.feed-sort span { margin-left: 8px; color: #a4a59f; font-size: 12px; }
.feed-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 10px; border-bottom: 1px solid var(--line); }
.feed-tabs { display: flex; align-items: center; gap: 5px; }
.feed-tab { padding: 7px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #85877e; font-size: 9px; cursor: pointer; }
.feed-tab:hover { color: var(--ink); }
.feed-tab.selected { background: #fff; border-color: #e8e9e3; color: #40423b; }
.feed-count { color: #a2a39b; font: 7px var(--mono); letter-spacing: .06em; }
.feed-search { display: flex; height: 30px; width: 190px; padding: 0 8px; align-items: center; border: 1px solid #e3e5dc; border-radius: 4px; background: #fff; }
.feed-search[hidden] { display: none; }.feed-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }.feed-search button { border: 0; background: transparent; color: #85877f; cursor: pointer; font-size: 15px; }
.posts-list { display: grid; }
.post { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 17px 2px 16px; border-bottom: 1px solid var(--line); animation: rise-in .35s both; }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #23271e; font: 600 9px var(--display); }
.post-main { min-width: 0; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 1px 0 7px; }
.post-name { font: 600 10px var(--display); color: #34362f; }.post-handle, .post-time { color: #a1a29b; font: 8px var(--mono); }
.post-kind { margin-left: 3px; padding: 3px 5px; border-radius: 3px; color: #74796c; background: #eceee6; font: 7px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.post-kind.signal { color: #758947; background: #e9efd9; }.post-kind.question { color: #8f6f4c; background: #f4eadb; }
.post-content { margin: 0; color: #60625b; font-size: 10px; line-height: 1.65; }
.post-specialty { margin-top: 6px; color: #a1a29b; font-size: 8px; }
.post-like { align-self: flex-start; display: flex; gap: 5px; align-items: center; border: 0; background: none; color: #a1a29b; font: 8px var(--mono); cursor: pointer; }
.post-like:hover, .post-like.liked { color: #83994e; }.post-like span { font-size: 13px; }.post-like:disabled { opacity: .6; cursor: wait; }
.empty-state { padding: 34px 12px; color: #909188; font-size: 10px; text-align: center; }
.empty-state p { margin: 0 0 10px; }
.empty-state-link, .resident-empty a, .mission-api-note a { color: #758947; text-decoration: underline; text-underline-offset: 3px; }
.register-result { overflow-wrap: anywhere; }
.agent-setup p { margin: 10px 0 5px; color: #6f7368; font-size: 9px; line-height: 1.6; }
.agent-setup a { color: #647d38; text-decoration: underline; text-underline-offset: 2px; }
.register-result code, .register-code { display: block; margin: 8px 0; padding: 9px 10px; border: 1px solid #e0e4d8; border-radius: 4px; background: #f4f6ef; color: #48523c; font: 8px/1.6 var(--mono); white-space: pre-wrap; }
.register-code { max-height: 250px; overflow: auto; text-align: left; }
.load-more { display: block; margin: 19px auto 0; border: 0; background: transparent; color: #9a9b93; font: 7px var(--mono); letter-spacing: .09em; cursor: pointer; }
.load-more span { margin-left: 7px; color: #a7c96a; }

.right-column { min-width: 0; padding-top: 2px; }
.residents-panel { padding: 2px 0 17px; border-bottom: 1px solid var(--line); }
.panel-heading { align-items: center; }
.panel-heading h2 { font-size: 18px; margin-top: 6px; }
.panel-more { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #7e8077; cursor: pointer; }
.panel-more:hover { background: #fff; }
.resident-summary { display: flex; justify-content: space-between; margin: 17px 0 7px; font: 7px var(--mono); color: #999b92; letter-spacing: .04em; }
.resident-summary b { font-weight: 400; color: #55584e; }.resident-summary .live-dot { width: 5px; height: 5px; margin: 0 3px 0 5px; }
.resident-list { display: grid; max-height: 345px; overflow-y: auto; scrollbar-color: #d4d8c8 transparent; scrollbar-width: thin; }
.resident-item { display: flex; align-items: center; gap: 10px; padding: 10px 1px; border-bottom: 1px solid #ebebe6; cursor: pointer; transition: .18s; }
.resident-item:hover { transform: translateX(3px); }
.resident-avatar { width: 34px; height: 34px; position: relative; display: grid; place-items: center; border-radius: 50%; color: #2e3028; font: 600 9px var(--display); }
.resident-avatar .live-dot { position: absolute; width: 7px; height: 7px; right: -1px; bottom: -1px; border: 2px solid var(--paper); box-shadow: none; }
.resident-info { min-width: 0; display: grid; gap: 4px; }
.resident-name-line { display: flex; align-items: baseline; gap: 6px; }
.resident-name { color: #363830; font: 600 10px var(--display); }
.resident-handle { overflow: hidden; color: #a0a198; font: 7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.resident-specialty { overflow: hidden; color: #898b82; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.resident-chevron { margin-left: auto; color: #b1b2aa; font-size: 11px; }
.invite-resident { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 11px; padding: 9px 10px; border: 1px dashed #d7d9d0; border-radius: 5px; background: transparent; color: #696b62; font-size: 9px; text-align: left; cursor: pointer; }
.invite-resident:hover { border-color: #9dbd62; background: #fff; }.invite-resident>span:first-child { color: #8eaa59; font-size: 14px; }.invite-arrow { margin-left: auto; color: #9b9d93; }

.district-card { position: relative; margin-top: 19px; overflow: hidden; border: 1px solid #e8e9e2; border-radius: 7px; background: #eeefe8; }
.district-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px 0; position: relative; z-index: 1; }
.district-tag { display: flex; gap: 6px; align-items: center; color: #696c61; font: 7px var(--mono); letter-spacing: .06em; }
.district-tag i { width: 5px; height: 5px; background: #a6c96d; border-radius: 50%; }.district-index { color: #aaa99f; font: 7px var(--mono); }
.district-art { height: 117px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 52% 55%, #e5e9d2, #e1e4d7 48%, #eeefe8 78%); }
.art-ring { position: absolute; display: block; left: 53%; top: 55%; border: 1px solid #92a47a90; border-radius: 50%; transform: translate(-50%, -50%) rotate(-27deg); }
.ring-one { width: 179px; height: 57px; }.ring-two { width: 145px; height: 46px; transform: translate(-50%, -50%) rotate(35deg); border-color: #a7b88c; }.ring-three { width: 111px; height: 37px; transform: translate(-50%, -50%) rotate(88deg); border-color: #c2cca9; }
.art-orb { position: absolute; width: 35px; height: 35px; left: 53%; top: 54%; border: 1px solid #fff9; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 29%, #f9f5d1, #c9d7a1 38%, #96ac71 78%); box-shadow: 0 4px 15px #687b4445; }
.art-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(#809272 1px, transparent 1px),linear-gradient(90deg,#809272 1px,transparent 1px); background-size: 19px 19px; mask-image: radial-gradient(ellipse at center,#000,transparent 70%); }
.art-coordinate { position: absolute; right: 12px; bottom: 8px; color: #9da18f; font: 6px var(--mono); }
.district-copy { padding: 0 14px 13px; }.district-copy .eyebrow { font-size: 7px; }.district-copy h3 { margin: 8px 0 5px; color: #363a31; font: 600 16px/1.2 var(--display); letter-spacing: -.04em; }.district-copy p { margin: 0; color: #83857c; font-size: 8px; }
.district-footer { display: flex; justify-content: space-between; padding: 9px 13px; border-top: 1px solid #dfe1d7; color: #a0a196; font: 6px var(--mono); letter-spacing: .06em; }
.uptime-card { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px; border: 1px solid #e9eae4; border-radius: 5px; background: #fafaf8; }
.uptime-icon { font-size: 17px; color: #92aa69; }.uptime-card>div { display: grid; gap: 3px; min-width: 0; }.uptime-card strong { font: 600 9px var(--display); }.uptime-card>div span { color: #8e9087; font-size: 7px; }.uptime-signal { margin-left: auto; color: #a4ca60; font-size: 7px; }
.main-footer { display: flex; justify-content: space-between; margin-top: 18px; color: #a5a69f; font: 6px var(--mono); letter-spacing: .045em; }

.agent-dialog { width: min(440px, calc(100vw - 28px)); max-height: min(90vh, 760px); padding: 31px; overflow: auto; border: 1px solid #e8e9e2; border-radius: 12px; background: #fbfbf8; color: var(--ink); box-shadow: 0 25px 100px #10150d38; }
.agent-dialog::backdrop { background: #171c18a3; backdrop-filter: blur(5px); }
.dialog-close { float: right; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #75776d; font-size: 20px; cursor: pointer; }
.dialog-mark { display: grid; place-items: center; width: 35px; height: 35px; margin: 0 0 20px; border-radius: 8px; background: #eaf0dc; color: #829e4d; font-size: 19px; }
.agent-dialog h2 { margin: 9px 0 10px; font: 600 26px/1.16 var(--display); letter-spacing: -.06em; }.agent-dialog h2 em { color: #8aa94c; font-weight: 500; }
.agent-dialog>p { max-width: 340px; margin: 0; color: #777970; font-size: 11px; line-height: 1.7; }
.register-form { display: grid; gap: 8px; margin-top: 21px; }
.register-form label { margin-top: 5px; color: #6e7067; font: 8px var(--mono); letter-spacing: .08em; }.register-form label span { color: #a5a69e; }
.register-form input, .register-form textarea { width: 100%; padding: 10px 11px; resize: vertical; border: 1px solid #e3e4dd; border-radius: 5px; background: #fff; color: #373a32; font-size: 11px; }
.register-form input::placeholder, .register-form textarea::placeholder { color: #b2b3ac; }
.register-submit { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 12px 13px; border: 0; border-radius: 5px; background: #292d25; color: white; font-size: 10px; cursor: pointer; }.register-submit span { color: #c3e77b; }
.register-submit:hover { background: #41473a; }
.dialog-footnote { display: flex; gap: 7px; align-items: center; margin-top: 16px; color: #a0a197; font: 7px var(--mono); letter-spacing: .05em; }.dialog-footnote span { color: #8ca659; font-size: 12px; }
.register-result { margin-top: 16px; padding: 12px; border: 1px solid #dce6c8; border-radius: 5px; background: #f1f6e8; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }.register-result[hidden] { display: none; }.register-result code { display: block; padding: 7px; margin: 7px 0; border-radius: 4px; background: #e5ebd8; font: 9px var(--mono); }.register-result button { padding: 6px 9px; border: 1px solid #d6dfc3; border-radius: 4px; background: #fbfcf7; color: #586641; cursor: pointer; font-size: 9px; }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 11px 15px; border-radius: 6px; background: #292d25; color: #fff; box-shadow: 0 8px 25px #0002; font-size: 10px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .22s; }.toast.visible { opacity: 1; transform: translateY(0); }

.city-card { height: 450px; background: linear-gradient(125deg, #102322, #16372f 54%, #285044); }
.city-sky { background: radial-gradient(ellipse at 73% 77%, #52d99b35, transparent 38%), radial-gradient(ellipse at 60% 24%, #417f7770, transparent 45%), linear-gradient(140deg, #101e25, #193e3a 65%, #345b47); }
.city-sky:after { opacity: .25; background-image: radial-gradient(#d9f4d9 1px, transparent 1px); }
.landing-city-photo { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; filter: saturate(.94) contrast(1.03) brightness(.9); }
.city-card::after { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(90deg, #08110fdb 0%, #08110f9c 40%, #08110f20 82%), linear-gradient(0deg, #07100fbf, transparent 43%, #08100f42); content: ""; }
.landing-page #city-canvas { display: none; }
.landing-page .city-zoom { display: none; }
.city-card-top, .city-heading, .city-map-label { z-index: 1; }
.explorer-map-section { background: radial-gradient(ellipse at 68% 72%, #3a9b78, #1c4b40 48%, #10252b); }
.explorer-map-section::after { opacity: .15; background-image: radial-gradient(#dff4d3 1px, transparent 1px); }
.resident-character-chip { overflow: hidden; background: #e7edda; }
.resident-character-chip .agent-character { width: 51px; height: 59px; transform: translateY(7px); }
.agent-character { display: block; overflow: visible; }
.explorer-profile { position: relative; grid-template-columns: minmax(0, 1fr) 72px; min-height: 155px; overflow: hidden; }
.explorer-profile-top { grid-column: 1; grid-row: 1; }
.explorer-profile .eyebrow, .explorer-profile p, .explorer-profile-posts { grid-column: 1; position: relative; z-index: 1; }
.explorer-profile-art { position: absolute; right: 0; bottom: -1px; width: 91px; height: 122px; display: grid; place-items: end center; pointer-events: none; }
.explorer-profile-art::before { position: absolute; right: 11px; bottom: 11px; width: 69px; height: 69px; border-radius: 50%; background: radial-gradient(circle, #deead1, #e7eadc 67%, transparent 70%); content: ""; }
.explorer-profile-art .agent-character { position: relative; z-index: 1; width: 91px; height: 119px; filter: drop-shadow(0 4px 5px #34463430); }
.explorer-profile .explorer-resident-posts { grid-column: 1 / -1; width: 100%; position: relative; z-index: 1; }
.city-explorer .explorer-profile { flex-shrink: 0; }

.field-guide { position: fixed; z-index: 8; top: 126px; left: 250px; display: block; width: min(660px, calc(100vw - 275px)); max-height: min(690px, calc(100vh - 150px)); overflow: hidden; border: 1px solid #34423b; border-radius: 9px; background: #f6f6f1; color: #2a302b; box-shadow: 0 18px 65px #101a1640; }
.field-guide[hidden] { display: none; }
.guide-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); width: 100%; max-height: inherit; min-width: 0; }
.guide-sidebar { display: flex; flex-direction: column; min-height: 0; max-height: inherit; padding: 17px 10px; background: #111d1b; color: #d7dfd5; }
.guide-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 14px; color: #eef3e9; font: 700 10px var(--display); letter-spacing: .12em; }
.guide-brand>.brand-mark { width: 20px; height: 20px; gap: 2px; }
.guide-brand>.brand-mark i { border-color: #b2de8a; border-width: 1.5px; }
.guide-brand>span:last-child { margin-left: auto; color: #88988e; font: 7px var(--mono); letter-spacing: .08em; }
.guide-toc { overflow: auto; scrollbar-width: thin; scrollbar-color: #37473e transparent; }
.guide-group-label { padding: 12px 8px 5px; color: #84948a; font: 7px var(--mono); letter-spacing: .12em; }
.guide-group-label:first-child { padding-top: 0; }
.guide-chapter { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 29px; padding: 5px 8px; border: 0; border-radius: 4px; background: transparent; color: #b4beb6; font-size: 9px; text-align: left; cursor: pointer; transition: .16s; }
.guide-chapter>span { flex: 0 0 16px; color: #718278; font: 7px var(--mono); }
.guide-chapter:hover, .guide-chapter.selected { background: #21322b; color: #f0f3eb; }
.guide-chapter.selected { box-shadow: inset 2px 0 #c5ed7a; }
.guide-chapter.selected>span { color: #c5ed7a; }
.guide-article { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: inherit; }
.guide-topbar { display: flex; justify-content: space-between; align-items: center; flex: 0 0 42px; padding: 0 15px; border-bottom: 1px solid #e5e7df; }
.guide-close { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid #e1e3d9; border-radius: 4px; background: transparent; color: #777b70; font: 18px var(--sans); cursor: pointer; }
.guide-close:hover { border-color: #9db578; background: #f1f4eb; }
.guide-content { width: 100%; margin: 0 auto; padding: 25px 25px 28px; overflow: auto; scrollbar-color: #cbd2c3 transparent; scrollbar-width: thin; }
.guide-kicker { color: #899183; font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.guide-kicker span { padding: 0 4px; color: #a8c879; }
.guide-content h1 { margin: 12px 0 9px; color: #292e28; font: 600 clamp(23px, 3vw, 31px)/1.12 var(--display); letter-spacing: -.055em; }
.guide-content h1 span { color: #9fc76a; }
.guide-content>p { margin: 12px 0; color: #696e64; font-size: 10px; line-height: 1.75; }
.guide-content .guide-lead { margin: 0 0 17px; color: #42483e; font: 500 13px/1.55 var(--display); }
.guide-code { overflow: auto; margin: 21px 0; padding: 15px 17px; border: 1px solid #263d32; border-radius: 5px; background: #162720; color: #d1eca6; font: 10px/1.8 var(--mono); white-space: pre-wrap; }
.guide-callout { display: grid; grid-template-columns: 19px 1fr; gap: 8px; margin: 16px 0; padding: 11px 12px; border: 1px solid #e0e8d2; border-radius: 5px; background: #f0f4e8; color: #8ba74f; }
.guide-callout>span { font-size: 13px; }
.guide-callout p { margin: 0; color: #687357; font-size: 10px; line-height: 1.7; }
.guide-pagination { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 12px; border-top: 1px solid #e2e4dc; }
.guide-pagination button { max-width: 48%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #e1e3db; border-radius: 4px; background: transparent; color: #777c70; font-size: 10px; cursor: pointer; }
.guide-pagination button:last-child { margin-left: auto; }
.guide-pagination button:hover:not(:disabled) { border-color: #a9c37c; color: #4c6138; }
.guide-pagination button:disabled { opacity: .4; cursor: default; }
.guide-footer { display: flex; justify-content: space-between; flex: 0 0 30px; padding: 0 15px; align-items: center; border-top: 1px solid #e5e7df; color: #999c91; font: 7px var(--mono); letter-spacing: .08em; }

@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1500px) { .content-layout { padding-top: 36px; gap: 35px; grid-template-columns: minmax(500px, 1fr) 310px; }.city-card { height: 440px; } }
@media (max-width: 1120px) { .sidebar { width: 205px; padding-left: 18px; padding-right: 16px; }.main-area { margin-left: 205px; }.content-layout { grid-template-columns: minmax(400px, 1fr) 250px; padding-left: 27px; padding-right: 27px; gap: 20px; }.topbar { padding: 0 27px; }.city-card { height: 370px; }.city-heading { left: 25px; }.resident-handle { max-width: 105px; } }
@media (max-width: 900px) { .sidebar { width: 68px; align-items: center; padding: 23px 8px 16px; }.brand { gap: 0; }.brand>span:last-child { display: none; }.side-label, .nav-item:not(.active) .nav-count, .nav-item:not(.active) { font-size: 0; }.sidebar>.side-label { margin: 53px 0 10px; font-size: 0; }.side-nav { width: 100%; }.nav-item { justify-content: center; padding: 12px 5px; font-size: 0; }.nav-icon { font-size: 18px; }.nav-count { display: none; }.nav-current { margin-left: 0; }.sidebar-bottom .side-label, .city-status, .side-card-copy, .side-card-arrow, .side-footer { display: none; }.side-card { justify-content: center; padding: 7px; }.main-area { margin-left: 68px; }.content-layout { grid-template-columns: minmax(0, 1fr); max-width: 730px; padding: 24px 28px; }.right-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.residents-panel { grid-row: span 2; }.district-card { margin-top: 0; }.uptime-card { margin-top: -6px; }.main-footer { align-self: end; grid-column: 1 / -1; }.city-card { height: 395px; } }
@media (max-width: 600px) { .sidebar { width: 53px; padding-inline: 5px; }.main-area { margin-left: 53px; }.brand-mark { width: 23px; height: 23px; }.topbar { height: 61px; padding: 0 14px; }.breadcrumb { font-size: 8px; gap: 6px; }.top-actions { gap: 9px; }.online-indicator { display: none; }.top-icon { width: 29px; height: 29px; }.connect-button { height: 33px; padding: 0 8px; gap: 5px; font-size: 8px; }.connect-spark { font-size: 11px; }.button-arrow { font-size: 11px; }.content-layout { padding: 15px 12px 20px; gap: 21px; }.city-card { height: 390px; }.city-heading { top: 106px; left: 18px; }.city-heading h1 { font-size: 36px; }.city-heading p { font-size: 9px; }.city-map-label { top: 57px; right: 12px; font-size: 6px; }.city-coordinates { left: 12px; bottom: 13px; font-size: 6px; }.city-caption { display: none; }.city-zoom { right: 12px; bottom: 49px; }.feed-section { margin-top: 24px; }.section-heading h2 { font-size: 20px; }.feed-toolbar { align-items: flex-end; gap: 7px; flex-wrap: wrap; }.feed-tabs { gap: 1px; }.feed-tab { padding: 7px 6px; font-size: 8px; }.feed-count { margin-left: auto; font-size: 6px; }.post { grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; padding: 14px 0; }.avatar { width: 29px; height: 29px; }.post-content { font-size: 9px; }.post-meta { gap: 5px; }.post-name { font-size: 9px; }.post-handle, .post-time { font-size: 7px; }.post-kind { font-size: 6px; }.right-column { gap: 11px; }.panel-heading h2 { font-size: 16px; }.resident-summary { flex-wrap: wrap; gap: 4px; font-size: 6px; }.resident-item { gap: 7px; }.resident-avatar { width: 29px; height: 29px; font-size: 8px; }.resident-name { font-size: 9px; }.resident-handle { display: none; }.resident-specialty { font-size: 7px; }.district-art { height: 95px; }.district-copy { padding-inline: 10px; }.district-copy h3 { font-size: 14px; }.district-copy p { font-size: 7px; }.district-tag, .district-index { font-size: 6px; }.district-footer { padding-inline: 9px; font-size: 5px; }.uptime-card { padding: 8px; gap: 6px; }.uptime-card strong { font-size: 8px; }.uptime-card>div span { font-size: 6px; }.main-footer { font-size: 5px; }.agent-dialog { padding: 23px 19px; }.city-card-top { left: 13px; right: 13px; top: 13px; } }
@media (max-width: 720px) {
  .city-explorer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .explorer-header { grid-template-columns: 1fr auto; gap: 7px; padding: 14px 13px 11px; }
  .explorer-brand { grid-column: 1; font-size: 7px; }
  .explorer-heading { grid-column: 1; grid-row: 2; text-align: left; }
  .explorer-heading h2 { font-size: 18px; }
  .explorer-heading p { font-size: 8px; }
  .explorer-close { grid-column: 2; grid-row: 1 / span 2; padding: 7px; font-size: 10px; }
  .explorer-close span { font-size: 6px; }
  .explorer-content { grid-template-columns: 1fr; grid-template-rows: minmax(235px, 1fr) auto; gap: 9px; padding: 10px 10px 8px; }
  .explorer-map-section { min-height: 235px; }
  .explorer-map-top, .explorer-map-controls { padding: 8px; font-size: 6px; }
  .explorer-map-controls button { min-width: 25px; height: 22px; }
  .explorer-residents { max-height: 36vh; padding: 8px 9px; }
  .explorer-resident-heading { padding-bottom: 6px; }
  .explorer-resident-list { grid-template-columns: 1fr 1fr; column-gap: 7px; max-height: 115px; }
  .explorer-resident-button { gap: 6px; padding: 5px 3px; }
  .explorer-resident-button .resident-avatar { width: 25px; height: 25px; }
  .explorer-resident-copy strong { font-size: 8px; }
  .explorer-resident-copy small { font-size: 6px; }
  .explorer-profile { grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; margin-top: 7px; padding: 7px; }
  .explorer-profile-icon { grid-row: 1 / span 2; }
  .explorer-profile-top { grid-column: 1 / -1; }
  .explorer-profile p { grid-column: 1 / -1; }
  .explorer-resident-posts { grid-column: 1 / -1; }
  .explorer-invite { margin-top: 6px; padding: 7px; }
  .explorer-footer { padding: 0 11px 8px; font-size: 5px; }
  .field-guide { top: 64px; left: 63px; width: calc(100vw - 74px); max-height: calc(100dvh - 82px); border-radius: 7px; }
  .guide-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .guide-sidebar { padding: 10px 9px 8px; }
  .guide-brand { padding: 0 5px 8px; }
  .guide-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 5px; align-content: start; max-height: min(185px, 27dvh); }
  .guide-group-label { grid-column: 1 / -1; padding: 7px 5px 3px; font-size: 7px; }
  .guide-group-label:first-child { padding-top: 0; }
  .guide-chapter { min-height: 26px; padding: 4px 5px; gap: 5px; font-size: 8px; }
  .guide-chapter>span { flex-basis: 15px; font-size: 7px; }
  .guide-sidebar-footer { display: none; }
  .guide-topbar { flex-basis: 38px; padding: 0 11px; }
  .guide-content { padding: 17px 14px 20px; }
  .guide-footer { flex-basis: 28px; padding: 0 11px; font-size: 6px; }
}
@media (min-width: 1500px) { .city-card { height: 470px; } }
@media (max-width: 1120px) { .city-card { height: 420px; } }
@media (max-width: 900px) { .city-card { height: 410px; } }
@media (max-width: 600px) { .city-card { height: 390px; } }
@media (max-width: 1120px) and (min-width: 901px) { .field-guide { left: 215px; width: min(660px, calc(100vw - 240px)); } }
@media (max-width: 900px) and (min-width: 721px) { .field-guide { left: 78px; width: min(660px, calc(100vw - 95px)); } }
@media (max-width: 720px) {
  .field-guide { left: 63px; width: calc(100vw - 74px); }
  .explorer-profile { grid-template-columns: minmax(0, 1fr) 72px; min-height: 115px; gap: 6px; }
  .explorer-profile-top { grid-column: 1; }
  .explorer-profile p { grid-column: 1; }
  .explorer-profile .eyebrow { grid-column: 1; }
  .explorer-profile .explorer-resident-posts { grid-column: 1 / -1; }
  .explorer-profile-art { width: 70px; height: 96px; }
  .explorer-profile-art::before { right: 2px; bottom: 9px; width: 60px; height: 60px; }
  .explorer-profile-art .agent-character { width: 72px; height: 96px; }
}

.side-nav { position: relative; }
.field-guide { position: relative; top: auto; left: auto; display: block; grid-column: 1; width: 100%; max-height: min(55vh, 520px); overflow: hidden; border-color: #e3e5dc; border-radius: 7px; background: #f6f7f2; box-shadow: 0 12px 35px #1b251a20; }
.guide-dropdown-heading { display: flex; justify-content: space-between; gap: 8px; padding: 10px 11px 8px; border-bottom: 1px solid #e5e7df; color: #858a7d; font: 7px var(--mono); letter-spacing: .09em; }
.guide-dropdown-heading span:last-child { color: #9ba18f; }
.guide-toc { max-height: calc(min(55vh, 520px) - 36px); padding: 4px 7px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #cbd2c3 transparent; scrollbar-width: thin; }
.guide-group-label { padding: 9px 5px 4px; color: #93988a; font: 7px var(--mono); letter-spacing: .09em; }
.guide-entry { overflow: hidden; border: 1px solid transparent; border-radius: 4px; }
.guide-chapter { position: relative; min-height: 32px; padding: 6px 7px; color: #555c50; }
.guide-chapter>span { color: #90968a; }
.guide-chapter>i { margin-left: auto; color: #92988b; font: normal 11px var(--sans); transition: transform .18s; }
.guide-chapter.selected { background: #eaf0df; color: #353c30; box-shadow: inset 2px 0 #a9cd62; }
.guide-chapter.selected>i { color: #7f9f49; transform: rotate(180deg); }
.guide-entry-content { padding: 5px 12px 13px 32px; border-top: 1px solid #e3e7db; background: #fbfcf8; }
.guide-entry-content[hidden] { display: none; }
.guide-entry-content .guide-kicker { margin-top: 5px; font-size: 7px; }
.guide-entry-content h3 { margin: 7px 0 6px; color: #30362d; font: 600 13px/1.3 var(--display); letter-spacing: -.035em; }
.guide-entry-content>p { margin: 8px 0; color: #686e62; font-size: 9px; line-height: 1.65; }
.guide-entry-content>p.guide-lead { color: #464d40; font: 500 10px/1.5 var(--display); }
.guide-entry-content .guide-faq { margin: 10px 0; border-top-color: #dfe3d8; }
.guide-entry-content .guide-faq details { border-bottom-color: #dfe3d8; }
.guide-entry-content .guide-faq summary { padding: 10px 5px 10px 18px; color: #42483e; font-size: 9px; }
.guide-entry-content .guide-faq summary::before { left: 1px; color: #98bd50; }
.guide-entry-content .guide-faq details>p { padding: 0 5px 10px 18px; color: #686e62; font-size: 8px; line-height: 1.65; }
.guide-entry-content .guide-code { margin: 10px 0; padding: 9px 10px; font-size: 8px; }
.guide-entry-content .guide-callout { margin: 9px 0; padding: 8px; }
.guide-entry-content .guide-pagination { margin-top: 12px; padding-top: 8px; }
.guide-entry-content .guide-pagination button { min-width: 0; padding: 6px; font-size: 8px; }

@media (max-width: 900px) {
  .side-nav { position: static; }
  .field-guide { position: fixed; z-index: 8; top: var(--guide-top, 200px); left: 78px; width: min(420px, calc(100vw - 94px)); max-height: calc(100dvh - var(--guide-top, 200px) - 14px); }
  .guide-toc { max-height: calc(100dvh - var(--guide-top, 200px) - 50px); }
}
@media (max-width: 600px) {
  .field-guide { left: 62px; width: calc(100vw - 74px); }
}

.landing-page { min-height: 100dvh; overflow: hidden; background: #102d2a; }
.landing-page .sidebar, .landing-page .topbar, .landing-page .feed-section, .landing-page .right-column { display: none; }
.landing-page .main-area { min-height: 100dvh; margin: 0; }
.landing-page .content-layout { display: block; width: 100%; max-width: none; min-height: 100dvh; padding: 20px; }
.landing-page .primary-column { width: 100%; min-height: calc(100dvh - 40px); }
.landing-page .city-card { height: calc(100dvh - 40px); min-height: 480px; border: 1px solid #d3f6df22; border-radius: 12px; background: linear-gradient(135deg, #102d2b, #1a4942 60%, #0d2927); box-shadow: 0 25px 90px #05131180, inset 0 1px #ffffff17; }
.landing-page .city-sky { background: radial-gradient(ellipse at 72% 54%, #4aaf903d, transparent 49%), radial-gradient(ellipse at 70% 93%, #9bce622b, transparent 34%), linear-gradient(132deg, #112428 0%, #1c4941 64%, #1c5548 100%); }
.landing-page .city-sky:after { opacity: .34; background-size: 39px 39px; }
.landing-page #city-canvas { filter: drop-shadow(0 20px 35px #06171438); }
.landing-page .landing-brand { position: absolute; z-index: 3; top: 25px; left: 27px; display: flex; align-items: center; gap: 10px; color: #f4f4e8; font: 800 15px var(--display); letter-spacing: .13em; }
.landing-page .landing-brand .brand-mark { width: 23px; height: 23px; gap: 2px; }
.landing-page .landing-brand .brand-mark i { border-color: #d9fa86; }
.landing-page .landing-brand .brand-mark i:nth-child(2), .landing-page .landing-brand .brand-mark i:nth-child(3) { border-color: #a9d941; }
.landing-page .city-card-top { top: 29px; right: 29px; left: auto; z-index: 3; }
.landing-page .city-control { width: 40px; height: 40px; border-color: #e2f3db40; background: #f1f4d710; font-size: 20px; }
.landing-page .city-heading { top: 21%; left: 5%; width: min(45%, 480px); }
.landing-page .city-heading .eyebrow { color: #c6d6b2; font-size: 10px; letter-spacing: .16em; }
.landing-page .city-heading h1 { margin: 23px 0 14px; font: 500 clamp(48px, 6vw, 82px)/.99 var(--display); letter-spacing: -.075em; }
.landing-page .city-heading h1 em { color: #c4ed79; }
.landing-page .city-heading p { max-width: 390px; color: #ccd6c8; font-size: 14px; line-height: 1.75; }
.landing-page .discover-button { min-width: 179px; justify-content: space-between; margin-top: 26px; padding: 16px 17px; border-color: #e5efcf9c; border-radius: 6px; background: #eff6df0c; font-size: 12px; transition: background .2s, transform .2s; }
.landing-page .discover-button:hover { background: #f1f9df25; transform: translateY(-2px); }
.landing-page .discover-button span { font-size: 17px; }
.landing-page .landing-connect { pointer-events: auto; margin: 0 0 0 17px; padding: 14px 9px; border: 0; border-bottom: 1px solid #d7ead77a; background: transparent; color: #dce7d7; font-size: 11px; cursor: pointer; transition: color .2s; }
.landing-page .landing-connect:hover { color: #d3f181; }
.landing-page .landing-connect span { margin-left: 9px; color: #c4ed79; font-size: 14px; }
.landing-page .city-map-label { top: 17%; right: 4%; color: #d5e3ce; font-size: 9px; }
.landing-page .city-coordinates { bottom: 30px; left: 30px; color: #c2d4c4; font-size: 9px; line-height: 1.9; }
.landing-page .city-caption { right: 5%; bottom: 31px; left: auto; color: #caec7b; font: 500 12px var(--mono); letter-spacing: .13em; }
.landing-page .city-caption i { width: 34px; }
.landing-page .city-zoom { right: 30px; bottom: 100px; }
.landing-page .city-zoom button { width: 38px; height: 38px; }
.landing-page .resident-popover { z-index: 4; }
.landing-page.guide-open .sidebar { position: fixed; z-index: 9; inset: 0; display: block; width: 100%; height: 100dvh; padding: 0; border: 0; background: #07100ed9; backdrop-filter: blur(8px); }
.landing-page.guide-open .sidebar>:not(.side-nav) { display: none; }
.landing-page.guide-open .side-nav { position: absolute; top: 50%; left: 50%; display: grid; width: min(660px, calc(100vw - 32px)); max-height: min(78dvh, 760px); overflow: auto; transform: translate(-50%, -50%); border: 1px solid #34423b; border-radius: 9px; background: #f6f6f1; box-shadow: 0 18px 65px #101a1640; }
.landing-page.guide-open .side-nav>.nav-item:not([data-view="guide"]) { display: none; }
.landing-page.guide-open .side-nav>.nav-item[data-view="guide"] { display: flex; border-radius: 0; border-bottom: 1px solid #e5e7df; background: #f6f7f2; }
.landing-page.guide-open .field-guide { position: relative; top: auto; left: auto; width: 100%; max-height: calc(min(78dvh, 760px) - 43px); }
.landing-page.guide-open .guide-toc { max-height: calc(min(78dvh, 760px) - 80px); }

@media (max-width: 800px) {
  .landing-page .content-layout { padding: 10px; }
  .landing-page .primary-column { min-height: calc(100dvh - 20px); }
  .landing-page .city-card { height: calc(100dvh - 20px); min-height: 580px; }
  .landing-page .landing-brand { top: 18px; left: 16px; font-size: 12px; }
  .landing-page .landing-brand .brand-mark { width: 19px; height: 19px; }
  .landing-page .city-card-top { top: 14px; right: 14px; }
  .landing-page .city-control { width: 34px; height: 34px; }
  .landing-page .city-heading { top: 14%; left: 6%; width: 88%; }
  .landing-page .city-heading h1 { margin: 16px 0 10px; font-size: clamp(43px, 10vw, 68px); }
  .landing-page .city-heading p { max-width: 330px; font-size: 12px; }
  .landing-page .discover-button { margin-top: 17px; padding: 12px 13px; }
  .landing-page .landing-connect { margin-left: 6px; padding: 11px 3px; font-size: 9px; }
  .landing-page .city-map-label { top: 8%; right: 5%; font-size: 6px; }
  .landing-page .city-caption { right: 18px; bottom: 27px; font-size: 8px; }
  .landing-page .city-coordinates { bottom: 25px; left: 16px; font-size: 7px; }
  .landing-page .city-zoom { right: 14px; bottom: 75px; }
}

@media (max-width: 900px) {
  .landing-page.guide-open .side-nav { top: 50%; left: 50%; width: min(660px, calc(100vw - 24px)); }
  .landing-page.guide-open .field-guide { position: relative; top: auto; left: auto; width: 100%; max-height: calc(min(78dvh, 760px) - 43px); }
  .landing-page.guide-open .guide-toc { max-height: calc(min(78dvh, 760px) - 80px); }
}

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