:root {
        --bg: #1e1e1e;
        --bg2: #252526;
        --border: #3c3c3c;
        --key: #9cdcfe;
        --str: #ce9178;
        --num: #b5cea8;
        --bool: #569cd6;
        --null: #569cd6;
        --cmt: #6a9955;
        --br: #d4d4d4;
        --lnum: #858585;
        --text: #d4d4d4;
        --accent: #ff7024;
        --hover: #2a2d2e;
        --guide: #404040;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
        font-size: 13px;
        line-height: 19px;
        min-height: 100vh;
      }
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg2);
      }
      ::-webkit-scrollbar-thumb {
        background: #424242;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

      /* menubar */
      .menubar {
        position: sticky;
        top: 0;
        z-index: 102;
        background: #1f1f1f;
        height: 30px;
        display: flex;
        align-items: stretch;
        font-family: "Segoe UI", system-ui, sans-serif;
        font-size: 12px;
        color: #cccccc;
        user-select: none;
      }
      .menubar-left {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        padding-left: 4px;
      }
      .menubar-item {
        padding: 0 8px;
        display: flex;
        align-items: center;
        background: none;
        border: none;
        color: #cccccc;
        font-family: "Segoe UI", system-ui, sans-serif;
        font-size: 12px;
        cursor: default;
        white-space: nowrap;
        border-radius: 4px;
        margin: 4px 1px;
        line-height: 1;
      }
      .menubar-item:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      .menubar-center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0 8px;
        min-width: 0;
      }
      .menubar-nav {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #858585;
        cursor: pointer;
        border-radius: 4px;
        padding: 0;
        flex-shrink: 0;
      }
      .menubar-nav:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.1);
        color: #cccccc;
      }
      .menubar-nav:disabled {
        opacity: 0.35;
        cursor: default;
      }
      .menubar-crumb {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-family: "Segoe UI", system-ui, sans-serif;
        color: #cccccc;
        white-space: nowrap;
        overflow: hidden;
      }
      .menubar-crumb-dot {
        color: #e8c76b;
        font-size: 8px;
        line-height: 1;
      }
      .menubar-crumb-sep {
        color: #555;
        font-size: 15px;
        line-height: 1;
      }
      .menubar-crumb-folder {
        color: #969696;
      }
      .menubar-crumb-file {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .menubar-right {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
      }
      .menubar-scm {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 0 10px;
        font-family: "Segoe UI", system-ui, sans-serif;
        font-size: 11px;
        color: #cccccc;
      }
      .menubar-scm-dot {
        color: #e8c76b;
        font-size: 10px;
      }
      .menubar-layout-icon {
        display: flex;
        align-items: center;
        padding: 0 8px;
        color: #858585;
        cursor: default;
      }
      .menubar-layout-icon:hover {
        color: #cccccc;
        background: rgba(255, 255, 255, 0.1);
      }
      .menubar-chevron {
        display: flex;
        align-items: center;
        padding: 0 4px;
        color: #858585;
        font-size: 10px;
      }
      .wc-btn {
        width: 46px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #cccccc;
        cursor: pointer;
        transition: background 0.08s;
        flex-shrink: 0;
      }
      .wc-btn:hover {
        background: rgba(255, 255, 255, 0.12);
      }
      .wc-close:hover {
        background: #c42b1c;
      }

      /* titlebar (tab bar) */
      .titlebar {
        position: sticky;
        top: 30px;
        z-index: 100;
        background: #323233;
        border-bottom: 1px solid #252526;
        height: 35px;
        display: flex;
        align-items: stretch;
        user-select: none;
      }
      .tab {
        background: var(--bg);
        border-top: 1px solid var(--accent);
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text);
      }
      .tab-json {
        color: #e8c76b;
      }

      /* editor layout */
      .editor {
        display: flex;
      }

      /* gutter */
      .gutter {
        width: 64px;
        flex-shrink: 0;
        background: var(--bg);
        padding: 8px 0 80px;
        border-right: 1px solid #2d2d2d;
      }
      .gutter div {
        min-height: 19px;
        line-height: 19px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding-right: 8px;
        font-size: 12px;
        color: var(--lnum);
        user-select: none;
      }
      .fold-icon {
        width: 16px;
        height: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: transparent;
        cursor: default;
        flex-shrink: 0;
        border-radius: 3px;
        margin-right: 2px;
        transition: color 0.1s, background 0.1s;
      }
      .fold-icon.foldable {
        color: #4d4d4d;
        cursor: pointer;
      }
      .fold-icon.foldable:hover {
        color: #c5c5c5;
        background: rgba(255, 255, 255, 0.08);
      }
      .fold-icon.collapsed {
        color: #c5c5c5;
      }
      .fold-hint {
        display: none;
        color: #858585;
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 0 5px;
        font-size: 11px;
        cursor: pointer;
        margin-left: 4px;
        vertical-align: middle;
      }
      .fold-hint:hover {
        color: #ccc;
        border-color: #666;
      }

      /* code area */
      .code {
        flex: 1;
        max-width: 100ch;
        overflow-x: hidden;
        padding: 8px 40px 80px 0;
      }

      /* single line */
      .l {
        display: flex;
        align-items: baseline;
        min-height: 19px;
        white-space: pre-wrap;
      }
      .l:hover {
        background: var(--hover);
      }

      /* indent cell - each level = 16px, with guide line at centre */
      .i {
        display: inline-block;
        width: 16px;
        min-width: 16px;
        height: 19px;
        position: relative;
        flex-shrink: 0;
      }
      .i::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--guide);
      }

      /* text span wraps content - allow wrap for very long strings */
      .t {
        white-space: pre-wrap;
        word-break: break-word;
        min-width: 0;
        max-width: 100%;
      }

      /* tokens */
      .k {
        color: var(--key);
      }
      .s {
        color: var(--str);
      }
      .n {
        color: var(--num);
      }
      .b {
        color: var(--bool);
      }
      .nl {
        color: var(--null);
      }
      .c {
        color: var(--cmt);
        font-style: italic;
      }
      .p {
        color: var(--br);
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      a:hover {
        text-decoration: none !important;
      }

      /* hire modal */
      .hire-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9000;
      }
      .hire-dialog {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9001; background: #252526; border-radius: 8px;
        box-shadow: 0 8px 48px rgba(0,0,0,.5);
        width: 440px; max-width: 96vw;
        font-family: "Segoe UI", system-ui, sans-serif;
        border: 1px solid var(--border);
      }
      .hire-dialog-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px; border-bottom: 1px solid var(--border);
      }
      .hire-dialog-header h3 { margin: 0; font-size: 14px; color: #cccccc; font-weight: 600; }
      .hire-close {
        background: none; border: none; cursor: pointer;
        font-size: 18px; color: #858585; line-height: 1; padding: 0 4px;
      }
      .hire-close:hover { color: #cccccc; }
      .hire-dialog form { padding: 20px; }
      .hire-field { margin-bottom: 14px; }
      .hire-field label {
        display: block; font-size: 11px; font-weight: 600;
        color: #cccccc; margin-bottom: 4px;
      }
      .hire-field input, .hire-field textarea {
        width: 100%; box-sizing: border-box;
        background: #3c3c3c; border: 1px solid #555; border-radius: 4px;
        padding: 8px 10px; font-size: 13px; color: #d4d4d4;
        font-family: "Segoe UI", system-ui, sans-serif; outline: none;
      }
      .hire-field input:focus, .hire-field textarea:focus { border-color: var(--accent); }
      .hire-field textarea { resize: vertical; min-height: 80px; font-family: inherit; }
      .hire-submit {
        background: var(--accent); color: #fff; border: none; border-radius: 4px;
        padding: 8px 20px; font-size: 13px; font-weight: 600;
        cursor: pointer; font-family: inherit;
      }
      .hire-submit:hover { filter: brightness(1.1); }
      .hire-submit:disabled { opacity: .5; cursor: default; }