:root {
  --xd-terminal-bg: #101112;
  --xd-purple: #c1a2ee;
  --xd-line: #828a91;
  --xd-paper: #eeece5;
  --xd-ink: #252b27;
  --xd-olive: #536846;
  --xd-sage: #c3cbb2;
  --xd-cream: #faf8f0;
  --xd-paper-rule: #c9cfc0;
  --xd-code-size: 11px;
  --xd-browser-width: 340px;
}

.xd-app { font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", system-ui, sans-serif; }
.xd-shell { height: var(--xd-size-640); }
.xd-brand { gap: var(--xd-size-7); }
.xd-traffic { display: flex; gap: var(--xd-size-5); margin-right: var(--xd-size-8); }
.xd-traffic i { width: var(--xd-size-9); height: var(--xd-size-9); border-radius: 50%; background: var(--xd-tone-ee655b); }
.xd-traffic i:nth-child(2) { background: var(--xd-tone-edbc48); }
.xd-traffic i:nth-child(3) { background: var(--xd-tone-59c65e); }
.xd-bolt { width: var(--xd-size-15); height: var(--xd-size-20); transform: none; }
.xd-side-row.xd-side-session { white-space: normal; line-height: 1.5; padding: var(--xd-size-8); margin-bottom: var(--xd-size-3); font-size: var(--xd-size-11); }
.xd-sidebar { background: linear-gradient(150deg, var(--xd-sidebar), var(--xd-card)); }
.xd-side-title { padding-top: var(--xd-size-7); }
.xd-workspace { grid-template-columns: minmax(0, 1fr) var(--xd-browser-width); min-height: 0; }
.xd-terminal-area { display: flex; flex-direction: column; min-height: 0; }
.xd-terminals { flex: 1; min-height: 0; height: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.xd-session-tabs { flex-shrink: 0; }
.xd-browser { min-height: 0; }
.xd-status { position: relative; }
.xd-terminal { position: relative; display: flex; flex-direction: column; background: var(--xd-terminal-bg); }
.xd-terminal[data-selected=true] .xd-pane-head { background: var(--xd-raised); box-shadow: inset 0 -1px var(--xd-accent); }
.xd-terminal .xd-pane-head { flex-shrink: 0; gap: var(--xd-size-8); font-size: var(--xd-size-11); }
.xd-terminal .xd-pane-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--xd-size-9); }
.xd-terminal-brand { display: flex; align-items: center; gap: var(--xd-size-10); padding: var(--xd-size-12) var(--xd-size-12) var(--xd-size-5); background: transparent; }
.xd-terminal-brand > b { display: grid; place-items: center; width: var(--xd-size-27); height: var(--xd-size-27); border-radius: var(--xd-size-6); background: var(--xd-raised); font: var(--xd-size-18)/1 ui-monospace, monospace; }
.xd-terminal-brand > div { display: grid; gap: var(--xd-size-2); }
.xd-terminal-brand strong { font-size: var(--xd-size-11); color: var(--xd-text); }
.xd-terminal-brand small { font-size: var(--xd-size-9); color: var(--xd-muted); }
.xd-terminal-brand.xd-senpi > b, .xd-purple { color: var(--xd-purple); }
.xd-terminal-brand.xd-claude > b { color: var(--xd-orange); }
.xd-terminal-brand.xd-codex > b { color: var(--xd-text); }
.xd-terminal-path { padding: var(--xd-size-4) var(--xd-size-12) var(--xd-size-8); color: var(--xd-line); font: var(--xd-size-9) var(--wt-font-mono); }
.xd-terminal-path span { color: var(--xd-green); margin-left: var(--xd-size-5); }
.xd-terminal pre { flex: 1; overflow: auto; min-height: 0; padding: var(--xd-size-10) var(--xd-size-12); font-size: var(--xd-code-size); line-height: 1.65; scrollbar-width: thin; scrollbar-color: var(--xd-border) transparent; }
.xd-tree-line { color: var(--xd-line); }
.xd-log-prompt { color: var(--xd-text); }
.xd-log-heading { color: var(--xd-muted); letter-spacing: .09em; }
.xd-log-note { color: var(--xd-purple); }
.xd-diff-remove { color: var(--xd-tone-e1a29f); background: var(--xd-tone-d65a5a12); }
.xd-diff-add { color: var(--xd-green); background: var(--xd-tone-8bd9a813); }
.xd-terminal-input { display: flex; align-items: center; gap: var(--xd-size-8); flex-shrink: 0; min-height: var(--xd-size-27); padding: 0 var(--xd-size-12); border-top: var(--xd-size-1) solid var(--xd-border); color: var(--xd-muted); }
.xd-terminal-input small { margin-left: auto; font-size: var(--xd-size-9); }
.xd-terminal-caret { width: var(--xd-size-5); height: var(--xd-size-11); background: var(--xd-muted); }
.xd-replay-step { padding: var(--xd-size-6) var(--xd-size-10); color: var(--xd-green); background: var(--xd-raised); font: var(--xd-size-10) var(--wt-font-mono); }
.xd-run { margin-left: auto; white-space: nowrap; border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-5); background: var(--xd-raised); padding: var(--xd-size-5) var(--xd-size-8); cursor: pointer; min-height: var(--xd-size-28); }
.xd-run:hover { background: var(--xd-selected); }
.xd-panel-tabs > span { display: grid; place-items: center; margin-left: auto; color: var(--xd-muted); padding: var(--xd-size-4); }
.xd-panel-tabs svg, .xd-reload svg, .xd-url svg, .xd-files svg { width: var(--xd-size-13); height: var(--xd-size-13); flex-shrink: 0; }
.xd-browser-tabs { min-height: var(--xd-size-34); gap: var(--xd-size-2); padding: var(--xd-size-5) var(--xd-size-6) 0; }
.xd-browser-tab { min-height: var(--xd-size-29); padding: var(--xd-size-5) var(--xd-size-10); font-size: var(--xd-size-10); }
.xd-browser-bar { gap: var(--xd-size-7); padding: var(--xd-size-7) var(--xd-size-9); }
.xd-browser-bar .xd-url { display: flex; align-items: center; gap: var(--xd-size-7); min-height: var(--xd-size-26); margin: 0; padding: var(--xd-size-3) var(--xd-size-8); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-6); background: var(--xd-bg); font-size: var(--xd-size-9); }
.xd-reload { display: grid; place-items: center; min-width: var(--xd-size-27); min-height: var(--xd-size-27); }
.xd-reload:hover { background: var(--xd-selected); color: var(--xd-text); }
.xd-preview { position: relative; display: block; overflow: auto; padding: var(--xd-size-18) var(--xd-size-20) var(--xd-size-12); background: var(--xd-paper); color: var(--xd-ink); scrollbar-width: thin; scrollbar-color: var(--xd-sage) transparent; }
.xd-preview-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--xd-size-27); gap: var(--xd-size-8); }
.xd-preview-nav > b { color: var(--xd-ink); font-size: var(--xd-size-15); letter-spacing: -.045em; }
.xd-preview-nav > span { font: var(--xd-size-7) var(--wt-font-mono); letter-spacing: .035em; color: var(--xd-olive); }
.xd-studio-mark { display: inline-block; margin-right: var(--xd-size-4); color: var(--xd-olive); font-weight: 800; }
.xd-preview-eyebrow { display: flex; align-items: center; gap: var(--xd-size-6); color: var(--xd-olive); font: var(--xd-size-7) var(--wt-font-mono); letter-spacing: .09em; }
.xd-preview-eyebrow > span { width: var(--xd-size-5); height: var(--xd-size-5); border-radius: 50%; background: var(--xd-olive); }
.xd-preview h3 { margin: var(--xd-size-12) 0 var(--xd-size-10); font-size: clamp(var(--xd-size-21), 2vw, var(--xd-size-28)); font-weight: 600; line-height: 1.14; letter-spacing: -.065em; word-break: keep-all; }
.xd-preview h3 > span { color: var(--xd-olive); }
.xd-preview .xd-preview-description { color: var(--xd-tone-5b6357); font: var(--xd-size-11)/1.6 -apple-system, BlinkMacSystemFont, "Pretendard Variable", sans-serif; letter-spacing: -.02em; max-width: 29ch; margin: 0; }
.xd-preview-cta { margin: var(--xd-size-15) 0 var(--xd-size-5); min-height: var(--xd-size-32); border: 0; border-radius: var(--xd-size-5); padding: var(--xd-size-7) var(--xd-size-12); background: var(--xd-ink); color: var(--xd-cream); font-size: var(--xd-size-10); cursor: pointer; }
.xd-preview-cta:hover { background: var(--xd-olive); }
.xd-preview-visual { position: relative; height: var(--xd-size-147); margin: var(--xd-size-5) -6px var(--xd-size-14); overflow: hidden; background: radial-gradient(ellipse, var(--xd-tone-d6dcc8), transparent 67%); }
.xd-orbit { position: absolute; inset: var(--xd-size-25) var(--xd-size-35); border: var(--xd-size-1) solid var(--xd-tone-8d9b7870); border-radius: 50%; transform: rotate(-30deg); }
.xd-orbit-two { transform: rotate(30deg); inset: var(--xd-size-30) var(--xd-size-35); }
.xd-orbit-three { transform: rotate(90deg); inset: var(--xd-size-30) var(--xd-size-40); }
.xd-orbit-core { position: absolute; inset: var(--xd-size-39) calc(50% - var(--xd-size-31)) auto; width: var(--xd-size-62); height: var(--xd-size-62); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--xd-tone-fafaf1), var(--xd-tone-bfc9ac) 55%, var(--xd-tone-879871)); box-shadow: var(--xd-size-7) var(--xd-size-12) var(--xd-size-20) var(--xd-tone-596d3e29), inset 0 0 var(--xd-size-10) var(--xd-tone-fff5); font: italic var(--xd-size-28) Georgia, serif; color: var(--xd-olive); }
.xd-visual-note { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--xd-olive); font: var(--xd-size-7) var(--wt-font-mono); letter-spacing: .13em; }
.xd-preview-card { display: flex; align-items: center; gap: var(--xd-size-10); padding: var(--xd-size-12) 0; margin: 0; border: 0; border-top: var(--xd-size-1) solid var(--xd-paper-rule); border-bottom: var(--xd-size-1) solid var(--xd-paper-rule); background: transparent; border-radius: 0; }
.xd-preview-card .xd-card-index { color: var(--xd-olive); font: var(--xd-size-9) var(--wt-font-mono); }
.xd-preview-card > div { display: grid; gap: var(--xd-size-5); flex: 1; }
.xd-preview-card small { font: var(--xd-size-7) var(--wt-font-mono); letter-spacing: .04em; color: var(--xd-olive); }
.xd-preview-card b { font-size: var(--xd-size-10); font-weight: 600; color: var(--xd-ink); }
.xd-preview-card svg { width: var(--xd-size-13); height: var(--xd-size-13); color: var(--xd-olive); }
.xd-preview-footer { display: flex; justify-content: space-between; padding-top: var(--xd-size-10); color: var(--xd-olive); font: var(--xd-size-7) var(--wt-font-mono); letter-spacing: .05em; }
.xd-files p { display: flex; align-items: center; gap: var(--xd-size-7); }
.xd-files span b { color: var(--xd-orange); font-size: var(--xd-size-9); float: right; }
.xd-file-preview { margin-top: var(--xd-size-16); border-top: var(--xd-size-1) solid var(--xd-border); padding-top: var(--xd-size-14); }
.xd-file-preview pre { font: var(--xd-size-10)/1.9 var(--wt-font-mono); overflow: auto; }
.xd-transcript { min-height: 0; }
.xd-conversation { min-height: 0; }
.xd-message p { white-space: pre-line; }
.xd-send:disabled { opacity: .45; cursor: default; }
.xd-dialog .xd-shell { min-height: 0; }

