/* Inter is narrower than most system UI faces, so painting a fallback and then
   swapping produced a visible reflow: on case-converter the guide text rewrapped
   and measured a 0.2815 layout shift, which is well past the 0.1 "poor" line.

   font-display: swap was already correct, so the fix is not about invisible
   text. It is about the fallback having the same metrics. Arial is used as the
   base because it is present essentially everywhere, and size-adjust,
   ascent-override, descent-override and line-gap-override are set so its glyphs
   occupy the same space Inter's do. The reflow then has nothing to do, even
   when the font arrives late.

   The values are the usual Inter-to-Arial correspondence; they were then checked
   by measuring layout shift with the font files blocked, which should now be
   close to the unblocked case rather than the 0.28 seen before. */
@font-face {
  font-family: "StudyKit Sans Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "StudyKit Sans";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "StudyKit Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "StudyKit Serif";
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   StudyKit 2026: warm cream editorial
   ==========================================================================

   The direction is Intercom's design language as catalogued on Refero Styles:
   a warm cream canvas, ink-black type at weight 300, hairline borders, sharp
   4px corners, and one saturated violet used sparingly. The point is not to
   look like Intercom. The point is to look like a printed study notebook
   instead of every other tool directory: quiet surfaces, confident type, and
   the tools themselves above the fold.

   This file is deliberately additive. It does not replace color-scheme.css,
   home.css, tool-browser.css or the accent system; it loads after them and
   repaints the surfaces they set up. The appearance panel keeps working: the
   accent still reaches links, focus rings and the small punctuation marks,
   while the canvas stays cream. The one default that changes is the default
   accent itself, from purple to electric violet, because the old purple was
   chosen for the old design.

   Every selector that has to beat an inline <style> block shipped in a
   widget or a page body is prefixed with `body`. Source order alone cannot be
   trusted there.
   ========================================================================== */

:root {
  --sk26-canvas: #faf9f6;
  --sk26-linen: #f1eee9;
  --sk26-stone: #d3cec6;
  --sk26-hairline: #dedbd6;
  --sk26-surface: #ffffff;
  --sk26-ink: #111111;
  --sk26-iron: #414141;
  --sk26-graphite: #585858;
  --sk26-muted: #6c6862;
  --sk26-electric: #0007cb;
  --sk26-electric-soft: #e9e9ff;
  --sk26-electric-line: rgba(0, 7, 203, 0.26);
  --sk26-accent: var(--sk-accent, #0007cb);
  --sk26-accent-hover: var(--sk-accent-hover, #0005a3);
  --sk26-accent-soft: var(--sk-accent-soft, #e9e9ff);
  --sk26-accent-line: var(--sk-accent-line, rgba(0, 7, 203, 0.26));
  --sk26-radius: 4px;
  --sk26-max: 1180px;
  --sk26-sans: "StudyKit Sans", "StudyKit Sans Fallback", "Inter", "Segoe UI",
    system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sk26-mono: "StudyKit Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  --sk26-serif: "StudyKit Serif", "Instrument Serif", Georgia, "Times New Roman",
    serif;

  /* Typography scale. Kept here so a section can be retuned without hunting
     for a literal four hundred lines down. */
  --sk26-display: clamp(3rem, 6.4vw, 5.6rem);
  --sk26-h2: clamp(1.9rem, 3vw, 2.7rem);
  --sk26-h3: 1.18rem;
  --sk26-body: 1rem;
  --sk26-lead: clamp(1.06rem, 1.15vw, 1.2rem);
}

/* The default accent becomes electric violet. Named selectors only: a bare
   html[data-sk-accent] rule here would override every other accent, because
   this file loads after appearance-tint.css. */
html[data-sk-accent="default"],
html:not([data-sk-accent]) {
  --sk-pick: #0007cb;
  --sk-pick-hover: #0005a3;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: #e9e9ff;
  --sk-pick-line: rgba(0, 7, 203, 0.26);
  --sk-pick-tint: #f6f5f1;
}

html[data-sk-scheme="dark"] {
  --sk26-canvas: #101010;
  --sk26-linen: #181816;
  --sk26-stone: #3a3833;
  --sk26-hairline: #2d2c28;
  --sk26-surface: #161615;
  --sk26-ink: #f2f0eb;
  --sk26-iron: #d2cec6;
  --sk26-graphite: #aaa59c;
  --sk26-muted: #928d84;
  --sk26-electric: #aab2ff;
  --sk26-electric-soft: #1d1e33;
  --sk26-electric-line: rgba(170, 178, 255, 0.32);
}

html[data-sk-scheme="dark"][data-sk-accent="default"],
html[data-sk-scheme="dark"]:not([data-sk-accent]) {
  --sk-pick: #aab2ff;
  --sk-pick-hover: #bdc3ff;
  --sk-pick-ink: #101010;
  --sk-pick-soft: rgba(170, 178, 255, 0.16);
  --sk-pick-line: rgba(170, 178, 255, 0.34);
  /* The tint was the one token this block did not restate, so every surface
     that paints a tint wash -- related-tools cards, the tool guide panels,
     media panels -- kept the light #f6f5f1 from the light-mode block and
     rendered as a pale block on a near-black page. */
  --sk-pick-tint: #1b1b22;
}

/* --------------------------------------------------------------- base ---- */

html {
  background-color: var(--sk26-canvas);
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

html body {
  background-color: var(--sk26-canvas);
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The appearance tint paints a translucent wash over the body and every
   principal surface. On a cream canvas that reads as dirty grey, so the wash
   is removed from the page surfaces and the chosen accent is left to the
   controls that use it deliberately. */
html[data-sk-accent] body,
html[data-sk-accent] #header,
html[data-sk-accent] #footer,
html[data-sk-accent] .ct-footer,
html[data-sk-accent] .studykit-values-footer-container,
html[data-sk-accent] .sk26-home,
html[data-sk-accent] .sk26-hero,
html[data-sk-accent] .sk26-index,
html[data-sk-accent] .sk-hero,
html[data-sk-accent] .sk-media-page .sk-media-panel,
html[data-sk-accent] .sk-media-page .sk-media-guide article,
html[data-sk-accent] .sk-media-page .sk-media-note,
html[data-sk-accent] .sk-tb-card,
html[data-sk-accent] .sk-tb-chip,
html[data-sk-accent] .sk-tb-search input.sk-tb-search-input,
html[data-sk-accent] .sk-fav-strip,
html[data-sk-accent] .sk-fav-link {
  background-image: none;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--sk26-sans);
  color: var(--sk26-ink);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

body p {
  text-wrap: pretty;
}

body a {
  color: var(--sk26-accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

body a:hover {
  color: var(--sk26-accent-hover);
}

::selection {
  background: var(--sk26-electric);
  color: #ffffff;
}

html[data-sk-scheme="dark"] ::selection {
  background: #aab2ff;
  color: #101010;
}

.sk26-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- header ---- */

body[data-header*="type-1"] #header,
body[data-header*="type-1"] #header .ct-header,
body[data-header*="type-1"] #header [data-row="middle"],
body[data-header*="type-1"] #header .ct-sticky-container,
body[data-header*="type-1"] #header [data-sticky] {
  background-color: var(--sk26-canvas);
  background-image: none;
  box-shadow: none;
}

body[data-header*="type-1"] #header {
  --header-height: 76px;
  border-bottom: 1px solid var(--sk26-hairline);
}

body[data-header*="type-1"] #header [data-row="middle"] {
  min-height: 76px;
}

body[data-header*="type-1"] #header .ct-container {
  max-width: var(--sk26-max);
  min-height: 76px;
  grid-template-rows: 76px;
  padding-inline: 24px;
}

/* Blocksy gives the column wrappers a 120px minimum of their own, so setting
   the container alone leaves the row at its old height. */
body[data-header*="type-1"] #header .ct-container > div,
body[data-header*="type-1"] #header [data-column] {
  min-height: 0;
}

body[data-header*="type-1"] #header .ct-sticky-container {
  height: 76px !important;
}

body[data-header*="type-1"] .site-branding {
  gap: 10px;
}

body[data-header*="type-1"] .site-logo-container img {
  width: auto;
  max-height: 34px;
  /* The supplied mark is a pink-purple gradient. A grayscale, darkened copy
     reads as ink on cream and lets the violet be the only saturated colour. */
  filter: grayscale(1) contrast(1.15) brightness(0.28);
}

html[data-sk-scheme="dark"] body[data-header*="type-1"] .site-logo-container img {
  filter: grayscale(1) contrast(1.1) brightness(1.9);
}

body[data-header*="type-1"] .site-title {
  font-family: var(--sk26-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--sk26-ink);
}

body[data-header*="type-1"] .site-title a {
  color: var(--sk26-ink);
  text-decoration: none;
}

body[data-header*="type-1"] .site-title a:hover {
  color: var(--sk26-accent);
}

/* Navigation: small, quiet, and set in the sans rather than the theme's
   button-like uppercase. The underline is the only hover state. */
body[data-header*="type-1"] .ct-header .menu > li > a,
body[data-header*="type-1"] .ct-header .menu > li > .ct-menu-link {
  height: auto;
  padding: 28px 14px;
  font-family: var(--sk26-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sk26-ink);
  text-decoration: none;
}

body[data-header*="type-1"] .ct-header .menu > li > a:hover,
body[data-header*="type-1"] #header .menu > li > a:hover,
body[data-header*="type-1"] #header .menu > li.current-menu-item > a,
body[data-header*="type-1"] #header .menu > li.current-menu-ancestor > a {
  background: transparent;
  color: var(--sk26-accent);
}

body[data-header*="type-1"] .ct-header .menu > li > a::after {
  display: none;
}

body[data-header*="type-1"] #header .sub-menu {
  background: var(--sk26-surface);
  background-image: none;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.1);
  padding: 6px;
}

/* Blocksy sets the dropdown link colour through a palette variable on a
   selector with an extra class, which beat a plain .sub-menu .ct-menu-link
   rule and left near-white text on the new white panel. Naming the menu item
   as well matches that weight and settles the colour. */
body[data-header*="type-1"] #header nav[data-id="menu"] .sub-menu .menu-item > a,
body[data-header*="type-1"] #header .sub-menu .menu-item > .ct-menu-link {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sk26-iron);
  border-radius: 2px;
  padding: 9px 12px;
}

body[data-header*="type-1"] #header nav[data-id="menu"] .sub-menu .menu-item > a:hover,
body[data-header*="type-1"] #header .sub-menu .menu-item > .ct-menu-link:hover {
  background: var(--sk26-linen);
  color: var(--sk26-accent);
}

body[data-header*="type-1"] #header .sub-menu li + li {
  border-top-color: var(--sk26-hairline);
}

body[data-header*="type-1"] .ct-header .ct-toggle,
body[data-header*="type-1"] .ct-header .ct-header-trigger {
  color: var(--sk26-ink);
  border-radius: var(--sk26-radius);
}

/* The offcanvas drawer is the one surface the theme paints near-black in both
   schemes. On a cream site that reads as a different product, so it follows the
   page instead and the menu becomes an editorial contents list. */
#offcanvas .ct-panel-inner {
  background: var(--sk26-canvas) !important;
  border-left: 1px solid var(--sk26-hairline);
}

/* The theme paints every .ct-toggle with !important background and border,
   and points the icon at a translucent white. On the cream drawer that made
   the close control invisible, so all three are forced here. */
#offcanvas .ct-toggle-close {
  width: 38px;
  height: 38px;
  color: var(--sk26-ink);
  background: var(--sk26-surface) !important;
  border: 1px solid var(--sk26-hairline) !important;
  border-radius: var(--sk26-radius) !important;
  --theme-icon-color: var(--sk26-ink);
}

#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-close .ct-icon {
  width: 12px;
  height: 12px;
  fill: var(--sk26-ink) !important;
}

#offcanvas .mobile-menu .ct-menu-link {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

#offcanvas .mobile-menu > ul > li > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent {
  border-bottom: 1px solid var(--sk26-hairline);
}

#offcanvas .mobile-menu > ul > li > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
  padding: 15px 0;
}

#offcanvas .mobile-menu .sub-menu .ct-menu-link {
  color: var(--sk26-graphite);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 11px 0;
}

#offcanvas .mobile-menu .ct-menu-link:hover {
  color: var(--sk26-accent);
}

#offcanvas .ct-toggle-dropdown-mobile {
  color: var(--sk26-ink);
  background: transparent !important;
  border: 0 !important;
}

