html[data-theme="kashyyyk"] {
  color-scheme: dark;
  --display-weight: 650;
  --display-spacing: 0.012em;
  --title-weight: 590;
  --label-spacing: 0.12em;
  --radius-lg: 6px;
  --radius-md: 5px;
  --radius-sm: 4px;
  --radius-chip: 5px;
  --rail-width: 2px;
  --bg: #0a0603;
  --surface-1: rgb(20 12 7 / 88%);
  --surface-2: rgb(30 18 10 / 86%);
  --surface-3: rgb(44 27 15 / 82%);
  --sunken: rgb(8 5 3 / 82%);
  --line: rgb(154 126 76 / 28%);
  --line-strong: rgb(190 154 88 / 52%);
  --kashyyyk-image: url("./kashyyyk-origin-tree.jpg");
  --kashyyyk-wood-texture: url("./kashyyyk-dark-wood.webp");
  --kashyyyk-panel-frame: url("./kashyyyk-panel-frame.webp");
  --kashyyyk-side-rail: url("./kashyyyk-side-rail.webp");
  --kashyyyk-panel-moss: url("./kashyyyk-panel-moss.webp");
  --kashyyyk-wood:
    linear-gradient(rgb(24 13 7 / 62%), rgb(14 8 4 / 68%)),
    var(--kashyyyk-wood-texture) center / 28rem 28rem;
  --kashyyyk-wood-soft:
    linear-gradient(rgb(31 18 10 / 65%), rgb(18 10 6 / 72%)),
    var(--kashyyyk-wood-texture) center / 24rem 24rem;
  --kashyyyk-control:
    linear-gradient(rgb(36 21 12 / 70%), rgb(14 8 5 / 80%)),
    var(--kashyyyk-wood-texture) center / 18rem 18rem;
  --kashyyyk-bronze: linear-gradient(180deg, #9f7a3f, #4f371e 46%, #24170d 52%, #805d30);
  --kashyyyk-panel-shadow:
    inset 0 1px 0 rgb(234 206 144 / 9%),
    inset 0 -1px 0 rgb(0 0 0 / 82%),
    inset 0 0 24px rgb(0 0 0 / 24%),
    0 18px 34px -28px #000;
  --card-bg: var(--kashyyyk-wood-soft);
  --card-bg-open: var(--kashyyyk-wood);
  --card-texture: none;
  --card-border: rgb(142 116 72 / 38%);
  --card-border-open: rgb(206 163 85 / 68%);
  --card-shadow: var(--kashyyyk-panel-shadow);
  --plate-bg: linear-gradient(180deg, rgb(43 27 16 / 92%), rgb(14 8 5 / 96%));
  --plate-texture: none;
  --plate-shadow: inset 0 1px 0 rgb(229 199 136 / 8%), inset 0 -1px 0 #020706;
  --turn-shadow: 0 20px 40px -30px #000;
  --text: #e8e2d3;
  --text-soft: #c1bcac;
  --text-muted: #8f9486;
  --text-faint: #66736a;
  --accent: #d8ad63;
  --accent-soft: rgb(216 173 99 / 13%);
  --accent-line: rgb(216 173 99 / 52%);
  --accent-glow: 0 0 20px -10px rgb(226 183 98 / 78%);
  --selection: rgb(216 173 99 / 28%);
  --brand-gradient: linear-gradient(150deg, rgb(47 127 104 / 22%), rgb(216 173 99 / 18%));
  --brand-shadow: 0 0 20px -11px rgb(108 190 158 / 62%);
  --provider-none: #849087;
  --provider-codex: #79c4b0;
  --provider-claude: #d7a263;
  --provider-tone-lightness: 0.78;
  --provider-tone-chroma: 0.085;
  --provider-tone-alpha: 0.18;
  --ok: #84bf80;
  --pending: #d4a563;
  --dot-input: #7fc8b6;
  --dot-cache: #90aa83;
  --dot-output: #d7a263;
  --dot-think: #a694c5;
  --space-glow-a: rgb(61 133 119 / 10%);
  --space-glow-b: rgb(205 165 91 / 7%);
  --space-base: #030908;
  --space-star: transparent;
  --star-opacity: 0;
  --shell-header-background:
    linear-gradient(rgb(26 15 8 / 50%), rgb(12 7 4 / 58%)),
    var(--kashyyyk-wood-texture) center / 22rem 22rem;
  --shell-header-border: 0;
  --shell-header-frame-border: 9px solid transparent;
  --shell-header-frame-content: "";
  --shell-header-frame-filter: brightness(1.5) saturate(0.82);
  --shell-header-frame-image: var(--kashyyyk-panel-frame) 80 / 9px stretch;
  --shell-header-gap: 0.7rem;
  --shell-header-height: 4.5rem;
  --shell-header-padding-left: clamp(0.45rem, 0.8vw, 0.8rem);
  --shell-header-padding-right: clamp(0.45rem, 0.8vw, 0.8rem);
  --shell-header-rule: linear-gradient(90deg, transparent 2%, #4a321b 7%, #bc9150 50%, #4a321b 93%, transparent 98%);
  --shell-header-rule-opacity: 0.74;
  --shell-header-shadow: var(--kashyyyk-panel-shadow);
  --shell-control-background: var(--kashyyyk-control);
  --shell-control-border: 1px solid rgb(156 126 76 / 42%);
  --shell-control-radius: 7px;
  --shell-control-shadow: inset 0 1px 0 rgb(234 204 139 / 7%), inset 0 -1px 0 #020706;
  --shell-view-switch-background: rgb(18 10 6 / 54%);
  --shell-view-switch-border: 1px solid rgb(145 116 69 / 30%);
  --shell-view-switch-radius: 9px;
  --shell-view-switch-shadow: inset 0 1px 0 rgb(232 203 139 / 5%);
  --shell-tab-border: 1px solid transparent;
  --shell-tab-radius: 7px;
  --shell-tab-active-background: linear-gradient(180deg, rgb(58 39 22 / 84%), rgb(24 14 8 / 94%));
  --shell-tab-active-border: 1px solid rgb(190 148 78 / 46%);
  --shell-tab-active-shadow: inset 0 -2px 0 var(--accent), 0 12px 24px -20px rgb(220 174 92 / 72%);
  --shell-workspace-gap: 0.36rem;
  --shell-workspace-padding-bottom: 0.36rem;
  --shell-workspace-padding-top: 0.36rem;
  --shell-panel-border: 8px solid transparent;
  --shell-panel-border-image: var(--kashyyyk-panel-frame) 80 / 8px stretch;
  --shell-panel-border-width: 8px;
  --shell-panel-border-image-width: 8px;
  --shell-panel-radius: 5px;
  --shell-chat-border: 8px solid transparent;
  --shell-chat-gap: 0.36rem;
  --shell-chat-radius: 5px;
  --shell-stream-tabs-background: var(--kashyyyk-wood);
  --shell-stream-tabs-border: 6px solid transparent;
  --shell-stream-tabs-border-bottom: 6px solid transparent;
  --shell-stream-tabs-border-image: var(--kashyyyk-panel-frame) 80 / 6px stretch;
  --shell-stream-tabs-padding: 0.12rem 0.18rem;
  --shell-stream-tabs-radius: 5px;
  --shell-stream-tab-background: transparent;
  --shell-stream-tab-border: 1px solid transparent;
  --shell-stream-tab-hover-background: rgb(46 29 17 / 66%);
  --shell-stream-tab-active-background: rgb(58 39 22 / 72%);
  --shell-stream-tab-radius: 7px;
  --shell-stream-card-background: var(--kashyyyk-control);
  --shell-stream-card-border: 6px solid transparent;
  --shell-stream-card-border-image: var(--kashyyyk-panel-frame) 80 / 6px stretch;
  --shell-stream-card-radius: 4px;
  --shell-stream-card-shadow: var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] body::after {
  background-color: #020706;
  background-image:
    linear-gradient(180deg, rgb(1 7 7 / 50%), transparent 20% 74%, rgb(1 5 4 / 54%)),
    radial-gradient(105% 90% at 50% 48%, transparent 42%, rgb(0 0 0 / 54%) 100%),
    var(--kashyyyk-image);
  background-position: center, center, 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

@keyframes kashyyyk-mist {
  0%, 100% { opacity: 0.28; transform: translate3d(-1.5%, 0, 0) scale(1.03); }
  50% { opacity: 0.46; transform: translate3d(1.5%, -0.5%, 0) scale(1.06); }
}

html[data-theme="kashyyyk"] body::before {
  animation: kashyyyk-mist 18s ease-in-out infinite;
  background-image:
    radial-gradient(46% 30% at 24% 64%, rgb(64 145 137 / 20%), transparent 74%),
    radial-gradient(38% 36% at 76% 54%, rgb(209 164 82 / 10%), transparent 72%),
    linear-gradient(102deg, transparent 8%, rgb(117 190 179 / 7%) 38%, transparent 68%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.34;
}

html[data-background-override="true"][data-background="kashyyyk"] {
  --hub-background-color: #020706;
  --hub-background-image:
    linear-gradient(180deg, rgb(1 7 7 / 50%), transparent 20% 74%, rgb(1 5 4 / 54%)),
    radial-gradient(105% 90% at 50% 48%, transparent 42%, rgb(0 0 0 / 54%) 100%),
    var(--kashyyyk-image, url("./kashyyyk-origin-tree.jpg"));
  --hub-background-position: center, center, 50% 50%;
}

html[data-background-override="true"][data-background="kashyyyk-village"] {
  --hub-background-color: #020706;
  --hub-background-image:
    linear-gradient(180deg, rgb(1 6 7 / 48%), transparent 20% 76%, rgb(1 5 4 / 50%)),
    radial-gradient(108% 94% at 52% 48%, transparent 43%, rgb(0 0 0 / 52%) 100%),
    var(--kashyyyk-village-image, url("./kashyyyk-canopy-village.jpg"));
  --hub-background-position: center, center, 50% 50%;
}

html[data-background-override="true"][data-background="kashyyyk-refinery"] {
  --hub-background-color: #020706;
  --hub-background-image:
    linear-gradient(180deg, rgb(1 6 7 / 48%), transparent 20% 76%, rgb(1 5 4 / 48%)),
    radial-gradient(104% 92% at 50% 48%, transparent 45%, rgb(0 0 0 / 50%) 100%),
    var(--kashyyyk-refinery-image, url("./kashyyyk-refinery.jpg"));
  --hub-background-position: center, center, 50% 50%;
}

html[data-theme="kashyyyk"] .task-rail,
html[data-theme="kashyyyk"] .activity-rail,
html[data-theme="kashyyyk"] .stream-tabs,
html[data-theme="kashyyyk"] .composer,
html[data-theme="kashyyyk"] .dialog-settings,
html[data-theme="kashyyyk"] .settings-panel {
  background: var(--kashyyyk-wood);
  border: 7px solid transparent;
  border-image: var(--kashyyyk-panel-frame) 80 / 7px stretch;
  box-shadow: var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] .task-rail,
html[data-theme="kashyyyk"] .activity-rail,
html[data-theme="kashyyyk"] .composer,
html[data-theme="kashyyyk"] .stream-chat-columns {
  overflow: hidden;
}

html[data-theme="kashyyyk"] .chat {
  background: rgb(2 9 8 / 8%);
  box-shadow: inset 0 0 72px rgb(0 0 0 / 12%);
  position: relative;
}

html[data-theme="kashyyyk"] .stream-chat-columns {
  background: rgb(1 7 6 / 10%);
  box-shadow: inset 0 0 48px rgb(0 0 0 / 15%);
}

@media (min-width: 860px) {
  html[data-theme="kashyyyk"] .workspace::before,
  html[data-theme="kashyyyk"] .workspace::after {
    background: var(--kashyyyk-side-rail) center / 100% 100% no-repeat;
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: clamp(0.9rem, 1.1vw, 1.25rem);
    z-index: 8;
  }
  html[data-theme="kashyyyk"] .workspace::before {
    left: calc(-1 * var(--shell-header-padding-left));
  }
  html[data-theme="kashyyyk"] .workspace::after {
    right: calc(-1 * var(--shell-header-padding-right));
    transform: scaleX(-1);
  }
  html[data-theme="kashyyyk"] body > .workspace:has(.stream-chat-columns[data-multi-stream])::before {
    left: 0;
  }
  html[data-theme="kashyyyk"] body > .workspace:has(.stream-chat-columns[data-multi-stream])::after {
    right: 0;
  }
}

html[data-theme="kashyyyk"] .task-rail,
html[data-theme="kashyyyk"] .activity-rail,
html[data-theme="kashyyyk"] .stream-tabs,
html[data-theme="kashyyyk"] .composer {
  position: relative;
}

html[data-theme="kashyyyk"] .stream-tabs,
html[data-theme="kashyyyk"] .composer,
html[data-theme="kashyyyk"] .dialog-settings,
html[data-theme="kashyyyk"] .settings-panel {
  background: var(--kashyyyk-wood);
  border: 7px solid transparent;
  border-image: var(--kashyyyk-panel-frame) 80 / 7px stretch;
  box-shadow: var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] .task-rail::after,
html[data-theme="kashyyyk"] .activity-rail::after {
  background: var(--kashyyyk-panel-moss) top center / 100% auto no-repeat;
  content: "";
  height: clamp(2.2rem, 4.5vw, 4.75rem);
  left: 0;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

html[data-theme="kashyyyk"] .task-workspace-item,
html[data-theme="kashyyyk"] .activity-stream-item,
html[data-theme="kashyyyk"] .stream-tab-card {
  background: var(--kashyyyk-control);
  border: 4px solid transparent;
  border-image: var(--kashyyyk-panel-frame) 80 / 4px stretch;
  box-shadow: var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] .task-workspace-item::before,
html[data-theme="kashyyyk"] .activity-stream-item::before {
  background: linear-gradient(180deg, transparent, rgb(214 170 91 / 76%), transparent);
  border-radius: 999px;
  content: "";
  inset: 20% auto 20% 0;
  opacity: 0;
  position: absolute;
  transition: opacity 160ms ease;
  width: 2px;
}

html[data-theme="kashyyyk"] .task-workspace-item:hover,
html[data-theme="kashyyyk"] .task-workspace-item:focus-visible,
html[data-theme="kashyyyk"] .activity-stream-item:hover,
html[data-theme="kashyyyk"] .activity-stream-item:focus-visible {
  background:
    linear-gradient(rgb(43 27 16 / 74%), rgb(18 10 6 / 80%)),
    var(--kashyyyk-wood-texture) center / 18rem 18rem;
  border-color: rgb(193 153 83 / 58%);
}

html[data-theme="kashyyyk"] .task-workspace-item[data-selected],
html[data-theme="kashyyyk"] .activity-stream-item[data-current] {
  background:
    linear-gradient(90deg, rgb(214 170 91 / 15%), rgb(18 10 6 / 82%) 58%),
    var(--kashyyyk-wood-texture) center / 18rem 18rem;
  border-color: rgb(205 161 84 / 66%);
  box-shadow: inset 3px 0 0 var(--accent), var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] .task-workspace-item[data-selected]::before,
html[data-theme="kashyyyk"] .activity-stream-item[data-current]::before {
  opacity: 1;
}

html[data-theme="kashyyyk"] .stream-tab[aria-pressed="true"] .stream-tab-card {
  border-color: rgb(211 167 88 / 66%);
  box-shadow: inset 0 0 0 1px rgb(205 161 84 / 30%), inset 0 -2px 0 var(--accent), var(--kashyyyk-panel-shadow);
}

html[data-theme="kashyyyk"] .msg {
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
  background-color: rgb(19 11 7 / 72%);
  background-image:
    linear-gradient(rgb(27 16 9 / 72%), rgb(14 8 5 / 78%)),
    var(--kashyyyk-wood-texture);
  background-size: auto, 28rem 28rem;
  border-color: rgb(137 112 72 / 40%);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgb(232 204 145 / 6%), var(--turn-shadow);
}

html[data-theme="kashyyyk"] .msg-user {
  background-image:
    linear-gradient(90deg, rgb(207 161 80 / 14%), rgb(18 10 6 / 78%) 62%),
    var(--kashyyyk-wood-texture);
  background-size: auto, 28rem 28rem;
  border-color: rgb(202 156 80 / 52%);
}

html[data-theme="kashyyyk"] .msg-system,
html[data-theme="kashyyyk"] .queue-item {
  background: rgb(17 10 6 / 70%);
  border-color: rgb(133 103 66 / 34%);
}

html[data-theme="kashyyyk"] .composer-input,
html[data-theme="kashyyyk"] .chip-button,
html[data-theme="kashyyyk"] .option-chip,
html[data-theme="kashyyyk"] .view-settings {
  background: var(--kashyyyk-control);
  border-color: rgb(145 116 69 / 40%);
  box-shadow: inset 0 1px 0 rgb(229 198 132 / 6%);
}

html[data-theme="kashyyyk"] .composer-send:not(:disabled) {
  background: linear-gradient(180deg, #b98d4b, #745126);
  border-color: #d0a05a;
  color: #07100d;
  box-shadow: inset 0 1px 0 rgb(255 232 173 / 30%), 0 0 18px -10px rgb(216 170 89 / 78%);
}

html[data-theme="kashyyyk"] .task-rail-title,
html[data-theme="kashyyyk"] .activity-rail-toggle,
html[data-theme="kashyyyk"] .eyebrow {
  color: #b9a77e;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 #000;
}

html[data-theme="kashyyyk"] pre,
html[data-theme="kashyyyk"] code,
html[data-theme="kashyyyk"] .tool-call {
  background-color: rgb(1 9 8 / 74%);
  border-color: rgb(111 135 109 / 28%);
  color: #d9dccd;
}

html[data-theme="kashyyyk"] .journal details[data-work-log-day-section],
html[data-theme="kashyyyk"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(8px) saturate(108%);
  -webkit-backdrop-filter: blur(8px) saturate(108%);
  background-color: rgb(4 14 12 / 78%);
  border-color: rgb(139 113 70 / 38%);
}

html[data-theme="kashyyyk"] * {
  scrollbar-color: rgb(158 125 71 / 46%) rgb(2 9 8 / 42%);
}

html[data-theme="kashyyyk"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8d6937, #3b2815);
  border: 1px solid #161008;
}

@media (max-width: 720px) {
  html[data-theme="kashyyyk"] {
    --shell-workspace-gap: 0.28rem;
    --shell-workspace-padding-bottom: 0.28rem;
    --shell-workspace-padding-top: 0.28rem;
    --shell-panel-radius: 4px;
    --shell-stream-tabs-radius: 4px;
  }
  html[data-theme="kashyyyk"] body::after,
  html[data-background-override="true"][data-background^="kashyyyk"] {
    --hub-background-position: center, center, 50% 52%;
  }
  html[data-theme="kashyyyk"] .msg {
    background-color: rgb(4 14 12 / 86%);
  }
  html[data-theme="kashyyyk"] .task-rail::after,
  html[data-theme="kashyyyk"] .activity-rail::after {
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="kashyyyk"] body::before {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="kashyyyk"] .chat,
  html[data-theme="kashyyyk"] .msg,
  html[data-theme="kashyyyk"] .queue-item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #07130f;
  }
}