/* QuickScribble promotion page.
   Colors and fonts are prototype 1's, so the page and the app look like one product
   (promotion_design.md, section 5.1). The fonts are loaded in index.html. */

:root {
  --paper: #F2E8D5;       /* background */
  --ink: #2A211A;         /* text, rules */
  --accent: #8B2F23;      /* buttons, the stamp */
  --muted: #5E4630;       /* secondary text */
  --card: #FBF6EC;        /* cards */
  --line: #D9C7A6;        /* paper lines */
  --card-border: #CDB896; /* card borders */

  --font-body: 'Gowun Batang', serif;
  --font-label: 'Nanum Gothic Coding', monospace;

  --column: 36rem;        /* the single column's widest */
  --gutter: 20px;         /* the prototype's side margin */

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  word-break: keep-all;     /* Korean breaks between words, not inside them */
  overflow-wrap: break-word;
}

b {
  font-weight: 700;
}

/* Phone first: one column, as wide as the screen, centered on wider screens. */
.page,
.footer {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.label {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The form and the thank-you swap with `hidden` (main.js); nothing may show them. */
[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 1. Hero ---------- */

.hero {
  padding-top: 40px;
}

/* The name sits under a double rule, like "퀵노트" in the 패널. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 3px double var(--ink);
}

.logo {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.name-ko {
  white-space: nowrap;
}

.problem {
  margin: 28px 0 0;
  color: var(--muted);
}

.headline {
  margin: 28px 0 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.lead {
  margin: 14px 0 0;
}

/* ---------- Sections ---------- */

.section {
  margin-top: 64px;
}

/* Section headings under a single rule; the double rule is the brand's. */
h2 {
  margin: 0 0 16px;
  padding-top: 10px;
  border-top: 1.5px solid var(--ink);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.45;
}

h3 {
  margin: 12px 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

p {
  margin: 0 0 12px;
}

/* 개발 중 / 계획 중: a small label with a border, like a rubber stamp. */
.mark {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--accent);
  white-space: nowrap;
  vertical-align: 0.15em;
}

.mark-plan {
  border-color: var(--muted);
  border-style: dashed;
  color: var(--muted);
}

/* ---------- Animations and illustrations: empty frames until steps 6–8 ---------- */

.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  margin-top: 28px;
}

.steps-box {
  flex: 1 1 14rem;
}

.steps {
  margin: 8px 0 0;
  padding-left: 1.4em;
}

.steps li + li {
  margin-top: 6px;
}

.steps li::marker {
  font-family: var(--font-label);
  color: var(--accent);
}

/* The illustrations (section 5.3): their edges already fade into the paper. */
.art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---------- 2. Four ways in ---------- */

.ways {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.ways li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ways li:first-child {
  padding-top: 0;
}

.way-head {
  display: block;
}

/* Whether the way works over the lock: accent if it does, muted if not. */
.way-lock {
  margin-left: 4px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--accent);
  white-space: nowrap;
}

.way-unlock {
  color: var(--muted);
}

/* The AI clips: portrait ones at about phone-in-hand size, v2 (landscape)
   across the column. */
.clip {
  margin: 12px 0 0;
}

.clip img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 6px;
}

.clip-wide img {
  max-width: none;
}

/* Portrait clips (v1, v3, v4): text on the left, the clip beside it. */
.way-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: 0 16px;
  align-items: start;
}

/* The narrow text column puts the tag under the name. */
.way-split .way-lock {
  display: block;
  margin-left: 0;
}

.way-split .clip {
  margin: 0;
}

.way-split .clip img {
  max-width: 240px;
}

