:root { --ink:#16322c; --muted:#6b7874; --paper:#fffdf8; --cream:#f2ede1; --line:#dfd9cc; --accent:#e9644b; --mint:#d9ede2; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 95% 0,#d6eee4 0,transparent 27rem),var(--cream); color:var(--ink); font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; letter-spacing:.02em; }
.app-shell { width:min(680px,calc(100% - 32px)); margin:0 auto; padding:54px 0 22px; }
.hero { padding:0 8px 31px; }
.eyebrow { margin:0 0 13px; font-size:12px; color:#48766a; font-weight:800; letter-spacing:.15em; }
h1 { font-size:clamp(34px,9vw,53px); line-height:1.15; letter-spacing:-.06em; margin:0; font-weight:900; } h1 em { color:var(--accent); font-style:normal; }
.lede { color:var(--muted); font-size:14px; line-height:1.8; margin:17px 0 0; }
.card { background:rgba(255,253,248,.92); border:1px solid rgba(220,213,201,.9); box-shadow:0 10px 25px rgba(70,70,50,.06); border-radius:24px; padding:24px; margin:14px 0; }
.section-heading { display:flex; gap:10px; align-items:center; margin-bottom:18px; }.section-heading span { font-size:11px; color:var(--accent); font-weight:bold; }.section-heading h2 { font-size:17px; margin:0; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.status,.choice { border:1px solid var(--line); background:white; color:var(--ink); border-radius:14px; cursor:pointer; font:inherit; font-weight:700; transition:.15s; }.status { min-height:81px; font-size:12px; }.status b { font-size:22px; display:block; margin-bottom:6px; }.status.selected,.choice.selected { background:var(--mint); border-color:#5c9a85; box-shadow:inset 0 0 0 1px #5c9a85; }
.choice-row { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:8px; margin-bottom:22px; }.choice { padding:13px 6px; font-size:13px; }
.field { display:block; font-size:14px; font-weight:800; margin-top:16px; }.field small { color:var(--muted); font-size:11px; font-weight:normal; margin-left:7px; }.field input,.field textarea,#message { width:100%; display:block; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); padding:12px; font:inherit; font-size:16px; outline:none; }.field input:focus,.field textarea:focus,#message:focus { border-color:#5c9a85; box-shadow:0 0 0 3px rgba(92,154,133,.16); }.field textarea { resize:none; overflow:hidden; min-height:92px; }
.message-card { border-top:4px solid var(--accent); } #message { line-height:1.65; resize:none; overflow:hidden; min-height:154px; }.hint,.send-note { color:var(--muted); font-size:12px; line-height:1.6; }.actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; margin-top:16px; }.actions button { border-radius:12px; min-height:51px; cursor:pointer; font:inherit; font-weight:800; }.primary { border:0; color:white; background:var(--ink); }.primary span { color:#99e3c5; font-size:18px; margin-left:4px; }.secondary { background:white; border:1px solid var(--line); color:var(--ink); }.send-note { margin:14px 0 0; } footer { color:#78837e; text-align:center; font-size:11px; padding:13px 18px 28px; }
@media (max-width:420px) { .app-shell { width:min(100% - 22px,680px); padding-top:36px; }.card { padding:19px; border-radius:20px; }.status-grid { gap:6px; }.status { min-height:73px; font-size:11px; }.status b { font-size:19px; }.choice { font-size:12px; }.actions { grid-template-columns:1fr; } }