/* Studio workspace layout and responsive panels. */
.concept {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  font-optical-sizing: auto;
}
.concept [hidden] {
  display: none !important;
}
.concept button,
.concept a,
.concept select,
.concept input {
  touch-action: manipulation;
}
.concept button:focus-visible,
.concept a:focus-visible,
.concept input:focus-visible,
.concept select:focus-visible {
  outline: 3px solid #c5813f;
  outline-offset: 3px;
}
.concept button:active {
  transform: scale(0.98);
}
.concept .topbar {
  height: 74px;
  gap: 22px;
  position: relative;
  z-index: 5;
}
.concept .brand {
  font-size: 18px;
  letter-spacing: -0.4px;
  flex-shrink: 0;
}
.concept .brand small {
  font-size: 8px;
  letter-spacing: 1.5px;
}
.concept .header-nav {
  margin-left: auto;
  gap: 18px;
  font-size: 11px;
}
.concept .header-right {
  gap: 9px;
}
.concept .header-right #downloadZip {
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  min-height: 40px;
  padding: 9px 12px;
}
.concept .local-pill {
  font-size: 10px;
}
.concept-project {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.concept-project i {
  width: 6px;
  height: 6px;
  background: #7b9c76;
  border-radius: 50%;
}
.concept-project span {
  font-weight: 400;
  opacity: 0.5;
}
.concept .workbench {
  height: calc(100vh - 74px);
  min-height: 640px;
}
.tool-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 22px 8px;
  z-index: 3;
}
.tool-rail button,
.rail-compare {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 61px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.tool-rail button > span,
.rail-compare > span {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
}
.tool-rail small {
  font-size: 10px;
  font-weight: 550;
  letter-spacing: -0.1px;
}
.rail-compare {
  margin-top: auto;
}
.concept .settings-head {
  padding: 26px 24px 22px;
}
.concept .settings-head h1 {
  font-size: 22px;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 10px 0;
}
.concept .settings-head p:last-child {
  font-size: 12px;
  line-height: 1.65;
}
.concept .setting-group {
  border: 0;
  padding: 24px;
}
.concept .section-head {
  display: none;
}
.concept .param {
  margin-bottom: 25px;
}
.concept .param label {
  font-size: 12px;
  line-height: 1.45;
}
.concept .param-top {
  gap: 12px;
}
.concept .param-input {
  padding: 5px 6px;
  flex-shrink: 0;
}
.concept .param input[type="range"] {
  height: 7px;
  margin-top: 12px;
}
.concept .select {
  min-height: 42px;
  font-size: 12px;
}
.concept .fill-toggle {
  min-height: 40px;
}
.concept .right-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: auto;
  padding: 18px;
}
.context-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.context-tabs button {
  flex: 1;
  min-height: 35px;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  color: inherit;
  background: none;
  cursor: pointer;
}
.context-tabs button[aria-pressed="true"] {
  font-weight: 650;
}
.concept .right-panel > section {
  border: 0;
  box-shadow: none;
  padding: 13px 8px;
  background: none;
}
.concept .right-panel h2 {
  font-size: 18px;
  letter-spacing: -0.5px;
}
.concept .right-panel .eyebrow {
  font-size: 8px;
  letter-spacing: 1.5px;
}
.concept .selected-preview {
  margin: 18px 0 22px;
}
.concept .selected-dot {
  width: 30px;
  height: 30px;
}
.concept .material-block {
  margin-top: 22px;
  padding-top: 20px;
}
.concept .panel-list {
  max-height: none;
}
.concept .panel-row {
  min-height: 42px;
}
.concept .canvas-toolbar {
  padding: 17px 50px 17px 18px;
  z-index: 3;
}
.concept .view-tabs {
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
}
.concept .view-tabs .tab {
  font-size: 10px;
  min-height: 37px;
  padding: 8px 10px;
}
.concept .canvas-toolbar > .icon-btn {
  right: 12px;
}
.concept-note {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 22px;
  font-size: 10px;
  flex-shrink: 0;
}
.concept-note strong {
  font-weight: 550;
}
.concept-note span {
  opacity: 0.6;
}
.concept .scene-hint {
  font-size: 9px;
  gap: 10px;
  bottom: 15px;
}
.concept .room-caption strong {
  font-size: 22px;
}
.concept .metrics .metric {
  padding: 14px 5px;
}
.concept .metric > span {
  font-size: 8px;
  letter-spacing: 1px;
}
.concept .metric strong {
  font-size: 21px;
}

/* A / Atelier: a calm, task-based workbench with visible wayfinding. */
.concept-a {
  color-scheme: light;
  --bg: #f4f2ed;
  --surface: #fffefa;
  --surface2: #f6f4ef;
  --border: #e3dfd5;
  --muted: #807b70;
  --text: #2b302b;
  --gold: #946239;
  --gold2: #5a3b22;
  background: #f4f2ed;
  color: #2b302b;
}
.concept-a .topbar {
  background: #fbfaf6;
  border-color: #e3dfd5;
  padding: 0 24px;
}
.concept-a .brand-logo {
  background: #343a32;
  border-color: #343a32;
}
.concept-a .brand strong {
  color: #866344;
}
.concept-a .brand small {
  color: #8b8476;
}
.concept-a .header-nav {
  color: #6f746b;
}
.concept-a .header-right .local-pill {
  color: #738267;
}
.concept-a .header-right #downloadZip {
  background: #3e5745;
  color: #fff;
  border-color: #3e5745;
  box-shadow: none;
}
.concept-a .icon-btn {
  background: #fffdf7;
  border-color: #dcd7ca;
  color: #5a6357;
}
.concept-a .workbench {
  grid-template-columns: 76px 310px minmax(330px, 1fr) 282px;
}
.concept-a .tool-rail {
  background: #eeece5;
  border-right: 1px solid var(--border);
  color: #96978c;
}
.concept-a .tool-rail button:hover,
.concept-a .rail-compare:hover {
  background: #e3e5db;
  color: #445442;
}
.concept-a .tool-rail button.active {
  background: #fffefa;
  color: #3a573d;
  box-shadow: 0 2px 5px #3c45300b;
}
.concept-a .settings-panel {
  background: #fffefa;
  border-right: 1px solid var(--border);
}
.concept-a .eyebrow {
  color: #99896a;
}
.concept-a .param label,
.concept-a .field-label,
.concept-a .fill-toggle {
  color: #50564b;
}
.concept-a .param-input,
.concept-a .select {
  background: #f9f8f3;
  color: #333b30;
  border-color: #dddcd2;
}
.concept-a .param-input input {
  color: #384331;
}
.concept-a .param-unit {
  color: #918d7d;
}
.concept-a .param input[type="range"] {
  accent-color: #657b57;
}
.concept-a .custom-color {
  color: #6a7064;
}
.concept-a .custom-color input {
  background: #f8f7f1;
  border-color: #d0d2c5;
}
.concept-a .custom-color code {
  color: #777e6c;
}
.concept-a .material-block h3 {
  color: #4a5342;
}
.concept-a .fill-toggle input {
  background: #dddcd1;
  border-color: #c4c4b6;
}
.concept-a .fill-toggle input:checked {
  background: #6b805f;
  border-color: #6b805f;
}
.concept-a .button.subtle,
.concept-a .button.minimal {
  background: #f7f6ef;
  border-color: #dddccf;
  color: #58614e;
}
.concept-a .button.outline {
  background: #faf9f2;
  color: #5e674e;
  border-color: #d1d4c5;
}
.concept-a .settings-footer {
  padding: 16px 20px;
}
.concept-a .viewer-panel {
  background: #e9e6dc;
}
.concept-a .canvas-toolbar {
  background: #f2f0e8;
  border-bottom: 1px solid #dcdacf;
}
.concept-a .view-tabs {
  background: #e6e5dc;
  border-color: #d7d9cc;
}
.concept-a .view-tabs .tab {
  color: #858777;
}
.concept-a .view-tabs .tab.active {
  background: #fffef9;
  color: #3f5940;
  box-shadow: 0 1px 4px #404a2f13;
}
.concept-a .scene-gradient {
  background: radial-gradient(ellipse, transparent 65%, #e9e6dc15);
}
.concept-a .metrics {
  background: #f5f3ec;
  border-color: #dcded0;
}
.concept-a .metric {
  border-color: #dfdfd4;
}
.concept-a .metric strong {
  color: #414e38;
}
.concept-a .metric > span {
  color: #8d9483;
}
.concept-a .concept-note {
  background: #f5f3ec;
  border-top: 1px solid #e3e1d5;
  color: #6e795f;
}
.concept-a .right-panel {
  background: #f9f8f2;
  border-left: 1px solid var(--border);
}
.concept-a .context-tabs {
  background: #ecece2;
  color: #8a8f7f;
}
.concept-a .context-tabs button[aria-pressed="true"] {
  background: #fffefa;
  color: #44563d;
  box-shadow: 0 1px 3px #394c2c0f;
}
.concept-a .panel-id,
.concept-a .mini-count {
  background: #edeedf;
  border-color: #d9ddc9;
  color: #637652;
}
.concept-a .panel-filter input {
  background: #fffefa;
  border-color: #d9ddce;
  color: #46543d;
}
.concept-a .panel-row {
  color: #59624f;
}
.concept-a .panel-row.selected {
  background: #e9eddf;
  border-color: #bfcbaa;
}
.concept-a .panel-row small {
  color: #879179;
}
.concept-a .fill-toggle input:focus-visible {
  outline-color: #657b57;
}

/* B / Studio: a spatial canvas with floating tools and a focus mode. */
.concept-b {
  --border: #ffffff12;
  --muted: #9daba5;
  --gold: #d3b98a;
  --text: #eef1e9;
  background: #252c29;
  color: #edf2e9;
}
.concept-b .topbar {
  background: #202824e8;
  border-color: #ffffff0d;
  padding: 0 26px;
  backdrop-filter: blur(24px);
}
.concept-b .brand-logo {
  background: #313c35;
  border-color: #526052;
}
.concept-b .brand small {
  color: #98a99a;
}
.concept-b .header-nav {
  color: #a8b5aa;
}
.concept-b .local-pill {
  display: none;
}
.concept-b .header-right #downloadZip {
  background: #d3b98a;
  color: #302a1f;
  box-shadow: none;
}
.concept-b .workbench {
  position: relative;
  display: block;
  isolation: isolate;
}
.concept-b .viewer-panel {
  position: absolute;
  inset: 0;
  background: #222b26;
}
.concept-b .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
}
.concept-b .canvas-toolbar {
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 50px);
  padding: 0 44px 0 0;
  z-index: 3;
}
.concept-b .view-tabs {
  background: #253029ed;
  border: 1px solid #ffffff1a;
  box-shadow: 0 8px 25px #16221725;
  backdrop-filter: blur(24px);
}
.concept-b .view-tabs .tab {
  color: #b7c0b2;
}
.concept-b .view-tabs .tab.active {
  background: #59674d;
  color: #f1edce;
  box-shadow: none;
}
.concept-b .canvas-toolbar > .icon-btn {
  right: 0;
  top: 6px;
  background: #263129dc;
  border-color: #ffffff19;
  color: #d7dfcd;
  backdrop-filter: blur(16px);
}
.concept-b .tool-rail {
  position: absolute;
  left: 18px;
  top: 25px;
  bottom: 100px;
  width: 60px;
  padding: 7px;
  gap: 6px;
  z-index: 4;
  border-radius: 18px;
  background: #202b24ed;
  border: 1px solid #ffffff0d;
  backdrop-filter: blur(24px);
  color: #9aa88e;
  box-shadow: 0 12px 35px #12241825;
}
.concept-b .tool-rail button,
.concept-b .rail-compare {
  min-height: 57px;
  border-radius: 10px;
}
.concept-b .tool-rail button.active {
  background: #46543d;
  color: #e6dcb2;
}
.concept-b .tool-rail button:hover {
  background: #374630;
}
.concept-b .tool-rail small {
  font-size: 8px;
}
.concept-b .settings-panel {
  position: absolute;
  left: 92px;
  top: 25px;
  bottom: 100px;
  width: 280px;
  z-index: 3;
  border: 1px solid #ffffff16;
  border-radius: 18px;
  background: #243027ef;
  box-shadow: 0 12px 40px #14241920;
  backdrop-filter: blur(24px);
  overflow: hidden;
}
.concept-b .settings-head {
  padding: 23px 20px 19px;
}
.concept-b .settings-head h1 {
  font-size: 20px;
  color: #e9eddd;
}
.concept-b .settings-head p:last-child {
  color: #9fad99;
  font-size: 11px;
}
.concept-b .settings-head .eyebrow {
  font-size: 8px;
  letter-spacing: 1.6px;
}
.concept-b .setting-group {
  padding: 23px 20px;
}
.concept-b .param label,
.concept-b .field-label {
  color: #c3ccbb;
  font-size: 11px;
}
.concept-b .param-input,
.concept-b .select {
  background: #19251e;
  border-color: #43503e;
  color: #d8e1cc;
}
.concept-b .param-input input {
  color: #e2e8d5;
}
.concept-b .param-unit {
  color: #7c8e70;
}
.concept-b .param input[type="range"] {
  accent-color: #b4bd88;
}
.concept-b .button.subtle,
.concept-b .button.minimal,
.concept-b .button.outline {
  background: #2f3c2e;
  border-color: #47533f;
  color: #d1dbc3;
}
.concept-b .field-hint,
.concept-b .colors-note {
  color: #8d9f85;
}
.concept-b .settings-footer {
  padding: 12px;
  gap: 6px;
}
.concept-b .settings-footer .button {
  font-size: 9px;
  padding: 9px 7px;
}
.concept-b .right-panel {
  position: absolute;
  right: 22px;
  top: 25px;
  bottom: 100px;
  width: 268px;
  z-index: 3;
  padding: 15px;
  background: #243027ed;
  border: 1px solid #ffffff16;
  border-radius: 18px;
  backdrop-filter: blur(24px);
  box-shadow: 0 12px 40px #14241920;
}
.concept-b .context-tabs {
  background: #19271d;
  color: #a0b194;
}
.concept-b .context-tabs button[aria-pressed="true"] {
  background: #45553b;
  color: #e6e5c6;
}
.concept-b .right-panel h2 {
  color: #e7eddb;
}
.concept-b .material-block h3 {
  color: #c6d0b9;
}
.concept-b .selected-dot {
  border-color: #cbcea24d;
}
.concept-b .custom-color,
.concept-b .custom-color code {
  color: #96a88b;
}
.concept-b .custom-color input {
  background: #18251a;
  border-color: #485a3e;
}
.concept-b .panel-id,
.concept-b .mini-count {
  background: #34462e;
  color: #c3d0af;
  border-color: #526448;
}
.concept-b .panel-filter input {
  background: #19271d;
  border-color: #44553c;
  color: #dbe6ce;
}
.concept-b .panel-row.selected {
  background: #415735;
  border-color: #809267;
}
.concept-b .panel-row {
  color: #bacbae;
}
.concept-b .metrics {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: 390px;
  border: 0;
  background: #26332cda;
  border-radius: 12px;
  backdrop-filter: blur(20px);
  z-index: 2;
}
.concept-b .metrics .metric {
  padding: 10px 4px;
  border-color: #ffffff11;
}
.concept-b .metric > span {
  font-size: 7px;
  letter-spacing: 0.7px;
  color: #b0bfa6;
}
.concept-b .metric strong {
  font-size: 17px;
  color: #f0efd7;
}
.concept-b .concept-note {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 4px;
  padding: 0;
  text-align: center;
  color: #fcf4dd;
  z-index: 2;
  text-shadow: 0 1px 8px #202b23;
  max-width: 340px;
}
.concept-b .concept-note strong {
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 400;
}
.concept-b .concept-note span {
  font-size: 9px;
  opacity: 0.7;
}
.concept-b .room-caption {
  display: none !important;
}
.concept-b .scene-hint {
  left: 50%;
  bottom: 143px;
  transform: translateX(-50%);
  justify-content: center;
  white-space: nowrap;
  color: #f6efd9;
}
.concept-b .scene-axis {
  display: none;
}
.focus-button {
  border: 1px solid #ffffff21;
  background: #ffffff08;
  color: #d0dcc6;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.concept-b.focus-mode .metrics {
  bottom: 82px;
}
.concept-b.focus-mode .concept-note {
  top: 35px;
}
@media (prefers-reduced-transparency: reduce) {
  .concept-b .settings-panel,
  .concept-b .right-panel,
  .concept-b .tool-rail {
    background: #243027;
    backdrop-filter: none;
  }
  .concept-b .view-tabs,
  .concept-b .metrics {
    background: #26332c;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .concept button:active {
    transform: none;
  }
}
@media (prefers-contrast: more) {
  .concept .param label,
  .concept .field-hint {
    opacity: 1;
  }
  .concept-b .settings-panel,
  .concept-b .right-panel {
    background: #1c281e;
    border-color: #8b9c7c;
  }
}
@media (max-width: 1280px) {
  .concept-project {
    display: none;
  }
  .concept-a .workbench {
    grid-template-columns: 66px 280px minmax(300px, 1fr) 258px;
  }
  .concept-a .setting-group {
    padding: 22px 18px;
  }
  .concept .header-nav {
    font-size: 10px;
    gap: 12px;
  }
  .concept .concept-note span {
    display: none;
  }
  .concept-b .right-panel {
    width: 240px;
    right: 15px;
  }
  .concept-b .settings-panel {
    width: 260px;
    left: 86px;
  }
  .concept-b .concept-note {
    max-width: 270px;
    font-size: 17px;
  }
  .concept-b .concept-note strong {
    font-size: 18px;
  }
}
@media (max-width: 1050px) {
  .concept .local-pill {
    display: none;
  }
  .concept-a .workbench {
    grid-template-columns: 60px 264px minmax(270px, 1fr);
  }
  .concept-a .right-panel {
    position: absolute;
    right: 18px;
    top: 152px;
    bottom: 140px;
    width: 245px;
    z-index: 4;
    border: 1px solid #d7dbca;
    border-radius: 14px;
    box-shadow: 0 10px 30px #26302020;
    display: none;
  }
  .concept-a .viewer-panel {
    grid-column: 3;
  }
  .concept-a .header-nav a:last-child {
    display: none;
  }
  .concept-b .right-panel {
    display: none;
  }
  .concept-b .metrics {
    left: calc(50% + 120px);
  }
  .concept-b .concept-note {
    left: calc(50% + 140px);
  }
  .concept-b .canvas-toolbar {
    left: calc(50% + 120px);
    max-width: calc(100% - 390px);
  }
  .concept-b .view-tabs {
    flex-wrap: wrap;
    max-width: 340px;
  }
  .concept-b .scene-hint {
    display: none;
  }
  .concept-b .settings-panel {
    bottom: 150px;
  }
  .concept-b .tool-rail {
    bottom: 150px;
  }
}
@media (max-width: 760px) {
  .concept .topbar {
    padding: 0 14px;
    height: 66px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .concept .brand {
    font-size: 15px;
    gap: 8px;
  }
  .concept .brand-logo {
    width: 34px;
    height: 34px;
  }
  .concept .brand small {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .concept .header-nav {
    display: none;
  }
  .concept .header-right {
    margin-left: auto;
  }
  .concept .header-right #downloadZip {
    max-width: 112px;
    width: 112px;
    font-size: 10px;
    min-height: 36px;
  }
  .concept #resetAll {
    display: none;
  }
  .concept .workbench {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .concept .tool-rail {
    position: relative;
    inset: auto;
    flex-direction: row;
    width: auto;
    padding: 7px 10px;
    gap: 5px;
    border-radius: 0;
    justify-content: space-around;
    order: 2;
    box-shadow: none;
  }
  .concept .tool-rail button,
  .concept .rail-compare {
    min-width: 45px;
    min-height: 52px;
    flex: 1;
    margin: 0;
  }
  .concept .tool-rail button > span,
  .concept .rail-compare > span {
    font-size: 19px;
  }
  .concept .tool-rail small {
    font-size: 8px;
  }
  .concept .viewer-panel {
    position: relative;
    inset: auto;
    order: 1;
    height: 520px;
    min-height: 0;
    display: flex;
  }
  .concept .scene {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
  }
  .concept .canvas-toolbar {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 10px 45px 10px 10px;
    background: inherit;
  }
  .concept .view-tabs {
    max-width: none;
    flex-wrap: wrap;
    flex: 1;
  }
  .concept .view-tabs .tab {
    font-size: 9px;
    min-height: 32px;
    padding: 6px 8px;
  }
  .concept .canvas-toolbar > .icon-btn {
    top: 15px;
    right: 8px;
  }
  .concept .metrics {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    border-radius: 0;
    background: inherit;
    flex-shrink: 0;
  }
  .concept .settings-panel {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .concept .settings-head {
    padding: 22px 24px 0;
    border: 0;
  }
  .concept .settings-head h1 {
    font-size: 23px;
    margin: 7px 0;
  }
  .concept .settings-head p:last-child {
    font-size: 12px;
    max-width: 330px;
  }
  .concept .settings-scroll {
    overflow: visible;
  }
  .concept .setting-group {
    padding: 25px 24px;
  }
  .concept .param-input {
    padding: 6px;
  }
  .concept .param label {
    font-size: 13px;
  }
  .concept .param input[type="range"] {
    height: 8px;
  }
  .concept .select {
    font-size: 13px;
  }
  .concept .settings-footer {
    padding: 16px 24px;
  }
  .concept .settings-footer .button {
    font-size: 11px;
    min-height: 42px;
  }
  .concept .right-panel {
    display: flex;
    position: relative;
    inset: auto;
    order: 4;
    width: 100%;
    padding: 20px 24px;
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    max-height: none;
  }
  .concept .right-panel > section {
    padding: 12px 0;
  }
  .concept .concept-note {
    display: none;
  }
  .concept .scene-hint {
    left: 16px;
    right: 16px;
    bottom: 15px;
    transform: none;
    white-space: normal;
    display: flex;
    font-size: 8px;
  }
  .concept .scene-hint span:last-child {
    display: none;
  }
  .concept .room-caption strong {
    font-size: 20px;
  }
  .concept .room-caption small {
    max-width: 170px;
  }
  .concept .focus-button {
    display: none;
  }
  .concept-b .viewer-panel {
    height: 520px;
    background: #27332a;
  }
  .concept-b .scene {
    background: #28352b;
  }
  .concept-b .settings-panel {
    background: #243027;
  }
  .concept-b .tool-rail {
    background: #1d2b21;
    border: 0;
  }
  .concept-b .right-panel {
    background: #1f2d22;
  }
  .concept-b .metrics {
    background: #26332c;
  }
  .concept-b .view-tabs {
    background: #1c2a20;
  }
  .concept-b .canvas-toolbar > .icon-btn {
    background: #1c2a20;
  }
  .concept .material-block {
    margin-top: 22px;
  }
  .concept .fill-toggle {
    min-height: 44px;
  }
}
.inspector-toggle {
  border: 1px solid #ffffff21;
  background: #ffffff08;
  color: inherit;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.concept-a .inspector-toggle {
  border-color: #d8dacf;
  background: #f6f5ef;
  color: #5c6952;
}
.concept-a.inspector-hidden .workbench {
  grid-template-columns: 76px 310px minmax(330px, 1fr);
}
@media (min-width: 761px) and (max-width: 1050px) {
  .concept.inspector-open .right-panel {
    display: flex;
  }
  .concept-b.inspector-open .right-panel {
    z-index: 5;
    box-shadow: 0 15px 55px #14241970;
  }
  .concept-a.inspector-open .right-panel {
    display: flex;
  }
  .concept-a.inspector-hidden .workbench {
    grid-template-columns: 60px 264px minmax(270px, 1fr);
  }
}
@media (max-width: 760px) {
  .inspector-toggle {
    font-size: 10px;
    padding: 7px;
    min-height: 36px;
  }
  .concept-a.inspector-hidden .workbench {
    display: flex;
  }
}
@media (max-width: 400px) {
  .concept .brand small {
    display: none;
  }
  .concept .brand {
    font-size: 14px;
  }
  .concept .brand-logo {
    width: 30px;
    height: 30px;
  }
  .concept .header-right #downloadZip {
    width: 98px;
    max-width: 98px;
  }
  .concept .topbar {
    gap: 8px;
  }
}

.advanced-fields {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.advanced-fields summary {
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  min-height: 36px;
  list-style-position: inside;
  color: var(--muted);
}
.advanced-fields[open] summary {
  margin-bottom: 16px;
}
.concept .setting-group > #settingsFrame + .material-block {
  margin-top: 0;
}
.concept .setting-group > .material-block:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 25px;
}
.concept-a .selected-preview {
  color: #7c856e;
}
.concept-b .scene-hint {
  bottom: 158px;
}
@media (max-width: 760px) {
  .concept .select,
  .concept .param-input input {
    font-size: 16px;
  }
  .concept-b .settings-panel,
  .concept-b .right-panel,
  .concept-b .tool-rail {
    backdrop-filter: none;
  }
  .concept-b .scene-hint {
    bottom: 15px;
  }
}
@media (max-width: 760px) {
  .concept .tool-rail {
    position: sticky;
    top: 0;
    z-index: 6;
  }
}