:root { font: 14px/1.5 system-ui,sans-serif; color:#22382e; background:#f7f8f4; color-scheme:light; }
* { box-sizing:border-box; } body { margin:0; } header { padding:18px 24px; border-bottom:1px solid #dbe1d7; font-size:10px; letter-spacing:1.3px; display:flex; align-items:center; gap:8px; background:#eef1e9; } header small { margin-left:auto; letter-spacing:0; color:#637267; }
.dot { width:7px; height:7px; border-radius:50%; background:#54795e; } main { padding:26px; max-width:650px; margin:auto; } h1 { font: 27px/1.2 Georgia,serif; margin:0 0 10px; font-weight:normal; max-width:320px; } .intro { color:#68766d; font-size:12px; } form { display:grid; gap:14px; margin-top:26px; } label { font-weight:600; font-size:11px; display:grid; gap:6px; } input,select,textarea { width:100%; border:1px solid #ccd5c9; background:white; border-radius:5px; padding:10px; color:#253e30; font:13px system-ui; } textarea { min-height:75px; resize:vertical; } button { background:#315943; color:white; border:0; border-radius:5px; padding:11px; cursor:pointer; font:600 12px system-ui; } button:disabled { opacity:.5; } h2 { font-size:12px; margin-top:28px; } h2 span { color:#6e7e70; margin-left:8px; } article { margin:12px 0; padding:14px; border:1px solid #dbe1d7; border-radius:6px; background:white; font-size:12px; } article time { float:right; color:#7a847c; font-size:10px; } article small { color:#627168; } #status { font-size:12px; color:#3e6748; } :focus-visible { outline:2px solid #3d7a51; outline-offset:3px; }