/* A golden-hour valley, soft low-poly: creamy paper, lavender sky, teal tools and warm outlines. */
:root {
  --ink: #2d2342;
  --muted: #796d7c;
  --paper: #fff9ed;
  --cream: #f4eddd;
  --line: #6c5c6d;
  --teal: #3c8f85;
  --coral: #d78e79;
  --lavender: #d7c8e3;
  --shadow: 0 4px 0 #77627522;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  color-scheme: light;
  background: var(--cream);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  min-width: 48px;
  min-height: 48px;
  padding: 9px 14px;
  border: 1.5px solid #9a8c93;
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 2px 0 #77627522;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
}
button:hover:not(:disabled) {
  background: #f1eadb;
  border-color: var(--ink);
}
button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
button:disabled {
  opacity: 0.42;
  cursor: default;
}
button[aria-pressed='true'],
button.selected {
  background: #d6e8de;
  border-color: var(--teal);
  color: #285f57;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}
.primary {
  background: var(--teal);
  color: white;
  border-color: #316a62;
  box-shadow: 0 4px 0 #254f4333;
}
.primary:hover:not(:disabled) {
  background: #327e75;
  color: white;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3 {
  font-family: Fraunces, Georgia, serif;
}
h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}
h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 22px 0 12px;
}
[hidden] {
  display: none !important;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 6px;
}
input,
select {
  border: 1px solid #c2b9b7;
  border-radius: 10px;
  background: #fffcf6;
  min-height: 48px;
  padding: 10px 12px;
  min-width: 0;
}
input {
  -webkit-user-select: text;
  user-select: text;
}
input[type='search']::-webkit-search-cancel-button {
  cursor: pointer;
}
.icon-button {
  font-size: 24px;
  padding: 7px;
  width: 48px;
  flex-shrink: 0;
}
.home-screen {
  position: relative;
  width: 100%;
  height: 100%;
  padding: max(24px, var(--safe-t)) max(30px, var(--safe-r)) max(20px, var(--safe-b)) max(30px, var(--safe-l));
  isolation: isolate;
}
.title-landscape {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.title-landscape svg {
  width: 100%;
  height: 100%;
}
.shelf-link {
  position: absolute;
  top: max(24px, var(--safe-t));
  left: max(30px, var(--safe-l));
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 17px;
  border: 1px solid #9b8c9180;
  border-radius: 40px;
  min-height: 48px;
  background: #fff8e9a8;
  font-weight: 800;
  font-size: 19px;
}
.shelf-link span {
  font-size: 14px;
}
.home-settings {
  position: absolute;
  top: max(24px, var(--safe-t));
  right: max(30px, var(--safe-r));
  font-size: 22px;
  background: #fff8e9a8;
}
.welcome {
  max-width: 720px;
  margin: clamp(45px, 10vh, 130px) auto 0;
  text-align: center;
}
.welcome > .eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #695b6e;
}
h1 {
  font-size: clamp(70px, 11vh, 120px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 26px 0;
  position: relative;
}
h1 em {
  font-style: italic;
  color: #3b7367;
}
h1 > span {
  font-size: 0.44em;
  position: absolute;
  transform: rotate(18deg);
  margin-left: 5px;
  color: #c67f79;
  top: 49%;
}
.welcome-copy {
  font-size: 18px;
  color: #625566;
}
.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 12px;
}
.welcome-actions button {
  font-size: 16px;
  min-height: 58px;
  min-width: 145px;
}
.welcome-actions button span {
  font-size: 22px;
  margin-right: 7px;
}
.welcome-note {
  font-size: 12px;
  color: #655965;
}
.home-foot {
  position: absolute;
  bottom: max(20px, var(--safe-b));
  left: max(30px, var(--safe-l));
  right: max(30px, var(--safe-r));
  display: flex;
  justify-content: space-between;
  color: #38594b;
  font-size: 12px;
  font-weight: 700;
}
#editor {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  padding: 10px 18px;
  gap: 12px;
  background: var(--paper);
  border-bottom: 1.5px solid #a99b9e;
  z-index: 4;
}
.home-identity {
  width: 230px;
  min-width: 110px;
}
.brand-mini {
  display: block;
  font:
    12px Fraunces,
    Georgia,
    serif;
  color: var(--muted);
  padding-left: 7px;
}
.home-identity input {
  width: 100%;
  min-height: 32px;
  height: 34px;
  border: 1px solid transparent;
  padding: 2px 6px;
  font-weight: 800;
  font-size: 17px;
  background: transparent;
}
.home-identity input:hover,
.home-identity input:focus {
  border-color: #c2b9b7;
  background: white;
}
.view-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d1c6c5;
  border-radius: 17px;
  background: #eee7dd;
  margin-left: auto;
}
.view-switch button {
  min-width: 100px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-height: 44px;
  padding: 8px 15px;
}
.view-switch button[aria-pressed='true'] {
  background: var(--paper);
  border-color: #9e8b98;
  box-shadow: 0 2px 0 #77627518;
  color: var(--ink);
}
.view-switch span {
  font-size: 20px;
  margin-right: 5px;
}
/* Walk's button: two little footprints. */
.view-switch .walk-feet {
  width: 21px;
  height: 21px;
  margin-right: 5px;
  vertical-align: -4px;
  fill: currentColor;
}
/* Model view's 3D loads on first use: the button breathes while it does. */
.view-switch button[aria-busy='true'] {
  cursor: progress;
  animation: model-loading 0.9s ease-in-out infinite alternate;
}
@keyframes model-loading {
  to {
    opacity: 0.55;
  }
}
.history-buttons {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
#saveStatus {
  font-size: 11px;
  color: #568174;
  min-width: 72px;
  text-align: center;
}
.workspace {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 294px;
  min-height: 0;
  position: relative;
}
.tools {
  background: #f7f0e3;
  border-right: 1px solid #c2b5b6;
  padding: 13px 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 3;
}
.tools button {
  width: 62px;
  min-height: 62px;
  padding: 6px 3px;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}
