:root {
  --xd-bg: #0c0c0c; --xd-sidebar: #202123; --xd-panel: #141414; --xd-card: #1c1c1c;
  --xd-raised: #222; --xd-selected: #2c2c2c; --xd-border: #303030; --xd-text: #f3f3f3;
  --xd-muted: #a3a3a3; --xd-accent: #5184ff; --xd-green: #8bd9a8; --xd-orange: #efb18c;
  --xd-space: 8px; --xd-radius: 9px; --xd-transition: 180ms;
  --xd-tone-5a5f66: #5a5f66;
  --xd-tone-2b2e32: #2b2e32;
  --xd-tone-3a3a3a: #3a3a3a;
  --xd-tone-0009: #0009;
  --xd-tone-5184ff17: #5184ff17;
  --xd-tone-101010: #101010;
  --xd-tone-161616: #161616;
  --xd-tone-d4e4ff: #d4e4ff;
  --xd-tone-8bd9a899: #8bd9a899;
  --xd-tone-191919: #191919;
  --xd-tone-5184ff66: #5184ff66;
  --xd-tone-dce6ff: #dce6ff;
  --xd-tone-111: #111;
  --xd-tone-d9d9d9: #d9d9d9;
  --xd-tone-b48cff: #b48cff;
  --xd-tone-5184ff88: #5184ff88;
  --xd-tone-5184ff22: #5184ff22;
  --xd-tone-1b1c1f: #1b1c1f;
  --xd-tone-292b2e: #292b2e;
  --xd-tone-161719: #161719;
  --xd-tone-656565: #656565;
  --xd-tone-ef6d66: #ef6d66;
  --xd-tone-e9bc55: #e9bc55;
  --xd-tone-61c554: #61c554;
  --xd-tone-5184ff42: #5184ff42;
  --xd-tone-141c31: #141c31;
  --xd-tone-b8cdff: #b8cdff;
  --xd-tone-ffffff1a: #ffffff1a;
  --xd-tone-ffffff21: #ffffff21;
  --xd-tone-101726b8: #101726b8;
  --xd-tone-5184ff77: #5184ff77;
  --xd-tone-5184ff24: #5184ff24;
  --xd-tone-c9d7ff: #c9d7ff;
  --xd-tone-243e91: #243e91;
  --xd-tone-202020: #202020;
  --xd-tone-dedede: #dedede;
  --xd-tone-5184ff55: #5184ff55;
  --xd-tone-1d2741: #1d2741;
  --xd-tone-d4d4d4: #d4d4d4;
  --xd-tone-777: #777;
  --xd-tone-fff: #fff;
  --xd-tone-8795ad: #8795ad;
  --xd-tone-000b: #000b;
  --xd-tone-ee655b: #ee655b;
  --xd-tone-edbc48: #edbc48;
  --xd-tone-59c65e: #59c65e;
  --xd-tone-e1a29f: #e1a29f;
  --xd-tone-d65a5a12: #d65a5a12;
  --xd-tone-8bd9a813: #8bd9a813;
  --xd-tone-5b6357: #5b6357;
  --xd-tone-d6dcc8: #d6dcc8;
  --xd-tone-8d9b7870: #8d9b7870;
  --xd-tone-fafaf1: #fafaf1;
  --xd-tone-bfc9ac: #bfc9ac;
  --xd-tone-879871: #879871;
  --xd-tone-596d3e29: #596d3e29;
  --xd-tone-fff5: #fff5;
  --xd-size-12: 12px;
  --xd-size-36: 36px;
  --xd-size-2: 2px;
  --xd-size-8: 8px;
  --xd-size-10: 10px;
  --xd-size-6: 6px;
  --xd-size-30: 30px;
  --xd-size-1: 1px;
  --xd-size-4: 4px;
  --xd-size-9: 9px;
  --xd-size-14: 14px;
  --xd-size-24: 24px;
  --xd-size-60: 60px;
  --xd-size-34: 34px;
  --xd-size-44: 44px;
  --xd-size-5: 5px;
  --xd-size-13: 13px;
  --xd-size-21: 21px;
  --xd-size-3: 3px;
  --xd-size-58: 58px;
  --xd-size-192: 192px;
  --xd-size-580: 580px;
  --xd-size-32: 32px;
  --xd-size-22: 22px;
  --xd-size-230: 230px;
  --xd-size-39: 39px;
  --xd-size-28: 28px;
  --xd-size-11: 11px;
  --xd-size-7: 7px;
  --xd-size-25: 25px;
  --xd-size-20: 20px;
  --xd-size-18: 18px;
  --xd-size-26: 26px;
  --xd-size-48: 48px;
  --xd-size-16: 16px;
  --xd-size-99: 99px;
  --xd-size-1380: 1380px;
  --xd-size-720: 720px;
  --xd-size-132: 132px;
  --xd-size-540: 540px;
  --xd-size-265: 265px;
  --xd-size-550: 550px;
  --xd-size-145: 145px;
  --xd-size-450: 450px;
  --xd-size-52: 52px;
  --xd-size-640: 640px;
  --xd-size-15: 15px;
  --xd-size-27: 27px;
  --xd-size-29: 29px;
  --xd-size-147: 147px;
  --xd-size-35: 35px;
  --xd-size-40: 40px;
  --xd-size-31: 31px;
  --xd-size-62: 62px;
  --xd-size-280: 280px;
  --xd-size-160: 160px;
  --xd-size-600: 600px;
  --xd-size-220: 220px;
  --xd-size-570: 570px;
  --xd-size-486: 486px;
  --xd-size-46: 46px;
  --xd-size-480: 480px;
  --xd-size-125: 125px;
  --xd-size-150: 150px;
}

