/* ============================================================
   base — reset, canvas, atmosphere (penthouse photo), demo strip, type
   ============================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100%;
  display:flex;flex-direction:column;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-weight:650;letter-spacing:-.01em;margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;left:-9999px}
.hide{display:none !important}

/* ---------- atmosphere: penthouse photo behind frosted glass ---------- */
.atmos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;background:var(--ground)}
.atmos .photo{position:absolute;inset:-12px;
  background:url(../img/bg-penthouse.jpg) center 46% / cover no-repeat;
  filter:saturate(108%) brightness(.78)}
.atmos .scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,10,15,.82) 0%,rgba(7,10,15,.38) 30%,rgba(7,10,15,.30) 62%,rgba(7,10,15,.78) 100%),
  linear-gradient(180deg,rgba(7,10,15,.55) 0%,rgba(7,10,15,.12) 40%,rgba(7,10,15,.70) 100%)}
.atmos .ember{position:absolute;width:560px;height:560px;left:-200px;bottom:-280px;border-radius:50%;filter:blur(100px);background:var(--accent);opacity:.16}

/* ---------- demo strip ---------- */
.demo{position:relative;z-index:5;display:flex;align-items:center;gap:10px;justify-content:center;
  padding-block:7px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);background:rgba(7,10,15,.6);backdrop-filter:blur(12px)}
.demo b{color:var(--ink);font-weight:600}
.demo .dot{width:7px;height:7px;border-radius:50%;background:var(--est);flex:none}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:padding-box}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:820px){
  .atmos .photo{background-position:62% 50%}
  .atmos .scrim{background:linear-gradient(180deg,rgba(7,10,15,.7),rgba(7,10,15,.5) 40%,rgba(7,10,15,.82))}
  .demo{justify-content:flex-start;text-align:left}
}