.tools button:hover:not(:disabled) {
  background: #e8e5d7;
}
.tools button[aria-pressed='true'] {
  background: #dbe9dc;
  border-color: #7eaa95;
}
.tools button span {
  font-size: 25px;
  display: block;
  line-height: 1.1;
}
.tools small {
  font:
    800 10px Nunito,
    system-ui;
  display: block;
  margin-top: 5px;
}
.tool-gap {
  flex: 1;
  min-height: 4px;
}
.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e6e6d2;
}
#planCanvas,
#modelStage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#modelStage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.stage-label {
  line-height: 1.2;
  pointer-events: none;
  position: absolute;
  left: 22px;
  top: 20px;
  color: #657368;
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stage-label small {
  font-weight: 600;
  letter-spacing: 0;
  color: #819080;
  font-size: 10px;
}
.empty-hint {
  pointer-events: none;
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  width: min(85%, calc(100% - 180px));
  color: #78907d;
}
.empty-hint > span:first-child {
  font-size: 42px;
  color: #97aa8e;
}
.empty-hint strong {
  font:
    24px Fraunces,
    Georgia,
    serif;
  color: #627961;
}
.empty-hint > span:last-child {
  font-size: 12px;
}
.camera-controls {
  position: absolute;
  bottom: 18px;
  right: 18px;
  display: flex;
  gap: 6px;
}
.camera-controls button {
  font-size: 23px;
  padding: 4px;
  width: 48px;
  background: #fff9edeb;
}
/* Walk: who goes for a walk, four faces in a 2 x 2 block at the top left of the stage, where the
   floor switcher is in Plan and Model (the walker takes the stairs itself in Walk). */
.walker-picker {
  position: absolute;
  left: 18px;
  top: 62px;
  display: grid;
  grid-template-columns: 56px 56px;
  grid-auto-rows: 56px;
  gap: 6px;
  z-index: 1;
}
.walker-btn {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 4px;
  border-radius: 50%;
  background: #fff9edeb;
}
.walker-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}
.walker-btn[aria-checked='true'] {
  border-color: var(--teal, #329b91);
  box-shadow: 0 0 0 3px #329b9155;
  background: #fff9ed;
}
/* Walk's wardrobe: a coat hanger beside the faces (the third place along their top row) opens a
   card of outfit pictures over the faces, on the same 56 px grid, the hanger staying just where it
   was (the card leaves its cell empty). Seven across on an iPad; five across on a short phone, where
   the camera buttons step aside while it is open. */
.wardrobe-btn {
  position: absolute;
  left: 142px;
  top: 62px;
  z-index: 2;
}
.wardrobe-btn[aria-expanded='true'] {
  border-color: var(--teal, #329b91);
  box-shadow: 0 0 0 3px #329b9155;
  background: #fff9ed;
}
.wardrobe {
  position: absolute;
  left: 10px;
  top: 54px;
  z-index: 1;
  padding: 8px;
  border-radius: 26px;
  background: #fbf3e6f2;
  box-shadow:
    0 0 0 1.5px #e3d4bb,
    0 8px 22px #2d234226;
}
.outfit-list {
  display: grid;
  grid-template-columns: repeat(7, 56px);
  grid-auto-rows: 56px;
  gap: 6px;
}
@media (max-height: 550px), (max-width: 760px) {
  .outfit-list {
    grid-template-columns: repeat(5, 56px);
  }
  #stage[data-wardrobe='true'] .camera-controls {
    visibility: hidden;
  }
}
/* A new outfit on: a puff of stars in its colours bursts round the walker. Decoration only. */
.dress-puff {
  position: fixed;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.dress-puff span {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background: var(--paint);
  border: 2px solid #fff9ed;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: dress-puff 0.95s ease-out forwards;
}
@keyframes dress-puff {
  from {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(90deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dress-puff span {
    transform: translate(var(--dx), var(--dy));
  }
}
/* A pet patted in Walk: three soft hearts float up and fade. Decoration only, gone in a second. */
.heart-puff {
  position: fixed;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.heart-puff span {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  background: #e88a96;
  clip-path: path('M9 16.5C4 13 1 10 1 6.2 1 3.6 3 1.6 5.4 1.6 7 1.6 8.3 2.5 9 3.7 9.7 2.5 11 1.6 12.6 1.6 15 1.6 17 3.6 17 6.2 17 10 14 13 9 16.5Z');
  animation: heart-puff 1s ease-out forwards;
}
.heart-puff span:nth-child(2) {
  --dx: -22px;
  animation-delay: 0.12s;
  background: #f2b2bb;
}
.heart-puff span:nth-child(3) {
  --dx: 20px;
  animation-delay: 0.24s;
}
@keyframes heart-puff {
  from {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx, 0px), -46px) scale(1.15);
    opacity: 0;
  }
}
/* The floor switcher: little houses stacked like the floors they choose, top left of the stage,
   with ＋ above them and − beside an upper floor. The layer buttons peel floors off in Model, top
   right. Every button is a 56 px picture. */
.floor-switch {
  position: absolute;
  left: 18px;
  top: 62px;
  display: grid;
  grid-template-columns: 56px 56px;
  grid-auto-rows: 56px;
  gap: 6px;
  z-index: 1;
  pointer-events: none;
}
.floor-switch #floorList {
  display: contents;
}
.floor-switch button,
.layer-controls button {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 5px;
  background: #fff9edeb;
  border-radius: 14px;
}
.floor-switch button {
  grid-column: 1;
}
.floor-switch .floor-add {
  grid-row: 1;
}
.floor-switch .floor-remove {
  grid-column: 2;
}
.floor-switch svg,
.layer-controls svg {
  display: block;
  width: 100%;
  height: 100%;
}
.floor-switch svg *,
.layer-controls svg * {
  stroke: #6c5c6d;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.fs-roof {
  fill: #bc826b;
}
.fs-band {
  fill: #f4eddd;
}
.fs-on {
  fill: var(--teal);
}
.fs-new {
  fill: none;
  stroke-dasharray: 2.5 2;
}
.fs-sign {
  fill: none;
  stroke-width: 2.6 !important;
  stroke-linecap: round;
}
.fs-badge {
  fill: #f6dcd2;
}
/* The chosen floor always looks chosen: under a finger or the mouse (a tapped button stays
   hovered on an iPad, and the buttons are rebuilt under it), pressed or focused alike. Only the
   keyboard's focus ring (:focus-visible, above) is drawn round it too. */
.floor-btn[aria-checked='true'],
.floor-btn[aria-checked='true']:hover:not(:disabled),
.floor-btn[aria-checked='true']:active:not(:disabled),
.floor-btn[aria-checked='true']:focus:not(:focus-visible) {
  background: #d6e8de;
  border-color: var(--teal);
  border-width: 3px;
}
.layer-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
/* A peeled floor: its storey is a dashed outline, waiting to come back. */
.layer-btn[aria-pressed='false'] .fs-on {
  fill: none;
  stroke-dasharray: 2.5 2;
}
.layer-btn[aria-pressed='false'] .fs-roof {
  fill: #e4d3c9;
}
/* A home from a newer version of the game is only looked at here: the tools rest. */
#editor[data-read-only='true'] .tools,
#editor[data-read-only='true'] .floor-switch {
  opacity: 0.5;
}
/* "The whole meadow": four corners of a frame. */
.camera-controls svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.side-panel {
  background: var(--paper);
  border-left: 1.5px solid #b6a7b0;
  padding: 20px 16px;
  min-height: 0;
  overflow: auto;
  z-index: 3;
}
/* The heading stays at the top of a scrolled panel, so its close button is always in reach. */
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 4px 0 6px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
}
.panel-heading h2 {
  font-size: 23px;
}
.panel-close {
  display: none;
  font-size: 24px;
  padding: 4px;
}
.side-panel input,
.side-panel select {
  width: 100%;
  margin: 0 0 9px;
  font-size: 13px;
}
.catalogue-help {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 13px;
}
.asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.asset-card {
  min-height: 110px;
  padding: 0 0 7px;
  border-color: #d3c7bf;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  min-width: 0;
  background: #f7f1e5;
  font-size: 11px;
  font-weight: 700;
}
.asset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: #eee9dd;
}
.asset-card span {
  display: block;
  padding: 6px 4px 0;
  min-height: 26px;
}
.asset-card .placeholder {
  height: 80px;
  font-size: 28px;
  display: grid;
  place-items: center;
  color: #b4c4b0;
}
.asset-card[aria-pressed='true'] {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
/* New pieces (js/news.js): a wrapped parcel bobbing on the Furnish button and waiting at the top
   of the catalogue. Opened, its lid lifts and the New pieces shelf's pictures pop in one by one. */
#catalogueBtn {
  position: relative;
}
.parcel-badge {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 26px;
  height: 26px;
  animation: parcel-bob 1.8s ease-in-out infinite;
  pointer-events: none;
}
.parcel-badge[hidden] {
  display: none;
}
.parcel-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}
.parcel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 84px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 2px dashed #c98f9b;
  border-radius: 14px;
  background: #fbeef0;
  text-align: left;
  font-size: 15px;
}
.parcel-card[hidden] {
  display: none;
}
.parcel-card svg {
  flex: none;
  width: 72px;
  height: 64px;
  animation: parcel-bob 1.8s ease-in-out infinite;
}
.parcel-card small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.parcel-card .parcel-lid {
  transform-origin: 40px 30px;
  animation: parcel-lid 1.8s ease-in-out infinite;
}
@keyframes parcel-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-3px) rotate(-4deg); }
  60% { transform: translateY(-2px) rotate(3deg); }
}
@keyframes parcel-lid {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-4px) rotate(-6deg); }
}
.asset-grid.unwrapped .asset-card {
  animation: piece-pop 0.45s cubic-bezier(0.3, 1.5, 0.6, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes piece-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* "Open the book": a picture button beside the heading. */
.book-button {
  min-width: 56px;
  min-height: 56px;
  padding: 4px;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.book-button svg {
  width: 40px;
  height: 34px;
}
.book-button .book-close-mark {
  display: none;
}
.book-button[aria-pressed='true'] {
  background: #dbe9dc;
  border-color: #7eaa95;
}
.book-button[aria-pressed='true'] .book-close-mark {
  display: inline;
}
.builder-footer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px;
  gap: 16px;
  background: var(--paper);
  border-top: 1px solid #b6a7b0;
  font-size: 11px;
  color: var(--muted);
  z-index: 4;
}
#hint {
  color: #566c5f;
  font-weight: 700;
}
#roomSummary {
  white-space: nowrap;
}
#placementBar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1.5px solid #a79a9b;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow);
  max-width: calc(100% - 24px);
  z-index: 2;
}
#placementLabel {
  font-size: 12px;
  padding: 0 6px;
  max-width: 150px;
}
#placementBar button {
  white-space: nowrap;
}
#placeRotate,
#placeCancel {
  font-size: 23px;
  padding: 7px;
}
#selectionImage {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: #eee9dd;
}
#selectionInfo,
.panel-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
/* "Try it": a big picture-only button, a hand tapping among sparkles, for a piece that does
   something (a lamp switches, a kettle whistles). Lit and pressed while a light is on. */
