:root {
  --fono: #eef6f0;
  --karto: #ffffff;
  --inko: #23302a;
  --pala: #6b7d74;
  --linio: #d5e6da;
  --akcento: #2f8f5b;
  --akcento-fono: #e2f2e9;
  --rugxa: #c2543c;
  --rugxa-fono: #fbeceb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fono: #171e1a;
    --karto: #222c26;
    --inko: #e6efe9;
    --pala: #93a89c;
    --linio: #33443a;
    --akcento: #7cd6a4;
    --akcento-fono: #23382c;
    --rugxa: #f0937c;
    --rugxa-fono: #3a2622;
  }
}

* { box-sizing: border-box }

body {
  margin: 0;
  padding: 0;
  background: var(--fono);
  color: var(--inko);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

main {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
}

.ekrano { display: none }
.ekrano:target { display: flex }
.hejmo { display: flex }
.ekrano:target ~ .hejmo { display: none }

.ekrano, .hejmo {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  padding: 32px 26px 34px;
  border: 1px solid var(--linio);
  border-radius: 26px;
  background: var(--karto);
  box-shadow: 0 6px 30px rgba(20, 50, 35, 0.07);
  text-align: center;
}

.pasxo {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pala);
}

.kato { width: 172px; height: 172px }

h1 { margin: 6px 0 10px; font-size: 34px; line-height: 1.15 }
h2 { margin: 14px 0 6px; font-size: 24px; line-height: 1.25 }

.rakonto { margin: 6px 0 4px; max-width: 32em; color: var(--pala) }
.rakonto b { color: var(--inko) }

.rimarko { margin: 18px 0 0; font-size: 15px; color: var(--pala) }

kbd {
  padding: 1px 7px;
  border: 1px solid var(--linio);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--fono);
  color: var(--inko);
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 0.9em;
}

.elektoj {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.elekto {
  padding: 11px 22px;
  border: 2px solid var(--linio);
  border-radius: 999px;
  background: var(--fono);
  color: var(--inko);
  font-size: 19px;
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
}

.elekto:hover, .elekto:focus-visible {
  border-color: var(--akcento);
  background: var(--akcento-fono);
  transform: translateY(-2px);
}

.elekto.granda {
  padding: 13px 30px;
  border-color: var(--akcento);
  background: var(--akcento-fono);
  color: var(--akcento);
  font-size: 21px;
  font-weight: bold;
}

.malbone { border-color: var(--rugxa) }
.malbone h2 { color: var(--rugxa) }
.malbone .kato { width: 150px; height: 150px }

.fina { border-color: var(--akcento) }
.fina h2 { color: var(--akcento) }
.fina .stelo { width: 74px; height: 74px; margin-top: -26px }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important }
}

@media (max-width: 420px) {
  body { font-size: 17px }
  .kato { width: 140px; height: 140px }
  h1 { font-size: 28px }
  h2 { font-size: 21px }
  .elekto { padding: 10px 18px; font-size: 18px }
}