/* ==========================================================================
   Orangescrum Help Centre — site chrome
   Layers on top of docs.css, which supplies the design tokens and prose styles.
   ========================================================================== */

.hc {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--os-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--os-text);
  background: var(--os-bg);
  -webkit-font-smoothing: antialiased;
}

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

:where(.hc) a {
  color: inherit;
  text-decoration: none;
}

.hc-main {
  flex: 1;
}

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

.hc-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--os-bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--os-border);
}

/* The page body is also --os-bg, so a header background mixed from that
   same colour is indistinguishable from the page behind it - fine in light
   mode, where the border alone still reads clearly, but not enough in dark
   mode. Mix from the next shade up instead, so the header is visibly its
   own surface even before it starts floating. */
html[data-os-theme='dark'] .hc-top {
  background: color-mix(in srgb, var(--os-bg-sunk) 92%, transparent);
}

/* Transitions are opt-in via --settled, added once the scroll position has
   finished settling after mount. Without this, a correction to a stale
   initial read (see SiteHeader) would visibly animate in and back out. */
.hc-top--settled {
  transition: top 0.25s ease, width 0.25s ease, margin 0.25s ease,
    border-radius 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease,
    background 0.25s ease;
}

.hc-top--settled .hc-top__inner {
  transition: height 0.25s ease, padding 0.25s ease;
}

.hc-top--settled .hc-top__logo {
  transition: height 0.25s ease;
}

.hc-top.is-scrolled {
  top: 12px;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  background: color-mix(in srgb, var(--os-bg) 96%, transparent);
  border-radius: 999px;
  border: none;
  box-shadow: 0 10px 32px rgb(28 26 25 / 16%);
}

/* A shadow this dark is invisible against an already near-black page -
   there is nothing for it to contrast against. Rely on a solid, visibly
   lighter surface for the floating effect instead, backed by a black
   shadow strong enough to actually show up. */
html[data-os-theme='dark'] .hc-top.is-scrolled {
  background: var(--os-bg-sunk);
  box-shadow: 0 12px 36px rgb(0 0 0 / 55%);
}

.hc-top.is-scrolled .hc-top__inner {
  height: 58px;
  padding: 0 24px;
}

.hc-top.is-scrolled .hc-top__logo {
  height: 30px;
}

.hc-top__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1180px;
  height: 56px;
  padding: 0 24px;
  margin: 0 auto;
}

.hc-top__brand {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.hc-top__logo {
  display: block;
  height: 30px;
  width: auto;
}

/* The logo's wordmark and mark are solid black, invisible against a dark
   background - swap in a white-wordmark variant with the same orange leaf.
   Dark mode can be active here too: the theme is stored globally and
   restored on every page, not just /guide, even though the toggle only
   lives in the docs header. */
html[data-os-theme='dark'] .hc-top__logo {
  content: url('/logo-dark.png');
}

.hc-top__nav {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}

.hc-top__nav a {
  color: var(--os-text-muted);
  transition: color 0.15s;
}

.hc-top__nav a:hover,
.hc-top__nav a.is-active {
  color: var(--os-orange);
}

.hc-top__cta {
  padding: 4px 12px;
  font-weight: 600;
  color: #fff !important;
  background: var(--os-orange);
  border-radius: 8px;
  transition: background 0.15s;
}

.hc-top__cta:hover {
  background: var(--os-orange-dark);
}

.hc-top__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: 0;
}

.hc-top__burger span {
  width: 18px;
  height: 2px;
  background: var(--os-text);
  border-radius: 2px;
}

.hc-top__searchbar {
  border-top: 1px solid var(--os-border-soft);
}

.hc-top__searchbar .hc-search {
  max-width: 1180px;
  padding: 10px 24px;
  margin: 0 auto;
}

/* --------------------------------------------------------------- search -- */

.hc-search {
  position: relative;
  width: 100%;
}

.hc-search form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 6px 6px 14px;
  background: var(--os-bg);
  border: 1px solid var(--os-border);
  border-radius: 12px;
  box-shadow: var(--os-shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hc-search form:focus-within {
  border-color: var(--os-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-orange) 15%, transparent);
}

