:root{
  --linen:#E7E3D9;
  --wool:#F8F6F1;
  --soot:#1E1B18;
  --madder:#A4161A;
  --madder-bright:#E5584C;
  --indigo:#2B4C9B;
  --brass:#D9A441;
  --ink-soft:#5A544C;
  --dim:#B4AC9F;
  --line:#CFC9BC;
  --same:#B9B2A4;
  --serif:"Alegreya", Georgia, "Times New Roman", serif;
  --sans:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linen);color:var(--soot);font-family:var(--sans);font-size:16px;line-height:1.5}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* embroidered strap across the top, shevitsi-style */
.band{height:18px;background:var(--soot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M18 2 L29 9 L18 16 L7 9Z' fill='%23A4161A'/%3E%3Cpath d='M18 6 L23 9 L18 12 L13 9Z' fill='%231E1B18'/%3E%3Crect x='17' y='8' width='2' height='2' fill='%23D9A441'/%3E%3Crect x='0' y='8' width='3' height='2' fill='%23A4161A'/%3E%3Crect x='33' y='8' width='3' height='2' fill='%23A4161A'/%3E%3C/svg%3E") repeat-x center}

.wrap{max-width:1000px;margin:0 auto;padding:22px 16px 48px}

.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;margin:0}
.top p{margin:.35rem 0 0;color:var(--ink-soft)}

.tabs{display:inline-flex;background:var(--wool);border:1px solid var(--line);border-radius:999px;padding:3px}
.tabs a{text-decoration:none;color:var(--ink-soft);padding:7px 16px;border-radius:999px;font-size:.95rem}
.tabs a:hover{color:var(--soot)}
.tabs a[aria-current="page"]{background:var(--soot);color:var(--wool)}

#stage{min-height:360px}

.kb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 12px}
.kb-head p{margin:0;color:var(--ink-soft);font-size:.9rem;max-width:52ch}
.seg{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;color:var(--ink-soft)}
.seg span{margin-right:4px}
.seg button{border:1px solid var(--line);background:transparent;padding:4px 12px;border-radius:999px;cursor:pointer;color:var(--ink-soft);font-size:.85rem}
.seg button[aria-pressed="true"]{background:var(--soot);border-color:var(--soot);color:var(--wool)}

footer{margin-top:40px;font-size:.85rem;color:var(--ink-soft);max-width:68ch}
footer p{margin:.3rem 0}

@media (max-width:720px){
  .top h1{font-size:2rem}
  .kb-head{display:none}          /* no laptop keyboard on a phone, and key labels are hidden at this size */
  #stage{margin-bottom:16px}
}

/* The way into the app (kukeri.io/app/): "Log in" or "My words" */
.account-link{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--madder);color:var(--wool);text-decoration:none;font-weight:500}
.account-link:hover{background:#B91E22}