:root {
  color-scheme: light;
  --bg: #FAF7F2;
  --panel: #FFFFFF;
  --ink: #1A1A1A;
  --muted: #6B7280;
  --line: #E8E3DC;
  --accent: #F97316;
  --accent-text: #9A3412;
  --accent-rgb: 249, 115, 22;
  --cyan: #F97316;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); min-width: 320px; }
body.emerging-mode { --accent: #F97316; --accent-rgb: 249, 115, 22; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; color: var(--muted); opacity: .6; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible + span, [tabindex]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.viewer-stage button:focus-visible, .viewer-stage [tabindex]:focus-visible { outline-color: var(--accent); }
button:hover:not(:disabled) { border-color: var(--accent); }
[hidden] { display: none !important; }
.visually-hidden { clip: rect(0,0,0,0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.skip-link { position: fixed; z-index: 1000; top: 0; left: 16px; transform: translateY(-150%); padding: 14px; background: var(--accent); color: var(--ink); }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link:focus { top: 16px; transform: translateY(0); }
.site-shell { max-width: 1264px; margin: auto; padding: 0 32px; }
.site-header { min-height: 96px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--bg); }
.brand { display: inline-flex; gap: 16px; align-items: center; padding: 8px 0; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.snd-mark { width: 48px; height: 39px; flex-shrink: 0; }
.snd-wordmark { display: flex; flex-direction: column; line-height: 1.15; text-transform: uppercase; }
.snd-wordmark strong { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.snd-wordmark > span { font-size: 14px; letter-spacing: .22em; margin-top: 4px; }
.header-actions { display: flex; gap: 24px; align-items: center; font-size: 12px; }
.header-actions > a { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.preview-badge { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); padding: 8px 12px; border: 1px solid #E7C5A9; color: var(--accent-text); background: #FFF6ED; white-space: nowrap; }
.preview-badge i { width: 5px; height: 5px; background: var(--accent); }
.page-intro { display: flex; justify-content: space-between; align-items: center; padding: 40px 0 32px; gap: 24px; }
.eyebrow { color: var(--accent-text); font: 12px var(--mono); letter-spacing: .07em; margin: 0 0 12px; }
.page-intro h1 { font-size: clamp(32px, 3.5vw, 44px); font-weight: 700; letter-spacing: -.025em; margin: 0; line-height: 1.15; text-transform: uppercase; }
.page-intro h1 > span { color: var(--accent); }
.intro-copy { font-size: 16px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
.entry-total { display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.entry-total > strong { font-weight: 700; line-height: 1; font-size: 44px; font-variant-numeric: tabular-nums; }
.entry-total > span { font: 12px/1.65 var(--mono); color: var(--muted); }
.explorer { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(350px, 1fr); border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.viewer-panel { min-width: 0; background: var(--panel); position: relative; }
.viewer-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 12px; position: relative; z-index: 3; border-bottom: 1px solid var(--line); }
.mode-switch { padding: 0; margin: 0; min-width: 0; border: 1px solid #B6B1A9; display: flex; background: #fff; }
.mode-switch label { position: relative; display: block; }
.mode-switch label + label { border-left: 1px solid #B6B1A9; }
.mode-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-switch span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-size: 12px; font-weight: 600; border: 2px solid transparent; color: var(--muted); cursor: pointer; gap: 8px; white-space: nowrap; }
.mode-switch input:checked + span { border-color: var(--ink); background: var(--accent); color: var(--ink); }
.mode-switch input:checked + span:before { content: '✓'; font-size: 13px; }
.scene-status { display: flex; gap: 7px; align-items: center; color: var(--muted); font: 12px var(--mono); }
.scene-status i { width: 5px; height: 5px; background: var(--accent); }
.viewer-stage { height: clamp(490px, 62dvh, 690px); min-width: 0; position: relative; overflow: hidden; isolation: isolate; background: #161A1D; color: #F4EEE7; color-scheme: dark; }
.viewer-stage:before, .viewer-stage:after { content: ''; position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none; top: 12px; border-top: 1px solid #825336; }
.viewer-stage:before { left: 22px; border-left: 1px solid #825336; }
.viewer-stage:after { right: 22px; border-right: 1px solid #825336; }
.scene-coordinates { position: absolute; top: 24px; left: 40px; right: 40px; display: flex; justify-content: space-between; font: 12px var(--mono); color: #BCA897; z-index: 3; pointer-events: none; }
.stage-ruler { position: absolute; top: 72px; bottom: 64px; width: 7px; opacity: .5; background: repeating-linear-gradient(to bottom,#825336 0,#825336 1px,transparent 1px,transparent 13px); pointer-events: none; z-index: 2; }
.ruler-left { left: 22px; }.ruler-right { right: 22px; }
.hologram-scene { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; }
.is-ready:not(.is-static) .hologram-scene { opacity: 1; visibility: visible; }
.hologram-scene canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.static-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.is-ready:not(.is-static) .static-layer { opacity: 0; visibility: hidden; pointer-events: none; }
.static-worker { position: relative; width: 100%; height: 100%; max-width: none; aspect-ratio: 2 / 3; flex-shrink: 0; }
.static-worker img { width: 100%; height: 100%; object-fit: contain; user-select: none;  }
.static-hotspot { position: absolute; background: transparent; border: 0; width: 44px; height: 44px; min-height: 44px; min-width: 44px; transform: translate(-50%,-50%); font: 12px var(--mono); color: #FFD8BD; padding: 0; white-space: nowrap; }
.static-hotspot > span { position: absolute; top: 50%; left: calc(50% + 18px); transform: translateY(-50%); text-align: left; }
.static-hotspot i { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 12px; width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; background: #2E221B; }
.static-hotspot[aria-pressed='true'] i { background: var(--accent); }
.hotspot-head { top: 10%; left: 50%; }.hotspot-neck { top: 19%; left: 43%; }.hotspot-chest { top: 36%; left: 50%; }.hotspot-hands { top: 57%; left: 27%; }.hotspot-feet { top: 91%; left: 60%; }
.hotspot-neck > span, .hotspot-hands > span { left: auto; right: calc(50% + 18px); text-align: right; }
.hotspot-hands > span { width: 72px; white-space: normal; line-height: 1.4; }
.stage-caption { position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 3; pointer-events: none; color: #C7B5A7; font-size: 12px; }
.stage-tag { color: #AE9685; font: 12px var(--mono); }
.view-controls { display: flex; justify-content: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.view-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #C9C2B9; background: #fff; padding: 0 12px; min-height: 44px; color: var(--ink); font-size: 12px; }
.view-controls button[aria-pressed='true'] { border-color: var(--accent); background: #FFF5EB; color: var(--accent-text); }
.control-icon { font-size: 17px; color: inherit; }
.categories { padding: 24px 16px; background: #fff; }
.category-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; font: 12px/1.6 var(--mono); color: var(--muted); }
.category-heading > span:first-child { color: var(--ink); }
.category-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.category-nav button { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; min-height: 48px; font-size: 12px; background: #fff; border: 1px solid #C9C2B9; text-align: left; gap: 8px; color: var(--ink); min-width: 0; position: relative; }
.category-nav button small { color: var(--muted); font: 12px var(--mono); min-width: 16px; text-align: right; }
.category-nav button[aria-pressed='true'] { border-color: var(--accent); background: #FFF5EB; border-left-width: 4px; padding-left: 9px; font-weight: 600; }
.category-nav button[aria-pressed='true'] small { color: var(--accent-text); }
.equipment-panel { border-left: 1px solid var(--line); background: #fff; min-width: 0; position: relative; }
.empty-panel { padding: 32px; min-height: 100%; }
.panel-coordinate { font: 12px/1.6 var(--mono); color: var(--muted); }
.empty-symbol { font-size: 56px; color: var(--accent); font-weight: 400; line-height: 1; margin: 40px 0 24px; }
.empty-panel h2 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.empty-panel > p { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 32px; }
.empty-guide { display: flex; align-items: start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.empty-guide > span { font: 12px var(--mono); color: var(--accent-text); padding-top: 3px; }
.empty-guide p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.65; }
.empty-guide strong { color: var(--ink); font-weight: 600; }
.detail-panel { padding: 24px 24px 0; }
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.detail-header .eyebrow { margin-bottom: 8px; }
.collection-badge { display: inline-block; padding: 5px 8px; border: 1px solid #B6B1A9; color: var(--ink); background: #FAF7F2; font: 12px var(--mono); }
.emerging-mode .collection-badge { border-style: dashed; }
.close-button { width: 44px; height: 44px; border: 1px solid transparent; background: transparent; font-size: 28px; font-weight: 400; color: var(--muted); align-self: flex-start; margin: -8px -8px 0 0; }
.item-position { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 12px var(--mono); }
.item-position > span:first-child { color: var(--accent-text); }
#itemName { font-size: clamp(24px,2.2vw,28px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; text-transform: uppercase; margin: 16px 0; overflow-wrap: anywhere; }
.item-description { font-size: 14px; line-height: 1.75; color: var(--ink); margin: 0 0 24px; }
.assessment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.field-label { display: block; font: 12px/1.6 var(--mono); color: var(--muted); margin-bottom: 12px; }
.assessment-grid strong { font-size: 14px; font-weight: 600; line-height: 1.55; display: block; color: var(--ink); }
.entry-facts { margin: 0; }
.entry-facts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.entry-facts dt { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.entry-facts dd { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.source-details, .rating-details { font-size: 14px; line-height: 1.7; border-bottom: 1px solid var(--line); }
.source-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); font-weight: 600; min-height: 64px; cursor: pointer; list-style: none; }
.source-details summary:before { content: '+'; color: var(--accent-text); font-size: 20px; }
.source-details[open] summary:before { content: '−'; }
.source-details summary > span:first-child { flex: 1; }
.source-count { color: var(--muted); font: 12px var(--mono); font-weight: 400; }
.source-content { color: var(--muted); padding: 0 0 24px; }
.source-content p { margin: 0 0 16px; }
.source-content .evidence-status { color: var(--ink); font-size: 14px; font-weight: 600; }
.source-content .review-date { color: var(--muted); font: 12px/1.6 var(--mono); }
.source-content ul { padding-left: 18px; margin: 16px 0 24px; }
.source-content li { padding: 4px 0; }
.source-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #ADA69B; overflow-wrap: anywhere; }
.source-content a:hover { text-decoration-color: var(--ink); }
.rating-details summary { min-height: 48px; cursor: pointer; display: flex; align-items: center; font-size: 12px; color: var(--muted); }
.rating-details p { color: var(--muted); font-size: 14px; }
.entry-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 24px 0; }
.entry-pagination button { border: 1px solid #B6B1A9; background: #fff; min-height: 44px; min-width: 96px; padding: 8px 12px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.entry-pagination > span { font: 12px var(--mono); color: var(--muted); }
.empty-category { padding: 32px 0 64px; }
.empty-category > span { font-size: 32px; font-weight: 400; color: var(--accent-text); }
.empty-category h2 { font-size: 24px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.empty-category p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.empty-category button { font-size: 14px; font-weight: 600; min-height: 44px; padding: 12px 16px; background: var(--accent); color: var(--ink); border: 1px solid var(--accent); margin-top: 16px; }
.load-message { font: 12px/1.7 var(--mono); color: var(--muted); display: flex; gap: 16px; align-items: center; min-height: 48px; padding: 8px 0; }
.load-message button { min-height: 44px; border: 1px solid var(--ink); background: #fff; padding: 8px 16px; }
.load-message.load-error { color: #B42318; }
.page-footer { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding: 16px 0 32px; line-height: 1.65; }
.page-footer p { margin: 0; }
.page-footer a { font-size: 12px; color: var(--ink); display: flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; }
.footer-dot { display: inline-block; width: 5px; height: 5px; background: var(--accent); margin-right: 8px; }
.page-footer .preview-note { font: 12px/1.6 var(--mono); color: var(--muted); }
.page-footer .comparison-link { color: var(--muted); font-size: 12px; }
.noscript-message { padding: 24px; border: 1px solid var(--line); color: var(--ink); background: #fff; margin: 24px; font-size: 14px; line-height: 1.7; }
.noscript-message a { text-decoration: underline; }
@media (min-width: 1400px) { .viewer-stage { height: clamp(540px,66dvh,730px); }.detail-panel { padding: 32px 32px 0; } }
@media (max-width: 1100px) {
  .site-shell { padding: 0 24px; }.entry-total { display: none; }.explorer { grid-template-columns: minmax(0,1.12fr) minmax(330px,1fr); }.scene-status { display: none; }.viewer-topbar { justify-content: center; }.category-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }.viewer-stage { height: 570px; }.stage-tag { display: none; }.stage-caption { justify-content: center; }.category-heading { flex-direction: column; gap: 4px; }.view-controls { gap: 6px; padding: 12px 8px; }.view-controls button { padding: 8px; font-size: 12px; gap: 6px; }.header-actions { gap: 16px; }.page-footer a { margin-left: 0; }.page-footer .preview-note { width: 100%; }
}
@media (max-width: 760px) {
  .site-shell { padding: 0 16px; }.site-header { min-height: 112px; gap: 16px; padding: 8px 0; }.brand { gap: 12px; }.snd-mark { width: 40px; height: 32px; }.snd-wordmark strong { font-size: 14px; }.snd-wordmark > span { font-size: 12px; letter-spacing: .18em; }.header-actions { flex-direction: column; gap: 0; align-items: flex-end; font-size: 12px; }.header-actions > a { min-height: 44px; }.header-actions .live-link { display: none; }.preview-badge { font-size: 12px; padding: 6px 8px; gap: 6px; }.page-intro { padding: 32px 0 24px; }.page-intro h1 { font-size: 34px; max-width: 440px; }.eyebrow { font-size: 12px; letter-spacing: .04em; line-height: 1.6; }.intro-copy { font-size: 14px; line-height: 1.6; margin-top: 16px; max-width: 400px; }.explorer { display: block; overflow: visible; }.viewer-panel { overflow: hidden; }.viewer-topbar { padding: 16px 12px; justify-content: center; }.mode-switch { width: 100%; max-width: 360px; }.mode-switch label { flex: 1; }.mode-switch span { padding: 0 12px; font-size: 14px; }.viewer-stage { height: clamp(500px,72dvh,660px); }.scene-coordinates { left: 28px; right: 28px; font-size: 12px; top: 24px; }.stage-ruler { top: 64px; bottom: 64px; }.ruler-left { left: 12px; }.ruler-right { right: 12px; }.viewer-stage:before { left: 12px; }.viewer-stage:after { right: 12px; }.stage-caption { left: 16px; right: 16px; font-size: 12px; text-align: center; justify-content: center; }.stage-tag { display: none; }.view-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 12px; gap: 8px; }.view-controls button { padding: 8px 5px; font-size: 12px; gap: 4px; line-height: 1.5; min-width: 0; }.control-icon { font-size: 16px; }.categories { padding: 24px 16px; }.category-heading { gap: 8px; margin-bottom: 16px; }.category-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.category-nav button { font-size: 14px; padding: 8px 12px; min-height: 48px; }.category-nav button small { font-size: 12px; }.equipment-panel { border-left: 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }.detail-panel { padding: 24px 24px 0; }.detail-header { margin-bottom: 24px; }#itemName { font-size: 26px; max-width: 440px; }.item-description { font-size: 14px; }.entry-facts dd { font-size: 14px; }.source-content { font-size: 14px; }.entry-pagination { padding: 24px 0; }.entry-pagination button { min-width: 96px; }.empty-panel { padding: 24px; }.empty-symbol { margin: 24px 0 16px; }.empty-panel h2 { font-size: 24px; }.empty-guide { padding: 16px 0; }.page-footer { font-size: 12px; line-height: 1.7; padding: 16px 0 24px; gap: 8px; }.page-footer p:first-child { max-width: 400px; }.page-footer a { width: 100%; min-height: 44px; }.load-message { font-size: 12px; line-height: 1.7; min-height: 56px; }.static-worker { max-width: none; }
}
@media (max-width: 390px) {
  .site-shell { padding: 0 16px; }.site-header { gap: 12px; }.brand { gap: 8px; }.snd-mark { width: 36px; height: 29px; }.snd-wordmark strong { font-size: 13px; }.snd-wordmark > span { font-size: 12px; letter-spacing: .12em; }.preview-badge { padding: 6px; gap: 5px; }.page-intro h1 { font-size: 32px; }.view-controls { padding: 12px 8px; gap: 6px; }.view-controls button { font-size: 12px; padding: 8px 4px; gap: 4px; }.detail-panel { padding-left: 20px; padding-right: 20px; }.category-nav button { padding: 8px 10px; }.assessment-grid { gap: 16px; }.entry-pagination button { min-width: 88px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }