/* Cloud Dive — homepage styles.
   Production design with accessibility and responsive refinements. */

.home-recent-section.history-about-language{
  padding-top:clamp(58px,7vw,88px);
  padding-bottom:clamp(66px,8vw,104px);
}
.home-recent-empty{display:grid;justify-items:start;gap:9px;max-width:720px;margin-top:16px;padding:20px 22px;background:color-mix(in srgb,var(--surface-raised) 88%,transparent);border:2px dashed var(--border);border-radius:12px}
.home-recent-empty[hidden]{display:none}
.home-recent-empty .mono{color:var(--muted);font-size:.54rem;letter-spacing:.08em}
.home-recent-empty strong{font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.05;letter-spacing:-.035em}
.home-recent-empty p{max-width:590px;color:var(--muted);font-size:.78rem;line-height:1.55}
.home-recent-empty .btn{margin-top:4px}
.home-history-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  margin-bottom:24px;
}
.home-history-clear{
  align-self:end;
  min-height:42px;
  padding:0 14px;
  background:var(--yellow);
  color:#111;
  border:2px solid #111;
  border-radius:8px;
  box-shadow:3px 3px 0 #111;
  font-size:.72rem;
  font-weight:950;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.home-history-clear:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 #111;
}
.home-recent-section.history-about-language .home-recent-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.home-recent-section.history-about-language .home-recent-card{
  min-height:262px;
  padding:15px;
  border-radius:11px;
  box-shadow:4px 4px 0 var(--shadow-color);
  overflow:visible;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s ease;
}
.home-recent-section.history-about-language .home-recent-card:nth-child(1){transform:rotate(-.22deg)}
.home-recent-section.history-about-language .home-recent-card:nth-child(2){transform:rotate(.18deg)}
.home-recent-section.history-about-language .home-recent-card:nth-child(3){transform:rotate(-.14deg)}
.home-recent-section.history-about-language .home-recent-card:nth-child(4){transform:rotate(.12deg)}
.home-recent-section.history-about-language .home-recent-card.is-latest{
  background:color-mix(in srgb,var(--recent-accent) 8%,var(--surface-raised));
  border-color:color-mix(in srgb,var(--recent-accent) 55%,var(--border));
}
.home-recent-section.history-about-language .home-recent-meta{
  font-size:.55rem;
  font-weight:850;
  letter-spacing:.035em;
}
.home-recent-section.history-about-language .home-recent-provider{
  gap:7px;
  color:var(--text);
  font-weight:950;
}
.home-recent-section.history-about-language .home-recent-dot{
  width:10px;
  height:10px;
  border:1.5px solid #111;
  box-shadow:1px 1px 0 #111;
}
.home-recent-section.history-about-language .home-recent-card h3{
  margin-top:20px;
  color:var(--text);
  font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
  font-size:1.02rem;
  line-height:1.07;
  letter-spacing:-.025em;
}
.home-recent-section.history-about-language .home-recent-last-seen,
.home-recent-section.history-about-language .home-recent-progress-meta{
  font-size:.54rem;
  font-weight:850;
  line-height:1.25;
  letter-spacing:.025em;
}
.home-recent-section.history-about-language .home-recent-last-seen{margin-top:18px}
.home-recent-section.history-about-language .home-recent-progress-meta{margin-top:12px}
.home-recent-section.history-about-language .home-recent-progress{
  height:9px;
  margin-top:7px;
  border:2px solid var(--border);
  background:var(--surface-soft);
}
.home-recent-section.history-about-language .home-recent-open{
  padding-top:18px;
  font-size:.61rem;
  font-weight:950;
}
.home-history-principle{
  position:relative;
  overflow:hidden;
  margin-top:24px;
  padding:20px 22px;
  background:#17181e;
  color:#fff;
  border:2px solid #111;
  border-radius:12px;
  box-shadow:5px 5px 0 #111;
}
.home-history-principle::before{
  content:"RECENT DIVE.";
  position:absolute;
  right:-.04em;
  bottom:-.16em;
  color:#fff;
  opacity:.045;
  pointer-events:none;
  white-space:nowrap;
  font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
  font-size:clamp(4rem,9vw,7rem);
  font-weight:950;
  line-height:.8;
  letter-spacing:-.08em;
}
.home-history-principle > *{position:relative;z-index:1}
.home-history-principle-kicker{
  color:var(--cyan);
  font:900 .56rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.06em;
}
.home-history-principle strong{
  display:block;
  max-width:820px;
  margin-top:10px;
  color:#fff;
  font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
  font-size:clamp(1.45rem,2.8vw,2.35rem);
  line-height:1;
  letter-spacing:-.04em;
}
.home-history-principle strong span{color:var(--yellow)}
.home-history-principle p{
  max-width:780px;
  margin:10px 0 0;
  color:#d2d2dc;
  font-size:.78rem;
  line-height:1.6;
}
@media (max-width:980px){
  .home-recent-section.history-about-language .home-recent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:767px){
  .home-recent-section.history-about-language{
    padding-top:48px;
    padding-bottom:66px;
  }
  .home-history-head{grid-template-columns:1fr;gap:15px}
  .home-history-clear{justify-self:start;min-height:40px}
  .home-recent-section.history-about-language .home-recent-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .home-recent-section.history-about-language .home-recent-card{
    min-height:218px;
    padding:13px;
    border-radius:9px;
    box-shadow:3px 3px 0 var(--shadow-color);
    transform:none;
  }
  .home-recent-section.history-about-language .home-recent-card h3{
    margin-top:14px;
    font-size:.95rem;
  }
  .home-recent-section.history-about-language .home-recent-last-seen{margin-top:14px}
  .home-history-principle{padding:16px}
  .home-history-principle strong{font-size:clamp(1.65rem,8.2vw,2.25rem)}
}
@media (max-width:390px){
  .home-recent-section.history-about-language .home-recent-last-seen,
  .home-recent-section.history-about-language .home-recent-progress-meta{
    font-size:.5rem;
  }
}

.home-history-header-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  margin-top:0;
  margin-bottom:24px;
  padding:18px 20px;
}
.home-history-header-copy{min-width:0}
.home-history-header-card strong{
  max-width:680px;
  margin-top:8px;
  font-size:clamp(1.35rem,2.35vw,2.05rem);
  line-height:.98;
}
.home-history-header-card p{
  margin-top:8px;
  font-size:.72rem;
  line-height:1.45;
}
.home-history-header-card .home-history-clear{
  position:relative;
  z-index:2;
  align-self:end;
}
@media (max-width:767px){
  .home-history-header-card{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:18px;
    padding:15px 16px;
  }
  .home-history-header-card strong{
    font-size:clamp(1.45rem,7.5vw,1.95rem);
  }
  .home-history-header-card p{
    font-size:.7rem;
  }
  .home-history-header-card .home-history-clear{
    justify-self:start;
  }
}

.home-recent-section.history-about-language{
  position:relative;
  border-top:5px solid var(--yellow);
}

.home-recent-section.history-about-language .home-recent-card{
  min-height:0;
  padding:14px;
}
.home-recent-section.history-about-language .home-recent-card h3{
  margin-top:16px;
}
.home-recent-section.history-about-language .home-recent-last-seen{
  margin-top:14px;
}
.home-recent-section.history-about-language .home-recent-progress-meta{
  margin-top:10px;
}
.home-recent-section.history-about-language .home-recent-open{
  margin-top:13px;
  padding-top:0;
}
@media (max-width:767px){
  .home-recent-section.history-about-language .home-recent-card{
    min-height:0;
    padding:12px;
  }
  .home-recent-section.history-about-language .home-recent-card h3{
    margin-top:13px;
  }
  .home-recent-section.history-about-language .home-recent-last-seen{
    margin-top:12px;
  }
  .home-recent-section.history-about-language .home-recent-progress-meta{
    margin-top:9px;
  }
  .home-recent-section.history-about-language .home-recent-open{
    margin-top:12px;
    padding-top:0;
  }
}

