:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #15233b; background: #f6f8fb; }
body { margin: 0; }
main { max-width: 42rem; margin: auto; padding: 1rem; }
section, form { display: grid; gap: .65rem; }
section { margin-block: 1.5rem; }
input, textarea, button { box-sizing: border-box; min-height: 2.75rem; padding: .6rem; border: 2px solid #50627d; border-radius: .35rem; font: inherit; }
button { color: #fff; background: #15233b; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #d66b00; outline-offset: 2px; }
ul { padding: 0; list-style: none; }
li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-block: .6rem; padding: .8rem; background: #fff; border-radius: .35rem; box-shadow: 0 1px 4px #15233b33; }
li button { margin-left: auto; }
@media (min-width: 40rem) { main { padding: 2rem; } }