/*
 * HaoLo public-site monochrome theme
 * Keeps brand artwork and product-demo imagery intact while making the website
 * chrome, typography, controls, cards and decorative surfaces black/white/grey.
 */
:root {
  --mono-black: #050505;
  --mono-ink: #111318;
  --mono-graphite: #343a43;
  --mono-mid: #707780;
  --mono-silver: #b4bac0;
  --mono-line: rgba(31, 35, 40, .18);
  --mono-line-soft: rgba(31, 35, 40, .1);
  --mono-surface: rgba(255, 255, 255, .86);
  --mono-surface-soft: rgba(242, 242, 242, .82);
  --mono-focus: #555b63;
  --mono-silver-gradient: linear-gradient(
    180deg,
    #1c2229 0%,
    #48515b 32%,
    #92989e 47%,
    #505962 59%,
    #1f252c 100%
  );
  --mono-silver-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 7px 18px rgba(15, 15, 15, .12);
}

body.site-monochrome {
  --registration-download-blue: #0f6fe8;
  --paper: #f5f5f5;
  --card: rgba(255, 255, 255, .86);
  --line: rgba(31, 35, 40, .16);
  --ink: #111318;
  --muted: #686d74;
  --blue: #30343a;
  --blue2: #777d84;
  --green: #565c63;
  --violet: #666b72;
  --gold: #595e64;
  --red: #454a50;

  --paper-50: #ffffff;
  --paper-100: #f8f8f8;
  --paper-200: #eeeeee;
  --paper-300: #dedede;
  --ink-900: #111318;
  --ink-800: #24272c;
  --ink-700: #3d4248;
  --ink-600: #5c6269;
  --ink-500: #747a81;
  --ink-400: #989da3;
  --ink-300: #c7cacf;
  --ink-200: #dedfe2;
  --ink-100: #efeff0;
  --blue-50: #f8f8f8;
  --blue-100: #ededed;
  --blue-200: #d9d9d9;
  --blue-300: #bfc1c4;
  --blue-400: #979ca2;
  --blue-500: #737980;
  --blue-600: #555c64;
  --blue-700: #353b43;
  --blue-900: #15181c;
  --violet-100: #eeeeee;
  --violet-300: #c7c7c7;
  --violet-500: #656a70;
  --mint-100: #ededed;
  --mint-300: #c5c7c9;
  --mint-500: #666c72;
  --mint-700: #3d434a;
  --cyan-100: #f0f0f0;
  --cyan-300: #cacaca;
  --cyan-500: #5e646b;
  --coral-100: #eeeeee;
  --coral-300: #c3c3c3;
  --coral-500: #4d535a;
  --hero-ink: #111318;
  --silver-text-fallback: #555d67;
  --silver-text-gradient: var(--mono-silver-gradient);
  --silver-text-shadow: var(--mono-silver-shadow);
}

body.site-monochrome ::selection {
  background: #22252a;
  color: #fff;
}