.home-recent-section.history-about-language .home-recent-card{
  --recent-accent:var(--concept);
}
.home-recent-section.history-about-language .home-recent-card[data-provider="azure"]{--recent-accent:var(--azure)}
.home-recent-section.history-about-language .home-recent-card[data-provider="aws"]{--recent-accent:var(--aws)}
.home-recent-section.history-about-language .home-recent-card[data-provider="cloud-concepts"]{--recent-accent:var(--concept)}
.home-recent-section.history-about-language .home-recent-provider{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.home-recent-section.history-about-language .home-recent-dot{
  display:inline-block;
  flex:0 0 10px;
  border-radius:50%;
  background:var(--recent-accent);
}
.home-recent-section.history-about-language .home-recent-card h3{
  margin-top:14px;
  line-height:1.13;
  text-wrap:balance;
}
.home-recent-section.history-about-language .home-recent-last-seen,
.home-recent-section.history-about-language .home-recent-progress-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.home-recent-section.history-about-language .home-recent-last-seen > span,
.home-recent-section.history-about-language .home-recent-progress-meta > span{
  color:var(--muted);
  font-weight:800;
}
.home-recent-section.history-about-language .home-recent-last-seen > b,
.home-recent-section.history-about-language .home-recent-progress-meta > b{
  flex:0 0 auto;
  color:var(--text);
  font-weight:950;
  text-align:right;
}
.home-recent-section.history-about-language .home-recent-last-seen{margin-top:12px}
.home-recent-section.history-about-language .home-recent-progress-meta{margin-top:9px}
.home-recent-section.history-about-language .home-recent-progress{
  position:relative;
  display:block;
  width:100%;
  height:9px;
  margin-top:6px;
  overflow:hidden;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--surface-soft);
}
.home-recent-section.history-about-language .home-recent-progress > i{
  display:block;
  width:var(--recent-progress,0%);
  min-width:0;
  height:100%;
  border-radius:inherit;
  background:var(--recent-accent);
  transition:width .22s var(--ease);
}
.home-recent-section.history-about-language .home-recent-open{
  margin-top:11px;
  padding-top:0;
  line-height:1.25;
}
@media (max-width:767px){
  .home-recent-section.history-about-language .home-recent-card h3{margin-top:12px;line-height:1.14}
  .home-recent-section.history-about-language .home-recent-last-seen{margin-top:10px}
  .home-recent-section.history-about-language .home-recent-progress-meta{margin-top:8px}
  .home-recent-section.history-about-language .home-recent-open{margin-top:10px}
}

.hero-provider-message{
  max-width:720px;
  margin-top:20px;
  min-height:2.9em;
  font-size:.9rem;
  line-height:1.48;
}
.hero-desc{
  margin-top:18px;
}
@media (max-width:767px){
  .hero-provider-message{
    margin-top:17px;
    min-height:0;
    font-size:.86rem;
  }
  .hero-desc{
    margin-top:16px;
  }
}

#homeHero .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(480px,.94fr);
  gap:34px;
  align-items:center;
}
#homeHero .hero-copy-block{
  align-self:center;
  padding-block:14px;
}
#homeHero .kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  color:var(--ink);
}
#homeHero .kicker::before{
  content:"";
  width:7px;
  height:28px;
  flex:0 0 auto;
  border:1.5px solid #111;
  border-radius:3px;
  background:var(--yellow);
}
#homeHero .display{
  max-width:760px;
  margin-top:18px;
  font-size:clamp(3rem,5.4vw,6rem);
  line-height:.91;
  letter-spacing:-.072em;
}
#homeHero .display-line{
  display:inline;
}
#homeHero .hero-provider-switch{
  text-decoration-thickness:.075em;
  text-underline-offset:.1em;
}
#homeHero .hero-provider-message{
  max-width:700px;
  min-height:0;
  margin-top:22px;
  font-size:.94rem;
  line-height:1.62;
}
#homeHero .hero-actions{
  margin-top:24px;
}

@media (max-width:1050px){
  #homeHero .hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  #homeHero .display{
    max-width:930px;
  }
  #homeHero .hero-provider-message{
    max-width:830px;
  }
}
@media (max-width:767px){
  #homeHero .hero-copy-block{
    padding-block:4px;
  }
  #homeHero .display{
    font-size:clamp(2.65rem,12vw,4.15rem);
    margin-top:15px;
  }
  #homeHero .hero-provider-message{
    margin-top:18px;
    font-size:.87rem;
  }
  #homeHero .hero-actions{
    margin-top:20px;
  }
}
@media (max-width:390px){
  #homeHero .display{
    font-size:2.55rem;
  }
}

#homeHero .kicker{
  display:inline-block;
  width:auto;
  max-width:100%;
  margin-bottom:12px;
  padding:0 0 5px;
  background:transparent;
  color:var(--ink);
  border:0;
  border-radius:0;
  box-shadow:none;
  font:900 .64rem/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.055em;
  text-transform:uppercase;
  position:relative;
}
#homeHero .kicker::before{
  content:none;
  display:none;
}

#homeHero .hero-provider-switch,
#homeHero .hero-provider-switch[data-provider="generic"],
#homeHero .hero-provider-switch[data-provider="azure"],
#homeHero .hero-provider-switch[data-provider="aws"],
html[data-theme="dark"] #homeHero .hero-provider-switch,
html[data-theme="dark"] #homeHero .hero-provider-switch[data-provider="azure"],
html[data-theme="dark"] #homeHero .hero-provider-switch[data-provider="aws"]{
  position:relative;
  width:auto;
  display:inline;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  transform:none;
  vertical-align:baseline;
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.1em;
  cursor:pointer;
  transition:opacity .14s ease,transform .14s var(--ease);
}
#homeHero .hero-provider-switch::after{
  content:none;
  display:none;
}
#homeHero[data-provider="generic"] #heroProviderWord{color:var(--purple)}
#homeHero[data-provider="azure"] #heroProviderWord{color:var(--azure)}
#homeHero[data-provider="aws"] #heroProviderWord{color:var(--aws)}

#homeHero .kicker{
  position:relative;
  display:inline-block;
  width:auto;
  max-width:100%;
  margin-bottom:12px;
  padding:0 0 5px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--ink);
  font:900 .64rem/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.055em;
  text-transform:uppercase;
}
#homeHero .kicker::before{content:none;display:none}
#homeHero .kicker::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:78px;
  height:3px;
  border-radius:999px;
  background:var(--yellow);
}

#homeHero .display{
  max-width:720px;
  margin-top:18px;
  font-size:clamp(3rem,5.2vw,5.8rem);
  line-height:.91;
  letter-spacing:-.071em;
}
#homeHero .hero-title-line{display:inline}
#homeHero .narrow-break{display:none}

#homeHero .hero-provider-wrap{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  padding-bottom:.23em;
}
#homeHero .hero-provider-switch,
#homeHero .hero-provider-switch[data-provider="generic"],
#homeHero .hero-provider-switch[data-provider="azure"],
#homeHero .hero-provider-switch[data-provider="aws"],
html[data-theme="dark"] #homeHero .hero-provider-switch{
  display:inline;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  vertical-align:baseline;
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.1em;
  cursor:pointer;
  transition:opacity .14s ease,transform .14s var(--ease);
}
#homeHero .hero-provider-switch::after{content:none;display:none}
#homeHero .hero-provider-switch:active{
  transform:translateY(1px);
  box-shadow:none;
}
#homeHero .hero-provider-dot{color:var(--ink)}
html:not([data-theme="dark"]) #homeHero[data-provider="generic"] #heroProviderWord{color:#6746e8}
html:not([data-theme="dark"]) #homeHero[data-provider="azure"] #heroProviderWord{color:#0878d8}
html:not([data-theme="dark"]) #homeHero[data-provider="aws"] #heroProviderWord{color:#bd6500}

#homeHero .hero-click-note{
  position:absolute;
  right:-17px;
  bottom:-.58em;
  z-index:5;
  padding:5px 9px;
  border:2px solid #111;
  border-radius:3px;
  background:var(--yellow);
  color:#111;
  box-shadow:2px 2px 0 #111;
  transform:rotate(-5deg);
  font:950 .4rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.075em;
  text-transform:uppercase;
  pointer-events:none;
}
#homeHero .hero-click-note::before{
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  top:-5px;
  height:8px;
  background:color-mix(in srgb,var(--pink) 64%,transparent);
  transform:rotate(3deg);
  opacity:.72;
}

