:root {
  color-scheme: dark;
  --bg: #0d0e0d;
  --bg-soft: #111310;
  --surface: #171a17;
  --surface-lit: #1d221e;
  --edge: #292d29;
  --text: #d8d9d3;
  --muted: #777a73;
  --dim: #4c504a;
  --green: #8da990;
  --green-bright: #bad0ba;
  --shadow: rgba(0, 0, 0, .58);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { min-width: 280px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
}

button, input { font: inherit; }

button { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.room {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(26px + var(--safe-top)) clamp(22px, 4vw, 62px) calc(20px + var(--safe-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 42% at 50% 58%, rgba(70, 82, 70, .10), transparent 72%),
    linear-gradient(90deg, transparent 49.92%, rgba(255, 255, 255, .016) 50%, transparent 50.08%),
    linear-gradient(180deg, #10110f 0%, #0d0e0d 72%, #0a0b0a 100%);
}

.room::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17%;
  border-top: 1px solid rgba(255, 255, 255, .025);
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .16));
  transform: perspective(600px) rotateX(3deg);
  transform-origin: bottom;
}

.ambient-status {
  position: absolute;
  top: calc(30px + var(--safe-top));
  right: clamp(22px, 4vw, 62px);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: .18em;
}

.ambient-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(141, 169, 144, .38);
  animation: breathe 4.8s ease-in-out infinite;
}

.room-mark {
  position: absolute;
  top: calc(25px + var(--safe-top));
  left: clamp(22px, 4vw, 62px);
  margin: 0;
  color: #343733;
  font-size: 9px;
  letter-spacing: .2em;
}

.machine-stage {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(720px, 88vw);
  min-height: 370px;
  margin-bottom: clamp(22px, 5vh, 58px);
}

.table {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: min(600px, 88%);
  height: 136px;
  transform: translateX(-50%);
  opacity: .88;
}

.table__top {
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  border-top: 1px solid #252824;
  background: #171916;
  box-shadow: 0 24px 42px rgba(0, 0, 0, .42);
}

.table__leg {
  position: absolute;
  top: 9px;
  width: 4px;
  height: 127px;
  background: linear-gradient(90deg, #111210, #1d1f1c, #111210);
}

.table__leg--left { left: 9%; }
.table__leg--right { right: 9%; }

.machine {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 102px;
  width: 306px;
  min-height: 190px;
  padding: 12px;
  border: 1px solid #2b2f2a;
  border-radius: 11px 11px 8px 8px;
  background: linear-gradient(145deg, #1b1e1a, #121411 75%);
  box-shadow: 0 28px 60px var(--shadow), inset 0 1px rgba(255, 255, 255, .03);
  transform: translateX(-50%);
  transition: width .45s cubic-bezier(.2, .8, .2, 1), min-height .45s cubic-bezier(.2, .8, .2, 1), bottom .45s ease, box-shadow .45s ease;
}

.machine::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -3px;
  height: 2px;
  border-radius: 50%;
  background: #30342f;
}

.machine__wake {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.machine__screen {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 164px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #222720;
  border-radius: 4px;
  text-align: center;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 50% 44%, rgba(116, 144, 119, .075), transparent 62%),
    #080b08;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .72);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}

.machine__eyebrow,
.machine__place,
.machine__hint { display: block; }

.machine__eyebrow {
  color: #a5aba2;
  font-size: 10px;
  letter-spacing: .26em;
}

.machine__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
  color: var(--green);
  font-size: 8px;
  letter-spacing: .18em;
}

.machine__state-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 9px rgba(186, 208, 186, .5);
}

