/* subcrate — minimal storefront styling (cosmetic noise). */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0; padding: 2rem; max-width: 60rem; margin-inline: auto;
  color: #241a2e; background: #faf7fb;
}
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
header p { color: #6a5570; margin-top: 0; }
nav a { color: #9a3bb0; text-decoration: none; margin-right: .75rem; }
nav a:hover { text-decoration: underline; }
form { display: grid; gap: .6rem; max-width: 22rem; margin: 1rem 0; }
label { display: grid; gap: .25rem; font-size: .9rem; color: #4a3a52; }
input { padding: .5rem .6rem; border: 1px solid #d8c7e0; border-radius: 6px; font: inherit; }
button {
  padding: .5rem .9rem; border: 0; border-radius: 6px; background: #9a3bb0; color: #fff;
  font: inherit; cursor: pointer; justify-self: start;
}
button:hover { background: #7f2f92; }
hr { border: 0; border-top: 1px solid #e6d8ec; margin: 1.75rem 0; }
#app { margin-top: 1.5rem; padding: 1rem; border: 1px dashed #d8c7e0; border-radius: 8px; color: #6a5570; }
code { background: #f0e6f4; padding: .1rem .3rem; border-radius: 4px; }