/* How-It-Works */
@font-face { font-family: 'Heavitas'; src: url('../uploads/HEAVITAS.TTF') format('truetype'); font-weight: 400; font-display: block; }
@layer qmbase{
:root {
    --ink: #0A0A0A;
    --paper: #FFFFFF;
    --bone: #F4F4F0;
    --yellow: #F8EC27;
    --grey: #8C8C86;
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display: 'Heavitas', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: #0A0A0A; }
a { color: #0A0A0A; text-decoration: none; }
a:hover { color: #6B6410; }
}
.q42{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: 60% 22%;display: block;filter: grayscale(1) contrast(1.08)}
.q43{position: absolute;inset: 0;background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.55) 45%, #0A0A0A 100%)}
.q44{position: relative;max-width: 1180px;margin: 0 auto;padding: 160px 24px 48px}
.q45{margin: 14px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(38px, 11vw, 80px);line-height: 0.92;color: var(--paper)}
.q46{margin: 16px 0 0;max-width: 720px;font-size: clamp(16px, 4.4vw, 19px);line-height: 1.55;color: rgba(250,250,247,0.88);text-wrap: pretty}
.q47{margin: 24px -24px 0;padding: 0 24px 4px;display: flex;gap: 8px;overflow-x: auto;scrollbar-width: none}
.q48{flex: none;border: 2px solid rgba(250,250,247,0.3);border-radius: 999px;padding: 10px 16px;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;white-space: nowrap;color: var(--paper)}
.q49{flex: none;border-radius: 999px;background: var(--yellow);padding: 12px 18px;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;white-space: nowrap;color: var(--ink)}
.q4a{max-width: 1180px;margin: 0 auto;padding: 56px 24px}
.q4b{margin: 16px 0 0;max-width: 720px;font-size: clamp(16px, 4.4vw, 19px);line-height: 1.55;color: rgba(250,250,247,0.8);text-wrap: pretty}
.q4c{box-sizing: border-box;flex: 1 0 min(90%, 300px);scroll-snap-align: start;border-radius: 24px;background: var(--yellow);padding: 24px 22px 26px;display: flex;flex-direction: column}
.q4d{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 28px;line-height: 1;color: var(--ink)}
.q4f{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(44px, 12vw, 64px);line-height: 0.9;color: var(--ink)}
.q4g{margin: 6px 0 0;font-size: 13px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(10,10,10,0.75)}
.q4h{box-sizing: border-box;flex: 1 0 min(90%, 300px);scroll-snap-align: start;border-radius: 24px;background: #8B3FE8;padding: 24px 22px 26px;display: flex;flex-direction: column}
.q4i{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 28px;line-height: 1;color: #FFFFFF}
.q4j{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(44px, 12vw, 64px);line-height: 0.9;color: #FFFFFF}
.q4k{margin: 6px 0 0;font-size: 13px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(255,255,255,0.85)}
.q4l{box-sizing: border-box;flex: 1 0 min(90%, 300px);scroll-snap-align: start;border-radius: 24px;background: #FAFAF7;padding: 24px 22px 26px;display: flex;flex-direction: column}
.q4m{margin: 6px 0 0;font-size: 13px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(10,10,10,0.75)}
.q4n{margin-top: 22px;border-radius: 24px;background: #161613;border: 1px solid rgba(248,236,39,0.3);padding: 22px}
.q4o{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(20px, 5.6vw, 26px);line-height: 1.15;color: var(--paper)}
.q4p{margin-top: 26px;display: flex;flex-wrap: wrap;gap: 14px}
.q4q{flex: 1 1 340px;min-width: 0;border-radius: 24px;overflow: hidden;background: var(--yellow);display: flex;flex-direction: column}
.q4r{width: 100%;flex: 1 1 220px;min-height: 220px;height: auto;object-fit: cover;display: block;filter: grayscale(1) contrast(1.05)}
.q4s{padding: 20px 22px 24px}
.q4t{color: rgba(10,10,10,0.8)}
.q4v{display: inline-flex;align-items: center;border-radius: 999px;background: var(--ink);padding: 8px 14px;font-size: 13px;font-weight: 700;color: var(--yellow)}
.q4w{flex: 1 1 420px;min-width: 0;border-radius: 24px;background: #1B1B17;border: 1px solid rgba(250,250,247,0.1);padding: 20px 18px}
.q4y{color: rgba(250,250,247,0.65)}
.q50{display: flex;align-items: center;gap: 12px;border-radius: 14px;background: rgba(250,250,247,0.04);padding: 11px 14px}
.q51{margin: 0;flex: 1 1 auto;min-width: 0;font-size: 15px;font-weight: 700;line-height: 1.3;color: var(--paper)}
.q52{margin: 0;flex: none;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 16px;line-height: 1;color: var(--yellow)}
.q53{display: flex;align-items: center;gap: 12px;border-radius: 14px;background: var(--yellow);padding: 11px 14px}
.q54{margin: 0;flex: 1 1 auto;min-width: 0;font-size: 15px;font-weight: 700;line-height: 1.3;color: var(--ink)}
.q55{font-weight: 400}
.q56{margin: 0;flex: none;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 16px;line-height: 1;color: var(--ink)}
.q57{box-sizing: border-box;flex: 1 0 min(90%, 300px);scroll-snap-align: start;border-radius: 24px;background: #161613;padding: 24px 22px 26px;display: flex;flex-direction: column;border: 1px solid rgba(250,250,247,0.1)}
.q58{display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;border-radius: 50%;background: var(--yellow);font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 20px;line-height: 1;color: var(--ink)}
.q59{margin: 20px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 24px;line-height: 1.05;color: var(--paper)}
.q5a{color: rgba(250,250,247,0.75)}
.q5b{margin-top: 22px;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px}
.q5c{border-radius: 20px;background: var(--yellow);padding: 18px 14px;text-align: center}
.q5d{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(34px, 10vw, 52px);line-height: 0.9;color: var(--ink)}
.q5e{margin: 8px 0 0;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(10,10,10,0.75)}
.q5f{border-radius: 20px;background: #8B3FE8;padding: 18px 14px;text-align: center}
.q5g{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(34px, 10vw, 52px);line-height: 0.9;color: #FFFFFF}
.q5h{margin: 8px 0 0;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(255,255,255,0.85)}
.q5i{border-radius: 20px;background: #FAFAF7;padding: 18px 14px;text-align: center}
.q5j{margin: 8px 0 0;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: #3A3A36}
.q5k{margin-top: 14px;border-radius: 24px;background: #1B1B17;border: 1px solid rgba(250,250,247,0.1);padding: 22px}
.q5l{margin: 0;font-size: 16px;line-height: 1.55;color: rgba(250,250,247,0.85);text-wrap: pretty}
.q5m{color: var(--paper);margin-top: 34px}
.q5n{margin: 8px 0 0;font-size: 15px;color: rgba(250,250,247,0.6)}
.q5o{box-sizing: border-box;flex: 1 0 min(62vw, 170px);min-height: 190px;scroll-snap-align: start;border-radius: 24px;background: var(--yellow);padding: 18px;display: flex;flex-direction: column}
.q5p{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(26px, 7vw, 32px);line-height: 1;color: var(--ink)}
.q5q{margin: 10px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 16px;line-height: 1.05;color: var(--ink)}
.q5r{margin: 6px 0 0;font-size: 13px;line-height: 1.4;color: rgba(10,10,10,0.75);text-wrap: pretty}
.q5s{box-sizing: border-box;flex: 1 0 min(62vw, 170px);min-height: 190px;scroll-snap-align: start;border-radius: 24px;background: #8B3FE8;padding: 18px;display: flex;flex-direction: column}
.q5t{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(26px, 7vw, 32px);line-height: 1;color: #FFFFFF}
.q5u{margin: 10px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 16px;line-height: 1.05;color: #FFFFFF}
.q5v{margin: 6px 0 0;font-size: 13px;line-height: 1.4;color: rgba(255,255,255,0.85);text-wrap: pretty}
.q5w{box-sizing: border-box;flex: 1 0 min(62vw, 170px);min-height: 190px;scroll-snap-align: start;border-radius: 24px;background: #FAFAF7;padding: 18px;display: flex;flex-direction: column}
.q5x{margin: 6px 0 0;font-size: 13px;line-height: 1.4;color: #3A3A36;text-wrap: pretty}
.q5y{display: inline-flex;align-items: center;margin-top: 22px;border: 2px solid var(--yellow);border-radius: 999px;padding: 13px 22px;font-size: 13px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--yellow)}
.q5z{box-sizing: border-box;flex: 1 0 min(90%, 300px);scroll-snap-align: start;border-radius: 24px;overflow: hidden;background: #161613;border: 1px solid rgba(250,250,247,0.1)}
.q60{width: 100%;height: 180px;object-fit: cover;object-position: 70% 35%;display: block;filter: grayscale(1) contrast(1.06)}
.q61{padding: 18px 20px 22px}
.q62{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 22px;line-height: 1.05;color: var(--paper)}
.q63{width: 100%;height: 180px;object-fit: cover;object-position: 55% 55%;display: block;filter: grayscale(1) contrast(1.06)}
.q64{overflow: hidden;height: 180px}
.q65{width: 100%;height: 180px;object-fit: cover;object-position: 50% 60%;display: block;filter: grayscale(1) contrast(1.06)}
.q66{width: 100%;height: 180px;object-fit: cover;object-position: 60% 30%;display: block;filter: grayscale(1) contrast(1.06)}
.q67{margin-top: 22px;border-radius: 24px;background: var(--yellow);padding: 24px 22px;display: flex;flex-wrap: wrap;gap: 18px 28px;align-items: center}
.q68{flex: 1 1 200px}
.q69{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(10,10,10,0.65)}
.q6a{margin: 8px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(30px, 8vw, 40px);line-height: 1;color: var(--ink)}
.q6b{flex: 1 1 300px;color: rgba(10,10,10,0.85)}
.q6c{margin: 26px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 20px;line-height: 1;color: var(--yellow)}
.q6d{box-sizing: border-box;flex: 1 0 min(90%, 280px);scroll-snap-align: start;border-radius: 22px;background: #FAFAF7;border: 0;padding: 20px 20px 22px;display: flex;flex-direction: column;border-left: 8px solid var(--yellow)}
.q6e{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: #6A6A62}
.q6f{margin: 10px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 30px;line-height: 1;color: var(--ink)}
.q6g{margin: 8px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 16px;line-height: 1;color: var(--ink);display: inline-block;align-self: flex-start;background: var(--yellow);border-radius: 999px;padding: 6px 12px}
.q6h{margin-top: 16px;display: flex;flex-wrap: wrap;gap: 6px}
.q6i{display: inline-flex;align-items: center;height: 24px;padding: 0 10px;border-radius: 999px;background: #F8EC27;font-size: 12px;font-weight: 700;letter-spacing: 0.04em;color: #0A0A0A}
.q6j{display: inline-flex;align-items: center;height: 24px;padding: 0 10px;border-radius: 999px;background: #8B3FE8;font-size: 12px;font-weight: 700;letter-spacing: 0.04em;color: #FFFFFF}
.q6k{display: inline-flex;align-items: center;height: 24px;padding: 0 10px;border-radius: 999px;background: #0A0A0A;font-size: 12px;font-weight: 700;letter-spacing: 0.04em;color: #FAFAF7}
.q6l{color: #3A3A36}
.q6m{margin: 14px 0 0;font-size: 14px;line-height: 1.5;color: rgba(250,250,247,0.55)}
.q6n{margin-top: 24px;display: flex;flex-wrap: wrap;gap: 14px}
.q6o{flex: 1 1 340px;min-width: 0;border-radius: 24px;background: #FAFAF7;padding: 24px 22px}
.q6q{border-radius: 16px;background: #EFEFE9;padding: 14px 16px}
.q6r{margin: 0;font-size: 17px;font-weight: 700;color: var(--ink)}
.q6s{color: #3A3A36}
.q6t{flex: 1 1 340px;min-width: 0;border-radius: 24px;background: #1B1B17;border: 1px solid rgba(248,236,39,0.35);padding: 24px 22px}
.q6u{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 26px;line-height: 1;color: var(--yellow)}
.q6v{border-radius: 16px;background: rgba(250,250,247,0.05);padding: 14px 16px}
.q6w{margin: 0;font-size: 17px;font-weight: 700;color: var(--paper)}
.q6x{color: rgba(250,250,247,0.72)}
.q6y{margin-top: 14px;border-radius: 24px;background: var(--yellow);padding: 26px 22px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 18px}
.q6z{margin: 0;flex: 1 1 360px;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(24px, 6.6vw, 34px);line-height: 1.04;color: var(--ink)}
.q70{flex: none;display: inline-flex;align-items: center;border-radius: 999px;background: var(--ink);padding: 16px 26px;font-size: 14px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--yellow)}


.q4s{flex: none}
.q4fmb{margin: 4px 0 0;font-size: 13px;font-weight: 700;color: rgba(10,10,10,0.6)}
.q5cyc{margin: 0;flex: none;width: 58px;font-size: 12px;font-weight: 700;letter-spacing: 0.04em;color: rgba(250,250,247,0.5)}
.q53 .q5cyc{color: rgba(10,10,10,0.65)}
.q5past{}
a.q4v{text-decoration: none}
a.q4v:hover{background: #8B3FE8;color: #FFFFFF}

.q5rep{margin-top: 8px;display: flex;align-items: center;gap: 12px;border-radius: 14px;border: 1.5px dashed rgba(139,63,232,0.75);background: rgba(139,63,232,0.12);padding: 11px 14px}
.q5repic{flex: none;width: 22px;height: 22px;fill: none;stroke: #B98BFF;stroke-width: 2.4;stroke-linecap: round;stroke-linejoin: round}
.q5rept{margin: 0;font-size: 14px;font-weight: 700;line-height: 1.35;color: #E3D3FF}

.q5btn{border: 0;font: inherit;text-align: left;cursor: pointer;transition: transform .18s ease, box-shadow .18s ease}
.q5btn:hover{transform: translateY(-3px)}
.q5btn[data-on="1"]{box-shadow: 0 0 0 3px #0A0A0A, 0 0 0 6px #FAFAF7}
.q5vs{margin-top: 16px;border-radius: 18px;background: #1B1B17;border: 1px solid rgba(250,250,247,0.12);padding: 16px 18px}
.q5vsr{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: var(--yellow)}
.q5vst{margin: 8px 0 0;font-size: 17px;line-height: 1.5;color: var(--paper);text-wrap: pretty}
.q5ex{margin-top: 14px;border-radius: 20px;background: #FAFAF7;padding: 18px 20px 20px}
.q5exh{display: flex;align-items: center;gap: 10px}
.q5exc{display: inline-flex;align-items: center;border-radius: 999px;background: #0A0A0A;padding: 6px 12px;font-family: var(--display);font-size: 14px;line-height: 1;color: var(--yellow)}
.q5exn{font-family: var(--display);font-size: 16px;text-transform: uppercase;color: #0A0A0A}
.q5exl{margin: 14px 0 0;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(10,10,10,0.55)}
.q5exq{margin: 4px 0 0;font-size: 17px;font-weight: 700;line-height: 1.45;color: #0A0A0A;text-wrap: pretty}
.q5exa{margin: 4px 0 0;font-size: 17px;line-height: 1.45;color: #0A0A0A;text-wrap: pretty}
.q5exnote{margin: 12px 0 0;font-size: 13px;line-height: 1.45;color: rgba(10,10,10,0.6)}

.q5cyh{display: flex;align-items: center;gap: 12px;padding: 0 14px 8px;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(250,250,247,0.45)}
.q5cyh .q5cyc{color: inherit;font-size: inherit}
.q5cyhn{flex: 1 1 auto}
[data-survey="1"]{cursor: pointer}
[data-survey="1"]:hover{background: rgba(250,250,247,0.08)}
.q53[data-survey="1"]:hover{background: var(--yellow)}
.q5info{margin-left: 4px;font-weight: 400;opacity: 0.6}
.q50,.q53{position: relative}
.q5det{display: none;position: absolute;z-index: 40;left: 12px;right: 12px;top: calc(100% + 8px);margin: 0 !important;border-radius: 16px;background: #FAFAF7;padding: 14px 16px;color: #0A0A0A;box-shadow: 0 14px 34px rgba(0,0,0,0.45);text-wrap: pretty}
.q5det::before{content: "";position: absolute;top: -6px;left: 84px;width: 12px;height: 12px;background: #FAFAF7;transform: rotate(45deg)}
[data-open="1"] .q5det{display: block}
@media (hover: hover){[data-survey="1"]:hover .q5det{display: block}}


[data-survey="1"]:hover,[data-open="1"]{z-index: 60}

.q6top{margin-top: 26px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 12px}
.q6top .q6c{margin: 0}
.q6tabs{display: inline-flex;gap: 4px;padding: 4px;border-radius: 999px;background: rgba(250,250,247,0.08);border: 1px solid rgba(250,250,247,0.14)}
.q6tab{border: 0;border-radius: 999px;background: transparent;padding: 9px 16px;font-family: var(--display);font-size: 13px;line-height: 1;text-transform: uppercase;cursor: pointer;color: rgba(250,250,247,0.75);transition: background-color .25s ease, color .25s ease}
.q6tab:hover{color: var(--paper)}
.q6tab[data-on="1"]{background: var(--yellow);color: var(--ink)}
@keyframes q6in{from{opacity: 0;transform: translateX(28px)}to{opacity: 1;transform: none}}
.q6anim .q6d{animation: q6in .45s cubic-bezier(.2,.8,.2,1) both}
.q6anim .q6d:nth-child(2){animation-delay: .07s}
.q6anim .q6d:nth-child(3){animation-delay: .14s}
@media (prefers-reduced-motion: reduce){.q6anim .q6d{animation: none}}

.q5expre{margin: 4px 0 0;font-size: 15px;font-weight: 700;line-height: 1.45;color: #8B3FE8}

.q5dist{margin: auto 0 0;padding-top: 10px;font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(10,10,10,0.7)}
.q5distl{color: rgba(255,255,255,0.85)}
.q5w .q5dist{color: rgba(10,10,10,0.7)}
@media (max-width: 640px){
  [data-qm-statrail]{display: flex !important;grid-template-columns: none !important;overflow-x: auto;scroll-snap-type: x mandatory;gap: 12px;margin-left: -24px;margin-right: -24px;padding: 2px 24px 6px;scrollbar-width: none}
  [data-qm-statrail]::-webkit-scrollbar{display: none}
  [data-qm-statrail] > div{flex: 0 0 62%;scroll-snap-align: start}
}

/* Type name always reserves two lines so descriptions start at the same spot */
.q5q,.q5u{min-height: 2.1em;display: flex;align-items: flex-start}

.q6zs{margin: 6px 0 0;font-size: 15px;line-height: 1.45;color: rgba(10,10,10,0.75)}

@layer qmbase {
  @media (max-width: 640px){
    #quiz [data-qm-statrail]{margin-left: -20px !important;margin-right: -20px !important;padding-left: 20px !important;padding-right: 20px !important;scroll-padding: 0 20px}
    #quiz [data-qm-statrail] > div{margin-left: 0 !important}
  }
}

/* Example week inside each memorization goal card */
.q4c, .q4h, .q4l{display: flex;flex-direction: column}
.q4ex{margin-top: auto;padding-top: 16px;border-top: 1px solid currentColor;border-top-color: color-mix(in srgb, currentColor 22%, transparent)}
.q4exk{margin: 0;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;opacity: .7}
.q4exv{margin: 8px 0 0;font-family: var(--display);font-weight: 400;font-size: 15px;line-height: 1.35;text-wrap: pretty}
.q4c .q4ex, .q4l .q4ex{color: var(--ink)}
.q4h .q4ex{color: var(--paper)}
.q4h .q4exv{display: flex;flex-wrap: wrap;gap: 5px}
.q4ex150, .q4ex300{display: inline-flex;align-items: center;justify-content: center;min-width: 26px;height: 24px;padding: 0 6px;border-radius: 999px;font-size: 13px;line-height: 1}
.q4ex150{background: var(--yellow);color: var(--ink)}
.q4ex300{background: rgba(250,250,247,0.18);color: var(--paper)}

.q4c .q4exv{display: flex;flex-wrap: wrap;gap: 5px}
.q4exy{display: inline-flex;align-items: center;justify-content: center;min-width: 26px;height: 24px;padding: 0 6px;border-radius: 999px;font-size: 13px;line-height: 1;background: rgba(10,10,10,0.12);color: var(--ink)}
.q4m .q4fmb{display: inline;margin: 0;font-size: inherit}
/* every goal card: same height, example row starts at the same line */
.q3o .q4c, .q3o .q4h, .q3o .q4l{align-self: stretch}
.q4e{min-height: 96px}
.q3o .q4ex{margin-top: 16px}
.q4exs{margin: 6px 0 0;font-size: 14px;line-height: 1.35;min-height: 2.7em;text-wrap: pretty}
.q3o .q4exv{margin-top: 10px}
.q5eb{margin-top: clamp(48px, 9vw, 72px) !important}
.q5eb + .q5m{margin-top: 10px !important}
.q5vs{margin-bottom: 8px !important}
.q5vs + div{padding-top: 6px}
#quiz .q5vs + div{padding-top: 10px !important;padding-bottom: 10px !important}

.q5b{grid-template-columns: repeat(4, minmax(0, 1fr))}
@media (max-width: 620px){.q5b{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (min-width: 900px){#practice .q3o{display: grid !important;grid-template-columns: repeat(5, minmax(0, 1fr));overflow: visible}#practice .q3o > .q57{min-width: 0;flex: none}}
.q5m + .q5n{margin-top: 8px !important}
#quiz .q5m{margin-bottom: 0 !important}
#quiz .q5m + .q5n{margin-top: 18px !important}
.q4exl{margin: 10px 0 0;font-size: 10px;font-weight: 700;line-height: 1.2;letter-spacing: 0.12em;text-transform: uppercase;opacity: .6}
.q4exl + .q4exv{margin-top: 6px !important}
.q4ex{margin-top: 10px !important;padding-top: 12px !important}
.q4exl{white-space: nowrap;letter-spacing: 0.08em;overflow: hidden;text-overflow: ellipsis}
.q5k{background: var(--yellow) !important;color: var(--ink) !important;border: 0 !important;border-radius: 22px !important;padding: clamp(20px, 5vw, 28px) clamp(20px, 5vw, 30px) !important}
.q5k .q5l{font-size: clamp(17px, 4.4vw, 20px) !important;line-height: 1.55 !important;color: var(--ink) !important}
.q5k .q5l b{display: block;margin-bottom: 8px;font-family: var(--display);font-weight: 400;font-size: clamp(20px, 5.4vw, 26px);line-height: 1.05;text-transform: uppercase}
.q4exl-fm{letter-spacing: 0.02em !important;text-overflow: clip !important}
.q5vsx{margin: 0 0 6px;font-size: 11px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: var(--yellow)}
.q5vsr{font-family: var(--display) !important;font-weight: 400 !important;font-size: clamp(18px, 5vw, 24px) !important;line-height: 1.1 !important;letter-spacing: 0.01em !important;color: var(--paper) !important;opacity: 1 !important}