/* A fixed preview and a fixed workspace. Tool changes never resize either. */
#ambient-controls { display:none!important; }
.bulb-study .stage .scene-ambient {
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:4;
  display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;
  border:1px solid #ffffff24;border-radius:50%;background:#181a1fc9;color:#bcc2cd;
  backdrop-filter:blur(12px);box-shadow:0 3px 12px #0003;cursor:pointer;
}
.bulb-study .scene-ambient svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
.bulb-study .stage .scene-ambient[aria-checked=true] { color:#f4d393;background:#383426e8;border-color:#e7cb8655; }
.bulb-study .stage .scene-ambient:focus-visible { outline:2px solid #f2cf94;outline-offset:2px; }
#room-walk-toggle,#game-settings-toggle,#game-settings-mobile-toggle  {
  display:none!important;
}
body[data-room-walk=true] #bulb-viewer canvas:focus  {
  outline:none;
}
body[data-tree-editor-open=true] .game-hud  {
  visibility:hidden;
}
body[data-tree-editor-open=true] .stage-hint  {
  display:none;
}
body[data-tree-editor-open=true] .bulb-study  {
  --game-safe-top:10px;
  --game-safe-bottom:10px;
  --game-safe-left:12px;
  --game-safe-right:12px;
}
.bulb-study .tree-editor-shell  {
  --editor-header:0px;
  --editor-workspace:calc(176px + env(safe-area-inset-bottom));
  position:fixed;
  inset:0;
  z-index:70;
  display:block;
  overflow:hidden;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:#181a1f;
  color:#e7e9ef;
}
.tree-editor-shell[hidden],.tree-editor-shell [hidden],.tree-editor-shell [data-fixed-setting]  {
  display:none!important;
}
.bulb-study .tree-editor-shell .stage  {
  position:absolute;
  inset:var(--editor-header) 0 var(--editor-workspace);
  width:auto;
  height:auto;
  min-height:0;
  border:0;
  border-radius:0;
}
.tree-editor-shell .editor-back {
  position:absolute;
  top:calc(12px + env(safe-area-inset-top));
  left:12px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-height:44px;
  padding:8px;
  border:1px solid #ffffff24;
  border-radius:50%;
  background:#181a1fc9;
  backdrop-filter:blur(12px);
  box-shadow:0 3px 12px #0003;
  color:#e7e9ef;
  cursor:pointer;
}
.editor-back svg  {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#tree-editor-dock  {
  position:absolute;
  inset:auto 0 0;
  height:var(--editor-workspace);
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #ffffff15;
  background:#25282e;
}
#object-tool-nav  {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
}
#object-tool-nav button  {
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-height:44px;
  padding:10px;
  border:1px solid transparent;
  border-radius:12px;
  background:none;
  color:#989fab;
  cursor:pointer;
}
#object-tool-nav svg  {
  width:22px;
  height:22px;
  stroke-width:1.6;
}
#object-tool-nav button[aria-pressed=true]  {
  color:#ecd7ad;
  border-color:#e8d1a033;
  background:#e8d1a00c;
}
#object-tool-nav button[aria-pressed=true]::before  {
  content:'';
  position:absolute;
  left:-8px;
  width:2px;
  height:18px;
  border-radius:2px;
  background:#e8d1a0;
}
#object-tool-nav button:focus-visible  {
  outline:2px solid #f2cf94;
  outline-offset:1px;
}
.tree-editor-shell[data-object=floorLamp] #tree-editor-dock  {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.tree-editor-shell[data-object=floorLamp] #object-tool-nav  {
  display:none;
}
#object-tool-content  {
  position:relative;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
