.ci-aprofile * { box-sizing: border-box; }
.ci-aprofile { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 40px); padding: 20px; width: 100%; }
@media (max-width: 1199.98px) { .ci-aprofile { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-aprofile { padding-left: 20px; padding-right: 20px; } }
/* v5 authors frames (0498): a 1px #d9d9d9 frame inside the 20px pad; the byline row keeps its own 16 (avatar 36 in). */
.ci-aprofile-card { background: #f3f3f3; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 19px; }
.ci-aprofile-top { align-items: center; display: flex; gap: 20px; padding: 16px; }
.ci-aprofile-avatar { background: #d9d9d9; border-radius: 50%; display: flex; flex: none; overflow: hidden; }
.ci-aprofile-photo { display: block; height: 96px; object-fit: cover; width: 96px; }
.ci-aprofile-photo[src=""], .ci-aprofile-photo:not([src]) { opacity: 0; }
.ci-aprofile-body { display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; overflow-wrap: break-word; }
.ci-aprofile-nameblock { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
.ci-aprofile-name { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; }
.ci-aprofile-underline { background: #0c866a; display: block; height: 1.5px; }
/* The socials' own row: under the byline on a desktop, last below it (v5 icon-row, 30px discs 8 apart); a wrapped row
   sits 14 under, so no two 44px-high hit areas share a pixel (PR #590 R1.4). */
.ci-aprofile-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 8px; }
/* NL link/social: a 44px-high hit area (4px across, half the gap), the 16px glyph disc (::after) darkens, a double ring. */
.ci-aprofile-soc { align-items: center; background: #aaa1ff; border-radius: 50%; display: inline-flex; flex: none; height: 30px; justify-content: center; position: relative; width: 30px; }
.ci-aprofile-soc::before { content: ''; inset: -7px -4px; position: absolute; }
.ci-aprofile-soc::after { border-radius: 50%; content: ''; height: 16px; left: 7px; position: absolute; top: 7px; width: 16px; }
.ci-aprofile-soc:hover::after { background: #4955dd; }
.ci-aprofile-soc:active::after { background: #3d31b8; }
.ci-aprofile-soc:focus-visible { box-shadow: 0 0 0 1px #f3f3f3, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-aprofile-soc-img { display: block; height: 16px; object-fit: contain; position: relative; width: 16px; z-index: 1; }
.ci-aprofile-soc-img[src=''], .ci-aprofile-soc-img:not([src]) { display: none; }
.ci-aprofile-role, .ci-aprofile-bio { font-size: 14px; line-height: 20px; margin: -4.73px 0 -5.4px; }
.ci-aprofile-role { color: #545658; }
.ci-aprofile-bio { color: #202224; }
.ci-aprofile-bio > * { margin: 0; }
.ci-aprofile-bio > * + * { margin-top: 15px; }
.ci-aprofile-stats { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A 48px tile: label and count inside the 1px frame, with no category icon. */
.ci-aprofile-stat { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; display: flex; gap: 8px; justify-content: space-between; padding: 11px 19px; }
.ci-aprofile-stat-label { color: #202224; flex: 1; font-size: 16px; line-height: 24px; min-width: 0; overflow-wrap: anywhere; }
.ci-aprofile-stat-count { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; }
/* Under the desktop (authors-tablet and -mobile): the avatar beside the name in two 30/36 lines without a separator,
   role and bio full width, stats in one column, socials last. The body dissolves into the top row's grid. */
@media (max-width: 1199.98px) {
  .ci-aprofile-top { display: grid; gap: 20px; grid-template-columns: 96px minmax(0, 1fr); padding: 0; }
  .ci-aprofile-body { display: contents; }
  .ci-aprofile-avatar { grid-column: 1; grid-row: 1; }
  .ci-aprofile-nameblock { align-self: center; grid-column: 2; grid-row: 1; }
  .ci-aprofile-name { display: flex; flex-direction: column; font-size: 30px; gap: 8px; hyphens: auto; line-height: 36px; margin: 0; }
  .ci-aprofile-firstname, .ci-aprofile-surname { display: block; margin: -6px 0 -9px; }
  html:not([data-editor-canvas]) .ci-aprofile-surname:empty { display: none; }
  .ci-aprofile-underline { display: none; }
  .ci-aprofile-role, .ci-aprofile-bio { grid-column: 1 / -1; line-height: 18px; margin: -3px 0 -5px; }
  .ci-aprofile-stats { grid-template-columns: minmax(0, 1fr); }
  .ci-aprofile-stat-label { font-size: 14px; line-height: 22px; }
  .ci-aprofile-stat-count { font-size: 14px; }
  .ci-aprofile-socials { order: 1; }
}
.ci-text * { box-sizing: border-box; }
.ci-text { box-sizing: border-box; color: #202224; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px 0; }
@media (max-width: 1199.98px) { .ci-text { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-text { padding-left: 20px; padding-right: 20px; } }
.ci-text p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
/* The body itself, for a value that arrives as bare text (a plain TEXT field
   mapped onto this rich leaf): the same type as a paragraph, not the browser's. */
.ci-text-body { font-size: 16px; line-height: 1.5; }
.ci-text-body > :first-child { margin-top: 0; }
.ci-text-body > :last-child { margin-bottom: 0; }
.ci-text a { color: #5749dd; text-decoration: none; }
.ci-text a:hover { text-decoration: underline; }
.ci-text ul, .ci-text ol { margin: 0 0 20px; padding-left: 24px; }
.ci-text li { margin-bottom: 6px; }
.ci-text strong { font-weight: 700; }
/* Rich-text subheadings (e.g. the about-page mission copy). */
.ci-text h3 { font-size: 22px; letter-spacing: -.02em; margin: 26px 0 14px; }
.ci-text h4 { font-size: 18px; margin: 22px 0 12px; }
/* link/inline Focus: the 2px ring 3px out, r8 round the ring. */
.ci-text a:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
/* text-row: the decor/dot-6 at the column edge on the first line's caps, the words 18px in, rows 44 apart. The
   native marker stays, unpainted, so WebKit keeps the list a list (the callout's way). */
.ci-text-body ul { padding-left: 18px; }
.ci-text-body ul > li { position: relative; }
.ci-text-body ul > li::marker { color: transparent; }
.ci-text-body ul > li::before { -webkit-print-color-adjust: exact; background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ''; height: 6px; left: -18px; position: absolute; print-color-adjust: exact; top: 8px; width: 6px; }
/* Forced colours repaint the marker whatever its colour: there it is the bullet and the dot goes. */
@media (forced-colors: active) { .ci-text-body ul > li::before { content: none; } }
.ci-text-body li { margin-bottom: 20px; }
.ci-text-body li:last-child { margin-bottom: 0; }
/* Rich-text subheadings: v5's Section Title, 700 24/28. */
.ci-text-body h3 { font-size: 24px; letter-spacing: normal; line-height: 28px; }
/* The format bar's Quote is the NL content/quote: the inside frame takes no room, both
   21px marks sit 20px in from the top corners, the closing one turned round. */
.ci-text blockquote { font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; margin: 0 0 20px; overflow-wrap: anywhere; }
/* One frame: a quote nested in it (imported, pasted) reads as quote text in its column. */
.ci-text-body > blockquote { background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; padding: 20px 49px; position: relative; }
.ci-text-body > blockquote::before, .ci-text-body > blockquote::after { -webkit-print-color-adjust: exact; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20d%3D%22M11.812%2010.4995L15.7495%2010.4995C16.4714%2010.4995%2017.062%2011.0901%2017.062%2011.812L17.062%2015.7495C17.062%2016.4714%2016.4714%2017.062%2015.7495%2017.062L11.812%2017.062C11.0901%2017.062%2010.4995%2016.4714%2010.4995%2015.7495L10.4995%2011.812C10.4995%2011.0901%2011.0901%2010.4995%2011.812%2010.4995ZM3.937%2010.4995L7.8745%2010.4995C8.5964%2010.4995%209.187%2011.0901%209.187%2011.812L9.187%2015.7495C9.187%2016.4714%208.5964%2017.062%207.8745%2017.062L3.937%2017.062C3.2151%2017.062%202.6245%2016.4714%202.6245%2015.7495L2.6245%2011.812C2.6245%2011.0901%203.2151%2010.4995%203.937%2010.4995Z%20M13.1256%2010.4995L13.1256%2013.1245C13.1256%2013.8494%2012.538%2014.437%2011.8131%2014.437C11.0882%2014.437%2010.5006%2013.8494%2010.5006%2013.1245L10.5006%2010.4995C10.5006%208.2703%2011.2395%205.9359%2012.8539%204.3215C13.3664%203.809%2014.1973%203.809%2014.7098%204.3215C15.2224%204.8341%2015.2224%205.6649%2014.7098%206.1775C13.6992%207.1882%2013.1256%208.7913%2013.1256%2010.4995ZM5.2506%2010.4995L5.2506%2013.1245C5.2506%2013.8494%204.663%2014.437%203.9381%2014.437C3.2132%2014.437%202.6256%2013.8494%202.6256%2013.1245L2.6256%2010.4995C2.6256%208.2703%203.3645%205.9359%204.9789%204.3215C5.4914%203.809%206.3223%203.809%206.8348%204.3215C7.3474%204.8341%207.3474%205.6649%206.8348%206.1775C5.8242%207.1882%205.2506%208.7913%205.2506%2010.4995Z%22%20fill%3D%22%230C866A%22%2F%3E%3C%2Fsvg%3E") center / 21px 21px no-repeat; content: ''; height: 21px; position: absolute; print-color-adjust: exact; top: 20px; width: 21px; }
.ci-text-body > blockquote::before { left: 20px; }
.ci-text-body > blockquote::after { right: 20px; transform: rotate(180deg); }
/* Its blocks keep the 20px rhythm; the last one, at any depth, leaves the padding alone. */
.ci-text blockquote > * { margin: 0 0 20px; }
.ci-text blockquote :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: an inset outline keeps the frame in place. */
@media print, (forced-colors: active) { .ci-text-body > blockquote { box-shadow: none; outline: 1px solid #0c866a; outline-offset: -1px; } }
.ci-gpq * { box-sizing: border-box; }
.ci-gpq { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-gpq { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gpq { padding-left: 20px; padding-right: 20px; } }
/* The frame is an inset shadow: Figma's inside stroke takes no room (COMPONENT_GENERATION.md). */
.ci-gpq-panel { align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; display: flex; gap: 8px; padding: 20px; }
.ci-gpq-mark { display: block; flex: none; height: 21px; object-fit: contain; width: 21px; }
/* One uploaded glyph serves both ends: the closing mark IS the opening one
   turned around, top-aligned like it, exactly as content/quote draws it. */
.ci-gpq-mark-close { transform: rotate(180deg); }
.ci-gpq-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
/* Every rich-text block, nested ones too (p in a blockquote or li), keeps the 20px rhythm and the marks' top line. */
.ci-gpq-text > * { margin: 0 0 20px; }
.ci-gpq-text p { margin: 0 0 20px; }
.ci-gpq-text :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: a real border (inside the same 20px) keeps the frame. */
@media print, (forced-colors: active) { .ci-gpq-panel { border: 1px solid #0c866a; box-shadow: none; padding: 19px; } }
/* v5 tablet and phone frames: 500 italic 14/24 (DREAM-831). */
@media (max-width: 1199.98px) { .ci-gpq-text { font-size: 14px; line-height: 24px; } }
.ci-gpq a[href] { color: #5749dd; text-decoration: none; }
.ci-gpq a[href]:hover { text-decoration: underline; }
.ci-gpq a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-news-carousel * { box-sizing: border-box; }
.ci-news-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-news-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-news-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-news-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-news-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-news-carousel-track::-webkit-scrollbar { display: none; }
.ci-news-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-news-carousel-track.is-dragging a { pointer-events: none; }
.ci-nslide { flex: 0 0 285px; list-style: none; min-width: 0; scroll-snap-align: start; }
.ci-ncard { border: 1px solid #d9d9d9; border-radius: 12px; color: #202224; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 11px; position: relative; }
.ci-ncard-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 230px; overflow: hidden; position: relative; width: 100%; }
.ci-ncard-thumb img, .ci-ncard-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-ncard-img { object-fit: cover; }
.ci-ncard-img[src=""], .ci-ncard-img:not([src]) { opacity: 0; }
/* v4 (0459): the 84px title box is the only link; the focus ring goes round the card (the Focus variant), 3-5px
   out of its 1px border, covering nothing. A card with no destination (link unwrapped, or href="") is Disabled. */
.ci-ncard-headline { display: block; font-size: 24px; font-weight: 700; height: 84px; line-height: 28px; margin: 0; overflow: hidden; }
.ci-ncard-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; height: 100%; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-ncard-link:focus-visible { outline: none; }
.ci-ncard-link:focus-visible::after { border-radius: 8px; content: ''; inset: -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-ncard-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-ncard-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-ncard:not(:has(.ci-ncard-link[href]:not([href=""]))) { opacity: .4; }
.ci-ncard-headline:not(:has(.ci-ncard-link)) { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; }
.ci-ncard-excerpt { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 3; line-clamp: 3; line-height: 20px; margin: 0; overflow: hidden; }
.ci-ncard-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ci-ncard-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-ncard-date, .ci-ncard-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-ncard-date { flex: none; }
.ci-ncard-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-ncard-sep { background: #202224; flex: none; height: 12px; width: 1px; }
/* Publish drops an empty leaf (removeWhenEmpty); what it leaves alone goes with it. */
.ci-ncard-sep:first-child, .ci-ncard-sep:last-child { display: none; }
.ci-ncard-meta:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)) { display: none; }
.ci-ncard-author { align-items: center; border-top: 1px solid #d9d9d9; display: flex; gap: 8px; padding-top: 12px; }
.ci-ncard-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-ncard-avatar[src=""], .ci-ncard-avatar:not([src]) { display: none; }
.ci-ncard-author picture { display: contents; }
.ci-ncard-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
.ci-ncard-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ncard-arole { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One class per :has() (COMPONENT_GENERATION.md): the canvas splits a list into bare rules. */
.ci-ncard-aname:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)) { display: none; }
.ci-ncard-author:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
.ci-ncard-foot:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)):not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
/* A drag is no press: one class more than the card's :active rule (0389's tie). */
.ci-news-carousel-track.is-dragging .ci-ncard-headline a { color: #202224; text-decoration: none; }
.ci-news-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-news-carousel-next { right: 12px; }
.ci-news-carousel-prev { left: 12px; }
.ci-news-carousel-prev .ci-news-carousel-icon { transform: scaleX(-1); }
.ci-news-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-news-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-news-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-news-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-news-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-news-carousel-btn:focus-visible { outline: none; }
.ci-news-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-news-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-news-carousel-btn { display: none; }
}
/* v5 (DREAM-816): four 285 slides fill the desktop row; 328 / 306 below (NEWS_CARD_SLIDE), at most 88% so the next peeks. */
@media (max-width: 1199.98px) { .ci-nslide { flex-basis: min(328px, 88%); } }
@media (max-width: 560px) { .ci-nslide { flex-basis: min(306px, 88%); } }
.ci-cc * { box-sizing: border-box; }
.ci-cc { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-cc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-cc { padding-left: 20px; padding-right: 20px; } }

.ci-cc-viewport { container: cc / inline-size; position: relative; }
/* The 5px padding keeps the card's focus ring inside the scroller's clip; the
   -5px margin keeps the cards on the content edge (as the guide carousel does). */
.ci-cc-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-left: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-cc-track::-webkit-scrollbar { display: none; }
.ci-cc-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-cc-track.is-dragging a { pointer-events: none; }
/* min-width 0: the slide takes its peek width under 375 rather than its card's content width (DREAM-729). */
.ci-cc-slide { display: flex; flex: 0 0 350px; list-style: none; max-width: 100%; min-width: 0; scroll-snap-align: start; }
/* v5 Mobile card/casino: pad 16 16 28 with the 1px border inside, 28 under the button with no toggle (DREAM-811). */
.ci-cc-card { background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; padding: 15px 15px 27px; position: relative; width: 100%; }

/* The v5 Mobile card/casino: a 72 disc and 24 crown, the title column top-aligned beside it (change doc item 6). */
.ci-cc-head { align-items: flex-start; display: flex; gap: 16px; }
.ci-cc-logo-wrap { display: block; flex: none; height: 72px; position: relative; width: 72px; }
.ci-cc-logo-disc { align-items: center; background: #202224; border-radius: 50%; display: flex; height: 72px; justify-content: center; width: 72px; }
.ci-cc-logo-img { display: block; height: 60px; object-fit: contain; width: 60px; }
.ci-cc-logo-badge { display: block; height: 24px; left: 52.5px; position: absolute; top: 52.5px; width: 24px; }
.ci-cc-logo-badge-img { display: block; height: 100%; object-fit: contain; width: 100%; }
.ci-cc-logo-badge-img[src=''], .ci-cc-logo-badge-img:not([src]) { display: none; }
/* The crown marks the row's first two cards only (v5); a card alone is no row. */
.ci-cc-slide:nth-child(n+3) .ci-cc-logo-badge, .ci-cc-slide:only-child .ci-cc-logo-badge { display: none; }
.ci-cc-title { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; }
.ci-cc-name { display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.984375px 0 -6.015625px; }
.ci-cc-name-link { color: #0c866a; text-decoration: none; }
.ci-cc-name-link::after { border-radius: 12px; content: ''; inset: 0; position: absolute; z-index: 1; }
/* Pointer states only: a touch screen would keep the last tapped card hovered. */
@media (hover: hover) {
  .ci-cc-card:hover .ci-cc-name-link { text-decoration: underline; }
  .ci-cc-track:not(.is-dragging) .ci-cc-name-link:active { color: #0d9070; text-decoration: underline; }
}
.ci-cc-name-link:focus-visible { outline: none; }
/* The ring 3-5px outside the card's 1px border (DREAM-689): -6 off the padding box. */
.ci-cc-name-link:focus-visible::after { border-radius: 10px; inset: -6px; outline: 2px solid #5749dd; outline-offset: -2px; }
/* Three lines at most (v5); with no bonus the rating keeps a one-line bonus's place (change doc item 6). */
.ci-cc-bonus { -webkit-box-orient: vertical; display: -webkit-box; font-size: 20px; font-weight: 700; hyphens: auto; -webkit-line-clamp: 3; line-clamp: 3; line-height: 28px; margin: -6.484375px 0 -7.515625px; overflow: hidden; overflow-wrap: anywhere; }
.ci-cc-title:not(:has(.ci-cc-bonus)) .ci-cc-rating { margin-top: 22px; }
/* The score's middle on the stars' middle (the user, 2026-10-07; the export top-aligns the row). */
.ci-cc-rating { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ci-cc-score { align-items: center; color: #202224; display: flex; font-size: 14px; font-weight: 400; gap: 4px; line-height: 20px; }
/* The NL mark art is a 24px square with the glyph 20px wide; the margins trim
   that padding so the glyph lands at the card's 14.45px. */
.ci-cc-score-mark-img { display: block; flex: none; height: 17.34px; margin: -3.545px -1.445px; object-fit: contain; width: 17.34px; }
/* The 14/20 score keeps text-box: capTrimMargin lands it 1px high (BACKLOG, 0385). */
.ci-cc-score-num { text-box: trim-both cap alphabetic; }
.ci-cc-stars { display: flex; height: 15px; }
.ci-cc-star { color: #ffb310; display: block; flex: none; height: 16px; margin-top: -.5px; width: 16px; }
.ci-cc-star-line { fill: #d9d9d9; }
.ci-cc-star-fill { display: none; fill: #ffb310; }
.ci-cc-star.on .ci-cc-star-fill, .ci-cc-star.mid .ci-cc-star-fill, .ci-cc-star.low .ci-cc-star-fill { display: inline; }
.ci-cc-star.on .ci-cc-star-line, .ci-cc-star.mid .ci-cc-star-line, .ci-cc-star.low .ci-cc-star-line { display: none; }


/* The offer sits at the foot, so it lines up across slides of unequal height; no Review since v5 (item 6). */
.ci-cc-offer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
/* The plate's own width picks the Size; its height is the label's (and the button's) margin box plus the border. */
.ci-cc-code { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; box-sizing: border-box; container-type: inline-size; cursor: pointer; display: flex; gap: 8px; min-width: 0; position: relative; z-index: 2; }
.ci-cc-code-label, .ci-cc-code-label-sm { color: #545658; flex: 0 1000 auto; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; margin: 14px 0 12px 16px; }
/* Size=Sm says "Code:" (v4) in its own word, shown by the Size's query; an empty one is dropped, leaving "Bonuscode:". */
.ci-cc-code-label-sm { display: none; }
.ci-cc-code-value { color: #202224; flex: 0 1 auto; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 24px; margin: -5px 0 -6px; margin-left: auto; }
/* button/copy: 12px, its padding the 44px hit area (8 toward the code); the ring, 3px out, is the plate's. */
.ci-cc-code-copy { background: none; border: 0; box-sizing: content-box; cursor: pointer; display: block; flex: none; height: 12px; width: 12px; margin: 1px 0 1px -8px; padding: 16px 16px 16px 8px; }
.ci-cc-code-copy:focus-visible { outline: none; }
.ci-cc-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-cc-code-copy-img { display: block; height: 13.09px; width: 12px; }
/* Hover and press skip a copied plate, so Copied needs no rules to win them back. */
@media (hover: hover) {
  .ci-cc-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
}
.ci-cc-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-cc-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 18px; line-height: 24px; }
.ci-cc-code[data-copied] .ci-cc-code-copy-img:not(.gjs-plh-image) { filter: brightness(0) saturate(100%) invert(33%) sepia(99.7%) saturate(376%) hue-rotate(115.9deg) brightness(98.3%) contrast(93.9%); }
@container (max-width: 230px) {
  .ci-cc-code-label, .ci-cc-code-label-sm { font-size: 12px; line-height: 20px; margin: 9px 0 9px 12px; }
  .ci-cc-code .ci-cc-code-label-sm { display: block; }
  .ci-cc-code-label-sm + .ci-cc-code-label { display: none; }
  .ci-cc-code-value { font-size: 16px; line-height: 22px; margin: -5px 0 -6px; margin-left: auto; }
  .ci-cc-code-copy { margin: -3px 0 -3px -8px; padding: 16px 12px 16px 8px; }
  .ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label=''])::after { font-size: 16px; line-height: 22px; }
}
.ci-cc-visit { align-items: center; align-self: stretch; background: #0c866a; border-radius: 4px; color: #fff; display: inline-flex; font-size: 18px; font-weight: 700; gap: 4px; justify-content: center; line-height: 24px; min-height: 48px; padding: 12px 24px; position: relative; text-align: center; text-decoration: none; z-index: 2; }
@media (hover: hover) { .ci-cc-visit:hover { background: #0d9070; } }
.ci-cc-visit:active { background: #1b5547; }
.ci-cc-visit:focus-visible { box-shadow: 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-cc-visit-cta { min-width: 0; overflow-wrap: anywhere; margin: -5.234375px 0 -5.765625px; }
.ci-cc-visit-icon { display: block; flex: none; height: 12px; width: 12px; }

.ci-cc-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-cc-next { right: 12px; }
.ci-cc-prev { left: 12px; }
.ci-cc-prev .ci-cc-icon { transform: scaleX(-1); }
.ci-cc-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-cc-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-cc-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-cc-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-cc-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-cc-btn:focus-visible { outline: none; }
.ci-cc-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cc-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-cc-btn { display: none; }
}
/* A desktop row holds three cards exactly (v5 authors-desktop: 386.7 at a 406.7 step), the arrow over the third; by the
   row's own width, so a narrower column keeps the scrolling 350s (R1.3), and before the peek, which keeps tablets (R2.1). */
@container cc (min-width: 1090px) { .ci-cc-slide { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 1180px) { .ci-cc-slide { flex-basis: min(350px, 100% - 44px); } }
.ci-guides-carousel * { box-sizing: border-box; }
.ci-guides-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-guides-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-guides-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-guides-carousel-viewport { position: relative; }
.ci-guides-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-guides-carousel-track::-webkit-scrollbar { display: none; }
.ci-guides-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-guides-carousel-track.is-dragging a { pointer-events: none; }
/* v5 (change document request 3): four 285px cards across the 1200 column (4 x 285 + 3 x 20). */
.ci-gslide { flex: 0 0 285px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 328px cards, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-gslide { flex-basis: 328px; } }
.ci-guide-card { background: #1c1c1c; border-radius: 12px; display: flex; flex-direction: column; height: 410px; justify-content: flex-end; position: relative; }
.ci-guide-thumb { background: linear-gradient(160deg, #2b2b33, #17171c) top / 100% 77.28% no-repeat; border-radius: 12px; display: block; inset: 0; overflow: hidden; position: absolute; }
.ci-guide-image { display: block; height: 77.28%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.ci-guide-image[src=""], .ci-guide-image:not([src]) { opacity: 0; }
/* Stacked over the photo by z-index, not position: the card, not the body, places the title link's ring (0459). */
.ci-guide-body { background: linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c 75.49px); border-radius: 0 0 12px 12px; color: #fff; display: flex; flex-direction: column; gap: 12px; margin-top: -45.47px; padding: 61.47px 16px 16px; z-index: 0; }
.ci-guide-title { display: block; font-size: 24px; font-weight: 700; line-height: 28px; margin: 0; z-index: 1; }
/* Only the title is the link, out of flow; its ring goes round the card (Focus). v5 hover and press draw a 2px bar,
   the link's own background, the content's width and 21px under the title's box (@16,265, DREAM-812): its foot pad. */
.ci-guide-link { color: inherit; display: block; margin: -9px 0 -23px; padding: 9px 0 23px; text-decoration: none; }
.ci-guide-link:focus-visible { outline: none; }
.ci-guide-link:focus-visible::after { border-radius: 5px; content: ''; inset: 0; outline: 2px solid #5749dd; outline-offset: 3px; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-guide-link:hover { background: linear-gradient(#0c866a, #0c866a) left bottom / 100% 2px no-repeat; } }
.ci-guide-link:active { background: linear-gradient(#1b5547, #1b5547) left bottom / 100% 2px no-repeat; }
@media (forced-colors: active) { .ci-guide-link:hover .ci-guide-title-text, .ci-guide-link:active .ci-guide-title-text { text-decoration: underline; } }
.ci-guide-card:not(:has(.ci-guide-link[href]:not([href=""]))) { opacity: .4; }
/* Every row after the title stacks over its link's foot pad (z-index 2, flex items): the link's hit area ends at the
   next row, 44px at least (49 with no excerpt), and the bar still shows through (DREAM-812). */
.ci-guide-text { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 4; line-clamp: 4; line-height: 20px; margin: -4.73px 0 -5.4px; overflow: hidden; z-index: 2; }
.ci-guide-text:empty { display: none; }
.ci-guide-meta { align-items: center; display: flex; margin: 0; z-index: 2; }
.ci-guide-byline { align-items: center; display: flex; gap: 12px; max-width: 100%; min-width: 0; }
.ci-guide-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-guide-avatar[src=""], .ci-guide-avatar:not([src]) { display: none; }
.ci-guide-author { font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No author (DREAM-708): both name leaves drop, and the byline row with them. */
.ci-guide-meta:not(:has(.ci-guide-author-first)):not(:has(.ci-guide-author-last)) { display: none; }
/* v5 footer row: date | topic on the left, Lees verder (where the block has it) on the right. */
.ci-guide-foot { align-items: center; display: flex; gap: 12px; min-height: 12px; z-index: 2; }
.ci-guide-facts { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-guide-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-guide-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-guide-sep { background: #fff; flex: none; height: 12px; width: 1px; }
.ci-guide-sep:first-child, .ci-guide-sep:last-child { display: none; }
.ci-guide-facts:has(> .ci-guide-sep:only-child) { display: none; }
.ci-guide-facts { min-width: 0; }
@media (forced-colors: active) { .ci-guide-sep { background: CanvasText; } }
.ci-guide-foot:not(:has(.ci-guide-date)):not(:has(.ci-guide-category)):not(:has(.ci-guide-more)) { display: none; }
/* The row carries the link's look, so an unwrapped Lees verder (no URL, 0459) keeps it in the Disabled card. */
.ci-guide-more { color: #0c866a; display: flex; flex: none; font-size: 16px; font-weight: 700; gap: 8px; height: 11px; line-height: 22px; margin-left: auto; }
.ci-guide-more-link { align-items: center; border-radius: 5px; color: inherit; display: flex; gap: 8px; position: relative; text-decoration: none; }
.ci-guide-more-link::before { content: ''; inset: calc(50% - 22px) 0; position: absolute; }
.ci-guide-more-link:hover { color: #0d9070; }
.ci-guide-more-link:active { color: #1b5547; }
.ci-guide-more-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-guide-more-label { text-box: trim-both cap alphabetic; white-space: nowrap; }
.ci-guide-more-icon { display: block; flex: none; height: 12px; width: 12px; }
/* v5 tablet and phone frames (DREAM-830): the card keeps its box and draws smaller type, its trims recomputed. */
@media (max-width: 1199.98px) {
  .ci-guide-title { font-size: 22px; }
  .ci-guide-text { line-height: 18px; margin: -3.734375px 0 -4.265625px; }
  .ci-guide-author { font-size: 14px; margin: -5.734375px 0 -6.265625px; }
  .ci-guide-date, .ci-guide-category { line-height: 22px; margin: -7px 0 -7px; }
  .ci-guide-more { font-size: 14px; height: 10px; }
}
/* A drag is no press: the title it started on keeps its rest look (as the news and author carousels). */
.ci-guides-carousel-track.is-dragging .ci-guide-link { background: none; }
.ci-guides-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-guides-carousel-next { right: 12px; }
.ci-guides-carousel-prev { left: 12px; }
.ci-guides-carousel-prev .ci-guides-carousel-icon { transform: scaleX(-1); }
.ci-guides-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-guides-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-guides-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-guides-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-guides-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-guides-carousel-btn:focus-visible { outline: none; }
.ci-guides-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-guides-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-guides-carousel-btn { display: none; }
}
/* Phones: v5's 306px card, one size on every page (DREAM-830), the next one's 24px always in view. */
@media (max-width: 560px) { .ci-gslide { flex-basis: min(306px, 100% - 44px); } }
.ci-plist * { box-sizing: border-box; }
.ci-plist { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 40px); padding: 20px; width: 100%; }
@media (max-width: 1199.98px) { .ci-plist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-plist { padding-left: 20px; padding-right: 20px; } }
.ci-plist-title { color: #202224; font-size: 14px; font-weight: 700; line-height: 22px; margin: 0 0 12px; }
/* One column at every width (v5 link-list, 0498): link/quick rows 12 apart, the item's 6px each side. */
.ci-plist-list { list-style: none; margin: 0; padding: 0; }
.ci-plist-item { padding: 6px 0; }
.ci-plist-item:empty { display: none; }
.ci-plist-link { border-radius: 5px; color: #0c866a; display: inline-block; font-size: 16px; font-weight: 400; line-height: 24px; max-width: 100%; overflow-wrap: anywhere; padding-left: 20px; position: relative; text-decoration: none; vertical-align: top; }
.ci-plist-link::before { background-color: #0c866a; content: ''; height: 12px; left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 12px 12px no-repeat; position: absolute; top: 6px; width: 12px; }
html:not([data-editor-canvas]) .ci-plist-link::after { content: ''; inset: -10px 0; position: absolute; }
@media (hover: hover) { .ci-plist-link:hover { color: #000; } }
.ci-plist-link:active { color: #0c866a; }
.ci-plist-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"] { color: #202224; cursor: default; font-weight: 700; padding-left: 14px; }
html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"]::before { border-radius: 2px; height: 16px; -webkit-mask: none; mask: none; top: 4px; width: 3px; }
@media (forced-colors: active) { .ci-plist-link::before { background-color: LinkText; forced-color-adjust: none; } html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"]::before { background-color: CanvasText; } }
/* Raw list mode: imported items in the same one column. The render stamps the picked style as data-marker (never on
   the fixed-slot ul, whose links carry link/quick's chevron) and this CSS decides each style's look. */
.ci-plist-body > ul[data-marker] { list-style: none; margin: 0; padding: 0; }
.ci-plist-body > ol[data-marker] { list-style: decimal inside; margin: 0; padding: 0; }
.ci-plist-body > ul[data-marker] > li, .ci-plist-body > ol[data-marker] > li { color: #202224; font-size: 16px; line-height: 24px; padding: 6px 0; }
/* The imported bullet keeps the decor/dot-6 (0475), centred on the first 24px line: its bottom 2px over the baseline. */
.ci-plist-body > ul[data-marker="bullet"] > li::before { background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-right: 8px; vertical-align: 2px; width: 6px; }
.ci-plist-body li p { display: inline; margin: 0; }
@media (forced-colors: active) { .ci-plist-body > ul[data-marker="bullet"] > li::before { background: CanvasText; forced-color-adjust: none; } }
#iwl2pno{fill:currentColor;stroke:none;clip-path:inset(0 10% 0 0);}
#imzvuhk{fill:currentColor;stroke:none;clip-path:inset(0 70% 0 0);}
#ik218wg{fill:currentColor;stroke:none;clip-path:inset(0 10% 0 0);}
#irwtzzu{fill:currentColor;stroke:none;clip-path:inset(0 50% 0 0);}
#i73pihl{fill:currentColor;stroke:none;clip-path:inset(0 90% 0 0);}
#i28q88g{fill:currentColor;stroke:none;clip-path:inset(0 90% 0 0);}
#i5nhshn{fill:currentColor;stroke:none;clip-path:inset(0 30% 0 0);}