.clip figcaption {
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

.clip-note {
  margin-bottom: 12px;
}

/* ---------- 3. Four moments ---------- */

.moments {
  display: grid;
  gap: 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.moment p {
  margin: 0;
}

/* ---------- 4. From idea to writing ---------- */

.flow {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.flow li {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 1.5px solid var(--line);
  margin-left: 6px;
}

.flow li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

/* A dot on the line for each state. */
.flow li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.flow b {
  display: block;
}

/* ---------- 6. Trust ---------- */

.trust {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.trust li:first-child {
  padding-top: 0;
}

.trust b {
  display: block;
}

/* ---------- 7. Survey ---------- */

.form {
  margin-top: 24px;
}

.q {
  margin: 0 0 16px;
  padding: 14px 16px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: 6px;
  background: var(--card);
}

.q legend {
  float: left;      /* keeps the legend inside the card on every browser */
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 700;
  line-height: 1.55;
}

.q legend + * {
  clear: left;
}

.q-no {
  display: inline-block;
  min-width: 1.5em;
  font-family: var(--font-label);
  font-weight: 400;
  color: var(--accent);
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

/* Each choice is a whole row, at least 44px high, so it's easy to tap. */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}

.choice + .choice {
  border-top: 1px solid var(--line);
}

/* Question 3 after two are checked (main.js). */
.choice.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.opinion {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;     /* 16px or more, so phones don't zoom in on focus */
  line-height: 1.7;
  resize: vertical;
}

.opinion::placeholder {
  color: #7A6148;
}

.opinion:focus,
.choice input:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.form-status {
  min-height: 1.5em;
  margin: 0 0 8px;
  color: var(--accent);
}

.form-status:empty {
  min-height: 0;
}

/* Like the 패널's 저장 button. */
.button {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--accent);
  color: var(--card);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.privacy {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

/* After sending: replaces the form (section 3.2). */
.thanks {
  margin-top: 24px;
  padding: 20px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: 6px;
  background: var(--card);
}

.thanks:focus {
  outline: none;    /* focused only so screen readers start here */
}

/* Like the 저장됨 stamp. */
.thanks-title {
  display: inline-block;
  margin: 0 0 14px;
  padding: 2px 14px;
  border: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: rotate(-3deg);
}

.thanks .button {
  margin-top: 8px;
}

.share-status {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
  overflow-wrap: anywhere;   /* the address may have to wrap */
}

.share-status:empty {
  margin: 0;
}

/* ---------- Animations (promotion_design.md, section 5.2; plan steps 7, 8) ---------- */

/* The parts live in the hidden sprite at the top of index.html. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* A phone: the screen inside a dark bezel. */
.phone {
  flex: none;
  margin: 0 auto;
  padding: 5px;
  border-radius: 28px;
  background: #1B1B1B;
}

.phone svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}

/* Galaxy Z Fold5 cover screen (D13): 904 × 2316 px, 344 × 882 dp. */
.phone-cover {
  width: 210px;
}

/* Main screen: 1812 × 2176 px, 690 × 829 dp. As wide as the column allows,
   so its text is about as big as the cover screen's. */
.phone-main {
  width: 100%;
  max-width: 420px;
}

/* With reduced motion, still frames replace the animation. */
.stills {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.still {
  margin: 0;
}

.still svg {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #1B1B1B;
  border-radius: 12px;
  background: #1B1B1B;
}

.still figcaption {
  margin-top: 4px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .phone {
    display: none;
  }

  .stills {
    display: grid;
  }
}

.qs-finger {
  fill: #FFFFFF;
  fill-opacity: 0.5;
  stroke: #2A211A;
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

/* One 13 s timeline for every part. Times in the comments are seconds.
   The 패널's phases (qs-*) are the same in A and B; each has its own way
   in before 2.6 s, its own typing, and its own finger:
   2.6 패널 opens · 3.7–7.8 typing · 8.2 저장 tapped · 8.4 저장됨 · 9.5 closes. */

.anim .qa-shade,
.anim .qs-keyboard,
.anim .qs-stamp,
.anim .qs-clip {
  transform-box: fill-box;
}

.anim .qa-shade { animation: qa-shade 13s infinite; }
.anim .qa-tile-press { animation: qa-tile-press 13s infinite; }
.anim .qa-finger { animation: qa-finger 13s infinite; }
.anim .qs-panel { animation: qs-panel 13s infinite; }
.anim .qs-keyboard { animation: qs-keyboard 13s infinite; }
.anim .qs-placeholder { animation: qs-placeholder 13s step-end infinite; }
.anim .qs-save { animation: qs-save 13s step-end infinite; }
.anim .qs-saved { animation: qs-saved 13s step-end infinite; }
.anim .qs-stamp { transform-origin: center; animation: qs-stamp 13s infinite; }
.anim .qa-caret { animation: qa-caret-move 13s step-end infinite, qs-caret-blink 13s step-end infinite; }
.anim .qs-clip { transform-origin: 0 50%; }
.anim .qa-clip-1 { animation: qa-type-1 13s step-end infinite; }
.anim .qa-clip-2 { animation: qa-type-2 13s step-end infinite; }
.anim .qa-clip-3 { animation: qa-type-3 13s step-end infinite; }
.anim .qb-card-press { animation: qb-card-press 13s infinite; }
.anim .qb-finger { animation: qb-finger 13s infinite; }
.anim .qb-caret { animation: qb-caret-move 13s step-end infinite, qs-caret-blink 13s step-end infinite; }
.anim .qb-clip-1 { animation: qb-type-1 13s step-end infinite; }
.anim .qb-clip-2 { animation: qb-type-2 13s step-end infinite; }

/* 0.85–1.45 the shade comes down; 2.6–2.75 it goes as the 패널 opens. */
@keyframes qa-shade {
  0%, 6.54% { transform: translateY(-100%); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  11.15% { transform: translateY(0); opacity: 1; }
  20% { transform: translateY(0); opacity: 1; }
  21.15%, 100% { transform: translateY(0); opacity: 0; }
}

/* 2.15–2.6 the 퀵노트 tile lights up under the finger. */
@keyframes qa-tile-press {
  0%, 16.54% { opacity: 0; }
  17.31%, 19.23% { opacity: 0.3; }
  20.77%, 100% { opacity: 0; }
}

/* 0.8–1.6 swipe down; 1.9–2.5 tap the tile; 8.0–8.55 tap 저장. */
@keyframes qa-finger {
  0%, 6.15% { opacity: 0; transform: translate(172px, 24px) scale(1); }
  6.92% { opacity: 1; transform: translate(172px, 24px) scale(1); animation-timing-function: ease-in-out; }
  11.15% { opacity: 1; transform: translate(172px, 300px) scale(1); }
  12.31% { opacity: 0; transform: translate(172px, 300px) scale(1); }
  13.08%, 14.62% { opacity: 0; transform: translate(292px, 110px) scale(1); }
  15.38% { opacity: 1; transform: translate(292px, 110px) scale(1); }
  16.54% { opacity: 1; transform: translate(292px, 110px) scale(0.82); }
  17.69% { opacity: 1; transform: translate(292px, 110px) scale(1); }
  19.23% { opacity: 0; transform: translate(292px, 110px) scale(1); }
  20%, 61.54% { opacity: 0; transform: translate(286px, 70px) scale(1); }
  62.31% { opacity: 1; transform: translate(286px, 70px) scale(1); }
  63.08% { opacity: 1; transform: translate(286px, 70px) scale(0.82); }
  64.23% { opacity: 1; transform: translate(286px, 70px) scale(1); }
  65.77%, 100% { opacity: 0; transform: translate(286px, 70px) scale(1); }
}

/* 2.6–2.9 the 패널 rises over the lock screen, opaque by 2.75 so the lock
   screen doesn't show through; 9.5–9.8 it closes. */
@keyframes qs-panel {
  0%, 20% { opacity: 0; transform: translateY(24px); animation-timing-function: ease-out; }
  21.15% { opacity: 1; }
  22.31%, 73.08% { opacity: 1; transform: translateY(0); }
  75.38%, 100% { opacity: 0; transform: translateY(0); }
}

/* 2.8–3.2 the keyboard opens in the text; 8.4–8.7 it closes for 저장됨. */
@keyframes qs-keyboard {
  0%, 21.54% { transform: translateY(100%); animation-timing-function: ease-out; }
  24.62%, 64.62% { transform: translateY(0); animation-timing-function: ease-in; }
  66.92%, 100% { transform: translateY(100%); }
}

/* 3.7 the first character: the placeholder goes, 저장 turns solid. */
@keyframes qs-placeholder {
  0% { opacity: 1; }
  28.46%, 100% { opacity: 0; }
}

/* 8.2–8.35 pressed. */
@keyframes qs-save {
  0% { opacity: 0.45; }
  28.46% { opacity: 1; }
  63.08% { opacity: 0.8; }
  64.23%, 100% { opacity: 1; }
}

/* 8.4 저장됨; the stamp lands by 8.6. */
@keyframes qs-saved {
  0% { opacity: 0; }
  64.62%, 100% { opacity: 1; }
}

@keyframes qs-stamp {
  0%, 64.62% { opacity: 0; transform: scale(1.35); animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1.4); }
  66.15%, 100% { opacity: 1; transform: scale(1); }
}

/* The caret blinks in the text from 3.1, is steady while typing, and goes at 8.4. */
@keyframes qs-caret-blink {
  0% { opacity: 0; }
  23.85% { opacity: 1; }
  26.54% { opacity: 0; }
  28.46% { opacity: 1; }
  64.62%, 100% { opacity: 0; }
}

/* A's typing, one syllable every 0.1 s from 3.7 (widths from Gowun Batang at 19 sp). */
@keyframes qa-type-1 {
  0% { transform: scaleX(0); }
  28.46% { transform: scaleX(0.094); }
  29.23% { transform: scaleX(0.198); }
  30% { transform: scaleX(0.231); }
  30.77% { transform: scaleX(0.330); }
  31.54% { transform: scaleX(0.364); }
  32.31% { transform: scaleX(0.459); }
  33.08% { transform: scaleX(0.556); }
  33.85% { transform: scaleX(0.660); }
  34.62% { transform: scaleX(0.693); }
  35.38% { transform: scaleX(0.797); }
  36.15% { transform: scaleX(0.896); }
  36.92% { transform: scaleX(1.000); }
}
@keyframes qa-type-2 {
  0% { transform: scaleX(0); }
  39.62% { transform: scaleX(0.086); }
  40.38% { transform: scaleX(0.115); }
  41.15% { transform: scaleX(0.203); }
  41.92% { transform: scaleX(0.286); }
  42.69% { transform: scaleX(0.378); }
  43.46% { transform: scaleX(0.407); }
  44.23% { transform: scaleX(0.495); }
  45% { transform: scaleX(0.584); }
  45.77% { transform: scaleX(0.676); }
  46.54% { transform: scaleX(0.705); }
  47.31% { transform: scaleX(0.793); }
  48.08% { transform: scaleX(0.885); }
  48.85% { transform: scaleX(0.972); }
  49.62% { transform: scaleX(1.000); }
}
@keyframes qa-type-3 {
  0% { transform: scaleX(0); }
  52.31% { transform: scaleX(0.113); }
  53.08% { transform: scaleX(0.222); }
  53.85% { transform: scaleX(0.260); }
  54.62% { transform: scaleX(0.371); }
  55.38% { transform: scaleX(0.481); }
  56.15% { transform: scaleX(0.588); }
  56.92% { transform: scaleX(0.626); }
  57.69% { transform: scaleX(0.734); }
  58.46% { transform: scaleX(0.772); }
  59.23% { transform: scaleX(0.890); }
  60% { transform: scaleX(1.000); }
}
@keyframes qa-caret-move {
  0% { transform: translate(24px, 210px); }
  28.46% { transform: translate(40.5px, 210px); }
  29.23% { transform: translate(58.8px, 210px); }
  30% { transform: translate(64.7px, 210px); }
  30.77% { transform: translate(82.1px, 210px); }
  31.54% { transform: translate(88.0px, 210px); }
  32.31% { transform: translate(104.8px, 210px); }
  33.08% { transform: translate(121.8px, 210px); }
  33.85% { transform: translate(140.1px, 210px); }
  34.62% { transform: translate(146.0px, 210px); }
  35.38% { transform: translate(164.2px, 210px); }
  36.15% { transform: translate(181.7px, 210px); }
  36.92% { transform: translate(199.9px, 210px); }
  38.65% { transform: translate(24px, 246px); }
  39.62% { transform: translate(41.1px, 246px); }
  40.38% { transform: translate(47.0px, 246px); }
  41.15% { transform: translate(64.5px, 246px); }
  41.92% { transform: translate(81.0px, 246px); }
  42.69% { transform: translate(99.2px, 246px); }
  43.46% { transform: translate(105.1px, 246px); }
  44.23% { transform: translate(122.6px, 246px); }
  45% { transform: translate(140.3px, 246px); }
  45.77% { transform: translate(158.5px, 246px); }
  46.54% { transform: translate(164.4px, 246px); }
  47.31% { transform: translate(181.9px, 246px); }
  48.08% { transform: translate(200.1px, 246px); }
  48.85% { transform: translate(217.6px, 246px); }
  49.62% { transform: translate(223.1px, 246px); }
  51.35% { transform: translate(24px, 282px); }
  52.31% { transform: translate(41.5px, 282px); }
  53.08% { transform: translate(58.4px, 282px); }
  53.85% { transform: translate(64.3px, 282px); }
  54.62% { transform: translate(81.4px, 282px); }
  55.38% { transform: translate(98.5px, 282px); }
  56.15% { transform: translate(115.0px, 282px); }
  56.92% { transform: translate(120.9px, 282px); }
  57.69% { transform: translate(137.6px, 282px); }
  58.46% { transform: translate(143.5px, 282px); }
  59.23% { transform: translate(161.8px, 282px); }
  60% { transform: translate(178.8px, 282px); }
}

/* B: 1.6–2.25 tap the 상시 알림; 8.0–8.55 tap 저장. */
@keyframes qb-finger {
  0%, 12.31% { opacity: 0; transform: translate(345px, 268px) scale(1); }
  13.08% { opacity: 1; transform: translate(345px, 268px) scale(1); }
  14.62% { opacity: 1; transform: translate(345px, 268px) scale(0.82); }
  15.77% { opacity: 1; transform: translate(345px, 268px) scale(1); }
  17.31% { opacity: 0; transform: translate(345px, 268px) scale(1); }
  20%, 61.54% { opacity: 0; transform: translate(632px, 70px) scale(1); }
  62.31% { opacity: 1; transform: translate(632px, 70px) scale(1); }
  63.08% { opacity: 1; transform: translate(632px, 70px) scale(0.82); }
  64.23% { opacity: 1; transform: translate(632px, 70px) scale(1); }
  65.77%, 100% { opacity: 0; transform: translate(632px, 70px) scale(1); }
}

/* 1.9–2.6 the notification darkens under the finger. */
@keyframes qb-card-press {
  0%, 14.62% { opacity: 0; }
  15.38%, 18.46% { opacity: 0.08; }
  20%, 100% { opacity: 0; }
}

/* B's typing, one syllable every 0.095 s from 3.7. */
@keyframes qb-type-1 {
  0% { transform: scaleX(0); }
  28.46% { transform: scaleX(0.045); }
  29.19% { transform: scaleX(0.093); }
  29.92% { transform: scaleX(0.135); }
  30.65% { transform: scaleX(0.150); }
  31.38% { transform: scaleX(0.194); }
  32.12% { transform: scaleX(0.238); }
  32.85% { transform: scaleX(0.253); }
  33.58% { transform: scaleX(0.297); }
  34.31% { transform: scaleX(0.341); }
  35.04% { transform: scaleX(0.389); }
  35.77% { transform: scaleX(0.404); }
  36.5% { transform: scaleX(0.452); }
  37.23% { transform: scaleX(0.497); }
  37.96% { transform: scaleX(0.544); }
  38.69% { transform: scaleX(0.560); }
  39.42% { transform: scaleX(0.604); }
  40.15% { transform: scaleX(0.620); }
  40.88% { transform: scaleX(0.666); }
  41.62% { transform: scaleX(0.708); }
  42.35% { transform: scaleX(0.751); }
  43.08% { transform: scaleX(0.795); }
  43.81% { transform: scaleX(0.810); }
  44.54% { transform: scaleX(0.855); }
  45.27% { transform: scaleX(0.897); }
  46% { transform: scaleX(0.940); }
  46.73% { transform: scaleX(0.986); }
  47.46% { transform: scaleX(1.000); }
}
@keyframes qb-type-2 {
  0% { transform: scaleX(0); }
  50.12% { transform: scaleX(0.091); }
  50.85% { transform: scaleX(0.187); }
  51.58% { transform: scaleX(0.217); }
  52.31% { transform: scaleX(0.307); }
  53.04% { transform: scaleX(0.396); }
  53.77% { transform: scaleX(0.482); }
  54.5% { transform: scaleX(0.513); }
  55.23% { transform: scaleX(0.602); }
  55.96% { transform: scaleX(0.697); }
  56.69% { transform: scaleX(0.728); }
  57.42% { transform: scaleX(0.821); }
  58.15% { transform: scaleX(0.911); }
  58.88% { transform: scaleX(1.000); }
}
@keyframes qb-caret-move {
  0% { transform: translate(24px, 210px); }
  28.46% { transform: translate(41.5px, 210px); }
  29.19% { transform: translate(59.7px, 210px); }
  29.92% { transform: translate(75.9px, 210px); }
  30.65% { transform: translate(81.8px, 210px); }
  31.38% { transform: translate(98.5px, 210px); }
  32.12% { transform: translate(115.6px, 210px); }
  32.85% { transform: translate(121.5px, 210px); }
  33.58% { transform: translate(138.2px, 210px); }
  34.31% { transform: translate(155.3px, 210px); }
  35.04% { transform: translate(173.5px, 210px); }
  35.77% { transform: translate(179.4px, 210px); }
  36.5% { transform: translate(197.7px, 210px); }
  37.23% { transform: translate(215.1px, 210px); }
  37.96% { transform: translate(233.4px, 210px); }
  38.69% { transform: translate(239.3px, 210px); }
  39.42% { transform: translate(256.4px, 210px); }
  40.15% { transform: translate(262.3px, 210px); }
  40.88% { transform: translate(279.9px, 210px); }
  41.62% { transform: translate(296.5px, 210px); }
  42.35% { transform: translate(313.0px, 210px); }
  43.08% { transform: translate(329.7px, 210px); }
  43.81% { transform: translate(335.6px, 210px); }
  44.54% { transform: translate(352.7px, 210px); }
  45.27% { transform: translate(369.0px, 210px); }
  46% { transform: translate(385.6px, 210px); }
  46.73% { transform: translate(403.0px, 210px); }
  47.46% { transform: translate(408.6px, 210px); }
  49.15% { transform: translate(24px, 246px); }
  50.12% { transform: translate(41.5px, 246px); }
  50.85% { transform: translate(59.7px, 246px); }
  51.58% { transform: translate(65.6px, 246px); }
  52.31% { transform: translate(82.7px, 246px); }
  53.04% { transform: translate(99.8px, 246px); }
  53.77% { transform: translate(116.3px, 246px); }
  54.5% { transform: translate(122.2px, 246px); }
  55.23% { transform: translate(139.3px, 246px); }
  55.96% { transform: translate(157.6px, 246px); }
  56.69% { transform: translate(163.5px, 246px); }
  57.42% { transform: translate(181.3px, 246px); }
  58.15% { transform: translate(198.4px, 246px); }
  58.88% { transform: translate(215.5px, 246px); }
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 72px;
  padding-bottom: 40px;
  font-size: 0.875rem;
  color: var(--muted);
}

.footer p {
  margin: 0 0 4px;
}

/* The rule sits on the first line, so it stays inside the side margins. */
.footer .label {
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 3px double var(--ink);
}