:root {
  color-scheme: light;
  --sc-paper: #f2f4f3;
  --sc-surface: #ffffff;
  --sc-ink: #203638;
  --sc-ink-soft: #536766;
  --sc-line: #d1dad7;
  --sc-ice: #e7f1ed;
  --sc-blue: #216f68;
  --sc-blue-dark: #185b55;
  --sc-on-accent: #ffffff;
  --sc-accent-fill: #185b55;
  --sc-accent-hover: #124a43;
  --sc-check-fill: #216f68;
  --sc-sidebar: #edf1ef;
  --sc-hover: #f0f6f3;
  --sc-selected: #d9e9e1;
  --sc-selected-ink: #17483e;
  --sc-inset: #edf4f0;
  --sc-muted-fill: #e0ede6;
  --sc-field-border: #91a79b;
  --sc-control-fill: #f5f8f6;
  --sc-outline: #8ba99b;
  --sc-outline-hover: #649785;
  --sc-focus: #2e8278;
  --sc-focus-ring: rgba(33, 111, 104, .18);
  --sc-warning-fill: #fff4d8;
  --sc-warning-line: #e3c47a;
  --sc-warning-ink: #674a14;
  --sc-danger-fill: #fbe8e7;
  --sc-danger-line: #d89994;
  --sc-danger-ink: #842e29;
  --sc-size-estimate-line: #c7a5a3;
  --sc-size-estimate-ink: #755653;
  --sc-success-fill: #e1f1e6;
  --sc-success-line: #8cb69b;
  --sc-success-ink: #245337;
  --sc-shadow: 0 2px 6px rgba(32, 54, 56, .05);
  --sc-backdrop: rgba(15, 25, 23, .6);
  --sc-ink-rgb: 32, 54, 56;
  --sc-muted-rgb: 83, 103, 102;
  --sc-surface-rgb: 255, 255, 255;
  --sc-paper-rgb: 242, 244, 243;
  --sc-accent-rgb: 33, 111, 104;
  --sc-sans: "IBM Plex Sans", system-ui, sans-serif;
}

:root[data-sc-theme="dark"] {
  color-scheme: dark;
  --sc-paper: #14201e;
  --sc-surface: #1c2b28;
  --sc-ink: #e2eee8;
  --sc-ink-soft: #afc4ba;
  --sc-line: #425b50;
  --sc-ice: #223c32;
  --sc-blue: #8dd3b5;
  --sc-blue-dark: #a3dfc5;
  --sc-on-accent: #102d21;
  --sc-accent-fill: #8dd3b5;
  --sc-accent-hover: #b0e7cf;
  --sc-check-fill: #36765a;
  --sc-sidebar: #182723;
  --sc-hover: #293e35;
  --sc-selected: #2d5140;
  --sc-selected-ink: #d9f8e6;
  --sc-inset: #22352d;
  --sc-muted-fill: #30483d;
  --sc-field-border: #738e80;
  --sc-control-fill: #17251f;
  --sc-outline: #738e80;
  --sc-outline-hover: #8dd3b5;
  --sc-focus: #a3dfc5;
  --sc-focus-ring: rgba(141, 211, 181, .25);
  --sc-warning-fill: #3e321c;
  --sc-warning-line: #9b7d40;
  --sc-warning-ink: #f5d58e;
  --sc-danger-fill: #422725;
  --sc-danger-line: #b16b66;
  --sc-danger-ink: #ffc2ba;
  --sc-size-estimate-line: #8d706e;
  --sc-size-estimate-ink: #d9b9b5;
  --sc-success-fill: #223f2e;
  --sc-success-line: #659c78;
  --sc-success-ink: #b5e9c7;
  --sc-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  --sc-backdrop: rgba(0, 0, 0, .7);
  --sc-ink-rgb: 226, 238, 232;
  --sc-muted-rgb: 175, 196, 186;
  --sc-surface-rgb: 28, 43, 40;
  --sc-paper-rgb: 20, 32, 30;
  --sc-accent-rgb: 141, 211, 181;
}

/* Bridge the shared controls and Bootstrap to the selected site palette. */
:root, :root[data-bs-theme] {
  --therink-ink: var(--sc-ink);
  --therink-muted: var(--sc-ink-soft);
  --therink-blue: var(--sc-blue);
  --therink-ice: var(--sc-paper);
  --therink-border: var(--sc-line);
  --therink-surface: var(--sc-surface);
  --therink-surface-2: var(--sc-control-fill);
  --therink-surface-3: var(--sc-inset);
  --bs-body-bg: var(--sc-paper);
  --bs-body-bg-rgb: var(--sc-paper-rgb);
  --bs-body-color: var(--sc-ink);
  --bs-body-color-rgb: var(--sc-ink-rgb);
  --bs-emphasis-color: var(--sc-ink);
  --bs-emphasis-color-rgb: var(--sc-ink-rgb);
  --bs-secondary-color: var(--sc-ink-soft);
  --bs-secondary-color-rgb: var(--sc-muted-rgb);
  --bs-tertiary-color: var(--sc-ink-soft);
  --bs-border-color: var(--sc-line);
  --bs-border-color-translucent: var(--sc-line);
  --bs-tertiary-bg: var(--sc-inset);
  --bs-tertiary-bg-rgb: var(--sc-paper-rgb);
  --bs-secondary-bg: var(--sc-sidebar);
  --bs-secondary-bg-rgb: var(--sc-paper-rgb);
  --bs-primary: var(--sc-blue);
  --bs-primary-rgb: var(--sc-accent-rgb);
  --bs-link-color: var(--sc-blue-dark);
  --bs-link-color-rgb: var(--sc-accent-rgb);
  --bs-link-hover-color: var(--sc-blue);
  --bs-link-hover-color-rgb: var(--sc-accent-rgb);
  --bs-primary-text-emphasis: var(--sc-blue-dark);
  --bs-primary-bg-subtle: var(--sc-ice);
  --bs-primary-border-subtle: var(--sc-outline);
  --bs-secondary-text-emphasis: var(--sc-ink);
  --bs-secondary-bg-subtle: var(--sc-sidebar);
  --bs-secondary-border-subtle: var(--sc-line);
}