#homeHero .hero-provider-message{
  max-width:700px;
  min-height:0;
  margin-top:23px;
  font-size:.94rem;
  line-height:1.62;
}

.hero-question-game-visual{
  min-width:0;
  padding:6px 2px 8px 0;
}
.hero-question-game{
  min-width:0;
  width:100%;
  padding:8px 4px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.question-game-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 8px 10px;
}
.question-game-overline{
  display:block;
  color:var(--muted);
  font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.055em;
}
.question-game-head strong{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:.94rem;
  line-height:1.08;
}

.question-deck{
  position:relative;
  min-height:344px;
  display:grid;
  place-items:center;
  padding:24px 24px 30px 10px;
}
.question-card-back{
  position:absolute;
  width:min(88%,390px);
  min-height:278px;
  border:2px solid var(--border);
  border-radius:16px;
  background:var(--surface-raised);
  box-shadow:4px 4px 0 var(--shadow-color);
}
.card-back-three{transform:translate(25px,20px) rotate(4.2deg);opacity:.24}
.card-back-two{transform:translate(16px,12px) rotate(2.7deg);opacity:.42}
.card-back-one{transform:translate(8px,6px) rotate(1.2deg);opacity:.66}

.question-card{
  position:relative;
  z-index:4;
  width:min(88%,390px);
  min-height:284px;
  padding:0;
  overflow:hidden;
  border:2px solid var(--border);
  border-radius:16px;
  background:var(--surface-raised);
  color:var(--text);
  text-align:left;
  box-shadow:7px 7px 0 var(--shadow-color);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.question-card:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}
.question-card-accent{
  height:11px;
  background:var(--purple);
}
.question-card-face{
  position:relative;
  min-height:188px;
  padding:15px 17px 17px;
}
.question-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font:900 .47rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  text-transform:uppercase;
}
.question-card-index{
  min-width:37px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0 8px;
  border:2px solid #111;
  border-radius:999px;
  background:var(--yellow);
  color:#111;
  box-shadow:2px 2px 0 #111;
  font:950 .51rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.question-card-mark{
  position:absolute;
  right:19px;
  bottom:18px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--border);
  border-radius:50%;
  background:var(--surface-soft);
  color:var(--muted);
  transform:rotate(7deg);
  font:950 1.15rem/1 ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
}
.question-card-face h2{
  max-width:292px;
  margin:27px 56px 0 0;
  color:var(--text);
  font:950 1.18rem/1.13 ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
  letter-spacing:-.027em;
}
.question-card-hint{
  max-width:285px;
  margin:12px 56px 0 0;
  color:var(--muted);
  font-size:.59rem;
  line-height:1.42;
}

.question-answer{
  position:relative;
  min-height:68px;
  border-top:2px dashed var(--border-soft);
  background:color-mix(in srgb,var(--yellow) 10%,var(--surface-raised));
  transition:min-height .22s var(--ease),background .22s ease;
}
.question-answer-copy{
  max-height:0;
  overflow:hidden;
  padding:0 17px;
  opacity:0;
  transition:max-height .24s var(--ease),opacity .16s ease,padding .24s var(--ease);
}
.question-answer-copy .mono{
  color:var(--muted);
  font-size:.42rem;
}
.question-answer-copy p{
  margin:7px 0 0;
  color:var(--text);
  font-size:.69rem;
  line-height:1.46;
}
.question-reveal-label{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 17px;
  color:var(--text);
  font:950 .52rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.question-answer.revealed{
  min-height:154px;
  background:color-mix(in srgb,var(--yellow) 17%,var(--surface-raised));
}
.question-answer.revealed .question-answer-copy{
  max-height:125px;
  padding:14px 17px 5px;
  opacity:1;
}
.question-answer.revealed .question-reveal-label{
  min-height:42px;
  border-top:1px solid var(--border-soft);
}

.question-game-progress{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  width:min(80%,350px);
  margin:1px auto 0;
}
.question-game-progress .progress-dot{
  height:8px;
  border:1.5px solid var(--border);
  border-radius:999px;
  background:var(--surface-soft);
}
.question-game-progress .progress-dot.active{
  border-color:#111;
  background:var(--yellow);
}
.question-game-progress .progress-dot.done{
  border-color:#111;
  background:var(--green);
}

@media (max-width:1179px){
  #homeHero .hero-grid{
    grid-template-columns:minmax(0,.82fr) minmax(470px,1.18fr);
    gap:26px;
  }
  #homeHero .display{
    font-size:clamp(2.45rem,4.45vw,4.05rem);
  }
  #homeHero .narrow-break{display:inline}
}
@media (max-width:900px){
  #homeHero .hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  #homeHero .display{
    max-width:690px;
    font-size:clamp(2.55rem,8.4vw,4.3rem);
  }
  .hero-question-game{
    width:min(100%,640px);
    justify-self:center;
  }
  .hero-question-game-visual{padding-right:0}
}
@media (max-width:767px){
  #homeHero .display{
    font-size:clamp(2.35rem,11vw,3.5rem);
  }
  #homeHero .hero-provider-message{
    margin-top:25px;
    font-size:.87rem;
  }
  #homeHero .hero-click-note{
    right:-14px;
    bottom:-.63em;
    padding:5px 8px;
  }
  .question-deck{
    min-height:322px;
    padding:20px 12px 26px 2px;
  }
  .question-card,
  .question-card-back{
    width:min(91%,370px);
  }
}
@media (max-width:390px){
  #homeHero .display{font-size:2.3rem}
  #homeHero .hero-click-note{
    right:-11px;
    bottom:-.66em;
  }
  .question-card-face h2{font-size:1.07rem}
}

#homeHero{
  background:transparent;
}
#recent.home-recent-section{
  background:color-mix(in srgb,var(--surface) 78%,transparent);
}

.question-game-head-minimal{
  min-height:18px;
  align-items:center;
  margin-bottom:6px;
}

#homeHero .hero-grid{
  align-items:stretch;
}
#homeHero .hero-question-game-visual{
  display:flex;
  align-items:stretch;
  min-height:100%;
  padding:2px 4px 4px 0;
}
#homeHero .hero-question-game{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100%;
  padding:10px 2px 8px;
}
#homeHero .question-game-head-minimal{
  margin:0 12px 10px;
}
#homeHero .question-game-overline{
  font-size:.68rem;
  letter-spacing:.08em;
}
#homeHero .question-deck{
  flex:1 1 auto;
  min-height:430px;
  align-items:stretch;
  place-items:stretch;
  padding:20px 26px 24px 8px;
}
#homeHero .question-card-back,
#homeHero .question-card{
  width:min(92%,420px);
}
#homeHero .question-card-back{
  min-height:336px;
  border-radius:20px;
  box-shadow:6px 6px 0 var(--shadow-color);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface-raised) 96%,white 4%),var(--surface-raised));
}
#homeHero .card-back-three{transform:translate(30px,24px) rotate(5deg);opacity:.16}
#homeHero .card-back-two{transform:translate(19px,14px) rotate(3.2deg);opacity:.34}
#homeHero .card-back-one{transform:translate(10px,7px) rotate(1.4deg);opacity:.58}

#homeHero .question-card{
  min-height:352px;
  border-radius:20px;
  box-shadow:10px 10px 0 var(--shadow-color);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface-raised) 98%,white 2%) 0%,var(--surface-raised) 100%);
}
#homeHero .question-card-accent{
  height:14px;
}
#homeHero .question-card-face{
  min-height:228px;
  padding:17px 20px 18px;
}
#homeHero .question-card-meta{
  font-size:.68rem;
}
#homeHero .question-card-index{
  min-width:42px;
  height:34px;
  font-size:.68rem;
  box-shadow:3px 3px 0 #111;
}
#homeHero .question-card-mark{
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  font-size:1.2rem;
}
#homeHero .question-card-face h2{
  max-width:310px;
  margin:31px 64px 0 0;
  font-size:1.28rem;
  line-height:1.15;
}
#homeHero .question-card-hint{
  max-width:300px;
  margin:14px 64px 0 0;
  font-size:.68rem;
  line-height:1.52;
}
#homeHero .question-answer{
  min-height:96px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 7%,var(--surface-raised)),color-mix(in srgb,var(--yellow) 12%,var(--surface-raised)));
}
#homeHero .question-reveal-label{
  min-height:94px;
  padding:0 20px;
  font-size:.56rem;
}
#homeHero .question-answer-copy .mono{
  font-size:.45rem;
}
#homeHero .question-answer-copy p{
  margin:8px 0 0;
  font-size:.79rem;
  line-height:1.54;
}
#homeHero .question-answer.revealed{
  min-height:184px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 11%,var(--surface-raised)),color-mix(in srgb,var(--yellow) 18%,var(--surface-raised)));
}
#homeHero .question-answer.revealed .question-answer-copy{
  max-height:150px;
  padding:16px 20px 6px;
}
#homeHero .question-answer.revealed .question-reveal-label{
  min-height:48px;
}
#homeHero .question-game-progress{
  width:min(82%,366px);
  margin:6px auto 0;
  gap:8px;
}

