@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/app/globals.css

@@ -0,0 +1,4969 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Tailwind v4: explicit scan paths (CSS lives in app/, components/lib are siblings). */
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../lib/**/*.{js,ts,jsx,tsx}';
+@source './**/*.{js,ts,jsx,tsx}';
+
+/* ReactPress theme variables (aligned with twentytwentyfive) */
+body {
+  --primary-color: #f44336;
+  --primary-button-bg: #c62828;
+  --primary-button-fg: #ffffff;
+  --link-color: #4299e1;
+  --blink-bg-color: rgba(255, 255, 255, 0.5);
+  --border-radius: 8px;
+  --bg: #ffffff;
+  --bg-second: #f3f5f7;
+  --bg-body: #e7eaee;
+  --bg-box: var(--bg);
+  --bg-code: #f8f8f8;
+  --bg-table: var(--bg-code);
+  --blockquote-color: rgba(0, 0, 0, 0.65);
+  --disable-text-color: rgba(0, 0, 0, 0.55);
+  --main-text-color: rgba(0, 0, 0, 0.85);
+  --second-text-color: rgba(0, 0, 0, 0.65);
+  --border-color: #e5e6eb;
+  --box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
+  --font-color-base: #ffffff;
+  --comment-editor-border-color: #d9d9d9;
+  --comment-editor-disable-bg: #f5f5f5;
+}
+
+body.dark {
+  --primary-color: #ff6b61;
+  --primary-button-bg: #c62828;
+  --primary-button-fg: #ffffff;
+  --link-color: #69b1ff;
+  --blink-bg-color: rgba(0, 0, 0, 0);
+  --bg: #1e2a36;
+  --bg-second: #1a242f;
+  --bg-body: var(--bg);
+  --bg-box: #1a242f;
+  --bg-code: #0b1c2c;
+  --bg-table: var(--bg);
+  --blockquote-color: #dddbdb;
+  --disable-text-color: #8a95a3;
+  --main-text-color: #dddbdb;
+  --second-text-color: #b8c0cc;
+  --border-color: #2f373e;
+  --box-shadow: rgba(23, 31, 40, 0.57);
+  --comment-editor-border-color: var(--border-color);
+  --comment-editor-disable-bg: var(--border-color);
+}
+
+html {
+  color-scheme: light;
+}
+
+html:has(body.dark) {
+  color-scheme: dark;
+}
+
+/* Core theme configuration */
+@theme {
+  /* Font families */
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  /* Colors */
+  --color-primary-50: oklch(0.971 0.014 343.198);
+  --color-primary-100: oklch(0.948 0.028 342.258);
+  --color-primary-200: oklch(0.899 0.061 343.231);
+  --color-primary-300: oklch(0.823 0.12 346.018);
+  --color-primary-400: oklch(0.718 0.202 349.761);
+  --color-primary-500: oklch(0.656 0.241 354.308);
+  --color-primary-600: oklch(0.592 0.249 0.584);
+  --color-primary-700: oklch(0.525 0.223 3.958);
+  --color-primary-800: oklch(0.459 0.187 3.815);
+  --color-primary-900: oklch(0.408 0.153 2.432);
+  --color-primary-950: oklch(0.284 0.109 3.907);
+
+  --color-gray-50: oklch(0.985 0.002 247.839);
+  --color-gray-100: oklch(0.967 0.003 264.542);
+  --color-gray-200: oklch(0.928 0.006 264.531);
+  --color-gray-300: oklch(0.872 0.01 258.338);
+  --color-gray-400: oklch(0.707 0.022 261.325);
+  --color-gray-500: oklch(0.551 0.027 264.364);
+  --color-gray-600: oklch(0.446 0.03 256.802);
+  --color-gray-700: oklch(0.373 0.034 259.733);
+  --color-gray-800: oklch(0.278 0.033 256.848);
+  --color-gray-900: oklch(0.21 0.034 264.665);
+  --color-gray-950: oklch(0.13 0.028 261.692);
+
+  --line-height-11: 2.75rem;
+  --line-height-12: 3rem;
+  --line-height-13: 3.25rem;
+  --line-height-14: 3.5rem;
+
+  --z-60: 60;
+  --z-70: 70;
+  --z-80: 80;
+}
+
+@layer base {
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 1rem 0;
+    border: 0;
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  a,
+  button {
+    outline-color: var(--color-primary-500);
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid;
+    border-radius: var(--radius-sm);
+    outline-color: var(--color-primary-500);
+  }
+
+  /* @tailwindcss/forms defaults to blue.600 — overridden unlayered below with --primary-button-bg. */
+  input:focus,
+  input:focus-visible,
+  textarea:focus,
+  textarea:focus-visible,
+  select:focus,
+  select:focus-visible {
+    border-color: var(--primary-button-bg);
+    outline: none;
+    --tw-ring-color: var(--primary-button-bg);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px))
+      var(--primary-button-bg);
+    box-shadow:
+      var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 0 1px var(--primary-button-bg)), var(--tw-shadow, 0 0 #0000);
+  }
+}
+
+@layer utilities {
+  .prose {
+    & a {
+      color: var(--color-primary-500);
+      &:hover {
+        color: var(--color-primary-600);
+      }
+      & code {
+        color: var(--color-primary-400);
+      }
+    }
+    & :where(h1, h2) {
+      font-weight: 700;
+      letter-spacing: var(--tracking-tight);
+    }
+    & h3 {
+      font-weight: 600;
+    }
+    & :where(code):not(pre code) {
+      color: var(--color-indigo-500);
+    }
+  }
+
+  .prose-invert {
+    & a {
+      color: var(--color-primary-500);
+      &:hover {
+        color: var(--color-primary-400);
+      }
+      & code {
+        color: var(--color-primary-400);
+      }
+    }
+    & :where(h1, h2, h3, h4, h5, h6) {
+      color: var(--color-gray-100);
+    }
+  }
+}
+
+.task-list-item::before {
+  @apply hidden;
+}
+
+.task-list-item {
+  @apply list-none;
+}
+
+.footnotes {
+  @apply mt-12 border-t border-gray-200 pt-8 dark:border-gray-700;
+}
+
+.data-footnote-backref {
+  @apply no-underline;
+}
+
+.csl-entry {
+  @apply my-5;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
+}
+
+.katex-display {
+  overflow: auto hidden;
+}
+
+.content-header-link {
+  opacity: 0;
+  margin-left: -24px;
+  padding-right: 4px;
+}
+
+.content-header:hover .content-header-link,
+.content-header-link:hover {
+  opacity: 1;
+}
+
+.linkicon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* ReactPress API HTML — article reading (aligned with twentytwentyfive markdown.scss) */
+.markdown {
+  word-break: break-word;
+  line-height: 1.75;
+  font-weight: 400;
+  font-size: 15px;
+  overflow-x: hidden;
+  letter-spacing: 1.2px;
+  color: var(--main-text-color);
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  line-height: 1.5;
+  margin-top: 35px;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  color: inherit;
+}
+
+.markdown h1 {
+  font-size: 30px;
+  margin-bottom: 5px;
+}
+
+.markdown h2 {
+  padding-bottom: 12px;
+  font-size: 24px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.markdown h3 {
+  font-size: 18px;
+  padding-bottom: 0;
+}
+
+.markdown h4 {
+  font-size: 16px;
+}
+
+.markdown h5 {
+  font-size: 15px;
+}
+
+.markdown h6 {
+  margin-top: 5px;
+}
+
+.markdown p {
+  line-height: inherit;
+  margin-top: 22px;
+  margin-bottom: 22px;
+}
+
+.markdown img {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  border-radius: var(--border-radius);
+  margin: 20px auto;
+  object-fit: contain;
+}
+
+.markdown hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.markdown a,
+.rp-rich-text a {
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--link-color) 35%, transparent);
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+/* CMS / 后台富文本常带内联 color，统一覆盖为主题链接色 */
+.rp-rich-text a[href] {
+  color: var(--link-color) !important;
+  text-decoration: none !important;
+}
+
+.markdown a:active,
+.markdown a:hover,
+.rp-rich-text a:active,
+.rp-rich-text a:hover {
+  color: var(--primary-color);
+  border-bottom-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
+}
+
+.rp-rich-text a[href]:hover {
+  color: var(--primary-color) !important;
+}
+
+.rp-inline-link {
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--link-color) 35%, transparent);
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.rp-inline-link:hover {
+  color: var(--primary-color);
+  border-bottom-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
+}
+
+.rp-inline-link--muted {
+  color: var(--second-text-color);
+  border-bottom-color: color-mix(in srgb, var(--second-text-color) 30%, transparent);
+}
+
+.rp-inline-link--muted:hover {
+  color: var(--primary-color);
+  border-bottom-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
+}
+
+.rp-article-meta-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  margin: 0;
+}
+
+.rp-article-meta-item {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.rp-article-meta-sep {
+  color: var(--disable-text-color);
+  user-select: none;
+}
+
+.markdown blockquote {
+  color: var(--blockquote-color);
+  margin: 1.375rem 0;
+  padding: 0.875rem 1.125rem;
+  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
+  border-left: 4px solid var(--disable-text-color);
+  border-radius: 0.375rem;
+  background-color: var(--bg-second);
+}
+
+.markdown blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown blockquote > p {
+  margin: 0;
+}
+
+.markdown blockquote > p + p {
+  margin-top: 0.75em;
+}
+
+.markdown blockquote ul,
+.markdown blockquote ol {
+  margin: 0.625em 0 0;
+  padding-left: 1.25rem;
+}
+
+.markdown ul {
+  list-style-type: disc;
+}
+
+.markdown ul ul {
+  list-style-type: square;
+}
+
+.markdown ol,
+.markdown ul {
+  padding-left: 28px;
+}
+
+.markdown ol li,
+.markdown ul li {
+  margin-bottom: 0;
+  list-style: inherit;
+}
+
+.markdown ol ol,
+.markdown ol ul,
+.markdown ul ol,
+.markdown ul ul {
+  margin-top: 3px;
+}
+
+.markdown ol li {
+  padding-left: 6px;
+}
+
+.markdown .task-list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  list-style: none;
+  min-height: 1.625rem;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.markdown .task-list-item > input {
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.markdown .task-list-item > input::before {
+  content: '';
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+  background-color: var(--bg-code);
+  transition: all 0.3s;
+}
+
+.markdown .task-list-item > input:checked::before {
+  content: '✅';
+  font-size: 18px;
+  line-height: 1;
+  border: none;
+}
+
+.markdown code,
+.markdown pre {
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.markdown code {
+  display: inline;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin: 0 2px;
+  color: var(--main-text-color);
+  background-color: var(--bg-code);
+  font-size: inherit;
+  word-wrap: break-word;
+  word-break: break-all;
+  vertical-align: baseline;
+}
+
+.markdown pre {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  margin: 10px 0;
+  background-color: var(--bg-code);
+  font-size: 1em;
+  overflow: hidden;
+  overscroll-behavior: auto;
+}
+
+.markdown pre::before {
+  display: none;
+}
+
+.rp-code-toolbar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+  height: 30px;
+  padding: 0 8px 0 10px;
+  background-color: var(--bg-code);
+}
+
+.markdown pre:has(> .rp-code-toolbar + code.hljs) .rp-code-toolbar,
+.markdown pre:has(> .rp-code-toolbar + code.hljsln) .rp-code-toolbar,
+.markdown pre:has(> code.hljs) .rp-code-toolbar,
+.markdown pre:has(> code.hljsln) .rp-code-toolbar {
+  background-color: #282c34;
+}
+
+.markdown pre code {
+  display: block;
+  max-height: 370px;
+  padding: 0.75rem 0.625rem;
+  border-radius: 0;
+  color: var(--main-text-color);
+  background-color: var(--bg-code);
+  overflow: auto;
+  overscroll-behavior: auto;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre-wrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.markdown pre:has(> code.hljs),
+.markdown pre:has(> code.hljsln) {
+  background-color: #282c34;
+}
+
+.markdown pre:has(> code.hljs)::before,
+.markdown pre:has(> code.hljsln)::before {
+  display: none;
+}
+
+.markdown pre:has(.rp-code-lang) code[class*='language-']::before {
+  content: none !important;
+}
+
+.rp-code-window-dots {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  pointer-events: none;
+}
+
+.rp-code-lang {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 1;
+  color: hsl(0deg 0% 54.9% / 80%);
+  pointer-events: none;
+  text-transform: lowercase;
+  transition: opacity 0.15s ease;
+}
+
+.markdown pre.rp-code-copy-active .rp-code-lang {
+  opacity: 0;
+}
+
+.markdown pre:has(> code.hljs) .rp-code-lang,
+.markdown pre:has(> code.hljsln) .rp-code-lang {
+  color: hsl(0deg 0% 65% / 90%);
+}
+
+.markdown pre code.hljs,
+.markdown pre code.hljsln {
+  color: #abb2bf;
+  background-color: transparent;
+}
+
+.markdown strong {
+  font-weight: bold;
+}
+
+.markdown strong::before {
+  content: '「';
+}
+
+.markdown strong::after {
+  content: '」';
+}
+
+.markdown p em {
+  font-weight: normal;
+}
+
+.markdown em {
+  color: var(--main-text-color);
+  font-style: normal;
+}
+
+.markdown em strong {
+  color: var(--main-text-color);
+}
+
+.markdown table {
+  width: 100%;
+  margin-top: 1em;
+  border-radius: 4px;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  border: 1px solid var(--border-color);
+}
+
+.markdown table thead {
+  background-color: var(--bg-table);
+}
+
+.markdown table tr:nth-child(2n) {
+  background-color: var(--bg-table);
+}
+
+.markdown table td,
+.markdown table th {
+  position: relative;
+  min-width: 100px;
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  vertical-align: middle;
+  border: 1px solid var(--border-color);
+}
+
+.markdown code.language-ts::before,
+.markdown code.language-js::before,
+.markdown code.language-typescript::before,
+.markdown code.language-javascript::before,
+.markdown code.language-html::before,
+.markdown code.language-css::before,
+.markdown code.language-php::before,
+.markdown code.language-go::before,
+.markdown code.language-sql::before,
+.markdown code.language-json::before,
+.markdown code.language-bash::before,
+.markdown code.language-less::before,
+.markdown code.language-scss::before,
+.markdown code.language-nginx::before,
+.markdown code.language-shell::before,
+.markdown code.language-stylus::before,
+.markdown code.language-python::before,
+.markdown code.language-yaml::before,
+.markdown code.language-yml::before,
+.markdown code.language-lua::before {
+  position: absolute;
+  top: 8px;
+  right: 45px;
+  z-index: 2;
+  font-size: 12px;
+  line-height: 1;
+  cursor: default;
+  color: hsl(0deg 0% 54.9% / 80%);
+  transition: color 0.1s;
+  pointer-events: none;
+}
+
+.markdown code.language-ts::before {
+  content: 'ts';
+}
+.markdown code.language-js::before {
+  content: 'js';
+}
+.markdown code.language-typescript::before {
+  content: 'typescript';
+}
+.markdown code.language-javascript::before {
+  content: 'javascript';
+}
+.markdown code.language-html::before {
+  content: 'html';
+}
+.markdown code.language-css::before {
+  content: 'css';
+}
+.markdown code.language-php::before {
+  content: 'php';
+}
+.markdown code.language-go::before {
+  content: 'go';
+}
+.markdown code.language-sql::before {
+  content: 'sql';
+}
+.markdown code.language-json::before {
+  content: 'json';
+}
+.markdown code.language-bash::before {
+  content: 'bash';
+}
+.markdown code.language-less::before {
+  content: 'less';
+}
+.markdown code.language-scss::before {
+  content: 'scss';
+}
+.markdown code.language-nginx::before {
+  content: 'nginx';
+}
+.markdown code.language-shell::before {
+  content: 'shell';
+}
+.markdown code.language-stylus::before {
+  content: 'stylus';
+}
+.markdown code.language-python::before {
+  content: 'python';
+}
+.markdown code.language-yaml::before {
+  content: 'yaml';
+}
+.markdown code.language-yml::before {
+  content: 'yml';
+}
+.markdown code.language-lua::before {
+  content: 'lua';
+}
+
+.hljsln {
+  display: block;
+  padding-left: 3em !important;
+}
+
+.hljsln .ln-bg {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 2.2em;
+  height: 100%;
+  pointer-events: none;
+}
+
+.hljsln .ln-num {
+  position: relative;
+  display: inline-block;
+  height: 1em;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.hljsln .ln-num::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  margin-right: 1em;
+  color: #777;
+  font-style: normal;
+  font-weight: normal;
+  content: attr(data-num);
+  width: max-content;
+}
+
+.rp-copy-code-btn {
+  flex-shrink: 0;
+  min-width: 2em;
+  font-size: 12px;
+  line-height: 1;
+  color: hsl(0deg 0% 54.9% / 80%);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.markdown pre:has(> code.hljs) .rp-copy-code-btn,
+.markdown pre:has(> code.hljsln) .rp-copy-code-btn {
+  color: hsl(0deg 0% 65% / 90%);
+}
+
+.rp-copy-code-btn:hover {
+  opacity: 0.6;
+}
+
+.rp-copy-code-btn.rp-copy-code-btn--copied {
+  min-width: 1em;
+  color: hsl(142deg 45% 62%);
+  opacity: 1;
+}
+
+.rp-code-window-dots i {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  margin-left: 6px;
+}
+
+.rp-code-window-dots i:first-child {
+  margin-left: 0;
+}
+
+.rp-copy-toast {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  z-index: 9999;
+  transform: translateX(-50%);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  background: rgb(0 0 0 / 75%);
+  color: #fff;
+  font-size: 14px;
+  pointer-events: none;
+  animation: rp-copy-toast-fade 2s ease forwards;
+}
+
+.rp-share-toast {
+  position: fixed;
+  top: calc(1rem + var(--rp-header-offset, 0px));
+  left: 50%;
+  z-index: 9999;
+  transform: translateX(-50%);
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: rgb(0 0 0 / 75%);
+  color: #fff;
+  font-size: 14px;
+  pointer-events: none;
+  animation: rp-copy-toast-fade 2s ease forwards;
+}
+
+@keyframes rp-copy-toast-fade {
+  0%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.rp-html-content {
+  overflow-x: hidden;
+  word-break: break-word;
+}
+
+.rp-article-toc-item {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-left: 2px solid transparent;
+  background: transparent;
+  text-align: left;
+  padding: 0.4375rem 0.625rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--second-text-color);
+  cursor: pointer;
+  border-radius: 0.4375rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition:
+    color var(--rp-duration-fast) ease,
+    border-color var(--rp-duration-normal) var(--rp-ease-out),
+    background-color var(--rp-duration-normal) var(--rp-ease-out),
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-article-toc-item:hover {
+  color: var(--main-text-color);
+  background: color-mix(in srgb, var(--bg-second) 90%, transparent);
+}
+
+.rp-article-toc-item.is-active {
+  color: var(--main-text-color);
+  font-weight: 600;
+  border-left-color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-second));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 10%, transparent);
+}
+
+.rp-article-toc-list {
+  padding: 0;
+  margin: 0;
+}
+
+.disable-text-color {
+  --disable-text-color: rgba(0, 0, 0, 0.55);
+}
+
+body.dark {
+  --disable-text-color: #8a95a3;
+}
+
+:root {
+  --rp-header-offset: 0px;
+  --rp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --rp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --rp-duration-fast: 0.2s;
+  --rp-duration-normal: 0.32s;
+  --rp-duration-slow: 0.55s;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+@keyframes rp-logo-blink {
+  from {
+    transform: translateX(-120%) rotate(-45deg);
+  }
+  to {
+    transform: translateX(220%) rotate(-45deg);
+  }
+}
+
+.rp-header-logo-link {
+  position: relative;
+}
+
+.rp-header-logo-link::before {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 0;
+  width: 55%;
+  height: 6px;
+  margin-top: -3px;
+  pointer-events: none;
+  background-color: var(--blink-bg-color);
+  opacity: 0.85;
+  transform: translateX(-120%) rotate(-45deg);
+  animation: rp-logo-blink 2s ease-in-out 1.5s infinite;
+}
+
+.rp-header-logo:hover img,
+.rp-header-logo:hover svg {
+  opacity: 0.85;
+}
+
+.rp-container {
+  width: calc(100% - 32px);
+  max-width: 1240px;
+}
+
+@media (min-width: 768px) {
+  .rp-container {
+    width: 736px;
+  }
+}
+
+@media (min-width: 992px) {
+  .rp-container {
+    width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .rp-container {
+    width: 1140px;
+  }
+}
+
+@media (min-width: 1360px) {
+  .rp-container {
+    width: 1240px;
+  }
+}
+
+/* Sidebar sticky — offset when fixed header is visible */
+.rp-sidebar-sticky {
+  top: calc(1rem + var(--rp-header-offset, 0px));
+}
+
+/* Article page layout */
+.rp-double-column {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: visible;
+}
+
+/* Grid: main | optional sidebar — reading chrome floats outside content */
+@media (min-width: 1280px) {
+  .rp-double-column--reading-chrome,
+  .rp-double-column--reading-chrome.rp-double-column--sidebar {
+    display: block;
+    position: relative;
+  }
+
+  .rp-double-column--reading-chrome.rp-double-column--sidebar {
+    display: grid;
+    column-gap: 0.75rem;
+    grid-template-columns: minmax(0, 1fr) 18rem;
+    align-items: stretch;
+  }
+
+  .rp-double-column--sidebar:not(.rp-double-column--reading-chrome) {
+    display: grid;
+    column-gap: 0.75rem;
+    grid-template-columns: minmax(0, 1fr) 18rem;
+    align-items: stretch;
+  }
+
+  .rp-double-column--reading-chrome .rp-double-column__main {
+    width: 100% !important;
+    position: relative;
+    z-index: 1;
+  }
+
+  .rp-double-column--reading-chrome.rp-double-column--sidebar .rp-double-column__main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .rp-double-column--reading-chrome.rp-double-column--sidebar .rp-double-column__aside {
+    grid-column: 2;
+    grid-row: 1;
+    width: auto !important;
+    margin-left: 0 !important;
+  }
+}
+
+.rp-article-page {
+  width: 100%;
+}
+
+/* Page load progress — top of viewport, all routes (0 left → 100 right) */
+html[data-rp-loading]::before {
+  content: '';
+  position: fixed;
+  inset: 0 auto auto 0;
+  width: 0;
+  height: 2px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  z-index: 10000;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--primary-color, #f44336) 28%, transparent),
+    color-mix(in srgb, var(--primary-color, #f44336) 72%, transparent),
+    var(--primary-color, #f44336)
+  );
+  transform-origin: left center;
+  animation: rp-page-load-indeterminate 1.4s ease-in-out infinite;
+}
+
+@keyframes rp-page-load-indeterminate {
+  0% {
+    width: 0;
+    opacity: 0.7;
+  }
+
+  50% {
+    width: 62%;
+    opacity: 1;
+  }
+
+  100% {
+    width: 88%;
+    opacity: 0.85;
+  }
+}
+
+.rp-page-load-progress {
+  position: fixed;
+  inset: auto 0 auto 0;
+  width: 100%;
+  height: 2px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  z-index: 10000;
+  pointer-events: none;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.rp-page-load-progress__track {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: color-mix(in srgb, var(--border-color) 35%, transparent);
+}
+
+.rp-page-load-progress__bar {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--primary-color) 28%, transparent),
+    color-mix(in srgb, var(--primary-color) 72%, transparent),
+    var(--primary-color)
+  );
+  transition: width 0.22s ease;
+  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 35%, transparent);
+}
+
+/* Article reading progress — fixed at header top (top set inline) */
+.rp-reading-progress {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 110;
+  height: 2px;
+  pointer-events: none;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--border-color) 30%, transparent);
+}
+
+.rp-reading-progress__bar {
+  display: block;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--primary-color) 28%, transparent),
+    color-mix(in srgb, var(--primary-color) 72%, transparent),
+    var(--primary-color)
+  );
+  transition: width 0.16s linear;
+  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 35%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-rp-loading]::before {
+    animation: none;
+    width: 35%;
+    opacity: 0.85;
+  }
+
+  .rp-page-load-progress__bar,
+  .rp-reading-progress__bar {
+    transition: none;
+  }
+}
+
+/* Unified reading dock — desktop side / mobile bottom */
+.rp-reading-dock--side {
+  display: none;
+  position: fixed;
+  top: 50%;
+  width: 3rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 100;
+}
+
+.rp-reading-dock--bottom {
+  display: none;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  padding: 0.5rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
+  pointer-events: none;
+}
+
+@media (min-width: 1280px) {
+  .rp-reading-dock--side {
+    display: block;
+    /* Align to the left gutter beside .rp-container content (1140px + px-4). */
+    left: max(0.75rem, calc((100vw - 1140px) / 2 + 1rem - 4.5rem));
+  }
+}
+
+@media (min-width: 1360px) {
+  .rp-reading-dock--side {
+    left: max(0.75rem, calc((100vw - 1240px) / 2 + 1rem - 5rem));
+  }
+}
+
+@media (max-width: 1279px) {
+  .rp-reading-dock--bottom {
+    display: block;
+  }
+
+  .rp-double-column--reading-chrome {
+    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+.rp-reading-dock--side .rp-reading-dock__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  pointer-events: auto;
+}
+
+.rp-reading-dock--bottom .rp-reading-dock__inner {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.375rem;
+  max-width: 24rem;
+  margin: 0 auto;
+  padding: 0.375rem;
+  border-radius: 1.25rem;
+  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+  background: color-mix(in srgb, var(--bg-box) 94%, transparent);
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--main-text-color) 3%, transparent),
+    0 -8px 32px color-mix(in srgb, var(--main-text-color) 10%, transparent);
+  pointer-events: auto;
+}
+
+.rp-reading-dock__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+}
+
+.rp-reading-dock__toc {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.625rem;
+  background: transparent;
+  color: var(--second-text-color);
+  cursor: pointer;
+  transition:
+    color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-fast) ease,
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-reading-dock__toc:hover {
+  color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+}
+
+.rp-reading-dock__toc.is-open {
+  color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+}
+
+.rp-reading-dock__toc--mobile {
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  min-height: 3rem;
+  height: auto;
+  padding: 0.375rem 0.25rem;
+}
+
+.rp-reading-dock__toc-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: inherit;
+}
+
+.rp-reading-dock--side .rp-action-btn {
+  width: 2.75rem;
+  height: auto;
+  min-height: 3rem;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.25rem 0;
+  border-radius: 0.5rem;
+}
+
+.rp-reading-dock--bottom > .rp-reading-dock__inner > .rp-action-btn--mobile {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+@media (max-width: 1279px) {
+  .rp-double-column {
+    padding-bottom: 2rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .rp-double-column {
+    padding-top: 0.75rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .rp-article-wrap {
+    border-radius: 0.375rem;
+  }
+
+  .rp-reading-dock--side {
+    display: none;
+  }
+
+  .rp-article-cover-hero,
+  .rp-article-cover-hero img {
+    max-height: min(14rem, 48vw);
+  }
+
+  .rp-article-inner {
+    padding: 1.125rem 0.75rem 1.5rem;
+  }
+
+  .rp-article-wrap:has(.rp-article-cover-hero) .rp-article-inner {
+    padding-top: 1.25rem;
+  }
+
+  .rp-article-header {
+    margin-bottom: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  .rp-article-title {
+    font-size: clamp(1.5rem, 6.5vw, 1.875rem);
+  }
+
+  .rp-article-meta-row {
+    gap: 0.375rem 0.5rem;
+  }
+
+  .rp-article-meta-chip {
+    font-size: 0.75rem;
+  }
+
+  .rp-article-body .markdown {
+    font-size: 1rem;
+    line-height: 1.8;
+  }
+
+  .rp-comment-wrap {
+    margin-top: 1.5rem;
+  }
+
+  .rp-article-recommend {
+    margin-top: 1rem;
+  }
+
+  .rp-section-heading {
+    margin-bottom: 0.75rem;
+  }
+
+  .rp-section-heading::before,
+  .rp-section-heading::after {
+    max-width: 2.5rem;
+  }
+}
+
+/* Homepage recommend list — hot-rank sidebar (inline mode) */
+.rp-recommend-item + .rp-recommend-item,
+.rp-recommend-scroll-row + .rp-recommend-scroll-row {
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
+}
+
+.rp-recommend-link {
+  border-left: 2px solid transparent;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.rp-recommend-link:hover,
+.rp-recommend-link:focus-visible {
+  background: color-mix(in srgb, var(--bg-second) 48%, transparent);
+  border-left-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
+}
+
+.rp-recommend-rank {
+  flex-shrink: 0;
+  width: 1.375rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: center;
+  color: color-mix(in srgb, var(--second-text-color) 44%, transparent);
+}
+
+.rp-recommend-rank[data-rank='1'] {
+  font-size: 0.9375rem;
+  color: var(--primary-color);
+}
+
+.rp-recommend-rank[data-rank='2'],
+.rp-recommend-rank[data-rank='3'] {
+  color: color-mix(in srgb, var(--primary-color) 76%, var(--second-text-color));
+}
+
+.rp-recommend-title {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.rp-recommend-views {
+  min-width: 2.625rem;
+  justify-content: flex-end;
+  font-size: 0.6875rem;
+  color: color-mix(in srgb, var(--second-text-color) 68%, transparent);
+  transition: color 0.2s ease;
+}
+
+.rp-recommend-link:hover .rp-recommend-views,
+.rp-recommend-link:focus-visible .rp-recommend-views {
+  color: color-mix(in srgb, var(--second-text-color) 88%, transparent);
+}
+
+.rp-recommend-scroll {
+  --rp-recommend-row-h: 42px;
+  --rp-recommend-visible: 5;
+}
+
+.rp-recommend-scroll-viewport {
+  height: calc(var(--rp-recommend-row-h) * var(--rp-recommend-visible));
+  overflow: hidden;
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
+  transition: mask-image 0.35s ease;
+}
+
+.rp-recommend-scroll-viewport.is-moving {
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
+}
+
+.rp-recommend-scroll-track {
+  --rp-recommend-scroll-ms: 0.58s;
+  will-change: transform;
+  transition: transform var(--rp-recommend-scroll-ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rp-recommend-scroll-track.is-instant {
+  transition: none;
+}
+
+.rp-recommend-scroll-row {
+  height: var(--rp-recommend-row-h);
+  box-sizing: border-box;
+}
+
+.rp-recommend-scroll-row .rp-recommend-link {
+  height: 100%;
+  padding-block: 0;
+  box-sizing: border-box;
+}
+
+.rp-recommend-scroll-track.is-moving .rp-recommend-scroll-row:first-child .rp-recommend-link {
+  animation: rp-recommend-fade-out var(--rp-recommend-scroll-ms, 0.58s) cubic-bezier(0.4, 0, 0.2, 1)
+    forwards;
+  pointer-events: none;
+}
+
+.rp-recommend-scroll-track.is-moving .rp-recommend-scroll-row:last-child .rp-recommend-link {
+  animation: rp-recommend-fade-in var(--rp-recommend-scroll-ms, 0.58s) cubic-bezier(0.4, 0, 0.2, 1)
+    0.08s forwards;
+  opacity: 0;
+}
+
+@keyframes rp-recommend-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.25;
+  }
+}
+
+@keyframes rp-recommend-fade-in {
+  from {
+    opacity: 0.2;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.rp-recommend-scroll.is-paused .rp-recommend-scroll-viewport {
+  opacity: 0.94;
+}
+
+@keyframes recommend-shimmer {
+  0%,
+  100% {
+    background-color: var(--bg-second);
+  }
+  50% {
+    background-color: var(--border-color);
+  }
+}
+
+.rp-recommend-skeleton-badge {
+  animation: recommend-shimmer 1.4s ease-in-out infinite;
+}
+
+/* ── Homepage motion & glass ── */
+@keyframes rp-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rp-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rp-carousel-text-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rp-dot-progress {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes rp-load-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes rp-load-dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.85);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.rp-glass {
+  background: color-mix(in srgb, var(--bg-box) 78%, transparent);
+  backdrop-filter: blur(14px) saturate(1.35);
+  -webkit-backdrop-filter: blur(14px) saturate(1.35);
+  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+}
+
+.rp-glass-dark {
+  background: rgb(0 0 0 / 28%);
+  backdrop-filter: blur(14px) saturate(1.25);
+  -webkit-backdrop-filter: blur(14px) saturate(1.25);
+  border: 1px solid rgb(255 255 255 / 14%);
+}
+
+/* Carousel — bottom gradient caption, no heavy glass card */
+.rp-carousel-overlay {
+  background: linear-gradient(
+    to top,
+    rgb(0 0 0 / 62%) 0%,
+    rgb(0 0 0 / 28%) 38%,
+    rgb(0 0 0 / 6%) 68%,
+    transparent 100%
+  );
+}
+
+.rp-carousel-caption {
+  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
+}
+
+.rp-carousel-caption h2 {
+  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
+}
+
+@keyframes rp-carousel-meteor {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(400%);
+  }
+}
+
+.rp-carousel-progress-track {
+  position: relative;
+  height: 3px;
+  overflow: hidden;
+  background: rgb(255 255 255 / 10%);
+}
+
+.rp-carousel-progress-meteor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 28%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    color-mix(in srgb, var(--primary-color) 18%, transparent) 30%,
+    color-mix(in srgb, var(--primary-color) 55%, rgb(255 255 255 / 55%)) 68%,
+    color-mix(in srgb, var(--primary-color) 88%, rgb(255 255 255 / 92%)) 88%,
+    #fff 100%
+  );
+  border-radius: 0 9999px 9999px 0;
+  box-shadow:
+    0 0 10px color-mix(in srgb, var(--primary-color) 55%, transparent),
+    0 0 22px color-mix(in srgb, var(--primary-color) 28%, transparent);
+  transform: translateX(-100%);
+  animation: rp-carousel-meteor var(--rp-autoplay-ms, 5s) linear forwards;
+  will-change: transform;
+}
+
+.rp-carousel-progress-meteor::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translate(40%, -50%);
+  box-shadow:
+    0 0 4px 1px rgb(255 255 255 / 95%),
+    0 0 10px 3px color-mix(in srgb, var(--primary-color) 75%, transparent);
+}
+
+.rp-carousel.is-paused .rp-carousel-progress-meteor {
+  animation-play-state: paused;
+}
+
+.rp-carousel-dot {
+  display: block;
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 42%);
+  transition:
+    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 0.3s ease,
+    opacity 0.3s ease;
+}
+
+.rp-carousel-dot.is-active {
+  width: 18px;
+  background: rgb(255 255 255 / 95%);
+}
+
+.rp-carousel-dot:not(.is-active) {
+  width: 6px;
+  height: 6px;
+}
+
+.rp-carousel-dot:not(.is-active):hover {
+  background: rgb(255 255 255 / 72%);
+}
+
+.rp-carousel-nav {
+  background: rgb(255 255 255 / 14%);
+  backdrop-filter: blur(10px) saturate(1.2);
+  -webkit-backdrop-filter: blur(10px) saturate(1.2);
+  border: 1px solid rgb(255 255 255 / 22%);
+  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
+}
+
+.rp-home-enter {
+  animation: rp-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.rp-home-enter-delayed {
+  animation: rp-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
+}
+
+.rp-home-sidebar-enter {
+  animation: rp-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
+}
+
+.rp-home-card-enter {
+  animation: rp-fade-up 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.rp-home-stagger > .rp-article-card:nth-child(1) {
+  animation-delay: 0ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(2) {
+  animation-delay: 55ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(3) {
+  animation-delay: 110ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(4) {
+  animation-delay: 165ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(5) {
+  animation-delay: 220ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(6) {
+  animation-delay: 275ms;
+}
+.rp-home-stagger > .rp-article-card:nth-child(n + 7) {
+  animation-delay: 320ms;
+}
+
+.rp-carousel-slide {
+  transition:
+    opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0.75s;
+}
+
+.rp-carousel-slide.is-active {
+  opacity: 1;
+  visibility: visible;
+  z-index: 2;
+}
+
+.rp-carousel-slide:not(.is-active) {
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.rp-carousel-text-enter {
+  animation: rp-carousel-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
+}
+
+.rp-carousel-dot-progress {
+  transform-origin: left center;
+  animation: rp-dot-progress var(--rp-autoplay-ms, 5s) linear forwards;
+}
+
+.rp-load-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rp-load-indicator span {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  animation: rp-load-dots 1.2s ease-in-out infinite;
+}
+
+.rp-load-indicator span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.rp-load-indicator span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.rp-category-menu-glass {
+  background: color-mix(in srgb, var(--bg-box) 88%, transparent);
+  backdrop-filter: blur(12px) saturate(1.3);
+  -webkit-backdrop-filter: blur(12px) saturate(1.3);
+}
+
+.rp-widget-panel {
+  transition:
+    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 0.28s ease;
+}
+
+/* Sidebar widgets — aligned card width & body height */
+.rp-sidebar-widget {
+  --rp-sidebar-widget-body-h: 222px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.rp-sidebar-widget__header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-height: 53px;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 700;
+  color: var(--main-text-color);
+  box-sizing: border-box;
+}
+
+.rp-sidebar-widget__body {
+  height: var(--rp-sidebar-widget-body-h);
+  min-height: var(--rp-sidebar-widget-body-h);
+  max-height: var(--rp-sidebar-widget-body-h);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.rp-sidebar-widget--compact .rp-sidebar-widget__body {
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.rp-sidebar-widget--compact .rp-sidebar-widget__tags-list {
+  height: auto;
+  min-height: 0;
+}
+
+.rp-sidebar-widget__body .rp-recommend-scroll {
+  height: 100%;
+  padding-block: 0.375rem;
+  box-sizing: border-box;
+}
+
+.rp-sidebar-widget__body .rp-recommend-list:not(.rp-recommend-scroll-track) {
+  height: 100%;
+  overflow: hidden;
+  padding-block: 0.375rem;
+  box-sizing: border-box;
+}
+
+.rp-sidebar-widget__tag-host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.rp-sidebar-widget__tag-host .rp-tag-cloud,
+.rp-sidebar-widget__tag-host .rp-tag-cloud-skeleton {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.rp-sidebar-widget__tags-list {
+  display: flex;
+  height: 100%;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.5rem;
+  overflow: auto;
+  padding: 1rem;
+  margin: 0;
+  list-style: none;
+}
+
+.rp-widget-panel:hover {
+  box-shadow:
+    0 4px 16px color-mix(in srgb, var(--main-text-color) 8%, transparent),
+    var(--box-shadow);
+}
+
+.rp-recommend-fade-in {
+  animation: rp-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* ── Site-wide motion ── */
+.rp-page-enter {
+  animation: rp-fade-up 0.45s var(--rp-ease-out) both;
+}
+
+.rp-page-enter-delayed,
+.rp-home-enter-delayed {
+  animation: rp-fade-up 0.5s var(--rp-ease-out) 0.06s both;
+}
+
+.rp-sidebar-enter,
+.rp-home-sidebar-enter {
+  animation: rp-fade-up 0.55s var(--rp-ease-out) 0.1s both;
+}
+
+.rp-surface {
+  border-radius: var(--border-radius);
+  background-color: var(--bg-box);
+  box-shadow: var(--box-shadow);
+  transition:
+    transform var(--rp-duration-normal) var(--rp-ease-out),
+    box-shadow var(--rp-duration-normal) var(--rp-ease-out),
+    border-color var(--rp-duration-fast) ease;
+}
+
+.rp-article-card.rp-surface {
+  transition:
+    box-shadow var(--rp-duration-normal) var(--rp-ease-out),
+    border-color var(--rp-duration-fast) ease;
+}
+
+.rp-surface--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px color-mix(in srgb, var(--main-text-color) 9%, transparent),
+    var(--box-shadow);
+}
+
+.rp-header-bar {
+  transition:
+    transform var(--rp-duration-normal) var(--rp-ease-out),
+    background-color var(--rp-duration-normal) ease,
+    box-shadow var(--rp-duration-normal) ease,
+    border-color var(--rp-duration-normal) ease;
+}
+
+.rp-header-bar.is-affix.is-visible {
+  background: color-mix(in srgb, var(--bg-box) 86%, transparent);
+  backdrop-filter: blur(16px) saturate(1.35);
+  -webkit-backdrop-filter: blur(16px) saturate(1.35);
+  box-shadow:
+    0 1px 0 color-mix(in srgb, var(--border-color) 80%, transparent),
+    0 4px 20px color-mix(in srgb, var(--main-text-color) 6%, transparent);
+}
+
+.rp-nav-link {
+  transition:
+    color var(--rp-duration-fast) ease,
+    border-color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+@keyframes rp-drawer-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rp-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.rp-mobile-drawer {
+  animation: rp-drawer-in 0.3s var(--rp-ease-out) both;
+}
+
+.rp-mobile-backdrop {
+  animation: rp-backdrop-in 0.25s ease both;
+}
+
+.rp-back-to-top {
+  opacity: 0;
+  transform: translateY(10px) scale(0.94);
+  pointer-events: none;
+  background: color-mix(in srgb, var(--bg-box) 88%, transparent);
+  backdrop-filter: blur(12px) saturate(1.3);
+  -webkit-backdrop-filter: blur(12px) saturate(1.3);
+  transition:
+    opacity var(--rp-duration-normal) var(--rp-ease-out),
+    transform var(--rp-duration-normal) var(--rp-ease-out),
+    color var(--rp-duration-fast) ease,
+    box-shadow var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+.rp-back-to-top.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.rp-back-to-top:hover {
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--main-text-color) 10%, transparent);
+}
+
+.rp-icon-btn {
+  transition:
+    color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-normal) var(--rp-ease-out),
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-icon-btn:hover {
+  transform: scale(1.06);
+}
+
+.rp-icon-btn:active {
+  transform: scale(0.96);
+}
+
+@keyframes rp-like-pop {
+  0% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(1.24);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.rp-action-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.625rem;
+  height: 2.625rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--second-text-color);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform var(--rp-duration-fast) var(--rp-ease-out),
+    color var(--rp-duration-fast) ease;
+}
+
+.rp-action-btn:hover {
+  color: var(--main-text-color);
+}
+
+.rp-action-btn:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
+  outline-offset: 2px;
+}
+
+.rp-action-btn:active {
+  transform: scale(0.94);
+}
+
+.rp-action-btn.is-disabled,
+.rp-action-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.rp-action-btn.is-disabled:active,
+.rp-action-btn:disabled:active {
+  transform: none;
+}
+
+.rp-action-btn.is-liked,
+.rp-action-btn.is-bookmarked,
+.rp-action-btn.is-shared {
+  color: var(--primary-color);
+}
+
+.rp-action-btn.is-liked svg {
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.rp-action-btn.is-bookmarked svg {
+  fill: currentColor;
+}
+
+.rp-action-btn.is-liked svg,
+.rp-action-btn.is-bookmarked svg,
+.rp-action-btn.is-shared svg {
+  animation: rp-like-pop 0.42s var(--rp-ease-out);
+}
+
+.rp-action-btn__count-below {
+  min-height: 0.875rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--second-text-color);
+  text-align: center;
+}
+
+.rp-action-btn.is-liked .rp-action-btn__count-below,
+.rp-action-btn.is-bookmarked .rp-action-btn__count-below {
+  color: inherit;
+}
+
+.rp-action-btn--inline {
+  width: auto;
+  height: auto;
+  min-height: 2.375rem;
+  padding: 0.4375rem 0.875rem;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
+  background: var(--bg-box);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--main-text-color) 4%, transparent);
+}
+
+.rp-action-btn--inline:hover {
+  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
+  background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-box));
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 12%, transparent);
+}
+
+.rp-action-btn--inline:active {
+  transform: translateY(0) scale(0.98);
+}
+
+.rp-action-btn--inline.is-liked,
+.rp-action-btn--inline.is-bookmarked {
+  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
+  background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-box));
+  color: var(--primary-color);
+}
+
+.rp-action-btn--mobile {
+  position: relative;
+  flex-direction: column;
+  width: auto;
+  height: auto;
+  min-height: 3rem;
+  padding: 0.375rem 0.5rem;
+  gap: 0.125rem;
+  border-radius: 0.75rem;
+  background: transparent;
+}
+
+.rp-action-btn--mobile:hover {
+  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+  transform: none;
+}
+
+.rp-action-btn--mobile:active {
+  transform: scale(0.95);
+}
+
+.rp-action-btn--mobile.is-liked,
+.rp-action-btn--mobile.is-bookmarked {
+  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+}
+
+.rp-action-btn__mobile-label {
+  font-size: 0.625rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: inherit;
+  opacity: 0.85;
+}
+
+.rp-action-btn__mobile-count {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.375rem;
+  min-width: 0.875rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: var(--primary-color);
+  color: #fff;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  line-height: 0.875rem;
+  text-align: center;
+}
+
+.rp-action-btn__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.rp-action-btn__label {
+  white-space: nowrap;
+}
+
+.rp-action-btn__count {
+  min-width: 1.125rem;
+  padding: 0 0.3rem;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+@keyframes rp-carousel-kenburns {
+  from {
+    transform: scale(1) translate(0, 0);
+  }
+  to {
+    transform: scale(1.1) translate(-1.5%, -1%);
+  }
+}
+
+.rp-cover-zoom {
+  transform-origin: center center;
+  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.rp-carousel .rp-carousel-slide.is-active .rp-carousel-cover-motion {
+  animation: rp-carousel-kenburns var(--rp-autoplay-ms, 5s) linear forwards;
+  transition: none;
+}
+
+.rp-carousel.is-paused .rp-carousel-slide.is-active .rp-carousel-cover-motion {
+  animation-play-state: paused;
+}
+
+.rp-cover-zoom-host:hover .rp-cover-zoom,
+.rp-carousel.is-paused:hover .rp-carousel-slide.is-active .rp-cover-zoom {
+  transform: scale(1.05);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rp-cover-zoom {
+    transition: none;
+  }
+
+  .rp-carousel .rp-carousel-slide.is-active .rp-carousel-cover-motion {
+    animation: none;
+  }
+
+  .rp-cover-zoom-host:hover .rp-cover-zoom,
+  .rp-carousel.is-paused:hover .rp-carousel-slide.is-active .rp-cover-zoom {
+    transform: none;
+  }
+}
+
+.rp-archive-banner {
+  position: relative;
+}
+
+.rp-archive-banner::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgb(0 0 0 / 55%) 0%,
+    rgb(0 0 0 / 22%) 45%,
+    rgb(0 0 0 / 8%) 100%
+  );
+  pointer-events: none;
+}
+
+.rp-archive-banner__content {
+  position: relative;
+  z-index: 1;
+  animation: rp-fade-up 0.55s var(--rp-ease-out) 0.08s both;
+}
+
+.rp-nav-card.rp-surface--interactive {
+  border-radius: 0.75rem;
+}
+
+.rp-nav-list-item {
+  transition: transform var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+.rp-nav-list-item:hover {
+  transform: translateX(3px);
+}
+
+.rp-floating-widget {
+  transition:
+    transform var(--rp-duration-normal) var(--rp-ease-out),
+    opacity var(--rp-duration-normal) ease;
+}
+
+/* Article detail page — dev.to inspired reading layout */
+.rp-article-wrap {
+  animation: rp-fade-up 0.5s var(--rp-ease-out) both;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background: var(--bg-box);
+  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--main-text-color) 4%, transparent);
+}
+
+.rp-article-cover-hero {
+  position: relative;
+  max-height: min(28rem, 52vw);
+  overflow: hidden;
+  background: var(--bg-second);
+}
+
+.rp-article-cover-hero::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    transparent 55%,
+    color-mix(in srgb, var(--bg-box) 25%, transparent) 100%
+  );
+  pointer-events: none;
+}
+
+.rp-article-cover-hero img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: min(28rem, 52vw);
+  object-fit: cover;
+}
+
+.rp-article-inner {
+  width: 100%;
+  padding: 1.5rem 1.5rem 2.25rem;
+}
+
+@media (min-width: 768px) {
+  .rp-article-inner {
+    padding: 1.75rem 2rem 2.5rem;
+  }
+}
+
+.rp-article-header {
+  margin-bottom: 1.75rem;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.rp-article-wrap:has(.rp-article-cover-hero) .rp-article-inner {
+  padding-top: 1.5rem;
+}
+
+.rp-article-title {
+  margin: 0.5rem 0 0;
+  font-size: clamp(1.875rem, 5vw, 2.75rem);
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: var(--main-text-color);
+  text-wrap: balance;
+}
+
+.rp-article-lead {
+  margin: 0.875rem 0 0;
+  max-width: 42rem;
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  color: var(--second-text-color);
+}
+
+.rp-article-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.625rem;
+}
+
+.rp-article-meta-chip {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--second-text-color);
+}
+
+.rp-article-meta-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 9999px;
+  background: var(--disable-text-color);
+  flex-shrink: 0;
+}
+
+.rp-article-body {
+  padding: 0;
+}
+
+.rp-article-body .markdown {
+  letter-spacing: 0.01em;
+  font-size: 1.0625rem;
+  line-height: 1.85;
+  color: var(--main-text-color);
+}
+
+.rp-article-body .markdown p {
+  margin-top: 0;
+  margin-bottom: 1.25em;
+}
+
+.rp-article-body .markdown blockquote {
+  margin: 1.25rem 0;
+  padding: 0.25rem 0 0.25rem 1rem;
+  border: none;
+  border-left: 4px solid color-mix(in srgb, var(--border-color) 90%, transparent);
+  border-radius: 0;
+  background: transparent;
+  color: var(--second-text-color);
+}
+
+.rp-article-body .markdown blockquote p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.rp-article-body .markdown blockquote p + p {
+  margin-top: 0.75em;
+}
+
+.rp-article-body .markdown pre {
+  margin: 1.25rem 0;
+}
+
+.rp-article-body .markdown table {
+  margin: 1.25rem 0;
+}
+
+.rp-article-body .markdown ul,
+.rp-article-body .markdown ol {
+  margin: 0 0 1.25em;
+}
+
+.rp-article-body .markdown li > ul,
+.rp-article-body .markdown li > ol {
+  margin-bottom: 0;
+}
+
+.rp-article-body .markdown h1,
+.rp-article-body .markdown h2,
+.rp-article-body .markdown h3,
+.rp-article-body .markdown h4 {
+  letter-spacing: -0.015em;
+  margin-top: 2em;
+  margin-bottom: 0.65em;
+}
+
+.rp-article-body .markdown h2 {
+  padding-bottom: 0.5rem;
+  font-size: 1.375rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+}
+
+.rp-article-body .markdown h3 {
+  font-size: 1.125rem;
+}
+
+.rp-article-body .markdown > :first-child {
+  margin-top: 0;
+}
+
+.rp-article-body .markdown a {
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--link-color) 35%, transparent);
+  text-underline-offset: 0.15em;
+  transition: text-decoration-color var(--rp-duration-fast) ease;
+}
+
+.rp-article-body .markdown a:hover {
+  text-decoration-color: var(--link-color);
+}
+
+.rp-article-body .markdown code:not(pre code) {
+  font-size: 0.9em;
+  padding: 0.15em 0.4em;
+  border-radius: 0.3125rem;
+  background: var(--bg-second);
+  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
+}
+
+.rp-article-footer {
+  margin-top: 2.5rem;
+  padding-top: 0;
+  border-top: none;
+}
+
+.rp-article-author-footer {
+  margin-top: 0.25rem;
+}
+
+.rp-article-author-panel {
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+  background: color-mix(in srgb, var(--bg-second) 65%, var(--bg-box));
+}
+
+.rp-article-author-main {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.125rem 1.25rem;
+}
+
+.rp-article-author-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
+  background: var(--bg-box);
+  text-decoration: none;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-article-author-avatar:hover {
+  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
+  transform: translateY(-1px);
+}
+
+.rp-article-author-avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0.375rem;
+  object-fit: contain;
+}
+
+.rp-article-author-avatar__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0.375rem;
+}
+
+.rp-article-author-avatar__brand :where(img, svg) {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.rp-article-author-avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.75rem;
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.rp-article-author-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.rp-article-author-label {
+  display: block;
+  margin-bottom: 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--disable-text-color);
+}
+
+.rp-article-author-name {
+  display: block;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--main-text-color);
+  text-decoration: none;
+  transition: color var(--rp-duration-fast) ease;
+}
+
+.rp-article-author-name:hover {
+  color: var(--primary-color);
+}
+
+.rp-article-author-bio {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  color: var(--second-text-color);
+}
+
+.rp-article-author-cta {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.4375rem 0.875rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
+  background: var(--bg-box);
+  color: var(--second-text-color);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    color var(--rp-duration-fast) ease,
+    border-color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-fast) ease;
+}
+
+@media (min-width: 640px) {
+  .rp-article-author-cta {
+    display: inline-flex;
+  }
+}
+
+.rp-article-author-cta:hover {
+  color: var(--primary-color);
+  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
+  background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-box));
+}
+
+.rp-article-author-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
+  background: color-mix(in srgb, var(--bg-box) 55%, transparent);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--second-text-color);
+}
+
+.rp-article-author-meta__sep {
+  color: var(--disable-text-color);
+  user-select: none;
+}
+
+.rp-article-author-license {
+  margin-left: 0.25rem;
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--link-color) 30%, transparent);
+  transition:
+    color var(--rp-duration-fast) ease,
+    border-color var(--rp-duration-fast) ease;
+}
+
+.rp-article-author-license:hover {
+  color: var(--primary-color);
+  border-bottom-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
+}
+
+.rp-article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  margin: 1.25rem 0 0;
+}
+
+.rp-article-tags--header {
+  margin: 0.875rem 0 0;
+}
+
+.rp-article-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
+  background: var(--bg-second);
+  color: var(--second-text-color);
+  font-size: 0.8125rem;
+  text-decoration: none;
+  transition:
+    color var(--rp-duration-fast) ease,
+    border-color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-fast) ease,
+    opacity var(--rp-duration-fast) ease;
+}
+
+.rp-article-tag--hash {
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.rp-article-tag--hash:hover {
+  opacity: 0.72;
+  background: transparent;
+  border: none;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 0.15em;
+}
+
+.rp-article-tag:not(.rp-article-tag--hash):hover {
+  color: var(--primary-button-fg);
+  background: var(--primary-button-bg);
+  border-color: var(--primary-button-bg);
+}
+
+.rp-article-tag:not(.rp-article-tag--hash):hover svg {
+  color: inherit;
+}
+
+.rp-article-actions-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  margin: 1.75rem 0 0.5rem;
+  padding: 1rem 0;
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+}
+
+@media (min-width: 1280px) {
+  .rp-article-actions-bar {
+    display: none;
+  }
+}
+
+.rp-article-recommend,
+.rp-comment-wrap {
+  width: 100%;
+}
+
+.rp-article-recommend {
+  margin-top: 1rem;
+}
+
+.rp-article-recommend-panel {
+  overflow: visible;
+  background: transparent;
+  border: 0;
+}
+
+.rp-article-recommend-panel .rp-article-list {
+  box-shadow: none;
+}
+
+.rp-article-page .rp-article-recommend .rp-section-heading {
+  margin-bottom: 0.75rem;
+}
+
+.rp-comment-wrap {
+  margin-top: 1.5rem;
+}
+
+.rp-article-page .rp-section-heading {
+  justify-content: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.rp-article-page .rp-section-heading::before {
+  display: none;
+}
+
+.rp-article-page .rp-section-heading::after {
+  flex: 1;
+  max-width: none;
+  --rp-section-line-dir: right;
+}
+
+.rp-article-page .rp-section-heading__title {
+  letter-spacing: 0.06em;
+}
+
+.rp-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 0 0 1rem;
+}
+
+.rp-section-heading::before,
+.rp-section-heading::after {
+  content: '';
+  flex: 1;
+  max-width: 4rem;
+  height: 1px;
+  background: linear-gradient(
+    to var(--rp-section-line-dir, right),
+    transparent,
+    color-mix(in srgb, var(--border-color) 90%, transparent)
+  );
+}
+
+.rp-section-heading::after {
+  --rp-section-line-dir: left;
+}
+
+.rp-section-heading__title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--second-text-color);
+  white-space: nowrap;
+}
+
+.rp-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+}
+
+.rp-empty-state__icon {
+  color: color-mix(in srgb, var(--second-text-color) 45%, transparent);
+}
+
+.rp-empty-state__text {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--second-text-color);
+}
+
+.rp-comment-wrap > .rp-comment-panel {
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background: var(--bg-box);
+  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+}
+
+.rp-toc-panel {
+  overflow: hidden;
+  background: var(--bg-box);
+  border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
+  box-shadow: -4px 0 20px color-mix(in srgb, var(--main-text-color) 6%, transparent);
+}
+
+.rp-toc-panel--minimal {
+  padding: 0.625rem 0.5rem 0.625rem 0.375rem;
+}
+
+.rp-toc-panel--minimal .rp-article-toc-list {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.rp-toc-panel--minimal .rp-article-toc-item {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 0.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  border-left: none;
+  border-radius: 0.25rem;
+  color: var(--second-text-color);
+}
+
+.rp-toc-panel--minimal .rp-article-toc-item:hover {
+  color: var(--main-text-color);
+  background: color-mix(in srgb, var(--bg-second) 55%, transparent);
+}
+
+.rp-toc-panel--minimal .rp-article-toc-item.is-active {
+  color: var(--primary-color);
+  font-weight: 500;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* TOC toggle — fixed on right edge */
+.rp-toc-toggle {
+  display: none;
+  position: fixed;
+  top: 50%;
+  right: 0;
+  z-index: 100;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+  border-right: 0;
+  border-radius: 0.625rem 0 0 0.625rem;
+  background: color-mix(in srgb, var(--bg-box) 96%, transparent);
+  color: var(--second-text-color);
+  cursor: pointer;
+  transform: translateY(-50%);
+  backdrop-filter: blur(12px) saturate(1.15);
+  -webkit-backdrop-filter: blur(12px) saturate(1.15);
+  transition:
+    color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-fast) ease;
+}
+
+.rp-toc-toggle:hover,
+.rp-toc-toggle.is-open {
+  color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-box));
+}
+
+@media (min-width: 1280px) {
+  .rp-toc-toggle {
+    display: inline-flex;
+  }
+}
+
+/* Collapsible TOC — fixed drawer, opens beside toggle */
+.rp-toc-fixed-drawer {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  z-index: 99;
+  width: 14rem;
+  max-height: min(65vh, calc(100vh - 2rem - var(--rp-header-offset, 0px)));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  transform: translateY(-50%);
+  visibility: visible;
+  transition:
+    transform 0.28s var(--rp-ease-out),
+    visibility 0.28s,
+    right 0.28s var(--rp-ease-out);
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--border-color) 70%, transparent) transparent;
+}
+
+@media (min-width: 1280px) {
+  .rp-toc-fixed-drawer:not(.is-collapsed) {
+    right: 2.5rem;
+  }
+
+  .rp-toc-fixed-drawer.is-collapsed {
+    transform: translateY(-50%) translateX(100%);
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+@media (max-width: 1279px) {
+  .rp-toc-fixed-drawer {
+    top: auto;
+    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
+    right: 0.75rem;
+    left: 0.75rem;
+    width: auto;
+    max-height: min(42vh, 18rem);
+    transform: translateY(0);
+    border-radius: 0.875rem;
+  }
+
+  .rp-toc-fixed-drawer.is-collapsed {
+    transform: translateY(calc(100% + 1.5rem));
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .rp-toc-fixed-drawer .rp-toc-panel {
+    border-radius: 0.875rem;
+    border-right: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
+  }
+}
+
+.rp-toc-fixed-drawer__inner {
+  width: 100%;
+}
+
+.rp-toc-fixed-drawer .rp-sidebar-sticky {
+  position: static;
+  top: auto;
+  margin-bottom: 0;
+}
+
+.rp-toc-fixed-drawer .rp-toc-panel {
+  width: 100%;
+  border-right: 0;
+  border-radius: 0.5rem 0 0 0.5rem;
+  box-shadow: none;
+}
+
+/* Collapsible TOC — icon toggle on viewport right */
+.rp-sidebar-slot {
+  width: 18rem;
+}
+
+.rp-sidebar-slot__content {
+  width: 100%;
+}
+
+.rp-sidebar-slot__content .rp-toc-panel {
+  width: 100%;
+  border-radius: 0.875rem;
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--main-text-color) 4%, transparent),
+    0 8px 24px color-mix(in srgb, var(--main-text-color) 5%, transparent);
+}
+
+.rp-comment-panel {
+  border-radius: 0.875rem;
+}
+
+.rp-footer-icon {
+  display: inline-flex;
+  transition:
+    color var(--rp-duration-fast) ease,
+    transform var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+.rp-footer-icon:hover {
+  transform: translateY(-2px) scale(1.08);
+}
+
+.rp-primary-action {
+  transition:
+    opacity var(--rp-duration-fast) ease,
+    transform var(--rp-duration-fast) var(--rp-ease-out),
+    box-shadow var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+.rp-primary-action:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 35%, transparent);
+}
+
+.rp-primary-action:active {
+  transform: translateY(0);
+}
+
+.rp-floating-widget {
+  transition:
+    transform var(--rp-duration-normal) var(--rp-ease-out),
+    opacity var(--rp-duration-normal) ease;
+}
+
+.rp-category-item {
+  transition:
+    color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-normal) var(--rp-ease-out);
+}
+
+.rp-category-item:hover {
+  background: color-mix(in srgb, var(--primary-color) 7%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rp-page-enter,
+  .rp-page-enter-delayed,
+  .rp-sidebar-enter,
+  .rp-home-enter,
+  .rp-home-enter-delayed,
+  .rp-home-sidebar-enter,
+  .rp-home-card-enter,
+  .rp-carousel-text-enter,
+  .rp-carousel-slide,
+  .rp-carousel-dot-progress,
+  .rp-carousel-progress-meteor,
+  .rp-recommend-fade-in,
+  .rp-mobile-drawer,
+  .rp-mobile-backdrop,
+  .rp-archive-banner__content,
+  .rp-article-wrap,
+  .rp-recommend-scroll-track,
+  .rp-recommend-scroll-track.is-moving .rp-recommend-scroll-row:first-child .rp-recommend-link,
+  .rp-recommend-scroll-track.is-moving .rp-recommend-scroll-row:last-child .rp-recommend-link,
+  .rp-notification-bar,
+  .rp-notification-ticker-item.is-entering,
+  .rp-notification-ticker-item.is-leaving {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .rp-surface--interactive:hover,
+  .rp-nav-list-item:hover,
+  .rp-icon-btn:hover,
+  .rp-action-btn:hover,
+  .rp-footer-icon:hover,
+  .rp-primary-action:hover {
+    transform: none;
+  }
+
+  .rp-back-to-top,
+  .rp-back-to-top.is-visible {
+    transition: none;
+  }
+
+  .rp-carousel-slide.is-active,
+  .rp-carousel-slide:not(.is-active) {
+    transition: none;
+  }
+}
+
+.rp-primary-button {
+  background-color: var(--primary-button-bg);
+  color: var(--primary-button-fg);
+}
+
+.rp-notification-close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--rp-duration-fast) ease,
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-notification-close:hover {
+  transform: scale(1.12);
+}
+
+.rp-notification-close:active {
+  transform: scale(0.94);
+}
+
+.rp-notification-close::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+}
+
+.rp-notification-bar {
+  position: relative;
+  animation: rp-notification-in 0.48s var(--rp-ease-out) both;
+  transition:
+    opacity 0.32s var(--rp-ease-out),
+    transform 0.32s var(--rp-ease-out);
+}
+
+.rp-notification-bar.is-dismissing {
+  opacity: 0;
+  transform: translateY(-6px) scale(0.985);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes rp-notification-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rp-notification-icon {
+  transition: transform 0.35s var(--rp-ease-out);
+}
+
+.rp-notification-icon.is-active {
+  animation: rp-notification-bell 0.55s var(--rp-ease-out);
+}
+
+@keyframes rp-notification-bell {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20% {
+    transform: rotate(-12deg);
+  }
+  40% {
+    transform: rotate(10deg);
+  }
+  60% {
+    transform: rotate(-6deg);
+  }
+  80% {
+    transform: rotate(4deg);
+  }
+}
+
+.rp-notification-text {
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rp-notification-text :where(p, div, h1, h2, h3, h4, h5, h6, li, ul, ol) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+.rp-notification-text :where(p, div, li)::after {
+  content: ' ';
+}
+
+.rp-notification-text :where(a, span, strong, em) {
+  display: inline;
+}
+
+.rp-notification-ticker-viewport {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+  height: 1.375rem;
+  overflow: hidden;
+}
+
+.rp-notification-ticker-item {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  overflow: hidden;
+}
+
+.rp-notification-ticker-item.is-entering {
+  animation: rp-notice-enter 0.52s var(--rp-ease-out) both;
+}
+
+.rp-notification-ticker-item.is-leaving {
+  animation: rp-notice-leave 0.52s var(--rp-ease-out) both;
+}
+
+@keyframes rp-notice-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rp-notice-leave {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+/* 3D tag cloud — ported from twentytwentyfive TagCloud */
+.rp-tag-cloud {
+  position: relative;
+  width: 250px;
+  height: 260px;
+  margin: 0 auto;
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+}
+
+.rp-tag-cloud a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  margin: 0 10px 15px 0;
+  padding: 5px 8px;
+  border-radius: 3px;
+  line-height: 18px;
+  font-size: 12px;
+  color: #fff;
+  text-decoration: none;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.rp-tag-cloud.is-ready a {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.rp-tag-cloud-skeleton {
+  position: relative;
+  width: 250px;
+  height: 260px;
+  margin: 0 auto;
+}
+
+.rp-tag-cloud-skeleton-item {
+  position: absolute;
+  display: block;
+  height: 28px;
+  border-radius: 3px;
+  background: var(--bg-second);
+  animation: recommend-shimmer 1.4s ease-in-out infinite;
+}
+
+.rp-tag-cloud a:hover {
+  background: var(--primary-color) !important;
+}
+
+/* Nav page */
+.rp-nav-subcats-active::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  margin-left: -8px;
+  border: 8px solid transparent;
+  border-top-color: var(--primary-color);
+}
+
+/* Nav cards — aligned with twentytwentyfive NavCard */
+.rp-nav-card-wrapper {
+  position: relative;
+}
+
+.rp-nav-card-list > * {
+  background-color: var(--bg-box);
+}
+
+.rp-nav-list-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.rp-nav-item-desc {
+  display: inline-block;
+  width: 100%;
+  height: 42px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rp-nav-list-item:hover .rp-nav-item-desc {
+  color: var(--second-text-color);
+}
+
+@media (max-width: 768px) {
+  .rp-nav-list-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* CMS sections */
+.rp-cms-section-title {
+  margin: 1.25rem 0 0.875rem;
+  text-align: center;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.05em;
+  color: var(--main-text-color);
+}
+
+.rp-cms-page-inner {
+  background-color: var(--bg-second);
+}
+
+.rp-cms-content > div {
+  padding-top: 0.5rem;
+}
+
+.rp-cms-content img,
+.rp-cms-content svg,
+.rp-cms-content video {
+  max-width: 100%;
+  height: auto;
+}
+
+.rp-cms-content {
+  overflow-x: hidden;
+  word-break: break-word;
+}
+
+/* Comment section — dev.to inspired editor & list */
+.rp-comment-root {
+  background-color: var(--bg-box);
+}
+
+.rp-comment-editor-wrap {
+  padding: 1.25rem 1.5rem 1rem;
+  background-color: var(--bg-box);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+}
+
+.rp-theme-input {
+  outline: none;
+}
+
+/* Unlayered: beats @tailwindcss/forms base blue focus ring. Match primary buttons. */
+input.rp-theme-input:focus,
+input.rp-theme-input:focus-visible,
+textarea.rp-theme-input:focus,
+textarea.rp-theme-input:focus-visible,
+select.rp-theme-input:focus,
+select.rp-theme-input:focus-visible,
+input:where([type='text']):focus,
+input:where(:not([type])):focus,
+input:where([type='email']):focus,
+input:where([type='url']):focus,
+input:where([type='password']):focus,
+input:where([type='number']):focus,
+input:where([type='date']):focus,
+input:where([type='datetime-local']):focus,
+input:where([type='month']):focus,
+input:where([type='search']):focus,
+input:where([type='tel']):focus,
+input:where([type='time']):focus,
+input:where([type='week']):focus,
+textarea:focus,
+textarea:focus-visible,
+select:focus,
+select:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-color: var(--primary-button-bg);
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-color: var(--primary-button-bg);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+    var(--tw-ring-offset-color, #fff);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+    var(--primary-button-bg);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.rp-theme-input-plain:focus,
+.rp-theme-input-plain:focus-visible {
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.rp-search-bar:focus-within .rp-theme-input {
+  border-color: var(--primary-button-bg);
+  border-right-color: var(--border-color);
+}
+
+.rp-search-field:focus-within {
+  border-color: var(--primary-button-bg);
+  box-shadow: 0 0 0 1px var(--primary-button-bg);
+}
+
+/* Search page — search-first layout */
+.rp-search-page .rp-notification-bar {
+  margin-top: 0.75rem;
+}
+
+.rp-search-page > .rp-double-column {
+  position: relative;
+  z-index: 1;
+  padding-top: 0.75rem;
+}
+
+.rp-search-page .rp-double-column__main {
+  padding-bottom: 1.5rem;
+}
+
+.rp-search-hero {
+  position: relative;
+  z-index: 1;
+  margin-top: 0.75rem;
+  margin-bottom: 0;
+  padding: 1.5rem 0 1.125rem;
+  overflow: visible;
+}
+
+.rp-search-hero.is-dropdown-open {
+  z-index: 40;
+}
+
+.rp-search-hero--compact {
+  margin-top: 0.5rem;
+  padding: 0.375rem 0 0.875rem;
+}
+
+.rp-search-hero__backdrop {
+  position: absolute;
+  inset: 0;
+  border-radius: 0.75rem;
+  background: var(--bg-box);
+  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
+  box-shadow: none;
+}
+
+.rp-search-hero:not(.rp-search-hero--compact) .rp-search-hero__backdrop {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--primary-color) 4%, var(--bg-box)),
+    var(--bg-box) 42%
+  );
+}
+
+.rp-search-hero--compact .rp-search-hero__backdrop {
+  border-radius: 0.75rem;
+  box-shadow: var(--box-shadow);
+}
+
+.rp-search-hero__content {
+  position: relative;
+  z-index: 1;
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 0 0.75rem;
+}
+
+.rp-search-hero__header {
+  margin-bottom: 0.875rem;
+  text-align: center;
+}
+
+.rp-search-hero__title {
+  margin: 0;
+  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--main-text-color);
+}
+
+.rp-search-hero__subtitle {
+  margin: 0.375rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--second-text-color);
+}
+
+.rp-search-hero__field-wrap {
+  position: relative;
+  z-index: 5;
+}
+
+.rp-search-hero__field {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
+  border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
+  border-radius: 9999px;
+  background: var(--bg-box);
+  box-shadow: 0 4px 18px color-mix(in srgb, var(--main-text-color) 5%, transparent);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.rp-search-hero__field:focus-within {
+  border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent),
+    0 4px 18px color-mix(in srgb, var(--main-text-color) 5%, transparent);
+}
+
+.rp-search-hero--compact .rp-search-hero__field {
+  min-height: 2.5rem;
+  box-shadow: var(--box-shadow);
+}
+
+.rp-search-hero__field-icon {
+  color: var(--primary-color);
+}
+
+.rp-search-hero__submit {
+  min-height: 2rem;
+  padding-inline: 1rem;
+  font-size: 0.8125rem;
+}
+
+.rp-search-hero__dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  left: 0;
+  z-index: 60;
+  overflow: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 0.625rem;
+  background: var(--bg-box);
+  box-shadow:
+    0 10px 32px color-mix(in srgb, var(--main-text-color) 12%, transparent),
+    var(--box-shadow);
+}
+
+.rp-search-hero__categories {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.375rem;
+  margin-bottom: 0.625rem;
+}
+
+.rp-search-hero--compact .rp-search-hero__categories {
+  margin-bottom: 0.5rem;
+}
+
+.rp-search-hero__category {
+  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--bg-box) 88%, transparent);
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--main-text-color);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+@media (min-width: 768px) {
+  .rp-search-hero__category {
+    padding: 0.375rem 0.875rem;
+    font-size: 0.8125rem;
+  }
+}
+
+.rp-search-hero__category:hover {
+  color: var(--primary-color);
+  border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
+}
+
+.rp-search-hero__category.is-active {
+  border-color: transparent;
+  background: var(--primary-button-bg, var(--primary-color));
+  color: var(--primary-button-text, #fff);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 28%, transparent);
+}
+
+.rp-search-hero__subcats {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.375rem;
+  margin-top: 0.625rem;
+  min-height: 1.75rem;
+}
+
+.rp-search-hero__subcat {
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  background: transparent;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--second-text-color);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+@media (min-width: 768px) {
+  .rp-search-hero__subcat {
+    font-size: 0.8125rem;
+  }
+}
+
+.rp-search-hero__subcat:hover {
+  color: var(--primary-color);
+}
+
+.rp-search-hero__subcat.is-active {
+  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color));
+  background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-box));
+  font-weight: 500;
+  color: var(--primary-color);
+}
+
+.rp-search-results__summary {
+  margin-bottom: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+  border-radius: 0.625rem;
+  background: var(--bg-box);
+}
+
+.rp-search-results__list {
+  margin-bottom: 2.5rem;
+}
+
+/* Nav portal — flat full-width icon grid */
+.rp-nav-portal {
+  width: 100%;
+}
+
+.rp-nav-portal__card {
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
+  border-radius: 0.625rem;
+  background: var(--bg-box);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--main-text-color) 4%, transparent);
+}
+
+.rp-nav-portal__tabs-wrap {
+  position: sticky;
+  top: calc(var(--rp-header-offset, 0px) + 0.5rem);
+  z-index: 20;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
+  background: color-mix(in srgb, var(--bg-box) 88%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.rp-nav-portal__tabs-track {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--bg-second) 70%, var(--bg-box));
+  padding: 0.25rem;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scroll-snap-type: x proximity;
+}
+
+.rp-nav-portal__tabs-track::-webkit-scrollbar {
+  display: none;
+}
+
+.rp-nav-portal__tab {
+  display: inline-flex;
+  flex: 0 0 auto;
+  min-width: max-content;
+  scroll-snap-align: center;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3125rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  padding: 0.4375rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  color: var(--second-text-color);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease;
+}
+
+.rp-nav-portal__tab:hover {
+  color: var(--main-text-color);
+}
+
+.rp-nav-portal__tab:active {
+  transform: scale(0.98);
+}
+
+.rp-nav-portal__tab.is-active {
+  background: var(--bg-box);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--main-text-color) 8%, transparent);
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.rp-nav-portal__tab-icon {
+  flex-shrink: 0;
+  color: var(--primary-color);
+  opacity: 0.9;
+}
+
+.rp-nav-portal__tab-label {
+  white-space: nowrap;
+}
+
+.rp-nav-portal__body {
+  background: var(--bg-box);
+}
+
+.rp-nav-portal__section {
+  --rp-nav-section-offset: calc(var(--rp-header-offset, 0px) + 3.75rem);
+  scroll-margin-top: var(--rp-nav-section-offset);
+  padding: 0.875rem 0.625rem 0.25rem;
+  transition: background-color 0.35s ease;
+}
+
+.rp-nav-portal__section--gap {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top: 1px dashed color-mix(in srgb, var(--border-color) 42%, transparent);
+}
+
+.rp-nav-portal__section.is-active {
+  background: color-mix(in srgb, var(--primary-color) 2.5%, var(--bg-box));
+}
+
+.rp-nav-portal__section.is-flash {
+  animation: rp-nav-section-flash 0.85s ease;
+}
+
+@keyframes rp-nav-section-flash {
+  0% {
+    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-box));
+  }
+  100% {
+    background: color-mix(in srgb, var(--primary-color) 2.5%, var(--bg-box));
+  }
+}
+
+.rp-nav-portal__section-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+  margin-bottom: 0.625rem;
+  padding: 0 0.125rem;
+}
+
+.rp-nav-portal__section-head--compact {
+  margin-bottom: 0.5rem;
+  padding-top: 0.125rem;
+}
+
+.rp-nav-portal__section-icon {
+  color: var(--primary-color);
+}
+
+.rp-nav-portal__section-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--main-text-color);
+}
+
+.rp-nav-portal__section-count {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: var(--second-text-color);
+}
+
+.rp-nav-portal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0 0 0.625rem;
+  list-style: none;
+}
+
+@media (min-width: 640px) {
+  .rp-nav-portal__tabs-wrap {
+    padding: 0.5625rem 0.75rem;
+  }
+
+  .rp-nav-portal__section {
+    padding: 1rem 0.75rem 0.375rem;
+  }
+
+  .rp-nav-portal__grid {
+    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
+    gap: 0.5rem;
+    padding-bottom: 0.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .rp-nav-portal__grid {
+    grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr));
+  }
+}
+
+.rp-nav-portal__site-item {
+  margin: 0;
+  padding: 0;
+}
+
+.rp-nav-portal__site {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.375rem 0.5rem;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background-color 0.18s ease,
+    transform 0.15s ease;
+}
+
+.rp-nav-portal__site:hover {
+  background: color-mix(in srgb, var(--bg-second) 65%, var(--bg-box));
+  transform: translateY(-1px);
+}
+
+.rp-nav-portal__site:active {
+  transform: translateY(0);
+}
+
+.rp-nav-portal__site:hover .rp-nav-portal__site-name {
+  color: var(--primary-color);
+}
+
+.rp-nav-portal__site-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.625rem;
+  height: 2.625rem;
+  border-radius: 0.75rem;
+  background: var(--bg-box);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--border-color) 55%, transparent),
+    0 1px 2px color-mix(in srgb, var(--main-text-color) 5%, transparent);
+  transition: box-shadow 0.18s ease;
+}
+
+.rp-nav-portal__site:hover .rp-nav-portal__site-icon {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 25%, var(--border-color)),
+    0 2px 6px color-mix(in srgb, var(--main-text-color) 8%, transparent);
+}
+
+.rp-nav-portal__site-icon-stack {
+  position: relative;
+  display: inline-flex;
+  width: 2.125rem;
+  height: 2.125rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.rp-nav-portal__site-img {
+  position: absolute;
+  inset: 0;
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: 0.5rem;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.rp-nav-portal__site-img.is-visible {
+  opacity: 1;
+}
+
+.rp-nav-portal__site-fallback {
+  display: inline-flex;
+  width: 2.125rem;
+  height: 2.125rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-second));
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.rp-nav-portal__site-name {
+  display: -webkit-box;
+  overflow: hidden;
+  width: 100%;
+  max-width: none;
+  padding: 0 0.125rem;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: 0.6875rem;
+  line-height: 1.35;
+  color: var(--main-text-color);
+  overflow-wrap: break-word;
+  word-break: normal;
+  hyphens: auto;
+  transition: color 0.18s ease;
+}
+
+@media (min-width: 640px) {
+  .rp-nav-portal__site-name {
+    font-size: 0.75rem;
+    line-height: 1.3;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Nav detail page — /nav/[id] preview */
+.rp-nav-detail-page .rp-notification-bar {
+  margin-top: 0.75rem;
+}
+
+.rp-nav-detail-page > .rp-double-column {
+  padding-top: 0.75rem;
+}
+
+.rp-nav-detail__crumb {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--second-text-color);
+}
+
+.rp-nav-detail__crumb-link {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: opacity 0.18s ease;
+}
+
+.rp-nav-detail__crumb-link:hover {
+  opacity: 0.85;
+  text-decoration: underline;
+}
+
+.rp-nav-detail__crumb-sep {
+  flex-shrink: 0;
+  color: color-mix(in srgb, var(--second-text-color) 70%, transparent);
+}
+
+.rp-nav-detail__crumb-current {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--main-text-color);
+  font-weight: 500;
+}
+
+.rp-nav-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.rp-nav-detail__card {
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
+  border-radius: 0.625rem;
+  background: var(--bg-box);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--main-text-color) 4%, transparent);
+}
+
+.rp-nav-detail__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1.25rem 0.75rem 0 1.25rem;
+}
+
+.rp-nav-detail__header-main {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rp-nav-detail__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 1rem;
+  background: var(--bg-box);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--border-color) 55%, transparent),
+    0 2px 6px color-mix(in srgb, var(--main-text-color) 6%, transparent);
+}
+
+.rp-nav-detail__icon-img {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.625rem;
+  object-fit: cover;
+}
+
+.rp-nav-detail__icon-fallback {
+  display: inline-flex;
+  width: 3rem;
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.625rem;
+  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-second));
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.rp-nav-detail__meta {
+  min-width: 0;
+}
+
+.rp-nav-detail__title {
+  margin: 0;
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--main-text-color);
+}
+
+.rp-nav-detail__url {
+  margin: 0.3125rem 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  color: var(--second-text-color);
+}
+
+.rp-nav-detail__summary {
+  margin: 0.875rem 0 0;
+  padding: 0 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--second-text-color);
+}
+
+.rp-nav-detail__actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+.rp-nav-detail__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.15s ease;
+}
+
+.rp-nav-detail__btn:active {
+  transform: scale(0.98);
+}
+
+.rp-nav-detail__btn--primary {
+  border: 0;
+  background: var(--primary-color);
+  color: #fff;
+}
+
+.rp-nav-detail__btn--primary:hover {
+  filter: brightness(1.05);
+}
+
+.rp-nav-detail__btn--ghost {
+  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
+  background: transparent;
+  color: var(--main-text-color);
+}
+
+.rp-nav-detail__btn--ghost:hover {
+  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
+  color: var(--primary-color);
+}
+
+.rp-nav-detail__disclaimer {
+  margin: 1rem 1.25rem 0;
+  border-radius: 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
+  background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-box));
+  padding: 0.75rem 0.875rem;
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  color: var(--second-text-color);
+}
+
+.rp-nav-detail__preview {
+  margin-top: 1rem;
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
+  background: color-mix(in srgb, var(--bg-second) 35%, var(--bg-box));
+}
+
+.rp-nav-detail__iframe {
+  display: block;
+  width: 100%;
+  min-height: 28rem;
+  border: 0;
+  background: var(--bg-box);
+}
+
+@media (min-width: 640px) {
+  .rp-nav-detail__header {
+    padding: 1.5rem 0.875rem 0 1.5rem;
+  }
+
+  .rp-nav-detail__summary {
+    padding-inline: 1.5rem;
+  }
+
+  .rp-nav-detail__disclaimer {
+    margin-inline: 1.5rem;
+  }
+
+  .rp-nav-detail__iframe {
+    min-height: 32rem;
+  }
+}
+
+@media (max-width: 639px) {
+  .rp-nav-detail__header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .rp-nav-detail__actions {
+    justify-content: flex-end;
+  }
+}
+
+.rp-nav-detail__recommend {
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.rp-nav-detail__recommend .rp-section-heading {
+  margin-bottom: 1rem;
+}
+
+.rp-nav-detail__recommend .rp-article-list {
+  box-shadow: none;
+}
+
+.rp-comment-editor .rp-comment-lead {
+  margin: 0 0 0.875rem;
+  color: var(--second-text-color);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.rp-comment-editor .rp-comment-author-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.rp-comment-editor .rp-comment-field {
+  min-width: 0;
+}
+
+.rp-comment-editor .rp-comment-input,
+.rp-comment-editor .rp-comment-textarea {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--main-text-color);
+  background-color: var(--bg-box);
+  padding: 0.625rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  box-shadow: none;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    box-shadow var(--rp-duration-fast) ease;
+}
+
+.rp-comment-editor .rp-comment-input::placeholder,
+.rp-comment-editor .rp-comment-textarea::placeholder {
+  color: var(--disable-text-color);
+}
+
+.rp-comment-editor .rp-comment-input:focus,
+.rp-comment-editor .rp-comment-textarea:focus,
+.rp-comment-editor .rp-comment-input:focus-visible,
+.rp-comment-editor .rp-comment-textarea:focus-visible {
+  border-color: var(--primary-button-bg);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
+  outline: none;
+}
+
+.rp-comment-editor .rp-comment-input:disabled,
+.rp-comment-editor .rp-comment-textarea:disabled {
+  background-color: var(--bg-box);
+  color: var(--second-text-color);
+  border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.rp-comment-editor .rp-comment-input.is-error {
+  border-color: #ff4d4f;
+}
+
+.rp-comment-editor .rp-comment-input.is-error:focus,
+.rp-comment-editor .rp-comment-input.is-error:focus-visible {
+  border-color: #ff4d4f;
+  box-shadow: 0 0 0 3px color-mix(in srgb, #ff4d4f 14%, transparent);
+}
+
+.rp-comment-editor .rp-comment-textarea {
+  min-height: 7.5rem;
+  resize: vertical;
+}
+
+.rp-comment-editor .rp-comment-field-error {
+  display: block;
+  margin-top: 0.25rem;
+  color: #ff4d4f;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.rp-comment-editor footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.625rem;
+}
+
+.rp-comment-editor .rp-comment-emoji-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--second-text-color);
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  padding: 0.25rem 0;
+  font-size: 0.8125rem;
+  transition: color var(--rp-duration-fast) ease;
+}
+
+.rp-comment-editor .rp-comment-emoji-trigger:hover {
+  color: var(--primary-color);
+}
+
+.rp-comment-editor .rp-comment-actions {
+  display: flex;
+  gap: 0.625rem;
+}
+
+.rp-comment-editor .rp-comment-btn {
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  background-color: var(--bg-box);
+  color: var(--main-text-color);
+  padding: 0.4375rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    color var(--rp-duration-fast) ease,
+    background-color var(--rp-duration-fast) ease;
+}
+
+.rp-comment-editor .rp-comment-btn:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
+  color: var(--primary-color);
+}
+
+.rp-comment-editor .rp-comment-btn-primary {
+  border-color: var(--primary-button-bg);
+  background-color: var(--primary-button-bg);
+  color: var(--primary-button-fg);
+  box-shadow: none;
+}
+
+.rp-comment-editor .rp-comment-btn-primary:hover:not(:disabled) {
+  filter: brightness(1.05);
+  color: var(--primary-button-fg);
+}
+
+.rp-comment-editor .rp-comment-btn-primary:disabled {
+  border-color: var(--border-color);
+  color: var(--disable-text-color);
+  background-color: var(--bg-second);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.rp-comment-editor.is-small .rp-comment-author-fields {
+  grid-template-columns: 1fr;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.rp-comment-editor.is-small .rp-comment-lead {
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.rp-comment-item.is-parent {
+  padding: 0 1.25rem;
+  background-color: var(--bg-box);
+}
+
+.rp-comment-item.is-parent > div {
+  padding: 1rem 0;
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
+}
+
+.rp-comment-item.is-parent:last-of-type > div {
+  padding-bottom: 0;
+}
+
+.rp-comment-item.is-child {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.rp-comment-item.is-child.is-last {
+  border-bottom-width: 0;
+}
+
+.rp-comment-item header {
+  display: flex;
+  align-items: center;
+}
+
+.rp-comment-item .rp-comment-name {
+  padding: 0 8px;
+  color: var(--main-text-color);
+}
+
+.rp-comment-item main {
+  font-size: 0.9rem;
+}
+
+.rp-comment-item footer .rp-comment-meta {
+  font-size: 0.8rem;
+  color: var(--disable-text-color);
+}
+
+.rp-comment-item footer .rp-comment-reply-btn {
+  margin-left: 8px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+.rp-comment-item footer .rp-comment-reply-btn:hover {
+  color: var(--primary-color);
+}
+
+.rp-comment-item .rp-comment-reply-editor {
+  padding-top: 16px;
+}
+
+.rp-comment-children {
+  padding: 4px 12px 12px;
+  margin-top: 8px;
+  background-color: var(--bg-body);
+}
+
+.rp-comment-show-more {
+  padding-top: 12px;
+  color: var(--second-text-color);
+  text-align: center;
+  cursor: pointer;
+  border-top: 1px solid var(--border-color);
+}
+
+.rp-comment-pagination {
+  padding: 16px 0;
+  color: var(--second-text-color);
+  text-align: center;
+  background-color: var(--bg-box);
+}
+
+.rp-comment-pagination-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rp-comment-pagination-btn {
+  min-width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-box);
+  color: var(--second-text-color);
+  cursor: pointer;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    color var(--rp-duration-fast) ease,
+    transform var(--rp-duration-fast) var(--rp-ease-out);
+}
+
+.rp-comment-pagination-btn:hover:not(:disabled) {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  transform: translateY(-1px);
+}
+
+.rp-comment-pagination-btn.is-active {
+  border-color: #ff0064;
+  color: #ff0064;
+}
+
+.rp-comment-pagination-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.rp-comment-emoji-panel {
+  display: flex;
+  flex-wrap: wrap;
+  width: 320px;
+  max-height: 240px;
+  overflow: auto;
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-box);
+  box-shadow: var(--box-shadow);
+}
+
+.rp-comment-emoji-panel.is-portal {
+  position: fixed;
+}
+
+.rp-comment-emoji-panel button {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.rp-comment-emoji-panel button:hover {
+  background: var(--bg-second);
+  border-radius: 4px;
+}
+
+.rp-comment-emoji-anchor {
+  position: relative;
+}
+
+.rp-comment-toast {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  z-index: 9999;
+  transform: translateX(-50%);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  background: rgb(0 0 0 / 75%);
+  color: #fff;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+@media (max-width: 640px) {
+  .rp-comment-editor .rp-comment-author-fields {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Auth — login / register */
+.rp-auth-page {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 0 3.5rem;
+}
+
+.rp-auth-card {
+  width: min(100%, 26rem);
+  padding: 2rem;
+  border: 1px solid var(--border-color);
+  border-radius: calc(var(--border-radius) + 4px);
+  background: var(--bg-box);
+  box-shadow: var(--box-shadow);
+}
+
+.rp-auth-card--loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 16rem;
+  text-align: center;
+}
+
+.rp-auth-card__header {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.rp-auth-card__eyebrow {
+  margin: 0 0 0.375rem;
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rp-auth-card__title {
+  margin: 0;
+  color: var(--main-text-color);
+  font-size: 1.625rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.rp-auth-card__subtitle {
+  margin: 0.625rem 0 0;
+  color: var(--second-text-color);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.rp-auth-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.375rem;
+  margin-bottom: 1.25rem;
+  padding: 0.25rem;
+  border-radius: calc(var(--border-radius) + 2px);
+  background: var(--bg-second);
+}
+
+.rp-auth-tabs__item {
+  border: 0;
+  border-radius: var(--border-radius);
+  background: transparent;
+  color: var(--second-text-color);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.6875rem 0.75rem;
+  transition:
+    background-color var(--rp-duration-fast) ease,
+    color var(--rp-duration-fast) ease,
+    box-shadow var(--rp-duration-fast) ease;
+}
+
+.rp-auth-tabs__item.is-active {
+  background: var(--bg-box);
+  color: var(--main-text-color);
+  box-shadow: var(--box-shadow);
+}
+
+.rp-auth-tabs__item:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
+  outline-offset: 2px;
+}
+
+.rp-auth-alert {
+  margin-bottom: 1rem;
+  padding: 0.75rem 0.875rem;
+  border-radius: var(--border-radius);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.rp-auth-alert.is-error {
+  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
+  background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-box));
+  color: var(--main-text-color);
+}
+
+.rp-auth-alert.is-success {
+  border: 1px solid color-mix(in srgb, #52c41a 35%, transparent);
+  background: color-mix(in srgb, #52c41a 10%, var(--bg-box));
+  color: var(--main-text-color);
+}
+
+.rp-auth-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.rp-auth-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.rp-auth-field__label {
+  color: var(--main-text-color);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.rp-auth-input-wrap {
+  position: relative;
+}
+
+.rp-auth-input {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--bg-box);
+  color: var(--main-text-color);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  padding: 0.6875rem 0.875rem;
+  outline: none;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    box-shadow var(--rp-duration-fast) ease;
+}
+
+.rp-auth-input-wrap .rp-auth-input {
+  padding-right: 3.25rem;
+}
+
+.rp-auth-input::placeholder {
+  color: var(--disable-text-color);
+}
+
+.rp-auth-input:focus,
+.rp-auth-input:focus-visible {
+  border-color: var(--primary-button-bg);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
+  outline: none;
+}
+
+.rp-auth-input.is-error {
+  border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
+}
+
+.rp-auth-input-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0.625rem;
+  transform: translateY(-50%);
+  border: 0;
+  background: transparent;
+  color: var(--second-text-color);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem;
+}
+
+.rp-auth-input-toggle:hover {
+  color: var(--primary-color);
+}
+
+.rp-auth-field__error {
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.rp-auth-submit {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  margin-top: 0.25rem;
+  border: 0;
+  border-radius: var(--border-radius);
+  background: var(--primary-button-bg);
+  color: var(--primary-button-fg);
+  cursor: pointer;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity var(--rp-duration-fast) ease;
+}
+
+.rp-auth-submit:hover {
+  opacity: 0.92;
+}
+
+.rp-auth-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.rp-auth-submit--link {
+  text-align: center;
+}
+
+.rp-auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.25rem 0 1rem;
+  color: var(--disable-text-color);
+  font-size: 0.75rem;
+}
+
+.rp-auth-divider::before,
+.rp-auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border-color);
+}
+
+.rp-auth-github {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  min-height: 2.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--bg-box);
+  color: var(--main-text-color);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition:
+    border-color var(--rp-duration-fast) ease,
+    color var(--rp-duration-fast) ease;
+}
+
+.rp-auth-github:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.rp-auth-switch {
+  margin: 1.25rem 0 0;
+  color: var(--second-text-color);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.rp-auth-switch a {
+  color: var(--link-color);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.rp-auth-switch a:hover {
+  color: var(--primary-color);
+}
+
+.rp-auth-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid var(--border-color);
+  border-top-color: var(--primary-color);
+  border-radius: 999px;
+  animation: rp-auth-spin 0.75s linear infinite;
+}
+
+.rp-auth-loading-text {
+  margin: 0;
+  color: var(--main-text-color);
+  font-size: 0.9375rem;
+}
+
+.rp-auth-loading-subtext {
+  margin: 0;
+  color: var(--second-text-color);
+  font-size: 0.8125rem;
+}
+
+@keyframes rp-auth-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 640px) {
+  .rp-auth-page {
+    padding: 1.5rem 0 2.5rem;
+  }
+
+  .rp-auth-card {
+    padding: 1.5rem;
+  }
+}