@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;700;800&display=swap');
[hidden] {
  display: none !important;
}
#reduced-quality {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid #dce0d1;
  border-radius: 8px;
  background: #faf9f4ed;
  font-size: 10px;
  white-space: nowrap;
}
#reduced-quality-state {
  font-size: 9px;
  color: #7c8570;
}
#reduced-quality[aria-pressed='true'] {
  background: #e7ecdc;
  border-color: #8c9b76;
  color: #4f6240;
}
#viewer[data-lighting='night'] #reduced-quality {
  background: #26303aed;
  border-color: #49514f;
  color: #e1dece;
}
#viewer[data-lighting='night'] #reduced-quality[aria-pressed='true'] {
  background: #66583d;
  border-color: #ae8b4d;
  color: #ffdfac;
}
#viewer[data-lighting='night'] #reduced-quality-state {
  color: #d8cda9;
}
#viewer .lighting-toolbar #light-panel {
  top: calc(100% + 8px);
}
@media (max-width: 760px) {
  #viewer .lighting-toolbar {
    display: grid;
    grid-template-columns: auto auto;
    max-width: calc(100% - 24px);
    gap: 6px;
  }
  #viewer .lighting-presets {
    grid-column: 1;
    grid-row: 1;
  }
  #light-panel-toggle {
    grid-column: 2;
    grid-row: 1;
  }
  #reduced-quality {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
  }
  #viewer .north {
    top: 239px;
  }
  #viewer .lighting-toolbar #light-panel {
    width: min(300px, calc(100vw - 24px));
  }
}
.quality-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #7f8a70;
  margin: 12px 0 7px;
}
.quality-label select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid #9aa48d;
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}
.quality-label option {
  background: #faf9f5;
  color: #34412e;
}
.quality-note {
  font-size: 9px;
  line-height: 1.5;
  color: #919985;
  margin: 0 0 16px;
}
.gi-tools {
  border-top: 1px solid #838b7133;
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 9px;
  color: #8e9981;
}
.gi-tools button {
  padding: 0;
  text-align: left;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lighting-toolbar {
  position: absolute;
  right: 25px;
  top: 172px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.lighting-presets {
  display: flex;
  padding: 4px;
  gap: 2px;
  border: 1px solid #dce0d1;
  border-radius: 8px;
  background: #faf9f4ed;
}
.lighting-presets button {
  padding: 7px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 5px;
  font-size: 10px;
  color: #7c8570;
}
.lighting-presets button span {
  font-size: 17px;
  line-height: 1;
}
.lighting-presets button[aria-pressed='true'] {
  background: #e7ecdc;
  color: #4f6240;
}
#light-panel-toggle {
  border: 1px solid #dce0d1;
  border-radius: 8px;
  background: #faf9f4ed;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
#light-panel-toggle[aria-expanded='true'] {
  border-color: #8c9b76;
}
#light-count {
  color: #869276;
  font-variant-numeric: tabular-nums;
  font-size: 9px;
}
#light-panel {
  position: absolute;
  top: 51px;
  right: 0;
  width: 282px;
  background: #faf9f5f5;
  border: 1px solid #dbdfd1;
  border-radius: 11px;
  box-shadow: 0 12px 45px #25331c29;
  padding: 20px;
  max-height: calc(100dvh - 310px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  backdrop-filter: blur(16px);
}
.light-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.light-panel-heading h3 {
  font-family: Manrope, sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 7px 0 0;
}
.light-panel-heading button {
  font-size: 22px;
  color: #889078;
  padding: 2px 0 2px 15px;
}
.light-panel-intro {
  font-size: 10px;
  line-height: 1.6;
  color: #939a87;
  margin: 10px 0 17px;
}
.light-master {
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #e0e3d8;
  padding-bottom: 15px;
  margin-bottom: 16px;
}
.light-master button {
  border: 1px solid #dbe0cf;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 9px;
}
.light-master span {
  margin-left: auto;
  font-size: 8px;
  color: #9a9d8b;
}
.light-dimmer-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #7f8a70;
}
.light-dimmer-label output {
  color: #526941;
  font-variant-numeric: tabular-nums;
}
#light-brightness {
  margin: 12px 0 8px;
}
.light-group h4 {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
  color: #98a087;
  margin: 15px 0 7px;
}
.fixture-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  font-size: 10px;
  text-align: left;
}
.fixture-indicator {
  width: 25px;
  height: 14px;
  display: block;
  border-radius: 8px;
  background: #d7dbcf;
  position: relative;
  flex-shrink: 0;
}
.fixture-indicator:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 2px;
  left: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
}
.fixture-switch[aria-checked='true'] .fixture-indicator {
  background: #8d986b;
}
.fixture-switch[aria-checked='true'] .fixture-indicator:after {
  transform: translateX(11px);
  background: #ffefd1;
}
.light-panel-note {
  font-size: 8px;
  line-height: 1.7;
  color: #9ba38c;
  border-top: 1px solid #e0e3d8;
  margin: 15px 0 0;
  padding-top: 13px;
}
#viewer[data-lighting='night'] {
  background: #18212d;
}
#viewer[data-lighting='night'] .viewer-header {
  color: #e1e4dc;
}
#viewer[data-lighting='night'] .view-tabs,
#viewer[data-lighting='night'] .settings,
#viewer[data-lighting='night'] .icon-button,
#viewer[data-lighting='night'] .lighting-presets,
#viewer[data-lighting='night'] #light-panel-toggle,
#viewer[data-lighting='night'] #light-panel {
  background: #26303aed;
  border-color: #49514f;
  color: #e1dece;
}
#viewer[data-lighting='night'] .lighting-presets button[aria-pressed='true'] {
  background: #66583d;
  color: #ffdfac;
}
#viewer[data-lighting='night'] .lighting-presets button {
  color: #afbaa9;
}
#viewer[data-lighting='night'] .bottom-bar {
  background: #202a34c9;
  border-color: #3b474c;
}
#viewer[data-lighting='night'] .bottom-bar b,
#viewer[data-lighting='night'] .bottom-bar button,
#viewer[data-lighting='night'] .view-meta,
#viewer[data-lighting='night'] .cut-label output,
#viewer[data-lighting='night'] .text-toggle span,
#viewer[data-lighting='night'] .light-dimmer-label output {
  color: #d8cda9;
}
#viewer[data-lighting='night'] .settings-line,
#viewer[data-lighting='night'] .light-panel-note,
#viewer[data-lighting='night'] .light-master {
  border-color: #49514f;
}
#viewer[data-lighting='night'] .settings-line {
  background: #49514f;
}
#viewer[data-lighting='night'] .light-master button {
  border-color: #65705c;
}
#viewer[data-lighting='night'] .fixture-indicator {
  background: #48515b;
}
#viewer[data-lighting='night'] .fixture-switch[aria-checked='true'] .fixture-indicator {
  background: #ae8b4d;
}
#viewer[data-lighting='night'] .dimension,
#viewer[data-lighting='night'] .room-label {
  background: #2b3645e8;
  color: #d6ceae;
  border-color: #596150;
}
@media (max-width: 760px) {
  .lighting-toolbar {
    right: 50%;
    transform: translateX(50%);
    top: 134px;
    gap: 5px;
    white-space: nowrap;
  }
  .lighting-presets button {
    padding: 6px 9px;
  }
  #light-panel-toggle {
    padding: 10px;
  }
  #light-panel {
    width: 280px;
    max-height: min(50dvh, 400px);
    padding: 16px;
  }
  .light-panel-heading h3 {
    font-size: 17px;
  }
  #viewer .north {
    top: 194px;
  }
}
:root {
  font-family: 'DM Sans', sans-serif;
  color: #30372e;
  background: #f3f1eb;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  height: 100dvh;
  overflow: hidden;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #65784c;
  outline-offset: 5px;
}
button {
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
.sidebar {
  width: 310px;
  flex-shrink: 0;
  background: #faf9f5;
  border-right: 1px solid #deded5;
  padding: 31px 27px 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  z-index: 3;
}
.brand {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -1.5px;
}
.brand-mark {
  display: grid;
  place-items: center;
  background: #586749;
  color: #faf9f5;
  width: 31px;
  height: 36px;
  border-radius: 11px 3px 11px 3px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 31px;
  padding-bottom: 5px;
}
.brand-dot {
  align-self: flex-start;
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0;
}
.project-tag {
  font-size: 9px;
  letter-spacing: 1.7px;
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7e8476;
}
.project-tag span,
.live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #72815d;
}
h1 {
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -1.2px;
  font-weight: 500;
  margin: 14px 0;
}
.intro {
  color: #83877b;
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
}
.stats {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  padding: 24px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #e0e2d9;
}
.stats > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.stats > div + div {
  padding-left: 20px;
  border-left: 1px solid #e0e2d9;
}
.stats strong {
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.8px;
}
.stats small {
  font-size: 13px;
}
.stats span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #868a7e;
}
.section-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #8a8e82;
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
}
.room {
  width: 100%;
  display: flex;
  text-align: left;
  align-items: center;
  padding: 12px 10px;
  gap: 12px;
  border-radius: 7px;
  margin: 3px 0;
  transition: background 0.2s;
}
.room:hover {
  background: #efefe7;
}
.room.active {
  background: #e9eddf;
}
.room-icon {
  font-size: 22px;
  font-weight: 400;
  color: #7b886a;
  width: 22px;
}
.room > span:nth-child(2) {
  font-size: 12px;
  font-weight: 550;
}
.room small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #8e9387;
  margin-top: 4px;
}
.arrow {
  margin-left: auto;
  font-size: 16px;
  color: #90997e;
}
.finishes {
  margin-top: auto;
  padding-top: 27px;
}
.swatches {
  display: flex;
  align-items: center;
  gap: 5px;
}
.swatches > span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--swatch);
  border: 3px solid #faf9f5;
  box-shadow: 0 0 0 1px #e3e4db;
}
.swatches p {
  font-size: 9px;
  line-height: 1.6;
  color: #909486;
  margin: 0 0 0 7px;
}
.reference-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 0;
  margin-top: 24px;
  border-top: 1px solid #e0e2d9;
  border-bottom: 1px solid #e0e2d9;
  font-size: 11px;
}
.reference-button span:last-child {
  margin-left: auto;
}
.sidebar-note {
  font-size: 9px;
  line-height: 1.7;
  color: #969b8d;
  margin: 14px 0 0;
}
.sidebar-note button {
  padding: 0;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 47%, #f4f2ec, #e6e5dc);
}
.viewer-header {
  position: absolute;
  left: 32px;
  right: 30px;
  top: 29px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.viewer-header button {
  pointer-events: auto;
}
.eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #919687;
}
h2 {
  font-family: Manrope, sans-serif;
  font-size: 18px;
  letter-spacing: -0.5px;
  font-weight: 500;
  margin: 9px 0 0;
}
.icon-button {
  background: #faf9f3;
  border: 1px solid #dcdfd2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  display: grid;
  place-items: center;
}
.view-tabs {
  position: absolute;
  z-index: 2;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  background: #fbfaf6cc;
  border: 1px solid #dfe0d6;
  padding: 4px;
  display: flex;
  border-radius: 8px;
  box-shadow: 0 4px 20px #31392c05;
  white-space: nowrap;
}
.view-tabs button {
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #858b7a;
}
.view-tabs button span {
  font-size: 10px;
}
.view-tabs .selected {
  background: #566746;
  color: #fff;
}
#canvas-host {
  position: absolute;
  inset: 0;
  touch-action: none;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
#labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.dimension {
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  background: #faf9f2e8;
  color: #687553;
  box-shadow: 0 1px 3px #00000009;
}
.room-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  background: #faf9f2df;
  padding: 7px 10px;
  border: 1px solid #dddccc;
  border-radius: 4px;
  white-space: nowrap;
  color: #56634a;
}
.north {
  position: absolute;
  top: 180px;
  left: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #858d79;
}
.north span {
  font-size: 25px;
}
.view-meta {
  position: absolute;
  left: 32px;
  bottom: 82px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #8a907f;
}
.meta-divider {
  height: 10px;
  width: 1px;
  background: #bbbfb0;
  margin: 0 4px;
}
.settings {
  position: absolute;
  right: 25px;
  bottom: 90px;
  background: #faf9f4ed;
  border: 1px solid #e0e1d6;
  padding: 17px 18px;
  width: 184px;
  border-radius: 9px;
  box-shadow: 0 6px 24px #434c3810;
}
.switch-label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  cursor: pointer;
}
.switch-label input {
  position: absolute;
  opacity: 0;
}
.switch {
  width: 27px;
  height: 16px;
  border-radius: 10px;
  background: #d9ddd0;
  position: relative;
}
.switch:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
}
.switch-label input:checked + .switch {
  background: #65774d;
}
.switch-label input:checked + .switch:after {
  transform: translateX(11px);
}
.switch-label input:focus-visible + .switch {
  outline: 2px solid #65774d;
  outline-offset: 4px;
}
.settings-line {
  height: 1px;
  background: #e4e5dc;
  margin: 14px 0;
}
.cut-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #8d9382;
}
.cut-label output {
  color: #626f53;
  font-variant-numeric: tabular-nums;
}
input[type='range'] {
  width: 100%;
  accent-color: #64764d;
  height: 3px;
  margin: 14px 0 15px;
  cursor: pointer;
}
.text-toggle {
  padding: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 10px;
  color: #7c8470;
}
.text-toggle span {
  color: #4c6337;
}
.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #f8f7f1b8;
  border-top: 1px solid #dbded1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  font-size: 10px;
  color: #909683;
}
.bottom-bar b {
  font-weight: 500;
  color: #78816a;
}
.bottom-bar i {
  font-style: normal;
  margin: 0 9px;
  color: #adb3a2;
}
.bottom-bar button {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #657454;
  font-size: 17px;
}
.bottom-bar button span {
  font-size: 10px;
}
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #efeee6;
  z-index: 4;
}
#loading p {
  font-size: 13px;
  color: #79816e;
}
.loading-mark {
  font: italic 60px Georgia;
  color: #65774d;
}
#toast {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: #34432c;
  color: #fff;
  padding: 11px 18px;
  border-radius: 6px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 6;
}
#toast.visible {
  opacity: 1;
}
#walk-controls {
  position: absolute;
  bottom: 104px;
  left: 32px;
}
#walk-controls button {
  width: 42px;
  height: 42px;
  background: #faf9f5;
  border: 1px solid #d6daca;
  margin-right: 4px;
  border-radius: 5px;
}
dialog {
  border: 1px solid #e0e2d7;
  background: #faf9f5;
  color: #3e4735;
  border-radius: 12px;
  padding: 28px;
  width: min(1100px, 92vw);
  max-height: 90dvh;
  box-shadow: 0 20px 100px #1b261e40;
}
dialog::backdrop {
  background: #26302085;
  backdrop-filter: blur(5px);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.dialog-header h2 {
  font-size: 24px;
}
.gallery-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 25px;
}
#gallery-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#gallery-nav button {
  text-align: left;
  padding: 12px 10px;
  font-size: 12px;
  border-radius: 5px;
}
#gallery-nav button.selected {
  background: #e7ebdd;
}
figure {
  margin: 0;
  min-width: 0;
}
figure img {
  width: 100%;
  height: 60vh;
  object-fit: contain;
  background: #eeede7;
  border-radius: 5px;
}
figcaption {
  font-size: 11px;
  color: #8d9381;
  margin-top: 12px;
}
#notes {
  max-width: 620px;
  font-size: 13px;
  line-height: 1.8;
}
dt {
  font-weight: 600;
  margin-top: 18px;
}
dd {
  margin: 5px 0;
  color: #7a826f;
}
@media (min-height: 900px) {
  .sidebar {
    padding-top: 40px;
  }
  .project-tag {
    margin-top: 50px;
  }
  .stats {
    padding: 30px 0;
  }
  .room {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
@media (max-height: 760px) and (min-width: 761px) {
  .sidebar {
    padding-top: 22px;
  }
  .project-tag {
    margin-top: 22px;
  }
  .stats {
    padding: 17px 0;
    margin-bottom: 16px;
  }
  .room {
    padding: 9px;
  }
  .finishes {
    padding-top: 18px;
  }
  .reference-button {
    margin-top: 16px;
  }
  h1 {
    font-size: 26px;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 265px;
    padding-left: 22px;
    padding-right: 22px;
  }
  h1 {
    font-size: 26px;
  }
  .settings {
    right: 17px;
    width: 165px;
  }
  .bottom-bar {
    padding: 0 20px;
  }
  .bottom-bar i {
    margin: 0 5px;
  }
}
@media (max-width: 760px) {
  body {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    padding: 15px 18px 10px;
    height: 125px;
    overflow: visible;
    display: block;
  }
  .brand {
    font-size: 22px;
    gap: 8px;
  }
  .brand-mark {
    width: 23px;
    height: 27px;
    font-size: 24px;
    border-radius: 8px 2px 8px 2px;
  }
  .brand-dot {
    font-size: 8px;
  }
  .project-tag {
    position: absolute;
    right: 18px;
    top: 25px;
    margin: 0;
    font-size: 8px;
  }
  .sidebar h1,
  .intro,
  .stats,
  .finishes,
  .sidebar-note,
  .rooms .section-label,
  .room small,
  .room-icon,
  .arrow {
    display: none;
  }
  .rooms {
    display: flex;
    overflow: auto;
    gap: 5px;
    margin-top: 15px;
  }
  .room {
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    padding: 10px 12px;
  }
  .room > span:nth-child(2) {
    font-size: 10px;
  }
  .reference-button {
    position: absolute;
    right: 19px;
    top: 47px;
    margin: 0;
    width: auto;
    border: 0;
    padding: 0;
    font-size: 9px;
    gap: 5px;
  }
  .reference-button span {
    display: none;
  }
  #viewer {
    flex: 1;
  }
  .viewer-header {
    left: 20px;
    right: 20px;
    top: 20px;
  }
  .viewer-header h2 {
    font-size: 16px;
  }
  .eyebrow {
    font-size: 7px;
  }
  .view-tabs {
    top: 83px;
  }
  .view-tabs button {
    padding: 8px 12px;
  }
  .north {
    top: 145px;
    left: 20px;
  }
  .settings {
    bottom: 77px;
    right: 12px;
    width: 146px;
    padding: 12px;
  }
  .switch-label {
    font-size: 10px;
  }
  .view-meta {
    left: 15px;
    bottom: 76px;
    font-size: 7px;
    gap: 5px;
  }
  .bottom-bar {
    height: 55px;
    padding: 0 15px;
    font-size: 8px;
  }
  .bottom-bar i {
    margin: 0 3px;
  }
  .bottom-bar button span {
    display: none;
  }
  .bottom-bar button {
    font-size: 20px;
  }
  .dimension {
    font-size: 8px;
  }
  .room-label {
    font-size: 8px;
    padding: 4px 6px;
  }
  .gallery-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #gallery-nav {
    flex-direction: row;
    overflow: auto;
  }
  #gallery-nav button {
    flex-shrink: 0;
    padding: 8px;
    font-size: 10px;
  }
  figure img {
    height: 50vh;
  }
  dialog {
    padding: 20px;
  }
  #toast {
    bottom: 65px;
    max-width: 90%;
    width: max-content;
  }
  .view-meta .meta-divider,
  .view-meta span:last-child {
    display: none;
  }
}
:where(#render-progress) {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid #e0e1d6;
  border-radius: 8px;
  background: #faf9f4ed;
  box-shadow: 0 6px 24px #434c3810;
  color: #667253;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
}
:where(#render-progress)[hidden] {
  display: none;
}
.render-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid #d8ddcf;
  border-top-color: #65774d;
  border-radius: 50%;
  animation: render-spin 0.8s linear infinite;
}
.render-progress-track {
  width: 72px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: #e7e9df;
}
.render-progress-track i {
  display: block;
  width: 38%;
  height: 100%;
  background: #82916a;
  animation: render-progress 1.2s ease-in-out infinite;
}
@keyframes render-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes render-progress {
  from {
    transform: translateX(-110%) scaleX(0.7);
  }
  to {
    transform: translateX(290%) scaleX(1.4);
  }
}
#viewer[data-lighting='night'] #render-progress {
  background: #26303aed;
  border-color: #49514f;
  color: #e1dece;
}
#viewer[data-lighting='night'] .render-progress-track {
  background: #404a48;
}
#viewer[data-lighting='night'] .render-spinner {
  border-color: #48515b;
  border-top-color: #d8cda9;
}
@media (max-width: 760px) {
  :where(#render-progress) {
    bottom: 65px;
    max-width: calc(100% - 24px);
    font-size: 9px;
    padding: 8px 10px;
    gap: 8px;
  }
  .render-progress-track {
    width: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .render-spinner,
  .render-progress-track i {
    animation: none;
  }
  .render-progress-track i {
    width: 100%;
  }
}

/* ---- Mobile and touch layout ------------------------------------------ */
/* Phones move the modes and lighting controls into a bottom cluster within
   thumb reach, leave the middle of the canvas clear, and give the model
   settings the top right, where those controls used to sit. These rules
   come last on purpose: they override the earlier mobile blocks. */
html,
body {
  overscroll-behavior: none;
}
@media (max-width: 760px) {
  #viewer {
    --bar: 52px;
    --cluster: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  }
  .sidebar {
    height: 112px;
    padding: 13px 16px 10px;
  }
  .project-tag {
    top: 21px;
    right: 16px;
  }
  .reference-button {
    top: 44px;
    right: 17px;
  }
  .rooms {
    margin-top: 12px;
    gap: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rooms::-webkit-scrollbar {
    display: none;
  }
  .room {
    scroll-snap-align: start;
  }
  .viewer-header {
    top: 16px;
    left: 16px;
    right: 16px;
  }
  /* Modes: one full-width segmented control along the bottom edge. */
  #viewer .view-tabs {
    top: auto;
    bottom: calc(var(--cluster) + 8px);
    left: 12px;
    right: 12px;
    transform: none;
  }
  #viewer .view-tabs button {
    flex: 1;
    justify-content: center;
    padding: 8px 4px;
  }
  /* Lighting controls sit directly above the modes, still as the two-row
     grid: presets and Lights on the near row, Reduced above them. Dropping
     the sun and moon glyphs keeps the near row narrow enough for 360 px.
     The box is anchored by its bottom edge, so the second row grows up. */
  #viewer .lighting-toolbar {
    top: auto;
    bottom: calc(var(--cluster) + 68px);
    left: 12px;
    right: 12px;
    max-width: none;
    transform: none;
    justify-content: center;
  }
  #viewer .lighting-presets button span {
    display: none;
  }
  /* The grid box spans the width, so let taps through its empty areas. */
  #viewer .lighting-toolbar {
    pointer-events: none;
  }
  #viewer .lighting-presets,
  #viewer #light-panel-toggle,
  #viewer #reduced-quality,
  #viewer .lighting-toolbar #light-panel {
    pointer-events: auto;
  }
  /* The panel becomes a bottom sheet: its toggle is now at the bottom of
     the screen, and 50dvh of dropdown could not hold eleven circuits. */
  #viewer .lighting-toolbar #light-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 72dvh;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -16px 50px #25331c33;
    z-index: 7;
  }
  /* Model settings take the top right, clear of the header's reset button. */
  #viewer .settings {
    top: 70px;
    bottom: auto;
    right: 12px;
    width: 152px;
    padding: 11px 12px;
  }
  #viewer .settings-line {
    margin: 10px 0;
  }
  #viewer .settings input[type='range'] {
    margin: 9px 0 7px;
  }
  #viewer .north {
    top: 70px;
    left: 16px;
  }
  /* The view title already names the mode; the caption only crowds it. */
  #viewer .view-meta {
    display: none;
  }
  /* Walk buttons move to the right edge, clear of the centered cluster. */
  #viewer #walk-controls {
    bottom: calc(var(--cluster) + 130px);
    right: 12px;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #viewer #walk-controls button {
    width: 48px;
    height: 48px;
    margin-right: 0;
  }
  #viewer #render-progress {
    bottom: calc(var(--cluster) + 190px);
    max-width: calc(100% - 96px);
  }
  #viewer #toast {
    bottom: calc(var(--cluster) + 244px);
  }
  #viewer .bottom-bar {
    height: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
    padding: 0 16px env(safe-area-inset-bottom, 0px);
  }
  dialog {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 380px) {
  /* Narrowest phones: the pressed state of the button carries the reading. */
  #reduced-quality-state {
    display: none;
  }
}
@media (max-width: 760px) and (max-height: 700px) {
  .sidebar {
    height: 104px;
    padding-top: 10px;
  }
  .project-tag {
    display: none;
  }
  .reference-button {
    top: 36px;
  }
  .rooms {
    margin-top: 10px;
  }
  #viewer .settings {
    top: 62px;
    padding: 9px 11px;
  }
  #viewer .north {
    display: none;
  }
  /* Short screens cannot spare a row for Reduced; Lights still has it. */
  #viewer #reduced-quality {
    display: none;
  }
}
/* Landscape on a small phone: the top bar and bottom cluster stay, trimmed
   to leave the model a usable band, and the walk buttons move left so they
   clear the settings card at the right. */