.machine__time {
  display: block;
  margin-top: 17px;
  color: #c7cbc3;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}

.machine__place {
  margin-top: 4px;
  color: #51574f;
  font-size: 7px;
  letter-spacing: .23em;
}

.machine__hint {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  color: #343a34;
  font-size: 6px;
  letter-spacing: .18em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .3s ease, transform .3s ease;
}

.machine__wake:hover .machine__screen,
.machine__wake:focus-visible .machine__screen {
  border-color: #384138;
  background-color: #0a0e0a;
  box-shadow: inset 0 0 34px rgba(40, 60, 42, .22), 0 0 24px rgba(80, 112, 83, .055);
}

.machine__wake:hover .machine__hint,
.machine__wake:focus-visible .machine__hint { opacity: 1; transform: translateY(0); }

.machine__wake:focus-visible { outline: 1px solid #59665a; outline-offset: 5px; }

.machine.is-awake {
  width: min(460px, calc(100vw - 44px));
  min-height: 296px;
  bottom: 68px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .7), 0 0 50px rgba(84, 111, 86, .04), inset 0 1px rgba(255, 255, 255, .035);
}

.machine.is-awake .machine__wake { display: none; }

.terminal {
  display: grid;
  grid-template-rows: minmax(150px, 1fr) auto auto;
  min-height: 270px;
  padding: 16px 16px 12px;
  border: 1px solid #273027;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 4px),
    #080b08;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .72);
}

.terminal[hidden] { display: none; }

.terminal__log {
  max-height: 164px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #30372f transparent;
  color: #9ea69c;
  font-size: 11px;
  line-height: 1.65;
  text-align: left;
}

.terminal__line { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal__line--user { color: #727970; }
.terminal__line--system { color: #b3beb1; }

.terminal__form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border-bottom: 1px solid #333a32;
}

.terminal__prompt { color: var(--green); font-size: 15px; }

.terminal__form input {
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: 0;
  color: #d1d7ce;
  background: transparent;
  caret-color: var(--green-bright);
  font-size: 13px;
}

.terminal__form button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: #596259;
  background: transparent;
  cursor: pointer;
}

.terminal__form button:hover,
.terminal__form button:focus-visible { color: var(--green-bright); outline: 0; }

.terminal__note {
  margin: 9px 0 0;
  color: #424841;
  font-size: 7px;
  letter-spacing: .08em;
  text-align: left;
}

kbd { font: inherit; color: #687068; }

.motto {
  align-self: end;
  justify-self: center;
  margin: 0 0 clamp(22px, 3vh, 38px);
  color: #686b65;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 350;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .04em;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #373a36;
  font-size: 7px;
  letter-spacing: .14em;
}

.room.is-idle .machine { filter: brightness(.72); }
.room.is-idle .ambient-status__dot { background: #62675f; box-shadow: none; animation: none; }

@keyframes breathe {
  0%, 100% { opacity: .4; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 640px) {
  .ambient-status__label { display: none; }
  .ambient-status { gap: 0; }

  .room {
    grid-template-rows: 1fr auto auto;
    padding-right: 20px;
    padding-left: 20px;
  }

  .machine-stage {
    width: 100%;
    min-height: 330px;
    margin-bottom: clamp(12px, 2.5vh, 26px);
  }

  .table { width: 92%; height: 116px; }
  .table__leg { height: 107px; }

  .machine {
    bottom: 84px;
    width: min(278px, calc(100vw - 54px));
    min-height: 174px;
    padding: 10px;
  }

  .machine__screen { min-height: 152px; }

  .machine.is-awake {
    bottom: 40px;
    width: calc(100vw - 40px);
    min-height: 284px;
  }

  .terminal { min-height: 260px; padding: 14px 13px 11px; }
  .terminal__log { max-height: 155px; font-size: 10px; }
  .motto { margin-bottom: 22px; font-size: 13px; }
  footer { font-size: 6px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .room { grid-template-rows: 1fr auto; padding-top: calc(16px + var(--safe-top)); }
  .machine-stage { min-height: 250px; margin-bottom: 8px; }
  .table { height: 88px; }
  .table__leg { height: 79px; }
  .machine { bottom: 61px; transform: translateX(-50%) scale(.86); }
  .machine.is-awake { bottom: 13px; transform: translateX(-50%) scale(.88); }
  .motto { display: none; }
  footer { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}