:root{--cream:#fffbdb;--purple:#3e2557;--sage:#64986e;--gold:#b08a4a}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--purple);font-family:Georgia,serif;text-align:center}
main{max-width:460px;margin:0 auto;padding:28px 18px 60px}
h1{margin:0;font-size:2rem;color:var(--purple)}
.sub{color:var(--gold);margin:4px 0 22px}
h2{font-size:1rem;margin:24px 0 10px;color:var(--sage);text-transform:uppercase;letter-spacing:1px}
.sides{display:grid;gap:10px}
.side{padding:14px;border:2px solid var(--sage);background:#fff;color:var(--purple);border-radius:12px;font:inherit;font-size:1.05rem}
.side.on{background:var(--sage);color:#fff}
#name{width:100%;margin-top:12px;padding:12px;border:1px solid var(--gold);border-radius:10px;font:inherit;background:#fff}
.big,.small{display:block;border-radius:14px;cursor:pointer}
.big{background:var(--purple);color:var(--cream);padding:20px;font-size:1.3rem}
.small{margin-top:12px;border:2px solid var(--gold);color:var(--gold);padding:12px}
#left{margin:18px 0 8px;font-weight:bold}
#log{list-style:none;padding:0;margin:0;font-size:.95rem}
#log li{padding:6px 0}
#log .ok{color:var(--sage)}
#log .bad{color:#b3261e}