*{box-sizing:border-box;margin:0;padding:0;font-family:inherit;}
html,body{font-family:'Inter',sans-serif;}
html,body,#root{height:100%;overflow:hidden;}
@media (max-width:768px){
  html,body,#root{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;}
}
.blur-el{position:absolute;border-radius:50%;filter:blur(90px);animation:fl 20s ease-in-out infinite;pointer-events:none;}
@keyframes fl{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-30px) scale(1.1);}66%{transform:translate(-20px,20px) scale(0.9);}}
.slider{transition:none;}
.tog,.nb{cursor:pointer;border:none;outline:none;font-family:inherit;background:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);}
.tog:hover{transform:scale(1.04);opacity:0.9;}
.nb:hover{transform:scale(1.04);opacity:0.9;}
.card{}
.sidebar-btn{background:none;border:none;cursor:pointer;font-family:inherit;transition:all .2s ease;}
.sidebar-btn:hover{opacity:1 !important;}
a{transition:opacity .2s ease;}
a:hover{opacity:0.8;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.3);border-radius:2px;}
@media (max-width:768px){
  ::-webkit-scrollbar{width:0px;height:0px;}
  *{scrollbar-width:none;}
}

/* ─── FLAT DESIGN: AI-READY SOPHISTICATION ─────────────────────────── */
/* Refined spacing, typography, and micro-interactions */
@supports (backdrop-filter: blur(0)) {
  .flat-card {
    transition: box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), 
                border-color 0.2s cubic-bezier(0.4,0,0.2,1),
                background-color 0.2s ease;
  }
  .flat-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
  }
}

@keyframes projFlicker60s {
  0%   { filter: brightness(0.72) contrast(1.05); }
  15%  { filter: brightness(0.95) contrast(1.08); }
  30%  { filter: brightness(0.78) contrast(1.04); }
  50%  { filter: brightness(1.00) contrast(1.06); }
  65%  { filter: brightness(0.88) contrast(1.03); }
  82%  { filter: brightness(0.97) contrast(1.05); }
  100% { filter: brightness(1.00) contrast(1.00); }
}
@keyframes hintFade {
  0%, 100% { opacity: 0; }
  40%, 60%  { opacity: 1; }
}
/* Old-TV "channel change" transition for the projector screen photos */
@keyframes tvChannelSwap {
  0%   { transform: scaleY(0.02) scaleX(1.1); filter: brightness(3.2) saturate(0) contrast(1.4); opacity: 0.4; }
  8%   { transform: scaleY(1.35) scaleX(0.92); filter: brightness(2.6) saturate(0.2) contrast(1.3); opacity: 1; }
  20%  { transform: scaleY(0.88) scaleX(1.04); filter: brightness(1.7) saturate(0.6) contrast(1.15); }
  35%  { transform: scaleY(1.06) scaleX(0.99); filter: brightness(1.2) saturate(0.9) contrast(1.05); }
  55%  { transform: scaleY(0.98) scaleX(1.01); filter: brightness(1.05) saturate(1) contrast(1.02); }
  75%  { transform: scaleY(1.01); filter: brightness(1) saturate(1) contrast(1); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1) saturate(1) contrast(1); opacity: 1; }
}
@keyframes tvChannelStatic {
  0%   { opacity: 0.65; }
  60%  { opacity: 0.18; }
  100% { opacity: 0; }
}
.tv-screen-photo {
  animation: tvChannelSwap 0.5s cubic-bezier(0.2,0.6,0.3,1);
  transform-origin: center center;
}
.tv-screen-static {
  animation: tvChannelStatic 0.45s ease-out forwards;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.9) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
/* Clicker/remote hover — a gentle handheld 3D tilt (rocks left/right on its long axis,
   with a soft rounded-arc sway) to read as "this is a physical remote you hold and click",
   not a flat UI button. Toggled via inline style from JS (see onMouseEnter/Leave) rather
   than a :hover rule so it composes with the button's own translateX positioning offset. */
@keyframes clickerWobble {
  0%, 100% { transform: translateX(32px) perspective(360px) rotateY(-14deg) rotate(-3deg) translateY(0px); }
  50%      { transform: translateX(32px) perspective(360px) rotateY(14deg) rotate(3deg) translateY(-2px); }
}
.mockup-scroll { scrollbar-width: thin; scrollbar-color: rgba(140,145,155,0.45) transparent; }
.mockup-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.mockup-scroll::-webkit-scrollbar-track { background: transparent; }
.mockup-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(140,145,155,0.45);
  border-radius: 10px;
  border: 2px solid rgba(250,252,255,0.98);
  background-clip: padding-box;
}
.mockup-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(140,145,155,0.65); }