#offcanvas .ct-toggle-dropdown-mobile svg,
#offcanvas .ct-toggle-dropdown-mobile .ct-icon {
  fill: var(--sk26-ink) !important;
}

#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input {
  min-height: 44px;
  height: 44px;
  padding: 0 44px 0 13px;
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-size: 0.9rem;
}

#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input::placeholder {
  color: var(--sk26-graphite);
}

#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input:focus,
#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input:focus-visible {
  color: var(--sk26-ink);
  border-color: var(--sk26-accent);
  outline: 2px solid var(--sk26-accent);
  outline-offset: 2px;
}

#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button,
#offcanvas .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button svg {
  color: var(--sk26-ink);
  stroke: currentColor;
}

/* The header search is a site-wide control, not the hero. It is kept small
   and rectangular so it does not compete with the hero search below. The
   plugin's own stylesheet targets an ID, so these selectors name it too. */
body .asl_w_container {
  width: 224px;
  min-width: 0;
  margin: 0;
}

body #ajaxsearchlite1 .probox,
body div.asl_w .probox {
  height: 40px;
  margin: 0;
  padding: 0;
  background-color: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body #ajaxsearchlite1 .probox .proinput,
body #ajaxsearchlite1 .probox .proinput form,
body div.asl_w .probox .proinput {
  height: 38px;
}

body #ajaxsearchlite1 .probox .proinput input,
body div.asl_w .probox .proinput input {
  height: 38px;
  padding: 0 8px 0 12px;
  font-family: var(--sk26-sans) !important;
  font-size: 0.82rem !important;
  line-height: 38px !important;
  color: var(--sk26-ink) !important;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body #ajaxsearchlite1 .probox .proinput input::placeholder,
body div.asl_w .probox .proinput input::placeholder {
  color: var(--sk26-graphite) !important;
  opacity: 1;
}

body #ajaxsearchlite1 .probox .promagnifier,
body div.asl_w .probox .promagnifier {
  width: 38px;
  height: 38px;
  color: var(--sk26-ink);
  background: transparent;
  border: 0;
  border-radius: 0 var(--sk26-radius) var(--sk26-radius) 0;
}

body #ajaxsearchlite1 .probox .promagnifier .innericon svg,
body div.asl_w .probox .promagnifier .innericon svg {
  fill: var(--sk26-ink);
}

body #ajaxsearchlite1 .probox .promagnifier:hover .innericon svg,
body div.asl_w .probox .promagnifier:hover .innericon svg {
  fill: var(--sk26-accent);
}

body #ajaxsearchlite1 .probox .proclose,
body #ajaxsearchlite1 .probox .proloading,
body div.asl_w .probox .proclose,
body div.asl_w .probox .proloading {
  width: 34px;
  height: 34px;
}

body #ajaxsearchlite1 .probox .proloading .asl_loader-inner,
body div.asl_w .probox .proloading .asl_loader-inner {
  border-color: var(--sk26-accent) transparent var(--sk26-accent) transparent;
}

body .asl_r.asl_w {
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
  overflow: hidden;
}

body .asl_r.asl_w .item {
  background: var(--sk26-surface) !important;
}

body .asl_r.asl_w .item:hover {
  background: var(--sk26-linen) !important;
}

body .asl_r.asl_w .item .title,
body .asl_r.asl_w .item .etc {
  font-family: var(--sk26-sans);
}

/* The one appearance control: a single light/dark button injected into the
   header. Give it the same quiet square language as everything else, and drop
   the old lavender fill. The palette and icon swapping come from
   color-scheme.css; this layer owns the surface and the focus ring. */
body .sk-appearance-toggle,
body .sk-scheme-toggle {
  border-radius: var(--sk26-radius);
  border-color: var(--sk26-hairline);
  background: var(--sk26-surface);
  color: var(--sk26-ink);
}

body .sk-appearance-toggle:hover,
body .sk-scheme-toggle:hover {
  background: var(--sk26-linen);
  border-color: var(--sk26-ink);
  color: var(--sk26-ink);
}

body .sk-dark-toggle:focus-visible {
  outline: 3px solid var(--sk26-accent);
  outline-offset: 2px;
}

html[data-sk-scheme="dark"] body .sk-scheme-toggle {
  border-color: var(--sk26-hairline);
  background: var(--sk26-surface);
  color: var(--sk26-ink);
}

/* The old dark hover rule is more specific than the base one above, so it
   needs its own override rather than inheriting the light hover. */
html[data-sk-scheme="dark"] body .sk-scheme-toggle:hover {
  border-color: var(--sk26-stone);
  background: var(--sk26-linen);
  color: var(--sk26-ink);
}

/* ------------------------------------------------------------- footer ---- */

body #footer,
body #footer .ct-footer,
body #footer [data-row],
body #footer .ct-container {
  background-color: var(--sk26-canvas);
  background-image: none;
  box-shadow: none;
}

body #footer {
  border-top: 1px solid var(--sk26-hairline);
  margin-top: 0;
}

body .studykit-values-footer-container {
  font-family: var(--sk26-sans);
  background-color: var(--sk26-canvas);
  border-top: 0;
  margin-top: 0;
}

body .studykit-values-footer-content {
  max-width: var(--sk26-max);
  padding: 36px 24px 24px;
}

body .studykit-features-row {
  gap: 24px 30px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--sk26-hairline);
}

body .feature-bar-item {
  gap: 11px;
  flex: 1 1 190px;
}

body .feature-bar-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: var(--sk26-radius);
  background: transparent;
  color: var(--sk26-accent);
  border: 1px solid var(--sk26-hairline);
}

/* The footer's feature icons ship with a pastel chip per item, and the dark
   scheme stylesheet gives each one its own tinted chip. The rest of the page
   has no tinted chips, so they become a hairline square with the accent icon
   in both schemes. The selectors outrank the per-icon colour rules. */
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-icon-wrapper,
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-free,
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-reg,
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-priv,
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-mob,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-icon-wrapper,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-free,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-reg,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-priv,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-icon-wrapper.icon-mob {
  background: transparent;
  color: var(--sk26-accent);
  border: 1px solid var(--sk26-hairline);
}

/* The footer text colours are repainted by color-scheme.css with a violet
   cast, and that file wins on specificity. Warm neutral text is restored for
   both schemes so the footer belongs to the same paper as the page. */
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-title,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-title,
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-share-title,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-share-title {
  color: var(--sk26-ink);
}

html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-bar-text p:not(.feature-bar-title),
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-bar-text p:not(.feature-bar-title),
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .feature-share-box p:not(.feature-share-title),
html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-share-box p:not(.feature-share-title),
html:not([data-sk-scheme="dark"]) body .studykit-values-footer-container .studykit-copyright-bar p,
html[data-sk-scheme="dark"] body .studykit-values-footer-container .studykit-copyright-bar p {
  color: var(--sk26-graphite);
}

html[data-sk-scheme="dark"] body .studykit-values-footer-container .feature-share-box {
  background: var(--sk26-linen);
  border-color: var(--sk26-hairline);
}

html[data-sk-scheme="dark"] body .studykit-values-footer-container .footer-divider {
  color: var(--sk26-stone);
}

body .feature-bar-icon-wrapper svg {
  width: 16px;
  height: 16px;
}

body .feature-bar-title {
  margin: 0 0 2px;
  font-family: var(--sk26-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sk26-ink);
}

body .feature-bar-text p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--sk26-graphite);
}

body .feature-share-box {
  min-width: 250px;
  flex: 1.2 1 auto;
  padding: 12px 16px;
  background: var(--sk26-linen);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body .feature-share-title {
  margin: 0 0 2px;
  font-family: var(--sk26-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk26-ink);
}

body .feature-share-box p {
  font-size: 0.76rem;
  color: var(--sk26-graphite);
}

body .share-heart {
  font-size: 18px;
  filter: grayscale(1);
  opacity: 0.55;
  animation: none;
}

body .studykit-copyright-bar {
  border-top: 0;
  padding-top: 0;
}

body .studykit-copyright-bar p {
  font-family: var(--sk26-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk26-muted);
}

body .footer-privacy-link {
  color: var(--sk26-ink);
  font-weight: 500;
}

body .footer-privacy-link:hover {
  color: var(--sk26-accent);
}

body .footer-divider {
  color: var(--sk26-stone);
}

/* --------------------------------------------------------- home shell ---- */

body.home #main > .ct-container-full {
  padding-top: 0;
}

body.home .entry-content {
  --sk26-gutter: clamp(18px, 4vw, 24px);
  max-width: none;
}

.sk26-home {
  max-width: var(--sk26-max);
  margin: 0 auto;
  padding: 0 24px 72px;
  color: var(--sk26-ink);
}

.sk26-home *,
.sk26-home *::before,
.sk26-home *::after {
  box-sizing: border-box;
}

.sk26-home > *:first-child {
  margin-top: 0;
}

/* Every band is separated by a hairline and generous air. That is the whole
   rhythm of the design: no cards-on-grey, no drop shadows, just rules. */
.sk26-band {
  margin-top: clamp(40px, 4.4vw, 52px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--sk26-hairline);
}

/* The hero already closes with a rule, so the band that follows it needs
   space rather than a second line right underneath. */
.sk26-home > .sk26-popular {
  margin-top: 0;
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 0;
}

.sk26-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sk26-graphite);
}

.sk26-label::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--sk26-accent);
}

.sk26-band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.sk26-band-head h2 {
  margin: 0;
  font-size: var(--sk26-h2);
  font-weight: 300;
  letter-spacing: -0.045em;
}

.sk26-band-head p {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--sk26-graphite);
  font-size: 0.95rem;
}

.sk26-band-head .sk26-label {
  margin-bottom: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.sk26-textlink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  font-family: var(--sk26-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sk26-ink);
  border-bottom: 1px solid var(--sk26-ink);
}

.sk26-textlink:hover {
  color: var(--sk26-accent);
  border-bottom-color: var(--sk26-accent);
}

.sk26-textlink span {
  transition: transform 0.18s ease;
}

.sk26-textlink:hover span {
  transform: translateX(3px);
}

/* --------------------------------------------------------------- hero ---- */

.sk26-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.72fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(24px, 3.4vw, 44px) 0 clamp(28px, 3.4vw, 40px);
  border-bottom: 1px solid var(--sk26-hairline);
}

.sk26-hero-copy {
  min-width: 0;
}

.sk26-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sk26-graphite);
}

.sk26-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--sk26-ink);
}

.sk26-hero h1 {
  max-width: 14ch;
  margin: 0 0 24px;
  font-size: var(--sk26-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.058em;
  color: var(--sk26-ink);
  text-wrap: balance;
}

.sk26-hero h1 em {
  display: block;
  font-family: var(--sk26-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--sk26-accent);
}

.sk26-lede {
  max-width: 56ch;
  margin: 0 0 30px;
  color: var(--sk26-iron);
  font-size: var(--sk26-lead);
  line-height: 1.58;
  letter-spacing: -0.012em;
}

.sk26-lede strong {
  font-weight: 500;
  color: var(--sk26-ink);
}

/* The hero search is the page's primary action. The input is a sheet of paper;
   the button is a black block. Nothing is pill-shaped. */
.sk26-search {
  display: flex;
  align-items: stretch;
  max-width: 590px;
  min-height: 58px;
  border: 1px solid var(--sk26-ink);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  overflow: hidden;
}

.sk26-search:focus-within {
  outline: 2px solid var(--sk26-accent);
  outline-offset: 3px;
}

.sk26-search-icon {
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  height: 18px;
  margin-left: 18px;
  color: var(--sk26-ink);
}

.sk26-search input {
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  padding: 15px 12px;
  font-family: var(--sk26-sans);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--sk26-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.sk26-search input:focus {
  outline: none;
  box-shadow: none;
}

.sk26-search input::placeholder {
  color: var(--sk26-graphite);
  opacity: 1;
}

.sk26-search button {
  flex: 0 0 auto;
  margin: 5px;
  padding: 0 22px;
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sk26-canvas);
  background: var(--sk26-ink);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sk26-search button:hover {
  background: var(--sk26-accent);
  color: #ffffff;
}

.sk26-search button:focus-visible {
  outline: 2px solid var(--sk26-accent);
  outline-offset: -4px;
}

.sk26-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--sk26-graphite);
}

.sk26-trust li {
  display: inline-flex;
  align-items: center;
}

.sk26-trust li + li::before {
  content: "·";
  margin: 0 11px;
  color: var(--sk26-stone);
}

/* -------------------------------------------------------- tool index ---- */

