:root {
  --measure: 560px; 
  --wide: 1120px; 
  --page-gutter: var(--space-5);
  --band-gap: calc(var(--space-12) * 2);
  --flow: var(--space-8); 
  --flow-tight: var(--space-4); 
  --leading: 1.7; 
  --phone: 393px; 
  --visual-min: 96px; 
  --night-width: 240px; 
  --clock-size: 68px; 
  
  --pill-fill: var(--dark-text-secondary);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ground);
}


body {
  min-height: 100dvh;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.site-header,
main,
.site-footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right));
}

a {
  color: var(--accent-on-ground);
}

a:focus-visible {
  outline: 2px solid var(--accent-amber-bright);
  outline-offset: 2px;
}




.wordmark,
.night-mark {
  display: block;
  inline-size: auto;
}

.wordmark {
  block-size: var(--wordmark);
}


.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-capsule);
  background: var(--accent-amber-bright);
  color: var(--on-accent);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.button:focus-visible {
  outline-offset: 3px;
}


.link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target);
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.note {
  color: var(--text-secondary);
  font-size: var(--text-subheadline);
}

.card {
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
}


.points {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.points li {
  display: flex;
  gap: var(--space-3);
}

.points li::before {
  content: "";
  flex: none;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  margin-top: calc((var(--leading) * 1em - var(--space-2)) / 2);
  border-radius: 50%;
  background: var(--text-secondary);
}

.points--note li {
  color: var(--text-secondary);
  font-size: var(--text-subheadline);
}




.lamp {
  --lamp-size: var(--lamp-app);
  --lamp-scale: 1;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--lamp-size);
  block-size: var(--lamp-size);
  isolation: isolate;
}

.lamp--la {
  --lamp-size: var(--lamp-la);
}


.lamp::before,
.lamp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  transform: scale(var(--lamp-scale));
}

.lamp > span {
  font-family: var(--font-emoji);
  font-size: calc(var(--lamp-size) * var(--lamp-emoji-ratio));
  line-height: 1;
  transform: scale(var(--lamp-scale));
}

.lamp.is-awake::after {
  background: var(--accent);
}

.lamp.is-asleep {
  --lamp-scale: var(--lamp-asleep-scale);
}

.lamp.is-asleep::before {
  background: var(--dark-ground);
}

.lamp.is-asleep::after {
  background: var(--accent);
  opacity: var(--lamp-asleep-fill);
}

.lamp.is-asleep > span {
  opacity: var(--lamp-asleep-emoji);
}

.lamp.is-quiet::after {
  border: var(--lamp-outline) solid var(--text-secondary);
}

.lamp.is-quiet > span {
  opacity: var(--lamp-quiet-emoji);
}


.glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: var(--space-1);
}

.glyph > span {
  font-family: var(--font-emoji);
  font-size: var(--emoji-rect);
  line-height: 1;
  filter: brightness(0) invert(1);
}

.glyph.is-asleep > span {
  opacity: var(--lamp-asleep-emoji);
}

.glyph.is-quiet > span {
  opacity: var(--lamp-quiet-emoji);
}

.glyph.is-quiet::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--lamp-vibrant-ring) solid var(--text-secondary);
  border-radius: 50%;
}


.accent-coral {
  --accent: var(--accent-coral-bright);
}

.accent-amber {
  --accent: var(--accent-amber-bright);
}

.accent-grass {
  --accent: var(--accent-grass-bright);
}

.accent-sky {
  --accent: var(--accent-sky-bright);
}

.accent-wisteria {
  --accent: var(--accent-wisteria-bright);
}

.accent-sakura {
  --accent: var(--accent-sakura-bright);
}


.lamp-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.lamp-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.lamp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}


.lamp-time {
  display: flex;
  justify-content: center;
  inline-size: 0;
  color: var(--text-secondary);
  font-size: var(--text-time);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}


.lamp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lamp-grid > .lamp-cell {
  position: relative;
}


