:root {
  color-scheme: dark;
  --bg:#080d12;
  --surface:#0e161d;
  --surface2:#121e27;
  --line:#23313c;
  --text:#edf4f5;
  --muted:#9badbb;
  --accent:#77edcf;
  --blue:#8bc9fa;
  --amber:#efbd83;
  --error:#ffacac;
  --ease:cubic-bezier(.16,1,.3,1);
  font-family:
    Inter,
    "Segoe UI",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
  font-synthesis: none;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  transition:
    background .15s,
    color .15s,
    border-color .15s;
}
button:disabled {
  opacity: .36;
  cursor: default;
}
button,
input,
select,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
input {
  caret-color: var(--accent);
  font-variant-numeric: tabular-nums;
}
::selection {
  background: #77edcf40;
  color: #fff;
}
a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 4px;
}
a:hover {
  text-decoration: underline;
}
input::-webkit-inner-spin-button {
  opacity: 0;
}
input:hover::-webkit-inner-spin-button,
input:focus::-webkit-inner-spin-button {
  opacity: .7;
}
input[type=checkbox],
input[type=range] {
  accent-color: var(--accent);
}
select,
input[type=range] {
  cursor: pointer;
}
summary {
  cursor: pointer;
  line-height: 1.65;
}
details[open] > summary {
  margin-bottom: 10px;
}
p {
  line-height: 1.75;
  margin: 0 0 10px;
}
.hidden,
[hidden] {
  display: none !important;
}
.sr-only,
.icon-library {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.icon {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.app-shell {
  height: 100svh;
  min-height: 420px;
  display: grid;
  grid-template-rows: 56px 48px minmax(0, 1fr) 29px;
  background: var(--bg);
}
.app-header {
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #0b1218;
  z-index: 40;
}
.suite-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.suite-brand > .icon {
  width: 27px;
  height: 27px;
  color: var(--accent);
  stroke-width: 1.3;
}
.suite-brand sup {
  font-size: 8px;
  vertical-align: top;
  margin-left: 2px;
}
.header-divider {
  height: 19px;
  width: 1px;
  background: #35434e;
}
h1 {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: .01em;
  margin: 0;
  white-space: nowrap;
}
h1 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-button {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
}
.icon-button:hover {
  color: var(--text);
  background: #1b2832;
}
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 33px;
  padding: 6px 13px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.primary-button {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #09261d;
}
.primary-button:hover:not(:disabled) {
  background: #a3f8e2;
  border-color: #a3f8e2;
}
.primary-button .icon {
  width: 16px;
  height: 16px;
  fill: #09261d;
  stroke-width: 1.2;
}
.secondary-button {
  background: #14212b;
  border: 1px solid #33434f;
  color: #d3e1eb;
}
.secondary-button:hover {
  background: #233541;
  border-color: #567184;
}
.secondary-button > .icon:last-child:not(:first-child) {
  width: 13px;
  height: 13px;
}
.export-wrapper {
  position: relative;
}
.export-menu {
  position: absolute;
  right: 0;
  top: 41px;
  width: 225px;
  padding: 6px;
  background: #172630;
  border: 1px solid #38505e;
  border-radius: 5px;
  box-shadow: 0 14px 35px #0008;
  z-index: 100;
}
.export-menu a {
  display: block;
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: 3px;
}
.export-menu a:hover {
  background: #244439;
  text-decoration: none;
}
.command-bar {
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: #101921;
  z-index: 25;
  overflow-x: auto;
  scrollbar-width: none;
}
.command-bar::-webkit-scrollbar {
  display: none;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 10px;
  border-right: 1px solid #2b3a45;
  flex: none;
}
.tool-group:first-child {
  padding-left: 0;
}
.tool-group:last-child {
  border: 0;
  padding-right: 0;
}
.toolbar-end {
  margin-left: auto;
}
.tool-button,
.tool-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.tool-button .icon,
.tool-toggle .icon {
  width: 17px;
  height: 17px;
}
.tool-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tool-toggle:has(input:checked),
.tool-button.active {
  color: var(--accent);
  background: #77edcf0d;
  border-color: #77edcf24;
}
.tool-toggle:has(input:disabled) {
  opacity: .35;
  cursor: default;
}
.tool-toggle:has(input:disabled) input {
  cursor: default;
}
.tool-toggle:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tool-toggle:hover,
.tool-button:hover {
  background: #20303c;
  color: var(--text);
}
.workspace {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 274px;
  min-height: 0;
  overflow: hidden;
}
.object-rail {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  background: #0d151c;
  border-right: 1px solid var(--line);
  padding: 16px 5px;
  z-index: 15;
  overflow-y: auto;
  scrollbar-width: thin;
}
.object-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 49px;
  min-height: 57px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #a4b7c5;
  font-size: 11px;
}
.object-button .icon {
  width: 23px;
  height: 23px;
}
.object-button[data-part="member"] > span { font-size:10px; white-space:nowrap; }
.object-button:hover {
  background: #1a2c38;
  color: #e3f1fa;
}
.object-button.active {
  background: #19382f;
  border-color: #77edcf35;
  color: var(--accent);
}
.cad-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      #1b2934,
      #0d171f 75%);
  isolation: isolate;
}
.mesh-view .cad-viewport {
  background: radial-gradient(ellipse at 50% 48%, #17232c, #0b131a 75%);
}
.three-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.three-container > canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity .5s;
  mix-blend-mode: screen;
}
.generating.has-shader .shader-canvas {
  opacity: .19;
}
.viewport-heading {
  position: absolute;
  left: 25px;
  right: 22px;
  top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  z-index: 9;
  pointer-events: none;
}
.viewport-heading > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#selectionTitle {
  font-size: 14px;
  font-weight: 550;
  color: #c5d3de;
}
#modelSpec {
  font-size: 12px;
  color: #9eb5c7;
  font-variant-numeric: tabular-nums;
}
.preview-badge {
  font-size: 10px;
  padding: 5px 8px;
  border: 1px solid #345466;
  color: #a6c6da;
  border-radius: 3px;
  line-height: 1.2;
  white-space: nowrap;
  background: #122431b8;
}
.preview-badge.real {
  border-color: #427967;
  color: var(--accent);
  background: #102b23dd;
}
.dimension-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  transition: opacity .2s;
}
.dimension-lines path,
.dimension-lines line {
  fill: none;
  stroke: #7195ad;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dimension-lines .leader {
  stroke: #58798f;
}
.dimension-lines .anchor-dot {
  fill: var(--accent);
  stroke: none;
}
.dimension-lines .anchor-ring {
  fill: #0d171f;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.dimension-lines .dimension-error {
  stroke: var(--error);
}
.dimension-lines .dimension-active {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.dimension-lines .dimension-idle {
  opacity: .65;
}
.dimension-lines .dimension-idle .anchor-dot {
  fill: #95ceef;
}
.dimension-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity .2s;
}
.compact-annotations .dimension-layer {
  bottom: 67px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}
