/* SPDX-FileCopyrightText: 2026 NoOneExceptEnderk; SPDX-License-Identifier: GPL-3.0-only */
:root {
  color-scheme:dark;
  --background:#1d2229;
  --preview:#11161d;
  --entry:#151b22;
  --line:#38414d;
  --text:#e9eef4;
  --muted:#acb9c9;
  --accent:#7cc8c8;
  --error:#ffb1a5;
  --text-scale:1;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:calc(14px * var(--text-scale));
  color:var(--text);
  background:var(--background)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
button,input,select,summary {
  font:inherit;
  color:inherit
}
button,select,.popover>summary {
  background:#242b34;
  border:1px solid var(--line);
  border-radius:5px;
  min-height:34px;
  padding:4px 10px
}
button,summary {
  cursor:pointer
}
button:hover,.popover>summary:hover {
  background:#303a46
}
button:disabled,input:disabled,select:disabled {
  color:var(--muted);
  opacity:.5;
  cursor:default
}
button.flat {
  background:transparent;
  border-color:transparent
}
button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#102a2c;
  font-weight:600
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #9bd8d8;
  outline-offset:1px
}
input[type=text],select {
  background:var(--entry);
  border:1px solid var(--line);
  border-radius:4px;
  min-height:34px
}
input[type=text] {
  padding:4px 8px;
  text-align:right;
  min-width:0;
  font-variant-numeric:tabular-nums
}
input[type=checkbox],input[type=range] {
  accent-color:var(--accent)
}
input[aria-invalid=true] {
  border-color:#f1a596
}
input[readonly] {
  border-left:2px solid var(--accent)
}
select {
  padding:5px 8px;
  max-width:100%
}
a {
  color:#addbdd
}
h2 {
  font-size:1.15rem;
  margin:0
}
h3 {
  font-size:1rem;
  font-weight:600;
  margin:0 0 9px
}
hr {
  border:0;
  border-top:1px solid var(--line);
  width:100%;
  margin:3px 0
}
.muted,.subtle {
  color:var(--muted);
  font-size:.857rem
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.app-header {
  height:auto;
  min-height:50px;
  flex-shrink:0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(max-content,1fr) auto minmax(0,1fr);
  align-items:center;
  padding:6px 14px;
  gap:12px;
  z-index:6
}
.document-actions {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0
}
.document-actions button {
  font-size:.929rem
}
.icon-button {
  width:38px;
  padding:7px;
  font-size:1.2rem!important
}
.icon-button svg {
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linejoin:round
}
.brand {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}
.brand img {
  width:28px;
  height:28px;
  object-fit:contain
}
.document-name {
  font-weight:600;
  font-size:1rem;
  max-width:30vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.brand .muted {
  font-size:.786rem
}
.header-right {
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 12px;
  min-width:0;
  width:100%
}
.header-right button {
  height:38px;
  flex-shrink:0
}
.desktop-download {
  flex:1 1 12rem;
  font-size:.857rem;
  line-height:1.35;
  max-width:100%;
  overflow-wrap:break-word;
  text-underline-offset:3px
}
.popover {
  position:relative
}
.popover>summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  user-select:none
}
.popover>summary::-webkit-details-marker {
  display:none
}
.project-menu>summary {
  font-size:1.25rem;
  width:46px;
  justify-content:center;
  height:38px
}
.popover[open]>.popover-body {
  display:flex
}
.popover-body {
  display:none;
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:20;
  flex-direction:column;
  gap:9px;
  padding:12px;
  background:var(--background);
  border:1px solid var(--line);
  border-radius:7px;
  box-shadow:0 8px 25px #0006;
  min-width:min(230px,calc(100vw - 16px));
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 16px);
  overflow:auto;
  font-size:.929rem
}
.project-menu .popover-body {
  left:0;
  right:auto
}
.popover-body>button {
  text-align:left
}
.workspace {
  display:grid;
  grid-template-columns:351px minmax(0,1fr);
  flex:1;
  min-height:0
}
.parameter-panel {
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--line);
  min-width:0
}
.model-picker {
  padding:18px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:7px
}
.model-picker>label,.field label {
  font-size:.929rem;
  color:#dce4ed
}
.model-picker>select {
  width:100%;
  height:39px;
  margin-bottom:0
}
.model-picker #variant-fields {
  margin-top:1px
}
.model-picker .field {
  display:flex;
  flex-wrap:wrap;
  margin:0;
  gap:8px
}
.model-picker .field-top {
  width:100%;
  flex-basis:100%;
  min-height:22px
}
.model-picker .field>select {
  width:100%;
  height:39px
}

