@font-face {
  font-family: 'Pocket Newsreader';
  src: url('../pocket/fonts/newsreader-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pocket Newsreader';
  src: url('../pocket/fonts/newsreader-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pocket Sans';
  src: url('../pocket/fonts/dm-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face { font-family: 'Pocket Adwaita'; src: url('../pocket/fonts/adwaita-ui.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pocket Adwaita'; src: url('../pocket/fonts/adwaita-ui-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pocket Desktop Mono'; src: url('../pocket/fonts/jetbrains-desktop.woff?v=2') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pocket Clock'; src: local('pokemon-font'); font-weight: 400; font-style: normal; font-display: swap; }

/* One scale for the pages, the guide and its interactive examples. */
:root {
  --p-paper: #eff1ee;
  --p-surface: #f9faf7;
  --p-ink: #202c2a;
  --p-muted: #59645e;
  --p-rule: #cbd2cb;
  --p-accent: #285b50;
  --p-wash: #dce5db;
  --p-dark: #142d28;
  --p-terminal: #10231f;
  --p-wall: url('../pocket/walls/valley.webp');
  --p-swatch-1: #548f8c;
  --p-swatch-2: #a7cbc1;
  --p-swatch-3: #66858e;
  --p-serif: 'Pocket Newsreader', Georgia, serif;
  --p-sans: 'Pocket Sans', Arial, sans-serif;
  --p-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --p-radius: 12px;
  --p-shadow: 0 2px 4px #142d2804, 0 16px 40px -24px #142d2838;
  --p-duration-press: 90ms;
  --p-duration-control: 160ms;
  --p-duration-move: 240ms;
  --p-duration-palette: 320ms;
  --p-ease-out: cubic-bezier(.2,.75,.25,1);
  --p-ease-in-out: cubic-bezier(.4,0,.2,1);
}
:root[data-pocket-theme='sicily'] {
  --p-paper: #f3f0e7;
  --p-surface: #fcfaf3;
  --p-ink: #352f24;
  --p-muted: #6d6351;
  --p-rule: #d6cebd;
  --p-accent: #725321;
  --p-wash: #e6dfcd;
  --p-dark: #302b1e;
  --p-terminal: #251f16;
  --p-wall: url('../pocket/walls/sicily.webp');
  --p-swatch-1: #aa8546;
  --p-swatch-2: #ded09b;
  --p-swatch-3: #6c7776;
}
:root[data-pocket-theme='vesuvius'] {
  --p-paper: #f2edec;
  --p-surface: #fcf8f7;
  --p-ink: #352e36;
  --p-muted: #6f6065;
  --p-rule: #d7cacc;
  --p-accent: #804348;
  --p-wash: #e8dadb;
  --p-dark: #34232a;
  --p-terminal: #261a22;
  --p-wall: url('../pocket/walls/vesuvius.webp');
  --p-swatch-1: #a24c46;
  --p-swatch-2: #e5a779;
  --p-swatch-3: #636785;
}
html { scroll-padding-top: 108px; }
.p-site, .p-site * { box-sizing: border-box; }
.p-site {
  margin: 0;
  background: var(--p-paper);
  color: var(--p-ink);
  font: 15px/1.7 var(--p-sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
.p-site ::selection { background: var(--p-accent); color: #fff; }
.p-site :focus-visible { outline: 2px solid var(--p-accent); outline-offset: 4px; }
.p-site a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
.p-site button, .p-site input, .p-site select { font: inherit; }
.p-site button { cursor: pointer; color: inherit; }
.p-site button, .p-site input, .p-site a { -webkit-tap-highlight-color: transparent; }
.p-site button:disabled { cursor: wait; }
.p-site h1, .p-site h2, .p-site h3, .p-site p, .p-site figure { margin: 0; }
.p-site h1, .p-site h2, .p-site h3 { font-family: var(--p-serif); font-weight: 400; }
.p-site em { font-weight: 400; }
.p-site img { display: block; max-width: 100%; height: auto; }
.p-site [hidden] { display: none !important; }
.p-site kbd {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--p-rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--p-surface);
  color: var(--p-ink);
  font: 11px/1.6 var(--p-mono);
  white-space: nowrap;
}
.p-wrap { width: calc(100% - 96px); max-width: 1360px; margin-inline: auto; }
.p-mono, .p-eyebrow { font: 10px/1.8 var(--p-mono); letter-spacing: .08em; }
.p-eyebrow { text-transform: uppercase; color: var(--p-accent); }
.p-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p-symbols { position: absolute; overflow: hidden; }
.p-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; }
.p-skip { position: fixed; top: 12px; left: 12px; z-index: 400; padding: 12px 22px; border-radius: 8px; background: var(--p-ink); color: var(--p-surface) !important; transform: translateY(-160%); }
.p-skip:focus { transform: none; }
.p-enhancement { display: none; }
.p-has-js .p-onboarding { display: block; }
.p-has-js .p-install-choices { display: grid; }
.p-has-js .p-install-phases, .p-has-js [data-print-keys] { display: flex; }
html:not(.p-has-js) .p-copy, html:not(.p-has-js) .p-key-filter, html:not(.p-has-js) .p-search-filters { display: none; }

/* A compact masthead leaves the desktop and the reading column in charge. */
.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--p-paper) 92%, transparent);
  backdrop-filter: blur(18px);
}
.p-header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  width: calc(100% - 96px);
  max-width: 1360px;
  min-height: 88px;
  margin: auto;
  border-bottom: 1px solid var(--p-rule);
}
.p-brand { display: flex; align-items: center; gap: 17px; min-height: 44px; margin-right: auto; }
.p-brand img { width: 132px; height: auto; }
.p-brand-label { padding-left: 17px; border-left: 1px solid var(--p-rule); color: var(--p-muted); font: 11px var(--p-mono); }
.p-nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--p-rule); border-radius: 999px; background: var(--p-surface); }
.p-nav>a { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 17px; border-radius: 999px; font-size: 12px; }
.p-nav>a[aria-current] { background: var(--p-ink); color: var(--p-surface); }
.p-header-source { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12px; color: var(--p-muted) !important; }
.p-header-source .p-icon { width: 17px; height: 17px; }
.p-header-search { display: flex; align-items: center; gap: 12px; width: 232px; min-height: 43px; padding: 8px 12px; border: 1px solid var(--p-rule); border-radius: 8px; background: var(--p-surface); font-size: 11px; color: var(--p-muted) !important; }
.p-header-search .p-icon { width: 17px; height: 17px; }
.p-header-search kbd { margin-left: auto; padding: 0 6px; font-size: 10px; }

.p-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 52px; padding: 12px 14px 12px 21px; border: 1px solid var(--p-accent); border-radius: 10px; background: var(--p-accent); color: var(--p-surface) !important; font-size: 13px; font-weight: 500; box-shadow: 0 3px 8px -5px var(--p-dark); }
.p-button>.p-icon { width: 29px; height: 29px; padding: 6px; border-radius: 50%; background: #ffffff18; }
.p-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; color: var(--p-accent) !important; }
.p-text-link .p-icon { width: 16px; height: 16px; }
.p-dot, .p-demo-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--p-accent); vertical-align: 1px; }

.p-hero { padding-block: 37px 47px; }
.p-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.p-madeby { display: flex; align-items: center; gap: 8px; color: var(--p-muted) !important; font-size: 10px; letter-spacing: .01em; }
.p-madeby .p-icon { width: 13px; height: 13px; }
.p-hero-grid { display: grid; grid-template-columns: 1.8fr 1fr; align-items: end; gap: 58px; margin-top: 36px; }
.p-hero h1 { position: relative; font-size: clamp(72px,8.15vw,124px); line-height: .97; letter-spacing: -.065em; }
.p-hero h1 em { color: var(--p-accent); }
.p-title-star { display: inline-block; margin-left: 19px; transform: translateY(12px); vertical-align: top; font-family: Georgia,serif; font-size: .34em; color: var(--p-accent); }
.p-hero-aside { max-width: 385px; padding-bottom: 4px; }
.p-hero-aside>p { color: var(--p-muted); font-size: 15px; line-height: 1.8; }
.p-platforms { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 19px 25px; }
.p-platforms>span { padding: 3px 9px; border: 1px solid var(--p-rule); border-radius: 5px; font-size: 10px; line-height: 1.7; color: var(--p-muted); }
.p-hero-quicklinks { display: flex; align-items: center; gap: 24px; margin-top: 13px; font-size: 11px; color: var(--p-muted); }
.p-hero-quicklinks>a { display: flex; align-items: center; min-height: 33px; }
.p-section-rail { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 23px; margin-bottom: 23px; border-top: 1px solid var(--p-rule); }
.p-section-rail h2 { display: flex; align-items: center; gap: 15px; font-size: 28px; letter-spacing: -.025em; line-height: 1.3; }
.p-section-number { font: 11px var(--p-mono); color: var(--p-accent); }
.p-section-rail>p, .p-section-rail>span { font-size: 10px; color: var(--p-muted); letter-spacing: .025em; }
.p-details-section .p-section-rail h2 { font: 11px/1.8 var(--p-mono); text-transform: uppercase; letter-spacing: .04em; }
.p-details-section .p-section-rail h2>span { margin-inline: 8px; }

