:root {
  --paper: #F2EEE6;
  --ink: #1A1A1A;
  --ink-soft: rgba(26, 26, 26, 0.62);
  --rule: rgba(26, 26, 26, 0.28);
  --bn: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --lat: "Inter Tight", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--bn); -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }

/* the canvas is sticky and full screen; the story is told by scrolling the empty track */
#gl, #hud { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#hud { pointer-events: none; z-index: 2; }
#gl { z-index: 1; touch-action: pan-y; cursor: default; }
body.holding #gl { cursor: grab; }
body.dragging #gl { cursor: grabbing; }
body.inroom #gl, body.dragging #gl { touch-action: none; }
body:not(.story) #gl { touch-action: none; }
#track { height: 1400vh; position: relative; z-index: 0; }
body:not(.story) { overflow: hidden; height: 100vh; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#loading { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--paper); transition: opacity 0.8s ease, visibility 0.8s; }
#loading span { font: 500 13px/1 var(--lat); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
#loading span::before { content: attr(data-bn); }
#loading.done { opacity: 0; visibility: hidden; }
#fallback { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; padding: 24px; background: var(--paper); text-align: center; font-size: 18px; line-height: 1.6; }
#fallback { align-content: center; gap: 18px; }
#fallback img { max-width: min(92vw, 960px); height: auto; border: 1px solid var(--rule); }
#fallback a { color: inherit; }
#fallback[hidden], #rooms[hidden], #chips [hidden] { display: none; }

#ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#chips { position: absolute; top: 20px; right: 22px; display: flex; gap: 8px; pointer-events: none; }
.chip {
  pointer-events: auto;
  font: 500 15px/1 var(--bn); color: var(--ink); background: rgba(247, 244, 238, 0.86); backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: 999px; padding: 11px 18px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.chip[hidden] { display: none; }
.chip:hover { background: #fff; border-color: var(--ink-soft); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#rooms { pointer-events: auto; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
#rooms button {
  font: 400 15px/1.2 var(--bn); text-align: left; color: var(--ink); background: transparent; border: 0; border-left: 1px solid var(--rule);
  padding: 7px 14px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s;
}
#rooms button small { display: block; font: 500 10px/1.4 var(--lat); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
#rooms button:hover, #rooms button[aria-current="true"] { opacity: 1; border-left-color: var(--ink); }
.hint {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  font: 500 15px/1 var(--bn); color: #fff; background: rgba(20, 20, 20, 0.58); backdrop-filter: blur(10px);
  padding: 11px 20px; border-radius: 999px; transition: opacity 0.6s; pointer-events: none;
}
.hint[hidden] { display: block; opacity: 0; }

@media (max-width: 720px) {
  .chip { top: 14px; right: 14px; font-size: 14px; padding: 10px 15px; }
  #rooms { left: 8px; }
}
@media (prefers-reduced-motion: reduce) { #loading { transition: none; } }

/* the style panel */
.panel {
  pointer-events: auto; position: absolute; right: 22px; top: 70px; width: 312px; max-height: calc(100dvh - 100px); overflow: auto;
  background: rgba(247, 244, 238, 0.94); backdrop-filter: blur(12px); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
  padding: 16px 18px 18px; font-family: var(--bn); color: var(--ink);
}
.panel[hidden] { display: none; }
.panel .eyebrow { margin: 0 0 8px; font: 500 12px/1.4 var(--bn); color: var(--ink-soft); }
.panel .muted { margin: 0 0 6px; font: 400 13.5px/1.5 var(--bn); color: var(--ink-soft); }
.panel .quiz { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.panel .pal { display: flex; gap: 10px; margin-bottom: 10px; }
.panel .pal-i { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 11px/1 var(--bn); }
.panel .pal-i i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); }
.panel .apply { font: 500 13.5px/1 var(--bn); padding: 9px 14px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.panel .grp { margin: 14px 0 0; }
.panel h3 { margin: 0 0 8px; font: 600 14px/1.2 var(--bn); display: flex; align-items: baseline; justify-content: space-between; }
.panel h3 small { font: 500 9.5px/1 var(--lat); letter-spacing: 0.18em; color: var(--ink-soft); }
.sw-row { display: flex; flex-wrap: wrap; gap: 7px; }
.sw-row.dots { margin-top: 8px; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); cursor: pointer; padding: 0; }
.sw.wide { width: 48px; border-radius: 6px; }
.sw.dot { width: 18px; height: 18px; }
.sw[aria-pressed="true"], .gr[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.gr { width: 52px; height: 34px; padding: 0; border: 1px solid var(--rule); background: #fff; cursor: pointer; overflow: hidden; }
.gr svg { width: 100%; height: 100%; display: block; }
.sw:focus-visible, .gr:focus-visible, .apply:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 720px) { .panel { right: 10px; left: 10px; width: auto; top: 62px; } #chips { right: 14px; top: 14px; } }

/* the mode bar and the style chip are drawn on the HUD canvas (so a recording shows exactly what a visitor sees);
   these transparent buttons sit over them for the mouse, touch, keyboard and screen readers */
#modebar { position: absolute; inset: 0; pointer-events: none; }
.hit { position: absolute; pointer-events: auto; background: transparent; border: 0; border-radius: 999px; padding: 0; margin: 0; color: transparent; font-size: 0; cursor: pointer; }
.hit[hidden] { display: none; }
.hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#style-btn.hit { position: absolute; }
#rooms.sr-only { position: absolute; }
body.inroom #gl { cursor: grab; }
body:not(.dollhouse) .wallbtn { display: none; }

/* credits: the CC BY licence of the downloaded models asks for them to be shown; a small quiet link, bottom left, and a panel */
#credits-btn {
  pointer-events: auto; position: absolute; left: 14px; bottom: 10px; z-index: 4;
  font: 400 11.5px/1 var(--bn); color: var(--ink); opacity: 0.55; background: transparent; border: 0; padding: 6px 4px; cursor: pointer;
  text-shadow: 0 0 6px rgba(247, 244, 238, 0.9), 0 0 2px rgba(247, 244, 238, 0.9);
}
#credits-btn:hover, #credits-btn[aria-expanded="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
#credits-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; opacity: 1; }
.credits {
  pointer-events: auto; position: absolute; left: 14px; bottom: 40px; width: min(520px, calc(100vw - 28px)); max-height: min(70dvh, 620px); overflow: auto; z-index: 5;
  background: rgba(247, 244, 238, 0.97); backdrop-filter: blur(12px); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
  padding: 16px 20px 18px; font-family: var(--bn); color: var(--ink);
}
.credits[hidden] { display: none; }
#credits-close { position: absolute; right: 8px; top: 6px; font: 400 24px/1 var(--lat); background: transparent; border: 0; cursor: pointer; color: var(--ink); opacity: 0.6; padding: 4px 8px; }
#credits-close:hover { opacity: 1; }
.credits h2 { margin: 0 0 2px; font: 600 20px/1.3 var(--bn); }
.credits h2 small { font: 500 10.5px/1 var(--lat); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; }
.credits p { margin: 6px 0 10px; font: 400 13px/1.55 var(--bn); color: var(--ink-soft); }
.credits h3 { margin: 14px 0 4px; font: 600 13.5px/1.35 var(--bn); }
.credits ul { list-style: none; margin: 0; padding: 0; }
.credits li { padding: 6px 0; border-top: 1px solid var(--rule); font: 400 12.5px/1.45 var(--lat); }
.credits li b { font-weight: 500; }
.credits li span { color: var(--ink-soft); }
.credits a { color: inherit; text-underline-offset: 2px; }
body.story #credits-btn { display: none; }
/* ?clean=1 (marketing captures, see i18n.js): no page chrome */
body.clean #modebar, body.clean .hit, body.clean #credits-btn, body.clean #login-btn { display: none; }

/* the "Login / Register" pill (qaccess.js): a quiet ghost pill under the Style chip. Never in &mode=delivery (not made there); hidden once the styles are unlocked. */
#login-btn {
  pointer-events: auto; position: absolute; z-index: 4; display: inline-flex; align-items: center; height: 28px; padding: 0 13px;
  font: 500 12.5px/1 var(--bn); color: var(--ink); text-decoration: none; white-space: nowrap;
  background: rgba(247, 244, 238, 0.5); backdrop-filter: blur(6px); border: 1px solid rgba(26, 26, 26, 0.34); border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
html[lang="en"] #login-btn { font-family: var(--lat); font-size: 12px; letter-spacing: 0.01em; }
#login-btn:hover { background: #fff; border-color: var(--ink); }
#login-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#login-btn { margin-top: 0; transition: background 0.2s, border-color 0.2s, margin-top 0.3s; }
body.hinting #login-btn { margin-top: 44px; }                                       /* the "Try another style" bubble sits where the pill is, for its few seconds: the pill steps aside */
@media (max-width: 720px) { body.hinting #login-btn { margin-top: 38px; } }
body.has-login .panel { top: 100px; max-height: calc(100dvh - 124px); }
@media (max-width: 720px) { body.has-login .panel { top: 62px; max-height: calc(100dvh - 82px); } }

/* Share: the pill is drawn on the HUD like the Style chip (hud2.js shareChipBox); this is the popover for browsers without navigator.share (Copy link, WhatsApp) */
#share-pop {
  pointer-events: auto; position: absolute; z-index: 6; width: min(272px, calc(100vw - 16px)); padding: 12px 12px 8px;
  background: rgba(247, 244, 238, 0.97); backdrop-filter: blur(12px); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
  font-family: var(--bn); color: var(--ink);
}
#share-pop[hidden] { display: none; }
#share-pop input { width: 100%; margin: 0 0 6px; padding: 8px 10px; font: 400 12px/1.2 var(--lat); color: var(--ink-soft); background: #fff; border: 1px solid var(--rule); border-radius: 6px; text-overflow: ellipsis; }
#share-pop .row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; margin: 0; font: 500 14.5px/1.2 var(--bn); color: var(--ink); text-decoration: none; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--rule); cursor: pointer;
}
html[lang="en"] #share-pop .row { font-family: var(--lat); font-size: 14px; }
#share-pop .row:hover { background: rgba(26, 26, 26, 0.05); }
#share-pop .row:focus-visible, #share-pop input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
#share-pop .ic { width: 20px; height: 20px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; }
#share-pop .ic-copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M13 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }
#share-pop .ic-wa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2325D366' d='M10 1.5a8.4 8.4 0 0 0-7.2 12.7L1.7 18.3l4.2-1.1A8.4 8.4 0 1 0 10 1.5z'/%3E%3Cpath fill='%23fff' d='M7.1 5.8c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.8 2.8 4.4 3.8 2.2.8 2.6.6 3.1.6.5 0 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.6-.4l-1.8-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.3-.8-.7-1.3-1.5-1.4-1.8-.1-.2 0-.4.1-.5l.4-.5c.1-.1.2-.3.3-.4.1-.2 0-.3 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4z'/%3E%3C/svg%3E"); }

/* Sun view (sunmode.js): a quiet chip under the Share / Style chips, and a panel under it (a bottom sheet on a phone). Dollhouse and Room mode only. */
.chip-sun, .chip-sh {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px;
  font: 500 13.5px/1 var(--bn); color: var(--ink); background: rgba(247, 244, 238, 0.9); backdrop-filter: blur(8px); border: 1px solid rgba(26, 26, 26, 0.26); border-radius: 999px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
#sunbar { position: absolute; right: 16px; top: 62px; z-index: 4; display: flex; gap: 8px; pointer-events: none; }
#sunbar[hidden] { display: none; }
html[lang="en"] .chip-sun, html[lang="en"] .chip-sh { font-family: var(--lat); }
.chip-sun:hover, .chip-sh:hover { background: #fff; border-color: var(--ink); }
.chip-sun.on, .chip-sh[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-sun:focus-visible, .chip-sh:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.has-login #sunbar { top: 100px; }
body.clean #sunbar, body.clean .sunpanel { display: none; }
.sunpanel {
  pointer-events: auto; position: absolute; right: 16px; top: 104px; width: 340px; max-height: calc(100dvh - 124px); overflow: auto; z-index: 5;
  background: rgba(247, 244, 238, 0.96); backdrop-filter: blur(12px); border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: 14px 16px 14px; font-family: var(--bn); color: var(--ink);
}
body.has-login .sunpanel { top: 142px; max-height: calc(100dvh - 162px); }
.sunpanel[hidden] { display: none; }
.sunpanel h2 { margin: 0; font: 600 17px/1.3 var(--bn); }
.sunpanel h2 small { font: 500 9.5px/1 var(--lat); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; }
.sunpanel h3 { margin: 16px 0 6px; font: 600 14px/1.3 var(--bn); padding-top: 12px; border-top: 1px solid var(--rule); }
.sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-close { font: 400 24px/1 var(--lat); background: transparent; border: 0; cursor: pointer; color: var(--ink); opacity: 0.6; padding: 2px 8px; }
.sp-close:hover { opacity: 1; }
.sp-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-presets button, .sp-seg button { font: 500 13px/1.2 var(--bn); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 7px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
html[lang="en"] .sp-presets button, html[lang="en"] .sp-seg button { font-family: var(--lat); }
.sp-presets small { font: 400 11px/1 var(--bn); opacity: 0.65; }
.sp-presets button[aria-pressed="true"], .sp-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sp-presets button:focus-visible, .sp-seg button:focus-visible, .sp-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-timebox { margin-top: 12px; }
.sp-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; font: 400 13px/1.4 var(--bn); color: var(--ink-soft); }
.sp-time b { font: 600 22px/1.2 var(--lat); color: var(--ink); }
.sp-time small { flex-basis: 100%; font: 400 12.5px/1.4 var(--bn); }
.sp-slider { width: 100%; margin: 8px 0 2px; accent-color: #D9822B; }
.sp-slider.thin { margin: 0; }
.sp-ends { display: flex; justify-content: space-between; font: 400 11.5px/1.3 var(--lat); color: var(--ink-soft); }
.sp-compbox { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.sp-compass { width: 84px; height: 84px; flex: none; }
.sp-ctext { display: flex; flex-direction: column; gap: 3px; font: 400 13px/1.4 var(--bn); color: var(--ink-soft); }
.sp-ctext b { color: var(--ink); font-weight: 600; }
.sp-north { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-lab { font: 500 12.5px/1.2 var(--bn); color: var(--ink-soft); }
.sp-seg { display: flex; gap: 4px; }
.sp-seg button { width: 34px; padding: 6px 0; }
.sp-nrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sp-nval { font: 500 12px/1 var(--lat); color: var(--ink-soft); width: 34px; text-align: right; }
.sp-sum { display: flex; flex-direction: column; }
.sp-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 6px; align-items: center; text-align: left; padding: 6px 2px; margin: 0; border: 0; border-top: 1px solid var(--rule); background: transparent; color: var(--ink); font: 400 12.5px/1.3 var(--bn); cursor: pointer; }
html[lang="en"] .sp-row { font-family: var(--lat); }
.sp-row:hover { background: rgba(26, 26, 26, 0.04); }
.sp-hd { cursor: default; font: 500 11px/1 var(--lat); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-top: 0; }
.sp-hd:hover { background: transparent; }
.sp-rn { font-weight: 500; }
.sp-rn small { display: block; font: 400 10.5px/1.3 var(--lat); color: var(--ink-soft); }
.sp-cell { display: flex; align-items: center; gap: 5px; }
.sp-cell i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #bdb8ad; }
.c-morning i { background: #E9B949; } .c-midday i { background: #F2D35A; } .c-afternoon i { background: #D8532A; } .c-both i { background: linear-gradient(90deg, #E9B949 50%, #D8532A 50%); }
.c-none { color: var(--ink-soft); } .c-open i { background: #7BA77A; } .c-open { color: var(--ink-soft); }
.sp-more { margin: 4px 2px 0; font: 400 11.5px/1.4 var(--bn); color: var(--ink-soft); }
.sp-scope { margin: 12px 0 2px; font: 500 12px/1.5 var(--bn); color: var(--ink); background: rgba(217, 130, 43, 0.12); border-left: 3px solid #D9822B; padding: 6px 9px; }
.sp-site { margin: 6px 0 0; font: 400 11px/1.4 var(--lat); color: var(--ink-soft); }
.sp-low { margin: 6px 0 0; font: 400 12px/1.4 var(--bn); color: #8a3b1a; }
.sp-low[hidden] { display: none; }
@media (max-width: 720px) {
  #sunbar { right: 12px; top: 134px; }
  .chip-sun, .chip-sh { height: 32px; }
  .sunpanel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 40dvh; }
  body.has-login .sunpanel { top: auto; max-height: 40dvh; }
  body.has-login #sunbar { top: 134px; }
}

#fallback-retry { font: inherit; padding: 10px 22px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; cursor: pointer; }
#gl-lost { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 12; padding: 10px 18px; border-radius: 999px; background: rgba(30, 26, 22, .88); color: #f4efe6; font-size: 14px; max-width: 92vw; text-align: center; }
#gl-lost[hidden] { display: none; }

#login-btn[hidden] { display: none; }

/* locked style options (Login / Register nudge): same chip, a small padlock; the friendly card sits over the bottom of the panel */
.sw.locked { position: relative; }
.sw.locked .lk { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; display: grid; place-items: center; background: var(--ink); border-radius: 50%; pointer-events: none; }
.sw.locked .lk svg { width: 8px; height: 9px; fill: #fff; stroke: #fff; stroke-width: 1.4; }
.sw.locked.dot .lk { display: none; }
.lockcard { position: sticky; bottom: 0; margin: 14px -4px -6px; padding: 14px 16px 14px; background: #fff; border: 1px solid var(--ink); box-shadow: 0 10px 28px rgba(26, 26, 26, 0.22); }
.lockcard[hidden] { display: none; }
.lockcard .lc-t { margin: 0 18px 4px 0; font: 600 15px/1.35 var(--bn); }
.lockcard .lc-s { margin: 0 0 10px; font: 400 12.5px/1.5 var(--bn); color: var(--ink-soft); }
.lockcard .lc-go { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; background: var(--ink); color: #fff; text-decoration: none; font: 500 13.5px/1 var(--lat); border-radius: 999px; }
.lockcard .lc-go:focus-visible, .lockcard .lc-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lockcard .lc-x { position: absolute; right: 6px; top: 4px; font: 400 22px/1 var(--lat); background: transparent; border: 0; cursor: pointer; color: var(--ink); opacity: 0.6; padding: 4px 8px; }
@media (max-width: 720px) { body:has(#style:not([hidden])) #login-btn { visibility: hidden; } }   /* the open Style panel covers that corner on a phone; its own lock card has the button */