.xd-app { color: var(--xd-text); font: var(--xd-size-12)/1.45 var(--wt-font-sans, system-ui, sans-serif); isolation: isolate; }
.xd-app * { box-sizing: border-box; }
.xd-app button, .xd-app textarea, .xd-app select { font: inherit; }
.xd-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: var(--xd-size-36); padding: 0 var(--xd-size-2) var(--xd-size-8); color: var(--xd-muted); font: var(--xd-size-10) var(--wt-font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.xd-toolbar div, .xd-panel-tabs, .xd-mobile-panes { display: flex; gap: var(--xd-size-6); }
.xd-toolbar button, .xd-panel-tabs button, .xd-mobile-panes button, .xd-session-tab { min-height: var(--xd-size-30); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-6); background: var(--xd-raised); color: var(--xd-text); padding: var(--xd-size-4) var(--xd-size-9); cursor: pointer; transition: background var(--xd-transition) var(--wt-ease, ease), border-color var(--xd-transition) var(--wt-ease, ease); }
.xd-toolbar button:hover, .xd-panel-tabs button:hover, .xd-mobile-panes button:hover, .xd-session-tab:hover { border-color: var(--xd-tone-5a5f66); background: var(--xd-tone-2b2e32); }

.xd-window { overflow: hidden; border: var(--xd-size-1) solid var(--xd-tone-3a3a3a); border-radius: var(--xd-size-14); background: var(--xd-bg); box-shadow: 0 var(--xd-size-24) var(--xd-size-60) var(--xd-tone-0009), 0 0 var(--xd-size-34) var(--xd-tone-5184ff17); }
.xd-titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--xd-size-44); padding: 0 var(--xd-size-14); border-bottom: var(--xd-size-1) solid var(--xd-border); background: var(--xd-tone-101010); }
.xd-brand { display: flex; align-items: center; gap: var(--xd-size-5); font-size: var(--xd-size-13); font-weight: 750; letter-spacing: -.02em; }
.xd-brand b, .xd-bolt { color: var(--xd-accent); }
.xd-bolt { font-size: var(--xd-size-21); line-height: 1; transform: skewX(-11deg); }
.xd-tabs { display: flex; padding: var(--xd-size-3); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-8); background: var(--xd-tone-161616); }
.xd-tabs button { min-width: var(--xd-size-58); border: 0; border-radius: var(--xd-size-5); background: transparent; color: var(--xd-muted); padding: var(--xd-size-5) var(--xd-size-8); font-weight: 700; cursor: pointer; }
.xd-tabs button[aria-selected=true] { background: var(--xd-selected); color: var(--xd-text); }
.xd-window-status { justify-self: end; color: var(--xd-green); font-size: var(--xd-size-9); }

