/*
 * IMAGENIQ over the shared question engine.
 *
 * Three sets of worlds — a child's, an adult's, and a Wisdom member's — so the
 * same question arrives in a room that belongs to the person answering it.
 * Every screen is its own moment and nothing repeats inside a set.
 */
:root{
  --askgigi-black:#EAF1F8; --askgigi-white:#3A3346; --askgigi-pink:#D421BB;
  --askgigi-serif:"Cormorant",Georgia,serif;
  --iq-cloud:#F7FAFD; --iq-sky:#E4EDF7;
  --iq-magenta:#D421BB; --iq-magenta-ink:#D0008C;
  --iq-ink:#3A3346; --iq-ink-soft:#5E5872;
  --iq-display:"Jost",system-ui,sans-serif;
}
html.askgigi-holding body{ background:var(--iq-sky); }

/* A PHONE, DRAWN AS A PHONE. Her pane is 379 by 1200 — narrower than a phone
   and half again as tall — so a width test alone stretched a phone screen down
   a corridor. Held to 9:19.5 and standing on the cloud instead. */
.askgigi-stage{
  /* Centred with inset zero and margin auto rather than a half-shift. A
     translate fought the engine's own transform on every screen change and
     left the phone sitting off to one side. */
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  transform:none !important;
  width:min(94vw, calc(94vh * 0.4615), 400px) !important;
  height:min(94vh, calc(min(94vw, 94vh * 0.4615, 400px) * 2.1667)) !important;
  border-radius:26px; overflow:hidden;
  box-shadow:0 34px 100px -44px rgba(58,51,70,.55), 0 0 0 1px rgba(58,51,70,.06);
}
@media (max-width:430px) and (min-aspect-ratio:40/100){
  .askgigi-stage{ width:100vw !important; height:100vh !important;
    border-radius:0; box-shadow:none; }
}

/* The world fills the panel edge to edge. Any inset left a pale strip down
   each side, which read as a gap rather than a frame. */
.askgigi-stage .askgigi-screen{
  position:absolute !important;
  inset:0 !important;
  width:100% !important; max-width:none !important;
  margin:0 !important;
  min-height:100%;
  color:var(--iq-ink);
  background-color:var(--iq-cloud);
  background-size:cover, 152% auto;
  background-position:center top, 58% bottom;
  background-repeat:no-repeat, no-repeat;
}

body[data-who="child"] .askgigi-screen.is-open{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-child-open.4cfbb3161e.jpg"); }
body[data-who="child"] .askgigi-screen.is-sensation{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-child-sensation.597f0ee1c0.jpg"); }
body[data-who="child"] .askgigi-screen.is-thinking{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-child-thinking.fa4e86b899.jpg"); }
body[data-who="child"] .askgigi-screen.is-deciding{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-child-deciding.04c4e163dc.jpg"); }
body[data-who="child"] .askgigi-screen.is-sealed{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-child-sealed.faa2f31ffe.jpg"); }
body[data-who="adult"] .askgigi-screen.is-open{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-adult-open.6683442da2.jpg"); }
body[data-who="adult"] .askgigi-screen.is-sensation{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-adult-sensation.cac28d81a9.jpg"); }
body[data-who="adult"] .askgigi-screen.is-thinking{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-adult-thinking.61fc6f7a12.jpg"); }
body[data-who="adult"] .askgigi-screen.is-deciding{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-adult-deciding.770a2e06ef.jpg"); }
body[data-who="adult"] .askgigi-screen.is-sealed{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-adult-sealed.f749628263.jpg"); }
body[data-who="wisdom"] .askgigi-screen.is-open{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-wisdom-open.b06695c0df.jpg"); }
body[data-who="wisdom"] .askgigi-screen.is-sensation{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-wisdom-sensation.bcac4befa9.jpg"); }
body[data-who="wisdom"] .askgigi-screen.is-thinking{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-wisdom-thinking.f749628263.jpg"); }
body[data-who="wisdom"] .askgigi-screen.is-deciding{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-wisdom-deciding.770a2e06ef.jpg"); }
body[data-who="wisdom"] .askgigi-screen.is-sealed{ background-image:linear-gradient(180deg, rgba(247,250,253,1) 0%, rgba(247,250,253,.97) 30%, rgba(247,250,253,.86) 48%, rgba(247,250,253,.42) 62%, rgba(247,250,253,.08) 74%, rgba(247,250,253,0) 86%), url("w-wisdom-sealed.ab6b248a4d.jpg"); }

.askgigi-ask, .askgigi-heading,
.askgigi-screen h1, .askgigi-screen h2{
  font-family:var(--askgigi-serif); color:var(--iq-ink); font-weight:300;
  text-shadow:0 1px 0 rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.9);
}
.askgigi-screen p, .askgigi-screen li{
  color:var(--iq-ink-soft); font-family:var(--iq-display); font-weight:300; }

.askgigi-chip{
  font-family:var(--iq-display); background:rgba(255,255,255,.93);
  color:var(--iq-ink); border:1px solid rgba(212,33,187,.26);
  border-radius:999px; box-shadow:0 8px 24px -16px rgba(58,51,70,.55);
  transition:border-color 240ms ease, color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.askgigi-chip:hover, .askgigi-chip:focus-visible{
  border-color:var(--iq-magenta); color:var(--iq-magenta-ink); background:#fff;
  box-shadow:0 0 0 4px rgba(212,33,187,.12), 0 10px 26px -14px rgba(212,33,187,.6);
  outline:none;
}
.askgigi-go{
  border:1px solid var(--iq-magenta) !important; color:var(--iq-magenta-ink) !important;
  background:#fff !important; border-radius:999px !important;
  letter-spacing:.28em; text-transform:uppercase; font-size:10.5px;
  box-shadow:0 8px 24px -12px rgba(212,33,187,.55);
}
.askgigi-aside, .askgigi-skip{
  font-style:normal !important; font-family:var(--iq-display);
  font-size:12px; color:var(--iq-ink-soft); opacity:.9; }
.askgigi-screen input, .askgigi-screen textarea{
  font-family:var(--iq-display); color:var(--iq-ink);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(212,33,187,.26); border-radius:3px; }
.askgigi-screen input:focus, .askgigi-screen textarea:focus{
  border-color:var(--iq-magenta); box-shadow:0 0 0 4px rgba(212,33,187,.12); outline:none; }

/* the preview switch — outside the phone, and never part of the design */
.who{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:99;
  display:flex; gap:6px; font-family:var(--iq-display); }
.who a{ padding:7px 14px; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--iq-ink-soft); background:rgba(255,255,255,.9);
  border:1px solid rgba(46,42,56,.12); border-radius:999px; }
.who a[aria-current]{ color:var(--iq-magenta-ink); border-color:var(--iq-magenta); }
@media (max-width:430px) and (min-aspect-ratio:40/100){ .who{ display:none; } }

/* The engine measures a sentence against the room it thinks it has. Holding the
   panel to a phone made that room smaller and a long question ran off the side,
   so everything inside is bound to the panel and nothing may exceed it. */
.askgigi-screen, .askgigi-screen *{ box-sizing:border-box; }
.askgigi-screen{ overflow:hidden; }
.askgigi-ask, .askgigi-heading, .askgigi-floats,
.askgigi-offer, .askgigi-choices, .askgigi-onward{
  max-width:100% !important;
  padding-left:22px !important; padding-right:22px !important;
}
.askgigi-ask, .askgigi-heading{
  width:100% !important;
  font-size:clamp(20px, 6.2vmin, 27px) !important;
  line-height:1.22 !important;
  overflow-wrap:break-word; hyphens:auto;
}
.askgigi-chip{ width:100%; max-width:none; white-space:normal; }