.try-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 64px;
  margin: 2px 0 12px;
  padding: 4px;
  border-radius: 18px;
  background: #fbefc8;
  border-color: #d9b860;
  touch-action: manipulation;
}
.try-button svg {
  width: 84px;
  height: 56px;
}
.try-button[aria-pressed='true'] {
  background: radial-gradient(circle at 50% 60%, #fff3c4 0 35%, #f6d77c 100%);
  box-shadow: 0 0 0 3px #ffe7a0, var(--shadow);
}
.try-button:active svg {
  transform: translateY(2px) scale(0.96);
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.action-grid button {
  font-size: 12px;
  padding: 9px 6px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.swatches button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 3px solid #fff7e8;
  outline: 1px solid #beb3aa;
  border-radius: 50%;
  position: relative;
}
.swatches button[aria-pressed='true'] {
  outline: 3px solid var(--ink);
}
.swatches button:hover:not(:disabled) {
  border-color: white;
}
.remove-button {
  width: 100%;
  margin-top: 25px;
  font-size: 13px;
  color: #815a60;
  border-color: #d3b7b4;
}
.roof-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.roof-options button {
  font-size: 12px;
  min-height: 85px;
}
.roof-options span {
  display: block;
  font-size: 32px;
  margin-bottom: 5px;
}
/* Scenery: a picture of each place, two to a row, the chosen one ringed. */
.scenery-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scenery-choices button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 5px 7px;
  min-height: 90px;
  border-radius: 16px;
  font-size: 12px;
}
.scenery-picture {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 11px;
  background: #e5d8ec center / cover no-repeat;
}
.scenery-choices button[aria-checked='true'] {
  background: #dbe9dc;
  border-color: #7eaa95;
  outline: 3px solid var(--ink);
}
dialog {
  border: 2px solid #8f7d8f;
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  box-shadow: 0 12px 0 #40324322;
}
dialog::backdrop {
  background: #423a4b66;
  backdrop-filter: blur(5px);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.dialog-heading button {
  font-size: 25px;
  padding: 5px;
}
dialog > button {
  margin: 6px 5px 0 0;
}
dialog details {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 24px;
  color: var(--muted);
}
dialog summary {
  cursor: pointer;
  font-weight: 800;
  min-height: 48px;
  display: flex;
  align-items: center;
}
#homesList {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.home-row {
  text-align: left;
  width: 100%;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.home-row strong {
  display: block;
  font:
    20px Fraunces,
    Georgia,
    serif;
}
.home-row small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  margin-top: 4px;
  color: var(--muted);
}
#turnCard {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(#e5dced, #f6e4cb 65%, #d5dfbb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}
#turnCard .turn-icon {
  font-size: 65px;
  color: #619687;
  line-height: 1.5;
}
#turnCard h2 {
  font-size: 30px;
}
#turnCard p {
  font-size: 15px;
  color: var(--muted);
}
#turnCard a {
  min-height: 48px;
  border: 1px solid #a392a6;
  padding: 13px 20px;
  border-radius: 14px;
  margin-top: 20px;
}
#stageError {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 80px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid #c48677;
  border-radius: 13px;
  color: #82594e;
  z-index: 5;
  font-size: 14px;
}
@media (max-width: 1050px) {
  .workspace {
    grid-template-columns: 72px minmax(0, 1fr) 250px;
  }
  .tools {
    padding: 10px 5px;
  }
  .tools button {
    width: 60px;
  }
  .topbar {
    gap: 8px;
    padding: 8px 12px;
  }
  .home-identity {
    width: 180px;
  }
  .side-panel {
    padding: 16px 12px;
  }
  .panel-heading h2 {
    font-size: 21px;
  }
  .swatches {
    gap: 6px;
  }
  .view-switch button {
    min-width: 85px;
    padding: 8px 9px;
  }
  .topbar #saveStatus {
    display: none;
  }
}
@media (max-height: 550px), (max-width: 760px) {
  .topbar {
    height: 64px;
    padding: 7px 10px;
    gap: 7px;
  }
  .home-identity {
    width: 160px;
  }
  .home-identity input {
    font-size: 14px;
  }
  .brand-mini {
    font-size: 10px;
  }
  .view-switch {
    padding: 2px;
  }
  .view-switch button {
    min-width: 74px;
    padding: 6px 7px;
    min-height: 44px;
  }
  .view-switch span {
    font-size: 17px;
  }
  .topbar #saveStatus {
    display: none;
  }
  .history-buttons {
    gap: 4px;
  }
  .workspace {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .tools {
    padding: 4px;
    gap: 2px;
    overflow: auto;
    scrollbar-width: none;
  }
  .tools button {
    width: 54px;
    min-height: 48px;
    flex-shrink: 0;
    padding: 3px;
  }
  .tools button span {
    font-size: 23px;
  }
  .tools small {
    display: none;
  }
  .tool-gap {
    display: none;
  }
  .side-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 290px;
    max-width: calc(100% - 78px);
    box-shadow: -8px 0 30px #40324322;
    border-radius: 18px 0 0 18px;
    padding: 12px;
  }
  .side-panel[data-open='false'] {
    display: none;
  }
  .panel-close {
    display: block;
  }
  .builder-footer {
    height: 32px;
    padding: 4px 10px;
    font-size: 10px;
  }
  #roomSummary {
    display: none;
  }
  .stage-label {
    left: 12px;
    top: 12px;
  }
  .floor-switch {
    left: 12px;
    top: 42px;
    gap: 4px;
  }
  .layer-controls {
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  /* With the sheet open, the layer buttons move to its left, as the camera buttons do. */
  #editor[data-panel-open='true'] .layer-controls {
    right: calc(min(290px, 100% - 14px) + 10px);
  }
  .camera-controls {
    right: 10px;
    bottom: 10px;
    gap: 4px;
  }
  .camera-controls button {
    min-width: 48px;
    width: 48px;
  }
  /* With the sheet open, the camera buttons move to its left instead of hiding beneath it. */
  #editor[data-panel-open='true'] .camera-controls {
    right: calc(min(290px, 100% - 14px) + 10px);
  }
  #selectionImage {
    max-height: 96px;
    object-fit: contain;
  }
  .panel-heading h2 {
    font-size: 19px;
  }
  h3 {
    margin: 14px 0 8px;
  }
  .remove-button {
    margin-top: 16px;
  }
  .try-button {
    min-height: 56px;
    margin-bottom: 8px;
  }
  .try-button svg {
    width: 72px;
    height: 48px;
  }
  .empty-hint strong {
    font-size: 21px;
  }
  .empty-hint {
    top: 39%;
  }
  .empty-hint > span:first-child {
    font-size: 30px;
  }
  #placementBar {
    bottom: 68px;
    padding: 6px;
    gap: 5px;
  }
  #placementLabel {
    font-size: 10px;
    max-width: 120px;
  }
  .welcome {
    margin: 30px auto 0;
  }
  .welcome > .eyebrow {
    font-size: 9px;
  }
  h1 {
    font-size: 68px;
    margin: 18px 0;
  }
  .welcome-copy {
    font-size: 14px;
    margin: 12px;
  }
  .welcome-actions {
    margin: 18px 0 10px;
  }
  .welcome-actions button {
    min-height: 48px;
    font-size: 14px;
  }
  .welcome-note {
    font-size: 10px;
  }
  .home-foot {
    bottom: 12px;
    font-size: 10px;
  }
  .shelf-link,
  .home-settings {
    top: 15px;
  }
  .shelf-link {
    left: 20px;
  }
  .home-settings {
    right: 20px;
  }
}
/* Idle help: a glowing ring on what to touch next, and a hand that shows the gesture. */
.help-ring.help-ring {
  box-shadow:
    0 0 0 3px #f3cf7a,
    0 0 16px 5px #f0c26a88;
  border-color: #d9a94a;
  animation: help-glow 1.6s ease-in-out infinite;
}
@keyframes help-glow {
  50% {
    box-shadow:
      0 0 0 5px #f3cf7a,
      0 0 26px 10px #f0c26aaa;
  }
}
.help-hand,
.help-trail {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 20;
}
.help-hand {
  transform: translate(var(--x0), var(--y0));
}
.help-hand span {
  display: block;
  font-size: 54px;
  line-height: 1;
  /* The fingertip, not the emoji's corner, sits on the point. */
  translate: -42% -6%;
  filter: drop-shadow(0 4px 2px #40324344);
}
.help-hand.tap::before {
  content: '';
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #f3cf7a;
  opacity: 0;
}
.help-hand.tap {
  animation: help-tap 1.4s ease-in-out infinite;
}
.help-hand.tap::before {
  animation: help-ripple 1.4s ease-out infinite;
}
@keyframes help-tap {
  0%,
  100% {
    transform: translate(var(--x0), var(--y0)) translateY(16px);
  }
  45%,
  55% {
    transform: translate(var(--x0), var(--y0)) scale(0.92);
  }
}
@keyframes help-ripple {
  0%,
  45% {
    opacity: 0;
    scale: 0.4;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.4;
  }
}
.help-hand.drag {
  animation: help-drag 2.6s ease-in-out infinite;
}
@keyframes help-drag {
  0% {
    transform: translate(var(--x0), var(--y0)) translateY(16px);
    opacity: 0;
  }
  12% {
    transform: translate(var(--x0), var(--y0)) translateY(16px);
    opacity: 1;
  }
  24% {
    transform: translate(var(--x0), var(--y0)) scale(0.92);
  }
  74% {
    transform: translate(var(--x1), var(--y1)) scale(0.92);
    opacity: 1;
  }
  86% {
    transform: translate(var(--x1), var(--y1)) translateY(16px);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x1), var(--y1)) translateY(16px);
    opacity: 0;
  }
}
.help-hand.still,
.help-hand.still::before {
  animation: none;
  opacity: 1;
}
.help-trail {
  height: 0;
  margin-top: -3px;
  border-top: 6px dotted #3c8f85;
  border-radius: 3px;
  opacity: 0.55;
  transform-origin: 0 50%;
}
/* The Paint tool: the brush in the rail wears the paint that is on it. */
.tools button {
  position: relative;
}
.paint-pot {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff9ed;
  outline: 1px solid #8f7d8f;
}
.paint-pot[hidden] {
  display: none;
}
/* Paint, paper, tile and wood, outside, floors: five picture tabs with a short word, three to a
   row. Then whole wall or under the rail: two picture buttons. */