@media (max-width:900px){
  #homeHero .hero-question-game-visual{min-height:auto;}
  #homeHero .question-deck{
    min-height:396px;
    padding-right:10px;
  }
}
@media (max-width:767px){
  #homeHero .question-deck{
    min-height:354px;
    padding:18px 12px 20px 2px;
  }
  #homeHero .question-card,
  #homeHero .question-card-back{
    width:min(93%,380px);
  }
  #homeHero .question-card-back{min-height:304px;}
  #homeHero .question-card{min-height:318px;}
  #homeHero .question-card-face{
    min-height:208px;
    padding:15px 16px 16px;
  }
  #homeHero .question-card-face h2{
    margin-top:26px;
    margin-right:58px;
    font-size:1.14rem;
  }
  #homeHero .question-card-hint{
    margin-right:54px;
    font-size:.63rem;
  }
  #homeHero .question-answer{min-height:84px;}
  #homeHero .question-reveal-label{min-height:82px;padding:0 16px;}
  #homeHero .question-answer.revealed{min-height:170px;}
  #homeHero .question-answer.revealed .question-answer-copy{padding:14px 16px 4px;}
}
@media (max-width:390px){
  #homeHero .question-deck{min-height:338px;}
  #homeHero .question-card-face h2{font-size:1.06rem;}
  #homeHero .question-card-hint{font-size:.6rem;}
  #homeHero .question-card-index{min-width:38px;height:31px;}
}

body.page-home{
  --home-section-tint:color-mix(in srgb,var(--surface) 82%,var(--canvas) 18%);
  position:relative;
  background:var(--home-section-tint);
}
body.page-home::before{content:"";position:fixed;inset:0 0 auto 0;height:170px;pointer-events:none;background:var(--home-section-tint);z-index:-1}

#homeHero,
#recent.home-recent-section{
  background:
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb,var(--border) 6%,transparent) 1px,
      transparent 1.2px) 0 0/24px 24px,
    var(--home-section-tint);
}

#homeHero{
  margin-top:-10px;
  padding-top:calc(clamp(3.5rem,7vw,6.5rem) + 10px);
}

@media (max-width:720px){
  #homeHero{
    margin-top:-6px;
    padding-top:calc(clamp(3.5rem,7vw,6.5rem) + 6px);
  }
}

.hero-question-game-visual{
  padding:2px 2px 4px 0;
}

.hero-question-game{
  padding:2px 0 10px;
}

.question-game-head{
  margin:0 6px 12px;
}

.question-deck{
  position:relative;
  min-height:416px;
  display:grid;
  place-items:center;
  padding:12px 34px 14px 8px;
}

.question-card-back{
  width:min(92%,420px);
  min-height:318px;
  border-radius:20px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-raised) 96%,white 4%) 0%,
      var(--surface-raised) 100%);
  box-shadow:
    4px 4px 0 var(--shadow-color),
    0 14px 30px color-mix(in srgb,var(--shadow-color) 10%,transparent);
}
.card-back-three{transform:translate(30px,20px) rotate(4deg);opacity:.20}
.card-back-two{transform:translate(19px,11px) rotate(2.4deg);opacity:.38}
.card-back-one{transform:translate(10px,4px) rotate(1deg);opacity:.62}

.question-card{
  width:min(92%,420px);
  min-height:332px;
  border-radius:20px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-raised) 98%,white 2%) 0%,
      var(--surface-raised) 100%);
  box-shadow:
    8px 8px 0 var(--shadow-color),
    0 18px 34px color-mix(in srgb,var(--shadow-color) 12%,transparent);
}

.question-card-accent{
  height:13px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--yellow) 65%,white 35%) 0%,
      var(--yellow) 50%,
      color-mix(in srgb,var(--yellow) 72%,var(--purple) 28%) 100%);
}

.question-card-face{
  position:relative;
  min-height:236px;
  padding:18px 20px 18px;
  display:flex;
  flex-direction:column;
}

.question-card-meta{
  gap:12px;
  align-items:center;
}

#questionCardLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.question-card-index{
  min-width:44px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  box-shadow:2px 2px 0 #111;
  font-size:.58rem;
}

.question-card-mark{
  right:18px;
  bottom:22px;
  width:52px;
  height:52px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--surface-soft) 80%,white 20%) 0%, var(--surface-soft) 100%);
  font-size:1.26rem;
}

.question-card-face h2{
  max-width:none;
  margin:22px 64px 0 0;
  color:var(--text);
  font-size:1.33rem;
  line-height:1.12;
  letter-spacing:-.032em;
  text-wrap:balance;
}

.question-card-hint{
  max-width:100%;
  margin:15px 54px 0 0;
  color:var(--muted);
  font-size:.64rem;
  line-height:1.48;
  font-weight:700;
}

.question-answer{
  min-height:84px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--yellow) 7%,var(--surface-raised)) 0%,
      color-mix(in srgb,var(--yellow) 14%,var(--surface-raised)) 100%);
}

.question-answer-copy{
  transition:max-height .24s var(--ease),opacity .16s ease,padding .24s var(--ease);
}

.question-answer-copy .mono{
  font-size:.45rem;
}

.question-answer-copy p{
  margin:8px 0 0;
  font-size:.78rem;
  line-height:1.5;
  font-weight:700;
}

.question-reveal-label{
  min-height:82px;
  padding:0 18px;
  font-size:.55rem;
}

.question-answer.revealed{
  min-height:176px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--yellow) 12%,var(--surface-raised)) 0%,
      color-mix(in srgb,var(--yellow) 21%,var(--surface-raised)) 100%);
}

.question-answer.revealed .question-answer-copy{
  max-height:140px;
  padding:16px 18px 6px;
}

.question-answer.revealed .question-reveal-label{
  min-height:46px;
}

.question-game-progress{
  width:min(84%,370px);
  margin:4px auto 0;
}

.question-card-next{
  position:absolute;
  z-index:8;
  right:0;
  top:50%;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:2px solid #111;
  border-radius:50%;
  background:var(--yellow);
  color:#111;
  box-shadow:4px 4px 0 #111;
  transform:translateY(-50%);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s ease;
}
.question-card-next:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}
.question-card-next-arrow{
  font:950 1.18rem/1 ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
}

@media  (max-width: 980px){
  .question-deck{
    min-height:398px;
    padding-right:28px;
  }
  .question-card,
  .question-card-back{
    width:min(96%,408px);
  }
}

@media  (max-width: 720px){
  .question-deck{
    min-height:376px;
    padding:10px 14px 18px 0;
  }
  .question-card,
  .question-card-back{
    width:min(100%,384px);
  }
  .question-card{
    min-height:318px;
  }
  .question-card-face{
    min-height:224px;
    padding:16px 16px 16px;
  }
  .question-card-face h2{
    margin:18px 58px 0 0;
    font-size:1.18rem;
  }
  .question-card-hint{
    margin-right:48px;
    font-size:.62rem;
  }
  .question-card-mark{
    right:14px;
    bottom:18px;
    width:46px;
    height:46px;
    font-size:1.08rem;
  }
  .question-card-next{
    right:-2px;
    width:50px;
    height:50px;
  }
  .question-answer{
    min-height:78px;
  }
  .question-answer.revealed{
    min-height:166px;
  }
}

