/* Dieter Rams: as little design as possible. */
:root{
  --paper:#f7f6f2;
  --ink:#1a1a1a;
  --grey:#6f6f6c;
  --line:#e2e0d9;
  --card:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  height:100dvh;max-height:100dvh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

#bg{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;opacity:0;transition:opacity 1s ease-out}
body.ready #bg{opacity:.5}

/* Calm entrance: one soft rise, staggered. Motion has a job: orientation. */
.top,.card,.base{opacity:0;transform:translateY(10px)}
body.ready .top{opacity:1;transform:none;transition:opacity .42s ease-out,transform .42s ease-out}
body.ready .card{opacity:1;transform:none;transition:opacity .42s ease-out,transform .22s ease-out,border-color .2s ease-out,box-shadow .25s ease-out,background-color .2s ease-out}
body.ready .card:nth-of-type(2){transition-delay:.07s,.07s,.07s,.07s,.07s}
body.ready .base{opacity:1;transform:none;transition:opacity .42s ease-out .14s,transform .42s ease-out .14s}

.page{
  position:relative;z-index:1;
  height:100dvh;max-height:100dvh;
  max-width:880px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:20px;
}

.top{flex:0 0 auto;text-align:center;padding:12px 0}
.brand{font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}

.choice{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  align-content:center;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  min-height:280px;
  box-shadow:0 1px 2px rgba(26,26,26,.04);
}
/* Hover: the card answers. Lift, edge, shadow deepen together. */
.card:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(26,26,26,.09);
}
/* Press: honest resistance, then release. */
.card:active{
  transform:translateY(0) scale(.998);
  box-shadow:0 2px 6px rgba(26,26,26,.07);
  background-color:#fcfcfa;
}
/* Keyboard: a visible answer, not a surprise. */
.card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.card.flash{border-color:var(--ink);background-color:#fcfcfa}
.mark{font-size:64px;line-height:1;transition:transform .25s ease-out}
.card:hover .mark{transform:scale(1.045)}
.name{font-size:22px;font-weight:600;letter-spacing:-.01em}
.go{font-size:20px;color:var(--grey);transition:transform .2s ease-out,color .2s ease-out}
.card:hover .go{transform:translateX(4px);color:var(--ink)}
.card:active .go{transform:translateX(2px)}

.base{flex:0 0 auto;text-align:center;padding:12px 0;color:var(--grey);font-size:12px;letter-spacing:.08em}

@media (max-width:560px){
  .choice{grid-template-columns:1fr;gap:12px}
  .card{min-height:0;padding:36px 0}
  .mark{font-size:48px}
  .name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .top,.card,.base{opacity:1;transform:none}
  #bg{opacity:.5}
}