/* Name everything QUZ-33. Instrument Sheet chassis, accent #9A2E6A (plum). */
:root{
  --paper:#EDE9E2;
  --ink:#1E1D1B;
  --panel:#DEDACF;
  --line:#B7B0A2;
  --chassis:#2A2924;
  --accent:#9A2E6A;
  --on-accent:#EDE9E2;          /* paper on plum is 5.8:1 in both modes, so the slab type is always paper */
  --on-accent-dim:rgba(237,233,226,.62);
  --font-ui:"Familjen Grotesk",system-ui,sans-serif;
  --font-spec:"Martian Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#1E1D1B;--ink:#EDE9E2;--panel:#2A2924;--line:#4A473F;--chassis:#111}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure,pre{margin:0}
[hidden]{display:none!important}

/* label strip */
.strip{max-width:1120px;margin:0 auto;padding:18px 32px 0;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.strip-maker{text-decoration:none;padding-bottom:12px}
.strip-maker:hover{text-decoration:underline;text-underline-offset:3px}
.strip-code{padding-bottom:12px}

/* page */
.wrap{max-width:1120px;margin:0 auto;padding:40px 32px 0}
.title{font-size:4.25rem;font-weight:600;line-height:1;letter-spacing:-.01em;margin-bottom:16px;max-width:18ch}
.lede{font-size:1.125rem;max-width:56ch;margin-bottom:28px}
.lede a{text-underline-offset:3px}
.subhead{font-size:1.375rem;font-weight:500;line-height:1.25;margin-bottom:10px}
.section-head{font-size:2rem;font-weight:600;line-height:1.1;margin:40px 0 14px}

/* the plum slab: the one accent shape, and the hero */
.hero{position:relative;background:var(--accent);color:var(--on-accent);padding:32px 40px 30px}
.hero::before,.hero::after,.hero>.ticks::before,.hero>.ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--on-accent);pointer-events:none;z-index:2}
.hero::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hero::after{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero>.ticks::before{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hero>.ticks::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end}
.hero-main{min-width:0}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}

/* the answer input, big, paper-ruled on plum */
.entry{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:26ch;padding:8px 0 10px;border:0;border-bottom:2px solid var(--on-accent);background:transparent;color:var(--on-accent);font-size:2.25rem;font-weight:500;line-height:1.15;letter-spacing:-.005em;border-radius:0;outline:none}
.entry::placeholder{color:var(--on-accent-dim);opacity:1}
.entry:focus-visible{outline:2px solid var(--on-accent);outline-offset:6px}
.entry.is-hit{animation:hit .22s var(--ease)}
@keyframes hit{0%{background:var(--on-accent);color:var(--accent)}100%{background:transparent;color:var(--on-accent)}}
.entry-note{margin-top:10px;font-size:1rem;color:var(--on-accent-dim);min-height:1.55em}
.entry-note b{color:var(--on-accent);font-weight:500}

/* readouts */
.clock{font-size:6rem;font-weight:600;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock.is-late{animation:tick 1s steps(2,end) infinite}
@keyframes tick{50%{opacity:.55}}
.progress{font-size:2rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress b{font-weight:600}
.progress .of{color:var(--on-accent-dim)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* buttons */
.btn{position:relative;display:inline-block;padding:12px 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:500;line-height:1.2;cursor:pointer;border-radius:0;text-decoration:none}
.btn:hover{background:var(--panel)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent)}
.btn-primary .ticks{position:absolute;inset:0;pointer-events:none}
.btn-primary::before,.btn-primary::after,.btn-primary .ticks::before,.btn-primary .ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);opacity:0;pointer-events:none}
.btn-primary::before{top:-6px;left:-6px;border-top-width:1px;border-left-width:1px}
.btn-primary::after{top:-6px;right:-6px;border-top-width:1px;border-right-width:1px}
.btn-primary .ticks::before{bottom:-6px;left:-6px;border-bottom-width:1px;border-left-width:1px}
.btn-primary .ticks::after{bottom:-6px;right:-6px;border-bottom-width:1px;border-right-width:1px}
.btn-primary:hover::before,.btn-primary:hover::after,.btn-primary:hover .ticks::before,.btn-primary:hover .ticks::after,
.btn-primary:focus-visible::before,.btn-primary:focus-visible::after,.btn-primary:focus-visible .ticks::before,.btn-primary:focus-visible .ticks::after{opacity:1}
/* inside the slab the buttons are paper-outlined */
.btn-inv{background:transparent;border-color:var(--on-accent);color:var(--on-accent)}
.btn-inv:hover{background:rgba(237,233,226,.12)}
.btn-inv:focus-visible{outline-color:var(--on-accent)}
.btn-inv.is-done{background:var(--on-accent);color:var(--accent)}

/* reading line */
.reading{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;white-space:pre;margin:12px 0 0;overflow-x:auto}