.parameter-fields {
  flex:1;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  padding:16px 18px
}
.field-group {
  padding-bottom:12px
}
.field {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 145px;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  min-height:34px
}
.field-top {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0
}
.field-top label {
  flex:1;
  line-height:1.4
}
.field-input {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0
}
.numeric-control {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:var(--entry);
  border-radius:4px;
  min-width:0;
  width:118px;
  height:34px
}
.numeric-control input[type=text] {
  border:0;
  background:transparent;
  width:100%;
  height:30px;
  min-height:30px;
  padding:3px 4px 3px 7px;
  outline-offset:2px
}
.numeric-control:has(input[aria-invalid=true]) {
  border-color:#f1a596
}
.numeric-control:has(input[readonly]) {
  border-left:2px solid var(--accent)
}
.numeric-control button {
  background:transparent;
  border:0;
  min-height:28px;
  padding:0;
  width:19px;
  flex:0 0 19px;
  font-size:1.1rem;
  line-height:1
}
.numeric-control button:last-child {
  margin-right:2px
}
.unit {
  font-size:.786rem;
  color:var(--muted);
  width:21px;
  flex-shrink:0
}
.field>select {
  width:145px;
  font-size:.857rem
}
.field:has(>select) {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px
}
.field:has(>select)>select {
  width:100%
}
.field-top>input[type=checkbox] {
  margin-left:auto
}
.field:has(.field-top>input[type=checkbox]) {
  display:block
}
.field-error,.linked-note {
  grid-column:1/-1;
  font-size:.857rem;
  line-height:1.4;
  margin:1px 0;
  color:var(--error)
}
.linked-note {
  color:var(--muted);
  font-size:.786rem
}
.text-button {
  background:transparent;
  border:0;
  padding:1px 0;
  min-height:0;
  color:#addbdd;
  font-size:inherit
}
.derived-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 9px;
  min-height:31px;
  color:var(--muted);
  font-size:.857rem
}
.derived-row output {
  margin-left:auto;
  min-width:61px;
  text-align:right;
  background:var(--entry);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:4px;
  padding:4px 8px;
  color:var(--text);
  font-size:1.143rem
}
.parameter-fields>details>summary {
  cursor:pointer;
  font-size:.929rem;
  padding:9px 0
}
.parameter-fields>details>.field-group {
  padding-top:4px
}
.parameter-foot {
  padding:9px 12px;
  border-top:1px solid var(--line);
  flex-shrink:0;
  min-height:57px
}
.parameter-foot button {
  font-size:.857rem
}
.model-workspace {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0
}
.view-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  min-height:50px;
  flex-shrink:0;
  z-index:5
}
.view-toolbar button,.view-toolbar select,.view-toolbar summary {
  min-height:33px;
  font-size:.857rem;
  padding:3px 10px
}
.camera-buttons {
  display:flex;
  gap:4px
}
.camera-buttons button[aria-pressed=true] {
  background:#30434a;
  border-color:var(--accent)
}
.toolbar-spacer {
  flex:1
}
.view-menu .popover-body {
  min-width:245px
}
.check-control {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.929rem
}
.explosion-control {
  display:flex;
  align-items:center;
  gap:10px
}
.explosion-control input {
  width:145px;
  min-width:0
}
.viewport-row {
  display:flex;
  flex:1;
  min-height:100px;
  min-width:0
}
.stage {
  position:relative;
  flex:1;
  min-width:0;
  min-height:100px;
  background:var(--preview);
  overflow:hidden
}
#model-canvas {
  position:relative;
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:grab;
  z-index:1
}
#model-canvas:active {
  cursor:grabbing
}
.viewport-guide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0
}
.viewport-axes {
  position:absolute;
  width:86px;
  height:86px;
  right:12px;
  bottom:12px;
  pointer-events:none;
  z-index:2
}
.stage-message {
  position:absolute;
  left:15px;
  top:15px;
  z-index:3;
  background:#253642;
  color:#cde4e8;
  border:1px solid #405465;
  border-radius:4px;
  padding:7px 10px;
  font-size:.857rem;
  max-width:calc(100% - 30px);
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.stage-message strong {
  font-weight:500
}
.stage-message p {
  margin:0;
  max-width:420px
}
.loading-ring {
  border:2px solid #405465;
  border-top-color:var(--accent);
  width:18px;
  height:18px;
  border-radius:50%;
  animation:spin 1s linear infinite;
  flex-shrink:0
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.stale-banner {
  position:absolute;
  left:15px;
  top:15px;
  z-index:3;
  max-width:calc(100% - 30px);
  background:#382623;
  color:var(--error);
  border:1px solid #9b6257;
  border-radius:4px;
  padding:6px 9px;
  font-size:.857rem
}
.playback-container {
  border-block:1px solid var(--line);
  padding:9px 14px;
  flex-shrink:0
}
.motion-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  min-width:0
}
.motion-bar button,.motion-bar>.popover>summary {
  font-size:.929rem;
  height:38px
}
.motion-bar>.muted {
  white-space:nowrap
}
.motion-bar #motion-rpm {
  width:98px;
  min-width:85px;
  height:38px;
  flex:0 0 98px
}
.motion-palette .popover-body {
  left:0;
  right:auto;
  width:316px;
  bottom:calc(100% + 7px);
  top:auto
}
.motion-palette .popover-body select {
  min-height:28px;
  font-size:.857rem
}
.speed-slider {
  display:flex;
  align-items:center;
  gap:8px
}
.speed-slider input {
  min-width:0;
  flex:1;
  width:150px
}
.speed-slider button {
  padding:3px 7px
}
#playback-hint {
  margin-left:auto
}
#motion-error {
  margin-top:7px
}
.metric-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:13px 17px;
  min-height:100px;
  flex-shrink:0
}
.metric-cards>div {
  padding:0 12px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px
}
.result-title,.result-detail,.result-unit {
  color:var(--muted);
  font-size:.857rem
}
.result-value {
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap
}
.result-value strong {
  font-size:1.786rem;
  font-weight:500;
  line-height:1.3;
  font-variant-numeric:tabular-nums
}
.warning-bar {
  background:#302a20;
  border-top:1px solid #504534;
  padding:7px 14px;
  display:flex;
  gap:14px;
  align-items:center;
  flex-shrink:0;
  min-height:53px;
  color:#efbf79;
  font-size:.857rem;
  line-height:1.4
}
.warning-bar>span {
  flex:1
}
.warning-bar button {
  font-size:.857rem
}
.app-footer {
  display:flex;
  gap:7px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:8px 15px;
  min-height:54px;
  flex-shrink:0;
  font-size:.857rem
}
.status-line {
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  color:#a9cdbb;
  min-width:0
}
.status-line.error {
  color:var(--error)
}
.status-line.warning {
  color:#efbf79
}
#status-text {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.app-footer>span {
  color:var(--muted);
  white-space:nowrap
}
.app-footer button {
  font-size:.857rem;
  white-space:nowrap
}
.tool-dock {
  flex:0 0 360px;
  width:360px;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  background:#242b34;
  border-left:1px solid var(--line)
}
.tool-nav {
  display:flex;
  align-items:center;
  gap:3px;
  padding:7px;
  border-bottom:1px solid var(--line);
  flex-shrink:0
}
.tool-nav button {
  padding:3px 7px;
  font-size:.857rem;
  min-height:30px
}
.tool-nav button[aria-pressed=true] {
  background:#30434a;
  border-color:var(--accent)
}
#close-tool-dock {
  margin-left:auto
}
.inspection-panel {
  flex:1;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin
}
.component-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:10px;
  font-size:.786rem;
  border-bottom:1px solid var(--line);
  color:var(--muted)
}
.component-actions>span {
  width:100%
}
.component-row {
  display:grid;
  grid-template-columns:19px 22px minmax(0,1fr) 57px;
  gap:5px;
  align-items:center;
  padding:8px;
  border-bottom:1px solid var(--line);
  font-size:.857rem
}
.component-row.selected {
  background:#30434a
}
.component-row.header {
  font-size:.714rem;
  color:var(--muted)
}
.component-name {
  overflow-wrap:anywhere
}
.component-role {
  font-size:.714rem;
  color:var(--muted)
}
.component-size {
  display:none
}
.visibility {
  padding:0;
  border:0;
  background:transparent;
  min-height:24px
}
.visibility[aria-pressed=false] {
  opacity:.4
}
.results-list {
  padding:15px;
  font-size:.929rem;
  line-height:1.5
}
.empty-state {
  padding:18px;
  color:var(--muted);
  font-size:.929rem
}
.note-warning {
  background:#302a20;
  color:#efbf79;
  padding:10px;
  border-left:2px solid #efbf79
}
.notes-group {
  margin-bottom:18px
}
.analysis-tree {
  border-left:1px solid var(--line);
  padding-left:12px;
  margin:8px 0
}
.analysis-row {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid var(--line)
}
.analysis-row>span:last-child {
  text-align:right;
  overflow-wrap:anywhere
}
.recovery-banner {
  background:#302a20;
  color:#efbf79;
  padding:8px 15px;
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid #504534;
  font-size:.857rem;
  z-index:4
}
.skip-link {
  position:fixed;
  left:12px;
  top:-100px;
  background:var(--background);
  padding:10px;
  z-index:50
}
.skip-link:focus {
  top:10px
}
dialog {
  background:var(--background);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:7px;
  padding:0;
  width:min(760px,calc(100% - 30px));
  max-height:85vh;
  box-shadow:0 20px 80px #0008
}
dialog::backdrop {
  background:#0007
}
.dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:15px 20px
}
.dialog-header button {
  border:0;
  background:transparent;
  font-size:1.4rem
}
#dialog-body {
  padding:18px 20px;
  max-height:60vh;
  overflow:auto;
  font-size:.929rem;
  line-height:1.6
}
.dialog-actions {
  padding:12px 20px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  border-top:1px solid var(--line);
  flex-wrap:wrap
}
.dialog-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:17px
}
.dialog-field input {
  width:100%
}
.export-scope {
  background:var(--entry);
  padding:12px;
  border-radius:4px
}
.dialog-warning {
  color:#efbf79;
  font-size:.857rem
}
.document-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:ui-monospace,monospace;
  font-size:.857rem;
  line-height:1.5
}
.recent-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}
.recent-row p {
  font-size:.857rem;
  color:var(--muted);
  margin:3px 0
}
.noscript {
  position:fixed;
  inset:80px 30px auto;
  background:#382623;
  padding:25px;
  border:1px solid var(--error);
  z-index:99
}
[hidden] {
  display:none!important
}
@media(max-width:1100px) {
  .workspace {
    grid-template-columns:310px minmax(0,1fr)
  }
  .model-picker,.parameter-fields {
    padding-inline:14px
  }
  .field {
    grid-template-columns:minmax(0,1fr) 133px
  }
  .numeric-control {
    width:106px
  }
  .app-header {
    padding-inline:8px
  }
  .brand {
    gap:4px
  }
  .document-actions {
    gap:1px
  }
  .document-name {
    max-width:25vw
  }
  .view-toolbar {
    padding-inline:9px;
    gap:5px
  }
  .motion-bar {
    gap:7px
  }
  .motion-bar #motion-rpm {
    width:85px;
    flex-basis:85px
  }
  .metric-cards {
    padding-inline:8px
  }
  .metric-cards>div {
    padding-inline:8px
  }
  .tool-dock {
    flex-basis:330px;
    width:330px
  }
}
@media(max-width:760px) {
  body {
    height:auto;
    min-height:100dvh;
    overflow:auto
  }
  .app-header {
    height:auto;
    min-height:94px;
    grid-template-columns:1fr auto;
    padding:7px 10px;
    gap:6px
  }
  .brand {
    grid-row:1;
    grid-column:1/-1
  }
  .document-name {
    max-width:65vw
  }
  .header-right {
    grid-row:3;
    grid-column:1/-1;
    justify-self:stretch;
    justify-content:flex-start
  }
  .document-actions {
    grid-column:1/-1;
    grid-row:2;
    flex-wrap:wrap
  }
  .workspace {
    display:flex;
    flex-direction:column;
    flex:none
  }
  .model-picker {
    padding:14px
  }
  .parameter-fields {
    height:240px;
    flex:none;
    min-height:0;
    padding:14px
  }
  .parameter-panel {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .model-workspace {
    min-height:550px
  }
  .parameter-foot {
    min-height:45px;
    padding:5px 10px
  }

  .view-toolbar {
    height:auto;
    min-height:50px;
    flex-wrap:wrap
  }
  .toolbar-spacer {
    min-width:5px
  }
  .view-toolbar button,.view-toolbar select,.view-toolbar summary {
    padding:3px 7px
  }
  .viewport-row {
    flex:none;
    min-height:300px;
    height:350px;
    position:relative
  }
  .tool-dock {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    max-width:100%;
    z-index:4
  }
  .motion-bar {
    flex-wrap:wrap
  }
  .motion-bar #motion-rpm {
    flex:0 0 85px
  }
  .motion-bar button,.motion-bar>.popover>summary {
    font-size:.857rem
  }
  .motion-palette .popover-body {
    left:auto;
    right:0;
    width:min(300px,calc(100vw - 25px))
  }
  .metric-cards {
    min-height:98px;
    padding:12px 7px
  }
  .metric-cards>div {
    padding-inline:5px
  }
  .result-value strong {
    font-size:1.4rem
  }
  .result-title,.result-detail,.result-unit {
    font-size:.786rem
  }
  .warning-bar {
    padding:7px 10px
  }
  .app-footer {
    flex-wrap:wrap;
    padding:7px 10px;
    gap:3px
  }
  .status-line {
    flex-basis:100%;
    min-height:28px
  }
  .app-footer>span {
    margin-right:auto
  }
  .app-footer button {
    font-size:.786rem;
    padding-inline:5px
  }
  .recovery-banner {
    flex-wrap:wrap;
    gap:6px
  }
  .field {
    grid-template-columns:minmax(0,1fr) 145px
  }
  .numeric-control {
    width:118px
  }
  .view-menu .popover-body {
    right:-65px
  }
  .tools-menu .popover-body {
    right:0
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }
}
.drive-connections {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px
}
.io-role {
  display:flex;
  align-items:center;
  gap:8px;
  background:#242b34;
  border-left:2px solid #718499;
  padding:6px 7px;
  font-size:.857rem
}
.io-role>span {
  flex:1
}
.io-role select {
  font-size:.857rem;
  max-width:175px;
  flex:1
}
.io-role strong {
  font-weight:500
}
.io-input {
  border-left-color:#e9a45d
}
.io-output {
  border-left-color:#74c8a4
}
.motion-demos {
  display:flex;
  gap:5px;
  margin:10px 0
}
.motion-demos button {
  font-size:.857rem;
  padding-inline:8px
}
.view-menu .popover-body .muted:last-child {
  max-width:240px
}

