:root {
  --ink: #e9edf3; --ink2: #9aa5b5; --ink3: #6c7686; --line: rgba(255, 255, 255, 0.09);
  --panel: rgba(13, 16, 21, 0.72); --cyan: #5fd3ff; --brass: #d6a457; --red: #ff3d55;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wdth" 100;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0c10; color: var(--ink); }
#arch3d { position: relative; height: 100vh; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.stage canvas:active { cursor: grabbing; }
.labels { position: absolute; inset: 0; pointer-events: none; }

/* labels in the scene */
.lblwrap { width: 0; height: 0; overflow: visible; }
.lbl { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12px; line-height: 1.25; color: var(--ink2); }
.lbl.callout { padding: 3px 7px 3px 16px; position: relative; color: #cfe9f7; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.lbl.callout::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.lbl.callout.section { font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 112; color: #fff; letter-spacing: 0.01em; }
.lbl.callout.section::before { display: none; }
.lbl.callout.accent { color: var(--cyan); font-weight: 600; }
.lbl.callout.brass { color: var(--brass); }
.lbl.callout.brass::before { background: var(--brass); box-shadow: 0 0 8px var(--brass); }
.lbl.unit { text-align: center; }
.lbl.unit b { display: block; color: #fff; font-size: 13px; font-weight: 700; font-variation-settings: "wdth" 108; }
.lbl.unit small { display: block; color: var(--ink3); font-size: 11px; font-variant-numeric: tabular-nums; }

/* glass panels */
.hud { position: absolute; z-index: 2; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.title { left: 24px; top: 22px; width: 360px; padding: 18px 20px 16px; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 13px; font-weight: 600; }
.title h1 { margin: 2px 0 8px; font-size: 30px; line-height: 1; font-weight: 850; font-variation-settings: "wdth" 125; letter-spacing: -0.01em; }
.lede { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips span { font-size: 12px; color: var(--ink2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.chips b { color: var(--ink); font-weight: 700; }

.controls { right: 24px; top: 22px; width: 400px; padding: 14px 16px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.readout b { display: block; font-size: 22px; font-weight: 800; font-variation-settings: "wdth" 118; font-variant-numeric: tabular-nums; line-height: 1.05; }
.readout span { font-size: 13px; color: var(--ink2); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button, .flows button { font: inherit; font-size: 13px; color: var(--ink2); background: transparent; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: rgba(95, 211, 255, 0.14); color: #fff; }
.strip { display: grid; grid-template-columns: repeat(80, 1fr); gap: 1px; height: 30px; margin: 12px 0 6px; align-items: end; cursor: ew-resize; touch-action: none; }
.tick { height: 14px; padding: 0; border: 0; border-radius: 1px; background: rgba(95, 211, 255, 0.35); cursor: inherit; }
.tick.g { height: 24px; background: var(--brass); }
.tick:hover { background: #fff; }
.tick.on { height: 30px; background: #fff; box-shadow: 0 0 10px var(--cyan); }
.legend { font-size: 11px; color: var(--ink3); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.legend .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.legend .swa { background: rgba(95, 211, 255, 0.55); margin-left: 0; }
.legend .gl { background: var(--brass); }
.flows { justify-content: flex-start; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.flows .send { background: var(--red); color: #fff; font-weight: 700; padding: 7px 12px; margin-right: 4px; box-shadow: 0 0 18px rgba(255, 61, 85, 0.45); }
.flows button[data-flow][aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.flows button:hover, .seg button:hover { color: #fff; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.card { left: 24px; bottom: 44px; width: 380px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 16px 18px 14px; }
.kicker { margin: 0 0 2px; font-size: 12px; color: var(--cyan); }
.kicker:empty { display: none; }
.card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; font-variation-settings: "wdth" 110; line-height: 1.15; }
.card .body p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #c8d0db; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0; font-size: 13px; }
.card dt { color: var(--ink3); }
.card dd { margin: 0; font-variant-numeric: tabular-nums; }
.card .weights { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.card code { font-size: 11.5px; color: var(--brass); background: rgba(214, 164, 87, 0.1); border: 1px solid rgba(214, 164, 87, 0.25); padding: 1px 6px; border-radius: 4px; }
.card .olmo { font-size: 13px; line-height: 1.45; color: var(--ink2); border-left: 2px solid var(--brass); padding-left: 10px; margin: 8px 0; }
.jumpwrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink3); }
.jump { font: inherit; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; background: rgba(13, 16, 21, 0.9); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font-size: 13px; color: var(--ink); }
.hint { position: absolute; right: 24px; bottom: 14px; margin: 0; font-size: 12px; color: var(--ink3); z-index: 2; }

@media (max-width: 860px) {
  .title { left: 12px; right: 12px; top: 12px; width: auto; padding: 12px 14px; }
  .title h1 { font-size: 22px; }
  .lede, .chips, .hint { display: none; }
  .controls { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; padding: 10px 12px; }
  .card { left: 12px; right: 12px; top: 96px; bottom: auto; width: auto; max-height: 30vh; padding: 12px 14px; }
  .card .body p:nth-child(n+2), .card dl, .card .olmo, .card .weights { display: none; }
  .lbl.callout:not(.section) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tick, .seg button { transition: none; } }

/* names under the shelf photos (they fade in when the camera is close) */
.lbl.person { transform: translate(-50%, 0); text-align: center; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9); }
.lbl.person b { display: block; font-size: 14px; font-weight: 700; font-variation-settings: "wdth" 106; }
.lbl.person small { display: block; font-size: 12px; color: var(--brass); font-weight: 600; }
.lbl.person.alt { margin-top: 24px; }
.lbl.photocap { transform: translate(-50%, -100%); color: #fff; font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 108; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95); }
@media (max-width: 860px) { .lbl.person b { font-size: 12px; } .lbl.photocap { font-size: 13px; } }
.lbl.person b, .lbl.person small { white-space: nowrap; }
/* the title card has no controls: let drags and zooms reach the scene behind it (the shelf photos sit there) */
.title { pointer-events: none; }
/* while looking at the shelf photos, the title and info cards step aside */
.title, .card { transition: opacity 0.4s ease; }
#arch3d.photos .title, #arch3d.photos .card { opacity: 0; pointer-events: none; }
.controls { transition: opacity 0.4s ease; }
#arch3d.photos .controls { opacity: 0.12; }
#arch3d.photos .controls:hover, #arch3d.photos .controls:focus-within { opacity: 1; }