/* =====================================================================
   draw-a-million — math-notebook aesthetic
   ===================================================================== */

:root {
  /* Type ladder: four handwriting roles */
  --font-display: 'Caveat Brush', cursive;     /* big marker scrawl    */
  --font-script:  'Caveat', cursive;            /* loopy headers, emph  */
  --font-body:    'Kalam', cursive;             /* neat handwriting     */
  --font-note:    'Architects Daughter', cursive; /* tight printed notes */

  /* Engineering-pad palette — warm light gray paper, faint blue-gray grid */
  --paper:        #e8e8e3;                       /* gray paper, warm hint */
  --paper-warm:   #ddddd6;                       /* slightly darker, for cards */
  --grid-minor:   rgba(80, 105, 130, 0.13);      /* 16px squares */
  --grid-major:   rgba(80, 105, 130, 0.24);      /* 80px squares = 5×5 minor */
  --ink:          #2a3950;
  --pencil:       #4a5670;
  --highlight:    rgba(255, 230, 90, 0.55);
  --highlight-deep: rgba(255, 215, 50, 0.85);
  --you:          #c14a4a;
  --accent:       #2a8a8e;                       /* teal — for callouts that need to pop */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--paper);
  /* Engineering quad-pad: 16px minor grid, 80px major grid (5 minor per major).
     Major lines listed first so they paint on top of the minor lines where
     they overlap. Two soft vignettes underneath for paper depth. */
  background-image:
    repeating-linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to right,  var(--grid-major) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, var(--grid-minor) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to right,  var(--grid-minor) 0 1px, transparent 1px 16px),
    radial-gradient(ellipse at top,    rgba(60, 80, 100, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(60, 80, 100, 0.04), transparent 70%);
  padding: 2rem 1.25rem 5rem;
  position: relative;
  overflow-x: hidden; /* doodles and marginalia can sit just past content edge */
}

@media (max-width: 700px) {
  body {
    padding: 1.25rem 0.85rem 3rem;
  }
}

/* Subtle paper-grain noise overlay, fixed to the viewport */
.paper-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.notebook {
  max-width: 940px;
  margin: 0 auto;
  padding-left: 4rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .notebook { padding-left: 0.75rem; padding-right: 0.5rem; }
}

/* =====================================================================
   Animations
   ===================================================================== */

@keyframes scribble-in {
  from { opacity: 0; transform: translateY(10px) rotate(var(--rot-from, -3deg)); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--rot-to,    0deg)); }
}

@keyframes draw-in {
  to { stroke-dashoffset: 0; }
}

@keyframes mark-fade-in {
  from { opacity: 0; }
  to   { opacity: var(--mark-opacity, 1); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  25%      { transform: rotate(-3deg) translateY(-1px); }
  50%      { transform: rotate(0deg);  }
  75%      { transform: rotate(-1deg) translateY(1px); }
}

@keyframes tag-bob {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50%      { transform: rotate(-3.5deg) translateY(-2px); }
}

[data-reveal] {
  opacity: 0;
  animation: scribble-in 0.7s ease-out forwards;
}

/* Initial-load stagger. Results-only elements use the .show-results
   transitions further down rather than data-reveal. */
.prompt-tag                   { animation-delay: 0.05s; --rot-to: -2.5deg; }
.title                        { animation-delay: 0.15s; --rot-from: -1deg; --rot-to: 0deg; }
.m-note-lt-1                  { animation-delay: 0.40s; --rot-from: -8deg;  --rot-to: -2deg; }
.m-note-rt-0                  { animation-delay: 0.55s; --rot-from: -8deg;  --rot-to: 2deg; }
.m-note-rt-1                  { animation-delay: 0.70s; --rot-from: -10deg; --rot-to: -4deg; }
.m-note-rt-2                  { animation-delay: 0.85s; --rot-from: -4deg;  --rot-to: 2.5deg; }
.m-note-rt-3                  { animation-delay: 1.10s; --rot-from: -8deg;  --rot-to: -1deg; }
.m-note-rt-4                  { animation-delay: 1.30s; --rot-from: -6deg;  --rot-to: -1.5deg; }
.m-note-rt-5                  { animation-delay: 1.45s; --rot-from: -4deg;  --rot-to: 0.5deg; }
.m-note-rt-6                  { animation-delay: 1.60s; --rot-from: -6deg;  --rot-to: -0.5deg; }
.subtitle                     { animation-delay: 0.40s; }
.numberline-wrap[data-reveal] { animation-delay: 0.70s; }
.endpoint-label[data-reveal]  { animation-delay: 0.95s; }
.hint-arrow                   { animation-delay: 1.55s; --rot-from: -10deg; --rot-to: -4deg; }
.controls[data-reveal]        { animation-delay: 1.20s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; animation: none; transform: none; }
  .emph-underline path { stroke-dashoffset: 0 !important; animation: none !important; }
  .doodle { opacity: 0.6 !important; animation: none !important; }
  /* Skip the show-results crossfade too — just snap. */
  body.show-results #input-subtitle,
  body.show-results #hint-arrow,
  body.show-results #input-controls { display: none !important; }
}

