:root {
  color-scheme: dark;
  --night: #21192e;
  --ink: #fff1d9;
  --muted: #d0bfd7;
  --gold: #ffc98b;
  --plum: #352740;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: radial-gradient(ellipse at 49% 31%, #4d3658, transparent 68%), var(--night);
}
main { max-width: 1280px; margin: auto; padding: 26px 44px 40px; }
.top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff21; padding-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .11em; }
.moon { color: var(--gold); font-size: 25px; margin-right: 5px; vertical-align: middle; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.layout { display: grid; grid-template-columns: minmax(150px, .76fr) minmax(300px, 1.55fr) minmax(214px, .84fr); gap: clamp(18px, 3.4vw, 48px); align-items: center; padding-top: 25px; }
h1 { margin: 0; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: clamp(42px, 6.5vw, 94px); line-height: .99; font-weight: 900; letter-spacing: -.085em; }
h1 em { font-style: normal; color: var(--gold); }
.intro p { margin: 26px 0; color: var(--muted); line-height: 1.85; font-size: 15px; }
.desktop-help { font-size: 12px; line-height: 1.65; color: var(--muted); }
.desktop-help span { color: var(--gold); }
.room {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  aspect-ratio: 4 / 5;
  border-radius: 30px;
  border: 1px solid #a7809a61;
  background: radial-gradient(ellipse at 22% 30%, #ffc08a30, transparent 47%), linear-gradient(#453050 64%, #32233d 64%);
  box-shadow: 0 26px 65px #120d1c69, inset 0 1px #ffffff20;
  user-select: none;
}
.room::before { position: absolute; content: ""; inset: 64% 0 0; background: repeating-linear-gradient(8deg, transparent 0 22px, #160d2344 23px 24px); }
.window { position: absolute; top: 7%; right: 10%; width: 26%; height: 26%; border: 6px solid #73536e; border-radius: 52% 52% 6px 6px; background: linear-gradient(#282443, #4c446c); box-shadow: 0 4px 9px #23192c66, inset 0 0 12px #171526; overflow: hidden; }
.window::before, .window::after { content: ""; position: absolute; background: #73536e; z-index: 1; }
.window::before { height: 100%; width: 3px; left: 50%; }
.window::after { width: 100%; height: 3px; top: 53%; }
.window i { position: absolute; top: 17%; right: 19%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #ffe6ad; box-shadow: 0 0 22px #ffe6ad7d; }
.window b { position: absolute; left: 16%; top: 30%; color: #f8dfbb; font-size: 12px; }
.nightstand { position: absolute; left: 5%; top: 38%; width: 19%; height: 15%; border-radius: 7px; border-top: 7px solid #a66c69; background: linear-gradient(180deg, #75516a, #4b354e); box-shadow: 0 8px 10px #1c112c70; }
.nightstand i { position: absolute; bottom: 100%; left: 15%; width: 54%; height: 59%; background: linear-gradient(120deg, #f9ae72, #ffdc9d); border-radius: 45% 45% 12% 12%; transform: perspective(70px) rotateX(17deg); box-shadow: 0 0 28px #ffb97b70; }
.bed { position: absolute; left: 19%; top: 26%; width: 65%; height: 59%; border-radius: 20% 20% 14% 14% / 14% 14% 10% 10%; background: linear-gradient(135deg, #c68b78, #81526a); box-shadow: 0 16px 0 #4b3248, 0 24px 18px #1d142d82, inset 0 0 0 3px #ffc59440; }
.bed::before { position: absolute; content: ""; inset: 6% 5%; background: linear-gradient(135deg, #f0d6d0, #c899ae); border-radius: 15% / 10%; }
.pillow { position: absolute; inset: 11% 15% auto; height: 30%; border-radius: 30% 23% 26% 26% / 33%; background: radial-gradient(ellipse at 26% 24%, #fff0da, #d6b4c4); box-shadow: 0 4px 9px #8e657660, inset 0 0 0 2px #fff1dd90; transform: rotate(-6deg); }
.quilt {
  position: absolute; left: 17.5%; top: 44%; width: 68%; height: 32%; border: 3px solid #b7a7db; border-radius: 17px 17px 30px 26px;
  background: repeating-linear-gradient(0deg, #dbccff42 0 1px, transparent 2px 31px), repeating-linear-gradient(90deg, #55356b36 0 1px, transparent 2px 31px), linear-gradient(150deg, #af92cf, #78629e 73%, #655286);
  box-shadow: 0 8px 13px #3c244f87, inset 0 -8px #624c81aa;
  transform: translateY(var(--quilt-y, 0px)) rotate(var(--quilt-angle, -3deg)); transition: transform .18s ease-out;
}
.quilt::before { content: ""; position: absolute; inset: 7px; border: 1px dashed #e5d6f0b0; border-radius: 12px 12px 22px 21px; pointer-events: none; }
.room[data-dragging="true"] .quilt { transition: transform .055s linear; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff2d0; outline-offset: 3px; }
#handle { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #fff4d2; border-radius: 999px; min-height: 44px; padding: 8px 16px; background: var(--gold); color: #412738; font-weight: 800; font-size: 13px; box-shadow: 0 4px 0 #60445f; cursor: grab; touch-action: none; }
#handle span { margin-right: 4px; }
.room[data-dragging="true"] #handle { cursor: grabbing; background: #ffe0af; }
.cat-position {
  position: absolute; left: 16%; top: 30%; width: 69%; pointer-events: none;
}
.cat-sprite {
  position: relative; transform-origin: 50% 88%;
  animation: breathing 3.3s ease-in-out infinite;
  filter: drop-shadow(0 8px 6px #38203991);
}
.cat-position img { width: 100%; height: auto; display: block; }
.cat-sprite {
  /* The paw and body use complementary outlines from the same illustration. */
  --paw-edge: 20% 100%, 20% 94%, 22% 81%, 26% 79.7%, 31.5% 79%,
    36% 81%, 39.3% 86%, 39.5% 93%, 38% 98%, 39.5% 100%;
}
.cat-body {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 39.5% 100%, 38% 98%, 39.5% 93%,
    39.3% 86%, 36% 81%, 31.5% 79%, 26% 79.7%, 22% 81%, 20% 94%, 20% 100%, 0 100%);
}
.cat-paw {
  position: absolute;
  inset: 0;
  clip-path: polygon(var(--paw-edge));
  transform-origin: 34% 82%;
  transition: transform .17s cubic-bezier(.25, .72, .35, 1);
}
.paw-shadow {
  position: absolute;
  top: 92%;
  left: 23%;
  width: 17%;
  height: 8%;
  background: radial-gradient(ellipse, #34213fbb 8%, #34213f00 70%);
  transition: transform .17s ease, opacity .17s ease;
}
.room[data-paw="lift"] .cat-paw { transform: translateY(-3%) rotate(14deg); }
.room[data-paw="lift"] .paw-shadow { opacity: .45; transform: translateY(14%) scale(.86); }
.room[data-paw="warning"] .cat-paw { transform: translateY(-1%) rotate(4deg); transition-duration: .22s; }
.room[data-paw="hold"] .cat-paw { transition-timing-function: cubic-bezier(.2, .9, .4, 1.3); }
.eye {
  position: absolute; border-radius: 50% 54% 55% 48%; opacity: 0;
  background: radial-gradient(ellipse at 38% 37%, #fff1d7 0 8%, transparent 11%),
    radial-gradient(ellipse at center, #301716 0 38%, #754125 42% 54%, #472619 58%);
  box-shadow: inset 0 0 0 1px #40211b;
  transition: opacity .12s ease;
}
.eye-right { left: 45.6%; top: 45.8%; width: 10.8%; height: 8.8%; transform: rotate(-30deg); }
.eye-left { left: 22.6%; top: 60.8%; width: 11.8%; height: 8.1%; transform: rotate(-11deg); }
.room[data-mood="alert"] .eye-right,
.room[data-mood="awake"] .eye { opacity: 1; }
.room[data-mood="awake"] .cat-sprite { animation: wake .45s ease-out both; }
.room[data-rolling="true"] .cat-sprite { animation: roll .88s ease-in-out both; }
@keyframes breathing { 50% { transform: scale(1.006, 1.012); } }
@keyframes wake { 45% { transform: rotate(-4deg) translateY(-7%) scale(1.03); } }
@keyframes roll {
  38% { transform: translate(2%, -1%) rotate(5deg) scale(.99, 1.015); }
  72% { transform: translate(-1%, .5%) rotate(-2deg); }
}
.sleep, .alert { position: absolute; top: 28%; left: 27%; color: #fff0cb; font: italic 800 clamp(19px, 3vw, 36px) Georgia, serif; text-shadow: 0 2px 8px #33253b; pointer-events: none; }
.sleep i { display: inline-block; transform: translateY(-7px); }
.sleep b { display: inline-block; transform: translateY(-16px); }
.alert { display: none; color: #ffb89c; }
.room:is([data-mood="alert"], [data-mood="awake"]) .sleep { display: none; }
.room:is([data-mood="alert"], [data-mood="awake"]) .alert { display: block; }
.room-hint { position: absolute; inset: auto 5% 1.5%; text-align: center; font-size: 13px; font-weight: 700; color: #fff1df; pointer-events: none; }
.panel { padding: clamp(14px, 1.9vw, 25px); background: #271e33c9; border: 1px solid #baa2cb3b; border-radius: 24px; }
h2 { font-size: 19px; margin: 0 0 15px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.levels button { white-space: nowrap; padding: 7px 5px; min-height: 40px; font-size: 12px; border: 1px solid #b59ec44a; border-radius: 10px; color: var(--ink); background: #392c47; }
.levels button[aria-pressed="true"] { border-color: #ffc98b; color: #281c31; background: #ffc98b; font-weight: 800; }
.meter-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 19px; font-size: 12px; font-weight: 700; }
.meter-row span { color: var(--muted); }
progress, meter { display: block; width: 100%; height: 8px; margin-top: 8px; border-radius: 999px; border: 0; background: #503d5c; appearance: none; overflow: hidden; }
progress::-webkit-progress-bar, meter::-webkit-meter-bar { background: #503d5c; border: 0; height: 8px; }
progress::-webkit-progress-value { background: #cbacec; }
progress::-moz-progress-bar { background: #cbacec; }
meter::-webkit-meter-optimum-value { background: #ffc98b; }
meter::-moz-meter-bar { background: #ffc98b; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 15px 0; color: var(--muted); font-size: 12px; }
.stats strong { display: block; margin-top: 5px; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.retry { width: 100%; min-height: 42px; border: 1px solid #977ba0; border-radius: 12px; background: #4a3858; color: var(--ink); font-weight: 800; font-size: 13px; }
.feedback { margin: 10px 0 0; min-height: 2.6em; color: var(--muted); line-height: 1.4; font-size: 12px; }
dialog { width: min(320px, 90vw); padding: 28px; border: 1px solid #ae8aab; border-radius: 24px; background: #332640; color: var(--ink); text-align: center; box-shadow: 0 20px 50px #140d1baa; }
dialog::backdrop { background: #171025ad; }
dialog h2 { margin-top: 8px; font-size: 24px; }
dialog p { color: var(--muted); line-height: 1.6; }
.result-mark { color: var(--gold); font-size: 34px; }
@media (max-width: 760px) {
  main { max-width: 510px; padding: 10px 14px 24px; }
  .top { padding-bottom: 8px; font-size: 11px; }
  .moon { font-size: 20px; }
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 14px; gap: 12px; }
  h1 { font-size: clamp(36px, 10vw, 55px); letter-spacing: -.055em; }
  h1 br, .desktop-help, .intro p br { display: none; }
  .intro p { margin: 6px 0 0; font-size: 12px; }
  .room { border-radius: 23px; aspect-ratio: 1; }
  .cat-position { left: 18%; top: 23%; width: 66%; }
  .sleep, .alert { top: 21%; }
  #handle { bottom: -6%; }
  .panel { padding: 12px; border-radius: 19px; }
  .panel h2 { font-size: 15px; margin-bottom: 7px; }
  .meter-row { margin-top: 9px; }
  .stats { padding: 8px 0; }
  .feedback { min-height: auto; }
  .room-hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.brand, .back-link { color: inherit; text-decoration: none; }
.back-link { color: var(--gold); padding: 8px 0 8px 10px; }
.back-link:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.home {
  background: radial-gradient(ellipse at 67% 44%, #3e274a, transparent 57%), #1e162a;
}
.home main { max-width: 1340px; }
.hero { display: grid; grid-template-columns: minmax(295px, .74fr) minmax(0, 1.3fr); gap: clamp(25px, 5vw, 78px); align-items: center; padding: clamp(27px, 5vw, 72px) 0 32px; }
.hero-copy h1 { font-size: clamp(62px, 7.6vw, 106px); line-height: 1.04; letter-spacing: -.105em; }
.hero-copy h1 em { display: block; }
.hero-copy p { color: #eddbed; line-height: 1.8; font-size: clamp(16px, 1.65vw, 22px); margin: 22px 0 28px; }
.play-link {
  display: inline-flex; gap: 34px; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 22px; background: #ffcb90; color: #392338;
  border-radius: 12px; border: 1px solid #ffe0ae; font-size: 16px; font-weight: 850;
  text-decoration: none; box-shadow: 0 6px 0 #9b5b64, 0 12px 32px #1b1124bb;
  transition: transform .16s ease, background .16s ease;
}
.play-link:hover { transform: translateY(-2px); background: #ffddaa; }
.play-link:active { transform: translateY(3px); }
.play-link span { font-size: 22px; }
.hero-art {
  margin: 0; position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid #ab7a9b86; border-radius: clamp(19px, 3vw, 36px);
  aspect-ratio: 1.28; background: #382640; box-shadow: 0 20px 45px #150d22ba;
}
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.how-to {
  display: grid; grid-template-columns: minmax(92px, .44fr) 3fr; gap: 20px;
  align-items: start; padding: 22px 0 8px; border-top: 1px solid #ffffff26;
}
.how-to h2 { margin: 0; color: var(--gold); font-size: 15px; }
.how-to ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0; padding: 0; list-style: none; }
.how-to li strong, .how-to li span { display: block; }
.how-to li strong { color: var(--ink); font-size: 14px; }
.how-to li span { margin-top: 6px; color: var(--muted); line-height: 1.5; font-size: 12px; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 18px 0 19px; gap: 19px; }
  .hero-copy { display: grid; grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(43px, 11.2vw, 63px); letter-spacing: -.075em; }
  .hero-copy h1 em { display: inline; }
  .hero-copy p { font-size: 14px; margin: 8px 0 14px; }
  .hero-copy p br { display: none; }
  .play-link { justify-self: start; min-height: 46px; padding: 0 16px; gap: 24px; font-size: 14px; }
  .hero-art { aspect-ratio: 1.28; }
  .how-to { grid-template-columns: 1fr; gap: 11px; padding-top: 13px; }
  .how-to ol { gap: 11px; }
  .how-to li strong { font-size: 12px; }
  .how-to li span { font-size: 11px; }
}

.paw-cue {
  position: absolute;
  top: 6%;
  left: 6%;
  padding: 7px 12px;
  border: 1px solid #e6c5ed66;
  border-radius: 999px;
  background: #2c1c3ddd;
  color: #f3e1ff;
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 800;
  pointer-events: none;
}
.room[data-paw="lift"] .paw-cue {
  background: #d9edc2;
  color: #24351e;
  border-color: #eef8e0;
}
.room[data-paw="lift"] #handle {
  background: #dcf0c4;
  color: #273821;
  border-color: #f2ffdd;
  box-shadow: 0 4px 0 #586547, 0 0 18px #c3e88e5e;
}
.room[data-paw="warning"] .paw-cue, .room[data-paw="caught"] .paw-cue {
  background: #ffc3aa;
  color: #492322;
  border-color: #ffdbc9;
}
.room[data-paw="warning"] #handle {
  background: #ffb7a0;
  color: #492322;
  border-color: #ffdac8;
}
.room[data-paw="lift"] .room-hint { color: #e7f8cf; }
.room[data-paw="warning"] .room-hint { color: #ffe0cc; }