.xd-shell { display: grid; grid-template-columns: var(--xd-size-192) minmax(0, 1fr); height: var(--xd-size-580); background: var(--xd-panel); }
.xd-sidebar { display: flex; flex-direction: column; gap: var(--xd-size-3); padding: var(--xd-size-14) var(--xd-size-10); border-right: var(--xd-size-1) solid var(--xd-border); background: var(--xd-sidebar); }
.xd-side-title { margin: 0 var(--xd-size-4) var(--xd-size-6); color: var(--xd-muted); font: var(--xd-size-10) var(--wt-font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.xd-side-title-gap { margin-top: var(--xd-size-13); }
.xd-side-row { min-height: var(--xd-size-32); width: 100%; border: 0; border-radius: var(--xd-size-6); background: transparent; color: var(--xd-muted); padding: 0 var(--xd-size-8); text-align: left; cursor: pointer; }
.xd-side-row:hover, .xd-side-row[aria-pressed=true] { background: var(--xd-selected); color: var(--xd-text); }
.xd-workspace-row { font-weight: 650; }
.xd-side-session { display: block; overflow: hidden; padding: var(--xd-size-3) var(--xd-size-8) var(--xd-size-3) var(--xd-size-22); color: var(--xd-muted); font-size: var(--xd-size-10); text-overflow: ellipsis; white-space: nowrap; }
.xd-session-live { color: var(--xd-tone-d4e4ff); }
.xd-side-bottom { margin-top: auto; padding: var(--xd-size-10) var(--xd-size-4) 0; border-top: var(--xd-size-1) solid var(--xd-border); color: var(--xd-muted); font-size: var(--xd-size-10); }
.xd-live-dot { display: inline-block; width: var(--xd-size-6); height: var(--xd-size-6); margin-right: var(--xd-size-5); border-radius: 50%; background: var(--xd-green); box-shadow: 0 0 var(--xd-size-8) var(--xd-tone-8bd9a899); }

.xd-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(var(--xd-size-230), .85fr); gap: var(--xd-space); min-width: 0; padding: var(--xd-space); }
.xd-terminal-area, .xd-pane, .xd-conversation { min-width: 0; overflow: hidden; border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-radius); background: var(--xd-card); }
.xd-session-tabs { display: flex; align-items: center; gap: var(--xd-size-4); min-height: var(--xd-size-39); padding: var(--xd-size-5); border-bottom: var(--xd-size-1) solid var(--xd-border); background: var(--xd-tone-191919); }
.xd-session-tab { min-height: var(--xd-size-28); border: 0; background: transparent; color: var(--xd-muted); padding: var(--xd-size-4) var(--xd-size-8); font-size: var(--xd-size-10); }
.xd-session-tab[aria-pressed=true] { background: var(--xd-selected); color: var(--xd-text); }
.xd-session-state { min-width: 0; margin-left: auto; overflow: hidden; color: var(--xd-muted); font: var(--xd-size-9) var(--wt-font-mono, ui-monospace, monospace); text-overflow: ellipsis; white-space: nowrap; }
.xd-run { border-color: var(--xd-tone-5184ff66); color: var(--xd-tone-dce6ff); font-size: var(--xd-size-10); }
.xd-terminals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; height: calc(100% - var(--xd-size-39)); gap: var(--xd-size-1); background: var(--xd-border); }
.xd-terminal { min-height: 0; overflow: hidden; background: var(--xd-tone-111); }
.xd-terminal[data-session=senpi] { grid-row: span 2; }
.xd-pane-head, .xd-conversation header { display: flex; align-items: center; justify-content: space-between; min-height: var(--xd-size-34); padding: 0 var(--xd-size-10); border-bottom: var(--xd-size-1) solid var(--xd-border); color: var(--xd-text); font-size: var(--xd-size-11); font-weight: 700; }
.xd-pane-head small, .xd-conversation header small { color: var(--xd-muted); font-size: var(--xd-size-10); font-weight: 500; }
.xd-terminal pre { margin: 0; padding: var(--xd-size-12); color: var(--xd-tone-d9d9d9); font: var(--xd-size-11)/1.7 var(--wt-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
.xd-terminal pre b { color: var(--xd-accent); }
.xd-engine { display: inline-block; width: var(--xd-size-7); height: var(--xd-size-7); margin-right: var(--xd-size-5); border-radius: 50%; background: var(--xd-accent); }
.xd-senpi { background: var(--xd-tone-b48cff); }.xd-claude { background: var(--xd-orange); }.xd-codex { background: var(--xd-accent); }
.xd-green { color: var(--xd-green); }.xd-orange { color: var(--xd-orange); }.xd-blue { color: var(--xd-accent); }.xd-muted { color: var(--xd-muted); }

.xd-panel-select { display: flex; flex-direction: column; }
.xd-panel-tabs { padding: var(--xd-size-6); border-bottom: var(--xd-size-1) solid var(--xd-border); }
.xd-panel-tabs button[aria-pressed=true], .xd-mobile-panes button[aria-pressed=true] { border-color: var(--xd-tone-5184ff88); background: var(--xd-tone-5184ff22); color: var(--xd-text); }
.xd-browser { display: flex; flex: 1; flex-direction: column; background: var(--xd-tone-101010); }
.xd-browser-tabs { display: flex; gap: var(--xd-size-4); align-items: center; min-height: var(--xd-size-30); padding: var(--xd-size-3) var(--xd-size-6) 0; background: var(--xd-tone-1b1c1f); }
.xd-browser-tab { min-height: var(--xd-size-25); border: 0; border-radius: var(--xd-size-5) var(--xd-size-5) 0 0; background: transparent; color: var(--xd-muted); padding: var(--xd-size-3) var(--xd-size-7); font-size: var(--xd-size-9); cursor: pointer; }
.xd-browser-tab[aria-pressed=true] { background: var(--xd-tone-292b2e); color: var(--xd-text); }
.xd-browser-bar { display: flex; align-items: center; gap: var(--xd-size-4); padding: var(--xd-size-7) var(--xd-size-8); border-bottom: var(--xd-size-1) solid var(--xd-border); background: var(--xd-tone-161719); }
.xd-browser-bar i { width: var(--xd-size-5); height: var(--xd-size-5); border-radius: 50%; background: var(--xd-tone-656565); }.xd-browser-bar i:first-child { background: var(--xd-tone-ef6d66); }.xd-browser-bar i:nth-child(2) { background: var(--xd-tone-e9bc55); }.xd-browser-bar i:nth-child(3) { background: var(--xd-tone-61c554); }
.xd-browser-bar span { min-width: 0; flex: 1; overflow: hidden; margin-left: var(--xd-size-3); color: var(--xd-muted); font: var(--xd-size-9) var(--wt-font-mono, ui-monospace, monospace); text-overflow: ellipsis; white-space: nowrap; }.xd-reload { border: 0; border-radius: var(--xd-size-4); background: transparent; color: var(--xd-muted); cursor: pointer; }
.xd-preview { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--xd-size-12); padding: var(--xd-size-20) var(--xd-size-18); background: radial-gradient(circle at 75% 6%, var(--xd-tone-5184ff42), transparent 42%), linear-gradient(160deg, var(--xd-tone-141c31), var(--xd-tone-101010) 55%); }.xd-preview p { margin: 0; color: var(--xd-tone-b8cdff); font: var(--xd-size-9) var(--wt-font-mono, ui-monospace, monospace); letter-spacing: .12em; }.xd-preview strong { max-width: 9ch; font-size: var(--xd-size-26); line-height: 1; letter-spacing: -.06em; }.xd-preview > span { color: var(--xd-muted); font-size: var(--xd-size-11); }.xd-preview-rule { width: 100%; height: var(--xd-size-1); background: var(--xd-tone-ffffff1a); }.xd-preview-nav { display: flex; gap: var(--xd-size-9); color: var(--xd-muted); font-size: var(--xd-size-9); }.xd-preview-nav b { color: var(--xd-text); }
.xd-preview-card { display: grid; gap: var(--xd-size-5); width: 100%; margin-top: auto; padding: var(--xd-size-11); border: var(--xd-size-1) solid var(--xd-tone-ffffff21); border-radius: var(--xd-size-8); background: var(--xd-tone-101726b8); }.xd-preview-card small { color: var(--xd-tone-b8cdff); font: var(--xd-size-8) var(--wt-font-mono, ui-monospace, monospace); letter-spacing: .1em; }.xd-preview-card b { font-size: var(--xd-size-13); }.xd-preview-card span { color: var(--xd-muted); font-size: var(--xd-size-10); }.xd-preview-card button { justify-self: start; border: var(--xd-size-1) solid var(--xd-tone-5184ff77); border-radius: var(--xd-size-5); background: var(--xd-tone-5184ff24); color: var(--xd-tone-dce6ff); padding: var(--xd-size-5) var(--xd-size-7); font-size: var(--xd-size-9); cursor: pointer; }.xd-preview em { color: var(--xd-tone-b8cdff); font: var(--xd-size-9) var(--wt-font-mono, ui-monospace, monospace); font-style: normal; }
.xd-files { display: flex; flex: 1; flex-direction: column; gap: var(--xd-size-7); padding: var(--xd-size-14); color: var(--xd-muted); font: var(--xd-size-11) var(--wt-font-mono, ui-monospace, monospace); }.xd-files p { margin: var(--xd-size-5) 0; color: var(--xd-text); }.xd-file-active { color: var(--xd-tone-c9d7ff); }

.xd-mobile-panes, .xd-mobile-select { display: none; }
.xd-conversation { display: flex; flex-direction: column; margin: var(--xd-space); }.xd-conversation header { min-height: var(--xd-size-48); justify-content: flex-start; gap: var(--xd-size-8); }.xd-conversation header div { display: grid; }.xd-person-dot { width: var(--xd-size-20); height: var(--xd-size-20); border-radius: var(--xd-size-7); background: linear-gradient(135deg, var(--xd-accent), var(--xd-tone-243e91)); }.xd-transcript { display: flex; flex: 1; flex-direction: column; gap: var(--xd-size-10); overflow: auto; padding: var(--xd-size-16); }.xd-message { max-width: 68%; padding: var(--xd-size-9) var(--xd-size-10); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-8); background: var(--xd-tone-202020); }.xd-message p { margin: var(--xd-size-3) 0 0; color: var(--xd-tone-dedede); font-size: var(--xd-size-12); }.xd-message small { color: var(--xd-muted); font-size: var(--xd-size-9); }.xd-message-user { align-self: flex-end; border-color: var(--xd-tone-5184ff55); background: var(--xd-tone-1d2741); }.xd-prompt-row { display: flex; flex-wrap: wrap; gap: var(--xd-size-6); align-items: center; padding: 0 var(--xd-size-12) var(--xd-size-10); color: var(--xd-muted); font-size: var(--xd-size-10); }.xd-prompt { border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-99); background: var(--xd-raised); color: var(--xd-tone-d4d4d4); padding: var(--xd-size-5) var(--xd-size-8); cursor: pointer; }.xd-composer { display: grid; grid-template-columns: 1fr auto; gap: var(--xd-size-8); margin: 0 var(--xd-size-10) var(--xd-size-10); padding: var(--xd-size-8); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-9); background: var(--xd-card); }.xd-composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--xd-text); padding: var(--xd-size-3); font-size: var(--xd-size-12); }.xd-composer textarea::placeholder { color: var(--xd-tone-777); }.xd-send { align-self: end; min-height: var(--xd-size-30); border: 0; border-radius: var(--xd-size-6); background: var(--xd-accent); color: var(--xd-tone-fff); padding: 0 var(--xd-size-10); font-size: var(--xd-size-10); font-weight: 700; cursor: pointer; }
.xd-status { display: flex; justify-content: space-between; gap: var(--xd-size-12); min-height: var(--xd-size-28); padding: var(--xd-size-7) var(--xd-size-12); border-top: var(--xd-size-1) solid var(--xd-border); background: var(--xd-tone-101010); color: var(--xd-muted); font: var(--xd-size-9) var(--wt-font-mono, ui-monospace, monospace); }.xd-status span:last-child { color: var(--xd-tone-8795ad); }.xd-app button:focus-visible, .xd-app textarea:focus-visible, .xd-app select:focus-visible { outline: var(--xd-size-2) solid var(--xd-accent); outline-offset: var(--xd-size-2); }
.xd-dialog { width: min(var(--xd-size-1380), calc(100vw - var(--xd-size-32))); max-width: none; border: 0; border-radius: var(--xd-size-16); background: transparent; padding: 0; }.xd-dialog::backdrop { background: var(--xd-tone-000b); backdrop-filter: blur(var(--xd-size-5)); }.xd-dialog .xd-window { max-height: calc(100vh - var(--xd-size-60)); }.xd-dialog .xd-shell { height: min(var(--xd-size-720), calc(100vh - var(--xd-size-132))); }