.sk26-index {
  position: relative;
  padding: 16px 22px 10px;
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

.sk26-index::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--sk26-ink);
}

.sk26-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--sk26-hairline);
}

.sk26-index-title {
  margin: 0;
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk26-ink);
}

.sk26-index-total {
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk26-muted);
}

.sk26-index-total strong {
  font-family: var(--sk26-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--sk26-accent);
  margin-right: 2px;
}

.sk26-index-list {
  margin: 0;
  padding: 3px 0 0;
  list-style: none;
}

.sk26-index-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  color: var(--sk26-ink);
  text-decoration: none;
}

.sk26-index-name {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.sk26-index-leader {
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted var(--sk26-stone);
  transform: translateY(-3px);
}

.sk26-index-count {
  flex: 0 0 auto;
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  color: var(--sk26-muted);
}

.sk26-index-row:hover .sk26-index-name,
.sk26-index-row:focus-visible .sk26-index-name {
  color: var(--sk26-accent);
}

.sk26-index-row:hover .sk26-index-count {
  color: var(--sk26-accent);
}

.sk26-index-row:focus-visible {
  outline: 2px solid var(--sk26-accent);
  outline-offset: 2px;
}

.sk26-index-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--sk26-hairline);
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sk26-ink);
  text-decoration: none;
}

.sk26-index-all:hover {
  color: var(--sk26-accent);
}

.sk26-index-all span {
  transition: transform 0.18s ease;
}

.sk26-index-all:hover span {
  transform: translateX(3px);
}

/* ------------------------------------------------------- favourites ---- */

body.home .sk-fav-strip {
  margin: 28px 0 0;
  padding: 18px 20px;
  background: var(--sk26-linen);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.home .sk-fav-striptitle {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--sk26-ink);
}

body.home .sk-fav-striphint {
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk26-muted);
}

body.home .sk-fav-link {
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.home .sk-fav-link:hover {
  background: var(--sk26-surface);
  border-color: var(--sk26-accent);
}

body.home .sk-fav-name {
  font-weight: 500;
  color: var(--sk26-ink);
}

body.home .sk-fav-blurb {
  color: var(--sk26-graphite);
}

/* ------------------------------------------------------ popular cards ---- */

body.home .sk-tb-section {
  margin-top: 0;
}

body.home .sk-tb-section-head {
  margin-bottom: 18px;
}

body.home .sk-tb-section-title {
  font-size: var(--sk26-h2);
  font-weight: 300;
  letter-spacing: -0.045em;
  color: var(--sk26-ink);
}

body.home .sk-tb-section-sub {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--sk26-graphite);
}

/* The popular shortcode ships its own heading. The home page supplies a
   larger editorial one above it, and keeps the methodology line, so only the
   duplicate title is hidden. */
.sk26-popular .sk-tb-section-head {
  display: none;
}

body.home .sk-tb-grid {
  gap: 14px;
}

body.home .sk-tb-popular-grid {
  counter-reset: sk26-pop;
}

body.home .sk-tb-popular .sk-tb-item {
  position: relative;
  counter-increment: sk26-pop;
}

body.home .sk-tb-popular .sk-tb-item::before {
  content: counter(sk26-pop, decimal-leading-zero);
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 2;
  font-family: var(--sk26-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sk26-stone);
  pointer-events: none;
}

body.home .sk-tb-card {
  gap: 12px;
  padding: 18px 18px 17px;
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  color: var(--sk26-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.home .sk-tb-card:hover,
body.home .sk-tb-card:focus-visible {
  border-color: var(--sk26-ink);
  background: var(--sk26-linen);
  transform: none;
  box-shadow: none;
}

body.home .sk-tb-popular .sk-tb-card {
  padding-right: 44px;
}

body.home .sk-tb-card-icon {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 2px;
  color: var(--sk26-accent);
  background: transparent;
  border: 1px solid var(--sk26-hairline);
}

body.home .sk-tb-card:hover .sk-tb-card-icon {
  border-color: var(--sk26-accent-line);
  background: var(--sk26-accent-soft);
}

body.home .sk-tb-icon {
  width: 16px;
  height: 16px;
}

body.home .sk-tb-card-name {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sk26-ink);
}

body.home .sk-tb-card-desc {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.48;
  color: var(--sk26-graphite);
}

/* ----------------------------------------------------- tool browser ---- */

body.home {
  --sk-tb-surface: var(--sk26-surface);
  --sk-tb-ink: var(--sk26-ink);
  --sk-tb-muted: var(--sk26-graphite);
  --sk-tb-line: var(--sk26-hairline);
  --sk-tb-accent: var(--sk26-accent);
  --sk-tb-accent-soft: var(--sk26-accent-soft);
  --sk-tb-accent-line: var(--sk26-accent-line);
}

.sk26-browse {
  scroll-margin-top: 96px;
}

body.home .sk-tb-browser .sk-tb-section-title {
  font-size: var(--sk26-h2);
}

body.home .sk-tb-search-row {
  margin-bottom: 28px;
}

body.home .sk-tb-search input.sk-tb-search-input {
  min-height: 56px;
  padding: 14px 16px 14px 46px;
  font-size: 1rem;
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.home .sk-tb-search input.sk-tb-search-input:focus-visible {
  outline: 2px solid var(--sk26-accent);
  outline-offset: 2px;
  border-color: var(--sk26-ink);
}

body.home .sk-tb-search-icon {
  left: 17px;
  width: 18px;
  height: 18px;
  color: var(--sk26-ink);
  opacity: 1;
}

body.home .sk-tb-status {
  margin-top: 9px;
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk26-muted);
}

body.home .sk-tb-layout {
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 34px;
}

body.home .sk-tb-cats {
  top: 100px;
  gap: 0;
  border-top: 1px solid var(--sk26-hairline);
}

body.home .sk-tb-cats::before {
  content: "Categories";
  display: block;
  padding: 10px 0 9px;
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk26-muted);
}

body.home .sk-tb-chip {
  width: 100%;
  min-height: 0;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sk26-hairline);
  border-radius: 0;
  color: var(--sk26-ink);
}

body.home .sk-tb-chip:hover {
  color: var(--sk26-accent);
  border-bottom-color: var(--sk26-accent-line);
}

body.home .sk-tb-chip.is-active {
  padding-inline: 10px;
  background: var(--sk26-ink);
  border-bottom-color: var(--sk26-ink);
  color: var(--sk26-canvas);
}

body.home .sk-tb-chip-icon,
body.home .sk-tb-chip-hint {
  display: none;
}

body.home .sk-tb-chip-text {
  display: block;
  min-width: 0;
}

body.home .sk-tb-chip-name {
  font-family: var(--sk26-sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  white-space: normal;
}

body.home .sk-tb-chip.is-active .sk-tb-chip-name {
  font-weight: 500;
}

body.home .sk-tb-chip-count {
  min-width: 0;
  padding: 0;
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  font-weight: 400;
  text-align: right;
  color: var(--sk26-muted);
  background: transparent;
}

body.home .sk-tb-chip.is-active .sk-tb-chip-count {
  color: var(--sk26-canvas);
}

body.home .sk-tb-results .sk-tb-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.home .sk-tb-empty {
  border: 1px dashed var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  color: var(--sk26-graphite);
}

/* --------------------------------------------------------- explainer ---- */

.sk26-explain .sk-home-section-head {
  max-width: 760px;
  margin-bottom: 30px;
}

.sk26-explain .sk-home-section-head h2 {
  margin: 0;
  font-size: var(--sk26-h2);
  font-weight: 300;
  letter-spacing: -0.045em;
}

.sk26-explain .sk-home-section-head p {
  margin: 10px 0 0;
  color: var(--sk26-graphite);
  font-size: 0.98rem;
}

.sk26-explain .sk-home-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--sk26-hairline);
}

.sk26-explain .sk-home-flow article {
  padding: 22px 26px 0 0;
  background: transparent;
  border-right: 1px solid var(--sk26-hairline);
  border-radius: 0;
}

.sk26-explain .sk-home-flow article:last-child {
  border-right: 0;
  padding-right: 0;
}

.sk26-explain .sk-home-flow article:not(:first-child) {
  padding-left: 26px;
}

.sk26-explain .sk-home-flow-label {
  margin: 0 0 12px;
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk26-accent);
}

.sk26-explain .sk-home-flow h3 {
  margin: 0 0 9px;
  font-size: var(--sk26-h3);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.sk26-explain .sk-home-flow p {
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 0.9rem;
  line-height: 1.62;
}

/* ------------------------------------------------------------- note ---- */

.sk26-note {
  margin-top: clamp(48px, 6vw, 76px);
  padding: 28px 30px;
  background: var(--sk26-linen);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

.sk26-note h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.sk26-note p {
  max-width: 62ch;
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 0.95rem;
}

.sk26-note a {
  color: var(--sk26-ink);
  text-decoration-color: var(--sk26-accent);
  text-decoration-thickness: 2px;
}

.sk26-note a:hover {
  color: var(--sk26-accent);
}

/* --------------------------------------------------------- tool pages ---- */

/* The shell of a tool page, not the tool itself. The controls inside keep
   their own layout and semantics; this only replaces the lilac card and the
   pill radii that the old direction used. */
body .sk-hero {
  padding: 34px 0 30px;
  margin-bottom: 30px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sk26-hairline);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sk26-sans);
}

body .sk-hero-kicker {
  gap: 10px;
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--sk26-graphite);
}

body .sk-hero-kicker::before {
  width: 18px;
  height: 1px;
  border-radius: 0;
  background: var(--sk26-accent);
}

body .sk-hero h1 {
  max-width: 18ch;
  margin: 14px 0 12px;
  font-family: var(--sk26-sans);
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.052em;
  color: var(--sk26-ink);
}

body .sk-hero p {
  max-width: 64ch;
  color: var(--sk26-iron);
  font-size: 1.04rem;
  line-height: 1.62;
}

/* The breadcrumb lives outside .sk-media-page, in the theme's narrow reading
   column, so it drifted away from the tool itself. Giving it the same width as
   the tool container puts the trail back on the same left edge. */
body .sk-crumbs {
  box-sizing: border-box;
  width: min(1140px, 100vw);
  max-width: none;
  margin: 26px auto 18px;
  padding: 0 20px;
}

/* Links and focus rings inside tool pages follow the same accent. */
body .sk-crumbs a,
body .sk-related a {
  color: var(--sk26-accent);
}

/* The media tools keep every colour in six custom properties, so re-pointing
   them replaces the old lilac palette everywhere at once without touching the
   controls. Black is the primary action in both schemes; the accent is kept
   for links, focus rings, and the note's rule. */
html[data-sk-accent] body .sk-media-page,
body .sk-media-page {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-accent: var(--sk26-accent);
  --sk-accent-strong: var(--sk26-ink);
  --sk-on-accent: var(--sk26-canvas);
  --sk-accent-bg: var(--sk26-ink);
  --sk-line: var(--sk26-hairline);
  --sk-surface: var(--sk26-surface);
  --sk-soft: var(--sk26-linen);
  --sk-shadow: none;
}

html[data-sk-scheme="dark"] html[data-sk-accent] body .sk-media-page,
body .sk-media-page {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-accent: var(--sk26-accent);
  --sk-accent-strong: var(--sk26-ink);
  --sk-on-accent: var(--sk26-canvas);
  --sk-accent-bg: var(--sk26-ink);
  --sk-line: var(--sk26-hairline);
  --sk-surface: var(--sk26-surface);
  --sk-soft: var(--sk26-linen);
  --sk-shadow: none;
}

