/* Entry stylesheet: the two themes, fonts and papers, base and motion, then the components in the order of the canvas. */
/* src/view/styles/light.css */
/* Light theme, the default: white paper, black ink and one paper colour for every exam. */

:root {
  color-scheme: light;
  --canvas: #ffffff;
  --ink: #000000;
  --ink-2: rgba(0, 0, 0, 0.66);
  --ink-3: rgba(0, 0, 0, 0.56);
  --rule: rgba(0, 0, 0, 0.12);
  --rule-2: rgba(0, 0, 0, 0.3);
  --hover: rgba(0, 0, 0, 0.04);
  --dotgrid: rgba(0, 0, 0, 0.1);
  --band-y: #fff6cf;
  --pill: rgba(0, 0, 0, 0.07);
  --band-b: #e9f1ff;
  --button: #2340b8;
  --button-ink: #ffffff;
  --button-line: #2340b8;
  --slot: #000000;
  --sheet: #ffffff;
  --sheet-ink: #000000;
  --sheet-ink-2: rgba(0, 0, 0, 0.64);
  --sheet-edge: rgba(0, 0, 0, 0.08);
  --lift: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 14px 20px rgba(0, 0, 0, 0.12));
  --lift-hi: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 22px 28px rgba(0, 0, 0, 0.16));
  --graphite: #2b2b2b;
  --graphite-ink: #ededed;
  --graphite-ink-2: rgba(237, 237, 237, 0.66);
  --graphite-rule: rgba(255, 255, 255, 0.12);
  --right: #0e7a3d;
  --wrong: #c8261c;
  --right-tint: rgba(14, 122, 61, 0.09);
  --wrong-tint: rgba(200, 38, 28, 0.08);
  --marker: #ffe24a;
  --ink-black: #111111;
  --ink-green: #0e7a3d;
  --ink-red: #c8261c;
  --ink-blue: #2340b8;
  --ink-gray: #4d4d4d;
  --ink-mustard: #8a5a00;
  --ink-green-deep: #045327;
  --ink-red-deep: #940503;
  --ink-mustard-deep: #644001;
  --wait: #8a5a00;
  --weak-bg: #ffe2c7;
  --weak-ink: #8a3b00;
  --strong-bg: #d3f0dd;
  --strong-ink: #0b5d2f;
  --p-e724: #ffe24a;
  --p-e725: #ffb8cc;
  --p-e722: #ff9e8a;
  --p-hya: #9ee8c8;
  --p-hyp: #a9d3ff;
  --p-cca: #ebddbf;
  --p-ccd: #ddb892;
  --p-caf: #c9d1a6;
  --p-cap: #d98a6e;
  --code-bg: #2b2b2b;
  --code-head: #3c3f41;
  --code-text: #a9b7c6;
  --code-num: #606366;
  --code-tag: #e8bf6a;
  --code-attr: #bababa;
  --code-str: #6a8759;
  --code-val: #a5c261;
  --code-kw: #cc7832;
  --code-var: #9876aa;
  --code-int: #6897bb;
  --code-fn: #ffc66d;
  --code-com: #808080;
  --code-doc: #629755;
  --code-meta: #bbb529;
  --font: "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --card-text: 17px;
}

/* src/view/styles/dark.css */
/* Dark theme: the greys of Darcula, the page picks it before the first paint. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #2b2b2b;
  --ink: #e6e6e6;
  --ink-2: rgba(230, 230, 230, 0.72);
  --ink-3: rgba(230, 230, 230, 0.6);
  --rule: rgba(255, 255, 255, 0.12);
  --rule-2: rgba(255, 255, 255, 0.3);
  --hover: rgba(255, 255, 255, 0.05);
  --dotgrid: rgba(255, 255, 255, 0.09);
  --band-y: rgba(255, 226, 74, 0.05);
  --pill: rgba(255, 255, 255, 0.11);
  --band-b: rgba(120, 160, 255, 0.08);
  --button: #4466f0;
  --button-ink: #ffffff;
  --button-line: #8ea6ff;
  --slot: #1e1f22;
  --sheet: #3c3f41;
  --sheet-ink: #e6e6e6;
  --sheet-ink-2: rgba(230, 230, 230, 0.7);
  --sheet-edge: rgba(255, 255, 255, 0.06);
  --lift: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.4));
  --lift-hi: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.5));
  --graphite: #1e1f22;
  --right: #5fc58c;
  --wrong: #ff7a6e;
  --right-tint: rgba(95, 197, 140, 0.12);
  --wrong-tint: rgba(255, 122, 110, 0.12);
  --marker: rgba(255, 226, 74, 0.34);
  --code-bg: #1e1f22;
  --code-head: #2b2d30;
  --wait: #e6b04a;
}

/* src/view/styles/tokens.css */
/* Fonts and the paper of every exam. Onest for text, JetBrains Mono for codes, numbers and the timer. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
/* the paper of an exam: its ticket, its stub, its cells and its chips, with the accents of its print */
.e724 {
  --paper: var(--p-e724);
  --accent-a: var(--p-e725);
  --accent-b: var(--p-e722);
  --accent-c: var(--p-hya);
}
.e725 {
  --paper: var(--p-e725);
  --accent-a: var(--p-hyp);
  --accent-b: var(--p-e724);
  --accent-c: var(--p-e722);
}
.e722 {
  --paper: var(--p-e722);
  --accent-a: var(--p-e724);
  --accent-b: var(--p-hya);
  --accent-c: var(--p-e725);
}
.hya {
  --paper: var(--p-hya);
  --accent-a: var(--p-hyp);
  --accent-b: var(--p-e724);
  --accent-c: var(--p-e725);
}
.hyp {
  --paper: var(--p-hyp);
  --accent-a: var(--p-hya);
  --accent-b: var(--p-e722);
  --accent-c: var(--p-e724);
}
.cca {
  --paper: var(--p-cca);
  --accent-a: var(--p-cap);
  --accent-b: var(--p-caf);
  --accent-c: var(--p-hyp);
}
.ccd {
  --paper: var(--p-ccd);
  --accent-a: var(--p-caf);
  --accent-b: var(--p-cap);
  --accent-c: var(--p-e724);
}
.caf {
  --paper: var(--p-caf);
  --accent-a: var(--p-ccd);
  --accent-b: var(--p-cap);
  --accent-c: var(--p-hya);
}
.cap {
  --paper: var(--p-cap);
  --accent-a: var(--p-cca);
  --accent-b: var(--p-caf);
  --accent-c: var(--p-e725);
}

/* src/view/styles/base.css */
/* Resets, the page frame and the small helpers every page uses. */

html {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: clip;
}
.noscript {
  max-width: 36em;
  margin: 64px auto;
  padding: 0 16px;
}
:where(html) *,
:where(html) *::before,
:where(html) *::after {
  box-sizing: border-box;
}
:where(html) :where(h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol,
figure,
fieldset) {
  margin: 0;
}
:where(html) :where(ul,
ol) {
  padding: 0;
  list-style: none;
}
:where(html) fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}
:where(html) legend {
  padding: 0;
}
:where(html) :where(p,
li,
small,
dd,
h1,
h2,
h3,
h4) {
  text-wrap: pretty;
}
:where(html) a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
:where(html) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:where(html) code {
  padding: 0.14em 0.42em;
  border-radius: 6px;
  background: var(--pill);
  font: 400 0.86em/1.3 var(--mono);
  font-variant-ligatures: none;
  box-decoration-break: clone;
}
/* an option of a command never breaks after its dashes */
code .nobr {
  white-space: nowrap;
}
:root .mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
}
:root .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wrap {
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 32px;
}
.ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico.ext {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  stroke-width: 2;
}
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  font: 500 13px/20px var(--mono);
  text-align: center;
}
.ink-black {
  color: var(--ink-black);
}
.ink-green {
  color: var(--ink-green);
}
.ink-red {
  color: var(--ink-red);
}
.ink-blue {
  color: var(--ink-blue);
}
.ink-gray {
  color: var(--ink-gray);
}
.ink-mustard {
  color: var(--ink-mustard);
}
.has-fx {
  position: relative;
  isolation: isolate;
}
.band {
  background-image: radial-gradient(var(--dotgrid) 1.2px, transparent 1.5px);
  background-size: 20px 20px;
}
.band-y {
  background: var(--band-y);
}
.band-b {
  background: var(--band-b);
}
.lead {
  margin-top: 24px;
  max-width: 36em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}
.notice {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-2);
}
.notice a {
  color: var(--ink);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise 1ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-timeline: view();
      animation-range: entry 5% cover var(--re, 36%);
    }
  }
}
.scrim {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
}
.pick {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  font-size: 15px;
  cursor: pointer;
}
.pick.is-on {
  box-shadow: inset 0 0 0 2px var(--button-line);
  background: color-mix(in srgb, var(--button-line) 8%, transparent);
  color: var(--button-line);
}
@property --fl { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --fr { syntax: "<length>"; inherits: false; initial-value: 56px; }
@property --mbite { syntax: "<length>"; inherits: false; initial-value: 0; }
[data-elastic] > * {
  translate: var(--pull, 0) 0;
  transition: translate 0.55s cubic-bezier(0.2, 1.5, 0.35, 1);
}
[data-elastic].is-pulling > * {
  transition: translate 0.08s linear;
}
.link {
  font-weight: 600;
  text-decoration: underline;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
.ext__arrow {
  transition: transform 0.18s ease;
}
:where(html) :is(a,
button,
[tabindex]):focus-visible {
  outline: 2px solid var(--button-line);
  outline-offset: 3px;
}
@media (hover: hover) {
  .link:hover,
  .notice a:hover {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}
@media (max-width: 640px) {
  :root {
    --card-text: 16px;
  }
  .wrap {
    padding: 0 16px;
  }
  .lead {
    margin-top: 16px;
    font-size: 17px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .lead {
    font-size: 18px;
  }
}
/* a choice that hides its real input shows the focus of the input on itself */
:is(.opt, .choice, .tpill, .pick):has(> input:focus-visible) {
  outline: 2px solid var(--button-line);
  outline-offset: 3px;
}
/* a long code name or link in a question breaks inside the line instead of pushing the card wider */
:is(.q-text, .sample__q, .opt__text, .hint, .explain, .faq__a, .tk__sub) {
  overflow-wrap: anywhere;
}
/* the dot of the part in view grows and the others shrink smoothly */
@media (prefers-reduced-motion: no-preference) {
  :is(.tickets__dots, .deck__dots, .pager__dots) i {
    transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease;
  }
}

/* src/view/styles/motion.css */
/* Every keyframe of the site. A component turns its motion on only when the system allows motion. */

@keyframes drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--dx, 18px), var(--dy, -26px));
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes march {
  to {
    stroke-dashoffset: -40;
  }
}
@keyframes issue {
  from {
    transform: translateY(112%);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(84px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes unzip {
  0% {
    transform: none;
  }
  45% {
    transform: rotate(2.4deg);
  }
  75% {
    transform: rotate(1.8deg) translate(16px, 6px);
  }
  100% {
    transform: rotate(0.8deg) translate(14px, 0);
  }
}
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 40%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 0%, transparent);
  }
}
@keyframes tearoff {
  0%, 12% {
    transform: none;
  }
  40%, 62% {
    transform: translate(14px, -6px) rotate(14deg);
  }
  90%, 100% {
    transform: none;
  }
}
@keyframes sway {
  0%, 100% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}
@keyframes print {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}
@keyframes thump {
  0% {
    opacity: 0;
    transform: rotate(-12deg) scale(1.9);
  }
  60% {
    opacity: 1;
    transform: rotate(-12deg) scale(0.94);
  }
  100% {
    transform: rotate(-12deg) scale(1);
  }
}
@keyframes fill {
  from {
    width: 0;
  }
}
@keyframes pop {
  0%, 40% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cursor {
  0% {
    opacity: 0;
    transform: translate(300px, 190px);
  }
  8% {
    opacity: 1;
  }
  24%, 30% {
    transform: translate(25px, 13px);
  }
  46%, 52% {
    transform: translate(25px, 93px);
  }
  70%, 78% {
    transform: translate(228px, 138px);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(228px, 138px);
  }
}
@keyframes tick1 {
  0%, 26% {
    background: transparent;
    border-color: var(--rule-2);
  }
  28%, 100% {
    background: var(--right);
    border-color: var(--right);
  }
}
@keyframes tick2 {
  0%, 48% {
    background: transparent;
    border-color: var(--rule-2);
  }
  50%, 100% {
    background: var(--right);
    border-color: var(--right);
  }
}
@keyframes rowtint {
  0%, 74% {
    background: transparent;
  }
  78%, 100% {
    background: var(--right-tint);
  }
}
@keyframes press {
  0%, 72% {
    transform: none;
  }
  74% {
    transform: scale(0.94);
  }
  78%, 100% {
    transform: none;
  }
}
@keyframes walk {
  0% {
    left: 0;
  }
  48% {
    left: calc(100% - var(--ww, 64px));
  }
  50% {
    left: calc(100% - var(--ww, 64px));
  }
  98% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes face {
  0%, 49% {
    transform: scaleX(1);
  }
  50%, 99% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes walk-stops {
  0% {
    left: 0;
  }
  14%, 18% {
    left: calc((100% - var(--ww, 64px)) * 0.33);
  }
  32%, 36% {
    left: calc((100% - var(--ww, 64px)) * 0.66);
  }
  48%, 52% {
    left: calc(100% - var(--ww, 64px));
  }
  64%, 68% {
    left: calc((100% - var(--ww, 64px)) * 0.66);
  }
  82%, 86% {
    left: calc((100% - var(--ww, 64px)) * 0.33);
  }
  98%, 100% {
    left: 0;
  }
}
@keyframes greet-on {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  18% {
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  68% {
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
  86%, 100% {
    opacity: 0;
  }
}
@keyframes walker-on {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  64% {
    opacity: 0;
  }
  68% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
  86%, 100% {
    opacity: 1;
  }
}
@keyframes hello {
  0%, 100% {
    transform: rotate(-150deg);
  }
  50% {
    transform: rotate(-112deg);
  }
}
/* the same hello under its own name -> a character that has waved already waves again when a mouse comes */
@keyframes hello-again {
  0%, 100% {
    transform: rotate(-150deg);
  }
  50% {
    transform: rotate(-112deg);
  }
}
@keyframes step-a {
  0%, 100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-18deg);
  }
}
@keyframes step-b {
  0%, 100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(18deg);
  }
}
@keyframes bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-40deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}
@keyframes hop {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.1, 0.9);
  }
  45% {
    transform: translateY(-18px) scale(0.95, 1.05);
  }
  80% {
    transform: translateY(0) scale(1.08, 0.92);
  }
}
@keyframes waddle {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes chomp {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  70%, 80% {
    transform: translateY(7px);
  }
}
@keyframes punched {
  0%, 30% {
    transform: scale(0);
  }
  45% {
    transform: scale(1.3);
  }
  60%, 100% {
    transform: scale(1);
  }
}
@keyframes burst1 {
  0%, 15% {
    opacity: 0;
    transform: translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: translate(-40px, -30px);
  }
  75% {
    opacity: 1;
    transform: translate(-46px, -14px);
  }
  100% {
    opacity: 0;
    transform: translate(-48px, -4px);
  }
}
@keyframes burst2 {
  0%, 15% {
    opacity: 0;
    transform: translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: translate(40px, -26px);
  }
  75% {
    opacity: 1;
    transform: translate(46px, -10px);
  }
  100% {
    opacity: 0;
    transform: translate(48px, 0);
  }
}
@keyframes burst3 {
  0%, 15% {
    opacity: 0;
    transform: translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: translate(0, -50px);
  }
  75% {
    opacity: 1;
    transform: translate(4px, -34px);
  }
  100% {
    opacity: 0;
    transform: translate(6px, -24px);
  }
}
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-16px);
  }
}
@keyframes hop-high {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.12, 0.88);
  }
  45% {
    transform: translateY(-30px) scale(0.94, 1.06);
  }
  80% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}
