:root {
  color-scheme: light;
  --paper: #f0ece3;
  --paper-solid: #fffdf8;
  --paper-glass: rgba(255, 253, 248, 0.945);
  --ink: #17191c;
  --muted: #5d6367;
  --line: rgba(23, 25, 28, 0.16);
  --line-strong: rgba(23, 25, 28, 0.31);
  --copper: #c95843;
  --copper-dark: #8b3325;
  --green: #236b4c;
  --night: #172128;
  --shadow: 0 24px 70px rgba(7, 13, 18, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, canvas:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.canvas-shell, #scene, .scene-vignette, .interior-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.canvas-shell {
  background:
    radial-gradient(circle at 76% 19%, rgba(255, 205, 145, 0.34), transparent 31%),
    linear-gradient(180deg, #365866 0%, #61767c 43%, #aa9d88 72%, #d8bd94 100%);
}
#scene {
  display: block;
  touch-action: none;
  cursor: grab;
}
#scene:active { cursor: grabbing; }
.canvas-shell.is-hovering-entry #scene { cursor: pointer; }
.scene-vignette {
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 32%, rgba(255, 226, 181, 0.13), transparent 38%),
    linear-gradient(90deg, rgba(12, 23, 28, 0.11), transparent 48%),
    linear-gradient(0deg, rgba(23, 31, 33, 0.18), transparent 34%);
}

/* The actual interior is preloaded behind the exterior. It is revealed only after
   the camera physically crosses the aligned doorway. No opaque transition card. */
.interior-layer {
  z-index: 24;
  opacity: var(--interior-reveal, 0);
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  transition: opacity 90ms linear, visibility 0s linear 100ms;
}
.interior-layer.is-transitioning,
.interior-layer.is-visible {
  visibility: visible;
  transition-delay: 0s;
}
.interior-layer.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.interior-layer iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
}
.inside-toolbar {
  position: absolute;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  max-width: calc(100vw - 20px);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 6px;
  border: 1px solid rgba(23, 25, 28, 0.18);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  backdrop-filter: blur(18px);
}
.toolbar-button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--copper);
  background: var(--copper);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}
.toolbar-button--magnet {
  border-color: rgba(23, 25, 28, 0.22);
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
}
.toolbar-button--magnet:hover, .toolbar-button--magnet:focus-visible {
  border-color: var(--green);
  color: var(--green);
}
.toolbar-button--magnet[aria-pressed="true"] {
  border-color: var(--green);
  background: rgba(44, 104, 94, 0.12);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(44, 104, 94, 0.18);
}
.toolbar-button--magnet span { color: var(--green); }
.inside-proof {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}
.inside-proof i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e9b68;
  box-shadow: 0 0 0 4px rgba(46, 155, 104, 0.14);
}
.toolbar-link {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  text-underline-offset: 3px;
}

#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: opacity 300ms ease, visibility 300ms ease;
}
#loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--copper);
  border-radius: 50%;
  animation: loading-turn 850ms linear infinite;
}
@keyframes loading-turn { to { transform: rotate(360deg); } }

