@charset "UTF-8";
:root {
  color-scheme:dark;
  --cream:#f8f1df;
  --ink:#242c29;
  --quiet:#bfc8bc;
  --accent:#dce9bf;
  font-family:"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#242a29;
  color:var(--cream)
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button, a, input {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid #edf3cb;
  outline-offset:5px
}
button svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
button {
  color:inherit
}
button:hover {
  filter:brightness(1.13)
}
#diorama {
  position:relative;
  min-height:740px;
  height:100svh;
  overflow:hidden;
  isolation:isolate
}
#scene {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block
}
.photo-status {
  position:absolute;
  z-index:3;
  top:105px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 40px);
  padding:10px 18px;
  border:1px solid #ffffff35;
  border-radius:30px;
  background:#152925dc;
  font-size:12px;
  text-align:center;
  backdrop-filter:blur(12px)
}
.photo-status[hidden] { display:none }
.photographic .shade {
  background:linear-gradient(180deg,#07131d59,transparent 23%,transparent 62%,#07131d69)
}
.photographic .controls {
  background:linear-gradient(135deg,#142a2ae0,#0b1a1de0);
  border-color:#d6e2dc42
}
.shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,24,23,.55),transparent 24%,transparent 62%,rgba(13,21,19,.7)),linear-gradient(90deg,rgba(12,22,22,.25),transparent 35%,rgba(10,20,19,.28));
  z-index:1
}
.chrome {
  z-index:2;
  position:absolute;
  transition:opacity .45s,transform .45s
}
.header {
  left:46px;
  right:46px;
  top:32px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.brand {
  display:flex;
  gap:19px;
  align-items:center
}
.back {
  display:grid;
  place-items:center;
  text-decoration:none;
  color:var(--cream);
  border:1px solid #e6e7d53a;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:20px;
  background:#1d2b242b
}
.eyebrow {
  font-size:9px;
  font-weight:600;
  letter-spacing:2.5px;
  line-height:1.6;
  color:#d7e1cf
}
.brand h1 {
  font-size:20px;
  font-weight:450;
  letter-spacing:2px;
  margin:5px 0 0
}
.tools {
  display:flex;
  gap:9px
}
.tool {
  width:40px;
  height:40px;
  border:1px solid #c4cdbb38;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#192b2545;
  backdrop-filter:blur(12px)
}
.mood {
  left:54px;
  bottom:126px;
  max-width:500px;
  pointer-events:none;
  text-shadow:0 2px 15px #15221c7a
}
.scene-index {
  font:10px/1.5 ui-monospace,"Cascadia Code",monospace;
  letter-spacing:2px;
  display:flex;
  gap:10px;
  align-items:center;
  color:#d7e3ce
}
.live-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d7e8b8;
  box-shadow:0 0 10px #d7e8b8
}
.mood h2 {
  font-family:Georgia,"Batang",serif;
  font-size:clamp(26px,3.25vw,49px);
  font-weight:400;
  letter-spacing:-1px;
  margin:16px 0 16px;
  line-height:1.35
}
.mood p {
  color:#e3e7d9;
  font-size:13px;
  letter-spacing:.3px;
  margin:0 0 23px
}
.conditions {
  display:flex;
  align-items:center;
  gap:13px;
  color:#d0d9c9;
  font-size:10px;
  letter-spacing:1.5px
}
.divider {
  height:9px;
  width:1px;
  background:#e5ead65c
}
.controls {
  width:300px;
  right:46px;
  bottom:125px;
  padding:23px 23px 19px;
  border:1px solid #d9e3c62b;
  background:linear-gradient(140deg,#26382fd9,#1e2e2ad9);
  border-radius:18px;
  box-shadow:0 16px 55px #08161026;
  backdrop-filter:blur(25px)
}
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:23px
}
.panel-head .eyebrow {
  font-size:8px;
  letter-spacing:1.7px;
  color:#bac9b3
}
.small-star {
  font-size:18px;
  color:#ccdbaa
}
fieldset {
  margin:0;
  padding:0;
  border:0;
  min-width:0
}
legend,.time-head label {
  font-size:11px;
  color:#e3e9d7;
  margin-bottom:12px;
  letter-spacing:.5px
}
.weather-options {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px
}
.weather-options button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  padding:12px 0;
  color:#bac7b6;
  transition:background .2s,color .2s
}
.weather-options button span {
  font-size:10px
}
.weather-options button[aria-pressed=true] {
  background:#dce9bf;
  color:#2b3a2d;
  box-shadow:0 3px 14px #151f1826
}
.panel-divider {
  height:1px;
  background:#deead519;
  margin:22px 0
}
.style-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  background:#14211e66;
  border:1px solid #d3ddc21c;
  border-radius:10px;
  gap:4px
}
.style-options button {
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  text-align:left;
  padding:10px 12px;
  color:#aebbab
}
.style-options button span {
  display:block;
  font-size:11px;
  margin-bottom:4px
}
.style-options small {
  font-size:9px;
  letter-spacing:-.3px
}
.style-options button[aria-pressed=true] {
  color:#e7edda;
  background:#55664b69;
  border-color:#b8c89930
}
.time-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:23px 0 1px
}
.time-head label {
  margin-bottom:8px
}
.time-head output {
  font:10px ui-monospace,monospace;
  color:#d6e4c5
}
input[type=range] {
  display:block;
  width:100%;
  height:16px;
  margin:0;
  accent-color:#dce9bf;
  cursor:pointer;
  background:transparent
}
#hour {
  -webkit-appearance:none;
  appearance:none
}
#hour::-webkit-slider-runnable-track {
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#627497,#e4c794,#e8e8bf,#c39876,#627497)
}
#hour::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:11px;
  height:11px;
  margin-top:-4px;
  border-radius:50%;
  background:#e4eccd;
  box-shadow:0 0 0 4px #e3edc51b
}
#hour::-moz-range-track {
  height:3px;
  background:linear-gradient(90deg,#627497,#e4c794,#e8e8bf,#c39876,#627497)
}
#hour::-moz-range-thumb {
  height:11px;
  width:11px;
  border:0;
  border-radius:50%;
  background:#e4eccd
}
.time-ticks {
  display:flex;
  justify-content:space-between;
  margin:6px 0 0;
  font-size:8px;
  color:#9fac9a
}
.panel-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #deead519;
  margin-top:21px;
  padding-top:15px;
  gap:18px
}
.panel-bottom button {
  border:0;
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  padding:0;
  font-size:10px;
  color:#c9d5bd;
  white-space:nowrap
}
.panel-bottom svg {
  width:16px;
  height:16px
}
.volume {
  width:72px;
  opacity:.8
}
.volume input {
  height:12px
}
.footer {
  left:54px;
  right:46px;
  bottom:37px;
  display:flex;
  align-items:center;
  gap:30px;
  color:#c8d3be;
  font-size:10px;
  letter-spacing:1px
}
.note {
  font-size:9px;
  color:#9eaf9d;
  letter-spacing:0
}
.view-toggle {
  position:absolute;
  z-index:4;
  right:46px;
  bottom:28px;
  border:1px solid #c2d1b52b;
  padding:10px 14px;
  border-radius:25px;
  background:#24382ca6;
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#d9e4cc;
  transition:opacity .3s
}
.view-toggle svg {
  width:16px;
  height:16px
}
.view-toggle kbd {
  font:9px ui-monospace,monospace;
  border:1px solid #c7d6b534;
  border-radius:3px;
  padding:1px 4px;
  color:#acc09d;
  margin-left:5px
}
.zen .chrome {
  opacity:0;
  pointer-events:none;
  visibility:hidden
}
.zen .controls {
  transform:translateY(12px)
}
.zen .shade {
  opacity:.4
}
.zen .view-toggle {
  opacity:.4
}
.zen .view-toggle:hover,.zen .view-toggle:focus-visible {
  opacity:1
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.no-script {
  position:absolute;
  inset:45% 10%;
  z-index:5;
  text-align:center
}
.paused .live-dot {
  background:#b3b4aa;
  box-shadow:none
}
@media(min-width:1700px) {
  .header {
    left:70px;
    right:70px;
    top:45px
  }
  .mood,.footer {
    left:78px
  }
  .controls {
    right:70px;
    bottom:145px;
    width:320px
  }
  .view-toggle {
    right:70px;
    bottom:34px
  }
}
@media(max-width:1000px) {
  .header {
    left:25px;
    right:25px;
    top:23px
  }
  .controls {
    right:25px;
    width:275px;
    padding:19px;
    bottom:115px
  }
  .mood {
    left:30px;
    bottom:130px;
    max-width:calc(100% - 350px)
  }
  .mood h2 {
    font-size:30px
  }
  .mood p {
    font-size:11px;
    line-height:1.8
  }
  .footer {
    left:30px;
    bottom:32px
  }
  .footer .note {
    display:none
  }
  .view-toggle {
    right:25px;
    bottom:23px
  }
}
@media(max-width:650px) {
  #diorama {
    min-height:850px
  }
  .header {
    left:20px;
    right:20px;
    top:22px
  }
  .brand {
    gap:11px
  }
  .brand .eyebrow {
    font-size:7px;
    letter-spacing:1.5px
  }
  .brand h1 {
    font-size:17px;
    letter-spacing:1px
  }
  .back {
    width:30px;
    height:30px
  }
  .tools {
    gap:6px
  }
  .tool {
    width:33px;
    height:33px
  }
  .tool svg {
    width:17px;
    height:17px
  }
  .mood {
    left:25px;
    top:125px;
    bottom:auto;
    max-width:calc(100% - 50px)
  }
  .mood h2 {
    font-size:30px;
    margin:12px 0
  }
  .mood p {
    font-size:12px;
    margin-bottom:17px
  }
  .controls {
    bottom:87px;
    left:20px;
    right:20px;
    width:auto;
    padding:18px 21px
  }
  .panel-head {
    margin-bottom:16px
  }
  .panel-divider {
    margin:16px 0
  }
  .weather-options button {
    padding:9px 0;
    gap:6px
  }
  .style-options button {
    padding:8px 12px
  }
  .time-head {
    margin-top:16px
  }
  .panel-bottom {
    margin-top:15px;
    padding-top:12px
  }
  .footer {
    left:25px;
    bottom:34px;
    font-size:9px;
    letter-spacing:0
  }
  .view-toggle {
    right:20px;
    bottom:23px;
    padding:10px
  }
  .view-toggle kbd {
    display:none
  }
  .scene-index {
    font-size:8px
  }
  .conditions {
    font-size:9px
  }
  .zen {
    min-height:100svh!important
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
.lab-back {
  display:none
}
.from-lab .lab-back {
  display:grid
}
#lab-drive-sync {
  left:54px!important;
  right:auto!important;
  bottom:76px!important
}
.zen #lab-drive-sync {
  visibility:hidden;
  pointer-events:none
}
@media(max-width:1000px) {
  #lab-drive-sync {
    left:30px!important;
    bottom:75px!important
  }
}
@media(max-width:650px) {
  #diorama {
    min-height:780px
  }
  #lab-drive-sync {
    left:20px!important;
    bottom:23px!important
  }
  .footer {
    display:none
  }
}