/* The interactive desk is a single object, including its controls. */
.p-showcase { padding: 16px 16px 0; border: 1px solid var(--p-rule); border-radius: 20px; background: var(--p-surface); box-shadow: var(--p-shadow); }
.p-showcase-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 0 7px 16px; color: var(--p-muted); }
.p-showcase-top>span:first-child { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.p-showcase-top .p-icon { width: 17px; height: 17px; color: var(--p-accent); }
.p-showcase-top>.p-mono { font-size: 9px; letter-spacing: .055em; }
.p-demo { --desk-unit: 1cqw; --desk-font: 'Pocket Adwaita', var(--p-sans); --desk-mono: 'Pocket Desktop Mono', var(--p-mono); --desk-bg: #000; --desk-fg: #e6e5de; --desk-muted: #a1a09b; position: relative; isolation: isolate; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #1a33293b; border-radius: 11px; background-image: var(--p-wall); background-size: cover; background-position: var(--p-wall-position,center); color: var(--desk-fg); box-shadow: 0 4px 15px #142d2815; }
.p-demo-bar { position: absolute; z-index: 5; top: 0; left: .573cqw; right: .573cqw; height: 1.667cqw; display: flex; align-items: center; pointer-events: none; font-family: var(--desk-font); }
.p-demo-workspaces { display: flex; align-items: center; gap: 0; min-height: 20px; height: 100%; padding: 0; border: 0; background: none; pointer-events: auto; }
.p-demo-workspaces>button { display: grid; place-items: center; width: clamp(16px,1.041667cqw,20px); height: 100%; min-height: 20px; padding: 0; border: 0; border-radius: 0; background: none; }
.p-demo-workspaces>button>i { width: max(4px,.416667cqw); height: max(4px,.416667cqw); border-radius: 50%; background: var(--p-swatch-1); opacity: .55; box-shadow: 0 0 4px #0005; }
.p-demo-workspaces>button[aria-pressed='true'] { background: none; }.p-demo-workspaces>button[aria-pressed='true']>i { opacity: 0; }
.p-demo-notch { position: absolute; isolation: isolate; z-index: 4; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: clamp(66px,8.645833cqw,166px); height: clamp(16px,1.666667cqw,32px); padding: 0; border: 0; border-radius: 0 0 18px 18px; background: transparent; color: var(--desk-fg); font: var(--p-clock-pixel-size,8px)/1 'Pocket Clock', var(--desk-font) !important; font-variant-numeric: tabular-nums; }
.p-demo-notch>time { display: block; padding-top: 1px; letter-spacing: .03em; }
.p-notch-shape { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #000; pointer-events: none; }
.p-demo[data-style='island'] .p-demo-notch { top: max(2px,.208333cqw); width: clamp(56px,7.291667cqw,140px); height: clamp(15px,1.458333cqw,28px); border-radius: 99px; }
.p-demo-windows { position: absolute; inset: 0; }
.p-os-window { position: absolute; overflow: hidden; padding: .3125cqw; border: 0; border-radius: 0; background: color-mix(in srgb,var(--p-terminal) 95%,transparent); color: #e6e5de; box-shadow: 0 4px 20px #0004; backdrop-filter: blur(12px); font: .625cqw/1.25 var(--desk-mono); }
.p-terminal { left: 49%; top: 27.8%; width: 44.8%; height: 52%; }
.p-terminal-content { padding: 0; }
.p-terminal-fetch { display: flex; align-items: start; gap: 1.583333cqw; }
.p-terminal-pokemon { display: block; flex: 0 0 10.416667cqw; width: 10.416667cqw; height: 8.75cqw; margin-top: 1.5625cqw; }
.p-terminal-pokemon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.p-fastfetch-info { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.p-fastfetch-info>span { display: block; }.p-fastfetch-info b { font-weight: 400; }
.p-terminal-accent { color: var(--p-swatch-1); font-weight: 400; }
.p-ff-red { color: #d17474; }.p-ff-yellow { color: var(--p-swatch-2); }.p-ff-green { color: var(--p-swatch-1); }.p-ff-cyan { color: var(--p-swatch-3); }.p-ff-magenta { color: #b59dbb; }.p-ff-blue { color: #8da9cd; }
.p-terminal-swatches { display: flex !important; margin-top: .8cqw; }.p-terminal-swatches i { width: 1.15cqw; height: .85cqw; background: #5d656a; }.p-terminal-swatches i:nth-child(2) { background: var(--p-swatch-1); }.p-terminal-swatches i:nth-child(3) { background: var(--p-swatch-2); }.p-terminal-swatches i:nth-child(4) { background: var(--p-swatch-3); }.p-terminal-swatches i:nth-child(5) { background: #7c8a90; }.p-terminal-swatches i:nth-child(6) { background: #b4a4ac; }.p-terminal-swatches i:nth-child(7) { background: #9db4b6; }.p-terminal-swatches i:nth-child(8) { background: #e6e5de; }
.p-terminal-prompt { display: flex; align-items: center; gap: .6cqw; margin-top: .7cqw !important; color: var(--p-swatch-1); }.p-terminal-prompt>b { font-weight: 400; color: var(--p-swatch-3); }
.p-terminal-cursor { display: inline-block; width: .37cqw; height: .625cqw; border: 1px solid var(--desk-muted); }
.p-yazi-window { left: 7.8%; top: 51.8%; width: 36.6%; height: 41%; display: flex; flex-direction: column; }
.p-yazi-location { flex-shrink: 0; padding: .15cqw .3cqw .4cqw; color: var(--p-swatch-3); }
.p-yazi-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1.8fr) minmax(0,1fr); }
.p-yazi-parent { display: flex; flex-direction: column; gap: .12cqw; padding-right: .3cqw; border-right: 1px solid #e6e5de55; color: var(--p-swatch-3); }.p-yazi-parent>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.p-yazi-parent>.is-current { background: var(--p-swatch-1); color: var(--p-terminal); }
.p-yazi-files { min-width: 0; padding-inline: .4cqw; overflow-y: auto; scrollbar-width: none; }.p-yazi-files>button { display: block; width: 100%; overflow: hidden; padding: .05cqw .2cqw; border: 0; border-radius: 0; background: transparent; color: var(--p-swatch-1) !important; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.p-yazi-files>button>span { color: #a898b7; }.p-yazi-files>button[aria-pressed='true'] { background: var(--p-swatch-1); color: var(--p-terminal) !important; }
.p-yazi-preview { min-width: 0; overflow: hidden; padding-left: .4cqw; border-left: 1px solid #e6e5de55; }.p-yazi-preview>img { width: 100%; height: auto; }.p-yazi-preview>span { display: block; padding-top: .4cqw; overflow-wrap: anywhere; color: var(--desk-muted); }
.p-yazi-status { display: flex; align-items: center; gap: .5cqw; flex-shrink: 0; margin-top: .4cqw; color: var(--desk-fg); }.p-yazi-status>span:first-child { padding: 0 .3cqw; background: var(--p-swatch-1); color: var(--p-terminal); }.p-yazi-status>b { font-weight: 400; }.p-yazi-status>span:last-child { margin-left: auto; }
.p-config-window { left: 20%; top: 20%; width: 60%; height: 65%; opacity: 0; pointer-events: none; }.p-config-window>header { display: flex; justify-content: space-between; gap: 1cqw; padding: .5cqw; border-bottom: 1px solid #ffffff18; color: var(--p-swatch-3); }.p-config-window>pre { margin: 0; padding: 1cqw; font: inherit; line-height: 1.7; color: #e6e5de; }.p-code-comment { color: #84928a; }.p-code-key { color: var(--p-swatch-3); }
.p-demo-panel { position: absolute; z-index: 6; top: 0; left: 50%; transform: translateX(-50%); width: 56.25%; overflow: visible; border: 0; border-top: 0; border-radius: 0 0 1.5625cqw 1.5625cqw; background: var(--desk-bg); box-shadow: 0 18px 70px #0005; }
.p-demo-panel::before, .p-demo-panel::after { content: ''; position: absolute; top: 0; left: -.677083333cqw; width: .677083333cqw; height: .677083333cqw; background: var(--desk-bg); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M0 0C7.18 0 13 5.82 13 13V0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; pointer-events: none; }
.p-demo-panel::after { left: auto; right: -.677083333cqw; transform: scaleX(-1); }
.p-demo[data-style='island'] .p-demo-panel::before, .p-demo[data-style='island'] .p-demo-panel::after { opacity: 0; }
.p-panel-clip { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.p-demo[data-pane='team'] .p-demo-panel { width: 39.583333%; }.p-demo[data-pane='launcher'] .p-demo-panel { width: 34.375%; }
.p-demo[data-style='island'] .p-demo-panel { top: max(2px,.208333cqw); border: 0; border-radius: 1.5625cqw; }
.p-panel-stage { position: relative; left: 50%; transform: translateX(-50%); width: 100%; max-height: inherit; overflow: auto; border-radius: inherit; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff35 transparent; }
.p-demo:not([data-pane='desktop']) .p-demo-windows { opacity: .9; filter: brightness(.65); pointer-events: none; }.p-demo:not([data-pane='desktop']) .p-demo-notch { opacity: 0; pointer-events: none; }
.p-demo-close { position: absolute; z-index: 9; top: 1cqw; right: 1cqw; display: grid; place-items: center; width: clamp(26px,2.5cqw,34px); height: clamp(26px,2.5cqw,34px); padding: 0; border: 1px solid #ffffff30; border-radius: 50%; background: var(--desk-bg); color: var(--desk-fg) !important; }.p-demo-close .p-icon { width: 45%; height: 45%; }
.p-demo-pet { position: absolute; z-index: 2; bottom: 0; left: 58.4%; width: 4.06%; }.p-demo-pet img { width: 100%; image-rendering: pixelated; }.p-demo-pet>span { position: absolute; top: 15%; left: 80%; white-space: nowrap; font: italic 1.2cqw var(--p-serif); color: #fff; text-shadow: 0 1px 5px #10231f; transform: rotate(-8deg); }
.p-style-toggle { position: absolute; right: 1.5%; bottom: 2%; min-height: 32px; padding: .5cqw .9cqw; border: 1px solid #ffffff60; border-radius: 6px; background: #132923c9; color: #fff !important; font-size: .8cqw !important; backdrop-filter: blur(8px); }.p-style-toggle>span { margin-left: 1cqw; }
.p-demo-noscript { position: absolute; bottom: 5px; left: 5px; padding: 8px; background: #142d28; font-size: 11px; }
.p-preview-actions { display: flex; align-items: center; gap: 7px; }
.p-preview-actions>.p-style-toggle, .p-preview-actions>.p-demo-close { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; min-height: 32px; padding: 6px 10px; border: 1px solid var(--p-rule); border-radius: 6px; background: var(--p-surface); color: var(--p-muted) !important; font: 10px/1.5 var(--p-sans) !important; backdrop-filter: none; }
.p-preview-actions>.p-demo-close .p-icon { width: 12px; height: 12px; }.p-expand-short { display: none; }
.p-live-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 99px; background: var(--p-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--p-accent) 9%,transparent); }
.p-preview-expand { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--p-rule); border-radius: 6px; background: var(--p-surface); color: var(--p-muted); font-size: 10px; }.p-preview-expand .p-icon { width: 13px; height: 13px; }
.p-demo-hint { display: flex; align-items: center; gap: 9px; color: var(--p-muted); font-size: 10px; }.p-demo-hint>span:last-child { color: var(--p-accent); }
.p-demo-feedback { position: absolute; z-index: 8; left: 2%; bottom: 2%; max-width: 58%; padding: 8px 12px; margin: 0; border: 1px solid #ffffff25; border-radius: 8px; background: var(--desk-bg); color: var(--desk-fg); font-size: clamp(9px,.85cqw,12px); box-shadow: 0 4px 15px #0002; }
.p-demo::after { content: ''; position: absolute; z-index: 10; inset: 0; border-radius: inherit; background: rgb(3 10 7 / var(--preview-dim,0)); box-shadow: inset 0 0 0 999px var(--preview-warm,transparent); pointer-events: none; }.p-demo[data-quiet='true'] .p-control-notification { opacity: .35; }
.p-site .p-preview-expand { font-size: 10px; }
.p-demo[data-workspace='2'] .p-terminal { left: 20%; top: 15%; width: 60%; height: 75%; }.p-demo[data-workspace='2'] .p-yazi-window, .p-demo[data-workspace='3'] .p-terminal, .p-demo[data-workspace='4'] .p-terminal, .p-demo[data-workspace='4'] .p-yazi-window { opacity: 0; pointer-events: none; }.p-demo[data-workspace='3'] .p-yazi-window { left: 15%; top: 15%; width: 70%; height: 75%; }.p-demo[data-workspace='4'] .p-config-window { opacity: 1; pointer-events: auto; }
.p-preview-focus { width: min(1560px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--p-rule); border-radius: 20px; background: var(--p-paper); color: var(--p-ink); box-shadow: 0 30px 100px #0005; }.p-preview-focus::backdrop { background: #0a1613b8; backdrop-filter: blur(15px); }.p-preview-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--p-rule); font: 23px var(--p-serif); }.p-preview-focus-close { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 35px; padding: 0; border: 1px solid var(--p-rule); border-radius: 99px; background: var(--p-surface); }.p-preview-focus-close .p-icon { width: 16px; height: 16px; }.p-preview-focus-body { padding: 16px; }.p-preview-focus .p-showcase { padding: 0; border: 0; background: transparent; box-shadow: none; }.p-preview-focus .p-preview-expand { display: none; }.p-preview-focus .p-demo { max-height: calc(100dvh - 290px); }.p-preview-open { overflow: hidden; }
.p-demo-tools { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 6px; }
.p-wall-picker { display: flex; align-items: center; gap: 17px; }.p-wall-picker>span { font-size: 10px; color: var(--p-muted); letter-spacing: .01em; }.p-wall-picker>div { display: flex; gap: 7px; }
.p-wall-picker button { display: grid; place-items: center; min-width: 58px; min-height: 46px; padding: 3px; border: 1px solid transparent; border-radius: 7px; background: transparent; }.p-wall-picker img { width: 49px; height: 32px; border-radius: 4px; object-fit: cover; }.p-wall-picker button[aria-pressed='true'] { border-color: var(--p-accent); background: var(--p-wash); }
.p-demo-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--p-rule); border-radius: 9px; background: var(--p-paper); }.p-demo-tabs>button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 13px; border: 0; border-radius: 6px; background: transparent; color: var(--p-muted); font-size: 11px; }.p-demo-tabs .p-icon { width: 15px; height: 15px; }.p-demo-tabs>button[aria-pressed='true'] { background: var(--p-surface); color: var(--p-ink); box-shadow: 0 1px 4px #142d2812; }
.p-demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 6px 19px; border-top: 1px solid var(--p-rule); font-size: 12px; color: var(--p-muted); }.p-demo-caption>a { display: flex; align-items: center; gap: 14px; white-space: nowrap; color: var(--p-accent); }.p-demo-caption .p-icon { width: 16px; height: 16px; }

.p-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px; margin-block: 75px 108px; }
.p-principles>article { position: relative; padding: 25px 0 0; border-top: 1px solid var(--p-rule); }
.p-principle-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border: 1px solid var(--p-rule); border-radius: 10px; background: var(--p-surface); color: var(--p-accent); }.p-principle-icon .p-icon { width: 20px; height: 20px; }
.p-principles .p-mono { font-size: 10px; color: var(--p-accent); }
.p-principles h2 { margin-block: 13px 13px; font-size: 33px; line-height: 1.17; letter-spacing: -.035em; }.p-principles p { max-width: 360px; color: var(--p-muted); font-size: 14px; line-height: 1.85; }.p-principles a { display: inline-flex; align-items: center; gap: 15px; min-height: 40px; margin-top: 19px; color: var(--p-accent); font-size: 12px; }.p-principles .p-icon { width: 17px; height: 17px; }
.p-colour-story { margin-bottom: 106px; }
.p-colour-story-heading { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 65px; margin-bottom: 35px; }.p-colour-story-heading h2 { margin-top: 22px; font-size: 68px; line-height: 1.04; letter-spacing: -.05em; }.p-colour-story-heading h2 em { color: var(--p-accent); }.p-colour-story-heading>div:last-child>p { max-width: 360px; color: var(--p-muted); font-size: 14px; line-height: 1.85; }.p-colour-story-heading .p-text-link { margin-top: 14px; }

/* The colour workbench keeps real text readable at both article and page widths. */
.p-palette-lab { overflow: hidden; border: 1px solid var(--p-rule); border-radius: 15px; background: var(--p-surface); box-shadow: var(--p-shadow); }
.p-palette-workbench { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.p-palette-art { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; padding: 30px; background-image: linear-gradient(180deg,#10231f32,#07150fb8 35%,#07150feb),var(--p-wall); background-size: cover; background-position: center; color: #fff; }
.p-palette-art>.p-mono { position: absolute; top: 27px; left: 29px; width: max-content; padding: 5px 9px; border: 1px solid #ffffff30; border-radius: 5px; background: #10231fc9; font-size: 9px; color: #fff; }
.p-palette-art>p { margin: 20px 0 22px !important; font: 42px/1.1 var(--p-serif); letter-spacing: -.035em; }
.p-lab-picker { display: flex; gap: 10px; }.p-lab-picker>button { display: grid; place-items: center; min-width: 61px; min-height: 46px; padding: 4px; border: 1px solid #ffffff35; border-radius: 7px; background: #08171170; }.p-lab-picker>button[aria-pressed='true'] { border-color: #fff; background: #ffffff35; }.p-lab-picker img { width: 49px; height: 32px; border-radius: 3px; object-fit: cover; }
.p-palette-preview { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 30px; background: color-mix(in srgb,var(--p-wash) 60%,var(--p-surface)); }
.p-palette-preview>.p-mono { color: var(--p-accent); font-size: 10px; }
.p-colour-apps { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 15px; margin-block: 27px; }
.p-lab-terminal { min-width: 0; padding: 23px 21px; border: 1px solid #ffffff20; border-radius: 10px; background: var(--p-terminal); color: #e1ebe0; box-shadow: 0 6px 16px #142d2812; }
.p-lab-terminal>span { color: #b6c9bb; font: 10px var(--p-mono); }.p-lab-terminal>p { margin: 28px 0 26px !important; font: 12px/2 var(--p-mono); }.p-lab-terminal>p b { color: var(--p-swatch-2); font-weight: 400; }
.p-lab-swatches { display: flex; }.p-lab-swatches i { width: 28px; height: 11px; background: var(--p-swatch-1); }.p-lab-swatches i:nth-child(2) { background: var(--p-swatch-2); }.p-lab-swatches i:nth-child(3) { background: var(--p-swatch-3); }.p-lab-swatches i:nth-child(4) { background: var(--p-paper); }
.p-lab-shell { display: flex; flex-direction: column; min-width: 0; padding: 0 22px 24px; border: 1px solid var(--p-rule); border-radius: 10px; background: var(--p-surface); box-shadow: 0 6px 16px #142d2808; }
.p-lab-shell>div:first-child { display: flex; align-items: center; align-self: center; gap: 3px; padding: 7px 13px; border-radius: 0 0 12px 12px; background: #07100c; color: #e8f2e9; font: 10px var(--p-mono); }.p-lab-shell>div:first-child>span { margin-right: 9px; }.p-lab-shell>div:first-child>i { display: block; width: 2px; height: 8px; border-radius: 2px; background: var(--p-swatch-2); }.p-lab-shell>div:first-child>i:nth-child(3) { height: 12px; }
.p-lab-shell>p { margin: 31px 0 28px !important; font: 34px/1.1 var(--p-serif); letter-spacing: -.04em; }.p-lab-shell>p em { color: var(--p-accent); }.p-lab-slider { height: 5px; margin-top: auto; border-radius: 4px; background: var(--p-wash); }.p-lab-slider>span { display: block; width: 68%; height: 5px; border-radius: 4px; background: var(--p-accent); }
.p-palette-tokens { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.p-token { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 61px; padding: 11px; border: 1px solid var(--p-rule); border-radius: 8px; background: var(--p-surface); text-align: left; }.p-token>i { flex-shrink: 0; width: 22px; height: 32px; border: 1px solid #8884; border-radius: 4px; }.p-token>span { display: flex; flex-direction: column; gap: 4px; }.p-token small { color: var(--p-muted); font-size: 10px; }.p-token b { font: 10px var(--p-mono); letter-spacing: -.02em; }.p-token>.p-icon { width: 13px; height: 13px; margin-left: auto; color: var(--p-muted); }
.p-colour-flow { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--p-rule); }.p-colour-flow>button { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 15px; border: 0; border-radius: 8px; background: transparent; color: var(--p-muted); text-align: left; font-size: 12px; }.p-colour-flow>button>span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid var(--p-rule); border-radius: 50%; font: 9px var(--p-mono); color: var(--p-accent); }.p-colour-flow>button[aria-pressed='true'] { background: var(--p-wash); color: var(--p-ink); }.p-colour-flow>button[aria-pressed='true']>span { color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }.p-colour-flow>span { color: var(--p-muted); font-size: 13px; }
.p-colour-explanation { min-height: 65px; padding: 17px 26px 21px !important; margin: 0 !important; border-top: 1px solid var(--p-rule); color: var(--p-muted); font-size: 12px; line-height: 1.85; }

/* Finding a chapter and reading it share the same navigation spine. */
.p-doc-grid { display: grid; grid-template-columns: 224px minmax(0,1fr) 170px; align-items: start; gap: 46px; padding-block: 38px 85px; }
.p-sidebar { position: sticky; top: 112px; max-height: calc(100dvh - 136px); overflow: auto; overscroll-behavior: contain; padding: 2px 14px 16px 0; scrollbar-width: thin; scrollbar-color: var(--p-rule) transparent; }
.p-sidebar-search { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; margin-bottom: 20px; border: 1px solid var(--p-rule); border-radius: 8px; background: var(--p-surface); color: var(--p-muted) !important; font-size: 12px; }.p-sidebar-search .p-icon { width: 16px; height: 16px; }.p-sidebar-search kbd { margin-left: auto; padding: 0 5px; font-size: 10px; }
.p-sidebar-overview { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 11px; margin-bottom: 19px; border-radius: 7px; font-size: 12px; }.p-sidebar-overview .p-icon { width: 16px; height: 16px; }.p-sidebar-overview[aria-current] { background: var(--p-wash); color: var(--p-accent); font-weight: 500; }
.p-sidebar-group { margin-bottom: 17px; }.p-sidebar-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 3px 10px; margin-bottom: 6px; color: var(--p-muted); cursor: pointer; list-style: none; }.p-sidebar-group summary::-webkit-details-marker { display: none; }.p-sidebar-group summary .p-mono { font-size: 10px; text-transform: uppercase; letter-spacing: .045em; }.p-sidebar-group summary .p-icon { width: 11px; height: 11px; }.p-sidebar-group[open] summary .p-icon { transform: rotate(90deg); }
.p-sidebar-group>a { position: relative; display: block; min-height: 35px; padding: 7px 22px 7px 11px; margin-block: 2px; border-radius: 6px; font-size: 12px; line-height: 1.6; }.p-sidebar-group>a[aria-current='page'] { background: var(--p-wash); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); font-weight: 600; }.p-sidebar-group>a[aria-current='page']::after { content: ''; position: absolute; top: 50%; right: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--p-accent); transform: translateY(-50%); }
.p-sidebar-edition { display: flex; flex-direction: column; gap: 5px; padding-top: 18px; margin: 25px 10px 5px; border-top: 1px solid var(--p-rule); color: var(--p-muted); font-size: 11px; }.p-sidebar-edition .p-mono { font-size: 10px; color: var(--p-accent); }.p-sidebar-edition a { display: flex; align-items: center; gap: 7px; min-height: 30px; font-size: 10px; }.p-sidebar-edition .p-icon { width: 12px; height: 12px; }.p-sidebar-home { display: inline-flex; align-items: center; min-height: 38px; margin-left: 10px; color: var(--p-muted) !important; font-size: 11px; }
.p-doc-mobile { display: none; }.p-guide-drawer { width: min(420px,calc(100vw - 28px)); height: calc(100dvh - 28px); max-height: none; max-width: none; inset: 0 auto 0 0; margin: 14px; padding: 0; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 16px; background: var(--p-surface); color: var(--p-ink); box-shadow: 0 20px 80px #0003; }.p-guide-drawer::backdrop { background: #10231f70; backdrop-filter: blur(5px); }.p-guide-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 75px; padding: 15px 21px; border-bottom: 1px solid var(--p-rule); }.p-guide-drawer-head>span { font: 30px var(--p-serif); letter-spacing: -.035em; }.p-guide-drawer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--p-rule); border-radius: 50%; background: var(--p-paper); }.p-guide-drawer-close .p-icon { width: 17px; height: 17px; }.p-guide-drawer-body { height: calc(100% - 76px); padding: 21px; overflow: auto; overscroll-behavior: contain; }.p-guide-drawer .p-sidebar { position: static; display: block; width: 100%; max-height: none; padding: 0; margin: 0; border: 0; overflow: visible; }.p-guide-drawer .p-sidebar-group>a { min-height: 42px; padding-block: 10px; font-size: 14px; }.p-guide-drawer .p-sidebar-search { font-size: 13px; }.p-guide-drawer .p-sidebar-overview { min-height: 43px; font-size: 13px; }.p-guide-drawer .p-sidebar-group { margin-bottom: 22px; }.p-guide-drawer .p-sidebar-group summary { min-height: 35px; }.p-guide-drawer .p-sidebar-edition { margin-top: 22px; }.p-drawer-open { overflow: hidden; }
.p-doc-main { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; padding-top: 2px; }
.p-doc-heading { padding-bottom: 0; margin-bottom: 34px; }.p-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .03em; }.p-breadcrumb>span { color: var(--p-muted); }.p-doc-meta { display: flex; align-items: center; gap: 13px; margin-top: 28px; color: var(--p-muted); font-size: 11px; }.p-doc-meta>span+span::before { content: '·'; margin-right: 13px; }
.p-doc-heading h1 { margin: 13px 0 20px; font-size: clamp(44px,4.3vw,64px); line-height: 1.06; letter-spacing: -.045em; }.p-doc-description { max-width: 700px; color: var(--p-muted); font-size: 16px; line-height: 1.8; }
.p-doc-shortcut { display: flex; align-items: center; gap: 5px; margin-top: 22px; }.p-doc-shortcut>span { margin-right: 6px; color: var(--p-muted); font-size: 11px; }.p-doc-shortcut kbd { padding: 3px 8px; font-size: 11px; }
.p-doc-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 26px; margin-top: 24px; border-bottom: 1px solid var(--p-rule); }.p-doc-actions .p-copy, .p-doc-actions>a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-surface); color: var(--p-muted); font-size: 11px !important; }.p-doc-actions .p-icon { width: 14px; height: 14px; }
.p-mobile-outline { display: none; margin-block: 0 30px; border: 1px solid var(--p-rule); border-radius: 9px; background: var(--p-surface); }.p-mobile-outline>summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 15px; font-size: 12px; list-style: none; cursor: pointer; }.p-mobile-outline>summary::-webkit-details-marker { display: none; }.p-mobile-outline>summary>.p-icon { width: 16px; height: 16px; color: var(--p-accent); }.p-mobile-outline>summary>.p-icon:last-child { width: 12px; height: 12px; margin-left: auto; transform: rotate(90deg); }.p-mobile-outline[open]>summary>.p-icon:last-child { transform: rotate(-90deg); }.p-mobile-outline>nav { display: flex; flex-direction: column; padding: 9px 15px 13px; border-top: 1px solid var(--p-rule); }.p-mobile-outline a { display: flex; align-items: center; min-height: 38px; font-size: 12px; color: var(--p-muted); }
.p-prose { font-size: 15px; line-height: 1.9; }.p-prose p { margin-block: 19px; }.p-prose>p:first-child, .p-prose>h2:first-child { margin-top: 0; }.p-prose h2 { position: relative; margin: 45px 0 20px; scroll-margin-top: 18px; font-size: 36px; line-height: 1.18; letter-spacing: -.035em; }.p-prose h3 { margin: 30px 0 12px; scroll-margin-top: 18px; font: 600 15px/1.5 var(--p-sans); letter-spacing: -.01em; }.p-prose strong { font-weight: 600; }.p-prose a:not([class]) { color: var(--p-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--p-accent) 40%,transparent); }.p-prose ul, .p-prose ol { margin-block: 18px; padding-left: 23px; }.p-prose li { padding-left: 4px; margin-block: 8px; }.p-prose li::marker { color: var(--p-accent); }
.p-prose h2 .p-heading-anchor { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; margin-left: 8px; color: var(--p-accent); font: 14px var(--p-mono); text-decoration: none; opacity: 0; vertical-align: middle; }.p-prose h2:focus-within .p-heading-anchor { opacity: 1; }
.p-prose code { padding: 3px 5px; border-radius: 4px; background: var(--p-wash); font: .84em var(--p-mono); overflow-wrap: anywhere; }.p-prose pre { padding: 24px; margin: 25px 0; overflow: auto; border: 1px solid #ffffff15; border-radius: 9px; background: var(--p-dark); color: #e7f0e7; font: 12px/1.95 var(--p-mono); }.p-prose pre code { padding: 0; background: transparent; font: inherit; overflow-wrap: normal; }.p-prose .highlight { margin: 0; }.p-code-wrap { position: relative; margin: 25px 0; }.p-code-wrap pre, .p-prose .highlight .p-code-wrap pre { padding-top: 49px; margin: 0; }.p-code-wrap::before { content: attr(data-language); position: absolute; top: 13px; left: 23px; z-index: 1; color: #b6ccb9; font: 9px var(--p-mono); letter-spacing: .06em; text-transform: uppercase; }.p-code-wrap>.p-copy { position: absolute; top: 6px; right: 9px; border-radius: 5px; background: var(--p-dark); color: #d0e0d2; }
.p-copy { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 8px; border: 0; background: transparent; color: inherit; font-size: 11px !important; }.p-copy>.p-icon { width: 14px; height: 14px; }.p-prose .c, .p-prose .c1 { color: #a5b7a9; }.p-prose .s, .p-prose .s1, .p-prose .s2 { color: #c9dfa3; }.p-prose .nb, .p-prose .k { color: #c0dbd3; }
.p-code-wrap>.p-copy:focus-visible, .p-install-code .p-copy:focus-visible, .p-lightbox :focus-visible, .p-help-strip>a:focus-visible, .p-install-inner a:focus-visible { outline-color: #d8e5d6; }
.p-prose figure { margin: 32px 0; }.p-prose figure img { width: 100%; height: auto; border-radius: 8px; }.p-prose figcaption { margin-top: 12px; color: var(--p-muted); font: 11px/1.8 var(--p-sans); }.p-note { padding: 22px 24px; margin: 27px 0; border: 1px solid var(--p-rule); border-radius: 9px; background: color-mix(in srgb,var(--p-wash) 55%,var(--p-surface)); }.p-note strong { display: block; margin-bottom: 7px; font-size: 13px; }.p-note>p:first-child { margin-top: 0; }.p-note>p:last-child { margin-bottom: 0; }
.p-prose table { width: 100%; border-collapse: collapse; margin: 25px 0; text-align: left; font-size: 13px; line-height: 1.8; }.p-prose th { padding: 11px 12px; border-bottom: 1px solid var(--p-ink); color: var(--p-muted); font-size: 10px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; }.p-prose td { padding: 14px 12px; border-bottom: 1px solid var(--p-rule); vertical-align: top; }.p-prose th:first-child, .p-prose td:first-child { padding-left: 0; }.p-prose th:last-child, .p-prose td:last-child { padding-right: 0; }.p-prose td code { font-size: 11px; }.p-table-wrap { max-width: 100%; margin: 25px 0; overflow: auto; scrollbar-width: thin; }.p-table-wrap>table { min-width: 400px; margin: 0; }.p-prose details:not([class]) { padding-block: 18px; border-top: 1px solid var(--p-rule); }.p-prose details:not([class])>summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.p-doc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; margin-top: 52px; border-top: 1px solid var(--p-rule); color: var(--p-muted); }.p-doc-bottom .p-mono { font-size: 10px; letter-spacing: .01em; }.p-doc-bottom>a { display: flex; align-items: center; gap: 7px; min-height: 32px; white-space: nowrap; font-size: 11px; }.p-doc-bottom .p-icon { width: 13px; height: 13px; }
.p-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }.p-pagination>a { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 22px; border: 1px solid var(--p-rule); border-radius: 10px; background: var(--p-surface); box-shadow: 0 2px 4px #142d2803; }.p-pagination>a:last-child { text-align: right; }.p-pagination .p-mono { color: var(--p-muted); font-size: 10px; letter-spacing: .02em; text-transform: uppercase; }.p-pagination strong { color: var(--p-accent); font-size: 13px; font-weight: 500; }
.p-toc { position: sticky; top: 126px; min-width: 0; }.p-reading { padding-bottom: 22px; margin-bottom: 21px; border-bottom: 1px solid var(--p-rule); }.p-reading>.p-mono { color: var(--p-muted); font-size: 10px; letter-spacing: .03em; }.p-reading-progress { display: block; width: 100%; height: 4px; padding: 0; margin-top: 12px; overflow: hidden; border: 0; border-radius: 4px; background: var(--p-rule); accent-color: var(--p-accent); }.p-reading-progress::-webkit-progress-bar { background: var(--p-rule); }.p-reading-progress::-webkit-progress-value { background: var(--p-accent); }.p-reading-progress::-moz-progress-bar { background: var(--p-accent); }
.p-toc>.p-mono { margin-bottom: 12px; color: var(--p-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .035em; }.p-toc nav { display: flex; flex-direction: column; gap: 10px; }.p-toc nav>a { padding-block: 3px; color: var(--p-muted); font-size: 11px; line-height: 1.6; }.p-toc nav>a[aria-current] { color: var(--p-accent); font-weight: 600; }.p-toc-top { display: block; padding-top: 17px; margin-top: 22px; border-top: 1px solid var(--p-rule); color: var(--p-muted) !important; font-size: 10px; }

/* The documentation home has a clearer hierarchy than a wall of small links. */
.p-hub-grid { grid-template-columns: 224px minmax(0,1fr); gap: 64px; padding-top: 43px; }.p-hub-main { grid-column: 2/-1; min-width: 0; }.p-hub-hero { display: flex; align-items: center; gap: 32px; padding-top: 10px; }.p-hub-hero>div:first-child { flex: 1; min-width: 0; }.p-hub-hero .p-eyebrow { font-size: 10px; }.p-hub-hero h1 { margin: 23px 0 21px; font-size: clamp(48px,4.75vw,74px); line-height: 1.04; letter-spacing: -.05em; }.p-hub-hero h1 em { color: var(--p-accent); }.p-hub-hero p:not(.p-eyebrow) { color: var(--p-muted); font-size: 14px; line-height: 1.85; }
.p-hub-art { position: relative; flex-shrink: 0; align-self: center; width: 155px; aspect-ratio: .85; margin: 11px 15px 0 0; border: 9px solid var(--p-surface); border-radius: 4px; background-image: var(--p-wall); background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--p-rule),0 15px 25px -16px #142d2870; transform: rotate(6deg); }.p-hub-art-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 0 0 9px 9px; background: #070d09; color: #e8f1e9; font: 8px var(--p-mono); }.p-hub-art>img { position: absolute; bottom: 22px; left: 28%; width: 65%; image-rendering: pixelated; filter: drop-shadow(0 3px 3px #0005); }.p-hub-art>span { position: absolute; bottom: -25px; left: 0; right: 0; white-space: nowrap; text-align: center; font: italic 14px var(--p-serif); color: var(--p-accent); }
.p-hub-search { display: flex; align-items: center; gap: 16px; min-height: 66px; padding: 9px 10px 9px 21px; margin-top: 38px; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); box-shadow: 0 4px 15px #142d2805; }.p-hub-search:focus-within { outline: 2px solid var(--p-accent); outline-offset: 3px; }.p-hub-search>.p-icon { width: 21px; height: 21px; color: var(--p-accent); }.p-hub-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: none !important; background: transparent; color: var(--p-ink); font-size: 15px; }.p-hub-search input::placeholder { color: var(--p-muted); }.p-hub-search>button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--p-accent); color: var(--p-surface); }.p-hub-search>button .p-icon { width: 20px; height: 20px; }
.p-hub-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--p-muted); }.p-hub-suggestions>.p-mono { margin-right: 3px; color: var(--p-accent); font-size: 9px; }.p-hub-suggestions>a { display: inline-flex; align-items: center; min-height: 33px; padding: 5px 10px; border: 1px solid var(--p-rule); border-radius: 6px; background: color-mix(in srgb,var(--p-surface) 50%,transparent); font-size: 11px; }
.p-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 17px 20px; margin-top: 26px; border: 1px solid var(--p-rule); border-radius: 9px; background: var(--p-wash); }.p-resume>.p-mono { font-size: 9px; color: color-mix(in srgb,var(--p-muted) 90%,var(--p-ink)); }.p-resume strong { color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); font-size: 13px; font-weight: 500; }.p-resume>span:last-child { display: flex; align-items: center; gap: 12px; margin-left: auto; color: color-mix(in srgb,var(--p-muted) 90%,var(--p-ink)); font-size: 11px; }.p-resume .p-icon { width: 16px; height: 16px; }
.p-paths { margin-top: 46px; }.p-hub-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.p-hub-section-head h2 { font-size: 33px; line-height: 1.2; letter-spacing: -.035em; }.p-hub-section-head .p-mono { color: var(--p-muted); font-size: 9px; letter-spacing: .03em; }
.p-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }.p-path { display: block; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); box-shadow: var(--p-shadow); }.p-path-visual { position: relative; display: grid; place-items: center; height: 172px; overflow: hidden; background: var(--p-wash); }.p-path-start .p-path-visual { background-image: linear-gradient(#10231f20,#10231f45),var(--p-wall); background-size: cover; background-position: center 65%; }
.p-path-window { display: flex; flex-direction: column; gap: 13px; width: 82%; padding: 20px; border: 1px solid #ffffff35; border-radius: 7px; background: var(--p-terminal); box-shadow: 0 10px 20px #10231f30; color: #d3e6d8; font: 10px/2.3 var(--p-mono); transform: rotate(-3deg); }.p-path-window>span:last-child { color: #b8ccc0; font-size: 9px; }.p-path-window .p-terminal-cursor { width: 6px; height: 11px; margin-left: 7px; }
.p-key-illustration { display: flex; align-items: center; gap: 13px; color: var(--p-accent); transform: rotate(-6deg); }.p-key-illustration>kbd { padding: 14px 24px; border: 1px solid var(--p-rule); border-bottom-width: 5px; border-radius: 10px; background: var(--p-surface); box-shadow: 0 6px 10px #142d280a; font-size: 25px; }.p-key-illustration>span { font: 24px var(--p-serif); }
.p-path-content { padding: 26px 27px 20px; }.p-path-content>.p-mono { color: var(--p-accent); font-size: 10px; }.p-path-content h3 { margin-top: 12px; font-size: 40px; line-height: 1.1; letter-spacing: -.04em; }.p-path-content p { max-width: 350px; margin-top: 13px; color: var(--p-muted); font-size: 14px; line-height: 1.8; }.p-path-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding-top: 15px; margin-top: 17px; border-top: 1px solid var(--p-rule); color: var(--p-accent); font-size: 12px; }.p-path-link .p-icon { width: 17px; height: 17px; }
.p-chapter-directory { margin-top: 56px; }.p-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.p-directory-group { padding: 21px 20px 7px; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); }.p-directory-label { display: flex; align-items: center; gap: 11px; padding-bottom: 20px; border-bottom: 1px solid var(--p-rule); }.p-directory-label>.p-icon { width: 20px; height: 20px; color: var(--p-accent); }.p-directory-label>h3 { font-size: 25px; letter-spacing: -.03em; line-height: 1.2; }.p-directory-group>a { display: grid; grid-template-columns: 1fr auto; gap: 7px 8px; padding: 17px 0; border-bottom: 1px solid var(--p-rule); }.p-directory-group>a:last-child { border-bottom: 0; }.p-directory-group>a>span { font-size: 12px; font-weight: 500; }.p-directory-group>a>.p-icon { width: 11px; height: 11px; margin-top: 5px; color: var(--p-muted); }.p-directory-group>a>p { grid-column: 1/-1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--p-muted); font-size: 11px; line-height: 1.75; }
.p-help-strip { display: flex; align-items: center; justify-content: space-between; gap: 27px; padding: 29px 31px; margin-top: 39px; border-radius: 12px; background: var(--p-dark); color: #f1f3e9; }.p-help-strip>div { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px 15px; }.p-help-strip h2 { font-size: 31px; letter-spacing: -.035em; }.p-help-strip p { grid-column: 2; color: #c6d3c8; font-size: 12px; }.p-help-strip>div>.p-icon { width: 21px; height: 21px; color: #c6d9c9; }.p-help-strip>a { display: flex; align-items: center; gap: 17px; min-height: 43px; padding: 8px 13px; border: 1px solid #ffffff35; border-radius: 7px; color: #f1f3e9; font-size: 12px; white-space: nowrap; }.p-help-strip>a>.p-icon { width: 17px; height: 17px; }
.p-hub-edition { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; color: var(--p-muted); font-size: 9px; letter-spacing: .03em; }

.p-guide-index { display: grid; grid-template-columns: 1fr 1.25fr; gap: 100px; padding-block: 65px 76px; border-top: 1px solid var(--p-ink); border-bottom: 1px solid var(--p-ink); }.p-guide-intro h2 { margin-block: 25px; font-size: 72px; line-height: 1.03; letter-spacing: -.05em; }.p-guide-intro h2 em { color: var(--p-accent); }.p-guide-intro>p:not(.p-eyebrow) { max-width: 320px; color: var(--p-muted); font-size: 14px; line-height: 1.85; }.p-guide-intro .p-text-link { margin-top: 24px; }
.p-guide-entries>a { display: flex; align-items: start; gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--p-rule); }.p-guide-entries>a:first-child { padding-top: 0; }.p-guide-entries>a:last-child { padding-bottom: 0; border-bottom: 0; }.p-guide-entries>a>span { padding-top: 10px; color: var(--p-muted); font-size: 11px; }.p-guide-entries>a>.p-icon { width: 23px; height: 23px; margin-top: 11px; margin-left: auto; color: var(--p-accent); }.p-guide-entries h3 { font-size: 40px; line-height: 1.2; letter-spacing: -.04em; }.p-guide-entries p { margin-top: 6px; color: var(--p-muted); font-size: 14px; }.p-guide-entries div>.p-mono { display: block; margin-top: 12px; color: var(--p-muted); font-size: 9px; letter-spacing: .04em; }
.p-details-section { margin-block: 100px; }.p-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px; margin-top: 26px; }.p-screenshot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.4; padding: 35px; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-wash); }.p-screenshot>img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px #142d2830); }.p-detail-caption { display: flex; align-items: start; justify-content: space-between; gap: 17px; margin-top: 23px; }.p-detail-caption h3 { font-size: 32px; line-height: 1.2; letter-spacing: -.035em; }.p-detail-caption p { margin-top: 9px; color: var(--p-muted); font-size: 13px; line-height: 1.8; }.p-detail-caption>a { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--p-rule); border-radius: 50%; background: var(--p-surface); color: var(--p-accent); }.p-detail-caption>a .p-icon { width: 17px; height: 17px; }

/* Form choices, code, progress and colour controls use the same generous targets. */
.p-prose .p-palette-lab { margin-block: 29px; }.p-prose .p-palette-workbench { grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); }.p-prose .p-palette-art { min-height: 345px; padding: 21px; }.p-prose .p-palette-art>.p-mono { top: 21px; left: 21px; font-size: 8px; }.p-prose .p-palette-art>p { font-size: 31px; }.p-prose .p-palette-preview { padding: 22px 18px; }.p-prose .p-palette-preview>.p-mono { font-size: 9px; }.p-prose .p-colour-apps { gap: 11px; margin-block: 23px; }.p-prose .p-lab-terminal { padding: 16px 13px; }.p-prose .p-lab-terminal>p { font-size: 10px; }.p-prose .p-lab-shell { padding-inline: 14px; }.p-prose .p-lab-shell>p { font-size: 27px; }.p-prose .p-palette-tokens { gap: 6px; }.p-prose .p-token { padding: 8px; gap: 6px; }.p-prose .p-token>i { width: 15px; height: 29px; }.p-prose .p-token small { font-size: 9px; }.p-prose .p-token b { font-size: 9px; }.p-prose .p-token>.p-icon { display: none; }.p-prose .p-lab-picker { gap: 6px; }.p-prose .p-lab-picker>button { min-width: 47px; min-height: 42px; padding: 3px; }.p-prose .p-lab-picker img { width: 39px; height: 28px; }.p-prose .p-colour-flow { gap: 5px; padding: 11px 13px; }.p-prose .p-colour-flow>button { gap: 8px; padding: 9px; font-size: 10px; }.p-prose .p-colour-flow>button>span { width: 23px; height: 23px; font-size: 8px; }.p-prose .p-colour-explanation { font-size: 11px; }
.p-install-builder { margin: 29px 0; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); box-shadow: var(--p-shadow); }
.p-widget-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 23px; border-bottom: 1px solid var(--p-rule); background: var(--p-wash); }.p-widget-heading>.p-mono { color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); font-size: 10px; }.p-widget-heading .p-icon { width: 20px; height: 20px; color: var(--p-accent); }
.p-install-choices { grid-template-columns: .9fr 1.4fr; gap: 25px; padding: 27px 23px; }.p-install-language { display: flex; flex-direction: column; gap: 13px; font-size: 13px; font-weight: 500; }.p-install-language>select { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-paper); color: var(--p-ink); font-family: var(--p-sans); font-size: 12px; }.p-install-language>span { max-width: 210px; color: var(--p-muted); font-size: 11px; font-weight: 400; line-height: 1.75; }
.p-install-choices>fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }.p-install-choices legend { margin-bottom: 12px; font-size: 13px; font-weight: 500; }.p-install-choices fieldset>label { display: flex; align-items: start; gap: 10px; min-height: 62px; padding: 11px 12px; margin-bottom: 9px; border: 1px solid var(--p-rule); border-radius: 8px; cursor: pointer; }.p-install-choices fieldset>label:last-child { margin-bottom: 0; }.p-install-choices fieldset>label:has(input:checked) { border-color: var(--p-accent); background: color-mix(in srgb,var(--p-wash) 55%,var(--p-surface)); }.p-install-choices input { flex-shrink: 0; width: 15px; height: 15px; margin: 4px 0 0; accent-color: var(--p-accent); }.p-install-choices strong { display: block; font-size: 12px; font-weight: 500; }.p-install-choices small { display: block; margin-top: 3px; color: var(--p-muted); font-size: 10px; line-height: 1.7; }
.p-install-output { background: var(--p-dark); color: #edf3e7; }.p-install-phases { gap: 6px; padding: 8px; border-bottom: 1px solid #ffffff25; }.p-install-phases>button { flex: 1; min-height: 39px; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: #c6d3c8; font-size: 11px; }.p-install-phases>button[aria-pressed='true'] { background: #ffffff15; color: #fff; box-shadow: 0 1px 5px #0001; }.p-install-output>.p-code-label { padding: 11px 18px 10px 23px; }.p-code-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 21px; border-bottom: 1px solid #ffffff20; }.p-code-label>.p-mono { color: #c6d3c8; font-size: 9px; }.p-prose .p-install-output>pre { padding: 24px 23px 27px; margin: 0; border: 0; border-radius: 0; font-size: 12px; line-height: 2; }.p-install-output :focus-visible { outline-color: #d8e5d6; }.p-install-hint { min-height: 50px; padding: 16px 23px !important; margin: 0 !important; border-top: 1px solid #ffffff25; color: #c6d3c8; font-size: 11px; line-height: 1.8; }
.p-onboarding { padding: 25px 25px 18px; margin: 0 0 42px; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); box-shadow: var(--p-shadow); }.p-onboarding-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 20px; }.p-onboarding-head .p-mono { color: var(--p-accent); font-size: 10px; }.p-onboarding-head p { margin: 8px 0 0; font: 31px/1.15 var(--p-serif); letter-spacing: -.035em; }.p-onboarding-head>span { padding: 7px 10px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-paper); color: var(--p-accent); font: 12px var(--p-mono); white-space: nowrap; }
.p-onboarding>progress { display: block; width: 100%; height: 5px; padding: 0; margin-bottom: 14px; overflow: hidden; border: 0; border-radius: 4px; background: var(--p-rule); accent-color: var(--p-accent); }.p-onboarding>progress::-webkit-progress-bar { background: var(--p-rule); }.p-onboarding>progress::-webkit-progress-value { background: var(--p-accent); }.p-onboarding>progress::-moz-progress-bar { background: var(--p-accent); }
.p-onboarding-items>label { display: flex; align-items: center; gap: 12px; min-height: 53px; padding: 13px 0; border-bottom: 1px solid var(--p-rule); font-size: 13px; cursor: pointer; }.p-onboarding-items input { width: 17px; height: 17px; margin: 0; accent-color: var(--p-accent); }.p-onboarding-items kbd { margin-left: auto; padding: 3px 7px; font-size: 9px; }.p-onboarding-items input:checked+span { color: var(--p-muted); text-decoration: line-through; text-decoration-color: var(--p-accent); }.p-onboarding-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 12px; color: var(--p-muted); font-size: 10px; }.p-onboarding-foot>button { min-height: 34px; padding: 7px 0; border: 0; background: transparent; color: var(--p-accent); font-size: 10px; text-decoration: underline; white-space: nowrap; }
.p-key-filter { margin-block: 26px; }.p-key-filter>label { display: block; margin-bottom: 10px; color: var(--p-muted); font-size: 12px; }.p-key-filter>input { width: 100%; min-height: 47px; padding: 11px 14px; border: 1px solid var(--p-rule); border-radius: 8px; background: var(--p-surface); color: var(--p-ink); font-size: 13px; }.p-key-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }.p-key-tools>label { color: var(--p-muted); font-size: 11px; }.p-key-tools>select { min-height: 38px; padding: 7px 28px 7px 11px; border: 1px solid var(--p-rule); border-radius: 6px; background: var(--p-surface); color: var(--p-ink); font: 11px var(--p-sans); }.p-key-tools>button { align-items: center; min-height: 38px; padding: 8px 0; margin-left: auto; border: 0; background: transparent; color: var(--p-accent); font-size: 11px; }.p-key-count { margin-top: 13px !important; color: var(--p-muted); font: 10px/1.8 var(--p-mono); }.p-key-empty { padding-block: 24px; color: var(--p-muted); font-size: 13px; }.p-key-table th { white-space: nowrap; }.p-key-table td:first-child { min-width: 190px; }.p-key-table td:last-child { color: var(--p-muted); font-size: 11px; }.p-key-table kbd { margin-block: 2px; font-size: 10px; }