.hc-search__icon {
  display: grid;
  place-items: center;
  color: var(--os-text-faint);
}

.hc-search__icon svg {
  width: 18px;
  height: 18px;
}

.hc-search input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--os-text);
  background: none;
  border: 0;
  outline: none;
}

.hc-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.hc-search button[type='submit'] {
  flex-shrink: 0;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--os-orange);
  border: 0;
  border-radius: 8px;
}

.hc-search button[type='submit']:hover {
  background: var(--os-orange-dark);
}

.hc-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  padding: 6px;
  text-align: left;
  background: var(--os-bg);
  border: 1px solid var(--os-border);
  border-radius: 12px;
  box-shadow: var(--os-shadow-lg);
}

.hc-search__result {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
}

.hc-search__result.is-active {
  background: var(--os-bg-sunk);
}

.hc-search__kind {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: capitalize;
  background: var(--os-bg-soft);
  border: 1px solid var(--os-border);
  border-radius: 20px;
}

.hc-search__result strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.hc-search__result em {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.45;
  color: var(--os-text-faint);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hc-search__all {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--os-orange) !important;
  border-top: 1px solid var(--os-border-soft);
}

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

.hc-hero {
  max-width: 780px;
  padding: 76px 24px 52px;
  margin: 0 auto;
  text-align: center;
}

.hc-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--os-orange);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.hc-hero h1 {
  margin: 0 0 14px;
  font-size: 48px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.hc-hero__lede {
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--os-text-muted);
}

.hc-hero__search {
  max-width: 620px;
  margin: 0 auto 14px;
}

.hc-hero__hint {
  margin: 0;
  font-size: 13.5px;
  color: var(--os-text-faint);
}

.hc-hero__hint a {
  color: var(--os-orange);
}

.hc-hero__hint a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------- section -- */

.hc-section__head {
  max-width: 1180px;
  padding: 0 24px;
  margin: 0 auto 26px;
}

.hc-section__head h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hc-section__head p {
  margin: 0;
  font-size: 15px;
  color: var(--os-text-muted);
}

.hc-section__head a {
  color: var(--os-orange);
  text-decoration: underline;
}

/* --------------------------------------------------------- guide cards -- */

.hc-guides {
  padding: 34px 0;
}

.hc-guides__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  padding: 0 24px;
  margin: 0 auto;
}

.hc-guide {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--os-bg);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.hc-guide:hover {
  border-color: var(--os-orange);
  box-shadow: var(--os-shadow-md);
  transform: translateY(-2px);
}

.hc-guide__eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--os-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-guide h3 {
  margin: 8px 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.hc-guide p {
  margin: 0 0 16px;
  font-size: 13.8px;
  line-height: 1.55;
  color: var(--os-text-muted);
}

.hc-guide__go {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--os-orange);
}

/* --------------------------------------------------------------- topics -- */

.hc-topics {
  padding: 34px 0 10px;
}

.hc-topic {
  max-width: 1180px;
  padding: 0 24px;
  margin: 0 auto 34px;
}

.hc-topic__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--os-border);
}

.hc-topic__head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.hc-topic__head h3 a:hover {
  color: var(--os-orange);
}

.hc-topic__head span {
  font-size: 13px;
  color: var(--os-text-faint);
  white-space: nowrap;
}

.hc-topic__grid,
.hc-category__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.hc-topic__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  background: var(--os-bg-soft);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  transition: border-color 0.15s, background 0.15s;
}

.hc-topic__card:hover {
  background: var(--os-bg);
  border-color: var(--os-orange);
}

.hc-topic__name {
  font-size: 14.2px;
  font-weight: 600;
}

.hc-topic__count {
  font-size: 12.5px;
  color: var(--os-text-faint);
}

/* --------------------------------------------------------------- recent -- */

.hc-recent {
  padding: 30px 0;
}

.hc-recent__list {
  max-width: 1180px;
  padding: 0 24px;
  margin: 0 auto;
  list-style: none;
}

.hc-recent__list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--os-border-soft);
}