.bulb-study .tree-editor-shell #game-settings,.bulb-study .tree-editor-shell #bauble-editor,#tree-appearance,#fixture-editor,#hearth-design  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  transform:none;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.bulb-study .tree-editor-shell #game-settings  {
  display:block;
}
.tree-editor-shell .settings-topbar  {
  display:none;
}
.tree-editor-shell #game-settings .settings-content  {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  height:100%;
  padding:0;
  overflow:auto;
}
.tree-editor-shell .control-section  {
  margin:0;
  padding:0;
  border:0;
}
.bulb-study .tree-editor-shell .settings-content .control-section  {
  margin:0;
  padding:0;
  border:0;
}
.tree-editor-shell #ambient-controls h2,.tree-editor-shell .color-heading  {
  display:none;
}
.tree-editor-shell .brightness-control  {
  display:flex;
  justify-content:space-between;
  gap:8px;
  height:16px;
  margin:0;
  color:#c9cdd5;
  font-size:11px;
  line-height:16px;
}
.bulb-study .tree-editor-shell input[type=range].brightness-slider  {
  height:36px;
  margin:0;
  padding:0 12px;
  box-sizing:border-box;
}
.tree-editor-shell .bulb-colors  {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bulb-study .tree-editor-shell .color-buttons  {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
  gap:0;
}
.bulb-study .tree-editor-shell .color-buttons button  {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:100%;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
}
.bulb-study .tree-editor-shell .color-buttons button span  {
  width:min(26px,calc(100% - 12px));
  height:auto;
  aspect-ratio:1;
  border:1px solid #ffffff30;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:none;
}
.bulb-study .tree-editor-shell .color-buttons button[aria-pressed=true]  {
  background:none;
}
.bulb-study .tree-editor-shell .color-buttons button[aria-pressed=true] span  {
  outline:none;
}
.bulb-study .tree-editor-shell .color-buttons button[aria-pressed=true]::before {
  content:'';
  position:absolute;
  width:min(34px,calc(100% - 4px));
  aspect-ratio:1;
  border:1px solid #e8d1a0;
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:none;
}
.bulb-study .tree-editor-shell .color-buttons button:focus-visible {
  outline-offset:-3px;
}
.bulb-study .tree-editor-shell .color-buttons button[aria-pressed=true]::after  {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#171a20c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9 2.5 2.5L13 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  color:#fff;
  font-size:13px;
  line-height:1;
  text-shadow:none;
}
.tree-editor-shell .color-name,.tree-editor-shell .palette-hint  {
  display:none;
}
.bulb-study .tree-editor-shell .color-buttons button:active span {
  transform:scale(.88);
}
.bulb-study .tree-editor-shell #bauble-editor  {
  display:none;
  align-items:center;
  gap:8px;
  overflow:auto;
}
.tree-editor-shell[data-tool=ornaments] #bauble-editor:not([hidden])  {
  display:grid;
  grid-template-rows:minmax(0,1fr) 36px;
  gap:8px;
}
.tree-editor-shell #bauble-editor .editor-heading,.tree-editor-shell #bauble-editor .dock-feedback,.tree-editor-shell #bauble-editor .editor-tool-row  {
  display:none;
}
.tree-editor-shell #bauble-editor .ornament-types  {
  grid-row:1;
  display:flex;
  align-items:center;
  align-self:center;
  justify-content:center;
  gap:12px;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.bulb-study .tree-editor-shell .ornament-types button  {
  flex:1;
  max-width:112px;
  min-width:0;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:10px;
  border:1px solid transparent;
  border-radius:14px;
  background:#ffffff04;
  color:#e7e9ef;
  font:inherit;
  font-size:12px;
}
.bulb-study .tree-editor-shell .ornament-types button[aria-pressed=true]  {
  border-color:#e8d1a0;
  background:#e8d1a010;
}
.tree-editor-shell .ornament-types img  {
  width:48px;
  height:48px;
  border-radius:6px;
}
#ornament-action-bar {
  grid-row:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  width:100%;
  height:36px;
}
#ornament-cancel-slot { justify-self:end; }
#ornament-action-bar .tool-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:34px;
  min-height:34px;
  padding:6px 9px;
  border:0;
  border-radius:8px;
  background:none;
  color:#d5d9e2;
  font:inherit;
  font-size:11px;
}
#ornament-action-bar .tool-button svg { width:18px;height:18px; }
#ornament-action-bar .tool-button:disabled { opacity:.28; }
#ornament-action-bar #edit-add { visibility:hidden;pointer-events:none; }
#bauble-editor[data-mode=add] #ornament-action-bar #edit-add { visibility:visible;pointer-events:auto; }
#ornament-action-bar #edit-add svg { transform:rotate(45deg); }
.tree-editor-shell #bauble-editor .editor-actions  {
  grid-row:1;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.bulb-study .tree-editor-shell .editor-actions .tool-button  {
  flex:1;
  max-width:110px;
  min-height:64px;
  height:64px;
}
#tree-appearance  {
  display:flex;
  align-items:center;
}
#tree-appearance #tree-tone-controls  {
  width:100%;
}
#tree-appearance h2  {
  display:none;
}
.bulb-study .tree-editor-shell #tree-appearance .color-buttons {
  grid-template-columns:repeat(3,minmax(44px,1fr));
  width:100%;
  max-width:264px;
  margin-inline:auto;
  gap:0;
}
.bulb-study .tree-editor-shell #tree-appearance button span {
  --swatch:var(--tree-swatch);
}
#fixture-editor .angle-buttons button {
  min-width:0;
  min-height:36px;
  padding:8px;
  border:1px solid #ffffff24;
  border-radius:9px;
  background:#ffffff05;
  color:#e7e9ef;
  font:inherit;
  font-size:12px;
}
#fixture-editor .angle-buttons button[aria-pressed=true] {
  border-color:#e8d1a0;
  background:#e8d1a010;
}
#fixture-editor  {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
#fixture-editor h2  {
  display:none;
}
#fixture-light-controls>section  {
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  grid-template-rows:16px 36px;
  column-gap:12px;
}
#fixture-light-controls .room-light-heading  {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin:0;
  gap:0;
  min-width:0;
}
#fixture-light-controls .room-light-toggle  {
  width:52px;
  min-width:0;
  min-height:36px;
  padding:6px;
  font-size:11px;
}
#fixture-light-controls label  {
  grid-column:1;
  grid-row:1;
}
#fixture-light-controls input  {
  grid-column:1;
  grid-row:2;
}
#fixture-editor .angle-buttons  {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#fixture-editor .angle-buttons button  {
  height:32px;
  min-height:32px;
  padding:5px;
  font-size:11px;
}
#edit-region-legend { display:none!important; }
@media(min-width:900px),(min-width:640px) and (max-height:520px) {
  .bulb-study .tree-editor-shell  {
    --editor-inspector:280px;
  }
  .bulb-study .tree-editor-shell .stage  {
    inset:var(--editor-header) var(--editor-inspector) 0 0;
  }
  #tree-editor-dock  {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:48px minmax(0,1fr);
    gap:12px;
    inset:var(--editor-header) 0 0 auto;
    width:var(--editor-inspector);
    height:auto;
    border-top:0;
    border-left:1px solid #ffffff15;
  }
  #object-tool-nav  {
    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
  }
  #object-tool-nav button[aria-pressed=true]::before  {
    left:12px;
    bottom:-6px;
    width:18px;
    height:2px;
  }
  .bulb-study .tree-editor-shell .color-buttons  {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
  }
  .tree-editor-shell #game-settings .settings-content  {
    gap:16px;
    padding-top:12px;
  }
  .tree-editor-shell .bulb-colors  {
    gap:12px;
  }
  #fixture-editor  {
    justify-content:flex-start;
    gap:18px;
    padding-top:12px;
  }
  .bulb-study .tree-editor-shell #bauble-editor,#tree-appearance  {
    align-items:flex-start;
    padding-top:12px;
  }
  .tree-editor-shell #bauble-editor .ornament-types  {
    flex-direction:column;
    align-items:stretch;
    align-self:flex-start;
  }
}
.tree-editor-shell .brightness-slider::-webkit-slider-thumb  {
  width:20px;
  height:20px;
  margin-top:-8px;
}