@keyframes edges {
  0% {
    --fl: 0px;
    --fr: 56px;
  }
  8% {
    --fl: 24px;
  }
  92% {
    --fr: 56px;
  }
  100% {
    --fl: 24px;
    --fr: 0px;
  }
}
@keyframes blur-left {
  0% {
    opacity: 0;
  }
  8%, 100% {
    opacity: 1;
  }
}
@keyframes blur-right {
  0%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rail-pop {
  from {
    transform: scale(0.7);
  }
  to {
    transform: none;
  }
}
@keyframes consent-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@keyframes say-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
/* less motion asked for -> animations and transitions end at once, nothing slides or sways */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* components and pages, in the order of their first rule on the canvas */
/* src/view/components/base/ui/button.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-ink);
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.btn--wide {
  width: 100%;
}
.btn--line {
  background: none;
  color: var(--button-line);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--small {
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: none;
  color: inherit;
}
.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reveal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.reveal svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s ease;
}
.reveal.is-open svg {
  transform: rotate(180deg);
}
.reveal__hide {
  display: none;
}
.icon-btn--plain {
  border: 0;
}
/* a small control keeps its look and gets a larger area to tap -> a placed button keeps its own position */
:where(.icon-btn, .btn--small, .reveal) {
  position: relative;
}
.icon-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
}
.btn--small::after {
  content: "";
  position: absolute;
  inset: -2px;
}
.reveal::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}
.btn,
.icon-btn,
.reveal {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .btn:hover {
    background-color: color-mix(in srgb, var(--button) 84%, #000000);
    box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--button) 90%, transparent);
  }
  .btn:active {
    background-color: color-mix(in srgb, var(--button) 76%, #000000);
    box-shadow: none;
  }
  .btn--line:hover {
    background-color: color-mix(in srgb, var(--button-line) 9%, transparent);
    box-shadow: inset 0 0 0 2px currentColor;
  }
  .btn--line:active {
    background-color: color-mix(in srgb, var(--button-line) 16%, transparent);
    box-shadow: inset 0 0 0 2px currentColor;
  }
  .reveal:hover {
    text-decoration-thickness: 2px;
  }
  .icon-btn:hover {
    background-color: var(--hover);
    border-color: var(--ink-3);
  }
  .icon-btn--plain:hover {
    border-color: transparent;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn:active,
  .btn--line:hover {
    transform: none;
  }
  .reveal:hover svg {
    transform: translateY(2px);
  }
  .reveal.is-open:hover svg {
    transform: rotate(180deg) translateY(2px);
  }
}

/* src/view/components/base/ui/theme-toggle.css */
/* The theme button shows the moon in the light theme and the sun in the dark theme, both in one place. */

.theme-toggle__icon {
  grid-area: 1 / 1;
}
.theme-toggle__icon--sun,
:root[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 0;
}
:root[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 1;
}
/* the icon that leaves turns away and gets smaller, the new one turns in */
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle__icon {
    transition: opacity 0.2s ease, rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .theme-toggle__icon--sun,
  :root[data-theme="dark"] .theme-toggle__icon--moon {
    rotate: -90deg;
    scale: 0.6;
  }
  :root[data-theme="dark"] .theme-toggle__icon--sun {
    rotate: 0deg;
    scale: 1;
  }
}

/* src/view/components/base/site-header/site-header.css */
.top {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--rule);
}
.top__in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 17px/1 var(--font);
  text-decoration: none;
}
.brand::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.brand svg {
  width: 44px;
  height: 32px;
  flex: none;
}
/* the ticket of the logo tilts like a stamp under the mouse */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brand svg {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  .brand:hover svg {
    transform: rotate(-8deg);
  }
}
.top__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  font-size: 15px;
}
.hdr-dark .top {
  background: var(--graphite);
  color: var(--graphite-ink);
  border-bottom-color: transparent;
}
.hdr-dark .top .icon-btn {
  border-color: rgba(255, 255, 255, 0.28);
}
@media (hover: hover) {
  .hdr-dark .top .icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
  }
}
@media (max-width: 640px) {
  .top__in {
    height: 64px;
    gap: 16px;
  }
  .brand {
    gap: 10px;
    font-size: 16px;
  }
  .brand svg {
    width: 40px;
    height: 29px;
  }
}

/* src/view/components/base/exam-bar/exam-bar.css */
.bar {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--rule);
}
.bar__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 68px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.bar__exam {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}
.bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}
.hdr-dark .bar {
  background: var(--graphite);
  color: var(--graphite-ink);
  border-bottom-color: transparent;
}
.hdr-dark .bar .icon-btn {
  border-color: rgba(255, 255, 255, 0.28);
}
.hdr-dark .bar .clock-label {
  color: var(--graphite-ink-2);
}
@media (hover: hover) {
  .hdr-dark .bar .icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
  }
}
@media (max-width: 640px) {
  .bar__in {
    display: flex;
    gap: 12px;
    height: 64px;
  }
  .back {
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule-2);
    border-radius: 10px;
  }
  .hdr-dark .bar .back {
    border-color: rgba(255, 255, 255, 0.28);
  }
  .back__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bar__title {
    display: none;
  }
  .bar__right {
    margin-left: auto;
    gap: 8px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .bar__title {
    display: none;
  }
}

/* src/view/components/quiz/timer-control/timer-control.css */
.clock {
  font: 500 22px/1 var(--mono);
}
.clock-label {
  font-size: 13px;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .clock-label {
    display: none;
  }
  .clock {
    margin-right: 4px;
    font-size: 17px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .clock-label {
    display: none;
  }
}

/* src/view/components/base/breadcrumbs/breadcrumbs.css */
.crumbs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  font-size: 15px;
  color: var(--ink-2);
}
.crumbs a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
/* a crumb keeps its look and gets an area to tap as tall as a finger */
.crumbs a::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}
@media (hover: hover) {
  .crumbs a:hover {
    color: var(--button-line);
    text-decoration: underline;
  }
}
@media (max-width: 640px) {
  .crumbs {
    padding-top: 16px;
    font-size: 14px;
  }
}

/* src/view/components/base/ui/chip.css */
.tix {
  --n: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  background: var(--paper, var(--p-e724));
  color: #000000;
  border-radius: 4px;
  font: 500 13px/1 var(--mono);
  white-space: nowrap;
  mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper, var(--p-e724)) 45%, var(--sheet));
  color: var(--sheet-ink);
  font: 600 13px/1 var(--font);
  white-space: nowrap;
}
.chip--line {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  font-weight: 400;
}

/* src/view/components/base/stamp/stamp.css */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 2px;
  padding: 6px 12px 7px;
  border: 2px solid currentColor;
  border-radius: 8px;
  transform: rotate(-6deg);
  font: 600 13px/1.2 var(--font);
  text-align: center;
  white-space: nowrap;
}
.stamp b {
  font: 500 15px/1.2 var(--mono);
}
.stamp svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stamp--row {
  flex-direction: row;
  gap: 6px;
  padding: 7px 12px;
}
.stamp--dash {
  border-style: dashed;
}
.soon {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font: 600 15px/1 var(--font);
}
.soon--tape {
  top: -12px;
  right: 32px;
  display: grid;
  place-items: center;
  width: 120px;
  height: 36px;
  transform: rotate(9deg);
  background: rgba(255, 247, 222, 0.9);
  color: var(--ink-blue);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  clip-path: polygon(3% 0, 97% 0, 100% 14%, 96% 28%, 100% 42%, 96% 57%, 100% 71%, 96% 86%, 98% 100%, 3% 100%, 0 86%, 4% 71%, 0 57%, 4% 42%, 0 28%, 4% 14%);
}
.soon--ribbon {
  top: 24px;
  right: -44px;
  display: grid;
  place-items: center;
  width: 170px;
  height: 30px;
  transform: rotate(45deg);
  background: var(--ink-blue);
  color: #ffffff;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.soon--tag {
  top: -36px;
  right: 8px;
  width: 104px;
  height: 64px;
}
.soon--tag::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}
.soon__string {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 48px;
  height: 40px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.soon__card {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 66px;
  height: 30px;
  padding-left: 10px;
  background: #ffffff;
  color: var(--ink-blue);
  font-size: 13px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.soon__card::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.5);
}
.soon--stamp {
  top: -22px;
  right: -18px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2.5px solid var(--ink-blue);
  border-radius: 50%;
  color: var(--ink-blue);
  transform: rotate(-14deg);
  background: color-mix(in srgb, var(--sheet) 72%, transparent);
}
.soon--stamp span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.soon__text {
  margin-top: 32px;
  font-size: 15px;
  color: var(--sheet-ink-2);
}
.soon__ask {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 15px;
  text-decoration: none;
}
.soon__ask::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}
/* the layer that widens the area to tap lies over the words -> the link reacts to the whole area */
@media (hover: hover) {
  .soon__ask:hover .link {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}
.stamp--pass {
  position: absolute;
  top: 76px;
  right: 20px;
  z-index: 2;
  padding: 6px 12px 7px;
  border-width: 3px;
  border-radius: 10px;
  background: var(--sheet);
  color: var(--right);
  font-size: 15px;
  transform: rotate(-12deg);
}
.stamp--pass b {
  font-size: 17px;
}
@media (prefers-reduced-motion: no-preference) {
  .stamp--pass {
    animation: thump 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1.05s backwards;
  }
}
.stamp--pass.stamp--no {
  color: var(--wrong);
}
@media (max-width: 640px) {
  .soon--tape {
    right: 20px;
  }
  .stamp--pass {
    top: 64px;
    right: 16px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .soon--tape {
    right: 24px;
  }
}

/* src/view/components/base/ticket/ticket.css */
.tk__stub .stamp {
  padding: 7px 13px 8px;
  border-radius: 9px;
  font-size: 14.5px;
}
.tk__stub .stamp b {
  font-size: 16.5px;
}
.tk__stub .stamp svg {
  width: 20px;
  height: 20px;
}
.tk__stub .stamp--row {
  padding: 8px 13px;
  gap: 7px;
}
.vlogo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.vlogo--empty {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--rule-2);
  font: 400 9px/1 var(--mono);
  color: var(--ink-3);
}
.tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.tickets + .tickets {
  margin-top: 32px;
}
.tk {
  --stub: 176px;
  --nr: 12px;
  display: block;
  color: inherit;
  text-decoration: none;
  filter: var(--lift);
  transition: transform 0.55s cubic-bezier(0.22, 0.7, 0.24, 1), filter 0.55s ease;
  position: relative;
}
.tk:hover {
  transform: translateY(-4px);
  filter: var(--lift-hi);
}
.tk.is-focus {
  transform: translateY(-6px);
  filter: var(--lift-hi) drop-shadow(0 0 18px color-mix(in srgb, var(--paper) 92%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--paper) 100%, transparent));
}
.tk__paper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  min-height: 240px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sheet);
  color: var(--sheet-ink);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  mask: radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 0, #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 100%, #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) bottom / 100% 51% no-repeat;
}
.tk__main {
  display: flex;
  flex-direction: column;
  padding: 24px 32px 24px;
}
.tk__code {
  font: 500 15px/1.2 var(--mono);
}
.tk__title {
  margin-top: 8px;
  font: 600 28px/1.15 var(--font);
  letter-spacing: -0.02em;
}
.tk__sub {
  margin-top: 8px;
  font-size: 15px;
  color: var(--sheet-ink-2);
}
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: auto;
  padding-top: 24px;
}
.fields dt {
  font-size: 13px;
  color: var(--sheet-ink-2);
}
.fields dd {
  margin-top: 4px;
  font: 500 17px/1.3 var(--mono);
}
/* the paper of a stub is darker than a page -> its stamps take the deep inks to stay readable */
.tk__stub {
  --ink-green: var(--ink-green-deep);
  --ink-red: var(--ink-red-deep);
  --ink-mustard: var(--ink-mustard-deep);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px;
  background: var(--paper);
  color: #000000;
  border-left: 2px dashed rgba(0, 0, 0, 0.32);
}
.tk__side {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.68);
}
@media (min-width: 641px) {
  .tk__stub {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 6px;
    padding: 24px 20px;
  }
  .tk__side {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }
  .tk__stub .stamp {
    grid-column: 2;
    grid-row: 1 / 3;
    place-self: center center;
    margin-top: 0;
  }
  .tk--taped .tk__stub .stamp {
    margin-top: 16px;
  }
  .tk__stub .btn {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
  }
}
.tk--soon {
  --stub: 136px;
}
/* the button of the stub is 40 px high on a tablet and a phone -> a layer around it makes the area to tap larger */
.tk__stub .btn {
  position: relative;
}
.tk__stub .btn::after {
  content: "";
  position: absolute;
  inset: -2px;
}
.tk--soon .tk__paper {
  min-height: 128px;
}
.tk--soon .tk__main {
  padding: 24px 32px;
}
.tk--soon .tk__title {
  margin-top: 8px;
  font-size: 22px;
}
.tk--soon .tk__stub {
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fields--text dd {
  font: 600 19px/1.3 var(--font);
}
.tickets--one {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 32px;
}
.tickets__dots {
  display: none;
}
@media (max-width: 640px) {
  .tickets__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .tickets__dots i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--rule-2);
  }
  .tickets__dots i.on {
    width: 28px;
    background: var(--ink);
  }
  .tickets {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 20px 16px 32px;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .tickets > .tk {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100% - 28px);
    scroll-snap-align: start;
  }
  .tickets > .tk .tk__paper {
    flex: 1;
    grid-template-rows: minmax(0, 1fr) 76px;
  }
  .tk__paper {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 76px;
    min-height: 0;
    mask: radial-gradient(circle var(--nr) at 0 calc(100% - 76px), #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--nr) at 100% calc(100% - 76px), #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) right / 51% 100% no-repeat;
  }
  .tk__main {
    padding: 20px;
  }
  .tk__title {
    font-size: 22px;
  }
  .tk .fields {
    gap: 8px 24px;
    padding-top: 16px;
  }
  .tk .fields dd {
    font-size: 15px;
  }
  .tk__stub {
    flex-direction: row;
    align-items: center;
    padding: 0 16px 0 20px;
    border-left: 0;
    border-top: 2px dashed rgba(0, 0, 0, 0.32);
  }
  .tk__side {
    display: none;
  }
  .tk__stub .btn {
    height: 40px;
    margin-left: auto;
    padding: 0 16px;
    font-size: 15px;
  }
  .fields--text dd {
    font-size: 16px;
  }
  .tickets--one {
    margin-top: 4px;
  }
  .tickets::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .tickets {
    gap: 24px;
  }
  .tk {
    --stub: 172px;
  }
  .tk__main {
    padding: 24px 20px;
  }
  .tk__title {
    font-size: 20px;
  }
  .tk .fields {
    gap: 8px 20px;
  }
  .tk__stub {
    padding: 24px 16px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .tickets {
    gap: 20px;
  }
  .tickets > .tk {
    display: flex;
    flex-direction: column;
  }
  .tickets > .tk .tk__paper {
    flex: 1;
  }
  .tk__paper {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 76px;
    min-height: 0;
    mask: radial-gradient(circle var(--nr) at 0 calc(100% - 76px), #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--nr) at 100% calc(100% - 76px), #0000 calc(var(--nr) - 0.5px), #000 var(--nr)) right / 51% 100% no-repeat;
  }
  .tk__main {
    padding: 20px 24px;
  }
  .tk__title {
    font-size: 22px;
  }
  .tk .fields {
    gap: 8px 24px;
    padding-top: 16px;
  }
  .tk .fields dd {
    font-size: 15px;
  }
  .tk__stub {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px 0 24px;
    border-left: 0;
    border-top: 2px dashed rgba(0, 0, 0, 0.32);
  }
  .tk__side {
    display: none;
  }
  .tk__stub .stamp,
  .tk--taped .tk__stub .stamp {
    align-self: center;
    margin-top: 0;
  }
  .tk__stub .btn {
    height: 40px;
    margin-left: auto;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* src/view/components/base/print/print.css */
.fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fx i {
  position: absolute;
  display: block;
  width: var(--s, 12px);
  height: var(--s, 12px);
  border-radius: 50%;
  background: var(--c, var(--p-e724));
}
.fx i.o {
  background: none;
  box-shadow: inset 0 0 0 2px var(--c, var(--p-e724));
}
.fx svg {
  position: absolute;
  display: block;
  overflow: visible;
}
.fx circle,
.fx path {
  fill: none;
  stroke: var(--c, var(--p-e724));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 12;
}
.fx .thin circle,
.fx .thin path {
  stroke-width: 2;
  stroke-dasharray: 0 9;
}
/* a print can have parts for wide screens and parts for narrow ones */
.fx .fx__narrow {
  display: none;
}
@media (max-width: 899px) {
  .fx .fx__wide {
    display: none;
  }
  .fx .fx__narrow {
    display: block;
  }
}
.cut {
  position: relative;
  height: 24px;
  background: radial-gradient(circle, var(--rule-2) 1.6px, transparent 2px) left center / 12px 6px repeat-x;
}
.cut__icon {
  position: absolute;
  top: 0;
  left: max(32px, calc(50% - 600px));
  width: 24px;
  height: 24px;
  padding: 2px;
  background: var(--canvas);
  color: var(--ink-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: content-box;
}
.cut--col .cut__icon {
  left: 0;
  padding-left: 0;
}
.fade-rule {
  height: 1.5px;
  margin: 32px 0 24px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--rule-2) 20%, var(--rule-2) 80%, transparent);
}
.fade-rule + .hint {
  margin-top: 0;
}
.tear {
  position: relative;
  height: 24px;
  margin: 32px 0 24px;
  background: radial-gradient(circle, var(--rule-2) 1.6px, transparent 2px) left center / 12px 6px repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .fx i {
    animation: drift var(--d, 18s) ease-in-out var(--dl, 0s) infinite alternate;
  }
  .fx .spin {
    animation: spin var(--d, 120s) linear infinite;
  }
  .fx--still i,
  .fx--still .spin {
    animation: none;
  }
}
@media (max-width: 640px) {
  .tear {
    margin: 24px 0 16px;
  }
}

/* src/view/components/home/home-hero/home-hero.css */
.hero-home {
  padding-top: 64px;
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.intro .lead {
  max-width: 40em;
}
.intro h1 {
  font: 600 64px/1 var(--font);
  letter-spacing: -0.035em;
}
.intro__line {
  display: block;
}
@media (max-width: 640px) {
  .hero-home {
    padding-top: 40px;
  }
  .hero-home .fx {
    display: none;
  }
  .intro h1 {
    font-size: 40px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .intro h1 {
    font-size: 56px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .hero-home .fx {
    display: none;
  }
}

/* src/view/components/home/pocket-deck/pocket-deck.css */
/* a ticket that comes out and its right neighbour part by the overlap of two tickets and a small gap. A ticket at
   the end of the row moves at most by the room it has in the pocket, so it never shows past the side of the pocket.
   The tickets keep the room and a little more for their lean from each side of the pocket */
.deck {
  --dkw: 172px;
  --dks: 98px;
  --dkp: calc(var(--dkw) - var(--dks) + 8px);
  --dkr: 16px;
  --dkm: calc(var(--dkr) + 4px);
  margin-top: 64px;
  padding-bottom: 64px;
}
.deck__units {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.deck__unit {
  position: relative;
  flex: none;
}
.deck__mouth {
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: 244px;
  width: calc(var(--dkw) + (var(--n, 3) - 1) * var(--dks) + 2 * var(--dkm));
  clip-path: inset(-120px -80px 0 -80px);
}
/* two tickets have no neighbours to slide over or under -> their pocket is wider, so the first one comes out whole */
.deck__mouth:has(> .deck__row > .dk:nth-child(2):last-child) {
  --dkr: calc(var(--dkp) / 2);
  --dkm: calc(var(--dkp) / 2 + 4px);
}
.deck__row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -36px;
  display: flex;
  justify-content: center;
}
.pocket {
  position: relative;
  z-index: 30;
  height: 64px;
  margin-top: -48px;
  filter: drop-shadow(0 -1px 0 var(--rule)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12));
}
.pocket__front {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 8px;
  border-radius: 6px 6px 18px 18px;
  background: var(--sheet);
  color: var(--sheet-ink);
  mask: radial-gradient(circle 14px at 50% 0, #0000 13.5px, #000 14px);
}
.holder__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--sheet-ink-2);
  white-space: nowrap;
}
.holder__label b {
  font: 600 17px/1.2 var(--font);
  color: var(--sheet-ink);
}
.pocket .vlogo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
/* the box of a link stays in its place while the paper moves -> only the paper takes the mouse, so the part of a
   ticket that its neighbour uncovers belongs to that ticket */
.dk {
  position: relative;
  display: block;
  flex: none;
  width: var(--dkw);
  height: 300px;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.dk + .dk {
  margin-left: calc(var(--dks) - var(--dkw));
}
.dk__lift {
  display: block;
  height: 100%;
  pointer-events: auto;
  transform: translateY(var(--out, 0)) rotate(var(--tilt, 0deg));
  transform-origin: 50% 100%;
  filter: var(--lift);
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), translate 0.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.12s,
    filter 0.4s ease;
}
/* the focus ring goes round the paper -> it moves with the ticket and keeps its round corners */
.dk:focus-visible {
  outline: none;
}
.dk:focus-visible .dk__lift {
  border-radius: 14px;
  outline: 2px solid var(--button-line);
  outline-offset: 3px;
  transform: translateY(calc(var(--out, 0px) - 14px)) rotate(0deg);
  filter: var(--lift-hi);
}
@media (hover: hover) {
  .dk:hover .dk__lift {
    transform: translateY(calc(var(--out, 0px) - 14px)) rotate(0deg);
    filter: var(--lift-hi);
  }
}
/* without motion the ticket simply comes in front of its neighbours */
@media (prefers-reduced-motion: reduce) {
  .dk:focus-visible {
    z-index: 40 !important;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .dk:hover {
    z-index: 40 !important;
  }
}
/* every ticket lies in front of the one on its left, so only the right neighbour hides a ticket that comes out.
   The two part far enough for the whole ticket to show and the stack order never changes, so nothing jumps in front
   of anything. The next tickets on both sides step aside by the room of the pocket, so a squeezed ticket still shows */
@media (prefers-reduced-motion: no-preference) {
  .dk__lift {
    translate: var(--dkx, 0) 0;
  }
  .dk:focus-visible .dk__lift,
  .dk:focus-visible + .dk .dk__lift,
  .dk:focus-visible + .dk + .dk .dk__lift,
  .dk:has(+ .dk:focus-visible) .dk__lift,
  .dk:has(+ .dk + .dk:focus-visible) .dk__lift {
    transition-delay: 0s;
  }
  .dk:focus-visible {
    --dkx: calc(var(--dkp) / -2);
  }
  .dk:nth-last-child(2):focus-visible {
    --dkx: calc(var(--dkr) - var(--dkp));
  }
  .dk:first-child:focus-visible {
    --dkx: calc(var(--dkr) * -1);
  }
  .dk:last-child:focus-visible {
    --dkx: 0;
  }
  .dk:focus-visible + .dk {
    --dkx: calc(var(--dkp) / 2);
  }
  .dk:first-child:focus-visible + .dk {
    --dkx: calc(var(--dkp) - var(--dkr));
  }
  .dk:focus-visible + .dk:last-child {
    --dkx: var(--dkr);
  }
  .dk:has(+ .dk:focus-visible) {
    --dkx: calc(var(--dkp) / -4);
  }
  .dk:has(+ .dk:nth-last-child(2):focus-visible) {
    --dkx: calc((var(--dkr) - var(--dkp)) / 2);
  }
  .dk:first-child:has(+ .dk:focus-visible) {
    --dkx: calc(var(--dkr) * -1);
  }
  .dk:has(+ .dk:last-child:focus-visible) {
    --dkx: 0;
  }
  .dk:focus-visible + .dk + .dk {
    --dkx: var(--dkr);
  }
  .dk:has(+ .dk + .dk:focus-visible:not(:last-child)) {
    --dkx: calc(var(--dkr) * -1);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .dk:hover .dk__lift,
  .dk:hover + .dk .dk__lift,
  .dk:hover + .dk + .dk .dk__lift,
  .dk:has(+ .dk:hover) .dk__lift,
  .dk:has(+ .dk + .dk:hover) .dk__lift {
    transition-delay: 0s;
  }
  .dk:hover {
    --dkx: calc(var(--dkp) / -2);
  }
  .dk:nth-last-child(2):hover {
    --dkx: calc(var(--dkr) - var(--dkp));
  }
  .dk:first-child:hover {
    --dkx: calc(var(--dkr) * -1);
  }
  .dk:last-child:hover {
    --dkx: 0;
  }
  .dk:hover + .dk {
    --dkx: calc(var(--dkp) / 2);
  }
  .dk:first-child:hover + .dk {
    --dkx: calc(var(--dkp) - var(--dkr));
  }
  .dk:hover + .dk:last-child {
    --dkx: var(--dkr);
  }
  .dk:has(+ .dk:hover) {
    --dkx: calc(var(--dkp) / -4);
  }
  .dk:has(+ .dk:nth-last-child(2):hover) {
    --dkx: calc((var(--dkr) - var(--dkp)) / 2);
  }
  .dk:first-child:has(+ .dk:hover) {
    --dkx: calc(var(--dkr) * -1);
  }
  .dk:has(+ .dk:last-child:hover) {
    --dkx: 0;
  }
  .dk:hover + .dk + .dk {
    --dkx: var(--dkr);
  }
  .dk:has(+ .dk + .dk:hover:not(:last-child)) {
    --dkx: calc(var(--dkr) * -1);
  }
}
.dk__paper {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--sheet);
  color: var(--sheet-ink);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  mask: radial-gradient(circle 9px at 0 64px, #0000 8.5px, #000 9px) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 64px, #0000 8.5px, #000 9px) right / 51% 100% no-repeat;
}
.dk__stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
  padding: 0 16px;
  background: var(--paper);
  color: #000000;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.32);
  font: 500 13px/1 var(--mono);
}
.dk__stub small {
  font: 600 12px/1 var(--font);
}
.dk__stub small.ok {
  color: var(--ink-green);
}
.dk__main {
  display: block;
  padding: 16px 16px 0;
}
.dk__main b {
  display: block;
  margin-top: 4px;
  font: 600 17px/1.25 var(--font);
}
.dk__main small:first-child {
  margin-top: 0;
}
.dk__main small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sheet-ink-2);
}
.dk__main small.ok {
  color: var(--right);
  font-weight: 600;
}
.dk__main small.go {
  color: var(--sheet-ink);
  font-weight: 600;
}
.dk__main small.bad {
  color: var(--wrong);
  font-weight: 600;
}
/* the red of the dark theme is too dim on the dark paper of a small ticket -> Not yet takes a lighter red */
:root[data-theme="dark"] .dk__main small.bad {
  color: #ff8a80;
}
.dk__main small.wait {
  color: var(--wait);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .dk {
    animation: issue 1s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 200ms);
  }
}
.deck__dots {
  display: none;
}
@media (max-width: 640px) {
  .deck {
    --dkw: 124px;
    margin-top: 32px;
    padding-bottom: 40px;
  }
  .deck__units {
    justify-content: flex-start;
    gap: 12px;
    margin: 0 -16px;
    padding: 24px 16px 28px;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .deck__unit {
    flex: 0 0 calc(100% - 28px);
    scroll-snap-align: start;
  }
  .deck__mouth {
    width: 100%;
    height: 200px;
  }
  .deck__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .deck__dots i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--rule-2);
  }
  .deck__dots i.on {
    width: 28px;
    background: var(--ink);
  }
  .deck__row {
    bottom: -40px;
  }
  .dk {
    height: 250px;
  }
  .dk + .dk {
    margin-left: min(-40px, calc((100% - 40px - var(--n) * var(--dkw)) / (var(--n) - 1)));
  }
  .dk__stub {
    padding: 0 10px;
    font-size: 12px;
  }
  .dk__main {
    padding: 12px 10px 0;
  }
  .dk__main b {
    font-size: 16px;
  }
  .deck__units::-webkit-scrollbar {
    display: none;
  }
}
/* the pockets with desktop sizes need a window of 1360px, a narrower one sizes them from its width */
@media (min-width: 900px) and (max-width: 1359px) {
  .deck {
    --dkw: 12vw;
    --dks: calc(var(--dkw) * 0.55);
    margin-top: 48px;
  }
  .deck__units {
    gap: 20px;
  }
  .dk {
    height: 272px;
  }
  .dk__stub {
    padding: 0 10px;
    font-size: 12px;
  }
  .dk__main {
    padding: 12px 10px 0;
  }
  .dk__main b {
    font-size: 15px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .deck {
    --dkw: 150px;
    --dks: 82px;
    margin-top: 40px;
    padding-bottom: 40px;
  }
  .deck__units {
    justify-content: flex-start;
    gap: 16px;
    margin: 0 -32px;
    padding: 24px 32px 28px;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 32px;
    scrollbar-width: none;
  }
  .deck__units::-webkit-scrollbar {
    display: none;
  }
  .deck__unit {
    scroll-snap-align: start;
  }
  .deck__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .deck__dots i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--rule-2);
  }
  .deck__dots i.on {
    width: 28px;
    background: var(--ink);
  }
  .dk {
    height: 280px;
  }
  .dk__main b {
    font-size: 16px;
  }
}

