+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eef0ff,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+  #wrap{width:100%;max-width:340px;padding:1.25rem;text-align:center}
+  h2{margin:.2rem 0 1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8E8AC8}
+  #card{background:#fff;border-radius:1.25rem;box-shadow:0 8px 30px rgba(0,0,0,.08);padding:2rem 1.25rem;cursor:pointer;user-select:none;transition:transform .15s}
+  #card:active{transform:scale(.97)}
+  #emoji{font-size:4.5rem;line-height:1}
+  #word{font-size:1.9rem;font-weight:700;margin:.6rem 0 .2rem;letter-spacing:-.02em}
+  #ex{color:#6b7280;font-size:.95rem;min-height:1.2em}
+  .hint{color:#9ca3af;font-size:.8rem;margin-top:.8rem}
+  #next{margin-top:1.1rem;padding:.65rem 1.4rem;border:0;border-radius:9999px;background:#18181b;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer}
+  #count{margin-top:.7rem;color:#9ca3af;font-size:.8rem}
+</style>
+<div id="wrap">
+  <h2>Everyday English · Flashcards</h2>
+  <div id="card">
+    <div id="emoji">🍎</div>
+    <div id="word">apple</div>
+    <div id="ex"></div>
+    <div class="hint">tap the card to reveal an example</div>
+  </div>
+  <button id="next">Next →</button>
+  <div id="count"></div>
+</div>
+<script>
+  var cards=[
+    {e:"🍎",w:"apple",x:"I eat an apple every morning."},
+    {e:"🏠",w:"house",x:"They live in a small house."},
+    {e:"🐶",w:"dog",x:"Her dog loves the park."},
+    {e:"💧",w:"water",x:"Can I have a glass of water?"},
+    {e:"📖",w:"book",x:"This book is really interesting."},
+    {e:"☀️",w:"sun",x:"The sun is bright today."},
+    {e:"🚗",w:"car",x:"My car is parked outside."},
+    {e:"🌧️",w:"rain",x:"Take an umbrella, it's going to rain."},
+    {e:"🎉",w:"party",x:"We had a great party last night."},
+    {e:"⏰",w:"clock",x:"The clock on the wall is slow."}
+  ];
+  var i=0,revealed=false;
+  var card=document.getElementById("card"),emoji=document.getElementById("emoji"),
+      word=document.getElementById("word"),ex=document.getElementById("ex"),count=document.getElementById("count");
+  function render(){var c=cards[i];emoji.textContent=c.e;word.textContent=c.w;ex.textContent=revealed?c.x:"";count.textContent=(i+1)+" / "+cards.length;}
+  card.addEventListener("click",function(){revealed=!revealed;render();});
+  document.getElementById("next").addEventListener("click",function(){i=(i+1)%cards.length;revealed=false;render();});
+  render();
+</script>