body.sc-body {
  margin: 0;
  background: var(--sc-paper);
  color: var(--sc-ink);
  font-family: var(--sc-sans);
  font-size: .95rem;
  line-height: 1.5;
}

.sc-body *, .sc-body *::before, .sc-body *::after { box-sizing: border-box; }
.sc-body [hidden] { display: none !important; }
.sc-body a { text-underline-offset: .18em; }
.sc-body :focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 3px; }
.sc-body h1, .sc-body h2, .sc-body h3 { color: inherit; font-family: var(--sc-sans); }
.sc-body a:not(.btn) { color: var(--sc-blue-dark); }

.sc-skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 4000; padding: .75rem; background: var(--sc-surface); }
.sc-skip-link:focus { top: .5rem; }
.sc-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: .65rem 1.5rem;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-surface);
}
.sc-wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.sc-body .sc-wordmark { color: var(--sc-ink); }
.sc-wordmark strong { font-size: 1.08rem; font-weight: 600; }
.sc-brand-mark { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.sc-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-brand-mark .sc-logo-dark { display: none; }
:root[data-sc-theme="dark"] .sc-brand-mark .sc-logo-light { display: none; }
:root[data-sc-theme="dark"] .sc-brand-mark .sc-logo-dark { display: block; }
.sc-wordmark-mark { width: 44px; height: 44px; }
.sc-account-controls { display: flex; align-items: center; gap: 1rem; font-size: .85rem; flex-shrink: 0; }
.sc-account-controls form { margin: 0; }

.sc-app-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 150px); max-width: 1600px; margin-inline: auto; }
.sc-sidebar { border-right: 1px solid var(--sc-line); padding: 1.4rem .85rem; background: var(--sc-sidebar); }
.sc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.sc-sidebar li + li { margin-top: .2rem; }
.sc-body .sc-workspace-link { display: block; padding: .65rem .8rem; border-radius: .25rem; text-decoration: none; color: var(--sc-ink-soft); font-size: .87rem; border-inline-start: 3px solid transparent; }
.sc-body .sc-workspace-link:hover { background: var(--sc-hover); color: var(--sc-ink); }
.sc-body .sc-workspace-link.is-current { background: var(--sc-selected); border-inline-start-color: var(--sc-blue); color: var(--sc-selected-ink); font-weight: 600; }
.sc-sidebar-help { display: block; margin: 1.5rem .8rem 0; font-size: .85rem; }
.sc-main { min-width: 0; padding: 1.6rem clamp(1rem, 2.5vw, 2.5rem) 2rem; }
.sc-page-header { margin-bottom: 1.25rem; padding: 0; }
.sc-page-header h1 { font-size: 1.65rem; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -.025em; }
.sc-page-lede { color: var(--sc-ink-soft); margin: .45rem 0 0; max-width: 68ch; font-size: .95rem; }
.sc-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.sc-workspace-primary, .sc-workspace-help { min-width: 0; display: grid; gap: 1.25rem; }
.sc-panel { min-width: 0; border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-surface); overflow: hidden; }
.sc-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--sc-line); }
.sc-panel h2, .sc-panel-heading h2 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0; }
.sc-panel-heading > a { font-size: .82rem; }
.sc-panel-note { color: var(--sc-ink-soft); padding: .85rem 1.1rem; margin: 0; font-size: .88rem; }
.sc-panel-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; padding: 1rem 1.1rem; border-top: 1px solid var(--sc-line); }
.sc-panel-guidance { background: var(--sc-ice); padding: 1.1rem; border-top: 3px solid var(--sc-outline-hover); }
.sc-panel-guidance p { color: var(--sc-ink-soft); margin: .6rem 0 1rem; font-size: .9rem; }
.sc-action-list { list-style: none; padding: 0; margin: 0; }
.sc-action-list li { min-width: 0; border-bottom: 1px solid var(--sc-line); }
.sc-action-list li:last-child { border-bottom: 0; }
.sc-action-list-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-action-list-split li:nth-child(odd) { border-right: 1px solid var(--sc-line); }
.sc-action-list-split li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.sc-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; height: 100%; text-decoration: none; }
.sc-action:hover { background: var(--sc-hover); }
.sc-action-copy { display: grid; gap: .3rem; min-width: 0; }
.sc-action-copy strong { font-size: .92rem; font-weight: 600; }
.sc-action-copy > span { color: var(--sc-ink-soft); font-size: .84rem; line-height: 1.45; }
.sc-action-arrow { color: var(--sc-ink-soft); font-size: 1.3rem; flex-shrink: 0; }
.sc-workspace-help .sc-action { padding: .8rem 1.1rem; }
.sc-help-detail { padding: .85rem 1.1rem; border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-surface); font-size: .88rem; }
.sc-help-detail summary { cursor: pointer; font-weight: 600; }
.sc-help-detail p { color: var(--sc-ink-soft); margin: .75rem 0; }
.sc-request-message { white-space: pre-wrap; overflow-wrap: anywhere; }