/* src/view/components/home/how-it-works/how-it-works.css */
.rail {
  position: relative;
  z-index: 30;
  height: 28px;
  margin-top: -14px;
  border-radius: 14px;
  background: var(--sheet);
  filter: drop-shadow(0 -1px 0 var(--rule)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.12));
}
.rail::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 8px;
  height: 5px;
  border-radius: 3px;
  background: var(--rule);
}
.how {
  padding: 96px 0;
}
.how__head h2 {
  font: 600 34px/1.15 var(--font);
  letter-spacing: -0.025em;
}
.how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.how__line {
  position: absolute;
  left: 18px;
  top: 16px;
  width: calc(100% - 18px);
  height: 4px;
}
.how__line path {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0 10;
}
.how__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--canvas);
  font: 500 15px/1 var(--mono);
}
.how__step {
  position: relative;
}
.how__pic {
  position: relative;
  display: flex;
  align-items: center;
  height: 158px;
  margin-top: 24px;
}
.how h3 {
  margin-top: 24px;
  font: 600 21px/1.25 var(--font);
}
.how__step > p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.mini-tk {
  position: relative;
  display: flex;
  width: 292px;
  height: 158px;
}
.mini-tk__main,
.mini-tk__stub {
  filter: var(--lift);
}
.mini-tk__main > div,
.mini-tk__stub > div {
  height: 158px;
}
.mini-tk__main > div {
  width: 220px;
  padding: 20px 20px;
  border-radius: 16px 0 0 16px;
  background: var(--sheet);
  color: var(--sheet-ink);
  mask: radial-gradient(circle 11px at 100% 0, #0000 10.5px, #000 11px) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at 100% 100%, #0000 10.5px, #000 11px) bottom / 100% 51% no-repeat;
}
.mini-tk__main p {
  font: 500 15px/1 var(--mono);
}
.mini-tk__main b {
  display: block;
  margin-top: 12px;
  font: 600 19px/1.25 var(--font);
}
.mini-tk__main small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--sheet-ink-2);
}
.mini-tk__stub {
  transform-origin: 0 100%;
}
.mini-tk__stub > div {
  display: grid;
  place-items: center;
  width: 72px;
  border-left: 2px dashed rgba(0, 0, 0, 0.32);
  border-radius: 0 16px 16px 0;
  background: var(--paper);
  color: rgba(0, 0, 0, 0.62);
  mask: radial-gradient(circle 11px at 0 0, #0000 10.5px, #000 11px) top / 100% 51% no-repeat,
    radial-gradient(circle 11px at 0 100%, #0000 10.5px, #000 11px) bottom / 100% 51% no-repeat;
}
.mini-tk__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.1em;
}
.mini-tk.torn .mini-tk__stub {
  transform: translate(14px, -6px) rotate(14deg);
}
.mini-q {
  position: relative;
  width: 100%;
  max-width: 300px;
}
.mini-q__title {
  font-size: 13px;
  color: var(--ink-2);
}
.mini-q__opts {
  display: grid;
  gap: 8px;
}
.mini-q__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
}
.mini-q__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--rule-2);
  border-radius: 5px;
}
.mini-q__opt--on .mini-q__box {
  border-color: var(--right);
  background: var(--right);
}
.mini-q__opt--on .mini-q__box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mini-q__opt--on {
  background: var(--right-tint);
}
.mini-q__check {
  display: block;
  width: max-content;
  margin: 14px 0 0 auto;
  height: 32px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-ink);
  font: 600 15px/32px var(--font);
}
.mini-q__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
}
.mini-q__cursor path {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.mini-ready {
  width: 100%;
  max-width: 300px;
}
.mini-ready__row + .mini-ready__row {
  margin-top: 16px;
}
.mini-ready__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
}
.mini-ready__top b {
  font-weight: 600;
}
.mini-ready__track {
  display: block;
  height: 10px;
  margin-top: 8px;
  border-radius: 5px;
  background: var(--rule);
}
.mini-ready__track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 4px;
  background: var(--p-e724);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .how__line path {
    animation: march 3s linear infinite;
  }
  .how__step:hover .mini-tk__stub {
    animation: tearoff 2.4s ease-in-out infinite;
  }
  .how__step:hover .rc--mini .rc__lift {
    animation: print 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .how__step:hover .rc--mini .stamp--pass {
    animation: thump 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.9s backwards;
  }
  .how__step:hover .mini-q__cursor {
    animation: cursor 3.6s ease-in-out infinite;
  }
  .how__step:hover .mini-q__opt--on:nth-child(1) .mini-q__box {
    animation: tick1 3.6s step-end infinite;
  }
  .how__step:hover .mini-q__opt--on:nth-child(3) .mini-q__box {
    animation: tick2 3.6s step-end infinite;
  }
  .how__step:hover .mini-q__opt--on {
    animation: rowtint 3.6s ease infinite;
  }
  .how__step:hover .mini-q__check {
    animation: press 3.6s ease infinite;
  }
  .how__step:hover .mini-ready__track i {
    animation: fill 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .how__step:hover .mini-ready .tag {
    animation: pop 1.4s ease;
  }
}
.how__rail {
  display: none;
}
@media (max-width: 640px) {
  .how {
    padding: 56px 0 40px;
  }
  .how__head h2 {
    font-size: 28px;
  }
  .how__scroll {
    position: relative;
    timeline-scope: --hw;
  }
  .how__steps {
    display: flex;
    gap: 20px;
    margin: 20px -16px 0;
    padding: 8px 16px 12px;
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-timeline: --hw inline;
  }
  .how__line {
    display: none;
  }
  .how__step {
    flex: 0 0 272px;
  }
  .how__pic {
    height: 158px;
    margin-top: 16px;
  }
  .how .mini-tk {
    width: 272px;
  }
  .how .mini-tk__main > div {
    width: 200px;
  }
  .how .rc--mini {
    width: 272px;
  }
  .how h3 {
    margin-top: 16px;
    font-size: 19px;
  }
  .how__step > p {
    font-size: 15px;
  }
  .how--fade .how__steps,
  .how--rail .how__steps {
    mask: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .how--blur .how__scroll::before,
  .how--blur .how__scroll::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 8px;
    bottom: 12px;
    pointer-events: none;
    backdrop-filter: blur(5px);
  }
  .how--blur .how__scroll::before {
    left: -16px;
    width: 36px;
    opacity: 0;
    mask: linear-gradient(to right, #000 30%, transparent);
  }
  .how--blur .how__scroll::after {
    right: -16px;
    width: 72px;
    mask: linear-gradient(to left, #000 35%, transparent);
  }
  .how--rail .how__num {
    display: none;
  }
  .how--rail .how__rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }
  .how--rail .how__rail::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 17px;
    height: 2px;
    background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) left center / 10px 2px repeat-x;
  }
  .how__fill {
    position: absolute;
    left: 18px;
    top: 17px;
    width: calc(var(--rail, 0) * (100% - 36px));
    height: 2px;
    background: var(--ink);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .how__rail span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(var(--band-b), var(--band-b)), var(--canvas);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font: 500 15px/1 var(--mono);
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  }
  .how__rail span.is-on {
    background: var(--ink);
    color: var(--canvas);
    animation: rail-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @supports (animation-timeline: scroll()) {
    .how--fade .how__steps,
    .how--rail .how__steps {
      animation: edges linear both;
      animation-timeline: scroll(self inline);
    }
    .how--blur .how__scroll::before {
      animation: blur-left linear both;
      animation-timeline: --hw;
    }
    .how--blur .how__scroll::after {
      animation: blur-right linear both;
      animation-timeline: --hw;
    }
  }
  .how__steps::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .how__head h2 {
    font-size: 30px;
  }
  .how {
    padding: 72px 0 56px;
  }
  .how__scroll {
    position: relative;
    timeline-scope: --hw;
  }
  .how__steps {
    display: flex;
    gap: 28px;
    margin: 24px -32px 0;
    padding: 8px 32px 12px;
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-timeline: --hw inline;
    mask: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .how__steps::-webkit-scrollbar {
    display: none;
  }
  .how__line {
    display: none;
  }
  .how__step {
    flex: 0 0 300px;
  }
  .how__pic {
    height: 158px;
    margin-top: 20px;
  }
  .how h3 {
    margin-top: 20px;
    font-size: 20px;
  }
  .how--rail .how__num {
    display: none;
  }
  .how--rail .how__rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
  }
  .how--rail .how__rail::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 17px;
    height: 2px;
    background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) left center / 10px 2px repeat-x;
  }
  .how__fill {
    position: absolute;
    left: 18px;
    top: 17px;
    width: calc(var(--rail, 0) * (100% - 36px));
    height: 2px;
    background: var(--ink);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .how__rail span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(var(--band-b), var(--band-b)), var(--canvas);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font: 500 15px/1 var(--mono);
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  }
  .how__rail span.is-on {
    background: var(--ink);
    color: var(--canvas);
    animation: rail-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @supports (animation-timeline: scroll()) {
    .how__steps {
      animation: edges linear both;
      animation-timeline: scroll(self inline);
    }
  }
}