@media  (max-width: 560px){
  .hero-question-game{
    padding-top:0;
  }
  .question-game-head{
    margin:0 0 10px;
  }
  .question-deck{
    min-height:358px;
    padding:8px 6px 16px 0;
  }
  .question-card,
  .question-card-back{
    width:min(100%,358px);
  }
  .question-card{
    min-height:302px;
  }
  .question-card-face{
    min-height:208px;
    padding:15px 14px 14px;
  }
  .question-card-face h2{
    margin:16px 54px 0 0;
    font-size:1.06rem;
  }
  .question-card-hint{
    font-size:.59rem;
    margin-top:12px;
    margin-right:44px;
  }
  .question-answer-copy p{
    font-size:.73rem;
  }
  .question-reveal-label{
    font-size:.52rem;
  }
  .question-card-next{
    right:2px;
    top:auto;
    bottom:12px;
    width:46px;
    height:46px;
    transform:none;
    box-shadow:3px 3px 0 #111;
  }
}

@media  (prefers-reduced-motion: reduce){
  .question-card,
  .question-card-next{
    transition:none;
  }
}

#homeHero .kicker{
  --hero-kicker-accent:var(--yellow);
  position:relative;
  display:inline-flex !important;
  flex-direction:column;
  justify-content:center;
  width:max-content !important;
  max-width:100%;
  min-height:34px;
  margin:0 0 12px;
  padding:0 0 0 13px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(.72rem,.9vw,.84rem) !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.025em !important;
  text-transform:uppercase;
}
#homeHero .kicker::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:0;
  top:1px;
  bottom:1px;
  width:5px !important;
  height:auto !important;
  background:var(--hero-kicker-accent) !important;
  border:1.5px solid #111 !important;
  border-radius:999px;
  box-shadow:1.5px 1.5px 0 #111 !important;
}
#homeHero .kicker::after{
  display:none !important;
  content:none !important;
}

#homeHero .hero-question-game-visual{
  display:flex;
  align-items:stretch;
  justify-content:center;
  min-width:0;
  padding:0;
}
#homeHero .hero-question-game{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:4px 0 8px;
}
#homeHero .question-game-head-minimal{
  width:min(94%,470px);
  margin:0 auto 11px;
}
#homeHero .question-deck{
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-height:438px;
  display:grid;
  place-items:center;
  padding:12px 28px 20px;
  overflow:visible;
}

#homeHero .question-card-back{
  position:absolute;
  left:50%;
  top:50%;
  width:min(88%,450px);
  min-height:346px;
  border-radius:21px;
  transform-origin:center;
}
#homeHero .card-back-three{
  transform:translate(-50%,-50%) translate(25px,20px) rotate(4.2deg);
  opacity:.18;
}
#homeHero .card-back-two{
  transform:translate(-50%,-50%) translate(16px,12px) rotate(2.5deg);
  opacity:.36;
}
#homeHero .card-back-one{
  transform:translate(-50%,-50%) translate(8px,5px) rotate(1.1deg);
  opacity:.60;
}

#homeHero .question-card{
  position:relative;
  z-index:4;
  width:min(88%,450px);
  min-height:360px;
  border-radius:21px;
  box-shadow:
    9px 9px 0 var(--shadow-color),
    0 20px 38px color-mix(in srgb,var(--shadow-color) 13%,transparent);
}

#homeHero .question-card-accent{
  height:14px;
  border-bottom:1.5px solid color-mix(in srgb,var(--border) 35%,transparent);
}
#homeHero .question-card-face{
  min-height:244px;
  padding:19px 21px 19px;
}
#homeHero .question-card-face h2{
  max-width:330px;
  margin:28px 65px 0 0;
  font-size:1.36rem;
  line-height:1.12;
  letter-spacing:-.033em;
  text-wrap:balance;
}
#homeHero .question-card-hint{
  max-width:325px;
  margin:15px 58px 0 0;
  font-size:.875rem;
  line-height:1.5;
}
#homeHero .question-card-index{
  min-width:45px;
  height:35px;
}
#homeHero .question-card-mark{
  right:20px;
  bottom:21px;
  width:54px;
  height:54px;
}

#homeHero .question-answer{
  min-height:94px;
  cursor:pointer;
}
#homeHero .question-reveal-label{
  min-height:92px;
  padding:0 20px;
  font-size:.57rem;
}
#homeHero .question-answer.revealed{
  min-height:190px;
}
#homeHero .question-answer.revealed .question-answer-copy{
  max-height:155px;
  padding:17px 20px 7px;
}
#homeHero .question-answer-copy p{
  font-size:.79rem;
  line-height:1.54;
}
#homeHero .question-answer.revealed .question-reveal-label{
  min-height:46px;
}

#homeHero .question-card-next{
  right:calc(50% - min(44%,225px) - 27px);
  top:50%;
  width:56px;
  height:56px;
  transform:translateY(-50%);
  z-index:9;
}
#homeHero .question-card-next-arrow{
  font-size:1.24rem;
}

#homeHero .question-game-progress{
  width:min(78%,380px);
  margin:5px auto 0;
  gap:8px;
}
#homeHero .question-game-progress .progress-dot{
  height:9px;
}

#homeHero .question-easter-egg{
  position:absolute;
  z-index:10;
  left:calc(50% - min(44%,225px) - 12px);
  bottom:4px;
  width:196px;
  padding:10px 12px 11px;
  border:2px solid #111;
  border-radius:9px;
  background:var(--yellow);
  color:#111;
  box-shadow:4px 4px 0 #111;
  transform:rotate(-3deg);
  animation:questionEggPop .34s var(--ease) both;
  pointer-events:none;
}
#homeHero .question-easter-egg::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-7px;
  height:10px;
  background:color-mix(in srgb,var(--pink) 62%,transparent);
  transform:rotate(2deg);
  opacity:.78;
}
#homeHero .question-easter-kicker{
  display:block;
  font:950 .43rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.055em;
}
#homeHero .question-easter-egg strong{
  display:block;
  margin-top:7px;
  font-size:.79rem;
  line-height:1.05;
}
#homeHero .question-easter-egg > span:last-child{
  display:block;
  margin-top:5px;
  font-size:.58rem;
  font-weight:800;
  line-height:1.35;
}

@keyframes questionEggPop{
  from{opacity:0;transform:translateY(16px) rotate(-7deg) scale(.92)}
  to{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}
}

@media (max-width:1180px){
  #homeHero .question-deck{
    min-height:420px;
    padding-inline:24px;
  }
  #homeHero .question-card,
  #homeHero .question-card-back{
    width:min(90%,430px);
  }
  #homeHero .question-card-next{
    right:calc(50% - min(45%,215px) - 26px);
  }
  #homeHero .question-easter-egg{
    left:calc(50% - min(45%,215px) - 10px);
  }
}

@media (max-width:900px){
  #homeHero .question-game-head-minimal{
    width:min(94%,500px);
  }
  #homeHero .question-deck{
    width:min(100%,620px);
    min-height:412px;
    margin-inline:auto;
  }
  #homeHero .question-card,
  #homeHero .question-card-back{
    width:min(86%,430px);
  }
  #homeHero .question-card-next{
    right:calc(50% - min(43%,215px) - 27px);
  }
  #homeHero .question-easter-egg{
    left:calc(50% - min(43%,215px) - 8px);
  }
}

@media (max-width:767px){
  #homeHero .question-deck{
    min-height:390px;
    padding:10px 22px 18px;
  }
  #homeHero .question-card,
  #homeHero .question-card-back{
    width:min(88%,390px);
  }
  #homeHero .question-card{
    min-height:326px;
  }
  #homeHero .question-card-back{
    min-height:315px;
  }
  #homeHero .question-card-face{
    min-height:218px;
    padding:16px 17px;
  }
  #homeHero .question-card-face h2{
    margin:20px 56px 0 0;
    font-size:1.16rem;
  }
  #homeHero .question-card-hint{
    margin:12px 50px 0 0;
    font-size:.62rem;
  }
  #homeHero .question-answer{
    min-height:82px;
  }
  #homeHero .question-reveal-label{
    min-height:80px;
    padding-inline:17px;
  }
  #homeHero .question-answer.revealed{
    min-height:174px;
  }
  #homeHero .question-card-next{
    right:calc(50% - min(44%,195px) - 23px);
    width:50px;
    height:50px;
  }
  #homeHero .question-easter-egg{
    left:calc(50% - min(44%,195px));
    bottom:0;
    width:180px;
  }
}

