:root {
  --hb-ink-1000: #050508;
  --hb-ink-950: #07070b;
  --hb-ink-900: #0b0b10;
  --hb-ink-880: #0d0d13;
  --hb-ink-870: #101016;
  --hb-ink-860: #101018;
  --hb-ink-850: #111119;
  --hb-ink-840: #12121a;
  --hb-ink-820: #13131a;
  --hb-ink-800: #15151f;
  --hb-ink-780: #16161f;
  --hb-ink-760: #191922;
  --hb-ink-740: #1a1a24;
  --hb-ink-720: #1b1b26;
  --hb-ink-700: #1c1c27;
  --hb-ink-600: #24242f;
  --hb-ink-560: #26263a;

  --hb-fog-100: #f5f5f7;
  --hb-fog-300: #c9c9d4;
  --hb-fog-400: #b9b9c6;
  --hb-fog-500: #9a9aab;
  --hb-fog-600: #8b8b9e;
  --hb-fog-700: #6c6c7e;

  --hb-magenta-400: #ff5c9e;
  --hb-magenta-500: #ff3d8a;
  --hb-magenta-600: #ec2477;
  --hb-violet-400: #a78bfa;
  --hb-violet-500: #8b5cf6;
  --hb-amber-400: #f5b559;
  --hb-blue-400: #60a5fa;
  --hb-white: #ffffff;
  --hb-black: #000000;

  --hb-fog-100-03: rgba(245, 245, 247, 0.03);
  --hb-fog-100-04: rgba(245, 245, 247, 0.04);
  --hb-fog-100-08: rgba(245, 245, 247, 0.08);
  --hb-fog-100-14: rgba(245, 245, 247, 0.14);
  --hb-fog-100-16: rgba(245, 245, 247, 0.16);
  --hb-fog-100-18: rgba(245, 245, 247, 0.18);
  --hb-fog-100-20: rgba(245, 245, 247, 0.2);
  --hb-fog-100-28: rgba(245, 245, 247, 0.28);
  --hb-fog-100-30: rgba(245, 245, 247, 0.3);
  --hb-fog-100-74: rgba(245, 245, 247, 0.74);
  --hb-fog-100-92: rgba(245, 245, 247, 0.92);

  --hb-white-18: rgba(255, 255, 255, 0.18);
  --hb-white-60: rgba(255, 255, 255, 0.6);

  --hb-ink-950-22: rgba(7, 7, 11, 0.22);
  --hb-ink-950-50: rgba(7, 7, 11, 0.5);
  --hb-ink-950-55: rgba(7, 7, 11, 0.55);
  --hb-ink-950-60: rgba(7, 7, 11, 0.6);
  --hb-ink-950-62: rgba(7, 7, 11, 0.62);
  --hb-ink-950-72: rgba(7, 7, 11, 0.72);
  --hb-ink-900-86: rgba(11, 11, 16, 0.86);
  --hb-ink-880-92: rgba(10, 10, 16, 0.92);
  --hb-ink-870-00: rgba(16, 16, 24, 0);
  --hb-ink-870-96: rgba(16, 16, 24, 0.96);

  --hb-magenta-500-12: rgba(255, 61, 138, 0.12);
  --hb-magenta-500-16: rgba(255, 61, 138, 0.16);
  --hb-magenta-500-18: rgba(255, 61, 138, 0.18);
  --hb-magenta-500-22: rgba(255, 61, 138, 0.22);
  --hb-magenta-500-24: rgba(255, 61, 138, 0.24);
  --hb-magenta-500-28: rgba(255, 61, 138, 0.28);
  --hb-magenta-500-32: rgba(255, 61, 138, 0.32);
  --hb-magenta-500-35: rgba(255, 61, 138, 0.35);
  --hb-magenta-400-40: rgba(255, 92, 158, 0.4);
  --hb-magenta-400-55: rgba(255, 92, 158, 0.55);
  --hb-magenta-400-72: rgba(255, 92, 158, 0.72);
  --hb-magenta-600-42: rgba(236, 36, 119, 0.42);
  --hb-violet-500-18: rgba(139, 92, 246, 0.18);
  --hb-violet-500-20: rgba(139, 92, 246, 0.2);
  --hb-violet-500-22: rgba(139, 92, 246, 0.22);
  --hb-violet-500-28: rgba(139, 92, 246, 0.28);
  --hb-violet-500-50: rgba(139, 92, 246, 0.5);
  --hb-violet-500-66: rgba(139, 92, 246, 0.66);
  --hb-violet-400-16: rgba(167, 139, 250, 0.16);
  --hb-violet-400-40: rgba(167, 139, 250, 0.4);
  --hb-violet-400-45: rgba(167, 139, 250, 0.45);
  --hb-violet-400-50: rgba(167, 139, 250, 0.5);
  --hb-amber-400-28: rgba(245, 181, 89, 0.28);
  --hb-blue-400-30: rgba(96, 165, 250, 0.3);
  --hb-blue-400-34: rgba(96, 165, 250, 0.34);

  --hb-shadow-dark-50: rgba(0, 0, 0, 0.5);
  --hb-shadow-dark-58: rgba(0, 0, 0, 0.58);

  --hb-font-sans: "PingFang SC", "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hb-font-num: "SF Pro Display", "Helvetica Neue", Arial, var(--hb-font-sans);

  --hb-text-micro-1: 5.5px;
  --hb-text-micro-2: 6px;
  --hb-text-micro-3: 6.5px;
  --hb-text-micro-4: 7px;
  --hb-text-micro-5: 7.5px;
  --hb-text-micro-6: 8px;
  --hb-text-micro-7: 9px;
  --hb-text-micro-8: 10px;
  --hb-text-micro-9: 11px;

  --hb-text-3xs: 12px;
  --hb-text-xs: 13px;
  --hb-text-sm: 14px;
  --hb-text-base: 15px;
  --hb-text-h4: 17px;
  --hb-text-h3: 22px;
  --hb-text-btn: 20px;
  --hb-text-h2-sm: 24px;
  --hb-text-h1-sm: 32px;
  --hb-text-h2: 34px;
  --hb-text-h1: 42px;
  --hb-text-display: 54px;

  --hb-leading-num: 1.1;
  --hb-leading-tight: 1.15;
  --hb-leading-snug: 1.4;
  --hb-leading-medium: 1.5;
  --hb-leading-copy: 1.6;
  --hb-leading-normal: 1.65;
  --hb-leading-loose: 2;

  --hb-weight-regular: 400;
  --hb-weight-medium: 500;
  --hb-weight-semibold: 600;
  --hb-weight-bold: 700;
  --hb-weight-black: 900;

  --hb-track-tight: -0.02em;
  --hb-track-snug: -0.01em;
  --hb-track-flat: 0;
  --hb-track-open: 0.01em;
  --hb-track-wide: 0.06em;
  --hb-track-wider: 0.08em;
  --hb-track-widest: 0.14em;
  --hb-track-caps: 0.16em;

  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-5: 20px;
  --hb-space-6: 24px;
  --hb-space-8: 32px;
  --hb-space-10: 40px;
  --hb-space-12: 48px;
  --hb-space-16: 64px;
  --hb-space-20: 80px;
  --hb-space-24: 96px;

  --hb-radius-xs: 6px;
  --hb-radius-sm: 10px;
  --hb-radius-md: 14px;
  --hb-radius-lg: 20px;
  --hb-radius-xl: 28px;
  --hb-radius-pill: 999px;
  --hb-radius-circle: 50%;

  --hb-stroke-hair: 1px;
  --hb-stroke-ring: 2px;

  --hb-motion-fast: 160ms;
  --hb-motion-base: 240ms;
  --hb-motion-curve: cubic-bezier(0.22, 1, 0.36, 1);

  --hb-bg: var(--hb-ink-900);
  --hb-bg-deep: var(--hb-ink-950);
  --hb-surface: var(--hb-ink-820);
  --hb-surface-2: var(--hb-ink-740);

  --hb-line: var(--hb-fog-100-08);
  --hb-line-strong: var(--hb-fog-100-16);

  --hb-ink: var(--hb-fog-100);
  --hb-ink-dim: var(--hb-fog-400);
  --hb-ink-mute: var(--hb-fog-600);

  --hb-accent: var(--hb-magenta-500);
  --hb-accent-strong: var(--hb-magenta-400);
  --hb-accent-2: var(--hb-violet-400);
  --hb-accent-grad: linear-gradient(120deg, var(--hb-magenta-500) 0%, var(--hb-violet-400) 100%);
  --hb-accent-ink: var(--hb-ink-900);
  --hb-accent-soft: var(--hb-magenta-500-12);
  --hb-accent-line: var(--hb-magenta-500-32);
  --hb-focus-ring: var(--hb-stroke-ring) solid var(--hb-accent-strong);

  --hb-layer-sticky: 400;

  --hb-shadow-btn: 0 10px 30px var(--hb-magenta-500-32);
  --hb-shadow-mark: 0 6px 18px var(--hb-magenta-500-35);
  --hb-shadow-art: 0 30px 80px var(--hb-shadow-dark-50);
  --hb-shadow-screen: 0 26px 60px var(--hb-shadow-dark-58);

  --hb-btn-h-lg: 46px;
  --hb-btn-h-md: 40px;
  --hb-btn-px-lg: 26px;
  --hb-btn-px-md: 18px;
  --hb-nav-h: 64px;
  --hb-shell-max: 936px;
  --hb-shell-wide: 1104px;
  --hb-icon-md: 20px;
  --hb-icon-box: 38px;
  --hb-avatar-lg: 36px;
  --hb-avatar-sm: 30px;
  --hb-logo-mark: 30px;
  --hb-touch-min: 44px;
  --hb-meter-h: 6px;
  --hb-dot: 6px;

  --hb-hero-pad-top: 72px;
  --hb-hero-pad-bottom: 64px;
  --hb-sec-pad: 60px;
  --hb-sec-pad-lg: 84px;

  --hb-art-w: 372px;
  --hb-art-h: 428px;
  --hb-art-sm-h: 250px;
  --hb-art-radius: var(--hb-radius-xl);
  --hb-art-grad: radial-gradient(120% 90% at 84% 8%, var(--hb-violet-500-22), transparent 60%), radial-gradient(90% 80% at 18% 92%, var(--hb-magenta-500-18), transparent 62%), var(--hb-ink-820);
  --hb-art-grad-sm: radial-gradient(120% 110% at 80% 0%, var(--hb-violet-500-22), transparent 58%), radial-gradient(100% 90% at 10% 100%, var(--hb-magenta-500-18), transparent 60%), var(--hb-ink-860);
  --hb-art-tag-pad: 7px var(--hb-space-4);

  --hb-scr-a-w: 194px;
  --hb-scr-a-h: 396px;
  --hb-scr-a-right: var(--hb-space-5);
  --hb-scr-a-top: var(--hb-space-4);
  --hb-scr-b-w: 168px;
  --hb-scr-b-h: 336px;
  --hb-scr-b-left: 14px;
  --hb-scr-b-top: 80px;
  --hb-scr-s1-w: 158px;
  --hb-scr-s1-h: 320px;
  --hb-scr-s1-left: var(--hb-space-4);
  --hb-scr-s1-top: 10px;
  --hb-scr-s2-right: var(--hb-space-4);
  --hb-scr-s2-top: 36px;
  --hb-scr-radius: 24px;
  --hb-scr-pad-y: var(--hb-space-2);
  --hb-scr-nav-pad: 3px var(--hb-space-3) var(--hb-space-2);
  --hb-scr-post-pad: 9px 10px 0;
  --hb-scr-pf-pad: var(--hb-space-2) 10px 0;
  --hb-scr-status-pad: 9px 12px 4px;
  --hb-scr-status-pad-sm: 7px 10px 3px;
  --hb-scr-nav-pad-sm: 2px 10px 6px;
  --hb-scr-post-pad-sm: 7px 8px 0;
  --hb-scr-pf-pad-sm: 6px 8px 0;
  --hb-scr-banner-h: 56px;
  --hb-scr-banner-h-sm: 48px;
  --hb-scr-banner-pad: var(--hb-space-2) 10px;
  --hb-scr-banner-inset: 0 10px;
  --hb-scr-banner-inset-sm: 0 8px;
  --hb-scr-banner-radius: var(--hb-radius-sm);
  --hb-scr-post-img-h: 76px;
  --hb-scr-tab-h: 30px;
  --hb-scr-menu-gap: 6px;
  --hb-scr-works-h: 36px;
  --hb-scr-mark: 14px;
  --hb-scr-mark-font: var(--hb-text-micro-6);
  --hb-scr-mark-radius: var(--hb-space-1);
  --hb-scr-ava: 14px;
  --hb-scr-caps-w: 34px;
  --hb-scr-caps-h: 13px;
  --hb-scr-caps-dot: var(--hb-scr-menu-gap);
  --hb-scr-glow: 3px;
  --hb-scr-tab-dot: var(--hb-space-1);
  --hb-scr-tab-pad-top: 9px;
  --hb-scr-tab-dot-top: 3px;
  --hb-scr-works-gap: 5px;
  --hb-scr-ava-gap: 5px;
  --hb-scr-points-pad: 7px 9px;
  --hb-scr-stats-pad: 7px 0;
  --hb-scr-menu-pad: 7px var(--hb-space-2);
  --hb-scr-caps-offset: 4px;
  --hb-scr-caps-offset-t: -2.5px;
  --hb-scr-caps-dot-top: 2.5px;
  --hb-scr-caps-dot-right: 3px;
  --hb-scr-banner-gap: var(--hb-space-1);
  --hb-scr-lv-pad: 0 3px;
  --hb-scr-lv-radius: var(--hb-space-1);
  --hb-fill-dot: 1px;
  --hb-fill-grain: 0.2;
  --hb-fill-1: radial-gradient(90% 120% at 20% 10%, var(--hb-magenta-400-55), transparent 60%), radial-gradient(80% 100% at 85% 80%, var(--hb-violet-500-50), transparent 62%), linear-gradient(135deg, var(--hb-ink-700), var(--hb-ink-840));
  --hb-fill-2: radial-gradient(90% 120% at 78% 16%, var(--hb-violet-400-50), transparent 60%), radial-gradient(80% 100% at 18% 86%, var(--hb-amber-400-28), transparent 60%), linear-gradient(160deg, var(--hb-ink-760), var(--hb-ink-870));
  --hb-fill-3: radial-gradient(100% 130% at 30% 90%, var(--hb-magenta-600-42), transparent 62%), radial-gradient(70% 90% at 80% 10%, var(--hb-blue-400-30), transparent 60%), linear-gradient(150deg, var(--hb-ink-720), var(--hb-ink-850));
  --hb-fill-4: radial-gradient(90% 120% at 15% 20%, var(--hb-blue-400-34), transparent 60%), radial-gradient(90% 100% at 85% 82%, var(--hb-magenta-400-40), transparent 62%), linear-gradient(135deg, var(--hb-ink-780), var(--hb-ink-870));

  --hb-tone-border: var(--hb-fog-100-14);
  --hb-tone-core: var(--hb-ink-950-22);
  --hb-swatch-bg-01: linear-gradient(150deg, #26262c, #16161a);
  --hb-swatch-bg-02: linear-gradient(150deg, #3a2c2a, #241b1a);
  --hb-swatch-bg-03: linear-gradient(150deg, #4a3630, #2e211d);
  --hb-swatch-bg-04: linear-gradient(150deg, #6b4a3a, #443026);
  --hb-swatch-bg-05: linear-gradient(150deg, #8a5a42, #5a3a2a);
  --hb-swatch-bg-06: linear-gradient(150deg, #a86a4a, #6f452f);
  --hb-swatch-bg-07: linear-gradient(150deg, #6e5a6e, #463a46);
  --hb-swatch-bg-08: linear-gradient(150deg, #8a7a85, #584e56);
  --hb-swatch-bg-09: linear-gradient(150deg, #93a0a8, #5e666d);
  --hb-swatch-bg-10: linear-gradient(150deg, #a8b0a5, #6a7068);
  --hb-swatch-bg-11: linear-gradient(150deg, #b5a08e, #746557);
  --hb-swatch-bg-12: linear-gradient(150deg, #c9a06a, #836741);
  --hb-swatch-bg-13: linear-gradient(150deg, #cf7f8a, #844f57);
  --hb-swatch-bg-14: linear-gradient(150deg, #c25484, #7c3152);
  --hb-swatch-bg-15: linear-gradient(150deg, #9c4fae, #5f2f6b);
  --hb-swatch-bg-16: linear-gradient(150deg, #6a5acd, #3d357c);
  --hb-swatch-bg-17: linear-gradient(150deg, #4a5ec2, #2c3874);
  --hb-swatch-bg-18: linear-gradient(150deg, #2e3c6e, #1a2342);

  --hb-meter-1: 92%;
  --hb-meter-2: 84%;
  --hb-meter-3: 72%;

  --hb-text-mark: 16px;
  --hb-text-logo: 16px;

  --hb-figure-full: 100%;
  --hb-figure-full-count: 1;
  --hb-figure-center: -50%;
  --hb-key-square: 1;
  --hb-motion-none: 0ms;

  --hb-grid-1: 1fr;
  --hb-span-all: 1 / -1;
  --hb-grid-2: repeat(2, minmax(0, 1fr));
  --hb-grid-3: repeat(3, minmax(0, 1fr));
  --hb-grid-4: repeat(4, minmax(0, 1fr));
  --hb-grid-6: repeat(6, minmax(0, 1fr));
  --hb-comm-cols: 1.35fr 1fr;
  --hb-about-cols: 1fr 1.15fr;
  --hb-foot-cols: 1.4fr 1fr 1fr;
  --hb-hero-cols: 1fr var(--hb-art-w);
  --hb-hero-cols-sm: 1fr;

  --hb-layer-art: 10;
  --hb-layer-art-2: 2;
  --hb-layer-art-3: 3;
  --hb-layer-art-4: 4;

  --hb-order-h1: 1;
  --hb-order-sub: 2;
  --hb-order-cta: 3;
  --hb-order-art: 4;
  --hb-order-note: 5;
  --hb-layer-modal: 900;

  --hb-blur-xs: 4px;
  --hb-blur-sm: 6px;
  --hb-blur-md: 8px;

  --hb-lift: -2px;
  --hb-point-offset: -2px;
  --hb-skip-offset: -200%;
  --hb-focus-offset: 2px;
  --hb-clip-hidden: inset(50%);

  --hb-copy-max: 460px;
  --hb-desc-max: 520px;
  --hb-foot-tag-max: 280px;
  --hb-dialog-max: 360px;
  --hb-code-size: 180px;
  --hb-dim-label-w: 76px;
  --hb-rule-w: 22px;
  --hb-divider-h: 30px;
  --hb-scroll-offset: var(--hb-space-20);
  --hb-cover-h: 148px;
  --hb-media-min-h: 176px;
  --hb-media-min-h-sm: 140px;
  --hb-media-mini-h: 108px;
  --hb-icon-xs: 14px;
  --hb-icon-stroke: 1.7;
  --hb-play-w: 12px;
  --hb-play-h: 7px;
  --hb-play-offset: 3px;
  --hb-badge-pad: 1px var(--hb-space-2);
  --hb-cap-pad: var(--hb-space-1) 10px;
  --hb-cat-pad: 2px 10px;
  --hb-len-pad: 2px var(--hb-space-2);
  --hb-note-pad: 9px var(--hb-space-3);
  --hb-stat-unit: 0.62em;
  --hb-stat-unit-sm: 0.6em;
  --hb-stat-unit-gap: 2px;
  --hb-tone-inset: 22%;
  --hb-fill-dot-gap: var(--hb-space-4);
  --hb-fill-grain-img: radial-gradient(var(--hb-white-18) var(--hb-fill-dot), transparent var(--hb-fill-dot-end));
  --hb-fill-dot-end: 1.3px;

  --hb-hero-pad-top-lg: var(--hb-space-24);
  --hb-hero-pad-bottom-lg: var(--hb-space-20);
  --hb-hero-pad-top-sm: var(--hb-space-8);
  --hb-hero-pad-bottom-sm: var(--hb-space-6);
  --hb-hero-glow-inset: -40% -20% auto -20%;
  --hb-hero-glow-h: 560px;
  --hb-hero-glow: radial-gradient(46% 60% at 32% 30%, var(--hb-magenta-500-16), transparent 70%), radial-gradient(40% 52% at 78% 12%, var(--hb-violet-500-18), transparent 72%);
  --hb-final-glow-inset: auto -20% -60% -20%;
  --hb-final-glow-h: 420px;
  --hb-final-glow: radial-gradient(50% 60% at 50% 40%, var(--hb-magenta-500-22), transparent 70%), radial-gradient(40% 50% at 70% 30%, var(--hb-violet-500-20), transparent 72%);

  --hb-sec-pad-sm: var(--hb-space-10);
  --hb-top-bg: var(--hb-ink-900-86);
  --hb-btn-ghost-bg: var(--hb-fog-100-03);
  --hb-shadow-btn-lift: 0 14px 36px var(--hb-magenta-500-35);
  --hb-avatar-grad: linear-gradient(135deg, var(--hb-magenta-400), var(--hb-violet-500));
  --hb-ava-grad-a1: linear-gradient(135deg, var(--hb-magenta-400), var(--hb-violet-500));
  --hb-ava-grad-a3: linear-gradient(135deg, var(--hb-violet-500), var(--hb-amber-400));
  --hb-lv-line: var(--hb-violet-400-40);
  --hb-scr-lv-line: var(--hb-violet-400-45);
  --hb-caps-line: var(--hb-fog-100-28);
  --hb-scr-bg: var(--hb-ink-880);
  --hb-scr-tab-bg: var(--hb-ink-880-92);
  --hb-scr-fade-h: 44px;
  --hb-scr-fade-grad: linear-gradient(180deg, var(--hb-ink-870-00), var(--hb-ink-870-96));
  --hb-scr-menu-bg: var(--hb-fog-100-04);
  --hb-scr-stats-bg: var(--hb-fog-100-04);
  --hb-scr-points-grad: linear-gradient(120deg, var(--hb-magenta-500-16), var(--hb-violet-400-16));
  --hb-scr-points-line: var(--hb-magenta-500-28);
  --hb-scr-points-top: var(--hb-scr-works-radius);
  --hb-scr-stats-top: 10px;
  --hb-scr-post-gap: var(--hb-scr-ava-gap);
  --hb-scr-works-radius: var(--hb-radius-xs);
  --hb-scr-glow-shadow: 0 0 var(--hb-space-2) var(--hb-stroke-ring) var(--hb-white-60);
  --hb-scr-banner-grad: radial-gradient(120% 150% at 14% 18%, var(--hb-magenta-400-72), transparent 62%), radial-gradient(110% 130% at 92% 92%, var(--hb-violet-500-66), transparent 62%), linear-gradient(140deg, var(--hb-ink-560), var(--hb-ink-800));
  --hb-cat-bg: var(--hb-magenta-500-28);
  --hb-dot-glow: 0 0 10px var(--hb-accent);
  --hb-bp-compact: 940px;
  --hb-bp-phone: 560px;
  --hb-bp-wide: 1200px;

  --hb-safe-top: env(safe-area-inset-top, 0px);
  --hb-safe-right: env(safe-area-inset-right, 0px);
  --hb-safe-left: env(safe-area-inset-left, 0px);

  --hb-art-blob-a: 0.1;
  --hb-art-blob-b: 0.07;
  --hb-art-dust: 0.4;
  --hb-art-dash: 3 7;
}