.paint-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.paint-modes button {
  min-height: 68px;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  gap: 1px;
}
.paint-modes svg {
  width: 40px;
  height: 40px;
}
.paint-modes small {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.rail-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.rail-modes button {
  min-height: 56px;
  padding: 4px;
  display: grid;
  place-items: center;
}
.rail-modes svg {
  width: 40px;
  height: 40px;
}
.paint-modes button[aria-checked='true'],
.rail-modes button[aria-checked='true'] {
  background: #dbe9dc;
  border-color: #7eaa95;
  box-shadow: 0 0 0 2px #7eaa95;
}
/* Paper, tile, wood and outside finishes are little square pictures; trim and door rows are
   marked with a small picture of a window frame and of a door. */
.finish-swatches button {
  border-radius: 14px;
}
.swatch-row-label {
  margin: 12px 0 6px;
}
.swatch-row-label svg {
  width: 30px;
  height: 30px;
}
/* Interior's Walls tab: a note in place of the pots. The Ground tab: its eraser is a picture on
   paper, and Fill (a bucket pouring over a garden) sits under the swatches, as do the Doors and
   Windows panels' Whole house button and their house-colour swatch. */
.draw-note {
  margin: 4px 0 12px;
  font-size: 14px;
}
.ground-eraser,
.house-colour {
  display: grid;
  place-items: center;
  background: #f6efe2;
}
.ground-eraser svg,
.house-colour svg {
  width: 70%;
  height: 70%;
}
.ground-fill,
.whole-house {
  margin-top: 12px;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}
.ground-fill svg,
.whole-house svg {
  width: 44px;
  height: 44px;
}
.ground-fill:disabled {
  opacity: 0.5;
}
#openingColors {
  margin-top: 4px;
}
/* Paint pots and floor samples: at least 56 px, with room between them for a small finger. */
.paint-swatches {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}
.paint-swatches button {
  min-width: 56px;
  min-height: 56px;
  aspect-ratio: 1;
}
.floor-swatches button {
  border-radius: 14px;
}
.paint-swatches button[aria-pressed='true'] {
  outline: 4px solid var(--ink);
  outline-offset: 1px;
}
/* A few soft stars where the paint went on. */
.paint-sparkle {
  position: fixed;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.paint-sparkle span {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--paint);
  border: 2px solid #fff9ed;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: paint-sparkle 0.8s ease-out forwards;
}
.paint-sparkle span:nth-child(1) {
  --dx: -26px;
  --dy: -18px;
}
.paint-sparkle span:nth-child(2) {
  --dx: 24px;
  --dy: -22px;
}
.paint-sparkle span:nth-child(3) {
  --dx: 0px;
  --dy: -34px;
}
.paint-sparkle span:nth-child(4) {
  --dx: -18px;
  --dy: 16px;
}
.paint-sparkle span:nth-child(5) {
  --dx: 20px;
  --dy: 14px;
}
@keyframes paint-sparkle {
  from {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(1.1);
    opacity: 0;
  }
}
/* On a short sideways screen the rail has two columns, so all eight tools fit without scrolling. */
@media (max-height: 550px), (max-width: 760px) {
  .workspace {
    grid-template-columns: 122px minmax(0, 1fr);
  }
  .tools {
    display: grid;
    grid-template-columns: repeat(2, 54px);
    grid-auto-rows: minmax(56px, auto);
    align-content: start;
    gap: 6px;
    padding: 6px;
    overflow: visible;
  }
  .tools button {
    min-height: 56px;
  }
  .paint-pot {
    right: 4px;
    top: 4px;
  }
  .side-panel {
    max-width: calc(100% - 136px);
  }
  .paint-modes button {
    min-height: 60px;
  }
  .paint-modes svg {
    width: 34px;
    height: 34px;
  }
}
/* On a short sideways phone the Paint sheet is a little wider and its five tabs sit in one row, so
   the tabs, the rail buttons and a row of pots all show without scrolling. */