.lamp-name,
.pill,
.sample-button,
.night-room {
  font-size: var(--text-name);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.lamp-meta {
  color: var(--text-secondary);
  font-size: var(--text-state);
  line-height: 1.3;
}


.pill {
  position: absolute;
  top: 0;
  left: 50%;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-capsule);
  background: var(--pill-fill);
  color: var(--dark-ground);
  white-space: nowrap;
  transform: translate(-50%, -60%);
}


.lockscreen,
.demo,
.room {
  max-inline-size: var(--phone);
  margin-inline: auto;
}



.site-header {
  padding-top: max(var(--space-6), env(safe-area-inset-top));
}



.band {
  padding-top: var(--band-gap);
}

.band > * {
  margin-block: 0;
}

.band > * + * {
  margin-top: var(--flow);
}

.band > h2 + * {
  margin-top: var(--flow-tight);
}

.band > .note,
.band > .points--note,
.band > .more {
  margin-top: var(--flow-tight);
}

.band > h2 {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.more {
  margin-inline: calc(var(--space-4) * -1);
}



.hero {
  padding-top: var(--space-12);
}

.display {
  margin: 0;
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.lead {
  margin: var(--flow-tight) 0 0;
  color: var(--text-secondary);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--flow);
}

.cta .note {
  margin: 0;
}


.lockscreen {
  --screen-pad: var(--space-2);
  margin-top: var(--space-12);
  padding: var(--space-12) var(--screen-pad) var(--space-8);
  border-radius: calc(var(--radius-card) + var(--screen-pad));
  background: var(--surface);
  text-align: center;
}

.lockscreen-clock {
  margin: 0 0 var(--space-12);
  font-size: var(--clock-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.activity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  text-align: start;
  container-type: inline-size;
}

.activity-room {
  display: flex;
  flex: none;
  align-items: center;
  block-size: var(--lamp-la);
  font-family: var(--font-emoji);
  font-size: var(--emoji-la-room);
  line-height: 1;
}


@supports (width: 1cqi) {
  .activity .lamp--la {
    --lamp-size: min(var(--lamp-la), calc((100cqi - var(--emoji-la-room) - var(--space-2) * 5 - var(--space-4)) / 6));
  }
}

@media (min-width: 400px) {
  .lockscreen {
    --screen-pad: var(--space-4);
  }

  .activity {
    padding: var(--space-4);
  }
}


@media (prefers-reduced-motion: no-preference) {
  .hero .lamp {
    animation:
      lamp-on var(--motion-state) ease-in-out both,
      lamp-lit var(--motion-lit) var(--motion-lit-easing) both;
  }
}

@keyframes lamp-on {
  from {
    opacity: 0;
  }
}

@keyframes lamp-lit {
  from {
    transform: scale(var(--motion-lit-from));
  }
}



.surfaces {
  display: grid;
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.surface {
  display: grid;
  gap: var(--space-1);
}

.surface-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--visual-min);
  margin-bottom: var(--space-3);
}

.surface h3 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.surface p {
  margin: 0;
  color: var(--text-secondary);
}

.widget {
  display: grid;
  gap: var(--space-1);
}

.widget-room {
  margin: 0;
  padding-inline: var(--space-1);
  font-size: var(--text-state);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.glyph-row {
  display: flex;
}



.states {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.state {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.state-name,
.state-desc {
  margin: 0;
}

.state-name {
  font-weight: var(--weight-semibold);
}

.state-desc {
  color: var(--text-secondary);
  font-size: var(--text-subheadline);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.swatches li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: var(--swatch);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: 1.3;
}

.swatch {
  inline-size: var(--swatch);
  block-size: var(--swatch);
  border-radius: 50%;
  background: var(--accent);
}



.demo {
  display: grid;
  gap: var(--space-4);
}

.demo > .card:first-child {
  padding-top: var(--space-8);
}

.talkable {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.talkable-title {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.sample-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.sample-button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target);
  padding-inline: var(--space-4);
  border-radius: var(--radius-capsule);
  background: var(--surface-2);
  white-space: nowrap;
}



.night-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  inline-size: min(100%, var(--night-width));
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--separator);
  border-radius: var(--radius-card);
  background: var(--dark-ground);
}

.night-room {
  margin: 0;
}

.night-rows {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin: auto 0;
  padding: 0;
  list-style: none;
}

.night-rows li {
  display: flex;
  gap: var(--space-2);
}

.dot {
  inline-size: var(--night-dot);
  block-size: var(--night-dot);
  border-radius: 50%;
  background: var(--accent);
}

.night-caption {
  margin: 0;
  font-size: var(--text-state);
  line-height: 1.3;
}

.night-footer {
  display: flex;
  align-self: stretch;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: 1.3;
}


.night-mark {
  block-size: var(--wordmark-small);
}



.promises {
  padding-block: 0;
  list-style: none;
}

.promises li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.promises li + li {
  border-top: 1px solid var(--separator);
}

.promises li::before {
  content: "";
  flex: none;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  margin-top: calc((var(--leading) * 1em - var(--space-3)) / 2);
  border: var(--lamp-outline) solid var(--text-secondary);
  border-radius: 50%;
}



.room {
  display: grid;
  gap: var(--space-4);
}

.room-title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.room-line {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-subheadline);
}



.band > .closing {
  margin-top: var(--space-12);
}

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.site-footer {
  margin-top: var(--band-gap);
  padding-top: var(--space-6);
  padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--space-4) * -1);
  padding: 0;
  list-style: none;
}