body .sk-media-page .sk-media-panel {
  padding: 22px;
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body .sk-media-page .sk-media-drop {
  padding: 26px 20px;
  background: var(--sk26-linen);
  border: 1px dashed var(--sk26-stone);
  border-radius: var(--sk26-radius);
}

body .sk-media-page .sk-media-drop:hover,
body .sk-media-page .sk-media-drop:focus-visible,
body .sk-media-page .sk-media-drop[data-drag="true"] {
  background: var(--sk26-surface);
  border-color: var(--sk26-accent);
}

body .sk-media-page .sk-media-drop strong,
body .sk-media-page .sk-media-field > span {
  font-weight: 500;
}

body .sk-media-page .sk-media-button,
body .sk-media-page .sk-media-chip,
body .sk-media-page .sk-media-file,
body .sk-media-page .sk-media-range output,
body .sk-media-page select,
body .sk-media-page input[type="text"],
body .sk-media-page input[type="number"],
body .sk-media-page input[type="color"],
body .sk-media-page .sk-media-stage,
body .sk-media-page .sk-media-compare .sk-media-frame,
body .sk-media-page .sk-media-stat,
body .sk-media-page .sk-media-text,
body .sk-media-page .sk-media-note,
body .sk-media-page .sk-media-guide article {
  border-radius: var(--sk26-radius);
}

body .sk-media-page .sk-media-button {
  min-height: 46px;
  padding: 0 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body .sk-media-page .sk-media-button:hover:not(:disabled) {
  filter: none;
  background: var(--sk26-accent);
  color: #ffffff !important;
}

body .sk-media-page .sk-media-button.secondary:hover:not(:disabled) {
  background: var(--sk26-linen);
  color: var(--sk26-ink) !important;
}

body .sk-media-page .sk-media-note {
  padding: 18px 20px;
  border-left: 3px solid var(--sk26-accent);
  background: var(--sk26-linen);
}

body .sk-media-page .sk-media-guide article {
  background: var(--sk26-surface);
}

/* The star is the only floating control in the hero. It was a circle; the
   rest of the page uses a 4px rectangle, so it follows. */
body .sk-fav-star {
  min-width: 40px;
  min-height: 40px;
  padding: 5px 10px;
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  color: var(--sk26-graphite);
}

body .sk-fav-strip {
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
}

body .sk-fav-link {
  border-radius: var(--sk26-radius);
}

/* Older tool pages carry their own pastel panel styles inline. These selectors
   only reach the word counter's own classes, so the rewrite and video tools
   keep their layouts while the type and palette join the rest of the site. */
body .studykit-wordcounter-container {
  max-width: 1140px;
  margin: 0 auto 24px;
  padding: 30px 20px 60px;
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
}

body .studykit-wordcounter-container .metrics-grid {
  gap: 12px;
  margin-bottom: 24px;
}

body .studykit-wordcounter-container .metric-card {
  padding: 16px 14px;
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  text-align: left;
}

body .studykit-wordcounter-container .metric-card:hover {
  transform: none;
  border-color: var(--sk26-ink);
}

body .studykit-wordcounter-container .metric-value {
  margin: 0 0 6px;
  color: var(--sk26-accent);
  font-family: var(--sk26-serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

body .studykit-wordcounter-container .metric-label {
  color: var(--sk26-graphite);
  font-family: var(--sk26-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

body .studykit-wordcounter-container .counter-textarea {
  padding: 20px;
  color: var(--sk26-ink) !important;
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}

body .studykit-wordcounter-container .counter-textarea:focus {
  border-color: var(--sk26-accent);
  box-shadow: 0 0 0 3px var(--sk26-accent-line);
}

body .studykit-wordcounter-container .counter-textarea::placeholder {
  color: var(--sk26-graphite) !important;
  background: transparent !important;
}

body .studykit-wordcounter-container .clear-btn {
  min-height: 42px;
  padding: 0 16px;
  color: var(--sk26-ink) !important;
  background: transparent;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body .studykit-wordcounter-container .clear-btn:hover {
  color: var(--sk26-canvas) !important;
  background: var(--sk26-ink);
  border-color: var(--sk26-ink);
  transform: none;
}

body .studykit-wordcounter-container .tool-explainer-section {
  border-top-color: var(--sk26-hairline);
}

body .studykit-wordcounter-container .tool-explainer-section h2,
body .studykit-wordcounter-container .tool-explainer-section h3 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 300;
  letter-spacing: -0.035em;
}

body .studykit-wordcounter-container .tool-explainer-section h2 {
  font-size: var(--sk26-h2);
}

body .studykit-wordcounter-container .tool-explainer-section h3 {
  font-size: 1.18rem;
  font-weight: 400;
}

body .studykit-wordcounter-container .tool-explainer-section p,
body .studykit-wordcounter-container .tool-explainer-section li {
  color: var(--sk26-iron);
  font-family: var(--sk26-sans);
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
}

body .studykit-wordcounter-container .tool-explainer-section a {
  color: var(--sk26-accent);
}

/* The panels that carry the old 16-20px radii read as a different site next
   to the new shell. Only the wrappers are flattened, not every control: a
   segmented control or a colour swatch still needs its own shape. */
body .sk-media-page .sk-panel,
body .sk-media-page .sk-media-card,
body .sk-media-page .sk-drop,
body .sk-word-page .sk-word-card,
body .sk-shot-page .sk-shot-card,
body .sk-video-page .sk-video-card,
body .sk-audio-page .sk-audio-card,
body .sk-az-page .sk-az-card,
body .sk-po-page .sk-po-card {
  border-radius: var(--sk26-radius);
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
  .sk26-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
    gap: 34px;
  }

  .sk26-hero h1 {
    font-size: clamp(3rem, 6.6vw, 4.6rem);
  }

  body.home .sk-tb-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 26px;
  }

  body.home .sk-tb-results .sk-tb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .sk26-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .sk26-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.8rem, 9.2vw, 4.6rem);
  }

  .sk26-index {
    max-width: none;
  }

  .sk26-index-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  body.home .sk-tb-layout {
    display: block;
  }

  body.home .sk-tb-cats {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 0 6px;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body.home .sk-tb-cats::before {
    display: none;
  }

  body.home .sk-tb-chip {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--sk26-hairline);
    border-radius: var(--sk26-radius);
    scroll-snap-align: start;
  }

  body.home .sk-tb-chip.is-active {
    padding-inline: 11px;
    border-color: var(--sk26-ink);
  }

  body.home .sk-tb-chip-name {
    white-space: nowrap;
  }

  body.home .sk-tb-chip-count {
    padding: 0 0 0 2px;
  }

  .sk26-explain .sk-home-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk26-explain .sk-home-flow article,
  .sk26-explain .sk-home-flow article:not(:first-child) {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--sk26-hairline);
  }

  .sk26-explain .sk-home-flow article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 72px;
  }

  body[data-header*="type-1"] #header {
    --header-height: 64px;
  }

  body[data-header*="type-1"] #header [data-row="middle"] {
    min-height: 64px;
  }

  body[data-header*="type-1"] #header .ct-container {
    min-height: 64px;
    grid-template-rows: 64px;
    padding-inline: 18px;
  }

  body[data-header*="type-1"] #header .ct-sticky-container {
    height: 64px !important;
  }

  body[data-header*="type-1"] .site-logo-container img {
    max-height: 30px;
  }

  body[data-header*="type-1"] .site-title {
    font-size: 0.98rem;
  }

  body .asl_w_container {
    width: 100%;
  }

  .sk26-home {
    padding: 0 18px 56px;
  }

  .sk26-hero {
    padding-top: 26px;
    padding-bottom: 28px;
    gap: 28px;
  }

  .sk26-eyebrow {
    margin-bottom: 14px;
    font-size: 0.6rem;
  }

  .sk26-hero h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(2.4rem, 11.4vw, 3.2rem);
    line-height: 0.96;
  }

  .sk26-lede {
    margin-bottom: 20px;
    font-size: 1.02rem;
  }

  .sk26-search {
    min-height: 54px;
  }

  .sk26-search-icon {
    margin-left: 14px;
    width: 16px;
    height: 16px;
  }

  .sk26-search input {
    padding: 12px 8px;
    font-size: 0.94rem;
  }

  .sk26-search button {
    margin: 4px;
    padding: 0 14px;
    font-size: 0.6rem;
  }

  .sk26-trust {
    margin-top: 14px;
    gap: 5px 14px;
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }

  .sk26-trust li + li::before {
    content: none;
    margin: 0;
  }

  /* On a phone the contents card would push the first tool cards two screens
     down. The same categories are one tap away in the directory below, so the
     card is dropped rather than shortened into something less useful. */
  .sk26-index {
    display: none;
  }

  .sk26-index {
    padding: 20px 18px 14px;
  }

  .sk26-index::before {
    left: 18px;
    right: 18px;
  }

  .sk26-index-row {
    padding: 6px 0;
  }

  .sk26-band-head {
    display: block;
    margin-bottom: 16px;
  }

  .sk26-band-head .sk26-textlink {
    margin-top: 10px;
  }

  body.home .sk-tb-grid,
  body.home .sk-tb-popular-grid,
  body.home .sk-tb-results .sk-tb-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.home .sk-tb-card {
    padding: 15px 15px 14px;
  }

  body.home .sk-tb-popular .sk-tb-card {
    padding-right: 40px;
  }

  body.home .sk-tb-popular-grid .sk-tb-card-name,
  body.home .sk-tb-popular-grid .sk-tb-card-desc,
  body.home .sk-tb-grid:not(.sk-tb-popular-grid) .sk-tb-card-name,
  body.home .sk-tb-grid:not(.sk-tb-popular-grid) .sk-tb-card-desc {
    -webkit-line-clamp: unset;
    display: block;
    min-height: 0;
  }

  .sk26-note {
    padding: 22px 20px;
  }

  body .studykit-values-footer-content {
    padding: 28px 18px 20px;
  }

  body .studykit-features-row {
    gap: 18px;
  }

  body .feature-bar-item {
    flex-basis: 100%;
  }
}

@media (max-width: 380px) {
  .sk26-search button {
    display: none;
  }
}

/* ------------------------------------------------------------- dark ---- */