.sc-button, .btn.sc-button { display: inline-flex; align-items: center; justify-content: center; background: var(--sc-accent-fill); border: 1px solid var(--sc-accent-fill); color: var(--sc-on-accent); border-radius: .25rem; font: 600 .88rem/1.5 var(--sc-sans); padding: .6rem .9rem; text-decoration: none; }
.sc-button:hover, .sc-button:focus { background: var(--sc-accent-hover); border-color: var(--sc-accent-hover); color: var(--sc-on-accent); }
.sc-button-small, .btn.sc-button-small { padding: .45rem .8rem; }
.sc-button-quiet, .btn.sc-button-quiet { background: transparent; color: var(--sc-blue-dark); }
.sc-text-link { font-size: .88rem; font-weight: 600; }
.sc-inline-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.sc-inline-help { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: 1rem 0; margin-top: .5rem; color: var(--sc-ink-soft); font-size: .85rem; }

.sc-tool-filter { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.sc-tool-filter label { font-size: .9rem; font-weight: 600; }
.sc-tool-filter input { flex: 1; min-width: 0; max-width: 440px; padding: .65rem .8rem; border: 1px solid var(--sc-field-border); border-radius: .25rem; background: var(--sc-surface); color: var(--sc-ink); }
.sc-tool-filter p { margin: 0; font-size: .85rem; color: var(--sc-ink-soft); }
.sc-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sc-directory-group { min-width: 0; border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-surface); overflow: hidden; }
.sc-directory-label { font-size: 1rem; font-weight: 600; margin: 0; padding: 1rem; background: var(--sc-inset); }
.sc-directory-group > a { display: grid; gap: .3rem; padding: 1rem; border-top: 1px solid var(--sc-line); text-decoration: none; }
.sc-directory-group > a:hover { background: var(--sc-hover); }
.sc-directory-group strong { font-size: .92rem; font-weight: 600; }
.sc-directory-group span { color: var(--sc-ink-soft); font-size: .85rem; }
.sc-directory-group .sc-tool-access-badge { justify-self: start; max-width: 100%; padding: .12rem .45rem; border: 1px solid var(--sc-line); border-radius: .2rem; background: var(--sc-inset); color: var(--sc-blue-dark); font-size: .7rem; font-weight: 500; line-height: 1.5; }

.sc-anchor-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.sc-anchor-nav a { padding: .4rem .65rem; border: 1px solid var(--sc-line); border-radius: .25rem; background: var(--sc-surface); font-size: .85rem; text-decoration: none; }
.sc-anchor-nav a:hover { background: var(--sc-ice); }
.sc-learning-article { max-width: 900px; border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-surface); }
.sc-learning-article details { scroll-margin-top: 1rem; border-bottom: 1px solid var(--sc-line); }
.sc-learning-article details:last-child { border-bottom: 0; }
.sc-learning-article summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; }
.sc-learning-article summary:hover { background: var(--sc-hover); }
.sc-learning-article details[open] summary { background: var(--sc-ice); }
.sc-learning-article details > div { padding: 1.25rem; max-width: 78ch; }
.sc-learning-article p, .sc-learning-article li { color: var(--sc-ink-soft); }
.sc-learning-article li { margin-bottom: .45rem; }
.sc-guide-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sc-guide-directory section { scroll-margin-top: 1rem; }
.sc-guide-directory .sc-directory-label { line-height: 1.5; }
.sc-guide-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; font-size: .85rem; }
.sc-guide-contents, .sc-guide-notice { max-width: 82ch; padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-inset); }
.sc-guide-notice p { color: var(--sc-ink-soft); font-size: .9rem; margin: .35rem 0 0; }
.sc-guide-contents summary { cursor: pointer; font-weight: 600; }
.sc-guide-contents ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.sc-guide-contents li { margin-bottom: .4rem; }
.sc-guide-prose { max-width: 82ch; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--sc-line); border-radius: .35rem; background: var(--sc-surface); line-height: 1.75; overflow-wrap: anywhere; }
.sc-guide-prose h2 { font-size: 1.35rem; font-weight: 600; margin: 2rem 0 .85rem; line-height: 1.4; }
.sc-guide-prose h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .7rem; line-height: 1.5; }
.sc-guide-prose h4, .sc-guide-prose h5, .sc-guide-prose h6 { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.sc-guide-prose > :first-child { margin-top: 0; }
.sc-guide-prose p, .sc-guide-prose ul, .sc-guide-prose ol { margin-bottom: 1rem; }
.sc-guide-prose li { margin-bottom: .45rem; }
.sc-guide-prose ul, .sc-guide-prose ol { padding-left: 1.5rem; }
.sc-guide-prose [id] { scroll-margin-top: 1rem; }
.sc-guide-prose img { display: block; max-width: 100%; max-height: 38rem; width: auto; height: auto; object-fit: contain; margin: 1.25rem auto; }
.sc-guide-prose figure { margin: 1.25rem 0; }
.sc-guide-prose blockquote { border-left: 3px solid var(--sc-line); padding-left: 1rem; color: var(--sc-ink-soft); }
.sc-guide-table { max-width: 100%; overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--sc-line); }
.sc-guide-table table { border-collapse: collapse; font-size: .85rem; line-height: 1.5; width: 100%; }
.sc-guide-table th, .sc-guide-table td { border: 1px solid var(--sc-line); padding: .5rem .65rem; min-width: 5rem; vertical-align: top; }
.sc-guide-table th { background: var(--sc-inset); font-weight: 600; }
.sc-guide-next { max-width: 82ch; margin: 1.5rem 0 0; padding: 1rem 0; border-top: 1px solid var(--sc-line); }
.sc-guide-next h2 { font-size: 1rem; font-weight: 600; }
.sc-guide-next li { margin-bottom: .5rem; }

