:root {
  color-scheme: light;
  --ink: #303638;
  --mono: "SF Mono", "Cascadia Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --camera-size: 124px;
  --housing-rim: 9px;
  --plaster-edge: #ded8c9;
  --tile-edge: #bb975f;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--plaster-edge);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; -webkit-user-select: none; user-select: none; animation: intercom-arrive 550ms ease-out both; }
@keyframes intercom-arrive { from { opacity: 0; } to { opacity: 1; } }
.entrance { position: relative; min-height: 100dvh; isolation: isolate; overflow: clip; }
.wall {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: -2;
  background-color: #b59568;
  background-image:
    linear-gradient(180deg, #ded8c9 0 43px, #1d1c18 45px 86px, transparent 89px 298px, #171816 301px 315px, transparent 318px),
    repeating-linear-gradient(180deg, transparent 0 212px, #88765c 213px 216px),
    repeating-linear-gradient(90deg, transparent 0 212px, #88765c 213px 216px),
    linear-gradient(130deg, #c4a271, #ad8a5c);
  background-position: 0 0, 0 88px, 0 0, 0 0;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 360ms ease; }
.wall-edge { display: none; }
@media (any-pointer: coarse) {
  .wall-edge { display: block; position: fixed; inset: auto 0 0; height: max(4px, env(safe-area-inset-bottom)); background-color: var(--tile-edge); pointer-events: none; z-index: -1; }
  .wall-edge::before { content: ""; position: absolute; inset: auto 0 100%; height: 24px; background: linear-gradient(0deg, var(--tile-edge), transparent); }
}
main {
  --page-top: clamp(40px, 6vh, 72px);
  --page-side: 24px;
  --page-bottom: 48px;
  width: 100%;
  min-height: 100svh;
  padding: max(var(--page-top), env(safe-area-inset-top)) max(var(--page-side), env(safe-area-inset-right)) max(var(--page-bottom), env(safe-area-inset-bottom)) max(var(--page-side), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intercom {
  position: relative;
  flex: none;
  width: 410px;
  max-width: 100%;
  padding: 32px 40px 36px;
  border: 1px solid transparent;
  border-radius: 2px;
  isolation: isolate;
}
.intercom::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid #747e7e;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, transparent 0 1px, #edf1f006 1px 2px),
    linear-gradient(165deg, #bab7af, #98958c 70%, #858279);
  box-shadow: 12px 20px 26px #483a2352, 1px 2px 2px #332d2b45, inset 1px 1px 1px #edf0ea;
  pointer-events: none;
  transition: opacity 300ms ease 300ms;
}
.screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(140deg, #b1b9b9, #697375);
  box-shadow: 0 1px 2px #33352b75, inset 1px 1px 1px #fbf5e055;
  transition: opacity 300ms ease 300ms;
}
.screw::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 2px;
  right: 2px;
  top: 5px;
  background: #353d3f;
  transform: rotate(-30deg);
}
.screw-tl { top: 17px; left: 17px; }
.screw-tr { top: 17px; right: 17px; }
.screw-ml { top: 50%; left: 12px; }
.screw-mr { top: 50%; right: 12px; }
.screw-bl { bottom: 17px; left: 17px; }
.screw-br { bottom: 17px; right: 17px; }
.station { position: relative; isolation: isolate; }
.station::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--housing-rim));
  border: 1px solid #929591;
  border-radius: 5px;
  background: linear-gradient(165deg, #c3b9ab, #a49a8d 70%, #938a7d);
  box-shadow: 3px 4px 5px #36372e5e, inset 1px 1px 2px #f3eee173;
  z-index: -1;
  transition: opacity 300ms ease 300ms;
}
.intercom-header { text-align: center; display: grid; gap: 4px; }
.camera-module, .audio-module, .directory-module { border: 1px solid #666d6666; }
.camera-module { height: 208px; display: grid; align-content: center; justify-items: center; position: relative; }
.audio-module { min-height: 106px; padding: 28px 12px; display: grid; place-items: center; }
.directory-module { margin-top: 14px; padding: 16px 9px 12px; }
.camera-trigger { position: relative; display: grid; place-items: center; width: var(--camera-size); height: var(--camera-size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.camera-trigger:focus-visible { outline: 2px solid #6e5727; outline-offset: 5px; }
.camera-lids { position: absolute; top: 50%; left: 50%; width: calc(var(--camera-size) * .355); height: calc(var(--camera-size) * .355); transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; pointer-events: none; }
.camera-lids::before, .camera-lids::after { content: ""; position: absolute; left: 0; width: 100%; height: 51%; background: linear-gradient(#2f332e, #191c18); }
.camera-lids::before { top: 0; transform: translateY(-102%); }
.camera-lids::after { bottom: 0; transform: translateY(102%); }
.camera-trigger[data-blinking] .camera-lids::before { animation: camera-blink-top 360ms ease-in-out; }
.camera-trigger[data-blinking] .camera-lids::after { animation: camera-blink-bottom 360ms ease-in-out; }
@keyframes camera-blink-top { 0%, 100% { transform: translateY(-102%); } 28%, 39% { transform: translateY(0); } }
@keyframes camera-blink-bottom { 0%, 100% { transform: translateY(102%); } 28%, 39% { transform: translateY(0); } }
.camera {
  display: grid;
  place-items: center;
  width: var(--camera-size);
  height: var(--camera-size);
  margin: 0 auto;
  border: 1px solid #7c8280;
  border-radius: 50%;
  background: linear-gradient(135deg, #d1d3cf, #8e9592 65%, #c3c6c1);
  box-shadow: 0 2px 3px #242a2973, inset 0 1px 1px #f3f0df99;
  transition: opacity 300ms ease 300ms;
}
.camera span {
  width: calc(var(--camera-size) * .484);
  height: calc(var(--camera-size) * .484);
  border: calc(var(--camera-size) * .0484) solid #282e2c;
  border-radius: 50%;
  background: radial-gradient(ellipse at 32% 28%, #7a9193 0 8%, #2d4146 19%, #101819 50%);
  box-shadow: 0 0 0 1px #181c1b, inset 0 0 0 2px #425152;
}
.illuminator { width: calc(var(--camera-size) * .355); height: calc(var(--camera-size) * .129); margin-top: -4px; border-radius: 9px; background: #363b35; border: 1px solid #c5c5b9; box-shadow: inset 0 2px 3px #0008; transition: opacity 300ms ease 300ms; }
.speaker {
  width: 142px;
  height: 42px;
  margin: 0;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #a7aeab 5px 9px), repeating-linear-gradient(90deg, #242925 0 5px, #a7aeab 5px 9px);
  transition: opacity 300ms ease 300ms;
}
.floor { color: #292d29; text-shadow: 0 1px 0 #e4ebe857; }
.directory { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.property {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: #d6ba6f44;
  border-radius: 3px;
  cursor: pointer;
}
.floor { font-size: 12px; text-align: center; }
.nameplate {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  padding: 4px 9px;
  color: #e6dfc9;
  border: 1px solid transparent;
  border-radius: 4px;
  transform: translate(var(--plate-x, 0px), var(--plate-y, 0px)) rotate(var(--plate-angle, 0deg));
  transition: background 180ms ease, color 180ms ease;
}
.nameplate::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid #7e8986;
  border-radius: inherit;
  background: radial-gradient(ellipse at 104% 100%, #dba846 0, #624923 10%, transparent 38%), linear-gradient(180deg, #1b201b 0 72%, #414337 76%, #777564 94%, #b6b49a);
  box-shadow: inset 0 2px 4px #080b08b3, inset -2px -1px 4px #e7b75f42, 0 1px 1px #ffffe270;
  pointer-events: none;
  transition: opacity 300ms ease 300ms;
}
.name { font-size: 12px; line-height: 1.35; font-weight: 400; text-shadow: 0 0 4px #ffe7b424; }
.host { display: block; font-size: 9px; line-height: 1.3; color: #b4b3a0; margin-top: 1px; overflow-wrap: anywhere; }
.bell { display: grid; place-items: center; width: 44px; height: 44px; }
.bell-face {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #6b777b;
  border-radius: 50%;
  background: linear-gradient(140deg, #e9efed, #9ba8a8);
  box-shadow: 0 2px 3px #343e3f59, inset 1px 1px 1px #f5faf8;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 300ms ease 300ms;
}
.property:hover .nameplate, .property:focus-visible .nameplate { background-color: #ffe0a010; color: #fff3d6; }
html:not([data-scene="ready"]) .property:is(:hover, :focus-visible) .nameplate::before { animation: backlight-flicker 680ms linear; }
@keyframes backlight-flicker {
  0%, 34%, 53%, 84%, 100% { filter: brightness(1); }
  10%, 24% { filter: brightness(.48); }
  62%, 71% { filter: brightness(.7); }
}
.property:hover .bell-face, .property:focus-visible .bell-face {
  transform: translateY(1px) scale(.96);
  background: linear-gradient(140deg, #fff8df, #c6bb90);
  box-shadow: 0 1px 1px #4b472b55, inset 0 2px 3px #786c3c33, 0 0 12px #ffe6a85c;
}
.property:active .bell-face { transform: translateY(2px) scale(.91); box-shadow: inset 0 2px 4px #77735366; }
.property:focus-visible { outline: 2px solid #6e5727; outline-offset: 5px; }
.sticky-note {
  flex: none;
  position: relative;
  width: 222px;
  min-height: 137px;
  margin: -5px 0 0 48px;
  padding: 28px 22px 20px;
  color: #3b3c36;
  background:
    linear-gradient(168deg, transparent 52%, #736b5910 52.4%, #fffef859 53%, transparent 54%),
    linear-gradient(100deg, transparent 49%, #68685a09 50%, #fffef833 51%, transparent 52%),
    linear-gradient(163deg, #e9e5d8, #efeddf 73%, #d6d2c0);
  box-shadow: 1px 2px 2px #30291c38, 5px 11px 10px #30291c40;
  transform: rotate(-3deg) skewY(.4deg);
}
.sticky-note::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, transparent 94%, #b9b6a57a 95%, #f7f4e7 97%); box-shadow: inset 0 -1px 2px #ffffff70; pointer-events: none; }
.sticky-note p { position: relative; margin: 0; font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 20px; line-height: 1.28; letter-spacing: .01em; transform: rotate(.7deg); }
.note-heading { display: block; font-size: .9em; white-space: nowrap; }
.note-detail { display: block; font-size: .6em; white-space: nowrap; }
.tape {
  position: absolute;
  width: 98px;
  height: 31px;
  top: -13px;
  left: 58px;
  background: linear-gradient(116deg, #e8e9dd19 10%, #fffff144 11%, #d9dbd818 13% 45%, #fffff160 46%, #d9dbd824 49% 72%, #f5f8ed55 74%, #d5d6c91f 77%);
  border: 1px solid #e6e9dd52;
  box-shadow: 0 1px 1px #352c1729, inset 0 0 4px #ffffff1f;
  transform: rotate(7deg);
  clip-path: polygon(0 2%, 98% 0, 100% 25%, 97% 40%, 100% 55%, 98% 75%, 100% 100%, 1% 98%, 3% 75%, 0 55%, 2% 30%);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html[data-scene="ready"] #scene { opacity: 1; }
html[data-scene="ready"] .camera-module,
html[data-scene="ready"] .audio-module,
html[data-scene="ready"] .directory-module { border-color: transparent; }
html[data-scene="ready"] .intercom::before,
html[data-scene="ready"] .station::before,
html[data-scene="ready"] .nameplate::before,
html[data-scene="ready"] .bell-face,
html[data-scene="ready"] .camera,
html[data-scene="ready"] .illuminator,
html[data-scene="ready"] .speaker,
html[data-scene="ready"] .screw { opacity: 0; }
html[data-scene="ready"] .bell-face { transform: none; }
html[data-scene="ready"] .property:hover .nameplate,
html[data-scene="ready"] .property:focus-visible .nameplate { background: #fff1c508; }
@media (max-width: 600px) {
  :root {
    --camera-module-height: clamp(60px, min(21svh, calc(100svh - max(12px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)) - clamp(64px, 10svh, 76px) - 416px)), 158px);
    --camera-size: min(clamp(76px, 14svh, 104px), calc(var(--camera-module-height) - 20px));
    --housing-rim: 6px;
  }
  main { --page-top: 12px; --page-side: 32px; --page-bottom: 18px; }
  .intercom { width: 306px; padding: 20px; }
  .camera-module { height: var(--camera-module-height); }
  .audio-module { min-height: clamp(64px, 10svh, 76px); padding: 10px 8px; }
  .directory-module { margin-top: 10px; padding: 10px 5px 8px; }
  .directory { gap: 2px; }
  .screw-tl, .screw-tr { top: 3px; }
  .screw-bl, .screw-br { bottom: 3px; }
  .screw-tl, .screw-bl, .screw-ml { left: 3px; }
  .screw-tr, .screw-br, .screw-mr { right: 3px; }
  .property { grid-template-columns: 14px minmax(0, 1fr) 44px; min-height: 44px; gap: 5px; }
  .nameplate { min-height: 34px; padding: 3px 6px; }
  .name { font-size: 11px; }
  .host { font-size: 9px; }
  .sticky-note { width: 186px; min-height: 94px; margin: -4px 0 0 24px; padding: 18px 16px 14px; }
  .sticky-note p { font-size: 17px; line-height: 1.2; }
  .tape { width: 78px; height: 25px; left: 48px; top: -11px; }
}
@media (max-width: 600px) and (max-height: 640px) {
  :root {
    --camera-module-height: clamp(60px, calc(100svh - max(12px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)) - 437px), 92px);
    --camera-size: min(70px, calc(var(--camera-module-height) - 18px));
  }
  .audio-module { min-height: 44px; padding: 0; }
  .directory-module { margin-top: 7px; padding: 8px 4px 6px; }
  .sticky-note { min-height: 90px; padding-top: 17px; padding-bottom: 13px; }
  .sticky-note p { font-size: 16px; }
}
@media (max-width: 600px) and (max-height: 540px) {
  :root { --camera-size: 48px; }
  main { --page-top: 8px; --page-bottom: 12px; }
  .camera-module { height: 60px; }
  .audio-module { min-height: 34px; }
  .speaker { width: 101px; height: 30px; background-size: auto; }
  .directory-module { margin-top: 6px; padding-top: 5px; padding-bottom: 5px; }
  .sticky-note { min-height: 76px; padding-top: 14px; padding-bottom: 10px; }
  .sticky-note p { font-size: 14px; }
}
@media (max-width: 350px) {
  .name { font-size: 10.5px; }
}
@media (min-width: 601px) and (max-height: 500px) {
  :root { --camera-size: 96px; --housing-rim: 6px; }
  main { --page-top: 6px; --page-side: 32px; --page-bottom: 10px; }
  .intercom { width: 560px; padding: 20px; }
  .screw-tl, .screw-tr { top: 3px; }
  .screw-bl, .screw-br { bottom: 3px; }
  .screw-tl, .screw-bl, .screw-ml { left: 3px; }
  .screw-tr, .screw-br, .screw-mr { right: 3px; }
  .station { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
  .intercom-header { grid-template-rows: 1fr 64px; }
  .camera-module { height: auto; }
  .audio-module { min-height: 64px; padding: 8px 4px; }
  .directory-module { margin: 0; padding: 5px 4px; }
  .directory { gap: 2px; }
  .property { min-height: 44px; gap: 5px; }
  .nameplate { min-height: 34px; padding: 3px 6px; }
  .name { font-size: 11px; }
  .sticky-note { width: 176px; min-height: 64px; margin-top: -6px; padding: 10px 14px 6px; }
  .sticky-note p { font-size: 13px; line-height: 1.2; }
  .tape { width: 78px; height: 25px; left: 48px; top: -11px; }
}
@media (orientation: landscape) and (max-height: 360px) {
  :root { --camera-size: 72px; --housing-rim: 6px; }
  main { --page-top: 12px; --page-side: 16px; --page-bottom: 12px; flex-direction: row; gap: 14px; }
  .intercom { width: min(460px, calc(100vw - 174px)); padding: 20px; }
  .station { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; }
  .intercom-header { grid-template-rows: 1fr 44px; }
  .camera-module { height: auto; }
  .audio-module { min-height: 44px; padding: 0; }
  .speaker { width: 101px; height: 30px; }
  .directory-module { margin: 0; padding: 5px 4px; }
  .directory { gap: 2px; }
  .property { min-height: 44px; gap: 4px; }
  .nameplate { min-height: 34px; padding: 3px 5px; }
  .name { font-size: 10px; }
  .host { font-size: 8px; }
  .sticky-note { width: 112px; min-height: 76px; margin: 0; padding: 16px 10px 12px; align-self: flex-end; }
  .sticky-note p { font-size: 12px; line-height: 1.2; }
  .tape { left: 24px; width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .camera-trigger[data-blinking] .camera-lids { background: #f1ead033; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}