@font-face{font-family:"Special Elite";src:url(fonts/special-elite-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{--paper:#f6f3ec;--ink:#23262f;--pen:#25408f;--faint:#8b877a}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem;color:var(--ink);font:1.1rem/1.5 "Special Elite","Courier New",monospace;
background:radial-gradient(ellipse at center,transparent 55%,rgba(120,100,60,.10) 100%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),var(--paper)}
main{width:100%;max-width:30rem;text-align:center}
h1{font-weight:400;font-size:clamp(1.8rem,7vw,2.8rem);line-height:1.25;margin:0 0 2.5rem}
.row{display:flex;align-items:center;justify-content:center;gap:2rem}
.row.swapped{flex-direction:row-reverse}
button{font:inherit;color:var(--ink);cursor:pointer;background:none;border:1.5px solid var(--ink);border-radius:2px}
.si{font-size:1.9rem;padding:1rem 3rem;background:var(--pen);border-color:var(--pen);color:var(--paper)}
.no{font-size:.75rem;padding:.3rem .7rem;color:var(--faint);border-color:var(--faint)}
button:focus-visible,input:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
label{display:block;margin-bottom:.6rem}
input[type=date]{font:inherit;font-size:1.2rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:.3rem .2rem;margin-bottom:2rem}
.send{font-size:1.3rem;padding:.7rem 2.2rem;background:var(--pen);border-color:var(--pen);color:var(--paper)}
.msg{margin-top:1.5rem;min-height:1.5em}