.hc-recent__list a {
  font-size: 14.8px;
  font-weight: 500;
}

.hc-recent__list a:hover {
  color: var(--os-orange);
}

.hc-recent__list time {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--os-text-faint);
}

/* ------------------------------------------------------------------ FAQ -- */

.hc-faq {
  padding: 44px 0;
  margin-top: 24px;
  background: var(--os-bg-soft);
  border-top: 1px solid var(--os-border);
  border-bottom: 1px solid var(--os-border);
}

.hc-faq__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  max-width: 1180px;
  padding: 0 24px;
  margin: 0 auto;
}

.hc-faq__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hc-faq__tabs button {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--os-text-muted);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
}

.hc-faq__tabs button:hover {
  background: var(--os-bg);
}

.hc-faq__tabs button.is-active {
  color: var(--os-orange);
  background: var(--os-bg);
  border-color: var(--os-border);
}

.hc-faq__tabs img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hc-faq__items details {
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--os-bg);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
}

.hc-faq__items summary {
  padding: 14px 16px;
  font-size: 14.8px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hc-faq__items summary::-webkit-details-marker {
  display: none;
}

.hc-faq__items summary::after {
  float: right;
  color: var(--os-text-faint);
  content: '+';
}

.hc-faq__items details[open] summary::after {
  content: '−';
}

.hc-faq__answer {
  padding: 0 16px 15px;
  font-size: 14.2px;
  color: var(--os-text-muted);
}

.hc-faq__answer p { margin: 0 0 8px; }
.hc-faq__answer ul { margin: 0; padding-left: 20px; }
.hc-faq__answer li { margin-bottom: 5px; }

/* ------------------------------------------------------------------ CTA -- */

.hc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  padding: 34px 24px 56px;
  margin: 0 auto;
}

.hc-cta h2 {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hc-cta p {
  margin: 0;
  max-width: 520px;
  font-size: 14.8px;
  color: var(--os-text-muted);
}

.hc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hc-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--os-text);
  background: var(--os-bg);
  border: 1px solid var(--os-border);
  border-radius: 9px;
  transition: border-color 0.15s, background 0.15s;
}

.hc-btn:hover {
  border-color: var(--os-text-faint);
}

.hc-btn--primary {
  color: #fff;
  background: var(--os-orange);
  border-color: var(--os-orange);
}

.hc-btn--primary:hover {
  background: var(--os-orange-dark);
  border-color: var(--os-orange-dark);
}

/* ---------------------------------------------------------- breadcrumbs -- */

.hc-crumbs {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--os-text-faint);
}

.hc-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hc-crumbs li {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hc-crumbs a:hover {
  color: var(--os-orange);
  text-decoration: underline;
}

.hc-crumbs__sep {
  color: var(--os-border);
}

/* ------------------------------------------------------------- category -- */

.hc-category {
  max-width: 1000px;
  padding: 28px 24px 64px;
  margin: 0 auto;
}

.hc-category__head {
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--os-border);
}

.hc-category__head h1 {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 720;
  letter-spacing: -0.028em;
}

.hc-category__head p {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--os-text-muted);
}

.hc-category__count {
  font-size: 13.5px !important;
  color: var(--os-text-faint) !important;
}

.hc-category__section {
  margin-bottom: 34px;
}

.hc-category__section h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 650;
  color: var(--os-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hc-list {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  overflow: hidden;
}

.hc-list li + li {
  border-top: 1px solid var(--os-border-soft);
}

.hc-list a {
  display: block;
  padding: 14px 17px;
  transition: background 0.12s;
}

.hc-list a:hover {
  background: var(--os-bg-sunk);
}

.hc-list__title {
  display: block;
  font-size: 15px;
  font-weight: 550;
}

.hc-list a:hover .hc-list__title {
  color: var(--os-orange);
}

.hc-list__desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  font-size: 13.4px;
  line-height: 1.5;
  color: var(--os-text-faint);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hc-list__kind {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--os-text-faint);
  text-transform: capitalize;
}

.hc-empty {
  padding: 26px 0;
  color: var(--os-text-muted);
}