/* Read-only reels: the centre can fall between labels instead of snapping to a
   misleading recommendation. Surfaces and controls inherit both site themes. */
.sc-size-explorer { container-type: inline-size; min-width: 0; margin: 0 0 1.5rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--sc-line); border-radius: .4rem; background: var(--sc-surface); }
.sc-size-explorer [hidden] { display: none !important; }
.sc-size-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.sc-size-heading h2 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.sc-size-badge { padding: .2rem .5rem; background: var(--sc-inset); color: var(--sc-ink-soft); border: 1px solid var(--sc-line); border-radius: .2rem; font-size: .75rem; }
.sc-size-explorer > p { color: var(--sc-ink-soft); font-size: .9rem; }
.sc-size-controls { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: end; gap: .85rem; max-width: 56rem; margin: 1.25rem 0 1rem; }
.sc-size-controls > div { min-width: 0; }
.sc-size-controls label { display: block; margin: 0 0 .35rem; font-size: .85rem; font-weight: 600; }
.sc-size-controls .form-select { width: 100%; max-width: 100%; min-width: 0; }
.sc-size-controls .btn { min-height: 2.4rem; }
.sc-size-summary { margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.sc-size-wheels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.2rem), 1fr)); gap: .5rem; }
.sc-size-wheel { min-width: 0; padding: .7rem .35rem .6rem; border: 1px solid var(--sc-line); border-radius: .3rem; background: var(--sc-paper); text-align: center; overflow: hidden; }
.sc-size-wheel h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .2rem; }
.sc-size-caption { min-height: 2.8em; margin: 0 .1rem .35rem; font-size: .72rem; line-height: 1.4; color: var(--sc-ink-soft); }
.sc-size-window { position: relative; height: 220px; isolation: isolate; overflow: hidden; background: var(--sc-surface); border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); cursor: grab; touch-action: pan-x; user-select: none; }
.sc-size-window:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: -3px; }
.sc-size-explorer.is-dragging .sc-size-window { cursor: grabbing; }
.sc-size-explorer.is-dragging :is(.sc-size-number, .sc-size-band) { transition: none; }
.sc-size-steps { display: flex; justify-content: space-between; gap: .35rem; margin-top: .4rem; }
.sc-size-steps button { flex: 1; min-height: 2rem; border: 1px solid var(--sc-outline); border-radius: .2rem; background: var(--sc-control-fill); color: var(--sc-ink); font: inherit; }
.sc-size-steps button:hover { background: var(--sc-hover); }
.sc-size-steps button:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
.sc-size-steps button:disabled { opacity: .5; cursor: default; }
.sc-size-window::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, var(--sc-surface), transparent 32%, transparent 68%, var(--sc-surface)); }
.sc-size-track { position: absolute; inset: 0; z-index: 2; }
.sc-size-number { position: absolute; top: calc(50% + var(--sc-size-offset, 0px)); inset-inline: 0; transform: translateY(-50%); font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); transition: top .32s ease-out; }
.sc-size-number.is-near { font-size: 1.5rem; font-weight: 600; color: var(--sc-ink); }
.sc-size-number.is-child { font-size: 1rem; }
.sc-size-number.is-child.is-near { font-size: 1.1rem; }
.sc-size-band { position: absolute; top: calc(50% + var(--sc-size-band-top, -22px)); height: var(--sc-size-band-height, 44px); inset-inline: 0; z-index: 1; background: var(--sc-selected); border-block: 1px solid var(--sc-outline); transition: top .32s ease-out, height .32s ease-out; }
.sc-size-line { position: absolute; inset-inline: 0; top: 50%; z-index: 4; border-top: 1px solid var(--sc-blue); pointer-events: none; }
.sc-size-line::before, .sc-size-line::after { content: ''; position: absolute; top: -4px; width: 0; height: 0; border-block: 4px solid transparent; }
.sc-size-line::before { inset-inline-start: 0; border-inline-start: 5px solid var(--sc-blue); }
.sc-size-line::after { inset-inline-end: 0; border-inline-end: 5px solid var(--sc-blue); }
.sc-size-unavailable { position: absolute; top: 50%; inset-inline: .5rem; transform: translateY(-50%); font-size: .8rem; color: var(--sc-ink-soft); z-index: 5; background: var(--sc-surface); }
.sc-size-reading { min-height: 2.8em; margin: .65rem 0 0; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--sc-ink); }
.sc-size-wheel.is-unverified { border-color: var(--sc-size-estimate-line); }
.sc-size-wheel.is-unverified .sc-size-window { border-color: var(--sc-size-estimate-line); }
.sc-size-wheel.is-unverified .sc-size-reference-note { color: var(--sc-size-estimate-ink); }
.sc-size-reference-note { margin: .5rem .1rem 0; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.sc-size-chart-link { display: inline-block; margin-top: .55rem; font-size: .72rem; }
.sc-size-wheel .sc-size-chart-link { display: block; }
.sc-size-sources { margin: 1.5rem 0; }
.sc-size-sources > p { max-width: 82ch; color: var(--sc-ink-soft); }
.sc-size-source { border-bottom: 1px solid var(--sc-line); padding: .75rem 0; }
.sc-size-source > summary { cursor: pointer; font-weight: 600; color: var(--sc-ink); }
.sc-size-source > div { padding: .75rem 0; max-width: 90ch; scroll-margin-top: 5rem; }
.sc-size-source p { font-size: .875rem; line-height: 1.6; margin: .7rem 0; }
.sc-size-source-kind { color: var(--sc-ink-soft); }
.sc-size-source-formula { background: var(--sc-inset); border: 1px solid var(--sc-line); padding: .7rem; overflow-wrap: anywhere; }
.sc-size-source-table { max-height: 22rem; margin: .8rem 0; }
.sc-size-source-table table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.sc-size-source-table :is(th, td) { padding: .45rem .65rem; border-bottom: 1px solid var(--sc-line); text-align: left; }
.sc-size-source-table th { background: var(--sc-inset); }
.sc-size-number.is-inferred::after { content: '*'; font-size: .65em; vertical-align: super; }
.sc-size-legend, .sc-size-hint { font-size: .8rem; color: var(--sc-ink-soft); margin: .9rem 0 0; line-height: 1.6; }
.sc-size-line-key, .sc-size-band-key { display: inline-block; width: 1rem; vertical-align: middle; margin-inline-end: .2rem; }
.sc-size-line-key { border-top: 2px solid var(--sc-blue); }
.sc-size-band-key { height: .65rem; background: var(--sc-selected); border: 1px solid var(--sc-outline); }
@container (max-width: 850px) { .sc-size-wheels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 500px) {
  .sc-size-wheels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-size-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sc-size-controls > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sc-size-controls .btn { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sc-size-number, .sc-size-band { transition: none; } }
@media (max-width: 900px) { .sc-guide-directory { grid-template-columns: 1fr; } }
.sc-panel-prose { padding: 1.1rem; }
.sc-panel-prose p { color: var(--sc-ink-soft); margin: .75rem 0 1rem; }
.sc-steps { padding-left: 1.25rem; margin: .85rem 0 0; font-size: .88rem; color: var(--sc-ink-soft); }
.sc-steps li + li { margin-top: .75rem; }

/* Keep informational and existing account pages within the compact app shell. */
.sc-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sc-about-grid > div { background: var(--sc-surface); border: 1px solid var(--sc-line); padding: 1.1rem; border-radius: .35rem; }
.sc-about-grid h2, .sc-contact-band h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .65rem; }
.sc-about-grid p { color: var(--sc-ink-soft); margin: 0; }
.sc-contact-band { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; background: var(--sc-ice); padding: 1.1rem; border: 1px solid var(--sc-line); border-radius: .35rem; margin-top: 1.25rem; }
.sc-main .text-body-secondary { color: var(--sc-ink-soft) !important; }

/* Shared service and account components follow the selected palette. */

.sc-main .therink-home-intro,
.sc-main .card,
.sc-main .modal-content,
.sc-main .therink-pathway-card,
.sc-main .start-intent-button {
  background: var(--sc-surface);
  color: var(--sc-ink);
  border-color: var(--sc-line);
  border-radius: .5rem;
  box-shadow: var(--sc-shadow);
}

.sc-main .therink-home-intro {
  background: var(--sc-inset);
}

.sc-main .therink-home-blurb {
  background: var(--sc-muted-fill);
  border-left-color: var(--sc-outline-hover);
  color: var(--sc-ink-soft);
  border-radius: .35rem;
}

.sc-main .therink-icon-chip,
.sc-main .therink-action-icon,
.sc-main .therink-pathway-icon {
  background: var(--sc-ice);
  color: var(--sc-blue-dark);
}

.sc-main .card-title,
.sc-main .therink-section-kicker {
  color: var(--sc-ink);
}

.sc-main .therink-required-label::after { color: var(--sc-warning-ink); }
.sc-main .list-group-item { color: var(--sc-ink); box-shadow: none; }

.sc-main .start-need-card:hover,
.sc-main .start-need-card:focus-within,
.sc-main .start-intent-button:hover,
.sc-main .start-intent-button:focus-visible {
  background: var(--sc-hover);
  border-color: var(--sc-outline-hover);
  color: var(--sc-ink);
}

.sc-main .start-need-card:has(input:checked) {
  background: var(--sc-selected);
  border-color: var(--sc-blue);
}

.sc-main .form-control,
.sc-main .form-select,
.sc-main .form-check-input {
  background-color: var(--sc-control-fill);
  border-color: var(--sc-field-border);
  color: var(--sc-ink);
}

.sc-main .form-control:focus,
.sc-main .form-select:focus,
.sc-main .form-check-input:focus {
  background-color: var(--sc-control-fill);
  border-color: var(--sc-blue);
  box-shadow: 0 0 0 .2rem var(--sc-focus-ring);
}

.sc-main .form-check-input:checked {
  background-color: var(--sc-blue);
  border-color: var(--sc-blue);
}

.sc-main .btn-primary {
  --bs-btn-bg: var(--sc-accent-fill);
  --bs-btn-border-color: var(--sc-accent-fill);
  --bs-btn-hover-bg: var(--sc-accent-hover);
  --bs-btn-hover-border-color: var(--sc-accent-hover);
  --bs-btn-active-bg: var(--sc-accent-hover);
  --bs-btn-active-border-color: var(--sc-accent-hover);
}

.sc-main .btn-outline-light,
.sc-main .btn-outline-secondary {
  --bs-btn-color: var(--sc-blue-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--sc-outline);
  --bs-btn-hover-color: var(--sc-accent-hover);
  --bs-btn-hover-bg: var(--sc-ice);
  --bs-btn-hover-border-color: var(--sc-outline-hover);
  --bs-btn-active-color: var(--sc-accent-hover);
  --bs-btn-active-bg: var(--sc-selected);
  --bs-btn-active-border-color: var(--sc-outline-hover);
  --bs-btn-disabled-color: var(--sc-ink-soft);
  --bs-btn-disabled-border-color: var(--sc-line);
}

.sc-main .start-need-card .text-bg-secondary {
  background-color: var(--sc-inset) !important;
  color: var(--sc-ink-soft) !important;
}

.sc-main .alert-secondary {
  background: var(--sc-sidebar);
  border-color: var(--sc-line);
  color: var(--sc-ink-soft);
}

.sc-main .alert-warning {
  background: var(--sc-warning-fill);
  border-color: var(--sc-warning-line);
  color: var(--sc-warning-ink);
}

.sc-main .therink-start-journey-menu .therink-start-menu-link {
  color: var(--sc-blue-dark);
}
.sc-main .therink-start-journey-menu .therink-start-menu-link-not-needed {
  color: var(--sc-ink-soft);
}

.sc-footer { border-top: 1px solid var(--sc-line); background: var(--sc-surface); padding: 1rem 1.5rem; }
.sc-footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; max-width: 1550px; margin-inline: auto; }
.sc-footer-title { font-size: .8rem; color: var(--sc-ink-soft); margin: 0; }
.sc-footer-brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.sc-footer-mark { width: 32px; height: 32px; }
.sc-footer-copy:empty { display: none; }
.sc-footer-links { display: flex; flex: 1; flex-wrap: wrap; gap: .5rem 1rem; }
.sc-footer-link { font-size: .78rem; text-decoration: none; }
.sc-affari-credit { margin-inline-start: auto; }
.sc-affari-logo { width: 85px; height: auto; }