@media (max-height: 550px) {
  .side-panel:has(> #paintPanel:not([hidden])) {
    width: 340px;
  }
  .paint-modes {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    gap: 5px;
    margin-bottom: 8px;
  }
  .paint-modes button {
    min-height: 56px;
    padding: 2px 1px;
  }
  .paint-modes svg {
    width: 28px;
    height: 28px;
  }
  .paint-modes small {
    font-size: 9px;
  }
  .rail-modes {
    margin-bottom: 8px;
  }
  #paintPanel .panel-heading .eyebrow {
    display: none;
  }
}
/* The pause button (shared/pause.js), in the corner beside the settings ⚙, the door to the music
   and sound switches: at the end of the builder's top bar, and on the title screen, where the ⚙
   steps one place in to make room. It wears the ⚙'s own look. */
.home-settings.pause-toggle {
  width: 52px;
}
.home-settings:not(.pause-toggle) {
  right: calc(max(30px, var(--safe-r)) + 62px);
}
@media (max-height: 550px), (max-width: 760px) {
  .home-settings:not(.pause-toggle) {
    right: 82px;
  }
}
/* A visitor's view of a shared home (a share link, src/shares.js): no tools, no catalogue, no
   undo, no photos, nothing that builds; the stage takes the whole width, either way up. */
