:root {
  --paper:var(--canvas);
  --ink:#303b32;
  --muted:#687064;
  --line:#d9dcd0;
  --orange:#b65a38;
  --green:#3d5844;
  --serif:'Instrument Serif',Georgia,serif;
  color-scheme:light;
  --canvas:#eeeee4;
  --canvas-line:#e0e2d6;
  --panel:#fbfaf4;
  --panel-line:#d4d9cb;
  --button-border:#a8b09f;
  --surface-hover:#e9ecdf;
  --button-ink:#ffffff;
  --button-hover:#2a4230;
  --directory-label:#5e6d58;
  --selection:#e6c5a5;
  --sans:'DM Sans',Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button,a,[role=button],summary {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px;
}

button {
  touch-action:manipulation;
}

::selection {
  background:var(--selection);
}

.wrap {
  width:calc(100% - 112px);
  max-width:1320px;
  margin-inline:auto;
}

.skip-link {
  position:absolute;
  top:12px;
  left:16px;
  transform:translateY(-170%);
  z-index:10;
  background:var(--ink);
  color:var(--paper);
  padding:14px;
}

.skip-link:focus {
  transform:none;
}

.wordmark {
  display:inline-flex;
  align-items:center;
  font-size:30px;
  font-weight:650;
  letter-spacing:-1.7px;
  line-height:1;
}

.wordmark svg {
  width:28px;
  height:33px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.9;
  margin-right:11px;
  stroke-linejoin:round;
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:600;
  line-height:1.6;
  margin:0;
}

p {
  line-height:1.7;
}

.house-section {
  padding-top:5px;
}

.explorer {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:34px;
  align-items:center;
}

.house-canvas {
  position:relative;
  background:var(--canvas);
  border:1px solid var(--canvas-line);
  border-radius:5px;
  overflow:hidden;
}

.canvas-note {
  position:absolute;
  left:26px;
  right:26px;
  top:25px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1.2px;
  color:var(--muted);
}

.canvas-note span:last-child {
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  letter-spacing:0;
}

.house-art {
  width:100%;
  height:auto;
  display:block;
  margin-top:12px;
}

.room {
  cursor:pointer;
  outline:none;
}

.room-wall {
  transition:filter .2s;
}

.room:hover .room-wall {
  filter:brightness(1.045);
}

.room-outline {
  fill:none;
  stroke:transparent;
  stroke-width:3;
  transition:stroke .2s;
}

.room:hover .room-outline,.room.is-selected .room-outline {
  stroke:#9c4d30;
}

.room:focus-visible .room-outline {
  stroke:#943b1e;
  stroke-width:5;
}

.room-label {
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:1px;
  font-weight:600;
  fill:#424c3e;
  pointer-events:none;
}

.margin-label {
  font-family:var(--sans);
  font-size:8px;
  letter-spacing:2px;
  fill:var(--muted);
  text-anchor:middle;
}

.canvas-caption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin:0 18px 24px;
  line-height:1.5;
}

.room-panel {
  padding:28px 25px 21px;
  border:1px solid var(--panel-line);
  border-radius:5px;
  background:var(--panel);
  position:relative;
  scroll-margin-top:20px;
}

.panel-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.panel-top .eyebrow {
  font-size:8px;
  letter-spacing:1.1px;
  color:var(--muted);
}

#room-counter {
  font-size:10px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.room-number {
  font-family:var(--serif);
  font-style:italic;
  color:var(--orange);
  font-size:64px;
  line-height:1;
  margin-top:31px;
}

.room-detail h3 {
  font-family:var(--serif);
  font-size:38px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.7px;
  margin:11px 0 15px;
}

.room-description {
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 24px;
}

.panel-project {
  border-top:1px solid var(--line);
  padding:18px 0 3px;
  display:block;
}

.panel-project+.panel-project {
  margin-top:14px;
}

.panel-project-title {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-size:16px;
  font-weight:550;
}

.project-icon {
  width:26px;
  height:26px;
  border-radius:6px;
  background:var(--project-color,#e8d7c6);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  color:#344332;
  flex-shrink:0;
}

.project-name {
  display:flex;
  gap:9px;
  align-items:center;
}

.panel-project p {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0;
  line-height:1.7;
}

a.panel-project:hover .panel-project-title,
a.directory-project:hover h3 {
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:4px;
}

.project-status {
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.5px;
}

.room-pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
  padding-top:19px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
}

.room-pagination>div {
  display:flex;
  gap:7px;
}

.room-pagination button {
  border:1px solid var(--line);
  border-radius:3px;
  padding:0 10px;
  min-width:50px;
  height:34px;
  line-height:1;
  background:transparent;
  font-size:11px;
}

