/* TOEFL 2026 materials: the designed pages' own styles.
 *
 * GENERATED by scripts/toefl_redesign/convert.py --design from the owner's
 * design export: every inline style of the 13 designed pages' main column and
 * sidebar, as a class (d-<hash>). Do not edit by hand; the export is the spec.
 * Base rules of the design's page shell come first.
 */

:where(.tn-design a) {
  color: #5e61f6;
  text-decoration: none;
}

:where(.tn-design a:hover) {
  color: #634bf6;
  text-decoration: underline;
}

.tn-design button {
  font-family: inherit;
}

/* The design's elements size content-box unless they say otherwise. */
:where(.tn-design) *,
:where(.tn-design) *::before,
:where(.tn-design) *::after {
  box-sizing: content-box;
}

.tn-only-mob {
  display: none;
}

.tn-only-desk {
  display: contents;
}

@media (max-width: 759.98px) {
  .tn-only-mob {
    display: contents;
  }

  .tn-only-desk {
    display: none;
  }
}

.tn-design .d-015b165 { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; margin-bottom: 8px; }
.tn-design .d-03fa798 { border-radius: 18px; background: linear-gradient(135deg,#f3eeff,#eaf3ff); padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tn-design .d-05b6b29 { border: 1px solid #e6e9f2; border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.tn-design .d-0680683 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#634bf6 0%,#4baef6 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-06cba7a { border-radius: 22px; background: #f8f9fb; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-07c5b3f { padding-left: 40px; margin-left: 16px; }
.tn-design .d-0891898 { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 18px; padding: 18px 20px; border-top: 1px solid #eceef3; align-items: start; }
.tn-design .d-0951d6a { margin-top: 16px; padding: 12px; background: #fff; border-radius: 8px; border-left: 4px solid #5e61f6; border: 1px solid; border-color: #5e61f6; }
.tn-design .d-0a147c2 { display: flex; flex-direction: column; margin-bottom: 80px; }
.tn-design .d-0a9bf9f { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden; background: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.06),0 0 0 2px #fff; }
.tn-design .d-0b857e5 { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; font-size: 16px; line-height: 1.4; color: #3f4250; }
.tn-design .d-0b857e5:hover { background: #f1f5ff; }
.tn-design .d-0bfacd2 { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 72px; }
.tn-design .d-0bfd48a { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 12px; }
.tn-design .d-0c2378d { font-size: 16.5px; line-height: 1.3; color: #111; }
.tn-design .d-0f51e9e { border-radius: 20px; background: #fff; border: 1px solid #e6e9f2; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 18px rgba(29,29,58,.05); }
.tn-design .d-10cd36c { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tn-design .d-10eb3c8 { background: linear-gradient(90deg,#634bf6,#4baef6); color: #fff; font-weight: 700; font-size: 14px; padding: 11px; border-radius: 10px; text-decoration: none; text-align: center; }
.tn-design .d-1287079 { margin: 0; font-size: 13.5px; line-height: 1.55; color: #6e7071; }
.tn-design .d-130aefb { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-133eab5 { font-size: 12px; font-weight: 700; color: #6e7071; }
.tn-design .d-162c626 { color: #5e61f6; text-decoration: underline; }
.tn-design .d-16fddd3 { font-size: 14px; font-weight: 700; color: #5e61f6; }
.tn-design .d-1a1b707 { margin: 0; font-size: 18px; font-weight: 700; color: #5e61f6; margin-bottom: 8px; line-height: 1.3; }
.tn-design .d-1ae7dd5 { margin: 0; list-style: disc; padding-left: 20px; color: #4b4d55; font-size: 14.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-1babce2 { margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 72px; }
.tn-design .d-1ca4513 { padding: 16px; background: #f8f8f8; border-radius: 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-1cc1510 { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; margin-top: 8px; margin-left: 16px; list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-1d70542 { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tn-design .d-1d8727e { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; align-items: flex-start; }
.tn-design .d-1f2221e { overflow-x: auto; }
.tn-design .d-203b64b { display: block; font-size: 16px; font-weight: 700; color: #5e61f6; margin-bottom: 8px; }
.tn-design .d-22588ae { color: #f59e0b; }
.tn-design .d-26b018c { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.tn-design .d-26cc825 { display: inline-block; padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: rgba(65,181,74,0.15); color: #06772c; font-size: 13px; text-transform: uppercase; border-radius: 999px; margin-bottom: 8px; }
.tn-design .d-26eebfb { margin-left: auto; }
.tn-design .d-27cccf5 { color: #1f2937; font-size: 15.5px; }
.tn-design .d-28849f9 { flex: none; stroke-width: 2.2; stroke-linejoin: round; }
.tn-design .d-29bdf55 { font-weight: 700; color: #1d1d3a; }
.tn-design .d-29ffad5 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#0e5f8a 0%,#4baef6 100%); display: flex; align-items: flex-end; padding: 18px 20px; }
.tn-design .d-2b1174c { flex: none; background: linear-gradient(90deg,#634bf6,#4baef6); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 12px; text-decoration: none; white-space: nowrap; }
.tn-design .d-2b28bec { margin: 0; color: #4b4d55; margin-top: 8px; font-size: 14.5px; line-height: 1.4; }
.tn-design .d-2cf05d2 { border-radius: 24px; background: linear-gradient(110deg,#e9f9fb 0%,#f1f5ff 60%,#f4f0ff 100%); padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-2ed5974 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#1e3a8a 0%,#4b8ef6 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-2ed68f7 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#6d4aff 0%,#b48cff 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-2f28332 { text-align: left; padding: 13px 16px; background: #f6f8fd; font-weight: 700; color: #1d1d3a; white-space: nowrap; }
.tn-design .d-2fbe2f9 { border-radius: 14px; background: #fff; border: 1px solid #e6e9f2; }
.tn-design .d-3031cb7 { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.tn-design .d-33eeb02 { font-size: 14px; line-height: 1.45; color: #3f4250; }
.tn-design .d-3641e97 { display: flex; flex-direction: column; gap: 14px; }
.tn-design .d-3644253 { width: 18px; height: 18px; accent-color: #5e61f6; flex: none; margin: 0; }
.tn-design .d-3863468 { font-size: 14.5px; line-height: 1.55; color: #4b4d55; }
.tn-design .d-38d21cc { padding: 7px 12px; font-size: 14.5px; color: #4b4d55; }
.tn-design .d-391422a { font-size: 16.5px; line-height: 1.35; color: #111; }
.tn-design .d-3c30641 { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; margin-top: 12px; }
.tn-design .d-3e2926a { display: flex; align-items: center; gap: 8px; font-family: ui-monospace,Menlo,monospace; font-size: 12px; letter-spacing: .12em; color: #0f6f7c; }
.tn-design .d-4039b90 { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-4085538 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#0f6f7c 0%,#13a3b6 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-421fbf8 { margin: 0; list-style: disc; padding-left: 24px; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-42d33b0 { margin: 0; color: #4b4d55; margin-bottom: 6px; font-size: 14.5px; line-height: 1.4; }
.tn-design .d-43d2220 { width: 22px; height: 22px; border-radius: 50%; background: #e4f6f8; display: flex; align-items: center; justify-content: center; color: #0f6f7c; }
.tn-design .d-4512c0a { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; }
.tn-design .d-464dc8a { overflow-x: auto; border-radius: 20px; border: 1px solid #e6e9f2; border-color: #d8e2ec; background: #fff; }
.tn-design .d-478201c { margin-bottom: 48px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 72px; }
.tn-design .d-4798f1e { padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; background: #5e61f6; color: #fff; font-size: 14.5px; font-weight: 700; border-radius: 12px; }
.tn-design .d-47eeca8 { position: relative; background: #fff; color: #1d1d3a; font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 12px; box-shadow: 0 6px 16px rgba(17,17,40,.15); white-space: nowrap; }
.tn-design .d-4933e5f { margin: 0; list-style: disc; padding-left: 20px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-49bc05f { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: #6e7071; }
.tn-design .d-4cc76c5 { margin: 0; font-size: 16px; line-height: 150%; color: #4b4d55; margin-bottom: 16px; }
.tn-design .d-4e75e1d { margin: 0; padding: 0 20px 18px; font-size: 15.5px; line-height: 1.6; color: #4b4d55; }
.tn-design .d-4ea7929 { position: absolute; left: -30px; bottom: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tn-design .d-4efe07d { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; }
.tn-design .d-4f12c2c { display: flex; flex-direction: column; border: 1px solid #e6e9f2; border-radius: 22px; overflow: hidden; background: #fff; text-decoration: none; color: #1d1d3a; transition: transform .15s,box-shadow .15s; }
.tn-design .d-4f12c2c:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(29,29,58,.10); text-decoration: none; color: #1d1d3a; }
.tn-design .d-4f26c8e { flex: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tn-design .d-51c7870 { flex: none; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg,#634bf6,#4baef6); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.tn-design .d-5393931 { margin: 0; list-style: disc; padding-left: 24px; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-55571ba { color: #f59e0b; white-space: nowrap; }
.tn-design .d-57c5725 { margin: 0; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); line-height: 1.6; }
.tn-design .d-59566ae { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 72px; }
.tn-design .d-5a3a7ea { border-radius: 16px; background: #f8f9fb; border: 1px solid #e6e9f2; }
.tn-design .d-5a997e1 { margin: 0; font-size: 20px; line-height: 140%; color: #4b4d55; margin-top: 8px; }
.tn-design .d-5ac3ab3 { display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-5adc777 { font-size: 13.5px; line-height: 1.35; color: #6e7071; }
.tn-design .d-5bfa3b2 { margin-top: 12px; padding: 12px; background: #fff; border-radius: 8px; border-left: 4px solid #5e61f6; border: 1px solid; border-color: #4baef6; }
.tn-design .d-5ca94e1 { display: flex; flex-direction: column; margin-bottom: 48px; }
.tn-design .d-5d98db5 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#6d4aff 0%,#b48cff 100%); display: flex; align-items: flex-end; padding: 18px 20px; }
.tn-design .d-5fb9247 { display: flex; justify-content: flex-end; margin-top: 16px; }
.tn-design .d-5fe3d62 { margin: 0; list-style: disc; display: flex; flex-direction: column; color: #6e7071; font-size: clamp(15px,0.6vw + 11px,18px); padding-left: 20px; gap: 6px; }
.tn-design .d-605c1af { max-width: 28rem; height: auto; border-radius: 12px; width: 100%; margin-left: auto; margin-right: auto; display: block; }
.tn-design .d-624bf0e { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: #1d1d3a; }
.tn-design .d-648a0b3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tn-design .d-65a327f { margin: 0; list-style: disc; display: flex; flex-direction: column; color: #6e7071; font-size: 15px; padding-left: 20px; gap: 6px; }
.tn-design .d-66990b0 { font-family: ui-monospace,Menlo,monospace; font-size: 12px; letter-spacing: .12em; color: #0f6f7c; }
.tn-design .d-6754441 { display: flex; flex-direction: column; gap: 2px; max-width: 500px; padding-left: 20px; border-left: 2px solid #d9defa; border-left-color: #5e61f6; }
.tn-design .d-67c9726 { cursor: pointer; padding: 11px 16px; font-weight: 700; color: #5e61f6; font-size: 14.5px; }
.tn-design .d-6865184 { font-size: 13.5px; color: #6e7071; }
.tn-design .d-689cc2b { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 18px; padding: 18px 20px; align-items: start; }
.tn-design .d-69fdc41 { font-size: 15px; font-weight: 700; }
.tn-design .d-6af83a6 { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.6; color: #3f4250; }
.tn-design .d-6b40200 { padding: 10px 14px; border-radius: 12px; background: #fff; font-weight: 700; color: #5e61f6; box-shadow: 0 1px 4px rgba(29,29,58,.06); }
.tn-design .d-6b95235 { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.tn-design .d-6eada55 { margin: 0; font-size: 16px; line-height: 1.6; color: #3f4250; font-style: italic; }
.tn-design .d-6f98976 { margin: 0; display: flex; flex-direction: column; padding-left: 20px; font-size: clamp(15px,0.6vw + 11px,18px); color: #6e7071; list-style: disc; gap: 6px; }
.tn-design .d-6f9e3ba { margin: 0; font-size: 19px; line-height: 1.3; color: #111; }
.tn-design .d-72dfe57 { margin: 0; font-size: clamp(19px,1.6vw,22px); line-height: 1.25; color: #111; }
.tn-design .d-75ada09 { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; color: #3f4250; }
.tn-design .d-7788692 { display: flex; flex-direction: column; gap: 4px; }
.tn-design .d-7aaa396 { border: 1px solid #e6e9f2; border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.tn-design .d-7aadb66 { padding: 13px 16px; border-top: 1px solid #eceef3; color: #3f4250; vertical-align: top; }
.tn-design .d-7ad1360 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#3f35c9 0%,#7c6cff 100%); }
.tn-design .d-7b76deb { border-radius: 14px; background: #e8f8fa; padding: 10px 12px; font-size: 14.5px; line-height: 1.5; color: #0f6f7c; }
.tn-design .d-7bdc49b { margin: 0; list-style: disc; padding-left: 20px; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-7d56f56 { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e4f6f8; color: #0f6f7c; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.tn-design .d-7db12b2 { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.tn-design .d-7eb6ce1 { margin-top: auto; font-size: 14.5px; font-weight: 700; color: #5e61f6; }
.tn-design .d-7f9813e { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#0f6f7c 0%,#13a3b6 100%); }
.tn-design .d-805fc59 { margin: 0; color: #4b4d55; font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.tn-design .d-81bf93a { font-size: 16px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.tn-design .d-843a0d0 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); gap: 2px; }
.tn-design .d-84d37d4 { font-size: 13px; font-weight: 700; color: #634bf6; }
.tn-design .d-859c8af { display: flex; flex-direction: column; margin-bottom: 24px; }
.tn-design .d-860049c { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.tn-design .d-8647208 { font-size: 15.5px; line-height: 1.3; color: #1e3a8a; }
.tn-design .d-8675f4a { font-weight: 700; }
.tn-design .d-8766379 { margin: 6px 0 0; font-size: 16px; line-height: 1.35; color: #111; }
.tn-design .d-87985dc { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; letter-spacing: .04em; }
.tn-design .d-8837f23 { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(260px,100%),1fr)); gap: 16px; }
.tn-design .d-884b3a5 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); gap: 16px; margin-bottom: 24px; }
.tn-design .d-893e471 { cursor: pointer; padding: 13px 18px; font-weight: 700; color: #5e61f6; font-size: 15px; }
.tn-design .d-8a00568 { color: #4b5563; }
.tn-design .d-8d4b5d3 { color: #5a68f5; text-decoration: underline; }
.tn-design .d-8d80b20 { font-size: 13.5px; font-weight: 700; text-align: center; color: #5e61f6; }
.tn-design .d-8eb58bc { margin: 0; color: #0f6f7c; font-weight: 700; font-size: 20px; line-height: 1.3; }
.tn-design .d-915cb12 { margin: 0; font-weight: 700; font-size: clamp(15px,0.6vw + 11px,18px); margin-bottom: 8px; line-height: 1.6; }
.tn-design .d-9184101 { stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tn-design .d-921065b { width: 100%; height: 100%; object-fit: cover; display: block; mask-image: radial-gradient(circle,#000 62%,rgba(0,0,0,0.72) 78%,transparent 100%); -webkit-mask-image: radial-gradient(circle,#000 62%,rgba(0,0,0,0.72) 78%,transparent 100%); }
.tn-design .d-925c352 { margin: 0; font-size: 16.5px; line-height: 1.6; color: #3f4250; text-wrap: pretty; }
.tn-design .d-9280742 { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.55; }
.tn-design .d-94defdd { margin: 0; list-style: disc; padding-left: 20px; color: #4b4d55; margin-bottom: 6px; font-size: 14.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; }
.tn-design .d-96da2b4 { border-radius: 22px; background: #f1f5ff; padding: 6px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr)); gap: 6px; }
.tn-design .d-97195c6 { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-design .d-9751a04 { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(17,17,40,0) 40%,rgba(17,17,40,.55) 100%); }
.tn-design .d-9754b78 { font-size: clamp(15px,0.6vw + 11px,18px); color: #5e61f6; text-decoration: underline; }
.tn-design .d-97f216a { padding: 13px 16px; border-top: 1px solid #eceef3; color: #1d1d3a; vertical-align: top; font-weight: 700; }
.tn-design .d-98a214e { padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; background: #fff; border: 1px solid #e6e9f2; border-color: #d8e2ec; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-9b089fb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#1e3a8a 0%,#4b8ef6 100%); }
.tn-design .d-9b32125 { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tn-design .d-9bfd35f { width: 100%; display: block; height: 44px; }
.tn-design .d-9cad731 { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; }
.tn-design .d-9f63a0a { width: 100%; box-sizing: border-box; border: 1px solid #d6dcef; border-radius: 16px; background: #fff; padding: 14px 16px; font-size: 16px; line-height: 1.6; font-family: inherit; color: #1d1d3a; resize: vertical; }
.tn-design .d-a017bb7 { padding: 16px; background: #f8f8f8; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-a02cada { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #634bf6; box-sizing: border-box; }
.tn-design .d-a08763a { margin-bottom: 24px; }
.tn-design .d-a1149b3 { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4b4d55; text-wrap: pretty; }
.tn-design .d-a3aa444 { margin: 0; font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #111; line-height: 1.3; }
.tn-design .d-a80ba51 { position: sticky; top: 0; z-index: 10; margin: 0 -16px -16px; padding: 10px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #eef0f5; }
.tn-design .d-a95cb89 { width: 100%; border-radius: 12px; display: block; }
.tn-design .d-a9a712c { margin: 0; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); margin-bottom: 24px; line-height: 1.6; }
.tn-design .d-aab5e4a { border-radius: 22px; background: #f1f5ff; padding: 20px 22px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 12px 24px; }
.tn-design .d-aaf8e11 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-design .d-ac01699 { background: #f1f5ff; border-radius: 14px; padding: 10px 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.tn-design .d-ac12d08 { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.tn-design .d-adeb1bf { font-size: 14px; color: #6e7071; }
.tn-design .d-afcc1f5 { color: #1d1d3a; }
.tn-design .d-b15c05e { padding: 2px 18px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.6; color: #3f4250; }
.tn-design .d-b211a33 { margin: 0; color: #4b4d55; font-size: clamp(15px,0.6vw + 11px,18px); margin-bottom: 16px; line-height: 1.6; }
.tn-design .d-b36f8ca { margin: 0; font-size: clamp(24px,2.4vw,32px); line-height: 1.18; letter-spacing: -.4px; color: #111; text-wrap: balance; }
.tn-design .d-b425022 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#3f35c9 0%,#7c6cff 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-b5494b7 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: #5e61f6; }
.tn-design .d-b61957f { position: absolute; left: 16px; top: 14px; z-index: 1; font-family: ui-monospace,Menlo,monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 999px; }
.tn-design .d-b62856f { color: #5e61f6; }
.tn-design .d-b7621ff { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#0e5f8a 0%,#4baef6 100%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 16px; }
.tn-design .d-b851848 { font-weight: 700; font-size: 18px; color: #634bf6; line-height: 1.1; }
.tn-design .d-b90d4d7 { display: flex; flex-direction: column; }
.tn-design .d-b96ca51 { font-family: ui-monospace,Menlo,monospace; background: #f1f5ff; border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.tn-design .d-b97b2e4 { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-b980173 { display: flex; flex-direction: column; gap: 20px; }
.tn-design .d-ba1007f { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #4b4d55; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid #d9defa; white-space: nowrap; }
.tn-design .d-ba47619 { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; margin-bottom: 28px; }
.tn-design .d-ba8d960 { padding: 2px 18px 18px; display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; }
.tn-design .d-bb83d9b { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; margin-bottom: 0; }
.tn-design .d-be3b592 { color: #3f4250; }
.tn-design .d-bfa7d4e { font-size: 17px; line-height: 1.35; color: #111; text-wrap: pretty; }
.tn-design .d-bfc770e { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; margin-bottom: 12px; }
.tn-design .d-c07f705 { margin: 0; font-size: 20px; line-height: 140%; color: #4b4d55; }
.tn-design .d-c0da4af { margin: 0; font-size: 16px; line-height: 150%; color: #4b4d55; }
.tn-design .d-c0e9957 { display: flex; align-items: center; gap: 10px; }
.tn-design .d-c219857 { border-radius: 18px; background: #fff; border: 1px solid #e6e9f2; }
.tn-design .d-c2ac8a4 { overflow-x: auto; margin-bottom: 40px; }
.tn-design .d-c34b809 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); gap: 12px; margin-bottom: 24px; }
.tn-design .d-c430e32 { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.tn-design .d-c5e78a9 { border: 1px solid #e6e9f2; border-radius: 10px; background: #fff; padding: 8px; font-size: 15px; font-family: ui-monospace,Menlo,monospace; width: 100%; border-color: #d1d5db; text-align: center; }
.tn-design .d-c71f7c1 { font-size: 13px; line-height: 1.45; color: #4b4d55; text-align: center; }
.tn-design .d-c794242 { font-size: 13px; color: #6e7071; }
.tn-design .d-ca77b78 { font-size: 22px; font-weight: 700; line-height: 1.15; color: #111; letter-spacing: -.3px; }
.tn-design .d-cf62ca6 { margin: 0; font-size: clamp(15px,0.6vw + 11px,18px); color: #6e7071; line-height: 1.6; }
.tn-design .d-d078278 { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.tn-design .d-d2fb2bc { width: 7px; height: 7px; border-radius: 50%; background: #634bf6; }
.tn-design .d-d31b49c { font-size: 16px; line-height: 1.25; color: #4b4d55; text-align: left; }
.tn-design .d-d3e1474 { border: 1px solid #e6e9f2; border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.tn-design .d-d6bf705 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: #5e61f6; margin-bottom: 16px; }
.tn-design .d-d6c2021 { padding: 16px; background: #f8f8f8; border-radius: 20px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-d7e3da8 { flex: none; display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg,#634bf6,#4baef6); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 14px 8px 10px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 16px rgba(99,75,246,.22); white-space: nowrap; }
.tn-design .d-d7e3da8:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }
.tn-design .d-d82d1c9 { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-d99c44a { background: #fff; padding: 24px; border-radius: 20px; border: 1px solid #e6e9f2; border-color: #e5e7eb; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-da9c491 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#634bf6 0%,#4baef6 100%); }
.tn-design .d-dad0dfa { font-size: 14.5px; line-height: 1.55; color: #0f6f7c; }
.tn-design .d-dbd02ce { padding: 10px 14px; border-radius: 12px; color: #1d1d3a; }
.tn-design .d-dc7ce7b { margin: 0; font-size: 17px; line-height: 1.65; color: #4b4d55; text-wrap: pretty; }
.tn-design .d-dce0e71 { display: inline-flex; align-items: center; gap: 6px; background: #ece9fe; color: #4b3fd1; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.tn-design .d-dd0e450 { padding-left: 8px; }
.tn-design .d-dd12ae9 { display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid #e6e9f2; border-color: rgba(110,112,113,0.2); border-radius: 22px; }
.tn-design .d-dd27ef8 { color: #0f6f7c; font-weight: 700; }
.tn-design .d-de555b3 { background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.tn-design .d-df186b6 { display: flex; flex-direction: column; gap: 8px; }
.tn-design .d-dfd5a1c { background: #f8f9fb; border-radius: 20px; padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.tn-design .d-e0e0ac1 { padding-left: 20px; }
.tn-design .d-e16da78 { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.55; color: #4b5563; }
.tn-design .d-e21963f { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tn-design .d-e2374fa { border: 1px solid #e6e9f2; border-radius: 22px; overflow: hidden; }
.tn-design .d-e26dcac { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; margin-bottom: 24px; }
.tn-design .d-e378412 { margin: 0 16px 14px; padding-left: 12px; border-left: 3px solid #13a3b6; font-size: 15.5px; line-height: 1.65; color: #1d1d3a; }
.tn-design .d-e484466 { padding: 24px; background: #f1f5ff; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-e679b87 { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; margin-bottom: 12px; }
.tn-design .d-e73c629 { position: relative; color: #fff; font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.3px; text-wrap: balance; }
.tn-design .d-e775474 { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3f4250; }
.tn-design .d-e77ebe6 { display: flex; flex-direction: column; gap: 0; scroll-margin-top: 72px; border: 1px solid #e6e9f2; border-radius: 24px; overflow: hidden; background: #fff; }
.tn-design .d-e7909ca { border-radius: 16px; background: #f6f8fc; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-e81a95a { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #4b3fd1; }
.tn-design .d-e8a669a { width: 100%; aspect-ratio: 16 / 9; display: block; background: #0f1020; object-fit: cover; }
.tn-design .d-e8da2b7 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: #5e61f6; }
.tn-design .d-e9c2e20 { background: linear-gradient(90deg, #634bf6, #4baef6 100%); padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; border-radius: 20px; color: #fff; font-size: 16px; min-width: 150px; }
.tn-design .d-e9ff058 { margin: 0; font-size: clamp(21px,1.8vw,24px); line-height: 1.2; color: #111; margin-bottom: 16px; }
.tn-design .d-ea12f19 { padding: 16px; background: #f8f8f8; border-radius: 10px; }
.tn-design .d-ea76af4 { flex: none; background: #f2f4f7; border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 700; color: #1d1d3a; white-space: nowrap; }
.tn-design .d-eb68bce { margin: 0; font-size: 15.5px; color: #6e7071; }
.tn-design .d-ec608a2 { flex: none; }
.tn-design .d-ed4350a { background: #f1f5ff; padding: 16px; border-radius: 10px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.tn-design .d-f061206 { border-radius: 16px; background: #fff; border: 1px solid #e6e9f2; }
.tn-design .d-f236874 { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 14px; margin-left: 14px; border-left: 2px solid #e3e7f3; }
.tn-design .d-f2bf202 { padding: 16px; background: #f8f8f8; border-radius: 10px; margin-top: 8px; }
.tn-design .d-f4f2c3d { display: flex; align-items: center; gap: 16px; border-radius: 22px; background: #f8f9fb; padding: 20px 22px; }
.tn-design .d-f826bb7 { margin: 0; color: #4b4d55; font-size: 14.5px; line-height: 1.4; }
.tn-design .d-f954144 { margin: 0; color: #4b4d55; line-height: 1.6; }
.tn-design .d-f96d7a0 { border: 1px solid #e6e9f2; border-radius: 20px; overflow-x: auto; }
.tn-design .d-fc42b9b { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg,#1e3a8a 0%,#4b8ef6 100%); display: flex; align-items: flex-end; padding: 18px 20px; }
.tn-design .d-fcabcc2 { display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #f8f8f8; border-radius: 20px; }
.tn-design .d-fe67e3c { margin: 0; font-size: 16px; line-height: 140%; color: #4b4d55; margin-bottom: 24px; }
.tn-design .d-ff96f72 { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tn-design .d-ffa833e { cursor: pointer; padding: 16px 20px; font-size: 16.5px; font-weight: 700; color: #1d1d3a; }

/* Phone compaction. Kept in scripts/toefl_redesign/design_import.py (CSS_TAIL)
 * so a re-import from the design export does not drop it.
 *
 * The export nests three padded boxes inside the page column - example card,
 * white task card, tinted prompt box - and on a phone their 16+24+24+16px of
 * side padding leaves the text about 230px wide, so it wraps every three or
 * four words. The same cards stack full-height margins, which pushes the
 * answer field far below the question it belongs to. These rules only tighten
 * spacing; nothing moves or changes colour.
 *
 * The d-<hash> names come from the declarations themselves, so if the export
 * restyles one of these boxes its rule here stops matching - harmless, but it
 * is why each one is named below.
 */
@media (max-width: 759.98px) {
  /* example card (grey) and the task card (white) inside it */
  .tn-design .d-fcabcc2 {
    padding: 14px;
    gap: 16px;
  }

  .tn-design .d-d99c44a,
  .tn-design .d-e484466 {
    padding: 14px;
  }

  /* the tinted prompt box: scrambled words, notice text */
  .tn-design .d-ed4350a {
    padding: 12px;
    margin-bottom: 12px;
  }

  /* question block above the answer field */
  .tn-design .d-d82d1c9 {
    margin-bottom: 12px;
  }

  /* "Your sentence:" label and its textarea */
  .tn-design .d-b97b2e4 {
    margin-bottom: 10px;
    gap: 6px;
  }

  .tn-design .d-203b64b {
    margin-bottom: 2px;
  }

  .tn-design .d-9f63a0a {
    padding: 12px 14px;
    height: 132px;
  }

  /* multiple-choice list: the rule keeps its left bar, closer to the options */
  .tn-design .d-6754441 {
    padding-left: 10px;
  }

  .tn-design .d-0b857e5 {
    padding: 8px 6px;
    gap: 10px;
  }

  /* image above a reading question, and the gap between questions */
  .tn-design .d-a08763a {
    margin-bottom: 14px;
  }

  .tn-design .d-b980173 {
    gap: 14px;
  }

  .tn-design .d-ac12d08 {
    margin-top: 16px;
    gap: 14px;
  }
}