* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #1e1e1e;
      color: #d4d4d4;
    }
    .header {
      padding: 0.75rem 1.5rem;
      background: #252526;
      border-bottom: 1px solid #3c3c3c;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .header h1 { font-size: 1.1rem; font-weight: 500; }
    .header-controls { display: flex; gap: 0.75rem; align-items: center; }
    .header select, .header button, .header label {
      background: #3c3c3c;
      color: #d4d4d4;
      border: 1px solid #5a5a5a;
      padding: 0.4rem 0.75rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8rem;
    }
    .header button:hover, .header label:hover { background: #4a4a4a; }
    .header label { display: flex; align-items: center; gap: 0.4rem; }
    .header input[type="checkbox"] { cursor: pointer; }
    .wasm-badge {
      font-size: 0.7rem;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      background: #4a2d2d;
      color: #f48771;
    }
    .wasm-badge.loaded {
      background: #2d4a2d;
      color: #4ec9b0;
    }
    .container {
      display: flex;
      height: calc(100vh - 52px);
    }
    #editor {
      flex: 1;
      height: 100%;
    }
    .sidebar {
      width: 420px;
      background: #252526;
      border-left: 1px solid #3c3c3c;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .sidebar-section {
      padding: 0.75rem;
      border-bottom: 1px solid #3c3c3c;
    }
    .sidebar-section.ast-section {
      flex: 1;
      min-height: 0; /* Critical for flex overflow */
      border-bottom: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    .sidebar h2 {
      font-size: 0.7rem;
      text-transform: uppercase;
      color: #888;
      letter-spacing: 0.05em;
    }
    .ast-controls {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .ast-controls select, .ast-controls button {
      background: #3c3c3c;
      color: #d4d4d4;
      border: 1px solid #4a4a4a;
      padding: 0.2rem 0.5rem;
      border-radius: 3px;
      font-size: 0.65rem;
      cursor: pointer;
    }
    .ast-controls button:hover { background: #4a4a4a; }
    #ast-tree {
      flex: 1;
      min-height: 0; /* Critical for flex overflow */
      overflow: auto;
      background: #1e1e1e;
      border-radius: 4px;
      padding: 0.5rem;
      font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
      font-size: 13px;
      line-height: 1.5;
    }
    .status {
      padding: 0.4rem 0.75rem;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    .status.success { background: #2d4a2d; color: #4ec9b0; }
    .status.error { background: #4a2d2d; color: #f48771; }
    .status.info { background: #2d3a4a; color: #6cb6ff; }
    .stats {
      display: flex;
      gap: 0.75rem;
      font-size: 0.7rem;
      color: #888;
      margin-top: 0.4rem;
    }
    .stats span { display: flex; align-items: center; gap: 0.2rem; }

    /* Outline View Styles */
    .outline-section {
      margin-bottom: 0.5rem;
    }
    .outline-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.5rem;
      cursor: pointer;
      border-radius: 3px;
      font-weight: 500;
    }
    .outline-header:hover { background: #2a2d2e; }
    .outline-header.highlighted { background: #264f78; }
    .outline-icon {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      font-size: 10px;
      font-weight: bold;
    }
    .outline-icon.config { background: #3d5a80; color: #98c1d9; }
    .outline-icon.system { background: #5a3d80; color: #c198d9; }
    .outline-icon.variables { background: #3d8055; color: #98d9b1; }
    .outline-icon.topic { background: #805a3d; color: #d9b198; }
    .outline-icon.start { background: #80553d; color: #d9a898; }
    .outline-icon.action { background: #663d80; color: #b898d9; }
    .outline-icon.var { background: #2d5a4a; color: #4ec9b0; }
    .outline-icon.input { background: #4a4a3d; color: #d9d998; }
    .outline-icon.output { background: #3d4a4a; color: #98d9d9; }
    .outline-icon.conn { background: #804a3d; color: #d9a898; }
    .outline-icon.know { background: #3d6680; color: #98c5d9; }
    .outline-icon.lang { background: #806a3d; color: #d9c898; }
    .outline-icon.inst { background: #4a3d66; color: #b898d9; }
    .outline-icon.msg { background: #3d664a; color: #98d9a8; }
    .outline-icon.reason { background: #664a3d; color: #d9b898; }
    .outline-icon.dir { background: #3d4a66; color: #98a8d9; }
    .outline-name { color: #d4d4d4; }
    .outline-detail { color: #888; font-size: 12px; margin-left: auto; }
    .outline-type { color: #4ec9b0; font-size: 12px; }
    .outline-children {
      margin-left: 1.25rem;
      border-left: 1px solid #3c3c3c;
      padding-left: 0.5rem;
    }
    .outline-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.2rem 0.5rem;
      cursor: pointer;
      border-radius: 3px;
      font-size: 13px;
    }
    .outline-item:hover { background: #2a2d2e; }
    .outline-item.highlighted { background: #264f78; }
    .outline-value { color: #ce9178; font-size: 12px; }
    .outline-target { color: #6cb6ff; font-size: 11px; }
    .outline-toggle {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      color: #888;
      font-size: 10px;
      flex-shrink: 0;
    }
    .outline-toggle:hover { color: #d4d4d4; }
    .outline-toggle.expanded { transform: rotate(90deg); }
    .outline-children.collapsed { display: none; }
    .outline-props {
      margin-left: 1.25rem;
      padding-left: 0.5rem;
      border-left: 1px solid #3c3c3c;
      font-size: 12px;
    }
    .outline-prop {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.15rem 0.5rem;
      color: #888;
    }
    .outline-prop-name { color: #9cdcfe; }
    .outline-prop-value { color: #ce9178; }

    /* JSON View */
    .json-view {
      white-space: pre-wrap;
      font-size: 12px;
      color: #d4d4d4;
    }
    .json-view .key { color: #9cdcfe; }
    .json-view .string { color: #ce9178; }
    .json-view .number { color: #b5cea8; }
    .json-view .boolean { color: #569cd6; }
    .json-view .null { color: #888; }

    /* View toggle */
    .view-toggle {
      display: flex;
      background: #3c3c3c;
      border-radius: 3px;
      overflow: hidden;
    }
    .view-toggle button {
      background: transparent;
      border: none;
      color: #888;
      padding: 0.2rem 0.5rem;
      font-size: 0.65rem;
      cursor: pointer;
    }
    .view-toggle button.active {
      background: #0e639c;
      color: #fff;
    }
    .view-toggle button:hover:not(.active) { color: #d4d4d4; }

    /* Benchmark Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: #252526;
      border: 1px solid #3c3c3c;
      border-radius: 8px;
      width: 600px;
      max-height: 80vh;
      overflow: auto;
      padding: 1.5rem;
    }
    .modal h3 {
      margin-bottom: 1rem;
      font-size: 1rem;
      color: #d4d4d4;
    }
    .modal-close {
      float: right;
      background: none;
      border: none;
      color: #888;
      font-size: 1.2rem;
      cursor: pointer;
    }
    .modal-close:hover { color: #d4d4d4; }
    .bench-results {
      font-family: 'SF Mono', monospace;
      font-size: 0.75rem;
    }
    .bench-row {
      display: grid;
      grid-template-columns: 200px 80px 80px 80px;
      gap: 0.5rem;
      padding: 0.3rem 0;
      border-bottom: 1px solid #3c3c3c;
    }
    .bench-row.header {
      font-weight: bold;
      color: #888;
      border-bottom: 2px solid #3c3c3c;
    }
    .bench-row .name { color: #9cdcfe; }
    .bench-row .time { color: #b5cea8; text-align: right; }
    .bench-row .size { color: #888; text-align: right; }
    .bench-summary {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid #3c3c3c;
      color: #4ec9b0;
    }
    .bench-progress {
      color: #888;
      margin-bottom: 1rem;
    }