@media (max-width: 1100px) {
  :root { --xd-browser-width: var(--xd-size-280); }
  .xd-shell { grid-template-columns: var(--xd-size-160) minmax(0, 1fr); height: var(--xd-size-600); }
  .xd-terminals { display: block; }
  .xd-terminal { display: none; height: 100%; }
  .xd-terminal[data-selected=true] { display: flex; }
  .xd-terminal pre { font-size: var(--xd-size-11); }
  .xd-session-tabs { flex-wrap: wrap; }
  .xd-session-tab { font-size: var(--xd-size-10); padding-inline: var(--xd-size-6); }
  .xd-pane-head small { display: none; }
  .xd-workspace { grid-template-columns: minmax(0, 1fr) minmax(var(--xd-size-220), var(--xd-browser-width)); }
}

@media (max-width: 800px) and (min-width: 641px) {
  .xd-shell { grid-template-columns: var(--xd-size-132) minmax(0, 1fr); }
  .xd-workspace { grid-template-columns: minmax(0, 1fr) var(--xd-size-220); }
  .xd-preview { padding-inline: var(--xd-size-13); }
  .xd-session-tab { padding-inline: var(--xd-size-4); }
  .xd-terminal-path { font-size: var(--xd-size-8); }
}

@media (max-width: 640px) {
  .xd-shell { grid-template-columns: 1fr; height: var(--xd-size-570); }
  .xd-traffic { display: none; }
  .xd-titlebar { gap: var(--xd-size-8); grid-template-columns: auto 1fr; }
  .xd-tabs { justify-self: end; }
  .xd-tabs button { min-height: var(--xd-size-36); }
  .xd-toolbar { font-size: var(--xd-size-9); gap: var(--xd-size-6); }
  .xd-toolbar button, .xd-mobile-panes button, .xd-mobile-picker select { min-height: var(--xd-size-40); }
  .xd-workspace { display: block; }
  .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 { height: var(--xd-size-486); }
  .xd-terminals { height: calc(100% - var(--xd-size-46)); }
  .xd-session-tabs { flex-wrap: nowrap; min-height: var(--xd-size-46); }
  .xd-session-tabs button { min-height: var(--xd-size-36); font-size: var(--xd-size-10); padding: var(--xd-size-4) var(--xd-size-6); }
  .xd-terminal[data-selected=true] { display: flex; }
  .xd-panel-select { overflow: auto; }
  .xd-preview { min-height: var(--xd-size-480); }
  .xd-preview h3 { font-size: var(--xd-size-27); }
  .xd-preview-nav { margin-bottom: var(--xd-size-18); }
  .xd-preview-visual { height: var(--xd-size-125); }
  .xd-preview-cta, .xd-browser-tab, .xd-panel-tabs button, .xd-reload, .xd-send, .xd-prompt { min-height: var(--xd-size-40); }
  .xd-status { font-size: var(--xd-size-8); gap: var(--xd-size-4); }
  .xd-status span:last-child { display: none; }
  .xd-dialog { width: calc(100vw - var(--xd-size-12)); max-height: calc(100dvh - var(--xd-size-12)); }
  .xd-dialog .xd-shell { height: calc(100dvh - var(--xd-size-150)); }
  .xd-dialog .xd-workspace { overflow: auto; }
}