:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --bg: #160b0d;
  --ink: #f6e7db;
  --muted: rgba(246, 231, 219, .66);
  --line: rgba(246, 231, 219, .21);
  --glow: #e67951;
  --shade: #3c1116;
  --success: #8fcab0;
  --danger: #e98c7c;
  --ease: cubic-bezier(.74, 0, .16, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.room {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(105deg, #0f0809 0 28%, transparent 56%),
    radial-gradient(circle at 81% 37%, rgba(235, 117, 72, .36), transparent 17%),
    linear-gradient(135deg, #2b0d12, #681d22 62%, #1a0a0e);
  transition: background 1000ms var(--ease), color 900ms var(--ease);
}

.room.day {
  color-scheme: light;
  --bg: #e9f0f1;
  --ink: #122838;
  --muted: rgba(18, 40, 56, .62);
  --line: rgba(18, 40, 56, .2);
  --glow: #6699af;
  --shade: #d2e0e5;
  --success: #317b63;
  --danger: #a54d4a;
  background:
    linear-gradient(105deg, #edf3f3 0 36%, transparent 52%),
    linear-gradient(133deg, #d8e6ea, #f5f7f4 60%, #b6d0da);
}

.light {
  position: absolute;
  z-index: -3;
  inset: -30% -20% -30% 38%;
  transform: rotate(13deg);
  transform-origin: 70% 50%;
  background: linear-gradient(93deg, transparent 0 26%, rgba(255, 194, 151, .06) 34%, rgba(255, 167, 112, .25) 52%, transparent 74%);
  filter: blur(5px);
  transition: inset 1000ms var(--ease), transform 1000ms var(--ease), background 1000ms var(--ease), filter 1000ms var(--ease);
}

.day .light {
  inset: -40% 28% -35% -18%;
  transform: rotate(-11deg);
  background: linear-gradient(93deg, transparent 8%, rgba(255, 255, 255, .76) 38%, rgba(164, 203, 219, .16) 63%, transparent 79%);
  filter: blur(1px);
}

.sheet {
  position: absolute;
  z-index: -2;
  width: 76vw;
  height: 54vh;
  right: -17vw;
  bottom: -15vh;
  border-radius: 62% 0 0 0 / 75% 0 0 0;
  transform: rotate(-8deg);
  background:
    linear-gradient(163deg, rgba(255, 228, 207, .27), transparent 22%),
    repeating-linear-gradient(168deg, rgba(255, 255, 255, .045) 0 1px, transparent 2px 44px),
    linear-gradient(145deg, #78252b, #2b0d13 68%);
  box-shadow: inset 70px 42px 110px rgba(255, 195, 160, .13), -35px -15px 100px rgba(15, 2, 5, .4);
  transition: width 1000ms var(--ease), height 1000ms var(--ease), right 1000ms var(--ease), bottom 1000ms var(--ease), transform 1000ms var(--ease), border-radius 1000ms var(--ease), background 1000ms var(--ease), box-shadow 1000ms var(--ease);
}

.day .sheet {
  width: 47vw;
  height: 100vh;
  right: -4vw;
  bottom: 0;
  border-radius: 0;
  transform: rotate(0);
  background:
    repeating-linear-gradient(90deg, rgba(22, 66, 87, .035) 0 1px, transparent 1px 66px),
    linear-gradient(110deg, #e9f1f2, #bbd2da);
  box-shadow: -1px 0 0 rgba(19, 59, 79, .15), -30px 0 100px rgba(58, 100, 118, .08);
}

.crease {
  position: absolute;
  z-index: -1;
  right: 4vw;
  bottom: 5vh;
  width: 48vw;
  height: 36vh;
  opacity: .38;
  border-top: 1px solid rgba(255, 227, 210, .42);
  border-radius: 50%;
  transform: rotate(-12deg);
  filter: blur(.3px);
  box-shadow: 0 -22px 50px rgba(255, 178, 132, .08);
  transition: opacity 600ms, transform 900ms var(--ease);
}

.day .crease {
  opacity: 0;
  transform: rotate(0);
}

.texture {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.46'/%3E%3C/svg%3E");
}

.layout {
  width: min(100%, 1500px);
  min-height: 100svh;
  margin: auto;
  padding: clamp(22px, 4.5vw, 68px);
  display: grid;
  grid-template-columns: 82px minmax(280px, 1fr) minmax(430px, 1.25fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(25px, 4vw, 72px);
  position: relative;
}

.rail {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 22px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  transition: border-color 700ms, color 700ms;
}

.easter-egg {
  writing-mode: vertical-rl;
  font-family: Georgia, "Songti SC", serif;
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.side-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.topbar {
  grid-column: 2 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .13em;
}

.ledger-meta {
  white-space: nowrap;
}

.ledger-meta i {
  margin: 0 .65em;
  opacity: .45;
  font-style: normal;
}

.ledger-meta b {
  color: var(--ink);
  font-weight: 500;
}

.top-actions,
.connection {
  display: flex;
  align-items: center;
}

.top-actions { gap: 10px; }

.connection {
  gap: 9px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.status-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ddb36d;
  box-shadow: 0 0 13px #ddb36d;
}

.connection.connected .status-dot {
  background: var(--success);
  box-shadow: 0 0 13px var(--success);
}

.connection.error .status-dot,
.connection.reconnecting .status-dot {
  background: var(--danger);
  box-shadow: 0 0 13px var(--danger);
}

.refresh {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  transition: color 220ms, transform 220ms;
}

.refresh:hover {
  color: var(--ink);
  transform: rotate(20deg);
}

.refresh.loading { animation: spin 700ms linear infinite; }

.question {
  grid-column: 2;
  align-self: center;
  padding: 4vh 0 8vh;
  transform: rotate(-2.2deg) translateY(2vh);
  transition: transform 900ms var(--ease);
}

.day .question { transform: rotate(0) translateY(0); }

.overline {
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  letter-spacing: .13em;
}

h1 {
  margin: 0;
  max-width: 590px;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(38px, 4.7vw, 72px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.055em;
  text-wrap: balance;
}

h1 em {
  color: var(--glow);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  transition: color 700ms;
}

.day-question { display: none; }
.day .grain-question { display: none; }
.day .day-question { display: block; }

.rule {
  margin: 28px 0 0;
  padding-left: 26px;
  border-left: 1px solid var(--line);
  max-width: 350px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .04em;
}

.counter {
  grid-column: 3;
  align-self: center;
  min-width: 0;
  transform: translate(2vw, 2vh) rotate(1deg);
  transition: transform 900ms var(--ease);
}

.day .counter { transform: translate(0, 0) rotate(0); }

.grain-counter {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 15px;
  color: #ffeadd;
  text-shadow: 0 18px 70px rgba(29, 0, 5, .3);
}

.grain-counter strong {
  font-family: "Bodoni 72", Didot, Georgia, serif;
  font-size: clamp(220px, 31vw, 450px);
  line-height: .7;
  font-weight: 400;
  letter-spacing: -.1em;
  font-variant-numeric: tabular-nums;
}

.grain-counter span {
  font-family: "Songti SC", serif;
  font-size: clamp(38px, 5vw, 70px);
  opacity: .68;
}

.day-counter { display: none; }
.day .grain-counter { display: none; }

.day .day-counter {
  display: grid;
  gap: 8px;
  width: min(100%, 610px);
  margin-left: auto;
}

.time-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 8px;
}

.time-row strong {
  font-family: "Bodoni 72", Didot, Georgia, serif;
  font-size: clamp(56px, 8vw, 116px);
  line-height: .8;
  font-weight: 400;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.time-row span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
}

footer {
  grid-column: 2 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
}

.since {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: .1em;
}

.since strong {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  margin-right: 5px;
  font-variant-numeric: tabular-nums;
}

.controls {
  display: flex;
  align-items: center;
  gap: clamp(15px, 3vw, 42px);
}

.note {
  color: var(--muted);
  text-align: right;
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .1em;
}

.flip {
  border: 1px solid var(--line);
  background: rgba(20, 5, 8, .14);
  color: var(--ink);
  min-width: 180px;
  padding: 15px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  letter-spacing: .14em;
  backdrop-filter: blur(12px);
  transition: background 600ms, border-color 600ms, color 600ms, transform 250ms;
}

.day .flip { background: rgba(255, 255, 255, .24); }

.room.previewing .flip {
  border-color: color-mix(in srgb, var(--glow), transparent 35%);
}

.flip:hover { transform: translateY(-2px); }

.flip b {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  transition: transform 800ms var(--ease);
}

.day .flip b { transform: rotate(180deg); }

button:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .light { inset: -10% -65% -20% 5%; }
  .day .light { inset: -20% 15% -20% -80%; }

  .sheet {
    width: 128vw;
    height: 51vh;
    right: -52vw;
    bottom: -8vh;
  }

  .day .sheet {
    width: 40vw;
    right: 0;
    height: 100vh;
  }

  .layout {
    padding: 22px 20px 24px;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 17px;
  }

  .rail { padding-right: 10px; }
  .easter-egg { font-size: 10px; }
  .side-label { font-size: 8px; }

  .topbar {
    grid-column: 2;
    justify-content: flex-end;
  }

  .ledger-meta { display: none; }
  .connection {
    max-width: 190px;
    font-size: 9px;
  }

  #connection-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .question {
    grid-column: 2;
    align-self: auto;
    padding: 8vh 0 0;
  }

  .overline {
    margin-bottom: 13px;
    font-size: 10px;
  }

  h1 {
    max-width: 310px;
    font-size: clamp(32px, 9.5vw, 39px);
  }

  .rule {
    margin-top: 16px;
    padding-left: 14px;
    max-width: 245px;
    font-size: 10px;
  }

  .counter {
    grid-column: 2;
    align-self: center;
    transform: translate(0, 0) rotate(1deg);
  }

  .grain-counter {
    justify-content: flex-start;
    padding-left: 5vw;
  }

  .grain-counter strong { font-size: 64vw; }
  .grain-counter span { font-size: 38px; }

  .day .day-counter {
    width: 100%;
    gap: 6px;
  }

  .time-row { padding: 2px 0 5px; }
  .time-row strong { font-size: 16vw; }
  .time-row span { font-size: 7px; }

  footer {
    grid-column: 2;
    min-width: 0;
    gap: 10px;
  }

  .since { font-size: 8px; }
  .since strong { font-size: 22px; }
  .controls { gap: 10px; }
  .note { display: none; }

  .flip {
    min-width: 150px;
    padding: 12px 13px;
    font-size: 12px;
  }
}

@media (max-height: 700px) and (max-width: 760px) {
  .question { padding-top: 4vh; }
  .rule { line-height: 1.55; }
  .grain-counter strong { font-size: 52vw; }
  .time-row strong { font-size: 12vw; }
}

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