:root {
  --horizon-radius: 10px;
}
:root:where(:not(:has(#pjax-main[data-active="home"]))),
.horizon-home {
  --radius: 12px;
}
:root[data-theme="light"]:where(:not(:has(#pjax-main[data-active="home"]))),
:root[data-theme="light"] .horizon-home {
  --bg: #f2f3f4;
  --fg: #333;
  --muted: #666;
  --accent: #165dff;
  --accent-ink: #1654d1;
  --on-accent: #fff;
  --glass-solid: #f5f6f7;
  --glass: #f1f2f3;
  --glass-brd: #fff;
  --nav-bg: #f7f8f8f2;
  --field: #ebedee;
  --line: #e4e4e4;
  --horizon-edge: #f8f9fa;
  --horizon-surface: linear-gradient(160deg, #fafbfb, #f5f6f7 54%, #edeeef);
  --horizon-inset: inset 4px 4px 12px #969da66b, inset -4px -4px 12px #fff;
  --horizon-shadow: 10px 10px 22px #94989c63, -10px -10px 22px #f8f9fa;
  --horizon-nav-shadow: 0 6px 16px #94989c1f;
  --horizon-date-bg: linear-gradient(145deg, #e7e9ed, #f3f4f5 72%);
}
:root[data-theme="dark"]:where(:not(:has(#pjax-main[data-active="home"]))),
:root[data-theme="dark"] .horizon-home {
  --bg: #242424;
  --fg: #fff;
  --muted: #b3b3b3;
  --accent: #79a1ff;
  --glass-solid: #2a2a2a;
  --glass: #262626;
  --glass-brd: #333;
  --nav-bg: #292929f2;
  --field: #2c2c2c;
  --line: #393939;
  --horizon-edge: #313131;
  --horizon-surface: linear-gradient(160deg, #2f2f2f, #2a2a2a 54%, #232323);
  --horizon-inset: inset 4px 4px 12px #1b1b1b, inset -4px -4px 12px #ffffff0b;
  --horizon-shadow: 8px 8px 24px #0007, -8px -8px 24px #ffffff09;
  --horizon-nav-shadow: 0 6px 18px #0006;
  --horizon-date-bg: linear-gradient(145deg, #36383c, #292b2e 72%);
}
:where(body:not(:has(#pjax-main[data-active="home"]))) .topnav {
  border-radius: var(--horizon-radius);
  box-shadow: var(--horizon-nav-shadow);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 15%, transparent) .6px, transparent .6px);
  background-size: 4px 4px;
}
:where(body:not(:has(#pjax-main[data-active="home"]))) .topnav,
.horizon-home, .layout-wrap:has(.horizon-article-head) {
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.horizon-home .ac-title, .horizon-article-head .post-title { font-family: inherit; }
/* Keep the site's established home layout and colors. */
:root[data-theme="light"]:has(#pjax-main[data-active="home"]),
:root[data-theme="light"] .horizon-home {
  --radius: 12px;
  --bg: #eff0f1; --fg: #303030; --muted: #636669;
  --accent: #2463ec; --accent-ink: #1654d1; --on-accent: #fff;
  --glass-solid: #f5f6f7; --glass: #f1f2f3; --glass-brd: #fff;
  --nav-bg: #f7f8f8f2; --field: #f8f9fa; --line: #dedfe1;
  --horizon-edge: #ffffffbf;
  --horizon-inset: inset 2px 3px 9px #2d33351b, inset -2px -2px 7px #fff;
  --horizon-shadow: 9px 10px 23px #25282d1f, -4px -4px 14px #ffffffa6;
}
:root[data-theme="dark"]:has(#pjax-main[data-active="home"]),
:root[data-theme="dark"] .horizon-home {
  --radius: 12px;
  --bg: #202124; --fg: #f0f0f1; --muted: #b2b4b9; --accent: #79a1ff;
  --glass-solid: #2c2e31; --glass: #282a2d; --glass-brd: #3d3f42;
  --nav-bg: #2e3032f2; --field: #27282a; --line: #414247;
  --horizon-edge: #3c3e42;
  --horizon-inset: inset 2px 3px 9px #0004;
  --horizon-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
body:has(#pjax-main[data-active="home"])::before { background-image: none; }
body:has(#pjax-main[data-active="home"])::after { background: none; }
body:has(#pjax-main[data-active="home"]) .topnav {
  border-radius: 12px;
  box-shadow: var(--horizon-shadow);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 15%, transparent) .6px, transparent .6px);
  background-size: 4px 4px;
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body:where(:not(:has(#pjax-main[data-active="home"])))::before { background-image: none; }
body:where(:not(:has(#pjax-main[data-active="home"])))::after { background: none; }
@media (min-width: 901px) {
  :where(body:not(:has(#pjax-main[data-active="home"]))) .topnav { width: min(calc(100% - 48px), 1160px); }
  body:has(#pjax-main[data-active="home"]) .topnav { width: min(calc(100% - 48px), 1160px); }
}
.layout-wrap:has(> .horizon-home) {
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 40px), 1140px);
  margin-inline: auto;
}
.layout-wrap:has(> .horizon-home) > .hot-posts { display: none; }
.horizon-home {
  order: -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(228px, 260px);
  grid-template-areas: "feature feature" "heading aside" "articles aside";
  align-items: start;
  gap: 14px 24px;
  margin-bottom: 24px;
}
.horizon-main { display: contents; }
.horizon-feature { grid-area: feature; }
.horizon-section-head { grid-area: heading; }
.horizon-grid { grid-area: articles; }
.horizon-aside { grid-area: aside; }
.horizon-aside .hero { margin: 0; }
.horizon-main, .horizon-aside { min-width: 0; }
.horizon-feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--horizon-radius);
  border: 2px solid var(--horizon-edge);
  box-shadow: var(--horizon-shadow);
}
.horizon-feature-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.horizon-feature-rail::-webkit-scrollbar { display: none; }
.horizon-feature-slide {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 0 0 100%;
  min-width: 0;
  min-height: clamp(200px, 21vw, 240px);
  align-content: end;
  padding: 12px 14px 28px;
  background: linear-gradient(0deg, #343434, #606060 11%, var(--field) 42%);
  color: #fff;
  scroll-snap-align: start;
}
.horizon-feature-slide:hover, .horizon-feature-slide:visited { color: #fff; }
.horizon-feature-slide:focus-visible { outline-offset: -3px; }
.horizon-feature-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.horizon-feature-slide:has(.horizon-feature-image)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, #181818e6, #18181870 24%, transparent 52%);
}
.horizon-feature-slide.horizon-thumb-missing::before { display: none; }
.horizon-feature-caption { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; overflow-wrap: anywhere; }
.horizon-feature :is(h2, strong) { margin: 0 0 3px; font-size: clamp(16px, 2vw, 22px); line-height: 1.25; }
.horizon-feature p { margin: 0; color: #f1f1f1; font-size: 13px; }
.horizon-feature-caption a, .horizon-feature-controls > button {
  border: 1px solid #ffffff55;
  border-radius: 8px;
  color: #fff;
  background: #242424c4;
}
.horizon-feature-caption a { padding: 5px 10px; font-size: 12px; }
.horizon-feature-controls button { cursor: pointer; }
.horizon-feature-controls > button { position: absolute; padding: 0; }
.horizon-feature-controls > button:hover { background: #242424; }
.horizon-feature-prev, .horizon-feature-next { top: 50%; translate: 0 -50%; width: 30px; height: 30px; font-size: 21px; line-height: 1; }
.horizon-feature-prev { left: 10px; }
.horizon-feature-next { right: 10px; }
.horizon-feature-pause { bottom: 4px; right: 8px; width: 26px; height: 24px; font-size: 12px; }
.horizon-feature-dots {
  position: absolute;
  bottom: 2px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 2px;
}
.horizon-feature-dots button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
}
.horizon-feature-dots button::before { content: ''; width: 13px; height: 4px; border-radius: 99px; background: #ffffffa8; }
.horizon-feature-dots button[aria-current]::before { width: 22px; background: #6291ff; }
@media (hover: hover) {
  .horizon-feature:not(:hover):not(:focus-within) :is(.horizon-feature-prev, .horizon-feature-next) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .horizon-feature-pause { display: none; } }
.horizon-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 17px 0 10px; }
.horizon-section-head h2, .horizon-side-card h2 { margin: 0; font-size: 16px; }
.horizon-section-head a { font-size: 12px; color: var(--accent-ink); }
.horizon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.horizon-grid .article-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border: 2px solid var(--horizon-edge); background: var(--horizon-surface); box-shadow: var(--horizon-shadow); }
.horizon-grid .ac-img { min-height: 0; aspect-ratio: 5 / 3; }
.horizon-grid .ac-body { gap: 7px; padding: 12px; }
.horizon-grid .ac-title { margin: 0; font-size: 15px; }
.horizon-grid .ac-summary { -webkit-line-clamp: 2; font-size: 12px; }
.horizon-grid .ac-meta { gap: 4px 8px; font-size: 11px; }
.horizon-grid .msg { grid-column: 1 / -1; }
.horizon-aside { display: grid; gap: 14px; }
.horizon-side-card { padding: 13px; border: 2px solid var(--horizon-edge); border-radius: var(--horizon-radius); background: var(--horizon-surface); box-shadow: var(--horizon-shadow); }
.horizon-date { min-height: 168px; background: var(--horizon-date-bg); }
.horizon-date p { margin: 0; color: var(--muted); font-size: 13px; }
.horizon-date time { display: block; margin: 5px 0 14px; }
.horizon-date strong { font-size: 44px; line-height: 1; }
.horizon-date span { color: var(--muted); }
.horizon-ranking { margin: 8px 0 0; padding: 5px 7px; list-style: none; border-radius: 9px; background: var(--field); }
.horizon-ranking li + li { border-top: 1px solid var(--line); }
.horizon-home .horizon-ranking li { position: relative; }
.horizon-home .horizon-ranking li::after {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: var(--horizon-rank-width, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  pointer-events: none;
}
.horizon-ranking a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 0; color: var(--fg); font-size: 12px; }
.horizon-ranking a:hover { color: var(--accent-ink); }
.horizon-rank { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.horizon-ranking li:nth-child(-n+3) .horizon-rank { background: var(--accent); color: var(--on-accent); }
.horizon-rank-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.horizon-ranking small { color: var(--muted); }
.horizon-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.horizon-shortcuts a { padding: 6px; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: 12px; }
@media (max-width: 900px) {
  .horizon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .layout-wrap:has(> .horizon-home) { width: calc(100% - 28px); }
  .horizon-home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "feature" "aside" "heading" "articles";
    gap: 16px;
  }
}
@media (max-width: 420px) {
  .horizon-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Reading surface and its independent sidebar. */
.layout-wrap:has(.horizon-article-head) {
  --horizon-side-width: 258px;
  --horizon-column-gap: 24px;
  width: min(calc(100% - 40px), 1140px);
  margin-inline: auto;
}
.layout-wrap:has(.horizon-article-head) > :is(.post, .comments) {
  background: var(--horizon-surface);
  border-color: var(--horizon-edge);
  border-radius: var(--horizon-radius);
  box-shadow: var(--horizon-shadow);
}
.layout-wrap:has(.horizon-article-head) > .post {
  position: relative;
  padding: clamp(16px, 2.6vw, 30px);
}
.layout-wrap:has(.horizon-article-head) > .comments { margin-top: 22px; }
.horizon-article-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 16px;
}
.horizon-article-cover {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  grid-area: 1 / 1;
  margin: 0;
  height: clamp(220px, 24vw, 330px);
  border: 2px solid var(--horizon-edge);
  border-radius: var(--horizon-radius);
  background: var(--field);
}
.horizon-article-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0007, transparent 34%, #0002 49%, #000c);
  pointer-events: none;
}
.horizon-article-cover.horizon-thumb-missing { display: none; }
.horizon-article-cover .post-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.horizon-cover-open {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  padding: 4px 9px;
  border: 1px solid #ffffff35;
  border-radius: 999px;
  background: #0006;
  color: #fff;
  cursor: zoom-in;
  font-size: 12px;
}
.horizon-cover-open:disabled { opacity: .55; cursor: default; }
.horizon-article-head .post-head { margin: 0; padding: 0 0 14px; }
.horizon-article-head .post-title { margin: 0 0 8px; line-height: 1.35; font-size: clamp(19px, 2vw, 26px); text-wrap: pretty; }
.horizon-article-cover:not(.horizon-thumb-missing) + .post-head {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  padding: 0 15px 13px;
  border: 0;
  color: #fff;
  text-shadow: 0 1px 8px #0008;
}
.horizon-article-cover:not(.horizon-thumb-missing) + .post-head :is(.post-title, .post-meta, .post-meta a, .horizon-byline) { color: inherit; }
.horizon-article-cover:not(.horizon-thumb-missing) + .post-head .post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.horizon-article-cover:not(.horizon-thumb-missing) + .post-head :is(.post-cat, .post-license) { background: #0006; border-color: #ffffff45; }
.horizon-article-head .post-meta { gap: 6px 12px; font-size: 12px; }
.horizon-byline { color: var(--fg); font-weight: 700; }
.layout-wrap:has(.horizon-article-head) #postContent { line-height: 1.82; }
.layout-wrap:has(.horizon-article-head) #postContent :is(h2, h3) { border-bottom: 0; }
.layout-wrap:has(.horizon-article-head) #postContent h2 { font-size: 21px; }
.layout-wrap:has(.horizon-article-head) #postContent img { border-radius: 9px; }
.horizon-article-aside { display: none; }
.horizon-author { text-align: center; background: var(--horizon-date-bg); }
.horizon-author > img { display: block; margin: 0 auto 8px; border: 3px solid var(--glass-solid); border-radius: 50%; object-fit: cover; }
.horizon-author > p { margin: 7px 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.horizon-directory > :is(.post-toc, .ai-side) { position: static; width: auto; }
.horizon-directory .post-toc { background: var(--glass-solid); box-shadow: var(--horizon-shadow); }
@media (min-width: 1024px) {
  body:not(.immersive) .layout-wrap:has(.horizon-article-head) { padding-right: calc(var(--horizon-side-width) + var(--horizon-column-gap)); }
  body:not(.immersive) .horizon-article-aside {
    display: block;
    position: absolute;
    inset: 0 auto 0 calc(100% + var(--horizon-column-gap));
    width: var(--horizon-side-width);
  }
  .horizon-article-sticky { position: sticky; top: 88px; display: grid; gap: 14px; }
  .horizon-directory.has-directory .post-toc { display: block; max-height: min(43vh, 320px); }
  body:not(.immersive):has(.horizon-directory.has-directory) .toc-fab.show { display: none; }
}
@media (max-width: 560px) {
  .layout-wrap:has(.horizon-article-head) { width: calc(100% - 24px); }
  .horizon-article-cover { height: clamp(190px, 44vw, 260px); }
}

/* Inset comment editor and threaded cards. */
.layout-wrap:has(.horizon-article-head) .comments .box-title { font-size: 16px; }
.layout-wrap:has(.horizon-article-head) .comments .comment-form-box { padding-bottom: 12px; margin-bottom: 12px; }
.layout-wrap:has(.horizon-article-head) .comment-item > .comment-form-box {
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid var(--horizon-edge);
  border-radius: 8px;
  background: var(--horizon-surface);
}
.layout-wrap:has(.horizon-article-head) .comments textarea {
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--horizon-inset);
}
.layout-wrap:has(.horizon-article-head) .comments :is(.comments-list, .comment-children) { display: grid; gap: 5px; }
.layout-wrap:has(.horizon-article-head) .comments .comment-item {
  padding: 8px;
  border: 1px solid var(--horizon-edge);
  border-radius: var(--horizon-radius);
  background: var(--bg);
  box-shadow: var(--horizon-inset);
}
.layout-wrap:has(.horizon-article-head) .comments .comment-children {
  margin: 6px 0 0 clamp(8px, 2vw, 22px);
  padding: 5px;
  border: 1px solid var(--horizon-edge);
  border-radius: var(--horizon-radius);
  box-shadow: var(--horizon-inset);
}
.layout-wrap:has(.horizon-article-head) .comment-children .comment-item { border: 0; box-shadow: none; }
.layout-wrap:has(.horizon-article-head) .comment-avatar { width: 40px; height: 40px; border: 2px solid var(--horizon-edge); }
.layout-wrap:has(.horizon-article-head) .comments .comment-head { flex-wrap: wrap; gap: 5px 8px; }
.layout-wrap:has(.horizon-article-head) .comments .comment-body { font-size: 14px; margin-left: clamp(14px, 4vw, 46px); }

/* Images load in place, keeping the text visible. */
.horizon-grid .ac-img:is(.horizon-thumb-loading, .horizon-thumb-missing)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  height: auto;
  background: var(--field);
}
.horizon-thumb-missing img { visibility: hidden; }
.horizon-grid .ac-img.horizon-thumb-loading img, .horizon-article-cover.horizon-thumb-loading img {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .horizon-article-cover .post-cover { transition: opacity .5s ease; }
  .horizon-grid .ac-img.horizon-thumb-ready img { animation: horizon-gallery-in .5s ease; }
  .horizon-lightbox[open], .horizon-lightbox[open]::backdrop { animation: horizon-gallery-in .3s ease-out; }
  .horizon-lightbox-status.is-loading::after { animation: horizon-image-progress .8s ease-in-out infinite; }
  @keyframes horizon-gallery-in { from { opacity: 0; } }
  @keyframes horizon-image-progress { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
}

/* Image viewer stays independent from the default theme's lightbox. */
html.horizon-lightbox-open { overflow: hidden; }
.horizon-lightbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 16px;
  border: 0;
  background: transparent;
  color: #fff;
}
.horizon-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.horizon-lightbox::backdrop { background: #3037424d; backdrop-filter: blur(20px); }
.horizon-lightbox-tools {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  justify-self: center;
  width: min(100%, 600px);
  padding: 10px;
  margin-bottom: max(3dvh, env(safe-area-inset-bottom));
  border-radius: 5px;
  background: #171b225c;
  backdrop-filter: blur(10px);
}
.horizon-lightbox-count { padding-inline: 8px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.horizon-lightbox :is(.horizon-lightbox-steps, .horizon-lightbox-actions) { display: flex; gap: 5px; }
.horizon-lightbox-actions { justify-self: end; }
.horizon-lightbox :is(button, [data-original]) {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff30;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.horizon-lightbox [data-original][hidden] { display: none; }
.horizon-lightbox :is(button, [data-original]):hover { background: #ffffff52; }
.horizon-lightbox button:disabled { opacity: .55; cursor: default; }
.horizon-lightbox-stage { grid-row: 1; position: relative; min-height: 0; }
.horizon-lightbox-viewport { height: 100%; overflow: hidden; }
.horizon-lightbox-viewport img { display: block; width: auto; height: 100%; max-width: 100%; margin-inline: auto; object-fit: contain; cursor: zoom-in; }
.horizon-lightbox-viewport.is-zoomed { overflow: auto; }
.horizon-lightbox-viewport.is-zoomed img { width: 170%; height: auto; max-width: none; cursor: zoom-out; }
.horizon-lightbox-status {
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  overflow: hidden;
  padding: 8px 12px;
  background: #171b22c9;
  border-radius: 5px;
  font-size: 12px;
}
.horizon-lightbox-status.is-loading::after {
  content: '';
  display: block;
  height: 3px;
  background: #ffffff9c;
}
.horizon-lightbox-status.is-loading { width: 8rem; padding: 0; background: none; }
.horizon-lightbox-status.is-loading > span {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* Account settings and public profiles. Sign-in uses the core recovery layout. */
:is(.uc-page, .profile-page) > :is(.uc-profile, .uc-section, .uc-pun-item, .profile-hero, .glass-card.pad) {
  border: 2px solid var(--horizon-edge);
  border-radius: var(--horizon-radius);
  background: var(--horizon-surface);
  box-shadow: var(--horizon-shadow);
  backdrop-filter: none;
}
.uc-page .uc-tabs {
  flex-wrap: wrap;
  border-color: var(--horizon-edge);
  border-radius: var(--horizon-radius);
  background: var(--field);
  box-shadow: var(--horizon-inset);
}
.uc-page .uc-tabs .tab { border-radius: 7px; }
.uc-page .uc-tabs .tab.cur {
  background: var(--horizon-surface);
  color: var(--accent-ink);
  box-shadow: 0 2px 8px #0002;
}
.uc-page .uc-tabs .tab:focus-visible { outline-offset: -2px; }
.uc-page .uc-section .input {
  background: var(--field);
  box-shadow: var(--horizon-inset);
}
.uc-page .uc-section .input:focus { box-shadow: var(--horizon-inset), 0 0 0 2px var(--ring); }
@media (max-width: 560px) {
  .uc-page .uc-tabs .tab { flex-basis: calc(25% - 4px); padding-inline: 6px; }
}