.p-image-zoom { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 10px; background: transparent; text-align: left; line-height: 0; }.p-image-zoom img { width: 100%; height: auto; }.p-image-zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; border: 1px solid #ffffff30; border-radius: 6px; background: #10231fe8; color: #f1f3ec; font: 10px/1.5 var(--p-sans); opacity: 0; }.p-image-zoom:focus-visible .p-image-zoom-hint { opacity: 1; }.p-image-open { overflow: hidden; }
.p-lightbox { width: max-content; max-width: calc(100vw - 64px); max-height: calc(100dvh - 48px); padding: 16px 23px 21px; overflow: auto; border: 1px solid #ffffff26; border-radius: 14px; background: var(--p-dark); color: #edf2e9; box-shadow: 0 30px 100px #0006; }.p-lightbox::backdrop { background: #07100de8; backdrop-filter: blur(8px); }.p-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-bottom: 12px; }.p-lightbox-bar .p-mono { color: #c3d3c7; font-size: 10px; }.p-lightbox-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; background: transparent; color: #edf2e9 !important; }.p-lightbox-close .p-icon { width: 18px; height: 18px; }.p-lightbox>img { width: auto; max-width: calc(100vw - 112px); max-height: calc(100dvh - 180px); margin: auto; border-radius: 5px; object-fit: contain; }.p-lightbox>p { max-width: 900px; margin-top: 17px; color: #c3d3c7; font-size: 12px; line-height: 1.8; }

/* A search result is a chapter first, then the exact places where a word appears. */
.p-search-page { min-height: 65vh; max-width: 860px; padding-block: 30px 80px; }.p-search-page>.p-eyebrow { margin-top: 33px; }.p-search-page h1 { margin: 22px 0 32px; font-size: 76px; line-height: 1; letter-spacing: -.05em; }.p-search-page h1 em { color: var(--p-accent); }.p-search-form>label { display: block; margin-bottom: 11px; color: var(--p-muted); font: 10px var(--p-mono); letter-spacing: .045em; text-transform: uppercase; }.p-search-form>div { display: flex; align-items: center; gap: 15px; min-height: 66px; padding: 9px 10px 9px 20px; border: 1px solid var(--p-rule); border-radius: 12px; background: var(--p-surface); box-shadow: 0 4px 16px #142d2805; }.p-search-form>div:focus-within { outline: 2px solid var(--p-accent); outline-offset: 3px; }.p-search-form>div>.p-icon { width: 21px; height: 21px; color: var(--p-accent); }.p-search-form input { flex: 1; width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: none !important; background: transparent; color: var(--p-ink); font-size: 16px; }.p-search-form input::placeholder { color: var(--p-muted); font-size: 14px; }.p-search-form button { display: inline-flex; align-items: center; gap: 13px; min-height: 45px; padding: 11px 17px; border: 0; border-radius: 8px; background: var(--p-accent); color: var(--p-surface); font-size: 12px; }.p-search-form button .p-icon { width: 17px; height: 17px; }
.p-search-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }.p-search-filters>button { min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--p-muted); font-size: 11px; }.p-search-filters>button[aria-pressed='true'] { border-color: var(--p-rule); background: var(--p-wash); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }.p-search-status { margin: 23px 0 10px !important; color: var(--p-muted); font-size: 10px; letter-spacing: .015em; }
.p-search-result { padding: 23px 0; border-bottom: 1px solid var(--p-rule); }.p-search-primary { display: block; border-radius: 8px; }.p-search-primary>.p-mono { color: var(--p-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .035em; }.p-search-result h2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 9px 0 10px; font-size: 34px; letter-spacing: -.035em; line-height: 1.25; }.p-search-result h2 .p-icon { width: 21px; height: 21px; color: var(--p-accent); }.p-search-primary>p:last-child { color: var(--p-muted); font-size: 13px; line-height: 1.85; }.p-search-result mark { padding: 1px 2px; border-radius: 3px; background: var(--p-wash); color: var(--p-ink); }.p-search-sections { display: flex; flex-direction: column; gap: 4px; padding: 13px 0 0 13px; }.p-search-sections>a { display: flex; align-items: center; gap: 9px; min-height: 35px; padding-block: 4px; color: var(--p-accent); font-size: 12px; }.p-search-sections>a::before { content: '↳'; color: var(--p-muted); font-family: var(--p-mono); }