@media (max-width:560px){
  #homeHero .question-deck{
    min-height:370px;
    padding:8px 8px 16px;
  }
  #homeHero .question-card,
  #homeHero .question-card-back{
    width:min(88%,350px);
  }
  #homeHero .question-card{
    min-height:310px;
  }
  #homeHero .question-card-back{
    min-height:300px;
  }
  #homeHero .question-card-face{
    min-height:205px;
    padding:15px;
  }
  #homeHero .question-card-face h2{
    margin:17px 52px 0 0;
    font-size:1.07rem;
  }
  #homeHero .question-card-hint{
    margin-right:46px;
    font-size:.59rem;
  }
  #homeHero .question-card-next{
    right:4px;
    top:auto;
    bottom:18px;
    width:46px;
    height:46px;
    transform:none;
  }
  #homeHero .question-easter-egg{
    left:9px;
    bottom:-3px;
    width:174px;
  }
}

@media (prefers-reduced-motion:reduce){
}

#homeHero .question-card-next{
  right:calc(50% - min(44%,225px) - 40px);
  top:51%;
  width:42px;
  height:42px;
  border-width:2px;
  box-shadow:2px 2px 0 #111;
  background:color-mix(in srgb,var(--yellow) 88%,var(--surface-raised) 12%);
  opacity:.9;
}
#homeHero .question-card-next-arrow{
  font-size:.95rem;
}

#homeHero .question-easter-egg{
  left:50%;
  top:0;
  bottom:auto;
  width:auto;
  min-width:190px;
  max-width:250px;
  transform:translate(-50%,-34%) rotate(-2deg);
  text-align:center;
  padding:9px 13px 10px;
  box-shadow:3px 3px 0 #111;
  animation:questionEggPopTop .34s var(--ease) both;
}
#homeHero .question-easter-egg::before{
  left:24%;
  right:24%;
  top:-6px;
  height:9px;
}
#homeHero .question-easter-egg strong{
  font-size:.76rem;
}
#homeHero .question-easter-egg > span:last-child{
  font-size:.56rem;
}

#homeHero .question-deck{
  padding-top:26px;
}

@keyframes questionEggPopTop{
  from{
    opacity:0;
    transform:translate(-50%,-20%) rotate(-5deg) scale(.94);
  }
  to{
    opacity:1;
    transform:translate(-50%,-34%) rotate(-2deg) scale(1);
  }
}

@media (max-width:1180px){
  #homeHero .question-card-next{
    right:calc(50% - min(45%,215px) - 36px);
  }
}

@media (max-width:900px){
  #homeHero .question-card-next{
    right:calc(50% - min(43%,215px) - 34px);
  }
  #homeHero .question-easter-egg{
    top:2px;
  }
}

@media (max-width:767px){
  #homeHero .question-card-next{
    right:calc(50% - min(44%,195px) - 28px);
    width:40px;
    height:40px;
  }
  #homeHero .question-easter-egg{
    top:3px;
    min-width:175px;
    max-width:220px;
  }
}

@media (max-width:560px){
  #homeHero .question-card-next{
    right:-2px;
    top:50%;
    bottom:auto;
    width:38px;
    height:38px;
    transform:translateY(-50%);
  }
  #homeHero .question-easter-egg{
    left:50%;
    top:2px;
    bottom:auto;
    width:auto;
    min-width:166px;
    max-width:205px;
    transform:translate(-50%,-28%) rotate(-2deg);
  }
}

#homeHero .question-card-next{
  right:calc(50% - min(44%,225px) - 46px);
  top:50%;
  width:40px;
  height:40px;
  background:var(--yellow);
  border:2px solid #111;
  box-shadow:2px 2px 0 #111;
  opacity:.88;
}
#homeHero .question-card-next-arrow{
  font-size:.9rem;
}

#homeHero .question-easter-egg{
  position:absolute;
  z-index:12;
  left:50%;
  top:3px;
  bottom:auto;
  width:min(86%,310px);
  min-width:0;
  max-width:310px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:2px solid #111;
  border-radius:999px;
  background:var(--yellow);
  color:#111;
  box-shadow:3px 3px 0 #111;
  text-align:left;
  transform:translate(-50%,-28%);
  animation:questionEggBadgeIn .28s var(--ease) both;
  pointer-events:none;
}
#homeHero .question-easter-egg[hidden]{
  display:none !important;
}
#homeHero .question-easter-egg::before{
  display:none;
  content:none;
}
#homeHero .question-easter-icon{
  flex:0 0 auto;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:2px solid #111;
  border-radius:50%;
  background:var(--surface-raised);
  color:#111;
  font-size:.85rem;
  box-shadow:1.5px 1.5px 0 #111;
}
#homeHero .question-easter-copy-wrap{
  min-width:0;
  display:block;
}
#homeHero .question-easter-kicker{
  display:block;
  font:950 .4rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.07em;
}
#homeHero .question-easter-egg strong{
  display:block;
  margin-top:4px;
  font-size:.72rem;
  line-height:1.05;
}
#homeHero .question-easter-egg #questionEasterCopy{
  display:block;
  margin-top:3px;
  font-size:.52rem;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
}
#homeHero .hero-question-game[data-provider="azure"] .question-easter-egg{
  background:var(--cyan);
}
#homeHero .hero-question-game[data-provider="aws"] .question-easter-egg{
  background:var(--coral);
}
#homeHero .hero-question-game.is-all-complete .question-easter-egg{
  background:var(--green);
}

@keyframes questionEggBadgeIn{
  from{opacity:0;transform:translate(-50%,-10%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-28%) scale(1)}
}

@media (max-width:1180px){
  #homeHero .question-card-next{
    right:calc(50% - min(45%,215px) - 42px);
  }
}
@media (max-width:900px){
  #homeHero .question-card-next{
    right:calc(50% - min(43%,215px) - 40px);
  }
}
@media (max-width:767px){
  #homeHero .question-card-next{
    right:calc(50% - min(44%,195px) - 32px);
    width:38px;
    height:38px;
  }
  #homeHero .question-easter-egg{
    width:min(90%,285px);
    top:5px;
    padding:8px 10px;
  }
}
@media (max-width:560px){
  #homeHero .question-card-next{
    right:-4px;
    top:50%;
    bottom:auto;
    width:36px;
    height:36px;
    transform:translateY(-50%);
  }
  #homeHero .question-easter-egg{
    width:min(92%,270px);
    top:6px;
    transform:translate(-50%,-20%);
  }
}

@media (prefers-reduced-motion:reduce){
  #homeHero .question-easter-egg{animation:none}
}

@media (min-width:1180px){
  #homeHero .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:34px;
  }
  #homeHero .display{
    max-width:none;
    font-size:clamp(3.55rem,4.65vw,4.25rem);
  }
  #homeHero .hero-title-line{
    white-space:nowrap;
  }
  #homeHero .narrow-break{
    display:none !important;
  }
}

@media (max-width:1179px){
  #homeHero .hero-title-line{
    white-space:normal;
  }
  #homeHero .narrow-break{
    display:inline;
  }
}

@media (max-width:767px){
  .cd-menu-btn{
    position:relative;
    z-index:calc(var(--z-mobile-menu) + 1);
  }
}

@media (max-width:767px){
  .cd-nav{
    z-index:calc(var(--z-mobile-menu) + 1);
  }
}

#homeHero{
  margin-top:-8px;
  padding-top:calc(clamp(2.7rem,4.8vw,4.6rem) + 8px);
  padding-bottom:clamp(2.9rem,5.3vw,4.9rem);
}

#homeHero .question-deck{
  min-height:408px;
  padding-top:20px;
  padding-bottom:14px;
}
#homeHero .question-game-head-minimal{
  margin-bottom:8px;
}

#recent.home-recent-section.history-about-language{
  padding-top:clamp(44px,5.2vw,64px);
  padding-bottom:clamp(50px,5.8vw,72px);
}
#recent .home-history-head{
  margin-bottom:19px;
}
#recent.home-recent-section.history-about-language .home-recent-grid{
  gap:11px;
}