/* === State transitions ====================================================
   body.show-results crossfades from input view to results view. The number
   line itself never moves — only the elements around it (subtitle/header,
   submit button/results body, in-stage annotations) fade in or out. */

#input-subtitle, #hint-arrow {
  transition: opacity 0.4s ease;
}
/* !important needed to override the data-reveal animation's forwards value
   (animation cascade origin is higher than normal rules — but is bypassed
   by !important). */
.show-results #input-subtitle,
.show-results #hint-arrow {
  opacity: 0 !important;
  pointer-events: none;
}

#results-header, #annotation-actual, #annotation-avg, #annotation-you,
#marginalia-results, #marginalia-results .m-note {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.show-results #results-header     { opacity: 1; transition-delay: 0.20s; }
.show-results #annotation-actual  { opacity: 1; transition-delay: 0.80s; }
.show-results #annotation-avg     { opacity: 1; transition-delay: 1.00s; }
.show-results #annotation-you     { opacity: 1; transition-delay: 1.20s; }
.show-results #marginalia-results { opacity: 1; transition-delay: 0.65s; pointer-events: auto; }
.show-results #marginalia-results .m-note { opacity: 1; transition-delay: 0.65s; }

/* Input controls collapse vertically as they fade so the results body can
   slide up into the freed space. Results body expands the same way in
   reverse. The 0.3s delay on max-height lets the opacity fade visually
   complete before the layout actually compresses. */
#input-controls {
  overflow: hidden;
  transition: opacity 0.4s ease,
              max-height 0.5s 0.3s ease,
              margin-top 0.5s 0.3s ease,
              margin-bottom 0.5s 0.3s ease;
}
.show-results #input-controls {
  opacity: 0 !important;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

#results-body {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s 0.4s ease, max-height 0.6s 0.4s ease;
  pointer-events: none;
}
.show-results #results-body {
  opacity: 1;
  max-height: 800px;
  pointer-events: auto;
}

/* =====================================================================
   Page header — title, prompt tag, margin scratch
   ===================================================================== */

.page-header {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.prompt-tag {
  display: inline-block;
  font-family: var(--font-note);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--pencil);
  background: var(--paper-warm);
  padding: 0.15rem 0.7rem 0.2rem;
  margin-left: -0.4rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
  border-radius: 2px;
  transform: rotate(-2.5deg);
}

.title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--ink);
  /* slight ink color shift for hand-written feel */
  text-shadow: 0 0 1px rgba(42, 57, 80, 0.05);
}

.title .emph {
  display: inline-block;
  position: relative;
  background: var(--highlight);
  padding: 0 0.3em;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  cursor: default;
  transition: background 0.2s;
}

.title .emph:hover {
  animation: wiggle 0.6s ease-in-out;
  background: var(--highlight-deep);
}

.emph-underline {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.42em;
  width: 104%;
  height: 0.5em;
  pointer-events: none;
  overflow: visible;
}

.emph-underline path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-in 1.0s 1.3s ease-out forwards;
}

/* =====================================================================
   Marginalia — loose scribbled notes in the right page gutter
   ===================================================================== */

