:root { color-scheme:dark; font:16px/1.5 system-ui,sans-serif; color:#f1eee5; background:#171614; }
body { margin:0; }
header { display:flex; gap:1rem; align-items:center; padding:1rem max(5vw,1rem); border-bottom:1px solid #403b32; }
header strong { letter-spacing:.06em; }
header button { margin-left:auto; }
main { max-width:1150px; margin:auto; padding:2rem 1rem; }
nav,form { display:flex; gap:1rem; flex-wrap:wrap; align-items:end; margin-bottom:1.5rem; }
#login { max-width:28rem; display:grid; }
section { background:#201e1b; margin:1.5rem 0; padding:1.35rem; border:1px solid #403b32; border-radius:.7rem; }
h1,h2 { margin:0 0 1rem; }
label { display:grid; gap:.25rem; }
input,select,button { font:inherit; border:1px solid #625a4b; border-radius:.3rem; padding:.5rem .7rem; }
button { cursor:pointer; }
a { color:#f7cb8b; }
.row { border-top:1px solid #403b32; padding:.85rem 0; display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem; overflow-wrap:anywhere; }
.row code { color:#efd1a4; }
[hidden] { display:none !important; }

@font-face { font-family:PatrickHand; src:url('/patrickhand.ttf') format('truetype'); font-display:swap; }
:root { color-scheme:light; font-family:PatrickHand,'Segoe Print',cursive; font-size:22px; color:#2c2b28; background:#f4f1e8; }
header { border-bottom:2px solid #3b3831; }
header strong { font-size:32px; }
section { background:#eee8d9; border:2px solid #51483e; border-radius:3px 12px 4px 9px; box-shadow:3px 3px 0 #d8ceba; }
input,select,button { background:#f9f6ed; color:#2c2b28; border:2px solid #51483e; border-radius:3px 7px 2px 5px; }
button:hover { background:#e6ddc9; }
a,.row code { color:#913c31; }
.row { border-color:#c5bca9; }
h1,h2 { font-weight:normal; }
#login { background:#eee8d9; border:2px solid #51483e; padding:2rem; margin:3rem auto; }