.cd-footer-inner{
  padding-top:clamp(23px,2.6vw,34px);
  padding-bottom:clamp(18px,2vw,25px);
}

@media (max-width:900px){
  #homeHero{
    padding-top:calc(clamp(2.55rem,5.8vw,3.7rem) + 6px);
    padding-bottom:clamp(2.65rem,5.8vw,3.8rem);
  }
  #homeHero .question-deck{
    min-height:388px;
  }
}

@media (max-width:767px){
  #homeHero{
    margin-top:-4px;
    padding-top:calc(2.65rem + 4px);
    padding-bottom:2.85rem;
  }
  #homeHero .hero-visual{
    margin-top:26px;
  }
  #homeHero .question-deck{
    min-height:362px;
    padding-top:14px;
    padding-bottom:12px;
  }

  #recent.home-recent-section.history-about-language{
    padding-top:40px;
    padding-bottom:48px;
  }
  #recent .home-history-head{
    gap:13px;
    margin-bottom:16px;
  }
  #recent.home-recent-section.history-about-language .home-recent-grid{
    gap:8px;
  }

  .cd-footer-inner{
    row-gap:14px;
    padding-top:19px;
    padding-bottom:14px;
  }
}

@media (max-width:390px){
  
  #homeHero .question-deck{
    min-height:350px;
  }
}

#homeHero .question-deck{
  min-height:408px;
  padding-top:18px;
  padding-bottom:12px;
}

#homeHero .question-card{
  height:360px;
  min-height:360px;
  display:grid;
  grid-template-rows:14px minmax(0,1fr) 126px;
  overflow:hidden;
}

#homeHero .question-card-accent{
  height:auto;
  min-height:0;
}

#homeHero .question-card-face{
  min-height:0;
  height:auto;
  padding:18px 20px 14px;
  overflow:hidden;
}
#homeHero .question-card-face h2{
  margin:24px 62px 0 0;
  font-size:1.31rem;
  line-height:1.12;
}
#homeHero .question-card-hint{
  margin:13px 56px 0 0;
  font-size:.63rem;
  line-height:1.46;
}

#homeHero .question-answer,
#homeHero .question-answer.revealed{
  position:relative;
  height:126px;
  min-height:126px;
  max-height:126px;
  overflow:hidden;
  border-top:2px dashed var(--border-soft);
}

#homeHero .question-answer-copy{
  position:absolute;
  inset:0 0 34px 0;
  max-height:none;
  overflow:auto;
  padding:13px 19px 8px;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .18s ease,transform .2s var(--ease);
  scrollbar-width:thin;
}
#homeHero .question-answer-copy p{
  margin:6px 0 0;
  font-size:.75rem;
  line-height:1.43;
}

#homeHero .question-reveal-label,
#homeHero .question-answer.revealed .question-reveal-label{
  position:absolute;
  inset:0;
  min-height:0;
  height:auto;
  padding:0 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:0;
  transition:inset .2s var(--ease),background .2s ease;
}

#homeHero .question-answer.revealed .question-answer-copy{
  max-height:none;
  padding:13px 19px 8px;
  opacity:1;
  transform:none;
}
#homeHero .question-answer.revealed .question-reveal-label{
  inset:auto 0 0 0;
  height:34px;
  padding:0 19px;
  border-top:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--yellow) 17%,var(--surface-raised));
}

#homeHero .question-card.is-revealed .question-card-hint{
  opacity:.45;
}
#homeHero .question-card.is-revealed .question-card-mark{
  opacity:.48;
}

#homeHero .question-card-back{
  height:346px;
  min-height:346px;
  max-height:346px;
}

#homeHero .question-game-progress{
  margin-top:2px;
}

@media (max-width:900px){
  #homeHero .question-deck{
    min-height:392px;
  }
  #homeHero .question-card{
    height:350px;
    min-height:350px;
    grid-template-rows:14px minmax(0,1fr) 122px;
  }
  #homeHero .question-card-back{
    height:336px;
    min-height:336px;
    max-height:336px;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:122px;
    min-height:122px;
    max-height:122px;
  }
}

@media (max-width:767px){
  #homeHero .question-deck{
    min-height:366px;
    padding-top:12px;
  }
  #homeHero .question-card{
    height:326px;
    min-height:326px;
    grid-template-rows:13px minmax(0,1fr) 116px;
  }
  #homeHero .question-card-back{
    height:314px;
    min-height:314px;
    max-height:314px;
  }
  #homeHero .question-card-face{
    padding:15px 16px 12px;
  }
  #homeHero .question-card-face h2{
    margin:18px 55px 0 0;
    font-size:1.12rem;
    line-height:1.13;
  }
  #homeHero .question-card-hint{
    margin:10px 49px 0 0;
    font-size:.59rem;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:116px;
    min-height:116px;
    max-height:116px;
  }
  #homeHero .question-answer-copy,
  #homeHero .question-answer.revealed .question-answer-copy{
    inset:0 0 32px 0;
    padding:11px 16px 7px;
  }
  #homeHero .question-answer-copy p{
    font-size:.7rem;
    line-height:1.4;
  }
  #homeHero .question-reveal-label,
  #homeHero .question-answer.revealed .question-reveal-label{
    padding-inline:16px;
  }
  #homeHero .question-answer.revealed .question-reveal-label{
    height:32px;
  }
}

@media (max-width:390px){
  #homeHero .question-deck{
    min-height:354px;
  }
  #homeHero .question-card{
    height:318px;
    min-height:318px;
    grid-template-rows:13px minmax(0,1fr) 112px;
  }
  #homeHero .question-card-back{
    height:306px;
    min-height:306px;
    max-height:306px;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:112px;
    min-height:112px;
    max-height:112px;
  }
  #homeHero .question-card-face h2{
    font-size:1.04rem;
  }
  #homeHero .question-answer-copy p{
    font-size:.67rem;
  }
}

#homeHero .question-card{
  height:auto;
  min-height:372px;
  grid-template-rows:14px minmax(180px,1fr) auto;
}

#homeHero .question-card-back{
  height:calc(100% - 14px);
  min-height:358px;
  max-height:none;
}

#homeHero .question-card-face{
  padding:17px 20px 12px;
}
#homeHero .question-card-face h2{
  margin:20px 62px 0 0;
  font-size:1.27rem;
  line-height:1.11;
}
#homeHero .question-card-hint{
  margin:11px 56px 0 0;
  font-size:.75rem;
  line-height:1.45;
}

#homeHero .question-answer{min-height:146px;overflow:hidden}
#homeHero .question-answer.revealed{height:auto;min-height:176px;max-height:none;overflow:visible}

#homeHero .question-answer-copy{position:absolute;inset:0 0 44px 0;overflow:hidden;padding:12px 18px 7px}
#homeHero .question-answer.revealed .question-answer-copy{position:relative;inset:auto;overflow:visible;padding:14px 18px 8px}

#homeHero .question-answer-copy .mono{
  font-size:.75rem;
  letter-spacing:.045em;
}
#homeHero .question-answer-copy p{
  margin:5px 0 0;
  font-size:.875rem;
  line-height:1.36;
  font-weight:760;
  text-wrap:pretty;
}
#homeHero .question-card.answer-long .question-answer-copy p{
  font-size:.875rem;
  line-height:1.31;
  letter-spacing:-.006em;
}
#homeHero .question-card.answer-very-long .question-answer-copy p{
  font-size:.875rem;
  line-height:1.31;
  letter-spacing:-.009em;
}

#homeHero .question-reveal-label,
#homeHero .question-answer.revealed .question-reveal-label{
  padding-inline:18px;
}
#homeHero .question-answer.revealed .question-reveal-label{
  height:44px;
  min-height:44px;
}
#homeHero .question-reveal-label{
  font-size:.78rem;
}

#homeHero .question-card.is-revealed .question-card-hint{
  opacity:.28;
}
#homeHero .question-card.is-revealed .question-card-mark{
  opacity:.32;
}

#homeHero .question-deck{
  min-height:420px;
  padding-top:16px;
  padding-bottom:10px;
}

