:root {
  --ink: #173a64;
  --blue: #147fe6;
  --pale: #eaf7ff;
  --line: #cde6f7;
  --green: #2dac78;
  --yellow: #ffcc42;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html { background: #e9f7ff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(135deg, #e9f7ff, #fff 55%, #e6f5ff); }
button { min-height: 44px; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
#root { width: min(100%, 1180px); min-height: 100vh; margin: auto; overflow: hidden; background: #fff; box-shadow: 0 0 55px rgba(23,71,107,.13); }
header { border-bottom: 1px solid var(--line); background: #fff; }
.topbar { min-height: 86px; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 10px clamp(16px, 4vw, 44px); text-align: center; }
.topbar > i { width: 48px; }
.topbar h1 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 29px); }
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.brand img { width: 27px; height: 27px; object-fit: contain; }
.back { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 27px; cursor: pointer; }
.screen { padding: clamp(28px, 5vw, 54px) clamp(18px, 5vw, 65px) 42px; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h2 { letter-spacing: -.035em; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 34px; max-width: 980px; margin: auto; padding: clamp(28px, 5vw, 54px); overflow: hidden; border: 1px solid #d9eefa; border-radius: 34px; background: linear-gradient(135deg, #f8fcff, #e7f6ff); }
.hero h2 { margin: 0 0 17px; font-size: clamp(40px, 5vw, 61px); line-height: .98; }
.hero h2 em { color: var(--blue); font-style: normal; }
.hero p:not(.eyebrow) { margin: 0 0 25px; color: #597898; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; }
.primary { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 17px; background: linear-gradient(135deg, var(--blue), #1f93ed); color: #fff; padding: 18px 22px; font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: 0 13px 26px rgba(20,127,230,.25); }
.hero small { display: block; margin-top: 15px; color: #6a88a1; font-size: 12px; }
.hero aside { position: relative; justify-self: center; display: grid; place-items: center; width: 210px; height: 228px; border-radius: 46% 54% 59% 41% / 49% 40% 60% 51%; background: linear-gradient(145deg,#fff,#d7f2ff); box-shadow: inset 0 0 0 7px #fff, 0 15px 32px rgba(80,137,173,.15); }
.hero aside img { width: 125px; height: 125px; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(23,93,146,.2)); }
.hero aside span { position: absolute; left: 27px; top: 19px; color: var(--yellow); font-size: 28px; }
.hero aside b { position: absolute; bottom: 14px; color: #086ac7; font-size: 11px; letter-spacing: .12em; line-height: 1.05; text-align: center; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 20px auto; }
.features button { display: grid; grid-template-columns: 55px 1fr 20px; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 21px; background: #fff; padding: 16px; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 7px 17px rgba(29,100,141,.06); }
.features i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #ffebe6; color: #e96b51; font-size: 18px; font-style: normal; font-weight: 900; }
.features button:nth-child(2) i { background: #fff4d1; font-size: 24px; }
.features .sentence-feature { grid-column: 1 / -1; }
.features .sentence-feature i { background: #e4f7ef; color: #248f68; font-size: 24px; }
.features strong, .features small { display: block; }
.features strong { font-size: 18px; }
.features small { margin-top: 3px; color: #66839e; }
.features > button > b { color: var(--blue); font-size: 20px; }
.parent-note { display: flex; gap: 11px; max-width: 980px; margin: 8px auto 0; padding: 15px 18px; border-radius: 16px; background: #f8fcff; color: #597998; font-size: 13px; line-height: 1.45; }
.parent-note > b { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--green); color: #fff; }
.parent-note strong { color: var(--ink); }
footer { padding: 19px; background: #f5fbff; color: #7693aa; text-align: center; font-size: 12px; }
.intro, .quiz { max-width: 670px; margin: 0 auto 28px; text-align: center; }
.intro h2, .quiz h2 { margin: 0 0 10px; font-size: clamp(31px, 4vw, 43px); }
.intro p:not(.eyebrow) { margin: 0; color: #5a7a98; font-size: 17px; }
.meter { max-width: 450px; margin: 23px auto 0; color: #5d7c99; font-size: 13px; text-align: left; }
.meter span, .progress { display: flex; justify-content: space-between; }
.meter span b, .progress { color: var(--blue); }
.meter i, .progressbar { display: block; height: 8px; margin-top: 8px; overflow: hidden; border-radius: 10px; background: #e5f3fc; }
.meter i b, .progressbar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#55b8f3); }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 920px; margin: auto; }
.day { display: grid; grid-template-columns: 45px 1fr auto; gap: 12px; align-items: center; min-height: 94px; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.day > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: var(--pale); color: var(--blue); font-style: normal; font-weight: 900; }
.day.done > i { background: #e1f8ed; color: #249666; }
.day strong, .day em, .day small { display: block; }
.day strong { font-size: 16px; }.day em { margin-top: 2px; color: var(--blue); font-size: 13px; font-style: normal; }.day small { margin-top: 5px; color: #7893aa; font-size: 12px; }.day > b { color: var(--blue); font-size: 12px; }
.toast { min-height: 24px; margin: 14px 0 0; color: var(--blue); text-align: center; font-size: 13px; font-weight: 900; }
.lesson { max-width: 900px; margin: auto; touch-action: pan-y; }.progress { font-weight: 900; }.progressbar { margin: 10px 0 22px; }
.lesson article { padding: clamp(22px,5vw,42px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(160deg,#fff,#f8fcff); box-shadow: 0 18px 42px rgba(30,92,145,.11); text-align: center; }
.instruction, .read p, .tip { display: flex; align-items: center; justify-content: center; gap: 8px; color: #65829d; font-size: 14px; }.instruction { margin: 0; }.instruction b, .read p b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e6f4ff; color: var(--blue); }
.lesson article h2 { margin: 12px 0 22px; font-family: Georgia, serif; font-size: clamp(60px,9vw,90px); line-height: 1; text-transform: lowercase; }
.tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; max-width: 620px; margin: auto; }.tiles.joined { grid-template-columns: 1fr 2fr; }
.tiles button { min-height: 112px; border: 2px solid #d7ebf8; border-radius: 22px; background: #fff; color: var(--ink); font-family: Georgia, serif; font-size: clamp(45px,7vw,65px); cursor: pointer; }
.tiles button.selected { border-color: var(--blue); background: #eaf7ff; box-shadow: 0 0 0 4px #bde5ff; }
.puzzle { display: inline-flex; align-items: center; gap: 7px; margin: 16px auto 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 8px 14px; color: #66839e; font-size: 12px; font-weight: 900; cursor: pointer; }.puzzle.active { border-color: #edca40; background: #fff7d7; color: #8f6c00; }
.read { padding-top: 12px; border-top: 1px dashed #c7e4f3; }.read p { margin: 0 0 12px; }.read .primary { width: min(100%,620px); margin: auto; justify-content: center; font-size: 20px; }
.tip { margin: 16px 0; }.tip b { padding: 3px 7px; border-radius: 6px; background: #fff2b8; color: #876600; font-size: 11px; }
.lesson nav { display: flex; justify-content: space-between; gap: 15px; margin-top: 22px; }.lesson nav button { border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--blue); padding: 13px 17px; font-weight: 900; cursor: pointer; }.lesson nav button:last-child { background: var(--pale); }.lesson nav button:disabled { opacity: .4; cursor: not-allowed; }
.overlay { position: fixed; inset: 0; z-index: 5; display: grid; grid-template-rows: auto auto minmax(160px, 1fr) auto auto; justify-items: center; align-items: center; gap: 8px; min-height: 100dvh; padding: clamp(24px,4vh,42px) 20px max(22px,env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); text-align: center; cursor: pointer; }.overlay > button:first-child { position: absolute; top: 21px; right: 21px; width: 45px; height: 45px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 28px; cursor: pointer; }.overlay .eyebrow { align-self: end; margin: 0; }.overlay h2 { align-self: start; margin: 0; font-family: Georgia,serif; font-size: clamp(45px,7vw,66px); text-transform: lowercase; }.overlay > div { width: min(100%,560px); height: 100%; min-height: 0; display: grid; place-items: center; padding: 12px; overflow: hidden; border-radius: 30px; background: #f4fbff; }.overlay img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }.replay { position: relative; z-index: 1; align-self: start; flex: none; width: 65px; height: 65px; margin: 4px 0 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 29px; cursor: pointer; box-shadow: 0 9px 20px rgba(20,127,230,.28); }.overlay small { align-self: start; margin-top: -2px; color: #7b96ad; }
.alphabet { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; max-width: 680px; margin: auto; }.alphabet button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 17px; background: #fff; color: var(--ink); font-family: Georgia,serif; font-size: clamp(26px,5vw,38px); cursor: pointer; }
.alphabet button.selected { border: 2px solid var(--blue); background: var(--pale); color: var(--blue); box-shadow: 0 0 0 4px #bde5ff, 0 10px 22px rgba(20,127,230,.15); transform: translateY(-2px); }
.library { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 780px; margin: auto; }.library section { padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: #fbfdff; }.library h3 { margin: 0 0 12px; color: var(--blue); }.library section > div { display: flex; flex-wrap: wrap; gap: 8px; }.library button { padding: 8px 11px; border: 1px solid #d5e9f5; border-radius: 10px; background: #fff; color: var(--ink); font-family: Georgia,serif; font-size: 17px; cursor: pointer; }
.quiz { padding: clamp(28px,6vw,52px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg,#edfaff,#fff); box-shadow: 0 18px 42px rgba(30,92,145,.11); }.quiz h2 { margin-bottom: 22px; }.quiz > button { border: 0; border-radius: 15px; background: #dff3ff; color: #0968c5; padding: 14px 18px; font-weight: 900; cursor: pointer; }.quiz > div { display: grid; gap: 12px; margin-top: 22px; }.quiz > div button { border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); padding: 16px; font-family: Georgia,serif; font-size: 24px; cursor: pointer; }
#root.preview-ipad-pro { width: 834px; max-width: calc(100% - 36px); min-height: 1194px; margin: 18px auto; border-radius: 28px; box-shadow: 0 18px 55px rgba(23,71,107,.2); }.preview-ipad-pro .screen { padding-inline: 50px; }.preview-ipad-pro .hero { max-width: 900px; gap: 24px; }.preview-ipad-pro .hero aside { width: 180px; height: 195px; }.preview-ipad-pro .hero aside img { width: 108px; height: 108px; }
@media (min-width:701px) and (max-width:1024px) { #root { width: 100%; max-width: none; }.screen { padding-inline: clamp(32px,6vw,58px); }.hero { max-width: 900px; gap: 24px; }.hero aside { width: 180px; height: 195px; }.hero aside img { width: 108px; height: 108px; }.tiles button { min-height: 105px; } }
@media (max-width:870px) { #root.preview-ipad-pro { width: 100%; max-width: none; min-height: 100vh; margin: 0; border-radius: 0; }.preview-ipad-pro .screen { padding-inline: clamp(18px,5vw,50px); } }
@media (max-width:700px) { body { background: #fff; }.topbar { position: sticky; top: 0; z-index: 4; background: #fff; }.screen { padding-inline: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); padding-bottom: 32px; }.hero { grid-template-columns: 1fr; padding: 30px 24px; text-align: center; }.hero aside { grid-row: 1; width: 174px; height: 185px; }.hero aside img { width: 106px; height: 106px; }.hero > div { grid-row: 2; }.features, .days { grid-template-columns: 1fr; }.tiles button { min-height: 95px; }.primary, .read .primary { min-height: 54px; }.features button, .day { min-height: 74px; }.overlay { padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); padding-bottom: max(26px,env(safe-area-inset-bottom)); } }
@media (max-width:430px) { .topbar { min-height: 74px; padding: 8px 12px; grid-template-columns: 45px 1fr 45px; }.topbar > i, .back { width: 42px; height: 42px; }.brand { font-size: 10px; letter-spacing: .1em; }.brand img { width: 22px; height: 22px; }.hero h2 { font-size: 40px; }.tiles { gap: 7px; }.tiles button { min-height: 81px; border-radius: 17px; }.lesson article { padding: 22px 13px; border-radius: 24px; }.alphabet { grid-template-columns: repeat(5,1fr); gap: 8px; }.library { grid-template-columns: 1fr; }.overlay { grid-template-rows: auto auto minmax(130px,1fr) auto auto; gap: 7px; padding: 22px 14px max(18px,env(safe-area-inset-bottom)); }.overlay > div { border-radius: 22px; }.replay { width: 60px; height: 60px; } }
@media (max-height:520px) and (orientation:landscape) { .topbar { min-height: 62px; }.screen { padding-top: 18px; padding-bottom: 22px; }.hero { grid-template-columns: 1fr 190px; padding: 22px; text-align: left; }.hero aside { grid-column: 2; grid-row: 1; width: 150px; height: 155px; }.hero > div { grid-column: 1; grid-row: 1; }.hero h2 { font-size: 34px; }.hero small, .parent-note, footer, .tip { display: none; }.lesson article { padding: 18px; }.lesson article h2 { margin: 7px 0 11px; font-size: 52px; }.tiles button { min-height: 65px; }.overlay { grid-template-columns: 1fr auto; grid-template-rows: auto auto minmax(120px,1fr) auto; column-gap: 16px; padding-block: 14px; }.overlay .eyebrow,.overlay h2,.overlay > div { grid-column: 1; }.overlay .replay,.overlay small { grid-column: 2; }.overlay .replay { grid-row: 2 / 4; align-self: center; }.overlay small { grid-row: 4; }.overlay h2 { font-size: 40px; } }