/* Circled title accents match the registration-download badge blue. */
.site-monochrome :is(
  .premium-silver-text,
  .page-head h1 em,
  .section h2 em,
  .section-head h2 em,
  .home-company h2 em,
  .final h2 em
) {
  color: var(--registration-download-blue);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

/* Match the home-title AI and HaoLo accents to the registration-download badge. */
body.site-monochrome.page-home .hero-title :is(.at, .brand-name) {
  color: var(--registration-download-blue);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

@media (prefers-color-scheme: dark) {
  body.site-monochrome {
    --registration-download-blue: #4b92f3;
  }
  .site-monochrome :is(
    .premium-silver-text,
    .page-head h1 em,
    .section h2 em,
    .section-head h2 em,
    .home-company h2 em,
    .final h2 em
  ) {
    color: var(--registration-download-blue);
  }
}

/* Shared navigation: solid black chrome with high-contrast white states. */
.site-monochrome .nav-logo-full {
  display: inline-flex;
  width: 112px;
  height: 44px;
  flex: 0 0 112px;
  align-items: center;
  overflow: hidden;
  background: none;
  color: #111;
  -webkit-text-fill-color: initial;
}
.site-monochrome .nav-logo-script {
  display: block;
  width: 112px;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .96;
}
.site-monochrome :is(.nav, .site-nav, .site-header) {
  background: #050505;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger) {
  color: #fff;
}
.site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger):is(:hover, :active, .is-active),
.site-monochrome .nav-links .is-active {
  color: #fff;
}
.site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger)::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .58), #fff, rgba(255, 255, 255, .58));
}
.site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger):focus-visible {
  outline-color: #fff;
}
.site-monochrome :is(.nav-link-button, .nav-auth-trigger):disabled {
  color: rgba(255, 255, 255, .38);
}
.site-monochrome .nav-auth-trigger.is-authed {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.site-monochrome :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--mono-focus);
}
.site-monochrome :is(.nav-cta, .download-btn) {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #202226 0%, #050505 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(5, 5, 5, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.site-monochrome :is(.nav-cta, .download-btn):hover {
  border-color: rgba(255, 255, 255, .28);
  background: linear-gradient(180deg, #32353a 0%, #101113 100%);
  color: #fff;
}
.site-monochrome :is(.nav-cta, .download-btn):active {
  background: #050505;
  transform: translateY(0);
}

/* Neutral marketing surfaces. */
.site-monochrome :is(
  .skill-card,
  .project-card,
  .glass-card,
  .manifesto-card,
  .contact-card,
  .blog-card,
  .idea-card,
  .mine-card,
  .comment-form,
  .plan-card,
  .boost-card,
  .notice,
  .beta-modal-card
) {
  border-color: var(--mono-line-soft);
  box-shadow: 0 2px 0 rgba(15, 15, 15, .025), 0 12px 30px rgba(15, 15, 15, .075);
}
.site-monochrome :is(.skill-card, .project-card, .blog-card, .idea-card, .plan-card, .boost-card):hover {
  border-color: rgba(43, 47, 52, .28);
  box-shadow: 0 3px 0 rgba(15, 15, 15, .025), 0 22px 48px rgba(15, 15, 15, .12);
}

/* Remove residual navy literals used by older page-local styles. */
.site-monochrome .beta-modal-backdrop,
.site-monochrome .modal-overlay,
.site-monochrome .modal-backdrop,
.site-monochrome .image-preview-modal {
  background: rgba(8, 8, 8, .48);
}
.site-monochrome .beta-modal-title { color: #17191c; }
.site-monochrome .beta-modal-copy { color: rgba(62, 66, 72, .76); }
.site-monochrome .beta-modal-close { color: rgba(37, 40, 45, .74); }
.site-monochrome .modal,
.site-monochrome .toast {
  box-shadow: 0 18px 52px rgba(8, 8, 8, .24);
}

/* Runtime-injected authentication UI. Higher specificity beats its late style tag. */
.site-monochrome .nav-auth-avatar {
  background: linear-gradient(145deg, #62676d, #191b1e);
  color: #fff;
  box-shadow: 0 7px 18px rgba(10, 10, 10, .22);
}
.site-monochrome :is(.membership-badge-experience, .membership-badge-member) {
  border-color: #c8cacc;
  background: linear-gradient(180deg, #f3f3f3, #dedfe1);
  color: #555b62;
  box-shadow: inset 0 1px 0 #fff;
}
.site-monochrome :is(.haolo-auth-menu, .haolo-auth-modal) {
  border-color: rgba(45, 49, 54, .16);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 64px rgba(8, 8, 8, .22);
}
.site-monochrome .haolo-auth-overlay { background: rgba(8, 8, 8, .5); }
.site-monochrome .haolo-auth-menu-user { border-color: #e2e2e2; }
.site-monochrome :is(.haolo-auth-menu-name, .haolo-auth-title, .haolo-auth-qr-heading) { color: #17191c; }
.site-monochrome :is(.haolo-auth-menu-email, .haolo-auth-subtitle, .haolo-auth-hint, .haolo-auth-foot, .haolo-auth-wechat-status, .haolo-auth-aliyun-note) { color: #747980 !important; }
.site-monochrome .haolo-auth-menu button { color: #3f454c; }
.site-monochrome .haolo-auth-menu button:hover {
  background: #ededed;
  color: #17191c;
}
.site-monochrome .haolo-auth-close {
  background: #efefef;
  color: #60666d;
}
.site-monochrome .haolo-auth-close:hover {
  background: #dedede;
  color: #17191c;
}
.site-monochrome .haolo-auth-channel-tabs {
  border-color: #d6d6d6;
  background: #f1f1f1;
}
.site-monochrome :is(.haolo-auth-channel-tabs, .haolo-auth-method-tabs) button { color: #686e75; }
.site-monochrome .haolo-auth-method-tabs { background: rgba(20, 20, 20, .055); }
.site-monochrome :is(.haolo-auth-channel-tabs, .haolo-auth-method-tabs) button.is-active,
.site-monochrome .haolo-auth-method-tabs button.is-active.is-wechat {
  background: #202327;
  color: #fff;
  box-shadow: 0 8px 18px rgba(10, 10, 10, .18);
}
.site-monochrome .haolo-auth-label { color: #3e444b; }
.site-monochrome .haolo-auth-required { color: #3b3f44; font-weight: 900; }
.site-monochrome :is(.haolo-auth-input, .haolo-auth-secondary, .haolo-auth-aliyun-button, .haolo-auth-upload) {
  border-color: #cfd1d3;
  background: #f7f7f7;
  color: #24282d;
}
.site-monochrome :is(.haolo-auth-input, .haolo-auth-secondary, .haolo-auth-aliyun-button, .haolo-auth-upload):hover {
  border-color: #7b8086;
  background: #fff;
}
.site-monochrome .haolo-auth-input:focus,
.site-monochrome .haolo-auth-input:focus-visible {
  border-color: transparent;
  background: #fff;
  box-shadow: none;
  outline: none;
}
.site-monochrome .haolo-auth-input[readonly],
.site-monochrome :is(.haolo-auth-secondary, .haolo-auth-aliyun-button):disabled {
  border-color: #ddd;
  background: #ececec;
  color: #92969b;
}
.site-monochrome :is(.haolo-auth-wechat-link, .haolo-auth-linkbtn, .haolo-auth-captcha-fallback, .haolo-auth-foot a) { color: #3e444b; }
.site-monochrome .haolo-auth-textbtn { color: #656b72; }
.site-monochrome :is(.haolo-auth-wechat-link, .haolo-auth-linkbtn, .haolo-auth-captcha-fallback, .haolo-auth-foot a):hover { color: #111318; }
.site-monochrome :is(.haolo-auth-wechat-retry, .haolo-auth-primary) {
  border-color: #111318;
  background: linear-gradient(180deg, #35383d, #090a0b);
  color: #fff;
  box-shadow: 0 10px 22px rgba(10, 10, 10, .22);
}
.site-monochrome :is(.haolo-auth-wechat-retry, .haolo-auth-primary):hover {
  background: linear-gradient(180deg, #4a4e54, #191b1e);
}
.site-monochrome :is(.haolo-auth-wechat-retry, .haolo-auth-primary):active { background: #050505; }
.site-monochrome :is(.haolo-auth-wechat-retry, .haolo-auth-primary):disabled {
  border-color: #aaa;
  background: #aaa;
  color: #eee;
  box-shadow: none;
}
.site-monochrome :is(.haolo-auth-close, .haolo-auth-primary, .haolo-auth-secondary, .haolo-auth-linkbtn):focus-visible {
  outline: 3px solid rgba(72, 77, 83, .36);
  outline-offset: 2px;
}
.site-monochrome .haolo-auth-aliyun-button.is-ready {
  border-color: #84898f;
  background: #ececec;
  color: #3e444b;
}
.site-monochrome .haolo-auth-error {
  border: 1px solid #bfc1c4;
  background: #ededed;
  color: #34393f;
}
/* Skills page. Inline agent hues are intentionally collapsed to one system. */
.page-skills .skill-card {
  --agent-color: #555c64 !important;
  --agent-bg: #ececec !important;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-skills :is(.page-eyebrow, .skill-owner .swatch, .skill-example, .skill-status, .skill-status::before) {
  border-color: rgba(42, 46, 52, .18);
}
.page-skills .page-eyebrow {
  color: #4e555d;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 30px rgba(15, 15, 15, .08);
}
.page-skills .page-eyebrow .dot,
.page-skills .skill-owner .swatch,
.page-skills .skill-status::before {
  background: #626870;
}
.page-skills .skill-icon {
  background: #000;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 12px rgba(0, 0, 0, .18);
}
.page-skills .skill-example {
  border-left-color: #626870;
  background: #f0f0f0;
}
.page-skills .skill-status {
  background: #e5e6e7;
  color: #3e444b;
}
.page-skills .page-head p { color: rgba(63, 68, 75, .76); }

/* Home marketing copy and glass borders were historically navy-tinted. */
.page-home :is(.hero-sub, .hero-image-copy p, .section-head p, .tab-desc) {
  color: rgba(65, 69, 75, .74);
}
.page-home .tab-title { color: rgba(48, 52, 58, .62); }
.page-home .btn-primary.mac-download { background: #25272a; }
.page-home .btn-ghost { border-color: rgba(25, 28, 32, .82); }
.page-home .company-visual { border-color: rgba(42, 46, 52, .16); }
.page-home .cap-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-home .cap-card:hover {
  transform: none;
  box-shadow: none;
}
.page-home .cap-icon { background: transparent; color: #626870; }
.page-home .feature-tab::before { background: rgba(82, 82, 82, .34); }
.page-home .feature-tab.is-active::before {
  background: #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .14);
}
.page-home .feature-tab button { color: rgba(48, 48, 48, .58); }
.page-home .feature-tab.is-active :is(.tab-title, .tab-desc) { color: #000; }
.page-home .company-visual {
  box-shadow: 0 22px 56px rgba(18, 18, 18, .12), inset 0 1px 0 rgba(255, 255, 255, .82);
}

/* Product co-creation and idea detail. */
.page-ideas :is(.btn-primary, .filter-btn.active, .btn-submit),
.page-idea-detail :is(.vote-btn:hover, .vote-btn.voted, .btn-comment) {
  border-color: #111318;
  background: linear-gradient(180deg, #303338 0%, #090a0b 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(10, 10, 10, .2);
}
.page-ideas :is(.btn-primary, .filter-btn.active, .btn-submit):hover,
.page-idea-detail :is(.vote-btn:hover, .vote-btn.voted, .btn-comment):hover {
  background: linear-gradient(180deg, #45494f 0%, #17191c 100%);
}
.page-ideas :is(.filter-btn.active, .btn-submit):active,
.page-idea-detail :is(.vote-btn, .btn-comment):active {
  background: #050505;
}
.page-ideas :is(.btn-primary, .filter-btn.active, .btn-submit):disabled,
.page-idea-detail .btn-comment:disabled {
  border-color: #aaa;
  background: #aaa;
  color: #eee;
  box-shadow: none;
}
.page-ideas .vote-box,
.page-idea-detail .vote-btn {
  border-color: rgba(41, 45, 50, .18);
  background: #f0f0f0;
  color: #41474e;
}
.page-ideas :is(.vote-box:hover, .vote-box.voted) {
  border-color: #17191c;
  background: #17191c;
  color: #fff;
}
.page-ideas :is(.status-tag, .version-tag, .mine-comment-admin),
.page-idea-detail :is(.status-tag, .version-tag) {
  background: #e7e7e8;
  color: #4d535a;
}
.page-ideas :is(.form-input:focus, .upload-zone:hover, .upload-zone.dragging),
.page-idea-detail :is(.form-input:focus, .comment-upload-zone:hover, .comment-upload-zone.dragging) {
  border-color: #555b63;
  color: #363b41;
  box-shadow: 0 0 0 3px rgba(55, 59, 65, .12);
}
.page-ideas :is(.submit-account-note, .upload-zone),
.page-idea-detail .comment-upload-zone {
  border-color: rgba(50, 54, 60, .22);
  background: rgba(241, 241, 241, .82);
}
.page-ideas :is(.idea-preview-play, .user-filter a, .mine-comment-admin),
.page-idea-detail :is(.comment-media-play, .idea-screenshot-play) {
  color: #3d434a;
}
.page-ideas .hero p,
.page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .form-label, .btn-cancel, .mine-desc, .mine-comment) {
  color: #555b62;
}
.page-ideas :is(.form-input, .upload-preview, .mine-media a, .mine-media video) {
  border-color: rgba(55, 59, 65, .24);
}
.page-ideas .modal-overlay { background: rgba(8, 8, 8, .48); }
.page-ideas .modal { box-shadow: 0 24px 80px rgba(8, 8, 8, .22); }

/* About page: plain graphite copy accents, neutral icons and black footer. */
.page-about :is(.project-card, .manifesto-card, .contact-card) {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-about .project-card:hover {
  transform: none;
  box-shadow: none;
}
.page-about :is(.section-eyebrow, .blog-head .more, .blog-body .read, .contact-card a) {
  color: #50555b;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.page-about .project-card .num {
  background: #050505;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.page-about .manifesto-section {
  background: transparent;
  color: #171a1e;
}
.page-about .manifesto-section h2,
.page-about .manifesto-section .m-lead { color: #20252b; }
.page-about .manifesto-section h2 em,
.page-about .manifesto-section strong,
.page-about .manifesto-section .m-sign { color: var(--registration-download-blue); }
.page-about .manifesto-section .m-body { color: #4f5963; }
.page-about .manifesto-section .m-foot {
  color: #5c6670;
  border-top-color: rgba(39, 49, 58, .18);
}
.page-about :is(.blog-head .more, .blog-body .read, .contact-card a):hover {
  filter: brightness(.7);
}
.page-about .contact-card .ico {
  background: #050505;
  color: #fff;
  box-shadow: 0 8px 20px rgba(5, 5, 5, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.page-about .blog-thumb {
  background: linear-gradient(145deg, #34373c 0%, #08090a 100%);
}
.page-about .manifesto-card .m-foot {
  border-top-color: rgba(255, 255, 255, .16);
}
.page-about :is(.page-head .lead, .section .lead) { color: rgba(63, 68, 75, .78); }
.page-about .contact-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-about .contact-card .download-link,
.page-about .contact-card .download-link.mac-link {
  background: linear-gradient(180deg, #282b2f, #070708);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 10px 22px rgba(10, 10, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.page-about .contact-card .download-link:hover,
.page-about .contact-card .download-link.mac-link:hover {
  background: linear-gradient(180deg, #41454a, #17191b);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Pricing: both explicit themes stay neutral and retain all interaction states. */
.page-pricing {
  --brand: #34393f;
  --brand-bright: #c4c8cc;
  --brand-soft: rgba(91, 97, 104, .16);
  --green: #686e75;
  --grid: rgba(60, 64, 70, .035);
}
html[data-theme="light"] .page-pricing {
  --bg: #fff;
  --bg-elevated: rgba(255, 255, 255, .88);
  --surface: #fff;
  --surface-2: #f5f5f5;
  --surface-3: #e9e9e9;
  --line: #e1e1e1;
  --line-strong: #c7c7c7;
  --text: #111318;
  --text-soft: #3e4349;
  --muted: #6a7077;
  --muted-2: #999ea4;
  --shadow: 0 18px 54px rgba(20, 20, 20, .13);
  --card-shadow: 0 2px 0 rgba(15, 15, 15, .02), 0 8px 24px rgba(20, 20, 20, .07);
  --glass: rgba(255, 255, 255, .88);
}
.page-pricing :is(.plan-card, .boost-card):is(:hover, .featured) {
  border-color: #aeb2b6;
}
.page-pricing :is(.badge, .boost-gift-badge) {
  border-color: #c8cacc;
  background: #f0f0f0;
  color: #4c5259;
}
.page-pricing :is(.token-box b, .feature-list svg, .notice-icon, .order-icon) {
  color: #4b5259;
}
.page-pricing .balance-dot {
  background: #6b7178;
  box-shadow: 0 0 0 4px rgba(78, 84, 91, .12);
}
.page-pricing .invite-cta {
  border-color: #24282d;
  color: #24282d;
}
.page-pricing .invite-cta :is(svg, path) { stroke: currentColor; }
.page-pricing .product-help summary {
  border-color: #c5c7c9;
  color: #555b62;
}
.page-pricing .product-help-popover {
  border-color: #3b3e43;
  background: #202226;
  color: #f1f1f1;
  box-shadow: 0 14px 30px rgba(6, 6, 6, .24);
}
.page-pricing .product-help-popover::before {
  background: #202226;
}
.page-pricing .boost-gift-badge { box-shadow: 0 4px 10px rgba(20, 20, 20, .14); }
.page-pricing .payment-channel-mark {
  background: linear-gradient(180deg, #4b4f55, #17191c);
  color: #fff;
}
.page-pricing .payment-channel-loading { color: #777c82; }
.page-pricing .modal-backdrop { background: rgba(8, 8, 8, .46); }
.page-pricing .toast { background: #151719; }
.page-pricing .primary-button {
  border-color: #111318;
  background: linear-gradient(180deg, #303338 0%, #090a0b 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 10, 10, .22);
}
.page-pricing .primary-button:hover {
  border-color: #272a2f;
  background: linear-gradient(180deg, #45494f 0%, #17191c 100%);
  box-shadow: 0 11px 24px rgba(10, 10, 10, .26);
}
.page-pricing .secondary-button:hover {
  border-color: #90959b;
  background: #ededed;
}
.page-pricing :is(.primary-button, .secondary-button):active {
  transform: translateY(0);
}
.page-pricing :is(.primary-button, .secondary-button):disabled {
  border-color: #aaa;
  background: #aaa;
  color: #eee;
  box-shadow: none;
}

/* Changelog and legal documents. */
.page-changelog {
  --blue: #41474e;
  --line: rgba(22, 24, 28, .13);
}
.page-changelog :is(.quick-nav a .nav-platform, .release-meta span) {
  border-color: rgba(55, 59, 65, .18);
  background: rgba(73, 78, 85, .08);
  color: #4c5259;
}
.page-changelog .release-meta { color: #666; }
.page-changelog :is(.quick-nav a:hover, .quick-nav a.is-active) {
  border-left-color: #4c5259;
  color: #31363c;
}
.page-changelog .nav-links { color: #42474e; }
.page-changelog .quick-nav h2,
.page-changelog .release h2 { color: #292d32; }
.page-changelog .release ul { color: #41474e; }
.page-legal a {
  color: #41474e;
}
.page-legal .meta { color: #71767d; }
.page-legal h2 { color: #3f454c; }
.page-legal :is(p, li, td, th, strong) { color: #454b52; }
.page-legal .highlight {
  border-color: #686e75;
  background: #ececed;
  color: #353a40;
}
.page-extension-privacy :is(.eyebrow, h2) {
  color: #50555b;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.page-extension-privacy .document {
  box-shadow: 0 20px 54px rgba(15, 15, 15, .11);
}
.page-extension-privacy .limited-use { border-color: #c7c9cb; }
.page-extension-privacy h1 { color: #181b1f; }
.page-extension-privacy .theme-toggle :is(svg, path, circle) {
  color: #555b62;
  stroke: currentColor;
}
.page-legal :is(.notice, .summary, .callout) {
  border-color: var(--mono-line-soft);
  background: #f2f2f2;
}

/* All former solid blue public footers become a deep neutral black. */
.site-monochrome :is(.footer, .site-footer, .legal-footer),
.page-legal footer {
  border-top-color: rgba(255, 255, 255, .12);
  background: linear-gradient(158deg, #181818 0%, #080808 52%, #030303 100%);
  color: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.site-monochrome :is(.footer, .site-footer, .legal-footer) a,
.page-legal footer a {
  color: #f3f3f3;
  text-decoration-color: rgba(255, 255, 255, .3);
}
.site-monochrome :is(.footer, .site-footer, .legal-footer) a:hover,
.page-legal footer a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mono-line: rgba(255, 255, 255, .18);
    --mono-line-soft: rgba(255, 255, 255, .11);
    --mono-surface: rgba(25, 25, 25, .9);
    --mono-surface-soft: rgba(35, 35, 35, .86);
    --mono-focus: #c8ccd0;
    --mono-silver-gradient: linear-gradient(
      180deg,
      #f4f4f4 0%,
      #bfc3c7 30%,
      #f8f8f8 48%,
      #a2a7ac 66%,
      #747a80 100%
    );
    --mono-silver-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px rgba(0, 0, 0, .3);
  }
  body.site-monochrome:not(.page-pricing) {
    --paper: #111;
    --card: rgba(25, 25, 25, .9);
    --line: rgba(255, 255, 255, .13);
    --ink: #f3f3f3;
    --muted: #a4a8ad;
    --blue: #d0d3d6;
    --blue2: #8f9499;
    --green: #b6b9bd;
    --violet: #a9adb1;
    --gold: #b5b8bc;
    --red: #c0c3c6;
    --paper-50: #171717;
    --paper-100: #111;
    --paper-200: #222;
    --paper-300: #303030;
    --ink-900: #f5f5f5;
    --ink-800: #e6e6e6;
    --ink-700: #d2d2d2;
    --ink-600: #b8b8b8;
    --ink-500: #a0a0a0;
    --ink-400: #858585;
    --ink-300: #666;
    --ink-200: #444;
    --ink-100: #2b2b2b;
    --blue-100: #2b2b2b;
    --blue-500: #aeb2b6;
    --blue-700: #d5d8db;
    --blue-900: #f1f1f1;
    --violet-100: #292929;
    --violet-500: #b5b8bc;
    --mint-100: #292929;
    --mint-500: #b8bbbe;
    --mint-700: #dedede;
    --cyan-100: #2a2a2a;
    --cyan-500: #b2b5b9;
    --coral-100: #292929;
    --coral-500: #c2c4c7;
    --hero-ink: #f5f5f5;
    color: #f3f3f3;
    background: linear-gradient(180deg, #0d0d0d 0%, #171717 42%, #101010 100%);
  }
  .site-monochrome :is(.nav, .site-nav, .site-header) {
    border-color: rgba(255, 255, 255, .1);
    background: #050505;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .site-monochrome .nav-logo-script {
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: .94;
  }
  .site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger) {
    color: #fff;
  }
  .site-monochrome :is(.nav-links a, .nav-link-button, .nav-auth-trigger):is(:hover, :active, .is-active),
  .site-monochrome .nav-links .is-active {
    color: #fff;
  }
  .site-monochrome :is(
    .skill-card,
    .project-card,
    .glass-card,
    .manifesto-card,
    .contact-card,
    .blog-card,
    .idea-card,
    .mine-card,
    .comment-form,
    .plan-card,
    .boost-card,
    .notice,
    .beta-modal-card
  ) {
    border-color: rgba(255, 255, 255, .11);
    background: rgba(24, 24, 24, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035);
  }
  .site-monochrome :is(.page-head .lead, .page-head p, .section .lead, .skill-desc, .skill-owner, .project-card p, .company-intro p, .manifesto-card .m-body, .manifesto-card .m-foot, .contact-card .desc, .idea-desc, .comment-content) {
    color: rgba(225, 225, 225, .72);
  }
  .site-monochrome :is(.page-head h1, .section h2, .skill-title, .project-card h3, .contact-card h4, .idea-title, .section-title) {
    color: #f5f5f5;
  }
  .site-monochrome .beta-modal-close {
    color: #ddd;
    background: #292929;
  }
  .site-monochrome .beta-modal-close:hover {
    color: #fff;
    background: #3a3a3a;
  }
  .site-monochrome .beta-modal-title { color: #f4f4f4; }
  .site-monochrome .beta-modal-copy { color: rgba(225, 225, 225, .72); }
  .site-monochrome :is(.beta-modal-backdrop, .modal-overlay, .modal-backdrop, .image-preview-modal) {
    background: rgba(0, 0, 0, .68);
  }
  .site-monochrome :is(.haolo-auth-menu, .haolo-auth-modal) {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(20, 20, 20, .98);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  }
  .site-monochrome .haolo-auth-overlay { background: rgba(0, 0, 0, .72); }
  .site-monochrome .haolo-auth-menu-user { border-color: #333; }
  .site-monochrome :is(.haolo-auth-menu-name, .haolo-auth-title) { color: #f5f5f5; }
  .site-monochrome :is(.haolo-auth-menu-email, .haolo-auth-subtitle, .haolo-auth-hint, .haolo-auth-foot, .haolo-auth-wechat-status, .haolo-auth-aliyun-note) { color: #a7aaae !important; }
  .site-monochrome .haolo-auth-menu button { color: #d5d7d9; }
  .site-monochrome .haolo-auth-menu button:hover { background: #2b2b2b; color: #fff; }
  .site-monochrome .haolo-auth-close { background: #292929; color: #aaaeb2; }
  .site-monochrome .haolo-auth-close:hover { background: #3b3b3b; color: #fff; }
  .site-monochrome .haolo-auth-channel-tabs {
    border-color: #3c3c3c;
    background: #202020;
  }
  .site-monochrome :is(.haolo-auth-channel-tabs, .haolo-auth-method-tabs) button { color: #a7aaae; }
  .site-monochrome .haolo-auth-method-tabs { background: rgba(255, 255, 255, .055); }
  .site-monochrome :is(.haolo-auth-channel-tabs, .haolo-auth-method-tabs) button.is-active,
  .site-monochrome .haolo-auth-method-tabs button.is-active.is-wechat {
    background: #ededed;
    color: #17191c;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
  }
  .site-monochrome .haolo-auth-label { color: #d5d7d9; }
  .site-monochrome :is(.haolo-auth-input, .haolo-auth-secondary, .haolo-auth-aliyun-button, .haolo-auth-upload) {
    border-color: #484848;
    background: #1d1d1d;
    color: #f0f0f0;
  }
  .site-monochrome :is(.haolo-auth-input, .haolo-auth-secondary, .haolo-auth-aliyun-button, .haolo-auth-upload):hover {
    border-color: #777;
    background: #242424;
  }
  .site-monochrome .haolo-auth-input:focus,
  .site-monochrome .haolo-auth-input:focus-visible {
    border-color: transparent;
    background: #202020;
    box-shadow: none;
    outline: none;
  }
  .site-monochrome .haolo-auth-input[readonly],
  .site-monochrome :is(.haolo-auth-secondary, .haolo-auth-aliyun-button):disabled {
    border-color: #353535;
    background: #171717;
    color: #777;
  }
  .site-monochrome :is(.haolo-auth-wechat-link, .haolo-auth-linkbtn, .haolo-auth-captcha-fallback, .haolo-auth-foot a) { color: #c6c9cc; }
  .site-monochrome .haolo-auth-textbtn { color: #a9acb0; }
  .site-monochrome :is(.haolo-auth-wechat-link, .haolo-auth-linkbtn, .haolo-auth-captcha-fallback, .haolo-auth-foot a):hover { color: #fff; }
  .site-monochrome .haolo-auth-aliyun-button.is-ready {
    border-color: #70757a;
    background: #292929;
    color: #dedfe1;
  }
  .site-monochrome .haolo-auth-error {
    border-color: #676b70;
    background: #292929;
    color: #e0e1e2;
  }
  .page-home .hero {
    background: radial-gradient(circle at 50% 18%, rgba(150, 150, 150, .09), transparent 34%), linear-gradient(180deg, #101010 0%, #151515 72%, #111 100%);
  }
  .page-home .hero::after {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(12, 12, 12, .96) 100%);
  }
  .page-home :is(.hero-sub, .section-head p) {
    color: rgba(225, 225, 225, .7);
  }
  .page-home :is(.hero-image-copy p, .tab-desc, .tab-title) {
    color: rgba(222, 222, 222, .7);
  }
  .page-home .feature-tab.is-active::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
  }
  .page-home .feature-tab.is-active :is(.tab-title, .tab-desc) { color: #fff; }
  .page-home :is(.btn-ghost, .company-visual) {
    border-color: rgba(255, 255, 255, .12);
  }
  .page-home .btn-ghost {
    background: rgba(30, 30, 30, .88);
    color: #f0f0f0;
  }
  .page-home .btn-primary.mac-download { background: #232323; }
  .page-home :is(.section-head h2, .home-company h2) {
    color: #f5f5f5;
  }
  .page-home .cap-card {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .page-home .cap-card:hover { transform: none; box-shadow: none; }
  .page-home .cap-card h3 { color: #f3f3f3; }
  .page-home .cap-card p { color: rgba(225, 225, 225, .7); }
  .page-home .cap-icon { background: transparent; color: #c8ccd0; }
  .page-home .company-visual { border-color: rgba(255, 255, 255, .1); }
  .page-home .company-intro p { color: rgba(242, 242, 242, .84); }
  .page-skills .skill-card {
    background: #181818;
  }
  .page-skills .skill-icon {
    background: #000;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 4px 12px rgba(0, 0, 0, .34);
  }
  .page-about .contact-card .ico {
    background: #000;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 20px rgba(0, 0, 0, .34);
  }
  .page-about :is(.project-card, .manifesto-card, .contact-card) {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .page-about .project-card:hover { transform: none; box-shadow: none; }
  .page-skills .skill-example,
  .page-skills .skill-status,
  .page-ideas :is(.submit-account-note, .upload-zone),
  .page-idea-detail .comment-upload-zone {
    background: #252525;
    color: #c6c8ca;
  }
  .page-about :is(.section-eyebrow, .blog-head .more, .blog-body .read, .contact-card a) {
    color: #b8bcc1;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
  }
  .page-about .project-card .num {
    background: #000;
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 9px 24px rgba(0, 0, 0, .34);
  }
  .page-about .manifesto-section {
    background: transparent;
    color: #f0f2f4;
  }
  .page-about .manifesto-section h2,
  .page-about .manifesto-section .m-lead { color: #f0f2f4; }
  .page-about .manifesto-section h2 em,
  .page-about .manifesto-section strong,
  .page-about .manifesto-section .m-sign { color: var(--registration-download-blue); }
  .page-about .manifesto-section .m-body { color: #c2c9cf; }
  .page-about .manifesto-section .m-foot {
    color: #aab3bb;
    border-top-color: rgba(231, 237, 242, .2);
  }
  .page-about .contact-shell {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .page-about :is(.blog-head .more, .blog-body .read, .contact-card a):hover {
    filter: brightness(1.22);
  }
  .page-ideas :is(.form-input, .modal, .btn-cancel, .load-more-btn),
  .page-idea-detail .form-input {
    border-color: rgba(255, 255, 255, .14);
    background: #171717;
    color: #f1f1f1;
  }
  .page-ideas .hero p,
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .form-label, .btn-cancel, .mine-desc, .mine-comment) {
    color: #c3c5c7;
  }
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .btn-cancel) {
    border-color: rgba(255, 255, 255, .18);
    background: #1b1b1b;
    color: #e3e4e5;
  }
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .btn-cancel):hover {
    border-color: rgba(255, 255, 255, .32);
    background: #292929;
    color: #fff;
  }
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .btn-cancel):active {
    background: #101010;
  }
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .btn-cancel):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  .page-ideas :is(.btn-ghost, .filter-btn, .load-more-btn, .btn-cancel):disabled {
    border-color: rgba(255, 255, 255, .08);
    background: #151515;
    color: rgba(255, 255, 255, .38);
  }
  .page-ideas .vote-box,
  .page-idea-detail .vote-btn {
    border-color: rgba(255, 255, 255, .18);
    background: #242424;
    color: #e0e1e2;
  }
  .page-ideas :is(.status-tag, .version-tag, .mine-comment-admin),
  .page-idea-detail :is(.status-tag, .version-tag) {
    background: #292929;
    color: #dfe1e3;
  }
  .page-changelog .nav-links { color: #d0d2d4; }
  .page-changelog .quick-nav h2,
  .page-changelog .release h2 { color: #f1f1f1; }
  .page-changelog .release ul { color: #c9cbcd; }
}

html[data-theme="dark"] .page-pricing {
  --bg: #0c0c0d;
  --bg-elevated: #141414;
  --surface: #181818;
  --surface-2: #222;
  --surface-3: #2c2c2c;
  --line: #343434;
  --line-strong: #4b4b4b;
  --text: #f5f5f5;
  --text-soft: #d1d1d1;
  --muted: #aaa;
  --muted-2: #7e7e7e;
  --shadow: 0 24px 64px rgba(0, 0, 0, .36);
  --card-shadow: 0 14px 34px rgba(0, 0, 0, .2);
  --grid: rgba(255, 255, 255, .025);
  --glass: rgba(16, 16, 16, .86);
}
html[data-theme="dark"] .page-pricing .site-nav {
  border-color: rgba(255, 255, 255, .1);
  background: #050505;
}
html[data-theme="dark"] body.site-monochrome .nav-logo-script {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .94;
}
html[data-theme="dark"] .page-pricing .secondary-button:hover {
  border-color: #686868;
  background: #292929;
}

@media (max-width: 640px) {
  .site-monochrome .nav-logo-full {
    width: 92px;
    height: 36px;
    flex-basis: 92px;
  }
  .site-monochrome .nav-logo-script {
    width: 92px;
  }
}

html[data-theme="dark"] .page-extension-privacy {
  --bg: #0d0d0d;
  --surface: #181818;
  --surface-2: #232323;
  --surface-3: #2e2e2e;
  --line: #3a3a3a;
  --line-strong: #505050;
  --text: #f5f5f5;
  --text-soft: #d2d2d2;
  --muted: #aaa;
  --muted-2: #828282;
  --brand: #d0d3d6;
  --brand-bright: #f2f2f2;
  --brand-soft: rgba(190, 194, 198, .14);
  color: #f4f4f4;
  background: #0d0d0d;
}
html[data-theme="dark"] .page-extension-privacy :is(.eyebrow, h2) {
  color: #b8bcc1;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="dark"] .page-extension-privacy :is(.topbar, .document-card, .summary-card, section) {
  border-color: rgba(255, 255, 255, .11);
  background-color: rgba(24, 24, 24, .92);
}
html[data-theme="dark"] .page-extension-privacy :is(.theme-toggle, th) {
  border-color: rgba(255, 255, 255, .12);
  background: #252525;
}

@media (prefers-color-scheme: dark) {
  .page-legal :is(h1, h2, h3, strong) { color: #f4f4f4; }
  .page-legal :is(p, li, td, th, .updated) { color: rgba(232, 232, 232, .76); }
  .page-legal :is(.highlight, .notice, .summary, .callout) {
    border-color: rgba(255, 255, 255, .16);
    background: #242424;
    color: #e5e5e5;
  }
}

@media (forced-colors: active) {
  .site-monochrome :is(
    .premium-silver-text,
    .page-home .hero-title .at,
    .page-home .hero-title .brand-name,
    .page-head h1 em,
    .section h2 em,
    .section-head h2 em,
    .home-company h2 em,
    .final h2 em,
    .section-eyebrow,
    .project-card .num,
    .manifesto-card .m-sign,
    .contact-card a
  ) {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: CanvasText;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-monochrome *,
  .site-monochrome *::before,
  .site-monochrome *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}