:root { --ink:#202a29; --paper:#f4f1e8; --mint:#b9e3c6; --coral:#f47e64; --line:#9da8a0; --muted:#63706a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,sans-serif; }
.topbar, footer { display:flex; justify-content:space-between; align-items:center; padding:24px 5vw; border-bottom:1px solid var(--line); font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.05em; }
.topbar p { margin:0; color:var(--muted); text-transform:uppercase; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.14em; }.brand span { color:var(--coral); }
main { max-width:1280px; margin:auto; padding:70px 5vw 90px; }.hero { max-width:900px; }
.eyebrow, .card-heading { font:700 11px "Space Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); }
h1 { font-size:clamp(42px,7vw,88px); line-height:.98; letter-spacing:-.055em; margin:18px 0 24px; max-width:850px; }.intro { font-size:20px; line-height:1.45; max-width:700px; color:#44514c; }
.animal-note { display:inline-block; margin:28px 0 60px; padding:14px 18px; background:var(--mint); font-size:14px; border-left:4px solid var(--ink); }.animal-note span { margin-right:10px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }.card { border:1px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:28px; }.report-card { background:#fffdf8; }.packet-card { background:#dcefe1; min-height:530px; }.card-heading { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:28px; color:var(--ink); }.required,.status-dot { color:var(--coral); font-size:10px; }
label { display:block; margin:20px 0 8px; font-weight:700; font-size:14px; } label span { color:var(--coral); }.optional { color:var(--muted); font-weight:400; font-size:12px; }
input, select, textarea { width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:13px 14px; font:inherit; border-radius:0; } textarea { resize:vertical; }.check { display:flex; gap:10px; font-size:12px; line-height:1.4; font-weight:400; align-items:flex-start; }.check input { width:18px; height:18px; accent-color:var(--coral); flex:none; }
button { width:100%; margin-top:24px; padding:16px; border:1px solid var(--ink); background:var(--coral); color:var(--ink); font:700 14px "Space Mono",monospace; cursor:pointer; } button:hover { background:#ff997f; }.fineprint { color:var(--muted); font-size:11px; line-height:1.5; margin:18px 0 0; }
.empty-state { padding:80px 25px; text-align:center; }.empty-mark { margin:auto; width:54px; height:54px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-size:28px; }.empty-state h2 { font-size:26px; letter-spacing:-.04em; margin:22px 0 10px; }.empty-state p { color:#52615a; line-height:1.5; }
.packet-content h2 { font-size:34px; letter-spacing:-.05em; margin:8px 0 24px; }.packet-id { font:700 13px "Space Mono",monospace; background:var(--mint); padding:9px 12px; display:inline-block; }.packet-row { border-top:1px solid var(--line); padding:15px 0; display:flex; justify-content:space-between; gap:20px; font-size:13px; }.packet-row span:first-child { color:var(--muted); }.timeline { margin:22px 0; padding-left:18px; border-left:2px solid var(--coral); }.timeline p { margin:0 0 12px; font-size:13px; }.timeline p:last-child { margin:0; color:var(--muted); }
footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); } footer span:last-child { text-align:right; }
@media (max-width:760px) { main { padding-top:45px; }.animal-note { margin-bottom:40px; }.workspace { grid-template-columns:1fr; }.packet-card { min-height:0; }.topbar,footer { padding:18px 5vw; } footer { display:block; line-height:1.8; } footer span:last-child { text-align:left; display:block; } }