/* The first-visit selector remains a focused, compact form. */
.sc-body .therink-pathway-modal-title { font-size: 1.35rem; line-height: 1.35; font-weight: 600; }
.sc-body .therink-section-kicker { font-size: .8rem; letter-spacing: 0; text-transform: none; }
.sc-body .therink-pathway-choice { min-height: 6rem; padding: .85rem; gap: .65rem; }
.sc-body .therink-pathway-choice-label { font-weight: 600; }
.sc-body .therink-pathway-choice-description { font-size: .85rem; }
.sc-body .therink-pathway-modal-header > p { color: var(--sc-ink-soft) !important; font-size: .9rem; }
.sc-body .therink-pathway-modal-panel a { color: var(--sc-blue-dark); }

/* One palette for controls, including popups appended directly to the body. */
.sc-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .4rem .6rem;
  background: var(--sc-surface);
  color: var(--sc-ink);
  border: 1px solid var(--sc-outline);
  border-radius: .3rem;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.sc-theme-toggle:hover { background: var(--sc-hover); }
.sc-pathway-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.sc-theme-toggle-track {
  display: inline-block;
  width: 1.9rem;
  height: 1.1rem;
  padding: .15rem;
  border-radius: 1rem;
  background: var(--sc-ink-soft);
}
.sc-theme-toggle-track::before {
  content: '';
  display: block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--sc-surface);
}
.sc-theme-toggle[aria-checked="true"] .sc-theme-toggle-track { background: var(--sc-blue); }
.sc-theme-toggle[aria-checked="true"] .sc-theme-toggle-track::before { transform: translateX(.8rem); }
.sc-theme-corner { display: flex; justify-content: flex-end; padding: .5rem 1rem; }
:root[data-sc-theme="dark"] .sc-affari-logo { filter: brightness(0) invert(1); }