@media (max-width: 760px) and (max-height: 520px) {
  #viewer {
    --bar: 44px;
  }
  .sidebar {
    height: 92px;
    padding-top: 8px;
  }
  .sidebar .room {
    min-height: 38px;
  }
  .reference-button {
    top: 32px;
  }
  .rooms {
    margin-top: 8px;
  }
  .viewer-header {
    top: 10px;
  }
  #viewer .settings {
    top: 52px;
    width: 146px;
    padding: 8px 10px;
  }
  #viewer .view-tabs button,
  #viewer .lighting-presets button,
  #viewer #light-panel-toggle {
    min-height: 38px;
  }
  #viewer .lighting-toolbar {
    bottom: calc(var(--cluster) + 60px);
  }
  #viewer #walk-controls {
    bottom: calc(var(--cluster) + 106px);
    left: 16px;
    right: auto;
  }
  #viewer #walk-controls button {
    width: 42px;
    height: 42px;
  }
  #viewer #render-progress,
  #viewer #toast {
    bottom: calc(var(--cluster) + 158px);
  }
  #viewer .lighting-toolbar #light-panel {
    max-height: 82dvh;
    padding-top: 14px;
  }
}
/* Wider short screens keep the side column, but the stacked overlays and the
   panel's tall-screen height assumption do not fit a 400 px viewport. */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 520px) and (pointer: coarse) {
  .sidebar {
    width: 228px;
    padding: 16px max(16px, env(safe-area-inset-left)) 10px;
  }
  .stats,
  .finishes,
  .sidebar-note {
    display: none;
  }
  .viewer-header {
    top: 14px;
    left: 20px;
    right: 20px;
  }
  .view-tabs {
    top: 60px;
  }
  .lighting-toolbar {
    top: 120px;
    right: 18px;
  }
  #light-panel {
    width: 262px;
    max-height: calc(100dvh - 180px);
  }
  #viewer .north,
  #viewer .view-meta {
    display: none;
  }
  #viewer .settings {
    bottom: 56px;
    right: 18px;
    width: 160px;
    padding: 11px 12px;
  }
  #viewer .bottom-bar {
    height: calc(46px + env(safe-area-inset-bottom, 0px));
    padding: 0 18px env(safe-area-inset-bottom, 0px);
  }
  #viewer #walk-controls {
    bottom: 76px;
    left: 20px;
  }
}
/* Touch devices: 44 px minimum targets, and a range tall enough to hit. */
@media (pointer: coarse) {
  .view-tabs button,
  .lighting-presets button,
  #light-panel-toggle,
  #reduced-quality,
  .room,
  .light-master button,
  .fixture-switch,
  #gallery-nav button {
    min-height: 44px;
  }
  .icon-button {
    width: 44px;
    height: 44px;
  }
  .light-panel-heading button {
    min-width: 44px;
    min-height: 44px;
  }
  input[type='range'] {
    height: 28px;
  }
  .switch {
    width: 34px;
    height: 20px;
  }
  .switch:after {
    width: 16px;
    height: 16px;
  }
  .switch-label input:checked + .switch:after {
    transform: translateX(14px);
  }
  .text-toggle {
    min-height: 32px;
    align-items: center;
  }
  .gi-tools button {
    min-height: 32px;
  }
}