.room-pagination button:hover {
  background:var(--surface-hover);
  color:var(--ink);
}

.room-shortcuts {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:20px;
  max-width:950px;
}

.room-shortcuts button {
  font-size:11px;
  min-height:40px;
  padding:9px 14px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:3px;
  transition:background .15s,color .15s;
}

.room-shortcuts button:hover {
  border-color:#91a084;
}

.room-shortcuts button[aria-pressed=true] {
  background:var(--green);
  border-color:var(--green);
  color:var(--button-ink);
}

.project-section {
  padding-top:105px;
  padding-bottom:70px;
}

.project-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:32px;
}

.project-heading h2 {
  font-family:var(--serif);
  font-size:48px;
  font-weight:400;
  letter-spacing:-1px;
  margin:12px 0 0;
  line-height:1.1;
}

.project-heading>p {
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.8;
}

.project-directory {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;
}

.directory-project {
  padding:24px 0;
  border-top:1px solid var(--line);
  display:block;
  min-width:0;
}

.directory-title {
  display:flex;
  align-items:center;
  gap:11px;
}

.directory-title h3 {
  font-size:16px;
  margin:0;
  font-weight:550;
  letter-spacing:-.3px;
}

.directory-project p {
  font-size:13px;
  color:var(--muted);
  margin:12px 0;
  line-height:1.6;
}

.directory-project .directory-room {
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--directory-label);
}

.archive {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:26px;
}

.archive summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 0;
  font-size:14px;
  min-height:64px;
}

.archive summary::-webkit-details-marker {
  display:none;
}

.archive-count {
  font-size:10px;
  margin-left:12px;
  color:var(--muted);
}

.archive-toggle {
  font-size:22px;
  font-weight:400;
}

.archive[open] .archive-toggle {
  transform:rotate(45deg);
}

.archive-intro {
  font-size:13px;
  color:var(--muted);
  margin:0 0 17px;
}

.archive-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 28px;
  padding:0 0 28px;
}

.archive-list>div {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}

.archive-list>div>span:last-child {
  font-size:11px;
  color:var(--muted);
}

.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-block:30px 36px;
}

.site-footer .wordmark {
  font-size:24px;
}

.site-footer p {
  font-size:11px;
  color:var(--muted);
  margin:0;
}

.site-footer>span {
  font-size:10px;
  color:var(--muted);
}

