@kamod-ch/preactpress 1.0.0

package/src/client/theme-default/styles.css

@@ -0,0 +1,1450 @@
+:root,
+:root[data-theme='light'] {
+  color-scheme: light;
+  --pp-bg: #ffffff;
+  --pp-text: #213547;
+  --pp-muted: #676f7b;
+  --pp-border: #e5e7eb;
+  --pp-border-strong: #d1d5db;
+  --pp-accent: #0f766e;
+  --pp-accent-strong: #115e59;
+  --pp-sidebar-bg: #f9fafb;
+  --pp-code-bg: #f6f8fa;
+  --pp-code-text: #24292f;
+  --pp-focus: #f59e0b;
+  /* Shared shell width and horizontal gutters (nav + main content) */
+  --pp-shell-max: 1200px;
+  --pp-gutter-x: 24px;
+  --pp-gutter-x-narrow: 16px;
+  /* Sticky header offset: aligns sidebars / outline with the sticky top nav */
+  --pp-sticky-top: 72px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --pp-bg: #1b1b1f;
+    --pp-text: rgba(255, 255, 245, 0.86);
+    --pp-muted: #9ca3af;
+    --pp-border: #2f2f32;
+    --pp-border-strong: #44464d;
+    --pp-accent: #5eead4;
+    --pp-accent-strong: #99f6e4;
+    --pp-sidebar-bg: #161618;
+    --pp-code-bg: #0f1117;
+    --pp-code-text: #e6edf3;
+    --pp-focus: #fbbf24;
+  }
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --pp-bg: #1b1b1f;
+  --pp-text: rgba(255, 255, 245, 0.86);
+  --pp-muted: #9ca3af;
+  --pp-border: #2f2f32;
+  --pp-border-strong: #44464d;
+  --pp-accent: #5eead4;
+  --pp-accent-strong: #99f6e4;
+  --pp-sidebar-bg: #161618;
+  --pp-code-bg: #0f1117;
+  --pp-code-text: #e6edf3;
+  --pp-focus: #fbbf24;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  background: var(--pp-bg);
+  color: var(--pp-text);
+  line-height: 1.6;
+}
+
+body::selection {
+  background: color-mix(in srgb, var(--pp-accent) 28%, transparent);
+}
+
+.pp-skip-link {
+  position: fixed;
+  left: 16px;
+  top: 12px;
+  z-index: 100;
+  transform: translateY(-140%);
+  border-radius: 6px;
+  background: var(--pp-bg);
+  color: var(--pp-text);
+  padding: 8px 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  text-decoration: none;
+}
+
+.pp-skip-link:focus {
+  transform: translateY(0);
+}
+
+.pp-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.pp-layout-no-nav {
+  --pp-sticky-top: 0px;
+}
+
+.pp-nav {
+  border-bottom: 1px solid var(--pp-border);
+  background: color-mix(in srgb, var(--pp-bg) 92%, transparent);
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.pp-nav-inner {
+  max-width: var(--pp-shell-max);
+  margin: 0 auto;
+  padding: 12px var(--pp-gutter-x);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.pp-title {
+  display: inline-flex;
+  align-items: center;
+  color: var(--pp-text);
+  text-decoration: none;
+}
+
+.pp-logo,
+.pp-logo-themeable {
+  display: block;
+  height: 1.75rem;
+  width: auto;
+  max-width: min(12rem, 40vw);
+}
+
+.pp-logo,
+.pp-logo-themeable img {
+  object-fit: contain;
+}
+
+.pp-logo-themeable img {
+  display: block;
+  height: 1.75rem;
+  width: auto;
+  max-width: min(12rem, 40vw);
+}
+
+.pp-logo-dark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .pp-logo-light {
+    display: none;
+  }
+
+  :root:not([data-theme]) .pp-logo-dark {
+    display: block;
+  }
+}
+
+:root[data-theme='dark'] .pp-logo-light {
+  display: none;
+}
+
+:root[data-theme='dark'] .pp-logo-dark {
+  display: block;
+}
+
+.pp-nav-right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.pp-social-links {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pp-social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--pp-muted);
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+.pp-social-link:hover {
+  color: var(--pp-accent);
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+}
+
+.pp-social-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+}
+
+.pp-social-icon :is(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.pp-social-icon-fallback {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.pp-docsearch {
+  display: flex;
+  align-items: center;
+}
+
+.pp-docsearch .DocSearch-Button {
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--pp-sidebar-bg) 80%, var(--pp-bg));
+  color: var(--pp-muted);
+  box-shadow: none;
+  height: 36px;
+  margin: 0;
+  padding: 0 10px;
+}
+
+.pp-docsearch .DocSearch-Button:hover,
+.pp-docsearch .DocSearch-Button:focus,
+.pp-docsearch .DocSearch-Button:active {
+  box-shadow: none;
+  color: var(--pp-accent);
+  border-color: var(--pp-border-strong);
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+}
+
+.pp-nav-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.pp-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--pp-sidebar-bg) 80%, var(--pp-bg));
+  color: var(--pp-muted);
+  cursor: pointer;
+}
+
+.pp-theme-toggle:hover {
+  color: var(--pp-accent);
+  border-color: var(--pp-border-strong);
+}
+
+.pp-theme-toggle-moon,
+.pp-theme-toggle-sun {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) .pp-theme-toggle .pp-theme-toggle-moon {
+    display: inline-flex;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .pp-theme-toggle .pp-theme-toggle-sun {
+    display: inline-flex;
+  }
+}
+
+:root[data-theme='light'] .pp-theme-toggle .pp-theme-toggle-moon {
+  display: inline-flex;
+}
+
+:root[data-theme='dark'] .pp-theme-toggle .pp-theme-toggle-sun {
+  display: inline-flex;
+}
+
+.pp-nav-links a {
+  color: var(--pp-muted);
+  text-decoration: none;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.pp-nav-links a:hover,
+.pp-nav-links a.active {
+  color: var(--pp-accent);
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+}
+
+.pp-nav-dropdown {
+  position: relative;
+}
+
+.pp-nav-dropdown > summary {
+  list-style: none;
+  cursor: pointer;
+  color: var(--pp-muted);
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.pp-nav-dropdown > summary::-webkit-details-marker {
+  display: none;
+}
+
+.pp-nav-dropdown[open] > summary,
+.pp-nav-dropdown > summary:hover,
+.pp-nav-dropdown.active > summary {
+  color: var(--pp-accent);
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+}
+
+.pp-nav-dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  z-index: 20;
+  min-width: 160px;
+  border: 1px solid var(--pp-border);
+  border-radius: 10px;
+  background: var(--pp-bg);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+  padding: 6px;
+  display: grid;
+  gap: 2px;
+}
+
+.pp-nav-dropdown-menu a {
+  display: block;
+  color: var(--pp-muted);
+  text-decoration: none;
+  border-radius: 6px;
+  padding: 6px 8px;
+  white-space: nowrap;
+}
+
+.pp-nav-dropdown-menu a:hover,
+.pp-nav-dropdown-menu a.active {
+  color: var(--pp-accent);
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+}
+
+.pp-body {
+  display: flex;
+  flex: 1;
+  max-width: var(--pp-shell-max);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.pp-sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  position: sticky;
+  top: var(--pp-sticky-top);
+  max-height: calc(100vh - var(--pp-sticky-top));
+  overflow-y: auto;
+  border-right: 1px solid var(--pp-border);
+  padding: 20px 16px;
+  background: var(--pp-sidebar-bg);
+}
+
+.pp-sidebar-panel > summary {
+  display: none;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.pp-search {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.pp-search span {
+  color: var(--pp-muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.pp-search input {
+  width: 100%;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  background: var(--pp-bg);
+  color: var(--pp-text);
+  padding: 8px 10px;
+  font: inherit;
+}
+
+.pp-search-results {
+  display: grid;
+  gap: 4px;
+  margin: -8px 0 16px;
+}
+
+.pp-search-results a {
+  display: grid;
+  gap: 2px;
+  padding: 8px;
+}
+
+.pp-search-results small {
+  color: var(--pp-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.pp-sidebar-heading {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pp-muted);
+  margin: 12px 0 8px;
+}
+
+.pp-sidebar-group-collapsible > summary.pp-sidebar-heading {
+  cursor: pointer;
+  list-style: none;
+  margin: 12px 0 8px;
+}
+
+.pp-sidebar-group-collapsible > summary.pp-sidebar-heading::-webkit-details-marker {
+  display: none;
+}
+
+.pp-sidebar-nested {
+  margin: 4px 0 8px;
+  padding-left: 10px;
+  border-left: 1px solid var(--pp-border);
+}
+
+.pp-sidebar-nested-panel > summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--pp-text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.pp-sidebar-nested-panel > summary::-webkit-details-marker {
+  display: none;
+}
+
+.pp-sidebar-nested-panel > summary:hover {
+  background: color-mix(in srgb, var(--pp-accent) 12%, transparent);
+}
+
+.pp-sidebar ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pp-sidebar li {
+  margin: 4px 0;
+}
+
+.pp-sidebar a {
+  display: block;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--pp-text);
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.pp-sidebar a:hover,
+.pp-sidebar a:focus-visible {
+  background: color-mix(in srgb, var(--pp-accent) 12%, transparent);
+}
+
+.pp-sidebar a.active {
+  color: var(--pp-accent);
+  font-weight: 600;
+  background: color-mix(in srgb, var(--pp-accent) 16%, transparent);
+}
+
+.pp-main {
+  flex: 1;
+  padding: 24px var(--pp-gutter-x) 64px;
+  min-width: 0;
+}
+
+.pp-doc {
+  max-width: 760px;
+}
+
+.pp-body-home .pp-main,
+.pp-body-page .pp-main {
+  width: 100%;
+}
+
+.pp-doc-home,
+.pp-doc-page {
+  margin: 0;
+}
+
+.pp-doc-home {
+  max-width: 960px;
+}
+
+.pp-home-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: clamp(32px, 7vw, 88px);
+  margin: 20px 0 56px;
+}
+
+.pp-home-hero-name {
+  margin: 0 0 8px;
+  color: var(--pp-accent);
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.pp-home-hero-text {
+  margin: 0;
+  max-width: 720px;
+  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.75rem);
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+}
+
+.pp-home-hero-tagline {
+  max-width: 640px;
+  margin: 20px 0 0;
+  color: var(--pp-muted);
+  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
+}
+
+.pp-home-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.pp-home-action {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 12px 18px;
+  text-decoration: none;
+}
+
+.pp-home-action-brand {
+  background: var(--pp-accent);
+  color: var(--pp-bg);
+}
+
+.pp-home-action-brand:hover {
+  background: var(--pp-accent-strong);
+}
+
+.pp-home-action-alt {
+  border-color: var(--pp-border);
+  background: color-mix(in srgb, var(--pp-sidebar-bg) 82%, var(--pp-bg));
+  color: var(--pp-text);
+}
+
+.pp-home-action-alt:hover {
+  border-color: var(--pp-border-strong);
+  color: var(--pp-accent);
+}
+
+.pp-home-hero-image {
+  display: flex;
+  justify-content: center;
+  min-width: min(280px, 30vw);
+}
+
+.pp-home-hero-image img {
+  display: block;
+  max-width: min(320px, 32vw);
+  max-height: 320px;
+  object-fit: contain;
+}
+
+.pp-home-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  gap: 16px;
+  margin: 0 0 48px;
+}
+
+.pp-home-feature {
+  display: block;
+  border: 1px solid var(--pp-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--pp-sidebar-bg) 70%, var(--pp-bg));
+  color: var(--pp-text);
+  padding: 20px;
+  text-decoration: none;
+}
+
+.pp-home-feature:hover {
+  border-color: var(--pp-accent);
+}
+
+.pp-home-feature-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  margin-bottom: 12px;
+}
+
+.pp-home-feature-icon img {
+  display: block;
+  max-width: 40px;
+  max-height: 40px;
+  object-fit: contain;
+}
+
+.pp-home-feature-emoji {
+  font-size: 1.75rem;
+  line-height: 1;
+}
+
+.pp-home-feature h2 {
+  margin: 0 0 8px;
+  font-size: 1.05rem;
+}
+
+.pp-home-feature p {
+  margin: 0;
+  color: var(--pp-muted);
+}
+
+.pp-home-feature span {
+  display: inline-block;
+  margin-top: 14px;
+  color: var(--pp-accent);
+  font-weight: 700;
+}
+
+.pp-doc-title {
+  margin: 0 0 8px;
+  font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem);
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.pp-doc-lead {
+  margin: 0 0 24px;
+  color: var(--pp-muted);
+  font-size: 1.05rem;
+}
+
+.pp-doc-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: -8px 0 24px;
+  padding: 0;
+  list-style: none;
+}
+
+.pp-tag-chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--pp-border);
+  border-radius: 999px;
+  color: var(--pp-muted);
+  font-size: 13px;
+  line-height: 1;
+  padding: 7px 10px;
+  text-decoration: none;
+}
+
+.pp-tag-chip:hover {
+  border-color: var(--pp-accent);
+  color: var(--pp-accent);
+}
+
+.pp-doc-content {
+  font-size: 16px;
+}
+
+.pp-doc-content-plain {
+  min-width: 0;
+}
+
+.pp-doc-content :where(h1, h2, h3) {
+  scroll-margin-top: var(--pp-sticky-top);
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.pp-doc-content h2 {
+  margin-top: 40px;
+  padding-top: 8px;
+  border-top: 1px solid var(--pp-border);
+  font-size: 1.55rem;
+}
+
+.pp-doc-content h3 {
+  margin-top: 28px;
+  font-size: 1.2rem;
+}
+
+.pp-heading {
+  position: relative;
+}
+
+.pp-heading-anchor {
+  color: var(--pp-muted);
+  opacity: 0;
+  padding-left: 8px;
+  text-decoration: none;
+}
+
+.pp-heading:hover .pp-heading-anchor,
+.pp-heading-anchor:focus-visible {
+  opacity: 1;
+}
+
+.pp-doc-content p,
+.pp-doc-content ul,
+.pp-doc-content ol,
+.pp-doc-content blockquote,
+.pp-doc-content table {
+  margin: 16px 0;
+}
+
+.pp-doc-content pre {
+  padding: 16px;
+  border-radius: 8px;
+  overflow: auto;
+  border: 1px solid var(--pp-border);
+  background: var(--pp-code-bg);
+  color: var(--pp-code-text);
+  line-height: 1.55;
+}
+
+.pp-doc-content :not(pre) > code {
+  border: 1px solid var(--pp-border);
+  border-radius: 5px;
+  background: var(--pp-code-bg);
+  color: var(--pp-code-text);
+  padding: 0.12em 0.35em;
+}
+
+.pp-doc-content code {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-size: 0.92em;
+}
+
+.pp-doc-content a {
+  color: var(--pp-accent);
+  text-underline-offset: 0.18em;
+}
+
+.pp-doc-content a:hover {
+  color: var(--pp-accent-strong);
+}
+
+.pp-doc-content blockquote {
+  border-left: 4px solid var(--pp-accent);
+  color: var(--pp-muted);
+  padding: 2px 0 2px 16px;
+}
+
+.pp-doc-content .pp-container {
+  margin: 1.25rem 0;
+  padding: 0.85rem 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--pp-border);
+  background: var(--pp-sidebar-bg);
+}
+
+.pp-doc-content .pp-container-title {
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pp-doc-content .pp-container-body > :first-child {
+  margin-top: 0;
+}
+
+.pp-doc-content .pp-container-body > :last-child {
+  margin-bottom: 0;
+}
+
+.pp-doc-content .pp-container-tip {
+  border-color: color-mix(in srgb, var(--pp-accent) 35%, var(--pp-border));
+}
+
+.pp-doc-content .pp-container-warning,
+.pp-doc-content .pp-container-caution {
+  border-color: color-mix(in srgb, #d97706 40%, var(--pp-border));
+}
+
+.pp-doc-content .pp-container-danger {
+  border-color: color-mix(in srgb, #dc2626 40%, var(--pp-border));
+}
+
+.pp-doc-content details.pp-container-details > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.pp-doc-content .shiki .line.highlighted {
+  background: color-mix(in srgb, var(--pp-accent) 12%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  border-left: 3px solid var(--pp-accent);
+}
+
+.pp-doc-content .shiki .line.focused {
+  background: color-mix(in srgb, var(--pp-accent) 10%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.pp-doc-content .shiki.has-focused-lines .line:not(.focused) {
+  filter: blur(0.6px);
+  opacity: 0.55;
+}
+
+.pp-doc-content .shiki .line.diff.add {
+  background: color-mix(in srgb, #16a34a 14%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.pp-doc-content .shiki .line.diff.remove {
+  background: color-mix(in srgb, #dc2626 14%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  opacity: 0.85;
+}
+
+.pp-doc-content .shiki .line.highlighted.error,
+.pp-doc-content .shiki .line.error {
+  background: color-mix(in srgb, #dc2626 14%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.pp-doc-content .shiki .line.highlighted.warning,
+.pp-doc-content .shiki .line.warning {
+  background: color-mix(in srgb, #d97706 14%, transparent);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.pp-doc-content .pp-inline-toc {
+  margin: 1.25rem 0;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  background: var(--pp-sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.pp-doc-content .pp-inline-toc-link {
+  color: var(--pp-muted);
+  text-decoration: none;
+  font-size: 0.92rem;
+}
+
+.pp-doc-content .pp-inline-toc-link.level-3 {
+  padding-left: 0.85rem;
+}
+
+.pp-doc-content .pp-inline-toc-link:hover {
+  color: var(--pp-accent);
+}
+
+.pp-doc-content .pp-code-group {
+  margin: 1.25rem 0;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.pp-doc-content .pp-code-group-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pp-doc-content .pp-code-group-tab {
+  display: inline-block;
+  cursor: pointer;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.82rem;
+  font-family: ui-monospace, monospace;
+  color: var(--pp-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.pp-doc-content .pp-code-group-input:checked + .pp-code-group-tab {
+  color: var(--pp-accent);
+  border-bottom-color: var(--pp-accent);
+  background: var(--pp-code-bg);
+}
+
+.pp-doc-content .pp-code-group-blocks .pp-code-group-block {
+  display: none;
+}
+
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(1):checked) .pp-code-group-block:nth-child(1),
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(2):checked) .pp-code-group-block:nth-child(2),
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(3):checked) .pp-code-group-block:nth-child(3),
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(4):checked) .pp-code-group-block:nth-child(4),
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(5):checked) .pp-code-group-block:nth-child(5),
+.pp-doc-content .pp-code-group:has(.pp-code-group-input:nth-of-type(6):checked) .pp-code-group-block:nth-child(6) {
+  display: block;
+}
+
+.pp-doc-content .pp-code-group-block .shiki {
+  margin: 0;
+  border-radius: 0;
+}
+
+.pp-doc-content table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+.pp-doc-content th,
+.pp-doc-content td {
+  border: 1px solid var(--pp-border);
+  padding: 8px 10px;
+}
+
+.pp-doc-content th {
+  background: var(--pp-sidebar-bg);
+  text-align: left;
+}
+
+.pp-tag-index-count {
+  color: var(--pp-muted);
+}
+
+.pp-tag-index-list {
+  margin: 20px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pp-tag-index-list li + li {
+  margin-top: 10px;
+}
+
+.pp-tag-index-list a {
+  display: block;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  color: var(--pp-text);
+  padding: 12px 14px;
+  text-decoration: none;
+}
+
+.pp-tag-index-list a:hover {
+  border-color: var(--pp-accent);
+  color: var(--pp-accent);
+}
+
+.pp-pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid var(--pp-border);
+}
+
+.pp-pager-link {
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  color: var(--pp-text);
+  padding: 12px;
+  text-decoration: none;
+}
+
+.pp-pager-link:hover {
+  border-color: var(--pp-accent);
+  color: var(--pp-accent);
+}
+
+.pp-pager-link span {
+  display: block;
+  color: var(--pp-muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.pp-pager-link.next {
+  text-align: right;
+}
+
+.pp-doc-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  margin-top: 24px;
+  color: var(--pp-muted);
+  font-size: 14px;
+}
+
+.pp-doc-meta a {
+  color: var(--pp-accent);
+}
+
+.pp-outline {
+  width: 220px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  position: sticky;
+  top: var(--pp-sticky-top);
+  max-height: calc(100vh - var(--pp-sticky-top));
+  overflow-y: auto;
+  padding: 28px 20px 64px 0;
+}
+
+.pp-outline-left {
+  padding: 28px 0 64px 20px;
+}
+
+.pp-outline-heading {
+  color: var(--pp-muted);
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+.pp-outline a {
+  display: block;
+  border-left: 1px solid var(--pp-border);
+  color: var(--pp-muted);
+  font-size: 13px;
+  line-height: 1.35;
+  padding: 5px 0 5px 12px;
+  text-decoration: none;
+}
+
+.pp-outline a.level-3 {
+  padding-left: 24px;
+}
+
+.pp-outline a:hover {
+  color: var(--pp-accent);
+  border-left-color: var(--pp-accent);
+}
+
+.pp-outline a.active {
+  color: var(--pp-accent);
+  border-left-color: var(--pp-accent);
+  font-weight: 600;
+}
+
+.pp-footer {
+  border-top: 1px solid var(--pp-border);
+  color: var(--pp-muted);
+  font-size: 14px;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 20px;
+  width: 100%;
+}
+
+.pp-nav-desktop {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pp-menu-toggle,
+.pp-mobile-menu {
+  display: none;
+}
+
+.pp-menu-toggle,
+.pp-mobile-close {
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--pp-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--pp-sidebar-bg) 80%, var(--pp-bg));
+  color: var(--pp-text);
+  cursor: pointer;
+}
+
+.pp-menu-toggle {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pp-menu-toggle > span {
+  width: 18px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.pp-mobile-overlay {
+  position: fixed;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.48);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+.pp-mobile-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: min(88vw, 360px);
+  height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 20px;
+  border-left: 1px solid var(--pp-border);
+  background: var(--pp-bg);
+  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.2);
+  transform: translateX(100%);
+  visibility: hidden;
+  transition: transform 200ms ease, visibility 0s linear 200ms;
+}
+
+.pp-mobile-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+}
+
+.pp-mobile-close {
+  display: inline-flex;
+  font-size: 28px;
+  line-height: 1;
+}
+
+.pp-mobile-nav,
+.pp-mobile-nav .pp-nav-dropdown-menu {
+  display: grid;
+  gap: 4px;
+}
+
+.pp-mobile-nav > a,
+.pp-mobile-nav .pp-nav-dropdown > summary,
+.pp-mobile-nav .pp-nav-dropdown-menu a {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 9px 10px;
+  border-radius: 8px;
+  color: var(--pp-text);
+  text-decoration: none;
+}
+
+.pp-mobile-nav > a:hover,
+.pp-mobile-nav > a.active,
+.pp-mobile-nav .pp-nav-dropdown-menu a:hover,
+.pp-mobile-nav .pp-nav-dropdown-menu a.active {
+  color: var(--pp-accent);
+  background: color-mix(in srgb, var(--pp-accent) 12%, transparent);
+}
+
+.pp-mobile-nav .pp-nav-dropdown-menu {
+  position: static;
+  min-width: 0;
+  margin: 4px 0 0 12px;
+  padding: 4px 0 4px 8px;
+  border: 0;
+  border-left: 1px solid var(--pp-border);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.pp-mobile-docs {
+  display: grid;
+  gap: 10px;
+  padding-top: 18px;
+  border-top: 1px solid var(--pp-border);
+}
+
+.pp-mobile-docs > strong {
+  color: var(--pp-muted);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pp-mobile-drawer .pp-social-links {
+  min-height: 44px;
+}
+
+.pp-mobile-drawer .pp-search {
+  margin-bottom: 8px;
+}
+
+.pp-mobile-drawer .pp-sidebar-group-collapsible > summary.pp-sidebar-heading,
+.pp-mobile-drawer .pp-sidebar-nested-panel > summary,
+.pp-mobile-drawer .pp-sidebar a {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.pp-title:focus-visible,
+.pp-theme-toggle:focus-visible,
+.pp-menu-toggle:focus-visible,
+.pp-mobile-close:focus-visible,
+.pp-mobile-nav a:focus-visible,
+.pp-mobile-nav summary:focus-visible,
+.pp-search input:focus-visible,
+.pp-nav-links a:focus-visible,
+.pp-sidebar a:focus-visible,
+.pp-doc-content a:focus-visible,
+.pp-doc-content-plain a:focus-visible,
+.pp-home-action:focus-visible,
+.pp-home-feature:focus-visible,
+.pp-tag-chip:focus-visible,
+.pp-tag-index-list a:focus-visible,
+.pp-pager-link:focus-visible,
+.pp-outline a:focus-visible,
+.pp-sidebar-panel > summary:focus-visible {
+  outline: 2px solid var(--pp-focus);
+  outline-offset: 2px;
+}
+
+@media (max-width: 900px) {
+  .pp-nav {
+    position: sticky;
+  }
+
+  .pp-nav-inner {
+    min-height: 64px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    gap: 12px;
+  }
+
+  .pp-logo,
+  .pp-logo-themeable img {
+    max-width: min(10rem, 44vw);
+  }
+
+  .pp-nav-right {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  .pp-nav-desktop {
+    display: none;
+  }
+
+  .pp-docsearch .DocSearch-Button,
+  .pp-theme-toggle {
+    min-width: 44px;
+    height: 44px;
+  }
+
+  .pp-docsearch .DocSearch-Button-Placeholder,
+  .pp-docsearch .DocSearch-Button-Keys {
+    display: none;
+  }
+
+  .pp-menu-toggle {
+    display: inline-flex;
+  }
+
+  .pp-mobile-menu {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: block;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .pp-mobile-menu.open {
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .pp-mobile-menu.open .pp-mobile-overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .pp-mobile-menu.open .pp-mobile-drawer {
+    transform: translateX(0);
+    visibility: visible;
+    transition-delay: 0s;
+  }
+
+  .pp-body {
+    flex-direction: column;
+  }
+
+  .pp-sidebar {
+    display: none;
+  }
+
+  .pp-main {
+    padding: 24px var(--pp-gutter-x) 56px;
+  }
+
+  .pp-doc {
+    max-width: none;
+  }
+
+  .pp-home-hero {
+    grid-template-columns: 1fr;
+    margin-top: 8px;
+  }
+
+  .pp-home-hero-image {
+    min-width: 0;
+    justify-content: flex-start;
+  }
+
+  .pp-home-hero-image img {
+    max-width: min(260px, 70vw);
+  }
+
+  .pp-outline {
+    display: none;
+  }
+
+  .pp-pager {
+    grid-template-columns: 1fr;
+  }
+
+  .pp-pager-link.next {
+    text-align: left;
+  }
+}
+
+@media (max-width: 520px) {
+  .pp-nav-inner,
+  .pp-main {
+    padding-left: var(--pp-gutter-x-narrow);
+    padding-right: var(--pp-gutter-x-narrow);
+  }
+
+  .pp-doc-title {
+    font-size: 2rem;
+    overflow-wrap: anywhere;
+  }
+
+  .pp-doc-content,
+  .pp-doc-content-plain,
+  .pp-pager-link,
+  .pp-home-feature {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .pp-doc-content pre,
+  .pp-doc-content table,
+  .pp-doc-content .pp-code-group {
+    max-width: calc(100vw - (2 * var(--pp-gutter-x-narrow)));
+  }
+
+  .pp-home-hero-text {
+    font-size: clamp(2rem, 12vw, 3rem);
+    overflow-wrap: anywhere;
+  }
+
+  .pp-home-hero-actions,
+  .pp-home-action {
+    width: 100%;
+  }
+
+  .pp-home-action {
+    justify-content: center;
+    min-height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pp-mobile-overlay,
+  .pp-mobile-drawer {
+    transition-duration: 0.01ms;
+  }
+}