body[data-viewer] .tools,
body[data-viewer] #sidePanel,
body[data-viewer] .history-buttons,
body[data-viewer] #saveStatus,
body[data-viewer] #homesBtn,
body[data-viewer] #photoBtn,
body[data-viewer] #addFloorBtn,
body[data-viewer] #removeFloorBtn,
body[data-viewer] #placementBar,
body[data-viewer] #emptyHint,
body[data-viewer] #settingsDialog details,
body[data-viewer] .welcome-actions,
body[data-viewer] .welcome-note,
body[data-viewer] .shelf-link,
body[data-viewer] .home-settings {
  display: none !important;
}
body[data-viewer] .workspace {
  grid-template-columns: minmax(0, 1fr);
}
body[data-viewer] .home-identity {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
body[data-viewer] .home-identity input {
  pointer-events: none;
}
body[data-viewer] #settingsBtn {
  margin-left: 4px;
}
.gallery-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid #b9a9b2;
  border-radius: 14px;
  background: #f7f0e3;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
.viewer-about {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 18px 0 0;
}
.viewer-about a {
  text-decoration: underline;
  font-weight: 800;
}
@media (max-width: 600px) {
  /* A phone held upright: the camera buttons wrap into two rows at the bottom right. */
  body[data-viewer] .camera-controls {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body[data-viewer] .topbar .gallery-link {
    display: none;
  }
  body[data-viewer] .view-switch button {
    min-width: 54px;
    font-size: 0;
    padding: 6px;
  }
  body[data-viewer] .view-switch span {
    font-size: 20px;
    margin: 0;
  }
  body[data-viewer] .view-switch .walk-feet {
    margin: 0;
  }
}
/* For grown-ups: share links, one row per home. */
.share-box {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px dashed #c8bcbc;
}
.share-box h3 {
  margin-top: 14px;
  color: var(--ink);
}
.share-unlock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.share-unlock label {
  flex-basis: 100%;
  font-weight: 800;
  color: var(--ink);
}
.share-unlock input {
  width: 9ch;
  font-size: 20px;
  letter-spacing: 0.3em;
  text-align: center;
}
.share-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 12px;
}
.share-home {
  padding: 12px;
  border: 1px solid #d3c7c5;
  border-radius: 14px;
  background: #fffcf6;
  display: grid;
  gap: 8px;
}
.share-home strong {
  color: var(--ink);
  font-size: 15px;
}
.share-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-modes button {
  min-height: 48px;
  font-size: 13px;
  padding: 6px 12px;
}
.share-modes button[aria-checked='true'] {
  background: #d6e8de;
  border-color: var(--teal);
  color: #285f57;
}
.share-link {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-link input {
  flex: 1 1 220px;
  font-size: 13px;
  min-height: 48px;
}
.share-link button {
  min-height: 48px;
  font-size: 13px;
  padding: 6px 12px;
}
.share-link button[data-armed='true'],
.share-modes button[data-armed='true'] {
  background: #f6dfd6;
  border-color: var(--coral);
  color: #82594e;
}
.share-note {
  margin: 0;
  font-size: 12px;
}
.share-note a {
  text-decoration: underline;
  font-weight: 800;
}
/* The book: the catalogue spread over the view beside the tools (the stage keeps its size under
   it, so Plan and Model don't redraw), as many pieces to a row as fit. */
.workspace[data-book='true'] > .side-panel {
  display: block;
  position: absolute;
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  inset: 0;
  width: auto;
  max-width: none;
  z-index: 8;
  border-radius: 0;
  padding: 14px 22px 22px;
}
.workspace[data-book='true'] .panel-heading {
  margin-bottom: 6px;
}
.workspace[data-book='true'] .catalogue-filters {
  display: flex;
  gap: 10px;
}
.workspace[data-book='true'] .catalogue-filters input {
  flex: 2;
}
.workspace[data-book='true'] .catalogue-filters select {
  flex: 1;
}
.workspace[data-book='true'] .asset-grid {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
}
/* The help hand rests while the book covers the view (it would point through the pages). */
#editor[data-book='true'] .help-hand,
#editor[data-book='true'] .help-trail {
  display: none !important;
}
/* A sideways phone: smaller pictures, and the heading and filters on one short row. */
@media (max-height: 550px) {
  .workspace[data-book='true'] > .side-panel {
    padding: 6px 12px 12px;
  }
  .workspace[data-book='true'] .panel-heading {
    margin-bottom: 4px;
    padding: 2px 0 4px;
  }
  .workspace[data-book='true'] .panel-heading .eyebrow,
  .workspace[data-book='true'] .catalogue-help {
    display: none;
  }
  .workspace[data-book='true'] .asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  .workspace[data-book='true'] .asset-card {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Keep the placement confirmation above the drawing area on a short landscape screen. */
@media (max-height: 550px), (max-width: 760px) {
  #placementBar {
    top: 8px;
    bottom: auto;
  }
}
/* Photo mode: the builder steps aside and the view fills the screen, with picture swatches for
   the looks, a big round shutter and a big way back. The look's layers lie over the live view. */
#photoBtn svg {
  width: 25px;
  height: 25px;
}
#editor[data-photo='true'] {
  grid-template-rows: minmax(0, 1fr);
}
#editor[data-photo='true'] .topbar,
#editor[data-photo='true'] .builder-footer,
#editor[data-photo='true'] .tools,
#editor[data-photo='true'] .side-panel,
#editor[data-photo='true'] .help-hand,
#editor[data-photo='true'] .help-trail,
#editor[data-photo='true'] .stage > :not(#modelStage):not(#photoMode) {
  display: none !important;
}
#editor[data-photo='true'] .workspace {
  grid-template-columns: minmax(0, 1fr);
}
#photoMode {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#photoMode[hidden] {
  display: none;
}
.photo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.photo-layer[hidden] {
  display: none;
}
#photoFlash {
  background: #fffdf6;
  opacity: 0;
}
#photoFlash.flash {
  animation: photo-flash 0.52s ease-out;
}
@keyframes photo-flash {
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
#photoMode button {
  pointer-events: auto;
}
#photoMode svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#photoLeave {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 0;
  background: #fff9edeb;
  color: var(--teal);
}
#photoLeave svg {
  width: 40px;
  height: 40px;
  stroke-width: 4.5;
}
.photo-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  border-radius: 26px;
  background: #fff9edcc;
  box-shadow: 0 6px 24px #40324322;
  pointer-events: auto;
}
#photoLooks {
  display: flex;
  gap: 10px;
}
.photo-look {
  width: 66px;
  height: 66px;
  min-width: 0;
  min-height: 0;
  padding: 3px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
}
.photo-look canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.photo-look[aria-checked='true'] {
  border: 3px solid var(--teal);
  box-shadow:
    0 0 0 3px #f3cf7a,
    0 3px 0 #77627522;
  transform: translateY(-3px);
}
#photoShutter {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  padding: 0;
  border: 5px solid #fff;
  background: var(--coral);
  color: #fff;
  box-shadow:
    0 0 0 3px var(--coral),
    0 5px 0 #77627533;
}
#photoShutter:active {
  transform: scale(0.94);
}
#photoShutter svg {
  width: 44px;
  height: 44px;
  stroke-width: 3.5;
}
@media (max-height: 550px), (max-width: 760px) {
  #photoLeave {
    width: 60px;
    height: 60px;
    top: 10px;
    left: 10px;
  }
  #photoLeave svg {
    width: 34px;
    height: 34px;
  }
  .photo-bar {
    gap: 12px;
    padding: 7px 9px;
    bottom: 10px;
  }
  #photoLooks {
    gap: 7px;
  }
  .photo-look {
    width: 58px;
    height: 58px;
  }
  #photoShutter {
    width: 72px;
    height: 72px;
  }
}
/* A home's postcard: its last photo, small and a little turned, on its card in My homes and on
   Continue. */
