/* development/archive-20-isolated-safari/workspace/src/index.css */
:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
  --sans:
    system-ui,
    "Segoe UI",
    Roboto,
    sans-serif;
  --heading:
    system-ui,
    "Segoe UI",
    Roboto,
    sans-serif;
  --mono:
    ui-monospace,
    Consolas,
    monospace;
  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @media (max-width: 1024px) {
    font-size: 16px;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }
  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}
#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body {
  margin: 0;
}
h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}
h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}
code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}
code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}

/* development/archive-20-isolated-safari/workspace/src/designLanguage.css */
:root {
  --participant-font:
    "Fraunces",
    Georgia,
    serif;
  --serif: var(--participant-font);
  --sans: var(--participant-font);
}

/* development/archive-20-isolated-safari/workspace/src/HomeownerApp.css */
:root {
  --boadi-visual-height: 100dvh;
  --stone: #EDEAE4;
  --stone-dim: #E2DED5;
  --ink: #2B2E2C;
  --ink-soft: #545750;
  --sage: #8B6A47;
  --sage-dim: #A98861;
  --umber-deep: #5C4530;
  --umber-shadow: #4A3826;
  --serif:
    "Fraunces",
    Georgia,
    serif;
  --sans:
    "Inter",
    -apple-system,
    sans-serif;
}
* {
  box-sizing: border-box;
}
.homeowner {
  width: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--stone);
}
.room {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--boadi-visual-height, 100dvh);
  width: 100%;
  height: var(--boadi-visual-height, 100dvh);
  min-height: var(--boadi-visual-height, 100dvh);
  max-height: var(--boadi-visual-height, 100dvh);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--stone);
}
.room.is-entrance-leaving {
  opacity: 0;
  transition: opacity 2.6s ease;
  pointer-events: none;
}
#welcome {
  overflow: hidden;
}
.welcome-content {
  position: relative;
  z-index: 1;
  margin-top: 26svh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.room-word {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #6B5D49;
  opacity: 0;
  animation: settle 4.2s ease 0.8s forwards;
  will-change: opacity;
}
.welcome-next {
  position: absolute;
  right: clamp(28px, 5vw, 76px);
  bottom: calc(env(safe-area-inset-bottom) + clamp(72px, 9svh, 96px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0;
  animation: invitationAppear 2.2s ease 5.8s forwards, invitationSettle 2.6s ease 9.2s forwards;
}
.welcome-next.is-room-inactive {
  opacity: 0 !important;
  pointer-events: none;
}
.welcome-next .chevron,
.recognition-next .chevron {
  width: 1px;
  height: 30px;
  align-self: center;
  background: rgba(92, 69, 48, 0.16);
  position: relative;
  overflow: hidden;
}
.welcome-next .chevron::after,
.recognition-next .chevron::after {
  content: "";
  position: absolute;
  top: -36%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--umber-deep);
  opacity: 0;
  animation: roomHeartbeat 2.9s linear infinite;
}
.room--process {
  justify-content: center;
  position: relative;
  padding: clamp(24px, 5vh, 60px) 8vw;
  overflow: hidden;
  background: var(--stone);
}
.room--process .room-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-9svh);
}
.recognition-line {
  --reveal-speed: 4s;
  margin: 0 0 clamp(42px, 6vh, 72px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vh, 1.24rem);
  line-height: 1.75;
  opacity: 0;
  color: #E8E5DF;
  filter: none;
  transform: none;
  transition: color var(--reveal-speed) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.recognition-line:last-child {
  margin-bottom: 0;
}
.recognition-line.in-view {
  opacity: 1;
  color: var(--ink-soft);
  filter: none;
}
.recognition-next {
  position: absolute;
  right: clamp(18px, 4vw, 64px);
  bottom: calc(env(safe-area-inset-bottom) + clamp(46px, 7svh, 72px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 1.8s ease;
}
.recognition-next.in-view {
  opacity: 0;
}
.recognition-next.in-view.is-room-active {
  opacity: 0.76;
}
.recognition-next .chevron {
  width: 1px;
  height: 30px;
  background: rgba(92, 69, 48, 0.16);
}
.recognition-next .chevron::after {
  height: 40%;
  background: var(--umber-deep);
  animation-duration: 2.9s;
}
.recognition-next:not(.is-room-active) .chevron::after {
  animation-play-state: paused;
}
.room--inquiry {
  background: var(--stone);
}
@keyframes settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}
@keyframes invitationAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.62;
  }
}
@keyframes invitationSettle {
  from {
    opacity: 0.62;
  }
  to {
    opacity: 0.46;
  }
}
@keyframes roomHeartbeat {
  0% {
    top: -36%;
    opacity: 0;
  }
  12% {
    opacity: 0.48;
  }
  82% {
    top: 100%;
    opacity: 0.48;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .welcome-content {
    margin-top: 29svh;
  }
}
@media (min-width: 768px) {
  .recognition-line {
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  }
}
html:has(.homeowner) {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--stone);
}
html:has(.homeowner),
html:has(.homeowner) body,
html:has(.homeowner) #root {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 100%;
  background: var(--stone);
}
html:has(.homeowner) body {
  overflow-x: hidden;
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.homeowner) {
    scroll-behavior: auto;
  }
  .room-word,
  .welcome-next,
  .welcome-next .chevron::after,
  .recognition-next .chevron::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .recognition-line,
  .recognition-next {
    transition-duration: 0.01ms !important;
  }
}
.room--inquiry {
  justify-content: center;
  padding: clamp(24px, 5vh, 60px) 8vw;
}
.room--inquiry .room-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.inquiry {
  width: min(100%, 420px);
  margin-top: clamp(28px, 4.6vh, 46px);
  padding-top: clamp(20px, 3.6vh, 34px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2.8s ease;
}
.inquiry-heading {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vh, 1.25rem);
  line-height: 1.4;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 3s ease, transform 3s ease;
}
#inquiry-form {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2s ease, transform 2s ease;
}
.inquiry.is-visible .inquiry-heading {
  opacity: 1;
  transform: translateY(0);
}
.inquiry.is-visible #inquiry-form {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.8s;
}
.field {
  position: relative;
  margin-bottom: clamp(24px, 4vh, 36px);
  text-align: left;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.field input {
  width: 100%;
  padding: 8px 2px 10px;
  font-family: var(--sans);
  font-size: 0.96rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.field input:focus {
  background: rgba(139, 106, 71, 0.025);
  box-shadow: inset 0 -1px 0 rgba(139, 106, 71, 0.16);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
.submit-btn {
  position: relative;
  min-width: 64px;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 2px 0.12em;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.5s ease, opacity 0.5s ease;
}
.submit-btn:hover,
.submit-btn:focus-visible {
  color: var(--ink);
}
.submit-btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
html.entrance-form-active {
  scroll-snap-type: none !important;
}
html.entrance-form-active .room {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
@media (max-width: 640px) {
  .room--inquiry {
    padding-left: 24px;
    padding-right: 24px;
  }
  .inquiry {
    margin-top: 80px;
    padding-top: 50px;
  }
  .field input {
    font-size: 16px;
  }
}
.room--inquiry {
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
.room--inquiry .room-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}
.inquiry {
  width: 100%;
  margin: clamp(28px, 4.6vh, 46px) 0 0;
  padding-top: clamp(20px, 3.6vh, 34px);
}
.inquiry-heading {
  margin: 0 0 clamp(18px, 3vh, 28px);
  opacity: 0;
  transform: translateY(4px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vh, 1.25rem);
  line-height: 1.4;
  color: var(--ink);
  transition: opacity 3s ease, transform 3s ease;
}
.inquiry-heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.identity-name {
  width: min(100%, 420px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 2s ease, transform 2s ease;
}
.identity-name.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.identity-name label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.identity-name input {
  width: 100%;
  padding: 8px 2px 10px;
  font-family: var(--sans);
  font-size: 0.96rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.identity-name input:focus {
  background: rgba(139, 106, 71, 0.025);
  box-shadow: inset 0 -1px 0 rgba(139, 106, 71, 0.16);
}
.identity-enter {
  position: relative;
  display: block;
  min-width: 64px;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 2px 0.12em;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity 1.8s ease,
    transform 1.8s ease,
    color 0.5s ease;
}
.identity-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.identity-enter::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 3px;
  width: calc(100% - 4px);
  height: 1px;
  background: rgba(92, 69, 48, 0.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}
.identity-enter:hover,
.identity-enter:focus-visible {
  color: var(--ink);
}
.identity-enter:hover::after,
.identity-enter:focus-visible::after {
  transform: scaleX(1);
}
.identity-enter:focus-visible {
  outline: 1px solid rgba(92, 69, 48, 0.28);
  outline-offset: 6px;
}
@media (max-width: 640px) {
  .room--inquiry .room-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .inquiry {
    margin-top: 80px;
    padding-top: 50px;
  }
  .identity-name input {
    font-size: 16px;
  }
}
html.entrance-form-active {
  scroll-snap-type: none !important;
}
html.entrance-form-active .room {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.room--inquiry {
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.room--inquiry .room-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.inquiry {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.inquiry-heading {
  width: 100%;
  margin: 0 0 clamp(26px, 4.2vh, 42px);
  text-align: center;
}
.identity-name {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.identity-name label {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}
.identity-name input {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 9px 8px 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  caret-color: var(--ink);
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 -1px 0 rgba(139, 106, 71, 0.12);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.6s ease, color 0.6s ease;
}
.identity-name input:focus,
.identity-name input:focus-visible {
  text-align: center;
  color: var(--ink);
  caret-color: var(--ink);
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: inset 0 -1px 0 rgba(139, 106, 71, 0.22);
}
.identity-name input:-webkit-autofill,
.identity-name input:-webkit-autofill:hover,
.identity-name input:-webkit-autofill:focus,
.identity-name input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--stone) inset, inset 0 -1px 0 rgba(139, 106, 71, 0.22) !important;
  box-shadow: 0 0 0 1000px var(--stone) inset, inset 0 -1px 0 rgba(139, 106, 71, 0.22) !important;
  background-color: var(--stone) !important;
  border-radius: 0;
  transition: background-color 9999s ease-out 0s;
}
.identity-name input:autofill {
  color: var(--ink);
  caret-color: var(--ink);
  background: var(--stone) !important;
  box-shadow: 0 0 0 1000px var(--stone) inset, inset 0 -1px 0 rgba(139, 106, 71, 0.22);
}
.identity-enter {
  align-self: center;
  min-width: 64px;
  margin: 18px auto 0;
  padding: 10px 8px 0.12em;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) {
  .room--inquiry {
    padding-left: 24px;
    padding-right: 24px;
  }
  .room--inquiry .room-inner {
    padding: 0;
  }
  .inquiry {
    margin: 0 auto;
    padding: 0;
  }
  .identity-name {
    width: min(100%, 340px);
  }
  .identity-name input {
    font-size: 16px;
    text-align: center;
  }
}
.identity-name input,
.identity-name input:focus,
.identity-name input:focus-visible {
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  caret-color: var(--ink-soft);
  box-shadow: none !important;
}
.identity-name input:-webkit-autofill,
.identity-name input:-webkit-autofill:hover,
.identity-name input:-webkit-autofill:focus,
.identity-name input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink-soft) !important;
  caret-color: var(--ink-soft) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--stone) inset !important;
  box-shadow: 0 0 0 1000px var(--stone) inset !important;
}
.identity-name input:autofill {
  color: var(--ink-soft);
  caret-color: var(--ink-soft);
  box-shadow: 0 0 0 1000px var(--stone) inset !important;
}
.identity-name {
  width: min(100%, 340px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.identity-name label {
  display: none !important;
}
.identity-name input {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 4px 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-soft);
  caret-color: var(--ink-soft);
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.identity-name input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
.identity-name input:focus,
.identity-name input:focus-visible {
  color: var(--ink-soft);
  caret-color: var(--ink-soft);
  text-align: center;
  background: transparent !important;
  background-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.identity-name input:-webkit-autofill,
.identity-name input:-webkit-autofill:hover,
.identity-name input:-webkit-autofill:focus,
.identity-name input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink-soft) !important;
  caret-color: var(--ink-soft) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--stone) inset !important;
  box-shadow: 0 0 0 1000px var(--stone) inset !important;
  background-color: var(--stone) !important;
  text-align: center;
}
.identity-enter {
  margin-top: 24px;
}
.recognition-line {
  color: var(--ink-soft);
  opacity: 0;
  filter: none;
  transform: none;
  transition: none;
  will-change: opacity;
}
.recognition-line.in-view {
  color: var(--ink-soft);
  opacity: 0;
  animation: settle 4s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .recognition-line.in-view {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.inquiry-heading {
  opacity: 0;
  transform: none;
  transition: none;
  will-change: opacity;
}
.inquiry-heading.is-visible {
  opacity: 0;
  transform: none;
  animation: settle 3s ease forwards;
}
.identity-name {
  opacity: 0;
  transform: none;
  transition: none;
  will-change: opacity;
}
.identity-name.is-visible {
  opacity: 0;
  transform: none;
  pointer-events: auto;
  animation: settle 2s ease forwards;
}
.identity-name input,
.identity-name input:focus,
.identity-name input:focus-visible {
  transform: none;
}
.identity-enter {
  opacity: 0;
  transform: none;
  transition: color 0.5s ease;
  will-change: opacity;
}
.identity-enter.is-visible {
  opacity: 0;
  transform: none;
  pointer-events: auto;
  animation: settle 2.3s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-heading.is-visible,
  .identity-name.is-visible,
  .identity-enter.is-visible {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.room--key {
  display: none;
  background: var(--stone);
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.room--key.is-entered {
  display: flex;
}
.key-threshold {
  width: min(100%, 420px);
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-4svh);
}
.key-greeting {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.1vh, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  will-change: opacity;
}
.key-greeting.is-visible {
  opacity: 0;
  animation: settle 3.2s ease forwards;
}
.create-key {
  min-width: 140px;
  min-height: 44px;
  margin-top: 30px;
  padding: 10px 4px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  outline: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: opacity;
}
.create-key.is-visible {
  opacity: 0;
  pointer-events: auto;
  animation: settle 2.3s ease forwards;
}
.key-greeting.is-leaving,
.create-key.is-leaving {
  pointer-events: none;
  animation: keyArrivalRelease 2.4s ease forwards;
}
@keyframes keyArrivalRelease {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
.create-key:hover,
.create-key:focus-visible {
  color: var(--ink);
}
.create-key:focus-visible {
  outline: 1px solid rgba(92, 69, 48, 0.28);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .key-greeting.is-visible,
  .create-key.is-visible {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
html:has(.homeowner--inside) {
  scroll-behavior: auto;
  scroll-snap-type: none;
  overflow: hidden;
}
html:has(.homeowner--inside) body,
html:has(.homeowner--inside) #root,
.homeowner--inside {
  height: var(--boadi-visual-height, 100dvh);
  min-height: var(--boadi-visual-height, 100dvh);
  overflow: hidden;
}
.homeowner--inside .room--key {
  display: flex;
  width: 100%;
  height: var(--boadi-visual-height, 100dvh);
  min-height: var(--boadi-visual-height, 100dvh);
  max-height: var(--boadi-visual-height, 100dvh);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.key-creating {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  animation: settle 1.8s ease forwards;
}
.key-creating span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.28;
  animation: keyQuietPulse 2.2s ease-in-out infinite;
}
.key-creating span:nth-child(2) {
  animation-delay: 0.28s;
}
.key-creating span:nth-child(3) {
  animation-delay: 0.56s;
}
.key-guidance {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.key-guidance-line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vh, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  opacity: 0;
  will-change: opacity;
}
.key-guidance-line--first {
  animation: settle 3.2s ease 0.6s forwards;
}
.key-guidance-line--second {
  margin-top: 34px;
  animation: settle 3.2s ease 4.7s forwards;
}
.key-continue,
.key-phrase-next,
.save-key {
  min-height: 44px;
  padding: 10px 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.key-continue {
  margin-top: 34px;
  opacity: 0;
  animation: settle 2.3s ease 8.6s forwards;
}
.key-phrase {
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  animation: settle 2.6s ease forwards;
}
.key-phrase-label {
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.key-phrase input {
  width: min(100%, 280px);
  padding: 8px;
  font-family: var(--sans);
  font-size: 16px;
  text-align: center;
  color: var(--ink-soft);
  caret-color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.key-phrase-next {
  margin-top: 20px;
}
.key-message,
.key-error {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--umber-deep);
}
.key-error {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(env(safe-area-inset-bottom) + 30px);
  text-align: center;
  opacity: 0;
  animation: settle 1.8s ease forwards;
}
.key-object-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-object {
  width: clamp(76px, 18vw, 104px);
  height: auto;
  overflow: visible;
}
.key-object-body {
  fill: #A98861;
  stroke: rgba(92, 69, 48, 0.22);
  stroke-width: 0.8;
}
.key-object-opening {
  fill: var(--stone);
}
.save-key {
  margin-top: 28px;
  opacity: 0;
  animation: settle 2.3s ease 0.4s forwards;
}
.key-yours {
  margin: 30px 0 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0;
  animation: settle 2.8s ease 0.5s forwards;
}
.key-threshold.is-furniture {
  width: 100%;
  height: 100%;
  padding: 28px 28px calc(env(safe-area-inset-bottom) + 28px);
  align-items: flex-end;
  justify-content: flex-end;
  transform: none;
}
.key-object-place.is-furniture {
  opacity: 0;
  animation: settle 3s ease forwards;
}
.key-object-place.is-furniture .key-object {
  width: 54px;
}
.key-object-place.is-furniture .key-yours,
.key-object-place.is-furniture .save-key {
  display: none;
}
@keyframes keyQuietPulse {
  0%, 100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.52;
  }
}
@media (prefers-reduced-motion: reduce) {
  .key-creating,
  .key-creating span,
  .key-guidance-line,
  .key-continue,
  .key-phrase,
  .key-object-place,
  .save-key,
  .key-yours,
  .key-error {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
.key-object {
  width: 44px;
  height: 44px;
  overflow: visible;
  display: block;
}
.key-object-mark {
  fill: none;
  stroke: #6B5D49;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}
.key-object-body,
.key-object-opening {
  display: none;
}
.key-object-place {
  min-width: 44px;
}
.key-object-place.is-furniture .key-object {
  width: 28px;
  height: 28px;
}
.key-object-place.is-furniture {
  min-width: 28px;
}
.key-threshold.is-furniture {
  padding: 24px 24px calc(env(safe-area-inset-bottom) + 22px);
}
.key-threshold {
  position: relative;
}
.key-phrase-input {
  -webkit-text-security: disc;
}
.key-object-place {
  min-width: 44px;
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-object {
  width: 44px;
  height: 44px;
  display: block;
  overflow: visible;
}
.key-object-mark {
  fill: none;
  stroke: #6B5D49;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}
.key-teaching-line {
  width: min(78vw, 340px);
  margin: 34px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2vh, 1.18rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  will-change: opacity;
}
.key-teaching-line.is-standard {
  animation: keyTeachingStandard 6s ease forwards;
}
.key-teaching-line.is-keep {
  animation: keyTeachingKeep 6.3s ease forwards;
}
.key-teaching-line.is-recovery {
  animation: keyTeachingRecovery 6.8s ease forwards;
}
@keyframes keyTeachingStandard {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.92;
  }
  75% {
    opacity: 0.92;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes keyTeachingKeep {
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0.92;
  }
  77% {
    opacity: 0.92;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes keyTeachingRecovery {
  0% {
    opacity: 0;
  }
  44% {
    opacity: 0.92;
  }
  80% {
    opacity: 0.92;
  }
  93% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.save-key {
  margin-top: 30px;
  opacity: 0;
  animation: settle 2.3s ease 0.8s forwards;
}
.key-object-place.is-receding {
  animation: keyCentralRecede 3s ease forwards !important;
}
@keyframes keyCentralRecede {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
.key-threshold.is-furniture {
  width: 100%;
  height: 100%;
  padding: 24px 24px calc(env(safe-area-inset-bottom) + 22px);
  align-items: flex-end;
  justify-content: flex-end;
  transform: none;
}
.key-furniture-button {
  width: 48px;
  height: 48px;
  margin: 0 -10px -10px 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: furnitureSettle 3s ease forwards;
}
.key-furniture-button .key-object {
  width: 28px;
  height: 28px;
}
.key-furniture-button .key-object-mark {
  opacity: 0.22;
  transition: opacity 2.8s ease;
}
.key-furniture-button.is-awake .key-object-mark {
  opacity: 0.82;
}
.key-furniture-button:focus-visible .key-object-mark {
  opacity: 0.82;
}
.key-furniture-button:focus-visible {
  outline: none;
}
@keyframes furnitureSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}
.key-possession {
  position: absolute;
  top: 42%;
  left: 24px;
  right: 24px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.04rem, 2vh, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  will-change: opacity;
  animation: keyPossession 10s ease forwards;
}
@keyframes keyPossession {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.92;
  }
  70% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}
.key-guidance,
.key-creating {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .key-object-place,
  .key-teaching-line,
  .save-key,
  .key-object-place.is-receding,
  .key-furniture-button,
  .key-possession {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .key-furniture-button .key-object-mark {
    transition-duration: 0.01ms !important;
  }
}
.key-phrase-restart {
  border: 0;
  padding: 0;
  margin: 18px 0 0;
  background: transparent;
  font: inherit;
  font-size: 0.82em;
  color: var(--ink-soft);
  opacity: 0.42;
  cursor: pointer;
  animation: key-phrase-restart-emerge 900ms ease both;
}
@keyframes key-phrase-restart-emerge {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.42;
  }
}
.key-phrase-restart:focus-visible {
  outline: none;
  opacity: 0.68;
}
.key-phrase-next {
  opacity: 0;
  pointer-events: none;
  animation: none;
}
.key-phrase-next.is-visible {
  pointer-events: auto;
  animation: settle 2.3s ease forwards;
}
.key-object {
  width: 44px;
  height: 44px;
  display: block;
  overflow: visible;
}
.key-object-mark {
  fill: none;
  stroke: #6B5D49;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}
.key-object-place {
  position: relative;
  width: min(100%, 360px);
  height: 226px;
  min-width: 0;
  margin: 0 auto;
  display: block;
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-object-anchor {
  position: absolute;
  top: 34px;
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
}
.key-ceremony-slot {
  position: absolute;
  top: 112px;
  left: 0;
  right: 0;
  height: 108px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.key-teaching-line {
  width: min(78vw, 340px);
  margin: 0;
  text-align: center;
}
.save-key {
  margin-top: 0;
}
.key-object-place.is-receding {
  animation: keyCentralRecede 3s ease forwards !important;
}
.key-furniture-button .key-object {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-next.is-visible,
  .key-object-place,
  .key-teaching-line,
  .save-key {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
.key-object-mark {
  stroke-linecap: round;
}
.key-threshold.is-teaching {
  width: 100%;
  height: 100%;
  transform: none;
}
.key-threshold.is-teaching .key-object-place {
  width: 100%;
  height: 100%;
  max-width: 430px;
}
.key-threshold.is-teaching .key-object-anchor {
  position: absolute;
  top: clamp(42px, 9vh, 78px);
  left: calc(50% - 22px);
  z-index: 2;
}
.key-threshold.is-teaching .key-ceremony-slot {
  position: absolute;
  top: clamp(118px, 20vh, 154px);
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: auto;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 26px 34px;
  text-align: center;
}
.key-threshold.is-teaching .key-ceremony-slot::-webkit-scrollbar {
  display: none;
}
.key-message-history {
  width: min(100%, 350px);
  min-height: 100%;
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.key-teaching-message {
  width: 100%;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2vh, 1.16rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: center;
  transform: translateY(0);
  transition: opacity 2.4s ease, transform 2.4s ease;
}
.key-teaching-message.is-current {
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-teaching-message.is-receded {
  opacity: 0.28;
  transform: translateY(-6px);
}
.key-message-history .save-key {
  margin: 12px 0 28px;
  flex: 0 0 auto;
}
.key-object-place.is-receding {
  animation: keyCentralRecede 3s ease forwards !important;
}
.key-possession {
  top: auto;
  right: auto;
  left: max(26px, env(safe-area-inset-left));
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 58px));
  width: min(72vw, 280px);
  text-align: left;
  animation: keyPossessionLong 13s ease forwards;
}
@keyframes keyPossessionLong {
  0% {
    opacity: 0;
  }
  31% {
    opacity: 0.92;
  }
  69% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .key-teaching-message.is-current,
  .key-possession {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
.key-object-mark {
  fill: none !important;
}
.key-object-gap {
  fill: var(--stone);
  stroke: none;
  pointer-events: none;
}
.key-phrase-intro {
  width: min(82vw, 350px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.key-phrase-intro-line {
  width: 100%;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.04rem, 2vh, 1.18rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  transition: opacity 2.4s ease, transform 2.4s ease;
}
.key-phrase-intro-line.is-current {
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-phrase-intro-line.is-receded {
  opacity: 0.28;
  transform: translateY(-6px);
}
.key-phrase-intro-line.is-waiting {
  opacity: 0;
  transform: translateY(0);
}
.key-threshold.is-teaching .key-object-place {
  opacity: 1;
  animation: none;
}
.key-threshold.is-teaching .key-object-anchor {
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-threshold.is-furniture .key-furniture-button {
  animation: furnitureSettle 3.2s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-current,
  .key-threshold.is-teaching .key-object-anchor,
  .key-threshold.is-furniture .key-furniture-button {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
.key-phrase-intro-line.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 2.4s ease, transform 2.4s ease;
}
.key-threshold.is-teaching .key-object-place.is-receding {
  width: 100%;
  height: 100%;
  max-width: 430px;
  animation: keyCentralRecede 3s ease forwards !important;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-leaving {
    transition-duration: 0.01ms !important;
  }
}
.key-object-completion {
  opacity: 0;
  transition: opacity 2.8s ease;
  pointer-events: none;
}
.key-object-completion.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .key-object-completion {
    transition-duration: 0.01ms !important;
  }
}
.key-phrase-intro-line.is-gone {
  opacity: 0;
  transform: translateY(-6px);
  animation: none !important;
  transition: none;
}
.key-phrase-intro-line.is-leaving {
  animation: phraseIntroFinalLeave 3.1s ease forwards !important;
}
@keyframes phraseIntroFinalLeave {
  0% {
    opacity: 0.92;
    transform: translateY(0);
  }
  34% {
    opacity: 0.92;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.key-object-mark {
  stroke-width: 3;
  vector-effect: none;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-leaving {
    animation-duration: 0.01ms !important;
  }
}
.key-threshold.is-door {
  width: 100%;
  height: 100%;
  transform: none;
}
.key-return-door {
  width: min(82vw, 360px);
  min-height: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}
.key-return-cue {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.25vh, 1.38rem);
  font-weight: 400;
  line-height: 1.55;
  opacity: 0;
  animation: settle 3.6s ease forwards;
}
.key-return-file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.key-return-action {
  appearance: none;
  border: 0;
  padding: 12px 16px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  animation: settle 2.8s ease 1.3s forwards;
}
.key-return-door > .key-object {
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  opacity: 0;
  animation: settle 3.4s ease forwards;
}
.key-return-phrase-input {
  width: min(74vw, 300px);
}
.key-return-error {
  margin-top: 2px;
}
.key-return-door .key-object.is-complete {
  animation: settle 3.8s ease forwards;
}
.key-return-door {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  display: block;
}
.key-return-key-anchor {
  position: absolute;
  top: 8.5%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  z-index: 2;
}
.key-return-key-anchor > .key-object {
  width: 58px;
  height: 58px;
  margin: 0;
  opacity: 1;
  animation: none;
}
.key-return-phrase-shell {
  position: absolute;
  top: 27%;
  left: 50%;
  width: min(82vw, 340px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  opacity: 1;
  pointer-events: auto;
}
.key-return-inline-phrase,
.key-return-inline-phrase:hover,
.key-return-inline-phrase:focus,
.key-return-inline-phrase:focus-visible,
.key-return-inline-phrase:active {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: min(76vw, 310px);
  min-height: 48px;
  margin: 0;
  padding: 8px 4px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ink-soft);
  caret-color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(1.08rem, 2.2vh, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.055em;
  text-align: center;
  -webkit-text-fill-color: var(--ink-soft);
  -webkit-text-security: disc;
  opacity: 0;
  animation: settle 3.2s ease forwards;
  -webkit-tap-highlight-color: transparent;
}
.key-return-inline-phrase::placeholder {
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  opacity: 0.92;
}
.key-return-continue {
  margin: 0;
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: none;
}
.key-return-continue.is-visible {
  pointer-events: auto;
  animation: settle 2.6s ease forwards;
}
.key-return-phrase-shell.is-leaving {
  pointer-events: none;
  animation: keyReturnPhraseLeave 1.05s ease forwards;
}
@keyframes keyReturnPhraseLeave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.key-object-completion {
  opacity: 0;
}
.key-object.is-complete .key-object-completion {
  opacity: 0;
  animation: keyRecognitionComplete 2.8s ease 1.15s forwards;
}
@keyframes keyRecognitionComplete {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.key-object.is-complete .key-object-mark--incomplete,
.key-object.is-incomplete .key-object-mark--incomplete {
  opacity: 1;
}
.key-return-door .key-object.is-complete {
  opacity: 1;
  animation: none;
}
.key-return-error {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(82vw, 340px);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .key-return-phrase-shell.is-leaving,
  .key-object.is-complete .key-object-completion {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}
.key-threshold.is-door {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  transform: none;
}
.key-return-door {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
}
.key-return-door > .key-return-cue {
  position: absolute;
  top: 25svh;
  left: 50%;
  width: min(82vw, 340px);
  transform: translateX(-50%);
  text-align: center;
}
.key-return-door > .key-return-action:not(.key-return-continue) {
  position: absolute;
  top: 33svh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.key-return-key-anchor {
  position: absolute;
  top: 19svh;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  z-index: 2;
}
.key-return-phrase-shell {
  position: absolute;
  top: 34svh;
  left: 50%;
  width: min(82vw, 340px);
  transform: translateX(-50%);
}
.key-return-error {
  top: 46svh;
}
html:has(.homeowner--inside),
html:has(.homeowner--inside) body {
  overscroll-behavior: none;
}
html:has(.homeowner--inside) body {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
.homeowner--inside .room--key {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
.key-phrase {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
}
.key-return-door.is-recognized .key-return-key-anchor {
  opacity: 1;
  animation: recognizedKeyRecede 2.2s ease 5.15s forwards;
}
@keyframes recognizedKeyRecede {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .key-return-door.is-recognized .key-return-key-anchor {
    animation-duration: 0.01ms !important;
    animation-delay: 5.15s !important;
  }
}
.key-threshold.is-door.is-door-credentials {
  width: min(100%, 420px);
  height: auto;
  min-height: 0;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-4svh);
}
.key-threshold.is-door-credentials .key-return-door {
  position: relative;
  width: min(100%, 340px);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.key-threshold.is-door-credentials .key-return-key-anchor {
  position: relative;
  top: auto;
  left: auto;
  width: 58px;
  height: 58px;
  margin: 0;
  transform: none;
  flex: 0 0 58px;
}
.key-threshold.is-door-credentials .key-return-phrase-shell {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 340px);
  margin: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.key-threshold.is-door-credentials .key-return-error {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 340px);
  margin: -12px 0 0;
  transform: none;
}
.key-phrase-input,
.key-return-inline-phrase {
  -webkit-user-select: text;
  user-select: text;
}
@media (prefers-reduced-motion: reduce) {
  .key-threshold.is-door.is-door-credentials {
    transform: translateY(-4svh);
  }
}
.key-phrase-intro-line.is-receded-leaving {
  animation: phraseIntroRecededLeave 3.1s ease forwards !important;
}
@keyframes phraseIntroRecededLeave {
  0% {
    opacity: 0.28;
    transform: translateY(-6px);
  }
  34% {
    opacity: 0.28;
    transform: translateY(-6px);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.key-phrase-input:-webkit-autofill,
.key-phrase-input:-webkit-autofill:hover,
.key-phrase-input:-webkit-autofill:focus,
.key-phrase-input:-webkit-autofill:active,
.key-return-phrase-input:-webkit-autofill,
.key-return-phrase-input:-webkit-autofill:hover,
.key-return-phrase-input:-webkit-autofill:focus,
.key-return-phrase-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink-soft) !important;
  caret-color: var(--ink-soft) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--stone) inset !important;
  box-shadow: 0 0 0 1000px var(--stone) inset !important;
  background-color: var(--stone) !important;
  border-radius: 0 !important;
  transition: background-color 9999s ease-out 0s !important;
}
.key-phrase-input:autofill,
.key-return-phrase-input:autofill {
  color: var(--ink-soft) !important;
  background: var(--stone) !important;
}
.key-phrase-label,
.key-phrase-next,
.save-key,
.key-return-action,
.key-return-cue {
  font-family: var(--participant-font) !important;
}
.key-phrase-next,
.save-key,
.key-return-action {
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-receded-leaving {
    animation-duration: 0.01ms !important;
  }
}
:root {
  --serif: var(--participant-font);
  --sans: var(--participant-font);
}
.inquiry-heading,
.identity-name label,
.identity-name input,
.identity-enter,
.key-greeting,
.create-key,
.key-phrase-intro-line,
.key-phrase-label,
.key-phrase-next,
.key-teaching-message,
.save-key,
.key-return-cue,
.key-return-action,
.key-return-inline-phrase {
  font-family: var(--participant-font) !important;
}
.create-key {
  font-size: 0.76rem;
  font-weight: 350;
  letter-spacing: 0.045em;
  transition: opacity 1.8s ease, color 0.5s ease;
}
.key-phrase-intro-line.is-current-memory {
  opacity: 0.92;
  transform: translateY(0);
  animation: none !important;
  transition: opacity 3.4s ease, transform 3.4s ease;
}
.key-phrase-intro-line.is-receded {
  opacity: 0.28;
  transform: translateY(-6px);
  transition: opacity 2.8s ease, transform 2.8s ease;
}
.key-phrase-intro-line.is-receded-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 2.8s ease, transform 2.8s ease;
}
.key-threshold.is-teaching .key-object-anchor {
  opacity: 0;
  animation: settle 4.6s ease 0.55s forwards;
}
.key-furniture-button .key-object-mark--furniture-complete {
  opacity: 0.22;
}
.key-furniture-button.is-awake .key-object-mark--furniture-complete,
.key-furniture-button:focus-visible .key-object-mark--furniture-complete {
  opacity: 0.82;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-receded,
  .key-phrase-intro-line.is-receded-leaving,
  .key-threshold.is-teaching .key-object-anchor {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}
.invitee-orientation {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.invitee-orientation-line {
  margin: 0;
  font-family: var(--participant-font);
  font-size: clamp(1.04rem, 2vh, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0;
  will-change: opacity;
}
.invitee-orientation-line + .invitee-orientation-line {
  margin-top: clamp(24px, 3.7vh, 36px);
}
.invitee-orientation-line.is-visible {
  animation: settle 4s ease forwards;
}
.invitee-orientation.is-leaving .invitee-orientation-line {
  animation: inviteeOrientationRelease 2.7s ease forwards;
}
@keyframes inviteeOrientationRelease {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invitee-orientation-line.is-visible,
  .invitee-orientation.is-leaving .invitee-orientation-line {
    animation-duration: 0.01ms !important;
  }
}
.key-phrase.is-leaving {
  pointer-events: none;
  animation: keyPhraseQuietLeave 2.6s ease forwards !important;
}
@keyframes keyPhraseQuietLeave {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase.is-leaving {
    animation-duration: 0.01ms !important;
  }
}
.key-phrase-intro-line {
  transform: none !important;
  transition: opacity 2.8s ease !important;
}
.key-phrase-intro-line.is-current {
  transform: none !important;
  animation: settle 3.4s ease forwards !important;
}
.key-phrase-intro-line.is-current-memory {
  opacity: 0.92;
  transform: none !important;
  animation: none !important;
  transition: opacity 3.4s ease !important;
}
.key-phrase-intro-line.is-receding-first {
  opacity: 0.28;
  transform: none !important;
  animation: keyPhraseFirstRecede 4.6s ease-in-out forwards !important;
  transition: none !important;
}
@keyframes keyPhraseFirstRecede {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0.28;
  }
}
.key-phrase-intro-line.is-receded {
  opacity: 0.28;
  transform: none !important;
  animation: none !important;
  transition: opacity 2.8s ease !important;
}
.key-phrase-intro-line.is-receded-leaving,
.key-phrase-intro-line.is-leaving {
  opacity: 0;
  transform: none !important;
  animation: none !important;
  transition: opacity 2.8s ease !important;
}
.invitee-orientation-line.is-restored {
  opacity: 0.92;
  animation: none !important;
}
.invitee-orientation-line.is-receded {
  opacity: 0.28;
  transform: none !important;
  animation: keyPhraseFirstRecede 4.6s ease-in-out forwards !important;
  transition: none !important;
}
.invitee-orientation-line.is-restored.is-receded {
  opacity: 0.28;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.invitee-orientation.is-leaving .invitee-orientation-line {
  transform: none !important;
  animation: inviteeOrientationSequentialRelease 2.8s ease forwards !important;
  animation-delay: calc(var(--orientation-index, 0) * 0.65s) !important;
}
@keyframes inviteeOrientationSequentialRelease {
  from {
    opacity: 0.28;
  }
  to {
    opacity: 0;
  }
}
.homeowner--invitee .key-teaching-message {
  transform: none !important;
  transition: opacity 2.8s ease !important;
}
.homeowner--invitee .key-teaching-message.is-current {
  transform: none !important;
  animation: inviteeTeachingAttention 5.4s ease forwards !important;
}
.homeowner--invitee .key-teaching-message.is-receded {
  opacity: 0.28;
  transform: none !important;
  animation: none !important;
}
@keyframes inviteeTeachingAttention {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0.92;
  }
  72% {
    opacity: 0.92;
  }
  100% {
    opacity: 0.28;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invitee-orientation-line.is-receded,
  .invitee-orientation.is-leaving .invitee-orientation-line,
  .homeowner--invitee .key-teaching-message.is-current,
  .homeowner--invitee .key-teaching-message.is-receded {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}
.invitee-orientation-line.is-receded,
.invitee-orientation-line.is-restored.is-receded {
  opacity: 0.92;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.invitee-orientation.is-leaving .invitee-orientation-line {
  transform: none !important;
  animation: inviteeOrientationGroupRelease 2.8s ease forwards !important;
  animation-delay: 0ms !important;
}
@keyframes inviteeOrientationGroupRelease {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invitee-orientation.is-leaving .invitee-orientation-line {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}
.key-phrase-intro-line {
  transform: none !important;
}
.key-phrase-intro-line.is-current {
  opacity: 0;
  transform: none !important;
  animation: settle 3.4s ease forwards !important;
}
.key-phrase-intro-line.is-waiting {
  opacity: 0;
  transform: none !important;
  animation: none !important;
}
.key-phrase-intro-line.is-leaving {
  opacity: 0;
  transform: none !important;
  animation: keyPhraseIntroGroupRelease 4.6s ease forwards !important;
  transition: none !important;
}
@keyframes keyPhraseIntroGroupRelease {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
.key-teaching-message,
.homeowner--invitee .key-teaching-message {
  transform: none !important;
  transition: opacity 2.8s ease !important;
}
.key-teaching-message.is-current,
.homeowner--invitee .key-teaching-message.is-current {
  transform: none !important;
  animation: inviteeTeachingAttention 5.4s ease forwards !important;
}
.key-teaching-message.is-receded,
.homeowner--invitee .key-teaching-message.is-receded {
  opacity: 0.28;
  transform: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .key-phrase-intro-line.is-leaving,
  .key-teaching-message.is-current,
  .key-teaching-message.is-receded,
  .homeowner--invitee .key-teaching-message.is-current,
  .homeowner--invitee .key-teaching-message.is-receded {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}
.development-invitation-handoff {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 1rem;
  width: min(92vw, 42rem);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid currentColor;
  background: var(--stone, #f3efe7);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 0.72rem;
  line-height: 1.2;
}
.development-invitation-handoff__label {
  white-space: nowrap;
}
.development-invitation-handoff__url {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.development-invitation-handoff__copy {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.invitation-secret-threshold {
  width: min(100%, 420px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4svh);
}
.invitation-secret-threshold.is-visible {
  pointer-events: auto;
  animation: invitationSecretSettle 3.4s ease forwards;
}
.invitation-secret-input {
  display: block;
  width: min(100%, 300px);
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  background: transparent;
  font-family: var(--participant-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  caret-color: var(--ink-soft);
  -webkit-text-security: none;
  -webkit-tap-highlight-color: transparent;
}
.invitation-secret-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.82;
  font-family: var(--participant-font);
  font-size: 1rem;
  font-weight: 350;
  letter-spacing: 0.04em;
  text-align: center;
}
.invitation-secret-input:focus,
.invitation-secret-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.invitation-secret-enter {
  margin-top: 0;
  animation-delay: 0s;
}
@keyframes invitationSecretSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-secret-threshold.is-visible {
    animation-duration: 0.01ms;
  }
}
.key-message-mismatch {
  animation: key-message-mismatch-emerge 900ms ease both;
}
.invitee-house-name-threshold {
  width: min(100%, 420px);
  display: grid;
  grid-template-rows: minmax(64px, auto) 52px 44px;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
.invitee-house-name-question {
  grid-row: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--participant-font);
  font-size: clamp(1.04rem, 2vh, 1.2rem);
  line-height: 1.65;
  animation: inviteeHouseNameEmerge 2.4s ease both;
}
.invitee-house-name-threshold .invitee-house-name-field,
.invitee-house-name-chosen {
  grid-row: 2;
  width: 100%;
  margin: 0;
  align-self: center;
  transform: none;
}
.invitee-house-name-threshold .invitee-house-name-field {
  animation: inviteeHouseNameEmerge 2.4s ease both;
}
.invitee-house-name-threshold .invitee-house-name-field input,
.invitee-house-name-chosen {
  font-family: var(--participant-font);
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.invitee-house-name-threshold .invitee-house-name-field input {
  text-align: center;
  caret-color: var(--ink-soft);
  outline: 0 !important;
  box-shadow: none !important;
}
.invitee-house-name-threshold .invitee-house-name-field input::placeholder {
  color: var(--ink-soft);
  opacity: 0.62;
  font-family: var(--participant-font);
  font-size: 0.94rem;
}
.invitee-house-name-threshold .invitee-house-name-field input:focus::placeholder {
  opacity: 0;
}
.invitee-house-name-threshold .invitee-house-name-field input:-webkit-autofill,
.invitee-house-name-threshold .invitee-house-name-field input:autofill {
  -webkit-text-fill-color: var(--ink-soft) !important;
  box-shadow: 0 0 0 1000px var(--stone) inset !important;
}
.invitee-house-name-continue {
  grid-row: 3;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  font-family: var(--participant-font);
  font-size: 1rem;
  color: var(--ink-soft);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
}
.invitee-house-name-continue.is-visible {
  visibility: visible;
  opacity: 1;
  cursor: pointer;
}
.house-name-question-release .invitee-house-name-question {
  animation: inviteeHouseNameRelease 2.4s ease forwards;
}
.house-name-release .invitee-house-name-chosen {
  animation: inviteeHouseNameRelease 2.4s ease forwards;
}
@keyframes inviteeHouseNameEmerge {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes inviteeHouseNameRelease {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invitee-house-name-threshold .invitee-house-name-question,
  .invitee-house-name-threshold .invitee-house-name-field,
  .invitee-house-name-threshold .invitee-house-name-chosen {
    animation-duration: 0.01ms;
  }
  .invitee-house-name-continue {
    transition-duration: 0.01ms;
  }
}
@keyframes key-message-mismatch-emerge {
  from {
    opacity: 0;
  }
}
.room--inquiry .creator-house-name-question {
  margin: 24px 0;
  color: var(--ink);
  font-family: var(--participant-font);
  font-size: clamp(1.04rem, 2vh, 1.2rem);
  line-height: 1.65;
  text-align: center;
  opacity: 0;
  transform: none;
}
.room--inquiry .creator-house-name-question.is-visible {
  animation: settle 3s ease forwards;
}
.room--inquiry .creator-house-name-question.is-restored {
  animation: none;
  opacity: 1;
}
.room--inquiry .identity-name input::placeholder {
  opacity: 0.62;
}
.room--inquiry .identity-name input:focus::placeholder {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .room--inquiry .creator-house-name-question.is-visible {
    animation-duration: 0.01ms !important;
  }
}

/* development/archive-20-isolated-safari/workspace/src/SaveFrontDoor.css */
.save-front-door {
  width: min(82vw, 28rem);
  text-align: center;
  color: var(--house-ink);
}
.save-front-door h1 {
  margin: 0 0 1.5rem;
  font: inherit;
  opacity: .64;
}
.save-front-door p {
  margin: 1.5rem 0;
  line-height: 1.6;
}
.save-front-door a {
  color: inherit;
  overflow-wrap: anywhere;
  text-underline-offset: .25em;
}
.save-front-door .save-front-door-note {
  font-size: .85em;
}
.save-front-door-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* development/archive-20-isolated-safari/workspace/src/house/House.css */
:root {
  --house-stone: #edeae4;
  --house-ink: #2b2e2c;
  --house-ink-soft: #545750;
  --house-welcome: #584B3A;
  --mobile-input-safe-zone: max(30svh, calc(env(safe-area-inset-bottom) + 205px));
  --mobile-input-scroll-zone: max(28svh, calc(env(safe-area-inset-bottom) + 190px));
}
html:has(.house),
html:has(.house) body,
html:has(.house) #root {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--house-stone);
}
html:has(.house) #root {
  max-width: none;
  text-align: initial;
}
.house,
.house * {
  box-sizing: border-box;
}
.house {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  color: var(--house-ink);
  background: var(--house-stone);
  font-family: var(--participant-font);
}
.house-field {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--house-stone);
}
.house-invitation-sequence {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 28px;
}
.house-invitation-sequence.is-waiting {
  align-items: center;
  justify-content: flex-end;
  padding: 32px 28px max(3svh, calc(env(safe-area-inset-bottom) + 18px));
}
.house-question,
.house-waiting-message {
  width: min(100%, 620px);
  margin: 0;
  text-align: center;
  font-family: var(--participant-font);
  font-weight: 300;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
}
.house-question {
  font-size: clamp(1rem, 2.25vw, 1.2rem);
  line-height: 1.55;
}
.house-waiting-message {
  font-size: clamp(1rem, 2.25vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  opacity: 1;
}
.house-quiet-input {
  display: block;
  width: min(100%, 340px);
  min-height: 44px;
  margin: 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  font-family: var(--participant-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--house-ink-soft);
  -webkit-text-fill-color: var(--house-ink-soft);
  background: transparent;
  box-shadow: none;
  caret-color: var(--house-ink-soft);
  -webkit-tap-highlight-color: transparent;
}
.house-quiet-input::placeholder {
  color: var(--house-ink-soft);
  opacity: 1;
  font-family: var(--participant-font);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
.house-quiet-input:focus,
.house-quiet-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.house-quiet-input:-webkit-autofill,
.house-quiet-input:-webkit-autofill:hover,
.house-quiet-input:-webkit-autofill:focus,
.house-quiet-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--house-ink-soft) !important;
  caret-color: var(--house-ink-soft);
  -webkit-box-shadow: 0 0 0 1000px var(--house-stone) inset !important;
  box-shadow: 0 0 0 1000px var(--house-stone) inset !important;
  transition: background-color 999999s ease-out 0s;
}
.house-quiet-input:autofill {
  color: var(--house-ink-soft);
  background: var(--house-stone);
}
.house-continue,
.house-create-room,
.house-room-name-cue,
.house-room-enter,
.conversation-share-action,
.conversation-house-link {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  appearance: none;
  font-family: var(--participant-font);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.house-create-room {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.house-create-room.is-populated {
  top: auto;
  bottom: 13svh;
  font-size: 0.78rem;
  font-weight: 350;
}
.house-create-room.is-populated.is-settling {
  animation: houseCreateRoomQuietSettle 3.8s ease forwards;
}
.house-create-room.is-dense {
  bottom: 11svh;
  font-size: 0.7rem;
}
.house-create-room.is-dense.is-settling {
  animation: houseCreateRoomDenseSettle 3.8s ease forwards;
}
@keyframes houseCreateRoomQuietSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.58;
  }
}
@keyframes houseCreateRoomDenseSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.38;
  }
}
.house-key-furniture {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: 0;
  color: var(--house-ink);
  background: transparent;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: houseFurnitureSettle 3s ease 0.45s forwards;
}
.house-key-object {
  width: 28px;
  height: 28px;
}
.house-key-object-mark {
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
  transition: opacity 2.8s ease;
}
.house-key-furniture.is-awake .house-key-object-mark,
.house-key-furniture:focus-visible .house-key-object-mark {
  opacity: 0.82;
}
@media (hover: hover) and (pointer: fine) {
  .house-key-furniture:hover .house-key-object-mark {
    opacity: 0.82;
  }
}
.house-key-furniture:focus-visible {
  outline: none;
}
.house-room-creation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
}
.house-room-explanation {
  width: min(100%, 620px);
  margin: 0;
  text-align: center;
  font-family: var(--participant-font);
  font-size: clamp(1rem, 2.25vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
}
.house-room-name-cue,
.house-room-name-label {
  border: 0;
  appearance: none;
  background: transparent;
  font-family: var(--participant-font);
  color: var(--house-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.house-room-name-cue,
.house-room-name-label {
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.house-room-name-entry {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.house-room-name-label {
  min-height: 34px;
  padding: 4px 8px;
}
.house-room-name-input {
  width: min(100%, 360px);
  min-height: 44px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  font-family: var(--participant-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--house-ink-soft);
  -webkit-text-fill-color: var(--house-ink-soft);
  background: transparent;
  box-shadow: none;
  caret-color: var(--house-ink-soft);
}
.house-room-name-input:focus,
.house-room-name-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.house-room-enter {
  margin-top: 6px;
}
.house-room {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  appearance: none;
  background: transparent;
  font-family: var(--participant-font);
  font-size: clamp(1.02rem, 2.8vw, 1.35rem);
  font-weight: 350;
  letter-spacing: 0.02em;
  color: var(--house-ink);
  opacity: 0.88;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.house-room.is-arriving {
  opacity: 0;
  animation: houseRoomsArrive 5.2s ease forwards;
}
@keyframes houseRoomsArrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.88;
  }
}
.house-room.needs-attention {
  color: #8a5d2d;
  transition: color 2.6s ease;
}
.house-room--0 {
  top: 29%;
  left: 14%;
}
.house-room--1 {
  top: 69%;
  left: 50%;
  transform: translateX(-50%);
}
.house-room--2 {
  top: 29%;
  right: 14%;
}
.house-room--3 {
  top: 51%;
  left: 12%;
}
.house-room--4 {
  top: 53%;
  right: 12%;
}
.house-room--5 {
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
}
.house-room--6 {
  top: 40%;
  left: 29%;
}
.house-room--7 {
  top: 41%;
  right: 27%;
}
.house-room--8 {
  top: 62%;
  left: 18%;
}
.house-room--9 {
  top: 64%;
  right: 17%;
}
.house-room--10 {
  top: 79%;
  left: 31%;
}
.house-room--11 {
  top: 80%;
  right: 29%;
}
.conversation-house-link {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.house-field--room {
  min-height: 100dvh;
  overflow: visible;
}
.conversation-room {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100dvh;
  overflow: visible;
  background: var(--house-stone);
}
.conversation-writing-cue {
  position: absolute;
  left: 50%;
  bottom: max(15svh, calc(env(safe-area-inset-bottom) + 90px));
  width: min(82vw, 560px);
  min-height: 44px;
  padding: 8px;
  border: 0;
  appearance: none;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--participant-font);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.conversation-draft-field {
  width: min(86vw, 680px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 46svh 0 var(--mobile-input-safe-zone);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}
.conversation-writing-label {
  align-self: center;
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  appearance: none;
  text-align: center;
  font-family: var(--participant-font);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
  background: transparent;
  opacity: 0.44;
  -webkit-tap-highlight-color: transparent;
}
.conversation-draft-sizer {
  display: grid;
  width: 100%;
  min-height: 48px;
}
.conversation-draft-input,
.conversation-draft-mirror {
  grid-area: 1 / 1;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 2px 4px;
  text-align: left;
  font-family: var(--participant-font);
  font-size: clamp(1.08rem, 3.8vw, 1.42rem);
  font-weight: 350;
  line-height: 1.65;
  letter-spacing: 0.012em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.conversation-draft-mirror {
  visibility: hidden;
  pointer-events: none;
}
.conversation-draft-input {
  height: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--house-ink);
  -webkit-text-fill-color: var(--house-ink);
  background: transparent;
  box-shadow: none;
  caret-color: var(--house-ink);
  scroll-margin-bottom: var(--mobile-input-safe-zone);
}
.conversation-draft-threshold {
  width: 100%;
  min-height: 64px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.conversation-share-copy {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 8px 0;
  text-align: left;
  font-family: var(--participant-font);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--house-ink-soft);
  pointer-events: none;
}
.conversation-share-action {
  position: static;
  margin-left: auto;
  padding: 10px 0 10px 18px;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.035em;
  background: transparent;
}
.conversation-shared-field {
  padding: 55svh min(10vw, 90px) 55svh;
  display: block;
}
.conversation-shared-contribution {
  width: min(78%, 540px);
  color: var(--house-ink);
  opacity: 0.22;
  transition: opacity 1.35s ease;
}
.conversation-shared-contribution.is-own {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}
.conversation-shared-contribution.is-other {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}
.conversation-shared-contribution.is-other .conversation-contribution-author {
  text-align: right;
}
.conversation-shared-contribution.is-in-presence {
  opacity: 0.94;
}
.conversation-contribution-author {
  margin: 0 0 18px;
  font-family: var(--participant-font);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.035em;
  color: var(--house-ink-soft);
  opacity: 0.68;
}
.conversation-contribution-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--participant-font);
  font-size: clamp(1.08rem, 3.8vw, 1.42rem);
  font-weight: 350;
  line-height: 1.65;
  letter-spacing: 0.012em;
  color: var(--house-ink);
}
@keyframes houseFurnitureSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}
.is-settling {
  opacity: 0;
  animation: houseSettle 3.8s ease forwards;
}
.is-releasing {
  opacity: 0.92;
  animation: houseRelease 1.6s ease forwards;
}
.house-question.is-releasing,
.house-room-explanation.is-releasing {
  animation-duration: 1.9s;
}
.house-waiting-message.is-settling {
  opacity: 1;
  animation: none;
}
@keyframes houseSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}
@keyframes houseRelease {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 0;
  }
}
@keyframes houseWaitingSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.42;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-settling,
  .is-releasing,
  .house-waiting-message,
  .house-key-furniture {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
}
.conversation-contribution-list {
  width: min(100%, 680px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.conversation-response-cue {
  align-self: center;
  width: min(82vw, 560px);
  min-height: 44px;
  margin: 18px auto 0;
  padding: 8px;
  border: 0;
  appearance: none;
  text-align: center;
  font-family: var(--participant-font);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: var(--house-ink-soft);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.conversation-draft-field.has-history {
  min-height: 88dvh;
  padding-top: 14svh;
  padding-bottom: var(--mobile-input-safe-zone);
}
.house-room-name-entry {
  padding-bottom: var(--mobile-input-safe-zone);
}
.mobile-input-control {
  scroll-margin-bottom: var(--mobile-input-safe-zone);
}
html:has(.house) {
  scroll-padding-bottom: var(--mobile-input-scroll-zone);
}
@media (prefers-reduced-motion: reduce) {
  .house-room.is-arriving {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
}
.house-waiting-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.house-waiting-invitation > span {
  opacity: 0;
}
.house-waiting-invitation > span:first-child {
  animation: pendingInvitationFirst 6.4s ease forwards;
}
.house-waiting-invitation > span:last-child {
  animation: pendingInvitationSecond 6.4s ease 4.9s forwards;
}
.house-waiting-invitation.is-quiet > span {
  opacity: 0.34;
  animation: none;
}
@keyframes pendingInvitationFirst {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.82;
  }
  68% {
    opacity: 0.82;
  }
  100% {
    opacity: 0.34;
  }
}
@keyframes pendingInvitationSecond {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.78;
  }
  68% {
    opacity: 0.78;
  }
  100% {
    opacity: 0.34;
  }
}
.house-waiting-invitation:focus,
.house-waiting-invitation:focus-visible {
  outline: 0;
}
.house-recovered-invitation-secret > span {
  opacity: 0;
  animation: none;
}

/* development/archive-20-isolated-safari/workspace/src/room/ParticipantRoom.css */
.participant-room {
  min-height: 100dvh;
  overflow-anchor: none;
  touch-action: pan-y pinch-zoom;
}
.participant-room .room-doorknob {
  position: fixed;
  top: var(--room-doorknob-top, 60dvh);
  left: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  animation: none;
}
.participant-room .room-doorknob span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--house-ink-soft);
  opacity: .55;
  pointer-events: none;
}
.participant-room .conversation-room {
  display: block;
  padding: 45svh 8vw calc(40svh + var(--keyboard-inset, 0px));
}
.participant-objects {
  display: flex;
  flex-direction: column;
  gap: 14svh;
}
.participant-object {
  position: relative;
  white-space: pre-wrap;
  opacity: .22;
  filter: blur(.35px);
  transition: opacity 1.6s ease, filter 1.6s ease;
}
.participant-object.is-in-presence {
  opacity: .94;
  filter: none;
}
.participant-object {
  width: min(75vw, 42rem);
}
.participant-object[data-state=draft] {
  opacity: .8;
  filter: none;
}
.participant-object .conversation-draft-input {
  display: block;
  width: 100%;
  min-height: 3em;
  max-height: calc(var(--writing-viewport, 100svh) * .55);
  resize: none;
  overflow-y: auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  white-space: pre-wrap;
  scroll-margin: 0;
}
.participant-draft-mirror {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.participant-object .conversation-draft-input::placeholder {
  color: var(--house-ink-soft);
  opacity: .44;
}
.participant-room .conversation-writing-cue {
  display: block;
  position: static;
  inset: auto;
  transform: none;
  width: min(75vw, 42rem);
  margin: 20svh 0 5svh;
  padding: 0;
  text-align: left;
  font-weight: 300;
  opacity: .34;
}
.participant-room .conversation-share-action {
  position: static;
  margin-top: 2rem;
}
.house-leave {
  position: fixed;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  opacity: .34;
}
.participant-key-space {
  position: fixed;
  inset: 0;
  z-index: 100;
  min-height: 100dvh;
  background: var(--house-stone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.participant-key-space button {
  border: 0;
  background: none;
  color: var(--house-ink);
  font: inherit;
  opacity: .44;
  min-height: 44px;
}
.participant-key-space p {
  opacity: .34;
}
.participant-object[data-state=draft] {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}
.participant-object.is-own:not([data-state=draft]) {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}
.participant-object.is-other:not([data-state=draft]) {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}
.participant-room .participant-object .conversation-contribution-author {
  display: block;
  position: static;
  text-align: inherit;
}
.participant-room .participant-object.is-own .conversation-contribution-author {
  text-align: right;
}
.participant-object:not([data-state=draft]).is-own {
  text-align: left;
}
.participant-object:not([data-state=draft]).is-other {
  text-align: left;
}
.participant-object .conversation-contribution-text {
  text-align: inherit;
}
.participant-room .conversation-draft-input {
  touch-action: auto;
}
.participant-room .conversation-writing-cue.is-settling {
  animation: participantWritingSettle 3.8s ease forwards;
}
@keyframes participantWritingSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: .34;
  }
}
.participant-room .conversation-draft-input::placeholder {
  font-size: .82rem;
  font-weight: 300;
}
.participant-room.has-initial-writing-position .conversation-room {
  padding-top: var(--initial-writing-top, 45svh);
}
.participant-writing-offset {
  margin-top: 6svh;
  margin-bottom: 5svh;
}
.participant-writing-offset:first-child {
  margin-top: 0;
}
.participant-writing-entry {
  opacity: .34;
  filter: none;
}
.participant-writing-entry .conversation-draft-input::placeholder {
  opacity: 1;
}
.participant-room .participant-object.participant-writing-offset {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}
.participant-writing-offset .conversation-draft-input,
.participant-writing-offset .conversation-draft-mirror {
  padding-left: 0;
  padding-right: 0;
  padding-top: max(0px, calc(22px - .825em));
}
.participant-object[data-state=canonical],
.participant-object[data-state=released] {
  width: 100%;
}
.participant-object:is([data-state=canonical], [data-state=released]) + .participant-object:is([data-state=canonical], [data-state=released]) {
  margin-top: calc(clamp(2rem, 4svh, 3rem) - 14svh);
}

/* development/archive-20-isolated-safari/workspace/src/EntranceHost.css */
.entrance-return-key {
  position: fixed;
  left: var(--entrance-corner-left, 18px);
  top: var(--entrance-corner-top, calc(100svh - 66px));
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: 0;
  color: var(--house-ink, #2b2e2c);
  background: transparent;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: houseFurnitureSettle 3s ease 0.45s forwards;
}
.entrance-return-key:disabled {
  cursor: default;
}
.entrance-return-key:focus-visible .house-key-object-mark {
  opacity: 0.82;
}
.entrance-return-action {
  position: fixed;
  left: var(--entrance-corner-left, 18px);
  top: var(--entrance-corner-top, calc(100svh - 66px));
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #2b2e2c;
  font: inherit;
  cursor: pointer;
}
.entrance-origin.is-paused *,
.entrance-origin.is-paused *::before,
.entrance-origin.is-paused *::after {
  animation-play-state: paused !important;
}
.entrance-recovery {
  position: fixed;
  left: 10%;
  right: 10%;
  bottom: 12%;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .entrance-return-key:hover .house-key-object-mark {
    opacity: 0.82;
  }
}
.entrance-origin.is-paused {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.entrance-return-key.is-hidden {
  visibility: hidden;
  pointer-events: none;
  animation-play-state: paused;
}

/* development/archive-20-isolated-safari/workspace/src/App.css */
.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
.hero {
  position: relative;
  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }
  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }
  .framework,
  .vite {
    position: absolute;
  }
  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);
  }
  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);
  }
}
#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;
  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}
#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;
  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }
  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }
  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}
#docs {
  border-right: 1px solid var(--border);
  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;
  .logo {
    height: 18px;
  }
  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }
  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    li {
      flex: 1 1 calc(50% - 8px);
    }
    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}
#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}
.ticks {
  position: relative;
  width: 100%;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }
  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}