/* Wizard Test Revision — the hand-drawn notebook skin. */
:root {
  --notebook-green: #173c31;
  --notebook-green-dark: #0d2923;
  --notebook-red: #7b281f;
  --notebook-red-dark: #531a17;
  --notebook-gold: #b8831d;
  --notebook-paper: #f1dfb9;
  --notebook-line: rgba(50, 64, 48, 0.13);
  --notebook-shadow: rgba(7, 21, 17, 0.52);
  --clear-block: max(28px, 3.6vh);
  --clear-inline: max(20px, 5vw);
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(8px, 1.8vw, 20px);
}

.screen {
  position: relative;
  width: min(720px, 100%);
  min-height: calc(100vh - clamp(16px, 3.6vw, 40px));
  min-height: calc(100dvh - clamp(16px, 3.6vw, 40px));
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 48px, rgba(123, 40, 31, 0.12) 49px 50px, transparent 51px),
    url("../img/paper.webp") 0 0 / 600px 600px repeat,
    var(--notebook-paper);
  border: 1px solid rgba(63, 39, 20, 0.42);
  box-shadow: 0 18px 42px var(--notebook-shadow), 0 2px 0 #b99358, 0 5px 0 rgba(234, 214, 168, 0.68);
  isolation: isolate;
}
.screen[hidden] { display: none !important; }
.screen::before, .screen::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.screen::before { inset: 10px; border: 1px solid rgba(23, 60, 49, 0.36); box-shadow: inset 0 0 0 3px rgba(245, 226, 187, 0.4); filter: url(#sketch-fine); }
.screen::after {
  inset: 0;
  opacity: 0.25;
  background-image: radial-gradient(circle at 12% 7%, rgba(83, 26, 23, 0.38) 0 1px, transparent 2px), radial-gradient(circle at 88% 91%, rgba(23, 60, 49, 0.35) 0 1px, transparent 2px);
  background-size: 47px 39px, 61px 53px;
  mix-blend-mode: multiply;
}

.screen--centred {
  display: grid;
  padding-block: calc(var(--clear-block) + env(safe-area-inset-top)) calc(var(--clear-block) + env(safe-area-inset-bottom));
  padding-inline: var(--clear-inline);
}
.screen--centred > .sheet { margin: auto; }
.sheet { position: relative; width: min(500px, 100%); text-align: center; }

.revision-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 clamp(12px, 3vh, 26px);
  padding-bottom: 7px;
  color: var(--notebook-green);
  border-bottom: 1px solid currentColor;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.revision-kicker::after { content: "✦"; position: absolute; left: 50%; transform: translate(-50%, 13px); padding: 0 7px; background: var(--notebook-paper); color: var(--notebook-gold); font-size: 13px; }

.title {
  margin: 0 0 0.65rem;
  color: var(--notebook-green-dark);
  font-size: clamp(2.35rem, 10vw, 4.1rem);
  line-height: 0.88;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 1px 2px 0 rgba(184, 131, 29, 0.34);
  filter: url(#sketch-fine);
}
.title span { color: var(--notebook-red); }
.title--small { font-size: clamp(1.9rem, 7.4vw, 3rem); line-height: 1.02; text-transform: none; }
.sub {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 4vw, 1.22rem);
  font-style: italic;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(23, 60, 49, 0.58);
}
.label { color: var(--notebook-green); font-family: "IM Fell English SC", Georgia, serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.rule { width: 56%; height: 0; margin: 0 auto 1.5rem; border: 0; border-top: 1px solid var(--notebook-gold); }
.note { min-height: 1.4em; max-width: 36ch; margin: 0.55rem auto 0; color: var(--notebook-red); font-size: 15px; font-style: italic; line-height: 1.45; }
.foot { margin: 1.3rem 0 0; }
.back, .linky { display: inline-block; min-height: 44px; padding: 0.7rem 1rem; color: var(--notebook-green); background: none; border: 0; font: 14px "IM Fell English SC", Georgia, serif; letter-spacing: 0.035em; text-decoration: none; cursor: pointer; }
.back span, .linky { border-bottom: 1px solid currentColor; }
.back::before { content: "⌁  "; color: var(--notebook-red); }

/* The landing page deliberately carries far more ink than the question
   pages. It is the illustrated cover of the revision book. */
#s-title {
  width: min(820px, 100%);
  overflow: visible;
  padding-block: clamp(22px, 4vh, 46px);
  background:
    linear-gradient(98deg, transparent 0 7%, rgba(89, 61, 31, 0.06) 7.2% 7.5%, transparent 7.7%),
    url("../img/paper.webp") 0 0 / 600px 600px repeat,
    var(--notebook-paper);
}
#s-title::before { inset: 13px; border: 0; box-shadow: inset 0 0 0 1px rgba(23,60,49,.28), inset 0 0 0 5px rgba(245,226,187,.35); }
#s-title::after {
  inset: 0;
  opacity: .4;
  background:
    radial-gradient(circle at 10% 23%, var(--notebook-gold) 0 2px, transparent 2.5px),
    radial-gradient(circle at 91% 33%, var(--notebook-red) 0 1.5px, transparent 2px),
    radial-gradient(circle at 14% 74%, var(--notebook-green) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 83%, var(--notebook-gold) 0 2px, transparent 2.5px);
  background-size: 83px 91px, 69px 77px, 57px 63px, 91px 79px;
}
.sheet--landing { width: min(670px, 100%); margin-block: 0 !important; }
#s-title .revision-kicker { margin-inline: 25px; margin-bottom: 17px; }

.landing-scrap { position: absolute; z-index: -2; background: #e7d4aa; border: 1px solid rgba(57,40,22,.45); box-shadow: 0 8px 18px rgba(4,18,14,.24); }
.landing-scrap--left { width: 110px; height: 330px; left: -44px; top: 90px; transform: rotate(-4deg); background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(45,73,63,.2) 25px 26px); }
.landing-scrap--right { width: 126px; height: 250px; right: -54px; bottom: 55px; transform: rotate(6deg); background-image: linear-gradient(135deg, transparent 49%, rgba(23,60,49,.35) 49.5% 50.5%, transparent 51%), repeating-linear-gradient(0deg, transparent 0 22px, rgba(45,73,63,.14) 22px 23px); }
.landing-compass { position: absolute; z-index: 2; left: -49px; bottom: -46px; width: 128px; height: 128px; border: 5px double #a67725; border-radius: 50%; background: rgba(238,217,171,.94); box-shadow: 0 5px 15px rgba(4,18,14,.35); transform: rotate(-13deg); }
.landing-compass::before, .landing-compass::after { content: ""; position: absolute; inset: 15px 57px; background: var(--notebook-green); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.landing-compass::after { inset: 57px 15px; background: var(--notebook-red); }
.landing-compass i { position: absolute; inset: 37px; z-index: 1; border: 2px solid var(--notebook-gold); border-radius: 50%; background: var(--notebook-paper); }

.title-stars { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 7vw, 70px); height: 27px; color: var(--notebook-gold); }
.title-stars i { font-style: normal; font-size: 17px; }
.title-stars i:nth-child(2n) { color: var(--notebook-green); font-size: 11px; }
.title-stars i:nth-child(3) { font-size: 27px; }
.title--hero { margin-bottom: 0; font-size: clamp(3.45rem, 11.2vw, 6.25rem); line-height: .8; letter-spacing: -.012em; text-shadow: 2px 2px 0 rgba(184,131,29,.28); }
.title--hero::after { content: ""; display: block; width: 76%; height: 17px; margin: 2px auto -4px; border-top: 3px solid var(--notebook-gold); border-radius: 50%; transform: rotate(-1deg); }
.margin-note, .result-scribble { position: absolute; color: var(--notebook-green); font-family: "IM Fell English", Georgia, serif; font-size: 15px; font-style: italic; line-height: .95; transform: rotate(7deg); }
.margin-note b { display: block; color: var(--notebook-red); font-size: 27px; font-weight: 400; }
.margin-note--top { top: 46px; right: -6px; padding: 8px 12px; background: #ead8af; box-shadow: 2px 3px 0 rgba(23,60,49,.15); }
.margin-note--left { left: -3px; bottom: 27px; text-align: left; transform: rotate(-8deg); }
.margin-note--right { right: 2px; bottom: 33px; text-align: right; transform: rotate(7deg); }

.hero-study { position: relative; min-height: 335px; margin-top: -5px; }
.hero-book { display: block; width: min(540px, 82%); margin: 0 auto; overflow: visible; fill: none; stroke: var(--notebook-green-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: url(#sketch-fine); }
.hero-book__page { fill: rgba(252,236,196,.9); stroke-width: 2.2; }
.hero-book__rays { stroke: var(--notebook-gold); stroke-width: 2; }
.hero-book__moon { fill: rgba(184,131,29,.22); stroke: var(--notebook-gold); }
.hero-book__star { fill: rgba(123,40,31,.16); stroke: var(--notebook-red); }
.book-cover { fill: var(--notebook-red); stroke: var(--notebook-red-dark); stroke-width: 5; }
.book-shadow { fill: rgba(13,41,35,.26); stroke: none; }
.book-lines { opacity: .36; }
.owl-sketch, .castle-sketch, .study-diagrams { stroke-width: 1.35; }
.bookmark { fill: var(--notebook-red); stroke: var(--notebook-red-dark); }
.study-list { position: absolute; z-index: 2; right: -3px; top: 106px; margin: 0; padding: 0; color: var(--notebook-green); list-style: none; font-size: 13px; font-style: italic; line-height: 1.45; text-align: left; transform: rotate(3deg); }
.study-list li::before { content: "☑"; margin-right: 5px; color: var(--notebook-red); font-style: normal; }
.sub--landing { margin: -10px auto 20px; font-size: clamp(1.35rem, 4.7vw, 2rem); text-underline-offset: 7px; }

.papers { display: grid; gap: 14px; margin: 0 auto; width: min(610px, 100%); }
.btn--paper {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 3px 18px;
  min-height: 132px;
  padding: 17px 20px 16px 13px;
  overflow: visible;
  text-align: left;
  background: linear-gradient(94deg, rgba(184,131,29,.1), transparent 35%), rgba(255,245,216,.88);
  border: 2px solid var(--notebook-gold);
  border-radius: 3px 1px 2px 4px;
  box-shadow: 6px 7px 0 rgba(90,62,29,.15), 0 0 0 5px rgba(255,243,212,.33);
  filter: url(#sketch-fine);
}
.btn--paper::before { content: ""; position: absolute; inset: 7px; border: 1px solid currentColor; opacity: .24; pointer-events: none; }
.btn--paper::after { content: ""; position: absolute; right: -18px; top: 27px; width: 18px; height: 76px; background: #c49a42; border-radius: 0 4px 4px 0; box-shadow: inset 3px 0 rgba(67,45,23,.13); }
.btn--newt { border-color: var(--notebook-red); box-shadow: 6px 7px 0 rgba(90,62,29,.15), 0 0 0 5px rgba(255,243,212,.33); }
.btn--newt::after { background: #a94b38; }
.paper__doodle { grid-column: 1; grid-row: 1 / 3; align-self: center; display: block; width: 100%; height: 88px; color: var(--notebook-green); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--newt .paper__doodle { color: var(--notebook-red-dark); }
.paper__name, .paper__blurb { grid-column: 2; align-self: end; }
.paper__name { color: var(--notebook-green-dark); font-size: clamp(1.6rem, 5.6vw, 2.25rem); letter-spacing: .02em; line-height: .94; text-transform: uppercase; border-bottom: 1.5px solid var(--notebook-gold); padding-bottom: 6px; }
.btn--newt .paper__name { color: var(--notebook-red-dark); }
.paper__blurb { align-self: start; margin-top: 4px; color: var(--ink-soft); font-size: 17px; line-height: 1.25; }
.paper__arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--notebook-green); font-size: 52px; line-height: 1; }
.btn--newt .paper__arrow { color: var(--notebook-red); }
.map-scroll { display: inline-block; margin-right: 8px; color: var(--notebook-red); font-size: 25px; transform: rotate(-7deg); }
#s-title .back::before { content: none; }
#s-title .back b { margin-left: 8px; color: var(--notebook-red); font-size: 20px; }

.hear { margin: 0.65rem 0 0; }
.hear__btn { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; padding: 0.6rem 0.9rem; color: var(--ink-soft); background: none; border: 0; font: 14px "IM Fell English SC", Georgia, serif; cursor: pointer; touch-action: manipulation; }
.hear__btn span { border-bottom: 1px dotted currentColor; }
.hear__btn:focus-visible { outline: 2px dashed var(--notebook-red); outline-offset: 2px; }
.hear__horn { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hear__wave { fill: none; opacity: 0.82; }
.is-speaking .hear__wave:last-child { animation: horn 1.15s var(--ease) infinite; }
@keyframes horn { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.95; } }
.said { max-width: 38ch; margin: 0.1rem auto 0; padding: 12px 14px; color: var(--ink-soft); background: rgba(184, 131, 29, 0.11); border-left: 2px solid var(--notebook-gold); font-size: 14px; font-style: italic; line-height: 1.45; text-align: left; }
.said__quiet { display: block; margin-top: 0.5rem; color: var(--notebook-red); font: 12px "IM Fell English SC", Georgia, serif; letter-spacing: 0.04em; }

/* Name page. */
#s-name .sheet { max-width: 420px; }
.pencil-star { width: 88px; height: 88px; margin: 10px auto 20px; color: var(--notebook-gold); border: 2px solid currentColor; border-radius: 50%; font-size: 42px; line-height: 84px; transform: rotate(-7deg); filter: url(#sketch); }
.namer { display: grid; gap: 14px; justify-items: center; }
.namer .btn { margin-top: 0.5rem; }
.field { border-bottom-color: var(--notebook-green); }
.field:focus { border-bottom-color: var(--notebook-red); }

/* One notebook page per question. The button stays fixed while the middle scrolls. */
.screen--paper {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: calc(100vh - clamp(16px, 3.6vw, 40px));
  height: calc(100dvh - clamp(16px, 3.6vw, 40px));
  min-height: 0;
  padding-block: calc(var(--clear-block) + env(safe-area-inset-top)) calc(var(--clear-block) + env(safe-area-inset-bottom));
  padding-inline: var(--clear-inline);
}
.qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.qhead__paper { color: var(--notebook-red); font-size: 18px; letter-spacing: 0.075em; }
.qhead__paper::before { content: "✦ "; color: var(--notebook-gold); }
.qhead__count { color: var(--notebook-green); font: 13px "IM Fell English SC", Georgia, serif; letter-spacing: 0.06em; }
.qhead__bar { height: 8px; margin-bottom: 13px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(23, 60, 49, 0.2) 0 4px, transparent 4px 8px); }
.qhead__bar i { display: block; width: 0; height: 100%; background: var(--notebook-gold); clip-path: polygon(0 25%, calc(100% - 8px) 25%, 100% 50%, calc(100% - 8px) 75%, 0 75%); transition: width 320ms var(--ease); }
.qbody { overflow-y: auto; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch; background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--notebook-line) 31px 32px); background-position: 0 6px; }
.ask { margin: 0 0 1rem; color: var(--notebook-green-dark); font-family: "IM Fell English", Georgia, serif; font-size: clamp(1.22rem, 5vw, 1.55rem); font-weight: 400; line-height: 1.35; }
.ask::before { content: "Q. "; color: var(--notebook-red); font-family: "IM Fell English SC", Georgia, serif; }

.art { position: relative; width: fit-content; max-width: 100%; margin: 0 auto 1.1rem; padding: 9px; background: rgba(252, 239, 207, 0.76); border: 1px solid rgba(23, 60, 49, 0.35); box-shadow: 3px 4px 0 rgba(23, 60, 49, 0.13); transform: rotate(-0.6deg); }
.art::before { content: "study sketch"; position: absolute; top: 6px; right: 8px; color: var(--notebook-red); font-size: 11px; font-style: italic; transform: rotate(3deg); }
.art img, .art svg { display: block; width: auto; max-width: 100%; height: auto; max-height: 29vh; margin: 0 auto; }

.opts { display: grid; gap: 9px; }
.opt { position: relative; display: flex; align-items: center; width: 100%; min-height: 54px; gap: 12px; padding: 11px 14px 11px 11px; color: var(--ink); background: rgba(252, 240, 211, 0.88); border: 1.5px solid rgba(23, 60, 49, 0.47); border-radius: 1px; box-shadow: 3px 3px 0 rgba(23, 60, 49, 0.12); font: 17px/1.32 "IM Fell English", Georgia, serif; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 120ms, background 160ms, border-color 160ms; }
.opt:nth-child(even) { transform: rotate(0.18deg); }
.opt:focus-visible { outline: 2px dashed var(--notebook-red); outline-offset: 3px; }
.opt__mark { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: var(--notebook-green); border: 1.5px solid currentColor; border-radius: 50%; font: 15px "IM Fell English SC", Georgia, serif; }
.opt[aria-checked="true"] { z-index: 1; background: #f8e8bd; border-color: var(--notebook-red); box-shadow: 3px 3px 0 rgba(123, 40, 31, 0.16), inset 0 0 0 1px var(--notebook-red); }
.opt[aria-checked="true"] .opt__mark { color: #fff1cf; background: var(--notebook-red); border-color: var(--notebook-red); }
.opts.is-done .opt { cursor: default; box-shadow: none; }
.opt.is-right { color: var(--ink-right); background: #dbe2c4; border-color: var(--ink-right); }
.opt.is-wrong { color: var(--ink-wrong); background: #ead0bb; border-color: var(--ink-wrong); }
.opt.is-right .opt__mark { color: #fff4d8; background: var(--ink-right); border-color: var(--ink-right); }
.opt.is-wrong .opt__mark { color: #fff4d8; background: var(--ink-wrong); border-color: var(--ink-wrong); }
.opt.is-dim { opacity: 0.48; }
.note--reveal { position: relative; max-width: none; margin-top: 1rem; padding: 28px 16px 14px; color: var(--notebook-green-dark); background: rgba(219, 198, 129, 0.58); border: 1px solid rgba(123, 40, 31, 0.3); box-shadow: 3px 3px 0 rgba(123, 40, 31, 0.13); font-style: normal; text-align: left; transform: rotate(-0.35deg); }
.note--reveal::before { content: "good to know!  ↘"; position: absolute; top: 7px; left: 12px; color: var(--notebook-red); font-style: italic; }
.qfoot { padding-top: 12px; }

.btn--big { display: block; width: 100%; min-height: 56px; color: #fff0cc; background: var(--notebook-green); border: 1.5px solid var(--notebook-green-dark); box-shadow: 3px 3px 0 var(--notebook-gold); font-size: 18px; filter: url(#sketch-fine); }
.btn--big:hover { background: #215244; }
.btn--big[disabled] { color: #75694e; background: #d7c69f; border-color: #9b8b68; box-shadow: none; opacity: 1; }

/* Revision recap. */
#s-result .sheet { max-width: 470px; }
.result-scribble { top: 35px; right: -3px; }
.result-scribble::after { content: "↙"; display: block; color: var(--notebook-gold); font-size: 24px; }
#s-result .sub { margin-top: 14px; text-decoration: none; }
.grade { display: grid; width: 116px; height: 116px; margin: 15px auto 20px; place-items: center; color: var(--notebook-red); border: 4px double currentColor; border-radius: 50%; font-size: 72px; line-height: 1; transform: rotate(-7deg); filter: url(#sketch); }
.score { margin: 18px 0; padding: 11px; color: var(--notebook-green); background: rgba(184, 131, 29, 0.12); border-block: 1px dashed rgba(23, 60, 49, 0.5); font-size: 1.13rem; font-style: italic; }
.again { margin-top: 1.5rem; }
.wrongs, .board { margin: 1.45rem 0 0; padding: 12px 14px; background: rgba(252, 240, 211, 0.64); border: 1px solid rgba(23, 60, 49, 0.3); text-align: left; }
.wrongs summary { min-height: 44px; padding-block: 11px; cursor: pointer; }
.wrongs__list { display: grid; gap: 12px; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.wrongs__list li { padding-left: 17px; font-size: 15px; line-height: 1.42; }
.wrongs__list li::before { content: "↳"; float: left; margin-left: -17px; color: var(--notebook-red); }
.wrongs__q { display: block; color: var(--ink-soft); }
.wrongs__a { display: block; color: var(--ink-right); }
.board__list { display: grid; gap: 8px; margin: 0.6rem 0 0; padding-left: 1.8rem; }
.board__list li { font-size: 16px; }
.board__score { float: right; font-family: "IM Fell English SC", Georgia, serif; white-space: nowrap; }
.board__score i { color: var(--ink-soft); font-style: normal; opacity: 0.75; }
.board__list li::after { content: ""; display: block; clear: both; }
.board__list li.is-you { font-weight: bold; background: rgba(184, 131, 29, 0.2); box-shadow: 0 0 0 5px rgba(184, 131, 29, 0.2); }

@media (min-width: 620px) { .screen--paper { padding-inline: 70px; } }
@media (max-width: 430px) {
  .app { padding: 7px; }
  .screen { min-height: calc(100vh - 14px); min-height: calc(100dvh - 14px); background: linear-gradient(90deg, transparent 0 29px, rgba(123, 40, 31, 0.1) 30px 31px, transparent 32px), url("../img/paper.webp") 0 0 / 600px 600px repeat, var(--notebook-paper); }
  .screen--paper { height: calc(100vh - 14px); height: calc(100dvh - 14px); }
  .screen::before { inset: 7px; }
  .screen--centred { padding-inline: max(23px, 6vw); }
  #s-title { overflow: hidden; padding: 22px 17px 28px; }
  #s-title::before { inset: 7px; }
  .sheet--landing { width: 100%; }
  #s-title .revision-kicker { margin-inline: 10px; font-size: 9px; }
  .title-stars { gap: 30px; height: 21px; }
  .title--hero { font-size: clamp(3.15rem, 16.3vw, 4.25rem); }
  .title--hero::after { height: 12px; }
  .margin-note--top { right: 0; top: 35px; padding: 6px 8px; font-size: 11px; }
  .hero-study { min-height: 252px; margin-top: 2px; }
  .hero-book { width: 100%; }
  .margin-note--left, .margin-note--right { bottom: 18px; font-size: 10.5px; }
  .margin-note--left { left: -2px; }
  .margin-note--right { right: -2px; }
  .margin-note b { font-size: 20px; }
  .study-list { display: none; }
  .sub--landing { margin-top: -5px; margin-bottom: 20px; font-size: 1.35rem; }
  .papers { width: calc(100% - 6px); gap: 14px; }
  .btn--paper { grid-template-columns: 82px minmax(0, 1fr) auto; min-height: 116px; gap: 4px 10px; padding: 12px 10px 12px 7px; }
  .btn--paper::after { right: -10px; width: 10px; top: 22px; height: 72px; }
  .paper__doodle { width: 82px; height: 72px; }
  .paper__name { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
  .paper__blurb { font-size: 13.5px; }
  .paper__arrow { font-size: 40px; }
  .landing-scrap--left { left: -70px; }
  .landing-scrap--right { right: -85px; }
  .landing-compass { left: -62px; bottom: -54px; width: 112px; height: 112px; }
  .landing-compass::before { inset: 13px 50px; }
  .landing-compass::after { inset: 50px 13px; }
  .landing-compass i { inset: 33px; }
  .result-scribble { display: none; }
}
@media (max-height: 740px) {
  #s-name, #s-result { padding-block: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }