:root{
    --page:#FFFFFF; --ink:#1F2430; --ink-soft:#6B7280;
    --accent:#3BA3E8; --tint:#EAF5FD; --shadow:rgba(59,163,232,.26); --deep:#1F5E8A;
    --display:"Bricolage Grotesque",system-ui,sans-serif; --hand:"Caveat",cursive; --ui:"Chivo",system-ui,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  [hidden]{display:none !important}
  body{margin:0; min-height:100svh; font-family:var(--ui); color:var(--ink); background:var(--page);
    display:flex; flex-direction:column; align-items:center;
    padding:max(10px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
  header,main{width:100%; max-width:620px}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px}
  .home{font-family:var(--hand); font-size:21px; color:var(--ink-soft); text-decoration:none}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--deep); margin:0 0 2px; font-weight:700}
  h1{font-family:var(--display); font-weight:800; font-size:clamp(34px,9vw,48px); letter-spacing:-.03em; margin:0 0 10px; line-height:1}
  h1 small{font-family:var(--hand); font-weight:600; font-size:.55em; color:var(--ink-soft); letter-spacing:0; margin-left:10px}
  .tabs{display:flex; gap:7px; padding:2px 0 12px}
  .tab{flex:none; border:0; cursor:pointer; font-family:var(--ui); font-size:14px; font-weight:700; padding:9px 16px; border-radius:99px;
    color:var(--t-deep); background:var(--t-tint)}
  .tab[aria-selected="true"]{color:#fff; background:var(--t); box-shadow:0 6px 14px var(--t-shadow)}

  main{display:flex; flex-direction:column; gap:14px}
  .story{background:var(--tint); border-radius:20px; padding:16px 18px; font-size:15.5px; line-height:1.5; margin:0; text-wrap:pretty}
  .story b{color:var(--deep)}

  .steps{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .step{font-family:var(--hand); font-size:21px; color:var(--ink-soft); margin-right:auto}
  .mode button{border:0; cursor:pointer; font-family:var(--ui); font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:99px; color:var(--deep); background:var(--tint)}
  .mode button[aria-selected="true"]{color:#fff; background:var(--accent)}
  .reveal{border:0; background:none; cursor:pointer; font-family:var(--ui); font-size:12.5px; font-weight:700; color:var(--ink-soft); padding:4px}

  /* the table: six tappable rows */
  .table{display:grid; gap:8px}
  .row{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; text-align:left; border:0; cursor:pointer;
    background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 6px 16px var(--shadow); font-family:var(--ui); color:var(--ink);
    transition:transform .1s}
  .row:active{transform:translateY(1px)}
  .row.flash{animation:flash .5s ease}
  @keyframes flash{30%{background:var(--tint)}}
  .who{display:flex; flex-direction:column; gap:1px; min-width:0}
  .pron{font-weight:700; font-size:15px; color:var(--deep)}
  .who .en{font-size:12px; color:var(--ink-soft)}
  .form{font-family:var(--display); font-weight:800; font-size:clamp(22px,6.4vw,30px); letter-spacing:-.02em; text-align:right; line-height:1;
    display:flex; flex-direction:column; align-items:flex-end; gap:4px}
  .form .w{white-space:nowrap}
  .form b{color:var(--accent)}
  .form b.ie{color:#E0453C}
  .form b.e{color:var(--ink-soft)}
  .vos{font-family:var(--hand); font-weight:600; font-size:15px; color:var(--ink-soft); letter-spacing:0}
  .vos.keeps{color:#E0453C}
  .speak{font-size:16px; opacity:.55}
  /* covered: the hidden part becomes a blank until the row is tapped */
  .hidden-part{position:relative}
  .hidden-part > *{visibility:hidden}
  .form.hidden-part .vos{display:none}
  .hidden-part::after{content:""; position:absolute; left:0; right:0; top:50%; height:14px; transform:translateY(-50%);
    border-radius:99px; background:var(--tint); border:2px dashed var(--accent)}
  .form.hidden-part::after{left:auto; width:110px}
  .who.hidden-part::after{width:150px}

  .use{font-family:var(--hand); font-size:21px; color:var(--ink-soft); margin:6px 0 -6px}
  .sentences{display:grid; gap:8px}
  .sentence{display:flex; flex-direction:column; gap:2px; text-align:left; border:0; cursor:pointer; background:var(--tint); border-radius:14px; padding:12px 14px;
    font-family:var(--ui); color:var(--ink)}
  .sentence .es{font-size:17px; font-weight:700}
  .sentence .es b{color:var(--accent)}
  .sentence .en{font-size:13px; color:var(--ink-soft)}

  .go{align-self:flex-end; margin-top:6px; text-decoration:none; font-family:var(--ui); font-size:16px; font-weight:700; color:#fff; background:var(--accent);
    border-radius:99px; padding:13px 24px; box-shadow:0 8px 18px var(--shadow)}
  .no-voice .speak{display:none}
  .sound-help{font-size:13.5px; color:var(--ink-soft); line-height:1.45}
  .sound-help summary{cursor:pointer; font-weight:700; color:var(--deep); list-style:none; display:inline-block; padding:4px 0}
  .sound-help summary::-webkit-details-marker{display:none}
  .sound-help summary::before{content:"🔇 "}
  .sound-help p{margin:6px 0 0; text-wrap:pretty}
  .sound-help b{color:var(--ink)}
  .no-voice .sound-help summary{color:#E0453C}
  .no-voice .sound-help summary::after{content:" — this device has no voice right now"}

  @media (min-width:700px){
    body{justify-content:center; padding-left:24px; padding-right:24px}
    .row{padding:14px 18px}
    .form{font-size:32px}
  }