@import url("../packages/ui/src/styles.css");

#app {
  height:100dvh;
  min-height:620px;
  display:flex;
  flex-direction:column
}
.top-spacer {
  flex:1
}
.topbar {
  height:58px;
  flex:none;
  display:flex;
  align-items:center;
  padding:0 17px 0 18px;
  gap:13px;
  background:#1b201f;
  border-bottom:1px solid #313934
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#e9ede6
}
.brand strong {
  font-size:18px;
  letter-spacing:-.6px;
  font-weight:650
}
.brand strong>span {
  font-weight:400;
  color:#a3afa6
}
.brand-mark {
  font-size:30px;
  line-height:32px;
  position:relative;
  font-weight:750;
  letter-spacing:-5px;
  color:#1d251c;
  background:var(--accent);
  display:flex;
  width:31px;
  height:32px;
  align-items:center;
  padding-left:6px;
  border-radius:7px
}
.brand-mark>span {
  position:absolute;
  width:5px;
  height:5px;
  background:#738958;
  right:5px;
  bottom:5px;
  border-radius:50%
}
.version {
  font-size:8px;
  letter-spacing:1px;
  padding:3px 4px;
  border:1px solid #45503d;
  color:#9ab380;
  border-radius:3px;
  margin-left:1px
}
.top-divider {
  height:22px;
  width:1px;
  background:var(--line);
  margin:0 1px 0 8px
}
.project-title {
  font-size:12px;
  gap:8px;
  padding:5px 3px
}
.project-dot {
  width:6px;
  height:6px;
  background:#bdc6b8;
  border-radius:50%
}
.project-subtitle {
  color:var(--dim);
  font-size:11px
}
.save-state {
  font-size:10px;
  color:#90a38d;
  display:flex;
  align-items:center;
  gap:6px
}
.save-state i,.live-dot {
  background:#a7bf84;
  width:5px;
  height:5px;
  display:inline-block;
  border-radius:50%
}
.command-button {
  color:#828d85;
  gap:12px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:4px 6px
}
.primary {
  background:var(--accent);
  color:#26301f;
  border:1px solid #d2e6b2;
  border-radius:5px;
  font-weight:650;
  padding:8px 12px;
  font-size:11px
}
.primary:hover {
  background:#d3e9ad;
  color:#1c2515
}
.primary:disabled {
  opacity:.6
}
.secondary {
  background:#303930;
  border:1px solid #4a5944;
  border-radius:5px;
  padding:8px 12px
}
.icon-btn {
  height:27px;
  width:27px;
  padding:0;
  color:#93a095;
  border-radius:4px;
  flex-shrink:0
}
.icon-btn.active {
  color:var(--accent);
  background:#c0da9812
}
.menubar {
  display:flex;
  align-items:center;
  height:34px;
  flex:none;
  background:#1d2221;
  border-bottom:1px solid var(--line-soft);
  padding:0 16px
}
.menus {
  display:flex;
  gap:5px
}
.menus button {
  font-size:11px;
  height:28px;
  padding:0 9px;
  color:#a5aea5;
  border-radius:3px
}
.breadcrumbs {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:38px;
  color:#637165
}
.breadcrumbs b {
  font-weight:400;
  color:#a5b29f
}
.menubar-end {
  margin-left:auto
}
.backend-badge {
  font-size:8px;
  letter-spacing:1.1px;
  color:#9eb08d;
  border:1px solid #3a4735;
  border-radius:3px;
  padding:3px 5px
}
.brushbar {
  height:47px;
  flex:none;
  background:#242a27;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:21px;
  padding:0 17px
}
.brush-preset {
  min-width:142px;
  padding-right:10px;
  border-right:1px solid #3b423a
}
.brush-preset button {
  width:100%;
  justify-content:start;
  font-size:11px;
  color:#c4cdbe
}
.brush-preset button>svg {
  margin-left:auto
}
.brush-preview {
  height:23px;
  width:23px;
  border-radius:50%;
  background:radial-gradient(circle,#c8d1bd 2%,#9eaf88 17%,#75816888 45%,#9eaf8800 70%)
}
.inline-control {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:10px;
  color:#93a18e
}
.inline-control input {
  width:79px
}
.inline-control span {
  color:#bac7b2;
  min-width:39px;
  font-variant-numeric:tabular-nums
}
.toolbar-divider {
  height:20px;
  width:1px;
  background:#3d443b
}
.compact-button {
  font-size:10px;
  color:#9aa992;
  padding:6px 7px;
  border-radius:4px
}
.compact-button.active {
  background:#c0da9813;
  color:var(--accent)
}
.pressure-control {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#9eaa97
}
.workspace {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:49px minmax(0,1fr) 5px var(--inspector-width)
}
.toolrail {
  background:#1f2422;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:13px 0 12px;
  min-height:0
}
.tool {
  width:35px;
  height:35px;
  color:#8c978d;
  border-radius:6px
}
.tool.active {
  color:var(--accent);
  background:#c0da9816;
  border:1px solid #60734c;
  box-shadow:inset 0 0 0 1px #182110
}
.rail-divider {
  height:1px;
  background:#353d33;
  width:22px;
  margin:7px 0
}
.rail-color {
  width:27px;
  height:29px;
  display:block;
  padding:3px;
  background:#c0da9820;
  border:1px solid #71835c;
  border-radius:4px;
  margin:8px 0
}
.rail-color input {
  width:19px;
  height:21px
}
.workarea {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0
}
.viewport-region {
  flex:1;
  min-height:200px;
  display:flex;
  flex-direction:column
}
.viewport-toolbar {
  height:39px;
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  background:#202623;
  padding:0 12px;
  border-bottom:1px solid #323c34;
  color:#82967f
}
.view-tabs {
  display:flex;
  gap:3px;
  border-radius:4px;
  background:#19201b;
  padding:3px
}
.view-tabs button {
  font-size:10px;
  color:#899784;
  min-width:31px;
  padding:4px 8px;
  border-radius:3px
}
.view-tabs button.active {
  background:#344130;
  color:#ccdbbf
}
.viewport-toolbar>select {
  font-size:10px;
  background:transparent;
  color:#a0b195
}
.viewport-divider {
  height:15px;
  width:1px;
  background:#3c4539;
  margin:0 6px
}
.viewports {
  display:flex;
  flex:1;
  min-height:0;
  min-width:0
}
.scene-pane {
  position:relative;
  flex:1;
  min-width:100px;
  min-height:150px;
  overflow:hidden;
  background:radial-gradient(ellipse,#354038,#202822)
}
#scene {
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  outline:none;
  cursor:crosshair
}
.view-label {
  position:absolute;
  top:17px;
  left:20px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:8px;
  letter-spacing:1.8px;
  color:#819981;
  pointer-events:none
}
.view-label button {
  font-size:8px;
  letter-spacing:1.2px;
  padding:0;
  color:#a7b99f;
  pointer-events:auto
}
.view-label>span {
  color:#55744f
}
.view-actions {
  position:absolute;
  top:11px;
  right:13px;
  display:flex;
  gap:5px
}
.glass-btn {
  background:#222e2477;
  border:1px solid #829d7125;
  height:29px;
  width:29px;
  border-radius:5px;
  color:#b0c79f;
  backdrop-filter:blur(10px)
}
.glass-btn.active {
  color:var(--accent);
  background:#a0c47833
}
.model-caption {
  position:absolute;
  left:25px;
  bottom:46px;
  pointer-events:none;
  text-shadow:0 2px 14px #17211488
}
.eyebrow {
  font-size:7px;
  letter-spacing:2px;
  color:#acbb9c
}
.model-caption h1 {
  font-size:27px;
  line-height:1.1;
  letter-spacing:-.85px;
  font-weight:400;
  color:#d7e1ce;
  margin:9px 0
}
.model-caption p {
  font-size:8px;
  letter-spacing:.2px;
  color:#91a187
}
.scene-footer {
  position:absolute;
  left:18px;
  right:17px;
  bottom:13px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#8a9e7f;
  gap:10px;
  pointer-events:none
}
.scene-footer>span:first-child {
  display:flex;
  align-items:center;
  gap:6px
}
.axis-gizmo {
  position:absolute;
  right:18px;
  bottom:45px;
  width:37px;
  height:38px;
  font-size:8px;
  font-weight:600
}
.axis-gizmo:before {
  content:'';
  position:absolute;
  top:17px;
  left:19px;
  height:18px;
  width:1px;
  background:#69895a;
  transform:rotate(62deg);
  transform-origin:top
}
.axis-gizmo:after {
  content:'';
  position:absolute;
  top:0px;
  left:19px;
  height:24px;
  width:1px;
  background:#8ca678
}
.axis-y {
  color:#b1cb94;
  position:absolute;
  top:-9px;
  left:15px
}
.axis-x {
  color:#c6a280;
  position:absolute;
  bottom:4px;
  right:0
}
.axis-z {
  color:#9ab8c5;
  position:absolute;
  bottom:2px;
  left:1px
}
.interaction-hint {
  position:absolute;
  top:53px;
  left:50%;
  transform:translateX(-50%);
  font-size:8px;
  color:#8a9f7d;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  opacity:.75;
  pointer-events:none
}
.interaction-hint kbd {
  font-size:8px;
  background:#1b251833;
  border-color:#7b8d641c;
  color:#a8bb99
}
.interaction-hint>span {
  padding:0 5px
}
.brush-cursor {
  display:none;
  position:absolute;
  border:1px solid #f1f6e3aa;
  border-radius:50%;
  box-shadow:0 0 0 1px #18201160;
  transform:translate(-50%,-50%);
  pointer-events:none
}
.uv-pane {
  width:255px;
  flex-shrink:0;
  background:#1d2420;
  border-left:1px solid #3b483a;
  display:flex;
  flex-direction:column
}
.uv-header {
  height:40px;
  display:flex;
  align-items:center;
  padding:0 13px;
  gap:9px;
  font-size:8px;
  letter-spacing:1px;
  color:#83937b
}
.uv-header b {
  font-weight:500;
  letter-spacing:.6px;
  font-size:7px;
  color:#6e8064;
  border:1px solid #3b4a35;
  padding:3px 4px;
  border-radius:3px;
  margin-left:auto
}
.uv-header .icon-btn {
  width:21px;
  height:23px
}
.uv-texture-wrap {
  width:calc(100% - 28px);
  aspect-ratio:1;
  margin:13px 14px 0;
  position:relative;
  box-shadow:0 0 0 1px #53624255;
  background:#172011
}
.uv-texture-wrap canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}
#uv-wire-canvas {
  position:absolute;
  inset:0;
  pointer-events:none
}
.uv-corner {
  position:absolute;
  bottom:6px;
  left:7px;
  font-size:7px;
  background:#10160c99;
  padding:2px 4px;
  color:#c6d7b3;
  pointer-events:none
}
.uv-ruler {
  display:flex;
  justify-content:space-between;
  margin:8px 14px 0;
  font-size:7px;
  color:#66775b
}
.uv-info {
  padding:24px 16px 16px;
  overflow:auto
}
.mini-overline {
  font-size:7px;
  letter-spacing:1.5px;
  color:#778969
}
.uv-info h3 {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:500;
  margin:11px 0 5px;
  color:#c3d1b7
}
.mini-dot {
  width:5px;
  height:5px;
  background:#b5d08f;
  border-radius:50%;
  margin-left:auto
}
.uv-info p {
  font-size:9px;
  color:#7b8d6e
}
.channel-dots {
  display:flex;
  gap:6px;
  margin:17px 0 22px
}
.channel-dots span {
  width:24px;
  height:20px;
  font-size:7px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #45543b;
  border-radius:4px;
  color:#859b73;
  background:#222d1d
}
.channel-dots span.on {
  border-color:#586e45;
  color:#c6dcae;
  background:#35472a
}
.uv-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:11px 0;
  font-size:8px;
  color:#7f9271;
  gap:4px
}
.uv-meta select {
  font-size:8px;
  background:#273321;
  padding:5px 4px;
  color:#bdcfa9
}
.uv-meta b {
  font-size:8px;
  font-weight:400;
  color:#acbe97
}
.bake-note {
  margin-top:22px;
  border:1px solid #3c4b32;
  border-radius:5px;
  padding:11px 8px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#28342155
}
.bake-icon {
  color:#a5bb8b
}
.bake-note b {
  font-size:8px;
  font-weight:500;
  color:#c0d2ab
}
.bake-note p {
  font-size:7px;
  margin-top:4px;
  color:#849873
}
.bake-note button {
  margin-left:auto;
  width:18px;
  color:#8ba873
}
.asset-shelf {
  height:198px;
  flex-shrink:0;
  background:#1e2520;
  border-top:1px solid #3b4636
}
.shelf-header {
  height:41px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #343f2f;
  padding:0 13px;
  gap:10px
}
.shelf-tabs {
  display:flex;
  height:100%;
  gap:19px
}
.shelf-tabs button {
  position:relative;
  height:100%;
  font-size:10px;
  padding:0 3px;
  color:#7f9174;
  gap:5px
}
.shelf-tabs button.active {
  color:#c9dcb6
}
.shelf-tabs button.active:after {
  content:'';
  position:absolute;
  bottom:0;
  height:2px;
  background:#b8d293;
  left:0;
  right:0
}
.shelf-tabs span {
  font-size:7px;
  color:#77915f;
  border:1px solid #415237;
  padding:1px 4px;
  border-radius:4px
}
.asset-search {
  display:flex;
  align-items:center;
  background:#171f16;
  border:1px solid #34432c;
  border-radius:4px;
  height:25px;
  padding:0 6px;
  gap:5px;
  color:#7a8e6c
}
.asset-search input {
  font-size:9px;
  background:none;
  border:0;
  outline:none;
  color:#b9cbaa;
  width:103px
}
.asset-search input::placeholder {
  color:#687e59
}
.asset-search kbd {
  font-size:8px;
  border-color:#4c634133;
  color:#687e59
}
.asset-import {
  font-size:9px;
  color:#9fb48c
}
.shelf-body {
  display:flex;
  height:155px
}
.asset-categories {
  width:104px;
  flex-shrink:0;
  padding:10px 9px;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-right:1px solid #333f2e
}
.asset-categories button {
  font-size:9px;
  justify-content:start;
  padding:5px 8px;
  color:#829674;
  border-radius:3px
}
.asset-categories button.active {
  background:#35442c;
  color:#c3d8ac
}
.asset-grid {
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 12px 8px;
  gap:9px;
  flex:1;
  min-width:0
}
.asset-tile {
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  align-items:start;
  width:96px;
  padding:0;
  border:1px solid #35412e;
  background:#232d1e;
  border-radius:5px;
  overflow:hidden;
  text-align:left;
  position:relative;
  gap:0
}
.asset-tile:hover {
  border-color:#8ea870;
  background:#2f3e26
}
.asset-tile.selected {
  border-color:#a3c17e;
  background:#2d3e22;
  box-shadow:0 0 0 1px #a3c17e33
}
.asset-tile.selected:after {
  content:'✓';
  position:absolute;
  right:5px;
  top:5px;
  border-radius:50%;
  background:#b8d392;
  color:#283f1d;
  width:13px;
  height:13px;
  font-size:9px;
  text-align:center;
  line-height:13px
}
.asset-preview {
  width:100%;
  height:83px;
  background:radial-gradient(ellipse at center,#45553522,#17201144);
  display:flex;
  align-items:center;
  justify-content:center
}
.asset-preview canvas {
  width:81px;
  height:81px;
  filter:drop-shadow(0 6px 4px #10170d88)
}
.asset-tile b {
  font-size:8px;
  font-weight:500;
  color:#c8d9b8;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:3px 7px 0
}
.asset-tile small {
  font-size:7px;
  color:#738c60;
  padding:4px 7px 7px
}
.brush-asset-preview {
  height:77px;
  width:77px;
  border-radius:50%;
  margin:auto;
  background:radial-gradient(circle,#d6e5c7 1%,#aebf9566 35%,transparent 66%)
}
.asset-empty {
  font-size:11px;
  color:#92a480;
  padding:20px
}
.history-entry {
  min-width:180px;
  background:#283320;
  border:1px solid #3d4b34;
  border-radius:5px;
  padding:12px;
  font-size:10px;
  height:85px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.splitter {
  background:#171d17;
  cursor:col-resize;
  border-left:1px solid #3b4534;
  border-right:1px solid #283122;
  z-index:3
}
.splitter:hover {
  background:#647a4d
}
.inspector {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#232a23;
  min-height:0
}
.panel-heading {
  height:40px;
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:8px;
  border-bottom:1px solid #37412f;
  flex:none
}
.panel-heading h2 {
  font-size:11px;
  font-weight:550;
  color:#cad5bc
}
.panel-heading>span {
  font-size:8px;
  border:1px solid #435036;
  border-radius:4px;
  color:#829670;
  padding:2px 4px;
  line-height:12px
}
.panel-heading>svg {
  color:#82956f
}
.layers-panel {
  flex:0 0 auto;
  max-height:46%;
  display:flex;
  flex-direction:column;
  min-height:155px;
  border-bottom:1px solid #445036
}
.layer-blending {
  height:35px;
  display:flex;
  align-items:center;
  padding:0 11px;
  gap:10px;
  border-bottom:1px solid #313d28;
  flex:none
}
.layer-blending select {
  font-size:9px;
  background:#1b2417;
  padding:4px 20px 4px 7px;
  width:92px
}
.layer-blending label {
  font-size:8px;
  color:#8ca177;
  display:flex;
  gap:6px;
  align-items:center;
  flex:1
}
.layer-blending input {
  width:55px;
  flex:1
}
.layer-blending output {
  font-size:8px;
  min-width:18px;
  color:#c2d3ac;
  text-align:right
}
.layer-list {
  overflow-y:auto;
  flex:1;
  min-height:48px
}
.layer {
  height:49px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #303e2733;
  padding:0 10px 0 7px;
  gap:9px;
  cursor:pointer;
  position:relative
}
.layer:hover {
  background:#ffffff03
}
.layer.selected {
  background:#3f50312b;
  box-shadow:inset 2px 0 #bad78b
}
.layer-visibility {
  width:16px;
  padding:0;
  color:#829c6b;
  flex-shrink:0
}
.layer-visibility.muted {
  color:#4b603d
}
.layer-thumb {
  width:28px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #586a43;
  border-radius:3px;
  background:linear-gradient(125deg,#71835933,#1a251388);
  color:#a2b886;
  flex-shrink:0
}
.layer-thumb.fill {
  background:linear-gradient(140deg,var(--swatch),#1b2819);
  color:#d7e2c977
}
.layer-name {
  min-width:0;
  flex:1
}
.layer-name b {
  font-size:9px;
  font-weight:500;
  display:block;
  color:#c7d6b3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.layer-name span {
  font-size:7px;
  color:#7b9065;
  display:block;
  margin-top:5px;
  text-transform:capitalize
}
.layer-opacity {
  font-size:8px;
  color:#8ba276;
  min-width:22px
}
.mask-thumb {
  width:22px;
  height:26px;
  padding:0;
  background:linear-gradient(135deg,#deded1 45%,#19230f 55%);
  border:1px solid #5c6e44;
  border-radius:3px;
  color:#535c40
}
.mask-thumb.selected-mask {
  outline:1px solid #c6df9e;
  outline-offset:2px
}
.layer-actions {
  display:flex;
  align-items:center;
  padding:4px 7px 4px 11px;
  height:33px;
  border-top:1px solid #344328;
  flex:none;
  gap:3px
}
.layer-actions>span {
  font-size:7px;
  color:#6e8459
}
.layer-actions .icon-btn {
  width:21px;
  height:23px;
  color:#7e9768
}
.properties-panel {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0
}
.properties-content {
  padding:13px 15px;
  overflow:auto;
  flex:1
}
.property-title {
  font-size:10px;
  color:#c3d7a9;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:13px
}
.property-title small {
  margin-left:auto;
  color:#7e9567;
  font-size:8px
}
.property-section {
  border-top:1px solid #3b482e;
  padding-top:13px;
  margin-top:15px
}
.property-section h3 {
  font-size:8px;
  letter-spacing:1.2px;
  color:#91ab77;
  font-weight:500;
  margin-bottom:12px;
  text-transform:uppercase
}
.property-row {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  color:#98ae7e;
  margin:10px 0
}
.property-row>span:first-child {
  flex:1
}
.property-row input[type=color] {
  width:46px;
  height:24px;
  border:1px solid #718254
}
.property-row .color-hex {
  font-size:9px;
  color:#c4d8a9;
  letter-spacing:.5px;
  font-family:ui-monospace,monospace
}
.property-row select {
  font-size:9px;
  max-width:150px;
  background:#1b2814;
  color:#b7d29a;
  border:1px solid #3b512b
}
.property-slider {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px;
  font-size:9px;
  color:#9bb581;
  margin:13px 0
}
.property-slider output {
  font-size:9px;
  color:#c0dca1;
  font-variant-numeric:tabular-nums;
  background:#192711;
  border:1px solid #3b5228;
  padding:2px 5px;
  border-radius:3px;
  min-width:38px;
  text-align:right
}
.property-slider>span {
  padding-top:3px
}
.property-slider input {
  grid-column:1/-1;
  width:100%;
  margin-top:4px;
  margin-bottom:0
}
.channel-toggles {
  display:flex;
  gap:5px
}
.channel-toggles label {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  color:#91ab77;
  border:1px solid #435b2e;
  background:#203016;
  border-radius:4px;
  padding:5px 6px;
  cursor:pointer;
  gap:4px
}
.channel-toggles input {
  width:10px;
  height:10px;
  margin:0
}
.property-note {
  font-size:8px;
  line-height:1.65;
  color:#81996b
}
.mask-controls {
  display:flex;
  gap:6px;
  margin:9px 0
}
.mask-controls button {
  font-size:8px;
  border:1px solid #4a6332;
  border-radius:4px;
  padding:6px;
  color:#bfdba0;
  flex:1;
  background:#26381b
}
.mask-controls button.active {
  border-color:#bad987;
  background:#48672d
}
.inspector-footer {
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:none;
  border-top:1px solid #3b4a2d;
  color:#798e63;
  font-size:8px
}
.statusbar {
  height:25px;
  flex:none;
  display:flex;
  align-items:center;
  gap:13px;
  background:#171f14;
  border-top:1px solid #3c4c2d;
  padding:0 13px;
  font-size:8px;
  color:#7f9a68
}
.status-brand {
  display:flex;
  align-items:center;
  gap:4px;
  color:#a8c58b
}
.status-brand b {
  font-size:8px;
  font-weight:500
}
.status-divider {
  width:1px;
  height:10px;
  background:#40572d
}
.busy-overlay {
  position:fixed;
  inset:0;
  background:#131c1188;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:15px;
  backdrop-filter:blur(3px);
  font-size:12px;
  color:#d4e5bf
}
.busy-overlay.visible {
  display:flex
}
.spinner {
  width:30px;
  height:30px;
  border:2px solid #819b5b55;
  border-top-color:#c3dd95;
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin {
  to {
  transform:rotate(360deg)
}

}
.boot {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px
}
.boot-logo {
  background:#c3dd95;
  color:#273d19;
  padding:20px 28px;
  border-radius:20px;
  font-size:40px;
  font-weight:700
}
.boot h1 {
  font-size:28px;
  font-weight:400
}
.boot p {
  color:#8da375
}
body[data-view="3d"] .uv-pane {
  display:none
}
body[data-view="2d"] .scene-pane {
  display:none
}
body[data-view="2d"] .uv-pane {
  width:100%;
  align-items:center;
  overflow:auto
}
body[data-view="2d"] .uv-header {
  width:100%
}
body[data-view="2d"] .uv-texture-wrap {
  height:calc(100% - 73px);
  width:auto;
  aspect-ratio:1;
  margin-top:8px
}
body[data-view="2d"] .uv-ruler,body[data-view="2d"] .uv-info {
  display:none
}
.drop-target {
  outline:2px solid var(--accent);
  outline-offset:-2px
}
.dirty-state {
  color:#d6be84!important
}

/* Neutral chrome keeps the oxidized specimen, not the frame, as the focal point. */
.topbar,.menubar,.brushbar,.viewport-toolbar,.toolrail,.inspector,.asset-shelf,.shelf-header,.layer-blending,.panel-heading,.layer-actions,.properties-content,.inspector-footer,.statusbar {
  filter:none
}
.uv-pane {
  background:#202624
}
.inspector {
  background:#232826
}
.asset-shelf {
  background:#202522
}
.layer.selected {
  background:#b6cb9620
}
.asset-tile {
  background:#293029;
  border-color:#3f493c
}
.asset-preview {
  background:radial-gradient(ellipse,#46504244,#22281f66)
}
.properties-content {
  background:#232826
}
.asset-categories {
  background:#202622
}
.statusbar {
  background:#1a211b
}

@media(min-width:1700px) {
  .uv-pane {
  width:295px
}
.asset-shelf {
  height:217px
}
.shelf-body {
  height:174px
}
.asset-tile {
  width:112px
}
.asset-preview {
  height:96px
}
.asset-preview canvas {
  width:94px;
  height:94px
}
.asset-tile b {
  font-size:10px
}
.asset-tile small {
  font-size:8px
}
.layer {
  height:54px
}
.model-caption h1 {
  font-size:32px
}

}

@media(max-width:1250px) {
  :root {
  --inspector-width:278px
}
.uv-pane {
  width:215px
}
.hardness-control,.project-subtitle {
  display:none
}
.brushbar {
  gap:14px
}
.model-caption h1 {
  font-size:24px
}
.asset-categories {
  width:85px
}
.asset-tile {
  width:89px
}
.breadcrumbs {
  margin-left:20px
}
.uv-info {
  padding:17px 12px
}
.layer-name b {
  font-size:8px
}
.interaction-hint {
  font-size:7px
}

}

@media(max-width:1000px) {
  .uv-pane {
  display:none
}
body[data-view="2d"] .uv-pane {
  display:flex
}
.breadcrumbs,.save-state,.pressure-control {
  display:none
}
.asset-shelf {
  height:180px
}
.shelf-body {
  height:139px
}
.model-caption h1 {
  font-size:22px
}
.model-caption {
  left:20px
}
.shelf-tabs {
  gap:11px
}
.asset-search {
  display:none
}
.brushbar {
  gap:12px
}
.inline-control input {
  width:55px
}
.compact-button span {
  display:none
}
.interaction-hint {
  top:54px
}
.brand strong {
  font-size:16px
}
.version {
  display:none
}
.project-title {
  font-size:10px
}
.asset-preview {
  height:73px
}
.asset-preview canvas {
  width:72px;
  height:72px
}

}

@media(max-width:760px) {
  :root {
  --inspector-width:230px
}
.workspace {
  grid-template-columns:42px minmax(0,1fr) 4px var(--inspector-width)
}
.topbar {
  gap:8px;
  padding:0 10px;
  height:51px
}
.brand strong {
  display:none
}
.top-divider {
  display:none
}
.command-button {
  display:none
}
.topbar .primary {
  font-size:10px;
  padding:7px
}
.brushbar {
  height:44px;
  padding:0 10px;
  gap:10px
}
.brush-preset {
  min-width:80px;
  width:90px
}
.brush-preset button {
  font-size:9px
}
.inline-control {
  gap:5px
}
.inline-control input {
  width:40px
}
.hardness-control,.toolbar-divider,#symmetry,.brushbar>.top-spacer,.brushbar>#redo {
  display:none
}
.toolrail {
  gap:5px
}
.tool {
  width:30px;
  height:31px
}
.view-tabs button {
  padding:4px;
  min-width:22px
}
.viewport-toolbar {
  padding:0 6px;
  gap:3px
}
.viewport-toolbar>svg,.viewport-divider {
  display:none
}
.viewport-toolbar select {
  max-width:86px;
  font-size:8px;
  padding-right:8px
}
.model-caption {
  display:none
}
.scene-footer>span:last-child {
  display:none
}
.view-label {
  left:10px;
  font-size:7px;
  letter-spacing:.8px
}
.view-label button {
  font-size:6px
}
.view-actions {
  right:6px;
  gap:2px
}
.glass-btn {
  width:24px;
  height:24px
}
.interaction-hint {
  display:none
}
.asset-categories {
  display:none
}
.shelf-tabs {
  gap:10px
}
.shelf-tabs button {
  font-size:9px
}
.shelf-tabs span {
  display:none
}
.asset-import {
  font-size:0;
  gap:0
}
.layer {
  gap:6px;
  padding-left:5px;
  padding-right:6px
}
.layer-name span {
  font-size:6px
}
.layer-thumb {
  width:24px;
  height:27px
}
.layer-opacity {
  display:none
}
.layer-blending {
  gap:5px;
  padding:0 7px
}
.layer-blending select {
  width:77px
}
.layer-actions>span {
  display:none
}
.properties-content {
  padding:10px
}
.property-row {
  font-size:8px
}
.channel-toggles {
  gap:3px
}
.channel-toggles label {
  padding:4px;
  font-size:7px
}
.inspector-footer {
  font-size:7px
}
.statusbar {
  gap:8px;
  font-size:7px
}
.statusbar>span:last-child {
  display:none
}
.menus {
  gap:0
}
.menus button {
  font-size:10px;
  padding:0 6px
}
.menubar {
  padding:0 7px
}
.backend-badge {
  font-size:7px
}

}

@media(max-width:520px) {
  :root {
  --inspector-width:180px
}
.project-title {
  font-size:9px
}
.project-title>svg {
  display:none
}
.brand-mark {
  width:26px;
  height:28px;
  font-size:26px
}
.primary {
  gap:4px
}
.topbar #help {
  display:none
}
.brush-preset {
  display:none
}
.view-tabs button {
  font-size:8px
}
.viewport-toolbar #environment,.viewport-toolbar #wireframe {
  display:none
}
.layer-name b {
  font-size:7px
}
.layer-thumb {
  display:none
}
.layer-blending label {
  font-size:7px
}
.layer-blending select {
  width:65px;
  font-size:8px
}
.layer-blending input {
  width:30px
}
.panel-heading {
  padding:0 8px;
  gap:4px
}
.panel-heading h2 {
  font-size:10px
}
.layer-actions .icon-btn {
  width:22px
}
.properties-content {
  padding:10px 8px
}
.channel-toggles label {
  padding:4px 2px;
  font-size:6px
}
.property-row select {
  max-width:99px;
  font-size:8px
}
.property-title {
  font-size:8px
}
.property-title small {
  display:none
}
.property-note {
  font-size:7px
}
.asset-tile {
  width:83px
}
.asset-shelf {
  height:165px
}
.shelf-body {
  height:123px
}
.asset-preview {
  height:62px
}
.asset-preview canvas {
  width:61px;
  height:61px
}
.shelf-tabs {
  gap:8px
}
.shelf-tabs button {
  font-size:8px
}
.statusbar #status-render,.statusbar #status-size,.statusbar .status-divider {
  display:none
}
.inspector-footer {
  font-size:6px
}
.layers-panel {
  max-height:40%
}
.uv-texture-wrap {
  min-width:100px
}
.help-grid {
  grid-template-columns:1fr
}

}