/* System fonts keep the game quick, private and usable offline after loading. */
:root{
  color-scheme:light;
  --paper:#f6f2e9;
  --ink:#173e34;
  --muted:#5d685d;
  --orange:#ec985f;
  --line:#dcded1;
  --white:#fffcf5;
  --yellow:#e7d584;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}

*{
  box-sizing:border-box
}
body{
  margin:0
}
button,input{
  font:inherit
}
button,a,input{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled{
  cursor:default
}
a{
  color:inherit
}
button,input,a,summary{
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid #b84c24;
  outline-offset:5px
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:normal
}
h1{
  letter-spacing:-.055em
}
h2{
  letter-spacing:-.035em
}
p{
  line-height:1.65
}
button{
  min-height:48px
}
input{
  min-height:50px
}
::selection{
  background:var(--yellow);
  color:var(--ink)
}
.site-shell{
  max-width:1280px;
  margin:auto;
  padding:0 52px
}
.masthead{
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px
}
.masthead a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  min-height:48px
}
.brand-mark{
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--paper);
  width:39px;
  height:39px;
  border-radius:50%;
  font-size:19px;
  letter-spacing:-3px;
  padding-right:3px
}
.edition{
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted)
}
footer{
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:54px;
  padding:25px 0;
  font-size:11px;
  color:var(--muted)
}
.home-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:55px 75px;
  padding-top:58px
}
.eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
  display:flex;
  align-items:center;
  gap:9px
}
.tiny-sun{
  font-size:22px;
  color:#ad4f2b
}
.intro h1{
  font-size:clamp(50px,5.7vw,76px);
  line-height:1.03;
  margin:24px 0
}
.intro h1 em{
  color:#a54f2e;
  font-weight:normal
}
.lede{
  font-size:15px;
  color:var(--muted);
  max-width:395px;
  line-height:1.8
}
.word-stickers{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:32px 0 39px
}
.word-stickers span{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:18px;
  background:var(--yellow);
  padding:12px 17px;
  border:1px solid #c8b86d;
  transform:rotate(-5deg)
}
.word-stickers span:nth-child(2){
  background:#e1e7d8;
  border-color:#bccab3;
  transform:rotate(5deg)
}
.word-stickers span:nth-child(3){
  background:#f2c3a1;
  border-color:#daab8b;
  transform:rotate(-3deg)
}
.home-records{
  display:flex;
  gap:34px
}
.home-records div,.completion-stats div{
  display:flex;
  flex-direction:column;
  gap:8px
}
.home-records strong{
  font-size:24px;
  font-weight:500
}
.home-records span{
  font-size:11px;
  color:var(--muted)
}
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:7px;
  box-shadow:0 7px 0 -3px #e8e6da
}
.setup{
  padding:30px
}
.card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.card-heading>span:last-child{
  font-size:28px
}
.setup h2{
  font-size:39px;
  margin:12px 0 6px
}
.muted{
  color:var(--muted);
  font-size:14px
}
.lengths{
  padding:0;
  border:0;
  margin:25px 0 22px;
  display:grid;
  gap:8px
}
.lengths legend{
  font-size:12px;
  font-weight:bold;
  margin-bottom:12px
}
.length-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:13px 15px;
  cursor:pointer;
  min-height:74px;
  position:relative
}
.length-option:has(input:checked){
  background:#eef1e6;
  border-color:var(--ink)
}
.length-option:has(input:focus-visible){
  outline:3px solid #b84c24;
  outline-offset:3px
}
.length-option input{
  position:absolute;
  opacity:0;
  width:1px;
  min-height:0;
  height:1px
}
.radio-dot{
  width:16px;
  height:16px;
  border:1px solid #90988b;
  border-radius:50%;
  flex-shrink:0
}
.length-option input:checked+.radio-dot{
  border:5px solid var(--ink)
}
.length-option strong{
  display:block;
  font-size:13px
}
.length-option small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:6px
}
.question-count{
  margin-left:auto;
  text-align:right;
  font-size:23px;
  line-height:1
}
.adult-toggle{
  border-top:1px solid var(--line);
  padding:19px 0;
  display:flex;
  gap:12px;
  align-items:center;
  cursor:pointer;
  position:relative
}
.adult-toggle strong{
  font-size:13px;
  display:block
}
.adult-toggle strong span{
  color:#a54f2e
}
.adult-toggle small{
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:7px;
  line-height:1.5
}
.adult-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  min-height:0;
  height:1px
}
.switch{
  width:40px;
  height:23px;
  border-radius:20px;
  background:#d5d9ce;
  position:relative;
  margin-left:auto;
  flex-shrink:0
}
.switch:before{
  content:'';
  position:absolute;
  width:17px;
  height:17px;
  background:white;
  border-radius:50%;
  left:3px;
  top:3px;
  transition:transform .15s
}
.adult-toggle input:checked+.switch{
  background:var(--ink)
}
.adult-toggle input:checked+.switch:before{
  transform:translateX(17px)
}
.adult-toggle:has(input:focus-visible) .switch{
  outline:3px solid #b84c24;
  outline-offset:4px
}
.primary,.secondary,.aussie-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:16px;
  border-radius:4px;
  padding:17px 19px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--ink)
}
.primary{
  color:var(--white);
  background:var(--ink);
  min-height:56px;
  transition:background .15s,transform .15s
}
.primary:hover{
  background:#245748
}
.primary:active{
  transform:translateY(1px)
}
.primary span{
  font-size:21px
}
.secondary{
  background:transparent;
  color:var(--ink);
  justify-content:center
}
.secondary:hover{
  background:#eeeee4
}
.setup-foot{
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin:13px 0 0
}
.personal-best{
  font-size:12px;
  text-align:center;
  color:var(--muted);
  margin:16px 0 0
}
.how-to{
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:27px
}
.how-to h2{
  font-size:24px;
  margin-bottom:24px
}
.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.how-grid>div{
  position:relative;
  padding-left:45px
}
.step-number{
  position:absolute;
  left:0;
  top:0;
  border:1px solid #bdc6b7;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:10px
}
.how-grid h3{
  font-size:13px;
  margin:2px 0 9px
}
.how-grid p{
  font-size:12px;
  color:var(--muted);
  margin-bottom:0
}
.how-grid strong{
  color:var(--ink);
  font-weight:500
}
.source-note{
  grid-column:1/-1;
  font-size:12px;
  color:var(--muted);
  margin-top:-28px
}
.source-note summary{
  cursor:pointer;
  padding:10px 0;
  min-height:44px
}
.source-note p{
  max-width:900px
}
.play-layout{
  max-width:1050px;
  margin:auto;
  padding-top:30px
}
.game-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:21px
}
.game-top>span{
  font-size:10px;
  letter-spacing:1.3px;
  color:var(--muted)
}
.text-button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  padding:12px 8px;
  text-decoration:underline;
  text-underline-offset:4px;
  width:100%;
  margin-top:10px
}
.text-button:hover{
  color:var(--ink)
}
.back-button{
  width:auto;
  padding-left:0;
  text-decoration:none;
  margin:0
}
.scoreboard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0 19px;
  border-top:1px solid var(--line);
  gap:12px
}
.scoreboard>div{
  display:flex;
  flex-direction:column;
  gap:7px
}
.scoreboard>div:last-child{
  text-align:right
}
.scoreboard span{
  font-size:9px;
  letter-spacing:1.6px;
  color:var(--muted)
}
.scoreboard strong{
  font-size:25px;
  font-weight:500
}
.scoreboard small{
  font-size:12px;
  color:var(--muted);
  font-weight:normal
}
progress{
  appearance:none;
  border:0;
  width:100%;
  height:4px;
  background:#dedfd2;
  display:block;
  border-radius:2px;
  overflow:hidden
}
progress::-webkit-progress-bar{
  background:#dedfd2
}
progress::-webkit-progress-value{
  background:#a54f2e
}
progress::-moz-progress-bar{
  background:#a54f2e
}
.round-grid{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:28px;
  margin-top:30px;
  align-items:stretch
}
.term-card{
  background:var(--ink);
  border-radius:7px;
  color:var(--paper);
  padding:30px;
  display:flex;
  flex-direction:column;
  min-height:390px;
  position:relative;
  overflow:hidden
}
.term-card:after{
  content:'';
  position:absolute;
  right:-65px;
  bottom:42px;
  width:180px;
  height:180px;
  border:1px solid #426358;
  border-radius:50%;
  pointer-events:none
}
.term-card .eyebrow{
  color:#c8d3b6;
  font-size:9px
}
.term-card h1{
  font-size:clamp(39px,4.7vw,65px);
  line-height:1.1;
  overflow-wrap:anywhere;
  margin:45px 0;
  position:relative;
  z-index:1
}
.term-card h1:focus,.answer-card h2:focus,.completion h1:focus{
  outline:none
}
.term-bottom{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  z-index:1
}
.term-bottom>span:first-child{
  font-family:Georgia,serif;
  font-size:15px;
  font-style:italic;
  color:#ced6bf
}
.term-bottom>span:last-child{
  font-size:46px;
  color:var(--orange)
}
.answer-card{
  padding:30px;
  animation:arrive .18s ease-out
}
.stage-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:28px
}
.stage-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:1.25px
}
.points-label{
  font-size:10px;
  color:var(--muted)
}
.answer-card h2{
  font-size:29px;
  line-height:1.2;
  margin-bottom:23px
}
.answer-card form label{
  font-size:12px;
  font-weight:700;
  display:block;
  margin-bottom:10px
}
.answer-card input{
  width:100%;
  border:1px solid #abb6a3;
  background:#fffef9;
  border-radius:4px;
  padding:15px;
  font-size:16px;
  color:var(--ink)
}
.input-note{
  font-size:11px;
  color:var(--muted);
  margin:10px 0 23px
}
.feedback{
  font-size:12px;
  color:#96502f;
  margin:-10px 0 13px
}
.choices{
  display:grid;
  gap:10px
}
.choice{
  display:flex;
  align-items:center;
  text-align:left;
  width:100%;
  border:1px solid var(--line);
  background:#fffef9;
  padding:14px 13px;
  border-radius:4px;
  gap:13px;
  color:var(--ink);
  font-size:13px;
  line-height:1.4
}
.choice>span:last-child{
  margin-left:auto;
  color:var(--muted)
}
.choice:hover{
  border-color:var(--ink);
  background:#eef1e6
}
.choice-letter{
  font-size:10px;
  border:1px solid var(--line);
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.aussie-button{
  background:var(--yellow);
  border-color:#c8b86d;
  margin:22px 0 12px
}
.ask-note{
  padding:17px;
  background:#eef1e6;
  border-radius:4px;
  margin-bottom:15px;
  font-size:12px
}
.ask-note p{
  margin:8px 0 15px
}
.ask-note .primary{
  font-size:12px
}
.earned{
  background:#e9e8df;
  color:var(--muted);
  font-size:12px;
  padding:7px 12px;
  border-radius:30px
}
.earned.positive{
  background:#e1ebd4;
  color:var(--ink)
}
.reaction{
  color:#96502f;
  font-size:13px;
  margin:-7px 0 10px
}
.answer-card .meaning{
  font-size:30px;
  margin-bottom:20px
}
blockquote{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:19px;
  line-height:1.5;
  margin:0 0 20px;
  padding-left:17px;
  border-left:3px solid var(--orange)
}
.reveal-note{
  font-size:13px;
  color:var(--muted)
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:22px 0
}
.pill{
  border:1px solid var(--line);
  border-radius:3px;
  font-size:10px;
  padding:6px 8px;
  color:var(--muted)
}
.streak-celebration{
  font-size:12px;
  color:#785422
}
.round-foot{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  margin-top:25px
}
.quit-confirm{
  border:1px solid #d4af89;
  background:#fff3e4;
  border-radius:4px;
  padding:15px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-bottom:20px
}
.quit-confirm p{
  flex:1 1 100%;
  margin:0;
  font-size:13px
}
.quit-confirm button{
  flex:1;
  width:auto;
  padding:10px
}
.completion{
  max-width:620px;
  margin:45px auto 0;
  padding:36px;
  text-align:center
}
.completion .eyebrow{
  justify-content:center
}
.completion-sun{
  font-size:60px;
  color:#ad5732;
  margin:15px 0
}
.completion h1{
  font-size:45px;
  line-height:1.08;
  margin-bottom:18px
}
.final-score{
  margin:22px 0 28px
}
.final-score strong{
  font-family:Georgia,serif;
  font-size:76px;
  font-weight:normal;
  letter-spacing:-4px
}
.final-score span{
  font-size:15px;
  color:var(--muted)
}
.completion-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0
}
.completion-stats strong{
  font-size:27px;
  font-weight:500
}
.completion-stats span{
  font-size:10px;
  color:var(--muted)
}
.completion .primary{
  margin-top:28px
}
.storage-warning{
  background:#fff0dc;
  border:1px solid #caa070;
  padding:14px;
  font-size:12px;
  border-radius:4px;
  margin-top:20px
}
@keyframes arrive{
  from{
  opacity:.5;
  transform:translateY(4px)
}
to{
  opacity:1;
  transform:translateY(0)
}

}

