*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#14110f;overflow:hidden;font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;color:#f3e6d3}
button{font:inherit;color:inherit;cursor:pointer}
#viewport{position:fixed;inset:0;overflow:hidden}
/* 16:9 stage that always covers the screen; focus a bit left of centre so she stays in frame on phones */
#stage{position:absolute;width:max(100vw,177.78vh);height:max(56.25vw,100vh);left:50%;top:50%;transform:translate(-46%,-50%)}
#bob{position:absolute;inset:-2.5%;animation:bob 11s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}25%{transform:translateY(-.55%) rotate(.18deg) scale(1.004)}50%{transform:translateY(-.2%) rotate(0deg) scale(1.008)}75%{transform:translateY(.45%) rotate(-.18deg) scale(1.004)}}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 6s ease-in-out}
.scene.on{opacity:1}
.scene .img{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 60s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.0)}to{transform:scale(1.035) translateX(-.6%)}}
/* soft-edged copy of the cat region that gently "breathes" */
.catbreath{position:absolute;inset:0;background-size:cover;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),#000 55%,transparent 100%);
  transform-origin:var(--cx) var(--cy);animation:breath 4.2s ease-in-out infinite, drift 60s ease-in-out infinite alternate}
@keyframes breath{0%,100%{scale:1}45%{scale:1.012}}
.catbreath.stretch{animation:stretch 3.2s ease-in-out 1, drift 60s ease-in-out infinite alternate}
@keyframes stretch{0%,100%{scale:1;rotate:0deg}35%{scale:1.03 1.01;rotate:-1.2deg}65%{scale:1.015;rotate:.8deg}}
#stars{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 17.5% 34% at 75.3% 40.2%,#000 88%,transparent 100%);
          mask-image:radial-gradient(ellipse 17.5% 34% at 75.3% 40.2%,#000 88%,transparent 100%)}
#lamp{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 8% 53%,rgba(255,190,110,.33),rgba(255,170,90,.10) 14%,transparent 30%),
             radial-gradient(circle at 92.5% 92%,rgba(255,180,90,.28),transparent 9%);
  animation:flicker 7s infinite}
@keyframes flicker{0%,100%{opacity:.85}8%{opacity:.95}11%{opacity:.78}14%{opacity:.92}40%{opacity:.88}52%{opacity:1}55%{opacity:.82}58%{opacity:.95}80%{opacity:.86}90%{opacity:.93}}
#fairy{position:absolute;left:15%;right:38%;top:0;height:14%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,210,140,.18),transparent 70%);animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(10,6,4,.55) 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.35)}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;transition:opacity 1.2s}
#hud.idle{opacity:.25}
#hud > *{pointer-events:auto}
#topleft{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));text-shadow:0 1px 8px rgba(0,0,0,.7)}
#clock{font-size:clamp(22px,3vw,34px);font-weight:300;letter-spacing:.06em}
#caption{font-size:13px;opacity:.8;letter-spacing:.08em;margin-top:2px;transition:opacity 2s}
#controls{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:rgba(25,18,14,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,230,200,.12)}
#controls button{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,235,210,.08);font-size:17px;line-height:1;transition:background .3s}
#controls button:hover,#controls button.active{background:rgba(255,220,170,.22)}
#vol{width:90px;accent-color:#e8b778}
#credit{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));font-size:11px;color:#f3e6d3;opacity:.55;text-decoration:none;letter-spacing:.05em;text-shadow:0 1px 6px #000}
#credit:hover{opacity:.9}
#timer{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));text-align:center;padding:10px 16px;border-radius:16px;
  background:rgba(25,18,14,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,230,200,.12)}
#tmode{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
#tval{display:block;margin:0 auto;border:none;background:none;cursor:pointer;font-size:30px;font-weight:300;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.trow{display:flex;gap:6px;justify-content:center;margin-top:4px}
.trow button{border:none;background:rgba(255,235,210,.1);border-radius:999px;padding:3px 12px;font-size:12px}
.trow button:hover{background:rgba(255,220,170,.25)}
/* intro */
#intro{position:fixed;inset:0;display:grid;place-items:center;background:rgba(12,8,6,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity 1.8s;z-index:5}
#intro.gone{opacity:0;pointer-events:none}
#intro .card{text-align:center;padding:28px 34px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#intro h1{font-weight:300;font-size:clamp(34px,6vw,58px);letter-spacing:.12em}
#intro p{opacity:.85;margin-top:6px}
#intro .small{font-size:12px;opacity:.6;margin-top:16px}
#begin{margin-top:22px;padding:12px 30px;border-radius:999px;border:1px solid rgba(255,225,190,.4);background:rgba(255,220,170,.12);font-size:16px;letter-spacing:.12em;animation:pulse 3.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,150,.0)}50%{box-shadow:0 0 28px 4px rgba(255,210,150,.25)}}
@media (max-width:560px){#vol{width:60px}#controls{gap:5px;padding:6px 8px}#controls button{width:34px;height:34px;font-size:15px}#timer{top:auto;bottom:80px;right:50%;transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){#bob,.scene .img,.catbreath{animation:none}}
/* portrait phones: slow camera pan between her and the window/cat */
@media (max-aspect-ratio:1/1){
  #stage{animation:pan 46s ease-in-out infinite alternate}
}
@keyframes pan{from{transform:translate(-40%,-50%)}to{transform:translate(-63%,-50%)}}

#controls button svg{display:block;margin:auto}
#tpanel{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,230,200,.15);display:flex;flex-direction:column;gap:8px;min-width:200px}
#tpanel[hidden]{display:none}
.presets{display:flex;gap:6px;justify-content:center}
.presets button{border:1px solid rgba(255,230,200,.2);background:rgba(255,235,210,.06);border-radius:999px;padding:3px 10px;font-size:12px}
.presets button.on,.presets button:hover{background:rgba(255,220,170,.25)}
.srow{display:flex;align-items:center;gap:6px;font-size:12px;justify-content:center}
.srow span:first-child{width:38px;text-align:left;opacity:.8;letter-spacing:.08em}
.srow .u{opacity:.6}
.srow .pm{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,235,210,.1);font-size:15px;line-height:1}
.srow .pm:hover{background:rgba(255,220,170,.25)}
.srow input{width:52px;text-align:center;font:inherit;font-size:15px;color:inherit;background:rgba(0,0,0,.25);border:1px solid rgba(255,230,200,.2);border-radius:8px;padding:3px 2px;-moz-appearance:textfield}
.srow input::-webkit-inner-spin-button,.srow input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}