.sc-body :is(.card, .modal-content, .offcanvas, .dropdown-menu, .popover,
  .therink-pathway-modal-panel, .therink-cookie-bar, .therink-guided-help-panel,
  .therink-fit-map-panel, .therink-fit-foot-card, .therink-routine-panel,
  .therink-routine-stage-panel, .therink-hockey-panel, .therink-hockey-action-popout,
  .therink-login-card, .therink-account-promo) {
  background: var(--sc-surface);
  color: var(--sc-ink);
  border-color: var(--sc-line);
  box-shadow: var(--sc-shadow);
  --bs-card-bg: var(--sc-surface);
  --bs-card-color: var(--sc-ink);
  --bs-card-border-color: var(--sc-line);
  --bs-modal-bg: var(--sc-surface);
  --bs-modal-color: var(--sc-ink);
  --bs-modal-border-color: var(--sc-line);
  --bs-offcanvas-bg: var(--sc-surface);
  --bs-offcanvas-color: var(--sc-ink);
  --bs-popover-bg: var(--sc-surface);
  --bs-popover-body-color: var(--sc-ink);
  --bs-popover-header-bg: var(--sc-inset);
  --bs-popover-header-color: var(--sc-ink);
}
.sc-body .therink-pathway-modal-backdrop { background: var(--sc-backdrop); }
.sc-body .therink-pathway-modal-title,
.sc-body .therink-pathway-choice-label,
.sc-body .therink-pathway-addons-title,
.sc-body .therink-pathway-addon-choice { color: var(--sc-ink); }
.sc-body .therink-pathway-choice,
.sc-body .therink-pathway-addon-choice { background: var(--sc-control-fill); border-color: var(--sc-outline); }
.sc-body .therink-pathway-choice:hover,
.sc-body .therink-pathway-addon-choice:hover { background: var(--sc-hover); }
.sc-body .therink-pathway-choice:has(input:checked),
.sc-body .therink-pathway-addon-choice:has(input:checked) { background: var(--sc-selected); border-color: var(--sc-blue); }
.sc-body .therink-pathway-choice-icon { background: var(--sc-inset); }
.sc-body .therink-pathway-choice-input:checked ~ .therink-pathway-choice-copy .therink-pathway-choice-label { color: var(--sc-selected-ink); }
.sc-body .therink-pathway-addon-input { accent-color: var(--sc-check-fill); }