.anchor-box {
  display: none;
  position: absolute;
  pointer-events: auto;
  max-width: calc(100% - 20px);
  width: 143px;
  left: 20px;
  top: 85px;
  visibility: hidden;
}
.anchor-box.is-visible {
  display: block;
  visibility: visible;
}
.annotation {
  color: #afccde;
}
.annotation > label {
  display: block;
  margin: 0 0 5px;
  font-size: 11px;
  line-height: 1.45;
  color: #b0c9da;
  white-space: nowrap;
}
.annotation-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  position: relative;
  background: #102430ee;
  border: 1px solid #4c748b;
  border-radius: 3px;
  transition: background .15s, border-color .15s;
}
.annotation-input:focus-within {
  border-color: var(--accent);
  background: #16352e;
  outline: 1px solid #77edcf30;
}
.annotation-input > input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 4px 4px 4px 9px;
  font-size: 15px;
  font-weight: 550;
  color: #d6effd;
  height: 30px;
  letter-spacing: .01em;
}
.annotation-input > input:focus-visible {
  outline: none;
}
.annotation-input > span {
  padding-right: 9px;
  color: #a7c2d5;
  font-size: 10px;
  flex: none;
}
.annotation > select {
  width: 100%;
  height: 32px;
  padding: 4px 6px;
  background: #102430f5;
  border: 1px solid #4c748b;
  border-radius: 3px;
  color: #d6effd;
  font-size: 12px;
}
.annotation-hint {
  display: block;
  font-size: 10px;
  color: #9db6c9;
  line-height: 1.5;
  margin-top: 5px;
}
.field-error {
  display: none;
  margin: 6px 0 0;
  background: #421e25f5;
  color: #ffd3d3;
  border: 1px solid #b06368;
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.65;
  border-radius: 3px;
  min-width: 145px;
  white-space: normal;
}
.has-error > .field-error {
  display: block;
}
.has-error > .annotation-input,
.has-error > select {
  border-color: #ef9d9d;
  background: #2f2029;
}
.annotation:focus-within > label {
  color: var(--accent);
}
.annotation.is-linked:not(.has-error) > label {
  color: var(--accent);
}
.annotation.is-linked:not(.has-error) > .annotation-input,
.annotation.is-linked:not(.has-error) > select {
  border-color: var(--accent);
  background: #16352e;
}
.thread-callout.is-linked {
  border-color: var(--accent);
}
.thread-callout {
  width: 205px;
  background: #0d1b25f2;
  padding: 12px;
  border: 1px solid #3c5b6c;
  border-radius: 5px;
}
.member-controls {
  width: 205px;
  padding: 12px;
  background: #0d1b25f5;
  border: 1px solid #3c5b6c;
  border-radius: 5px;
}
.member-controls.is-linked { border-color: var(--accent); }
.member-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.member-title strong { font-size:12px; font-weight:550; }
.member-title span { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.member-layer-row { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.member-layer-row label { color:#b0c9da; font-size:11px; }
.member-layer-row select { min-width:0; width:100%; height:32px; background:#102430; border:1px solid #4c748b; border-radius:3px; font-size:11px; padding:4px 6px; }
.member-actions { display:flex; gap:5px; margin:0 0 14px; }
.member-actions button { min-height:30px; flex:1; padding:4px 5px; border:1px solid #3c5b6c; border-radius:3px; background:#142733; color:#c7dce7; font-size:11px; white-space:nowrap; }
.member-actions button:first-child { color:var(--accent); border-color:#41675f; background:#152d2a; }
.member-actions button:hover:not(:disabled) { background:#23433f; border-color:var(--accent); }
.member-controls .annotation-hint { margin-bottom:0; }
#memberError:not(:empty) { display:block; min-width:0; }
.member-dimension .field-error { min-width:0; }
.callout-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 11px;
  font-size: 10px;
  color: #a2bacb;
}
.standard-shortcut {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #77edcf14;
  border: 1px solid #77edcf46;
  border-radius: 3px;
  color: var(--accent);
  font-size: 10px;
  padding: 5px 6px;
  white-space: nowrap;
}
.standard-shortcut .icon {
  width: 12px;
  height: 12px;
}
.standard-shortcut:hover:not(:disabled) {
  background: #77edcf2d;
  border-color: var(--accent);
}
#quickSpecLabel {
  font-size: 10px;
}
.thread-choices {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 9px;
  margin-top: 10px;
}
.thread-choices .annotation > label {
  font-size: 10px;
}
.thread-choices select {
  font-size: 11px;
  padding-inline: 3px;
}
.pitch-input > input {
  padding-right: 0;
}
.pitch-input > span {
  padding-right: 3px;
}
.pitch-input > button {
  border: 0;
  border-left: 1px solid #4c748b60;
  height: 30px;
  width: 27px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #aacde3;
}
.pitch-input .icon {
  width: 14px;
  height: 14px;
}
.pitch-menu {
  position: fixed;
  width: 216px;
  background: #172c39;
  border: 1px solid #557b90;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 10px 30px #0008;
  z-index: 150;
  max-height: 225px;
  overflow-y: auto;
  pointer-events: auto;
}
.pitch-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 10px 8px;
  font-size: 12px;
  background: transparent;
  color: #cde8f7;
  border-radius: 2px;
}
.pitch-menu button:hover,
.pitch-menu button[aria-selected=true] {
  background: #244b43;
  color: var(--accent);
}
.pitch-menu p {
  margin: 8px;
  font-size: 12px;
}
.nut-size-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
}
.nut-size-note strong {
  font-size: 11px;
  font-weight: 500;
  color: #cce8f7;
}
.nut-size-note > span {
  color: #aac2d2;
}
.nut-size-note #nutThicknessAdjustment {
  color: var(--amber);
}
[data-anchor=numsP] {
  width: 172px;
}
.cut-popover {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #162630f5;
  border: 1px solid #375767;
  padding: 10px 13px;
  z-index: 30;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11px;
  box-shadow: 0 9px 24px #0005;
}
.cut-popover > select {
  height: 27px;
  background: #10202b;
  border: 1px solid #3d5b6d;
  border-radius: 3px;
  font-size: 12px;
}
.cut-popover > input[type=range] {
  width: 112px;
}
.cut-popover > output {
  min-width: 29px;
  font-variant-numeric: tabular-nums;
}
.cut-popover > label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}
.cut-popover > span {
  color: var(--accent);
}
.viewport-bottom {
  position: absolute;
  left: 23px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 4;
  pointer-events: none;
}
.viewport-tip {
  font-size: 10px;
  color: #9cb2c3;
  line-height: 1.8;
}
.viewport-tip > span {
  display: block;
  font-size: 10px;
  color: #9bb3c5;
}
.view-cube {
  pointer-events: auto;
  color: #88aabd;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.view-cube > button {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #142632e0;
  border: 1px solid #38596b;
  border-radius: 5px;
  color: #8fc0dc;
}
.view-cube > button > .icon {
  width: 29px;
  height: 29px;
  stroke-width: 1.1;
}
.view-cube > div {
  display: flex;
  gap: 2px;
}
.view-cube > div > button {
  border: 0;
  background: transparent;
  color: #9dbccc;
  font-size: 9px;
  padding: 4px 6px;
}
.view-cube button:hover {
  color: var(--accent);
  background: #203e3b;
}
.inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: #0e171f;
  z-index: 18;
}
.inspector-heading {
  height: 53px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 19px;
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.inspector-heading h2 {
  font-size: 12px;
}
.inspector-heading .icon {
  width: 15px;
  height: 15px;
}
.inspector-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #415866 #0e171f;
}
.inspector-section {
  padding: 20px 19px;
  border-bottom: 1px solid #23313c;
}
.inspector-section:last-child {
  border: 0;
}
.inspector-section h3 {
  font-size: 12px;
  font-weight: 600;
  color: #d2e2ec;
  margin: 0 0 15px;
}
.inspector-section p,
.inspector-section summary {
  font-size: 11px;
  color: #a6bac9;
  line-height: 1.85;
}
.inspector-section p:last-child {
  margin-bottom: 0;
}
.inspector-section details {
  margin-top: 13px;
}
.inspector-section details > summary {
  font-size: 11px;
  color: #9dc9df;
}
.model-summary,
.quality-metrics {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.model-summary > div,
.quality-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}
.model-summary dt,
.quality-metrics dt {
  color: #a4b7c6;
}
.model-summary dd,
.quality-metrics dd {
  margin: 0;
  color: #d2e4ef;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.inspector-note {
  margin-top: 15px !important;
  color: #9badbb !important;
}
.model-current {
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
}
.shortcut-status {
  color: #bfd4df !important;
}
.result-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.result-success {
  font-size: 10px;
  color: var(--accent);
}
.quality-metrics {
  margin-top: 18px;
}
.result-expiry {
  font-size: 10px !important;
  margin-top: 16px;
  color: #b8c6cf !important;
}
.result-tables table {
  width: 100%;
  font-size: 10px;
  border-collapse: collapse;
}
.result-tables th {
  text-align: left;
  font-weight: 400;
  color: #a3b8c7;
  padding: 7px 5px 7px 0;
  border-bottom: 1px solid #263b49;
}
.result-tables td {
  text-align: right;
  color: #d9e9f1;
  padding: 7px 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #263b49;
}
.status-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #101b24;
  border-top: 1px solid #2b3b48;
  padding: 0 15px;
  font-size: 10px;
  color: #a6bacb;
  z-index: 30;
  white-space: nowrap;
  overflow: hidden;
}
.validation-state {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.validation-state:has(.error) .status-dot {
  background: var(--error);
}
.error {
  color: var(--error) !important;
}
.status-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 17px;
}
.status-end > span + span {
  border-left: 1px solid #324757;
  padding-left: 17px;
}
#jobStatus {
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-end #statusElements:empty {
  display: none;
}
.panel-closed .workspace {
  grid-template-columns: 62px minmax(0, 1fr);
}
.panel-closed .inspector {
  display: none;
}
.viewport-toast {
  position: absolute;
  left: 50%;
  bottom: 77px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 15px;
  border: 1px solid #456e79;
  background: #142a35f5;
  color: #d2eff9;
  border-radius: 4px;
  font-size: 12px;
  max-width: calc(100% - 40px);
  text-align: center;
  pointer-events: none;
}
.generation-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      #0c16206b,
      transparent 65%);
}
.generation-copy {
  width: 300px;
  text-align: center;
  pointer-events: auto;
  padding: 28px 20px;
  background:
    radial-gradient(
      ellipse,
      #0a1724e3,
      transparent 73%);
}
.generation-copy h2 {
  font-size: 22px;
  font-weight: 500;
  color: #e1f7fc;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.generation-copy > p {
  font-size: 12px;
  color: #a6d1de;
  margin-bottom: 13px;
}
.generation-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  color: #91b3c6;
}
.generation-detail > span:first-child {
  font-variant-numeric: tabular-nums;
}
.generation-detail > span + span {
  border-left: 1px solid #456778;
  padding-left: 12px;
}
.generation-copy .secondary-button {
  margin-top: 21px;
  font-weight: 400;
  min-height: 29px;
  font-size: 11px;
  background: #122b36b3;
  border-color: #456473;
}
.generation-indicator {
  height: 1px;
  width: 45px;
  margin: 0 auto 20px;
  background: var(--accent);
}
.generating .dimension-layer,
.generating .dimension-lines {
  opacity: 0;
  pointer-events: none;
}
.generating .anchor-box {
  pointer-events: none;
}
.generating .viewport-tip {
  opacity: 0;
}
.generating .viewport-heading {
  opacity: .4;
}
.generating .object-rail {
  pointer-events: none;
  opacity: .55;
}
.generating .cut-popover {
  display: none;
}
.no-dimensions .dimension-layer,
.no-dimensions .dimension-lines {
  opacity: 0;
  pointer-events: none;
}
.no-dimensions .anchor-box {
  pointer-events: none;
}
.preset-flight-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 180;
}
.webgl-fallback {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  width: 260px;
  padding: 20px;
  text-align: center;
  z-index: 2;
  background: #132531;
  border: 1px solid #3b5c70;
  border-radius: 5px;
}
.webgl-fallback p {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
}
.webgl-unavailable .dimension-lines,
.webgl-unavailable .viewport-bottom {
  display: none;
}
.webgl-unavailable .dimension-layer {
  top: 44%;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 15px;
  padding: 20px;
  overflow: auto;
  pointer-events: auto;
}
.webgl-unavailable .anchor-box {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: none;
  transform: none !important;
}
.webgl-unavailable .anchor-box.is-visible {
  display: block;
}
@media (max-width: 1250px) {
  .workspace,
  .panel-closed .workspace {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .object-rail {
    padding-inline: 3px;
  }
  .object-button {
    width: 46px;
  }
  .inspector {
    display: none;
    position: absolute;
    top: 104px;
    right: 0;
    bottom: 29px;
    width: 274px;
    box-shadow: -18px 0 35px #0006;
  }
  .panel-open .inspector {
    display: flex;
  }
  .app-header {
    padding-inline: 16px;
  }
  .tool-group {
    padding-inline: 7px;
  }
  .tool-button,
  .tool-toggle {
    padding-inline: 7px;
  }
  .viewport-heading {
    left: 20px;
    right: 20px;
  }
}
@media (max-width: 900px) {
  .anchor-box.member-controls { width:190px; }
  .view-tools {
    display: none;
  }
  .suite-brand {
    font-size: 13px;
  }
  .suite-brand > .icon {
    width: 24px;
    height: 24px;
  }
  .header-divider {
    display: none;
  }
  .app-header {
    gap: 15px;
  }
  h1 {
    font-size: 12px;
  }
  h1 span {
    display: none;
  }
  .header-actions {
    gap: 5px;
  }
  .help-action {
    display: none;
  }
  .anchor-box {
    width: 132px;
  }
  .thread-callout {
    width: 190px;
  }
  .viewport-heading {
    top: 17px;
  }
  #selectionTitle {
    font-size: 12px;
  }
  .preview-badge {
    font-size: 9px;
  }
  .status-bar {
    gap: 12px;
  }
  .status-end > span:last-child {
    display: none;
  }
  .status-end {
    gap: 9px;
  }
  .status-end > span + span {
    padding-left: 9px;
  }
  .cut-popover {
    max-width: calc(100% - 30px);
    gap: 7px;
  }
  .cut-popover > input[type=range] {
    width: 85px;
  }
}
@media (max-width: 620px) {
  .anchor-box.member-controls { width:185px; padding:10px; }
  .app-shell {
    grid-template-rows: 52px 44px minmax(0, 1fr) 29px;
    min-height: 480px;
  }
  .app-header {
    padding-inline: 10px;
    gap: 8px;
  }
  .suite-brand > span {
    display: none;
  }
  .suite-brand > .icon {
    width: 27px;
    height: 27px;
  }
  h1 {
    font-size: 12px;
  }
  .header-actions {
    gap: 4px;
  }
  .history-action {
    width: 26px;
    height: 30px;
  }
  .history-action .icon {
    width: 16px;
    height: 16px;
  }
  .primary-button,
  .secondary-button {
    font-size: 11px;
    padding: 6px 9px;
    gap: 5px;
  }
  .header-actions .primary-button .icon {
    width: 13px;
  }
  .header-actions #exportBtn > .icon:first-child {
    display: none;
  }
  .command-bar {
    padding-inline: 6px;
  }
  .tool-group {
    padding-inline: 4px;
  }
  .tool-button,
  .tool-toggle {
    gap: 4px;
    font-size: 10px;
    padding-inline: 6px;
    min-height: 30px;
  }
  .tool-button .icon,
  .tool-toggle .icon {
    width: 15px;
    height: 15px;
  }
  .toolbar-end {
    margin-left: 0;
  }
  .motion-control > span {
    display: none;
  }
  #fullscreenBtn {
    display: none;
  }
  .workspace,
  .panel-closed .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 43px minmax(0, 1fr);
  }
  .object-rail {
    flex-direction: row;
    justify-content: space-evenly;
    padding: 3px 5px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    gap: 3px;
    overflow: visible;
  }
  .object-button {
    flex-direction: row;
    gap: 5px;
    min-height: 32px;
    width: auto;
    padding: 3px 8px;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 3px;
  }
  .object-button .icon {
    width: 17px;
    height: 17px;
  }
  .inspector {
    top: 96px;
    bottom: 29px;
    width: min(290px, calc(100vw - 38px));
    z-index: 50;
  }
  .viewport-heading {
    left: 14px;
    right: 14px;
    top: 14px;
    gap: 10px;
  }
  #selectionTitle {
    font-size: 11px;
  }
  #modelSpec {
    font-size: 10px;
  }
  .preview-badge {
    font-size: 9px;
    padding: 4px 5px;
  }
  .annotation > label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .annotation-input > input {
    font-size: 14px;
  }
  .anchor-box {
    width: 128px;
  }
  .thread-callout {
    width: 185px;
    padding: 10px;
  }
  .thread-choices {
    gap: 7px;
  }
  .callout-title {
    margin-bottom: 9px;
  }
  .standard-shortcut {
    font-size: 9px;
    padding: 4px;
    gap: 3px;
  }
  .standard-shortcut .icon {
    display: none;
  }
  .annotation-hint {
    font-size: 9px;
  }
  .viewport-bottom {
    left: 13px;
    right: 12px;
    bottom: 10px;
  }
  .viewport-tip {
    font-size: 9px;
    max-width: 205px;
  }
  .viewport-tip > span {
    font-size: 9px;
  }
  .view-cube > button {
    width: 31px;
    height: 31px;
  }
  .view-cube > button > .icon {
    width: 23px;
    height: 23px;
  }
  .view-cube > div > button {
    font-size: 8px;
    padding: 2px 4px;
  }
  .status-bar {
    padding-inline: 10px;
    font-size: 9px;
    gap: 10px;
  }
  .status-end {
    gap: 8px;
  }
  .status-end > span + span {
    padding-left: 8px;
  }
  .status-end #statusElements {
    display: none;
  }
  .status-bar #jobStatus {
    margin-left: auto;
  }
  .status-bar:has(#jobStatus:not(:empty)) .status-end {
    display: none;
  }
  .status-bar:has(#jobStatus:not(:empty)) .validation-state {
    max-width: 42%;
  }
  .validation-state > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cut-popover {
    top: 61px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    padding: 8px 10px;
    font-size: 10px;
  }
  .cut-popover > input[type=range] {
    flex: 1;
    width: 80px;
  }
  .cut-popover > label {
    font-size: 9px;
  }
  .generation-copy h2 {
    font-size: 20px;
  }
  .field-error {
    font-size: 10px;
    min-width: 128px;
  }
  .pitch-menu {
    width: 200px;
  }
  .viewport-toast {
    font-size: 11px;
    bottom: 62px;
  }
  .export-menu {
    width: 210px;
  }
  .webgl-unavailable .dimension-layer {
    top: 40%;
    gap: 12px;
    padding: 14px;
  }
}
@media (max-height: 650px) and (min-width: 621px) {
  .viewport-heading {
    top: 12px;
  }
  .viewport-bottom {
    bottom: 10px;
  }
  .thread-callout {
    padding: 9px;
  }
  .callout-title {
    margin-bottom: 7px;
  }
  .thread-choices {
    margin-top: 7px;
  }
  .nut-size-note {
    margin-top: 5px;
  }
  .annotation-hint {
    margin-top: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  .shader-canvas,
  .dimension-layer,
  .dimension-lines {
    transition: none;
  }
}
.annotation > label,
.annotation-hint {
  width: fit-content;
  max-width: 100%;
  background: #0d1b25f2;
  border-radius: 2px;
  padding: 1px 3px;
  margin-left: -3px;
}
.nut-size-note {
  background: #0d1b25f5;
  border-radius: 3px;
  padding: 7px 8px;
}
.nut-size-note strong {
  color: #d6effd;
}
.nut-size-note > span {
  color: #c2d9e9;
}
.cut-popover {
  top: 14px;
}
@media (max-width: 620px) {
  .cut-popover {
    top: 52px;
  }
}