+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f3eefc,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+  #w{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:1.8rem 1.3rem}
+  #idiom{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
+  #mean{color:#374151;margin-top:1rem;font-size:1rem;display:none}
+  #ex{color:#8E8AC8;font-style:italic;margin-top:.6rem;display:none}
+  .btn{margin-top:1.1rem;padding:.65rem 1.4rem;border:0;border-radius:9999px;font-weight:600;cursor:pointer}
+  #reveal{background:#8E8AC8;color:#fff}#next{background:#18181b;color:#fff;margin-left:.5rem}
+</style>
+<div id="w">
+  <h2>Idiom of the Day</h2>
+  <div id="card">
+    <div id="idiom"></div>
+    <div id="mean"></div>
+    <div id="ex"></div>
+  </div>
+  <button class="btn" id="reveal">Reveal meaning</button>
+  <button class="btn" id="next">Next →</button>
+</div>
+<script>
+  var idioms=[
+    {i:"Break the ice",m:"To start a conversation in a social setting.",x:"He told a joke to break the ice."},
+    {i:"Piece of cake",m:"Something very easy to do.",x:"The test was a piece of cake."},
+    {i:"Under the weather",m:"Feeling a little ill.",x:"I'm staying home, I feel under the weather."},
+    {i:"Hit the books",m:"To study hard.",x:"Finals are coming, time to hit the books."},
+    {i:"Once in a blue moon",m:"Very rarely.",x:"We see each other once in a blue moon."},
+    {i:"Spill the beans",m:"To reveal a secret.",x:"Come on, spill the beans!"},
+    {i:"Cost an arm and a leg",m:"To be very expensive.",x:"That phone cost an arm and a leg."}
+  ];
+  var i=Math.floor(Math.random()*idioms.length);
+  var idiom=document.getElementById("idiom"),mean=document.getElementById("mean"),ex=document.getElementById("ex");
+  function render(){var c=idioms[i];idiom.textContent="“"+c.i+"”";mean.textContent=c.m;ex.textContent="e.g. "+c.x;mean.style.display="none";ex.style.display="none";}
+  document.getElementById("reveal").onclick=function(){mean.style.display="block";ex.style.display="block";};
+  document.getElementById("next").onclick=function(){i=(i+1)%idioms.length;render();};
+  render();
+</script>