*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:#070b16;
  font-family:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;cursor:default;
}

canvas,svg,#tint,#fog,#flash{position:fixed;inset:0;pointer-events:none}

#stars{z-index:1}

#sun,#moon{
  position:fixed;z-index:2;border-radius:50%;pointer-events:none;
  transition:opacity 1.5s linear;will-change:transform;opacity:0;
}
#sun{
  width:17vmin;height:17vmin;min-width:100px;min-height:100px;
  background:radial-gradient(circle,var(--sunA,#fff7dc) 0%,var(--sunB,#ffd76a) 34%,transparent 68%);
}
#moon{
  width:9vmin;height:9vmin;min-width:56px;min-height:56px;
  background:radial-gradient(circle at 62% 35%,#fdfeff 0%,#e6edfa 45%,#c2cfe4 62%,rgba(190,206,232,0) 65%);
  filter:drop-shadow(0 0 24px rgba(214,228,255,.45));
}

#clouds{z-index:3}
#tint{z-index:4;transition:background-color 2s linear}
#scene{z-index:10}
#horse{
  position:fixed;z-index:11;pointer-events:none;
  background-image:url('horse.png');background-repeat:no-repeat;
}
#vig{
  position:fixed;inset:0;z-index:26;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(2,6,14,.22) 100%);
}

#fog{z-index:12;opacity:0;transition:opacity 3s}
.fogband{
  position:absolute;left:-60%;width:220%;height:24vh;
  background:linear-gradient(90deg,transparent,rgba(216,224,234,.5) 20%,rgba(216,224,234,.5) 80%,transparent);
  filter:blur(26px);
}
.f1{top:50vh;animation:fogA 70s ease-in-out infinite alternate}
.f2{top:68vh;animation:fogB 95s ease-in-out infinite alternate}
@keyframes fogA{to{transform:translateX(9%)}}
@keyframes fogB{from{transform:translateX(6%)}to{transform:translateX(-6%)}}

#precip{z-index:22}
#flash{z-index:25;background:#e9f1ff;opacity:0;transition:opacity .12s ease-out}

#ui{
  position:fixed;top:6.5vh;left:0;right:0;z-index:30;text-align:center;pointer-events:none;
  color:var(--ink,#f1f5fa);
  text-shadow:var(--inkshadow,0 2px 26px rgba(0,8,20,.45));
  transition:color 1.2s;
}
#clock{
  font-size:clamp(64px,13vmin,150px);
  font-weight:200;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
#meta{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:.25em;
  font-size:.2em;font-weight:300;opacity:.85;margin-left:.45em;
  vertical-align:1.55em;
}
#date{
  margin-top:1.8vh;
  font-size:clamp(12px,1.9vmin,17px);
  letter-spacing:.34em;text-transform:uppercase;font-weight:400;opacity:.85;
  padding-left:.34em; /* optically recenter the letter-spaced line */
}
#wline{
  margin-top:1vh;
  font-size:clamp(11px,1.7vmin,15px);
  letter-spacing:.14em;font-weight:300;opacity:.75;min-height:1.2em;
  padding-left:.14em;
}
#demoBadge{
  display:none;margin-top:1.6vh;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;
}

#quote{
  position:fixed;top:34vh;left:0;right:0;z-index:30;
  text-align:center;padding:0 10vw;pointer-events:none;
  color:var(--ink,#f1f5fa);text-shadow:var(--inkshadow);
  opacity:0;transition:opacity 1.4s ease,color 1.2s;
}
#qtext.dev{
  font-family:'Noto Sans Devanagari','Nirmala UI','Mangal',
    'Segoe UI',system-ui,sans-serif;
  font-size:clamp(17px,2.6vmin,24px);font-weight:400;
  letter-spacing:.01em;line-height:1.9;opacity:.95;
  max-width:60ch;margin:0 auto;
}
#qtext.lat{
  font-size:clamp(15px,2.3vmin,21px);font-weight:300;font-style:italic;
  letter-spacing:.03em;line-height:1.7;opacity:.9;
  max-width:62ch;margin:0 auto;
}
#qm{
  display:none;margin-top:.9em;
  font-family:'Noto Sans Devanagari','Nirmala UI','Mangal',
    'Segoe UI',system-ui,sans-serif;
  font-size:clamp(12px,1.8vmin,16px);font-weight:300;
  line-height:1.8;opacity:.65;
  max-width:58ch;margin-left:auto;margin-right:auto;
}
#qauthor{
  margin-top:1.1em;font-size:clamp(10px,1.5vmin,13px);
  letter-spacing:.32em;text-transform:uppercase;opacity:.55;font-style:normal;
}
#hint{
  position:fixed;right:18px;bottom:14px;z-index:30;
  font-size:11px;letter-spacing:.1em;
  color:var(--ink,#fff);opacity:.32;pointer-events:none;
}
#soundBtn{
  position:fixed;left:18px;bottom:12px;z-index:32;
  font:inherit;font-size:12px;letter-spacing:.1em;
  color:var(--ink,#fff);opacity:.4;background:none;border:none;cursor:pointer;
  text-shadow:var(--inkshadow,none);
}
#soundBtn:hover{opacity:.75}
#musicBtn{
  position:fixed;left:120px;bottom:12px;z-index:32;
  font:inherit;font-size:12px;letter-spacing:.1em;
  color:var(--ink,#fff);opacity:.4;background:none;border:none;cursor:pointer;
  text-shadow:var(--inkshadow,none);
}
#musicBtn:hover{opacity:.75}
.h-cred{
  margin-top:16px;font-size:10.5px;line-height:1.8;letter-spacing:.06em;opacity:.45;
}

#help{
  position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(4,8,16,.35);backdrop-filter:blur(6px);
}
#help.open{display:flex}
.panel{
  background:rgba(10,15,26,.8);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:26px 32px;color:#e9eef6;min-width:320px;
}
.h-title{font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-bottom:16px}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 28px;font-size:13.5px;font-weight:300;white-space:nowrap}
kbd{
  display:inline-block;min-width:24px;text-align:center;padding:2px 6px;
  border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;border-radius:6px;
  font:inherit;font-size:12px;margin-right:8px;background:rgba(255,255,255,.06);
}