/* Position fixed so the notes sit in the *viewport* gutter regardless of
   where they are in the DOM — and use calc() math to plant them a constant
   distance past the .notebook column's right edge. The .notebook column is
   max-width 940px centered, so its right edge is at viewport-center + 470px.
   `right: calc(50% - 540px)` puts a note's right edge ~70px past the column
   edge — same offset at every viewport width, until the viewport is too narrow
   to have a gutter (handled by the media query at the bottom). */
.marginalia {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.m-note {
  position: absolute;
  font-family: var(--font-note);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: bold;
  color: var(--pencil);
  line-height: 1.35;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.m-note sup { font-size: 0.7em; }

/* RIGHT cluster — notation cheat sheet (rt-0..3) plus decimal expansions
   (rt-4..6). Tight grouping with small horizontal jitter so it reads as
   casually jotted, not ruler-aligned. Pinned to viewport-edge offsets. */
.m-note-rt-0 {
  top: 6rem;
  right: 1.25rem;
  transform: rotate(2deg);
}
.m-note-rt-1 {
  top: 8rem;
  right: 1.5rem;
  transform: rotate(-4deg);
}
.m-note-rt-2 {
  top: 10rem;
  right: 1rem;
  transform: rotate(2.5deg);
}
.m-note-rt-3 {
  top: 12.5rem;
  right: 1.5rem;
  transform: rotate(-1deg);
  font-weight: normal;
  font-style: italic;
  opacity: 0.75;
}

/* Decimal expansions — smaller font so the long "1B = 1,000,000,000" line
   actually fits in the gutter, and so the digit count grows visually. */
.m-note-rt-4,
.m-note-rt-5,
.m-note-rt-6 {
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.m-note-rt-4 { top: 14.5rem; right: 0.5rem; transform: rotate(-1.5deg); }
.m-note-rt-5 { top: 16rem;   right: 0.5rem; transform: rotate(0.5deg); }
.m-note-rt-6 { top: 17.5rem; right: 0.5rem; transform: rotate(-0.5deg); }

/* LEFT cluster — log/exponent equivalence as a single multi-line note. */
.m-note-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

.m-note-lt-1 {
  top: 7rem;
  left: 1rem;
  transform: rotate(-2deg);
}

.log-arrow {
  width: 22px;
  height: 30px;
  display: block;
  margin: 0.15rem 0;
}

.log-line { font-weight: bold; }
.log-line sub, .log-line sup { font-size: 0.65em; }

/* Below 1180px: no room in the gutter for notes without crowding content. */
@media (max-width: 1180px) {
  .marginalia { display: none; }
}

/* =====================================================================
   Subtitle ("Make one pencil mark...")
   ===================================================================== */

/* Layered subtitle area: input subtitle and results header occupy the same
   absolute position, so the number line below stays put when they swap. */
.subtitle-zone {
  position: relative;
  margin: 1.25rem 0 2rem;
  min-height: 5rem;
}
.subtitle-zone > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

.subtitle {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4.2vw, 1.75rem);
  color: var(--pencil);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;
  line-height: 1.2;
}

.pencil-icon {
  width: clamp(1.3rem, 3vw, 1.7rem);
  height: clamp(1.3rem, 3vw, 1.7rem);
  flex-shrink: 0;
  transform: rotate(-15deg);
}

/* =====================================================================
   Number line + brackets
   ===================================================================== */

.numberline-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  /* Top margin reserves room for the absolutely-positioned hint that sits
     above the number line (the hint is in normal flow's blind spot). */
  margin: 4rem 0 0;
}

.bracket {
  width: clamp(20px, 3.2vw, 34px);
  height: 200px;
  flex-shrink: 0;
}

.numberline-stage {
  position: relative;
  flex: 1;
  min-width: 0;
}

#numberline {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;
  cursor: crosshair;
}

@media (max-width: 500px) {
  #numberline { height: 160px; }
  .bracket { height: 160px; }
}

/* Endpoint labels — overlaid inside the .numberline-stage at its bottom
   corners, so they sit *within* the bracket area rather than below it.
   Stage is 200px tall; bottom: 1rem keeps the label baseline above the
   bracket's bottom serif (rendered at ~y=187 of stage). */
.endpoint-label {
  position: absolute;
  bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
  z-index: 1;
}