.hc-empty a {
  color: var(--os-orange);
  text-decoration: underline;
}

/* -------------------------------------------------------------- article -- */

.hc-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 44px;
  max-width: 1180px;
  padding: 28px 24px 72px;
  margin: 0 auto;
}

.hc-article__main {
  min-width: 0;
}

.hc-article__head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hc-article__head h1 {
  margin: 0;
  font-size: 33px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.028em;
}

.hc-article__meta {
  margin: 0 0 26px;
  font-size: 13px;
  color: var(--os-text-faint);
}

/* Imported WordPress bodies sometimes lead with their own <h1>. */
.hc-prose > h1:first-child {
  display: none;
}

.hc-prose img {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
}

.hc-article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  margin-top: 44px;
  border-top: 1px solid var(--os-border);
}

.hc-article__foot p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 550;
}

.hc-article__side {
  position: sticky;
  top: 120px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.hc-toc__title {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--os-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-toc ul,
.hc-related ul {
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
}

.hc-toc li[data-depth='3'] a {
  padding-left: 14px;
  font-size: 12.6px;
}

.hc-toc a,
.hc-related a {
  display: block;
  padding: 4px 0;
  font-size: 13.2px;
  line-height: 1.45;
  color: var(--os-text-muted);
}

.hc-toc a:hover,
.hc-related a:hover {
  color: var(--os-orange);
}

/* ---------------------------------------------------------- search page -- */

.hc-searchpage {
  max-width: 820px;
  padding: 40px 24px 72px;
  margin: 0 auto;
}

.hc-searchpage h1 {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.hc-searchpage__box {
  margin-bottom: 20px;
}

.hc-searchpage__count {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--os-text-faint);
}

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

.hc-footer {
  padding: 48px 24px 30px;
  background: var(--os-bg-soft);
  border-top: 1px solid var(--os-border);
}

.hc-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  max-width: 1180px;
  margin: 0 auto 30px;
}

.hc-footer__title {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--os-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-footer__inner ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hc-footer__inner li {
  margin-bottom: 8px;
  font-size: 13.8px;
  color: var(--os-text-muted);
}

.hc-footer__inner a:hover {
  color: var(--os-orange);
}

.hc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  max-width: 1180px;
  padding-top: 22px;
  margin: 0 auto;
  border-top: 1px solid var(--os-border);
}

.hc-footer__legal p {
  margin: 0;
  font-size: 12.8px;
  color: var(--os-text-faint);
}

.hc-footer__legal a {
  color: var(--os-orange);
}

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

@media (max-width: 1080px) {
  .hc-guides__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-article {
    grid-template-columns: minmax(0, 1fr);
  }

  .hc-article__side {
    position: static;
    max-height: none;
  }
}

@media (max-width: 860px) {
  .hc-top__burger {
    display: flex;
  }

  .hc-top__nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding: 14px 24px 20px;
    background: var(--os-bg);
    border-bottom: 1px solid var(--os-border);
    box-shadow: var(--os-shadow-md);
  }

  .hc-top__nav.is-open {
    display: flex;
  }

  .hc-top__cta {
    text-align: center;
  }

  .hc-faq__body {
    grid-template-columns: 1fr;
  }

  .hc-faq__tabs {
    flex-direction: row;
    overflow-x: auto;
  }

  .hc-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-hero h1 {
    font-size: 34px;
  }

  .hc-hero {
    padding-top: 48px;
  }
}

@media (max-width: 560px) {
  .hc-guides__grid,
  .hc-footer__inner {
    grid-template-columns: 1fr;
  }

  .hc-article__head {
    flex-direction: column;
    gap: 12px;
  }

  .hc-search button[type='submit'] {
    padding: 8px 12px;
  }
}

/* ------------------------------------------------- agent directive ------ */

/*
 * Visually hidden, but still in the rendered DOM and in any HTML-to-markdown
 * conversion. `display: none` would not do — converters strip it, and the
 * Agent-Friendly Docs spec requires the directive to survive conversion.
 */
.os-agent-directive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}