:root{
  --paper:#FFFFFF;
  --wash:#F5F7FF;
  --ink:#16161D;
  --ink-2:#474956;
  --rule:#DADDE6;
  --line:#6B7080;
  --cobalt:#1D3BB8;
  --cobalt-deep:#132A8C;
  --label:#FFD23F;
  --right:#1B7F3B;
  --wrong:#C8322B;
  --radius:14px;
  --gutter:1rem;
  --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;background:var(--paper);scrollbar-color:var(--line) var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.25rem;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;caret-color:var(--cobalt)}
::selection{background:var(--label);color:var(--ink)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:12px}
main:focus{outline:none}
a{color:var(--cobalt);text-decoration-thickness:2px;text-underline-offset:.2em}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:.6rem 1rem;font-weight:700;z-index:30}
.skip:focus{top:1rem}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead .wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:'logo signin' 'nav nav';align-items:center;gap:.25rem 1rem;min-height:4.25rem;padding-top:.35rem;padding-bottom:.35rem}
.wordmark{grid-area:logo}
.signin-link{grid-area:signin;white-space:nowrap;display:flex;align-items:center;min-height:3rem;padding:0 1rem;border:2px solid var(--line);border-radius:12px;font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none}
.signin-link[aria-current="page"]{background:var(--label);border-color:var(--ink)}
.wordmark{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font-size:1.5rem;letter-spacing:-.03em;line-height:1;min-height:3rem}
.wordmark b{font-weight:800}
.wordmark span{font-weight:600}
.wordmark svg{width:2.1rem;height:2.1rem;flex:none}
.nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:0 .1rem;margin-left:-.6rem}
.nav a{display:flex;align-items:center;min-height:3rem;padding:0 .6rem;font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none;border-radius:12px}
.nav a[aria-current="page"]{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.45em}
@media (hover:hover){.nav a:hover,.signin-link:hover{background:#F3F5FA}}
@media (max-width:24em){.wordmark{font-size:1.25rem}.wordmark svg{width:1.8rem;height:1.8rem}.nav a{padding:0 .45rem;font-size:1.0625rem}.signin-link{padding:0 .7rem;font-size:1.0625rem}}

main{display:block;padding-bottom:3rem;min-height:60vh}

/* ---------- page heads ---------- */
.intro{color:var(--ink-2);font-size:1.125rem;padding-top:1.25rem}
.dayhead{padding-top:1.25rem;display:grid;gap:.35rem}
.dayhead h1{font-size:2rem;font-weight:800}
.dayhead .aside{font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.dayhead a{font-size:1.0625rem;font-weight:600;justify-self:start}
.pagehead{padding-top:1.5rem;display:grid;gap:.4rem}
.pagehead h1{font-size:2rem;font-weight:800}
.pagehead p{color:var(--ink-2);font-size:1.125rem}

/* ---------- round buttons (stick to the top while scrolling) ---------- */
.sides{position:sticky;top:0;z-index:5;background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.75rem 0;margin-top:1rem}
.sides.is-stuck{box-shadow:0 8px 12px -10px rgba(22,22,29,.35)}
.side-btn{min-height:3.9rem;border:2px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:.35rem .5rem}
.side-btn strong{font-size:1.125rem;font-weight:800}
.side-btn span{font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.side-btn[aria-pressed="true"]{background:var(--label);border-color:var(--ink)}
.side-btn[aria-pressed="true"] span{color:var(--ink)}

/* ---------- tracklist ---------- */
.tracks{list-style:none;margin:0;padding:0}
.track{display:grid;grid-template-columns:4.25rem 1fr 1fr;gap:.5rem;align-items:center;padding:.7rem .45rem;border-bottom:1px solid var(--rule);border-radius:12px;transition:background-color .3s}
.track.is-next{outline:3px solid var(--cobalt);outline-offset:-3px;background:var(--wash)}
.qno{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.qno .n{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.qno .pts{font-size:1.0625rem;font-weight:600;color:var(--ink-2);line-height:1.15}
.qno .bonus{font-size:1.0625rem;font-weight:800;background:var(--label);color:var(--ink);padding:0 .35rem;border-radius:6px;line-height:1.35}
.tap.right{margin-right:.25rem}
.tap.wrong{margin-left:.25rem} /* with the row gap: 1rem between Right and Wrong, keys the same width */

.tap{min-height:3.6rem;border-radius:var(--radius);border:2px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;gap:.4rem;font-weight:800;font-size:1.25rem;padding:.4rem .5rem;
  box-shadow:inset 0 -4px 0 rgba(22,22,29,.10),0 2px 4px rgba(22,22,29,.12);transition:transform .08s,box-shadow .08s,background-color .15s,color .15s;touch-action:manipulation}
.tap svg{width:1.45rem;height:1.45rem;flex:none}
.tap.right svg{color:var(--right)}
.tap.wrong svg{color:var(--wrong)}
.tap:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(22,22,29,.10),0 1px 2px rgba(22,22,29,.12)}
.tap.right[aria-pressed="true"]{background:var(--right);border-color:var(--right);color:#fff}
.tap.wrong[aria-pressed="true"]{background:var(--wrong);border-color:var(--wrong);color:#fff}
.tap[aria-pressed="true"]{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.22),0 1px 2px rgba(22,22,29,.18)} /* a chosen answer stays pressed in */
.tap[aria-pressed="true"] svg{color:#fff}
@media (hover:hover){.tap:hover,.btn-plain:hover,.side-btn:hover{border-color:var(--ink)}}
@media (max-width:23em){.tap{flex-direction:column;gap:.1rem;font-size:1.0625rem}}

/* ---------- buttons ---------- */
.round-end{padding:1.5rem 0 .5rem;display:grid;gap:1rem}
.round-end .total{display:block;font-size:1.5rem;font-weight:800}
.round-end .total:empty{display:none}
.round-end .left{display:block;font-size:1.0625rem;color:var(--ink-2);font-weight:600}
.btn{min-height:3.75rem;border-radius:var(--radius);font-weight:800;font-size:1.25rem;padding:.6rem 1.25rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;transition:transform .08s,box-shadow .08s;touch-action:manipulation}
.btn:active{transform:translateY(2px)}
.btn-main{background:var(--cobalt);color:#fff;border:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 4px 10px rgba(19,42,140,.25)}
@media (hover:hover){.btn-main:hover{background:var(--cobalt-deep)}}
.btn-plain{background:var(--paper);color:var(--ink);border:2px solid var(--line);box-shadow:inset 0 -4px 0 rgba(22,22,29,.08),0 2px 4px rgba(22,22,29,.10)}
.btn svg{width:1.4rem;height:1.4rem;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

.notice{margin-top:2rem;border:2px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.25rem;display:grid;gap:.5rem;font-size:1.125rem}
.notice h2{font-size:1.25rem;font-weight:800}
.notice p{color:var(--ink-2)}
.notice.warn{border-color:var(--wrong)}
.notice.warn p{color:var(--ink)}
.soon{margin-top:.6rem;font-size:1.0625rem;font-weight:600;color:var(--ink)}

/* ---------- result ---------- */
.block{margin-top:2.5rem;display:grid;gap:1rem}
.block h2{font-size:1.5rem;font-weight:800}
.block.near{margin-top:1.25rem}
.block .sub{color:var(--ink-2);font-size:1.125rem;margin-top:-.5rem}
.share-btns{display:grid;gap:.75rem}
.post{border:1px solid var(--rule);border-radius:var(--radius);padding:1rem;display:grid;gap:.85rem;background:#FAFBFD}
.post .said{font-size:1.125rem}
.post .said-fb{font-size:1.0625rem;color:var(--ink-2)}
.post .said b{display:block;font-size:1.0625rem;color:var(--ink-2);font-weight:700;margin-bottom:.2rem}
/* the day's scores, said plainly */
.tally{margin:1.5rem 0 0;border-top:1px solid var(--rule)}
.tally div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.tally dt{font-size:1.5rem;font-weight:700}
.tally dd{margin:0;font-size:2.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.tally small{font-size:1.0625rem;font-weight:600;color:var(--ink-2);letter-spacing:0}
.tally b{font-weight:800;background:linear-gradient(transparent 62%,var(--label) 62% 92%,transparent 92%);padding:0 .1em}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:26rem}

/* the picture X and Facebook show under the post */
.card{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--rule)}

/* a shared day: ticks and crosses, never the questions themselves */
.marks{margin-top:1.5rem;display:grid;gap:1rem}
.markrow p{font-size:1.125rem;font-weight:700;margin-bottom:.4rem}
.markrow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem;max-width:30rem}
.markrow li{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;color:#fff}
.markrow li svg{width:62%;height:62%}
.markrow li.r{background:var(--right)}
.markrow li.w{background:var(--wrong)}

/* ---------- my scores and choose a day ---------- */
.says{list-style:none;margin:1.25rem 0 0;padding:0}
.says li{font-size:1.5rem;line-height:1.35;padding:1rem 0;border-bottom:1px solid var(--rule)}
.says li:first-child{border-top:1px solid var(--rule)}
.says b{font-weight:800;font-size:2rem;letter-spacing:-.02em;background:linear-gradient(transparent 62%,var(--label) 62% 92%,transparent 92%);padding:0 .1em}
.days{list-style:none;margin:.75rem 0 0;padding:0}
.dayrow{display:grid;grid-template-columns:3.25rem 1fr auto;gap:.9rem;align-items:center;padding:.8rem .5rem;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;border-radius:12px;min-height:4.5rem}
a.dayrow{transition:background-color .15s}
@media (hover:hover){a.dayrow:hover{background:var(--wash)}}
a.dayrow .go{color:var(--cobalt)}
.minidisc{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--label);display:grid;place-items:center;font-weight:800;font-size:1.0625rem;box-shadow:inset 0 0 0 5px var(--label),inset 0 0 0 6px rgba(22,22,29,.45)}
.minidisc.off{background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule);color:var(--ink-2)}
.dayrow .when{font-weight:700;font-size:1.125rem;line-height:1.25}
.dayrow .when small{display:block;font-weight:600;font-size:1.0625rem;color:var(--ink-2)}
.dayrow .sc{font-weight:800;font-size:1.25rem;text-align:right}
.dayrow .sc.muted{font-weight:600;font-size:1.0625rem;color:var(--ink-2)}
.fine{color:var(--ink-2);font-size:1.0625rem;margin-top:.9rem}
.more{margin-top:1rem}

/* ---------- signing in and the account ---------- */
.form{display:grid;gap:.6rem;margin-top:1.5rem;max-width:30rem}
.form label{font-size:1.125rem;font-weight:700}
.form input{font:inherit;font-size:1.25rem;color:var(--ink);background:var(--paper);min-height:3.6rem;padding:.6rem .9rem;border:2px solid var(--line);border-radius:var(--radius);width:100%}
.form input:focus{outline:3px solid var(--cobalt);outline-offset:2px;border-color:var(--cobalt)}
.form input[aria-invalid="true"]{border-color:var(--wrong)}
.form .code-input{font-size:2rem;font-weight:800;letter-spacing:.35em;max-width:12rem;text-align:center;padding-left:1.2rem}
.form .btn{margin-top:.4rem;justify-self:start}
.form .btn:disabled{opacity:.7;cursor:progress}
.error{color:var(--wrong);font-weight:700;font-size:1.0625rem}
.error:empty{display:none}
.sent{margin-top:1rem;font-weight:600;font-size:1.0625rem}
.sent:empty{display:none}
.linkbtn{background:none;border:0;padding:.6rem 0;min-height:3rem;color:var(--cobalt);font-weight:700;font-size:1.125rem;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.linkbtn.danger{color:var(--wrong)}
.btn-danger{background:var(--wrong);color:#fff;border:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),0 2px 4px rgba(22,22,29,.18)}
.btn-danger:disabled{opacity:.7}
.confirm{border:2px solid var(--wrong);border-radius:var(--radius);padding:1rem 1.1rem;display:grid;gap:.75rem}
.block p{font-size:1.125rem}
.flash{background:var(--label);color:var(--ink);font-weight:700;font-size:1.125rem;border-radius:var(--radius);padding:.9rem 1.1rem;margin-top:1.25rem}
.prose h2{font-size:1.5rem;font-weight:800;margin-top:1.75rem}
.prose p{margin-top:.6rem;font-size:1.125rem}
.notice .btn{justify-self:start;margin-top:.25rem}

/* ---------- beat the contestant and all my stats ---------- */
.beat{display:grid;gap:.6rem}
.beat-q{font-size:1.25rem;font-weight:700}
.beat-q span{font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.more-stats{margin-top:1.25rem}
.statlist{margin:0;border-top:1px solid var(--rule)}
.statlist div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.statlist dt{font-size:1.125rem;font-weight:700;line-height:1.3}
.statlist dt small{display:block;font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.statlist dd{margin:0;font-size:1.5rem;font-weight:800;text-align:right;white-space:nowrap}

/* ---------- leaderboards ---------- */
.board-tabs{position:static;margin-top:1.25rem}
.standing{font-size:1.5rem;line-height:1.35;margin-top:1.25rem}
.standing b{font-weight:800;font-size:2rem;background:linear-gradient(transparent 62%,var(--label) 62% 92%,transparent 92%);padding:0 .1em}
.standing + .btn-row,.standing + .fine{margin-top:.75rem}
.board{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--rule)}
.board li{display:grid;grid-template-columns:2.75rem 1fr auto;gap:.75rem;align-items:center;padding:.75rem .5rem;border-bottom:1px solid var(--rule)}
.board .pos{font-size:1.5rem;font-weight:800;text-align:right}
.board .who{font-size:1.25rem;font-weight:700;line-height:1.25}
.board .who small{display:block;font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.board .avg{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.board li.you{background:#FFF6D1;border-radius:12px}
.board li.gap{display:block;text-align:center;color:var(--ink-2);font-weight:800;padding:.25rem}

/* ---------- home screen help ---------- */
.howto{margin-top:2rem}
.howto h2{font-size:1.5rem;font-weight:800}
.howto > p{margin-top:.4rem;font-size:1.125rem}
.steps{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.steps li{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;align-items:center;font-size:1.125rem;line-height:1.4}
.pic{width:3.5rem;height:3.5rem;border-radius:12px;border:2px solid var(--rule);display:grid;place-items:center;color:var(--cobalt)}
.pic svg{width:1.9rem;height:1.9rem}
.pic-text{font-weight:800;font-size:1.125rem;color:var(--cobalt)}
.lookfor{margin-top:2rem;display:flex;align-items:center;gap:1rem;font-size:1.125rem}
.lookfor img{border-radius:14px;border:1px solid var(--rule);flex:none}
.homelink{margin-top:1.5rem}
.footlinks{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}

/* ---------- footer and messages ---------- */
footer{border-top:1px solid var(--rule);margin-top:2rem;padding:1.5rem 0 2.5rem;color:var(--ink-2);font-size:1.0625rem}
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%,calc(100% + 3rem));visibility:hidden;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);padding:.9rem 1.2rem;font-size:1.125rem;font-weight:600;box-shadow:0 10px 30px rgba(22,22,29,.25);max-width:calc(100% - 2rem);width:30rem;transition:transform .35s var(--ease-out),visibility .35s;z-index:20}
.toast.is-on{transform:translate(-50%,0);visibility:visible}

/* ---------- tablet and computer ---------- */
@media (min-width:60em){
  :root{--gutter:2rem}
  .masthead .wrap{grid-template-columns:auto 1fr auto;grid-template-areas:'logo nav signin'}
  .nav{justify-self:end;margin-left:0}
  .share-btns{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}