@media(min-width:1400px){
  .site-shell{
  max-width:1340px
}
.home-layout{
  padding-top:72px;
  gap:65px 110px
}
.intro h1{
  font-size:82px
}
.setup{
  padding:34px
}

}

@media(max-width:900px){
  .site-shell{
  padding:0 28px
}
.home-layout{
  gap:40px 30px
}
.intro h1{
  font-size:56px
}
.setup{
  padding:23px
}
.word-stickers span{
  font-size:15px;
  padding:10px
}
.home-records{
  gap:23px
}
.how-grid{
  gap:20px
}
.how-grid>div{
  padding-left:0;
  padding-top:42px
}
.round-grid{
  gap:18px
}
.answer-card,.term-card{
  padding:24px
}
.term-card h1{
  font-size:46px
}
.stage-heading{
  gap:8px
}
.edition{
  font-size:8px
}

}

@media(max-width:650px){
  .site-shell{
  padding:0 20px
}
.masthead{
  height:77px
}
.masthead a{
  font-size:10px;
  letter-spacing:1px;
  gap:9px
}
.brand-mark{
  width:32px;
  height:32px;
  font-size:16px
}
.edition{
  display:none
}
.home-layout{
  grid-template-columns:1fr;
  padding-top:32px;
  gap:30px
}
.intro h1{
  font-size:55px;
  margin:20px 0
}
.intro h1 br:nth-child(2){
  display:none
}
.intro h1 em{
  display:block
}
.lede{
  font-size:14px;
  max-width:460px;
  margin-bottom:20px
}
.word-stickers{
  margin:22px 0 27px;
  gap:10px
}
.home-records{
  gap:36px
}
.home-records strong{
  font-size:21px
}
.setup{
  padding:23px
}
.setup h2{
  font-size:36px
}
.how-to{
  padding-top:24px
}
.how-grid{
  grid-template-columns:1fr;
  gap:22px
}
.how-grid>div{
  padding:0 0 0 45px
}
.how-grid p br{
  display:none
}
.how-to h2{
  font-size:25px
}
.source-note{
  margin-top:-12px
}
footer{
  margin-top:30px;
  font-size:10px;
  flex-wrap:wrap
}
.play-layout{
  padding-top:13px
}
.game-top{
  margin-bottom:5px
}
.scoreboard{
  padding:14px 0
}
.scoreboard strong{
  font-size:23px
}
.scoreboard small{
  font-size:10px
}
.round-grid{
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px
}
.term-card{
  min-height:205px;
  padding:23px
}
.term-card h1{
  font-size:42px;
  margin:23px 0
}
.term-bottom>span:first-child{
  font-size:13px
}
.term-bottom>span:last-child{
  font-size:32px
}
.term-card:after{
  width:145px;
  height:145px;
  bottom:-55px;
  right:-35px
}
.answer-card{
  padding:23px
}
.stage-heading{
  margin-bottom:22px
}
.answer-card h2{
  font-size:27px;
  margin-bottom:20px
}
.completion{
  margin-top:25px;
  padding:28px 22px
}
.completion h1{
  font-size:39px
}
.completion-stats{
  grid-template-columns:repeat(2,1fr);
  gap:25px
}
.round-foot{
  margin-top:19px
}
.length-option{
  min-height:77px
}
.choice{
  min-height:58px
}
.home-layout>.intro .eyebrow{
  font-size:9px
}

}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}


@media(max-width:650px){
  .home-layout{
  padding-top:25px;
  gap:23px
}
.intro h1{
  font-size:43px;
  margin:16px 0
}
.intro .lede{
  margin-bottom:0;
  line-height:1.6
}
.home-layout .word-stickers,.home-layout .home-records{
  display:none
}
.setup .lengths{
  margin-top:19px;
  gap:7px
}
.setup .length-option{
  min-height:65px;
  padding:10px 13px
}
.setup .adult-toggle{
  padding:16px 0
}
.setup{
  padding:20px
}
.setup h2{
  font-size:32px
}
.setup .muted{
  margin-bottom:0
}

}