.footer-links .link {
  color: var(--text-secondary);
  font-size: var(--text-subheadline);
  font-weight: var(--weight-regular);
}



@media (max-width: 480px) {
  .cta {
    align-items: stretch;
  }
}

@media (max-width: 374px) {
  :root {
    --page-gutter: var(--space-4);
  }
}



@media (min-width: 960px) {
  
  :root {
    --page-gutter: var(--space-12);
    --band-gap: calc(var(--space-12) * 3);
    --flow: var(--space-12);
    --flow-tight: var(--space-6);
    --visual-min: calc(var(--space-12) * 3);
    --lockscreen-height: 560px; 
  }

  .site-header {
    padding-top: max(var(--space-8), env(safe-area-inset-top));
  }

  .hero {
    padding-top: calc(var(--space-12) * 2);
  }

  .cta {
    gap: var(--space-3);
  }

  .band > .closing {
    margin-top: calc(var(--space-12) * 2);
  }

  .site-header,
  main,
  .site-footer {
    max-width: calc(var(--wide) + var(--page-gutter) * 2);
  }

  
  .site-footer {
    inline-size: min(var(--wide), 100% - var(--page-gutter) * 2);
    padding-inline: 0;
  }

  
  .display {
    font-size: min(var(--text-hero), 5vw);
    line-height: 1.25;
  }

  .band > h2 {
    font-size: var(--text-large-title);
    line-height: 1.3;
  }

  
  .band:not(.split) > :is(h2, p, .points) {
    max-inline-size: var(--measure);
  }

  .surfaces {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) var(--space-8);
  }

  
  .surface {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--space-2);
  }

  .surface-visual {
    margin-bottom: var(--space-4);
  }

  
  .split {
    --split-space-above: 1fr;
    display: grid;
    grid-template-columns: [text-start] minmax(0, 1fr) [text-end figure-start] minmax(0, 1fr) [figure-end];
    grid-template-rows: var(--split-space-above) repeat(4, auto) 1fr;
    column-gap: calc(var(--space-8) * 2);
  }

  
  .split--flip {
    grid-template-columns: [figure-start] minmax(0, 1fr) [figure-end text-start] minmax(0, 1fr) [text-end];
  }

  
  .split--top {
    --split-space-above: 0;
  }

  .split::before {
    content: "";
  }

  .split::before,
  .split > * {
    grid-column: text;
  }

  .split > :is(.lockscreen, .states, .demo, .night-picture, .promises, .room) {
    grid-column: figure;
    grid-row: 1 / -1;
    align-self: center;
    margin-block: 0;
  }

  
  .split > .lockscreen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-block-size: var(--lockscreen-height);
  }

  
  .split > :is(.lockscreen, .demo, .room) {
    inline-size: 100%;
  }

  
  .split > .states {
    justify-self: center;
  }

  
  .split > .room + .points {
    margin-top: var(--flow-tight);
  }
}