.home-postcard {
  width: 84px;
  height: 58px;
  object-fit: cover;
  flex: none;
  border: 4px solid #fbf5e8;
  border-radius: 3px;
  box-shadow: 0 2px 6px #40324333;
  transform: rotate(-3deg);
}
.home-postcard + span {
  flex: 1;
}
#continueBtn.has-postcard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-left: 8px;
}
#continueBtn.has-postcard > span {
  display: none;
}
#continueBtn .home-postcard {
  width: 56px;
  height: 40px;
  border-width: 3px;
}
#continueBtn[hidden] {
  display: none;
}

/* Opening pictures keep their finger-sized targets even in the sideways phone sheet. */
.picture-swatches { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
.picture-swatches button { min-width: 56px; min-height: 56px; border-radius: 14px; padding: 4px; }
.picture-swatches svg { width: 44px; height: 44px; display: block; margin: auto; }
.picture-swatches button:disabled { opacity: .35; cursor: default; }
/* The cloth rows (js/ui/fabric-rows.js): a row of families (rounded squares), then the colours or
   patterns of the family that is open. Pattern pictures are backgrounds drawn in the piece's colours. */
.family-swatches { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #d8cdbf; }
.family-swatches button { border-radius: 14px; }
/* A colour picker's families come under its shades, as more colours (js/ui/color-picker.js). */
.family-swatches.below { margin: 10px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px dashed #d8cdbf; }
#printFamilies button, #printChoices button, #throwFamilies button[data-throw-family], #throwChoices button,
#curtainPrintFamilies button, #curtainPrintChoices button, #brushPrintFamilies button, #brushPrintChoices button {
  background-size: cover;
  background-position: center;
}
/* A light's colours: glowing dots, a finger wide. */
.light-swatches { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
.light-swatches button { width: 56px; height: 56px; min-width: 56px; justify-self: center; }

/* What's new (js/ui/updates.js): a postcard tucked in the title screen's corner shows the newest
   update and a coral dot for each one this player hasn't looked at; it opens the notes, a list of
   days beside that day's changes. On a short or narrow screen the postcard is a small pill and the
   days become a row of date pills above the notes. */
.whats-new-card {
  position: absolute;
  right: max(34px, var(--safe-r));
  bottom: calc(max(20px, var(--safe-b)) + 42px);
  width: 300px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-weight: 400;
  background: var(--paper);
  border: 1.5px solid #9a8c93;
  border-radius: 18px;
  box-shadow:
    0 4px 0 #77627522,
    0 14px 30px #2d234222;
  transform: rotate(-2deg);
}
.whats-new-card[hidden] {
  display: none;
}
.whats-new-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.whats-new-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px;
  font-weight: 800;
  color: #6a5e6d;
}
.whats-new-eyebrow svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #c67f79;
  stroke-width: 2;
}
.whats-new-title {
  font:
    500 27px/1.1 Fraunces,
    Georgia,
    serif;
  letter-spacing: -0.02em;
}
.whats-new-teaser {
  font-size: 14px;
  line-height: 1.4;
  color: #5c5060;
}
.whats-new-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed #c9bdb8;
  font-size: 14px;
  font-weight: 800;
  color: #2f6f66;
}
.whats-new-more svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.update-new {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #f7e1d9;
  color: #8a4636;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.update-new[hidden] {
  display: none;
}
.update-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}
.whats-new-card[data-fresh='true'] .update-dot {
  animation: whats-new-pulse 2.4s ease-in-out infinite;
}
@keyframes whats-new-pulse {
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
}
@media (max-height: 700px), (max-width: 760px) {
  .whats-new-card {
    width: auto;
    min-height: 48px;
    padding: 8px 14px;
    gap: 0;
    right: max(20px, var(--safe-r));
    bottom: calc(max(12px, var(--safe-b)) + 28px);
    border-radius: 24px;
    transform: none;
  }
  .whats-new-title,
  .whats-new-teaser,
  .whats-new-more {
    display: none;
  }
}
dialog.updates-dialog {
  width: min(980px, calc(100vw - 32px));
  height: min(714px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
}
dialog.updates-dialog[open] {
  display: flex;
  flex-direction: column;
}
.updates-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 20px 32px;
  border-bottom: 1.5px solid #e4d9cc;
}
.updates-heading .eyebrow,
.update-day-notes .eyebrow {
  font-size: 11px;
  color: #6a5e6d;
}
.updates-heading h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.updates-heading h2 em {
  font-style: italic;
  color: #3b7367;
}
.updates-heading button {
  font-size: 25px;
  padding: 5px;
  flex: none;
}
.updates-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
}
.updates-days {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px 18px 18px;
  border-right: 1.5px solid #e4d9cc;
  background: #f8f1e3;
  overflow-y: auto;
}
.update-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  flex: none;
  text-align: left;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.update-day[aria-pressed='true'] {
  background: var(--paper);
  border-color: var(--teal);
  box-shadow: 0 2px 0 #254f4322;
}
.update-day-words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.update-date {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 800;
  color: #6a5e6d;
}
.update-day-title {
  font:
    500 19px/1.15 Fraunces,
    Georgia,
    serif;
}
.update-day-notes {
  min-height: 0;
  overflow-y: auto;
  padding: 26px 36px 30px;
}
.update-day-notes h3 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.update-intro {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.45;
  color: #5c5060;
}
.update-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.update-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.update-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.update-icon svg {
  width: 22px;
  height: 22px;
}
.kind-build {
  background: #ece3f3;
  color: #5d4a78;
}
.kind-furnish {
  background: #f7e1d9;
  color: #8a4636;
}
.kind-garden {
  background: #e3ecd6;
  color: #4a6636;
}
.kind-walk {
  background: #dcefeb;
  color: #2f6f66;
}
.kind-look,
.kind-sound {
  background: #e0e8f2;
  color: #3f5f86;
}
.kind-share {
  background: #f3ead2;
  color: #765a1c;
}
.update-item-words {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}
.update-item-words strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.update-item-words span {
  font-size: 15px;
  line-height: 1.45;
  color: #5c5060;
}
@media (max-height: 550px), (max-width: 760px) {
  dialog.updates-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
  .updates-heading {
    align-items: center;
    padding: 12px 14px 10px 20px;
  }
  .updates-heading .eyebrow {
    display: none;
  }
  .updates-heading h2 {
    font-size: 26px;
  }
  .updates-body {
    display: flex;
    flex-direction: column;
  }
  .updates-days {
    flex-direction: row;
    gap: 8px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1.5px solid #e4d9cc;
    background: none;
  }
  .update-day {
    width: auto;
    min-height: 48px;
    padding: 8px 16px;
    gap: 7px;
    border-radius: 24px;
    border-color: #c9bdb8;
    background: var(--paper);
    white-space: nowrap;
  }
  .update-day[aria-pressed='true'] {
    background: var(--teal);
    border-color: #316a62;
    color: white;
  }
  .update-day[aria-pressed='true'] .update-date {
    color: white;
  }
  .update-date {
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  .update-day-title,
  .update-new-text {
    display: none;
  }
  .update-day .update-new {
    padding: 0;
    background: none;
  }
  .update-day .update-dot {
    width: 8px;
    height: 8px;
  }
  .update-day-notes {
    flex: 1;
    padding: 16px 20px 24px;
  }
  .update-day-notes h3 {
    font-size: 26px;
  }
  .update-intro {
    font-size: 15px;
    margin-bottom: 16px;
  }
  .update-items {
    gap: 14px;
  }
  .update-item {
    gap: 12px;
  }
  .update-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .update-item-words strong {
    font-size: 16px;
  }
  .update-item-words span {
    font-size: 14px;
  }
}
/* What's new keeps its own look under a mouse and a press. */
.whats-new-card:hover:not(:disabled) {
  background: #fffdf6;
}
.whats-new-card:active:not(:disabled) {
  transform: rotate(-2deg) translateY(1px);
}
.update-day[aria-pressed='true']:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--teal);
}
@media (max-height: 700px), (max-width: 760px) {
  .whats-new-card:active:not(:disabled) {
    transform: translateY(1px);
  }
}
@media (max-height: 550px), (max-width: 760px) {
  .update-day[aria-pressed='true']:hover:not(:disabled) {
    background: #327e75;
    border-color: #316a62;
  }
}
/* On a phone held sideways there is no room beside the welcome: the postcard becomes a flower
   button in the corner beside the ⚙ and the pause button, with a coral dot while something waits. */
@media (max-height: 550px), (max-width: 760px) {
  .whats-new-card {
    top: max(15px, var(--safe-t));
    right: calc(max(20px, var(--safe-r)) + 120px);
    bottom: auto;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff8e9a8;
    box-shadow: 0 2px 0 #77627522;
  }
  .whats-new-top {
    position: static;
  }
  .whats-new-eyebrow > span {
    display: none;
  }
  .whats-new-eyebrow svg {
    width: 24px;
    height: 24px;
  }
  #whatsNewCount {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 0;
    background: none;
  }
  #whatsNewCountText {
    display: none;
  }
  #whatsNewCount .update-dot {
    width: 13px;
    height: 13px;
    border: 2px solid var(--paper);
  }
}