/* Q5 in depth: a deck of five loop cards; each plays its loop while it is in front.
   Everything the scroll moves is set from q5.js as a transform, an opacity or a 0..1 variable, so
   nothing here transitions it: a transition would trail behind the scrub. */
.q5-scene { height: 1100vh; }
.q5 { grid-template-rows: auto minmax(0, 1fr); }
/* On the landing the chapter heading sits in the pin too, so the whole chapter fits one screen. */
.q5.has-h { grid-template-rows: auto auto minmax(0, 1fr); }
.q5-top { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.q5-top p { margin: 0; }
.q5-top .mz-fact { margin-top: 6px; }
.q5-ver { display: grid; justify-items: end; gap: 2px; }
.q5-ver b { font: 600 clamp(28px, 3.4vw, 52px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.q5-stage { perspective: 1600px; }
.q5-card { position: absolute; left: 50%; top: 50%; width: min(1040px, 92vw); max-height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border-radius: 30px; background: #f3f1ec; box-shadow: 0 0 0 1px var(--hairline), 0 40px 80px -50px rgba(20, 20, 30, 0.45); will-change: transform, opacity; }
.q5-l, .q5-r { position: relative; min-width: 0; display: grid; gap: 12px; align-content: center; }

/* Flights: a gold pill on an arc, with sparks trailing it. */
.q5-fly { position: absolute; left: 0; top: 0; z-index: 5; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: #fdf6e6; box-shadow: 0 0 0 1.5px var(--gold), 0 18px 30px -14px rgba(122, 98, 49, 0.5); font-size: 11.5px; line-height: 1.35; color: #4b3d1f; opacity: 0; pointer-events: none; }
.q5-spark { position: absolute; left: 0; top: 0; z-index: 4; width: calc(var(--s) * 9px); height: calc(var(--s) * 9px); border-radius: 50%; background: radial-gradient(circle, #f6dc9a, rgba(201, 166, 97, 0) 70%); opacity: 0; pointer-events: none; }

/* Memory, as on the landing. */
.q5-mem { display: grid; gap: 6px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.q5-mem header { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.q5-mface { width: 24px; height: 24px; } .q5-mface .agent-persona { width: 100%; height: 100%; }
.q5-mver { margin-left: auto; font-size: 11px; color: var(--grey-2); font-variant-numeric: tabular-nums; }
.q5-rows { position: relative; display: grid; gap: 5px; }
.q5-row { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: #faf9f6; box-shadow: 0 0 0 1px var(--hairline); font-size: 13.5px; line-height: 1.35; overflow: hidden; transition: background-color 400ms, color 400ms; }
.q5-row > .mono { font-size: 10.5px; color: var(--grey-2); }
.q5-v { font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #f0eee8; color: var(--grey-2); white-space: nowrap; }
.q5-v:empty { display: none; }
.q5-v.is-good { background: rgba(201, 166, 97, 0.22); color: #7a6231; } .q5-v.is-bad { background: rgba(180, 68, 44, 0.12); color: #b4442c; }
/* A row coming in opens its own height first, then shows, then flashes gold where it landed. */
.q5-row.is-new { --in: 0; --hit: 0; max-height: calc(var(--in) * 90px); padding-block: calc(var(--in) * 8px); opacity: var(--in); transform: translateY(calc((1 - var(--in)) * -8px)); background: #fdf6e6; box-shadow: 0 0 0 1.5px var(--gold), 0 0 calc(var(--hit) * 28px) rgba(201, 166, 97, calc(var(--hit) * 0.8)); }
.q5-row.is-new > .mono { color: #7a6231; }
.q5-row.is-rule > .mono::after { content: " · rule"; color: #7a6231; }
.q5-card--skill .q5-row.is-rule { box-shadow: 0 0 0 1.5px var(--gold); }
.q5-row.is-skill { background: linear-gradient(135deg, #1a1915, #0e0d0b) !important; color: #f1f0eb; } .q5-row.is-skill > .mono { color: var(--gold) !important; }
.q5-note { --note: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; justify-self: start; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); font-size: 13px; }
.q5-card .q5-note { opacity: var(--note, 0); transform: translateY(calc((1 - var(--note, 0)) * 6px)); }
.q5-note .agent-persona { width: 22px; height: 22px; }

/* 1 · the edit: your cursor, your selection, your Approve. */
.q5-post { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.q5-post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.q5-post-b { display: grid; align-content: center; gap: 10px; }
.q5-post-b > .mono { font-size: 11px; color: var(--grey-2); }
.q5-cap { margin: 0; min-height: 2.6em; font: 600 clamp(17px, 1.7vw, 24px)/1.25 var(--sans); letter-spacing: -0.02em; color: var(--grey-1); }
.q5-cap.is-new { color: var(--ink); }
.q5-cap mark { background: rgba(77, 127, 209, 0.28); color: inherit; border-radius: 3px; }
.q5-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: q5-blink 900ms steps(1) infinite; }
.q5-cap.is-done .q5-caret { display: none; }
@keyframes q5-blink { 50% { opacity: 0; } }
.q5-by { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--grey-2); }
.q5-you { padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; opacity: var(--you, 0); }
.q5-btn { position: relative; justify-self: start; overflow: visible; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px var(--sans); transition: background-color 200ms; }
.q5-btn.is-on { background: #3f8f5a; }
.q5-ripple { position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px #3f8f5a; opacity: 0; pointer-events: none; }
.q5-cursor { position: absolute; left: 0; top: 0; z-index: 7; width: 22px; height: 22px; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }

/* 2 · the review */
.q5-review { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.q5-review header { display: flex; align-items: center; gap: 8px; } .q5-review header .agent-persona { width: 28px; height: 28px; }
.q5-review header .mono { margin-left: auto; font-size: 11px; color: var(--grey-2); }
.q5-bar { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-1); }
.q5-bar i { height: 10px; border-radius: 5px; background: #f0eee8; overflow: hidden; }
.q5-bar i b { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: #d3cec2; transform-origin: left; transform: scaleX(var(--g, 0)); }
.q5-bar.is-win i b { background: color-mix(in srgb, var(--gold) calc(var(--won, 0) * 100%), #d3cec2); box-shadow: 0 0 calc(var(--won, 0) * 14px) rgba(201, 166, 97, 0.6); }
.q5-bar.is-win { color: color-mix(in srgb, var(--ink) calc(var(--won, 0) * 100%), var(--grey-1)); font-weight: 600; }
.q5-bar em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(201, 166, 97, 0.22); color: #7a6231; font-variant-numeric: tabular-nums; }
.q5-foot-note { margin: 0; font-size: 10.5px; color: var(--grey-2); }
.q5-says { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 500; }
.q5-watch { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--grey-2); opacity: var(--watch, 0); }
.q5-watch i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold); }

/* 3 · the night: the sky, the beam, the stamp, the crumble. */
.q5-sky { position: relative; min-height: 300px; padding: 22px; border-radius: 22px; overflow: hidden; align-content: end; color: var(--ink); transition: color 500ms; }
.q5-card--night.is-dark .q5-sky { color: #f1f0eb; }
.q5-stars i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: calc(var(--stars, 0) * 0.75); animation: q5-twinkle 2.6s var(--tw) ease-in-out infinite; }
@keyframes q5-twinkle { 50% { scale: 0.4; } }
.q5-moon, .q5-sun { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; }
.q5-moon { width: 54px; height: 54px; box-shadow: inset -14px 8px 0 0 #e9d6a6, 0 0 30px rgba(233, 214, 166, 0.15); }
.q5-sun { width: 60px; height: 60px; background: radial-gradient(circle, #f6c04f, #f19d3c); box-shadow: 0 0 50px rgba(246, 176, 70, 0.7); }
.q5-clock { position: relative; font: 600 clamp(44px, 5vw, 72px)/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.q5-sky p { position: relative; margin: 0; font-size: 15px; line-height: 1.45; max-width: 32ch; opacity: 0.8; }
.q5-count { font-size: 12px !important; opacity: 1 !important; color: var(--gold); }
.q5-card--night.is-dark .q5-mem { background: #1b1a17; box-shadow: 0 0 0 1px #2c2a24; color: #e9e6dd; transition: background-color 400ms; }
.q5-card--night.is-dark .q5-mem header { border-color: #2c2a24; }
.q5-card--night.is-dark .q5-row { background: #23211c; box-shadow: 0 0 0 1px #2f2c26; color: #d8d4ca; }
.q5-beam { position: absolute; left: -4px; right: -4px; top: 0; z-index: 2; border-radius: 13px; box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(201, 166, 97, 0.5); background: linear-gradient(90deg, rgba(201, 166, 97, 0), rgba(201, 166, 97, 0.18), rgba(201, 166, 97, 0)); opacity: 0; pointer-events: none; }
.q5-card--night .q5-v { transform-origin: right center; }
/* Promoted: a gold ring tightens and a shine sweeps across once. */
.q5-row[data-key="n5"] { box-shadow: 0 0 0 calc(var(--rule, 0) * 1.5px) var(--gold), 0 0 calc(var(--rule, 0) * 20px) rgba(201, 166, 97, 0.35), 0 0 0 1px var(--hairline) !important; }
.q5-row[data-key="n5"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 190, 0.55) 50%, transparent 70%); transform: translateX(calc(-100% + var(--shine, 0) * 200%)); pointer-events: none; }
/* Let go: the letters blow away (q5.js), the row tints, then gives back its height. */
.q5-row.is-going { --in: 1; --d: 0; max-height: calc(var(--in) * 90px); padding-block: calc(var(--in) * 8px); margin-block: calc((var(--in) - 1) * 2.5px); opacity: calc(0.2 + var(--in) * 0.8); overflow: visible; background: color-mix(in srgb, rgba(180, 68, 44, 0.22) calc(var(--d) * 100%), #23211c) !important; }
.q5-row.is-going > span.mono { opacity: calc(1 - var(--d)); }
.q5-w { display: inline-block; white-space: nowrap; }
.q5-w i { display: inline-block; font-style: normal; }

/* 4 · the launches, the orbs, Chip */
.q5-lns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.q5-ln { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); opacity: 0; overflow: hidden; }
.q5-ln img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.q5-ln header b { display: block; font-size: 13.5px; } .q5-ln header .mono { font-size: 10.5px; color: var(--grey-2); }
.q5-ln ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.q5-ln li { padding: 4px 8px; border-radius: 8px; background: #f3f1ec; font-size: 11.5px; transition: background-color 250ms, box-shadow 250ms, color 250ms; }
.q5-ln li.is-miss { text-decoration: line-through; color: var(--grey-3); }
.q5-ln li.is-lit:not(.is-miss) { background: #fdf6e6; box-shadow: inset 0 0 0 1px rgba(201, 166, 97, 0.6); }
.q5-ln li.is-now:not(.is-miss) { background: var(--gold); color: var(--ink); box-shadow: 0 0 16px rgba(201, 166, 97, 0.55); }
.q5-tallyside { opacity: calc(1 - var(--fade, 0) * 0.9); filter: blur(calc(var(--fade, 0) * 3px)); }
.q5-tally { list-style: none; margin: 0; padding: 12px; display: grid; gap: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.q5-tally li { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; opacity: 0.25; transition: opacity 250ms, background-color 250ms; }
.q5-tally li b { font-size: 11px; color: #7a6231; }
.q5-tally li.is-lit { opacity: 1; } .q5-tally li.is-now { background: #fdf6e6; }
.q5-card--launches .q5-note { opacity: var(--note, 0); transform: none; }
.q5-card--launches #pattern { opacity: var(--pattern, 0); }
.q5-absorb { --spin: 0deg; --glow: 0; --burst: 0; position: absolute; left: 50%; top: 50%; z-index: 6; width: 230px; height: 230px; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.q5-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 214, 140, 0.85), rgba(201, 166, 97, 0) 65%); opacity: var(--glow); transform: scale(calc(0.8 + var(--glow) * 0.5)); }
.q5-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(201, 166, 97, 0.8); transform: rotate(var(--spin)) scale(calc(1 - var(--burst) * 0.12)); }
.q5-ray { position: absolute; left: 50%; top: 50%; width: 2px; height: 18px; margin: -9px -1px; border-radius: 2px; background: var(--gold); transform: rotate(var(--a)) translateY(calc(-70px - var(--burst) * 70px)) scaleY(calc(1 - var(--burst) * 0.6)); opacity: calc(min(1, var(--burst) * 10) * (1 - var(--burst))); }
.q5-chip { position: relative; width: 124px; height: 124px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 calc(30px + var(--glow) * 40px) calc(var(--glow) * 10px) rgba(201, 166, 97, 0.4), var(--sheet-shadow); }
.q5-chip .agent-persona { width: 96px; height: 96px; }
.q5-absorb-say { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; margin: 0; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); white-space: nowrap; color: #7a6231; font-size: 11px; }
.q5-orb { position: absolute; left: 0; top: 0; z-index: 7; width: 74px; height: 74px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(201, 166, 97, 0.6); opacity: 0; pointer-events: none; }
.q5-orb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.q5-orb b { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; font-size: 9.5px; font-weight: 500; color: #7a6231; }
.q5-token { position: absolute; left: 50%; top: 50%; z-index: 8; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; padding: 12px 18px; border-radius: 18px; background: linear-gradient(135deg, #1a1915, #0e0d0b); color: #f1f0eb; box-shadow: 0 0 0 1.5px var(--gold), 0 24px 40px -18px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; }
.q5-token .mono { grid-column: 1 / -1; font-size: 10px; color: var(--gold); } .q5-token b { white-space: nowrap; font: 600 20px var(--sans); letter-spacing: -0.02em; }
.q5-token-dots { display: flex; gap: 4px; } .q5-token-dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(201, 166, 97, 0.6); }
.q5-token-dots i.is-on { background: var(--gold); }

/* 5 · the skill: the crew hands itself out, one face per step. */
.q5-skill { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, #1a1915, #0e0d0b); color: #f1f0eb; box-shadow: 0 0 0 1.5px rgba(201, 166, 97, 0.9); transform-origin: center; }
.q5-skill-top { display: flex; align-items: center; justify-content: space-between; }
.q5-skill-top > .mono { font-size: 11px; color: var(--gold); }
.q5-crew { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.q5-crew > span { display: grid; width: 26px; height: 26px; }
.q5-skill > b { font: 600 26px var(--sans); letter-spacing: -0.03em; }
.q5-skill ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.q5-skill li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; opacity: 0; }
.q5-slot { --seat: 0; position: relative; display: grid; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(201, 166, 97, 0.45), 0 0 calc(var(--seat) * 18px) rgba(201, 166, 97, calc(var(--seat) * 0.8)); }
.q5-slot > * { position: relative; z-index: 3; }
.q5-skill li em { font-style: normal; font-size: 10.5px; color: #8a857c; transition: color 250ms; }
.q5-skill li.is-seated em { color: #d8c38f; }
.q5-skill dl { margin: 4px 0 0; display: grid; gap: 6px; }
.q5-skill dl div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 13px; opacity: 0; }
.q5-skill dt { font-size: 10.5px; color: #8a857c; } .q5-skill dd { margin: 0; color: #d8d4ca; }
.q5-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 6px; opacity: var(--sum, 0); transform: translateY(calc((1 - var(--sum, 0)) * 8px)); }
.q5-sum > span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.q5-sum b { font: 600 20px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.q5-sum small { font-size: 9.5px; color: var(--grey-2); }
.q5-sum .q5-sum-you { background: #fdf6e6; box-shadow: 0 0 0 1.5px var(--gold); } .q5-sum-you b { font-size: 15px; }


@media (prefers-reduced-motion: reduce) {
  .q5-stars i, .q5-caret { animation: none; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .q5-card { padding: 16px; gap: 16px; } .q5-post img { aspect-ratio: 1; } .q5-row { padding: 6px 10px; font-size: 12.5px; }
  .q5-ln img { aspect-ratio: 2; } .q5-sky { min-height: 220px; } .q5-bar { font-size: 12px; } .q5-review { gap: 7px; }
}
@media (max-width: 900px) {
  .q5-top { align-items: start; } .q5-ver b { font-size: 26px; }
  .q5-card { grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 22px; align-content: start; overflow: hidden; }
  .q5-l, .q5-r { gap: 8px; }
  .q5-post { grid-template-columns: 90px 1fr; padding: 8px; } .q5-post img { aspect-ratio: 1; }
  .q5-cap { font-size: 16px; min-height: 2.5em; }
  .q5-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 6px 9px; font-size: 12px; }
  .q5-row.is-new, .q5-row.is-going { padding-block: calc(var(--in) * 6px); }
  .q5-row > .mono { grid-column: 1; } .q5-rt { grid-column: 1 / -1; } .q5-v { grid-column: 2; grid-row: 1; }
  .q5-mem { padding: 8px; } .q5-mem header { font-size: 13px; }
  .q5-review { padding: 10px; gap: 6px; } .q5-bar { grid-template-columns: 110px 1fr auto; font-size: 11px; }
  .q5-sky { min-height: 0; padding: 12px; } .q5-moon, .q5-sun { width: 34px; height: 34px; }
  .q5-card--night .q5-rows { gap: 3px; } .q5-card--night .q5-row { padding: 4px 8px; font-size: 11.5px; } .q5-card--night .q5-row > span.mono { display: none; } .q5-card--night .q5-v { grid-column: 2; } .q5-card--night .q5-rt { grid-column: 1; }
  .q5-card--night .q5-row.is-going { padding-block: calc(var(--in) * 4px); }
  .q5-sky p:not(.q5-count) { display: none; } .q5-clock { font-size: 32px; }
  .q5-lns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .q5-ln { padding: 6px; gap: 5px; } .q5-ln img { aspect-ratio: 16 / 10; }
  .q5-ln li { font-size: 9.5px; padding: 3px 5px; } .q5-ln header b { font-size: 11.5px; }
  .q5-tally { padding: 6px; gap: 2px; } .q5-tally li { padding: 4px 8px; font-size: 12px; }
  .q5-absorb { width: 170px; height: 170px; } .q5-chip { width: 96px; height: 96px; } .q5-chip .agent-persona { width: 74px; height: 74px; }
  .q5-ray { transform: rotate(var(--a)) translateY(calc(-52px - var(--burst) * 50px)) scaleY(calc(1 - var(--burst) * 0.6)); }
  .q5-orb { width: 56px; height: 56px; }
  .q5-skill { padding: 12px; gap: 6px; } .q5-skill > b { font-size: 20px; } .q5-skill li { font-size: 12.5px; }
  .q5-card--skill .q5-rows .q5-row:nth-child(n+4) { display: none; } .q5-skill dl, .q5-skill li em { display: none; }
  .q5-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } .q5-sum-you { grid-column: 1 / -1; } .q5-sum b { font-size: 16px; }
  .q5-fly { max-width: 200px; font-size: 10.5px; }
}