/* src/view/components/home/vendor-section/vendor-section.css */
.exams__head h2 {
  font: 600 34px/1.15 var(--font);
  letter-spacing: -0.025em;
}
.exams {
  padding: 96px 0 0;
}
.vendor {
  padding-top: 64px;
}
.vendor + .vendor {
  padding-top: 96px;
}
.vendor__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
}
.vendor__head .vlogo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.vendor__head h3 {
  font: 600 22px/1.2 var(--font);
}
@media (max-width: 640px) {
  .exams__head h2 {
    font-size: 28px;
  }
  .exams {
    padding-top: 64px;
  }
  .vendor {
    padding-top: 40px;
  }
  .vendor + .vendor {
    padding-top: 56px;
  }
  .vendor__head {
    gap: 12px;
    margin-bottom: 8px;
  }
  .vendor__head .vlogo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .vendor__head h3 {
    font-size: 20px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .exams__head h2 {
    font-size: 30px;
  }
}

/* src/view/components/home/see-all/see-all.css */
.see-all {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin-left: auto;
  height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  font: 600 15px/1 var(--font);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.see-all::after {
  content: "";
  position: absolute;
  inset: -3px 0;
}
.see-all__text {
  display: block;
  padding: 0 16px 0 14px;
  line-height: 37px;
  white-space: nowrap;
}
.see-all__stub {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  border-left: 1.5px dashed var(--ink);
  border-radius: 0 8.5px 8.5px 0;
  background: var(--paper);
}
.see-all__stub::before,
.see-all__stub::after {
  content: "";
  position: absolute;
  left: -7.5px;
  width: 13px;
  height: 7px;
  border: 1.5px solid var(--ink);
  background: var(--canvas);
}
.see-all__stub::before {
  top: -1.5px;
  border-top: 0;
  border-radius: 0 0 13px 13px;
}
.see-all__stub::after {
  bottom: -1.5px;
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
}
.see-all__stub svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #000000;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .see-all:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  }
  .see-all:hover .see-all__stub svg {
    transform: translateX(3px);
  }
}
@media (max-width: 640px) {
  .see-all__more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* src/view/components/vendor/vendor-hero/vendor-hero.css */
.vhero {
  position: relative;
  padding-top: 40px;
}
.vhero__logo {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 16px;
}
.vhero h1 {
  margin-top: 24px;
  font: 600 64px/1 var(--font);
  letter-spacing: -0.035em;
}
.vhero .lead {
  margin-top: 24px;
  max-width: 36em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}
.vhero .fields {
  max-width: 880px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1.5px solid var(--ink);
  gap: 8px 56px;
}
.vhero .fields dd {
  font-size: 21px;
}
@media (max-width: 640px) {
  .vhero {
    padding-top: 24px;
  }
  .vhero__logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .vhero h1 {
    margin-top: 16px;
    font-size: 40px;
  }
  .vhero .lead {
    margin-top: 16px;
    font-size: 17px;
  }
  .vhero .fields {
    margin-top: 28px;
    padding-top: 16px;
    gap: 12px 32px;
  }
  .vhero .fields dd {
    font-size: 17px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .vhero h1 {
    font-size: 56px;
  }
}

/* src/view/components/vendor/vendor-practice/vendor-practice.css */
.vsec .tickets {
  margin-top: 32px;
}
@media (max-width: 640px) {
  .vsec .tickets {
    margin-top: 12px;
  }
}

/* src/view/components/vendor/vendor-levels/vendor-levels.css */
.levels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.level h3 {
  margin-top: 24px;
  font: 600 22px/1.2 var(--font);
}
.level__code {
  margin-top: 8px;
  font: 500 15px/1.2 var(--mono);
  color: var(--ink-2);
}
.level p {
  margin-top: 12px;
  max-width: 24em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.level a {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.level a::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
@media (hover: hover) {
  .level a:hover {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}
.levels__rail {
  display: none;
}
@media (min-width: 641px) and (max-width: 1199px) {
  .levels .how__line {
    display: block;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .levels {
    gap: 24px;
  }
  .level h3 {
    font-size: 20px;
  }
}
@media (max-width: 640px) {
  .levels {
    display: flex;
    gap: 20px;
    margin: 20px -16px 0;
    padding: 8px 16px 12px;
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    mask: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .levels::-webkit-scrollbar {
    display: none;
  }
  .levels .how__line,
  .levels .how__num {
    display: none;
  }
  .level {
    flex: 0 0 272px;
    scroll-snap-align: start;
  }
  .level h3 {
    margin-top: 0;
    font-size: 20px;
  }
  .level p {
    font-size: 16px;
  }
  .levels__rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }
  .levels__rail::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 17px;
    height: 2px;
    background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) left center / 10px 2px repeat-x;
  }
  .levels__fill {
    position: absolute;
    left: 18px;
    top: 17px;
    width: calc(var(--rail, 0) * (100% - 36px));
    height: 2px;
    background: var(--ink);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .levels__rail span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--canvas);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font: 500 15px/1 var(--mono);
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  }
  .levels__rail span.is-on {
    background: var(--ink);
    color: var(--canvas);
    animation: rail-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @supports (animation-timeline: scroll()) {
    .levels {
      animation: edges linear both;
      animation-timeline: scroll(self inline);
    }
  }
}

/* src/view/components/vendor/interview-topics/interview-topics.css */
.itopics {
  margin-top: 32px;
  border-top: 1.5px solid var(--ink);
}
.itopics__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.itopics__name {
  font: 600 19px/1.35 var(--font);
}
.itopics__where {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.xchip {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--paper);
  color: #000000;
  font: 500 13px/1.4 var(--mono);
  vertical-align: 2px;
}
.vsec__more {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 600;
}
.vsec__more a {
  position: relative;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.vsec__more a::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
@media (hover: hover) {
  .vsec__more a:hover {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}
@media (max-width: 640px) {
  .itopics__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0;
  }
  .itopics__name {
    font-size: 17px;
  }
  .itopics__where {
    font-size: 15px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .itopics__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* src/view/components/vendor/ask-band/ask-band.css */
.ask-band {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  padding: 32px 40px;
  border-radius: 24px;
  background: var(--band-b);
}
.ask-band p {
  max-width: 36em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ask-band .btn {
  flex: none;
  margin-left: auto;
}
@media (max-width: 640px) {
  .ask-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 20px;
  }
  .ask-band .btn {
    margin-left: 0;
  }
}

/* src/view/components/results/score-card/score-card.css */
.rc {
  position: relative;
}
.rc__lift {
  filter: var(--lift);
}
.rc__paper {
  padding-bottom: 12px;
  border-radius: 18px 18px 0 0;
  background: var(--sheet);
  color: var(--sheet-ink);
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
}
.rc__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-radius: 18px 18px 0 0;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.32);
  background: var(--paper);
  color: #000000;
  font-size: 13px;
}
.rc__band .mono {
  font-weight: 500;
}
.rc__body {
  padding: 24px 28px;
}
.rc--mini {
  width: 280px;
  transform-origin: 50% 0;
}
.rc--mini .rc__band {
  padding: 12px 18px;
  border-radius: 16px 16px 0 0;
  font-size: 13px;
}
.rc--mini .rc__paper {
  border-radius: 16px 16px 0 0;
}
.rc--mini .rc__body {
  padding: 22px 18px 27px;
}
.rc--mini .score b {
  font-size: 56px;
}
.rc--mini .score span {
  font-size: 15px;
}
.rc--mini .stamp--pass {
  top: 68px;
  right: 16px;
  padding: 5px 10px;
  border-width: 2.5px;
  font-size: 13px;
}
.rc--mini .stamp--pass svg {
  width: 16px;
  height: 16px;
}
:root[data-theme="dark"] .rc__mascot .mascot .leg .ink {
  stroke: #000000;
}
.rc-col {
  position: sticky;
  top: 24px;
}
.score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.score b {
  font: 500 104px/0.9 var(--mono);
  letter-spacing: -0.05em;
}
.score span {
  font-size: 17px;
  line-height: 1.3;
  color: var(--sheet-ink-2);
}
.meter {
  position: relative;
  height: 10px;
  margin: 32px 0 40px;
  border-radius: 5px;
  background: var(--rule);
}
.meter__fill {
  height: 100%;
  border-radius: 5px;
  background: var(--sheet-ink);
}
.meter__pass {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--right);
}
.meter__label {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--right);
  white-space: nowrap;
}
.rows div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1.5px dashed var(--rule-2);
  font-size: 15px;
}
.rows dt {
  color: var(--sheet-ink-2);
}
.rows dd {
  font: 500 15px var(--mono);
}
.rc .btn {
  margin-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  .rc__lift {
    animation: print 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards;
  }
  .rc--mini {
    animation: sway 5s ease-in-out infinite;
  }
}
.meter--plain {
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .rc-col .fx {
    display: none;
  }
  .rc-col {
    position: relative;
    top: auto;
    order: -1;
  }
  .rc__band {
    padding: 14px 20px;
  }
  .rc__body {
    padding: 20px;
  }
  .score b {
    font-size: 80px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .rc-col {
    position: relative;
    top: auto;
    order: -1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}
.rc__mascot {
  position: absolute;
  z-index: 3;
  top: -46px;
  right: 40px;
  width: 64px;
  height: 64px;
  cursor: pointer;
}
.rc__mascot .mascot {
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: no-preference) {
  .rc__mascot .mascot.greet .arm.r {
    animation: hello 1s ease-in-out 1.6s 3;
  }
}
@media (min-width: 900px) {
  .rc-col--cheer {
    top: 88px;
  }
}
@media (max-width: 899px) {
  .rc-col--cheer {
    margin-top: 72px;
  }
}
@media (max-width: 640px) {
  .rc__mascot {
    right: 24px;
  }
}

/* src/view/components/results/group-table/group-table.css */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 12px/1 var(--font);
  white-space: nowrap;
}
.tag--weak {
  background: var(--weak-bg);
  color: var(--weak-ink);
}
.tag--strong {
  background: var(--strong-bg);
  color: var(--strong-ink);
}
.table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 16px;
}
.table th {
  padding: 0 0 8px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  text-align: left;
}
.table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.table .r {
  text-align: right;
}
.table .mono {
  font-size: 15px;
}
.table .gname {
  font-weight: 600;
}
.table .gname .tag {
  margin-left: 12px;
  vertical-align: 1px;
}
.gtrack {
  display: block;
  width: 200px;
  height: 10px;
  border-radius: 5px;
  background: var(--rule);
}
.gtrack i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
@media (max-width: 640px) {
  .table thead {
    display: none;
  }
  .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .table td {
    padding: 0;
    border: 0;
  }
  .table td:nth-child(2) {
    display: none;
  }
  .table td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .table td:nth-child(5)::after {
    content: "%";
  }
  .gtrack {
    width: 100%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .gtrack {
    width: 120px;
  }
}
@media (min-width: 641px) {
  .table th:last-child,
  .table td:last-child {
    padding-left: 16px;
  }
}

/* src/view/components/exam/exam-hero/exam-hero.css */
.xp__mascot {
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: -46px;
  right: 40px;
  width: 64px;
  height: 64px;
}
:root[data-theme="dark"] .xp__stub .mascot .leg .ink {
  stroke: #000000;
}
.xp {
  --bite: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  margin-top: 24px;
}
.xp__main {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  filter: var(--lift);
}
.xp__sheet {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 576px;
  padding: 48px 64px 40px 48px;
  border-radius: 24px 0 0 24px;
  background: var(--sheet);
  color: var(--sheet-ink);
  mask: radial-gradient(circle var(--bite) at 100% 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--bite) at 100% 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) bottom / 100% 51% no-repeat;
}
.xp__code {
  display: block;
  font: 500 17px/1.2 var(--mono);
}
.xp__title {
  display: block;
  margin-top: 16px;
  font: 600 64px/1 var(--font);
  letter-spacing: -0.035em;
}
.xp__vendor {
  margin-top: 12px;
  font-size: 19px;
  color: var(--sheet-ink-2);
}
.xp__lead {
  margin-top: 24px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sheet-ink-2);
}
.xp .fields {
  gap: 8px 48px;
  padding-top: 32px;
}
.xp .fields dd {
  font-size: 22px;
}
.xp__col {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / 3;
}
/* the stub sticks low enough for the character on it to stay in view. A stub taller than the screen, with every
   topic of the exam in it, keeps its bottom in view instead, so its button can always be reached */
.xp__stub {
  position: sticky;
  top: min(64px, calc(100vh - var(--stub-h, 0px) - 24px));
  filter: var(--lift);
  transform-origin: 0 100%;
}
.xp__paper {
  display: flex;
  flex-direction: column;
  min-height: 576px;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
  background: var(--sheet);
  color: var(--sheet-ink);
  border-left: 2px dashed var(--perf, rgba(0, 0, 0, 0.3));
  mask: radial-gradient(circle var(--bite) at 0 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--bite) at 0 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) bottom / 100% 51% no-repeat;
}
.stub-pale .xp__paper {
  background: color-mix(in srgb, var(--paper) 30%, var(--sheet));
  color: #000000;
}
.xp__band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 28px 18px 32px;
  background: var(--paper);
  color: #000000;
}
.xp__band b {
  font: 600 21px/1.2 var(--font);
}
.xp__band .mono {
  font-size: 15px;
  font-weight: 500;
}
.xp__form {
  padding: 20px 28px 28px 32px;
}
.xp__form .btn {
  margin-top: 24px;
}
.xp__mascot--m {
  display: none;
}
.xp__art {
  --c: var(--paper);
  overflow: hidden;
}
.xp__art circle {
  vector-effect: non-scaling-stroke;
}
.xp__ring--big {
  width: 300px;
  height: 300px;
  right: -90px;
  bottom: -45px;
}
.xp__ring--mid {
  width: 200px;
  height: 200px;
  right: -40px;
  bottom: 5px;
}
.xp__ring--small {
  width: 120px;
  height: 120px;
  right: 400px;
  bottom: 120px;
}
.xp__dot--a {
  right: 176px;
  bottom: 236px;
}
.xp__dot--b {
  right: 292px;
  bottom: 150px;
}
.xp__dot--c {
  right: 30px;
  bottom: 300px;
}
.is-tearing .xp__stub {
  transform: rotate(2.4deg);
}
:root[data-theme="dark"] .xp__paper {
  --perf: rgba(255, 255, 255, 0.28);
}
.xp--soon .xp__sheet,
.xp--soon .xp__paper {
  min-height: 540px;
}
.xp--topics .xp__sheet,
.xp--topics .xp__paper {
  min-height: 660px;
}
.xp__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px 32px;
  text-align: center;
}
.xp__soon .stamp {
  padding: 8px 18px;
  border-width: 3px;
  font-size: 19px;
}
/* the dark sheet swallows the dark blue ink -> the stamp takes the light blue of the dark theme */
:root[data-theme="dark"] .xp__soon .stamp {
  color: var(--button-line);
}
.xp__soon .btn {
  margin-top: 32px;
}
.stub-pale .set__legend,
.stub-pale .choice small,
.stub-pale .set__note {
  color: rgba(0, 0, 0, 0.66);
}
.stub-pale .choice + .choice {
  border-top-color: rgba(0, 0, 0, 0.12);
}
.xp__body {
  grid-column: 1;
  grid-row: 2;
  padding-right: 64px;
}
.xp__mascot .mascot {
  transform: scaleX(-1);
}
/* a stub that grows past the screen glides up to show its bottom */
@media (prefers-reduced-motion: no-preference) {
  .xp__stub {
    transition: top 0.3s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .xp__stub {
      animation: unzip 1ms linear both;
      animation-timeline: scroll(root);
      animation-range: 0 620px;
    }
  }
}
.xp__run .btn {
  margin-top: 24px;
}
.xp__run .set__note {
  margin-top: 16px;
}
.dock {
  display: none;
}
.dock__text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}
.dock__text b {
  display: block;
  font: 600 16px/1.3 var(--font);
}
@media (max-width: 640px) {
  .xp {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 56px;
  }
  .xp__main,
  .xp__col,
  .xp__body {
    grid-column: 1;
  }
  .xp__main {
    grid-row: 1;
  }
  .xp__col {
    grid-row: 2;
  }
  .xp__body {
    grid-row: 3;
    padding-right: 0;
  }
  .xp__sheet,
  .xp--soon .xp__sheet,
  .xp--topics .xp__sheet {
    min-height: 0;
    padding: 28px 20px 24px;
    border-radius: 20px 20px 0 0;
    mask: radial-gradient(circle var(--bite) at 0 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--bite) at 100% 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) right / 51% 100% no-repeat;
  }
  .xp__code {
    font-size: 15px;
  }
  .xp__title {
    margin-top: 12px;
    font-size: 40px;
    letter-spacing: -0.03em;
  }
  .xp__vendor {
    margin-top: 8px;
    font-size: 17px;
  }
  .xp__lead {
    margin-top: 16px;
    font-size: 16px;
  }
  .xp .fields {
    gap: 16px 32px;
    padding-top: 24px;
  }
  .xp .fields dd {
    font-size: 17px;
  }
  .xp__stub {
    position: relative;
    top: auto;
    transform-origin: 0 0;
  }
  .xp__stub > .xp__mascot {
    display: none;
  }
  .xp__mascot--m {
    display: block;
    top: -46px;
    right: 24px;
  }
  .xp__paper,
  .xp--soon .xp__paper,
  .xp--topics .xp__paper {
    min-height: 0;
    border-radius: 0 0 20px 20px;
    border-left: 0;
    border-top: 2px dashed var(--perf, rgba(0, 0, 0, 0.3));
    mask: radial-gradient(circle var(--bite) at 0 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--bite) at 100% 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) right / 51% 100% no-repeat;
  }
  .xp__band {
    padding: 18px 20px 16px;
  }
  .xp__band b {
    font-size: 19px;
  }
  .xp__form {
    padding: 12px 20px 24px;
  }
  .xp__soon {
    padding: 32px 20px 28px;
  }
  .is-tearing .xp__stub {
    transform: rotate(1.6deg) translate(2px, 8px);
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .xp__title {
    font-size: 56px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .xp {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
  .xp__sheet {
    padding: 40px 40px 32px;
  }
  .xp__body {
    padding-right: 40px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .xp {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 64px;
  }
  .xp__main,
  .xp__col,
  .xp__body {
    grid-column: 1;
  }
  .xp__main {
    grid-row: 1;
  }
  .xp__col {
    grid-row: 2;
  }
  .xp__body {
    grid-row: 3;
    padding-right: 0;
  }
  .xp__sheet,
  .xp--soon .xp__sheet,
  .xp--topics .xp__sheet {
    min-height: 0;
    padding: 40px 40px 32px;
    border-radius: 20px 20px 0 0;
    mask: radial-gradient(circle var(--bite) at 0 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--bite) at 100% 100%, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) right / 51% 100% no-repeat;
  }
  .xp__stub {
    position: relative;
    top: auto;
    transform-origin: 0 0;
  }
  .xp__stub > .xp__mascot {
    display: none;
  }
  .xp__mascot--m {
    display: block;
    top: -46px;
    right: 40px;
  }
  .xp__paper,
  .xp--soon .xp__paper,
  .xp--topics .xp__paper {
    min-height: 0;
    border-radius: 0 0 20px 20px;
    border-left: 0;
    border-top: 2px dashed var(--perf, rgba(0, 0, 0, 0.3));
    mask: radial-gradient(circle var(--bite) at 0 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) left / 51% 100% no-repeat,
      radial-gradient(circle var(--bite) at 100% 0, #0000 calc(var(--bite) - 0.5px), #000 var(--bite)) right / 51% 100% no-repeat;
  }
  .xp__band {
    padding: 20px 40px 18px;
  }
  .xp__form {
    padding: 16px 40px 32px;
  }
  .xp__soon {
    padding: 40px 40px 32px;
  }
  .is-tearing .xp__stub {
    transform: rotate(1.2deg) translate(2px, 8px);
  }
}
@media (min-width: 900px) {
  .xp--topics.xp--many .xp__sheet,
  .xp--topics.xp--many .xp__paper {
    min-height: 800px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .xp__ring--big {
    width: 186px;
    height: 186px;
    right: -103px;
    bottom: 82px;
  }
  .xp__ring--mid {
    width: 124px;
    height: 124px;
    right: -50px;
    bottom: 83px;
  }
  .xp__ring--small {
    width: 74px;
    height: 74px;
    right: 303px;
    bottom: 118px;
  }
  .xp__dot--a {
    right: 113px;
    bottom: 183px;
  }
  .xp__dot--b {
    right: 199px;
    bottom: 119px;
  }
  .xp__dot--c {
    right: 26px;
    bottom: 190px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .xp__ring--big {
    width: 210px;
    height: 210px;
    right: -115px;
    bottom: -110px;
  }
  .xp__ring--mid {
    width: 140px;
    height: 140px;
    right: -75px;
    bottom: -60px;
  }
  .xp__ring--small {
    width: 48px;
    height: 48px;
    right: 22px;
    bottom: 111px;
  }
  .xp__dot--a {
    right: 24px;
    bottom: 178px;
  }
  .xp__dot--b {
    right: 60px;
    bottom: 86px;
  }
  .xp__dot--c {
    right: 8px;
    bottom: 209px;
  }
}
@media (max-width: 640px) {
  .xp__ring--big {
    width: 130px;
    height: 130px;
    right: -73px;
    bottom: auto;
    top: -85px;
  }
  .xp__ring--mid {
    width: 84px;
    height: 84px;
    right: -48px;
    bottom: auto;
    top: -46px;
  }
  .xp__ring--small {
    display: none;
  }
  .xp__dot--a {
    right: 92px;
    bottom: auto;
    top: 29px;
  }
  .xp__dot--b {
    right: 136px;
    bottom: auto;
    top: 14px;
  }
  .xp__dot--c {
    right: 14px;
    bottom: auto;
    top: 30px;
  }
}
/* the torn stub stays at the bottom of the screen as a bar once the stub is out of view, it slides in and out */
@media (max-width: 899px) {
  .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px 20px;
    background: var(--paper);
    color: #000;
    border-top: 2px dashed rgba(0, 0, 0, 0.32);
    mask: radial-gradient(circle 12px at 0 0, #0000 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, #0000 11.5px, #000 12px) right / 51% 100% no-repeat;
    translate: 0 110%;
    visibility: hidden;
    transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s linear 0.35s;
  }
  .dock.is-shown {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s;
  }
  /* the bar stays over the end of the page -> the footer gets room under its last line */
  body:has(.dock) .foot {
    padding-bottom: 88px;
  }
}
@media (max-width: 640px) {
  .dock {
    gap: 12px;
    padding: 14px 16px 18px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .xp .tk .fields {
    gap: 8px 20px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .xp .tk .fields {
    gap: 8px 24px;
    padding-top: 16px;
  }
  .xp .tk .fields dd {
    font-size: 15px;
  }
}

/* src/view/components/mascot/mascot-walk/mascot-walk.css */
.foot__mascot {
  cursor: pointer;
  --ww: 72px;
  position: absolute;
  top: 0;
  left: calc(100% - 200px);
  width: 72px;
  height: 72px;
  pointer-events: auto;
}
.foot__walk {
  position: absolute;
  z-index: 4;
  top: -66px;
  left: max(32px, calc(50% - 600px));
  right: max(32px, calc(50% - 600px));
  height: 72px;
  pointer-events: none;
}
.foot__mascot .hop {
  position: relative;
}
.foot__mascot .mascot {
  position: absolute;
  inset: 0;
}
.foot__mascot .mascot.greet {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .foot__mascot {
    animation: walk-stops var(--walk, 100s) linear infinite;
  }
  .foot__mascot .mascot.walking {
    animation: face var(--walk, 100s) step-end infinite, walker-on var(--walk, 100s) step-end infinite;
  }
  .foot__mascot .mascot.greet {
    animation: face var(--walk, 100s) step-end infinite, greet-on var(--walk, 100s) step-end infinite;
  }
  .foot__mascot .mascot .leg.a,
  .foot__mascot .mascot .leg.b {
    animation-duration: 0.9s;
  }
  .foot__mascot .mascot.greet .arm.r {
    animation: hello 1s ease-in-out infinite;
  }
  /* a tap stops the walker for its jump and then it walks on. It stands on both feet while it stops */
  .foot__mascot.is-poked,
  .foot__mascot.is-poked .mascot {
    animation-play-state: paused;
  }
  .foot__mascot.is-poked .mascot .leg.a,
  .foot__mascot.is-poked .mascot .leg.b,
  .foot__mascot.is-poked .mascot .body {
    animation: none;
  }
}
/* a mouse over the walker stops it the same way until the mouse leaves */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foot__mascot:hover,
  .foot__mascot:hover .mascot {
    animation-play-state: paused;
  }
  .foot__mascot:hover .mascot .leg.a,
  .foot__mascot:hover .mascot .leg.b,
  .foot__mascot:hover .mascot .body {
    animation: none;
  }
}
@media (max-width: 640px) {
  .foot__walk {
    --walk: 64s;
    left: 16px;
    right: 16px;
    top: -58px;
    height: 64px;
  }
  .foot__mascot {
    --ww: 64px;
    width: 64px;
    height: 64px;
  }
}

/* src/view/components/mascot/mascot-perch/mascot-perch.css */
.hop {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .is-poked .hop {
    animation: jump 0.5s ease;
  }
  .is-poked .mascot .hole {
    animation: punched 0.9s ease forwards;
  }
}
/* a mouse over the character gets two waves and then the hand rests. A finger has no hover -> a tap only jumps,
   so the character never keeps waving after a tap */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .perch:hover .mascot .arm.r {
    animation: wave 0.9s ease-in-out 2;
  }
  .perch:hover .mascot.greet .arm.r {
    animation: hello-again 1s ease-in-out 2;
  }
}

/* src/view/components/mascot/mascot/mascot.css */
.mascot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mascot .ink {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mascot .eye {
  fill: #000000;
}
.mascot .leg,
.mascot .arm,
.mascot .eyes,
.mascot .body,
.mascot .lever,
.mascot .hole {
  transform-box: fill-box;
}
.mascot .leg {
  transform-origin: 50% 0;
}
.mascot .arm {
  transform-origin: 0 0;
}
.mascot .arm.r.up {
  transform-box: view-box;
  transform-origin: 82px 46px;
}
.mascot .eyes {
  transform-origin: 50% 50%;
}
.mascot .hole {
  transform-origin: 50% 50%;
  transform: scale(0);
  fill: var(--canvas);
  stroke: #000000;
  stroke-width: 2;
}
.mascot .paper {
  fill: var(--p-e724);
  stroke: #000000;
  stroke-width: 3;
  stroke-linejoin: round;
}
.mascot .perf {
  fill: none;
  stroke: #000000;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0 7;
}
.mascot .stubfill {
  fill: rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] .mascot .arm .ink,
:root[data-theme="dark"] .mascot .leg .ink {
  stroke: var(--p-e724);
}
.mascot.greet .arm.r {
  transform: rotate(-140deg);
}
@media (prefers-reduced-motion: no-preference) {
  .mascot .leg.a {
    animation: step-a 0.7s ease-in-out infinite;
  }
  .mascot .leg.b {
    animation: step-b 0.7s ease-in-out infinite;
  }
  .mascot .body {
    animation: bob 0.35s ease-in-out infinite;
  }
  .mascot .eyes {
    animation: blink 4.2s ease infinite;
  }
  .mascot.still .leg,
  .mascot.still .body {
    animation: none;
  }
}

/* src/view/pages/not-found-page/not-found-page.css */
@media (min-width: 900px) {
  :root[data-theme="dark"] .nf__mascot .mascot .leg .ink {
    stroke: #000000;
  }
}
.nf {
  padding: 64px 0 0;
}
.nf__ticket {
  position: relative;
  max-width: 760px;
  margin: 64px auto 0;
}
.nf__ticket .tk__title {
  font-size: 34px;
}
.nf__mascot {
  position: absolute;
  z-index: 3;
  top: -52px;
  right: 56px;
  width: 72px;
  height: 72px;
  cursor: pointer;
}
.nf__mascot .mascot {
  transform: scaleX(-1);
}
@media (max-width: 640px) {
  .nf {
    padding-top: 24px;
  }
  .nf__ticket {
    margin-top: 64px;
  }
  .nf__ticket .tk__title {
    font-size: 28px;
  }
  .nf__mascot {
    top: -46px;
    right: 24px;
    width: 64px;
    height: 64px;
  }
}
/* a long address breaks inside the field instead of pushing the ticket wider */
.nf .fields dd {
  overflow-wrap: anywhere;
}

/* src/view/pages/studio-page/studio-page.css */
/* the page under the header is one screen high and the dark band stands in its middle,
   the room under the band matches the crumbs over it */
.studio {
  --head: 77px;
  --crumbs: 48px;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--head));
}
.studio__stage {
  flex: 1;
  display: grid;
  align-content: center;
  padding-bottom: var(--crumbs);
}
.studio__band {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  padding: 88px 0 104px;
  background: #161616;
  color: #ffffff;
}
.studio__in {
  position: relative;
  z-index: 1;
}
.studio__logo {
  width: 420px;
  max-width: 100%;
}
.studio__logo svg {
  display: block;
  width: 100%;
  height: auto;
  color: #ffffff;
}
.studio__lead {
  max-width: 28em;
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.5;
  color: #c9c9c9;
  text-wrap: pretty;
}
.studio__send {
  margin-top: 36px;
  background: #ffffff;
  color: #000000;
}
.studio .studio__send:focus-visible {
  outline-color: #ffffff;
}
/* thin rings and the red ball of the mark of the studio on the right of the band */
.studio__rings {
  position: absolute;
  right: -180px;
  top: 50%;
  width: 720px;
  height: 720px;
  translate: 0 -50%;
}
.studio__rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}
.studio__rings i:nth-child(2) {
  inset: 70px;
}
.studio__rings i:nth-child(3) {
  inset: 140px;
}
.studio__rings i:nth-child(4) {
  inset: 210px;
}
.studio__dot {
  position: absolute;
  right: 22%;
  top: 22%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ec2c12;
  box-shadow: 0 0 0 10px rgba(236, 44, 18, 0.14), 0 0 0 22px rgba(236, 44, 18, 0.06);
}
@media (hover: hover) {
  .studio .studio__send:hover {
    background-color: #e6e6e6;
    box-shadow: 0 10px 18px -12px rgba(255, 255, 255, 0.5);
  }
}
/* the band comes in softly and the red ball pops in after it */
@media (prefers-reduced-motion: no-preference) {
  .studio__in {
    animation: studio-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .studio__dot {
    animation: studio-dot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
  }
}
@keyframes studio-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@keyframes studio-dot {
  from {
    scale: 0;
  }
}
@media (max-width: 640px) {
  .studio {
    --head: 65px;
    --crumbs: 38px;
  }
  .studio__band {
    padding: 56px 0 64px;
  }
  .studio__logo {
    width: 260px;
  }
  .studio__lead {
    margin-top: 24px;
    font-size: 17px;
  }
  .studio__send {
    width: 100%;
    margin-top: 28px;
  }
  .studio__rings {
    right: -360px;
    top: 0;
    translate: 0 -30%;
  }
  .studio__dot {
    right: 12%;
    top: 14%;
    width: 18px;
    height: 18px;
  }
}

/* src/view/components/exam/attempt-settings/attempt-settings.css */
.set__legend {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--sheet-ink-2);
}
.choice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.choice + .choice {
  border-top: 1px solid var(--rule);
}
.choice b {
  display: block;
  font: 600 16px/1.35 var(--font);
}
.choice small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sheet-ink-2);
}
.set__group {
  margin-top: 16px;
}
.dot,
.box {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
}
.dot {
  border-radius: 50%;
}
.box {
  border-radius: 5px;
}
.choice.is-on .dot {
  background: radial-gradient(circle, currentColor 0 6px, transparent 6.5px);
}
.choice.is-on .box {
  background: currentColor;
}
.choice.is-on .box::after,
.box.on::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--check, var(--sheet));
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}
.set__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--sheet-ink-2);
  text-align: center;
}
.topics-pick {
  margin: 4px 0 12px 30px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--rule);
}
.tpills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  color: var(--sheet-ink-2);
  font: 400 15px/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.tpill .mono {
  font-size: 13px;
  opacity: 0.8;
}
/* a picked topic changes only its colour -> its size stays and the pills next to it never move */
.tpill.is-on {
  background: var(--paper);
  box-shadow: none;
  color: #000000;
}
.topics-pick__sum {
  margin-top: 12px;
  font-size: 13px;
  color: var(--sheet-ink-2);
}
.tpill,
.choice .dot,
.choice .box {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .tpill:not(.is-on):hover {
    box-shadow: inset 0 0 0 1.5px var(--sheet-ink);
    color: var(--sheet-ink);
  }
  .tpill.is-on:hover {
    background: color-mix(in srgb, var(--paper) 88%, #000000);
  }
  .choice:not(.is-on):hover .dot,
  .choice:not(.is-on):hover .box {
    box-shadow: 0 0 0 3px var(--hover);
  }
}
/* the topic pills open under the choice of topics and close again in their place */
.set__reveal {
  display: grid;
  grid-template-rows: 0fr;
}
.set__reveal.is-open {
  grid-template-rows: 1fr;
}
.set__clip {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .set__reveal {
    transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .set__reveal .topics-pick {
    transition: opacity 0.3s ease;
  }
  .set__reveal:not(.is-open) .topics-pick {
    opacity: 0;
  }
}

/* src/view/pages/exam-page/exam-page.css */
.section {
  padding: 64px 0;
}
.section h2 {
  font: 600 34px/1.15 var(--font);
  letter-spacing: -0.025em;
}
.section__lead {
  margin-top: 12px;
  max-width: 40em;
  font-size: 17px;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .section {
    padding: 48px 0;
  }
  .section h2 {
    font-size: 28px;
  }
  .section__lead {
    font-size: 16px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .section h2 {
    font-size: 30px;
  }
}

/* src/view/components/exam/group-weights/group-weights.css */
.cells {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.cells__g {
  flex: var(--n) 1 0;
  min-width: 0;
}
.cells__row {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 3px;
}
.cells__row i {
  display: block;
  height: 36px;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.cells__g p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.cells__g p b {
  margin-left: 6px;
  color: var(--ink);
  font: 500 13px var(--mono);
}
.groups {
  margin-top: 24px;
}
.groups li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 112px;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.groups li:first-child {
  border-top: 1px solid var(--rule);
}
.groups b {
  font: 600 17px/1.4 var(--font);
}
.groups p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink-2);
}
.groups .num {
  font: 500 17px var(--mono);
  text-align: right;
}
.groups .muted {
  display: block;
  font: 400 13px/1.4 var(--font);
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .cells {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .cells__g {
    flex: none;
  }
  .cells__row {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 4px;
  }
  .cells__row i {
    height: 20px;
  }
  .groups li {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px 24px;
  }
  .groups li > div {
    grid-column: 1 / -1;
  }
  .groups .num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    text-align: left;
  }
  .groups .muted {
    display: inline;
  }
}
@media (min-width: 641px) {
  .cells--wrap {
    flex-wrap: wrap;
    gap: 20px 16px;
  }
  .cells--wrap .cells__g {
    flex: none;
  }
  .cells--wrap .cells__row {
    grid-template-columns: repeat(var(--n), 11px);
  }
  .cells--wrap .cells__g p {
    white-space: nowrap;
  }
}

/* src/view/components/exam/exam-facts/exam-facts.css */
.spec {
  margin-top: 24px;
}
.spec div {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.spec div:first-child {
  border-top: 1px solid var(--rule);
}
.spec dt {
  color: var(--ink-2);
}
.foot-note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-2);
}
/* a link never breaks inside -> its arrow never ends up alone on the next line */
.foot-note a {
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .foot-note a:hover {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}
@media (max-width: 640px) {
  .spec div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    font-size: 15px;
  }
}

/* src/view/components/exam/practice-steps/practice-steps.css */
.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  margin-top: 32px;
}
.points h3 {
  font: 600 17px/1.35 var(--font);
}
.points p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .points {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
  }
}

/* src/view/components/exam/sample-slider/sample-slider.css */
.sample {
  margin-top: 32px;
}
/* the frame shows one sample of the strip and takes its height. The strip slides sideways under it and follows the
   finger of a swipe. The clip leaves room for focus rings and ends before the next sample */
.sample__view {
  clip-path: inset(-12px);
}
.sample__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  translate: calc(var(--pos, 0) * (-100% - 24px) + var(--swipe, 0px)) 0;
}
/* long lines of code never widen a sample -> they scroll inside it */
.sample__card {
  --card-x: 16px;
  flex: 0 0 100%;
  min-width: 0;
  padding: 32px var(--card-x);
  border-radius: 20px;
  background: var(--sheet);
  color: var(--sheet-ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.sample__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sample__pos {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
}
.sample__q {
  margin-top: 16px;
  font-size: var(--card-text);
  line-height: 1.5;
}
.sample__foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.sample__card.is-shown .reveal__show {
  display: none;
}
.sample__card.is-shown .reveal__hide {
  display: inline;
}
.sample__card.is-shown .reveal svg:last-child {
  transform: rotate(180deg);
}
.answer {
  display: grid;
  grid-template-rows: 0fr;
}
.sample__card.is-shown .answer {
  grid-template-rows: 1fr;
}
.answer__clip {
  min-height: 0;
  overflow: hidden;
}
.answer__in {
  margin-top: 24px;
}
.answer-rule {
  height: 0;
  margin: 32px 0 24px;
  border: 0;
  border-top: 1px solid var(--rule);
}
.answer-rule + .hint {
  margin-top: 0;
}
.answer__verdict {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.answer__verdict b {
  font: 600 22px/1.2 var(--font);
  color: var(--right);
}
.answer__verdict span {
  font: 500 16px var(--mono);
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.pager__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
/* the pager button is 40 px with a border of 1.5 px -> a layer around it makes the area to tap 44 px */
.pager__btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.pager__btn:disabled {
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: default;
}
.pager__btn svg {
  width: 18px;
  height: 18px;
}
.pager__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pager__dots i {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--rule-2);
}
.pager__dots i.on {
  width: 28px;
  background: var(--ink);
}
.sample__card .code {
  --code-inset: 3px;
  margin-left: calc(var(--code-inset) - var(--card-x));
  margin-right: calc(var(--code-inset) - var(--card-x));
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .answer {
    transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
@media (hover: hover) {
  .pager__btn:not(:disabled):hover {
    background-color: var(--ink);
    color: var(--canvas);
  }
}
@media (max-width: 640px) {
  .sample {
    margin-top: 24px;
  }
  .sample__card {
    --card-x: 8px;
    padding: 20px var(--card-x);
    border-radius: 16px;
  }
  .answer__verdict b {
    font-size: 19px;
  }
  .sample__card .code {
    --code-inset: 0px;
    border-radius: 2px;
  }
}
/* the strip slides to the next sample and the frame takes its height in the same time, nothing fades. While the
   finger moves the strip follows it at once, and the copy at the end of the loop hands over without a slide */
@media (prefers-reduced-motion: no-preference) {
  .sample__track {
    transition: translate 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .sample.is-turning .sample__view {
    transition: height 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .sample__view.is-swiping .sample__track,
  .sample__track.is-jumping {
    transition: none;
  }
}

/* src/view/components/quiz/option-list/option-list.css */
.opts--small {
  margin-top: 16px;
}
.opts--small .opt {
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 10px 12px;
}
.opts--small .opt__mark {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.opts--small .opt__text {
  padding-top: calc((32px - var(--card-text) * 1.5) / 2);
}
.optset {
  min-width: 0;
  margin: 32px 0 0;
  padding: 16px 6px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 18px;
}
.optset legend {
  margin-left: 8px;
  padding: 0 10px;
  font: 600 13px/1.3 var(--font);
  color: var(--sheet-ink-2);
}
.optset .opts {
  margin-top: 0;
}
.opts--thread {
  position: relative;
  margin-top: 28px !important;
  padding-left: 36px;
}
.opts--thread::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 26px;
  width: 2px;
  background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) center top / 2px 7px repeat-y;
}
.opts {
  display: grid;
  gap: 4px;
  margin-top: 24px;
}
.opts--one .opt__mark {
  border-radius: 50%;
}
@media (max-width: 640px) {
  .optset {
    margin-top: 24px;
    padding: 12px 3px 6px;
    border-radius: 16px;
  }
  .optset legend {
    margin-left: 8px;
  }
}
/* the options frame turns red with its legend when Check finds no picked option */
.optset.is-missing {
  border-color: var(--wrong);
}
.optset.is-missing legend {
  color: var(--wrong);
}
@media (prefers-reduced-motion: no-preference) {
  .optset {
    transition: border-color 0.2s ease;
  }
}

/* src/view/components/base/code-editor/code-editor.css */
.code {
  margin-top: 24px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--code-bg);
  color: var(--code-text);
}
.code__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--code-head);
  font: 400 13px/1.6 var(--mono);
  color: #bbbbbb;
}
.code__dir {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  color: #8c8c8c;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code__lang {
  margin-left: auto;
  color: #8c8c8c;
}
.code__view {
  position: relative;
}
.code pre {
  margin: 0;
  padding: 16px 0 22px;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  font: 400 14px/1.75 var(--mono);
  font-variant-ligatures: none;
}
.code pre::-webkit-scrollbar {
  display: none;
}
.code pre span {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0 20px 0 0;
}
.code__track {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  display: none;
  height: 3px;
}
.code.is-overflowing .code__track {
  display: block;
}
.code__track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.code__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: #7c8596;
  width: calc(var(--scroll-size, 1) * 100%);
  transform: translateX(calc((1 - var(--scroll-size, 1)) / var(--scroll-size, 1) * var(--scroll-progress, 0) * 100%));
}
.code pre i {
  display: inline-block;
  width: 44px;
  margin-right: 16px;
  padding-right: 12px;
  color: var(--code-num);
  font-style: normal;
  text-align: right;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.code pre b {
  font-weight: inherit;
}
.code .t {
  color: var(--code-tag);
}
.code .a {
  color: var(--code-attr);
}
.code .s {
  color: var(--code-str);
}
.code .av {
  color: var(--code-val);
}
.code .k,
.code .e {
  color: var(--code-kw);
}
.code .v {
  color: var(--code-var);
}
.code .q {
  color: var(--code-var);
  font-style: italic;
}
.code .n {
  color: var(--code-int);
}
.code .f {
  color: var(--code-fn);
}
.code .c {
  color: var(--code-com);
}
.code .d {
  color: var(--code-doc);
  font-style: italic;
}
.code .m {
  color: var(--code-meta);
}
@media (max-width: 640px) {
  .code pre {
    font-size: 12px;
  }
  .code pre i {
    width: 30px;
    margin-right: 10px;
    padding-right: 8px;
  }
}
.code__file {
  flex: none;
  white-space: nowrap;
}

/* src/view/components/quiz/question-card/question-card.css */
.qcard__body .code {
  --code-inset: 3px;
  margin-left: calc(var(--code-inset) - var(--card-x));
  margin-right: calc(var(--code-inset) - var(--card-x));
  border-radius: 4px;
}
.qcard__lift {
  filter: var(--lift);
}
.qcard__paper {
  border-radius: 20px;
  background: var(--sheet);
  color: var(--sheet-ink);
  --card-x: 16px;
}
.qcard__band {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--card-x);
}
.qcard__body {
  padding: 32px var(--card-x);
}
.qcard__body .q-text {
  margin-top: 0;
}
.qbody--panel .q-text {
  padding: 20px 24px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 16%, var(--sheet));
}
.qbody--panel .opts {
  margin-top: 32px;
}
.qbody--thread .q-text {
  position: relative;
  padding-left: 36px;
}
.qbody--thread .q-text::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.qbody--thread .q-text::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: -28px;
  width: 2px;
  background: radial-gradient(circle, var(--rule-2) 1.2px, transparent 1.6px) center top / 2px 7px repeat-y;
}
.qcard--ticket .qcard__paper {
  mask: radial-gradient(circle 11px at 0 64px, #0000 10.5px, #000 11px) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 64px, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
}
.qcard--ticket .qcard__band {
  height: 65px;
  padding: 0 var(--card-x);
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: #000000;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.3);
}
.qcard--ticket .qcard__band .chip {
  background: rgba(255, 255, 255, 0.78);
  color: #000000;
}
.qcard--ticket .qcard__band .chip--line {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.42);
}
.qcard--card .qcard__lift {
  filter: none;
}
.qcard--card .qcard__paper {
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.qcard--card .qcard__band {
  padding: 20px var(--card-x);
  border-bottom: 1px solid var(--rule);
}
.kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kind i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.kind i + i {
  margin-left: -4px;
}
.q-text {
  margin-top: 16px;
  max-width: 42em;
  font-size: var(--card-text);
  line-height: 1.5;
}
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.actions .keys {
  margin-left: auto;
}
.keys {
  font-size: 13px;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .qcard__paper {
    --card-x: 8px;
  }
  .qcard__body .code {
    --code-inset: 0px;
    border-radius: 2px;
  }
  .qcard__band .serial {
    display: none;
  }
  .qcard__body {
    padding: 20px var(--card-x);
  }
  .actions {
    gap: 16px;
    margin-top: 24px;
  }
  .actions .keys {
    display: none;
  }
  .actions .btn {
    margin-left: auto;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .actions .keys {
    display: none;
  }
  .actions .btn {
    margin-left: auto;
  }
}
/* Check without a picked option says so in red next to the keys */
.keys--error {
  font-weight: 600;
  color: var(--wrong);
}
@media (prefers-reduced-motion: no-preference) {
  .keys--error {
    animation: consent-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* src/view/components/quiz/feedback-panel/feedback-panel.css */
.fb {
  padding: 24px 14px;
  border-radius: 16px;
  background: var(--wrong-tint);
}
.fb.ok {
  background: var(--right-tint);
}
.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.verdict b {
  font: 600 22px/1.2 var(--font);
  color: var(--wrong);
}
.fb.ok .verdict b {
  color: var(--right);
}
.verdict span {
  font-size: 16px;
  color: var(--ink-2);
}
.verdict .mono {
  color: var(--ink);
}
.hint {
  margin-top: 12px;
  font-size: var(--card-text);
  line-height: 1.6;
}
.hint b {
  font-weight: 600;
  background: linear-gradient(transparent 56%, var(--marker) 56%, var(--marker) 92%, transparent 92%);
}
.fb .reveal {
  margin-top: 16px;
}
.fb .explain {
  margin-top: 16px;
  color: var(--sheet-ink);
}
.fb .sources {
  margin-top: 20px;
}
.explain {
  margin-top: 12px;
  font-size: var(--card-text);
  line-height: 1.7;
  color: var(--ink-2);
}
.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
}
.sources > span {
  margin-right: 4px;
  color: var(--ink-2);
}
.sources a.pill .ext {
  width: 12px;
  height: 12px;
  margin-left: 6px;
}
/* a long name wraps on a phone -> the pill grows with its lines instead of squeezing them */
.sources a.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 14px;
  font: 400 13px/1.3 var(--mono);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--button-line) 45%, transparent);
  background: color-mix(in srgb, var(--button-line) 7%, var(--sheet));
  color: var(--button-line);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .sources a.pill:hover {
    border-color: var(--button-line);
    background: color-mix(in srgb, var(--button-line) 15%, var(--sheet));
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sources a.pill:hover .ext__arrow {
    transform: translate(2px, -2px);
  }
}
@media (max-width: 640px) {
  .fb {
    padding: 20px 8px;
    border-radius: 14px;
  }
  .verdict b {
    font-size: 20px;
  }
  .verdict span {
    font-size: 15px;
  }
}
/* the explanation opens and closes in its place, the page under it moves with it */
.fb__more {
  display: grid;
  grid-template-rows: 0fr;
}
.fb__more.is-open {
  grid-template-rows: 1fr;
}
.fb__clip {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .fb__more {
    transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
.fb .reveal svg:last-child {
  transition: transform 0.3s ease;
}
.fb .reveal.is-open svg:last-child {
  transform: rotate(180deg);
}

/* src/view/components/results/mistake-list/mistake-list.css */
.mrow__body .code {
  --code-inset: 3px;
  margin-left: calc(var(--code-inset) - var(--card-x));
  margin-right: calc(var(--code-inset) - var(--card-x));
  border-radius: 4px;
}
.mrow__band .chip {
  background: rgba(255, 255, 255, 0.78);
  color: #000000;
}
.mrow__band .chip--line {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.42);
}
.mlist {
  margin-top: 24px;
}
.mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.mrow__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mrow__n {
  margin-right: 4px;
  font: 600 15px/1.3 var(--font);
}
.mrow__title {
  margin-top: 12px;
  font: 600 17px/1.4 var(--font);
}
.mrow--live {
  display: block;
  padding: 20px 0;
  transition: padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), margin 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s;
}
.mrow--live .mrow__lift {
  transition: filter 0.45s ease;
}
.mrow--live .mrow__paper {
  --card-x: 12px;
  --band-h: 64px;
  --mbite: 0px;
  border-radius: 20px;
  background-color: transparent;
  color: inherit;
  mask: radial-gradient(circle var(--mbite) at 0 var(--band-h), #0000 calc(var(--mbite) - 0.5px), #000 var(--mbite)) left / 51% 100% no-repeat,
    radial-gradient(circle var(--mbite) at 100% var(--band-h), #0000 calc(var(--mbite) - 0.5px), #000 var(--mbite)) right / 51% 100% no-repeat;
  transition: background-color 0.45s ease, --mbite 0.35s ease;
}
.mrow--live .mrow__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 0;
  border-radius: 20px 20px 0 0;
  border-bottom: 2px dashed transparent;
  background-color: transparent;
  transition: min-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.45s ease, border-color 0.45s ease;
}
.mrow--live:not(.is-open) .serial {
  display: none;
}
.mrow--live .mrow__head {
  padding: 0;
  transition: padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mrow--live .mrow__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mrow--live .mrow__clip {
  min-height: 0;
  overflow: hidden;
}
.mrow--live.is-open {
  margin: 0 0 24px;
  padding: 0;
  border-bottom-color: transparent;
}
.mrow--live.is-open .mrow__lift {
  filter: var(--lift);
}
.mrow--live.is-open .mrow__paper {
  --mbite: 11px;
  background-color: var(--sheet);
  color: var(--sheet-ink);
}
.mrow--live.is-open .mrow__band {
  min-height: var(--band-h);
  padding: 0 var(--card-x);
  background-color: var(--paper);
  color: #000000;
  border-bottom-color: rgba(0, 0, 0, 0.3);
}
.mrow--live.is-open .mrow__toggle {
  border-color: rgba(0, 0, 0, 0.3);
  color: #000000;
}
.mrow--live.is-open .mrow__head {
  padding: 20px var(--card-x) 0;
}
.mrow--live.is-open .mrow__head .mrow__title {
  margin-top: 0;
}
.mrow--live.is-open .mrow__stem {
  display: none;
}
.mrow--live.is-open .mrow__more {
  grid-template-rows: 1fr;
}
.mrow__toggle svg {
  transition: transform 0.35s ease;
  width: 18px;
  height: 18px;
}
.mrow__body {
  padding: 20px var(--card-x) 24px;
}
.mrow__report {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.mrow__stem {
  margin-top: 4px;
  overflow: hidden;
  font-size: 15px;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mrow__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
.mrow.is-open .mrow__toggle svg {
  transform: rotate(180deg);
}
.mrow__body .q-text {
  margin-top: 0;
}
.mrow__body .explain {
  color: var(--sheet-ink-2);
}
.mrow__body .opts {
  margin-top: 16px;
}
.mrow__body .opt {
  padding: 10px 6px;
  grid-template-columns: 32px minmax(0, 1fr);
}
.mrow__body .opt__mark {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.mrow__body .opt__text {
  padding-top: calc((32px - var(--card-text) * 1.5) / 2);
}
.mrow__body .hint {
  margin-top: 16px;
}
@media (hover: hover) {
  .mrow__toggle:hover,
  .mrow:not(.is-open):hover .mrow__toggle {
    background-color: var(--hover);
    border-color: var(--ink-3);
  }
  .mrow--live.is-open .mrow__toggle:hover {
    background-color: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.55);
  }
}
@media (max-width: 640px) {
  .mrow__body .code {
    --code-inset: 0px;
    border-radius: 2px;
  }
  .mlist {
    margin-top: 16px;
  }
  .mrow {
    gap: 12px;
    padding: 16px 0;
  }
  .mrow--live .mrow__paper {
    --card-x: 8px;
    --band-h: 80px;
  }
  .mrow--live.is-open {
    margin: 0 -8px 24px;
  }
  .mrow__band .serial {
    display: none;
  }
  .mrow__title {
    font-size: 16px;
  }
}

/* src/view/components/quiz/progress-strip/progress-strip.css */
.pstrip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.pstrip__label {
  font-size: 15px;
  color: var(--ink-2);
  white-space: nowrap;
}
.pstrip__label b {
  color: var(--ink);
  font-weight: 600;
}
.pstrip__cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(50, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
}
.pstrip__cells i {
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
}
.pstrip__cells i.ok {
  background: var(--right);
}
.pstrip__cells i.bad {
  background: var(--wrong);
}
.pstrip__cells i.now {
  height: 10px;
  background: var(--ink);
}
.serial {
  margin-left: auto;
  font: 500 13px var(--mono);
}
@media (prefers-reduced-motion: no-preference) {
  .pstrip__cells i.now {
    animation: pulse-ring 2s ease-out infinite;
  }
}
.pstrip__more {
  display: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .pstrip__more:hover {
    background-color: var(--hover);
    border-color: var(--ink-3);
  }
}
@media (max-width: 640px) {
  .pstrip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 16px;
  }
  .pstrip__cells {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(25, minmax(0, 1fr));
    gap: 8px 4px;
  }
  .pstrip__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: none;
    font-size: 14px;
  }
  .pstrip__more .ico {
    width: 18px;
    height: 18px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .pstrip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 20px;
  }
  .pstrip__cells {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .pstrip__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: none;
    font-size: 14px;
  }
  .pstrip__more .ico {
    width: 18px;
    height: 18px;
  }
}
.pstrip__cells--60 {
  grid-template-columns: repeat(60, minmax(0, 1fr));
  gap: 3px;
}
@media (max-width: 640px) {
  .pstrip__cells--60 {
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 8px 3px;
  }
}

/* src/view/pages/question-page/question-page.css */
.quiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  grid-template-rows: auto 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 24px;
}
/* the card takes both rows -> the still print fills the free column under This attempt */
.quiz > .qcard {
  grid-row: span 2;
}
.quiz__still {
  position: relative;
  align-self: stretch;
}
@media (max-width: 899px) {
  .quiz > .qcard {
    grid-row: auto;
  }
}
@media (max-width: 640px) {
  .qmain .crumbs {
    display: none;
  }
  .quiz {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 20px;
  }
  .quiz > .side {
    display: none;
  }
  .quiz > .qcard {
    margin-left: -8px;
    margin-right: -8px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .quiz {
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 32px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .quiz {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .quiz > .side {
    display: none;
  }
}

/* src/view/components/quiz/answer-option/answer-option.css */
.opt {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 0 16px;
  padding: 12px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.opt__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font: 500 15px/1 var(--mono);
  color: var(--ink-2);
}
.opt__text {
  padding-top: 6px;
  font-size: var(--card-text);
  line-height: 1.5;
}
.opt.is-on .opt__mark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}
.opt.is-right {
  background: var(--right-tint);
}
.opt.is-right .opt__mark {
  border: 2px solid var(--right);
  color: var(--right);
}
.opt.is-right.is-on .opt__mark {
  background: var(--right);
  color: #ffffff;
}
.opt.is-wrong {
  background: var(--wrong-tint);
}
.opt.is-wrong .opt__mark {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #ffffff;
}
:root[data-theme="dark"] .opt.is-right.is-on .opt__mark,
:root[data-theme="dark"] .opt.is-wrong .opt__mark {
  color: #2b2b2b;
}
.opt,
.opt__mark {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .is-ask .opt:not(.is-on):hover {
    background-color: var(--hover);
  }
  .is-ask .opt:not(.is-on):hover .opt__mark {
    border-color: var(--ink-3);
    color: var(--ink);
  }
}
@media (max-width: 640px) {
  .opt {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 12px;
    padding: 10px 5px;
  }
  .opt__mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
  }
  .opt__text {
    padding-top: 4px;
  }
}

/* src/view/components/base/report-link/report-link.css */
.report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .report:hover {
    color: var(--button-line);
  }
  .report:hover .link {
    text-decoration-thickness: 2px;
  }
}

/* src/view/components/quiz/attempt-side/attempt-side.css */
.side {
  position: relative;
}
.side--dash {
  padding: 8px 0 8px 40px;
  background: linear-gradient(var(--rule-2) 60%, transparent 0) left top / 1.5px 16px repeat-y;
}
.side--card {
  padding: 24px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.side--paper {
  padding: 24px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 24%, var(--sheet));
}
.side h2 {
  font: 600 17px/1.3 var(--font);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1.5px solid var(--ink);
}
.stats div {
  padding: 12px 0 16px;
}
.stats dt {
  font-size: 13px;
  color: var(--ink-2);
}
.stats dd {
  margin-top: 4px;
  font: 500 26px/1.1 var(--mono);
}
.stats .bad {
  color: var(--wrong);
}
.stats .good {
  color: var(--right);
}
.side h3 {
  margin-top: 24px;
  font: 600 13px/1.4 var(--font);
  color: var(--ink-2);
}
.gbar {
  margin-top: 12px;
}
.gbar div {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.gbar .mono {
  font-size: 13px;
}
.gbar span.track {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--rule);
}
.gbar span.track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}
.side .btn {
  margin-top: 32px;
}
.side .fx {
  position: relative;
  inset: auto;
  z-index: 0;
  height: 160px;
  margin-top: 32px;
}
/* a dialog is as wide as its content by default -> the sheet takes the whole width between its edges */
.sheet {
  position: fixed;
  inset: auto;
  z-index: 51;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  padding: 32px 16px 24px;
  border-radius: 20px 20px 0 0;
  background: var(--sheet);
  color: var(--sheet-ink);
  filter: var(--lift-hi);
}
.sheet__x {
  position: absolute;
  top: 14px;
  right: 8px;
}
.sheet .side {
  display: block;
}
@media (max-width: 640px) {
  .sheet .side h2 {
    font-size: 20px;
  }
  .sheet .stats div {
    text-align: center;
  }
  .sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--rule-2);
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .sheet {
    left: 50%;
    right: auto;
    width: 600px;
    margin-left: -300px;
    padding: 32px 32px 28px;
  }
  .sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--rule-2);
  }
  .sheet .stats div {
    text-align: center;
  }
}

/* src/view/pages/results-page/results-page.css */
.res-head {
  padding-top: 24px;
}
.res-head h1 {
  font: 600 48px/1.05 var(--font);
  letter-spacing: -0.03em;
}
.res-head p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
}
.block + .block {
  margin-top: 48px;
}
.block h2 {
  font: 600 22px/1.2 var(--font);
}
.block__meta {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.block--mistakes {
  margin-top: 64px !important;
}
@media (max-width: 640px) {
  .res-head {
    padding-top: 16px;
  }
  .res-head h1 {
    font-size: 32px;
  }
  .res-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: 32px;
  }
  .block + .block {
    margin-top: 40px;
  }
  .block--mistakes {
    margin-top: 48px !important;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .res-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .res-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding-top: 40px;
  }
}

/* src/view/components/results/topic-pills/topic-pills.css */
.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.topic {
  --n: 7px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  background: var(--paper);
  color: #000000;
  border-radius: 6px;
  font: 600 15px/1 var(--font);
  mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.topic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topic .mono {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.72;
}
.topic--off {
  background: none;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  font-weight: 400;
}
@media (max-width: 640px) {
  .topics {
    gap: 8px;
  }
  .topic {
    height: 40px;
    padding: 0 16px;
  }
}

/* src/view/components/base/site-footer/site-footer.css */
.foot {
  position: relative;
  margin-top: 128px;
  background: var(--graphite);
  color: var(--graphite-ink);
}
.foot__in {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr 1fr;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.foot__brand p {
  margin-top: 16px;
  max-width: 26em;
  font-size: 15px;
  color: var(--graphite-ink-2);
}
.foot h2 {
  margin-bottom: 16px;
  font: 400 13px/1.4 var(--font);
  color: var(--graphite-ink-2);
}
.foot li + li {
  margin-top: 12px;
}
.foot li {
  font-size: 15px;
}
.foot li a {
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
.foot__tail {
  white-space: nowrap;
}
.foot li .tix {
  margin-left: 8px;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  vertical-align: 1px;
}
.foot__group + .foot__group {
  margin-top: 24px;
}
.foot__vendor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--graphite-rule);
  font: 600 15px/1.3 var(--font);
  color: var(--graphite-ink);
}
.foot__vendor .vlogo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.foot__legal-line {
  border-top: 1px solid var(--graphite-rule);
}
.foot__legal {
  padding-top: 24px;
  padding-bottom: 23px;
  font-size: 13px;
  color: var(--graphite-ink-2);
}
@media (hover: hover) {
  .foot li a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(237, 237, 237, 0.6);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foot li a:hover .ext__arrow {
    transform: translate(2px, -2px);
  }
}
@media (max-width: 640px) {
  .foot {
    margin-top: 96px;
  }
  .foot__in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .foot__brand,
  .foot__in > nav:first-of-type {
    grid-column: 1 / -1;
  }
  .foot__legal {
    padding-top: 20px;
    padding-bottom: 23px;
    font-size: 12px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .foot__in {
    grid-template-columns: 1.2fr 1.4fr 1fr 1fr;
    gap: 32px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .foot__in {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px 32px;
  }
  .foot__brand {
    grid-column: 1 / -1;
  }
}
/* the credit of the studio that made the site, centred under the legal line, leads to the page of the studio */
.credit {
  display: flex;
  justify-content: center;
  padding-bottom: 28px;
}
.ivo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--graphite-ink-2);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.18s ease;
}
/* the credit is 18 px high -> a layer around it makes the area to tap 44 px */
.ivo::after {
  content: "";
  position: absolute;
  inset: -13px -8px;
}
.ivo__logo {
  display: block;
  flex: none;
  color: var(--graphite-ink);
  transition: color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .ivo:hover {
    color: var(--graphite-ink);
  }
  .ivo:hover .ivo__logo {
    color: #ffffff;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ivo:hover .ivo__logo {
    transform: translateY(-1px);
  }
}
@media (max-width: 640px) {
  .credit {
    padding-bottom: 24px;
  }
}

/* src/view/components/base/ticket-belt/ticket-belt.css */
.belt {
  overflow: hidden;
  padding: 24px 0;
  border-bottom: 1px solid var(--graphite-rule);
}
.belt__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-right: 16px;
}
.belt .tix {
  --n: 7px;
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
}
.belt .tix span {
  margin-left: 4px;
  font: 600 15px/1 var(--font);
}
@media (prefers-reduced-motion: no-preference) {
  .belt__track {
    animation: marquee 90s linear infinite;
  }
  .belt:hover .belt__track {
    animation-play-state: paused;
  }
}
@media (max-width: 640px) {
  .belt {
    padding: 16px 0;
  }
  .belt .tix {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
  .belt .tix span {
    font-size: 13px;
  }
}

/* src/view/components/base/dialog/dialog.css */
.dialog {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 64px;
  z-index: 51;
  width: 560px;
  padding: 32px;
  border-radius: 20px;
  background: var(--sheet);
  color: var(--sheet-ink);
  transform: translateX(-50%);
  filter: var(--lift-hi);
}
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog__head h2 {
  font: 600 22px/1.2 var(--font);
}
.dialog__lead {
  margin-top: 8px;
  font-size: 15px;
  color: var(--sheet-ink-2);
}
.dialog .btn {
  margin-top: 24px;
}
.dialog__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--sheet-ink-2);
  text-align: center;
}
.dialog--small {
  top: 200px;
  width: 480px;
}
.dialog--small h2 {
  font: 600 22px/1.2 var(--font);
}
.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
}
.dialog .dialog__actions .btn {
  margin-top: 0;
}
.dialog__actions--apart {
  justify-content: space-between;
}
@media (max-width: 640px) {
  .dialog,
  .dialog--small {
    inset: auto 0 0 0;
    width: auto;
    padding: 32px 16px 24px;
    border-radius: 20px 20px 0 0;
    transform: none;
  }
  .dialog::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--rule-2);
  }
  .dialog__head h2,
  .dialog--small h2 {
    font-size: 20px;
  }
  .dialog .field textarea {
    height: 104px;
  }
  .dialog .picks {
    margin-top: 20px;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .dialog--form {
    width: 760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .dialog--form > .dialog__head {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .dialog--form > .dialog__lead {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .dialog--form > .picks {
    grid-column: 1;
    grid-row: 3;
  }
  .dialog--form > .attached {
    grid-column: 2;
    grid-row: 3;
    margin-top: 24px;
  }
  .dialog--form > label.field:nth-of-type(1) {
    grid-column: 1;
    grid-row: 4 / span 3;
  }
  .dialog--form > label.field:nth-of-type(2) {
    grid-column: 2;
    grid-row: 4;
  }
  .dialog--form > .btn {
    grid-column: 2;
    grid-row: 5;
  }
  .dialog--form > .dialog__note {
    grid-column: 2;
    grid-row: 6;
    text-align: left;
  }
}
/* a window of the page lives in the top layer of the browser -> it is fixed to the screen and has no frame of its own */
:where(dialog).dialog,
:where(dialog).sheet {
  position: fixed;
  margin: 0;
  border: 0;
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
/* a window always fits the screen -> a low screen gets it higher up, and a long form scrolls inside it */
@media (min-width: 641px) {
  :where(dialog).dialog {
    max-height: calc(100dvh - 88px);
  }
  :where(dialog).dialog--small {
    max-height: calc(100dvh - 224px);
  }
}
@media (min-width: 641px) and (max-height: 799px) {
  .dialog,
  .dialog--small {
    top: 24px;
  }
  :where(dialog).dialog,
  :where(dialog).dialog--small {
    max-height: calc(100dvh - 48px);
  }
}
:where(dialog).dialog::backdrop,
:where(dialog).sheet::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
/* a window comes in and goes out smoothly, the dim layer behind it fades with it */
@media (prefers-reduced-motion: no-preference) {
  :where(dialog).dialog,
  :where(dialog).sheet {
    transition: opacity 0.22s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  :where(dialog).dialog::backdrop,
  :where(dialog).sheet::backdrop {
    transition: opacity 0.25s ease;
  }
  @starting-style {
    :where(dialog).dialog[open],
    :where(dialog).sheet[open] {
      opacity: 0;
      translate: 0 16px;
    }
    :where(dialog).dialog[open]::backdrop,
    :where(dialog).sheet[open]::backdrop {
      opacity: 0;
    }
  }
  :where(dialog).dialog.is-leaving,
  :where(dialog).sheet.is-leaving {
    opacity: 0;
    translate: 0 16px;
  }
  :where(dialog).dialog.is-leaving::backdrop,
  :where(dialog).sheet.is-leaving::backdrop {
    opacity: 0;
  }
}
/* a sheet from the bottom edge slides up and back down on a phone */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  @starting-style {
    :where(dialog).dialog[open],
    :where(dialog).sheet[open] {
      opacity: 1;
      translate: 0 100%;
    }
  }
  :where(dialog).dialog.is-leaving,
  :where(dialog).sheet.is-leaving {
    opacity: 1;
    translate: 0 100%;
  }
}
:where(dialog).dialog.is-dragging,
:where(dialog).sheet.is-dragging {
  transition: none;
}

/* src/view/components/base/feedback-dialog/feedback-dialog.css */
/* on a phone the title takes the focus only to keep the keyboard down -> a heading that is not a control needs no ring */
.dialog__head h2:focus-visible {
  outline: none;
}
.attached {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--hover);
  font-size: 15px;
}
.attached .ico {
  width: 18px;
  height: 18px;
  color: var(--sheet-ink-2);
}
.attached > span:first-of-type {
  color: var(--sheet-ink-2);
}
.picks {
  margin-top: 24px;
}
.picks legend,
.field__label {
  font: 600 15px/1.3 var(--font);
}
.picks__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.field {
  display: block;
  margin-top: 24px;
}
.field__label small {
  margin-left: 6px;
  font: 400 13px var(--font);
  color: var(--sheet-ink-2);
}
.field textarea,
.field input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--rule-2);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--sheet-ink);
  font: 400 16px/1.5 var(--font);
  resize: none;
}
.field textarea {
  border-color: var(--button-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-line) 16%, transparent);
}
.field__count {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--sheet-ink-2);
  text-align: right;
}
@media (max-width: 640px) {
  .field {
    margin-top: 16px;
  }
}
/* a problem of a field or of the send shows under its place in red and fades in */
.field__error {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--wrong);
}
.dialog__problem {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--wrong);
}
.field__error[hidden],
.dialog__problem[hidden] {
  display: none;
}
.field textarea[aria-invalid="true"],
.field input[aria-invalid="true"] {
  border-color: var(--wrong);
}
.dialog__check {
  margin-top: 16px;
}
.dialog__check:empty {
  display: none;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .dialog--form > .dialog__check,
  .dialog--form > .dialog__problem {
    grid-column: 2;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .field__error,
  .dialog__problem {
    animation: consent-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* src/view/components/base/send-note/send-note.css */
/* the note sits above the page at the bottom of the screen and above the bar of the torn stub */
.send-notes {
  position: fixed;
  z-index: 46;
  left: 50%;
  bottom: 24px;
  width: min(440px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.send-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  padding: 14px 8px 14px 16px;
  border-radius: 16px;
  background: var(--sheet);
  color: var(--sheet-ink);
  filter: var(--lift-hi);
  pointer-events: auto;
}
.send-note__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.send-note--sent .send-note__mark {
  background: var(--right-tint);
  color: var(--right);
}
.send-note--failed .send-note__mark {
  background: var(--wrong-tint);
  color: var(--wrong);
}
.send-note__mark svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.send-note__text {
  grid-column: 2;
  align-self: center;
  font-size: 15px;
  line-height: 1.45;
}
.send-note__text b {
  font-weight: 600;
}
.send-note__again {
  grid-column: 2;
  justify-self: start;
  margin-top: 12px;
}
.send-note__x {
  grid-column: 3;
  grid-row: 1;
  margin-top: -4px;
}
@media (prefers-reduced-motion: no-preference) {
  .send-note {
    animation: consent-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.22s ease, translate 0.25s ease;
  }
  .send-note.is-leaving {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .send-note {
    transition: opacity 0.2s ease;
  }
  .send-note.is-leaving {
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .send-notes {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
/* the bar of the torn stub is 74 px high at the bottom of an exam page -> the note stands 12 px above it */
@media (max-width: 899px) {
  body:has(.dock.is-shown) .send-notes {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

/* src/view/components/exam/attempt-run/attempt-run.css */
.run__clock {
  font-size: 15px;
  color: var(--sheet-ink-2);
}
.run__clock .mono {
  margin-right: 6px;
  font: 500 34px/1.1 var(--mono);
  color: var(--sheet-ink);
}
.run__done {
  margin-top: 12px;
  font-size: 15px;
}
.run__done b {
  font-weight: 500;
}
.run__track {
  display: block;
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--rule);
}
.run__track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.run__over {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.run__over p {
  font-size: 15px;
  color: var(--sheet-ink-2);
}
.run__over .btn {
  margin-top: 12px;
}
@media (max-width: 640px) {
  .run__clock .mono {
    font-size: 30px;
  }
}

/* src/view/components/quiz/pause-indicator/pause-indicator.css */
.paused {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  overflow: visible;
  z-index: 52;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  background: var(--sheet);
  color: var(--sheet-ink);
  filter: var(--lift-hi);
}
.paused__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
}
.paused__text {
  display: grid;
  gap: 2px;
  font-size: 15px;
}
.paused__text b {
  font-weight: 600;
}
.paused__text .mono {
  font-size: 13px;
  color: var(--sheet-ink-2);
}
@media (max-width: 640px) {
  .paused {
    inset: 8px 16px auto 16px;
  }
  .paused .btn {
    margin-left: auto;
  }
}
/* the pause slides in and out of its corner */
@media (prefers-reduced-motion: no-preference) {
  .paused {
    transition: opacity 0.22s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  @starting-style {
    .paused {
      opacity: 0;
      translate: 0 12px;
    }
  }
  .paused.is-leaving {
    opacity: 0;
    translate: 0 12px;
  }
}

/* src/view/pages/about-page/about-page.css */
.about-head {
  position: relative;
  max-width: 46em;
  padding-top: 48px;
}
.about-head h1 {
  font: 600 64px/1 var(--font);
  letter-spacing: -0.035em;
}
.about {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 64px;
}
.about__nav {
  position: sticky;
  top: 24px;
}
.about__nav p {
  font-size: 13px;
  color: var(--ink-2);
}
.about__nav ul {
  margin-top: 12px;
  border-left: 2px solid var(--rule);
}
.about__nav li a {
  display: block;
  margin-left: -2px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
.about__nav li a[aria-current] {
  border-left-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.about__body {
  max-width: 720px;
}
.about__sec + .about__sec {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.about__sec h2 {
  font: 600 22px/1.2 var(--font);
}
.about__sec p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.about__sec p a {
  color: var(--ink);
}
.about-list {
  margin-top: 16px;
}
.about-list li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.about-list li + li {
  margin-top: 8px;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p-e724);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
@media (hover: hover) {
  .about__nav li a:not([aria-current]):hover {
    border-left-color: var(--rule-2);
    color: var(--ink);
  }
}
@media (max-width: 640px) {
  .about-head .fx {
    display: none;
  }
  @supports (animation-timeline: scroll()) {
    .about__nav ul {
      animation: edges linear both;
      animation-timeline: scroll(self inline);
    }
  }
  .about-head {
    padding-top: 32px;
  }
  .about-head h1 {
    font-size: 40px;
  }
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }
  .about__nav {
    position: relative;
    top: auto;
  }
  .about__nav ul {
    display: flex;
    gap: 8px;
    margin: 12px -16px 0;
    padding: 0 16px 4px;
    overflow: auto hidden;
    border-left: 0;
    scrollbar-width: none;
    mask: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    overscroll-behavior-x: contain;
  }
  .about__nav ul::-webkit-scrollbar {
    display: none;
  }
  .about__nav li {
    flex: none;
  }
  .about__nav li a {
    margin-left: 0;
    padding: 8px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: 14px;
    white-space: nowrap;
  }
  .about__nav li a[aria-current] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--canvas);
  }
  .about__sec + .about__sec {
    margin-top: 32px;
    padding-top: 32px;
  }
  .about__sec h2 {
    font-size: 20px;
  }
  .about__sec p,
  .about-list li {
    font-size: 16px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .about-head h1 {
    font-size: 56px;
  }
  .about-head .fx {
    display: none;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .about {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
  }
}
@media (min-width: 641px) and (max-width: 899px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 40px;
  }
  .about__nav {
    position: relative;
    top: auto;
  }
  .about__nav ul {
    display: flex;
    gap: 8px;
    margin: 12px -32px 0;
    padding: 0 32px 4px;
    overflow: auto hidden;
    border-left: 0;
    scrollbar-width: none;
    mask: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    overscroll-behavior-x: contain;
  }
  .about__nav ul::-webkit-scrollbar {
    display: none;
  }
  .about__nav li {
    flex: none;
  }
  .about__nav li a {
    margin-left: 0;
    padding: 8px 16px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: 15px;
    white-space: nowrap;
  }
  .about__nav li a[aria-current] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--canvas);
  }
  @supports (animation-timeline: scroll()) {
    .about__nav ul {
      animation: edges linear both;
      animation-timeline: scroll(self inline);
    }
  }
}
@media (min-width: 641px) and (max-width: 899px) and (hover: hover) {
  .about__nav li a:not([aria-current]):hover {
    border-color: var(--ink-3);
  }
}
.about__sec .setrow {
  padding-bottom: 0;
  border-bottom: 0;
}
@media (hover: hover) {
  .about__sec p a:hover,
  .about-list a:hover {
    color: var(--button-line);
  }
}

/* src/view/components/base/consent-banner/consent-banner.css */
.consent {
  position: fixed;
  z-index: 45;
  left: 24px;
  bottom: 24px;
  width: 392px;
  padding: 24px;
  border-radius: 16px;
  background: var(--sheet);
  color: var(--sheet-ink);
  filter: var(--lift-hi);
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent.is-gone {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}
.consent h2 {
  font: 600 17px/1.3 var(--font);
}
.consent p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sheet-ink-2);
}
.consent p a {
  color: var(--sheet-ink);
}
.consent__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .consent {
    animation: consent-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: opacity 0.2s ease;
  }
  .consent.is-gone {
    transform: none;
  }
}
@media (hover: hover) {
  .consent p a:hover {
    color: var(--button-line);
  }
}
@media (max-width: 640px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    filter: drop-shadow(0 -1px 0 var(--rule)) drop-shadow(0 -10px 24px rgba(0, 0, 0, 0.12));
  }
  .consent h2 {
    font-size: 18px;
  }
  .consent__row .btn {
    height: 48px;
    font-size: 16px;
  }
}

/* src/view/pages/privacy-page/privacy-page.css */
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.setrow__label {
  display: block;
  font: 600 17px/1.3 var(--font);
  color: var(--ink);
}
.setrow__text {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.setrow:not(.is-on) .setrow__on,
.setrow.is-on .setrow__off {
  display: none;
}
.seg {
  flex: none;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
}
.seg__opt {
  position: relative;
  height: 34px;
  min-width: 64px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: 600 15px/1 var(--font);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* the two options touch each other -> their areas to tap grow only up and down */
.seg__opt::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}
.seg__opt[aria-checked="true"] {
  background: var(--ink);
  color: var(--canvas);
}
.priv-list {
  margin-top: 16px;
}
.priv-list li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.priv-list li + li {
  margin-top: 8px;
}
.priv-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p-e724);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
@media (hover: hover) {
  .seg__opt[aria-checked="false"]:hover {
    background: var(--hover);
    color: var(--ink);
  }
}
@media (max-width: 640px) {
  .setrow {
    gap: 16px;
  }
  .priv-list li {
    font-size: 16px;
  }
}

/* src/view/components/mascot/speech-bubble/speech-bubble.css */
.rc__say {
  position: absolute;
  z-index: 3;
  top: -58px;
  right: 116px;
  padding: 8px 14px;
  border: 2.5px solid #000000;
  border-radius: 16px;
  background: #ffffff;
  color: #000000;
  font: 600 15px/1.3 var(--font);
  white-space: nowrap;
}
.rc__say::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  background: #ffffff;
  border-top: 2.5px solid #000000;
  border-right: 2.5px solid #000000;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .rc__say {
    transform-origin: 100% 50%;
    animation: say-in 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) 1.6s backwards;
  }
}
@media (max-width: 640px) {
  .rc__say {
    right: 100px;
  }
}

/* src/view/components/exam/exam-faq/exam-faq.css */
.faq {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker {
  display: none;
}
.faq__item > summary:focus-visible {
  outline: 2px solid var(--button-line);
  outline-offset: 4px;
  border-radius: 6px;
}
.faq__item h3 {
  font: 600 17px/1.4 var(--font);
}
.faq__mark {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 13px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}
.faq__mark::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__mark {
  background: var(--paper);
  box-shadow: none;
}
.faq__item[open] .faq__mark::before,
.faq__item[open] .faq__mark::after {
  background: #000000;
}
.faq__item[open] .faq__mark::after {
  transform: rotate(0deg);
}
.faq__a {
  padding: 0 52px 24px 0;
}
.faq .faq__a p {
  max-width: 40em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.faq .faq__a p + p {
  margin-top: 12px;
}
.faq .faq__a a {
  color: var(--ink);
}
.faq .nobr {
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .faq__mark::after {
    transition: transform 0.25s ease;
  }
}
@media (hover: hover) {
  .faq__item h3 {
    transition: color 0.18s ease;
  }
  .faq__item > summary:hover h3 {
    color: var(--button-line);
  }
  .faq__item > summary:hover .faq__mark {
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .faq__item[open] > summary:hover .faq__mark {
    box-shadow: none;
  }
}
@media (max-width: 640px) {
  .faq {
    margin-top: 20px;
  }
  .faq__item > summary {
    gap: 16px;
    padding: 16px 0;
  }
  .faq__item h3 {
    font-size: 16px;
  }
  .faq__a {
    padding: 0 0 20px;
  }
  .faq .faq__a p {
    font-size: 15px;
  }
}
/* the line under an answer names the official pages it was checked against in the look of the line under the facts */
.faq .faq__a .faq__source {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-2);
}
/* a link never breaks inside -> its arrow never ends up alone on the next line */
.faq .faq__a .faq__source a {
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    text-decoration-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .faq .faq__a .faq__source a:hover {
    color: var(--button-line);
    text-decoration-thickness: 2px;
  }
}