.ci-game-hero * { box-sizing: border-box; }
.ci-game-hero { box-sizing: border-box; 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-game-hero { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-game-hero { padding-left: 20px; padding-right: 20px; } }
.ci-game-hero-banner { align-items: center; aspect-ratio: 1100 / 635; background: linear-gradient(135deg, #2b0e4d, #1c1b74); border-radius: 15px; display: flex; justify-content: center; overflow: hidden; position: relative; text-align: center; }
/* v5 slot-review-desktop draws the Image Container 1200x635; tablet and phone keep 1100:635 (DREAM-827). */
@media (min-width: 1200px) { .ci-game-hero-banner { aspect-ratio: 1200 / 635; } }
.ci-game-hero-banner::before { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background: rgba(47, 47, 47, .6); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.ci-game-hero-img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.ci-game-hero-overlay { padding: 32px; position: relative; z-index: 2; }
/* NL button/tertiary, v5 (0475): the shape in the flow 12px before the label, the pair centred in the button. */
.ci-game-hero-btn { -webkit-appearance: none; align-items: center; appearance: none; background: #0c866a; border: 0; border-radius: 12px; color: #fff; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 32px; font-weight: 700; gap: 12px; justify-content: center; line-height: 36px; margin: 0; min-height: 95px; min-width: 450px; padding: 0 24px; position: relative; }
@media (hover: hover) { .ci-game-hero-btn:hover { background: #0d9070; } }
.ci-game-hero-btn:active { background: #1b5547; }
/* Focus: a white ring 1px out, a #5749dd one 5px out, the backdrop between them; borders,
   not outlines, because Chromium thins a rounded outline's corners. */
.ci-game-hero-btn:focus-visible { outline: none; }
.ci-game-hero-btn:focus-visible::before { border: 2px solid #fff; border-radius: 15px; box-sizing: border-box; content: ''; inset: -3px; pointer-events: none; position: absolute; }
.ci-game-hero-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 19px; box-sizing: border-box; content: ''; inset: -7px; pointer-events: none; position: absolute; }
.ci-game-hero-btn-img { flex: none; height: 54.4px; object-fit: contain; width: 54.4px; }
/* A raster icon is published inside <picture>: the img stays the flex item (PR #574 R1.3). */
.ci-game-hero-btn picture { display: contents; }
/* Preview shows the canvas render, which keeps a blank icon publish drops (removeWhenEmpty): hide it there (R2.4). */
html[data-editor-preview] .ci-game-hero-btn-img:is([src=''], :not([src]), .gjs-plh-image) { display: none; }
/* heading/h1-trim: the cap-to-baseline box is what the button centres. */
.ci-game-hero-btn-label { margin: -5px 0 -8px; }
.ci-game-hero-close { display: none; }
/* No demo to play: the render's own attributes hide the button before (or without) the script.
   Not in the editor canvas (the script marks it), where the label and icon must stay clickable. */
.ci-game-hero-banner.is-unplayable .ci-game-hero-btn, html:not([data-ci-canvas]) .ci-game-hero-banner[data-game-id=""] .ci-game-hero-btn, html:not([data-ci-canvas]) .ci-game-hero-banner:not([data-game-id]) .ci-game-hero-btn, html:not([data-ci-canvas]) .ci-game-hero-banner[data-sl-token=""] .ci-game-hero-btn, html:not([data-ci-canvas]) .ci-game-hero-banner:not([data-sl-token]) .ci-game-hero-btn { display: none; }
.ci-game-hero-banner.is-playing::before, .ci-game-hero-banner.is-playing > :not(.ci-game-hero-iframe):not(.ci-game-hero-close) { display: none; }
.ci-game-hero-iframe { border: 0; display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
/* NL button/close: 44, the 20px #545658 close glyph, no halo; hover casts the 0 4px 12px 10% shadow, pressed none. */
.ci-game-hero-banner.is-playing .ci-game-hero-close { align-items: center; background: none; border: 0; cursor: pointer; display: flex; height: 44px; justify-content: center; padding: 0; position: absolute; right: 13px; top: 13px; width: 44px; z-index: 3; }
.ci-game-hero-close::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23545658' d='M13.6724 1.22781C13.9761 0.924064 14.4684 0.924064 14.7722 1.22781C15.0759 1.53155 15.0759 2.0239 14.7722 2.32764L9.09984 8L14.7722 13.6724C15.0759 13.9761 15.0759 14.4684 14.7722 14.7722C14.4684 15.0759 13.9761 15.0759 13.6724 14.7722L8 9.09984L2.32764 14.7722C2.0239 15.0759 1.53155 15.0759 1.22781 14.7722C0.924064 14.4684 0.924064 13.9761 1.22781 13.6724L6.90016 8L1.22781 2.32764C0.924064 2.0239 0.924064 1.53155 1.22781 1.22781C1.53155 0.924064 2.0239 0.924064 2.32764 1.22781L8 6.90016L13.6724 1.22781Z'/%3E%3C/svg%3E"); content: ''; height: 20px; width: 20px; }
@media (hover: hover) { .ci-game-hero-close:hover::before { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .1)); } }
.ci-game-hero-close:active::before { filter: none; }
.ci-game-hero-close:focus-visible { outline: none; }
.ci-game-hero-close:focus-visible::after { border: 2px solid #5749dd; border-radius: 14px; box-sizing: border-box; content: ''; inset: -5px; pointer-events: none; position: absolute; }
/* Phones and tablets play full screen: the banner becomes a fixed overlay over
   the site chrome (the mobile bar is 60), and the page behind it stays put. */
@media (max-width: 1024px), (pointer: coarse) {
  .ci-game-hero-banner.is-playing { aspect-ratio: auto; background: #000; border-radius: 0; inset: 0; position: fixed; z-index: 100; }
  html:has(.ci-game-hero-banner.is-playing), body:has(.ci-game-hero-banner.is-playing) { overflow: hidden; overscroll-behavior: none; }
}
/* Phones keep the compact button, shape and label centred together: the NL one size needs ~311px, a 320 banner leaves 216 (DREAM-760). */
@media (max-width: 560px) { .ci-game-hero-btn { font-size: 16px; gap: 4px; line-height: 22px; min-height: 50px; min-width: 200px; padding: 0 16px; } .ci-game-hero-btn-img { height: 20px; width: 20px; } .ci-game-hero-btn-label { margin: 0; } }
.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-gtable * { box-sizing: border-box; }
.ci-gtable { 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-gtable { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gtable { padding-left: 20px; padding-right: 20px; } }
.ci-gtable-body { container-type: inline-size; }
.ci-gtable table { border-collapse: collapse; display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
.ci-gtable thead, .ci-gtable tbody { display: contents; }
.ci-gtable tr { align-items: center; background: #f3f2ff; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 8px; grid-column: span 2; min-width: 0; padding: 8px; }
.ci-gtable th { color: #202224; flex: 0 0 132px; font-size: 14px; font-weight: 400; line-height: 22px; overflow-wrap: anywhere; padding: 0; text-align: left; }
.ci-gtable td { align-items: center; background: #fff; border-radius: 4px; color: #202224; display: flex; flex: 1 1 0; flex-wrap: wrap; font-size: 14px; gap: 8px; line-height: 22px; min-height: 34px; min-width: min(120px, 100%); overflow-wrap: anywhere; padding: 6px 8px; text-align: left; }
.ci-gtable th > p { margin: 0; }
.ci-gtable td > p { flex: 1 0 100%; margin: 0; }
.ci-gtable tr:has(> *:nth-child(3)) { grid-column: 1 / -1; }
.ci-gtable tr:has(> *:nth-child(3)) th { flex: 1 1 0; }
.ci-gtable.ci-itable-cols-1 table { grid-template-columns: minmax(0, 1fr); }
.ci-gtable.ci-itable-cols-1 tr { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .ci-gtable:not(.ci-itable-cols-1) table:not(:has(tr > :nth-child(3))) tr:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .ci-gtable:not(.ci-itable-cols-1) table:not(:has(tr > :nth-child(3))) tr:nth-last-child(2):nth-child(3n+1), .ci-gtable:not(.ci-itable-cols-1) table:not(:has(tr > :nth-child(3))) tr:last-child:nth-child(3n+2) { grid-column: span 3; }
}
@media (min-width: 561px) and (max-width: 1199.98px) {
  .ci-gtable table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-gtable tr { grid-column: auto; }
  .ci-gtable tr:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Narrow two-column placements use v6 Compact Small rather than squeezing the value. */
@container (max-width: 736px) {
  .ci-gtable tr { align-items: stretch; flex-direction: column; gap: 4px; }
  .ci-gtable th { flex: none; width: auto; }
  .ci-gtable td { flex: none; }
}
@media (max-width: 560px) {
  .ci-gtable table { grid-template-columns: minmax(0, 1fr); }
  .ci-gtable tr { align-items: stretch; flex-direction: column; gap: 4px; grid-column: 1 / -1; }
  .ci-gtable th { flex: none; width: auto; }
  .ci-gtable td { flex: none; }
}
.ci-ptoc * { box-sizing: border-box; }
.ci-ptoc { 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-ptoc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-ptoc { padding-left: 20px; padding-right: 20px; } }
.ci-ptoc-box { border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 19px; }
.ci-ptoc-title { color: #202224; display: block; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ptoc-list { list-style: none; margin: 0; padding: 0; }
.ci-ptoc-item { max-width: 100%; min-width: 0; }
.ci-ptoc-link { border-radius: 5px; color: #202224; display: block; font-size: 16px; font-weight: 400; line-height: 24px; min-height: 24px; overflow-wrap: anywhere; position: relative; text-decoration-line: none; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 1.5px; }
@media (hover: hover) { .ci-ptoc-link:hover { color: #0c866a; text-decoration-line: underline; } }
.ci-ptoc-link:active { color: #0d9070; text-decoration-line: underline; }
.ci-ptoc-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
/* Box: 20 in (its 1px rule inside), the caption's caps 20 over a wrapping row of link/tag: the 16px chevron 8px
   before the label, a 40px target (the rows' pitch, so two never overlap). */
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-list { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link { padding-left: 24px; }
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::before { -webkit-print-color-adjust: exact; background-color: currentColor; content: ''; height: 16px; 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%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px 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%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; position: absolute; print-color-adjust: exact; top: 4px; width: 16px; }
html:not([data-editor-canvas]) .ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::after { content: ''; inset: -8px 0; position: absolute; }
@media (forced-colors: active) { .ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::before { background-color: LinkText; forced-color-adjust: none; } }
/* Below the desktop the Box caption is 18/24 and a label 14/22 in its 24px row. */
@media (max-width: 1199.98px) {
  .ci-ptoc-title { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-ptoc-link { font-size: 14px; line-height: 22px; padding-bottom: 1px; padding-top: 1px; }
}
/* Plain reads down balanced columns; count-derived positions keep wrapped labels in their own track. */
.ci-ptoc-box[data-look="plain"] .ci-ptoc-list { display: grid; gap: 16px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-item { grid-column: var(--ci-column-3, 1); grid-row: var(--ci-row-3, auto); }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-link { padding-left: 24px; }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-link::before { -webkit-print-color-adjust: exact; background-color: currentColor; content: ''; height: 16px; 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%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px 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%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; position: absolute; print-color-adjust: exact; top: 4px; width: 16px; }
@media (forced-colors: active) { .ci-ptoc-box[data-look="plain"] .ci-ptoc-link::before { background-color: LinkText; forced-color-adjust: none; } }
@media (max-width: 1199.98px) {
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-item { grid-column: var(--ci-column-2, 1); grid-row: var(--ci-row-2, auto); }
}
@media (max-width: 720px) {
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-list { display: flex; flex-direction: column; }
}
.ci-gquote * { box-sizing: border-box; }
.ci-gquote { 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%; container: gquote / inline-size; }
@media (max-width: 1199.98px) { .ci-gquote { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gquote { padding-left: 20px; padding-right: 20px; } }
/* The design's 20px padding holds its inside 1px border. */
.ci-gquote-panel { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; gap: 20px; padding: 19px; }
/* Avatar and name/role share one row at every breakpoint; the row hugs the
   name as drawn, capped so a long one cannot squeeze the quote out. */
.ci-gquote-person-row { align-items: center; display: flex; flex: none; gap: 8px; max-width: 50%; }
/* A block, not display: contents: the published <source>s would each take a gap. */
.ci-gquote-person-row picture { display: block; flex: none; }
.ci-gquote-avatar { border-radius: 50%; display: block; flex: none; height: 96px; object-fit: cover; width: 96px; }
/* Not the canvas's empty upload placeholder, whose yellow outline it would grey. */
.ci-gquote-avatar:not(.gjs-plh-image) { filter: grayscale(1); }
.ci-gquote-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.ci-gquote-name { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-gquote-role { color: #202224; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; }
.ci-gquote-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 24px; min-width: 0; }
.ci-gquote-text p { margin: 0 0 20px; }
.ci-gquote-text > :last-child { margin-bottom: 0; }
/* Layout=Mobile on tablets and phones (the v5 page frames); a narrow block (a side rail, 664px of
   section and under) gets the column at any screen width, not a crushed row. */
@container gquote (max-width: 664px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }
}
@media (max-width: 1199.98px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }

  /* The page frames' type (DREAM-831): heading/h4-trim 18/24, label/sm-bold 12/22, 500 italic 14/24. */
  .ci-gquote-name { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-gquote-role { line-height: 22px; margin: -7px 0 -7px; }
  .ci-gquote-text { font-size: 14px; }
}
.ci-gquote a[href] { color: #5749dd; text-decoration: none; }
.ci-gquote a[href]:hover { text-decoration: underline; }
.ci-gquote a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-aimg * { box-sizing: border-box; }
.ci-aimg { 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-aimg { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-aimg { padding-left: 20px; padding-right: 20px; } }
.ci-aimg-figure { margin: 0; }
.ci-aimg-img { border-radius: 12px; display: block; height: auto; margin: 0 auto; max-width: 100%; }
.ci-aimg-img[src=""], .ci-aimg-img:not([src]) { display: none; }
.ci-aimg-caption { color: #545658; font-size: 14px; line-height: 1.4; margin-top: 10px; }
/* Full width, v5 (DREAM-831): 850:350 at r12 on desktop, a 120px band below it, the photo cropped.
   :where() keeps it at (0,1,0), so a corner drag's scoped rule wins. */
.ci-aimg-figure[data-width="full"] { padding-bottom: 20px; }
.ci-aimg-figure[data-width="full"] picture { display: block; }
:where(.ci-aimg-figure[data-width="full"]) .ci-aimg-img { aspect-ratio: 850 / 350; border-radius: 12px; max-width: none; object-fit: cover; width: 100%; }
@media (max-width: 1199.98px) { :where(.ci-aimg-figure[data-width="full"]) .ci-aimg-img { aspect-ratio: auto; height: 120px; } }
.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-alist * { box-sizing: border-box; }
.ci-alist { 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 0; width: 100%; }
@media (max-width: 1199.98px) { .ci-alist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-alist { padding-left: 20px; padding-right: 20px; } }
.ci-alist-body ul, .ci-alist-body ol { font-size: 15px; line-height: 1.5; margin: 0; padding-left: 24px; }
.ci-alist-body ul[data-marker="none"] { list-style: none; padding-left: 0; }
.ci-alist-body li { margin: 0 0 8px; }
.ci-alist-body li:last-child { margin-bottom: 0; }
.ci-alist-body li p { margin: 0; }
/* An item's own picture (unit 0360): under its text, the column's width at most. */
.ci-alist-body .ci-list-figure { margin: 8px 0 0; }
.ci-alist-body .ci-list-figure picture { display: block; }
.ci-alist-body .ci-list-img { border-radius: 8px; display: block; height: auto; max-width: 100%; }
/* The writer's column count (settings.list.columns, unit 0366): down, then across.
   column-width makes the count a maximum, so a rail or a phone gets fewer. The
   indent moves onto each item so its marker stays inside its own column box. */
.ci-alist-body [data-columns] { column-gap: 32px; column-width: 14rem; padding-left: 0; }
.ci-alist-body [data-columns="2"] { column-count: 2; }
.ci-alist-body [data-columns="3"] { column-count: 3; }
.ci-alist-body [data-columns] > li { break-inside: avoid; overflow-wrap: anywhere; }
.ci-alist-body [data-columns]:not([data-marker="none"]) > li { margin-left: 24px; }
@media (max-width: 560px) {
  .ci-alist-body [data-columns] { column-count: 1; }
}
.ci-alist a[href] { color: #5749dd; text-decoration: none; }
.ci-alist a[href]:hover { text-decoration: underline; }
.ci-alist a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gcallout * { box-sizing: border-box; }
.ci-gcallout { 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-gcallout { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gcallout { padding-left: 20px; padding-right: 20px; } }
/* NL content/fact: a 1px frame round the lavender panel, 20px apart; the mark
   has its own column beside the title and the body (seeds README, 0398). */
.ci-gcallout-panel { background: #fff; border: 1px solid #5749dd; border-radius: 12px; padding: 19px; }
.ci-gcallout-inner { background: linear-gradient(180deg, #f3f2ff57 0%, #eeedfb 73.64%); border-radius: 12px; column-gap: 20px; display: grid; grid-template-areas: 'mark title' 'mark body'; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 20px; }
.ci-gcallout-mark-img { display: block; grid-area: mark; height: 50px; object-fit: contain; object-position: top; width: 25px; }
/* The title owns the 20px over the body, so a cleared one takes it along (and the
   canvas's placeholder box for an empty leaf keeps its own room). */
.ci-gcallout-title { align-self: start; font-size: 20px; font-weight: 700; grid-area: title; line-height: 28px; margin: -6.484375px 0 12.484375px; overflow-wrap: break-word; }
.ci-gcallout-title:empty { display: none; }
/* body/md-trim, justified (v5, DREAM-831): the panel's 20px pad and the title's 20 meet the glyphs, not the line box. */
.ci-gcallout-body { align-self: start; font-size: 16px; grid-area: body; line-height: 24px; margin: -5.984375px 0 -7.015625px; overflow-wrap: break-word; text-align: justify; }
.ci-gcallout-body > * { margin: 0 0 20px; }
.ci-gcallout-body > ul { padding-left: 24px; }
.ci-gcallout-body > ol { padding-left: 24px; }
.ci-gcallout-body li { margin: 0; position: relative; }
/* Inside an item or a quote, a paragraph or a nested list keeps the lines flush. */
.ci-gcallout-body li > p { margin: 0; }
.ci-gcallout-body blockquote > p { margin: 0; }
.ci-gcallout-body li > ul { margin: 0; padding-left: 24px; }
.ci-gcallout-body li > ol { margin: 0; padding-left: 24px; }
/* The native disc stays for list semantics, unpainted; the design's 6px disc is a
   border (kept in print and forced colours), centred 12px in, 0.75px under mid-line. */
.ci-gcallout-body ul > li::marker { color: transparent; }
.ci-gcallout-body ul > li::before { border: 3px solid; border-radius: 50%; content: ''; left: -15px; position: absolute; top: 9.75px; top: calc(0.5lh - 2.25px); }
.ci-gcallout-body > :last-child { margin-bottom: 0; }
/* content/fact-mobile-inner: the mark and the title share a row, the body runs
   full width under both, on tablets and phones (the v5 page frames). */
@media (max-width: 1199.98px) {
  .ci-gcallout-inner { grid-template-areas: 'mark title' 'body body'; grid-template-rows: auto auto; }
  /* The page frames' type there: heading/h4-trim 18/24, an untrimmed body/sm 14/22 (DREAM-831). */
  .ci-gcallout-title { font-size: 18px; line-height: 24px; margin: -5.234375px 0 -5.765625px; }
  .ci-gcallout-body { font-size: 14px; line-height: 22px; margin: 20px 0 0; }
}
.ci-gcallout a[href] { color: #5749dd; text-decoration: none; }
.ci-gcallout a[href]:hover { text-decoration: underline; }
.ci-gcallout a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-atable * { box-sizing: border-box; }
.ci-atable { 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; }
.ci-atable-body { overflow-x: auto; }
.ci-atable table { border-collapse: collapse; width: 100%; }
.ci-atable td { border: 1px solid #d9d9d9; font-size: 15px; line-height: 1.5; padding: 10px 14px; text-align: left; vertical-align: top; }
.ci-atable th { background: #f3f2ff; border: 1px solid #d9d9d9; font-size: 15px; font-weight: 800; line-height: 1.5; padding: 10px 14px; text-align: left; vertical-align: top; }
.ci-atable th p, .ci-atable td p { margin: 0; }
.ci-atable th p + p, .ci-atable td p + p { margin-top: 8px; }
@media (max-width: 560px) { .ci-atable th, .ci-atable td { font-size: 14px; padding: 8px 10px; } }
@media (max-width: 1199.98px) { .ci-atable { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-atable { padding-left: 20px; padding-right: 20px; } }
.ci-atable a[href] { color: #5749dd; text-decoration: none; }
.ci-atable a[href]:hover { text-decoration: underline; }
.ci-atable a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gprc * { box-sizing: border-box; }
.ci-gprc { 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-gprc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gprc { padding-left: 20px; padding-right: 20px; } }
.ci-gprc-cols { align-items: flex-start; display: flex; gap: 20px; }
.ci-gprc-list { display: flex; flex: 1; flex-direction: column; gap: 16px; list-style: none; margin: 0; min-width: 0; padding: 0; }
.ci-gprc-pro { background: #effbf7; }
.ci-gprc-con { background: #fee5e6; }
.ci-gprc-item { align-items: flex-start; border-radius: 4px; color: #202224; display: flex; font-size: 14px; font-weight: 400; gap: 8px; line-height: 20px; min-height: 32px; padding: 6px 12px; }
.ci-gprc-dot { align-items: center; display: flex; flex: none; height: 16px; justify-content: center; margin-top: 2px; width: 16px; }
.ci-gprc-dot-pro { color: #5bd73c; }
.ci-gprc-dot-con { color: #e24e3e; }
.ci-gprc-dot svg { fill: currentColor; height: 16px; width: 16px; }
.ci-gprc-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 1199.98px) {
  .ci-gprc-cols { align-items: stretch; flex-direction: column; }
  .ci-gprc-list { flex: none; gap: 20px; }

}
.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); } }
/* One rule per selector per context (COMPONENT_GENERATION.md §1). */
.ci-games-carousel * { box-sizing: border-box; }
.ci-games-carousel { 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; }
@media (max-width: 1199.98px) { .ci-games-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-games-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-games-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-games-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-games-carousel-track::-webkit-scrollbar { display: none; }
.ci-games-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-games-carousel-track.is-dragging a { pointer-events: none; }
.ci-slide { flex: 0 0 220px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 208px cards 24 apart, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-games-carousel-track { gap: 24px; } .ci-slide { flex-basis: 208px; } }

/* The art keeps the design's 220x300 at every column width; the caption hangs
   27px below it, which the link's padding counts (the caption is absolute). */
.ci-game-card { container: gcard / inline-size; position: relative; width: 100%; }
.ci-game-link { color: inherit; display: block; padding-bottom: 27px; position: relative; text-decoration: none; }
.ci-game-link:focus-visible { outline: none; }
/* An outline, not a box-shadow: forced-colors mode paints no shadow. */
.ci-game-link:focus-visible::after { border-radius: 12px; content: ''; inset: -3px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
.ci-game-art { aspect-ratio: 220 / 300; background: linear-gradient(160deg, #2b2b33, #17171c); border-radius: 12px; overflow: hidden; position: relative; }
.ci-game-image { display: block; height: 100%; object-fit: cover; width: 100%; }
.ci-game-image[src=""], .ci-game-image:not([src]) { opacity: 0; }
.ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); content: ''; inset: 0; pointer-events: none; position: absolute; }
.ci-game-link:active .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
/* Decorative: a click on it is the link's, and the canvas selects the art. */
.ci-game-play { align-items: center; background: #0c866a; border-radius: 8px; color: #fff; display: none; left: calc(50% - 34px); padding: 12px 24px; pointer-events: none; position: absolute; top: 38.67%; z-index: 1; }
.ci-game-link:active .ci-game-play { background: #1b5547; color: #b2b2b2; display: flex; }
.ci-game-play-icon { display: block; flex: none; height: 20px; width: 20px; }
/* 6px above the 80px caption (v4 card/game: y213 / Mobile y142). */
.ci-game-badges { bottom: 59px; display: flex; gap: 8px; justify-content: space-between; left: 20px; position: absolute; right: 20px; z-index: 1; }
/* RTP keeps the right edge by its own margin (a game with no score has no
   rating badge) and is the badge that gives way on a narrow card. */
.ci-game-rtp { margin-left: auto; min-width: 0; }
.ci-game-badge { align-items: center; background: #202224; border: 1px solid #fff; border-radius: 8px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 500; gap: 4px; height: 28px; line-height: 22px; padding: 0 7px; white-space: nowrap; }
.ci-game-star { display: block; flex: none; height: 12px; width: 12px; }
.ci-game-star-fill { fill: #ffb310; }
.ci-game-score { display: block; margin: -5px 0 -7px; }
.ci-game-rtp-value { display: block; margin: -5px 0 -7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* content/game-caption: a fixed 80px box, its text centred, so a one- or two-line name never moves the card (v4/v5). */
.ci-game-info { background: #f3f3f3; border-radius: 8px; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; height: 80px; justify-content: center; left: 20px; padding: 8px; position: absolute; right: 20px; text-align: center; }
.ci-game-name { border-radius: 4px; display: block; padding: 4px; }
/* Two lines, then "…" (v5 maxLines 2: "Gates of Olympus 1000 Dice"). */
.ci-game-name-text { font-size: 16px; font-weight: 700; line-height: 22px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -6px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); overflow-wrap: anywhere; }
.ci-game-link:active .ci-game-name-text { text-decoration: underline; }
.ci-game-provider { color: #545658; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover only where a pointer hovers: a tap must open the game, not reveal it. */
@media (hover: hover) {
  .ci-game-link:hover .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
  .ci-game-link:hover .ci-game-play { display: flex; }
  .ci-game-link:hover .ci-game-name-text { text-decoration: underline; }
}
/* The card's own width picks Mobile too (DREAM-746): a 154-190px tablet card, and the home strip's six at 183 (0496). */
@container gcard (max-width: 189.98px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* content/game-caption in every v5 tablet and phone frame: the title 700 14/22, a Desktop card too (DREAM-827). */
@media (max-width: 1199.98px) {
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* The phone frames' provider line 400 14/18 (DREAM-827). */
@media (max-width: 560px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
  .ci-game-provider { line-height: 18px; margin: -3px 0 -5px; }
}

/* A drag is no press: the card it started on keeps its rest look (0385's scope).
   One class more than the card's :active rules, which a grid on the page repeats later. */
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-play { display: none; }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-name-text { text-decoration: none; }
.ci-games-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-games-carousel-next { right: 12px; }
.ci-games-carousel-prev { left: 12px; }
.ci-games-carousel-prev .ci-games-carousel-icon { transform: scaleX(-1); }
.ci-games-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-games-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-games-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-games-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-games-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-games-carousel-btn:focus-visible { outline: none; }
.ci-games-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-games-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-games-carousel-btn { display: none; }
}
@media (max-width: 560px) {
  .ci-games-carousel-track { gap: 12px; }
  .ci-slide { flex-basis: 169px; }
}
.ci-faq-section * { box-sizing: border-box; }
.ci-faq-section { 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; }
@media (max-width: 1199.98px) { .ci-faq-section { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-faq-section { padding-left: 20px; padding-right: 20px; } }

.ci-faq-head { align-items: center; display: flex; gap: 16px; margin: 0 0 24px; }
.ci-faq-head:empty { display: none; }
.ci-faq-head::before { align-self: stretch; background: #0c866a; content: ""; flex: none; min-height: 45px; width: 5px; }
.ci-faq-head h2 { font-size: 28px; letter-spacing: -.035em; margin: 0; }
.ci-faq-head-link { color: #202224; font-weight: 800; margin-left: auto; text-decoration: none; white-space: nowrap; }
.ci-faq-head-link::after { color: #0c866a; content: " →"; font-weight: 800; margin-left: 10px; }
/* The title is a flex item: without min-width 0 a long word in it widens the page too (0448). */
.ci-faq-head h2 { min-width: 0; overflow-wrap: break-word; }
/* minmax(0, ...): an auto track grows to a question's longest word and the page scrolls sideways (0448). */
.ci-faq-list { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The ring goes 3px round the row and its divider (an absolute box stands on the padding box, inside that border). */
.ci-faq-item { border-bottom: 1px solid #d9d9d9; position: relative; }
/* The 20px above the divider belongs to the summary when closed, to the answer when open: all of a row toggles. */
.ci-faq-question { align-items: center; cursor: pointer; display: flex; gap: 20px; list-style: none; padding: 16px 20px 36px; }
.ci-faq-item[open] > .ci-faq-question { padding-bottom: 20px; }
.ci-faq-question::-webkit-details-marker { display: none; }
/* Only where the ring can draw: without :has() the browser keeps its own outline. */
@supports selector(:has(*)) { .ci-faq-question:focus-visible { outline: none; } }
.ci-faq-item:has(> .ci-faq-question:focus-visible)::after { border-radius: 8px; content: ''; inset: -3px -3px -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
/* heading/h4-trim on the design's h3 (and h4, the same 20px) at every width; another level keeps its own size, untrimmed. */
.ci-faq-question-text { color: #202224; flex: 1; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; min-width: 0; overflow-wrap: break-word; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ci-faq-question-text:not(h3):not(h4) { line-height: 1.25; margin: 0; }
h1.ci-faq-question-text { font-size: 32px; line-height: 36px; }
h2.ci-faq-question-text { font-size: 28px; }
h4.ci-faq-question-text { font-size: 20px; }
h5.ci-faq-question-text, h6.ci-faq-question-text { font-size: 18px; }
@media (hover: hover) { .ci-faq-question:hover .ci-faq-question-text { text-decoration-line: underline; } }
.ci-faq-question:active .ci-faq-question-text { text-decoration-line: underline; }
.ci-faq-chevron { color: #545658; display: block; flex: none; height: 24px; width: 24px; }
.ci-faq-chevron-glyph { display: block; height: 100%; width: 100%; }
.ci-faq-item[open] .ci-faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .ci-faq-chevron { transition: transform .15s ease; } }
/* body/md-trim: the trim sits on the container, so any number of paragraphs keeps it. */
.ci-faq-answer { color: #202224; font-size: 16px; font-weight: 400; line-height: 24px; margin: -6px 0 -7px; overflow-wrap: break-word; padding: 0 20px 36px; }
.ci-faq-answer > * { margin: 0 0 20px; }
.ci-faq-answer > :last-child { margin-bottom: 0; }
/* h4 is left to the step below: the canvas draws a 560 query after a 1199.98 one, whatever the source order. */
@media (max-width: 560px) { h1.ci-faq-question-text { font-size: 28px; line-height: 32px; } h2.ci-faq-question-text { font-size: 24px; } h5.ci-faq-question-text, h6.ci-faq-question-text { font-size: 17px; } }
/* Below the desktop v5 steps the row down (DREAM-820): the question 18/24, the answer 14/22, both trimmed to their caps. */
@media (max-width: 1199.98px) {
  h3.ci-faq-question-text, h4.ci-faq-question-text { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-faq-answer { font-size: 14px; line-height: 22px; margin: -5px 0 -7px; }
}
.ci-faq-answer a[href] { color: #5749dd; text-decoration: none; }
.ci-faq-answer a[href]:hover { text-decoration: underline; }
.ci-faq-answer a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-abio * { box-sizing: border-box; }
.ci-abio { 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-abio { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-abio { padding-left: 20px; padding-right: 20px; } }
.ci-abio-card { align-items: center; background: #f3f3f3; border-radius: 12px; display: flex; gap: 20px; padding: 16px; }
.ci-abio-photo { background: #d9d9d9; border-radius: 50%; display: flex; flex: none; overflow: hidden; }
.ci-abio-photo-img { display: block; height: 96px; object-fit: cover; width: 96px; }
.ci-abio-photo-img[src=""], .ci-abio-photo-img:not([src]) { opacity: 0; }
.ci-abio-body { display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; overflow-wrap: break-word; padding: 0; }
/* The name, title and bio trim on Chromium's whole pixels (capTrimCuts) at every width; the separator 8 under the name's baseline (PR #590 R2.3). */
.ci-abio-name { align-self: flex-start; border: 0; color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 0; max-width: 100%; padding: 0; }
.ci-abio-name::after { background: #0c866a; content: ''; display: block; height: 1.5px; margin-top: 2px; }
.ci-abio-name-link { border-radius: 4px; color: inherit; text-decoration: none; }
.ci-abio-name-link:hover { color: #1b5547; }
.ci-abio-name-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 0; }
.ci-abio-title, .ci-abio-text { font-size: 14px; line-height: 20px; margin: -4px 0 -6px; }
.ci-abio-title { color: #545658; }
.ci-abio-text { color: #202224; }
.ci-abio-text > * { margin: 0; }
.ci-abio-text > * + * { margin-top: 15px; }
/* Every v5 tablet and phone frame draws the byline's Compact layout (0498): the separator purple, the name 700 14/22,
   the title and bio 14/18 (PR #590 R1.5). */
@media (max-width: 1199.98px) {
  .ci-abio-name { font-size: 14px; margin: -5px 0 0; }
  .ci-abio-name::after { background: #5749dd; margin-top: 1px; }
  .ci-abio-title, .ci-abio-text { line-height: 18px; margin: -3px 0 -5px; }
}