@media (max-width: 940px) { .xd-shell { height: var(--xd-size-540); }.xd-workspace { grid-template-columns: minmax(0, 1fr) var(--xd-size-265); }.xd-terminal pre { font-size: var(--xd-size-10); }.xd-session-state { display: none; } }
@media (max-width: 640px) { .xd-shell { grid-template-columns: 1fr; height: var(--xd-size-550); }.xd-sidebar { display: none; }.xd-workspace { display: block; padding: var(--xd-size-7); }.xd-mobile-panes { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: var(--xd-size-7); }.xd-mobile-picker { display: grid; gap: var(--xd-size-2); margin-left: auto; color: var(--xd-muted); font-size: var(--xd-size-8); }.xd-mobile-picker select { max-width: var(--xd-size-145); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-5); background: var(--xd-raised); color: var(--xd-text); padding: var(--xd-size-4); font-size: var(--xd-size-10); }.xd-code-workspace > .xd-terminal-area, .xd-code-workspace > .xd-panel-select { display: none; }.xd-code-workspace[data-mobile-pane=terminal] > .xd-terminal-area, .xd-code-workspace[data-mobile-pane=browser] > .xd-panel-select, .xd-code-workspace[data-mobile-pane=files] > .xd-panel-select { display: block; height: var(--xd-size-450); }.xd-terminals { display: block; }.xd-terminal { display: none; height: 100%; }.xd-terminal[data-selected=true] { display: block; }.xd-mobile-select { display: block; padding: var(--xd-size-7); border-bottom: var(--xd-size-1) solid var(--xd-border); }.xd-mobile-select .xd-mobile-picker { margin: 0; }.xd-conversation { margin: var(--xd-size-7); }.xd-message { max-width: 88%; }.xd-tabs button { min-width: var(--xd-size-52); }.xd-titlebar { padding: 0 var(--xd-size-10); }.xd-brand { font-size: var(--xd-size-12); }.xd-window-status { display: none; }.xd-status span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .xd-app * { transition: none !important; scroll-behavior: auto !important; } }