.endpoint-label-left  { left:  0.4rem; transform: rotate(-2deg); }
.endpoint-label-right { right: 0.4rem; transform: rotate(1.5deg); }

@media (max-width: 500px) {
  /* Stage shrinks to 160px on narrow screens; pull labels up so they
     don't sit on top of the bracket bottom serif. */
  .endpoint-label { bottom: 0.5rem; }
}

/* =====================================================================
   Hint arrow ("click anywhere & drag down")
   Sits ABOVE the number line, with the arrow pointing DOWN at it so the
   user's eye is led from the text to the place they should click.
   ===================================================================== */

.hint-arrow {
  position: absolute;
  bottom: calc(100% + 0.25rem);   /* sits just above the line */
  left: 30%;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  font-family: var(--font-note);
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--pencil);
  white-space: nowrap;
  pointer-events: none;
}

.hint-svg {
  width: 26px;
  height: 38px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .hint-arrow { left: 20%; font-size: 0.85rem; }
  .hint-svg { width: 22px; height: 32px; }
}

/* =====================================================================
   Submit button
   ===================================================================== */

.controls {
  text-align: center;
  margin: 3rem 0 1.5rem;
}

button {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 700;
  padding: 0.55rem 1.6rem 0.7rem;
  min-height: 52px;
  min-width: 48px;
  background: var(--paper-warm);
  color: var(--ink);
  /* The wonky border-radius is the hand-drawn signature */
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Offset shadow so the button feels lifted off the paper */
  box-shadow: 3px 4px 0 rgba(42, 57, 80, 0.15);
  transition: transform 0.12s ease-out, background 0.18s, box-shadow 0.18s;
}

.btn-flourish {
  font-family: var(--font-display);
  display: inline-block;
  transform: rotate(-12deg);
  transition: transform 0.25s;
}

button:hover:not(:disabled) {
  background: var(--highlight-deep);
  transform: translateY(-2px) rotate(-0.5deg);
  box-shadow: 5px 6px 0 rgba(42, 57, 80, 0.22);
}

button:hover:not(:disabled) .btn-flourish {
  transform: rotate(0deg) translateX(2px);
}

button:active:not(:disabled) {
  transform: translateY(0) rotate(0);
  box-shadow: 1px 2px 0 rgba(42, 57, 80, 0.15);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 1px 2px 0 rgba(42, 57, 80, 0.10);
}

/* =====================================================================
   Results header (lives in the .subtitle-zone, layered with the input subtitle)
   ===================================================================== */

.results-header {
  position: relative;
  margin-bottom: 1.25rem;
}

.results-tag {
  display: inline-block;
  font-family: var(--font-note);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--pencil);
  background: var(--paper-warm);
  padding: 0.15rem 0.7rem 0.2rem;
  margin-left: -0.4rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
  border-radius: 2px;
  transform: rotate(-1.5deg);
}

.results-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.results-bullet {
  display: inline-block;
  color: var(--you);
  margin-left: 0.25rem;
  font-size: 0.65em;
  transform: translateY(-0.3em) rotate(15deg);
}

/* =====================================================================
   Aggregate annotations (positioned by JS over the .numberline-stage)
   ===================================================================== */

.annotation {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-note);
  font-size: clamp(0.85rem, 1.9vw, 1rem);
  color: var(--ink);
  line-height: 1.2;
  z-index: 4;
}

/* Container spans the FULL stage so the inner SVG can use the same
   coordinate system as the number line itself — the path is then defined
   relative to known landmarks ("0" label position, "1 billion" position)
   rather than arbitrary pixel offsets. */
.annotation-actual {
  top: -2rem;
  left: 0;
  width: 100%;
  height: calc(100% + 2rem);
  display: block;
  color: var(--accent);
}

.actual-text {
  position: absolute;
  top: 0;
  left: 28px;
  font-family: var(--font-note);
  font-weight: bold;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  transform: rotate(-3deg);
  /* Subtle paper-color glow so the text reads cleanly over any aggregate
     marks that happen to sit behind it. */
  text-shadow: 0 0 4px var(--paper);
  z-index: 1;
}

.actual-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 500px) {
  .actual-text { font-size: 0.85rem; left: 18px; }
}