.topbar {
  position: fixed;
  z-index: 34;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 20px 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.brand, .blueprint-toggle, .product-card, .view-control, .blueprint-panel, .entry-status { pointer-events: auto; }
.brand {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-glass);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18px) saturate(112%);
  text-decoration: none;
}
.brand-glyph {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  background: var(--copper);
  transform: rotate(45deg);
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08);
}
.brand-copy { display: grid; gap: 4px; }
.brand strong { font-size: 12px; line-height: 1; letter-spacing: 0.16em; }
.brand small { color: var(--muted); font-size: 11px; line-height: 1; letter-spacing: 0.09em; }
.blueprint-toggle {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-glass);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18px) saturate(112%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.blueprint-toggle:hover, .blueprint-toggle[aria-expanded="true"] { border-color: var(--copper); color: var(--copper-dark); }
.blueprint-icon {
  width: 18px;
  height: 13px;
  display: inline-block;
  border: 2px solid currentColor;
  position: relative;
}
.blueprint-icon::before, .blueprint-icon::after { content: ""; position: absolute; background: currentColor; }
.blueprint-icon::before { width: 2px; height: 9px; top: 0; left: 4px; }
.blueprint-icon::after { width: 14px; height: 2px; top: 4px; left: 0; }

.interface {
  position: fixed;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.product-card {
  position: absolute;
  left: 20px;
  bottom: 82px;
  width: min(352px, calc(100vw - 40px));
  padding: 20px;
  border: 1px solid rgba(23, 25, 28, 0.18);
  border-top: 4px solid var(--copper);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.955);
  box-shadow: 0 28px 80px rgba(17, 28, 34, 0.22);
  backdrop-filter: blur(22px) saturate(112%);
  transition: opacity 180ms ease, transform 180ms ease;
}
.eyebrow {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--copper-dark);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.eyebrow > span { width: 22px; height: 1px; background: var(--copper); }
.product-card h1, .no-webgl h1 {
  margin: 0;
  max-width: 318px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 4.05vw, 57px);
  line-height: 0.87;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.lede {
  margin: 14px 0 13px;
  max-width: 315px;
  color: #35393d;
  font-size: 13.5px;
  line-height: 1.47;
  font-weight: 620;
}
.proof-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.proof-row li {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.56);
  text-align: center;
  font-size: 11px;
  line-height: 1.12;
  font-weight: 850;
}
.qualification {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.card-actions { margin-top: 15px; display: grid; grid-template-columns: 1fr; gap: 9px; }
.primary-action, .icon-button, .toolbar-button { border-radius: 1px; }
.primary-action {
  min-height: 50px;
  border: 1px solid var(--copper);
  border-radius: 10px;
  background: var(--copper);
  color: #fff;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 870;
  box-shadow: 0 11px 24px rgba(147, 49, 34, 0.22);
  transition: transform 140ms ease, background 140ms ease;
}
.primary-action:hover { background: var(--copper-dark); transform: translateY(-1px); }
.primary-action[aria-disabled="true"], .primary-action:disabled { opacity: 0.55; cursor: default; transform: none; }
.secondary-link {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 830;
  text-underline-offset: 3px;
}
.representation-link {
  margin: 13px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(95, 100, 104, 0.48);
  text-underline-offset: 3px;
  font-size: 11px;
  line-height: 1.4;
}
.representation-link:hover { color: var(--ink); }

.view-control {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, auto);
  border: 1px solid var(--line);
  background: var(--paper-glass);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(115%);
  border-radius: 13px;
  overflow: hidden;
}
.view-control button {
  min-width: 132px;
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 0 17px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.view-control button:last-child { border-right: 0; }
.view-control button span { margin-right: 7px; color: var(--muted); font-size: 11px; }
.view-control button:hover, .view-control button.is-active { background: var(--night); color: #f7f2ea; }
.view-control button.is-active span { color: #f4a08d; }
.interaction-hint {
  position: absolute;
  right: 22px;
  bottom: 26px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: rgba(14, 20, 25, 0.69);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  line-height: 1.2;
  backdrop-filter: blur(12px);
}
.interaction-hint > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #72d5a5;
  box-shadow: 0 0 0 4px rgba(114, 213, 165, 0.14);
}

.scene-magnet {
  position: absolute;
  z-index: 27;
  width: max-content;
  min-width: 172px;
  max-width: min(220px, calc(100vw - 24px));
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  background: rgba(16, 24, 29, 0.91);
  color: #fffdf8;
  box-shadow: 0 16px 42px rgba(3, 9, 13, 0.28);
  backdrop-filter: blur(16px) saturate(118%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.scene-magnet:hover { border-color: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(3,9,13,.36); }
.scene-magnet.is-ready { border-left-color: var(--copper); background: rgba(29, 23, 21, 0.94); }
.scene-magnet__mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #78d0a2;
  font-size: 16px;
  box-shadow: inset 0 0 0 4px rgba(120, 208, 162, 0.08);
}
.scene-magnet.is-ready .scene-magnet__mark { color: #f3a18d; }
.scene-magnet > span:last-child { min-width: 0; display: grid; gap: 2px; }
.scene-magnet small { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.scene-magnet strong { max-width: 165px; overflow-wrap: anywhere; font-size: 11px; line-height: 1.2; }

.process-guide {
  position: absolute;
  z-index: 26;
  top: 88px;
  right: 20px;
  width: min(330px, calc(100vw - 40px));
  padding: 16px 17px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-top: 3px solid var(--green);
  border-radius: 14px;
  background: rgba(17, 26, 31, 0.9);
  color: #fffdf8;
  box-shadow: 0 22px 58px rgba(5, 11, 15, .3);
  backdrop-filter: blur(18px) saturate(114%);
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.process-guide[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
.process-guide p { margin: 0 0 7px; color: #78d0a2; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.process-guide h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.03; }
.process-guide > span { display: block; margin-top: 9px; color: rgba(255,255,255,.74); font-size: 11.5px; line-height: 1.45; }
.process-guide button {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}
.process-guide button:hover { border-color: #78d0a2; background: rgba(120,208,162,.1); }

.measurement-layer {
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 150ms, 0s;
  transition-delay: 0s, 150ms;
}
body.blueprint-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 24, 29, 0.34);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
body.blueprint-open .measurement-layer { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
#dimensionOverlay, #dimensionLabels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#dimensionOverlay line { stroke: #ff9a82; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dimension-label {
  position: absolute;
  left: 0;
  top: 0;
  max-width: min(230px, calc(100vw - 20px));
  padding: 7px 9px;
  border: 1px solid rgba(255, 122, 93, 0.9);
  background: rgba(250, 247, 241, 0.97);
  box-shadow: 0 8px 22px rgba(7, 12, 16, 0.17);
  color: var(--ink);
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  will-change: transform;
}

.blueprint-panel {
  position: fixed;
  z-index: 62;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(590px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--copper);
  border-radius: 16px;
  background: rgba(250, 247, 241, 0.992);
  box-shadow: 0 30px 90px rgba(4, 9, 13, 0.38);
  backdrop-filter: blur(24px);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(24px);
  transition-property: opacity, transform, visibility;
  transition-duration: 180ms, 180ms, 0s;
  transition-delay: 0s, 0s, 180ms;
}
.blueprint-panel[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.blueprint-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.blueprint-head h2 { margin: 0; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.02; letter-spacing: -0.04em; }
.icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}
.icon-button:hover { border-color: var(--copper); color: var(--copper-dark); }
.blueprint-intro { margin: 16px 0 17px; color: #404449; font-size: 13px; line-height: 1.55; }
.blueprint-drawings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blueprint-drawings figure { margin: 0; }
.blueprint-drawings svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(35, 107, 76, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 107, 76, 0.055) 1px, transparent 1px),
    #fbf9f4;
  background-size: 12px 12px;
}
.blueprint-drawings figcaption { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.42; }
.blueprint-drawings figcaption b { color: var(--ink); }
.bp-envelope { fill: rgba(40, 65, 77, 0.07); stroke: #172126; stroke-width: 2.2; }
.bp-bay { fill: rgba(201, 93, 71, 0.08); stroke: #c95d47; stroke-width: 2; }
.bp-corridor { fill: rgba(35, 107, 76, 0.1); stroke: #236b4c; stroke-width: 2; }
.bp-neighbor { fill: rgba(63, 83, 91, 0.08); stroke: #6c7377; stroke-width: 1.5; }
.bp-glass { fill: none; stroke: #6db9d6; stroke-width: 4; }
.bp-door, .bp-entry { fill: none; stroke: #c95d47; stroke-width: 3.2; }
.bp-entry-fill { fill: rgba(201, 93, 71, 0.13); }
.bp-canopy { fill: none; stroke: #172126; stroke-width: 6; }
.bp-dim { fill: none; stroke: #236b4c; stroke-width: 1.7; }
.bp-text { fill: #236b4c; font: 800 11px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.04em; }
.bp-title { fill: #172126; font: 900 12px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.09em; }
.bp-label { fill: #172126; font: 800 11px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.07em; }
.bp-note { fill: #8f3424; font: 800 11px system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.04em; }
.geometry-meta {
  margin-top: 16px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.geometry-meta span { color: var(--muted); }
.geometry-meta strong { overflow-wrap: anywhere; text-align: right; }
.blueprint-table { margin: 0; }
.blueprint-table > div {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.blueprint-table dt, .blueprint-table dd, .blueprint-table small { margin: 0; font-size: 11px; line-height: 1.35; }
.blueprint-table dt { font-weight: 880; }
.blueprint-table dd { color: var(--ink); font-weight: 800; text-align: right; }
.blueprint-table small { grid-column: 1 / -1; color: var(--muted); }
.representation-note {
  margin: 16px 0 0;
  padding: 12px;
  border-left: 3px solid var(--copper);
  background: rgba(201, 93, 71, 0.07);
  color: #4d5155;
  font-size: 11px;
  line-height: 1.5;
}

.entry-status {
  --entry-progress: 0%;
  position: fixed;
  z-index: 46;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  min-width: min(410px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 23, 28, 0.86);
  color: #fff;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px);
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7bd6a8;
  box-shadow: 0 0 0 4px rgba(123, 214, 168, 0.15);
}
.status-copy { display: grid; gap: 2px; }
.entry-status strong { font-size: 12px; }
.entry-status small { color: rgba(255, 255, 255, 0.72); font-size: 11px; }
.entry-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--entry-progress);
  height: 3px;
  background: linear-gradient(90deg, #66c995, #f0b46d);
  transition: width 50ms linear;
}

.no-webgl {
  position: fixed;
  inset: 0;
  z-index: 95;
  padding: 28px;
  display: grid;
  place-content: center;
  background: var(--paper);
}
.no-webgl > div { max-width: 650px; }
.no-webgl .brand-glyph { margin-bottom: 18px; }
.no-webgl p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.no-webgl .primary-action { width: min(280px, 100%); }

body[data-entry-state="running"] .topbar,
body[data-entry-state="running"] .product-card,
body[data-entry-state="running"] .view-control,
body[data-entry-state="running"] .scene-magnet,
body[data-entry-state="running"] .process-guide,
body[data-entry-state="running"] .interaction-hint,
body[data-entry-state="running"] .measurement-layer {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
body[data-location="inside"] .topbar,
body[data-location="inside"] .interface,
body[data-location="inside"] .scene-magnet,
body[data-location="inside"] .process-guide,
body[data-location="inside"] .measurement-layer,
body[data-location="inside"] .blueprint-panel,
body[data-location="inside"] .entry-status {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* On compact screens the blueprint is a full reading surface. The 3D dimension
   labels sit behind that sheet, so hiding them avoids clipped, overlapping labels
   without removing any measurement from the blueprint itself. */
@media (max-width: 899px), (max-height: 520px) and (min-width: 560px) {
  body.blueprint-open .measurement-layer { display: none; }
}

@media (max-width: 1100px) {
  .product-card { width: 324px; padding: 18px; }
  .product-card h1 { font-size: 45px; }
  .interaction-hint { display: none; }
  .view-control { left: auto; right: 22px; transform: none; }
}

@media (max-width: 899px) {
  .topbar { padding: max(12px, env(safe-area-inset-top)) 12px 0; }
  .brand { min-height: 48px; padding: 8px 10px; }
  .brand small { display: none; }
  .brand strong { font-size: 11px; }
  .brand-glyph { width: 16px; height: 16px; }
  .blueprint-toggle { min-height: 48px; width: 48px; justify-content: center; padding: 0; }
  .blueprint-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

  .product-card {
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    padding: 14px 15px 13px;
    border-radius: 14px;
  }
  .product-card h1 { max-width: none; font-size: clamp(32px, 9.2vw, 43px); }
  .lede { margin: 9px 0 10px; font-size: 13px; max-width: 96%; }
  .proof-row li { min-height: 29px; padding: 5px 9px; }
  .qualification { display: none; }
  .card-actions { margin-top: 10px; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .primary-action { min-height: 44px; }
  .secondary-link { text-align: right; max-width: 130px; }
  .representation-link { display: none; }

  .view-control {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none;
    grid-template-columns: repeat(3, 1fr);
  }
  .view-control button { min-width: 0; min-height: 54px; padding: 0 8px; }
  .view-control button span { display: block; margin: 0 0 2px; }

  .blueprint-panel { inset: 8px; width: auto; padding: 18px; }
  .blueprint-drawings { grid-template-columns: 1fr; }
  .inside-toolbar { top: max(6px, env(safe-area-inset-top)); }
  .scene-magnet { min-width: 142px; max-width: min(178px, calc(100vw - 16px)); min-height: 46px; padding: 6px 9px 6px 7px; }
  .scene-magnet__mark { width: 24px; height: 24px; font-size: 14px; }
  .scene-magnet strong { max-width: 126px; font-size: 11px; }
  .process-guide { top: 72px; right: 12px; width: min(290px, calc(100vw - 24px)); padding: 12px 13px; }
  .process-guide h2 { font-size: 20px; }
}

@media (max-width: 520px) {
  .product-card { padding: 13px 14px 12px; }
  .eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.07em; }
  .product-card h1 { font-size: clamp(30px, 9vw, 40px); }
  .lede { display: block; margin: 7px 0 9px; max-width: 100%; font-size: 12px; line-height: 1.35; }
  .proof-row li { min-height: 28px; font-size: 11px; }
  .card-actions { grid-template-columns: 1fr; gap: 8px; }
  .secondary-link { max-width: none; text-align: left; }
  .dimension-label { max-width: 180px; white-space: normal; text-align: center; }
  .inside-toolbar { left: 8px; right: 8px; transform: none; justify-content: flex-start; }
  .inside-proof { display: none; }
  .toolbar-link { margin-left: auto; }
  .process-guide > span { display: none; }
}

@media (max-width: 360px), (max-height: 650px) and (max-width: 559px) {
  .product-card { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .product-card h1 { font-size: 30px; }
  .proof-row { display: none; }
  .lede { display: none; }
  .qualification, .representation-link, .secondary-link { display: none; }
  .card-actions { margin-top: 10px; }
  .view-control button { min-height: 48px; }
}

/* Landscape phones: compact product proof at left, architecture fills the remaining viewport. */
@media (max-height: 520px) and (min-width: 560px) {
  .topbar { padding: max(8px, env(safe-area-inset-top)) 8px 0; }
  .brand { min-height: 42px; padding: 6px 9px; }
  .brand small { display: none; }
  .blueprint-toggle { min-height: 42px; }
  .product-card {
    left: 8px;
    top: 57px;
    bottom: auto;
    width: clamp(230px, 31vw, 260px);
    max-height: calc(100vh - 65px);
    overflow: hidden;
    padding: 10px 11px;
    border-radius: 12px;
  }
  .product-card h1 { font-size: clamp(27px, 4vw, 32px); line-height: .85; }
  .eyebrow { margin-bottom: 5px; gap: 0; font-size: 11px; letter-spacing: .035em; white-space: nowrap; }
  .eyebrow > span { display: none; }
  .lede { margin: 6px 0 7px; font-size: 11px; line-height: 1.22; }
  .qualification, .representation-link, .secondary-link { display: none; }
  .proof-row { gap: 4px; }
  .proof-row li { min-height: 22px; padding: 3px 6px; font-size: 11px; }
  .card-actions { margin-top: 6px; grid-template-columns: 1fr; }
  .primary-action { min-height: 34px; padding: 0 11px; font-size: 12px; }
  .view-control { left: auto; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); transform: none; }
  .view-control button { min-width: 82px; min-height: 42px; padding-inline: 9px; }
  .process-guide { top: 54px; right: 8px; width: min(260px, 31vw); max-height: calc(100vh - 108px); overflow: auto; padding: 10px 11px; }
  .process-guide h2 { font-size: 18px; }
  .process-guide > span { display: none; }
  .process-guide button { min-height: 34px; margin-top: 8px; }
  .scene-magnet { min-width: 132px; min-height: 40px; padding: 5px 8px; }
  .scene-magnet__mark { width: 22px; height: 22px; }
  .entry-status { bottom: 8px; }
  .blueprint-panel { inset: 6px; width: min(640px, calc(100vw - 12px)); left: auto; }
  .blueprint-drawings { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 420px) and (min-width: 560px) {
  .product-card .proof-row { display: none; }
}

/* Very short landscape phones retain the decision headline and the primary action rather
   than creating an internally clipped card that starts mid-button. */
@media (max-height: 360px) and (min-width: 560px) {
  .product-card h1 { font-size: clamp(25px, 3.8vw, 29px); }
  .product-card .lede { display: none; }
  .product-card .card-actions { margin-top: 7px; }
}

@media (max-height: 700px) and (min-width: 900px) {
  .product-card { bottom: 72px; padding: 16px 18px; }
  .product-card h1 { font-size: 43px; }
  .lede { margin: 10px 0; }
  .qualification { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


@media (forced-colors: active) {
  .brand-glyph, .loading-mark, .status-dot, .interaction-hint > span { forced-color-adjust: none; }
  .product-card, .view-control, .brand, .blueprint-toggle, .blueprint-panel, .inside-toolbar { border: 1px solid CanvasText; }
}


/* ==========================================================================
   USABILITY PASS — appended overrides.
   Later rules of equal specificity win, so the original stylesheet above is
   left intact and every correction below is auditable in one place.
   ========================================================================== */

/* 1. The control hint was hidden below 1100px, which removed the only
   instructions on exactly the devices where drag/pinch is least obvious.
   It is also the canvas aria-describedby target, so hiding it dropped the
   description from the accessibility tree too. Keep it, and swap the copy
   for pointer-appropriate wording. */
/* Phones: the card and the view controls own the bottom of the screen, so the
   hint goes to the free canvas band just under the topbar. Only where there is
   actually vertical room for that band -- on a short viewport the card rises
   into it and the hint would sit on top of the headline. */
@media (max-width: 899px) and (min-height: 620px) {
  .interaction-hint {
    display: flex;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top) + 64px);
    bottom: auto;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
  }
}

/* Tablets keep the card at the left and the view controls at the bottom right,
   so the hint sits directly above the view controls. */
@media (min-width: 900px) and (max-width: 1100px) {
  .interaction-hint {
    display: flex;
    left: auto;
    right: 22px;
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 44px);
    border-radius: 10px;
  }
}
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}
.interaction-hint b { font-weight: 900; }

/* Raise the scrim so the hint clears AA over a bright sky. */
.interaction-hint {
  background: rgba(10, 16, 20, 0.86);
  color: #fff;
  font-size: 11.5px;
}

/* 2. Minimum 44px touch targets. The originals ranged from bare 11px text
   links up to 40px, all below the 44px pointer-coarse guidance. */
@media (pointer: coarse) {
  .toolbar-button,
  .process-guide button,
  .primary-action,
  .view-control button { min-height: 44px; }
  .toolbar-link,
  .secondary-link,
  .representation-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }
}
/* Landscape phones previously shrank the primary CTA back to 34px. */
@media (max-height: 520px) and (min-width: 560px) {
  .primary-action { min-height: 44px; }
  .process-guide button { min-height: 44px; }
}

/* 3. The product card hid content rather than letting it scroll, so at high
   zoom or on small screens the lede, the proof row and the "open the full
   page" escape hatch simply vanished. Allow the card to scroll instead. */
@media (max-width: 899px), (max-height: 700px) {
  .product-card {
    max-height: min(72vh, calc(100vh - 130px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .product-card .lede,
  .product-card .proof-row,
  .product-card .secondary-link { display: revert; }
}
@media (max-width: 360px), (max-height: 650px) and (max-width: 559px) {
  .product-card .lede { display: block; }
  .product-card .proof-row { display: flex; }
  .product-card .secondary-link { display: inline-flex; }
}
@media (max-height: 520px) and (min-width: 560px) {
  .product-card { max-height: calc(100vh - 65px); overflow-y: auto; }
  .product-card .secondary-link { display: inline-flex; }
}

/* 4. The canvas fills the viewport at inset:0, so a 3px outline with a 3px
   offset was drawn entirely off-screen. Use an inset ring instead. */
canvas:focus-visible { outline: none; }
#scene:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--copper);
}

/* 5. The blueprint scrim was pointer-events:none, so it looked dismissible
   but swallowed nothing. Give it a real, clickable element. */
body.blueprint-open::before { display: none; }
.blueprint-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 24, 29, 0.34);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

/* 6. Escape hatch out of the entry dolly for anyone without a keyboard. */
.entry-cancel {
  flex: 0 0 auto;
  min-height: 34px;
  margin-left: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.entry-cancel:hover { border-color: #fff; background: rgba(255, 255, 255, 0.2); }
@media (pointer: coarse) { .entry-cancel { min-height: 44px; } }

/* 7. Loading mark spins forever; stop it for reduced-motion users. The
   original blanket rule only neutralised duration, which browsers apply
   inconsistently to infinite keyframes. */
@media (prefers-reduced-motion: reduce) {
  .loading-mark { animation: none !important; }
}

/* 8. prefers-contrast support. The glass surfaces had no high-contrast
   variant; only forced-colors was handled. */
@media (prefers-contrast: more) {
  .product-card, .view-control, .brand, .blueprint-toggle,
  .blueprint-panel, .inside-toolbar, .process-guide, .scene-magnet {
    backdrop-filter: none;
    border: 1px solid var(--ink);
  }
  .product-card, .view-control, .brand, .blueprint-toggle, .blueprint-panel, .inside-toolbar {
    background: #fff;
  }
  .interaction-hint, .process-guide, .scene-magnet { background: #0b1014; color: #fff; }
  .scene-magnet small { color: rgba(255, 255, 255, 0.92); }
}

/* 9. 11px chip/meta text raised to the 10.5px+ sans floor with real contrast. */
.scene-magnet small { color: rgba(255, 255, 255, 0.82); font-size: 11px; }

/* The base stylesheet styles every direct span of .interaction-hint as the 7px
   status dot. The added copy spans must opt out of that. */
.interaction-hint > .hint-pointer,
.interaction-hint > .hint-touch {
  width: auto;
  height: auto;
  color: inherit;
  font-size: inherit;
  box-shadow: none;
}

/* Short viewports of any width: park the hint immediately above the view
   controls, which is the one strip the card never occupies. */
@media (max-height: 619px) {
  .interaction-hint {
    display: flex;
    left: auto;
    right: 12px;
    top: auto;
    bottom: calc(60px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 24px);
    border-radius: 10px;
    padding: 7px 10px;
  }
}
/* Short landscape keeps the product card as a left column, so the hint must
   stop short of it rather than running underneath. */
@media (max-height: 619px) and (min-width: 560px) {
  .interaction-hint { max-width: calc(100vw - 290px); }
}

/* Viewports too small for any placement: the card and the view controls leave
   no free band at all. Hide the hint visually but keep it in the accessibility
   tree, because it is the canvas's aria-describedby target -- the original
   display:none dropped the scene description for screen readers too. */
@media (max-height: 460px) and (max-width: 559px) {
  .interaction-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Dragging the scene to look around was selecting the interface text behind the
   pointer, which left green selection blocks across the hint and the controls.
   The 3D canvas is a drag surface, so the chrome opts out of selection. */
.topbar, .interface, .inside-toolbar, .view-control, .interaction-hint,
.scene-magnet, .process-guide, .entry-status, .blueprint-toggle {
  -webkit-user-select: none;
  user-select: none;
}
/* The blueprint panel is prose and stays selectable. */
.blueprint-panel { -webkit-user-select: text; user-select: text; }

/* Belt and braces on the selection highlight. Naming the chrome elements one by
   one kept missing new ones, and Safari paints a selection across a
   user-select:none element anyway when the drag started outside it, which is
   exactly what a drag on the canvas does. So the whole app opts out and the
   prose opts back in, and the highlight itself is made invisible on the chrome
   for the Safari case that slips through both. */
#app { -webkit-user-select: none; user-select: none; }
.product-card, .blueprint-panel, .doc, .readout { -webkit-user-select: text; user-select: text; }
.canvas-shell ::selection, .interaction-hint ::selection, .interaction-hint::selection,
.topbar ::selection, .view-control ::selection, .scene-magnet ::selection {
  background: transparent;
}