.tree-editor-shell button { transition:background-color 140ms,color 140ms,border-color 140ms,filter 140ms; }
.tree-editor-shell button:active:not(:disabled) { filter:brightness(1.18); }
.tree-editor-shell .ornament-types button:active { transform:scale(.96); }
.tree-editor-shell #bauble-editor .ornament-types { min-width:0;width:100%; }
@media(prefers-reduced-motion:reduce) {
  .tree-editor-shell button { transition:none; }
  .tree-editor-shell .ornament-types button:active { transform:none; }
}

.placement-aim,.placement-rejection,.placement-spark {
  position:absolute;z-index:6;pointer-events:none;
  width:28px;height:28px;transform:translate(-50%,-50%);
  border-radius:50%;box-sizing:border-box;
}
.placement-aim[hidden] { display:none; }
.placement-aim[data-state=ready] {
  width:18px;height:18px;border:1px solid #f4d99bbb;
  box-shadow:0 0 0 3px #16171166,0 0 12px #efd4a033;
}
.placement-aim[data-state=ready]::after {
  content:'';position:absolute;inset:5px;border-radius:50%;background:#ffe6ad;
}
.placement-aim[data-state=blocked],.placement-rejection {
  width:26px;height:26px;border:1.5px solid #e9c6b9;background:#24231fbb;
  box-shadow:0 0 0 3px #10100f55;
}
.placement-aim[data-state=blocked]::after,.placement-rejection::after {
  content:'';position:absolute;width:20px;height:1.5px;left:1.5px;top:11px;
  transform:rotate(-45deg);background:#e9c6b9;
}
.placement-spark { width:36px;height:36px; }
.placement-spark i {
  position:absolute;left:17px;top:16px;width:2px;height:7px;border-radius:2px;
  transform:rotate(var(--ray)) translateY(-16px);background:#ffe6ad;
  box-shadow:0 0 6px #ffdc8866;
}
@keyframes editor-tool-enter { from { opacity:.5; } to { opacity:1; } }
.tree-editor-shell #object-tool-content > :not([hidden]) { animation:editor-tool-enter 140ms ease-out; }
@media(prefers-reduced-motion:reduce) {
  .tree-editor-shell #object-tool-content > :not([hidden]) { animation:none; }
}

