@layer components {
  .joyful-trainer { --trainer-purple: #7658ae; --trainer-blue: #327a9b; --trainer-pink: #b74e70; }
  .joyful-trainer .page_title { background: linear-gradient(120deg, #fff0c9, #ffe6dc 48%, #eee6ff); border-bottom: 2px solid #eadbf7; text-align: center; position: relative; }
  .joyful-trainer .page_title .container { padding-block: 30px; }
  .joyful-trainer .trainer-kicker { font-size: 12px; color: #825e91; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
  .joyful-trainer .page_title h1 { padding: 14px 0 18px; color: #655090; font-size: clamp(32px, 4vw, 48px); font-weight: 500; }
  .joyful-trainer .trainer-heading-note { font-size: .65em; font-weight: 300; color: #86617a; }
  .joyful-trainer .trainer-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .joyful-trainer .trainer-chips span { border: 1px solid #fff; border-radius: 99px; background: #ffffffb5; padding: 9px 16px; color: #67567b; font-size: 14px; }
  .joyful-trainer .letters { background: radial-gradient(circle at 8% 12%, #ffecc9 0, transparent 28%), radial-gradient(circle at 95% 40%, #e4f4ed 0, transparent 30%), #fffcf7; padding-top: 12px; }
  .joyful-trainer .blog > h2 { color: #7658ae; font-size: 28px; }
  .joyful-trainer .blog > h2 img { display: inline-block; }
  .joyful-trainer .container2 { background: #fff; border: 2px solid #e6daf5; border-radius: 36px; box-shadow: 0 14px 40px #8265b214; width: 100%; max-width: 820px; padding: 28px; }
  .joyful-trainer .block, .joyful-trainer .restored-hint { width: 100%; margin: 14px auto; padding: 22px; border-radius: 26px; background: #f7f1ff; text-align: center; }
  .joyful-trainer #generalBlock { background: linear-gradient(135deg, #e8f8df, #effbef); border: 1px solid #d2e8c9; }
  .joyful-trainer .b1-header { margin-top: 0; font-size: 24px; color: #715392; }
  .joyful-trainer .example { font-size: 32px; }
  .joyful-trainer .example_content { gap: 12px; }
  .joyful-trainer .letters .primer { font-family: "Onest", sans-serif; font-size: 44px; font-weight: 500; margin: 0; line-height: 1.3; }
  .joyful-trainer .letters .mult1 { color: #7658ae; }
  .joyful-trainer .letters .mult2 { color: #b74e70; }
  .joyful-trainer .letters .equation-sign { font-size: 30px; color: #6c8093; margin: 0; }
  .joyful-trainer .result { border: 2px solid #baaad7; border-radius: 18px; background: #fff; font-size: 30px; width: 150px; padding: 12px; }
  .joyful-trainer .result:focus-visible { outline: 3px solid #ddc9ff; outline-offset: 3px; }
  .joyful-trainer .result[aria-invalid="true"] { border-color: #c66580; }
  .joyful-trainer .input-button, .joyful-trainer .input-button2, .joyful-trainer .input-button3 { font-size: 16px; font-weight: 500; min-height: 48px; transition: background .2s, transform .2s; white-space: normal; }
  .joyful-trainer #btnAgree { background: #7658ae; color: #fff; box-shadow: 0 4px 0 #5c408a; }
  .joyful-trainer #btnAgree:hover { background: #654696; transform: translateY(-1px); }
  .joyful-trainer #btnAgree:active { transform: translateY(2px); box-shadow: 0 2px 0 #5c408a; }
  .joyful-trainer .restored-hint { background: #fff6d9; }
  .joyful-trainer .restored-hint h2 { color: #8b6a35; font-size: 24px; margin-top: 0; }
  .joyful-trainer .restored-hint h2 img { display: inline-block; }
  .joyful-trainer #show { background: #ffe4a1; color: #775722; }
  .joyful-trainer #reset { background: #e8f3f8; color: #327a9b; }
  .joyful-trainer #myExpand-btn, .joyful-trainer #myCollapse-btn { background: #e9f4ea; color: #3d7253; }
  .joyful-trainer .input-button:disabled, .joyful-trainer .input-button2:disabled { opacity: .5; cursor: default; }
  .joyful-trainer .slider { width: 100%; }
  .joyful-trainer .slider-image { max-width: 100%; max-height: 400px; border-radius: 16px; margin-inline: auto; }
  .joyful-trainer .controls { display: flex; justify-content: center; gap: 16px; }
  .joyful-trainer .prev-btn, .joyful-trainer .next-btn { background: #fff; color: #8b6a35; border: 1px solid #ecd496; border-radius: 50%; width: 44px; height: 44px; padding: 0; }
  .joyful-trainer #messBlock { background: #eaf8ee; }
  .joyful-trainer .letters .right { display: none; color: #387957; font-size: 28px; margin: 0; }
  .joyful-trainer .letters .wrong { display: none; color: #ab5270; font-size: 24px; margin: 0; }
  .joyful-trainer .letters .dop { font-size: 16px; }
  .joyful-trainer #messBlock img { display: inline-block; max-width: 90px; }
  .joyful-trainer .instruction { text-align: left; }
  .joyful-trainer .instruction p, .joyful-trainer .instruction li { font-size: 16px; }
  .joyful-trainer .blog a { color: #7658ae; text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 600px) {
    .joyful-trainer .container2 { padding: 14px; border-radius: 28px; }
    .joyful-trainer .block, .joyful-trainer .restored-hint { padding: 18px 12px; }
    .joyful-trainer .example_content { gap: 8px; }
    .joyful-trainer .letters .primer { font-size: 34px; }
    .joyful-trainer .result { width: 110px; font-size: 26px; }
    .joyful-trainer #btnAgree { flex-basis: 100%; }
    .joyful-trainer .trainer-chips { gap: 6px; }
    .joyful-trainer .trainer-chips span { font-size: 12px; padding: 8px 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .joyful-trainer .input-button, .joyful-trainer .input-button2, .joyful-trainer .input-button3 { transition: none; transform: none; }
  }
}

@layer components {
  .joyful-trainer .blog .slider-image { width: 100%; max-width: 100%; height: auto; max-height: none; }
  .trainer-balloon-layer { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
  .trainer-balloon { position: absolute; bottom: -160px; width: 56px; height: 112px; color: #ed86b1; opacity: 0; animation: trainer-balloon-rise 20s linear infinite; }
  .trainer-balloon svg { width: 100%; height: 100%; }
  .trainer-balloon:nth-child(1) { left: 4%; color: #ee88b4; animation-delay: -2s; }
  .trainer-balloon:nth-child(2) { left: 13%; color: #77b8ed; animation-delay: -7s; }
  .trainer-balloon:nth-child(3) { left: 21%; color: #b091e5; animation-delay: -13s; }
  .trainer-balloon:nth-child(4) { left: 76%; color: #efc662; animation-delay: -4s; }
  .trainer-balloon:nth-child(5) { left: 85%; color: #80c6a0; animation-delay: -10s; }
  .trainer-balloon:nth-child(6) { left: 92%; color: #f3a272; animation-delay: -16s; }
  @keyframes trainer-balloon-rise {
    0% { opacity: 0; transform: translateY(0) rotate(-7deg); }
    12% { opacity: .38; }
    70% { opacity: .38; }
    100% { opacity: 0; transform: translateY(calc(-100dvh - 180px)) rotate(9deg); }
  }
  @media (max-width: 600px) { .trainer-balloon { width: 48px; height: 100px; } }
  @media (prefers-reduced-motion: reduce) { .trainer-balloon-layer { display: none; } }
}

@layer components {
  .trainer-salute-layer { position: fixed; inset: 0; z-index: 31; overflow: hidden; pointer-events: none; }
  .trainer-salute-particle { position: absolute; top: 48%; left: 50%; width: 9px; height: 13px; background: var(--spark-color); border-radius: 3px; opacity: 0; animation: trainer-salute 1.8s ease-out both; }
  @keyframes trainer-salute {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    12% { opacity: .95; }
    65% { opacity: .85; }
    100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-rotation)); }
  }
  .trainer-salute-particle:nth-child(1) { --spark-color: #ed86b1; --spark-x: 22.00vw; --spark-y: 8.00vh; --spark-rotation: 0deg; }
  .trainer-salute-particle:nth-child(2) { --spark-color: #77b8ed; --spark-x: 28.56vw; --spark-y: 12.03vh; --spark-rotation: 37deg; }
  .trainer-salute-particle:nth-child(3) { --spark-color: #b091e5; --spark-x: 33.83vw; --spark-y: 17.85vh; --spark-rotation: 74deg; }
  .trainer-salute-particle:nth-child(4) { --spark-color: #efc662; --spark-x: 37.24vw; --spark-y: 25.20vh; --spark-rotation: 111deg; }
  .trainer-salute-particle:nth-child(5) { --spark-color: #80c6a0; --spark-x: 16.85vw; --spark-y: 19.31vh; --spark-rotation: 148deg; }
  .trainer-salute-particle:nth-child(6) { --spark-color: #f3a272; --spark-x: 18.64vw; --spark-y: 25.77vh; --spark-rotation: 185deg; }
  .trainer-salute-particle:nth-child(7) { --spark-color: #ed86b1; --spark-x: 18.00vw; --spark-y: 32.94vh; --spark-rotation: 222deg; }
  .trainer-salute-particle:nth-child(8) { --spark-color: #77b8ed; --spark-x: 14.71vw; --spark-y: 40.33vh; --spark-rotation: 259deg; }
  .trainer-salute-particle:nth-child(9) { --spark-color: #b091e5; --spark-x: 3.82vw; --spark-y: 25.33vh; --spark-rotation: 296deg; }
  .trainer-salute-particle:nth-child(10) { --spark-color: #efc662; --spark-x: 0.00vw; --spark-y: 31.20vh; --spark-rotation: 333deg; }
  .trainer-salute-particle:nth-child(11) { --spark-color: #80c6a0; --spark-x: -6.25vw; --spark-y: 36.36vh; --spark-rotation: 370deg; }
  .trainer-salute-particle:nth-child(12) { --spark-color: #f3a272; --spark-x: -14.71vw; --spark-y: 40.33vh; --spark-rotation: 407deg; }
  .trainer-salute-particle:nth-child(13) { --spark-color: #ed86b1; --spark-x: -11.00vw; --spark-y: 23.24vh; --spark-rotation: 444deg; }
  .trainer-salute-particle:nth-child(14) { --spark-color: #77b8ed; --spark-x: -18.64vw; --spark-y: 25.77vh; --spark-rotation: 481deg; }
  .trainer-salute-particle:nth-child(15) { --spark-color: #b091e5; --spark-x: -27.58vw; --spark-y: 26.51vh; --spark-rotation: 518deg; }
  .trainer-salute-particle:nth-child(16) { --spark-color: #efc662; --spark-x: -37.24vw; --spark-y: 25.20vh; --spark-rotation: 555deg; }
  .trainer-salute-particle:nth-child(17) { --spark-color: #80c6a0; --spark-x: -20.67vw; --spark-y: 14.02vh; --spark-rotation: 592deg; }
  .trainer-salute-particle:nth-child(18) { --spark-color: #f3a272; --spark-x: -28.56vw; --spark-y: 12.03vh; --spark-rotation: 629deg; }
  .trainer-salute-particle:nth-child(19) { --spark-color: #ed86b1; --spark-x: -36.00vw; --spark-y: 8.00vh; --spark-rotation: 666deg; }
  .trainer-salute-particle:nth-child(20) { --spark-color: #77b8ed; --spark-x: -42.35vw; --spark-y: 2.03vh; --spark-rotation: 703deg; }
  .trainer-salute-particle:nth-child(21) { --spark-color: #b091e5; --spark-x: -20.67vw; --spark-y: 1.98vh; --spark-rotation: 740deg; }
  .trainer-salute-particle:nth-child(22) { --spark-color: #efc662; --spark-x: -25.11vw; --spark-y: -3.60vh; --spark-rotation: 777deg; }
  .trainer-salute-particle:nth-child(23) { --spark-color: #80c6a0; --spark-x: -27.58vw; --spark-y: -10.51vh; --spark-rotation: 814deg; }
  .trainer-salute-particle:nth-child(24) { --spark-color: #f3a272; --spark-x: -27.64vw; --spark-y: -18.35vh; --spark-rotation: 851deg; }
  .trainer-salute-particle:nth-child(25) { --spark-color: #ed86b1; --spark-x: -11.00vw; --spark-y: -7.24vh; --spark-rotation: 888deg; }
  .trainer-salute-particle:nth-child(26) { --spark-color: #77b8ed; --spark-x: -9.92vw; --spark-y: -13.80vh; --spark-rotation: 925deg; }
  .trainer-salute-particle:nth-child(27) { --spark-color: #b091e5; --spark-x: -6.25vw; --spark-y: -20.36vh; --spark-rotation: 962deg; }
  .trainer-salute-particle:nth-child(28) { --spark-color: #efc662; --spark-x: -0.00vw; --spark-y: -26.40vh; --spark-rotation: 999deg; }
  .trainer-salute-particle:nth-child(29) { --spark-color: #80c6a0; --spark-x: 3.82vw; --spark-y: -9.33vh; --spark-rotation: 1036deg; }
  .trainer-salute-particle:nth-child(30) { --spark-color: #f3a272; --spark-x: 9.92vw; --spark-y: -13.80vh; --spark-rotation: 1073deg; }
  .trainer-salute-particle:nth-child(31) { --spark-color: #ed86b1; --spark-x: 18.00vw; --spark-y: -16.94vh; --spark-rotation: 1110deg; }
  .trainer-salute-particle:nth-child(32) { --spark-color: #77b8ed; --spark-x: 27.64vw; --spark-y: -18.35vh; --spark-rotation: 1147deg; }
  .trainer-salute-particle:nth-child(33) { --spark-color: #b091e5; --spark-x: 16.85vw; --spark-y: -3.31vh; --spark-rotation: 1184deg; }
  .trainer-salute-particle:nth-child(34) { --spark-color: #efc662; --spark-x: 25.11vw; --spark-y: -3.60vh; --spark-rotation: 1221deg; }
  .trainer-salute-particle:nth-child(35) { --spark-color: #80c6a0; --spark-x: 33.83vw; --spark-y: -1.85vh; --spark-rotation: 1258deg; }
  .trainer-salute-particle:nth-child(36) { --spark-color: #f3a272; --spark-x: 42.35vw; --spark-y: 2.03vh; --spark-rotation: 1295deg; }
  @media (prefers-reduced-motion: reduce) { .trainer-salute-layer { display: none; } }
}