@media(min-width:1500px) {
  .explorer {
    grid-template-columns:minmax(0,1fr) 330px;
    gap:46px;
  }
  .room-panel {
    padding:30px;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .explorer {
    grid-template-columns:minmax(0,1fr) 275px;
    gap:22px;
  }
  .room-panel {
    padding:24px 20px 19px;
  }
  .room-detail h3 {
    font-size:34px;
  }
  .canvas-note {
    top:18px;
    left:18px;
    right:18px;
  }
  .canvas-note h1 {
    font-size:7px;
  }
  .canvas-caption {
    font-size:9px;
    margin-bottom:18px;
  }
  .room-shortcuts {
    gap:6px;
  }
  .room-shortcuts button {
    font-size:10px;
    padding-inline:11px;
  }
}

@media(max-width:800px) {
  .wrap {
    width:calc(100% - 48px);
  }
  .wordmark {
    font-size:27px;
  }
  .explorer {
    grid-template-columns:minmax(0,1fr) 238px;
    gap:16px;
  }
  .room-panel {
    padding:19px 16px 16px;
  }
  .room-number {
    font-size:50px;
    margin-top:22px;
  }
  .room-detail h3 {
    font-size:30px;
    margin-top:8px;
  }
  .room-description {
    font-size:12px;
    margin-bottom:18px;
  }
  .panel-project-title {
    font-size:14px;
  }
  .panel-project p {
    font-size:11px;
  }
  .panel-top .eyebrow {
    font-size:7px;
  }
  .room-pagination {
    margin-top:22px;
  }
  .canvas-note span:last-child {
    display:none;
  }
  .canvas-caption {
    font-size:8px;
    gap:6px;
    margin-inline:12px;
  }
  .room-shortcuts {
    justify-content:center;
  }
  .project-section {
    padding-top:75px;
  }
  .project-directory {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .project-heading h2 {
    font-size:42px;
  }
  .project-heading>p {
    font-size:12px;
  }
  .site-footer p {
    display:none;
  }
}

@media(max-width:620px) {
  .wrap {
    width:calc(100% - 36px);
  }
  .wordmark {
    font-size:25px;
  }
  .wordmark svg {
    width:23px;
    margin-right:8px;
  }
  .explorer {
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .house-canvas {
    width:100%;
  }
  .house-art {
    margin-top:18px;
  }
  .canvas-note {
    top:16px;
    left:17px;
  }
  .canvas-note span:last-child {
    display:inline;
    font-size:12px;
  }
  .canvas-caption {
    font-size:9px;
    margin-bottom:17px;
  }
  .room-panel {
    width:100%;
    padding:22px;
    display:grid;
    grid-template-columns:1fr;
    scroll-margin-top:20px;
  }
  .panel-top .eyebrow {
    font-size:9px;
  }
  .room-number {
    font-size:46px;
    margin-top:19px;
    float:left;
    margin-right:15px;
    line-height:1.15;
  }
  .room-detail h3 {
    font-size:35px;
    margin:21px 0 18px;
  }
  .room-description {
    font-size:13px;
    clear:both;
    margin-bottom:20px;
  }
  .panel-project-title {
    font-size:16px;
  }
  .panel-project p {
    font-size:13px;
  }
  .panel-project {
    padding-top:17px;
  }
  .panel-project+.panel-project {
    margin-top:17px;
  }
  .room-pagination {
    font-size:11px;
    margin-top:23px;
  }
  .room-pagination button {
    min-width:64px;
    height:40px;
  }
  .room-shortcuts {
    padding-top:15px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }
  .room-shortcuts button {
    font-size:10px;
    padding-inline:4px;
    min-height:42px;
  }
  .project-section {
    padding-top:65px;
    padding-bottom:35px;
  }
  .project-heading {
    display:block;
    margin-bottom:25px;
  }
  .project-heading h2 {
    font-size:42px;
  }
  .project-heading>p {
    margin-top:17px;
    font-size:13px;
  }
  .project-heading>p br {
    display:none;
  }
  .project-directory {
    grid-template-columns:1fr;
    gap:0;
  }
  .directory-project {
    padding:22px 0;
  }
  .directory-title h3 {
    font-size:17px;
  }
  .directory-project p {
    font-size:14px;
    margin:10px 0;
  }
  .directory-project .directory-room {
    font-size:9px;
  }
  .project-icon {
    width:30px;
    height:30px;
  }
  .archive-list {
    grid-template-columns:repeat(2,1fr);
    gap:22px 12px;
  }
  .site-footer {
    padding-block:27px;
    gap:18px;
  }
  .site-footer .wordmark {
    font-size:23px;
  }
  .site-footer>span {
    font-size:9px;
  }
  .room-label {
    font-size:11px;
  }
  .room-outline {
    stroke-width:4;
  }
  .room.is-selected .room-outline {
    stroke-width:5;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}

@media(min-width:621px) and (max-width:900px) {
  .explorer {
    grid-template-columns:1fr;
    gap:20px;
  }
  .house-canvas {
    max-width:720px;
    width:100%;
    margin-inline:auto;
  }
  .room-panel {
    width:100%;
    max-width:720px;
    margin-inline:auto;
    padding:24px;
  }
  .room-number {
    float:left;
    margin:20px 16px 0 0;
    font-size:48px;
    line-height:1.1;
  }
  .room-detail h3 {
    margin-top:23px;
    font-size:37px;
  }
  .room-description {
    clear:both;
    font-size:14px;
    max-width:550px;
    margin-bottom:20px;
  }
  .panel-products {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
  }
  .panel-project+.panel-project {
    margin-top:0;
  }
  .panel-project-title {
    font-size:15px;
  }
  .panel-project p {
    font-size:12px;
  }
  .panel-top .eyebrow {
    font-size:9px;
  }
  .room-pagination {
    margin-top:22px;
  }
  .canvas-note h1 {
    font-size:8px;
  }
  .canvas-note span:last-child {
    display:inline;
  }
  .canvas-caption {
    font-size:10px;
  }
  .room-shortcuts {
    justify-content:center;
  }
}

/* The page follows the house's local day, rather than the visitor's timezone. */
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:var(--canvas);
  --ink:#e8e8db;
  --muted:#b0baad;
  --line:#3b4941;
  --orange:#e4a084;
  --green:#b3c4a4;
  --canvas:#202d33;
  --canvas-line:#3a484b;
  --panel:#202b25;
  --panel-line:#425045;
  --button-border:#677760;
  --surface-hover:#344236;
  --button-ink:#18231b;
  --button-hover:#c7d4b8;
  --directory-label:#b2c1a7;
  --selection:#69513c;
  --art-shadow:#18252b;
  --art-cloud:#2b3a40;
  --art-roof:#815b4c;
  --art-chimney:#8f715e;
  --art-chimney-cap:#b7a98b;
  --art-roof-edge:#ba9671;
  --art-facade:#8b8269;
  --art-frame:#b4a889;
  --art-beam:#c7b99a;
  --art-foundation:#7b7965;
  --art-step:#aaa085;
  --art-path:#344046;
  --studio-wall:#d6bfa4;
  --store-wall:#c9d0b3;
  --classroom-wall:#d0c49a;
  --workshop-wall:#b7c6d0;
  --kitchen-wall:#d9c29c;
  --office-wall:#cbb8b2;
}

.night-sky {
  display:none;
}

:root[data-theme="dark"] .night-sky {
  display:inline;
}

:root[data-theme="dark"] .sun,
:root[data-theme="dark"] .day-birds {
  display:none;
}

:root[data-theme="dark"] .chimney-smoke {
  stroke:#72807d;
}

:root[data-theme="dark"] .room:hover .room-outline,
:root[data-theme="dark"] .room.is-selected .room-outline {
  stroke:#73432e;
}

:root[data-theme="dark"] .room:focus-visible .room-outline {
  stroke:#34261e;
}

#house-local-time {
  font-variant-numeric:tabular-nums;
}

/* The house is the landing experience, on one continuous canvas. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.house-section {
  padding-top:48px;
}

.house-canvas {
  background:transparent;
  border:0;
  border-radius:0;
}

.canvas-note {
  top:6px;
  left:18px;
  right:18px;
}

.house-art {
  width:100%;
  height:clamp(490px, calc(100svh - 150px), 820px);
  margin-top:0;
}

.canvas-caption {
  margin-bottom:0;
}

.room-panel {
  background:transparent;
  border-color:var(--line);
}

.room-shortcuts {
  padding-top:18px;
}

.project-section {
  padding-top:80px;
}

@media(min-width:901px) {
  .explorer {
    align-items:center;
  }
  .room-shortcuts {
    width:calc(100% - 344px);
    justify-content:center;
  }
}

@media(min-width:621px) and (max-width:900px) {
  .house-art {
    height:auto;
    max-height:calc(100svh - 110px);
    min-height:460px;
  }
  .room-panel {
    max-width:720px;
  }
}

@media(max-width:620px) {
  .house-section {
    padding-top:24px;
  }
  .canvas-note {
    top:0;
    left:4px;
    right:4px;
  }
  .house-art {
    height:auto;
    margin-top:20px;
  }
  .canvas-caption {
    margin:0 10px 6px;
  }
  .project-section {
    padding-top:58px;
  }
}

/* Room previews and small, deliberate interactions inside the illustration. */
.room {
  transition:opacity .22s ease;
}

.room-content {
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .25s ease, filter .25s ease;
}

.room.is-preview .room-content {
  transform:translateY(-3px) scale(1.025);
  filter:drop-shadow(0 6px 5px #18211e26);
}

.has-preview .room:not(.is-preview) {
  opacity:.7;
}

:root[data-theme="dark"] .room.is-selected .room-content {
  filter:drop-shadow(0 0 7px #e2b66f35);
}

.room-tooltip {
  position:absolute;
  z-index:3;
  width:max-content;
  max-width:calc(100% - 24px);
  padding:12px 16px;
  border:1px solid var(--button-border);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 8px 24px #101c1820;
  transform:translate(-50%, -100%);
  pointer-events:none;
}

.room-tooltip strong,
.room-tooltip span {
  display:block;
}

.room-tooltip strong {
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  margin-bottom:4px;
}

.room-tooltip span {
  font-size:10px;
  color:var(--muted);
  line-height:1.6;
}

.house-playbar {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:15px;
  min-height:38px;
  font-size:10px;
  color:var(--muted);
}

.house-playbar button {
  background:transparent;
  border:1px solid var(--button-border);
  border-radius:3px;
  padding:10px 14px;
  font-size:11px;
}

.house-playbar button:hover {
  background:var(--green);
  color:var(--button-ink);
  border-color:var(--green);
}

.room-shortcuts button.is-visited:not([aria-pressed="true"]) {
  border-bottom-color:var(--orange);
}

.room-effect {
  pointer-events:none;
}

.camera-flash,
.kitchen-steam,
.screen-cursor {
  opacity:0;
}

.shop-bell {
  transform-box:fill-box;
  transform-origin:50% 0;
}

.chalk-line {
  stroke-dasharray:70;
  stroke-dashoffset:70;
}

.room.is-entering .camera-flash {
  animation:camera-flash .7s ease-out;
}

.room.is-entering .shop-bell {
  animation:bell-ring .8s ease-out;
}

.room.is-entering .chalk-line {
  animation:chalk-write .8s ease-out forwards;
}

.room.is-entering .screen-cursor {
  animation:cursor-blink .6s steps(2,end) 3;
}

.room.is-entering .kitchen-steam {
  animation:steam-rise 1s ease-out 2;
}

.room.is-entering .office-paper {
  animation:paper-arrive .6s ease-out;
}

.garden-plant {
  cursor:pointer;
  outline:none;
}

.garden-leaves {
  transform-box:fill-box;
  transform-origin:center bottom;
  transition:filter .2s ease;
}

.garden-plant:hover .garden-leaves,
.garden-plant:focus-visible .garden-leaves {
  filter:drop-shadow(0 0 3px var(--orange));
}

.water-drops {
  opacity:0;
  pointer-events:none;
}

.garden-plant.is-watered .garden-leaves {
  animation:plant-sway 1.1s ease-in-out;
}

.garden-plant.is-watered .water-drops {
  animation:water-fall .8s ease-in;
}

@keyframes camera-flash {
  0%,100% { opacity:0; }
  22% { opacity:.85; }
}

@keyframes bell-ring {
  0%,100% { transform:rotate(0); }
  20%,60% { transform:rotate(14deg); }
  40%,80% { transform:rotate(-10deg); }
}

@keyframes chalk-write {
  to { stroke-dashoffset:0; }
}

@keyframes cursor-blink {
  0%,100% { opacity:0; }
  50% { opacity:1; }
}

@keyframes steam-rise {
  0% { opacity:0; transform:translateY(5px); }
  35% { opacity:.8; }
  100% { opacity:0; transform:translateY(-13px); }
}

@keyframes paper-arrive {
  from { opacity:0; transform:translateY(-14px) rotate(-4deg); }
  to { opacity:1; transform:translateY(0) rotate(0); }
}

@keyframes plant-sway {
  0%,100% { transform:rotate(0) scale(1); }
  25% { transform:rotate(-5deg) scale(1.04); }
  60% { transform:rotate(4deg) scale(1.08); }
  80% { transform:rotate(-2deg) scale(1.03); }
}

@keyframes water-fall {
  0% { opacity:0; transform:translateY(-10px); }
  25% { opacity:1; }
  100% { opacity:0; transform:translateY(28px); }
}

@media(max-width:620px) {
  .house-playbar {
    gap:12px;
    margin:12px 8px 4px;
  }
  .house-playbar button {
    min-height:42px;
    flex-shrink:0;
  }
  #explored-count {
    max-width:180px;
    line-height:1.6;
  }
}

@media(prefers-reduced-motion:reduce) {
  .room.is-preview .room-content {
    transform:none;
  }
}

.project-icon {
  position:relative;
}

.project-icon img {
  position:absolute;
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:0;
}

.project-icon.has-favicon img {
  opacity:1;
}

.project-icon.has-favicon .project-initial {
  visibility:hidden;
}

.canvas-note h1 {
  font:inherit;
  letter-spacing:inherit;
  margin:0;
}

/* Place the foundation courses, then build each storey up to the roof. */
.build-part {
  transform-box:fill-box;
  transform-origin:center bottom;
}

.house-building:not(.house-assembling) .build-part {
  opacity:0;
}

.house-assembling .build-part {
  animation:construct-block var(--build-duration, 380ms) cubic-bezier(.22,1,.36,1) var(--build-delay, 0ms) both;
}

.house-assembling [data-build-kind="foundation"] {
  animation-name:construct-foundation;
}

.house-assembling [data-build-kind="frame"] {
  animation-name:construct-frame;
}

.house-assembling [data-build-kind="roof"] {
  animation-name:construct-roof;
}

.house-assembling [data-build-kind="detail"] {
  animation-name:construct-detail;
}

@keyframes construct-foundation {
  from { opacity:0; transform:translateY(-14px) scaleX(.94); }
  to { opacity:1; transform:translateY(0) scaleX(1); }
}

@keyframes construct-frame {
  from { opacity:0; clip-path:inset(100% 0 0 0); }
  to { opacity:1; clip-path:inset(0 0 0 0); }
}

@keyframes construct-block {
  from { opacity:0; transform:translateY(-32px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes construct-roof {
  from { opacity:0; transform:translateY(-55px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes construct-detail {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

@media(prefers-reduced-motion:reduce) {
  .house-building .build-part {
    opacity:1;
    transform:none;
    clip-path:none;
    animation:none!important;
  }
}