.bulb-study .tree-editor-shell #bauble-editor {
  overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  padding-bottom:2px;
}
#ornament-action-bar .tool-button { white-space:nowrap;width:auto;flex-direction:row;flex-wrap:nowrap;line-height:16px; }

/* Type/selection actions share one row; the eight colours keep full touch targets. */
.bulb-study .tree-editor-shell[data-tool=ornaments] #bauble-editor:not([hidden]) {
  grid-template-columns:minmax(0,1fr) 88px;
  grid-template-rows:44px minmax(88px,1fr);
  column-gap:4px;
  row-gap:8px;
  align-content:start;
  align-items:start;
  padding:0 0 2px;
}
.tree-editor-shell #bauble-editor .ornament-types {
  grid-column:1;
  grid-row:1;
  flex-direction:row;
  align-self:start;
  gap:2px;
  height:44px;
}
.bulb-study .tree-editor-shell .ornament-types button {
  flex:1;
  max-width:none;
  min-width:44px;
  min-height:44px;
  height:44px;
  flex-direction:row;
  gap:2px;
  padding:2px;
  border-radius:10px;
  font-size:14px;
  white-space:nowrap;
}
.tree-editor-shell .ornament-types img { width:20px;height:20px;flex:none; }
.tree-editor-shell #bauble-editor .editor-actions {
  grid-column:1;
  grid-row:1;
  gap:2px;
  height:44px;
  align-self:start;
}
.bulb-study .tree-editor-shell #bauble-editor .editor-actions .tool-button {
  min-width:44px;
  min-height:44px;
  height:44px;
  padding:0;
  flex-direction:row;
  gap:0;
}
.tree-editor-shell #ornament-action-bar {
  grid-column:2;
  grid-row:1;
  grid-template-columns:44px 44px;
  height:44px;
  align-self:start;
}
.tree-editor-shell #ornament-action-bar .tool-button {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  gap:0;
}
.tree-editor-shell #ornament-action-bar .tool-button>span,
.tree-editor-shell #bauble-editor .editor-actions .tool-button>span { display:none; }
.tree-editor-shell #bauble-editor .editor-actions .tool-button svg { width:20px;height:20px; }
.tree-editor-shell .ornament-color-buttons {
  grid-column:1/-1;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(4,44px);
  grid-template-rows:repeat(2,44px);
  justify-content:space-between;
  align-self:start;
  width:100%;
  max-width:248px;
  margin-inline:auto;
  gap:0;
}
.bulb-study .tree-editor-shell .ornament-color-buttons button {
  display:grid;
  position:relative;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:6px;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.tree-editor-shell .ornament-color-buttons button>span {
  display:block;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ornament-color);
  box-shadow:inset 0 0 0 1px #ffffff35;
}
.tree-editor-shell .ornament-color-buttons button[aria-pressed=true]::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:#171a20c9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9 2.5 2.5L13 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.tree-editor-shell .ornament-color-buttons button:focus-visible {
  outline:2px solid #b9c9f0;
  outline-offset:-3px;
}
.tree-editor-shell .ornament-color-buttons button:active>span { transform:scale(.9); }

