/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .visible {
    visibility: visible;
  }
  .relative {
    position: relative;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
}
:root {
  --paper: #f4eadf;
  --paper-light: #fff9f2;
  --ink: #52392f;
  --ink-soft: #846b5e;
  --cocoa: #7a503e;
  --oat: #d8c3ae;
  --peach: #e7b28d;
  --line: #6949392e;
  --sky-top: #afc8d9;
  --sky-bottom: #f1c7a5;
  --sun: #ffe2a2;
  --room-glow: #ffd49d7a;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  min-width: 320px;
}
body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  font-family:
    PingFang SC,
    Hiragino Sans GB,
    Microsoft YaHei,
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  color: inherit;
}
.time-page {
  --scene-edge: 54%;
  grid-template-columns: minmax(520px, var(--scene-edge)) minmax(430px, 1fr);
  isolation: isolate;
  background:
    linear-gradient(90deg, #fff9f2d1 0%, #fff9f26b 54%, transparent 72%),
    var(--paper);
  min-height: 100svh;
  transition: background-color 1.2s;
  display: grid;
  position: relative;
  overflow: hidden;
}
.weather-rain {
  --room-glow: #7c929e38;
}
.period-morning {
  --sky-top: #adc9da;
  --sky-bottom: #f7c8a7;
  --sun: #ffe3a4;
  --room-glow: #ffd49d85;
}
.period-day {
  --sky-top: #a9c9dd;
  --sky-bottom: #e9ddc8;
  --sun: #fff2bd;
  --room-glow: #ffe4b26b;
}
.period-evening {
  --sky-top: #91a8c6;
  --sky-bottom: #e8a887;
  --sun: #ffcc8a;
  --room-glow: #f3a67070;
}
.period-night {
  --sky-top: #4e5d79;
  --sky-bottom: #9b8291;
  --sun: #f8edc3;
  --room-glow: #645b7c3d;
}
.sun-wash {
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 34%, var(--room-glow) 0, transparent 29%),
    radial-gradient(circle at 12% 10%, #fffc 0, transparent 25%);
  transition: background 1.2s;
  position: absolute;
  inset: 0;
}
.weather-rain .sun-wash {
  background:
    radial-gradient(circle at 62% 34%, #9eb1b833 0, #0000 32%),
    linear-gradient(120deg, #687e8c1f, #fff9f22e);
}
.paper-grain {
  z-index: 20;
  opacity: 0.16;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
}
.clock-panel {
  z-index: 8;
  flex-direction: column;
  min-height: 100svh;
  padding: clamp(32px, 4vw, 68px) clamp(34px, 5.2vw, 86px)
    clamp(28px, 3vw, 48px);
  display: flex;
  position: relative;
}
.brand-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}
.brand-lockup {
  align-items: center;
  gap: 14px;
  display: flex;
}
.brand-lockup h1 {
  letter-spacing: 0.08em;
  margin: 0;
  font-family:
    Songti SC,
    STSong,
    Georgia,
    serif;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 600;
}
.brand-lockup p {
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin: 4px 0 0;
  font-size: 12px;
}
.brand-paw {
  background: #fff9f280;
  border: 1px solid #5d3e2f33;
  border-radius: 50%;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: block;
  position: relative;
}
.brand-paw i,
.brand-paw b {
  background: var(--cocoa);
  display: block;
  position: absolute;
}
.brand-paw i {
  border-radius: 50%;
  width: 6px;
  height: 8px;
}
.brand-paw i:first-child {
  top: 11px;
  left: 9px;
  transform: rotate(-25deg);
}
.brand-paw i:nth-child(2) {
  top: 7px;
  left: 16px;
  transform: rotate(-8deg);
}
.brand-paw i:nth-child(3) {
  top: 8px;
  right: 11px;
  transform: rotate(10deg);
}
.brand-paw i:nth-child(4) {
  top: 14px;
  right: 7px;
  transform: rotate(26deg);
}
.brand-paw b {
  border-radius: 48% 48% 56% 56%;
  width: 17px;
  height: 15px;
  top: 18px;
  left: 13px;
}
.companion-status {
  min-height: 40px;
  color: var(--ink-soft);
  cursor: pointer;
  background: #fff9f294;
  border: 1px solid #65453424;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  transition:
    transform 0.18s,
    background 0.18s,
    border-color 0.18s;
  display: inline-flex;
  box-shadow: 0 8px 24px #6e493512;
}
.companion-status:hover {
  background: #fff9f2db;
  transform: translateY(-2px);
}
.companion-status:focus-visible,
.action-card:focus-visible,
.weather-control:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #bf734c57;
}
.status-dot {
  background: #b47a58;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.companion-status.is-auto .status-dot {
  animation: 2.4s ease-in-out infinite status-pulse;
}
@keyframes status-pulse {
  0%,
  to {
    transform: scale(0.92);
    box-shadow: 0 0 #b47a5833;
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 7px #b47a5800;
  }
}
.time-block {
  margin-top: auto;
  padding-top: clamp(48px, 9vh, 118px);
}
.time-line {
  white-space: nowrap;
  align-items: baseline;
  gap: clamp(8px, 1vw, 16px);
  display: flex;
}
.main-time {
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums lining-nums;
  text-wrap: nowrap;
  font-family:
    Iowan Old Style,
    Baskerville,
    Times New Roman,
    serif;
  font-size: clamp(112px, 14.5vw, 244px);
  font-weight: 400;
  line-height: 0.78;
}
.seconds {
  min-width: 1.3em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-family:
    Iowan Old Style,
    Baskerville,
    Times New Roman,
    serif;
  font-size: clamp(24px, 3vw, 48px);
}
.date-line {
  color: var(--ink);
  letter-spacing: 0.15em;
  margin: clamp(24px, 3.6vh, 42px) 0 0;
  font-family:
    Songti SC,
    STSong,
    Georgia,
    serif;
  font-size: clamp(18px, 1.6vw, 28px);
}
.greeting-block {
  margin-top: clamp(24px, 4.2vh, 52px);
}
.greeting {
  letter-spacing: 0.04em;
  margin: 0;
  font-family:
    Songti SC,
    STSong,
    Georgia,
    serif;
  font-size: clamp(23px, 2.25vw, 38px);
  line-height: 1.45;
}
.action-note {
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  display: flex;
}
.note-line {
  background: var(--peach);
  width: 36px;
  height: 1px;
}
.action-picker {
  grid-template-columns: repeat(7, minmax(62px, 1fr));
  gap: clamp(8px, 0.85vw, 14px);
  margin-top: auto;
  padding-top: clamp(26px, 4.2vh, 52px);
  display: grid;
}
.action-card {
  min-height: clamp(66px, 7.6vh, 86px);
  color: var(--ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #fffbf69e;
  border: 1px solid #69493929;
  border-radius: 18px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 9px 7px 8px;
  font-size: clamp(12px, 0.95vw, 15px);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s,
    background 0.22s,
    box-shadow 0.22s;
  display: flex;
  box-shadow:
    0 8px 24px #6543320f,
    inset 0 1px #ffffffbf;
}
.action-card:hover {
  border-color: #8b533a57;
  transform: translateY(-4px);
}
.action-card.is-active {
  background: #f0ccaf94;
  border-color: #975b3d6b;
  transform: translateY(-5px);
  box-shadow:
    0 14px 30px #6e43301f,
    inset 0 1px #fffc;
}
.action-icon {
  width: 27px;
  height: 27px;
  color: var(--cocoa);
  place-items: center;
  display: grid;
}
.action-icon svg {
  width: 100%;
  height: 100%;
}
.cycle-hint {
  color: #52392f8c;
  letter-spacing: 0.04em;
  align-items: center;
  gap: 16px;
  min-height: 24px;
  margin-top: 14px;
  font-size: 11px;
  display: flex;
}
.cycle-track {
  background: #52392f1f;
  width: 56px;
  height: 1px;
  display: block;
  position: relative;
  overflow: hidden;
}
.cycle-track i {
  background: var(--peach);
  transform-origin: 0;
  animation: linear infinite cycle-progress;
  position: absolute;
  inset: 0;
}
.site-footer {
  color: #52392f75;
  letter-spacing: 0.04em;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  margin-top: 8px;
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s;
}
.site-footer a:hover {
  color: #52392fc7;
}
.site-footer a:focus-visible {
  outline-offset: 3px;
  border-radius: 4px;
  outline: 3px solid #bf734c47;
}
.site-footer .public-security-record {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-footer .public-security-record img {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}
@keyframes cycle-progress {
  0% {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.room-scene {
  z-index: 2;
  background: linear-gradient(#fffcf51a, #e8ccb052), #ecddcc;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  box-shadow: inset 14px 0 36px #7e58410f;
}
.scene-picker {
  z-index: 15;
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  background: #fffaf1b8;
  border: 1px solid #63473524;
  border-radius: 999px;
  gap: 4px;
  padding: 5px;
  display: flex;
  position: absolute;
  top: 18px;
  right: 18px;
  box-shadow: 0 10px 28px #5638251a;
}
.scene-choice {
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
  transition:
    color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.scene-choice:hover {
  transform: translateY(-1px);
}
.scene-choice.is-active {
  color: #fffaf3;
  background: #76513f;
  box-shadow: 0 5px 12px #573b2b2e;
}
.outdoor-landscape {
  z-index: 2;
  pointer-events: none;
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.room-scene.scene-forest .outdoor-landscape,
.room-scene.scene-beach .outdoor-landscape {
  display: block;
}
.room-scene.scene-forest .window,
.room-scene.scene-beach .window {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  left: 0;
  box-shadow: none;
}
.room-scene.scene-forest .window:before,
.room-scene.scene-beach .window:before {
  opacity: 0.28;
  background:
    linear-gradient(165deg, #ffffff29 0 18%, #0000 36%),
    linear-gradient(#0000 68%, #345b6040);
}
.room-scene.scene-forest .window-bar,
.room-scene.scene-beach .window-bar,
.room-scene.scene-forest .curtain,
.room-scene.scene-beach .curtain,
.room-scene.scene-forest .wall-print,
.room-scene.scene-beach .wall-print,
.room-scene.scene-forest .shelf,
.room-scene.scene-beach .shelf,
.room-scene.scene-forest .sofa,
.room-scene.scene-beach .sofa,
.room-scene.scene-forest .side-table,
.room-scene.scene-beach .side-table {
  display: none;
}
.room-scene.scene-forest .cloud,
.room-scene.scene-beach .cloud {
  animation: 18s ease-in-out infinite alternate outdoor-cloud-drift;
}
.room-scene.scene-forest .cloud-two,
.room-scene.scene-beach .cloud-two {
  animation-duration: 23s;
  animation-delay: -7s;
}
@keyframes outdoor-cloud-drift {
  0% {
    translate: -18px 0;
  }
  to {
    translate: 28px 3px;
  }
}
.landscape-far,
.landscape-mid,
.scene-tree,
.ocean-wave,
.meadow-path,
.ambient-specks,
.ambient-specks i {
  display: block;
  position: absolute;
}
.room-scene.scene-forest {
  --forest-far: #779382;
  --forest-mid: #557763;
  --forest-near: #385c4a;
  --forest-grass-top: #789a70;
  --forest-grass-bottom: #4f7658;
}
.period-night .room-scene.scene-forest {
  --forest-far: #536b68;
  --forest-mid: #385654;
  --forest-near: #243e3e;
  --forest-grass-top: #4d6961;
  --forest-grass-bottom: #304d48;
}
.weather-rain .room-scene.scene-forest {
  --forest-far: #6b7e78;
  --forest-mid: #4e6660;
  --forest-near: #354f49;
  --forest-grass-top: #657c68;
  --forest-grass-bottom: #455f50;
}
.scene-forest .far-one {
  background: var(--forest-far);
  border-radius: 52% 56% 0 0;
  width: 78%;
  height: 39%;
  bottom: 28%;
  left: -22%;
  transform: rotate(5deg);
  box-shadow: 48px -18px 60px #ffffff12 inset;
}
.scene-forest .far-two {
  background: color-mix(in srgb, var(--forest-far) 84%, #c8d5bd);
  border-radius: 58% 48% 0 0;
  width: 88%;
  height: 34%;
  right: -25%;
  bottom: 30%;
  transform: rotate(-4deg);
}
.scene-forest .mid-one {
  opacity: 0.92;
  background:
    radial-gradient(ellipse at 10% 100%, var(--forest-mid) 0 57%, #0000 58%)
      0 0 / 118px 100% repeat-x;
  width: 120%;
  height: 25%;
  bottom: 27%;
  left: -8%;
}
.scene-forest .mid-two {
  opacity: 0.9;
  background:
    radial-gradient(ellipse at 45% 100%, var(--forest-near) 0 56%, #0000 58%)
      0 0 / 86px 100% repeat-x;
  width: 112%;
  height: 16%;
  bottom: 24%;
  left: -5%;
}
.scene-forest .scene-tree {
  transform-origin: center bottom;
  animation: 6.5s ease-in-out infinite alternate tree-sway;
}
.scene-forest .tree-left {
  background: linear-gradient(90deg, #4b3a2c, #71533d 54%, #3f3027);
  border-radius: 50% 45% 20% 0;
  width: 7%;
  height: 76%;
  left: -1%;
  bottom: 25%;
  transform: rotate(3deg);
}
.scene-forest .tree-right {
  background: linear-gradient(90deg, #3e3128, #6c503c 55%, #3d3026);
  border-radius: 45% 55% 0 30%;
  width: 5%;
  height: 58%;
  right: 2%;
  bottom: 27%;
  animation-delay: -2.4s;
  transform: rotate(-4deg);
}
.scene-forest .scene-tree:after {
  content: "";
  background: var(--forest-near);
  border-radius: 54% 43% 58% 46%;
  width: 430%;
  height: 18%;
  position: absolute;
  top: -7%;
  left: -165%;
  filter: drop-shadow(0 14px 20px #263e3324);
  box-shadow:
    -28px 25px 0 4px var(--forest-mid),
    31px 22px 0 2px var(--forest-mid),
    8px 42px 0 -2px var(--forest-near);
}
@keyframes tree-sway {
  0% {
    rotate: -0.6deg;
  }
  to {
    rotate: 0.8deg;
  }
}
.scene-forest .meadow-path {
  opacity: 0.38;
  background: linear-gradient(90deg, #0000, #d8c39f8c 24% 76%, #0000);
  border-radius: 50% 50% 0 0;
  width: 24%;
  height: 37%;
  right: 15%;
  bottom: -8%;
  transform: perspective(220px) rotateX(55deg) rotate(-4deg);
  transform-origin: bottom;
}
.scene-forest .ambient-specks {
  z-index: 5;
  inset: 32% 4% 20%;
}
.scene-forest .ambient-specks i {
  background: #f4d77d;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: 4.2s ease-in-out infinite forest-firefly;
  box-shadow: 0 0 11px #fbe59b;
}
.ambient-specks i:nth-child(1) {
  top: 13%;
  left: 12%;
}
.ambient-specks i:nth-child(2) {
  top: 48%;
  left: 27%;
  animation-delay: -1.3s;
}
.ambient-specks i:nth-child(3) {
  top: 24%;
  left: 43%;
  animation-delay: -2.6s;
}
.ambient-specks i:nth-child(4) {
  top: 62%;
  left: 61%;
  animation-delay: -0.7s;
}
.ambient-specks i:nth-child(5) {
  top: 18%;
  left: 76%;
  animation-delay: -3.2s;
}
.ambient-specks i:nth-child(6) {
  top: 53%;
  left: 89%;
  animation-delay: -1.9s;
}
@keyframes forest-firefly {
  0%,
  to {
    opacity: 0.18;
    translate: -3px 5px;
  }
  45% {
    opacity: 0.9;
    translate: 5px -7px;
  }
}
.period-day .scene-forest .ambient-specks,
.period-morning .scene-forest .ambient-specks,
.weather-rain .scene-forest .ambient-specks {
  opacity: 0.26;
}
.room-scene.scene-beach {
  --sea-top: #8ebdca;
  --sea-bottom: #4f91a4;
  --sand-top: #e4c69d;
  --sand-bottom: #cfa979;
}
.period-evening .room-scene.scene-beach {
  --sea-top: #8baab7;
  --sea-bottom: #587f91;
  --sand-top: #d9b48d;
  --sand-bottom: #c5906d;
}
.period-night .room-scene.scene-beach {
  --sea-top: #536f83;
  --sea-bottom: #314f68;
  --sand-top: #8d806f;
  --sand-bottom: #6e6258;
}
.weather-rain .room-scene.scene-beach {
  --sea-top: #6f929c;
  --sea-bottom: #456d7b;
  --sand-top: #bda98f;
  --sand-bottom: #9d866e;
}
.scene-beach .far-one {
  background:
    linear-gradient(#ffffff1f, #0000 18%),
    linear-gradient(var(--sea-top), var(--sea-bottom));
  width: 106%;
  height: 43%;
  left: -3%;
  bottom: 20%;
  box-shadow: 0 10px 34px #315d6b24 inset;
}
.scene-beach .far-two {
  opacity: 0.56;
  background: linear-gradient(155deg, #66837a, #455f5d);
  border-radius: 68% 52% 14% 8%;
  width: 31%;
  height: 9%;
  right: 7%;
  bottom: 56%;
  clip-path: polygon(0 100%, 7% 60%, 22% 44%, 38% 23%, 58% 32%, 78% 13%, 93% 48%, 100% 100%);
}
.scene-beach .mid-one {
  opacity: 0.56;
  background: linear-gradient(90deg, #0000 0 3%, #f8f1d5 15% 83%, #0000 97%);
  border-radius: 50%;
  width: 88%;
  height: 5px;
  bottom: 40%;
  left: 6%;
  animation: 4.8s ease-in-out infinite sea-shimmer;
}
.scene-beach .mid-two {
  opacity: 0.38;
  background:
    repeating-linear-gradient(96deg, #ffffff9c 0 3px, #0000 4px 32px);
  width: 80%;
  height: 8%;
  left: 12%;
  bottom: 32%;
  clip-path: polygon(0 35%, 18% 10%, 37% 50%, 60% 20%, 81% 56%, 100% 30%, 100% 65%, 0 80%);
}
@keyframes sea-shimmer {
  0%,
  to {
    opacity: 0.34;
    scale: 0.94 1;
  }
  50% {
    opacity: 0.7;
    scale: 1.03 1;
  }
}
.scene-beach .scene-tree {
  transform-origin: center bottom;
  animation: 5.8s ease-in-out infinite alternate palm-sway;
}
.scene-beach .tree-left {
  background: linear-gradient(90deg, #72513a, #a77955 55%, #604433);
  border-radius: 80% 30% 15% 10%;
  width: 4%;
  height: 59%;
  left: 4%;
  bottom: 27%;
  transform: rotate(7deg);
}
.scene-beach .tree-left:before {
  content: "";
  background: linear-gradient(90deg, #7d5b42, #9c7050);
  border-radius: 999px;
  width: 250%;
  height: 3.5%;
  position: absolute;
  top: 11%;
  left: -76%;
  transform: rotate(-32deg);
  transform-origin: right;
}
.scene-beach .tree-left:after {
  content: "";
  background: #4f725d;
  border-radius: 58% 42% 54% 46%;
  width: 590%;
  height: 17%;
  position: absolute;
  top: -8%;
  left: -248%;
  filter: drop-shadow(0 10px 13px #334a3d38);
  transform: rotate(-5deg);
  box-shadow:
    -38px 25px 0 1px #587c63,
    42px 18px 0 3px #466d58,
    8px 38px 0 -3px #5a8065;
}
.scene-beach .tree-right {
  opacity: 0.64;
  background:
    repeating-linear-gradient(76deg, #5f785b 0 3px, #0000 3px 12px);
  width: 16%;
  height: 24%;
  right: -2%;
  bottom: 22%;
  clip-path: polygon(0 100%, 4% 31%, 15% 100%, 26% 17%, 36% 100%, 49% 0, 56% 100%, 71% 24%, 77% 100%, 92% 38%, 100% 100%);
  animation-delay: -2s;
}
@keyframes palm-sway {
  0% {
    rotate: -0.7deg;
  }
  to {
    rotate: 1.1deg;
  }
}
.scene-beach .ocean-wave {
  opacity: 0.58;
  border-top: 3px solid #fff8dfc4;
  border-radius: 50%;
  width: 43%;
  height: 9%;
  animation: 5.4s ease-in-out infinite beach-wave;
}
.scene-beach .wave-one {
  left: -8%;
  bottom: 35%;
}
.scene-beach .wave-two {
  width: 50%;
  right: -7%;
  bottom: 30%;
  animation-delay: -1.8s;
}
.scene-beach .wave-three {
  width: 35%;
  left: 34%;
  bottom: 25%;
  animation-delay: -3.5s;
}
@keyframes beach-wave {
  0%,
  to {
    opacity: 0.28;
    translate: -12px 0;
    scale: 0.94 1;
  }
  50% {
    opacity: 0.72;
    translate: 16px 5px;
    scale: 1.04 1;
  }
}
.scene-beach .ambient-specks {
  z-index: 5;
  inset: 31% 6% 24%;
}
.scene-beach .ambient-specks i {
  background: #fff6d7;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  animation: 3.8s ease-in-out infinite water-glint;
  box-shadow: 0 0 8px #fff6d7d1;
}
@keyframes water-glint {
  0%,
  to {
    opacity: 0.12;
    scale: 0.7;
  }
  48% {
    opacity: 0.9;
    scale: 1.8 0.8;
  }
}
.weather-rain .scene-beach .ambient-specks {
  display: none;
}
.room-scene:after {
  content: "";
  z-index: 4;
  background:
    repeating-linear-gradient(86deg, #6d493306 0 1px, #0000 1px 7px), #d7bfa7;
  border-radius: 50% 50% 0 0;
  height: 38%;
  transition:
    opacity 0.7s,
    transform 0.7s;
  position: absolute;
  bottom: -9%;
  left: -12%;
  right: -8%;
  box-shadow: inset 0 18px 46px #623e2a14;
}
.room-scene.scene-forest:after {
  opacity: 1;
  background:
    radial-gradient(circle at 14% 27%, #f3ddb6b3 0 2px, #0000 3px),
    radial-gradient(circle at 72% 31%, #dbb9a0a6 0 2px, #0000 3px),
    repeating-linear-gradient(101deg, #365c431f 0 2px, #0000 2px 13px),
    linear-gradient(var(--forest-grass-top), var(--forest-grass-bottom));
  border-radius: 42% 51% 0 0;
  height: 45%;
  bottom: -7%;
  left: -15%;
  right: -15%;
  box-shadow:
    inset 0 18px 42px #e5efc61c,
    0 -10px 34px #36533d24;
}
.room-scene.scene-beach:after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 24% 18%, #fff1d179 0 2px, #0000 3px),
    radial-gradient(ellipse at 71% 33%, #a47b5761 0 2px, #0000 3px),
    repeating-linear-gradient(97deg, #8b684018 0 1px, #0000 1px 9px),
    linear-gradient(var(--sand-top), var(--sand-bottom));
  border-radius: 52% 47% 0 0;
  height: 37%;
  bottom: -4%;
  left: -12%;
  right: -10%;
  box-shadow:
    inset 0 16px 36px #fff6dc2e,
    0 -8px 30px #7f62452b;
}
.scene-action-swim:after {
  opacity: 0.22;
  transform: translateY(7%);
}
.window {
  z-index: 1;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  border: 14px solid #eee3d7;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  width: 68%;
  height: 49%;
  transition: background 1.2s;
  position: absolute;
  top: 0;
  left: 10%;
  overflow: hidden;
  box-shadow: 0 22px 48px #5e3f301f;
}
.weather-rain .window {
  background: linear-gradient(#718695 0%, #a8b3b4 58%, #c4b7ac 100%);
}
.window:before {
  content: "";
  z-index: 6;
  opacity: 0.5;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, #ffffffad 0 1px, #0000 2px),
    radial-gradient(circle at 77% 20%, #ffffff80 0 1px, #0000 2px),
    linear-gradient(160deg, #0000 55%, #5c5b552e 56% 64%, #0000 65%);
  position: absolute;
  inset: 0;
}
.period-night .window:before {
  opacity: 0.9;
  background-image:
    radial-gradient(circle at 18% 19%, #fff 0 1px, #0000 2px),
    radial-gradient(circle at 35% 31%, #fff 0 1px, #0000 2px),
    radial-gradient(circle at 66% 18%, #fff 0 1px, #0000 2px),
    radial-gradient(circle at 79% 35%, #fff 0 1px, #0000 2px),
    linear-gradient(160deg, #0000 55%, #37374147 56% 64%, #0000 65%);
}
.sky-sun {
  z-index: 2;
  left: var(--sun-x, 78%);
  top: var(--sun-y, 18%);
  background: var(--sun);
  opacity: 1;
  border-radius: 50%;
  width: 68px;
  height: 68px;
  transition:
    background 1.2s,
    opacity 1.2s,
    left 1s linear,
    top 1s linear;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 50px #ffe5aab3;
}
.period-night .sky-sun {
  opacity: 0;
}
.weather-rain .sky-sun {
  opacity: 0.16;
  box-shadow: 0 0 36px #ffe8c038;
}
.period-night.weather-rain .sky-sun {
  opacity: 0;
}
.sky-moon {
  z-index: 2;
  left: var(--moon-x, 22%);
  top: var(--moon-y, 24%);
  opacity: 0;
  background: #f4e9c7;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  transition:
    opacity 1.2s,
    transform 1.2s,
    left 1s linear,
    top 1s linear;
  position: absolute;
  transform: translate(-50%, -50%) scale(0.84);
  box-shadow:
    0 0 32px #faeec673,
    inset -7px -5px #cbc3b740;
}
.sky-moon:before,
.sky-moon:after {
  content: "";
  background: #b7b0a647;
  border-radius: 50%;
  position: absolute;
}
.sky-moon:before {
  width: 9px;
  height: 9px;
  top: 12px;
  left: 13px;
}
.sky-moon:after {
  width: 12px;
  height: 12px;
  bottom: 13px;
  right: 11px;
}
.period-night .sky-moon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.period-night.weather-rain .sky-moon {
  opacity: 0.14;
}
.star-field {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s;
  position: absolute;
  inset: 0;
}
.star-field i {
  background: #fff9e0f5;
  border-radius: 50%;
  animation: 3.8s ease-in-out infinite star-twinkle;
  display: block;
  position: absolute;
  box-shadow: 0 0 7px #fff4cdcc;
}
.period-night .star-field {
  opacity: 1;
}
.period-night.weather-rain .star-field {
  opacity: 0.12;
}
@keyframes star-twinkle {
  0%,
  to {
    opacity: 0.42;
    transform: scale(0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}
.cloud {
  z-index: 3;
  background: #fff9ef7a;
  border-radius: 99px;
  width: 82px;
  height: 14px;
  transition:
    background 1.2s,
    opacity 1.2s,
    filter 1.2s;
  position: absolute;
}
.cloud:before,
.cloud:after {
  content: "";
  background: inherit;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
}
.cloud:before {
  width: 30px;
  height: 30px;
  left: 14px;
}
.cloud:after {
  width: 22px;
  height: 22px;
  right: 14px;
}
.cloud-one {
  top: 24%;
  left: 8%;
}
.cloud-two {
  top: 56%;
  right: 5%;
  transform: scale(0.72);
}
.weather-rain .cloud {
  filter: blur(0.2px);
  opacity: 0.96;
  background: #5b6c77bd;
}
.weather-rain .cloud-one {
  transform: scale(1.35);
}
.weather-rain .cloud-two {
  transform: scale(1.08);
}
.rain-layer {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.weather-rain .rain-layer {
  opacity: 1;
}
.rain-layer i {
  background: linear-gradient(#0000, #e2f1f2db);
  border-radius: 999px;
  width: 1.5px;
  animation: linear infinite window-rain;
  display: block;
  position: absolute;
  top: -15%;
  transform: rotate(10deg);
}
.rain-layer:after {
  content: "";
  opacity: 0.36;
  background:
    radial-gradient(at 14% 24%, #0000 0 7px, #ebf6f461 8px 9px, #0000 10px),
    radial-gradient(at 72% 41%, #0000 0 5px, #ebf6f457 6px 7px, #0000 8px),
    radial-gradient(at 42% 72%, #0000 0 9px, #ebf6f44d 10px 11px, #0000 12px);
  position: absolute;
  inset: 0;
}
@keyframes window-rain {
  0% {
    transform: translateY(-22%) rotate(10deg);
  }
  to {
    transform: translate(-42px, 650px) rotate(10deg);
  }
}
.window-bar {
  z-index: 7;
  background: #eee3d7eb;
  display: block;
  position: absolute;
}
.window-bar.vertical {
  width: 9px;
  top: 0;
  bottom: 0;
  left: 50%;
}
.window-bar.horizontal {
  height: 9px;
  top: 52%;
  left: 0;
  right: 0;
}
.curtain {
  z-index: 3;
  filter: drop-shadow(0 14px 18px #5a3c2b14);
  background:
    linear-gradient(90deg, #7c594114, #0000 18% 76%, #7c594114), #faf0e0e0;
  height: 64%;
  position: absolute;
  top: -3%;
}
.curtain-left {
  border-radius: 0 0 70%;
  width: 22%;
  left: -5%;
  transform: rotate(-2deg);
}
.curtain-right {
  border-radius: 0 0 0 70%;
  width: 18%;
  right: 13%;
  transform: rotate(2deg);
}
.wall-print {
  z-index: 2;
  aspect-ratio: 0.74;
  background: #d2b69d;
  width: 13%;
  padding: 8px;
  position: absolute;
  top: 8%;
  right: 4.5%;
  box-shadow: 0 9px 20px #55392c1f;
}
.wall-print span {
  background:
    linear-gradient(150deg, #0000 43%, #9da98f 44% 60%, #0000 61%),
    linear-gradient(25deg, #bc9071 25%, #849188 26% 46%, #c7b79d 47%);
  width: 100%;
  height: 100%;
  display: block;
}
.shelf {
  z-index: 3;
  background: #9e7154;
  border-radius: 6px 0 0 6px;
  width: 24%;
  height: 10px;
  position: absolute;
  top: 31%;
  right: 0;
  box-shadow: 0 9px 16px #56372729;
}
.book {
  border-radius: 2px 2px 0 0;
  width: 12px;
  display: block;
  position: absolute;
  bottom: 9px;
}
.book-one {
  background: #bd8769;
  height: 45px;
  right: 22%;
  transform: rotate(-5deg);
}
.book-two {
  background: #c9b59b;
  height: 54px;
  right: 13%;
}
.vase {
  background: #b9a38b;
  border-radius: 48% 48% 35% 35%;
  width: 34px;
  height: 44px;
  position: absolute;
  bottom: 9px;
  right: 52%;
}
.vase b,
.vase b:before,
.vase b:after {
  content: "";
  transform-origin: bottom;
  background: #72806a;
  width: 2px;
  height: 53px;
  display: block;
  position: absolute;
  bottom: 31px;
  left: 16px;
}
.vase b:before {
  bottom: 0;
  left: 0;
  transform: rotate(25deg);
}
.vase b:after {
  bottom: 0;
  left: 0;
  transform: rotate(-28deg);
}
.sofa {
  z-index: 3;
  width: 63%;
  height: 33%;
  position: absolute;
  bottom: 13%;
  right: -13%;
}
.sofa-back {
  background: #b9a890;
  border: 1px solid #70513c14;
  border-radius: 34px 0 0 18px;
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 8px 20px #fff3,
    0 18px 28px #5b3d2d1f;
}
.cushion {
  z-index: 2;
  border-radius: 22px;
  position: absolute;
  box-shadow: 0 8px 14px #563a2c14;
}
.cushion-one {
  background: #c07f5c;
  width: 34%;
  height: 54%;
  top: 17%;
  left: 9%;
  transform: rotate(-6deg);
}
.cushion-two {
  background: #d3b79c;
  width: 31%;
  height: 57%;
  top: 13%;
  left: 38%;
  transform: rotate(5deg);
}
.throw {
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, #0000 0 7px, #74564312 7px 8px), #ded0bd;
  border-radius: 40% 18% 10px 22px;
  width: 30%;
  height: 76%;
  position: absolute;
  bottom: -12%;
  right: 12%;
  transform: rotate(4deg);
}
.side-table {
  z-index: 5;
  width: 23%;
  height: 18%;
  position: absolute;
  bottom: 22%;
  left: 4%;
}
.table-top {
  background: #8a5f46;
  border-radius: 50%;
  width: 100%;
  height: 13px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 8px 14px #4e30222e;
}
.table-leg {
  background: #8a5f46;
  border-radius: 0 0 5px 5px;
  width: 9px;
  height: 88%;
  position: absolute;
  top: 8px;
  left: 48%;
}
.table-leg:after {
  content: "";
  background: #8a5f46;
  border-radius: 50%;
  width: 82px;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
.mug {
  background: #d2b28e;
  border-radius: 5px 5px 11px 11px;
  width: 47px;
  height: 44px;
  position: absolute;
  top: -48px;
  left: 34%;
  box-shadow: inset 0 4px #ffffff38;
}
.mug:after {
  content: "";
  border: 5px solid #d2b28e;
  border-left: 0;
  border-radius: 0 50% 50% 0;
  width: 20px;
  height: 19px;
  position: absolute;
  top: 10px;
  right: -16px;
}
.mug i {
  background: var(--cocoa);
  border-radius: 50% 50% 55% 55%;
  width: 13px;
  height: 11px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.water-layer {
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(#a2d0da1a, #65a7b8b3),
    repeating-radial-gradient(at 48% 46%, #f5fbf757 0 2px, #0000 3px 17px);
  height: 43%;
  transition:
    opacity 0.7s,
    transform 0.7s;
  position: absolute;
  bottom: -4%;
  left: -8%;
  right: -8%;
  overflow: hidden;
  transform: translateY(18%);
}
.scene-action-swim .water-layer {
  opacity: 1;
  transform: translateY(0);
}
.water-ripple {
  opacity: 0;
  border: 2px solid #f0fbf88a;
  border-radius: 50%;
  width: 46%;
  height: 13%;
  display: block;
  position: absolute;
}
.scene-action-swim .water-ripple {
  animation: 2.7s ease-out infinite water-ripple;
}
.ripple-one {
  bottom: 21%;
  left: 28%;
}
.ripple-two {
  bottom: 7%;
  left: 18%;
  animation-delay: 0.7s !important;
}
.ripple-three {
  bottom: 2%;
  left: 43%;
  animation-delay: 1.35s !important;
}
@keyframes water-ripple {
  0% {
    opacity: 0;
    transform: scale(0.55, 0.72);
  }
  28% {
    opacity: 0.72;
  }
  to {
    opacity: 0;
    transform: scale(1.45, 1.3);
  }
}
.dog-stage {
  z-index: 8;
  pointer-events: none;
  height: 72%;
  position: absolute;
  bottom: 3.5%;
  left: -6%;
  right: -2%;
}
.dog-shadow {
  z-index: 0;
  filter: blur(15px);
  background: #5335262e;
  border-radius: 50%;
  width: 66%;
  height: 10%;
  transition:
    transform 0.6s,
    opacity 0.6s;
  position: absolute;
  bottom: 3%;
  left: 17%;
}
.action-run .dog-shadow {
  width: 42%;
  left: 0;
  animation: 3.25s linear infinite run-shadow;
}
@keyframes run-shadow {
  0% {
    opacity: 0;
    left: -12%;
    transform: scale(0.8, 0.72);
  }
  8% {
    opacity: 0.62;
  }
  15% {
    left: -2%;
    transform: scale(0.78, 0.68);
  }
  26% {
    left: 11%;
    transform: scale(1.04, 0.88);
  }
  38% {
    left: 24%;
    transform: scale(0.8, 0.7);
  }
  50% {
    left: 37%;
    transform: scale(1.04, 0.88);
  }
  62% {
    left: 50%;
    transform: scale(0.82, 0.72);
  }
  74% {
    opacity: 0.58;
    left: 63%;
    transform: scale(1.02, 0.86);
  }
  84%,
  to {
    opacity: 0;
    left: 77%;
    transform: scale(0.78, 0.68);
  }
}
.action-frisbee .dog-shadow {
  animation: 3.4s ease-in-out infinite frisbee-shadow;
}
@keyframes frisbee-shadow {
  0%,
  22%,
  to {
    opacity: 0.62;
    transform: scale(1, 1);
  }
  52%,
  62% {
    opacity: 0.2;
    transform: scale(0.72, 0.62);
  }
  80% {
    opacity: 0.72;
    transform: scale(1.08, 0.9);
  }
}
.dog-art {
  z-index: 2;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  filter: drop-shadow(0 18px 22px #50332429);
  transform-origin: bottom;
  -webkit-user-select: none;
  user-select: none;
  width: min(91%, 760px);
  max-height: 100%;
  transition:
    opacity 0.54s,
    transform 0.68s cubic-bezier(0.22, 0.8, 0.2, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%) translateY(12px) scale(0.97);
}
.dog-art.is-visible {
  opacity: 1;
  transform: translate(-50%) translateY(0) scale(1);
}
.action-sleep .dog-art-sleep.is-visible {
  animation: 3.8s ease-in-out infinite dog-breathe;
}
.action-look .dog-art-look.is-visible {
  animation: 5s ease-in-out infinite dog-look;
}
.action-run .dog-art-run.is-visible {
  animation: 3.25s linear infinite dog-run;
}
.action-playbow .dog-art-playbow.is-visible {
  animation: 1.8s ease-in-out infinite dog-playbow;
}
.action-frisbee .dog-art-frisbee.is-visible {
  animation: 3.4s cubic-bezier(0.38, 0.04, 0.25, 1) infinite dog-frisbee-catch;
}
.action-ball .dog-art-ball.is-visible {
  animation: 2.6s ease-in-out infinite dog-catch;
}
.action-sphinx .dog-art-sphinx.is-visible {
  animation: 5.2s ease-in-out infinite dog-watch;
}
.action-snack .dog-art-snack.is-visible {
  animation: 2.4s ease-in-out infinite dog-snack;
}
.action-eat .dog-art-eat.is-visible {
  animation: 1.15s ease-in-out infinite dog-eat;
}
.action-chew .dog-art-chew.is-visible {
  animation: 1.05s ease-in-out infinite dog-chew;
}
.action-paw .dog-art-paw.is-visible {
  animation: 2.8s ease-in-out infinite dog-paw;
}
.action-roll .dog-art-roll.is-visible {
  animation: 3.1s ease-in-out infinite dog-roll;
}
.action-swim .dog-art-swim.is-visible {
  animation: 1.8s ease-in-out infinite dog-swim;
}
@keyframes dog-breathe {
  0%,
  to {
    transform: translate(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translate(-50%) translateY(-2px) scale(1.012, 1.008);
  }
}
@keyframes dog-look {
  0%,
  72%,
  to {
    transform: translate(-50%) rotate(0);
  }
  82%,
  92% {
    transform: translate(-50%) rotate(-1.8deg);
  }
}
@keyframes dog-run {
  0% {
    opacity: 0;
    left: 3%;
    transform: translate(-50%) translateY(5px) rotate(-3deg) scale(0.95, 1.02);
  }
  7% {
    opacity: 1;
  }
  15% {
    left: 18%;
    transform: translate(-50%) translateY(-11px) rotate(1.2deg) scale(1.018, 0.988);
  }
  26% {
    left: 31%;
    transform: translate(-50%) translateY(2px) rotate(-1.2deg) scale(0.992, 1.012);
  }
  38% {
    left: 44%;
    transform: translate(-50%) translateY(-13px) rotate(1deg) scale(1.018, 0.987);
  }
  50% {
    left: 57%;
    transform: translate(-50%) translateY(2px) rotate(-1deg) scale(0.994, 1.01);
  }
  62% {
    left: 70%;
    transform: translate(-50%) translateY(-11px) rotate(0.9deg) scale(1.015, 0.99);
  }
  74% {
    opacity: 1;
    left: 84%;
    transform: translate(-50%) translateY(3px) rotate(-1deg) scale(0.994, 1.01);
  }
  84%,
  to {
    opacity: 0;
    left: 98%;
    transform: translate(-50%) translateY(-7px) rotate(1deg) scale(1.01, 0.99);
  }
}
@keyframes dog-playbow {
  0%,
  to {
    transform: translate(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translate(-50%) translateY(5px) scale(1.015, 0.985);
  }
}
@keyframes dog-catch {
  0%,
  to {
    transform: translate(-50%) translateY(3px) rotate(0);
  }
  45% {
    transform: translate(-50%) translateY(-22px) rotate(-1deg);
  }
  62% {
    transform: translate(-50%) translateY(-16px) rotate(1deg);
  }
}
@keyframes dog-frisbee-catch {
  0%,
  18%,
  to {
    transform: translate(-50%) translateY(3px) rotate(0) scale(1);
  }
  28% {
    transform: translate(-48%) translateY(10px) rotate(2deg) scale(1.025, 0.97);
  }
  43% {
    transform: translate(-53%) translateY(-38px) rotate(-3deg) scale(0.99, 1.02);
  }
  53%,
  61% {
    transform: translate(-55%) translateY(-66px) rotate(-4deg) scale(1.01);
  }
  72% {
    transform: translate(-52%) translateY(-28px) rotate(-1deg) scale(1.008, 0.995);
  }
  80% {
    transform: translate(-50%) translateY(5px) rotate(1deg) scale(1.035, 0.96);
  }
  88% {
    transform: translate(-50%) translateY(-3px) rotate(-0.4deg) scale(0.997, 1.006);
  }
}
@keyframes dog-watch {
  0%,
  68%,
  to {
    transform: translate(-50%) translateY(0) rotate(0);
  }
  78% {
    transform: translate(-50%) translateY(-2px) rotate(-1.2deg);
  }
  88% {
    transform: translate(-50%) translateY(-2px) rotate(1deg);
  }
}
@keyframes dog-snack {
  0%,
  to {
    transform: translate(-50%) translateY(2px) scale(1);
  }
  50% {
    transform: translate(-50%) translateY(-10px) scale(1.012);
  }
}
@keyframes dog-eat {
  0%,
  to {
    transform: translate(-50%) translateY(1px) rotate(0);
  }
  50% {
    transform: translate(-50%) translateY(6px) rotate(-0.7deg);
  }
}
@keyframes dog-chew {
  0%,
  to {
    transform: translate(-50%) rotate(-0.35deg);
  }
  50% {
    transform: translate(-50%) rotate(0.55deg) scale(1.004);
  }
}
@keyframes dog-paw {
  0%,
  to {
    transform: translate(-50%) translateY(0) rotate(0);
  }
  50% {
    transform: translate(-50%) translateY(-5px) rotate(-0.8deg);
  }
}
@keyframes dog-roll {
  0%,
  to {
    transform: translate(-50%) translateY(0) rotate(-1deg);
  }
  50% {
    transform: translate(-50%) translateY(-7px) rotate(1.6deg) scale(1.012);
  }
}
@keyframes dog-swim {
  0%,
  to {
    transform: translate(-50%) translateY(4px) rotate(-0.5deg);
  }
  50% {
    transform: translate(-50%) translateY(-7px) rotate(0.7deg);
  }
}
.frisbee-toy,
.frisbee-caught,
.ball-toy {
  z-index: 5;
  opacity: 0;
  display: block;
  position: absolute;
}
.frisbee-toy,
.frisbee-caught {
  background: #76a7b2;
  border: 4px solid #507e8a;
  border-radius: 50%;
  width: clamp(44px, 9vw, 72px);
  aspect-ratio: 3.15;
  box-shadow:
    inset 0 3px #ffffff59,
    0 8px 12px #5f362429;
}
.frisbee-toy {
  top: 38%;
  left: -18%;
}
.action-frisbee .frisbee-toy {
  opacity: 1;
  animation: 3.4s cubic-bezier(0.32, 0.02, 0.35, 1) infinite frisbee-flight;
}
@keyframes frisbee-flight {
  0% {
    opacity: 0;
    top: 38%;
    left: -18%;
    transform: rotate(-18deg) scale(0.72);
  }
  9% {
    opacity: 1;
  }
  26% {
    top: 24%;
    left: 1%;
    transform: rotate(-8deg) scale(0.84);
  }
  43% {
    opacity: 1;
    top: 13%;
    left: 8%;
    transform: rotate(4deg) scale(0.95);
  }
  54% {
    opacity: 1;
    top: 18%;
    left: 12%;
    transform: rotate(10deg) scale(0.92);
  }
  58%,
  to {
    opacity: 0;
    top: 19%;
    left: 13%;
    transform: rotate(13deg) scale(0.88);
  }
}
.frisbee-caught {
  z-index: 3;
  top: 18%;
  left: 10%;
  clip-path: polygon(0 0, 60% 0, 60% 100%, 0 100%);
  transform-origin: center;
}
.action-frisbee .frisbee-caught {
  animation: 3.4s ease-in-out infinite frisbee-caught;
}
@keyframes frisbee-caught {
  0%,
  52% {
    opacity: 0;
    top: 18%;
    left: 10%;
    transform: rotate(10deg) scale(0.88);
  }
  56%,
  63% {
    opacity: 1;
    top: 18%;
    left: 10%;
    transform: rotate(12deg) scale(0.92);
  }
  73% {
    opacity: 1;
    top: 23%;
    left: 11.5%;
    transform: rotate(9deg) scale(0.94);
  }
  81% {
    opacity: 1;
    top: 28%;
    left: 13%;
    transform: rotate(7deg) scale(0.96);
  }
  88%,
  to {
    opacity: 0;
    top: 27%;
    left: 13%;
    transform: rotate(7deg) scale(0.96);
  }
}
.ball-toy {
  background:
    linear-gradient(58deg, #0000 45%, #6952426b 46% 51%, #0000 52%), #d3ab79;
  border: 3px solid #7f6a59;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  bottom: 19%;
  left: 15%;
  box-shadow:
    inset 5px 6px #ffffff40,
    0 10px 16px #50342629;
}
.action-ball .ball-toy {
  opacity: 1;
  animation: 2.2s cubic-bezier(0.35, 0, 0.45, 1) infinite ball-bounce;
}
@keyframes ball-bounce {
  0% {
    opacity: 0;
    transform: translate(-70px) rotate(0);
  }
  15% {
    opacity: 1;
  }
  48% {
    transform: translate(260px, -260px) rotate(200deg);
  }
  72% {
    opacity: 1;
    transform: translate(410px, -55px) rotate(320deg);
  }
  to {
    opacity: 0;
    transform: translate(460px, -18px) rotate(430deg);
  }
}
.motion-line {
  z-index: 4;
  opacity: 0;
  border-top: 2px solid #8b553c66;
  border-radius: 50%;
  width: 56px;
  height: 16px;
  display: block;
  position: absolute;
}
.motion-one {
  top: 33%;
  left: 17%;
  transform: rotate(-12deg);
}
.motion-two {
  top: 28%;
  right: 12%;
  transform: rotate(18deg) scale(0.7);
}
.action-run .motion-line,
.action-frisbee .motion-line,
.action-ball .motion-line {
  animation: 1.4s ease-in-out infinite motion-blink;
}
.run-dust {
  z-index: 1;
  opacity: 0;
  background: #d8c3aa8c;
  border-radius: 50%;
  width: 18px;
  height: 8px;
  display: block;
  position: absolute;
  bottom: 7%;
  box-shadow:
    12px -4px 0 -3px #d8c3aa70,
    -9px -2px 0 -4px #d8c3aa66;
}
.run-dust-one {
  left: 24%;
}
.run-dust-two {
  left: 52%;
}
.action-run .run-dust-one {
  animation: 3.25s linear infinite run-dust-one;
}
.action-run .run-dust-two {
  animation: 3.25s linear infinite run-dust-two;
}
@keyframes run-dust-one {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.55) translateY(2px);
  }
  26% {
    opacity: 0.58;
  }
  35%,
  to {
    opacity: 0;
    transform: scale(1.65) translate(-5px, -4px);
  }
}
@keyframes run-dust-two {
  0%,
  46% {
    opacity: 0;
    transform: scale(0.55) translateY(2px);
  }
  50% {
    opacity: 0.55;
  }
  59%,
  to {
    opacity: 0;
    transform: scale(1.65) translate(-5px, -4px);
  }
}
@keyframes motion-blink {
  0%,
  to {
    opacity: 0;
    transform: translate(-8px);
  }
  50% {
    opacity: 0.7;
    transform: translate(8px);
  }
}
.scene-calendar {
  font-variant-numeric: tabular-nums;
  display: none;
}
.time-page.wallpaper-mode .scene-calendar {
  z-index: 14;
  color: #4e392f;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  background: #fff9efdc;
  border: 1px solid #694b3826;
  border-radius: 14px;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  width: clamp(76px, 21vw, 100px);
  min-height: clamp(94px, 14.5vh, 126px);
  padding: 12px 9px 10px;
  display: grid;
  position: absolute;
  top: clamp(150px, 24vh, 230px);
  right: clamp(14px, 4.5vw, 34px);
  box-shadow:
    0 14px 30px #4430241c,
    inset 0 1px #fff9;
}
.time-page.wallpaper-mode .scene-calendar:before,
.time-page.wallpaper-mode .scene-calendar:after {
  content: "";
  background: #8c7565;
  border-radius: 999px;
  width: 4px;
  height: 12px;
  position: absolute;
  top: -5px;
  box-shadow: 0 1px #fff8;
}
.time-page.wallpaper-mode .scene-calendar:before {
  left: 24%;
}
.time-page.wallpaper-mode .scene-calendar:after {
  right: 24%;
}
.calendar-month {
  opacity: 0.72;
  font-size: clamp(9px, 2.6vw, 12px);
}
.calendar-day {
  letter-spacing: -0.05em;
  font-family:
    Georgia,
    Times New Roman,
    serif;
  font-size: clamp(34px, 10.5vw, 52px);
  font-weight: 500;
  line-height: 0.95;
}
.calendar-weekday {
  opacity: 0.78;
  font-size: clamp(10px, 2.9vw, 13px);
}
.time-page.wallpaper-mode.scene-forest .scene-calendar {
  color: #29443b;
  background: #f2f1ddcf;
  border-color: #38594b36;
}
.time-page.wallpaper-mode.scene-beach .scene-calendar {
  color: #31566a;
  background: #f8f3e3d4;
  border-color: #426c7d38;
}
.scene-caption {
  z-index: 12;
  color: #51382da3;
  letter-spacing: 0.06em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fff9f27a;
  border: 1px solid #6545341f;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  font-size: 11px;
  display: inline-flex;
  position: absolute;
  bottom: 24px;
  right: 28px;
}
.scene-caption-dot {
  background: #b77959;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.weather-control {
  z-index: 13;
  color: #51382dad;
  letter-spacing: 0.05em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fff9f280;
  border: 1px solid #6545341f;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 13px;
  font-size: 11px;
  transition:
    transform 0.18s,
    background 0.18s,
    border-color 0.18s;
  display: inline-flex;
  position: absolute;
  bottom: 24px;
  left: 28px;
  box-shadow: 0 8px 24px #593d3014;
}
.weather-control:hover {
  background: #fff9f2c7;
  border-color: #8b533a4d;
  transform: translateY(-2px);
}
.weather-symbol {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: block;
  position: relative;
}
.weather-symbol-clear {
  background: #d99c63;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #d99c6324;
}
.weather-symbol-clear.is-night {
  background: #e8dfc5;
  box-shadow:
    0 0 0 3px #e8dfc52e,
    inset -4px -2px #89808633;
}
.weather-symbol-rain {
  background: #849aa4;
  border-radius: 8px;
  width: 19px;
  height: 10px;
  top: 3px;
}
.weather-symbol-rain:before {
  content: "";
  background: inherit;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  position: absolute;
  top: -5px;
  left: 3px;
}
.weather-symbol-rain:after {
  content: "";
  background: #7ba8b8;
  border-radius: 99px;
  width: 2px;
  height: 5px;
  position: absolute;
  top: 12px;
  left: 4px;
  transform: rotate(13deg);
  box-shadow:
    6px 1px #7ba8b8,
    12px 0 #7ba8b8;
}
@media (width<=1180px) {
  .time-page {
    --scene-edge: 56%;
    grid-template-columns: minmax(470px, var(--scene-edge)) minmax(360px, 1fr);
  }
  .clock-panel {
    padding-left: 44px;
    padding-right: 38px;
  }
  .brand-lockup p {
    display: none;
  }
  .main-time {
    font-size: clamp(108px, 14vw, 174px);
  }
  .action-picker {
    grid-template-columns: repeat(7, minmax(55px, 1fr));
    gap: 7px;
  }
  .action-card {
    border-radius: 15px;
  }
}
@media (width<=860px) {
  .time-page {
    background: var(--paper);
    min-height: 100svh;
    display: block;
    overflow: visible;
  }
  .clock-panel {
    min-height: auto;
    padding: 28px 22px 20px;
  }
  .brand-row {
    align-items: center;
  }
  .brand-paw {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
  .brand-lockup h1 {
    font-size: 23px;
  }
  .companion-status {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 12px;
  }
  .time-block {
    padding-top: 56px;
  }
  .main-time {
    font-size: clamp(92px, 29vw, 176px);
  }
  .seconds {
    font-size: clamp(20px, 6vw, 36px);
  }
  .date-line {
    margin-top: 24px;
    font-size: clamp(16px, 4.5vw, 22px);
  }
  .greeting-block {
    margin-top: 28px;
  }
  .greeting {
    font-size: clamp(21px, 6vw, 29px);
  }
  .room-scene {
    border-radius: 32px 32px 0 0;
    min-height: 570px;
    margin-top: 6px;
  }
  .dog-stage {
    height: 79%;
    bottom: 1%;
    left: 0;
    right: 0;
  }
  .dog-art {
    width: min(94%, 620px);
  }
  .action-picker {
    z-index: 15;
    scrollbar-width: none;
    grid-template-columns: none;
    grid-auto-columns: minmax(82px, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    margin: 30px -22px 0;
    padding: 8px 22px 10px;
    position: relative;
    overflow-x: auto;
  }
  .action-picker::-webkit-scrollbar {
    display: none;
  }
  .action-card {
    min-height: 88px;
  }
  .cycle-hint {
    margin-top: 8px;
  }
  .site-footer {
    justify-content: center;
    margin-top: 12px;
  }
}
@media (width<=520px) {
  .brand-lockup {
    gap: 9px;
  }
  .brand-paw {
    display: none;
  }
  .brand-lockup h1 {
    font-size: 21px;
  }
  .time-block {
    padding-top: 48px;
  }
  .main-time {
    letter-spacing: -0.075em;
    font-size: clamp(82px, 28.5vw, 136px);
  }
  .seconds {
    font-size: 19px;
  }
  .date-line {
    letter-spacing: 0.08em;
  }
  .room-scene {
    min-height: 510px;
  }
  .window {
    width: 74%;
    left: 7%;
  }
  .sofa {
    width: 68%;
  }
  .side-table {
    width: 26%;
    left: 1%;
  }
  .scene-caption {
    bottom: 14px;
    right: 14px;
  }
  .weather-control {
    bottom: 14px;
    left: 14px;
  }
}
html.wallpaper-mode,
body.wallpaper-mode,
body.wallpaper-mode #root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.wallpaper-mode {
  position: fixed;
  inset: 0;
}
.time-page.wallpaper-mode {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  background: #ecddcc;
  display: block;
  overflow: hidden;
}
.time-page.wallpaper-mode .clock-panel,
.time-page.wallpaper-mode .weather-control,
.time-page.wallpaper-mode .scene-caption {
  display: none;
}

/* Keep scene switching available in wallpaper mode. */
.time-page.wallpaper-mode .scene-picker {
  z-index: 30;
  display: flex;
}
.time-page.wallpaper-mode .room-scene {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.time-page.wallpaper-mode .window {
  width: 88%;
  height: 42%;
  left: 6%;
  border-width: 10px;
  border-top-width: 0;
}
.time-page.wallpaper-mode .room-scene.scene-forest .window,
.time-page.wallpaper-mode .room-scene.scene-beach .window {
  border: 0;
  width: 100%;
  height: 100%;
  left: 0;
}
.time-page.wallpaper-mode .window-bar,
.time-page.wallpaper-mode .wall-print,
.time-page.wallpaper-mode .shelf {
  display: none;
}
.time-page.wallpaper-mode .curtain {
  height: 49%;
  opacity: 0.55;
}
.time-page.wallpaper-mode .curtain-left {
  width: 18%;
  left: -7%;
}
.time-page.wallpaper-mode .curtain-right {
  width: 14%;
  right: -3%;
}
.time-page.wallpaper-mode .sofa {
  width: 74%;
  height: 27%;
  right: -15%;
  bottom: 14%;
}
.time-page.wallpaper-mode .side-table {
  width: 27%;
  height: 15%;
  left: 0;
  bottom: 21%;
}
.time-page.wallpaper-mode .dog-stage {
  height: 58%;
  left: 0;
  right: 0;
  bottom: 2.5%;
}
.time-page.wallpaper-mode .dog-art {
  width: min(98%, 940px);
  max-height: 100%;
}
.time-page.wallpaper-mode .dog-shadow {
  width: 72%;
  left: 14%;
  bottom: 2%;
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}