.sc-body :is(.form-control, .form-select, .input-group-text, .form-check-input) {
  background-color: var(--sc-control-fill);
  color: var(--sc-ink);
  border-color: var(--sc-field-border);
}
.sc-body :is(.form-control, .form-select, .form-check-input):focus {
  background-color: var(--sc-control-fill);
  color: var(--sc-ink);
  border-color: var(--sc-blue);
  box-shadow: 0 0 0 .2rem var(--sc-focus-ring);
}
.sc-body .form-control::placeholder { color: var(--sc-ink-soft); opacity: .85; }
.sc-body :is(.form-control, .form-select):disabled,
.sc-body .form-control[readonly] { background: var(--sc-inset); color: var(--sc-ink-soft); }
.sc-body .form-check-input:checked,
.sc-body .form-check-input:indeterminate { background-color: var(--sc-check-fill); border-color: var(--sc-check-fill); }
.sc-body :is(input[type="range"], progress) { accent-color: var(--sc-check-fill); }
.sc-body .form-range::-webkit-slider-thumb { background: var(--sc-check-fill); }
.sc-body .form-range::-moz-range-thumb { background: var(--sc-check-fill); }
.sc-body .form-range::-webkit-slider-runnable-track { background: var(--sc-line); }
.sc-body .form-range::-moz-range-track { background: var(--sc-line); }
.sc-body :is(.form-text, .text-body-secondary, .text-muted) { color: var(--sc-ink-soft) !important; }
.sc-body .btn-primary {
  --bs-btn-color: var(--sc-on-accent);
  --bs-btn-bg: var(--sc-accent-fill);
  --bs-btn-border-color: var(--sc-accent-fill);
  --bs-btn-hover-color: var(--sc-on-accent);
  --bs-btn-hover-bg: var(--sc-accent-hover);
  --bs-btn-hover-border-color: var(--sc-accent-hover);
  --bs-btn-active-color: var(--sc-on-accent);
  --bs-btn-active-bg: var(--sc-accent-hover);
  --bs-btn-active-border-color: var(--sc-accent-hover);
  --bs-btn-disabled-color: var(--sc-on-accent);
  --bs-btn-disabled-bg: var(--sc-accent-fill);
  --bs-btn-disabled-border-color: var(--sc-accent-fill);
}
.sc-body :is(.btn-outline-light, .btn-outline-dark, .btn-outline-secondary, .btn-outline-primary) {
  --bs-btn-color: var(--sc-blue-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--sc-outline);
  --bs-btn-hover-color: var(--sc-ink);
  --bs-btn-hover-bg: var(--sc-hover);
  --bs-btn-hover-border-color: var(--sc-blue);
  --bs-btn-active-color: var(--sc-selected-ink);
  --bs-btn-active-bg: var(--sc-selected);
  --bs-btn-active-border-color: var(--sc-blue);
  --bs-btn-disabled-color: var(--sc-ink-soft);
  --bs-btn-disabled-bg: var(--sc-inset);
  --bs-btn-disabled-border-color: var(--sc-line);
}
.sc-body .btn-secondary, .sc-body .btn-light {
  --bs-btn-color: var(--sc-ink);
  --bs-btn-bg: var(--sc-muted-fill);
  --bs-btn-border-color: var(--sc-outline);
  --bs-btn-hover-color: var(--sc-ink);
  --bs-btn-hover-bg: var(--sc-hover);
  --bs-btn-hover-border-color: var(--sc-blue);
  --bs-btn-active-color: var(--sc-selected-ink);
  --bs-btn-active-bg: var(--sc-selected);
}
.sc-body .dropdown-menu {
  --bs-dropdown-color: var(--sc-ink);
  --bs-dropdown-bg: var(--sc-surface);
  --bs-dropdown-link-color: var(--sc-ink);
  --bs-dropdown-link-hover-bg: var(--sc-hover);
  --bs-dropdown-link-hover-color: var(--sc-ink);
  --bs-dropdown-link-active-bg: var(--sc-selected);
  --bs-dropdown-link-active-color: var(--sc-selected-ink);
  --bs-dropdown-link-disabled-color: var(--sc-ink-soft);
}
.sc-body :is(.accordion, .accordion-item) {
  --bs-accordion-bg: var(--sc-surface);
  --bs-accordion-color: var(--sc-ink);
  --bs-accordion-btn-color: var(--sc-ink);
  --bs-accordion-btn-bg: var(--sc-surface);
  --bs-accordion-active-color: var(--sc-selected-ink);
  --bs-accordion-active-bg: var(--sc-selected);
  --bs-accordion-border-color: var(--sc-line);
}
.sc-body .table {
  --bs-table-bg: var(--sc-surface);
  --bs-table-color: var(--sc-ink);
  --bs-table-border-color: var(--sc-line);
  --bs-table-striped-bg: var(--sc-inset);
  --bs-table-striped-color: var(--sc-ink);
  --bs-table-hover-bg: var(--sc-hover);
  --bs-table-hover-color: var(--sc-ink);
  --bs-table-active-bg: var(--sc-selected);
  --bs-table-active-color: var(--sc-selected-ink);
}
.sc-body .list-group {
  --bs-list-group-bg: var(--sc-surface);
  --bs-list-group-color: var(--sc-ink);
  --bs-list-group-border-color: var(--sc-line);
  --bs-list-group-action-color: var(--sc-ink);
  --bs-list-group-action-hover-bg: var(--sc-hover);
  --bs-list-group-action-hover-color: var(--sc-ink);
  --bs-list-group-active-bg: var(--sc-selected);
  --bs-list-group-active-color: var(--sc-selected-ink);
}
.sc-body .page-link { background: var(--sc-surface); color: var(--sc-blue-dark); border-color: var(--sc-line); }
.sc-body .page-link:hover { background: var(--sc-hover); }
.sc-body .active > .page-link { background: var(--sc-selected); color: var(--sc-selected-ink); }
.sc-body .disabled > .page-link { background: var(--sc-inset); color: var(--sc-ink-soft); }
.sc-body :is(.bg-light, .bg-white) { background-color: var(--sc-surface) !important; }
.sc-body .text-dark { color: var(--sc-ink) !important; }
:root[data-sc-theme="dark"] .sc-body :is(.btn-close, .btn-close-white) { filter: invert(1) grayscale(1) brightness(2); }
:root:not([data-sc-theme="dark"]) .sc-body .btn-close-white { filter: none; }
.sc-body .alert-warning { background: var(--sc-warning-fill); color: var(--sc-warning-ink); border-color: var(--sc-warning-line); }
.sc-body .alert-danger { background: var(--sc-danger-fill); color: var(--sc-danger-ink); border-color: var(--sc-danger-line); }
.sc-body .alert-success { background: var(--sc-success-fill); color: var(--sc-success-ink); border-color: var(--sc-success-line); }
.sc-body :is(.alert-info, .alert-primary, .alert-secondary) { background: var(--sc-inset); color: var(--sc-ink); border-color: var(--sc-outline); }

