:root { color-scheme: light; font-family: system-ui, sans-serif; line-height: 1.8; background: #f4f6fa; color: #16243a; }
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(12px, 4vw, 36px); }
main { max-width: 760px; margin: auto; }
h1 { font-size: clamp(1.55rem, 5vw, 2.2rem); line-height: 1.4; }
h2 { font-size: 1.2rem; margin-top: 0; }
section { background: white; border: 1px solid #d6dfeb; border-radius: 12px; padding: clamp(14px, 3vw, 24px); margin: 20px 0; }
.tag, .note { color: #3c506e; font-size: .95rem; }
dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
dd { margin: 0; overflow-wrap: anywhere; }
button { font: inherit; background: #163d73; color: white; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; width: 100%; min-height: 48px; }
button:disabled { opacity: .65; cursor: wait; }
button:focus-visible { outline: 3px solid #d79300; outline-offset: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: .85rem; }
@media (max-width: 420px) { dl { grid-template-columns: 1fr; } dt { font-weight: 600; } }