html[data-sk-scheme="dark"] body {
  background-color: var(--sk26-canvas);
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body h1,
html[data-sk-scheme="dark"] body h2,
html[data-sk-scheme="dark"] body h3,
html[data-sk-scheme="dark"] body h4,
html[data-sk-scheme="dark"] body h5,
html[data-sk-scheme="dark"] body h6 {
  color: var(--sk26-ink);
}

/* The tint stylesheet turns every heading into the accent colour as soon as
   dark mode and an accent are both active. On a reading page that removes the
   hierarchy, so headings stay ink and the accent is kept for italic phrases,
   icons, and links. */
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h1,
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h2,
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h3,
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h4,
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h5,
html[data-sk-scheme="dark"][data-sk-accent] body .sk26-home h6 {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"][data-sk-accent] body.home .sk-tb-card {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"][data-sk-accent] body .sk-hero h1,
html[data-sk-scheme="dark"][data-sk-accent] body .sk-hero h2,
html[data-sk-scheme="dark"][data-sk-accent] body .sk-hero p,
html[data-sk-scheme="dark"][data-sk-accent] body .sk-media-page h1,
html[data-sk-scheme="dark"][data-sk-accent] body .sk-media-page h2,
html[data-sk-scheme="dark"][data-sk-accent] body .sk-media-page h3,
html[data-sk-scheme="dark"][data-sk-accent] body .studykit-wordcounter-container h1,
html[data-sk-scheme="dark"][data-sk-accent] body .studykit-wordcounter-container h2,
html[data-sk-scheme="dark"][data-sk-accent] body .studykit-wordcounter-container h3 {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"][data-sk-accent] body .sk-hero p {
  color: var(--sk26-iron);
}

html[data-sk-scheme="dark"][data-sk-accent] body .studykit-values-footer-container h3,
html[data-sk-scheme="dark"][data-sk-accent] body .studykit-values-footer-container h4 {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body a {
  color: var(--sk26-accent);
}

html[data-sk-scheme="dark"] body .sk26-search,
html[data-sk-scheme="dark"] body .sk26-index,
html[data-sk-scheme="dark"] body .sk-tb-card,
html[data-sk-scheme="dark"] body .sk-tb-search input.sk-tb-search-input,
html[data-sk-scheme="dark"] body .sk-fav-link {
  background-color: var(--sk26-surface);
}

html[data-sk-scheme="dark"] body .sk26-search button {
  background: var(--sk26-ink);
  color: var(--sk26-canvas);
}

html[data-sk-scheme="dark"] body .sk26-search button:hover {
  background: var(--sk26-accent);
  color: #101010;
}

html[data-sk-scheme="dark"] body .sk-tb-chip.is-active {
  background: var(--sk26-ink);
  color: var(--sk26-canvas);
}

html[data-sk-scheme="dark"] body .sk-tb-chip.is-active .sk-tb-chip-name,
html[data-sk-scheme="dark"] body .sk-tb-chip.is-active .sk-tb-chip-count {
  color: var(--sk26-canvas);
}

html[data-sk-scheme="dark"] body .sk26-note,
html[data-sk-scheme="dark"] body.home .sk-fav-strip {
  background: var(--sk26-linen);
}

html[data-sk-scheme="dark"] body .sk26-search input::placeholder,
html[data-sk-scheme="dark"] body.home .sk-tb-search input.sk-tb-search-input::placeholder {
  color: var(--sk26-graphite);
}

html[data-sk-scheme="dark"] body #ajaxsearchlite1 .probox,
html[data-sk-scheme="dark"] body div.asl_w .probox,
html[data-sk-scheme="dark"] body .asl_m .probox,
html[data-sk-scheme="dark"] body #ajaxsearchlite1 .prosettings,
html[data-sk-scheme="dark"] body div.asl_w .prosettings,
html[data-sk-scheme="dark"] body .asl_r.asl_w .item {
  background: var(--sk26-surface) !important;
  border-color: var(--sk26-hairline);
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body #ajaxsearchlite1 .probox .proinput input.orig,
html[data-sk-scheme="dark"] body div.asl_w .probox .proinput input.orig {
  color: var(--sk26-ink) !important;
}

html[data-sk-scheme="dark"] body #ajaxsearchlite1 .probox .proinput input.orig::placeholder,
html[data-sk-scheme="dark"] body div.asl_w .probox .proinput input.orig::placeholder {
  color: var(--sk26-graphite) !important;
  opacity: 1;
}

html[data-sk-scheme="dark"] body .asl_r.asl_w .item:hover {
  background: var(--sk26-linen) !important;
}

html[data-sk-scheme="dark"] body .studykit-values-footer-container {
  background: var(--sk26-canvas);
}

/* The dark scheme paints every .sk-home-flow article as a purple card, which
   put back the exact card treatment this direction removed in light mode. The
   articles are columns divided by a rule, not cards, and stay that way in both
   schemes. */
html[data-sk-scheme="dark"] body .sk26-explain .sk-home-flow article {
  background: transparent;
  border-color: var(--sk26-hairline);
}

html[data-sk-scheme="dark"] body .feature-share-box {
  background: var(--sk26-linen);
}

html[data-sk-scheme="dark"] body .sk-tb-card:hover,
html[data-sk-scheme="dark"] body .sk-tb-card:focus-visible {
  background: var(--sk26-linen);
}

/* --------------------------------------------------- archive + search ---- */

/* The hero index and the no-JavaScript search both land on these pages, so
   they get the same paper, type and rules as the home page rather than the
   rounded lavender cards the old design used. */

body.tax-tool_group .sk-group-archive {
  max-width: 1172px;
  padding: 56px 20px 88px;
  font-family: var(--sk26-sans);
  line-height: 1.65;
}

body.tax-tool_group .sk-group-archive-header {
  padding: 0 0 34px;
  border: 0;
  border-top: 2px solid var(--sk26-ink);
  border-bottom: 1px solid var(--sk26-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.tax-tool_group .sk-group-archive-header h1 {
  margin: 28px 0 16px;
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

body.tax-tool_group .sk-group-archive-header p {
  max-width: 66ch;
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 1.02rem;
  line-height: 1.65;
}

body.tax-tool_group .sk-group-archive-header p + p {
  margin-top: 14px;
}

body.tax-tool_group .sk-group-archive-header p:first-of-type {
  color: var(--sk26-iron);
  font-size: 1.16rem;
  line-height: 1.55;
}

body.tax-tool_group .sk-group-archive-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

body.tax-tool_group .sk-group-archive-link {
  height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.tax-tool_group .sk-group-archive-link:hover {
  border-color: var(--sk26-ink);
  background: var(--sk26-surface);
  box-shadow: none;
  transform: none;
}

body.tax-tool_group .sk-group-archive-name {
  color: var(--sk26-ink);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

body.tax-tool_group .sk-group-archive-blurb {
  margin: 8px 0 0;
  color: var(--sk26-graphite);
  font-size: 0.9rem;
  line-height: 1.55;
}

body.tax-tool_group .sk-group-archive-action {
  margin-top: auto;
  padding-top: 18px;
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

body.tax-tool_group .sk-group-empty {
  color: var(--sk26-graphite);
}

body.search-results .ct-container[data-vertical-spacing] {
  max-width: 1132px;
}

body.search-results .entry-header .page-title,
body.search-results .page-title {
  margin: 0 0 40px;
  padding-top: 28px;
  border-top: 2px solid var(--sk26-ink);
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
}

body.search-results .entries,
body.archive .entries {
  gap: 20px;
}

body.search-results .entry-card,
body.archive .entry-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  box-shadow: none;
  color: var(--sk26-ink);
}

body.search-results .entry-card:hover,
body.archive .entry-card:hover {
  border-color: var(--sk26-ink);
  box-shadow: none;
  transform: none;
}

body.search-results .entry-card .entry-title,
body.archive .entry-card .entry-title {
  margin: 0 0 12px;
  font-family: var(--sk26-sans);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

body.search-results .entry-card .entry-title a,
body.archive .entry-card .entry-title a {
  color: var(--sk26-ink);
  text-decoration: none;
}

body.search-results .entry-card .entry-title a:hover,
body.archive .entry-card .entry-title a:hover {
  color: var(--sk26-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.search-results .entry-card .entry-excerpt,
body.archive .entry-card .entry-excerpt {
  color: var(--sk26-graphite);
  font-size: 0.94rem;
  line-height: 1.6;
}

body.search-results .entry-card .entry-excerpt p:last-child,
body.archive .entry-card .entry-excerpt p:last-child {
  margin-bottom: 0;
}

body.search-results .entry-card .entry-meta,
body.archive .entry-card .entry-meta {
  margin-top: auto;
  padding-top: 16px;
  color: var(--sk26-muted);
  font-family: var(--sk26-mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.search-results .entry-card .entry-meta a,
body.archive .entry-card .entry-meta a {
  color: var(--sk26-graphite);
  text-decoration: none;
}

body.search-results .entry-card .entry-meta a:hover,
body.archive .entry-card .entry-meta a:hover {
  color: var(--sk26-accent);
}

/* The dark scheme stylesheet repaints these surfaces and links; these repeat
   the same declarations at the higher specificity the scheme rules use. */
html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-header {
  border-color: var(--sk26-hairline);
  background: transparent;
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-header h1,
html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-name {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-header p,
html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-blurb,
html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-empty {
  color: var(--sk26-graphite);
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-header p:first-of-type {
  color: var(--sk26-iron);
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-link {
  border-color: var(--sk26-hairline);
  background: var(--sk26-surface);
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-link:hover {
  border-color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body.tax-tool_group .sk-group-archive-action {
  color: var(--sk26-accent);
}

html[data-sk-scheme="dark"] body.search-results .page-title,
html[data-sk-scheme="dark"] body.search-results .entry-card .entry-title a,
html[data-sk-scheme="dark"] body.archive .entry-card .entry-title a {
  color: var(--sk26-ink);
}

html[data-sk-scheme="dark"] body.search-results .entry-card,
html[data-sk-scheme="dark"] body.archive .entry-card {
  border-color: var(--sk26-hairline);
  background: var(--sk26-surface);
}

html[data-sk-scheme="dark"] body.search-results .entry-card .entry-excerpt,
html[data-sk-scheme="dark"] body.archive .entry-card .entry-excerpt {
  color: var(--sk26-graphite);
}

html[data-sk-scheme="dark"] body.search-results .entry-card .entry-meta,
html[data-sk-scheme="dark"] body.archive .entry-card .entry-meta {
  color: var(--sk26-muted);
}

html[data-sk-scheme="dark"] body.search-results .entry-card .entry-meta a,
html[data-sk-scheme="dark"] body.archive .entry-card .entry-meta a {
  color: var(--sk26-graphite);
}

/* Pagination. Blocksy paints the current page with its own palette colour,
   and the dark stylesheet repaints it lavender. Ruled squares match the
   archive cards and keep the accent for links rather than navigation. */

body .ct-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: transparent;
  color: var(--sk26-ink);
  font-family: var(--sk26-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

body .ct-pagination .page-numbers:hover,
body .ct-pagination .page-numbers:focus-visible {
  border-color: var(--sk26-ink);
  background: transparent;
  color: var(--sk26-ink);
}

body .ct-pagination .page-numbers.current {
  border-color: var(--sk26-ink);
  background: var(--sk26-ink);
  color: var(--sk26-canvas);
}

html[data-sk-scheme="dark"] body .ct-pagination .page-numbers.current {
  border-color: var(--sk26-ink);
  background: var(--sk26-ink);
  color: var(--sk26-canvas);
}

/* ---------------------------------------------------- content pages ---- */

/* About, Contact, the legal pages, Student Guide, the service directory and
   the long-form articles. Most of these carried their own inline styles from
   the old lavender design, so the selectors below are scoped to body.page and
   deliberately outrank the inline rules rather than editing page content. */

body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained {
  width: calc(100% - 40px);
  max-width: 1132px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 72px;
  border-top: 2px solid var(--sk26-ink);
  color: var(--sk26-iron);
  font-family: var(--sk26-sans);
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > * {
  max-width: 780px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > .studykit-page,
body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > .sk-services-page {
  max-width: none;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > .sk-article {
  max-width: 810px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > h1,
body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained > .sk-page-title {
  max-width: 920px;
  margin: 38px 0 26px;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content h1 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-size: clamp(2.7rem, 4.8vw, 4.15rem);
  font-weight: 300;
  line-height: 0.99;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content h1 + p {
  max-width: 700px;
  margin-bottom: 30px;
  color: var(--sk26-iron);
  font-size: 1.14rem;
  line-height: 1.6;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content h2 {
  margin: 42px 0 12px;
  color: var(--sk26-ink);
  font-size: clamp(1.45rem, 2.15vw, 1.8rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.032em;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content h3 {
  margin: 30px 0 10px;
  color: var(--sk26-ink);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content p,
body.page:not(.home):not(.sk-tool-page-body) .entry-content li {
  color: var(--sk26-graphite);
  font-size: 1.02rem;
  line-height: 1.75;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content p {
  margin: 0 0 20px;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content ul,
body.page:not(.home):not(.sk-tool-page-body) .entry-content ol {
  margin: 0 0 24px;
  padding-left: 22px;
  color: var(--sk26-graphite);
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content li {
  margin: 9px 0;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content li::marker {
  color: var(--sk26-accent);
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content strong {
  color: var(--sk26-ink);
  font-weight: 600;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content a {
  color: var(--sk26-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content a:hover {
  color: var(--sk26-accent-hover);
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 24px;
  border-left: 2px solid var(--sk26-accent);
  color: var(--sk26-ink);
  font-family: var(--sk26-serif);
  font-size: 1.38rem;
  font-style: italic;
  line-height: 1.45;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--sk26-hairline);
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content code {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--sk26-linen);
  color: var(--sk26-ink);
  font-family: var(--sk26-mono);
  font-size: 0.88em;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content figure {
  margin: 32px 0;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content img {
  max-width: 100%;
  height: auto;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content table {
  width: 100%;
  margin: 28px 0 34px;
  border-collapse: collapse;
  border-top: 1px solid var(--sk26-ink);
  border-bottom: 1px solid var(--sk26-hairline);
  color: var(--sk26-graphite);
  font-size: 0.93rem;
  line-height: 1.55;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content th,
body.page:not(.home):not(.sk-tool-page-body) .entry-content td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--sk26-hairline);
  text-align: left;
  vertical-align: top;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content th {
  background: var(--sk26-linen);
  color: var(--sk26-ink);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .entry-content tr:last-child td {
  border-bottom: 0;
}

/* The About, Contact and legal pages still use their own wrapper. Removing
   its card-like padding is what lets the title line up with the rest of the
   site instead of sitting in a narrower column of its own. */

body.page:not(.home):not(.sk-tool-page-body) .studykit-page {
  max-width: none;
  margin: 0;
  padding: 36px 0 0;
  color: var(--sk26-graphite);
  font-family: var(--sk26-sans);
  line-height: 1.7;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-page h1 {
  margin: 0 0 24px;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-page h2 {
  margin-top: 42px;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-page a {
  color: var(--sk26-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-eyebrow {
  margin: 0 0 12px;
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-intro {
  max-width: 700px;
  margin: 0 0 30px;
  color: var(--sk26-iron);
  font-size: 1.14rem;
  line-height: 1.6;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-prose {
  max-width: 760px;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-contact-box {
  max-width: 820px;
  margin: 26px 0 30px;
  padding: 26px 28px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-linen);
  color: var(--sk26-graphite);
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-contact-box h2 {
  margin: 0 0 10px;
  font-size: 1.32rem;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-contact-box p:last-child {
  margin-bottom: 0;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-note {
  padding: 20px 22px;
  border: 1px solid var(--sk26-hairline);
  border-left: 2px solid var(--sk26-accent);
  border-radius: var(--sk26-radius);
  background: var(--sk26-linen);
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--sk26-hairline);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-card {
  min-height: 188px;
  padding: 20px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  box-shadow: none;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-card:hover {
  border-color: var(--sk26-ink);
  box-shadow: none;
  transform: none;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-card h3 {
  margin: 0 0 8px;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-card p {
  color: var(--sk26-graphite);
  font-size: 0.92rem;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-card-kicker {
  margin-bottom: 10px;
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-card-action {
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-table-wrap {
  max-width: 780px;
  overflow-x: auto;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-table {
  width: 100%;
  margin: 18px 0 28px;
  border-collapse: collapse;
  border-top: 1px solid var(--sk26-ink);
  border-bottom: 1px solid var(--sk26-hairline);
  font-size: 0.93rem;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-table th,
body.page:not(.home):not(.sk-tool-page-body) .studykit-table td {
  padding: 10px 12px;
  border: 1px solid var(--sk26-hairline);
  text-align: left;
  vertical-align: top;
}

body.page:not(.home):not(.sk-tool-page-body) .studykit-table th {
  background: var(--sk26-linen);
  color: var(--sk26-ink);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Long-form articles sit on the same left edge as the page title. Their
   previous centred measure was 760px and started 186px further in, which made
   them look like a different site from the guides around them. */

body.page:not(.home):not(.sk-tool-page-body) .sk-article {
  max-width: 810px;
  margin: 0;
  padding-top: 36px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-article .sk-page-title {
  margin: 0 0 26px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-article p,
body.page:not(.home):not(.sk-tool-page-body) .sk-article li {
  font-size: 1.02rem;
  line-height: 1.75;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-article table {
  margin: 26px 0 34px;
  border-top-color: var(--sk26-ink);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-article th,
body.page:not(.home):not(.sk-tool-page-body) .sk-article td {
  border-color: var(--sk26-hairline);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-article th {
  background: var(--sk26-linen);
  color: var(--sk26-ink);
}

/* The services directory was a rounded lavender hero with cards on a wash.
   It keeps its information architecture and loses the old surface treatment:
   a ruled hero, a quiet aside, and a directory of flat paper cards. */

body.page:not(.home):not(.sk-tool-page-body) .sk-services-page {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-purple: var(--sk26-accent);
  --sk-purple-dark: var(--sk26-ink);
  --sk-line: var(--sk26-hairline);
  --sk-soft: var(--sk26-linen);
  max-width: none;
  margin: 0;
  padding: 36px 0 0;
  color: var(--sk26-graphite);
  font-family: var(--sk26-sans);
  line-height: 1.65;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.62fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
  padding: 8px 0 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-kicker::before {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--sk26-accent);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero h1 {
  max-width: 760px;
  margin: 16px 0 20px;
  color: var(--sk26-ink);
  font-size: clamp(3rem, 5.8vw, 5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero-copy {
  max-width: 650px;
  margin: 0;
  color: var(--sk26-iron);
  font-size: 1.14rem;
  line-height: 1.6;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--sk26-accent);
  border-radius: var(--sk26-radius);
  background: var(--sk26-accent);
  color: #ffffff !important;
  font-family: var(--sk26-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none !important;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-button:hover {
  border-color: var(--sk26-accent-hover);
  background: var(--sk26-accent-hover);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-button.secondary {
  border-color: var(--sk26-hairline);
  background: transparent;
  color: var(--sk26-ink) !important;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-button.secondary:hover {
  border-color: var(--sk26-ink);
  background: transparent;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 24px 22px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-linen);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside strong {
  color: var(--sk26-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside p {
  margin: 10px 0 20px;
  color: var(--sk26-graphite);
  font-size: 0.9rem;
  line-height: 1.65;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--sk26-graphite);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside-list li::before {
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: var(--sk26-accent);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-stats {
  gap: 18px;
  margin: 8px 0 44px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-stat {
  padding: 16px 18px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  box-shadow: none;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-stat strong {
  color: var(--sk26-ink);
  font-size: 1.15rem;
  font-weight: 500;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-stat span {
  color: var(--sk26-graphite);
  font-size: 0.8rem;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-section {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--sk26-hairline);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 22px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-section h2 {
  margin: 0;
  color: var(--sk26-ink);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-section-head p {
  max-width: 440px;
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: right;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-path article {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--sk26-hairline);
  border-radius: 0;
  background: transparent;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-path h2 {
  margin: 0 0 8px;
  color: var(--sk26-ink);
  font-size: 1.09rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-path p {
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 0.9rem;
  line-height: 1.65;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-path-label {
  display: inline-flex;
  margin-bottom: 11px;
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 18px;
  align-items: stretch;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-grouphead {
  grid-column: 1 / -1;
  margin: 24px 0 2px;
  color: var(--sk26-ink);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-grouphead:first-child {
  margin-top: 0;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-grouphead::after {
  background: var(--sk26-hairline);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-groupcount {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sk26-graphite);
  font-family: var(--sk26-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card {
  min-height: 222px;
  padding: 20px;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  background: var(--sk26-surface);
  box-shadow: none;
  color: var(--sk26-ink) !important;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card:hover {
  border-color: var(--sk26-ink);
  box-shadow: none;
  transform: none;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card:focus-visible {
  outline: 2px solid var(--sk26-accent);
  outline-offset: 3px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card-top {
  margin-bottom: 15px;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-category,
body.page:not(.home):not(.sk-tool-page-body) .sk-services-card-action {
  color: var(--sk26-accent);
  font-family: var(--sk26-mono);
  font-size: 0.59rem;
  font-weight: 500;
  letter-spacing: 0.11em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-category {
  text-transform: uppercase;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card-action {
  padding-top: 18px;
  letter-spacing: 0.05em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--sk26-muted);
  font-family: var(--sk26-mono);
  font-size: 0.61rem;
  font-weight: 500;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card h3 {
  margin: 0 0 8px;
  color: var(--sk26-ink);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-card p {
  margin: 0;
  color: var(--sk26-graphite);
  font-size: 0.89rem;
  line-height: 1.62;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-note {
  margin-top: 48px;
  padding: 24px 26px;
  border: 1px solid var(--sk26-hairline);
  border-top: 2px solid var(--sk26-ink);
  border-radius: var(--sk26-radius);
  background: var(--sk26-linen);
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-note h2 {
  margin: 0 0 10px;
  color: var(--sk26-ink);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-note p {
  margin: 0 0 9px;
  color: var(--sk26-graphite);
  font-size: 0.92rem;
  line-height: 1.65;
}

body.page:not(.home):not(.sk-tool-page-body) .sk-services-note p:last-child {
  margin-bottom: 0;
}

html[data-sk-scheme="dark"] body.page:not(.home):not(.sk-tool-page-body) .sk-services-button:not(.secondary) {
  color: #101010 !important;
}

@media (max-width: 960px) {
  body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-aside {
    max-width: 620px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.page:not(.home):not(.sk-tool-page-body) .entry-content.is-layout-constrained {
    width: calc(100% - 40px);
    padding-bottom: 56px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content h1 {
    font-size: clamp(2.35rem, 8.8vw, 3rem);
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content h2 {
    margin-top: 34px;
    font-size: 1.42rem;
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content p,
  body.page:not(.home):not(.sk-tool-page-body) .entry-content li {
    font-size: 1rem;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero h1 {
    font-size: clamp(2.55rem, 11vw, 3.4rem);
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-section-head {
    display: block;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-section-head p {
    max-width: none;
    margin-top: 8px;
    text-align: left;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-path,
  body.page:not(.home):not(.sk-tool-page-body) .sk-services-grid {
    grid-template-columns: 1fr;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-path {
    gap: 22px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-card {
    min-height: 0;
  }

  body.page:not(.home):not(.sk-tool-page-body) .studykit-tool-grid {
    grid-template-columns: 1fr;
  }

  body.page:not(.home):not(.sk-tool-page-body) .studykit-contact-box {
    padding: 22px 20px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content table,
  body.page:not(.home):not(.sk-tool-page-body) .studykit-table {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {

  body.page:not(.home):not(.sk-tool-page-body) .entry-content h1 {
    font-size: 2.2rem;
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content table,
  body.page:not(.home):not(.sk-tool-page-body) .studykit-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page:not(.home):not(.sk-tool-page-body) .entry-content th {
    white-space: nowrap;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-hero {
    padding-bottom: 32px;
  }

  body.page:not(.home):not(.sk-tool-page-body) .sk-services-button {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------- tool widgets ---- */

/* A few older tool families still ship their own pastel palette and 16-22px
   corners in an inline stylesheet. Those rules live outside the theme, so the
   shell cannot reach them by inheritance. The rules below re-point the custom
   properties each family already uses, then flatten the literal surfaces and
   primary actions. No widget markup, script, or behaviour is touched. */

body.sk-tool-page-body {
  display: block;
  padding: 0;
}

body.sk-tool-page-body .sk-az-page,
body.sk-tool-page-body .sk-word-page,
body.sk-tool-page-body .sk-shot-page,
body.sk-tool-page-body .sk-po-page,
body.sk-tool-page-body .sk-cit-root,
body.sk-tool-page-body .sk-qr,
body.sk-tool-page-body .sk-qr-scanner,
body.sk-tool-page-body .sk-image-tool,
body.sk-tool-page-body .studykit-fixer-container,
body.sk-tool-page-body .studykit-density-container {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
}

/* ------------------------------------------- alphabetical + document tools */

html body.sk-tool-page-body .sk-az-page,
html body.sk-tool-page-body .sk-word-page,
html body.sk-tool-page-body .sk-shot-page {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-purple: var(--sk26-accent);
  --sk-purple-dark: var(--sk26-ink);
  --sk-line: var(--sk26-hairline);
  --sk-soft: var(--sk26-linen);
}

body.sk-tool-page-body .sk-az-page .sk-az-panel,
body.sk-tool-page-body .sk-word-page .sk-word-panel,
body.sk-tool-page-body .sk-shot-page .sk-shot-panel,
body.sk-tool-page-body .sk-az-page .sk-az-guide article,
body.sk-tool-page-body .sk-word-page .sk-word-guide article,
body.sk-tool-page-body .sk-shot-page .sk-shot-guide article,
body.sk-tool-page-body .sk-az-page .sk-az-faq details {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body.sk-tool-page-body .sk-az-page .sk-az-panel h2,
body.sk-tool-page-body .sk-word-page .sk-word-panel h2,
body.sk-tool-page-body .sk-shot-page .sk-shot-panel h2,
body.sk-tool-page-body .sk-az-page .sk-az-guide h2,
body.sk-tool-page-body .sk-word-page .sk-word-guide h2,
body.sk-tool-page-body .sk-shot-page .sk-shot-guide h2,
body.sk-tool-page-body .sk-az-page .sk-az-guide h3,
body.sk-tool-page-body .sk-word-page .sk-word-guide h3,
body.sk-tool-page-body .sk-shot-page .sk-shot-guide h3,
body.sk-tool-page-body .sk-az-page .sk-az-faq h2,
body.sk-tool-page-body .sk-az-page .sk-az-faq summary {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.sk-tool-page-body .sk-az-page .sk-az-textarea,
body.sk-tool-page-body .sk-az-page .sk-az-select,
body.sk-tool-page-body .sk-az-page .sk-az-input {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-az-page .sk-az-textarea:focus,
body.sk-tool-page-body .sk-az-page .sk-az-select:focus-visible,
body.sk-tool-page-body .sk-az-page .sk-az-input:focus-visible {
  outline-color: var(--sk26-accent);
  background: var(--sk26-surface);
}

body.sk-tool-page-body .sk-word-page .sk-word-upload {
  color: var(--sk26-ink);
  background: var(--sk26-linen);
  border: 1px dashed var(--sk26-stone);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-word-page .sk-word-upload:hover,
body.sk-tool-page-body .sk-word-page .sk-word-upload:focus-within {
  background: var(--sk26-surface);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-word-page .sk-word-upload span {
  color: var(--sk26-graphite);
}

body.sk-tool-page-body .sk-word-page .sk-word-file,
body.sk-tool-page-body .sk-shot-page .sk-shot-preview {
  color: var(--sk26-ink);
  background: var(--sk26-linen);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-word-page .sk-word-file strong {
  color: var(--sk26-ink);
}

body.sk-tool-page-body .sk-word-page .sk-word-preview {
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-shot-page .sk-shot-preview canvas {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-az-page .sk-az-button,
body.sk-tool-page-body .sk-word-page .sk-word-button,
body.sk-tool-page-body .sk-shot-page .sk-shot-button {
  min-height: 44px;
  padding: 0 18px;
  color: var(--sk-pick-ink, #ffffff) !important;
  background: var(--sk26-accent);
  border: 1px solid var(--sk26-accent);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.sk-tool-page-body .sk-az-page .sk-az-button:hover:not(:disabled),
body.sk-tool-page-body .sk-word-page .sk-word-button:hover:not(:disabled),
body.sk-tool-page-body .sk-shot-page .sk-shot-button:hover:not(:disabled) {
  color: var(--sk-pick-ink, #ffffff) !important;
  background: var(--sk26-accent-hover);
  border-color: var(--sk26-accent-hover);
}

body.sk-tool-page-body .sk-az-page .sk-az-button.secondary,
body.sk-tool-page-body .sk-word-page .sk-word-button.secondary,
body.sk-tool-page-body .sk-shot-page .sk-shot-button.secondary {
  color: var(--sk26-ink) !important;
  background: transparent;
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-az-page .sk-az-button.secondary:hover:not(:disabled),
body.sk-tool-page-body .sk-word-page .sk-word-button.secondary:hover:not(:disabled),
body.sk-tool-page-body .sk-shot-page .sk-shot-button.secondary:hover:not(:disabled) {
  color: var(--sk26-ink) !important;
  background: var(--sk26-linen);
  border-color: var(--sk26-ink);
}

body.sk-tool-page-body .sk-az-page .sk-az-note,
body.sk-tool-page-body .sk-word-page .sk-word-note,
body.sk-tool-page-body .sk-shot-page .sk-shot-note {
  padding: 18px 20px;
  background: var(--sk26-linen);
  border-left: 3px solid var(--sk26-accent);
  border-radius: 0 var(--sk26-radius) var(--sk26-radius) 0;
}

body.sk-tool-page-body .sk-az-page .sk-az-status,
body.sk-tool-page-body .sk-word-page .sk-word-status,
body.sk-tool-page-body .sk-shot-page .sk-shot-status {
  color: var(--sk26-graphite);
}

body.sk-tool-page-body .sk-word-page .sk-word-status[data-state="error"],
body.sk-tool-page-body .sk-shot-page .sk-shot-status[data-state="error"] {
  color: #a6324a;
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-word-page .sk-word-status[data-state="error"],
html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-shot-page .sk-shot-status[data-state="error"] {
  color: #ff9db2;
}

body.sk-tool-page-body .sk-az-page .sk-az-status[data-state="ok"] {
  color: #1c6b3f;
}

body.sk-tool-page-body .sk-az-page .sk-az-status[data-state="error"] {
  color: #a6324a;
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-az-page .sk-az-status[data-state="ok"] {
  color: #7fd6a2;
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-az-page .sk-az-status[data-state="error"] {
  color: #ff9db2;
}

/* ---------------------------------------------------------- citation ---- */

html body.sk-tool-page-body .sk-cit-root {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-accent: var(--sk26-accent);
  --sk-accent-strong: var(--sk26-ink);
  --sk-on-accent: var(--sk-pick-ink, #ffffff);
  --sk-accent-bg: var(--sk26-accent);
  --sk-accent-hover: var(--sk26-accent-hover);
  --sk-accent-line: var(--sk26-accent-line);
  --sk-accent-soft: var(--sk26-accent-soft);
  --sk-line: var(--sk26-hairline);
  --sk-surface: var(--sk26-surface);
  --sk-soft: var(--sk26-linen);
  --sk-bg: var(--sk26-canvas);
  --sk-shadow: none;
}

body.sk-tool-page-body .sk-cit-root .sk-cit-form,
body.sk-tool-page-body .sk-cit-root .sk-cit-style,
body.sk-tool-page-body .sk-cit-root .sk-cit-btn {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-form {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  box-shadow: none;
}

body.sk-tool-page-body .sk-cit-root .sk-cit-style.is-active {
  color: var(--sk26-ink);
  background: var(--sk26-accent-soft);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-input,
body.sk-tool-page-body .sk-cit-root .sk-cit-select {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-btn {
  font-family: var(--sk26-sans);
  font-weight: 500;
}

body.sk-tool-page-body .sk-cit-root .sk-cit-btn-primary {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-btn-primary:hover {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent-hover);
  border-color: var(--sk26-accent-hover);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-banner,
body.sk-tool-page-body .sk-cit-root .sk-cit-note,
body.sk-tool-page-body .sk-cit-root .sk-cit-empty {
  background: var(--sk26-linen);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-banner,
body.sk-tool-page-body .sk-cit-root .sk-cit-note {
  border-left: 3px solid var(--sk26-accent);
}

body.sk-tool-page-body .sk-cit-root .sk-cit-h2 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 300;
  letter-spacing: -0.035em;
}

/* The citation tool's submit button is a [type="submit"], so the theme's
   button rule lands after the widget stylesheet and paints it blue. The
   selectors above are specific enough to restore the site accent. */
body.sk-tool-page-body .sk-cit-root .sk-cit-itemtools .sk-cit-btn {
  border-radius: var(--sk26-radius);
}

/* ------------------------------------------------------ prompt optimizer ---- */

html body.sk-tool-page-body .sk-po-page {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-accent: var(--sk26-accent);
  --sk-accent-strong: var(--sk26-accent-hover);
  --sk-on-accent: var(--sk-pick-ink, #ffffff);
  --sk-accent-bg: var(--sk26-accent);
  --sk-line: var(--sk26-hairline);
  --sk-surface: var(--sk26-surface);
  --sk-soft: var(--sk26-linen);
  --sk-shadow: none;
}

/* The mid-content ad used to be printed inside the "Customize" panel header.
   It is now lifted to the prose seam by the_content in studykit-2026.php, so
   there is no panel-specific sizing rule to carry here. */

body.sk-tool-page-body .sk-po-page .sk-po-panel,
body.sk-tool-page-body .sk-po-page .sk-po-empty,
body.sk-tool-page-body .sk-po-page .sk-po-privacy,
body.sk-tool-page-body .sk-po-page .sk-po-output,
body.sk-tool-page-body .sk-po-page .sk-po-score,
body.sk-tool-page-body .sk-po-page .sk-po-compare-col,
body.sk-tool-page-body .sk-po-page .sk-po-variation,
body.sk-tool-page-body .sk-po-page .sk-po-template,
body.sk-tool-page-body .sk-po-page .sk-po-history-item,
body.sk-tool-page-body .sk-po-page .sk-po-storage-warning {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body.sk-tool-page-body .sk-po-page .sk-po-input,
body.sk-tool-page-body .sk-po-page .sk-po-textarea,
body.sk-tool-page-body .sk-po-page .sk-po-select,
body.sk-tool-page-body .sk-po-page .sk-po-btn,
body.sk-tool-page-body .sk-po-page .sk-po-chip,
body.sk-tool-page-body .sk-po-page .sk-po-target,
body.sk-tool-page-body .sk-po-page .sk-po-tab,
body.sk-tool-page-body .sk-po-page .sk-po-step,
body.sk-tool-page-body .sk-po-page .sk-po-iconbtn {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-po-page .sk-po-chip {
  background: var(--sk26-linen);
}

body.sk-tool-page-body .sk-po-page .sk-po-target[aria-pressed="true"] {
  color: var(--sk26-ink);
  background: var(--sk26-accent-soft);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-po-page .sk-po-target[aria-pressed="true"] .sk-po-target-note {
  color: var(--sk26-graphite);
  opacity: 1;
}

body.sk-tool-page-body .sk-po-page .sk-po-badge,
body.sk-tool-page-body .sk-po-page .sk-po-template-group {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-po-page .sk-po-btn-primary {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-po-page .sk-po-btn-primary:hover {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent-hover);
  border-color: var(--sk26-accent-hover);
}

/* ---------------------------------------------------------------- QR ---- */

html body.sk-tool-page-body .sk-qr,
html body.sk-tool-page-body .sk-qr-scanner {
  --qr-ink: var(--sk26-ink);
  --qr-muted: var(--sk26-graphite);
  --qr-purple: var(--sk26-accent);
  --qr-purple-dark: var(--sk26-ink);
  --qr-line: var(--sk26-hairline);
  --qr-soft: var(--sk26-linen);
}

body.sk-tool-page-body .sk-qr .sk-qr-input,
body.sk-tool-page-body .sk-qr .sk-qr-textarea,
body.sk-tool-page-body .sk-qr .sk-qr-select,
body.sk-tool-page-body .sk-qr .sk-qr-controls,
body.sk-tool-page-body .sk-qr .sk-qr-output,
body.sk-tool-page-body .sk-qr .sk-qr-preview,
body.sk-tool-page-body .sk-qr .sk-qr-file,
body.sk-tool-page-body .sk-qr .sk-qr-result,
body.sk-tool-page-body .sk-qr .sk-qr-result-text,
body.sk-tool-page-body .sk-qr .sk-qr-result-action,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-stage,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-file,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-result,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-result-text,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-result-action,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-scanner-actions button {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-qr .sk-qr-input,
body.sk-tool-page-body .sk-qr .sk-qr-textarea,
body.sk-tool-page-body .sk-qr .sk-qr-select {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-qr .sk-qr-control-colors input[type="color"] {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-qr .sk-qr-input:focus,
body.sk-tool-page-body .sk-qr .sk-qr-textarea:focus,
body.sk-tool-page-body .sk-qr .sk-qr-select:focus {
  outline-color: var(--sk26-accent);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-qr .sk-qr-controls {
  background: var(--sk26-linen);
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-qr .sk-qr-controls-title,
body.sk-tool-page-body .sk-qr .sk-qr-field > label,
body.sk-tool-page-body .sk-qr .sk-qr-control > label {
  font-family: var(--sk26-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.sk-tool-page-body .sk-qr .sk-qr-output {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  box-shadow: none;
}

body.sk-tool-page-body .sk-qr .sk-qr-preview {
  background: var(--sk26-linen);
  border-color: var(--sk26-stone);
}

/* The theme's reset gives every canvas display:block, which beats the browser's
   own [hidden] rule and leaves the empty code canvas taking up 280px beside the
   placeholder. Keep the preview clean until a code exists. */
body.sk-tool-page-body .sk-qr .sk-qr-preview canvas[hidden] {
  display: none !important;
}

body.sk-tool-page-body .sk-qr .sk-qr-actions button,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-scanner-actions button {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border-color: var(--sk26-accent);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-weight: 500;
}

body.sk-tool-page-body .sk-qr .sk-qr-actions button:hover:not(:disabled),
body.sk-tool-page-body .sk-qr-scanner .sk-qr-scanner-actions button:hover:not(:disabled) {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent-hover);
  border-color: var(--sk26-accent-hover);
}

body.sk-tool-page-body .sk-qr .sk-qr-control-actions button,
body.sk-tool-page-body .sk-qr .sk-qr-reveal {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-weight: 500;
}

body.sk-tool-page-body .sk-qr .sk-qr-control-actions button:hover {
  color: var(--sk26-ink);
  background: var(--sk26-linen);
}

body.sk-tool-page-body .sk-qr .sk-qr-file,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-file {
  color: var(--sk26-ink);
  background: var(--sk26-linen);
  border-color: var(--sk26-stone);
}

body.sk-tool-page-body .sk-qr .sk-qr-result {
  background: var(--sk26-linen);
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-qr .sk-qr-result-text,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-result-text {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-qr .sk-qr-result-action,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-result-action {
  color: var(--sk-pick-ink, #ffffff) !important;
  background: var(--sk26-accent);
}

body.sk-tool-page-body .sk-qr-scanner .sk-qr-stage {
  border-color: var(--sk26-hairline);
}

/* The camera stays dark on purpose: a light stage would bloom into the lens.
   Only its frame joins the ruled surface language. */
body.sk-tool-page-body .sk-qr-scanner .sk-qr-stage,
body.sk-tool-page-body .sk-qr-scanner .sk-qr-file {
  border-radius: var(--sk26-radius);
}

/* --------------------------------------------------------- image tools ---- */

html body.sk-tool-page-body .sk-image-tool {
  --sk-ink: var(--sk26-ink);
  --sk-muted: var(--sk26-graphite);
  --sk-pink: var(--sk26-accent);
  --sk-pink-dark: var(--sk26-accent-hover);
  --sk-purple: var(--sk26-accent);
  --sk-lilac: var(--sk26-accent-soft);
  --sk-cream: var(--sk26-surface);
  --sk-line: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-image-tool .sk-image-panel,
body.sk-tool-page-body .sk-image-tool .sk-image-preview,
body.sk-tool-page-body .sk-image-tool .sk-image-status,
body.sk-tool-page-body .sk-image-tool .sk-image-details,
body.sk-tool-page-body .sk-image-tool .sk-image-upload,
body.sk-tool-page-body .sk-image-tool .sk-image-actions button,
body.sk-tool-page-body .sk-image-tool .sk-image-empty-mark,
body.sk-tool-page-body .sk-image-tool .sk-image-guide article,
body.sk-tool-page-body .sk-image-tool .sk-image-disclaimer {
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .sk-image-tool .sk-image-panel,
body.sk-tool-page-body .sk-image-tool .sk-image-preview {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  box-shadow: none;
}

body.sk-tool-page-body .sk-image-tool .sk-image-preview {
  background-color: var(--sk26-linen);
  background-image:
    linear-gradient(45deg, rgba(128, 128, 128, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128, 128, 128, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.1) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

body.sk-tool-page-body .sk-image-tool .sk-image-upload {
  background: var(--sk26-linen);
  border: 1px dashed var(--sk26-stone);
}

body.sk-tool-page-body .sk-image-tool .sk-image-upload:hover,
body.sk-tool-page-body .sk-image-tool .sk-image-upload.is-dragging {
  background: var(--sk26-surface);
  border-color: var(--sk26-accent);
  transform: none;
}

body.sk-tool-page-body .sk-image-tool .sk-image-upload strong,
body.sk-tool-page-body .sk-image-tool .sk-image-empty strong,
body.sk-tool-page-body .sk-image-tool .sk-image-guide h2,
body.sk-tool-page-body .sk-image-tool .sk-image-guide h3 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.sk-tool-page-body .sk-image-tool .sk-image-status {
  background: var(--sk26-linen);
  color: var(--sk26-graphite);
}

body.sk-tool-page-body .sk-image-tool .sk-image-status.is-ready {
  background: #eaf7ef;
  color: #28623e;
}

body.sk-tool-page-body .sk-image-tool .sk-image-status.is-error {
  background: #fff0f2;
  color: #a43b52;
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-image-tool .sk-image-status.is-ready {
  background: #16302a;
  color: #8fe0bd;
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .sk-image-tool .sk-image-status.is-error {
  background: #351c1f;
  color: #f2a2a8;
}

body.sk-tool-page-body .sk-image-tool .sk-image-note {
  color: var(--sk26-graphite);
  background: transparent;
  border-color: transparent;
}

body.sk-tool-page-body .sk-image-tool .sk-image-details {
  background: var(--sk26-linen);
}

body.sk-tool-page-body .sk-image-tool .sk-image-details dt {
  color: var(--sk26-graphite);
}

body.sk-tool-page-body .sk-image-tool .sk-image-details dd {
  color: var(--sk26-ink);
}

body.sk-tool-page-body .sk-image-tool .sk-image-actions button {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  font-weight: 500;
}

body.sk-tool-page-body .sk-image-tool .sk-image-actions button:hover:not(:disabled) {
  border-color: var(--sk26-accent);
  transform: none;
}

body.sk-tool-page-body .sk-image-tool .sk-image-actions .sk-image-download {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .sk-image-tool .sk-image-empty-mark {
  color: var(--sk26-accent);
  background: var(--sk26-accent-soft);
  box-shadow: none;
}

body.sk-tool-page-body .sk-image-tool .sk-image-guide article {
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .sk-image-tool .sk-image-disclaimer {
  color: var(--sk26-graphite);
  background: var(--sk26-linen);
  border-left: 3px solid var(--sk26-accent);
  border-radius: 0 var(--sk26-radius) var(--sk26-radius) 0;
}

body.sk-tool-page-body .sk-image-tool .sk-image-disclaimer a {
  color: var(--sk26-accent);
}

/* --------------------------------------- punctuation + density tools ---- */

body.sk-tool-page-body .studykit-fixer-container .fixer-tool-box,
body.sk-tool-page-body .studykit-density-container .density-tool-box {
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body.sk-tool-page-body .studykit-fixer-container #fixerInput,
body.sk-tool-page-body .studykit-density-container #densityInput {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-size: 1rem;
}

body.sk-tool-page-body .studykit-fixer-container #fixerInput:focus,
body.sk-tool-page-body .studykit-density-container #densityInput:focus {
  border-color: var(--sk26-accent);
  box-shadow: 0 0 0 3px var(--sk26-accent-line);
}

body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row button,
body.sk-tool-page-body .studykit-density-container .density-actions-row button {
  color: var(--sk26-ink);
  background: transparent;
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-size: 0.86rem;
  font-weight: 500;
}

body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row button:hover,
body.sk-tool-page-body .studykit-density-container .density-actions-row button:hover {
  color: var(--sk26-accent);
  background: var(--sk26-linen);
  border-color: var(--sk26-accent);
  transform: none;
}

body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-copy {
  color: var(--sk26-accent);
  background: var(--sk26-accent-soft);
  border-color: var(--sk26-accent-line);
}

body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-copy:hover {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border-color: var(--sk26-accent);
}

/* Clear sits in a row of four identical secondary buttons. Painting its label
   red was meant as a destructive-action cue, but with no fill, no icon and the
   same border as its neighbours it read as a colour that had been missed
   rather than a warning. It is a quiet neutral now, like the word counter's. */
body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-clear,
body.sk-tool-page-body .studykit-density-container .density-actions-row .btn-clear {
  color: var(--sk26-graphite);
  background: transparent;
  border-color: var(--sk26-hairline);
}

body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-clear:hover,
body.sk-tool-page-body .studykit-density-container .density-actions-row .btn-clear:hover {
  color: var(--sk26-ink);
  background: transparent;
  border-color: var(--sk26-stone);
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-clear,
html[data-sk-scheme="dark"] body.sk-tool-page-body .studykit-density-container .density-actions-row .btn-clear {
  color: var(--sk26-graphite);
}

html[data-sk-scheme="dark"] body.sk-tool-page-body .studykit-fixer-container .fixer-actions-row .btn-clear:hover,
html[data-sk-scheme="dark"] body.sk-tool-page-body .studykit-density-container .density-actions-row .btn-clear:hover {
  color: var(--sk26-ink);
  background: transparent;
  border-color: var(--sk26-stone);
}

body.sk-tool-page-body .studykit-fixer-container .fixer-stats,
body.sk-tool-page-body .studykit-density-container .density-stats {
  color: var(--sk26-graphite);
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.sk-tool-page-body .studykit-density-container .density-report-section {
  border-top-color: var(--sk26-hairline);
}

body.sk-tool-page-body .studykit-density-container .density-report-section h2,
body.sk-tool-page-body .studykit-density-container .density-report-section h3 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 400;
}

body.sk-tool-page-body .studykit-density-container .table-wrapper {
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .studykit-density-container .density-table th {
  color: var(--sk26-iron);
  background: var(--sk26-linen);
}

body.sk-tool-page-body .studykit-density-container .density-table th,
body.sk-tool-page-body .studykit-density-container .density-table td {
  border-bottom-color: var(--sk26-hairline);
}

body.sk-tool-page-body .studykit-density-container .density-table td {
  color: var(--sk26-ink);
}

body.sk-tool-page-body .studykit-density-container .density-ratio-badge {
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
}

body.sk-tool-page-body .studykit-fixer-container .fixer-educational-content h2,
body.sk-tool-page-body .studykit-fixer-container .fixer-educational-content h3,
body.sk-tool-page-body .studykit-fixer-container .content-section h2,
body.sk-tool-page-body .studykit-density-container .density-educational-content h2,
body.sk-tool-page-body .studykit-density-container .density-educational-content h3,
body.sk-tool-page-body .studykit-density-container .content-section h2 {
  color: var(--sk26-ink);
  font-family: var(--sk26-sans);
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.sk-tool-page-body .studykit-fixer-container .fixer-educational-content p,
body.sk-tool-page-body .studykit-fixer-container .fixer-educational-content li,
body.sk-tool-page-body .studykit-density-container .density-educational-content p,
body.sk-tool-page-body .studykit-density-container .density-educational-content li,
body.sk-tool-page-body .studykit-density-container .content-section p,
body.sk-tool-page-body .studykit-density-container .content-section li {
  color: var(--sk26-iron);
  font-family: var(--sk26-sans);
}

/* ------------------------------------------------------ case converter ---- */

body.sk-tool-page-body .converter-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 32px;
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border: 1px solid var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  box-shadow: none;
}

body.sk-tool-page-body .converter-card textarea {
  color: var(--sk26-ink);
  background: var(--sk26-surface);
  border-color: var(--sk26-hairline);
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
}

body.sk-tool-page-body .converter-card textarea:focus {
  border-color: var(--sk26-accent);
  box-shadow: 0 0 0 3px var(--sk26-accent-line);
}

body.sk-tool-page-body .converter-card .text-metrics {
  color: var(--sk26-graphite);
  font-family: var(--sk26-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.sk-tool-page-body .converter-card button {
  border-radius: var(--sk26-radius);
  font-family: var(--sk26-sans);
  font-weight: 500;
}

body.sk-tool-page-body .converter-card .btn-action {
  color: var(--sk26-ink);
  background: transparent;
  border: 1px solid var(--sk26-hairline);
}

body.sk-tool-page-body .converter-card .btn-action:hover {
  color: var(--sk26-accent);
  background: var(--sk26-linen);
  border-color: var(--sk26-accent);
}

body.sk-tool-page-body .converter-card .utility-bar {
  border-top-color: var(--sk26-hairline);
}

body.sk-tool-page-body .converter-card .btn-secondary {
  color: var(--sk26-ink);
  background: transparent;
  border: 1px solid var(--sk26-hairline);
}

body.sk-tool-page-body .converter-card .btn-secondary:hover {
  color: var(--sk26-ink);
  background: var(--sk26-linen);
  border-color: var(--sk26-ink);
}

body.sk-tool-page-body .converter-card .btn-primary {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent);
  border: 1px solid var(--sk26-accent);
}

body.sk-tool-page-body .converter-card .btn-primary:hover {
  color: var(--sk-pick-ink, #ffffff);
  background: var(--sk26-accent-hover);
  border-color: var(--sk26-accent-hover);
}

/* ---------------------------------------------------------------- ads ---- */

/* The tools plugin owns the ad markup and its placement rules. These rules
   repaint the same containers in the 2026 palette: a hairline above the unit,
   air on both sides of the prose seam, and a label that stays readable in both
   schemes instead of the plugin's fixed #6b7280 grey. Nothing here hides,
   delays, or resizes a unit based on whether it filled. */
.sk-ad,
.sk-ad[data-sk-ad="mid-content"] {
  margin: 40px 0;
  padding: 22px 0;
  border-top: 1px solid var(--sk26-hairline);
}

.sk-ad-label,
.sk-anchor-label {
  color: var(--sk26-muted);
  font-family: var(--sk26-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
}

.sk-ad > ins.adsbygoogle {
  max-width: 100%;
}

.sk-anchor-ad {
  background: var(--sk26-surface);
  border-top: 1px solid var(--sk26-hairline);
  box-shadow: 0 -12px 34px rgba(17, 17, 17, .1);
}

.sk-anchor-label,
.sk-anchor-close {
  color: var(--sk26-muted);
}

.sk-anchor-close:hover,
.sk-anchor-close:focus-visible {
  color: var(--sk26-accent);
}

html[data-sk-scheme="dark"] .sk-anchor-ad {
  background: var(--sk26-surface);
  border-top-color: var(--sk26-hairline);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .6);
}

html[data-sk-scheme="dark"] .sk-anchor-label,
html[data-sk-scheme="dark"] .sk-anchor-close {
  color: var(--sk26-muted);
}

html[data-sk-scheme="dark"] .sk-anchor-close:hover,
html[data-sk-scheme="dark"] .sk-anchor-close:focus-visible {
  color: var(--sk26-accent);
}

@media (max-width: 599px) {
  .sk-ad,
  .sk-ad[data-sk-ad="mid-content"] {
    margin: 32px 0;
    padding: 18px 0;
  }
}

/* --------------------------------------------------------- motion ---- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sk26-home *,
  .sk26-home *::before,
  .sk26-home *::after {
    transition: none !important;
    animation: none !important;
  }
}