@keyframes inspector-reveal { from { opacity:.35; } to { opacity:1; } }
.tree-editor-shell:not([hidden]) .stage { animation:inspector-reveal 180ms ease-out; }
@media(prefers-reduced-motion:reduce) {
  .tree-editor-shell:not([hidden]) .stage { animation:none; }
}
#hearth-design { display:flex;flex-direction:column;justify-content:center;gap:8px; }
.hearth-styles { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.hearth-styles button { min-height:40px;padding:6px 12px;border:1px solid #ffffff20;border-radius:11px;background:transparent;color:#bcc2cd;cursor:pointer; }
.hearth-styles button[aria-pressed=true] { background:#eadab51a;color:#f1dfba;border-color:#d8bc7d99; }
.hearth-palette-row { display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:6px; }
.hearth-palette-row>span { font-size:12px;color:#b8bec9; }
.bulb-study .tree-editor-shell #hearth-design .color-buttons { grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:240px; }
@media(min-width:900px) {
  #hearth-design { justify-content:flex-start;gap:18px;padding-top:12px; }
}

/* The same small colour texture as the shelf, without a second thumbnail. */
button[data-hearth-mantel="marble"] span { background:#eceef0 url("../assets/concepts/hearth-pbr/marble-128.jpg") center/cover!important; }

.bulb-study .stage .scene-room-design {
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:68px;z-index:4;
  display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #ffffff25;border-radius:50%;
  color:#e4e7ef;background:#232630d9;backdrop-filter:blur(12px);cursor:pointer;
}
.scene-room-design svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round; }
.scene-room-design:disabled { opacity:.4;cursor:wait; }
body[data-tree-editor-open=true] .scene-room-design,body[data-room-editor-open=true] #room-walk-controls { display:none!important; }
.tree-editor-shell[data-object=room] { --editor-workspace:264px; }
.tree-editor-shell[data-object=room] #tree-editor-dock { display:block;padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
.tree-editor-shell[data-object=room] #object-tool-content { height:100%;overflow:hidden; }
.tree-editor-shell[data-object=room] #room-design { display:flex;flex-direction:column;height:100%;gap:12px;min-width:0; }
.room-finish-tabs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;flex:none;padding:3px;border-radius:13px;background:#181b22; }
.room-finish-tabs button { min-width:0;min-height:44px;border:0;border-radius:10px;background:transparent;color:#aeb7c8;font:inherit;font-size:14px;cursor:pointer; }
.room-finish-tabs button[aria-pressed=true] { background:#424b60;color:#fff;box-shadow:0 2px 5px #0003; }
.room-finish-content { overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#586174 transparent;padding:2px 4px 10px;overscroll-behavior:contain; }
.room-finish-content section { display:flex;flex-direction:column;gap:14px; }
.room-finish-row { display:flex;flex-direction:column;gap:8px;min-width:0; }
.room-finish-row h3 { font-size:14px;line-height:20px;color:#c5ccd7;font-weight:500;margin:0; }
.room-finish-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.room-finish-options button { min-width:0;min-height:44px;padding:7px 5px;border:1px solid #ffffff24;border-radius:11px;background:#2c303a;color:#c8cfdc;font:inherit;font-size:14px;cursor:pointer; }
.room-finish-options button[aria-pressed=true] { color:#fff;border-color:#abbadb;background:#404a60; }
.room-finish-colors { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding:2px;max-width:300px; }
.room-finish-colors button { display:grid;place-items:center;position:relative;width:44px;height:44px;min-height:44px;padding:5px;border:2px solid transparent;border-radius:50%;background:transparent;cursor:pointer; }
.room-finish-colors button>span { width:30px;height:30px;border-radius:50%;background:var(--finish-color);box-shadow:inset 0 0 0 1px #ffffff20; }
.room-finish-colors button[aria-pressed=true] { border-color:#dae2f6; }
.room-finish-colors button[aria-pressed=true]::after { content:'';position:absolute;width:10px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg);top:16px;left:15px;filter:drop-shadow(0 1px 2px #000); }
#room-design button:focus-visible,.scene-room-design:focus-visible { outline:2px solid #b9c9f0;outline-offset:2px; }
.room-save-status { font-size:14px;color:#ffb2ba;margin:0; }
@media(min-width:900px) {
  .tree-editor-shell[data-object=room] #tree-editor-dock { width:320px; }
  .tree-editor-shell[data-object=room] .stage { right:320px; }
  .room-finish-content section { gap:24px; }
}

/* The six-type chooser and colour palette occupy the same fixed second row. */
.tree-editor-shell #bauble-editor .ornament-types {
  grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,44px);gap:4px;height:92px;align-content:start;
}
.bulb-study .tree-editor-shell .ornament-types button {
  width:100%;min-width:0;max-width:none;padding-inline:2px;
}
.tree-editor-shell #bauble-editor .ornament-type-toggle {
  grid-column:1;grid-row:1;display:flex;align-items:center;gap:6px;
  height:44px;min-height:44px;min-width:0;max-width:100%;padding:4px 6px;
  background:transparent;border:1px solid #ffffff20;border-radius:10px;
  color:inherit;font:inherit;font-size:14px;white-space:nowrap;
}
.ornament-type-toggle img { width:24px;height:24px;object-fit:contain;flex:none; }
.ornament-type-toggle svg { width:16px;height:16px;flex:none;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8; }

body[data-outdoor-tree="true"] .bulb-study .tree-editor-shell .stage {
  inset: 0;
}
#outdoor-tree-controls:not([hidden]) {
  position: absolute;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  translate: -50% 0;
  pointer-events: none;
  transition: opacity .32s ease, visibility 0s;
}
#outdoor-tree-controls[data-idle] {
  opacity: 0;
  visibility: hidden;
  transition: opacity .52s ease, visibility 0s .52s;
}
.bulb-study #outdoor-tree-controls[data-idle] button { pointer-events: none; }

.bulb-study :is(#outdoor-tree-controls button, #outdoor-export-menu button, #outdoor-export-make, #outdoor-export-cancel, #outdoor-export-download, #outdoor-share-dialog button) {
  border: 0;
  color: var(--button-ink,#fff1ce);
  background: var(--button-face,linear-gradient(170deg,#467165,#294d45 66%,#23423c)) var(--button-color,#30544b);
  box-shadow: 0 5px 0 var(--button-edge,#142d29), 0 8px 14px #080f1780, inset 0 1px 0 var(--button-shine,#f8ffda42);
  transition: translate .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .bulb-study :is(#outdoor-tree-controls button, #outdoor-export-menu button, #outdoor-export-make, #outdoor-export-cancel, #outdoor-export-download, #outdoor-share-dialog button):hover:not(:disabled) { filter: brightness(1.12); }
}
.bulb-study :is(#outdoor-tree-controls button, #outdoor-export-menu button, #outdoor-export-make, #outdoor-export-cancel, #outdoor-export-download, #outdoor-share-dialog button):active:not(:disabled) {
  translate: 0 4px;
  box-shadow: 0 1px 0 var(--button-edge,#142d29), 0 3px 5px #080f1766, inset 0 1px 0 var(--button-shine,#f8ffda42);
  filter: brightness(.94);
  transition-duration: .07s;
}
.bulb-study :is(#outdoor-tree-random, #outdoor-export-make, #outdoor-export-download) {
  --button-face: linear-gradient(155deg,#fff4d5 10%,#f1d297 72%,#e6bc7e);
  --button-edge: #9b6647;
  --button-shine: #fff7dc;
  --button-ink: #542c36;
  --button-color: #efcf95;
}
.bulb-study #outdoor-tree-controls button {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  pointer-events: auto;
  border-radius: 50%;
}
.bulb-study #outdoor-tree-random { width: 76px; height: 76px; min-height: 76px; }
.bulb-study #outdoor-tree-random[aria-busy="true"] {
  opacity: 1;
  animation: outdoor-shuffle-press .36s ease-out;
}
@keyframes outdoor-shuffle-press {
  0%, 54% {
    translate: 0 7px;
    box-shadow: 0 0 0 var(--button-edge), 0 2px 5px #080f1780, inset 0 1px 0 var(--button-shine);
    filter: brightness(.91);
  }
  83% { translate: 0 -1px; }
  100% { translate: 0 0; }
}
.bulb-study #outdoor-tree-random:disabled { cursor: default; }
.bulb-study #outdoor-tree-controls button:focus-visible { outline: 2px solid #fff4d8; outline-offset: 4px; }
#outdoor-tree-random svg { width: 37px; height: 37px; }
#outdoor-tree-random path, #outdoor-sound-toggle path, #outdoor-tree-share path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#outdoor-tree-random .outdoor-wand-star { fill: #f6ce76; }
#outdoor-tree-random .outdoor-wand-glints { stroke: #9b5728; }
.bulb-study #outdoor-sound-toggle, .bulb-study #outdoor-tree-share { width: 46px; height: 46px; min-height: 46px; }
#outdoor-sound-toggle svg, #outdoor-tree-share svg { width: 23px; height: 23px; }
#outdoor-sound-toggle[aria-pressed="true"] .outdoor-sound-muted,
#outdoor-sound-toggle[aria-pressed="false"] .outdoor-sound-waves { display: none; }

#outdoor-share-dialog, #outdoor-export-dialog {
  box-sizing: border-box;
  width: min(372px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 15px 18px 23px;
  border: 1px solid #ad9d6c80;
  border-radius: 24px;
  color: #fff2d5;
  background: radial-gradient(ellipse at 50% 0%,#355650 0%,#233d3c 45%,#1a3032 100%) #233d3c;
  box-shadow: inset 0 1px 0 #efe3ae38, inset 0 -3px 0 #0c1b21a6, 0 12px 0 -5px #0e1d23, 0 21px 55px #070c15c2;
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
}
#outdoor-share-dialog::backdrop, #outdoor-export-dialog::backdrop { background: #0b142088; }
#outdoor-share-title { display: block; font-size: 17px; font-weight: 680; }
#outdoor-share-link {
  width: 100%;
  margin: 12px 0;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  background: #142b2e;
  color: inherit;
  font: inherit;
}
#outdoor-share-dialog form { text-align: right; }
.outdoor-export-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: 12px;
}
.outdoor-export-heading h2 {
  grid-column: 2;
  margin: 0;
  outline: 0;
  font-size: 21px;
  font-weight: 720;
  text-align: center;
  text-shadow: 0 2px 0 #0b2524;
}
#outdoor-export-back { grid-column: 1; grid-row: 1; }
#outdoor-export-close { grid-column: 3; grid-row: 1; }
.bulb-study :is(#outdoor-export-dialog button, #outdoor-export-download, #outdoor-share-dialog button) {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 690;
  text-align: center;
}
.bulb-study :is(#outdoor-export-dialog, #outdoor-share-dialog) :is(button, a, input):focus-visible { outline: 2px solid #ffe2a3; outline-offset: 3px; }
.bulb-study #outdoor-export-dialog :is(.outdoor-export-heading button, #outdoor-export-share-file) {
  display: grid;
  width: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6e6bd;
  transition: background-color .15s, translate .15s;
}
.bulb-study #outdoor-export-dialog :is(.outdoor-export-heading button, #outdoor-export-share-file):hover { background-color: #efd5a521; }
.bulb-study #outdoor-export-dialog :is(.outdoor-export-heading button, #outdoor-export-share-file):active { translate: 0 2px; background-color: #0b2527a1; }
.outdoor-export-heading svg { width: 20px; }
#outdoor-export-dialog svg { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
#outdoor-export-menu { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.bulb-study #outdoor-export-dialog #outdoor-export-menu button {
  display: grid;
  grid-column: span 2;
  min-height: 83px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 6px 2px;
}
.bulb-study #outdoor-export-dialog #outdoor-export-menu button:nth-child(n+4) { grid-column: span 3; }
#outdoor-export-menu svg { width: 25px; height: 25px; color: #f5d78e; }
#snow-privacy-link { grid-column: 1 / -1; justify-self: end; padding: 6px 2px; color: inherit; font-size: 14px; text-underline-offset: 3px; }
#outdoor-export-editor { display: grid; gap: 9px; }
#outdoor-export-favorites-panel { display: grid; gap: 9px; }
#outdoor-export-favorite-list {
  display: grid;
  gap: 7px;
  max-height: min(320px, 42dvh);
  overflow: auto;
  margin: 0;
  padding: 2px 3px;
  list-style: none;
}
#outdoor-export-favorite-list:empty { display: none; }
#outdoor-export-favorite-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.bulb-study #outdoor-export-dialog .outdoor-favorite-open { display: flex; align-items: center; gap: 8px; text-align: start; }
.outdoor-favorite-swatches { display: flex; align-items: center; flex: none; }
.outdoor-favorite-swatches span { width: 12px; height: 12px; border: 1px solid #f5d78e73; border-radius: 50%; }
.outdoor-favorite-swatches span + span { margin-inline-start: -3px; }
#outdoor-export-favorite-status { margin: 0; color: #e9dab7; font-size: 13px; text-align: center; }
#outdoor-export-favorite-status:empty { display: none; }
.outdoor-export-preview {
  position: relative;
  display: grid;
  width: min(100%, 216px, 27dvh);
  aspect-ratio: 9 / 16;
  justify-self: center;
  place-items: center;
  margin: 0 0 5px;
  overflow: hidden;
  border-radius: 13px;
  background: #10272e;
  box-shadow: 0 0 0 3px #122a2f, 0 1px 0 4px #f4d8922b;
  color: #eadbb7;
  font-size: 12px;
}
.outdoor-export-preview :is(img, video, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.outdoor-export-preview iframe { opacity: 0; pointer-events: none; }
.bulb-study #outdoor-export-dialog #outdoor-export-gif-play {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #213e3cf5;
  color: #fff1ce;
  box-shadow: 0 3px 0 #101f26;
}
.bulb-study #outdoor-export-dialog #outdoor-export-gif-play:active { translate: 0 2px; box-shadow: 0 1px 0 #101f26; }
#outdoor-export-gif-play svg { width: 22px; }
#outdoor-export-gif-play[aria-pressed="false"] .outdoor-gif-pause,
#outdoor-export-gif-play[aria-pressed="true"] .outdoor-gif-play { display: none; }
#outdoor-export-progress { width: 100%; accent-color: #f3d7aa; }
#outdoor-export-status { margin: 0; color: #e9dab7; font-size: 13px; text-align: center; }
#outdoor-export-status:empty { margin-bottom: -9px; }
.outdoor-export-actions { display: flex; align-items: center; gap: 8px; }
.outdoor-export-actions svg { width: 18px; height: 18px; }
#outdoor-export-make, #outdoor-export-cancel, #outdoor-export-download { flex: 1; }
#outdoor-export-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
@media (max-height: 500px) {
  #outdoor-tree-controls:not([hidden]) { bottom: max(14px, env(safe-area-inset-bottom)); }
  .bulb-study #outdoor-tree-random { width: 62px; height: 62px; min-height: 62px; }
  #outdoor-tree-random svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bulb-study :is(#outdoor-tree-controls, #outdoor-tree-controls button, #outdoor-export-dialog button, #outdoor-export-download, #outdoor-share-dialog button) { transition: none; }
  .bulb-study #outdoor-tree-random[aria-busy="true"] { animation: none; filter: brightness(.87); }
}
.outdoor-tree-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  filter: drop-shadow(0 0 3px #e7f1ff);
  z-index: 2;
  will-change: transform, opacity;
}