/* Little Wordsmiths app screens, rebuilt as live HTML for the 5.8 website preview.

   WHERE THE NUMBERS COME FROM. Every size, colour, radius and string here is read from the app source on the v5.9 line
   (src/theme/tokens.ts, src/lwsg/look/*, src/components/*, src/lwsg/screens/*), not guessed. A screen is drawn at the
   phone's own size, 440 x 956 points (an iPhone 17 Pro Max, the size of the real screenshots), and scaled to its frame
   with one CSS transform (--as-k), so proportions stay exact at every width.

   THE FONT. The app's iOS font is the system font (San Francisco). Where that is missing (Windows, Android) the stack
   falls back to Inter, self-hosted below, the closest open face. Inter is licensed under the SIL Open Font License 1.1.

   THIS FILE IS SHARED. Parts every screen reuses live here (the status bar, the back pill, the lit card, the glossy
   button, the step chips, the bottom band, the ghost finger). Anything only one screen needs goes in that screen's own
   file (screens/<id>.js, its `css` field), so two workers never edit the same file. Prefix every new class `as-` and
   write absolute positioning as `.as-app .your-class{position:absolute}`: the base rule below gives every element in a
   screen `position:relative`, the way React Native does. */

@font-face{font-family:"AppInter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/Inter-var.woff2) format("woff2")}

/* ---------------------------------------------------------------- the frame and the stage */
.asx{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;border-radius:inherit;background:#FFF9F2;contain:layout paint style}
.asx-stage{position:absolute;left:0;top:0;width:440px;height:956px;transform-origin:0 0;transform:translateY(var(--as-ty,0px)) scale(var(--as-k,.4))}
.as-has-live>img.asx-still{visibility:hidden}

/* ---------------------------------------------------------------- React Native layout defaults, as CSS */
.as-app,.as-app *{box-sizing:border-box}
.as-app{position:absolute;left:0;top:0;width:440px;height:956px;overflow:hidden;background:#FFF9F2;color:#2B2640;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",AppInter,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;-webkit-font-smoothing:antialiased;line-height:normal;text-align:left;letter-spacing:0;font-weight:400;
  -webkit-user-select:none;user-select:none;
  --ink:#2B2640;--inkSoft:#5C5378;--paper:#FFF9F2;--purple:#B67CB7;--deepPurple:#97699D;--purpleText:#8C6293;--blue:#61CBF4;
  --deepBlue:#529DC2;--green:#9BCE6B;--teal:#7ECCB0;--orange:#F88E3E;--deepOrange:#D5722F;--yellow:#F9D035;--pink:#EE8CA6;--red:#F46947;
  --tPurple:#F6EFF6;--tPurpleEdge:#EBDAEB;--tBlue:#ECF9FE;--tBlueEdge:#D3F0FC;--tGreen:#F3F9ED;--tGreenEdge:#E3F1D6;
  --tOrange:#FEF1E8;--tOrangeEdge:#FDDFC9;--gold:#E9B038}
.as-app *{position:relative}
.as-app .as-abs{position:absolute}
.as-app img{display:block;max-width:none;-webkit-user-drag:none;user-select:none}
.as-app svg{display:block;overflow:visible;flex-shrink:0}
.as-app .as-v{display:flex;flex-direction:column;flex-shrink:0;min-width:0;min-height:0}
.as-app .as-r{flex-direction:row}
.as-app .as-t{display:block}
.as-app .as-fill{position:absolute;left:0;top:0;right:0;bottom:0}
.as-app .as-gap12{height:12px;flex-shrink:0}
.as-app .as-pointer-none{pointer-events:none}

/* ---------------------------------------------------------------- the phone's status bar and the back pill */
.as-app .as-status{position:absolute;left:0;top:0;width:440px;height:62px;pointer-events:none;z-index:60}
.as-app .as-time{position:absolute;left:71px;top:21px;font-size:19px;font-weight:600;letter-spacing:-.2px;color:#000;line-height:22px}
.as-app .as-back{position:absolute;left:-2px;top:70px;width:52px;height:52px;border-radius:0 20px 20px 0;background:#FFF9F2;
  box-shadow:0 6px 14px rgba(43,38,64,.16);display:flex;align-items:center;justify-content:center;z-index:25}

/* ---------------------------------------------------------------- text roles (theme/tokens.ts text()) */
.as-app .as-kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;margin-bottom:1px}
.as-app .as-h22{font-size:22px;font-weight:800;color:#2B2640}
.as-app .as-h22 b{font-weight:900}
.as-app .as-sub13{font-size:13px;font-weight:700;color:#5C5378;margin-top:2px}
.as-app .as-sub12{font-size:12px;font-weight:700;color:#5C5378;margin-top:2px}

/* ---------------------------------------------------------------- cards */
.as-app .as-card{background:#fff;border-radius:22px;box-shadow:0 6px 14px rgba(43,38,64,.16)}
/* LitCard (look/LitCard.tsx): a far shadow outside (tinted by a strand's glow when it has one), a near shadow and a hairline
   inside, a fill easing white to warm paper, and a lit lip along the top edge. */
.as-app .as-lit{border-radius:24px;background:#fff;box-shadow:0 10px 16px rgba(43,38,64,.2)}
.as-app .as-lit>.as-lit-in{border-radius:24px;background:#fff;box-shadow:0 2px 3px rgba(43,38,64,.09);border:.5px solid rgba(43,38,64,.05);overflow:hidden}
.as-app .as-lit>.as-lit-in::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:24px;background:linear-gradient(#fff,#FFFBF6)}
.as-app .as-lit>.as-lit-in::after{content:"";position:absolute;left:14.4px;right:14.4px;top:0;height:1.5px;border-radius:1px;background:rgba(255,255,255,.92);z-index:2}
.as-app .as-lit-body{position:relative;z-index:1}
.as-app .as-glow-words{box-shadow:0 10px 16px rgba(182,124,183,.34)}
.as-app .as-glow-maths{box-shadow:0 10px 16px rgba(248,142,62,.34)}
.as-app .as-glow-sentences{box-shadow:0 10px 16px rgba(155,206,107,.34)}
.as-app .as-glow-shapes{box-shadow:0 10px 16px rgba(97,203,244,.34)}
.as-app .as-glow-checkin{box-shadow:0 10px 16px rgba(238,140,166,.34)}

/* ---------------------------------------------------------------- the glossy button and the band under a page (look/GlossBtn.tsx, stops/BottomBand.tsx) */
.as-app .as-band{padding:10px 22px 50px;background:#FFF9F2;border-top:.5px solid rgba(43,38,64,.08);position:absolute;left:0;right:0;bottom:0;z-index:30}
.as-app .as-gloss{border-radius:18px;background:#9BCE6B}
.as-app .as-gloss.go{box-shadow:0 8px 11px rgba(126,204,176,.5)}
.as-app .as-gloss.go>.as-gloss-in{background:linear-gradient(to bottom right,#9BCE6B,#7ECCB0)}
.as-app .as-gloss-in{min-height:50px;padding:14px 18px;border-radius:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.as-app .as-gloss-in::before{content:"";position:absolute;left:9.9px;right:9.9px;top:0;height:1.5px;border-radius:1px;background:rgba(255,255,255,.92)}
.as-app .as-gloss-in span{font-size:15px;font-weight:800;color:#2B2640}

/* ---------------------------------------------------------------- step chips (stops/StepChips.tsx) */
.as-app .as-chips{display:flex;flex-direction:row;gap:6px}
.as-app .as-chip-o{flex:1 1 0;min-width:0;height:36px;border-radius:18px;background:#fff;box-shadow:0 3px 9px rgba(43,38,64,.08)}
.as-app .as-chip{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:18px;border:2px solid;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:0 4px}
.as-app .as-chip .as-chip-fill{position:absolute;left:0;top:0;right:0;bottom:0}
.as-app .as-chip .as-chip-lip{position:absolute;top:0;left:10px;right:10px;height:1.5px;border-radius:1px;background:rgba(255,255,255,.92);z-index:2}
.as-app .as-chip .as-chip-c{display:flex;flex-direction:row;align-items:center;gap:3px;max-width:100%;z-index:1}
.as-app .as-chip .as-chip-c span{font-size:11.5px;font-weight:800;color:#2B2640;white-space:nowrap}
.as-app .as-chip.wait .as-chip-c span{color:#5C5378}

/* ---------------------------------------------------------------- the ghost finger: a soft touch dot that taps, drags and traces */
.as-app .as-finger{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;z-index:90;opacity:0;
  background:rgba(60,48,96,.20);border:2.5px solid rgba(255,255,255,.92);box-shadow:0 3px 10px rgba(43,38,64,.28),inset 0 0 0 1px rgba(43,38,64,.08);will-change:transform,opacity}
.as-app .as-finger::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(43,38,64,.34)}
.as-app .as-finger.down{background:rgba(60,48,96,.34)}
.as-app .as-ripple{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(97,203,244,.9);pointer-events:none;z-index:89;opacity:0}

.as-app .as-veil{position:absolute;left:0;top:0;width:440px;height:956px;background:#FFF9F2;opacity:0;pointer-events:none;z-index:50}

/* ---------------------------------------------------------------- press states, the cheer, the confetti */
.as-app .as-pressed{opacity:.6}          /* PRESSED (components/atoms.tsx): a pressed control dims to 60 percent */
.as-app .as-cheer{position:absolute;left:64px;right:16px;top:68px;z-index:55;opacity:0;pointer-events:none}
.as-app .as-cheer-card{display:flex;flex-direction:row;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:10px 14px;box-shadow:0 12px 24px rgba(43,38,64,.18)}
.as-app .as-cheer-mark{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.as-app .as-cheer-card span{flex:1 1 0;min-width:0;font-size:14px;font-weight:800;color:#2B2640;line-height:17px}
.as-app .as-confetti{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;z-index:5}
.as-app .as-dot{position:absolute;top:0;width:8px;height:8px;border-radius:99px;opacity:0}
.as-app .as-finger{transition:opacity .22s ease}

/* ---------------------------------------------------------------- the frame every curriculum stop shares (stops/StopFrame.tsx): Maths, Sentence, Number, Shape's stop */
.as-app .as-stop{position:absolute;left:0;top:0;width:440px;padding:126px 16px 12px;display:flex;flex-direction:column}
.as-app .as-chipsrow{margin-top:10px;margin-bottom:12px}
.as-app .as-stopcard{padding:14px}
.as-app .as-headrow{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:8px}
.as-app .as-headtext{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.as-app .as-cap{font-size:12px;font-weight:800;color:#5C5378}
.as-app .as-steptitle{font-size:20px;font-weight:800;color:#2B2640}
.as-app .as-well{border-radius:18px;border:2px solid;padding:8px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.as-app .as-well::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:linear-gradient(rgba(43,38,64,.08),rgba(43,38,64,0))}
.as-app .as-skyrow{display:flex;flex-direction:row;align-items:center;gap:10px;margin-top:8px}
.as-app .as-skyline{flex:1 1 0;min-width:0;font-size:14px;font-weight:800;color:#2B2640;line-height:19px;min-height:28px}