/* MOMENTS. The first viewport is a full-bleed relationship planet. The camera
   and archive follow below; all controls stay outside the sphere safe rectangle.
   The fixed global starfield remains visible through transparent surfaces. */
@font-face { font-family: "Moments Hand"; src: url("fonts/wenkai-regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Moments Numbers"; src: url("fonts/roboto-mono-numbers.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0020-007E; }
:root {
  color-scheme: dark;
  --studio-bg: #030405; --studio-panel: #161616; --studio-field: #101010;
  --studio-border: #333333; --studio-rule: #2f2f2f;
  --ink: #ececec; --muted: #a9a9a9; --studio-dim: #919191;
  --studio-accent: #d9ae7a; --studio-accent-ink: #241c13; --studio-warn: #e4b386;
  --font-ui: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-mono: "Moments Numbers", "Cascadia Mono", monospace; --scene-scale: 1;
}
* { box-sizing: border-box; }
html { background: #030405; scrollbar-color: #555658 #070809; scroll-behavior: smooth; }
body { margin: 0; min-width: 0; min-height: 100dvh; color: var(--ink); background: #030405; font: 14px/1.65 var(--font-ui); -webkit-font-smoothing: antialiased; isolation: isolate; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { border-radius: 7px; cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled { opacity: .42; cursor: default; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #bcbcbc; outline-offset: 4px; }
input { min-width: 0; width: 100%; border: 0; border-radius: 0; padding: 10px 0; background: transparent; caret-color: #d4d7db; }
input::placeholder { color: #939393; opacity: 1; }
input:focus { outline: 0; }
::selection { color: #171717; background: #cccccc; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
figure, h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.page-starfield { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#builder-controls { display: contents; min-width: 0; }
.preview-panel .panel-heading h2 { color: #ececee; font-size: 24px; }
.chosen-person { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.chosen-person > img { flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #9198a1; border-radius: 50%; object-fit: cover; }
.chosen-person > div { display: flex; flex: 1 1 auto; align-items: baseline; gap: 7px; min-width: 0; }
.chosen-person > div > small { display: none; }
#chosen-name { display: block; max-width: 140px; overflow: hidden; color: #e5e8ed; font: 500 13px/1.5 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
#chosen-handle { display: block; max-width: 130px; overflow: hidden; color: #929ca9; font: 11px/1.5 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
#go-camera { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; padding: 10px 13px; border: 1px solid #78818d; border-radius: 7px; background: #1a1e25e6; color: #e1e6ed; font-size: 12px; text-decoration: none; white-space: nowrap; }
#go-camera:hover { background: #30343a; border-color: #c1c6cf; color: #ffffff; }

/* The stage is exactly one viewport. HUD regions are excluded from the
   renderer's rectangle, so fitting never depends on overlaying controls. */
.planet-toolbar { position: absolute; z-index: 5; top: 76px; left: 24px; right: 24px; display: flex; align-items: center; gap: 18px; min-width: 0; height: 46px; }
.planet-toolbar > #people-count { flex: 0 0 auto; color: #939ca9; font-size: 11px; white-space: nowrap; }
.planet-dock { position: absolute; z-index: 4; left: 24px; right: 24px; bottom: 16px; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 44px auto; align-items: center; gap: 8px 24px; min-width: 0; }
body[data-has-account="false"] .planet-toolbar, body[data-has-account="false"] .planet-dock { visibility: hidden; pointer-events: none; }
body[data-has-account="false"] #circle-preview { visibility: hidden; }
body[data-has-account="false"] #account-panel { top: 50dvh; right: auto; left: 50%; width: min(480px, calc(100% - 40px)); max-height: calc(100dvh - 128px); overflow: auto; transform: translate(-50%, -50%); padding: 26px; }
body[data-has-account="true"][data-account-open="false"] #account-panel { display: none; }
body[data-has-account="true"] #account-panel .intro-copy { display: none; }
body[data-has-account="false"] #account-toggle { display: none; }
.topbar > .featured-person { margin-left: auto; }
.topbar .featured-person { padding: 0; border: 0; }

/* Compact masthead and account query keep both instruments in view. */
.topbar, .studio-shell { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; }
.topbar { position: absolute; z-index: 10; top: 0; left: 24px; right: 24px; width: auto; height: 64px; min-height: 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 0; }
.wordmark { display: flex; align-items: center; gap: 14px; color: #f0f0f0; text-decoration: none; font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: 2.4px; white-space: nowrap; }
.wordmark > span:not(.wordmark-mark) { padding-left: 15px; border-left: 1px solid #414141; color: #acacac; font-size: 11px; font-weight: 400; letter-spacing: .4px; }
.wordmark-mark { position: relative; flex: 0 0 27px; display: inline-block; width: 27px; height: 22px; border: 1.5px solid #c4c4c4; border-radius: 5px; }
.wordmark-mark::before { content: ''; position: absolute; width: 8px; height: 8px; top: 5.5px; left: 7.5px; border: 1.5px solid #c4c4c4; border-radius: 50%; }
.wordmark-mark::after { content: ''; position: absolute; width: 5px; height: 2px; top: 3px; right: 3px; background: #c4c4c4; border-radius: 1px; }
.topbar-links { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.topbar-links > a { color: #a8a8a8; font-size: 12px; text-decoration: none; }
.topbar-links > a:hover { color: #efefef; }
.quiet { min-height: 40px; padding: 8px 12px; border: 1px solid #41454b; background: #0d0f13cf; color: #c2c5ca; font-size: 12px; white-space: nowrap; }
.quiet:hover:not(:disabled) { background: #262626; border-color: #848484; }
#sound-toggle[aria-pressed="true"]::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: #c8c8c8; }
.studio-intro { position: absolute; z-index: 20; top: 76px; right: 24px; display: block; width: min(440px, calc(100% - 48px)); padding: 22px; border: 1px solid #44484e; border-radius: 10px; background: #0b0d10f5; box-shadow: 0 18px 60px #00000070; }
.intro-copy, .online-search { min-width: 0; }
.eyebrow { margin-bottom: 6px; color: #a9a9a9; font-size: 12px; }
.studio-intro h1 { color: #f0f0ee; font: 500 26px/1.45 var(--font-ui); letter-spacing: -.5px; }
.description { margin-top: 8px; margin-bottom: 24px; color: #a2a6ae; font-size: 12px; line-height: 1.8; }
.online-search > label { display: block; margin-bottom: 7px; color: #b4b4b4; font-size: 12px; }
.online-input { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 4px 4px 4px 14px; border: 1px solid #505153; border-radius: 8px; background: #111214c9; }
.online-input:focus-within, .search-box:focus-within { border-color: #a5a5a5; box-shadow: 0 0 0 1px #a5a5a5; }
.online-input > span, .search-box > span { color: #a6a6a6; font: 15px/1 var(--font-mono); }
.online-input input { flex: 1 1 0; font-size: 13px; }
.online-input button { flex: 0 0 auto; align-self: stretch; min-height: 40px; padding: 9px 15px; border: 1px solid #d7d8da; border-radius: 5px; background: #d7d8da; color: #202124; font-size: 12px; font-weight: 600; white-space: nowrap; }
.online-input button:hover:not(:disabled) { border-color: #f0f1f2; background: #f0f1f2; }
#online-status { min-height: 19px; margin-top: 7px; color: #a3a3a3; font-size: 12px; line-height: 1.6; }
.online-search[data-error="true"] #online-status { color: var(--studio-warn); }

/* A single continuous scene, with a fine division between selection and print. */
.composer { display: block; width: 100%; min-width: 0; scroll-margin-top: 18px; }
.studio-workspace { position: relative; display: block; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.people-panel, .preview-panel { position: relative; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.people-panel { --planet-top: 132px; --planet-bottom: 112px; --planet-side: 20px; position: relative; width: 100%; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
.preview-panel { display: flex; flex-direction: column; align-items: center; width: calc(100% - 48px); max-width: 1120px; margin: 0 auto; padding: 56px 0 0; border-top: 1px solid #ffffff1c; scroll-margin-top: 24px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-heading > div { min-width: 0; }
.panel-heading h2 { color: #e9e9e9; font: 500 18px/1.45 var(--font-ui); letter-spacing: -.2px; }
.panel-heading > span { color: #a3a3a3; font-size: 11px; white-space: nowrap; }
.panel-subtitle { margin-top: 4px; color: #a0a0a0; font-size: 12px; line-height: 1.6; }
.featured-person { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.featured-person img { flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid #7c828a; border-radius: 50%; object-fit: cover; }
.featured-person > span:nth-child(2) { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.featured-person strong { max-width: 110px; color: #d6d9df; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-person small { max-width: 140px; color: #9198a4; font: 10px/1.6 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-note { color: #959595; font-size: 11px; white-space: nowrap; }
.picker-options { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; margin: 0; }
.picker-options .circle-scopes { flex: 0 0 auto; width: auto; min-width: 195px; margin: 0; }
.picker-options .picker-toolbar { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; gap: 18px; min-width: 0; margin: 0; }
.picker-options .scope-copy small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.picker-options .scope-option { min-height: 38px; padding: 5px 14px; }
.search-area { position: relative; flex: 0 1 320px; width: 320px; min-width: 0; margin: 0; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid #383d45; border-radius: 7px; background: #0b0d12d9; }
.search-box input { padding: 8px 0; font-size: 13px; }
.search-results { position: absolute; top: 45px; left: 0; right: 0; z-index: 20; max-height: 280px; padding: 4px; overflow: auto; border: 1px solid #686868; border-radius: 9px; background: #212121; box-shadow: 0 14px 30px #06060680; scrollbar-width: thin; }
.search-results button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: #eaeaea; text-align: left; }
.search-results button:hover, .search-results button:focus-visible { background: #383838; }
.search-results img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.search-results strong { display: block; color: #ededed; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.search-results small { display: block; color: #bbbbbb; font: 11px/1.5 var(--font-mono); }
.search-results p { padding: 12px; color: #c3c3c3; font-size: 13px; }
.field-help, .scope-description, .picker-caption { color: #a2a2a2; font-size: 12px; }
.circle-scopes { display: flex; gap: 3px; width: auto; margin: 0; padding: 3px; border: 1px solid #33363b; border-radius: 7px; background: #090a0c99; }
.scope-option { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; min-height: 44px; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #aaaaaa; text-align: center; }
.scope-option:hover:not(:disabled) { background: #282828; color: #e6e6e6; }
.scope-option[aria-pressed="true"] { border-color: #6a6d725c; background: #2c2e32; color: #f1f2f3; box-shadow: none; }
.scope-icon { display: none; }
.scope-copy { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; }
.scope-copy strong { font-size: 13px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.scope-copy small { color: #a1a1a1; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.scope-option[aria-pressed="true"] .scope-copy small { color: #c4c4c4; }
.picker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.view-switch { display: flex; align-items: center; gap: 16px; }
.view-switch button { min-height: 32px; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: #999999; font-size: 12px; white-space: nowrap; }
.view-switch button[aria-pressed="true"] { color: #e6e6e6; border-bottom-color: #b6b6b6; }
.view-switch button:hover { color: #eeeeee; }
.range-summary { color: #929292; font-size: 11px; text-align: right; }
.picker-body { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; left: var(--planet-side); right: var(--planet-side); top: var(--planet-top); bottom: var(--planet-bottom); width: auto; height: auto; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.circle-picker, .circle-viewport, .circle-image { position: relative; width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; background: transparent; }
.circle-viewport { overflow: hidden; isolation: isolate; }
#circle-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
#member-targets { position: absolute; inset: 0; }
.member-target { position: absolute; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.member-target:focus-visible { outline: 2px solid #e2e5ea; outline-offset: 3px; }
.relationship-sphere-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: transparent; touch-action: none; cursor: grab; }
.relationship-sphere-canvas:active, .circle-image[data-renderer="sphere-webgl"]:active { cursor: grabbing; }
.circle-image[data-renderer="sphere-webgl"] { isolation: isolate; touch-action: none; cursor: grab; }
.circle-image[data-renderer="sphere-webgl"] #circle-preview { visibility: hidden; }
.circle-image[data-renderer="sphere-webgl"] #member-targets { z-index: 2; pointer-events: none; }
.circle-image[data-renderer="sphere-webgl"] .member-target { pointer-events: auto; touch-action: none; }
.sphere-controls { grid-column: 1; grid-row: 1; position: static; display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.sphere-controls > p, #sphere-help { flex: 0 1 auto; min-width: 0; margin: 0; color: #959ca8; font: 11px/1.5 var(--font-ui); white-space: nowrap; }
.sphere-controls > div { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.sphere-controls button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid #45484e; border-radius: 6px; background: #101318d9; color: #c6cbd3; font: 12px/1.4 var(--font-ui); white-space: nowrap; }
.sphere-controls button:hover:not(:disabled) { border-color: #a5a5a5; background: #3a3a3a; color: #f4f4f4; }
.sphere-controls button[aria-pressed="true"] { border-color: #a8a8a8; color: #ececec; }
#sphere-zoom-out, #sphere-zoom-in { width: 44px; padding-inline: 0; font-size: 19px; }
.circle-tools { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px 12px; width: 100%; min-width: 0; margin: 0; padding: 0; }
#circle-zoom-note { flex: 1 1 auto; min-width: 0; max-width: 100%; color: #858c96; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.circle-image-actions { display: flex; flex: 0 1 auto; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
#retry-portraits { min-height: 32px; padding: 6px 10px; border: 1px solid #4b4b4b; border-radius: 6px; background: #202020; color: #c5c5c5; font: 12px/1.4 var(--font-ui); white-space: normal; }
#retry-portraits:hover:not(:disabled) { background: #383838; border-color: #9a9a9a; }

/* The list is a fully readable alternative to spatial selection. */
.relationship-panel { width: min(100%, 1100px); height: 100%; margin-inline: auto; padding-inline: 14px; overflow: auto; background: #05060875; scrollbar-width: thin; }
#relationship-list { list-style: none; margin: 0; padding: 5px; }
#relationship-list button { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) 18px; align-items: center; gap: 11px; width: 100%; min-height: 64px; margin: 2px 0; padding: 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #e9e9e9; text-align: left; }
#relationship-list button:hover { background: #2a2a2a; }
#relationship-list button[aria-pressed="true"] { background: #292c30; border-color: #969ba3; }
#relationship-list b { color: #a2a2a2; font: 12px/1 var(--font-mono); }
#relationship-list strong { display: block; overflow: hidden; color: #e9e9e9; font: 500 13px/1.5 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
#relationship-list small { display: block; margin-top: 3px; color: #a2a2a2; font-size: 11px; }
#relationship-list em { color: #d5dbe3; font-style: normal; opacity: 0; }
#relationship-list [aria-pressed="true"] em { opacity: 1; }
.friend-avatar { display: flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #3e3e3e; color: #dcdcdc; font: 500 16px/1 var(--font-ui); }
.friend-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#list-empty { margin: 92px 24px; color: #a9a9a9; font-size: 13px; line-height: 1.8; text-align: center; }

/* The selected person's identity makes the sphere-to-camera handoff visible. */
.preview-panel .panel-heading { justify-content: center; width: 100%; margin-bottom: 8px; text-align: center; }
.back-to-planet { position: absolute; top: 42px; left: 0; display: inline-flex; align-items: center; min-height: 44px; color: #a4acb8; font-size: 12px; text-decoration: none; }
.back-to-planet:hover { color: #eef1f6; text-decoration: underline; }
#preview-person { margin-top: 5px; color: #a7a7a7; font-size: 12px; line-height: 1.6; }
.preview-panel:has(#camera-selection:not([hidden])) #preview-person { display: none; }
.preview-note { color: #9e9e9e; font-size: 11px; }
.camera-selection { display: flex; align-items: center; gap: 10px; width: min(100%, 480px); min-width: 0; margin: 12px auto 0; padding: 8px 0; border: 0; background: transparent; }
.camera-selection img { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #85888d; border-radius: 50%; object-fit: cover; }
.camera-selection > div { flex: 1; min-width: 0; }
#camera-person-name { display: block; max-width: 100%; overflow: hidden; color: #ececec; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#camera-person-handle { display: block; overflow: hidden; color: #adadad; font: 10px/1.6 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.camera-selection > a { flex: 0 0 auto; color: #cacaca; font-size: 11px; text-decoration: none; white-space: nowrap; }
.camera-selection > a:hover { color: #efefef; text-decoration: underline; }
.visual-stage { --studio-camera-height: 760px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1060px; min-width: 0; min-height: 0; margin-inline: auto; flex: 0 0 auto; background: transparent; }
.preview-panel .visual-stage.voxel-printer { height: calc(var(--webgl-height) + 44px); }
.preview-panel .visual-stage.voxel-printer .voxel-tools { bottom: 0; }
.preview-panel .visual-stage.voxel-printer .webgl-stage-status { display: none; }
.pair-print { position: relative; width: min(100%, 310px); margin: 0; }
#pair-preview { display: block; width: 100%; height: auto; }
.pair-print figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.preview-controls { width: 100%; max-width: 560px; margin: 14px auto 0; padding-top: 17px; border-top: 1px solid #ffffff20; }
#photo-controls legend { display: block; width: 100%; margin-bottom: 7px; color: #a1a3a8; font-size: 11px; text-align: center; }
.theme-options { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; margin-bottom: 16px; }
.theme-options button { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: #a4a4a4; font-size: 11px; white-space: nowrap; }
.theme-options button[aria-pressed="true"] { border-bottom-color: #b7b8bb; color: #dedfe1; }
.theme-options button:hover:not(:disabled) { color: #ececec; }
.theme-options i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #bacba2; }
.theme-options [data-theme="silver"] i { background: #d1d1d1; }
.theme-options [data-theme="night"] i { background: #587b66; }
.buttons { display: flex; justify-content: center; gap: 9px; }
.primary, .secondary { flex: 1; min-width: 0; min-height: 46px; padding: 12px 14px; border: 1px solid; border-radius: 7px; font-size: 13px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.primary { color: #261e15; background: #dbb280; border-color: #dbb280; box-shadow: 0 2px 8px #07070730; }
.primary:hover:not(:disabled) { color: #241b12; background: #e9c292; border-color: #e9c292; }
.secondary { color: #dbdbdb; background: #2a2a2a; border-color: #747474; }
.secondary:hover:not(:disabled) { background: #3d3d3d; border-color: #b1b1b1; }
#builder-status { min-height: 19px; margin-top: 10px; color: #a5a5a5; font-size: 12px; line-height: 1.65; text-align: center; }
.print-format { margin-top: 4px; color: #929292; font-size: 11px; line-height: 1.6; text-align: center; }
.preview-panel .visual-stage.voxel-printer .voxel-tools { color: #a4a4a4; font: 10px/1.5 var(--font-ui); }
.preview-panel .visual-stage.voxel-printer .voxel-tools > span { min-width: 0; }
.preview-panel .visual-stage.voxel-printer .voxel-tools button { min-height: 32px; padding: 6px 10px; border: 1px solid #595959; border-radius: 6px; background: #262626db; color: #c7c7c7; box-shadow: none; font: 11px/1.4 var(--font-ui); }
.preview-panel .visual-stage.voxel-printer .voxel-tools button:hover:not(:disabled) { background: #3f3f3f; border-color: #a8a8a8; }
.preview-panel .visual-stage.voxel-printer .webgl-stage-status { color: #adadad; font: 11px/1.6 var(--font-ui); }
.preview-panel .visual-stage.voxel-printer .webgl-viewport:focus-visible { border-radius: 8px; outline-color: #bcbcbc; }

/* A conventional record panel: identity, one summary row, filters, posts. */
.relationship-details { width: calc(100% - 48px); max-width: 1000px; margin: 64px auto 0; padding: 28px; border: 1px solid #323232; border-radius: 14px; background: #0d0d0df5; scroll-margin-top: 24px; }
.interaction-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.interaction-header h2 { font-size: 22px; line-height: 1.5; font-weight: 600; color: #f1f1f1; }
.relationship-note { margin-top: 6px; color: #9c9c9c; font-size: 12px; line-height: 1.7; }
#refresh-pair { flex: 0 0 auto; min-height: 40px; padding: 9px 14px; border: 1px solid #555555; border-radius: 7px; color: #e3e3e3; background: #242424; font-size: 12px; }
#refresh-pair:hover:not(:disabled) { background: #363636; border-color: #848484; }
#relationship-content { display: block; min-width: 0; }
.dossier-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 22px; }
.dossier-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dossier-person img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; }
.dossier-person > span { min-width: 0; }
#selected-name { display: block; color: #efefef; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
#selected-handle { display: block; margin-top: 3px; font: 12px/1.5 var(--font-mono); color: #a3a3a3; }
.dossier-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.dossier-state { color: #b0b0b0; background: #212121; border: 1px solid #3c3c3c; border-radius: 5px; padding: 4px 8px; font-size: 11px; }
#selected-profile { color: #c2c2c2; text-decoration: none; font-size: 12px; }
.relationship-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 26px; padding: 0; border: 0; }
.relationship-metrics > div { min-width: 0; padding: 16px; border: 1px solid #2e2e2e; border-radius: 8px; background: #161616; }
.relationship-metrics > div > span { display: block; color: #afafaf; font-size: 12px; margin-bottom: 14px; }
.metric-value { display: flex; align-items: baseline; gap: 7px; }
.relationship-metrics strong { font: 500 30px/1.25 var(--font-ui); color: #f3f3f3; font-variant-numeric: tabular-nums; }
.relationship-metrics small { color: #9b9b9b; font-size: 11px; }
.relationship-first time { display: block; color: #e5e5e5; font: 16px/1.4 var(--font-mono); }
.relationship-first small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.6; }
.relationship-first a { display: inline-block; margin-top: 8px; color: #bbbbbb; font-size: 11px; text-decoration: none; }
.research-feedback { margin: -10px 0 22px; padding: 11px 13px; border-left: 2px solid #8b8b8b; background: #1f1f1f; color: #cbcbcb; font-size: 12px; line-height: 1.7; }
.records-section { min-width: 0; border-top: 1px solid #313131; padding-top: 22px; }
.records-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.records-section-heading h3 { margin: 0; color: #e0e0e0; font-size: 15px; font-weight: 500; }
.records-section-heading > span { color: #929292; font-size: 11px; }
#interaction-records { min-width: 0; }
.record-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.record-heading-title { font-size: 15px; }
.record-total { font-size: 12px; color: #a2a2a2; }
.interaction-record-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #313131; }
.record-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.record-filter { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #a1a1a1; font-size: 12px; }
.record-filter b { font: 11px/1.4 var(--font-mono); color: inherit; }
.record-filter[aria-pressed="true"] { color: #f2f2f2; background: #323232; border-color: #595959; }
.record-filter:hover { color: #f3f3f3; background: #262626; }
.record-sort { display: flex; align-items: center; margin-left: auto; }
.record-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.record-sort select { min-height: 38px; padding: 7px 10px; color: #bebebe; background: #1b1b1b; border: 1px solid #404040; border-radius: 6px; font-size: 12px; }
.record-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.interaction-records { list-style: none; padding: 0; margin: 0; }
.interaction-record { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid #2b2b2b; }
.interaction-record:last-child { border-bottom: 0; }
.record-avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #343434; color: #e3e3e3; font-size: 14px; overflow: hidden; }
.record-avatar img { position: absolute; inset: 0; width: 36px; height: 36px; object-fit: cover; }
.record-content { min-width: 0; }
.record-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.record-direction { color: #e6e6e6; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.record-type { flex: 0 0 auto; font-size: 10px; color: #b2b2b2; background: #2a2a2a; padding: 2px 6px; border-radius: 4px; }
.record-text { margin: 0; color: #d8d8d8; font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.record-parent { margin-top: 12px; padding: 11px 14px; border-left: 2px solid #575757; background: #191919; border-radius: 0 6px 6px 0; }
.record-parent-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #b0b0b0; font-size: 11px; }
.record-parent-link { color: #bdbdbd; text-decoration: none; }
.record-parent-link:hover { text-decoration: underline; }
.record-parent-text { margin: 7px 0 0; color: #bcbcbc; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.2em; overflow: auto; }
.record-context-note { margin: 10px 0 0; color: #adadad; font-size: 12px; line-height: 1.6; }
.record-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }
.record-time { color: #969696; font: 11px/1.5 var(--font-mono); }
.record-link { color: #c7c7c7; text-decoration: none; font-size: 11px; }
.record-link:hover { text-decoration: underline; }
.record-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #313131; }
.record-progress, .record-scope { color: #9d9d9d; font-size: 12px; }
.record-more { min-height: 40px; padding: 9px 13px; color: #d5d5d5; background: #2b2b2b; border: 1px solid #575757; border-radius: 6px; font-size: 12px; }
.record-empty { padding: 36px 16px; color: #acacac; text-align: center; font-size: 13px; }
.query-evidence { margin-top: 22px; padding-top: 16px; border-top: 1px solid #323232; color: #9d9d9d; font-size: 12px; line-height: 1.8; }
.query-evidence summary, .source-details summary { cursor: pointer; }
.query-evidence p { margin-top: 10px; }
.data-source-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.data-source-links a { color: #c3c3c3; font-size: 12px; }
#relationship-empty { padding: 24px; color: #b5b5b5; }

.source-details { width: calc(100% - 48px); max-width: 1120px; margin: 30px auto 0; color: #9ba0a8; font-size: 12px; line-height: 1.8; }
.source-details summary:hover { color: #e8e8e8; }
.source-details p { max-width: 940px; margin-top: 9px; }
.studio-shell > footer { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; width: calc(100% - 48px); max-width: 1120px; margin: 22px auto 0; padding: 22px 0 26px; border-top: 1px solid #2e333b; color: #9097a2; font-size: 11px; line-height: 1.8; }
.studio-shell > footer > span:first-child { color: #aeaeae; }
.studio-shell > footer a { color: #b7b7b7; text-decoration: none; }
.studio-shell > footer a:hover { color: #ececec; text-decoration: underline; }

/* The export dialog does not filter or recolour its generated artwork. */
dialog { width: min(1060px, calc(100vw - 40px)); max-height: 94dvh; padding: 22px; border: 1px solid #6e6e6e; border-radius: 12px; background: #1c1c1c; color: #ececec; box-shadow: 0 30px 100px #00000085; }
dialog::backdrop { background: #080808dc; }
.dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px solid #454545; }
.dialog-top strong { color: #ededed; font: 500 21px/1.4 var(--font-ui); }
.dialog-top p { margin-top: 7px; color: #b5b5b5; font-size: 12px; }
.dialog-top button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; min-height: 40px; border: 1px solid #696969; border-radius: 7px; background: #2e2e2e; color: #d0d0d0; font: 25px/1 var(--font-ui); }
.dialog-top button:hover:not(:disabled) { border-color: #bbbbbb; background: #444444; }
#export-image { display: block; width: 100%; height: auto; object-fit: contain; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 11px; margin-top: 18px; }
.dialog-actions a { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 17px; border: 1px solid #787878; border-radius: 7px; background: #2e2e2e; color: #d7d7d7; font-size: 13px; text-decoration: none; }
.dialog-actions a:first-child { background: #dbb280; color: #281e12; border-color: #dbb280; }
.dialog-actions a:hover { filter: brightness(1.12); }
.capture-dialog { width: min(1040px, calc(100vw - 32px)); }
.capture-dialog #print-section { margin: 0; }
.capture-dialog .controls { padding-top: 16px; text-align: center; }
.capture-dialog #status { margin-bottom: 12px; color: #cdcdcd; }
.capture-dialog .hint { margin-top: 12px; color: #a7a7a7; font-size: 12px; }
.capture-dialog .buttons { max-width: 420px; margin-inline: auto; }

@media (max-width: 1180px) {
  .planet-toolbar { gap: 14px; }
  .search-area { flex-basis: 280px; width: 280px; }
  .picker-options { gap: 16px; }
  .picker-options .circle-scopes { min-width: 180px; }
  .picker-options .scope-option { padding-inline: 12px; }
  .sphere-controls > p, #sphere-help { display: none; }
  #chosen-handle { display: none; }
}
@media (max-width: 980px) {
  .topbar { left: 20px; right: 20px; gap: 12px; }
  .wordmark > span:not(.wordmark-mark) { display: none; }
  .topbar .featured-person small { display: none; }
  .people-panel { --planet-side: 16px; }
  .planet-toolbar { left: 20px; right: 20px; gap: 12px; }
  .planet-toolbar > #people-count { display: none; }
  .search-area { flex-basis: 250px; width: 250px; }
  .picker-options { gap: 14px; }
  .picker-options .picker-toolbar { gap: 12px; }
  .range-summary { display: none; }
  .planet-dock { left: 20px; right: 20px; column-gap: 16px; }
  .chosen-person { gap: 8px; }
  #chosen-name { max-width: 100px; }
}
@media (max-width: 767px) {
  .topbar { left: 16px; right: 16px; width: auto; height: 58px; gap: 8px; }
  .wordmark { gap: 8px; font-size: 14px; letter-spacing: 1.3px; }
  .wordmark-mark { width: 24px; height: 21px; flex-basis: 24px; }
  .wordmark-mark::before { left: 6px; top: 5px; }
  .topbar-links { gap: 6px; }
  .topbar-links > a { display: none; }
  .topbar .featured-person { gap: 0; }
  .topbar .featured-person > span { display: none; }
  .topbar .featured-person img { width: 23px; height: 23px; flex-basis: 23px; }
  #sound-toggle, #account-toggle { min-height: 40px; padding: 8px; font-size: 10px; }
  #sound-toggle[aria-pressed="true"]::before { margin-right: 5px; }
  .studio-intro { top: 66px; left: 16px; right: 16px; width: auto; max-height: calc(100dvh - 90px); padding: 18px; overflow: auto; }
  body[data-has-account="false"] #account-panel { top: 50dvh; width: calc(100% - 32px); padding: 22px; }
  .studio-intro h1 { font-size: 25px; line-height: 1.5; }
  .description { font-size: 12px; margin-bottom: 20px; }
  .online-input { min-height: 52px; gap: 8px; padding-left: 12px; }
  .online-input input { font-size: 13px; }
  .online-input button { min-height: 44px; padding-inline: 10px; font-size: 12px; }
  #online-status { font-size: 12px; }
  .people-panel { --planet-top: 182px; --planet-bottom: 100px; --planet-side: 10px; height: 100dvh; min-height: 0; }
  .people-panel:has(.chosen-person:not([hidden])) { --planet-bottom: 152px; }
  .planet-toolbar { top: 68px; left: 16px; right: 16px; height: 104px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 48px; gap: 8px; }
  .search-area { width: 100%; min-width: 0; max-width: none; margin: 0; }
  .search-box { min-height: 44px; }
  .search-results { top: 48px; }
  .picker-options { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; width: 100%; min-width: 0; gap: 12px; margin: 0; }
  .picker-options .circle-scopes { flex: 0 0 150px; min-width: 0; width: 150px; }
  .picker-options .scope-option { min-height: 40px; padding: 6px; }
  .picker-options .picker-toolbar { flex: 0 1 auto; width: auto; min-width: 0; gap: 0; justify-content: flex-end; }
  .scope-copy strong { font-size: 12px; }
  .view-switch { gap: 14px; }
  .view-switch button { min-height: 44px; font-size: 11px; }
  .range-summary, .planet-toolbar > #people-count { display: none; }
  .circle-picker, .circle-viewport, .circle-image { width: 100%; height: 100%; aspect-ratio: auto; }
  .planet-dock { left: 16px; right: 16px; bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 6px; }
  .sphere-controls { grid-column: 1; grid-row: 1; width: 100%; flex-wrap: nowrap; justify-content: center; padding: 0; margin: 0; }
  .sphere-controls > p, #sphere-help { display: none; }
  .sphere-controls > div { justify-content: center; width: 100%; gap: 7px; }
  .sphere-controls button { min-height: 44px; font-size: 12px; padding: 8px 11px; }
  #sphere-zoom-out, #sphere-zoom-in { flex: 0 0 44px; width: 44px; }
  #sphere-reset, #sphere-rotation { flex: 1 1 auto; }
  .chosen-person { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; gap: 9px; padding: 0; margin: 0; }
  .chosen-person > img { width: 30px; height: 30px; flex-basis: 30px; }
  .chosen-person > div { display: block; flex: 1; min-width: 0; }
  #chosen-name { max-width: none; font-size: 12px; }
  #chosen-handle { display: none; }
  #go-camera { min-height: 44px; padding: 9px 11px; font-size: 11px; }
  .circle-tools { grid-column: 1; grid-row: 3; gap: 8px; min-height: 18px; padding: 0; }
  #circle-zoom-note { flex: 1; width: auto; font-size: 10px; line-height: 1.5; }
  .circle-image-actions { flex: 0 0 auto; }
  #retry-portraits { min-height: 26px; padding: 3px 7px; font-size: 10px; }
  #relationship-list { padding: 3px; }
  #relationship-list button { grid-template-columns: 20px 36px minmax(0, 1fr) 16px; gap: 9px; padding: 9px 6px; }
  .preview-panel, .relationship-details, .source-details, .studio-shell > footer { width: calc(100% - 32px); max-width: none; }
  .preview-panel { padding-top: 36px; margin-top: 0; }
  .back-to-planet { position: static; align-self: flex-start; margin: -10px 0 10px; }
  .preview-panel .panel-heading { margin-bottom: 8px; }
  .preview-panel .panel-heading h2 { font-size: 22px; }
  .visual-stage { --studio-camera-height: 520px; }
  .camera-selection { width: min(100%, 420px); padding: 7px 0; margin-top: 9px; }
  .preview-controls { margin-top: 12px; padding-top: 15px; }
  .theme-options { gap: 22px; margin-bottom: 13px; }
  .theme-options button { min-height: 44px; font-size: 11px; }
  .primary, .secondary { min-height: 48px; padding: 12px; font-size: 13px; }
  .preview-panel .visual-stage.voxel-printer .voxel-tools button { min-height: 44px; padding: 8px 10px; }
  .preview-panel .visual-stage.voxel-printer .voxel-tools > span { max-width: 150px; }
  #refresh-pair { min-height: 44px; }
  .source-details { margin-top: 26px; font-size: 12px; }
  .studio-shell > footer { display: block; padding-top: 18px; font-size: 11px; }
  .studio-shell > footer > span { display: block; }
  .studio-shell > footer > span + span { margin-top: 7px; }
  dialog { width: calc(100vw - 24px); padding: 16px; }
  .dialog-top { gap: 12px; padding-bottom: 12px; }
  .dialog-top strong { font-size: 19px; }
  .dialog-top p { font-size: 12px; }
  .dialog-top button { flex-basis: 44px; width: 44px; min-height: 44px; }
  .dialog-actions { gap: 10px; margin-top: 16px; }
  .dialog-actions a { flex: 1 1 140px; min-width: 0; min-height: 44px; padding-inline: 10px; font-size: 12px; }
}
@media (max-width: 359px) {
  .topbar { left: 12px; right: 12px; }
  .topbar .featured-person { display: none; }
  .wordmark { font-size: 13px; letter-spacing: 1px; }
  .planet-toolbar { left: 12px; right: 12px; }
  .picker-options { gap: 8px; }
  .picker-options .circle-scopes { flex-basis: 138px; width: 138px; }
  .view-switch { gap: 10px; }
  .view-switch button { font-size: 10px; }
  .planet-dock { left: 12px; right: 12px; }
  .sphere-controls > div { gap: 5px; }
  .sphere-controls button { padding-inline: 8px; }
  #chosen-name { max-width: 95px; }
  .theme-options { gap: 15px; }
}
@media (max-height: 600px) and (min-width: 560px) {
  .topbar { height: 48px; }
  .people-panel, .people-panel:has(.chosen-person:not([hidden])) { --planet-top: 110px; --planet-bottom: 94px; --planet-side: 12px; }
  .planet-toolbar { top: 54px; left: 16px; right: 16px; display: flex; height: 46px; gap: 12px; }
  .search-area { flex: 1 1 180px; width: auto; }
  .picker-options { flex: 1 1 auto; width: auto; gap: 12px; }
  .picker-options .circle-scopes { flex: 0 0 132px; width: 132px; min-width: 0; }
  .picker-options .scope-option { padding-inline: 6px; }
  .range-summary { display: none; }
  .planet-dock { left: 16px; right: 16px; bottom: 10px; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 44px auto; gap: 6px 12px; }
  .sphere-controls { grid-column: 1; grid-row: 1; width: auto; }
  .sphere-controls > p { display: none; }
  .sphere-controls > div { width: auto; }
  #sphere-reset, #sphere-rotation { flex: 0 0 auto; }
  .chosen-person { grid-column: 2; grid-row: 1; justify-self: end; width: auto; }
  #chosen-handle { display: none; }
  #chosen-name { max-width: 90px; }
  .circle-tools { grid-column: 1 / -1; grid-row: 2; }
}

/* A selection is attached to the portrait itself, and pauses the orbit. */
.sphere-person-card { position: absolute; z-index: 30; width: 236px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; padding: 17px; border: 1px solid #7a7267; border-radius: 10px; background: #17191cf7; box-shadow: 0 12px 38px #0009; pointer-events: auto; }
.sphere-person-card > strong { display: block; padding-right: 22px; color: #f4f1eb; font-size: 15px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sphere-person-handle { display: block; margin: 3px 0 14px; color: #aaaeb6; font: 12px/1.5 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card-close { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; padding: 0; color: #b8bec8; background: transparent; border: 0; font-size: 21px; line-height: 1; }
.person-card-primary { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 6px; background: #dfb682; color: #201910; text-decoration: none; font-size: 13px; font-weight: 600; }
.person-card-primary:hover { background: #f0c996; }
.person-card-primary[aria-disabled="true"] { opacity: .5; cursor: progress; }
.person-card-secondary { display: block; padding-top: 10px; color: #a6b0bf; text-decoration: none; font-size: 11px; text-align: center; }
body[data-person-card-open="true"] #chosen-person { visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
  .relationship-details { width: calc(100% - 24px); margin-top: 36px; padding: 18px; border-radius: 10px; }
  .interaction-header { gap: 12px; margin-bottom: 20px; }
  .interaction-header h2 { font-size: 20px; }
  #refresh-pair { min-height: 44px; padding-inline: 10px; }
  .relationship-note { font-size: 11px; }
  .dossier-head { gap: 10px; align-items: flex-start; }
  .dossier-actions { gap: 8px; flex-direction: column; align-items: flex-end; }
  .relationship-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .relationship-metrics > div { padding: 13px; }
  .relationship-first time { font-size: 14px; }
  .interaction-record-toolbar { align-items: stretch; gap: 10px; }
  .record-filters { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .record-filter { min-height: 44px; }
  .record-sort select { min-height: 44px; }
  .interaction-record { grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 18px 0; }
  .record-avatar, .record-avatar img { width: 30px; height: 30px; }
  .record-meta { align-items: flex-start; gap: 8px; }
  .record-direction { font-size: 12px; }
  .record-text { font-size: 14px; }
  .record-type { max-width: 98px; }
  .record-more { min-height: 44px; }
  .person-card-primary { min-height: 44px; }
}

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

/* The finished print lifts out of the camera into a quiet finishing desk. */
.result-dialog { width: min(1080px, calc(100vw - 40px)); padding: 0; max-height: calc(100dvh - 40px); border: 1px solid #4a4b4d; border-radius: 20px; background: #111213; overflow: auto; }
.result-dialog::backdrop { background: #020304de; backdrop-filter: blur(10px); }
.result-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; min-height: 570px; }
.result-close { position: absolute; z-index: 3; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #515256; border-radius: 50%; background: #202124; color: #dcdcdc; font: 24px/1 var(--font-ui); }
.result-artwork { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 28px 32px 34px; background: radial-gradient(ellipse at center, #292d30, #151719 68%); border-radius: 20px 0 0 20px; min-width: 0; }
.result-formats { display: flex; gap: 5px; padding: 4px; border: 1px solid #45484c; border-radius: 8px; background: #101113; }
.result-formats button { border: 0; border-radius: 5px; padding: 7px 18px; min-height: 36px; color: #a9adb2; background: transparent; font-size: 12px; }
.result-formats button[aria-pressed="true"] { background: #36393d; color: #f6f6f6; }
.result-dialog .export-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: min(60dvh, 570px); aspect-ratio: auto; overflow: visible; }
.result-dialog .export-preview #export-image { width: auto; height: min(60dvh,570px); max-height: min(60dvh,570px); max-width: 100%; min-width: 0; min-height: 0; object-fit: contain; filter: drop-shadow(0 20px 22px #0009); transform-origin: center; }
.result-dialog .export-preview[data-format="album"] #export-image { width: 100%; height: auto; }
.result-dialog #export-scan { display: none; }
.result-editor { align-self: center; padding: 52px 30px 24px; }
.result-eyebrow { display: block; color: #a7a8ab; font-size: 12px; margin-bottom: 12px; }
.result-editor h2 { color: #f2f2f2; font: 500 28px/1.5 var(--font-ui); letter-spacing: -.6px; }
#result-people { margin-top: 8px; color: #a5a7aa; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.result-styles { padding: 0; margin: 28px 0; border: 0; }
.result-styles legend { margin-bottom: 12px; color: #c4c5c7; font-size: 12px; }
.result-styles button { display: flex; align-items: center; width: 100%; gap: 12px; margin-top: 9px; padding: 12px; min-height: 66px; border: 1px solid #3b3d40; border-radius: 9px; color: #d8d9db; background: #191b1e; text-align: left; }
.result-styles button[aria-pressed="true"] { background: #252422; border-color: #dbb280; }
.result-styles button:hover { border-color: #b6b7ba; }
.result-styles i { width: 31px; height: 39px; flex: 0 0 31px; border: 1px solid #fff4; border-radius: 3px; background: linear-gradient(145deg,#fff,#b5bdc5); box-shadow: 2px 3px 8px #0006; }
.result-styles [data-result-theme="moss"] i { background: linear-gradient(145deg,#f1f5e8,#a7b990); }
.result-styles [data-result-theme="night"] i { background: linear-gradient(145deg,#435768,#101a25); }
.result-styles strong { display: block; font-size: 13px; font-weight: 500; }
.result-styles small { display: block; margin-top: 4px; color: #a2a4a8; font-size: 10px; }
.result-styles b { margin-left: auto; color: #dfb986; opacity: 0; font-size: 14px; }
.result-styles [aria-pressed="true"] b { opacity: 1; }
.result-dialog .dialog-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 0; }
.result-dialog .dialog-actions a { width: 100%; min-height: 46px; }
.result-dialog .dialog-actions a[aria-disabled="true"] { opacity: .45; cursor: wait; }
#result-status { margin-top: 13px; min-height: 34px; color: #aeb1b5; font-size: 11px; line-height: 1.7; }
.result-footnote { margin-top: 8px; color: #85898e; font-size: 10px; line-height: 1.8; }
@media(max-width:767px) {
  .result-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .result-layout { grid-template-columns: 1fr; min-height: 0; }
  .result-artwork { padding: 20px 18px; border-radius: 14px 14px 0 0; gap: 15px; }
  .result-dialog .export-preview { height: min(43dvh,380px); }
  .result-dialog .export-preview #export-image { height: min(43dvh,380px); max-height: min(43dvh,380px); }
  .result-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .result-editor { padding: 22px; }
  .result-editor h2 { font-size: 24px; }
  .result-eyebrow { margin-bottom: 5px; }
  .result-styles { margin: 22px 0; }
  .result-styles button { min-height: 58px; }
  .result-dialog .dialog-actions { grid-template-columns: 1fr 1fr; }
}
@media(prefers-reduced-motion:reduce) { .result-dialog::backdrop { backdrop-filter: none; } }

/* Falao.me: one toolbar for the planet, one control group for the camera. */
@font-face { font-family: "Falao Editorial"; src: url("fonts/newsreader-italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
.topbar { height: 86px; left: 32px; right: 32px; }
.falao-brand { display: inline-flex; align-items: center; gap: 12px; color: #f1e9dc; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.falao-brand > img { width: 52px; height: 52px; flex: 0 0 52px; }
.falao-brand > span { display: flex; flex-direction: column; gap: 5px; }
.falao-brand strong { font: italic 400 31px/1 "Falao Editorial",Georgia,serif; letter-spacing: -.7px; }
.falao-brand > span > span { color: #c1b6a6; font: 400 15px/1.5 "Moments Hand",serif; letter-spacing: 2px; }
.studio-intro #studio-title { font: 400 42px/1.4 "Moments Hand",serif; letter-spacing: 1px; }
.topbar-links { padding: 4px 4px 4px 10px; border: 1px solid #313337; border-radius: 10px; background: #111316b3; }
body[data-has-account="false"] .topbar-links { display: none; }
.people-panel { --planet-top: 180px; --planet-bottom: 100px; }
.planet-toolbar { top: 100px; left: 50%; right: auto; transform: translateX(-50%); width: min(1120px,calc(100% - 48px)); height: 62px; padding: 8px; gap: 12px; border: 1px solid #35383d; border-radius: 12px; background: #111418e8; box-shadow: 0 10px 35px #0003; }
.search-area { flex: 1 1 260px; width: auto; }
.search-box { min-height: 44px; background: #090b0e; border-color: #34373c; }
.picker-options { flex: 0 0 auto; width: auto; gap: 12px; justify-content: center; }
.picker-options .circle-scopes { min-width: 162px; }
.picker-options .scope-option { min-height: 40px; padding-inline: 10px; }
.picker-options .picker-toolbar { flex: 0 0 auto; gap: 0; margin: 0; }
.picker-toolbar .range-summary { display: none; }
.view-switch { gap: 3px; padding: 3px; border: 1px solid #33363b; border-radius: 7px; background: #090a0c99; }
.view-switch button { min-height: 40px; padding: 6px 11px; border: 1px solid transparent; border-radius: 5px; }
.view-switch button[aria-pressed="true"] { background: #2c2e32; border-color: #6a6d725c; }
.sphere-controls { padding-left: 12px; border-left: 1px solid #34373c; }
.sphere-controls > div { gap: 4px; }
.sphere-controls button { min-height: 44px; padding-inline: 9px; background: #1a1d22; border-color: #3b3e44; }
#sphere-zoom-out, #sphere-zoom-in { width: 38px; }
.sphere-controls > p { display: none; }
.planet-dock { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); width: min(720px,calc(100% - 40px)); display: flex; flex-direction: column; gap: 9px; }
.chosen-person { align-self: center; justify-self: center; gap: 12px; }
.chosen-person > div { flex-direction: column; align-items: flex-start; gap: 0; }
#chosen-name { max-width: 230px; }
#chosen-handle { display: block; }
#go-camera { min-height: 44px; background: #dfb783; border-color: #dfb783; color: #221b12; font-weight: 600; }
#go-camera:hover { background: #ecc698; border-color: #ecc698; color: #221b12; }
.circle-tools { justify-content: center; width: auto; gap: 10px; }
#circle-zoom-note { flex: 0 1 auto; text-align: center; }
.circle-image-actions { flex: 0 0 auto; }
.camera-selection { width: auto; max-width: 100%; justify-content: center; padding-inline: 12px; }
.camera-selection > div { flex: 0 1 auto; }
.preview-controls { max-width: 620px; padding-top: 0; border-top: 0; }
.camera-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 14px; border: 1px solid #34373b; border-radius: 10px; background: #111418c9; }
.camera-controls button,.camera-controls a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; color: #c1c5ca; background: #1c2025; border: 1px solid #3a3e44; border-radius: 6px; font: 12px/1.4 var(--font-ui); text-decoration: none; white-space: nowrap; }
.camera-controls button:hover:not(:disabled),.camera-controls a:hover { background: #30363e; border-color: #8b9098; color: #fafafa; }
.camera-controls #sound-toggle::before { display: none; }
.preview-panel .voxel-tools-external { justify-content: center; }
.preview-panel .voxel-tools-external > span { margin: 0; max-width: none; color: #a7aeb7; font-size: 11px; }
.preview-controls > .buttons { max-width: 460px; margin-inline: auto; }
@media(max-width:1100px) {
  .planet-toolbar { width: calc(100% - 32px); gap: 8px; }
  .search-area { flex-basis: 190px; }
  .picker-options { gap: 7px; }
  .picker-options .circle-scopes { min-width: 141px; }
  .picker-options .scope-option { padding-inline: 8px; }
  .view-switch button { padding-inline: 8px; }
  .sphere-controls { padding-left: 7px; }
}
@media(max-width:900px) {
  .people-panel { --planet-top: 230px; }
  .planet-toolbar { top: 94px; height: auto; display: grid; grid-template-columns: 1fr; }
  .search-area { width: 100%; }
  .picker-options { width: 100%; justify-content: center; }
}
@media(max-width:600px) {
  .topbar { left: 16px; right: 16px; height: 80px; gap: 10px; }
  .falao-brand { gap: 6px; }
  .falao-brand > img { width: 44px; height: 44px; flex-basis: 44px; }
  .falao-brand strong { font-size: 26px; }
  .falao-brand > span > span { font-size: 13px; letter-spacing: 1px; }
  .topbar-links { gap: 5px; padding-left: 5px; }
  .topbar-links .featured-person { display: none; }
  .topbar-links #account-toggle { min-height: 40px; padding: 6px 9px; font-size: 11px; }
  .studio-intro #studio-title { font-size: 32px; }
  .people-panel { --planet-top: 278px; --planet-bottom: 116px; --planet-side: 12px; }
  .planet-toolbar { top: 94px; width: calc(100% - 24px); padding: 8px; gap: 8px; }
  .picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .picker-options .circle-scopes { width: 100%; min-width: 0; }
  .picker-options .scope-option { padding-inline: 3px; min-height: 38px; }
  .picker-options .scope-copy strong { font-size: 12px; }
  .picker-options .picker-toolbar,.view-switch { width: 100%; }
  .view-switch { gap: 2px; }
  .view-switch button { flex: 1; padding-inline: 4px; font-size: 11px; min-height: 38px; }
  .sphere-controls { grid-column: 1 / -1; justify-content: center; border-left: 0; padding: 0; }
  .sphere-controls > div { width: 100%; display: grid; grid-template-columns: 44px 44px 1fr 1.3fr; gap: 5px; }
  #sphere-zoom-out,#sphere-zoom-in { width: 44px; }
  .sphere-controls button { padding-inline: 6px; }
  .planet-dock { width: calc(100% - 24px); bottom: 12px; gap: 7px; }
  .chosen-person { width: 100%; gap: 9px; }
  .chosen-person > div { flex: 1; }
  #chosen-name { max-width: 135px; font-size: 12px; }
  #chosen-handle { font-size: 10px; }
  #go-camera { padding-inline: 11px; font-size: 11px; }
  .circle-tools { flex-wrap: wrap; gap: 3px 8px; }
  #circle-zoom-note { font-size: 10px; }
  #retry-portraits { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .camera-controls { gap: 5px; }
  .camera-controls button,.camera-controls a { padding-inline: 9px; font-size: 11px; flex: 1 0 auto; }
}
@media(max-height:520px) and (min-width:601px) {
  .people-panel { --planet-top: 146px; --planet-bottom: 84px; }
  .topbar { height: 64px; }
  .falao-brand > img { width: 42px; height: 42px; flex-basis: 42px; }
  .falao-brand strong { font-size: 25px; }
  .falao-brand > span > span { font-size: 11px; }
  .planet-toolbar { top: 74px; display: flex; height: 60px; }
  .search-area { min-width: 120px; }
  .picker-options { display: flex; width: auto; }
  .picker-options .view-switch { display: none; }
}

@media(max-width:900px) {
  .planet-toolbar { grid-template-rows: 44px auto; align-items: stretch; }
  .picker-options { min-height: 46px; }
}
@media(max-width:600px) {
  .people-panel,.people-panel:has(.chosen-person:not([hidden])) { --planet-top: 280px; --planet-bottom: 108px; }
  .planet-toolbar { grid-template-rows: 44px auto; }
  .picker-options { grid-template-rows: 46px 44px; align-items: stretch; }
  .picker-options .circle-scopes { grid-column: 1; grid-row: 1; }
  .picker-options .picker-toolbar { grid-column: 2; grid-row: 1; }
  .sphere-controls { grid-row: 2; grid-column: 1 / -1; }
}
@media(max-width:359px) {
  .people-panel,.people-panel:has(.chosen-person:not([hidden])) { --planet-top: 332px; }
  .picker-options { grid-template-columns: 1fr; grid-template-rows: 46px 46px 44px; }
  .picker-options .circle-scopes { grid-row: 1; grid-column: 1; }
  .picker-options .picker-toolbar { grid-row: 2; grid-column: 1; }
  .sphere-controls { grid-row: 3; grid-column: 1; }
}
@media(max-height:520px) and (min-width:601px) {
  .people-panel,.people-panel:has(.chosen-person:not([hidden])) { --planet-top:146px; --planet-bottom:84px; }
}

.result-growth { margin: 20px 0; padding: 15px 0; border-top: 1px solid #363a3f; border-bottom: 1px solid #363a3f; }
.result-growth h3 { font: 400 18px/1.5 "Moments Hand",serif; color: #ebe4d8; margin-bottom: 11px; }
.growth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.growth-pair > div { min-width: 0; }
.growth-pair span { display: block; color: #aeb3ba; font: 10px/1.7 var(--font-mono); overflow-wrap: anywhere; }
.growth-pair strong { display: block; color: #efe9df; font: 500 21px/1.8 var(--font-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#growth-time { margin-top: 9px; color: #adb2b9; font-size: 10px; line-height: 1.7; }
.growth-source { color: #8e969f; font-size: 10px; line-height: 1.7; }
.result-editor:has(.result-growth:not([hidden])) { padding-top: 50px; padding-bottom: 22px; }
.result-editor:has(.result-growth:not([hidden])) .result-styles { margin: 19px 0; }
@media(min-width:768px) and (max-height:900px) {
  .result-dialog:has(.result-growth:not([hidden])) .result-layout { min-height: 0; }
  .result-editor:has(.result-growth:not([hidden])) { padding: 34px 28px 18px; }
  .result-editor:has(.result-growth:not([hidden])) h2 { font-size: 24px; }
  .result-editor:has(.result-growth:not([hidden])) .result-eyebrow { display: none; }
  .result-editor:has(.result-growth:not([hidden])) .result-growth { margin: 12px 0; padding: 10px 0; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles { margin: 12px 0; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles button { min-height: 53px; padding: 8px 10px; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles i { width: 25px; height: 31px; flex-basis: 25px; }
  .result-editor:has(.result-growth:not([hidden])) .result-footnote { display: none; }
}

/* One complete camera workspace per viewport. The canvas owns only free space. */
#camera-section {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto;
  width: 100%; max-width: none; height: 100dvh; min-height: 0;
  padding: max(16px,env(safe-area-inset-top)) clamp(16px,3vw,48px) max(16px,env(safe-area-inset-bottom));
  margin: 0; gap: 8px; align-items: stretch; border-top: 1px solid #ffffff1c;
  scroll-margin-top: 0; overflow: clip;
}
#camera-section .camera-heading { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#camera-section .panel-heading { width: 100%; justify-content: center; margin: 0; text-align: center; }
#camera-section .panel-heading h2 { font-size: 23px; line-height: 1.35; }
#camera-section #preview-person { margin: 3px 0 0; font-size: 11px; line-height: 1.5; }
#camera-section .camera-selection { width: auto; max-width: 100%; margin: 0; padding: 0; min-height: 32px; }
#camera-section .visual-stage.voxel-printer {
  display: grid; grid-template-rows: minmax(0,1fr) 22px; grid-template-columns: minmax(0,1fr);
  align-items: stretch; justify-content: stretch; width: 100%; height: 100%; max-width: none;
  min-height: 0; margin: 0; padding: 0; overflow: hidden;
}
#camera-section .webgl-viewport { grid-row: 1; grid-column: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; }
#camera-section .webgl-viewport > canvas { width: 100%; height: 100%; display: block; }
#camera-section .voxel-tools { position: static; grid-row: 2; grid-column: 1; height: 22px; justify-content: center; min-width: 0; }
#camera-section .voxel-tools > span { margin: 0; max-width: none; font-size: 10px; white-space: nowrap; }
#camera-section .webgl-fallback { grid-row: 1; grid-column: 1; height: 100%; min-height: 0; overflow: hidden; }
#camera-section .webgl-fallback .pair-print { width: auto; max-width: 85%; height: 100%; max-height: 100%; }
#camera-section .webgl-fallback #pair-preview { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
#camera-section .preview-controls { align-self: end; justify-self: center; width: min(100%,620px); max-width: 620px; min-width: 0; margin: 0; padding: 0; }
#camera-section .camera-controls { margin: 0 0 8px; padding: 6px; gap: 5px; }
#camera-section .camera-controls button,#camera-section .camera-controls a { min-height: 38px; padding: 7px 12px; }
#camera-section .buttons { width: min(100%,460px); margin: 0 auto; }
#camera-section .primary,#camera-section .secondary { min-height: 44px; padding: 10px 13px; }
#camera-section #builder-status { margin: 6px 0 0; min-height: 18px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#camera-section .print-format { display: none; }
@media(max-width:600px) {
  #camera-section { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); gap: 6px; }
  #camera-section .panel-heading h2 { font-size: 20px; }
  #camera-section .camera-heading { gap: 4px; }
  #camera-section .camera-selection { min-height: 30px; gap: 8px; }
  #camera-section #camera-person-name { font-size: 12px; max-width: 250px; }
  #camera-section #camera-person-handle { font-size: 10px; }
  #camera-section .camera-controls { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; }
  #camera-section .camera-controls a { grid-column: span 3; }
  #camera-section .camera-controls button { grid-column: span 2; }
  #camera-section .camera-controls button,#camera-section .camera-controls a { min-height: 40px; padding: 7px 4px; font-size: 11px; }
  #camera-section .primary,#camera-section .secondary { min-height: 44px; }
}
@media(max-height:520px) and (min-width:601px) {
  #camera-section { padding: 8px 16px; gap: 4px; }
  #camera-section .camera-heading { flex-direction: row; justify-content: center; gap: 18px; }
  #camera-section .panel-heading { width: auto; }
  #camera-section .panel-heading h2 { font-size: 18px; }
  #camera-section #preview-person { display: none; }
  #camera-section .camera-selection { min-height: 30px; }
  #camera-section .preview-controls { width: min(100%,920px); max-width: 920px; display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,260px); gap: 4px 10px; align-items: center; }
  #camera-section .camera-controls { margin: 0; padding: 4px; flex-wrap: nowrap; }
  #camera-section .camera-controls button,#camera-section .camera-controls a { min-height: 36px; padding: 6px 7px; font-size: 11px; }
  #camera-section .buttons { width: 100%; }
  #camera-section #builder-status { grid-column: 1 / -1; margin: 0; font-size: 10px; }
  #camera-section .visual-stage.voxel-printer { grid-template-rows: minmax(0,1fr); }
  #camera-section .voxel-tools { display: none; }
}

/* 近友: a name for everyone's interactions, with Falao.me as the maker. */
.studio-intro #studio-title { font-size: 56px; line-height: 1.2; letter-spacing: 4px; margin-bottom: 12px; }
.studio-intro .product-promise { color: #e2dbd0; font: 400 22px/1.55 "Moments Hand",serif; margin-bottom: 9px; }
.studio-intro .description { margin: 0 0 24px; color: #a9aeb5; font-size: 13px; line-height: 1.9; }
@media(max-width:600px) {
  .studio-intro #studio-title { font-size: 44px; margin-bottom: 9px; }
  .studio-intro .product-promise { font-size: 20px; }
  .studio-intro .description { font-size: 12px; margin-bottom: 20px; }
  .falao-brand > span > span { font-size: 12px; letter-spacing: .5px; }
}
@media(max-height:520px) {
  .studio-intro #studio-title { font-size: 34px; margin-bottom: 5px; }
  .studio-intro .product-promise { font-size: 18px; margin-bottom: 5px; }
  .studio-intro .description { margin-bottom: 12px; font-size: 12px; line-height: 1.6; }
}

#camera-section .portrait-quality { color: #a0a8b2; font-size: 10px; line-height: 1.55; text-align: center; margin: 3px 0 0; overflow-wrap: anywhere; }
@media(max-height:520px) and (min-width:601px) { #camera-section .portrait-quality { grid-column: 1 / -1; margin: 0; } }

.verification-report { margin: 0 0 26px; padding: 14px 16px; background: #171a1d; border: 1px solid #353a40; border-radius: 8px; }
#verification-summary { color: #d4d8dd; font-size: 12px; line-height: 1.8; }
#verification-providers { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; color: #afb9c5; font-size: 11px; }
#verification-time { display: block; margin-top: 6px; color: #a1a9b3; font-size: 10px; }
.record-verification { margin-top: 10px; color: #aab8c6; font-size: 11px; }
.record-verification summary { cursor: pointer; padding-block: 6px; }
.record-verification[data-state="conflict"] summary { color: #ecc08d; }
.verification-observation { padding: 10px 0; border-top: 1px solid #30363d; }
.verification-observation strong,.verification-observation span { display: block; line-height: 1.8; }
.verification-observation p { margin-top: 4px; color: #c1c7cd; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 150px; overflow: auto; }
.record-verification-note { margin: 6px 0; color: #c7b49c; font-size: 11px; line-height: 1.7; }

/* A progressive page: discover first, print after selecting, take home a result. */
body[data-has-selection="false"] #camera-section { display: none; }
body[data-has-account="false"] .source-details { margin-top: 0; }
.planet-guidance { margin: 0; color: #c0c5cc; font: 400 15px/1.6 "Moments Hand",serif; text-align: center; }
body[data-has-selection="true"] .planet-guidance { display: none; }
.person-card-meta { margin: -4px 0 14px; color: #afb7c1; font-size: 10px; line-height: 1.8; }
.interaction-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.interaction-header-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid #51565d; border-radius: 7px; color: #e0e3e7; background: #202328; text-decoration: none; font-size: 12px; }
.interaction-header-actions a:hover { border-color: #b7bdc6; background: #30353c; }
.result-file-label { margin: 0 0 10px; color: #b4bcc5; font-size: 11px; line-height: 1.7; }
.result-dialog .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-dialog .dialog-actions > a { flex: 1 0 100%; width: 100%; margin: 0; background: #dfb783; border-color: #dfb783; color: #221b12; }
.result-dialog .dialog-actions > button { flex: 1; min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid #515963; border-radius: 7px; background: #22272d; color: #e1e5e9; font-size: 12px; white-space: nowrap; }
.result-dialog .dialog-actions > button:hover:not(:disabled) { background: #343b44; border-color: #98a2af; }
.result-dialog #share-result-x { opacity: .55; background: transparent; border-style: dashed; }
.result-share-note { margin-top: 9px; color: #a5aeb8; font-size: 10px; line-height: 1.7; }
.result-save-area { padding-top: 15px; border-top: 1px solid #363b42; }
#result-status { min-height: 32px; margin-top: 10px; }
@media(min-width:768px) {
  .result-dialog { width: min(1120px,calc(100vw - 40px)); }
  .result-layout { grid-template-columns: minmax(0,1fr) 370px; }
  .result-editor { padding-inline: 30px; }
}
@media(max-width:600px) {
  .interaction-header { gap: 12px; flex-direction: column; }
  .interaction-header-actions { align-self: stretch; }
  .interaction-header-actions a,.interaction-header-actions button { flex: 1; min-height: 44px; }
  .planet-guidance { font-size: 13px; }
  .result-dialog .dialog-actions > a { flex: 1 0 100%; }
  .result-dialog .dialog-actions > button { min-height: 46px; }
}
@media(min-width:768px) and (max-height:800px) {
  .result-editor:has(.result-growth:not([hidden])) { padding: 24px 24px 16px; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles { margin: 10px 0; }
  .result-editor:has(.result-growth:not([hidden])) .result-growth { margin: 10px 0; padding: 8px 0; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles small { display: none; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles button { min-height: 42px; padding: 7px 10px; margin-top: 6px; }
  .result-editor:has(.result-growth:not([hidden])) .result-styles i { width: 23px; height: 27px; flex-basis: 23px; }
  .result-save-area { padding-top: 11px; }
}