/* Swapped: average above the line (so the "actual answer is here" loop in
   the upper-left has room to coexist with YOU), YOU below the line. */
.annotation-avg {
  bottom: calc(100% + 0.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  transform: translateX(-50%);
}
.annotation-avg .ann-arrow {
  font-size: 1.1em;
  line-height: 0.6;
  margin-top: 0.05em;
  color: var(--ink);
}

/* Inside the stage, far enough below the line that typical user strokes
   (which extend downward from the line) won't run through it. The doubled
   paper-color text shadow keeps it legible if a long stroke does overlap. */
.annotation-you {
  top: calc(50% + 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--you);
  letter-spacing: 1px;
  transform: translateX(-50%) rotate(-4deg);
  text-shadow: 0 0 4px var(--paper), 0 0 4px var(--paper);
}
.annotation-you .ann-arrow {
  font-size: 0.7em;
  line-height: 0.6;
  color: var(--you);
  transform: rotate(4deg); /* compensate for parent rotation */
}


/* =====================================================================
   Legend
   ===================================================================== */

.legend {
  font-family: var(--font-note);
  font-size: clamp(0.9rem, 2vw, 1rem);
  margin: 2rem 0 1.25rem;
  color: var(--pencil);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
}
.swatch-you   { background: var(--you); }
.swatch-avg   { background: var(--ink); }
.swatch-other { background: var(--pencil); opacity: 0.5; }

/* =====================================================================
   Scratch-paper stats card
   ===================================================================== */

.scratch-paper {
  position: relative;
  margin: 2rem 0 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--paper-warm);
  border: 2.5px dashed rgba(42, 57, 80, 0.32);
  border-radius: 12px;
  font-family: var(--font-script);
  font-size: clamp(1.2rem, 3.5vw, 1.55rem);
  line-height: 1.85;
  transform: rotate(-0.5deg);
  box-shadow: 4px 5px 0 rgba(42, 57, 80, 0.1);
}

.scratch-tab {
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  background: var(--paper);
  padding: 0 0.7rem;
  font-family: var(--font-note);
  font-size: 0.85rem;
  color: var(--pencil);
  letter-spacing: 0.5px;
  transform: rotate(-1.5deg);
}

.scratch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}

.scratch-label {
  color: var(--pencil);
}

.scratch-eq {
  color: var(--pencil);
  opacity: 0.6;
}

.scratch-value {
  font-weight: 700;
  color: var(--ink);
  background: var(--highlight);
  padding: 0 0.4rem;
  border-radius: 3px;
}

.scratch-emph {
  background: var(--highlight-deep);
  font-size: 1.15em;
}

/* =====================================================================
   Floating decorative doodles
   ===================================================================== */

.doodle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: scribble-in 0.6s ease-out forwards;
}

.doodle-tally {
  top: 14rem;
  right: 1rem;
  width: 60px;
  --rot-to: 8deg;
  animation-delay: 1.7s;
}
.doodle-tally svg { opacity: 0.55; }

.doodle-asterisk {
  bottom: 5rem;
  left: 1rem;
  width: 36px;
  --rot-to: -15deg;
  animation-delay: 2.0s;
}
.doodle-asterisk svg { opacity: 0.7; }

@media (max-width: 700px) {
  .doodle-tally    { top: auto; right: 0.5rem; bottom: 1rem; }
  .doodle-asterisk { display: none; }
}

/* =====================================================================
   Results-only marginalia — "post-mortem" cluster of spoilery hints
   that only appear after the user submits.
   ===================================================================== */

.m-note-strike { text-decoration: line-through; opacity: 0.65; }

/* Sit below the persistent cluster (which ends at top: ~17.5rem) so both
   are visible together once the user has submitted. */
.m-note-rs-1 {
  top: 20rem;
  right: 1.25rem;
  transform: rotate(-3deg);
}
.m-note-rs-2 {
  top: 22.5rem;
  right: 0.75rem;
  transform: rotate(2deg);
}
.m-note-rs-3 {
  top: 25.25rem;
  right: 1.5rem;
  transform: rotate(-4deg);
  font-style: italic;
}
.m-note-rs-4 {
  top: 27.75rem;
  right: 0.75rem;
  transform: rotate(2.5deg);
  color: var(--ink);
}