/* the result strip, shown when the quiz ends */
.result{margin-top:24px;border:1px solid var(--ink);padding:24px 32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:center}
.result-score{font-size:5rem;font-weight:600;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.result-score .of{color:var(--ink);font-size:2rem;font-weight:500;letter-spacing:-.01em}
.result-copy{max-width:52ch;font-size:1.125rem}
.result-copy p{margin-bottom:14px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px}

/* the board */
.board{position:relative;margin-top:24px;border:1px solid var(--line);background:var(--panel);padding:28px 32px 24px}
.board::before,.board::after,.board>.ticks::before,.board>.ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);pointer-events:none}
.board::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.board::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.board>.ticks::before{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.board>.ticks::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.groups{columns:4 210px;column-gap:40px}
.group{min-width:0;break-inside:avoid;margin-bottom:26px}
.groups.is-long .group{break-inside:auto}
.group:last-child{margin-bottom:0}
.group-head{break-after:avoid;break-inside:avoid;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:1.125rem;font-weight:600;line-height:1.2;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:2px}
.group-count{font-family:var(--font-spec);font-size:.7rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.slots{list-style:none;margin:0;padding:0}
.slot{break-inside:avoid;position:relative;display:flex;align-items:baseline;gap:10px;min-height:2.1rem;padding:5px 0 4px;border-bottom:1px solid var(--line);line-height:1.25}
.slot-prompt{font-family:var(--font-spec);font-size:.68rem;font-weight:500;letter-spacing:.02em;line-height:1.3;flex:0 1 auto;max-width:58%;overflow-wrap:anywhere;opacity:.75}
.slot.is-named .slot-prompt,.slot.is-missed .slot-prompt{max-width:44%}
.slot-answer{flex:1 1 auto;min-width:0;font-weight:500;overflow-wrap:anywhere;visibility:hidden}
.slot.is-named{border-bottom-color:var(--ink)}
.slot.is-named .slot-answer{visibility:visible;animation:drop .2s var(--ease)}
@keyframes drop{from{transform:translateY(-.55em);opacity:0}to{transform:none;opacity:1}}
.slot.is-missed .slot-answer{visibility:visible;font-weight:600;color:transparent;-webkit-text-stroke:.7px var(--ink);animation:drop .2s var(--ease)}
.slot.is-fresh{background:var(--paper)}
.board-note{margin-top:16px;font-size:.9375rem;opacity:.8}

/* index page: the fifty on a board of their own */
.find{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:26ch;padding:8px 0 10px;border:0;border-bottom:2px solid var(--on-accent);background:transparent;color:var(--on-accent);font-size:2.25rem;font-weight:500;line-height:1.15;border-radius:0}
.find::-webkit-search-decoration,.find::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.find::placeholder{color:var(--on-accent-dim);opacity:1}
.find:focus-visible{outline:2px solid var(--on-accent);outline-offset:6px}
.count{font-size:6rem;font-weight:600;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.count-label{font-size:2rem;font-weight:500;line-height:1}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{border-bottom:1px solid var(--line)}
.qlist li.is-out{display:none}
.qlist a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0 7px;text-decoration:none;font-weight:500;line-height:1.25}
.qlist a:hover .q-name,.qlist a:focus-visible .q-name{text-decoration:underline;text-underline-offset:3px}
.qlist a:focus-visible{outline-offset:-2px}
.q-n{font-family:var(--font-spec);font-size:.7rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;opacity:.75}
.qlist .group-head{margin-top:0}
.nohit{padding:14px 0;font-size:1.0625rem}

/* notes */
.notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.notes>*{grid-column:span 8}
.notes p{max-width:68ch;margin-bottom:14px}
.notes ul{max-width:68ch;margin:0 0 14px;padding-left:20px}
.notes li{margin-bottom:4px}
.notes a{text-underline-offset:3px}

.foot{max-width:1120px;margin:0 auto;padding:20px 32px 40px;font-size:.875rem;opacity:.8}
.foot p{max-width:70ch}

/* phones and narrow screens */
@media (max-width:900px){
  .notes>*{grid-column:span 12}
  .clock,.count{font-size:4.5rem}
  .groups{columns:3 190px;column-gap:28px}
}
@media (max-width:640px){
  .strip{padding:14px 16px 0}
  .wrap{padding:28px 16px 0}
  .title{font-size:2.5rem}
  .lede{font-size:1rem}
  .hero{padding:22px 18px 22px}
  .hero-grid{grid-template-columns:1fr;gap:16px}
  .hero-side{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .entry,.find{font-size:1.5rem;max-width:none}
  .clock,.count{font-size:3.25rem}
  .progress,.count-label{font-size:1.375rem}
  .hero-actions{margin-top:16px}
  .board{padding:20px 16px 18px}
  .groups{columns:2 140px;column-gap:20px}
  .slot{min-height:1.9rem}
  .slot-answer{font-size:.9375rem}
  .result{padding:18px 16px;grid-template-columns:1fr;gap:12px}
  .result-score{font-size:3.5rem}
  .result-score .of{font-size:1.5rem}
  .result-copy{font-size:1rem}
  .section-head{font-size:1.625rem}
  .foot{padding:16px 16px 32px}
}

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