:root{
  color-scheme:dark;
  --bg:#2a150e;
  --text:#ffffff;
  --link:#ffeec8;
  --accent:#dda51a;
  --danger:#e85a4f;
  --r:12px;
}
html{
  font-size:81.25%;
  line-height:1.32;
  min-height:100%;
  min-height:100dvh;
  background:
    linear-gradient(180deg,rgba(42,21,14,.28),rgba(20,10,8,.55)),
    radial-gradient(ellipse at center,#4a2818 0%,#2a150e 55%,#140a08 100%);
  background-color:var(--bg);
}
html,body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  color:var(--text);
}
body{
  max-width:28rem;
  margin:1.35rem auto;
  padding:0 0.75rem;
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box;
}
h1{
  font-size:1.15rem;
  margin:0 0 0.35rem;
  line-height:1.25;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--link);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
p{margin:0.35rem 0;}
input{
  width:100%;
  box-sizing:border-box;
  padding:0.4rem 0.45rem;
  margin:0.18rem 0;
  background:rgba(9,4,4,.72);
  color:var(--text);
  border:1px solid rgba(188,153,82,.45);
  border-radius:var(--r);
  font:inherit;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(221,165,26,.25);
}
button{
  margin-top:0.4rem;
  padding:0.45rem 1.1rem;
  background:linear-gradient(180deg,#bc9952,#8d4227);
  color:#fff8e8;
  border:1px solid rgba(255,236,200,.35);
  border-radius:999px;
  font:inherit;
  cursor:pointer;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
button:hover{filter:brightness(1.08);}