/* ================================================================
   circle-quiz.css
   ----------------------------------------------------------------
   ONE stylesheet for every circle skill popup (11 groups, 61 skills)
   on the Class 6 Math page. It replaces circle-basics / circle-pi /
   circle-circumference / circle-area-pizza / circle-practice /
   circle-inverse / circle-parts / circle-combine / circle-applied /
   circle-stretch / circle-compass .css.

   How it is organised
   - The 11 groups drew the same things with different class prefixes
     (crc-, cpi-, ccf-, pza-, cpr-, civ-, cpt-, ccb-, cap-, cst-, ct-).
     A rule that was identical in several groups now appears ONCE,
     with the selector listed for every group that uses it, e.g.
     :is(.crc-svg, .cpi-svg, ...). A rule that differed stays separate
     and only lists the groups it belongs to.
   - Popup-level rules use the shared popup's attribute
     [data-skill-group="crc|cpi|ccf|pza|cpr|civ|cpt|ccb|cap|cst|ctc"],
     which quiz-engine.js sets when a skill opens.
   - The picture size variable is now ONE variable, --cq-fig, for all
     groups (it was --crc-fig, --cpi-fig, ... with the same values).
   - Rules keep the exact cascade order each group had before, so the
     file is in dependency order (not grouped by topic): a group's own
     rules always come in the same order as in its old file.
   - Needs :is() (Chrome / Android WebView 88+, Safari 14+), the same
     level that aspect-ratio (already used here) needs.

     <link rel="stylesheet" th:href="@{/css/circle-quiz.css}" />
   ================================================================ */

:is(.crc-svg, .cpi-svg, .ccf-svg, .pza-svg, .cpr-svg, .civ-svg, .cpt-svg, .ccb-svg, .cap-svg, .cst-svg, .ct-svg) {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
:is(.crc-o, .ccf-o, .pza-o, .cpr-o, .civ-o, .cpt-o) {
    stroke: rgba(59, 47, 99, 0.55);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
:is(.crc-sh, .ccf-sh, .pza-sh, .cpr-sh, .civ-sh, .cpt-sh) { filter: drop-shadow(0 4px 3px rgba(59, 47, 99, 0.22)); }
:is(.cpi-o, .ccb-o, .cap-o, .cst-o, .ct-o) {
    stroke: rgba(60, 38, 120, 0.60);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
:is(.crc-gloss, .cpr-gloss, .civ-gloss, .cpt-gloss) { fill: #fff; opacity: 0.30; pointer-events: none; }
:is(.cpi-sh, .ccb-sh, .cst-sh, .ct-sh) { filter: drop-shadow(0 4px 3px rgba(60, 38, 120, 0.25)); }
.ccf-gloss { fill: #fff; opacity: 0.34; pointer-events: none; }
.ccf-rim { fill: none; stroke: #fff; stroke-width: 3; opacity: .38; pointer-events: none; }
.pza-gloss { fill: #fff; opacity: 0.28; pointer-events: none; }
.cap-sh { filter: drop-shadow(0 4px 3px rgba(60, 38, 120, 0.22)); }
:is(.cpi-gloss, .ccb-gloss, .cap-gloss, .cst-gloss, .ct-gloss) { fill: #fff; opacity: 0.38; pointer-events: none; }
:is(.cpi-spark, .ccb-spark, .cap-spark, .cst-spark, .ct-spark) { fill: #fff; opacity: 0.9; pointer-events: none; }
:is(.crc-nopt, .cpi-nopt, .ccf-nopt, .pza-nopt, .cpr-nopt, .civ-nopt, .cpt-nopt, .ccb-nopt, .cap-nopt, .cst-nopt, .ct-nopt) {
    pointer-events: none;
    stroke: none;
}
:is(.cpi-t, .ccb-t, .cap-t, .cst-t, .ct-t) {
    font: 800 22px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    fill: #34205f;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: #fff;
    stroke-width: 5;
    paint-order: stroke;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
:is(.cpi-t-lbl, .ccb-t-lbl, .cap-t-lbl, .cst-t-lbl, .ct-t-lbl) { font-size: 24px; }
:is(.cpi-t-small, .ccb-t-small, .cap-t-small, .cst-t-small, .ct-t-small) { font-size: 19px; }
:is(.cpi-t-tick, .ccb-t-tick, .cst-t-tick, .ct-t-tick) { font-size: 15px; stroke: none; fill: #5a3d00; }
:is(.cpi-t-badge, .ccb-t-badge, .cap-t-badge, .cst-t-badge, .ct-t-badge) {
    font-size: 18px;
    stroke: none;
    fill: #34205f;
}
:is(.cpi-t-white, .ccb-t-white, .cap-t-white, .cst-t-white, .ct-t-white) {
    fill: #fff;
    stroke: rgba(60, 38, 120, .55);
    stroke-width: 5;
}
:is(.cpi-t-pi, .ccb-t-pi, .cst-t-pi, .ct-t-pi) {
    font-size: 120px;
    fill: #fff;
    stroke: rgba(80, 40, 170, .65);
    stroke-width: 7;
}
:is(.cpi-t-digit, .ccb-t-digit, .cst-t-digit, .ct-t-digit) { font-size: 34px; letter-spacing: 1px; }
.ccf-spark {
    fill: #fff;
    opacity: .9;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: ccfTwinkle 2.6s ease-in-out infinite;
}
@keyframes ccfTwinkle {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1.1); }
}
:is(.crc-t, .ccf-t, .cpr-t, .civ-t, .cpt-t) {
    font: 800 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    fill: #3b2f63;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: #fff;
    stroke-width: 5;
    paint-order: stroke;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
:is(.crc-t-small, .ccf-t-small, .cpr-t-small, .civ-t-small, .cpt-t-small) { font-size: 17px; }
.ccf-t-pill { fill: #fff; stroke: none; font-size: 17px; }
.pza-w { stroke: rgba(59, 47, 99, 0.5); stroke-linejoin: round; }
.pza-hl { fill: none; stroke: #ef3b3b; stroke-width: 4.5; stroke-linejoin: round; stroke-dasharray: 8 6; }
.pza-t {
    font: 800 19px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    fill: #3b2f63;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: #fff;
    stroke-width: 5;
    paint-order: stroke;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.pza-t-sm { font-size: 15px; }
:is(.crc-t-lbl, .pza-t-lbl, .cpr-t-lbl, .civ-t-lbl, .cpt-t-lbl) { font-size: 21px; }
.pza-t-q { font-size: 44px; fill: #7a45e0; }
.pza-t-arrow { font-size: 40px; fill: #7a45e0; }
.pza-t-in { fill: #fff; stroke: rgba(59, 47, 99, 0.6); stroke-width: 5; }
.pza-under { stroke: #fff; stroke-width: 10; stroke-linecap: round; opacity: .9; }
.pza-seg { stroke-width: 5.5; stroke-linecap: round; fill: none; }
.cpr-t-big { font-size: 34px; }
:is(.crc-t-q, .cpr-t-q, .cpt-t-q) { font-size: 76px; fill: #fff; stroke: rgba(59, 47, 99, 0.55); stroke-width: 6; }
:is(.crc-t-bar, .cpt-t-bar) { fill: #fff; stroke: none; font-size: 17px; }
:is(.crc-t-badge, .ccf-t-badge, .cpt-t-badge) { font-size: 16px; stroke: none; fill: #3b2f63; }
.ccf-t-star { font-size: 64px; fill: #fff; stroke: rgba(59, 47, 99, .45); stroke-width: 4; }
.ccf-t-x2 { font-size: 17px; fill: #fff; stroke: none; }
.ccf-pill { stroke: #fff; stroke-width: 2.5; }
.cpr-t-badge { font-size: 22px; stroke: none; fill: #3b2f63; }
.cpr-emoji { font-size: 64px; stroke: none; }
.civ-t-wl { font-size: 25px; }
.civ-t-ws { font-size: 19px; }
.civ-t-row { font-size: 18px; fill: #7a71a8; stroke-width: 4; }
.civ-t-val { font-size: 26px; }
.civ-t-let { font-size: 16px; stroke-width: 4; fill: #4b3f8f; }
.civ-t-nm { font-size: 13.5px; stroke-width: 3.5; fill: #4b3f8f; letter-spacing: -.2px; }
.civ-t-valsm { font-size: 21px; }
.civ-t-op { font-size: 22px; fill: #fff; stroke: rgba(59, 47, 99, 0.62); stroke-width: 6; }
.civ-t-opsm { font-size: 19px; }
.civ-t-on { fill: #fff; stroke: rgba(59, 47, 99, 0.55); stroke-width: 5; }
.civ-t-qm { font-size: 40px; fill: #ef3b3b; stroke-width: 6; }
.civ-t-faint { opacity: .35; }
.cap-t-pi { font-size: 96px; fill: #fff; stroke: rgba(80, 40, 170, .65); stroke-width: 7; }
:is(.crc-under, .cpi-under, .ccf-under, .cpr-under, .civ-under, .cpt-under, .ccb-under, .cap-under, .cst-under, .ct-under) {
    stroke: #fff;
    stroke-width: 11;
    stroke-linecap: round;
    opacity: .9;
}
:is(.crc-seg, .cpi-seg, .ccf-seg, .cpr-seg, .civ-seg, .cpt-seg, .ccb-seg, .cap-seg, .cst-seg, .ct-seg) {
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
}
:is(.crc-thin, .cpt-thin) { stroke-width: 3.5; }
:is(.crc-rad, .ccf-rad, .pza-rad, .cpr-rad, .civ-rad, .cpt-rad) { stroke: #e2528a; }
:is(.crc-dia, .cpi-dia, .ccf-dia, .cpr-dia, .civ-dia, .cpt-dia, .ccb-dia, .cap-dia, .cst-dia, .ct-dia) {
    stroke: #2f7fe8;
}
.ccf-orange { stroke: #f08a24; }
:is(.crc-neu, .ccf-neu, .civ-neu, .cpt-neu) { stroke: #3b2f63; }
:is(.crc-hot, .cpi-hot, .cpt-hot, .ccb-hot, .cap-hot, .cst-hot, .ct-hot) { stroke: #ef3b3b; }
:is(.cpi-neu, .ccb-neu, .cst-neu, .ct-neu) { stroke: #34205f; }
:is(.cpi-string, .ccb-string, .cst-string, .ct-string) {
    stroke: #e0368a;
    stroke-width: 7;
    stroke-linecap: round;
    fill: none;
}
:is(.cpi-ring, .ccb-ring, .cap-ring, .cst-ring, .ct-ring) {
    fill: none;
    stroke: #e0368a;
    stroke-width: 6;
    stroke-dasharray: 2 10;
    stroke-linecap: round;
}
:is(.cpi-ring-solid, .ccb-ring-solid, .cst-ring-solid, .ct-ring-solid) {
    fill: none;
    stroke: #e0368a;
    stroke-width: 6;
}
:is(.crc-dash, .cpt-dash) { stroke: #3b2f63; stroke-dasharray: 3 10; }
:is(.crc-dim, .cpt-dim) { stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; }
.pza-dim { stroke: #3b2f63; stroke-width: 3.5; stroke-linecap: round; }
.civ-dash { stroke: #3b2f63; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 10; opacity: .6; }
.civ-dim { stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; fill: none; }
:is(.crc-cdot, .ccf-cdot, .pza-cdot, .cpr-cdot, .civ-cdot, .cpt-cdot) {
    fill: #3b2f63;
    stroke: #fff;
    stroke-width: 3;
}
:is(.crc-cdot-hot, .cpt-cdot-hot) { fill: #ef3b3b; }
:is(.crc-ring, .cpt-ring) { fill: rgba(239, 59, 59, .12); stroke: #ef3b3b; stroke-width: 4; stroke-dasharray: 7 6; }
:is(.crc-pt, .cpt-pt) { fill: #fff; stroke: #3b2f63; stroke-width: 3; }
:is(.crc-pt-red, .cpt-pt-red) { fill: #ef3b3b; stroke: #fff; }
:is(.crc-pt-blue, .cpt-pt-blue) { fill: #2f7fe8; stroke: #fff; }
:is(.crc-pt-orange, .cpt-pt-orange) { fill: #ffa53c; stroke: #3b2f63; }
:is(.crc-bar, .cpt-bar) { stroke: rgba(59, 47, 99, .45); stroke-width: 2; }
:is(.crc-bar-r, .cpt-bar-r) { fill: #e2528a; }
:is(.crc-tick, .cpt-tick) line { stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; }
:is(.crc-cell, .cpt-cell) { stroke: rgba(59, 47, 99, 0.55); stroke-width: 2; }
:is(.crc-cell-out, .cpt-cell-out) { fill: rgba(255, 255, 255, .35); stroke: rgba(59, 47, 99, 0.18); }
:is(.crc-cell-part, .cpt-cell-part) { fill: rgba(255, 165, 60, .45); stroke: rgba(59, 47, 99, 0.35); }
.ccf-spoke { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; opacity: .92; }
.ccf-ring2 { fill: none; stroke: rgba(59, 47, 99, .4); stroke-width: 3; }
.ccf-cut { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .75; }
.ccf-lap { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 3 10; stroke-linecap: round; }
.ccf-brk { fill: none; stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ccf-arc { fill: none; stroke: #f08a24; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 9; }
.ccf-block { stroke: rgba(59, 47, 99, .5); stroke-width: 2.5; }
.ccf-ground { stroke: #3b2f63; stroke-width: 5; stroke-linecap: round; }
.pza-cell { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.6; }
.pza-cell-out { fill: rgba(255, 255, 255, .45); stroke: rgba(59, 47, 99, 0.16); }
.pza-cell-part { fill: rgba(255, 176, 56, .62); stroke: #e08a00; stroke-width: 2.4; }
.pza-b-full { fill: rgba(63, 224, 170, .55); stroke: #0e9f74; stroke-width: 2.4; }
.pza-b-half { fill: rgba(255, 207, 64, .70); stroke: #d99a00; stroke-width: 2.4; }
.pza-b-less { fill: rgba(255, 128, 186, .62); stroke: #d9468a; stroke-width: 2.4; }
.pza-ring { fill: none; stroke: rgba(59, 47, 99, .75); stroke-width: 3.2; pointer-events: none; }
.pza-sqr { stroke: rgba(59, 47, 99, .5); stroke-width: 2.2; stroke-linejoin: round; }
.pza-sliver { stroke: #e2528a; }
.pza-badge { fill: #fff; stroke: #7a45e0; stroke-width: 3; }
.pza-t-badge { stroke: none; fill: #5a2fc0; font-size: 17px; }
.pza-k { display: inline-block; padding: 0 7px; border-radius: 999px; font-weight: 800; }
.pza-k-full { background: rgba(63, 224, 170, .35); color: #057a58; }
.pza-k-half { background: rgba(255, 207, 64, .45); color: #8a6300; }
.pza-k-less { background: rgba(255, 128, 186, .35); color: #a8266a; }
.pza-k-part { background: rgba(255, 176, 56, .40); color: #9a5a00; }
.cpr-ringline { fill: none; stroke: #e2528a; stroke-width: 7; stroke-linecap: round; opacity: .95; }
.cpr-tick { stroke: #3b2f63; stroke-width: 3; stroke-linecap: round; }
.cpr-cell { stroke: #fff; stroke-width: 2; }
.cpr-pill { fill: #ffd650; stroke: rgba(59, 47, 99, .55); stroke-width: 2.5; }
:is(.crc-ruler, .cpr-ruler, .cpt-ruler) { fill: #ffe9a8; stroke: rgba(59, 47, 99, .55); stroke-width: 2.5; }
:is(.crc-rtick, .cpr-rtick, .cpt-rtick) { stroke: #3b2f63; stroke-width: 2.5; stroke-linecap: round; }
:is(.crc-trace, .cpt-trace) {
    fill: none;
    stroke: #e2528a;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:is(.crc-trace, .cpt-trace).is-done { stroke: #10b981; }
:is(.crc-outline, .cpt-outline) { stroke-width: 5; }
:is(.crc-bad, .cpt-bad) { stroke: #ef8f3b; }
:is(.crc-fillcirc, .cpt-fillcirc) { stroke: none; opacity: .55; pointer-events: none; }
:is(.crc-faint, .ccf-faint, .cpt-faint) { opacity: .35; }
:is(.crc-slack, .cpt-slack) {
    fill: none;
    stroke: #3b2f63;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 2 8;
}
:is(.crc-string, .cpt-string) { stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; fill: none; }
.civ-tapeu { fill: none; stroke: #fff; stroke-width: 12; opacity: .9; }
.civ-tape { fill: none; stroke: #ff8a3d; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 13; }
.civ-box { stroke: rgba(59, 47, 99, 0.55); stroke-width: 2.5; }
.civ-box-q { fill: #fff; stroke: #ef3b3b; stroke-width: 4; stroke-dasharray: 8 7; }
.civ-arrow { stroke: #3b2f63; stroke-width: 4; stroke-linecap: round; fill: none; }
.civ-arrow-head { fill: #3b2f63; }
.civ-card { stroke: rgba(59, 47, 99, 0.45); stroke-width: 2.5; }
.civ-card-q { fill: rgba(239, 59, 59, .08); stroke: #ef3b3b; stroke-width: 4; stroke-dasharray: 8 7; }
.civ-card-dim { opacity: .55; }
.civ-cell { stroke: rgba(59, 47, 99, 0.5); stroke-width: 1.5; }
.cap-ring-solid { fill: none; stroke: #e0368a; stroke-width: 7; }
:is(.cpi-cdot, .ccb-cdot, .cap-cdot, .cst-cdot, .ct-cdot) { fill: #34205f; stroke: #fff; stroke-width: 3; }
:is(.cpi-pt-red, .ccb-pt-red, .cap-pt-red, .cst-pt-red, .ct-pt-red) { fill: #ef3b3b; stroke: #fff; stroke-width: 3; }
.cap-topping { fill: #e23a5e; stroke: rgba(120, 20, 50, .55); stroke-width: 2; pointer-events: none; }
:is(.cpi-spoke, .ccb-spoke, .cap-spoke, .cst-spoke, .ct-spoke) {
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 5;
    stroke-linecap: round;
}
:is(.cpi-hub, .ccb-hub, .cap-hub, .cst-hub, .ct-hub) { fill: #fff; stroke: rgba(60, 38, 120, .6); stroke-width: 3; }
:is(.cpi-start, .ccb-start, .cap-start, .cst-start, .ct-start) {
    stroke: #10b981;
    stroke-width: 4;
    stroke-dasharray: 5 5;
}
:is(.cpi-arrow, .ccb-arrow, .cap-arrow, .cst-arrow, .ct-arrow) {
    fill: none;
    stroke: #7c4dff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:is(.cpi-ruler, .ccb-ruler, .cst-ruler, .ct-ruler) { fill: #ffe9a8; stroke: rgba(90, 61, 0, .55); stroke-width: 2.5; }
:is(.cpi-rtick, .ccb-rtick, .cst-rtick, .ct-rtick) { stroke: #5a3d00; stroke-width: 2.5; stroke-linecap: round; }
:is(.cpi-ground, .ccb-ground, .cst-ground, .ct-ground) {
    fill: #d9ccff;
    stroke: rgba(60, 38, 120, .45);
    stroke-width: 2.5;
}
.cap-ground { fill: #f3cdb6; stroke: rgba(120, 60, 30, .35); stroke-width: 2.5; }
:is(.cpi-bar, .ccb-bar, .cap-bar, .cst-bar, .ct-bar) { stroke: rgba(60, 38, 120, .55); stroke-width: 2.5; }
:is(.cpi-bar-faint, .ccb-bar-faint, .cst-bar-faint, .ct-bar-faint) { opacity: .35; }
.cap-bar-faint { opacity: .45; stroke-dasharray: 6 5; }
:is(.cpi-brace, .ccb-brace, .cap-brace, .cst-brace, .ct-brace) {
    fill: none;
    stroke: #34205f;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:is(.cpi-calc, .ccb-calc, .cst-calc, .ct-calc) { fill: #2a1b5c; stroke: #7c4dff; stroke-width: 4; }
:is(.cpi-calc-t, .ccb-calc-t, .cst-calc-t, .ct-calc-t) {
    font: 800 38px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    fill: #c8f7ff;
    text-anchor: middle;
    dominant-baseline: central;
    stroke: none;
}
:is(.cpi-calc-s, .ccb-calc-s, .cst-calc-s, .ct-calc-s) { font-size: 26px; fill: #ffd54a; }
.ccb-hole {
    fill: #fdfbff;
    stroke: rgba(60, 38, 120, .50);
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
    stroke-linecap: round;
}
.ccb-dashcirc {
    fill: none;
    stroke: rgba(60, 38, 120, .50);
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
    pointer-events: none;
}
.ccb-dashln { stroke: #34205f; stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; opacity: .85; }
.ccb-frame { fill: rgba(255, 255, 255, .75); stroke: rgba(60, 38, 120, .60); stroke-width: 3; }
.quiz-overlay[data-skill-group] .quiz-modal { --cq-fig: 250px; }
.quiz-overlay[data-skill-group] .quiz-question b { color: var(--secondary, #4b3f8f); }
.quiz-overlay[data-skill-group] .bq-btn,
.quiz-overlay[data-skill-group] .bq-next-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.quiz-overlay[data-skill-group] .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[data-skill-group] .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[data-skill-group] .quiz-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
:is(.crc-wrap, .cpi-wrap, .pza-wrap, .civ-wrap, .cpt-wrap, .ccb-wrap, .cap-wrap, .cst-wrap, .ct-wrap) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px auto 0;
}
:is(.cpi-stage, .ccb-stage, .cst-stage, .ct-stage) {
    position: relative;
    width: var(--cq-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 25% 10%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #f7f2ff 0%, #ece3ff 100%);
    border: 2px solid var(--line, #ddd2fb);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 22px rgba(167, 139, 250, .16);
}
:is(.crc-stage, .civ-stage, .cpt-stage) {
    position: relative;
    width: var(--cq-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, #f9f7ff 0 22px, #efeafc 22px 23px);
    border: 2px solid var(--line, #e3def6);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 18px rgba(167, 139, 250, .10);
    transition: border-color .3s, box-shadow .3s;
}
:is(.ccf-wrap, .cpr-wrap) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px auto 0;
    width: 100%;
}
:is(.pza-stage, .cpr-stage) {
    position: relative;
    width: var(--cq-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, #f9f7ff 0 22px, #efeafc 22px 23px);
    border: 2px solid var(--line, #e3def6);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 18px rgba(167, 139, 250, .10);
}
.ccf-stage {
    position: relative;
    width: var(--cq-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, #f9f7ff 0 22px, #efeafc 22px 23px);
    border: 2px solid var(--line, #e3def6);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 18px rgba(167, 139, 250, .12);
}
.cap-stage {
    position: relative;
    width: var(--cq-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: radial-gradient(120% 90% at 25% 10%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fff6ee 0%, #ffe9db 100%);
    border: 2px solid #ffd6bd;
    box-shadow: 0 3px 0 rgba(120, 60, 30, 0.08), inset 0 0 22px rgba(255, 170, 120, .16);
}
:is(.crc-stage, .cpi-stage, .ccf-stage, .pza-stage, .cpr-stage, .civ-stage, .cpt-stage, .ccb-stage, .cap-stage, .cst-stage, .ct-stage) > svg {
    width: 100%;
    height: 100%;
}
:is(.crc-stage, .cpi-stage, .ccf-stage, .pza-stage, .cpr-stage, .civ-stage, .cpt-stage, .ccb-stage, .cap-stage, .cst-stage, .ct-stage):is(.crc-wide, .cpi-wide, .ccf-wide, .pza-wide, .cpr-wide, .civ-wide, .cpt-wide, .ccb-wide, .cap-wide, .cst-wide, .ct-wide) {
    width: min(100%, calc(var(--cq-fig) * 1.7));
    aspect-ratio: 2 / 1;
}
:is(.cpi-hint, .ccb-hint, .cst-hint, .ct-hint) {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #7a71a8;
    line-height: 1.35;
    max-width: 360px;
}
.ccf-stage.ccf-stage-s { width: calc(var(--cq-fig) * .8); }
:is(.crc-hint, .ccf-hint, .cpr-hint, .cpt-hint) {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #7a71a8;
    line-height: 1.35;
    max-width: 340px;
}
:is(.crc-hint-top, .cpr-hint-top, .cpt-hint-top) { margin-top: 4px; }
.pza-hint {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #7a71a8;
    line-height: 1.4;
    max-width: 340px;
}
.civ-hint {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #7a71a8;
    line-height: 1.4;
    max-width: 360px;
}
.cap-hint {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #8a6a5a;
    line-height: 1.35;
    max-width: 360px;
}
:is(.crc-hint, .cpi-hint, .ccf-hint, .pza-hint, .cpr-hint, .civ-hint, .cpt-hint, .ccb-hint, .cap-hint, .cst-hint, .ct-hint) b {
    color: var(--secondary, #4b3f8f);
}
:is(.cpi-replay, .ccb-replay, .cap-replay, .cst-replay, .ct-replay) {
    min-height: 44px;
    padding: 8px 20px;
    border: 2px solid var(--primary, #6c5ce7);
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #6c5ce7);
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.20);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s;
}
:is(.cpi-replay, .ccb-replay, .cap-replay, .cst-replay, .ct-replay):active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(108, 92, 231, 0.20);
}
:is(.crc-status, .cpr-status, .civ-status, .cpt-status) {
    margin: 0;
    min-height: 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #7a71a8;
    max-width: 360px;
    line-height: 1.35;
}
:is(.crc-status, .cpr-status, .civ-status, .cpt-status).is-yes { color: #059669; }
:is(.crc-status, .cpr-status, .cpt-status).is-no { color: #dc2626; }
:is(.cpi-tablebox, .cst-tablebox) {
    width: min(100%, 420px);
    box-sizing: border-box;
    padding: 8px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f7f2ff 0%, #ece3ff 100%);
    border: 2px solid var(--line, #ddd2fb);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 22px rgba(167, 139, 250, .16);
}
:is(.cpi-table, .cst-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    text-align: center;
    font-weight: 800;
    color: #34205f;
}
:is(.cpi-table, .cst-table) th {
    padding: 9px 4px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #a78bfa, #7c4dff 60%, #5b2fd1);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
:is(.cpi-table, .cst-table) th:first-child { border-radius: 12px 0 0 12px; }
:is(.cpi-table, .cst-table) th:last-child { border-radius: 0 12px 12px 0; }
:is(.cpi-table, .cst-table) td { padding: 9px 4px; font-size: 16px; background: rgba(255, 255, 255, .85); }
:is(.cpi-table, .cst-table) td:first-child { border-radius: 12px 0 0 12px; color: #7c4dff; }
:is(.cpi-table, .cst-table) td:last-child { border-radius: 0 12px 12px 0; }
:is(.cpi-table, .cst-table) td.q { color: #e0368a; font-size: 20px; }
.ccf-calc {
    width: min(100%, 300px);
    box-sizing: border-box;
    padding: 8px 10px 10px;
    border-radius: 18px;
    background: linear-gradient(160deg, #6a3fd8, #4a2aa8);
    box-shadow: 0 4px 0 rgba(58, 31, 130, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.ccf-calc-tag {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #e6dcff;
    letter-spacing: .02em;
    margin-bottom: 5px;
}
.ccf-calc-screen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(180deg, #d9fbe9, #b7f0d3);
    border-radius: 10px;
    padding: 7px 10px;
    min-height: 24px;
    font: 800 18px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: #14503a;
    box-shadow: inset 0 2px 4px rgba(20, 80, 58, .25);
}
.ccf-calc-expr { white-space: nowrap; }
.ccf-calc-res { white-space: nowrap; opacity: .55; }
.ccf-calc-res.is-shown { opacity: 1; color: #0b7a4b; animation: ccfPopIn .35s ease-out; }
.ccf-calc-keys { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 7px; }
.ccf-key {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 5px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #e4dbff);
    font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #3b2f63;
    box-shadow: 0 2px 0 rgba(20, 8, 70, .35);
    transition: transform .1s, background .1s;
}
.ccf-key-op { background: linear-gradient(180deg, #ffe7a8, #ffc94f); }
.ccf-key-eq { background: linear-gradient(180deg, #ffb6d3, #ee5d97); color: #fff; }
.ccf-key.is-press { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: #c9bdfb; }
@keyframes ccfPopIn {
    0% { transform: scale(.8); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.ccf-note {
    width: min(100%, 330px);
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdf2, #fff3c4);
    border: 2px solid #f0d77a;
    box-shadow: 0 3px 0 rgba(180, 140, 20, .18);
    font-size: 15px;
    font-weight: 700;
    color: #4b3f2a;
    line-height: 1.55;
}
.ccf-note b { display: block; color: #8a6200; font-size: 13px; margin-bottom: 2px; }
.ccf-note span {
    display: block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 800;
    color: #3b2f63;
}
.ccf-note .ccf-bigline { font-size: 18px; }
.ccf-note em { font-style: normal; color: #d3365f; }
.ccf-picard { display: flex; gap: 10px; width: min(100%, 300px); }
.ccf-picard > div {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 6px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--line, #e3def6);
    color: #7a71a8;
    font-weight: 800;
}
.ccf-picard b { display: block; font-size: 17px; }
.ccf-picard small { font-size: 11.5px; }
.ccf-picard .is-on {
    color: #fff;
    border-color: #7a4fe0;
    background: linear-gradient(160deg, #9b73f5, #6a3fd8);
    box-shadow: 0 3px 0 rgba(58, 31, 130, .3);
}
.ccf-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    line-height: 1.05;
    font-weight: 800;
    margin: 0 2px;
}
.ccf-frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px 1px; }
.ccf-frac > span:last-child { padding: 1px 3px 0; }
.ccf-dbl:not(.ccf-run) .ccf-dbl-seg { opacity: 0; }
.ccf-dbl .ccf-dbl-seg { stroke-dasharray: 80; stroke-dashoffset: 80; }
.ccf-dbl.ccf-run .ccf-dbl-seg { animation: ccfDraw .9s .1s ease-out forwards; }
.ccf-dbl .ccf-dbl-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ccf-dbl.ccf-run .ccf-dbl-pop { animation: ccfPopSvg .5s 1s ease-out forwards; }
.ccf-dbl .ccf-dbl-late { opacity: 0; }
.ccf-dbl.ccf-run .ccf-dbl-late { animation: ccfFade .5s 1.5s ease-out forwards; }
@keyframes ccfDraw {
    from { stroke-dashoffset: 80; opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ccfPopSvg {
    0% { opacity: 0; transform: scale(.3); }
    70% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes ccfFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ccf-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--primary, #6c5ce7);
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #6c5ce7);
    font: inherit;
    font-weight: 800;
    font-size: 14.5px;
    box-shadow: 0 3px 0 rgba(108, 92, 231, .18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s;
}
.ccf-play:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, .18); }
.quiz-number-options.cpr-picker,
.quiz-overlay[data-skill-group="cpr"] .quiz-number-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 460px;
    margin: 16px auto 4px;
}
.quiz-overlay[data-skill-group="cpr"] .quiz-number-options:empty { display: none; }
.quiz-number-opt.cpr-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 5px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.civ-pi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    vertical-align: -5px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #d9ccff, #8c74ee 70%);
    box-shadow: 0 2px 0 rgba(75, 63, 143, .25);
}
.quiz-number-options:is(.crc-picker, .ccf-picker, .pza-picker, .civ-picker, .cpt-picker) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 460px;
    margin: 16px auto 4px;
}
.cap-workbox {
    width: min(100%, 420px);
    box-sizing: border-box;
    padding: 10px 12px 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff3e6 100%);
    border: 2px solid #ffd6bd;
    box-shadow: 0 3px 0 rgba(120, 60, 30, 0.08), inset 0 0 22px rgba(255, 170, 120, .14);
}
.cap-work-title {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #a78bfa, #7c4dff 60%, #5b2fd1);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.cap-work { list-style: none; margin: 0; padding: 0; counter-reset: capstep; }
.cap-work li {
    counter-increment: capstep;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    border: 1.5px dashed rgba(124, 77, 255, .28);
    font: 800 17px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #34205f;
    overflow-wrap: anywhere;
}
.cap-work li::before {
    content: counter(capstep);
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #ff9cc0, #e0368a);
}
.quiz-number-options:is(.cpi-picker, .ccb-picker, .cap-picker, .cst-picker, .ct-picker) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 16px auto 4px;
}
.quiz-number-options:is(.crc-picker, .cpi-picker, .ccf-picker, .pza-picker, .civ-picker, .cpt-picker, .ccb-picker, .cap-picker, .cst-picker, .ct-picker):empty {
    display: none;
}
.quiz-number-opt:is(.cpi-opt, .ccb-opt, .cap-opt, .cst-opt) {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 5px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt:is(.crc-opt, .cpt-opt) {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 6px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt.ccf-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 6px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt.pza-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 5px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt.civ-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 9px 4px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.15;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt:is(.crc-opt, .ccf-opt, .pza-opt, .cpr-opt, .civ-opt, .cpt-opt):active:not(:disabled) {
    transform: scale(.96);
    background: rgba(108, 92, 231, 0.10);
}
.quiz-number-opt.cap-opt.cap-big { font-size: 22px; line-height: 1.1; }
.quiz-number-opt.ct-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 5px;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: break-word;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt:is(.cpi-opt, .ccb-opt, .cst-opt, .ct-opt):is(.cpi-sym, .ccb-sym, .cst-sym, .ct-sym) {
    font-size: 30px;
    line-height: 1;
}
.quiz-number-opt:is(.cpi-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt):active:not(:disabled) {
    transform: scale(.96);
    background: rgba(124, 77, 255, 0.10);
}
@media (hover: hover) {
    .quiz-number-opt:is(.crc-opt, .cpi-opt, .ccf-opt, .pza-opt, .cpr-opt, .civ-opt, .cpt-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt):hover:not(:disabled) {
        border-color: var(--primary, #6c5ce7);
    }
}
.quiz-number-opt:is(.crc-opt, .cpi-opt, .ccf-opt, .pza-opt, .cpr-opt, .civ-opt, .cpt-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt).is-correct {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.quiz-number-opt:is(.crc-opt, .cpi-opt, .ccf-opt, .pza-opt, .cpr-opt, .civ-opt, .cpt-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt).is-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.quiz-number-opt:is(.crc-opt, .cpi-opt, .cpr-opt, .cpt-opt, .ccb-opt, .cst-opt, .ct-opt).has-thumb {
    padding: 6px 4px 8px;
}
.quiz-number-opt.pza-opt.has-thumb { padding: 6px 3px 8px; }
.pza-opt-thumb { display: block; width: 100%; max-width: 92px; aspect-ratio: 7 / 4; }
.pza-opt-thumb .pza-w { stroke-width: 1; }
.pza-opt-letter { font-size: 12.5px; font-weight: 800; opacity: .85; }
.cpr-n { font-size: 16.5px; font-weight: 800; line-height: 1.1; }
.cpr-u { font-size: 12.5px; font-weight: 800; opacity: .8; }
.cpr-u2 { display: block; font-size: 13px; font-weight: 800; line-height: 1.25; }
:is(.crc-opt-thumb, .cpi-opt-thumb, .cpr-opt-thumb, .cpt-opt-thumb, .ccb-opt-thumb, .cst-opt-thumb, .ct-opt-thumb) {
    display: block;
    width: 100%;
    max-width: 78px;
    aspect-ratio: 1 / 1;
}
:is(.crc-opt-letter, .cpi-opt-letter, .cpr-opt-letter, .cpt-opt-letter, .ccb-opt-letter, .cst-opt-letter, .ct-opt-letter) {
    font-size: 13px;
    font-weight: 800;
    opacity: .85;
}
:is(.crc-thumb, .cpr-thumb, .cpt-thumb) :is(.crc-o, .cpr-o, .cpt-o) { stroke-width: 5; }
:is(.crc-thumb, .cpr-thumb, .cpt-thumb) :is(.crc-sh, .cpr-sh, .cpt-sh) {
    filter: drop-shadow(0 3px 2px rgba(59, 47, 99, 0.2));
}
.crc-tray {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 10px auto 2px;
    flex-wrap: nowrap;
}
.crc-label {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 8px 6px;
    border: 2px solid var(--primary, #6c5ce7);
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #6c5ce7);
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background .15s, box-shadow .15s, opacity .15s;
}
.crc-label:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18); }
.crc-label.is-sel { background: rgba(108, 92, 231, .14); box-shadow: 0 0 0 4px rgba(108, 92, 231, .22); }
.crc-label.is-dragging { opacity: .35; }
.crc-label:disabled { opacity: .35; cursor: default; box-shadow: none; }
.crc-label.crc-shake { animation: crcShake .4s; }
.crc-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    width: 84px;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(75, 63, 143, .35);
    background: #fff;
    opacity: .95;
}
@keyframes crcShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.crc-zone { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.crc-zhit { fill: transparent; stroke: none; pointer-events: all; }
.crc-zbadge { fill: #fff; stroke: #8a80c4; stroke-width: 3; stroke-dasharray: 5 4; pointer-events: none; }
.crc-zq { font-size: 18px; stroke: none; fill: #8a80c4; }
.crc-zone:focus-visible .crc-zbadge { stroke: var(--primary, #6c5ce7); stroke-width: 4.5; }
.crc-zone.is-filled { cursor: default; }
.crc-placed { stroke: #fff; stroke-width: 3; pointer-events: none; }
.crc-placed-t { fill: #fff; stroke: none; font-size: 15px; }
.cpr-thumb .cpr-ringline { stroke-width: 12; }
.cpr-steps {
    list-style: none;
    margin: 4px auto 0;
    padding: 0;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cpr-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--line, #e3def6);
    color: var(--secondary, #4b3f8f);
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.25;
    transition: border-color .2s, background .2s, opacity .2s, box-shadow .2s;
}
.cpr-step-n {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #e6dcff, #a78bfa 60%, #7757d6);
}
.cpr-step-t { grid-column: 2; }
.cpr-step-v { grid-column: 2; font-size: 13.5px; color: #7a71a8; overflow-wrap: anywhere; }
.cpr-step.is-locked { opacity: .5; }
.cpr-step.is-active {
    border-color: var(--primary, #6c5ce7);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, .16);
    animation: cprPulse 1.6s ease-in-out infinite;
}
.cpr-step.is-done { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.cpr-step.is-done .cpr-step-n { background: radial-gradient(circle at 35% 30%, #c9f7e4, #34d399 60%, #0f9d6e); }
.cpr-step.is-done .cpr-step-v { color: #059669; }
@keyframes cprPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(108, 92, 231, .16); }
    50% { box-shadow: 0 0 0 7px rgba(108, 92, 231, .08); }
}
.cpr-work,
.cpr-job {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--line, #e3def6);
    color: var(--secondary, #4b3f8f);
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.06);
}
.cpr-work-l {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #e6dcff, #a78bfa 60%, #7757d6);
}
.cpr-work-t,
.cpr-job-t {
    min-width: 0;
    overflow-wrap: anywhere;
}
.cpr-jobs { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; margin-top: 6px; }
.cpr-checkpoint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    color: #8a5a00;
    background: linear-gradient(180deg, #fff4c9, #ffe08a);
    border: 2px dashed #e0a800;
}
.cpr-checkpoint.is-pass {
    color: #047857;
    background: linear-gradient(180deg, #e3fcef, #b8f2d6);
    border: 2px solid #10b981;
    animation: cprPop .6s ease-out;
}
.cpr-cp-i { font-size: 18px; }
.cpr-split-l { animation: cprSplitL .7s ease-out both; }
.cpr-split-r { animation: cprSplitR .7s ease-out both; }
.cpr-pop { animation: cprPop .7s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes cprSplitL {
    from { transform: translateX(14px); }
    to { transform: translateX(0); }
}
@keyframes cprSplitR {
    from { transform: translateX(-14px); }
    to { transform: translateX(0); }
}
@keyframes cprPop {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.cpr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 400px; }
.cpr-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 2px solid var(--primary, #6c5ce7);
    border-radius: 16px;
    background: #fff;
    color: var(--secondary, #4b3f8f);
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    cursor: grab;
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background .15s, box-shadow .15s, opacity .15s;
}
.cpr-card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18); }
.cpr-card.is-sel { background: rgba(108, 92, 231, .14); box-shadow: 0 0 0 4px rgba(108, 92, 231, .22); }
.cpr-card.is-dragging { opacity: .35; }
.cpr-card.is-gone { visibility: hidden; }
.cpr-card.cpr-shake { animation: cprShake .4s; }
.cpr-card-e { font-size: 24px; flex: 0 0 auto; }
.cpr-card-t { min-width: 0; overflow-wrap: anywhere; }
.cpr-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    width: 150px;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(75, 63, 143, .35);
    background: #fff;
    opacity: .95;
}
@keyframes cprShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.cpr-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 400px; }
.cpr-bin {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
    box-sizing: border-box;
    padding: 10px 8px;
    border-radius: 18px;
    border: 3px dashed #b9aef0;
    color: var(--secondary, #4b3f8f);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background .15s, border-color .15s;
}
.cpr-bin-c { background: radial-gradient(120% 100% at 30% 10%, #fff0f6, #ffd3e6); }
.cpr-bin-a { background: radial-gradient(120% 100% at 30% 10%, #eef9ff, #cdebff); }
.cpr-bin:active { border-color: var(--primary, #6c5ce7); }
.cpr-bin:focus-visible { box-shadow: 0 0 0 4px rgba(108, 92, 231, .30); }
.cpr-bin-h {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
}
.cpr-bin-h small { font-size: 12px; opacity: .75; }
.cpr-bin-list { display: flex; flex-direction: column; gap: 5px; }
.cpr-placed {
    display: block;
    padding: 5px 8px;
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
    border: 2px solid #10b981;
    text-align: left;
    overflow-wrap: anywhere;
}
.cpr-toggles { display: flex; gap: 10px; width: 100%; max-width: 400px; }
.cpr-tog,
.cpr-go {
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    border-radius: 999px;
    min-height: 50px;
    padding: 10px 14px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, background .15s;
}
.cpr-tog {
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    background: #fff;
    color: var(--primary, #6c5ce7);
    border: 2px solid var(--primary, #6c5ce7);
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18);
}
.cpr-tog.is-on { background: rgba(108, 92, 231, .14); box-shadow: 0 0 0 4px rgba(108, 92, 231, .22); }
.cpr-tog:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18); }
.cpr-go {
    font-size: 16px;
    color: #fff;
    border: 0;
    padding: 12px 22px;
    background: radial-gradient(120% 140% at 30% 10%, #c9bdfb, #8c74ee 55%, #6c4fd8);
    box-shadow: 0 4px 0 rgba(75, 63, 143, .35);
    animation: cprNudge 1.8s ease-in-out infinite;
}
.cpr-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(75, 63, 143, .35); }
.cpr-go:disabled { animation: none; opacity: .55; box-shadow: none; cursor: default; }
@keyframes cprNudge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.cpr-grow-g { transform-box: fill-box; transform-origin: center; }
.cpr-grow-g.cpr-grow { animation: cprGrow .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cprGrow {
    from { transform: scale(.5); opacity: .4; }
    to { transform: scale(1); opacity: 1; }
}
.civ-num { display: block; font-size: 17px; font-weight: 800; line-height: 1.1; }
.civ-num-sm { font-size: 14.5px; }
.civ-unit { display: block; font-size: 12px; font-weight: 700; opacity: .75; line-height: 1.1; }
:is(.crc-slider-row, .civ-slider-row, .cpt-slider-row) {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin: 10px auto 0;
}
:is(.crc-slider-end, .civ-slider-end, .cpt-slider-end) {
    font-size: 12.5px;
    font-weight: 800;
    color: #7a71a8;
    flex: 0 0 auto;
}
:is(.crc-range, .civ-range, .cpt-range) {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    background: transparent;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
:is(.crc-range, .cpt-range)::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb6d3, #9ad5ff);
    box-shadow: inset 0 1px 2px rgba(59, 47, 99, .25);
}
:is(.crc-range, .cpt-range)::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb6d3, #9ad5ff);
}
.civ-range::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd9a8, #9ad5ff);
    box-shadow: inset 0 1px 2px rgba(59, 47, 99, .25);
}
.civ-range::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd9a8, #9ad5ff);
}
:is(.crc-range, .civ-range, .cpt-range)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    margin-top: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #c9bdfb 55%, #8c74ee);
    border: 3px solid #fff;
    box-shadow: 0 3px 6px rgba(59, 47, 99, .35);
}
:is(.crc-range, .civ-range, .cpt-range)::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #c9bdfb 55%, #8c74ee);
    border: 3px solid #fff;
    box-shadow: 0 3px 6px rgba(59, 47, 99, .35);
}
:is(.crc-range, .civ-range, .cpt-range):focus-visible {
    outline: 3px solid rgba(108, 92, 231, .35);
    outline-offset: 4px;
    border-radius: 8px;
}
:is(.crc-readout, .civ-readout, .cpt-readout) {
    margin: 4px 0 0;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--secondary, #4b3f8f);
}
:is(.crc-readout, .civ-readout, .cpt-readout).is-yes { color: #059669; }
.crc-draw-frame {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
    outline: none;
}
.crc-draw-frame:focus-visible { box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.30); }
.crc-draw-frame.is-done { cursor: default; border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.20); }
.crc-pencil { cursor: grab; }
.crc-pencil-hit { fill: transparent; }
.crc-pencil-tip { fill: #3b2f63; pointer-events: none; }
.cpt-under { fill: none; }
.cpt-ghost {
    fill: rgba(255, 255, 255, .45);
    stroke-dasharray: 6 7;
    stroke: rgba(59, 47, 99, .40);
    stroke-width: 2.5;
}
.cpt-trace.cpt-red { stroke: #ef3b3b; }
.cpt-rtmark {
    fill: none;
    stroke: #3b2f63;
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}
.cpt-slice-line { stroke: rgba(59, 47, 99, .38); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.cpt-thumb .cpt-seg { stroke-width: 11; }
.cpt-thumb .cpt-under { stroke-width: 18; }
.cpt-thumb .cpt-trace { stroke-width: 11; }
.cpt-thumb .cpt-slice-line { stroke-width: 5; }
.cpt-thumb .cpt-ghost { stroke-width: 4; }
.cpt-edge { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.cpt-edge-line {
    fill: none;
    stroke: #3b2f63;
    stroke-opacity: .38;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke .15s, stroke-width .15s, stroke-opacity .15s;
}
.cpt-edge-rest .cpt-edge-line { stroke-dasharray: 3 9; }
.cpt-edge.is-on .cpt-edge-line { stroke: #ef3b3b; stroke-opacity: 1; stroke-width: 9; stroke-dasharray: none; }
.cpt-edge.is-key .cpt-edge-line { stroke: #10b981; stroke-opacity: 1; stroke-width: 9; stroke-dasharray: none; }
.cpt-edge:focus-visible .cpt-edge-line { stroke: var(--primary, #6c5ce7); stroke-opacity: 1; stroke-width: 9; }
.cpt-hit { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; pointer-events: stroke; }
.cpt-actions { display: flex; justify-content: center; margin: 10px auto 2px; }
.cpt-check {
    min-height: 48px;
    min-width: 150px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.cpt-check:disabled { opacity: .45; }
@media (max-width: 560px) {
    .quiz-overlay[data-skill-group] .quiz-modal { --cq-fig: 232px; }
}
@media (max-width: 560px) {
    .quiz-number-options:is(.crc-picker, .cpi-picker, .ccf-picker, .pza-picker, .civ-picker, .cpt-picker, .ccb-picker, .cap-picker, .cst-picker, .ct-picker) {
        gap: 8px;
        margin-top: 14px;
    }
    .quiz-number-opt:is(.cpi-opt, .ccb-opt, .cap-opt, .cst-opt) {
        font-size: 15px;
        padding: 9px 4px;
        min-height: 52px !important;
    }
    .quiz-number-opt:is(.crc-opt, .cpt-opt) { font-size: 15px; padding: 9px 5px; min-height: 52px !important; }
}
@media (max-width: 560px) {
    .quiz-number-opt.ccf-opt { font-size: 14.5px; padding: 9px 4px; min-height: 52px !important; }
}
@media (max-width: 560px) {
    .quiz-number-opt.pza-opt { font-size: 14px; padding: 9px 4px; min-height: 52px !important; }
    .pza-opt-thumb { max-width: 80px; }
}
@media (max-width: 560px) {
    .quiz-overlay[data-skill-group="cpr"] .quiz-number-options { gap: 8px; margin-top: 14px; }
    .quiz-number-opt.cpr-opt { font-size: 15px; padding: 9px 4px; }
}
@media (max-width: 560px) {
    .quiz-number-opt.civ-opt { font-size: 15px; padding: 8px 3px; min-height: 58px !important; }
    .civ-num { font-size: 16px; }
    .civ-num-sm { font-size: 13.5px; }
}
@media (max-width: 560px) {
    .quiz-number-opt.cap-opt.cap-big { font-size: 20px; }
    .cap-work li { font-size: 15.5px; padding: 8px 10px; }
}
@media (max-width: 560px) {
    .quiz-number-opt.ct-opt {
        font-size: 12.5px;
        padding: 8px 3px;
        min-height: 52px !important;
        letter-spacing: -0.1px;
    }
}
@media (max-width: 560px) {
    :is(.crc-opt-thumb, .cpi-opt-thumb, .cpr-opt-thumb, .cpt-opt-thumb, .ccb-opt-thumb, .cst-opt-thumb, .ct-opt-thumb) {
        max-width: 68px;
    }
    :is(.cpi-table, .cst-table) td { font-size: 15px; }
}
@media (max-width: 380px) {
    .quiz-overlay[data-skill-group] .quiz-modal { --cq-fig: 204px; }
}
@media (max-width: 380px) {
    .quiz-number-opt:is(.cpi-opt, .cpr-opt, .ccb-opt, .cap-opt, .cst-opt) { font-size: 13px; padding: 8px 2px; }
    .quiz-number-opt:is(.crc-opt, .cpt-opt) { font-size: 13px; padding: 8px 3px; }
    .quiz-number-opt:is(.ccf-opt, .pza-opt) { font-size: 12.5px; padding: 8px 2px; }
}
@media (max-width: 380px) {
    .quiz-number-opt.civ-opt { font-size: 13px; padding: 7px 2px; }
}
@media (max-width: 380px) {
    .quiz-number-opt.cap-opt.cap-big { font-size: 17px; }
}
@media (max-width: 380px) {
    .quiz-number-opt.ct-opt { font-size: 11.5px; padding: 7px 2px; }
}
@media (max-width: 380px) {
    .quiz-number-opt:is(.cpi-opt, .ccb-opt, .cst-opt, .ct-opt):is(.cpi-sym, .ccb-sym, .cst-sym, .ct-sym) {
        font-size: 26px;
    }
    .quiz-number-opt:is(.crc-opt, .cpi-opt, .pza-opt, .cpr-opt, .cpt-opt, .ccb-opt, .cst-opt, .ct-opt).has-thumb {
        padding: 5px 2px 6px;
    }
    .quiz-number-options:is(.crc-picker, .cpi-picker, .ccf-picker, .pza-picker, .civ-picker, .cpt-picker, .ccb-picker, .cap-picker, .cst-picker, .ct-picker) {
        gap: 6px;
    }
}
@media (max-width: 380px) {
    .pza-opt-thumb { max-width: 66px; }
}
@media (max-width: 380px) {
    .quiz-overlay[data-skill-group="cpr"] .quiz-number-options { gap: 6px; }
    .cpr-n { font-size: 14.5px; }
    .cpr-u { font-size: 11px; }
    .cpr-u2 { font-size: 11.5px; }
}
@media (max-width: 380px) {
    :is(.crc-opt-thumb, .cpi-opt-thumb, .cpr-opt-thumb, .cpt-opt-thumb, .ccb-opt-thumb, .cst-opt-thumb, .ct-opt-thumb) {
        max-width: 58px;
    }
}
@media (max-width: 380px) {
    .civ-num { font-size: 14.5px; }
    .civ-num-sm { font-size: 12px; }
    .civ-unit { font-size: 10.5px; }
}
@media (max-width: 380px) {
    :is(.crc-hint, .cpi-hint, .ccf-hint, .pza-hint, .cpr-hint, .civ-hint, .cpt-hint, .ccb-hint, .cap-hint, .cst-hint, .ct-hint) {
        font-size: 12.5px;
    }
}
@media (max-width: 380px) {
    :is(.cpi-table, .cst-table) th { font-size: 12.5px; }
}
@media (max-width: 380px) {
    .crc-label { font-size: 13.5px; }
}
@media (pointer: coarse) {
    .crc-label { min-height: 52px; }
}
@media (max-width: 380px) {
    .ccf-calc-screen { font-size: 16px; }
    .ccf-note { font-size: 14px; }
}
@media (max-width: 380px) {
    .cpr-card { font-size: 12px; padding: 7px 8px; }
    .cpr-card-e { font-size: 21px; }
    .cpr-step { font-size: 13.5px; }
    .cpr-tog { font-size: 12.5px; padding: 8px 8px; }
}
@media (pointer: coarse) {
    .cpr-card { min-height: 60px; }
    .quiz-number-opt.cpr-opt { min-height: 58px !important; }
}
@media (pointer: coarse) {
    .quiz-number-opt.civ-opt { min-height: 60px !important; }
}
@media (max-width: 380px) {
    .cap-work li { font-size: 14px; gap: 8px; }
    .cap-work-title { font-size: 13px; }
}
@media (pointer: coarse) {
    .quiz-number-opt:is(.crc-opt, .cpi-opt, .ccf-opt, .pza-opt, .cpt-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt) {
        min-height: 56px !important;
    }
}
@media (max-height: 560px) and (orientation: landscape) {
    .quiz-overlay[data-skill-group] .quiz-modal { --cq-fig: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt:is(.cpi-opt, .ccb-opt, .cap-opt, .cst-opt, .ct-opt),
    :is(.cpi-replay, .ccb-replay, .cap-replay, .cst-replay, .ct-replay) {
        transition: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.crc-opt,
    .crc-label,
    .crc-stage {
        transition: none;
    }
    .crc-label.crc-shake { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.ccf-opt,
    .ccf-key,
    .ccf-play {
        transition: none;
    }
    .ccf-spark { animation: none; opacity: .8; }
    .ccf-calc-res.is-shown { animation: none; }
    .ccf-dbl .ccf-dbl-seg { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
    .ccf-dbl .ccf-dbl-pop,
    .ccf-dbl .ccf-dbl-late {
        opacity: 1;
        animation: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.pza-opt { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.cpr-opt,
    .cpr-card,
    .cpr-tog,
    .cpr-go {
        transition: none;
    }
    .cpr-card.cpr-shake,
    .cpr-step.is-active,
    .cpr-go,
    .cpr-split-l,
    .cpr-split-r,
    .cpr-pop,
    .cpr-grow-g.cpr-grow,
    .cpr-checkpoint.is-pass {
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.civ-opt,
    .civ-stage {
        transition: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.cpt-opt,
    .cpt-stage,
    .cpt-edge-line {
        transition: none;
    }
}
.cst-circ { fill: rgba(255, 255, 255, .55); stroke: #7c4dff; stroke-width: 4; }
.cst-circ.cst-pth { fill: #fff; stroke: #7c4dff; stroke-width: 7; }
.cst-poly-in { fill: rgba(47, 127, 232, .22); stroke: #2f7fe8; stroke-width: 5; stroke-linejoin: round; }
.cst-poly-out {
    fill: rgba(239, 59, 59, .08);
    stroke: #ef3b3b;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-dasharray: 9 6;
}
.cst-poly-white { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.cst-o.cst-pth { stroke-width: 6; }
.cst-eq {
    fill: none;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 3;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
    pointer-events: none;
}
.cst-cut { stroke: #ef3b3b; stroke-width: 5; stroke-dasharray: 8 6; stroke-linecap: round; }
.ct-thin { stroke-width: 1.8; }
.ct-legu { stroke: #fff; stroke-width: 17; stroke-linecap: round; opacity: .9; }
.ct-leg { stroke-width: 12; stroke-linecap: round; fill: none; }
.ct-legh { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .6; }
.ct-semi { fill-opacity: .8; }
.ct-cell { fill: rgba(255, 255, 255, .6); stroke: var(--line, #ddd2fb); stroke-width: 2.5; }
.ct-fu { fill: none; stroke: #fff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.ct-fs { stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ct-dash { stroke-dasharray: 2 14; }
.ct-guide { stroke: #7c4dff; stroke-width: 2; stroke-dasharray: 4 5; opacity: .3; }
.ct-guide2 {
    fill: none;
    stroke: #7c4dff;
    stroke-width: 3;
    stroke-dasharray: 3 9;
    stroke-linecap: round;
    opacity: .35;
}
.ct-leader { stroke: #34205f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.ct-spoke2 { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.ct-ray { stroke-width: 9; stroke-linecap: round; }
.ct-arc { fill: none; stroke: #e0368a; stroke-width: 8; stroke-linecap: round; }
.ct-arm { stroke: #7c4dff; stroke-width: 6; stroke-linecap: round; opacity: .85; }
.ct-pin { fill: #ef3b3b; stroke: #fff; stroke-width: 3; }
.ct-tipdot { fill: #ffd54a; stroke: #34205f; stroke-width: 3; }
.ct-gap { stroke: #ef3b3b; stroke-width: 5; stroke-dasharray: 3 8; stroke-linecap: round; }
.ct-arrow { fill: none; stroke: #7c4dff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ct-gridl { stroke: #cdbff5; stroke-width: 1.5; opacity: .75; }
.ct-pt-gold { fill: #ffd54a; stroke: #34205f; stroke-width: 3; }
.ct-pt-blue { fill: #2f7fe8; stroke: #fff; stroke-width: 3; }
.ct-pt-green { fill: #10b981; stroke: #fff; stroke-width: 3; }