@media (max-width:900px){
  #homeHero .question-card{
    height:auto;
    min-height:360px;
    grid-template-rows:14px minmax(176px,1fr) auto;
  }
  #homeHero .question-card-back{
    height:346px;
    min-height:346px;
    max-height:346px;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:142px;
    min-height:142px;
    max-height:142px;
  }
  #homeHero .question-deck{
    min-height:404px;
  }
}

@media (max-width:767px){
  #homeHero .question-card{
    height:340px;
    min-height:340px;
    grid-template-rows:13px minmax(0,1fr) 138px;
  }
  #homeHero .question-card-back{
    height:328px;
    min-height:328px;
    max-height:328px;
  }
  #homeHero .question-card-face{
    padding:14px 16px 10px;
  }
  #homeHero .question-card-face h2{
    margin:15px 54px 0 0;
    font-size:1.08rem;
    line-height:1.11;
  }
  #homeHero .question-card-hint{
    margin:8px 48px 0 0;
    font-size:.64rem;
    line-height:1.38;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:138px;
    min-height:138px;
    max-height:138px;
  }
  #homeHero .question-answer-copy,
  #homeHero .question-answer.revealed .question-answer-copy{
    inset:0 0 30px 0;
    padding:10px 15px 6px;
  }
  #homeHero .question-answer-copy p{
    font-size:.665rem;
    line-height:1.31;
  }
  #homeHero .question-card.answer-long .question-answer-copy p{
    font-size:.625rem;
    line-height:1.27;
  }
  #homeHero .question-card.answer-very-long .question-answer-copy p{
    font-size:.63rem;
    line-height:1.24;
  }
  #homeHero .question-answer.revealed .question-reveal-label{
    height:36px;
    min-height:36px;
  }
  #homeHero .question-deck{
    min-height:378px;
  }
}

@media (max-width:390px){
  #homeHero .question-card{
    height:334px;
    min-height:334px;
    grid-template-rows:13px minmax(0,1fr) 136px;
  }
  #homeHero .question-card-back{
    height:322px;
    min-height:322px;
    max-height:322px;
  }
  #homeHero .question-answer,
  #homeHero .question-answer.revealed{
    height:136px;
    min-height:136px;
    max-height:136px;
  }
  #homeHero .question-card-face h2{
    font-size:1rem;
  }
  #homeHero .question-answer-copy p{
    font-size:.64rem;
    line-height:1.28;
  }
  #homeHero .question-card.answer-long .question-answer-copy p{
    font-size:.60rem;
    line-height:1.24;
  }
  #homeHero .question-card.answer-very-long .question-answer-copy p{
    font-size:.62rem;
    line-height:1.22;
  }
  #homeHero .question-deck{
    min-height:370px;
  }
}

#homeHero .question-reveal-label {
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
#homeHero .question-reveal-label:focus-visible { outline:none; }
#homeHero .question-card:focus-within { outline:3px solid var(--focus); outline-offset:4px; }
#homeHero .question-card { cursor:default; }

@media  (hover: hover) and (pointer: fine){
.home-history-clear:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 #111;
}
.home-recent-section.history-about-language .home-recent-card:hover{
  transform:translate(-2px,-3px) rotate(0);
  box-shadow:7px 7px 0 var(--shadow-color);
}

#homeHero .hero-provider-switch:hover{
  transform:translateY(-1px);
  box-shadow:none;
  opacity:.82;
}
#homeHero .hero-provider-switch:hover{
  transform:translateY(-1px);
  box-shadow:none;
  opacity:.84;
}
.question-card:hover{
  transform:translate(-2px,-2px) rotate(-.25deg);
  box-shadow:9px 9px 0 var(--shadow-color);
}
#homeHero .question-card:hover{
  transform:translate(-3px,-3px) rotate(-.3deg);
  box-shadow:13px 13px 0 var(--shadow-color);
}
.question-card:hover{
  transform:translate(-2px,-2px) rotate(-.18deg);
  box-shadow:
    10px 10px 0 var(--shadow-color),
    0 20px 36px color-mix(in srgb,var(--shadow-color) 14%,transparent);
}
.question-card-next:hover{
  transform:translateY(calc(-50% - 2px));
  box-shadow:6px 6px 0 #111;
}
#homeHero .question-card:hover{
  transform:translate(-2px,-2px) rotate(-.15deg);
  box-shadow:
    11px 11px 0 var(--shadow-color),
    0 22px 40px color-mix(in srgb,var(--shadow-color) 15%,transparent);
}
#homeHero .question-card-next:hover{
  transform:translateY(calc(-50% - 2px));
}
#homeHero .question-card-next:hover{
  transform:translateY(calc(-50% - 1px));
  box-shadow:3px 3px 0 #111;
  opacity:1;
}
#homeHero .question-card-next:hover{
  opacity:1;
  transform:translateY(calc(-50% - 1px));
  box-shadow:3px 3px 0 #111;
}
}
@media  (max-width:767px) and (hover: hover) and (pointer: fine){
  .home-recent-section.history-about-language .home-recent-card:hover{
    transform:translate(-1px,-2px);
    box-shadow:5px 5px 0 var(--shadow-color);
  }
  
}
@media  (max-width: 560px) and (hover: hover) and (pointer: fine){
  .question-card-next:hover{
    transform:translate(-1px,-1px);
    box-shadow:4px 4px 0 #111;
  }
}
@media  (max-width:560px) and (hover: hover) and (pointer: fine){
  #homeHero .question-card-next:hover{
    transform:translate(-1px,-1px);
  }
  #homeHero .question-card-next:hover{
    transform:translateY(calc(-50% - 1px));
  }
}

@media (max-width:599px){#homeHero .hero-click-note{display:none}.home-recent-empty{padding:16px}.home-recent-empty .btn{width:100%}body.page-home::before{height:138px}}

.home-recent-section.is-empty{padding-top:clamp(44px,5vw,62px);padding-bottom:clamp(48px,6vw,72px)}
.home-recent-section.is-empty .home-history-principle{margin-top:0;padding:17px 20px}
.home-recent-section.is-empty .home-recent-empty{margin-top:12px}
@media (max-width:599px){.home-recent-section.is-empty{padding-top:40px;padding-bottom:48px}.home-recent-section.is-empty .home-history-principle{padding:15px 16px}}

@media (max-width:767px){#homeHero .hero-provider-switch{min-height:44px}#homeHero .question-card-next{width:44px;height:44px;min-width:44px;min-height:44px}#homeHero .question-card-hint{font-size:.75rem}#homeHero .question-answer-copy .mono{font-size:.75rem}#homeHero .question-answer-copy p{font-size:.875rem;line-height:1.45}#homeHero .question-card.answer-long .question-answer-copy p{font-size:.875rem;line-height:1.45}#homeHero .question-card.answer-very-long .question-answer-copy p{font-size:.875rem;line-height:1.45}#homeHero .question-reveal-label{font-size:.78rem}}

@media(max-width:767px){#homeHero .question-card{height:auto;min-height:340px;grid-template-rows:13px minmax(180px,1fr) auto}#homeHero .question-card-back{height:calc(100% - 12px);min-height:328px;max-height:none}#homeHero .question-answer,#homeHero .question-answer.revealed{height:auto;max-height:none;min-height:138px}#homeHero .question-answer-copy,#homeHero .question-answer.revealed .question-answer-copy{inset:auto;position:relative;padding:12px 15px 8px;overflow:visible}#homeHero .question-answer-copy p,#homeHero .question-card.answer-long .question-answer-copy p,#homeHero .question-card.answer-very-long .question-answer-copy p{font-size:.875rem;line-height:1.45;letter-spacing:0}#homeHero .question-answer.revealed .question-reveal-label,#homeHero .question-reveal-label{min-height:44px;height:44px;font-size:.78rem}#homeHero .question-deck{min-height:390px}.question-game-count{font-size:.78rem}}
@media(max-width:390px){#homeHero .question-card{min-height:350px}#homeHero .question-deck{min-height:400px}}
@media(prefers-reduced-motion:reduce){#homeHero .question-card,#homeHero .question-answer,#homeHero .question-answer-copy,#homeHero .question-card-next,.question-card-back{transition:none!important;animation:none!important;transform:none!important}}