/* Approved Studio layout: the real controllers share the same compact shell. */
:root {font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.45;}
button,select,.popover>summary {border-radius:6px;}
button {display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:400;}
button.primary {font-weight:500;}
.app-header {display:flex;align-items:center;gap:12px;padding:12px 15px;min-height:61px;}
.brand {gap:8px;margin-right:5px;font-weight:500;flex:none;}
.brand img {width:16px;height:16px;}
.project-heading {display:flex;flex-direction:column;flex:1;min-width:130px;}
.document-name {max-width:none;font-size:calc(14px * var(--text-scale));font-weight:400;}
.project-heading .muted {font-size:calc(11px * var(--text-scale));}
.header-right {width:auto;justify-self:auto;flex-wrap:nowrap;gap:12px;}
.header-right button {height:auto;min-height:34px;padding:6px 9px;}
.app-header svg,.workspace-toolbar svg {display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.project-menu>summary {font-size:calc(14px * var(--text-scale));min-height:34px;height:auto;width:auto;padding:6px 9px;gap:6px;border-color:transparent;background:transparent;}
.project-menu .popover-body {left:auto;right:0;}
.desktop-download {display:inline-flex;gap:6px;align-items:center;flex:none;font-size:calc(12px * var(--text-scale));border:1px solid var(--line);border-radius:6px;background:#242b34;text-decoration:none;padding:7px 9px;white-space:nowrap;}
.desktop-download .muted {font-size:calc(11px * var(--text-scale));}
.workspace-toolbar {display:flex;align-items:center;gap:3px;padding:7px 12px;border-bottom:1px solid var(--line);min-height:49px;flex-shrink:0;z-index:5;}
.workspace-toolbar button {font-size:calc(14px * var(--text-scale));min-height:34px;padding:6px 9px;}
.family-variant-chip {font-size:calc(11px * var(--text-scale));display:inline-flex;color:var(--muted);padding:3px 6px;border:1px solid var(--line);border-radius:4px;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.workspace {grid-template-columns:230px minmax(0,1fr);}
.parameter-panel {display:flex;flex-direction:column;}
.parameter-scroll {height:auto;flex:0 1 auto;overflow:auto;scrollbar-width:thin;padding:17px 14px;overscroll-behavior:contain;}
.section-eyebrow {text-transform:uppercase;letter-spacing:.08em;font-size:calc(11px * var(--text-scale));color:var(--muted);margin-bottom:10px;}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:7px;padding:0;margin-bottom:12px;}
.section-heading h2 {font-size:calc(14px * var(--text-scale));font-weight:500;white-space:nowrap;}
.model-picker {padding:0;border:0;gap:5px;margin-bottom:11px;}
.model-picker>label,.field label {font-size:calc(12px * var(--text-scale));color:var(--muted);font-weight:400;}
.model-picker>select,.model-picker .field>select {height:calc(32px * var(--text-scale));min-height:calc(32px * var(--text-scale));padding:5px 9px;border-radius:5px;font-size:calc(12px * var(--text-scale));}
.model-picker #variant-fields {margin-top:6px;}
.model-picker .field {display:flex;margin:0;gap:5px;}
.model-picker .field-top {min-height:0;width:100%;}
.parameter-fields {padding:0;flex:none;min-height:0;overflow:visible;}
.field-group {display:flex;flex-direction:column;gap:11px;padding:0;}
.field-group.primary-geometry {display:flex;flex-direction:column;gap:11px;}
.parameter-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:8px;row-gap:0;align-items:stretch;}
.parameter-pair>.field {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:1 / span 4;row-gap:0;align-items:start;}
.parameter-pair>.field>* {grid-column:1;}
.parameter-pair>.field>.field-top {grid-row:1;margin-bottom:5px;align-self:start;}
.parameter-pair>.field>.field-input {grid-row:2;align-self:start;}
.parameter-pair>.field>.linked-note {grid-row:3;}
.parameter-pair>.field>.field-error {grid-row:4;}
.parameter-pair>.field>.linked-note,.parameter-pair>.field>.field-error:not([hidden]) {margin:2px 0 0;}
.field {display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0;min-height:0;min-width:0;}
.field-top {min-height:0;gap:5px;}
.field-top label {line-height:1.45;}
.field-input {display:flex;position:relative;width:100%;gap:0;}
.numeric-control {width:100%;height:calc(33.4px * var(--text-scale));border-radius:5px;}
.numeric-control input[type=text] {height:100%;min-height:0;padding:calc(7px * var(--text-scale)) 9px;text-align:left;font-size:calc(12px * var(--text-scale));line-height:1.45;}
.numeric-control button {position:absolute;top:1px;width:14px;min-height:14px;height:14px;right:4px;opacity:0;font-size:calc(12px * var(--text-scale));background:var(--entry);z-index:1;}
.numeric-control button:last-child {top:auto;bottom:1px;margin:0;}
.numeric-control:focus-within button,.field:hover .numeric-control button {opacity:1;}
.numeric-control:focus-within input,.field:hover .numeric-control input {padding-right:24px;}
.field>select {width:100%;font-size:calc(12px * var(--text-scale));min-height:calc(32px * var(--text-scale));padding:5px 9px;}
.field:has(>select) {gap:5px;}
.field:has(>select) .field-top {position:relative;padding-right:0;}
.parameter-fields>details {border-top:1px solid var(--line);padding:11px 0;margin-top:13px;}
.parameter-fields>details>summary {font-size:calc(12px * var(--text-scale));padding:0;line-height:1.45;cursor:pointer;}
.parameter-fields>details>.field-group,.remaining-parameter-fields {padding-top:12px;}
.remaining-parameter-fields {display:flex;flex-direction:column;gap:17px;}
.remaining-parameter-fields .field-group h3 {font-size:calc(12px * var(--text-scale));font-weight:500;margin:0;color:var(--muted);}

.parameter-tabs {display:flex;align-items:stretch;flex-wrap:nowrap;gap:2px;margin:0 0 12px;padding:7px 0;border:0;border-bottom:1px solid var(--line);flex-shrink:0;}
.parameter-tabs button {flex:1 1 auto;min-width:0;min-height:34px;height:auto;font-size:calc(12px * var(--text-scale));line-height:1.4;padding:4px 3px;white-space:normal;overflow-wrap:anywhere;background:transparent;border-color:transparent;box-shadow:none;}
.parameter-tabs button[aria-selected=true] {background:#29343e;color:var(--text);box-shadow:inset 0 -2px var(--accent);}
.parameter-foot {padding:0;border:0;min-height:0;}
#reset-family {font-size:calc(12px * var(--text-scale));justify-content:flex-start;padding:6px 0;}
.derived-row {font-size:calc(11px * var(--text-scale));margin:0;}
.derived-row output {font-size:calc(12px * var(--text-scale));}
.viewport-row {position:relative;}
.view-toolbar {position:absolute;top:13px;right:14px;z-index:5;border:0;padding:0;min-height:0;gap:6px;background:transparent;}
.view-toolbar button {background:#242b34;border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 8px #11161d40;min-height:34px;font-size:calc(14px * var(--text-scale));padding:6px 9px;}
.view-toolbar button:hover,#appearance:hover {background:#29343e;}
.view-toolbar button[aria-expanded=true] {background:#30434a;border-color:var(--accent);color:var(--accent);}
.preview-caption {position:absolute;z-index:2;top:14px;left:15px;right:175px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none;}
.preview-caption>span {font-size:calc(11px * var(--text-scale));background:var(--preview);padding:3px 6px;border-radius:4px;color:var(--muted);}
.preview-hint {position:absolute;bottom:12px;left:15px;font-size:calc(11px * var(--text-scale));color:var(--muted);pointer-events:none;z-index:2;}
.tool-dock {position:absolute;top:60px;right:12px;bottom:12px;width:min(340px,calc(100% - 24px));max-width:calc(100% - 24px);z-index:4;flex:none;background:rgb(36 43 52 / .89);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 35px #11161d55;overflow:hidden;}
.tool-dock.expanded {width:min(620px,calc(100% - 24px));}
.tool-nav {padding:13px 14px;gap:12px;}
.tool-nav strong {font-size:calc(14px * var(--text-scale));font-weight:500;min-width:0;flex:1;}
#expand-tool-dock,#close-tool-dock {margin-left:0;flex-shrink:0;font-size:calc(16px * var(--text-scale));}
.tools-chooser {padding:14px;display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:0;}
.tools-chooser button {justify-content:flex-start;text-align:left;padding:10px;font-size:calc(14px * var(--text-scale));}
.tools-chooser hr {margin:7px 0;}
.view-panel {padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;}
.view-panel h3:not(:first-child) {margin-top:10px;padding-top:14px;border-top:1px solid var(--line);}
.view-panel h3 {margin-bottom:0;font-weight:500;}
.view-panel select {width:100%;}
.view-panel .explosion-control input {flex:1;}
.camera-buttons {flex-wrap:wrap;}
.camera-buttons button {flex:1;}
.inspection-panel,.tools-chooser,.view-panel {overscroll-behavior:contain;}
.metric-cards {order:0;background:#242b34;border-top:1px solid var(--line);min-height:0;padding:10px 18px;}
.metric-cards>div {padding:0 20px;gap:0;}
.metric-cards>div:first-child {padding-left:0;}
.metric-cards>div+div {border-left:1px solid var(--line);}
.metric-cards>div:last-child {padding-right:0;}
.result-title {font-size:calc(13px * var(--text-scale));margin-bottom:4px;}
.result-value {gap:7px;}
.result-value strong {font-size:calc(28px * var(--text-scale));font-weight:500;letter-spacing:-.02em;line-height:1.2;}
.result-unit {font-size:calc(15px * var(--text-scale));}
.result-detail {font-size:calc(11px * var(--text-scale));margin-top:4px;}
.playback-container {padding:12px 14px;}
.motion-bar {gap:7px;}
.motion-bar button,.motion-bar>.popover>summary {font-size:calc(14px * var(--text-scale));height:auto;min-height:34px;}
.motion-bar #motion-rpm {height:auto;min-height:0;min-width:0;width:72px;flex-basis:72px;}
.app-footer {min-height:34px;padding:8px 15px;font-size:calc(11px * var(--text-scale));}
.app-footer button,.status-line {font-size:calc(11px * var(--text-scale));}
.app-footer button {min-height:24px;padding:0 6px;}
.parameter-help-pane {position:fixed;z-index:30;width:min(286px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:rgb(36 43 52 / .89);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line),0 10px 30px #11161d55;font-size:calc(12px * var(--text-scale));line-height:1.45;overscroll-behavior:contain;}
.parameter-help-pane>header {display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:12px;border-bottom:1px solid var(--line);}
.parameter-help-pane>header strong {font-size:calc(14px * var(--text-scale));font-weight:500;}
.parameter-help-pane>header button {min-height:22px;padding:3px;font-size:calc(14px * var(--text-scale));}
.parameter-help-body {padding:12px;display:grid;gap:10px;}
.parameter-help-body h3 {margin:0;font-size:calc(11px * var(--text-scale));text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.parameter-help-body p {margin:0;font-size:calc(12px * var(--text-scale));overflow-wrap:anywhere;}
.parameter-help-body figure {margin:0;min-width:0;overflow:auto;}
.parameter-help-body img {display:block;width:100%;height:auto;border-radius:5px;}
.parameter-help-body figcaption {font-size:calc(11px * var(--text-scale));margin-top:4px;}
.parameter-help-body>button {justify-self:start;font-size:calc(12px * var(--text-scale));}
.parameter-help-pane.expanded {width:min(390px,calc(100vw - 16px));}
.parameter-help-pane.expanded img {width:360px;min-width:360px;max-width:none;}
@media(max-width:820px) and (min-width:601px) {
  .workspace {grid-template-columns:220px minmax(0,1fr);}
  .app-header {gap:8px;}
  .brand {width:auto;}
  .workspace-toolbar button {font-size:calc(12px * var(--text-scale));}
  .metric-cards {padding:17px 14px;}
  .metric-cards>div {padding:0 12px;}
  .result-title {font-size:calc(12px * var(--text-scale));}
  .result-value strong {font-size:calc(25px * var(--text-scale));}
}
@media(max-width:760px) and (min-width:601px) {
  body {height:100dvh;overflow:hidden;}
  .workspace {display:grid;flex:1;min-height:0;}
  .parameter-panel {border-right:1px solid var(--line);border-bottom:0;}
  .parameter-fields {height:auto;flex:none;}
  .model-workspace {min-height:0;}
  .viewport-row {flex:1;height:auto;min-height:100px;}
  .app-header {flex-wrap:wrap;min-height:61px;}
  .header-right {justify-content:flex-end;}
}
@media(max-width:600px) {
  body {height:auto;min-height:100dvh;overflow:auto;}
  .app-header {flex-wrap:wrap;gap:8px;}
  .project-heading {min-width:105px;}
  .header-right {flex:1;justify-content:flex-end;}
  .desktop-download {font-size:calc(11px * var(--text-scale));}
  .desktop-download .muted {display:none;}
  .workspace-toolbar {flex-wrap:wrap;}
  .workspace-toolbar button {font-size:calc(12px * var(--text-scale));}
  .workspace-toolbar .family-variant-chip {display:none;}
  .workspace {display:flex;flex-direction:column;flex:none;}
  .parameter-scroll {height:auto;overflow:visible;}
  .parameter-panel {border-right:0;border-bottom:1px solid var(--line);}
  .parameter-fields {height:auto;}
  .viewport-row {flex:none;height:550px;}
  .tool-dock {top:60px;right:12px;bottom:12px;}
  .metric-cards {grid-template-columns:1fr;padding:7px 17px;}
  .metric-cards>div {padding:14px 0!important;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;}
  .metric-cards>div+div {border-left:0;border-top:1px solid var(--line);}
  .metric-cards .result-value {grid-column:2;grid-row:1 / span 2;align-self:center;justify-content:flex-end;}
  .result-title {margin:0;font-size:calc(13px * var(--text-scale));}
  .result-detail {grid-column:1;margin-top:5px;}
  .result-value strong {font-size:calc(27px * var(--text-scale));}
  .preview-caption {top:58px;right:12px;}
}
@media(pointer:coarse) {.field:has(>select) .field-top {padding-right:0;}.field:has(>select) .field-top,.field:has(.field-top>input[type=checkbox]) .field-top {min-height:32px;}.numeric-control input[type=text] {padding-right:9px;}.numeric-control button {right:4px;}.numeric-control:focus-within input,.field:hover .numeric-control input {padding-right:28px;}.view-toolbar button {min-height:42px;}}

/* Preserve the approved preview's dominant model area at laptop heights. */
body {height:auto;min-height:100dvh;overflow:auto;}
.workspace {flex:1 0 auto;min-height:690px;}
.viewport-row {flex:1;min-height:560px;}
.playback-container {display:grid;gap:8px;}
.motion-bar {min-height:0;}
.motion-controls #playback-speed {width:82px;min-height:33px;}
.input-controls input[type=range],.phase-controls input[type=range] {flex:1;min-width:80px;}
.input-controls #motion-rpm {text-align:left;padding:5px 7px;}
.motion-bar label,.motion-bar>.muted {font-size:calc(11px * var(--text-scale));}
.motion-controls button,.input-controls button,.phase-controls button {font-size:calc(14px * var(--text-scale));padding:6px 9px;}
.phase-controls label {flex:none;}
#playback-hint:empty {display:none;}
.motion-details {font-size:calc(11px * var(--text-scale));line-height:1.45;}
.motion-details>summary {font-size:calc(11px * var(--text-scale));color:var(--muted);cursor:pointer;}
.motion-details[open]>span {display:block;margin-top:5px;}
@media(max-width:760px) and (min-width:601px) {body {height:auto;overflow:auto;}.workspace {flex:1 0 auto;min-height:690px;}.viewport-row {min-height:560px;}}
@media(max-width:600px) {.workspace {flex:none;min-height:0;}.viewport-row {min-height:550px;}.input-controls #motion-caption {flex-basis:auto;}.input-controls input[type=range] {flex-basis:100%;}}

/* Preview tool chooser uses the approved quiet icon rows. */
.view-toolbar svg,.tools-chooser svg {display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.tools-chooser button {background:transparent;border-color:transparent;border-radius:6px;gap:6px;}
.tools-chooser button:hover {background:#29343e;}
.tool-panel-heading {display:flex;flex:1;min-width:0;flex-direction:column;}
.tool-panel-heading small {font-size:calc(11px * var(--text-scale));color:var(--muted);}
.tool-panel-heading strong {font-size:calc(14px * var(--text-scale));font-weight:500;}
/* The WebGL backing buffer must not size its own flexible viewport. Its pixel
   height changes with DPR and resize; absolute positioning keeps that intrinsic
   bitmap size out of the grid/flex layout during narrow/wide transitions. */
#model-canvas {position:absolute;inset:0;width:100%;height:100%;}

/* Retain the original stroke weight for the remaining reference glyphs. */
.view-toolbar svg,#appearance svg {stroke-width:2;}

/* Retain the original compact three-row motion and icon treatment. */
.motion-bar svg,.tool-nav svg {display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.motion-bar button {background:transparent;border-color:transparent;}
.motion-bar button:hover {background:#29343e;}
#play-motion {background:#242b34;border-color:var(--line);}
#play-motion:hover {background:#29343e;}
#play-motion[aria-pressed=true] {background:#30434a;border-color:var(--accent);color:var(--accent);}
#play-motion::before {content:'';display:block;width:16px;height:16px;flex:none;background:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%203%2014%209-14%209V3Z%22%2F%3E%3C%2Fsvg%3E");}
#play-motion[aria-pressed=true]::before {mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M8%204v16M16%204v16%22%2F%3E%3C%2Fsvg%3E");}

/* Keep the important results large while returning strip height to the model. */
.playback-container {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"transport phase" "input input";gap:6px 12px;padding:8px 14px;}
.motion-controls {grid-area:transport;min-width:0;gap:6px;}
.phase-controls {grid-area:phase;min-width:0;gap:6px;}
.input-controls {grid-area:input;min-width:0;gap:6px;}
#motion-error {grid-column:1/-1;}
.motion-controls button,.input-controls button,.phase-controls button {font-size:calc(12px * var(--text-scale));min-height:28px;padding:4px 7px;}
.motion-controls #playback-speed {width:70px;min-height:28px;padding:4px 7px;font-size:calc(12px * var(--text-scale));}
.input-controls #motion-rpm {padding:4px 7px;font-size:calc(12px * var(--text-scale));min-height:28px;}
.motion-details {flex:none;}
.motion-bar>.motion-details>summary {min-height:28px;padding:4px 7px;border-color:transparent;background:transparent;font-size:calc(11px * var(--text-scale));}
.motion-details[open]>.popover-body {top:auto;bottom:calc(100% + 8px);right:0;margin:0;padding:10px;width:min(320px,calc(100vw - 24px));background:#242b34;font-size:calc(11px * var(--text-scale));}
@media(max-width:1000px) {
  .playback-container {grid-template-columns:minmax(0,1fr);grid-template-areas:"transport" "input" "phase";}
}
@media(max-width:600px) {
  .input-controls input[type=range] {flex-basis:auto;}
  .input-controls #motion-caption {flex-basis:auto;}
  .metric-cards {padding:5px 17px;}
  .metric-cards>div {padding:9px 0!important;}
}
@media(pointer:coarse) {
  .motion-controls button,.input-controls button,.phase-controls button,.motion-bar>.motion-details>summary,.motion-controls #playback-speed,.input-controls #motion-rpm {min-height:36px;}
}

/* Desktop and tablet fit the viewport; phones retain the natural page flow. */
@media(min-width:601px) {
  html {height:100%;overflow:hidden;}
  body {height:100vh;height:100dvh;min-height:0;overflow:hidden;}
  .app-header,.workspace-toolbar,.app-footer,.recovery-banner {max-width:100%;min-width:0;flex-shrink:0;}
  .app-header {flex-wrap:wrap;}
  .project-heading {min-width:0;flex:1 1 110px;}
  .header-right {min-width:0;max-width:100%;flex-wrap:wrap;}
  .desktop-download {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  .workspace {display:grid;grid-template-rows:minmax(0,1fr);flex:1 1 0;min-height:0;min-width:0;overflow:hidden;}
  .parameter-panel {min-height:0;overflow:hidden;}
  .parameter-scroll {height:auto;flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;}
  .section-heading h2 {min-width:0;white-space:normal;overflow-wrap:anywhere;}
  .model-workspace {position:relative;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
  .viewport-row {flex:1 0 100px;height:auto;min-height:100px;}
  .stage {min-height:0;}
  .metric-cards,.playback-container,.warning-bar {flex-shrink:0;}
  .app-footer {flex-wrap:wrap;padding:4px 10px;gap:3px;max-height:20dvh;overflow:auto;}
  .app-footer .status-line {flex:1 1 120px;min-height:20px;}
  .recovery-banner {max-height:15dvh;overflow:auto;}
}
@media(min-width:601px) and (max-height:650px) {
  .app-header {padding-block:6px;min-height:0;max-height:28dvh;overflow:auto;}
  .workspace-toolbar {padding-block:3px;min-height:0;max-height:16dvh;overflow:auto;}
  .metric-cards {padding-block:6px;}
  .playback-container {padding-block:5px;gap:4px;}
  .app-footer {padding-block:3px;}
  .tool-dock {position:fixed;top:10px;right:10px;bottom:10px;width:min(340px,calc(100% - 20px));max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);z-index:10;}
  .tool-dock.expanded {width:min(620px,calc(100% - 20px));}
}
@media(max-width:600px) {
  .header-right {flex:0 0 100%;width:100%;justify-content:flex-end;flex-wrap:nowrap;}
  .header-right .desktop-download {flex:0 1 auto;overflow-wrap:normal;}
}

/* Compact Model without reducing the selected values or the controls below it. */
.parameter-scroll {padding-top:6px;}
.family-caption {display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:calc(18px * var(--text-scale));}
.family-caption label {font-size:calc(12px * var(--text-scale));color:var(--muted);font-weight:400;line-height:1.15;}
.model-picker {gap:1px;margin-bottom:0;}
.model-picker>label,.model-picker .field-top label {line-height:1.15;}
.model-picker>select,.model-picker .field>select {height:calc(22px * var(--text-scale));min-height:calc(22px * var(--text-scale));padding:1px 9px;}
.model-picker #variant-fields {margin-top:2px;}
.model-picker .field {gap:1px;}
.model-picker .field-top {min-height:calc(18px * var(--text-scale));}
@media(pointer:coarse) {
  .model-picker>select,.model-picker .field>select {min-height:32px;}
}

/* Settings reuses the app dialog and the existing preference controls. */
dialog:has(.settings-panel) {width:min(620px,calc(100% - 30px));}
.settings-panel {min-width:0;}
.settings-section {margin-bottom:20px;}
.settings-section .check-control {grid-column:1/-1;}
.settings-section {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;}
.settings-section h3,.settings-section p {grid-column:1/-1;margin:0;}
.settings-section h3 {color:var(--accent);font-size:1rem;}
.settings-section p {margin-bottom:12px;}
.settings-section select {min-width:110px;}
@media(max-width:400px) {.settings-section {grid-template-columns:minmax(0,1fr);gap:10px;}.settings-section select {width:100%;}}

/* Two compact, independent presentation menus; document controls stay in place. */
.preference-menu>summary {display:flex;gap:6px;align-items:center;background:transparent;border-color:transparent;white-space:nowrap;}
.preference-menu .popover-body {right:0;left:auto;min-width:170px;max-height:calc(100dvh - 150px);overflow:auto;}
.preference-menu label {display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer;white-space:nowrap;}
.preference-menu label:hover {background:var(--button-hover);}
.preference-menu input {accent-color:var(--accent);margin:0;}
:root {--button:#242b34;--button-hover:#29343e;--panel:rgb(36 43 52 / .89);}
:root[data-theme=light] {color-scheme:light;--background:#f7f9fa;--preview:#e9eef1;--entry:#fff;--line:#d6dfe5;--text:#263846;--muted:#627380;--accent:#aa633d;--error:#a52c23;--button:#e2e9ed;--button-hover:#d3e1e7;--panel:rgb(246 249 251 / .91);}
:root[data-theme=light] :is(button,select,.popover>summary,.desktop-download,.view-toolbar button,#play-motion,.metric-cards,.motion-details[open]>.popover-body) {background:var(--button);}
:root[data-theme=light] :is(button:hover,.popover>summary:hover,.view-toolbar button:hover,.tools-chooser button:hover,.motion-bar button:hover,.parameter-tabs button[aria-selected=true]) {background:var(--button-hover);}
:root[data-theme=light] :is(button.flat,.preference-menu>summary) {background:transparent;}
:root[data-theme=light] button.primary {background:var(--accent);color:#fff;}
:root[data-theme=light] :is(.tool-dock,.parameter-help-pane) {background:var(--panel);}
:root[data-theme=light] :is(.view-toolbar button[aria-expanded=true],#play-motion[aria-pressed=true]) {background:#cce4e5;color:#205f62;}
:root[data-theme=light] :is(.note-warning,.recovery-banner,.stale-banner,.preview-warning) {background:#fff0d9;color:#785014;border-color:#b7904e;}
:root[data-theme=light] :is(.error,.note-error) {background:#ffede8;color:var(--error);}
:root[data-theme=light] :is(a,.tool-panel-heading,.metric-value) {color:inherit;}
:root[data-theme=light] :is(.selection-summary,.component-selected) {background:#d5e8ee;color:#263f4b;}
@font-face {font-family:'RatioLab Noto CJK';src:url('fonts/NotoSansCJK-Regular.ttc') format('collection');font-weight:100 900;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face {font-family:'RatioLab Noto Tamil';src:url('fonts/NotoSansTamil-Regular.ttf') format('truetype');font-weight:100 900;font-display:swap;unicode-range:U+0B80-0BFF;}
:root {font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','RatioLab Noto CJK','RatioLab Noto Tamil',sans-serif;}
/* Menus must sit above the overlaid View/Tools buttons, including tablet layout. */
.workspace-toolbar {position:relative;z-index:20;overflow:visible;}
.preference-menu .popover-body {z-index:40;}
:root[data-theme=light] button#export-document.primary {background:var(--accent);color:#fff;}
:root[data-theme=light] .status-line {color:#34634d;}
:root[data-theme=light] .status-line.error {color:var(--error);}
:root[data-theme=light] .status-line.warning {color:#785014;}
:root[data-theme=light] #viewport-axes {opacity:.65;}
/* Short translated section names fit the same horizontal navigation row. */
:root:not([lang=en]) .parameter-tabs button {font-size:calc(11px * var(--text-scale));padding-inline:1px;}

/* Direct binary theme action: on = light, off = dark. */
.workspace-toolbar #theme-toggle {display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.theme-track {display:inline-flex;align-items:center;width:34px;height:20px;padding:2px;border:1px solid var(--line);border-radius:12px;background:#52606d;flex:none;}
.theme-thumb {width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(0);transition:transform .15s ease;}
#theme-toggle[aria-checked=true] .theme-track {background:var(--accent);border-color:var(--accent);}
#theme-toggle[aria-checked=true] .theme-thumb {transform:translateX(14px);}
@media (prefers-reduced-motion:reduce) {.theme-thumb {transition:none;}}

/* Visual model catalog and readable choice menus share the workspace palette. */
.catalog-opener {display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:28px;padding:3px 8px;background:var(--entry);font-size:12px;}
.catalog-opener>span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.model-picker>#family {display:none;}
.model-catalog {color:var(--text);background:var(--background);border:1px solid var(--line);border-radius:12px;padding:20px;width:min(1080px,calc(100vw - 40px));height:min(740px,calc(100dvh - 40px));max-width:none;max-height:none;overflow:hidden;}
.model-catalog[open] {display:flex;flex-direction:column;gap:16px;}
.model-catalog::backdrop {background:#080d15a8;backdrop-filter:blur(3px);}
.model-catalog header,.model-catalog footer {display:flex;align-items:center;gap:10px;flex:none;}
.model-catalog h2 {font-size:20px;margin:0;flex:1;}
.model-catalog h3 {font-size:18px;margin:0;}
.model-catalog>.catalog-body {display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;min-height:0;flex:1;}
.model-catalog>input {width:100%;padding:9px 12px;flex:none;background:var(--entry);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit;}
.catalog-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-content:start;gap:12px;overflow:auto;padding:2px 8px 2px 2px;}
.catalog-card {height:auto;min-height:180px;display:flex;flex-direction:column;text-align:left;gap:10px;border-radius:9px;padding:10px;min-width:0;background:var(--button,#242b34);}
.catalog-card[hidden] {display:none;}
.catalog-card img {flex:none;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:5px;background:#11161d;}
.catalog-card span {font-size:13px;line-height:1.4;min-height:2.8em;}
.catalog-card[aria-pressed=true] {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.catalog-detail {display:flex;flex-direction:column;gap:12px;overflow:auto;border-left:1px solid var(--line);padding-left:20px;min-width:0;}
.catalog-detail>img {width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#11161d;border-radius:7px;}
.catalog-detail p {font-size:13px;line-height:1.5;margin:0;}
.catalog-detail label {display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px;}
.catalog-detail select {width:100%;}
.model-catalog footer {border-top:1px solid var(--line);padding-top:14px;}
.model-catalog footer>span {flex:1;color:var(--muted);font-size:12px;}
.catalog-empty {grid-column:1/-1;color:var(--muted);}
.choice-source {position:absolute!important;width:1px!important;height:1px!important;clip-path:inset(50%);overflow:hidden;opacity:0;pointer-events:none;}
.choice-select {display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;width:100%;text-align:left;background:var(--entry);font:inherit;min-height:32px;padding:5px 9px;}
.choice-select>span:first-child {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.choice-select>span:last-child {flex:none;color:var(--muted);}
.choice-popup {position:fixed;inset:auto;margin:0;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--background);color:var(--text);box-shadow:0 10px 35px #0006;overflow:auto;}
.choice-popup>input {width:100%;margin-bottom:6px;padding:8px;background:var(--entry);color:var(--text);border:1px solid var(--line);border-radius:5px;font:inherit;}
.choice-popup [role=listbox] {display:flex;flex-direction:column;gap:3px;}
.choice-popup [role=option] {position:relative;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.45;padding:9px 30px 9px 10px;border:0;background:transparent;border-radius:5px;min-height:36px;}
.choice-popup [role=option]:hover,.choice-popup [role=option]:focus {background:var(--button-hover,#303a46);}
.choice-popup [aria-selected=true] {background:var(--button-hover,#303a46);color:var(--accent);}
.choice-popup [aria-selected=true]::after {content:'✓';position:absolute;right:10px;top:10px;}
.model-picker .choice-select {min-height:26px;padding:2px 8px;font-size:12px;}
@media(max-width:760px) {.model-catalog>.catalog-body {grid-template-columns:minmax(0,1fr) 240px;gap:12px;}.catalog-grid {grid-template-columns:repeat(2,minmax(130px,1fr));}.catalog-detail {padding-left:12px;}}
@media(max-width:560px) {.model-catalog {padding:12px;width:calc(100vw - 16px);height:calc(100dvh - 16px);}.model-catalog>.catalog-body {display:flex;flex-direction:column;overflow:auto;}.catalog-grid {overflow:visible;flex:none;}.catalog-detail {overflow:visible;border-left:0;border-top:1px solid var(--line);padding:16px 0 0;}.catalog-detail>img {display:none;}.model-catalog footer>span {display:none;}.model-catalog footer {justify-content:flex-end;}}

.motion-controls #playback-speed-choice {width:70px;flex:none;min-height:28px;padding:4px 7px;font-size:calc(12px * var(--text-scale));}

/* Catalog images have a shared, centered frame; every menu uses View/Tools surfaces. */
:root {--floating-panel:rgb(36 43 52 / .89);--floating-shadow:0 12px 35px #11161d55;--choice-selected:rgb(124 200 200 / .14);}
:root[data-theme=light] {--floating-panel:rgb(255 255 255 / .89);--floating-shadow:0 12px 35px #26384626;--choice-selected:rgb(170 99 61 / .14);}
.catalog-card {align-items:stretch;justify-content:flex-start;}
.catalog-image {display:grid;place-items:center;aspect-ratio:3/2;width:100%;min-width:0;flex:none;background:var(--preview);border-radius:6px;overflow:hidden;}
.catalog-image img {display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:50% 50%;}
:root :is(.tool-dock,.popover-body,.choice-popup) {background:var(--floating-panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;box-shadow:var(--floating-shadow);}
.choice-select {background:var(--button,#242b34);border-radius:6px;}
.choice-select[aria-expanded=true] {border-color:var(--accent);background:var(--choice-selected);color:var(--accent);}
.choice-popup:popover-open {display:flex;flex-direction:column;padding:0;overflow:hidden;}
.choice-popup>input {flex:none;width:calc(100% - 24px);margin:10px 12px 0;}
.choice-popup [role=listbox] {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:5px;gap:2px;}
.choice-popup [role=option] {display:block;height:auto;min-height:32px;flex:none;border-radius:4px;padding:5px 30px 5px 8px;background:transparent;text-align:left;}
.choice-popup [aria-selected=true]::after {top:50%;transform:translateY(-50%);}
.choice-popup [aria-selected=true] {background:var(--choice-selected);color:var(--accent);}
@media(max-width:560px) {.catalog-detail>.catalog-image {display:none;}}
:root[data-theme=light] :is(.tool-dock,.popover-body,.choice-popup) {background:var(--floating-panel);}
:root[data-theme=light] .choice-select[aria-expanded=true] {background:var(--choice-selected);color:var(--accent);}
/* A fixed image row contributes to card sizing before the grid is laid out. */
.catalog-card {min-height:204px;}
.catalog-card .catalog-image {height:132px;aspect-ratio:auto;}

/* Shared sidebar geometry from the approved Direct / Essential composition. */
:root {--drive-selected:#30434a;}
:root[data-theme=light] {--drive-selected:color-mix(in srgb,var(--accent) 14%,var(--background));}
.parameter-scroll {padding:12px 12px 17px;}
.model-picker {margin:-6px -6px 0;gap:0;}
.model-picker .family-caption {display:block;position:relative;}
.model-picker .catalog-opener {display:flex;align-items:center;gap:9px;min-height:60px;padding:6px 28px 6px 6px;background:#303a46;border:0;text-align:left;}
:root[data-theme=light] #model-catalog-open {background:#eef3f5;}
.model-picker .catalog-opener:hover,:root[data-theme=light] #model-catalog-open:hover {background:var(--button-hover);}
.catalog-opener #model-catalog-image {width:50px;height:44px;flex:none;object-fit:contain;background:var(--preview);border-radius:4px;}
.catalog-opener .catalog-opener-copy {display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;}
.catalog-opener #model-catalog-caption {font-size:calc(13px * var(--text-scale));line-height:1.15;font-weight:500;white-space:normal;overflow-wrap:anywhere;}
.catalog-opener #model-catalog-summary {font-size:calc(11px * var(--text-scale));line-height:1.15;color:var(--muted);white-space:normal;overflow-wrap:anywhere;}
.catalog-opener .catalog-grid-symbol {position:absolute;right:6px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);pointer-events:none;}
.parameter-tabs {margin:6px -12px 12px;gap:0;padding:0 9px;border-block:1px solid var(--line);}
.parameter-tabs button,:root:not([lang=en]) .parameter-tabs button {flex:1;min-width:0;min-height:0;border-radius:0;border:0;border-bottom:2px solid transparent;box-shadow:none;font-size:calc(12px * var(--text-scale));padding:10px 1px 8px;}
.parameter-tabs button[aria-selected=true],:root[data-theme=light] .parameter-tabs button[aria-selected=true] {background:transparent;color:var(--accent);border-bottom-color:var(--accent);box-shadow:none;}
#parameters.direct-motion-panel>details {border:0;padding:0;margin:0;}
#parameters.direct-motion-panel>details>summary {min-height:25px;font-size:calc(13px * var(--text-scale));}
#parameters.direct-motion-panel>details>.field-group {padding:0;}
#parameters .direct-drive {display:grid;gap:11px;margin:0;padding:10px 0 12px;}
.direct-drive-section>summary {display:flex;align-items:center;gap:5px;list-style:none;}
.direct-drive-section>summary::-webkit-details-marker {display:none;}
.direct-drive-section>summary::before {content:'›';display:inline-block;width:10px;font-size:18px;line-height:1;transform-origin:4px 50%;}
.direct-drive-section[open]>summary::before {transform:rotate(90deg);}
.drive-member-cards {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.drive-member-card {display:grid;gap:9px;min-width:0;background:var(--entry);border:1px solid var(--line);border-radius:5px;padding:9px 8px;font-size:calc(13px * var(--text-scale));}
.drive-member-card:has(input:checked) {background:var(--drive-selected);border-color:var(--accent);}
.drive-member-heading {display:flex;justify-content:space-between;align-items:center;gap:4px;font-weight:500;}
.drive-member-heading>span {min-width:0;overflow-wrap:anywhere;}
.drive-member-heading input {margin:0;accent-color:var(--accent);flex:none;width:13px;height:13px;}
.drive-member-role {display:grid;gap:2px;font-size:calc(11px * var(--text-scale));color:var(--muted);}
.drive-member-card:has(input:checked) .drive-member-role {color:var(--accent);}
.direct-drive-caption,.drive-direction {color:var(--muted);font-size:calc(12px * var(--text-scale));}
.drive-direction {text-align:center;}
.drive-result {display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-block:1px solid var(--line);padding:8px 0;font-size:calc(12px * var(--text-scale));}
.drive-result>span {min-width:0;overflow-wrap:anywhere;}
.drive-result strong {color:var(--accent);font-size:calc(16px * var(--text-scale));font-weight:400;white-space:nowrap;}
.drive-result strong small {font-size:calc(11px * var(--text-scale));color:var(--muted);margin-left:3px;}
.direct-drive .drive-reset {display:flex;align-items:center;justify-content:center;gap:6px;align-self:stretch;width:100%;height:auto;min-height:0;padding:6px 7px;border:0;background:transparent;color:var(--muted);font-size:calc(11px * var(--text-scale));}
.drive-reset svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#parameters.direct-motion-panel>details:not(.direct-drive-section) {border-top:1px solid var(--line);padding-top:10px;}
#parameters.direct-motion-panel>details:not(.direct-drive-section)>.field-group {padding-top:10px;}
.direct-motion-panel .drive-footer {font-size:calc(11px * var(--text-scale));color:var(--muted);margin:10px 0 0;}
@media(pointer:coarse){.direct-drive .drive-reset,.parameter-tabs button {min-height:44px;}.drive-member-card {min-height:88px;}}

/* Orientation and view-only navigation; no panel consumes preview space. */
.navigation-controls {position:absolute;top:54px;right:14px;z-index:3;width:122px;display:flex;flex-direction:column;align-items:center;gap:2px;}
#viewport-cube {width:116px;height:116px;overflow:visible;cursor:grab;touch-action:none;border-radius:8px;outline-offset:2px;}
#viewport-cube:active {cursor:grabbing;}
.cube-tile {fill:color-mix(in srgb,#242b34 calc(65% + var(--shade)*25%),#607b85);stroke:#758f9f55;stroke-width:.65;stroke-linejoin:round;}
.cube-tile:hover {fill:#49878b;stroke:var(--accent);stroke-width:1.4;}
#viewport-cube text {fill:#dfedf2;font-size:9px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.cube-actions {display:flex;gap:2px;align-items:center;}
.cube-actions button {display:grid;place-items:center;min-width:29px;min-height:29px;width:29px;height:29px;padding:5px;border:1px solid transparent;background:transparent;border-radius:5px;color:var(--muted);}
.cube-actions button svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cube-actions button:hover {background:var(--surface);border-color:var(--line);color:var(--text);}
.cube-actions button[aria-pressed=true],.cube-actions button[aria-expanded=true] {background:#30434a;border-color:var(--accent);color:var(--accent);}
#model-canvas {touch-action:none;}
#model-canvas.pan-active {cursor:grab;}
.display-menu {position:absolute;top:54px;right:142px;z-index:6;width:min(260px,calc(100% - 28px));max-height:calc(100% - 68px);gap:8px;box-sizing:border-box;padding:12px;background:rgb(36 43 52 / .94);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px #11161d55;}
:root[data-theme=light] .cube-tile {fill:color-mix(in srgb,#e9eef1 calc(65% + var(--shade)*25%),#899ca7);stroke:#667d8b66;}
:root[data-theme=light] .cube-tile:hover {fill:#e1bba5;stroke:var(--accent);}
:root[data-theme=light] #viewport-cube text {fill:#263846;}
:root[data-theme=light] .display-menu {background:rgb(255 255 255 / .95);}
@media(pointer:coarse) {.cube-actions button {width:36px;height:36px;min-width:36px;min-height:36px;}.navigation-controls {width:150px;}.display-menu {right:170px;}}

.display-menu h3:not(:first-child) {margin-top:0;padding-top:8px;}
@media(max-width:600px) {.display-menu {top:210px;right:14px;max-height:calc(100% - 224px);}}

/* Motion: readable physical roles and compact, separated transport/rate rows. */
.playback-container {gap:4px 12px;padding-top:6px;padding-bottom:6px;}
.input-controls {padding-top:4px;border-top:1px solid var(--line);}
.motion-controls #play-motion {background:var(--accent);color:var(--on-accent,#102a2c);border-color:var(--accent);}
.motion-controls #play-motion[aria-pressed=true] {background:var(--drive-selected);color:var(--accent);}
.phase-controls {padding-left:12px;border-left:1px solid var(--line);}
.input-controls #motion-rpm {background:var(--entry);border-color:var(--line);font-variant-numeric:tabular-nums;}
.input-controls #rpm-minus,.input-controls #rpm-plus {padding-left:4px;padding-right:4px;}
.multi-member-drive {padding:8px;border:1px solid var(--line);border-radius:5px;}
.multi-member-drive .io-role,.fixed-drive .io-role {display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px 8px;margin:0 0 7px;border-left:2px solid var(--line);background:var(--entry);}
.multi-member-drive .io-role>span,.fixed-drive .io-role>span {font-size:calc(11px * var(--text-scale));flex:auto;}
.multi-member-drive .io-input,.fixed-drive .io-input {border-left-color:#e9a45d;}
.multi-member-drive .io-output,.fixed-drive .io-output {border-left-color:#74c8a4;}
.multi-member-drive .io-role select,.multi-member-drive .choice-select {width:100%;min-width:0;}
.multi-member-drive h3,.fixed-drive h3 {font-size:calc(12px * var(--text-scale));margin:0 0 8px;}
.io-swap {font-size:calc(11px * var(--text-scale));padding:4px 6px;min-height:26px;}
.drive-stage-result {font-size:calc(12px * var(--text-scale));color:var(--accent);padding:8px 0;margin:4px 0;line-height:1.5;}
.motion-demos {display:flex;flex-wrap:wrap;gap:4px;}
.motion-demos button {font-size:calc(11px * var(--text-scale));padding:4px 7px;min-height:28px;}
.motion-notes {font-size:calc(11px * var(--text-scale));color:var(--muted);}
.motion-notes>summary {cursor:pointer;padding:5px 0;}
.motion-notes>p {line-height:1.5;margin:6px 0;}
@media(max-width:1000px) {.phase-controls {padding-left:0;border-left:0;padding-top:4px;border-top:1px solid var(--line);}}

.motion-notation {border-left:2px solid var(--line);padding:6px 8px;background:var(--entry);line-height:1.5;}
:root[data-theme=light] .motion-controls #play-motion {background:var(--accent);color:#fff;}
:root[data-theme=light] .motion-controls #play-motion[aria-pressed=true] {background:var(--drive-selected);color:var(--accent);}

.app-header svg.cad-connection-icon {width:19px;height:19px;margin-left:-3px;margin-top:-1.5px;margin-bottom:-1.5px;overflow:visible;}