:root { --ink:#20302a; --muted:#64736b; --cream:#f8f5ee; --leaf:#287653; --pale:#e4f0e8; --line:#cbd8cf; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:system-ui,-apple-system,sans-serif; line-height:1.5; }
.wrap { width:min(100% - 2rem, 760px); margin:0 auto; padding:4rem 0 2rem; }
header { max-width:620px; margin-bottom:2rem; }
.eyebrow { color:var(--leaf); font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin:0 0 .6rem; }
h1 { font-family:Georgia,serif; font-size:clamp(2.4rem,7vw,4.5rem); letter-spacing:-.045em; line-height:1.02; margin:0 0 1rem; }
h2 { font-family:Georgia,serif; font-size:1.8rem; margin:.1rem 0 .2rem; }
.intro { color:var(--muted); font-size:1.1rem; max-width:58ch; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(1.25rem,4vw,2.2rem); box-shadow:0 12px 35px #20302a0b; }
.hint { color:var(--muted); margin-top:0; }
form { display:grid; gap:.55rem; margin-top:1.6rem; }
label { font-weight:700; margin-top:.5rem; }
label span { color:var(--muted); font-size:.8rem; font-weight:400; }
input, select, textarea { border:1px solid var(--line); border-radius:9px; color:var(--ink); font:inherit; padding:.75rem .85rem; background:#fcfdfb; }
input:focus, select:focus, textarea:focus { outline:3px solid #a9d4ba; border-color:var(--leaf); }
button { border:0; border-radius:999px; background:var(--leaf); color:#fff; cursor:pointer; font:inherit; font-weight:750; padding:.85rem 1.2rem; margin-top:1rem; }
button:hover { background:#1c5e42; }
.result { margin-top:1.5rem; }
.result-head { align-items:start; display:flex; justify-content:space-between; gap:1rem; }
.secondary { background:var(--pale); color:var(--leaf); font-size:.9rem; margin-top:0; }
.status { color:var(--leaf); min-height:1.5em; margin:.5rem 0 0; }
textarea { display:block; min-height:285px; resize:vertical; width:100%; margin-top:.5rem; }
.next { background:var(--pale); border-radius:10px; display:grid; gap:.2rem; margin-top:1rem; padding:1rem; }
.text-button { background:none; color:var(--leaf); font-size:.9rem; margin-left:-.7rem; padding:.5rem .7rem; }
footer { color:var(--muted); font-size:.9rem; margin:2.5rem 0 0; max-width:58ch; }
[hidden] { display:none; }
@media (max-width:520px) { .wrap { padding-top:2.5rem; } .result-head { display:block; } .secondary { margin-top:1rem; } }