/* The intro page: always dark, full screen, nothing scrolls. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.intro{
  overflow:hidden;background:#05070d;color:#e8ecf6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- the background: quiet, like a real surface under real light ----
   .fluid is the light falling on it (it breathes very slowly), .dots its texture: graph
   paper, a fine engineering grid that fades towards the edges. #rain is the faint 1s and 0s. */
.fluid,.dots{position:fixed;inset:0;pointer-events:none}
.fluid{animation:lamp 9s ease-in-out infinite alternate}
@keyframes lamp{from{opacity:.82}to{opacity:1}}
.dots::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;opacity:.05;mix-blend-mode:overlay}
.dots::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}

body.bg-grid{background:#111317}
.bg-grid .fluid{background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(210,220,240,.06),transparent 70%)}
.bg-grid .dots{background-image:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%)}

/* ---- the questions ---- */
.questions{position:fixed;inset:0;pointer-events:none}
.q{
  position:absolute;width:max-content;max-width:min(300px,42vw);padding:10px 16px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:clamp(13px,1.45vw,17px);line-height:1.35;color:#dfe5f3;box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;transform:translate(-50%,-50%) scale(.6);
}
.q.show{animation:qIn .42s cubic-bezier(.34,1.56,.64,1) forwards, qFloat var(--fd,7s) ease-in-out var(--fdel,0s) infinite alternate}
.q.shake.show{animation:qIn .42s cubic-bezier(.34,1.56,.64,1) forwards, qShake 2.6s ease-in-out .5s infinite}
.q b{color:#fff}
@keyframes qIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes qFloat{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(calc(-50% + var(--dx,10px)),calc(-50% + var(--dy,-14px))) scale(1) rotate(var(--rot,1.5deg))}}
@keyframes qShake{0%,72%,100%{opacity:1;transform:translate(-50%,-50%) rotate(0)}76%{transform:translate(-52%,-50%) rotate(-3deg)}80%{transform:translate(-48%,-50%) rotate(3deg)}84%{transform:translate(-51%,-50%) rotate(-2deg)}88%{transform:translate(-49%,-50%) rotate(1deg)}}

/* ---- centre stage ---- */
.stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}
/* The words sit dead centre, out of the flow, so the bubbles can keep a band clear for them. */
.line{position:absolute;left:0;right:0;top:50%;padding:0 24px;font-size:clamp(22px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;min-height:1.3em;opacity:0;transform:translateY(calc(-50% + 12px));transition:opacity .32s,transform .32s}
.line.show{opacity:1;transform:translateY(-50%)}
.line em{font-style:normal;color:#a9c1ff}

.logo{display:none;flex-direction:column;align-items:center;gap:14px}
.logo.show{display:flex}
.tiles{position:relative;height:var(--tile)}
:root{--tile:clamp(30px,9vw,78px);--gap:clamp(5px,1vw,10px)}
.tile{
  position:absolute;top:0;left:0;width:var(--tile);height:var(--tile);border-radius:calc(var(--tile) * .2);
  display:grid;place-items:center;font-weight:800;font-size:calc(var(--tile) * .5);color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1.5px solid rgba(255,255,255,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:background .35s,border-color .35s,box-shadow .35s,color .35s;
  opacity:0;
}
.tile.in{animation:tileIn .32s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes tileIn{from{opacity:0}to{opacity:1}}
.tile.cmp{border-color:#ffc94d;background:rgba(255,201,77,.18);box-shadow:0 0 0 4px rgba(255,201,77,.15),0 10px 26px rgba(0,0,0,.35)}
.tile.done{border-color:#4fe0a0;background:linear-gradient(160deg,rgba(79,224,160,.35),rgba(47,91,255,.25));box-shadow:0 0 24px rgba(79,224,160,.35)}
.dsa{
  font-weight:800;letter-spacing:.42em;padding-left:.42em;font-size:calc(var(--tile) * .34);color:#9fb6ff;
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.dsa.show{opacity:1;transform:none}
.tagline{font-size:clamp(14px,1.7vw,19px);color:#b7c1d8;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.tagline.show{opacity:1;transform:none}
.cta{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(14px);transition:opacity .4s .1s,transform .4s .1s;pointer-events:none}
.cta.show{opacity:1;transform:none;pointer-events:auto}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(122,77,255,.55),0 14px 36px rgba(53,98,227,.45)}50%{box-shadow:0 0 0 14px rgba(122,77,255,0),0 14px 36px rgba(53,98,227,.45)}}
.facts{font-size:13px;color:#8b96b0}

.skip{
  position:fixed;z-index:5;padding:8px 14px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;
  color:#c9d2e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);transition:background .2s,opacity .4s
}
.skip{top:18px;right:18px}
.skip:hover{background:rgba(255,255,255,.14)}
.skip.gone{opacity:0;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .fluid{animation:none}
  .q.show{animation:none;opacity:1;transform:translate(-50%,-50%)}
  }
.facts .beta{display:inline-block;margin-right:7px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#ff8a3d,#ff4f9a);vertical-align:1px}

/* Leaving for the problem list: everything fades out (a skip is quicker). */
body.leaving > *{opacity:0 !important;transition:opacity .5s ease !important}
body.leaving-fast > *{opacity:0 !important;transition:opacity .2s ease !important}

/* The tiles take the colour of the room they're in, instead of neon green. */
.bg-grid .tile.done{border-color:rgba(150,182,255,.65);background:linear-gradient(160deg,rgba(150,182,255,.20),rgba(150,182,255,.05));box-shadow:0 0 22px rgba(150,182,255,.16),0 10px 26px rgba(0,0,0,.35)}
.bg-grid .dsa{color:#a9c1ff}
.tile.cmp{border-color:rgba(255,214,120,.8);background:rgba(255,214,120,.14);box-shadow:0 0 0 3px rgba(255,214,120,.12),0 10px 26px rgba(0,0,0,.35)}

/* 1s and 0s falling down the graph paper, faint, like the classic hacker screen. Fainter in
   the middle, so the words and the logo stay easy to read. */
.rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;color:#96b6ff;--bit-head:#d6e4ff;
  -webkit-mask-image:radial-gradient(ellipse 55% 42% at 50% 50%,rgba(0,0,0,.22),#000 78%);
          mask-image:radial-gradient(ellipse 55% 42% at 50% 50%,rgba(0,0,0,.22),#000 78%)}
@media (prefers-reduced-motion: reduce){.rain{display:none}}