.p-install-section { margin-bottom: 80px; }.p-install-inner { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 60px; padding: 59px 55px; border-radius: 16px; background: var(--p-dark); color: #f2f3e9; }.p-install-inner .p-eyebrow { color: #c6d9c9; font-size: 10px; }.p-install-inner h2 { margin-block: 22px; font-size: 58px; line-height: 1.05; letter-spacing: -.045em; }.p-install-inner h2 em { color: #c6d9c9; }.p-install-inner>div>p:not(.p-eyebrow) { color: #c6d3c8; font-size: 14px; line-height: 1.85; }.p-install-inner a { display: inline-flex; align-items: center; gap: 19px; min-height: 43px; margin-top: 20px; font-size: 12px; }.p-install-inner a .p-icon { width: 17px; height: 17px; }.p-install-code { min-width: 0; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 9px; background: #00000014; }.p-install-code pre { padding: 27px 23px; margin: 0; overflow: auto; font: 12px/2.2 var(--p-mono); }.p-install-code code { font: inherit; }.p-code-prompt { color: #9fbca6; user-select: none; }.p-install-code>p { padding: 13px 21px; border-top: 1px solid #ffffff20; color: #c6d3c8; font-size: 9px; letter-spacing: .045em; }
.p-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 45px; padding-block: 41px 48px; border-top: 1px solid var(--p-rule); }.p-footer-brand { font: 51px/.95 var(--p-serif); letter-spacing: -.055em; }.p-footer-brand>span { display: block; margin-top: 13px; color: var(--p-muted); font: 12px/1.6 var(--p-sans); letter-spacing: 0; }.p-footer-links { display: flex; align-items: center; gap: 25px; font-size: 11px; }.p-footer-links>a { display: flex; align-items: center; gap: 6px; min-height: 44px; }.p-footer-links .p-icon { width: 14px; height: 14px; }.p-footer>.p-mono { color: var(--p-muted); text-align: right; font-size: 9px; letter-spacing: .025em; }
.p-toast { position: fixed; z-index: 300; left: 50%; bottom: 25px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 13px 21px; border: 1px solid #ffffff20; border-radius: 9px; background: var(--p-ink); color: var(--p-surface); box-shadow: 0 8px 30px #0002; font-size: 12px; }

/* Selection stays in one place while its surface moves between the choices. */
[data-segmented] { position: relative; isolation: isolate; }
[data-segmented]>button, [data-segmented]>a { position: relative; z-index: 1; }
.p-selection-indicator { position: absolute; z-index: 0; display: block; margin: 0; border: 1px solid transparent; border-radius: 6px; background: var(--p-surface); box-shadow: 0 1px 4px #142d2812; pointer-events: none; }
.p-nav>.p-selection-indicator { border-radius: 999px; background: var(--p-ink); box-shadow: none; }
.p-demo-workspaces>.p-selection-indicator { border-radius: 999px; background: var(--p-swatch-1); box-shadow: 0 1px 5px #0002; }
.p-launcher-modes>.p-selection-indicator { border-radius: 5px; background: #ffffff12; box-shadow: none; }
.p-install-phases>.p-selection-indicator { background: #ffffff15; box-shadow: 0 1px 5px #0001; }
.p-colour-flow>.p-selection-indicator { border-radius: 8px; background: var(--p-wash); box-shadow: none; }
.p-search-filters>.p-selection-indicator { border-color: var(--p-rule); background: var(--p-wash); box-shadow: none; }
[data-segmented][data-segmented-ready]>button[aria-pressed='true'] { border-color: transparent; background: transparent; box-shadow: none; }
[data-segmented][data-segmented-ready]>a[aria-current] { background: transparent; }

/* Both labels occupy the same cell, so copying never changes a target's width. */
.p-copy { border-radius: 5px; }
.p-copy-label { display: inline-grid; align-items: center; }
.p-copy-original, .p-copy-success { grid-area: 1 / 1; white-space: nowrap; }
.p-copy-success { opacity: 0; }
[data-copy-state='copied'] .p-copy-original { opacity: 0; }
[data-copy-state='copied'] .p-copy-success { opacity: 1; }
[data-copy-state='pending'] { cursor: progress; }
[data-copy-state='pending']>.p-icon { opacity: .55; }
.p-token[data-copy-state='copied'] { border-color: var(--p-accent); background: color-mix(in srgb,var(--p-wash) 50%,var(--p-surface)); }
.p-token[data-copy-state='copied']>.p-icon { color: var(--p-accent); }
.p-code-label .p-copy, .p-code-wrap>.p-copy { flex-shrink: 0; }
.p-wall-picker button[aria-busy='true'], .p-lab-picker>button[aria-busy='true'] { cursor: progress; }
.p-wall-picker button[aria-busy='true'] img, .p-lab-picker>button[aria-busy='true'] img { opacity: .6; }

/* Keep longer explanations from shifting the controls below them. */
.p-colour-explanation { min-height: calc(3lh + 38px); }
.p-install-hint { min-height: calc(3lh + 32px); }
.p-stable-copy { display: grid; }
.p-stable-copy>span { grid-area: 1 / 1; }
.p-stable-copy>.p-copy-reserve { visibility: hidden; pointer-events: none; }
.p-colour-explanation.p-stable-copy, .p-install-hint.p-stable-copy { min-height: 0; }
.p-demo-caption>p { min-height: 2lh; }
.p-demo-caption>a { flex-shrink: 0; }

/* Old wallpaper layers sit behind the desk objects while the new view settles. */
.p-palette-art, .p-hub-art, .p-path-visual { isolation: isolate; }
.p-wall-transition { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-size: inherit; background-position: inherit; background-repeat: inherit; pointer-events: none; }
.p-demo :focus-visible, .p-palette-art :focus-visible { outline-color: #eef3eb; }
.p-site :is(button, a, summary):focus-visible { scroll-margin-block: 112px 28px; }
.p-site :is(.p-demo-tabs, .p-colour-flow, .p-search-filters, .p-install-phases)>button:focus-visible { outline-offset: 2px; }
.p-install-choices fieldset>label:has(input:focus-visible) { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.p-install-choices fieldset>label:has(input:focus-visible) input { outline: none; }
.p-sidebar-group[data-disclosure-closing] summary .p-icon { transform: rotate(0); }
.p-mobile-outline[data-disclosure-closing]>summary>.p-icon:last-child { transform: rotate(90deg); }
.p-mobile-outline a[aria-current='location'] { color: var(--p-accent); font-weight: 500; }

@media (hover: hover) {
  .p-preview-actions>.p-style-toggle:hover, .p-preview-actions>.p-demo-close:hover, .p-preview-actions>.p-preview-expand:hover { background: var(--p-wash); border-color: var(--p-accent); color: var(--p-ink) !important; }
  .p-header-source:hover, .p-footer a:hover, .p-madeby:hover, .p-sidebar-home:hover { color: var(--p-accent) !important; }
  .p-nav>a:not([aria-current]):hover, .p-sidebar-group>a:hover, .p-sidebar-overview:hover { background: var(--p-wash); }
  .p-button:hover, .p-hub-search>button:hover, .p-search-form button:hover { background: var(--p-dark); border-color: var(--p-dark); box-shadow: 0 4px 12px -6px var(--p-dark); }
  .p-text-link:hover, .p-hero-quicklinks a:hover, .p-principles a:hover, .p-demo-caption>a:hover { text-decoration: underline; }
  .p-header-search:hover, .p-sidebar-search:hover { border-color: var(--p-accent); color: var(--p-accent) !important; background: color-mix(in srgb,var(--p-wash) 35%,var(--p-surface)); }
  .p-path:hover, .p-token:hover, .p-pagination>a:hover, .p-detail-caption>a:hover { border-color: var(--p-accent); box-shadow: 0 3px 12px -7px var(--p-accent); }
  .p-directory-group>a:hover>span, .p-search-result:hover h2, .p-guide-entries>a:hover h3 { color: var(--p-accent); }
  .p-doc-actions>a:hover, .p-doc-actions>button:hover { color: var(--p-accent); border-color: var(--p-accent); }
  .p-copy:hover, .p-mobile-toggle:hover, .p-guide-drawer-close:hover { background: var(--p-wash); }
  .p-doc-actions>.p-copy:hover { color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }
  .p-code-label .p-copy:hover, .p-code-wrap>.p-copy:hover { background: #ffffff12; }
  .p-demo-close:hover, .p-lightbox-close:hover, .p-style-toggle:hover { border-color: #ffffff8c; background: #263e35; }
  .p-demo-notch:hover { box-shadow: inset 0 -1px #ffffff30,0 3px 9px #0002; }
  .p-demo-tabs>button:not([aria-pressed='true']):hover, .p-colour-flow>button:not([aria-pressed='true']):hover, .p-search-filters>button:not([aria-pressed='true']):hover { background: color-mix(in srgb,var(--p-wash) 65%,transparent); color: var(--p-ink); }
  .p-install-phases>button:not([aria-pressed='true']):hover { background: #ffffff0b; color: #fff; }
  .p-wall-picker button:hover { border-color: var(--p-accent); background: var(--p-wash); }
  .p-lab-picker>button:hover { border-color: #ffffffb3; background: #ffffff25; }
  .p-install-choices fieldset>label:hover { border-color: color-mix(in srgb,var(--p-accent) 65%,var(--p-rule)); background: color-mix(in srgb,var(--p-wash) 25%,var(--p-surface)); }
  .p-sidebar-group summary:hover, .p-mobile-outline>summary:hover { color: var(--p-accent); }
  .p-key-tools>button:hover, .p-onboarding-foot>button:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .p-prose h2:hover .p-heading-anchor, .p-image-zoom:hover .p-image-zoom-hint { opacity: 1; }
  .p-search-sections>a:hover, .p-hub-suggestions>a:hover { text-decoration: underline; }
  .p-help-strip>a:hover { border-color: #ffffff8c; background: #ffffff0c; }
}

/* Press feedback uses inset light and colour, keeping every hit area stationary. */
.p-site :is(.p-button, .p-hub-search>button, .p-search-form button):active { background: var(--p-dark); box-shadow: inset 0 2px 4px #0003; }
.p-site :is(.p-nav>a, .p-header-search, .p-sidebar-search, .p-copy, .p-token, .p-demo-tabs>button, .p-colour-flow>button, .p-search-filters>button, .p-wall-picker button, .p-lab-picker>button, .p-mobile-toggle, .p-guide-drawer-close, .p-detail-caption>a):active { box-shadow: inset 0 0 0 999px #142d2810; }
/* A filled press wash must not darken the selected label's own pale surface. */
.p-site :is(.p-colour-flow,.p-search-filters)>button[aria-pressed='true']:active,
.p-site .p-doc-actions>.p-copy:active { box-shadow: inset 0 0 0 1px #142d2820; }
.p-site :is(.p-install-phases>button, .p-code-label .p-copy, .p-code-wrap>.p-copy, .p-demo-close, .p-lightbox-close, .p-style-toggle, .p-demo-notch):active { box-shadow: inset 0 1px 5px #0005,inset 0 0 0 999px #ffffff0c; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .p-site, .p-header, .p-header-inner, .p-nav, .p-brand-label, .p-platforms>span, .p-showcase, .p-showcase-top, .p-demo-caption, .p-terminal, .p-terminal-accent, .p-terminal-fetch b, .p-terminal-swatches i, .p-principle-icon, .p-palette-lab, .p-palette-preview, .p-lab-terminal, .p-lab-terminal b, .p-lab-swatches i, .p-lab-shell, .p-lab-shell em, .p-lab-shell>div:first-child>i, .p-lab-slider, .p-lab-slider>span, .p-token>i, .p-token small, .p-colour-flow, .p-colour-flow>button>span, .p-colour-explanation, .p-sidebar-edition, .p-guide-drawer, .p-guide-drawer-head, .p-doc-actions, .p-mobile-outline, .p-prose code, .p-prose pre, .p-note, .p-prose td, .p-prose th, .p-doc-bottom, .p-reading, .p-hub-art, .p-widget-heading, .p-install-builder, .p-install-output, .p-install-inner, .p-install-hint, .p-onboarding, .p-onboarding-head>span, .p-onboarding-items>label, .p-screenshot, .p-footer, .p-site kbd {
    transition: background-color var(--p-duration-palette) var(--p-ease-out),border-color var(--p-duration-palette) var(--p-ease-out),color var(--p-duration-palette) var(--p-ease-out);
  }
  .p-eyebrow, .p-hero h1 em, .p-title-star, .p-section-number, .p-hero-aside>p, .p-hero-quicklinks, .p-section-rail>p, .p-section-rail>span, .p-principles .p-mono, .p-principles p, .p-colour-story-heading h2 em, .p-colour-story-heading>div:last-child>p, .p-palette-preview>.p-mono, .p-doc-description, .p-doc-meta, .p-breadcrumb>span, .p-hub-hero h1 em, .p-hub-hero p:not(.p-eyebrow), .p-guide-intro h2 em, .p-guide-intro>p:not(.p-eyebrow), .p-guide-entries p, .p-detail-caption p, .p-prose figcaption, .p-toc nav>a, .p-footer-brand>span, .p-footer>.p-mono { transition: color var(--p-duration-palette) var(--p-ease-out); }
  .p-nav>a, .p-header-source, .p-header-search, .p-sidebar-search, .p-demo-tabs>button, .p-install-phases>button, .p-colour-flow>button, .p-search-filters>button, .p-wall-picker button, .p-lab-picker>button, .p-sidebar-group>a, .p-sidebar-overview, .p-path, .p-token, .p-pagination>a, .p-button, .p-copy, .p-mobile-toggle, .p-guide-drawer-close, .p-demo-close, .p-lightbox-close, .p-style-toggle, .p-detail-caption>a, .p-hub-search>button, .p-search-form button, .p-doc-actions>a, .p-help-strip>a, .p-install-choices fieldset>label, .p-install-language>select, .p-key-tools>select, .p-key-filter>input, .p-hub-search, .p-search-form>div, .p-search-result h2, .p-guide-entries h3, .p-directory-group>a>span {
    transition: background-color var(--p-duration-control) var(--p-ease-out),border-color var(--p-duration-control) var(--p-ease-out),color var(--p-duration-control) var(--p-ease-out),box-shadow var(--p-duration-control) var(--p-ease-out);
  }
  .p-site :is(button, .p-button, .p-nav>a, .p-header-search, .p-sidebar-search, .p-detail-caption>a):active { transition-duration: var(--p-duration-press); }
  [data-segmented-ready]>.p-selection-indicator { transition: left var(--p-duration-move) var(--p-ease-out),top var(--p-duration-move) var(--p-ease-out),width var(--p-duration-move) var(--p-ease-out),height var(--p-duration-move) var(--p-ease-out),background-color var(--p-duration-palette) var(--p-ease-out),border-color var(--p-duration-palette) var(--p-ease-out); }
  .p-copy-original, .p-copy-success, .p-copy>.p-icon, .p-token>.p-icon { transition: opacity var(--p-duration-control) var(--p-ease-out),color var(--p-duration-control) var(--p-ease-out); }
  .p-wall-picker img, .p-lab-picker img { transition: opacity var(--p-duration-control) var(--p-ease-out); }
  .p-guide-entries .p-icon, .p-button>.p-icon, .p-text-link>.p-icon, .p-image-zoom-hint, .p-heading-anchor { transition: opacity var(--p-duration-control) var(--p-ease-out),transform var(--p-duration-control) var(--p-ease-out); }
  .p-sidebar-group summary .p-icon, .p-mobile-outline>summary>.p-icon:last-child { transition: transform var(--p-duration-control) var(--p-ease-out); }
  .p-hero-grid { animation: p-arrive 480ms var(--p-ease-out) both; }
  .p-terminal-cursor { animation: p-blink 1.3s step-end infinite; }
  .p-demo-windows { transition: opacity var(--p-duration-control) var(--p-ease-out),filter var(--p-duration-control) var(--p-ease-out); }
  .p-demo-panel { transition: border-radius var(--p-duration-move) var(--p-ease-out); }
  .p-demo-panel::before, .p-demo-panel::after { transition: opacity var(--p-duration-control) var(--p-ease-out); }
  .p-demo-notch { transition: opacity var(--p-duration-control) var(--p-ease-out),background-color var(--p-duration-control) var(--p-ease-out),box-shadow var(--p-duration-control) var(--p-ease-out),border-radius var(--p-duration-move) var(--p-ease-out),top var(--p-duration-move) var(--p-ease-out),width var(--p-duration-move) var(--p-ease-out); }
  .p-notch-shape { transition: fill var(--p-duration-palette) var(--p-ease-out); }
  .p-os-window { transition: background-color var(--p-duration-palette) var(--p-ease-out),color var(--p-duration-palette) var(--p-ease-out),opacity 300ms var(--p-ease-out),transform 460ms var(--p-ease-out),left 340ms var(--p-ease-out),top 340ms var(--p-ease-out),width 340ms var(--p-ease-out),height 340ms var(--p-ease-out); }
  .p-demo-pet img { animation: p-pet 8s steps(1) infinite; }
  .p-guide-drawer[open] { animation: p-drawer-in var(--p-duration-move) var(--p-ease-out); }
  .p-lightbox[open] { animation: p-dialog-in 200ms var(--p-ease-out); }
  .p-preview-focus[open] { animation: p-dialog-in 220ms var(--p-ease-out); }
  .p-guide-drawer[open]::backdrop, .p-lightbox[open]::backdrop, .p-preview-focus[open]::backdrop { animation: p-backdrop-in 200ms var(--p-ease-out) both; }
  .p-guide-drawer[data-closing], .p-lightbox[data-closing], .p-preview-focus[data-closing] { animation: none; }
  .p-guide-drawer[data-closing]::backdrop, .p-lightbox[data-closing]::backdrop, .p-preview-focus[data-closing]::backdrop { animation: p-backdrop-out 160ms var(--p-ease-in-out) both; }
  .p-toast:not([hidden]) { animation: p-toast-in 200ms var(--p-ease-out); }
  .p-toast[data-closing] { animation: p-toast-out 160ms var(--p-ease-in-out) both; }
  @media (hover: hover) {
    .p-guide-entries>a:hover>.p-icon { transform: translate(2px,-2px); }
    .p-button:hover>.p-icon, .p-text-link:hover>.p-icon { transform: translateX(2px); }
    .p-button:active>.p-icon { transform: translateX(1px) scale(.96); }
  }
  @keyframes p-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes p-dialog-in { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes p-blink { 50% { opacity: 0; } }
  @keyframes p-pet { 0%,44%,53%,100% { transform: none; } 45%,52% { transform: translateY(-5px); } }
  @keyframes p-drawer-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
  @keyframes p-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes p-backdrop-out { from { opacity: var(--p-backdrop-opacity,1); } to { opacity: 0; } }
  @keyframes p-toast-in { from { opacity: 0; transform: translate(-50%,7px); } to { opacity: 1; transform: translate(-50%,0); } }
  @keyframes p-toast-out { from { opacity: 1; transform: translate(-50%,0); } to { opacity: 0; transform: translate(-50%,4px); } }
}

@media (max-width: 1200px) {
  .p-wrap, .p-header-inner { width: calc(100% - 72px); }
  .p-header-search { width: 206px; }
  .p-header-inner { gap: 18px; }
  .p-hero-grid { gap: 40px; grid-template-columns: 1.65fr 1fr; }
  .p-hero h1 { font-size: 8.4vw; }
  .p-title-star { display: none; }
  .p-hero-aside>p { font-size: 14px; }
  .p-principles { gap: 30px; }
  .p-principles h2 { font-size: 30px; }
  .p-colour-story-heading { gap: 45px; }
  .p-colour-story-heading h2 { font-size: 60px; }
  .p-palette-preview { padding: 25px; }
  .p-lab-terminal { padding-inline: 17px; }
  .p-lab-terminal>p { font-size: 11px; }
  .p-lab-shell>p { font-size: 31px; }
  .p-token { gap: 7px; padding: 9px; }
  .p-token>.p-icon { display: none; }
  .p-guide-index { gap: 65px; }
  .p-guide-intro h2 { font-size: 64px; }
  .p-install-inner { gap: 40px; padding-inline: 40px; }
  .p-install-inner h2 { font-size: 52px; }
  .p-install-code pre { font-size: 11px; }
}
@media (max-width: 1160px) {
  .p-header-source>span { display: none; }
  .p-header-source { justify-content: center; width: 28px; }
  .p-doc-grid { grid-template-columns: 200px minmax(0,1fr); gap: 42px; }
  .p-toc { display: none; }
  .p-mobile-outline { display: block; }
  .p-hub-grid { grid-template-columns: 200px minmax(0,1fr); gap: 42px; }
  .p-hub-art { display: none; }
  .p-hub-hero h1 { font-size: 61px; }
  .p-hub-section-head>.p-mono { font-size: 8px; }
  .p-directory-grid { gap: 13px; }
  .p-directory-group { padding-inline: 16px; }
  .p-directory-label { gap: 8px; }
  .p-directory-label>h3 { font-size: 23px; }
  .p-directory-group>a>span { font-size: 11px; }
  .p-directory-group>a>p { font-size: 10px; }
  .p-path-content { padding: 23px 23px 18px; }
  .p-path-content p { font-size: 13px; }
  .p-path-window { font-size: 9px; padding: 18px; }
  .p-footer { gap: 28px; }
  .p-footer-links { gap: 20px; font-size: 10px; }
  .p-footer>.p-mono { font-size: 8px; }
}
@media (max-width: 1000px) {
  .p-wall-picker>span { display: none; }
  .p-demo-tabs>button { padding-inline: 12px; }
  .p-demo-tools { gap: 15px; }
  .p-brand-label { display: none; }
  .p-principles h2 { font-size: 29px; }
  .p-principles p { font-size: 13px; }
  .p-colour-story-heading h2 { font-size: 54px; }
  .p-colour-story-heading>div:last-child>p { font-size: 13px; }
  .p-palette-workbench { grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); }
  .p-palette-art { min-height: 360px; padding: 24px; }
  .p-palette-art>p { font-size: 36px; }
  .p-palette-preview { padding: 24px 20px; }
  .p-colour-apps { gap: 11px; }
  .p-lab-terminal { padding-inline: 14px; }
  .p-lab-terminal>p { font-size: 10px; }
  .p-lab-shell { padding-inline: 16px; }
  .p-lab-shell>p { font-size: 29px; }
  .p-palette-tokens { gap: 7px; }
  .p-token>i { width: 17px; height: 30px; }
  .p-token small { font-size: 9px; }
  .p-token b { font-size: 9px; }
  .p-install-inner { grid-template-columns: 1fr; gap: 30px; padding: 40px; }
  .p-install-code pre { font-size: 12px; }
}
@media (max-width: 900px) {
  .p-wrap, .p-header-inner { width: calc(100% - 48px); }
  .p-header-inner { min-height: 78px; gap: 16px; }
  .p-brand img { width: 119px; }
  .p-nav>a { padding: 5px 14px; font-size: 11px; }
  .p-header-source { display: none; }
  .p-header-search { width: 41px; height: 41px; min-height: 41px; justify-content: center; padding: 8px; }
  .p-header-search>span, .p-header-search>kbd { display: none; }
  .p-hero { padding-block: 30px 38px; }
  .p-hero-top>.p-eyebrow { font-size: 9px; }
  .p-madeby { font-size: 9px; }
  .p-hero-grid { grid-template-columns: 1.55fr 1fr; gap: 32px; margin-top: 30px; }
  .p-hero h1 { font-size: clamp(64px,8.8vw,90px); }
  .p-hero-aside>p { font-size: 13px; }
  .p-platforms { gap: 5px; margin-block: 15px 19px; }
  .p-platforms>span { padding-inline: 7px; font-size: 9px; }
  .p-button { min-height: 48px; padding: 10px 12px 10px 16px; gap: 22px; font-size: 12px; }
  .p-hero-quicklinks { gap: 18px; font-size: 10px; margin-top: 10px; }
  .p-demo { aspect-ratio: 1.8; }
  .p-demo-tools { padding-block: 14px; }
  .p-demo-tabs>button { padding: 8px 11px; font-size: 10px; gap: 6px; }
  .p-demo-tabs .p-icon { width: 14px; height: 14px; }
  .p-wall-picker button { min-width: 50px; }
  .p-wall-picker img { width: 41px; height: 30px; }
  .p-demo-caption { font-size: 11px; }
  .p-principles { gap: 25px; margin-block: 58px 77px; }
  .p-principles h2 { font-size: 27px; }
  .p-principles p { font-size: 12px; }
  .p-principles .p-mono { font-size: 9px; }
  .p-principles a { font-size: 11px; }
  .p-principle-icon { margin-bottom: 19px; }
  .p-colour-story { margin-bottom: 76px; }
  .p-colour-story-heading { gap: 30px; }
  .p-colour-story-heading h2 { font-size: 49px; }
  .p-colour-story-heading>div:last-child>p { font-size: 12px; }
  .p-colour-story-heading .p-text-link { font-size: 11px; }
  .p-colour-flow { gap: 6px; padding-inline: 14px; }
  .p-colour-flow>button { padding-inline: 10px; gap: 8px; font-size: 10px; }
  .p-colour-flow>button>span { width: 22px; height: 22px; font-size: 8px; }
  .p-guide-index { gap: 42px; padding-block: 52px; }
  .p-guide-intro h2 { font-size: 56px; }
  .p-guide-intro>p:not(.p-eyebrow) { font-size: 13px; }
  .p-guide-entries>a { gap: 20px; }
  .p-guide-entries h3 { font-size: 35px; }
  .p-guide-entries p { font-size: 12px; }
  .p-guide-entries div>.p-mono { font-size: 8px; }
  .p-details-section { margin-block: 75px; }
  .p-screenshot { padding: 25px; }
  .p-detail-caption h3 { font-size: 29px; }
  .p-detail-caption p { font-size: 12px; }
  .p-doc-grid { display: block; padding-top: 28px; }
  .p-sidebar { position: static; max-height: none; padding: 0 0 25px; margin-bottom: 30px; border-bottom: 1px solid var(--p-rule); overflow: visible; }
  .p-has-js .p-sidebar:not(.is-open) { display: none; }
  .p-sidebar nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .p-sidebar-overview { grid-column: 1/-1; margin-bottom: 4px; }
  .p-guide-drawer .p-sidebar nav { display: block; }
  .p-guide-drawer .p-sidebar-overview { margin-bottom: 20px; }
  .p-sidebar-edition { display: none; }
  .p-guide-drawer .p-sidebar-edition { display: flex; }
  .p-doc-mobile { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 53px; padding: 9px 24px; border-bottom: 1px solid var(--p-rule); color: var(--p-muted); font-size: 11px; }
  .p-doc-mobile>span { flex: 1; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-mobile-toggle { display: none; align-items: center; gap: 9px; min-height: 35px; padding: 6px 11px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-surface); color: var(--p-ink) !important; font-size: 11px !important; }
  .p-has-js .p-mobile-toggle { display: flex; flex-shrink: 0; white-space: nowrap; }
  .p-mobile-toggle .p-icon { width: 15px; height: 15px; }
  .p-mobile-toggle>.p-icon:last-child { width: 11px; height: 11px; transform: rotate(90deg); }
  .p-doc-main { max-width: 720px; }
  .p-doc-heading h1 { font-size: 58px; }
  .p-prose { font-size: 15px; }
  .p-hub-main { max-width: 820px; margin-inline: auto; }
  .p-hub-art { display: block; width: 135px; }
  .p-hub-hero h1 { font-size: 62px; }
  .p-directory-label>h3 { font-size: 25px; }
  .p-directory-group>a>span { font-size: 12px; }
  .p-directory-group>a>p { font-size: 11px; }
  .p-directory-group { padding-inline: 18px; }
  .p-footer { grid-template-columns: 1fr auto; gap: 28px; }
  .p-footer>.p-mono { grid-column: 1/-1; margin-top: -8px; text-align: left; font-size: 9px; }
}
@media (max-width: 680px) {
  .p-hero-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 29px; }
  .p-hero h1 { font-size: clamp(52px,16.2vw,85px); }
  .p-hero-aside { max-width: 420px; padding: 0; }
  .p-hero-aside>p { font-size: 14px; }
  .p-platforms { margin-block: 16px 20px; gap: 7px; }
  .p-platforms>span { font-size: 10px; }
  .p-button { font-size: 12px; }
  .p-hero-quicklinks { font-size: 11px; gap: 24px; }
  .p-madeby { display: none; }
  .p-section-rail { padding-top: 20px; margin-bottom: 18px; gap: 14px; }
  .p-section-rail h2 { gap: 10px; font-size: 26px; }
  .p-section-rail>p { font-size: 9px; }
  .p-desktop-hint { display: none; }
  .p-showcase { padding: 11px 11px 0; border-radius: 15px; }
  .p-showcase-top { padding: 2px 3px 13px; }
  .p-showcase-top>span:first-child { font-size: 11px; gap: 8px; }
  .p-showcase-top>.p-mono { display: none; }
  .p-demo-tools { flex-direction: column; align-items: stretch; gap: 13px; padding: 14px 3px; }
  .p-wall-picker { justify-content: space-between; gap: 12px; }
  .p-wall-picker>span { display: block; font-size: 10px; max-width: 110px; }
  .p-demo-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .p-demo-tabs>button { justify-content: start; min-height: 40px; gap: 9px; padding: 9px 12px; font-size: 12px; }
  .p-demo-tabs .p-icon { width: 16px; height: 16px; }
  .p-demo-caption { display: grid; gap: 11px; padding: 14px 3px 17px; font-size: 12px; line-height: 1.85; }
  .p-demo-caption>a { justify-content: space-between; font-size: 11px; }
  .p-principles { grid-template-columns: 1fr; gap: 29px; margin-block: 48px 62px; }
  .p-principles>article { padding-top: 21px; }
  .p-principle-icon { float: right; margin-top: 0; margin-bottom: 0; }
  .p-principles h2 { margin-top: 14px; font-size: 33px; }
  .p-principles p { max-width: 100%; font-size: 14px; }
  .p-principles .p-mono { font-size: 10px; }
  .p-principles a { margin-top: 12px; font-size: 12px; }
  .p-colour-story { margin-bottom: 63px; }
  .p-colour-story-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 25px; }
  .p-colour-story-heading h2 { font-size: 52px; margin-top: 20px; }
  .p-colour-story-heading>div:last-child>p { font-size: 14px; max-width: 410px; }
  .p-colour-story-heading .p-text-link { margin-top: 10px; font-size: 12px; }
  .p-palette-workbench, .p-prose .p-palette-workbench { grid-template-columns: minmax(0,1fr); }
  .p-palette-art, .p-prose .p-palette-art { min-height: 270px; padding: 25px; background-position: center 58%; }
  .p-palette-art>.p-mono, .p-prose .p-palette-art>.p-mono { top: 23px; left: 24px; font-size: 9px; }
  .p-palette-art>p, .p-prose .p-palette-art>p { font-size: 38px; margin: 20px 0 23px !important; }
  .p-lab-picker, .p-prose .p-lab-picker { gap: 9px; }
  .p-lab-picker>button, .p-prose .p-lab-picker>button { min-width: 56px; min-height: 44px; padding: 3px; }
  .p-lab-picker img, .p-prose .p-lab-picker img { width: 46px; height: 31px; }
  .p-palette-preview, .p-prose .p-palette-preview { padding: 24px 20px; }
  .p-palette-preview>.p-mono, .p-prose .p-palette-preview>.p-mono { font-size: 9px; }
  .p-colour-apps, .p-prose .p-colour-apps { gap: 12px; margin-block: 24px; }
  .p-lab-terminal, .p-prose .p-lab-terminal { padding: 19px 15px; }
  .p-lab-terminal>p, .p-prose .p-lab-terminal>p { font-size: 11px; line-height: 2; margin: 25px 0 !important; }
  .p-lab-shell, .p-prose .p-lab-shell { padding-inline: 17px; }
  .p-lab-shell>p, .p-prose .p-lab-shell>p { font-size: 31px; margin: 30px 0 !important; }
  .p-palette-tokens, .p-prose .p-palette-tokens { gap: 7px; }
  .p-token, .p-prose .p-token { min-height: 57px; padding: 9px; gap: 8px; }
  .p-token>i, .p-prose .p-token>i { width: 17px; height: 30px; }
  .p-token small, .p-prose .p-token small { font-size: 9px; }
  .p-token b, .p-prose .p-token b { font-size: 10px; }
  .p-token>.p-icon { display: none; }
  .p-colour-flow, .p-prose .p-colour-flow { gap: 5px; padding: 11px 12px; align-items: stretch; }
  .p-colour-flow>button, .p-prose .p-colour-flow>button { flex-direction: column; align-items: start; gap: 7px; min-height: 77px; padding: 10px; font-size: 11px; line-height: 1.6; }
  .p-colour-flow>button>span, .p-prose .p-colour-flow>button>span { width: 23px; height: 23px; font-size: 8px; }
  .p-colour-flow>span { align-self: center; font-size: 11px; }
  .p-colour-explanation, .p-prose .p-colour-explanation { min-height: 80px; padding: 17px 21px 20px !important; font-size: 12px; }
  .p-guide-index { grid-template-columns: 1fr; gap: 35px; padding-block: 43px 50px; }
  .p-guide-intro h2 { font-size: 64px; margin-block: 22px; }
  .p-guide-intro>p:not(.p-eyebrow) { max-width: 410px; font-size: 14px; }
  .p-guide-intro .p-text-link { margin-top: 13px; }
  .p-guide-entries>a { padding-block: 23px; gap: 22px; }
  .p-guide-entries h3 { font-size: 37px; }
  .p-guide-entries p { font-size: 13px; }
  .p-guide-entries div>.p-mono { font-size: 9px; }
  .p-details-section { margin-block: 65px; }
  .p-details-section .p-section-rail>span { display: none; }
  .p-details-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 22px; }
  .p-screenshot { padding: 27px; }
  .p-detail-caption { margin-top: 20px; }
  .p-detail-caption h3 { font-size: 32px; }
  .p-detail-caption p { font-size: 13px; }
  .p-install-inner { gap: 29px; padding: 34px 28px; }
  .p-install-inner h2 { font-size: 51px; }
  .p-install-inner>div>p:not(.p-eyebrow) { font-size: 13px; }
  .p-install-inner a { font-size: 12px; }
  .p-install-code pre { font-size: 11px; padding-inline: 19px; }
  .p-install-section { margin-bottom: 58px; }
  .p-hub-art { display: none; }
  .p-hub-hero { gap: 0; padding-top: 0; }
  .p-hub-hero h1 { font-size: clamp(43px,11.5vw,64px); margin-top: 23px; }
  .p-hub-hero p:not(.p-eyebrow) { font-size: 13px; }
  .p-path-grid { grid-template-columns: 1fr; gap: 22px; }
  .p-path-visual { height: 165px; }
  .p-path-window { width: 80%; max-width: 390px; padding: 21px; font-size: 11px; }
  .p-key-illustration>kbd { font-size: 25px; padding: 12px 24px; }
  .p-path-content { padding: 25px 25px 20px; }
  .p-path-content h3 { font-size: 40px; }
  .p-path-content p { max-width: 100%; font-size: 14px; }
  .p-path-content>.p-mono { font-size: 10px; }
  .p-path-link { font-size: 12px; }
  .p-hub-section-head h2 { font-size: 32px; }
  .p-hub-section-head>.p-mono { display: none; }
  .p-directory-grid { grid-template-columns: 1fr; gap: 22px; }
  .p-directory-group { padding: 24px 24px 9px; }
  .p-directory-label>h3 { font-size: 29px; }
  .p-directory-label { gap: 12px; }
  .p-directory-group>a { padding-block: 18px; gap: 8px 13px; }
  .p-directory-group>a>span { font-size: 14px; }
  .p-directory-group>a>p { font-size: 12px; max-width: 430px; -webkit-line-clamp: 2; }
  .p-help-strip { flex-direction: column; align-items: start; gap: 19px; padding: 26px; }
  .p-help-strip h2 { font-size: 32px; }
  .p-help-strip p { font-size: 12px; }
  .p-help-strip>a { margin-left: 37px; font-size: 12px; }
  .p-hub-edition { flex-direction: column; align-items: start; gap: 8px; font-size: 9px; }
  .p-footer { grid-template-columns: 1fr; gap: 21px; padding-block: 34px 38px; }
  .p-footer-brand { font-size: 48px; }
  .p-footer-brand>span { font-size: 12px; }
  .p-footer-links { flex-wrap: wrap; gap: 21px; font-size: 12px; }
  .p-footer>.p-mono { grid-column: auto; margin-top: -5px; font-size: 9px; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 91px; }
  .p-wrap, .p-header-inner { width: calc(100% - 40px); }
  .p-header-inner { min-height: 73px; gap: 10px; }
  .p-brand img { width: 106px; }
  .p-nav { padding: 3px; gap: 2px; }
  .p-nav>a { min-height: 31px; padding: 5px 10px; font-size: 10px; }
  .p-header-search { min-height: 36px; width: 36px; height: 36px; padding: 7px; }
  .p-header-search .p-icon { width: 16px; height: 16px; }
  .p-hero { padding-top: 26px; padding-bottom: 35px; }
  .p-hero-top>.p-eyebrow { font-size: 8px; letter-spacing: .04em; }
  .p-hero-grid { gap: 24px; margin-top: 28px; }
  .p-hero-aside>p { font-size: 13px; line-height: 1.85; }
  .p-platforms { margin-block: 15px 21px; }
  .p-platforms>span { font-size: 9px; }
  .p-hero-quicklinks { font-size: 10px; margin-top: 9px; }
  .p-section-rail h2 { font-size: 23px; gap: 9px; }
  .p-section-number { font-size: 10px; }
  .p-section-rail>p { font-size: 8px; letter-spacing: 0; }
  .p-section-rail>p .p-demo-dot { width: 4px; height: 4px; margin-right: 4px; }
  .p-showcase { padding: 10px 10px 0; }
  .p-demo { aspect-ratio: 16 / 9; border-radius: 8px; }
  .p-showcase-top>span:first-child { font-size: 10px; }
  .p-demo-bar { height: 20px; left: 3px; }
  .p-demo-workspaces>button { width: 16px; height: 20px; }
  .p-demo-notch { width: 66px; height: 16px; }
  .p-demo[data-style='island'] .p-demo-notch { width: 56px; height: 15px; }
  .p-os-window { font-size: .625cqw; padding: 1px; }
  .p-yazi-preview { display: none; }.p-yazi-columns { grid-template-columns: minmax(0,.6fr) minmax(0,2fr); }
  .p-demo-pet { width: 4.06%; min-width: 12px; }
  .p-style-toggle { right: 2%; bottom: 2%; min-height: 26px; padding: 4px 6px; background: #101118df; font-size: 8px !important; }
  .p-demo-panel, .p-demo[data-pane='team'] .p-demo-panel, .p-demo[data-pane='launcher'] .p-demo-panel { width: 94%; border-radius: 0 0 12px 12px; }
  .p-demo[data-style='island'] .p-demo-panel { border-radius: 12px; }
  .p-demo-close { width: 22px; height: 22px; top: 4px; right: 4px; }
  .p-showcase-top { gap: 12px; align-items: start; }.p-showcase-top>span:first-child { max-width: 58%; line-height: 1.6; gap: 7px; }.p-showcase-top>span .p-live-dot { display: none; }.p-preview-expand { min-height: 30px; padding: 5px 6px; white-space: nowrap; font-size: 9px; }.p-demo-hint { font-size: 9px; justify-content: center; }.p-demo-hint>span:last-child { display: none; }
  .p-preview-focus { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 14px; }.p-preview-focus-bar { padding: 12px; font-size: 19px; }.p-preview-focus-body { padding: 9px; }.p-preview-focus .p-demo { aspect-ratio: 16 / 9; max-height: none; }
  .p-showcase-top>span:first-child { max-width: 100%; flex-basis: 100%; }
  .p-preview-actions { width: 100%; }.p-preview-actions>button { flex: 1; }
  .p-preview-actions>.p-style-toggle, .p-preview-actions>.p-demo-close { min-height: 32px; padding-inline: 7px; white-space: nowrap; font-size: 9px !important; }
  .p-expand-long { display: none; }.p-expand-short { display: inline; }
  .p-wall-picker>span { max-width: 95px; font-size: 9px; }
  .p-wall-picker>div { gap: 5px; }
  .p-wall-picker button { min-width: 44px; min-height: 42px; padding: 3px; }
  .p-wall-picker img { width: 36px; height: 27px; }
  .p-demo-tabs>button { min-height: 40px; font-size: 11px; padding: 9px 10px; }
  .p-demo-caption { font-size: 11px; }
  .p-principles { gap: 28px; margin-block: 44px 57px; }
  .p-principles h2 { font-size: 31px; }
  .p-principles p { font-size: 13px; }
  .p-principles .p-mono { font-size: 9px; }
  .p-principles a { font-size: 11px; }
  .p-colour-story-heading h2 { font-size: 47px; }
  .p-colour-story-heading .p-eyebrow { font-size: 9px; }
  .p-colour-story-heading>div:last-child>p { font-size: 13px; }
  .p-colour-story-heading .p-text-link { font-size: 11px; }
  .p-palette-art, .p-prose .p-palette-art { min-height: 245px; padding: 23px 21px; }
  .p-palette-art>.p-mono, .p-prose .p-palette-art>.p-mono { top: 20px; left: 21px; }
  .p-palette-art>p, .p-prose .p-palette-art>p { font-size: 35px; }
  .p-palette-preview, .p-prose .p-palette-preview { padding: 22px 17px; }
  .p-palette-preview>.p-mono, .p-prose .p-palette-preview>.p-mono { font-size: 8px; }
  .p-colour-apps, .p-prose .p-colour-apps { gap: 10px; margin-block: 23px; }
  .p-lab-terminal, .p-prose .p-lab-terminal { padding: 17px 12px; }
  .p-lab-terminal>p, .p-prose .p-lab-terminal>p { font-size: 9px; margin: 24px 0 !important; }
  .p-lab-shell, .p-prose .p-lab-shell { padding-inline: 12px; }
  .p-lab-shell>p, .p-prose .p-lab-shell>p { font-size: 27px; margin: 28px 0 !important; }
  .p-lab-shell>div:first-child { padding-inline: 9px; font-size: 8px; gap: 2px; }
  .p-lab-shell>div:first-child>span { margin-right: 5px; }
  .p-palette-tokens, .p-prose .p-palette-tokens { gap: 6px; }
  .p-token, .p-prose .p-token { min-height: 54px; padding: 8px; gap: 6px; }
  .p-token>i, .p-prose .p-token>i { width: 13px; height: 28px; }
  .p-token small, .p-prose .p-token small { font-size: 8px; }
  .p-token b, .p-prose .p-token b { font-size: 9px; }
  .p-colour-flow, .p-prose .p-colour-flow { gap: 3px; padding: 10px; }
  .p-colour-flow>button, .p-prose .p-colour-flow>button { padding: 9px 7px; min-height: 78px; gap: 7px; font-size: 10px; }
  .p-colour-explanation, .p-prose .p-colour-explanation { padding: 16px 18px 19px !important; font-size: 11px; }
  .p-guide-intro h2 { font-size: 61px; }
  .p-guide-intro>p:not(.p-eyebrow) { font-size: 13px; }
  .p-guide-entries h3 { font-size: 35px; }
  .p-guide-entries p { font-size: 12px; }
  .p-guide-entries div>.p-mono { font-size: 8px; }
  .p-details-section .p-section-rail h2 { font-size: 10px; }
  .p-detail-caption h3 { font-size: 29px; }
  .p-detail-caption p { font-size: 12px; }
  .p-screenshot { padding: 22px; }
  .p-install-inner { padding: 31px 22px; gap: 27px; }
  .p-install-inner h2 { font-size: 44px; }
  .p-install-inner>div>p:not(.p-eyebrow) { font-size: 12px; }
  .p-install-inner .p-eyebrow { font-size: 9px; }
  .p-install-inner a { font-size: 11px; gap: 12px; }
  .p-install-code pre { font-size: 10px; padding: 21px 16px; }
  .p-code-label { padding-inline: 15px; }
  .p-code-label>.p-mono { font-size: 8px; }
  .p-install-code>p { padding-inline: 15px; font-size: 8px; }
  .p-doc-mobile { min-height: 53px; padding-inline: 20px; gap: 12px; }
  .p-doc-mobile>span { font-size: 10px; max-width: 46%; }
  .p-mobile-toggle { font-size: 10px !important; padding-inline: 9px; gap: 7px; }
  .p-doc-grid { padding-top: 27px; padding-bottom: 52px; }
  .p-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .p-guide-drawer .p-sidebar nav { display: block; }
  .p-doc-heading h1 { font-size: 47px; margin-top: 14px; line-height: 1.08; }
  .p-breadcrumb { gap: 9px; font-size: 9px; }
  .p-doc-meta { gap: 10px; margin-top: 22px; font-size: 10px; }
  .p-doc-meta>span+span::before { margin-right: 10px; }
  .p-doc-description { font-size: 14px; line-height: 1.85; }
  .p-doc-heading { margin-bottom: 29px; }
  .p-doc-actions { gap: 8px; margin-top: 22px; padding-bottom: 24px; }
  .p-doc-actions .p-copy, .p-doc-actions>a { min-height: 38px; padding: 8px 11px; font-size: 10px !important; }
  .p-doc-shortcut { gap: 4px; }
  .p-doc-shortcut>span { font-size: 10px; }
  .p-doc-shortcut kbd { font-size: 10px; padding-inline: 6px; }
  .p-prose { font-size: 14px; line-height: 1.9; }
  .p-prose h2 { font-size: 32px; margin-top: 38px; }
  .p-prose h3 { font-size: 14px; }
  .p-prose h2 .p-heading-anchor { width: 23px; margin-left: 3px; font-size: 12px; opacity: 1; }
  .p-prose pre { font-size: 11px; padding-inline: 17px; }
  .p-code-wrap::before { left: 17px; font-size: 8px; }
  .p-code-wrap>.p-copy { font-size: 10px !important; }
  .p-note { padding: 19px; }
  .p-prose figcaption { font-size: 10px; }
  .p-prose table { font-size: 12px; }
  .p-prose th { font-size: 9px; }
  .p-doc-bottom { gap: 14px; align-items: start; margin-top: 40px; }
  .p-doc-bottom .p-mono { font-size: 9px; max-width: 160px; }
  .p-doc-bottom>a { font-size: 10px; min-height: 30px; }
  .p-pagination { gap: 11px; }
  .p-pagination>a { padding: 18px 14px; gap: 9px; }
  .p-pagination .p-mono { font-size: 9px; }
  .p-pagination strong { font-size: 11px; }
  .p-mobile-outline>summary { min-height: 46px; font-size: 11px; }
  .p-mobile-outline a { font-size: 11px; }
  .p-prose .p-palette-lab { margin-inline: 0; }
  .p-widget-heading { padding: 14px 18px; }
  .p-widget-heading>.p-mono { font-size: 9px; }
  .p-install-choices { grid-template-columns: 1fr; gap: 25px; padding: 23px 18px; }
  .p-install-language>span { max-width: none; }
  .p-install-choices strong { font-size: 13px; }
  .p-install-choices small { font-size: 11px; }
  .p-install-choices fieldset>label { padding: 13px; }
  .p-install-phases>button { min-height: 42px; padding-inline: 7px; font-size: 10px; }
  .p-install-output>.p-code-label { padding-inline: 16px; }
  .p-install-output .p-copy { font-size: 10px !important; }
  .p-prose .p-install-output>pre { padding: 23px 18px; font-size: 10px; }
  .p-install-hint { padding: 15px 18px !important; font-size: 10px; }
  .p-onboarding { padding: 22px 18px 15px; margin-bottom: 34px; }
  .p-onboarding-head { gap: 17px; }
  .p-onboarding-head p { font-size: 28px; }
  .p-onboarding-head .p-mono { font-size: 9px; }
  .p-onboarding-head>span { padding: 7px 8px; font-size: 11px; }
  .p-onboarding-items>label { gap: 10px; font-size: 12px; min-height: 50px; }
  .p-onboarding-items input { width: 16px; height: 16px; }
  .p-onboarding-items kbd { padding-inline: 5px; font-size: 8px; }
  .p-onboarding-foot { font-size: 9px; gap: 13px; }
  .p-onboarding-foot>button { font-size: 9px; }
  .p-key-tools { gap: 10px; }
  .p-key-tools>label, .p-key-tools>button { font-size: 10px; }
  .p-key-tools>select { font-size: 10px; }
  .p-key-count { font-size: 9px; }
  .p-image-zoom-hint { opacity: 1; bottom: 8px; right: 8px; padding: 6px 9px; font-size: 9px; }
  .p-lightbox { max-width: calc(100vw - 28px); padding: 13px 15px 17px; border-radius: 11px; }
  .p-lightbox>img { max-width: calc(100vw - 60px); }
  .p-lightbox-bar>.p-mono { font-size: 9px; }
  .p-lightbox>p { font-size: 11px; }
  .p-hub-hero .p-eyebrow { font-size: 9px; }
  .p-hub-search { min-height: 61px; padding: 8px 9px 8px 16px; gap: 13px; margin-top: 28px; }
  .p-hub-search input { font-size: 13px; }
  .p-hub-search>.p-icon { width: 18px; height: 18px; }
  .p-hub-search>button { width: 40px; height: 40px; }
  .p-hub-suggestions { gap: 6px; margin-top: 12px; }
  .p-hub-suggestions>.p-mono { font-size: 8px; }
  .p-hub-suggestions>a { padding-inline: 8px; font-size: 10px; min-height: 32px; }
  .p-resume { padding: 15px; gap: 8px 12px; margin-top: 21px; }
  .p-resume>.p-mono { font-size: 8px; }
  .p-resume strong { font-size: 12px; }
  .p-resume>span:last-child { width: 100%; justify-content: space-between; margin: 0; font-size: 10px; }
  .p-paths { margin-top: 35px; }
  .p-hub-section-head h2 { font-size: 30px; }
  .p-path-content { padding: 24px 22px 18px; }
  .p-path-content h3 { font-size: 38px; }
  .p-path-content p { font-size: 13px; }
  .p-path-window { padding: 19px; font-size: 9px; }
  .p-path-window>span:last-child { font-size: 8px; }
  .p-chapter-directory { margin-top: 40px; }
  .p-directory-group { padding: 22px 21px 7px; }
  .p-directory-group>a>span { font-size: 13px; }
  .p-directory-group>a>p { font-size: 12px; }
  .p-help-strip { padding: 24px; }
  .p-help-strip h2 { font-size: 30px; }
  .p-help-strip p { font-size: 11px; }
  .p-hub-edition { font-size: 8px; }
  .p-search-page { padding-top: 23px; padding-bottom: 55px; }
  .p-search-page>.p-eyebrow { margin-top: 27px; font-size: 9px; }
  .p-search-page h1 { font-size: 59px; margin-block: 22px 28px; }
  .p-search-form>label { font-size: 9px; }
  .p-search-form>div { gap: 11px; min-height: 61px; padding: 9px 9px 9px 15px; }
  .p-search-form>div>.p-icon { width: 18px; height: 18px; }
  .p-search-form input { font-size: 14px; }
  .p-search-form input::placeholder { font-size: 12px; }
  .p-search-form button { min-height: 40px; padding: 10px 12px; font-size: 11px; }
  .p-search-form button .p-icon { display: none; }
  .p-search-filters { margin-top: 17px; gap: 4px; }
  .p-search-filters>button { padding-inline: 10px; min-height: 36px; font-size: 10px; }
  .p-search-status { font-size: 9px; }
  .p-search-result h2 { font-size: 31px; }
  .p-search-primary>.p-mono { font-size: 9px; }
  .p-search-primary>p:last-child { font-size: 12px; }
  .p-search-sections>a { font-size: 11px; }
}
@media (max-width: 360px) {
  .p-header-inner { gap: 7px; }
  .p-brand img { width: 94px; }
  .p-nav>a { padding-inline: 9px; font-size: 9px; }
  .p-header-search { width: 34px; min-height: 34px; height: 34px; }
  .p-hero-top>.p-eyebrow { font-size: 7px; }
  .p-section-rail h2 { font-size: 21px; }
  .p-section-rail>p { font-size: 7px; }
  .p-token, .p-prose .p-token { padding: 7px; gap: 5px; }
  .p-token>i, .p-prose .p-token>i { width: 11px; }
  .p-token b, .p-prose .p-token b { font-size: 8px; }
  .p-lab-shell>p, .p-prose .p-lab-shell>p { font-size: 25px; }
  .p-lab-shell>div:first-child { padding-inline: 7px; }
  .p-lab-shell>div:first-child>span { margin-right: 3px; }
  .p-colour-flow>button, .p-prose .p-colour-flow>button { font-size: 9px; padding-inline: 6px; }
  .p-onboarding-head p { font-size: 25px; }
  .p-onboarding-items>label { font-size: 11px; gap: 8px; }
  .p-onboarding-items kbd { font-size: 7px; }
  .p-key-tools>button { margin-left: 0; }
}
@media print {
  .p-site { background: white; color: black; }
  .p-header, .p-sidebar, .p-toc, .p-doc-mobile, .p-mobile-outline, .p-footer, .p-copy, .p-pagination, .p-toast, .p-doc-actions, .p-onboarding, .p-install-choices, .p-install-phases, .p-key-tools, .p-search-filters, .p-heading-anchor, .p-lightbox, .p-guide-drawer, .p-image-zoom-hint, .p-skip { display: none !important; }
  .p-wrap { width: 100%; max-width: none; }
  .p-doc-grid { display: block; padding: 0; }
  .p-doc-main { max-width: none; }
  .p-doc-heading h1 { font-size: 38pt; }
  .p-prose { font-size: 11pt; }
  .p-prose a { text-decoration: underline; }
  .p-prose pre, .p-install-output, .p-prose .p-install-output>pre { background: #eee; color: black; white-space: pre-wrap; }
  .p-code-wrap::before, .p-install-output>.p-code-label, .p-install-hint { color: #333; }
  .p-prose .c, .p-prose .c1, .p-prose .s, .p-prose .s1, .p-prose .s2, .p-prose .nb, .p-prose .k { color: black; }
  .p-prose h2 { break-after: avoid; }
  .p-prose figure, .p-prose pre, .p-install-builder, .p-palette-workbench { break-inside: avoid; }
  .p-site [data-key-row][hidden] { display: table-row !important; }
}