/* Specialist controls use the palette; rink markings and equipment images keep their original colours. */
.sc-body :is(.therink-roh-test, .therink-roh-result, .therink-fit-scale-labels > span,
  .therink-routine-handle-control, .therink-routine-required-elements, .therink-routine-required-item,
  .therink-hockey-view-switch, .therink-hockey-plan-item, .therink-hockey-board-wrap,
  .therink-skate-feel-rating-option) {
  background: var(--sc-inset);
  color: var(--sc-ink);
  border-color: var(--sc-outline);
}
.sc-body .therink-roh-test { border-color: var(--sc-line) !important; }
.sc-body .therink-roh-test .form-check-label,
.sc-body .therink-roh-test .form-check-input:checked + .form-check-label { color: var(--sc-ink); }
.sc-body .therink-roh-test .form-check-input:hover { background-color: var(--sc-hover); border-color: var(--sc-blue); }
.sc-body .therink-roh-test .form-check-input:checked { background-color: var(--sc-check-fill); border-color: var(--sc-check-fill); }
.sc-body .therink-guided-help-count { color: var(--sc-blue-dark); }
.sc-body .therink-guided-help-active { outline-color: var(--sc-focus); box-shadow: 0 0 0 .4rem var(--sc-focus-ring); }
.sc-body .therink-help-button { background: var(--sc-inset); color: var(--sc-blue-dark); border-color: var(--sc-outline); }
.sc-body .therink-help-button:hover { background: var(--sc-hover); }
.sc-body .therink-navbar { background: var(--sc-surface); color: var(--sc-ink); border-color: var(--sc-line); box-shadow: var(--sc-shadow); }
.sc-body .therink-navbar .navbar-brand, .sc-body .therink-navbar .nav-link { color: var(--sc-ink); }
.sc-body .therink-hockey-mode-badge { background: var(--sc-success-fill); color: var(--sc-success-ink); border-color: var(--sc-success-line); }
.sc-body .therink-hockey-status { background: var(--sc-warning-fill); color: var(--sc-warning-ink); border-color: var(--sc-warning-line); }
.sc-body .therink-hockey-action-popout::after { background: var(--sc-surface); border-color: var(--sc-line); }

@media (max-width: 1199px) {
  .sc-workspace { grid-template-columns: minmax(0, 1fr) 250px; gap: 1rem; }
  .sc-action-list-split { grid-template-columns: 1fr; }
  .sc-action-list-split li:nth-child(odd) { border-right: 0; }
  .sc-action-list-split li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--sc-line); }
  .sc-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sc-app-layout { grid-template-columns: 185px minmax(0, 1fr); }
  .sc-sidebar { padding-inline: .5rem; }
  .sc-workspace, .sc-directory, .sc-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sc-masthead { padding: .6rem .85rem; }
  .sc-wordmark { gap: .4rem; }
  .sc-wordmark strong { font-size: .88rem; }
  .sc-wordmark-mark { width: 32px; height: 32px; }
  .sc-create-account { display: none; }
  .sc-account-controls { gap: .5rem; }
  .sc-masthead { flex-wrap: wrap; }
  .sc-account-controls { margin-inline-start: auto; }
  .sc-theme-toggle { font-size: .8rem; padding: .35rem .45rem; }
  .sc-app-layout { display: block; }
  .sc-sidebar { border-right: 0; border-bottom: 1px solid var(--sc-line); padding: .6rem; }
  .sc-sidebar ul { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .3rem; }
  .sc-sidebar li { flex-shrink: 0; }
  .sc-sidebar li + li { margin: 0; }
  .sc-body .sc-workspace-link { padding: .45rem .65rem; font-size: .8rem; border-inline-start: 0; border-bottom: 2px solid transparent; }
  .sc-body .sc-workspace-link.is-current { border-bottom-color: var(--sc-blue); }
  .sc-sidebar-help { display: none; }
  .sc-main { padding: 1rem .85rem 1.5rem; }
  .sc-footer { padding: 1rem .85rem; }
  .sc-tool-filter { align-items: stretch; flex-direction: column; }
  .sc-tool-filter input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-body *, .sc-body *::before, .sc-body *::after { scroll-behavior: auto !important; transition: none !important; }
}