:root {
  --phpr-bg: #101018;
  --phpr-bg-deep: #09090f;
  --phpr-panel: #171723;
  --phpr-panel-2: #1d1d2b;
  --phpr-text: #f7f5ff;
  --phpr-muted: #b8b4c7;
  --phpr-dim: #827e91;
  --phpr-border: rgba(255, 255, 255, .12);
  --phpr-purple: #8f7df5;
  --phpr-purple-soft: #b7acf9;
  --phpr-rust: #ef7d4d;
  --phpr-rust-bright: #ff9b5f;
  --phpr-green: #58d68d;
  --phpr-yellow: #ffd166;
  --phpr-red: #ff6b6b;
  --phpr-max: 84rem;
}

html { scroll-behavior: smooth; background: var(--phpr-bg); }
body { margin: 0; color: var(--phpr-text); background: var(--phpr-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { color: #09090f; background: var(--phpr-rust-bright); }
a { text-underline-offset: .18em; }
code, pre, .code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
code:not(pre code) { padding: .12rem .35rem; border: 1px solid var(--phpr-border); border-radius: .25rem; background: rgba(255,255,255,.05); color: #f6c4ae; font-size: .92em; }
pre { white-space: pre-wrap; word-break: break-word; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

.skip-link { position: fixed; left: 1rem; top: -10rem; z-index: 999; padding: .75rem 1rem; border-radius: .25rem; color: #09090f; background: var(--phpr-rust-bright); font-weight: 800; }
.skip-link:focus { top: 1rem; }

.site-header { background: rgba(16, 16, 24, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.announcement { background: rgba(255,255,255,.025); }
.phpr-border { border-color: var(--phpr-border); }
.phpr-border-bottom { border-bottom: 1px solid var(--phpr-border); }
.phpr-muted { color: var(--phpr-muted); }
.phpr-dim { color: var(--phpr-dim); }
.phpr-panel { background: var(--phpr-panel); }
.phpr-panel-2 { background: var(--phpr-panel-2); }
.accent { color: var(--phpr-rust-bright); }
.accent-purple { color: var(--phpr-purple-soft); }
.bg-accent { background: var(--phpr-rust-bright); }
.bg-accent-purple { background: var(--phpr-purple); }
.hover-white:hover, .hover-white:focus { color: #fff; }
.active { color: #fff; }
.button-compact, .button-primary, .button-secondary { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.button-compact:hover, .button-primary:hover { transform: translateY(-1px); box-shadow: 0 .45rem 1.4rem rgba(239,125,77,.22); }
.button-secondary:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
.gap-nav { gap: 1.25rem; }
.gap-footer { gap: 2rem; }
.nav-popover { width: 15rem; z-index: 20; border: 1px solid var(--phpr-border); }
.lang-switch:hover { background: rgba(255,255,255,.06); }
.status-dot { display: inline-block; width: .52rem; height: .52rem; border-radius: 50%; background: var(--phpr-green); box-shadow: 0 0 0 .24rem rgba(88,214,141,.12); }

.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 14% 10%, rgba(143,125,245,.22), transparent 32rem),
  radial-gradient(circle at 88% 30%, rgba(239,125,77,.18), transparent 30rem),
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, auto, 3rem 3rem, 3rem 3rem;
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.hero > * { position: relative; }
.eyebrow { color: var(--phpr-purple-soft); letter-spacing: .14em; text-transform: uppercase; }
.gradient-text { color: var(--phpr-text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text { color: transparent; background: linear-gradient(100deg, #fff 5%, var(--phpr-purple-soft) 48%, var(--phpr-rust-bright) 96%); -webkit-background-clip: text; background-clip: text; }
}
.hero-title { max-width: 15ch; font-size: 4rem; font-size: clamp(2.7rem, 7vw, 6.4rem); letter-spacing: -.055em; }
.hero-copy { max-width: 42rem; }
.hero-actions { gap: .75rem; }
.button-primary { color: #09090f; background: var(--phpr-rust-bright); }
.button-secondary { color: #fff; border: 1px solid var(--phpr-border); background: rgba(255,255,255,.035); }

.code-window { overflow: hidden; border: 1px solid var(--phpr-border); background: #0b0b11; box-shadow: 0 2.4rem 5rem rgba(0,0,0,.34); }
.code-window-bar { border-bottom: 1px solid var(--phpr-border); background: rgba(255,255,255,.03); }
.code-dot { display: inline-block; width: .67rem; height: .67rem; border-radius: 50%; background: var(--phpr-dim); }
.code-dot:nth-child(1) { background: #ff6b6b; }
.code-dot:nth-child(2) { background: #ffd166; }
.code-dot:nth-child(3) { background: #58d68d; }
.prompt { color: var(--phpr-purple-soft); }
.command { color: #fff; }
.comment { color: #7f7b8c; }
.output { color: #91e6b3; }
.copy-button { color: var(--phpr-muted); background: transparent; border: 1px solid var(--phpr-border); cursor: pointer; }
.copy-button:hover, .copy-button:focus { color: #fff; background: rgba(255,255,255,.06); }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--phpr-border); background: var(--phpr-border); }
.metric-card { min-height: 10rem; background: var(--phpr-panel); }
.metric-number { font-size: 3rem; font-size: clamp(2.1rem, 6vw, 4.2rem); letter-spacing: -.05em; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.feature-card { border: 1px solid var(--phpr-border); background: var(--phpr-panel); transition: border-color .15s ease, transform .15s ease; }
.feature-card:hover { border-color: rgba(255,155,95,.42); transform: translateY(-2px); }
.icon-chip { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: .45rem; color: #0a0a10; background: var(--phpr-rust-bright); font-weight: 900; }
.icon-chip.purple { background: var(--phpr-purple-soft); }
.icon-chip.green { background: var(--phpr-green); }

.section-kicker { color: var(--phpr-rust-bright); letter-spacing: .12em; text-transform: uppercase; }
.section-title { max-width: 20ch; letter-spacing: -.035em; }
.section-copy { max-width: 45rem; }
.rule { height: 1px; background: var(--phpr-border); }
.quote-block { border-left: .25rem solid var(--phpr-rust); background: linear-gradient(90deg, rgba(239,125,77,.09), transparent); }
.fact-chip { border: 1px solid var(--phpr-border); background: rgba(255,255,255,.035); }

.architecture-flow { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.arch-step { position: relative; border: 1px solid var(--phpr-border); background: var(--phpr-panel); }
.arch-step-number { color: var(--phpr-rust-bright); }

.progress-track { width: 100%; height: .65rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--phpr-purple), var(--phpr-rust-bright)); }
.status-complete { color: var(--phpr-green); }
.status-partial { color: var(--phpr-yellow); }
.status-future { color: var(--phpr-purple-soft); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 1rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--phpr-border); }
.data-table th { color: var(--phpr-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.data-table tr:last-child td { border-bottom: 0; }

.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; top: .4rem; bottom: .4rem; left: .45rem; width: 1px; background: var(--phpr-border); }
.timeline-item { position: relative; padding-left: 2rem; }
.timeline-dot { position: absolute; left: .16rem; top: .38rem; width: .62rem; height: .62rem; border-radius: 50%; background: var(--phpr-rust-bright); box-shadow: 0 0 0 .28rem var(--phpr-bg); }
.timeline-dot.future { background: var(--phpr-purple); }

.callout { border: 1px solid rgba(143,125,245,.34); background: rgba(143,125,245,.08); }
.warning { border: 1px solid rgba(255,209,102,.34); background: rgba(255,209,102,.07); }
.success { border: 1px solid rgba(88,214,141,.34); background: rgba(88,214,141,.07); }

.article-shell { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.article-body { max-width: 46rem; }
.article-body p, .article-body li { color: var(--phpr-muted); line-height: 1.75; }
.article-body h2 { margin-top: 3.2rem; font-size: 1.65rem; letter-spacing: -.02em; }
.article-body h3 { margin-top: 2.2rem; }
.article-body a { color: var(--phpr-rust-bright); }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.toc { align-self: start; border: 1px solid var(--phpr-border); background: var(--phpr-panel); }
.toc a { color: var(--phpr-muted); }
.toc a:hover { color: #fff; }

.faq-item { border-top: 1px solid var(--phpr-border); }
.faq-item:last-child { border-bottom: 1px solid var(--phpr-border); }
.faq-item summary { list-style: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--phpr-rust-bright); font-size: 1.35rem; }
.faq-item[open] summary::after { content: "−"; }

.update-card { border: 1px solid var(--phpr-border); background: var(--phpr-panel); }
.update-card:hover { border-color: rgba(255,155,95,.38); }
.tag { color: var(--phpr-purple-soft); border: 1px solid rgba(143,125,245,.35); background: rgba(143,125,245,.09); }

.source-note { border-top: 1px solid var(--phpr-border); }
.source-note a { color: var(--phpr-muted); }
.source-note a:hover { color: #fff; }

@media screen and (min-width: 30em) {
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .architecture-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media screen and (min-width: 60em) {
  .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-shell { grid-template-columns: minmax(0, 46rem) 16rem; justify-content: space-between; }
  .toc { position: sticky; top: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .site-header, footer, .copy-button, .hero-actions { display: none !important; }
  body { color: #111; background: #fff; }
  .phpr-muted, .phpr-dim { color: #333; }
  .feature-card, .metric-card, .phpr-panel, .code-window { color: #111; background: #fff; border-color: #bbb; box-shadow: none; }
  a { color: #111; text-decoration: underline; }
}

.sticky { position: sticky; }