:root{color-scheme:light;--ink:#24352e;--muted:#5c6c63;--paper:#f5f3ec;--line:#d8dfd3;--accent:#28604b}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 Georgia,serif}
main{max-width:1100px;margin:auto;padding:32px 24px 70px}header{padding:12px 0 24px;border-bottom:1px solid var(--line);margin-bottom:26px}
.eyebrow{letter-spacing:.2em;font:700 14px/1.4 system-ui,sans-serif}h1{font-size:clamp(26px,4vw,36px);line-height:1.25}h2{font:700 14px/1.4 system-ui,sans-serif;letter-spacing:.08em}
h3{font-size:21px;line-height:1.4;margin-top:0}h4{font:600 14px system-ui,sans-serif;margin:20px 0 8px}p{margin:12px 0}
.card{background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:26px;margin:22px 0}.welcome{max-width:740px;margin:45px auto}
.transition{color:var(--muted);border-left:3px solid var(--line);padding-left:20px}.economy{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;font:14px/1.6 system-ui,sans-serif}
.economy>div{padding:14px;background:#e8eee6;border-radius:8px}.framing{font-size:19px}.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.option{margin:0;display:flex;flex-direction:column}.option form{margin-top:auto;padding-top:20px}.choice-code{color:var(--accent)}ul{padding-left:20px;margin:0}
blockquote{margin:4px 0 24px;padding-left:18px;border-left:3px solid #b6ccbe;font-style:italic}.speaker{font-weight:bold;margin-bottom:6px}
button{font:600 16px system-ui,sans-serif;cursor:pointer;padding:13px 20px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);min-height:48px;margin:6px 6px 6px 0}
button.primary{background:var(--accent);color:white;border-color:var(--accent)}button:hover{filter:brightness(.94)}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #bc8546;outline-offset:3px}
label{display:block;font-weight:bold;margin:22px 0 8px}textarea{width:100%;resize:vertical;font:16px/1.5 system-ui,sans-serif;padding:14px;border:1px solid #9cac9f;border-radius:7px;min-height:90px}
a{color:var(--accent)}.error{color:#8e2929;border:1px solid #d49d9d;padding:14px}.confirmation{font-weight:bold}code{overflow-wrap:anywhere}
@media(max-width:760px){main{padding:18px 16px 45px}.options{grid-template-columns:1fr}.economy{grid-template-columns:1fr 1fr}.economy>div:first-child{grid-column:1/-1}.card{padding:20px}button{width:100%}}
