/* Shared base styles for interactive "Claude Design canvas" (x-dc) lessons.
   Pair with /assets/js/dc-runtime.js (the <x-dc>/<sc-if>/<sc-for> runtime).
   Each lesson's <helmet> should also load the Google Fonts it uses, e.g.:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
*/

html, body { margin: 0; padding: 0; background: #fff; }
* { box-sizing: border-box; }
a { color: #2b2c2d; text-decoration: none; border-bottom: 1px solid #ffcc00; padding-bottom: 2px; font-weight: 600; }
a:hover { color: #6c6e6f; border-bottom-color: #2b2c2d; }
input::placeholder, textarea::placeholder { color: #b3b4b5; font-style: italic; }