/* Focus: the simulator’s neutral inspection surface. */
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/ibm-plex-sans-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/ibm-plex-sans-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/ibm-plex-sans-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
:root[data-layout=focus] {
  font-family: 'IBM Plex Sans', sans-serif;
  --blue: #202020; --ink: #202020; --muted: #626262; --line: #d9d9d9;
  --soft: #f3f3f3; --selected: #e9e9e9; --shell: #fff; --canvas: #f0f0f0;
  --control: #fff; --accent-ink: #fff;
}
[data-layout=focus] body, [data-layout=focus] button, [data-layout=focus] input, [data-layout=focus] select { font-family: 'IBM Plex Sans', sans-serif; }
[data-layout=focus] ::selection { background: #d8d8d8; color: #202020; }
[data-layout=focus] .sidebar, [data-layout=focus] .stage, [data-layout=focus] dialog { scrollbar-color: #aaa transparent; }
[data-layout=focus] .app-header { height: 56px; grid-template-columns: auto 1fr; gap: 32px; padding: 0 24px; }
[data-layout=focus] .brand { gap: 8px; }
[data-layout=focus] .brand svg { width: 26px; height: 26px; }
[data-layout=focus] .brand strong { font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
[data-layout=focus] .brand strong span { font-weight: 400; }
[data-layout=focus] .header-actions { font-size: 12px; }
[data-layout=focus] .app-layout, [data-layout=focus] .app-layout:has(.duo-three-scene:not([hidden])) { grid-template-columns: minmax(0,1fr) 280px; height: calc(100dvh - 88px); min-height: 690px; }
[data-layout=focus] .url-bar { padding: 18px 24px 12px; gap: 9px; }
/* Keep the document title available to assistive technology without adding a hero to a tool. */
[data-layout=focus] .workspace-intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-layout=focus] .website-entry { height: 44px; padding: 3px; border: 1px solid #bcbcbc; border-radius: 4px; background: #fff; }
[data-layout=focus] .url-bar .url-input-wrap { height: 36px; }
[data-layout=focus] .url-bar .url-input-wrap input { font-size: 14px; }
[data-layout=focus] .url-bar .primary { height: 36px; padding: 0 15px; border-radius: 2px; font-size: 12px; font-weight: 500; transition: none; }
[data-layout=focus] .url-bar .primary .preview-suffix { display: none; }
[data-layout=focus] .url-bar .primary svg { margin-left: 14px; }
[data-layout=focus] .url-bar .demo-choices { gap: 12px; }
[data-layout=focus] .demo-caption { display: none; }
[data-layout=focus] .url-bar .demo-choices .demo-button { font-size: 12px; font-weight: 400; min-height: 28px; }
[data-layout=focus] .url-bar .demo-choices .demo-button svg { width: 14px; height: 14px; }
[data-layout=focus] .url-bar .demo-choices .demo-button:hover { background: transparent; color: var(--ink); text-decoration: none; }
[data-layout=focus] .url-bar .demo-choices .demo-button[aria-pressed=true] { text-decoration: underline; text-decoration-color: #8d8d8d; text-underline-offset: 4px; }
[data-layout=focus] .workspace-toolbar { padding: 0 24px; height: 48px; min-height: 48px; }
[data-layout=focus] .view-toggle { height: 48px; gap: 22px; align-items: stretch; }
[data-layout=focus] .view-toggle button { font-size: 12px; padding: 0; border-radius: 0; border-bottom: 2px solid transparent; font-weight: 400; }
[data-layout=focus] .view-toggle button.active { background: none; border-bottom-color: #202020; font-weight: 500; }
[data-layout=focus] .view-toggle button:hover { background: none; color: #202020; }
[data-layout=focus] .share-preview-button { font-size: 12px; font-weight: 400; }
[data-layout=focus] .stage { border: 0; }
[data-layout=focus] .duo-model-heading { min-height: 64px; padding: 18px 24px 0; }
[data-layout=focus] .duo-model-heading h2 { font-size: 13px; font-weight: 500; color: #202020; }
[data-layout=focus] .duo-model-heading p, [data-layout=focus] .duo-model-message, [data-layout=focus] .duo-download { color: #626262; font-size: 12px; }
[data-layout=focus] .duo-download { padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
[data-layout=focus] .duo-actions { border-radius: 4px; border: 1px solid #c8c8c8; background: #fff; padding: 3px; box-shadow: none; }
[data-layout=focus] .duo-actions button { border-radius: 2px; min-height: 34px; padding: 8px 12px; font-size: 12px; font-weight: 400; color: #333; }
[data-layout=focus] .duo-actions button:hover { background: #e9e9e9; color: #202020; }
[data-layout=focus] .duo-actions button[aria-pressed=true] { background: var(--blue); color: var(--accent-ink); }
[data-layout=focus] .duo-actions button.duo-interact, [data-layout=focus] .duo-actions button.duo-interact[aria-pressed] { background: #202020; color: #fff; }
[data-layout=focus] .sidebar { padding: 24px 20px; }
[data-layout=focus] .inspector-title { gap: 0; margin: 0 0 25px; padding: 0 0 23px; border-bottom: 1px solid #d9d9d9; }
[data-layout=focus] .inspector-title svg { display: none; }
[data-layout=focus] .inspector-title h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 5px; }
[data-layout=focus] .inspector-title p { font-size: 12px; }
[data-layout=focus] .basic-controls { gap: 24px; }
[data-layout=focus] .control-section h2 { font-size: 12px; font-weight: 500; margin-bottom: 11px; }
[data-layout=focus] .display-options { display: flex; flex-direction: column; gap: 0; border: 1px solid #c8c8c8; border-radius: 4px; overflow: hidden; }
[data-layout=focus] .display-option { flex-direction: row; align-items: center; padding: 12px; gap: 12px; flex: none; height: 57px; border: 0; border-radius: 0; background: #fff; }
[data-layout=focus] .display-option + .display-option { border-top: 1px solid #d9d9d9; }
[data-layout=focus] .display-option > span:nth-child(2) { flex-basis: auto; flex: 1; }
[data-layout=focus] .display-option strong { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
[data-layout=focus] .display-option small { font-size: 11px; }
[data-layout=focus] .display-option .device-icon { width: 18px; height: 24px; margin: 0 4px; }
[data-layout=focus] .display-option .open-icon { width: 26px; margin: 0; }
[data-layout=focus] .display-option .radio-mark { display: block; position: static; margin: 0 0 0 auto; width: 12px; height: 12px; flex: none; border-color: #999; }
[data-layout=focus] .display-option.active { background: #f2f2f2; }
[data-layout=focus] .display-option.active .radio-mark { border: 4px solid #202020; }
[data-layout=focus] .segment.orientation, [data-layout=focus] .pose-options { border: 1px solid #c8c8c8; background: #fff; border-radius: 4px; padding: 0; gap: 0; }
[data-layout=focus] .segment.orientation button, [data-layout=focus] .pose-options button { border-radius: 0; min-height: 36px; font-size: 12px; font-weight: 400; }
[data-layout=focus] .segment.orientation button + button, [data-layout=focus] .pose-options button + button { border-left: 1px solid #d9d9d9; }
[data-layout=focus] .segment.orientation button.active, [data-layout=focus] .pose-options button.active { background: #e9e9e9; box-shadow: none; color: #202020; font-weight: 500; }
[data-layout=focus] .model-controls { gap: 24px; }
[data-layout=focus] .hinge-control { border-top: 1px solid #d9d9d9; padding-top: 20px; }
[data-layout=focus] .hinge-control h2 { align-items: center; }
[data-layout=focus] #fold-angle-output { font-size: 24px; line-height: 1; font-weight: 400; letter-spacing: -.025em; color: #202020; }
[data-layout=focus] #fold-angle { accent-color: #202020; }
[data-layout=focus] .angle-ends { margin-top: 4px; }
[data-layout=focus] .advanced-settings { margin-top: 22px; }
[data-layout=focus] .advanced-settings summary { font-size: 12px; font-weight: 400; min-height: 45px; }
[data-layout=focus] .sidebar-bottom { padding-top: 18px; margin-top: 0; }
[data-layout=focus] .workspace-footer { font-size: 11px; padding: 8px 24px; min-height: 32px; }
[data-layout=focus] .help-disclosure > summary { min-height: 32px; padding: 0 24px; }
[data-layout=focus] .finish-options button, [data-layout=focus] .dimension-inputs input { border-radius: 4px; }
[data-layout=focus] .toggle-row input:checked + .switch { background: #202020; }
[data-layout=focus] .mobile-settings-button { border-radius: 4px; }
[data-layout=focus] .url-bar .error { color: #a12622; background: #fff0ed; }
@media (max-width: 900px) {
  [data-layout=focus] .app-header { grid-template-columns: auto 1fr; height: 56px; padding: 0 16px; gap: 12px; }
  [data-layout=focus] .brand strong { font-size: 22px; }
  [data-layout=focus] .app-layout, [data-layout=focus] .app-layout:has(.duo-three-scene:not([hidden])) { height: auto; min-height: 0; }
  [data-layout=focus] .url-bar { padding: 16px 14px 10px; }
  [data-layout=focus] .website-entry { height: auto; }
  [data-layout=focus] .url-bar .url-input-wrap { height: 44px; }
  [data-layout=focus] .url-bar .url-input-wrap input { font-size: 16px; }
  [data-layout=focus] .url-bar .primary { min-height: 40px; font-size: 13px; padding: 0 18px; }
  [data-layout=focus] .url-bar .demo-choices .demo-button { min-height: 32px; }
  [data-layout=focus] .workspace-toolbar { height: auto; min-height: 98px; padding: 0 14px 8px; gap: 6px; }
  [data-layout=focus] .view-toggle { gap: 16px; height: 43px; }
  [data-layout=focus] .view-toggle button { padding: 0!important; flex: initial; }
  [data-layout=focus] .stage { height: max(430px,calc(100svh - 330px)); }
  [data-layout=focus] .duo-model-heading { padding: 15px 18px 0; min-height: 58px; }
  [data-layout=focus] .duo-download { font-size: 11px; }
  [data-layout=focus] .duo-model-message { font-size: 11px; }
  [data-layout=focus] .duo-actions button { font-size: 11px; padding: 8px!important; }
  [data-layout=focus] .workspace-footer { padding: 8px 14px; min-height: 42px; }
  [data-layout=focus] #mobile-controls-dialog .display-options { display: flex; flex-direction: column; }
  [data-layout=focus] #mobile-controls-dialog .display-option { height: 60px; }
  [data-layout=focus] #mobile-controls-dialog .radio-mark { display: block; }
  [data-layout=focus] #mobile-controls-dialog .orientation button, [data-layout=focus] #mobile-controls-dialog .pose-options button { font-size: 13px; min-height: 42px; }
  [data-layout=focus] .mobile-settings-heading button { color: #202020; background: #e9e9e9; border-radius: 4px; }
}