:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  --foreground: #f6f2e7;
  --background: #1a211c;
  --panel: #172019ed;
  --border: #aead9140;
  --gold: #e8c78f;
  background: var(--background);
  color: var(--foreground);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
#cc-ranch { position: fixed; inset: 0; background: var(--background); isolation: isolate; }
#cc-scene, #cc-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
#cc-scene canvas, #cc-plan canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#cc-scene.is-panning canvas { cursor: move; }
#cc-scene.is-dragging canvas { cursor: grabbing; }
.viewer-header, .tour-controls, #cc-plan .viz-controls, .viewer-footer {
  position: absolute;
  z-index: 2;
  inset-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  pointer-events: none;
}
.viewer-header { top: max(14px, env(safe-area-inset-top)); justify-content: space-between; }
.brand, button, select, .viewer-footer p, #cc-info, .viewer-notice {
  background: var(--panel);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.brand { padding: 9px 13px; }
.brand { text-decoration: none; pointer-events: auto; }
.brand h1 { color: var(--gold); font: 500 25px/1 Georgia, serif; margin: 0; }
.brand p { margin: 5px 0 0; font-size: 11px; letter-spacing: .03em; }
.view-actions { display: flex; gap: 7px; flex-wrap: wrap; }
button, select {
  font: inherit;
  font-size: 13px;
  min-height: 40px;
  padding: 7px 10px;
  pointer-events: auto;
  cursor: pointer;
}
button:hover, button[aria-pressed="true"] { background: #3e4c37; color: var(--gold); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tour-controls, #cc-plan .viz-controls { top: max(86px, calc(env(safe-area-inset-top) + 72px)); }
.show-plan .tour-controls { display: none; }
.controls-hidden .brand, .controls-hidden .view-actions button:not(#cc-toggle-controls),
.controls-hidden .tour-controls, .controls-hidden #cc-plan .viz-controls,
.controls-hidden #cc-info, .controls-hidden .viewer-footer p:not(:last-child) { display: none; }
.controls-hidden .viewer-header, .controls-hidden .viewer-footer { justify-content: flex-end; }
.guided .viewer-header, .guided .tour-controls,
.guided .viewer-footer p:not(:last-child) { display: none; }
.guided .viewer-footer { justify-content: flex-end; bottom: 6px; inset-inline: 6px; }
.guided .viewer-footer p { font-size: 10px; padding: 4px 6px; }
@media (hover: hover) and (pointer: fine) {
  .controls-hidden #cc-toggle-controls:not(:hover):not(:focus-visible) { opacity: 0; }
}
.form-label { display: inline-flex; gap: 5px; align-items: center; font-size: 0; max-width: 100%; }
select { max-width: 100%; }
[data-move] { min-width: 40px; }
.viewer-footer {
  bottom: max(12px, env(safe-area-inset-bottom));
  justify-content: space-between;
  z-index: 2;
}
.viewer-footer p, #cc-info { margin: 0; padding: 6px 9px; font-size: 11px; }
.touch-help, .show-plan .mouse-help, .show-plan .touch-help { display: none; }
#cc-info { position: absolute; z-index: 2; bottom: 50px; left: 14px; max-width: calc(100% - 28px); }
#cc-tour-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
#cc-tour-status.viewer-notice { clip-path: none; width: auto; height: auto; z-index: 4; top: 44%; left: 14px; right: 14px; padding: 10px; }
@media (pointer: coarse) {
  button, select { min-height: 44px; }
  select { font-size: 16px; }
  .viewer-footer .mouse-help { display: none; }
  .viewer-footer .touch-help { display: block; }
  .show-plan .viewer-footer .touch-help { display: none; }
}
@media (max-width: 640px) {
  .viewer-header, .tour-controls, #cc-plan .viz-controls, .viewer-footer { inset-inline: 8px; gap: 5px; }
  .viewer-header { top: max(8px, env(safe-area-inset-top)); }
  .brand { padding: 8px; }
  .brand h1 { font-size: 21px; }
  .brand p { font-size: 10px; }
  .view-actions { gap: 4px; }
  .view-actions button { padding-inline: 7px; }
  .tour-controls, #cc-plan .viz-controls { top: max(63px, calc(env(safe-area-inset-top) + 55px)); }
  .tour-controls .form-label { flex-basis: 100%; }
  .viewer-footer { justify-content: flex-end; }
  .viewer-footer p { padding: 4px 6px; }
}
@media (max-width: 480px) {
  .brand p { display: none; }
  .view-actions button { font-size: 11px; }
  #cc-fullscreen { font-size: 0; min-width: 34px; }
  #cc-fullscreen::after { content: '⛶'; font-size: 17px; }
  .control-label { display: none; }
  [data-move] { min-width: 34px; padding-inline: 6px; }
}