/*
 * Derived from reference/oas-explorer-handoff/oas.html lines 8-612.
 * Selectors are mechanically scoped to #oasWorkspace; declarations are unchanged.
 */
    #oasWorkspace {
      --panel-bg: rgba(7, 15, 24, 0.84);
      --panel-strong: rgba(10, 24, 37, 0.94);
      --border: rgba(142, 187, 220, 0.22);
      --text: #e8f4ff;
      --muted: #95abc0;
      --accent: #59d0ff;
      --warn: #ffd166;
      --bad: #ff5a6a;
      --good: #5de38b;
      --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    }

    #oasWorkspace {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #06101a;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 13px;
      letter-spacing: 0;
    }

    #oasWorkspace #scene {
      position: fixed;
      inset: 0;
      background:
        linear-gradient(180deg, #0b2639 0%, #0b1a28 38%, #07111b 72%, #04080e 100%);
    }

    #oasWorkspace #scene canvas {
      display: block;
    }

    #oasWorkspace .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      box-sizing: border-box;
      background: linear-gradient(180deg, rgba(6, 16, 26, 0.94), rgba(6, 16, 26, 0.68));
      border-bottom: 1px solid var(--border);
      z-index: 10;
      backdrop-filter: blur(12px);
    }

    #oasWorkspace .title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
    }

    #oasWorkspace .title h1 {
      margin: 0;
      font-size: 16px;
      font-weight: 720;
      line-height: 1.1;
      white-space: nowrap;
    }

    #oasWorkspace .title span {
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #oasWorkspace .badges {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    #oasWorkspace .badge {
      border: 1px solid var(--border);
      background: rgba(16, 35, 50, 0.72);
      color: #cfe9ff;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      white-space: nowrap;
    }

    #oasWorkspace .badge.warn {
      border-color: rgba(255, 209, 102, 0.45);
      color: #ffe7a6;
      background: rgba(94, 68, 16, 0.45);
    }

    #oasWorkspace .badge.good {
      border-color: rgba(93, 227, 139, 0.35);
      color: #b9ffd0;
      background: rgba(17, 70, 42, 0.45);
    }

    #oasWorkspace .panel {
      position: fixed;
      top: 60px;
      left: 12px;
      bottom: 12px;
      width: 360px;
      max-width: calc(100vw - 24px);
      background: var(--panel-bg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: 8px;
      z-index: 9;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(16px);
    }

    #oasWorkspace.panel-collapsed .panel {
      transform: translateX(calc(-100% - 20px));
    }

    #oasWorkspace .panel,


    #oasWorkspace.panel-collapsed .panel {
      transition: transform 180ms ease;
    }

    #oasWorkspace .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(12, 28, 42, 0.94);
      border-bottom: 1px solid var(--border);
    }

    #oasWorkspace .panel-head strong {
      font-size: 13px;
    }

    #oasWorkspace .panel-body {
      overflow: auto;
      padding: 10px 12px 16px;
    }

    #oasWorkspace .collapse-button {
      position: fixed;
      left: 12px;
      top: 60px;
      width: 36px;
      height: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-strong);
      color: var(--text);
      z-index: 11;
      cursor: pointer;
      box-shadow: var(--shadow);
    }

    #oasWorkspace:not(.panel-collapsed) .collapse-button {
      left: 384px;
    }

    #oasWorkspace .collapse-button span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: #e6f6ff;
      box-shadow: 0 0 8px rgba(89, 208, 255, 0.35);
    }

    #oasWorkspace fieldset {
      border: 1px solid var(--border);
      border-radius: 8px;
      margin: 0 0 10px;
      padding: 10px;
      background: rgba(4, 12, 20, 0.34);
    }

    #oasWorkspace legend {
      color: #d6ecff;
      font-weight: 700;
      padding: 0 6px;
    }

    #oasWorkspace label {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      margin: 8px 0;
      color: #d9eaf7;
    }

    #oasWorkspace .derived-parameter {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      margin: 8px 0;
      color: #d9eaf7;
    }

    #oasWorkspace .derived-parameter output {
      padding: 3px 0;
      color: #9fcce8;
    }

    #oasWorkspace label.full {
      display: block;
    }

    #oasWorkspace .hint,


    #oasWorkspace .small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
    }

    #oasWorkspace .disclaimer {
      margin: 10px 0;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 209, 102, 0.38);
      background: rgba(62, 44, 8, 0.48);
      color: #ffe6a2;
      line-height: 1.4;
    }

    #oasWorkspace select,


    #oasWorkspace input[type="number"],


    #oasWorkspace input[type="range"],


    #oasWorkspace button {
      font: inherit;
    }

    #oasWorkspace select,


    #oasWorkspace input[type="number"],


    #oasWorkspace input[type="text"] {
      width: 150px;
      min-width: 0;
      box-sizing: border-box;
      color: var(--text);
      background: rgba(8, 18, 28, 0.94);
      border: 1px solid rgba(142, 187, 220, 0.34);
      border-radius: 6px;
      padding: 5px 7px;
      outline: none;
    }

    #oasWorkspace input[type="range"] {
      width: 150px;
      accent-color: var(--accent);
    }

    #oasWorkspace input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--accent);
      justify-self: end;
    }

    #oasWorkspace input:disabled,


    #oasWorkspace select:disabled {
      color: #73879a;
      border-color: rgba(142, 187, 220, 0.15);
      background: rgba(11, 20, 29, 0.45);
    }

    #oasWorkspace output {
      display: inline-block;
      min-width: 70px;
      text-align: right;
      color: #bfe6ff;
      font-variant-numeric: tabular-nums;
    }

    #oasWorkspace .button-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    #oasWorkspace button {
      border: 1px solid rgba(142, 187, 220, 0.35);
      border-radius: 7px;
      padding: 6px 9px;
      color: #e8f6ff;
      background: rgba(17, 40, 58, 0.86);
      cursor: pointer;
    }

    #oasWorkspace button:hover {
      border-color: rgba(89, 208, 255, 0.7);
      background: rgba(22, 56, 82, 0.95);
    }

    #oasWorkspace button.active {
      color: #001018;
      background: #66d8ff;
      border-color: #66d8ff;
    }

    #oasWorkspace .mini-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 10px;
    }

    #oasWorkspace .mini-grid label {
      margin: 4px 0;
    }

    #oasWorkspace .readout {
      position: fixed;
      right: 12px;
      top: 60px;
      width: 360px;
      max-width: calc(100vw - 24px);
      max-height: calc(100vh - 72px);
      overflow: auto;
      z-index: 8;
      background: var(--panel-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      padding: 12px;
      box-sizing: border-box;
    }

    #oasWorkspace .readout h2 {
      font-size: 13px;
      margin: 0 0 8px;
      color: #d8f0ff;
    }

    #oasWorkspace #trace {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px;
      color: #cfe5f7;
      line-height: 1.42;
      white-space: pre-wrap;
    }

    #oasWorkspace .legend {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 10px;
      margin-top: 6px;
    }

    #oasWorkspace .legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: #d5e8f5;
      font-size: 12px;
    }

    #oasWorkspace .legend-item.disabled {
      color: #70889a;
      opacity: 0.48;
      text-decoration: line-through;
    }

    #oasWorkspace .swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      flex: 0 0 auto;
    }

    #oasWorkspace .warning-list {
      color: #ffe0a1;
      line-height: 1.45;
      margin: 6px 0 0;
    }

    #oasWorkspace .warning-list div {
      margin: 4px 0;
    }

    #oasWorkspace .overlay-label {
      position: fixed;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 7;
      padding: 3px 6px;
      border-radius: 5px;
      color: #eaf8ff;
      background: rgba(3, 10, 17, 0.72);
      border: 1px solid rgba(180, 220, 250, 0.22);
      font-size: 11px;
      white-space: nowrap;
      text-shadow: 0 1px 2px #000;
    }

    #oasWorkspace .overlay-label.fix-label {
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
      background: rgba(3, 18, 28, 0.9);
      border-color: rgba(141, 255, 250, 0.72);
      box-shadow: 0 0 18px rgba(89, 208, 255, 0.22);
    }

    #oasWorkspace .overlay-label.surface-label {
      color: #e8ddff;
      background: rgba(18, 11, 34, 0.82);
      border-color: rgba(187, 142, 255, 0.55);
    }

    #oasWorkspace .overlay-label.obstacle-label {
      color: #fff0c2;
      background: rgba(43, 26, 4, 0.86);
      border-color: rgba(255, 191, 71, 0.72);
    }

    #oasWorkspace .overlay-label.runway-label {
      color: #f5f8ff;
      background: rgba(22, 28, 35, 0.86);
      border-color: rgba(245, 248, 255, 0.48);
    }

    #oasWorkspace .overlay-label.axis-label {
      color: #bfd8ff;
      background: rgba(6, 14, 24, 0.74);
      border-color: rgba(105, 167, 255, 0.4);
    }

    #oasWorkspace .view-controls {
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 8;
      display: flex;
      gap: 6px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(5, 14, 23, 0.78);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    #oasWorkspace .view-controls button {
      min-width: 78px;
      padding: 6px 9px;
      border-radius: 6px;
      font-size: 12px;
    }

    #oasWorkspace .surface-tray {
      position: fixed;
      right: 12px;
      bottom: 14px;
      z-index: 9;
      width: min(300px, calc(100vw - 24px));
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      pointer-events: none;
    }

    #oasWorkspace .surface-tray button,


    #oasWorkspace .surface-tray-body {
      pointer-events: auto;
    }

    #oasWorkspace .surface-tray button {
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      background: rgba(9, 24, 36, 0.9);
      box-shadow: var(--shadow);
    }

    #oasWorkspace .surface-tray-body {
      width: 100%;
      max-height: min(420px, calc(100vh - 180px));
      overflow: auto;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--panel-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    #oasWorkspace .surface-tray-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      color: #d8f0ff;
      font-weight: 800;
    }

    #oasWorkspace .surface-toggle-row {
      display: grid;
      grid-template-columns: 16px 14px 1fr;
      align-items: center;
      gap: 8px;
      margin: 7px 0;
      color: #dceefa;
      font-size: 12px;
    }

    #oasWorkspace .surface-toggle-row input {
      justify-self: center;
    }

    #oasWorkspace .surface-toggle-row.disabled {
      color: #7d92a4;
      opacity: 0.72;
    }

    #oasWorkspace .surface-tray-note {
      margin-top: 8px;
      color: #ffdca0;
      font-size: 11px;
      line-height: 1.35;
    }

    #oasWorkspace #tooltip {
      position: fixed;
      z-index: 30;
      max-width: 320px;
      pointer-events: none;
      display: none;
      padding: 9px 10px;
      border-radius: 8px;
      background: rgba(3, 9, 15, 0.92);
      border: 1px solid rgba(142, 187, 220, 0.35);
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
      color: #eaf6ff;
      line-height: 1.35;
      font-size: 12px;
    }

    #oasWorkspace .help {
      position: fixed;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      z-index: 7;
      max-width: min(760px, calc(100vw - 32px));
      border: 1px solid var(--border);
      background: rgba(5, 13, 22, 0.74);
      border-radius: 8px;
      padding: 8px 12px;
      color: #c8ddea;
      font-size: 12px;
      line-height: 1.35;
      backdrop-filter: blur(10px);
    }

    #oasWorkspace .probe-card {
      margin-top: 8px;
      padding: 9px;
      border-radius: 8px;
      background: rgba(8, 19, 31, 0.62);
      border: 1px solid var(--border);
      color: #d9edf9;
      line-height: 1.45;
    }

    #oasWorkspace .probe-card div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-variant-numeric: tabular-nums;
    }

    #oasWorkspace .hidden {
      display: none !important;
    }

    @media (max-width: 920px) {
      #oasWorkspace .readout {
        display: none;
      }
      #oasWorkspace:not(.panel-collapsed) .collapse-button {
        left: calc(100vw - 50px);
      }
      #oasWorkspace .title span {
        display: none;
      }
      #oasWorkspace .view-controls {
        top: 104px;
      }
      #oasWorkspace .view-controls button {
        min-width: auto;
      }
    }