/* Enhancements scoped to the P©ix development diary. */
.pcix-progress { position:fixed; inset:0 auto auto 0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--green); z-index:100; pointer-events:none; }
.pcix-demo { margin:3rem 0; padding:clamp(1rem,3vw,2rem); border:1px solid var(--border); background:#151b18; border-radius:4px; }
.pcix-demo .pcix-eyebrow { color:var(--green); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 .75rem; }
.pcix-controls { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; }
.pcix-controls label { display:flex; align-items:center; gap:.7rem; min-height:44px; cursor:pointer; }
.pcix-controls input { width:20px; height:20px; accent-color:var(--green); }
.pcix-matrix { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.pcix-quadrant { border:1px solid #404943; padding:1rem; border-radius:4px; transition:background .2s,border-color .2s; }
.pcix-quadrant h3 { margin:0 0 .5rem; font-size:1.25rem; }
.pcix-quadrant p { font-size:.75rem; margin:0; }
.pcix-quadrant.is-active { border-color:var(--green); background:#233b2c; }
.pcix-task { display:block; padding:.65rem; margin-top:1rem; border-left:2px solid var(--green); background:#101812; font-size:.75rem; }
.pcix-task[hidden] { display:none; }
.pcix-result { min-height:3.5em; margin-bottom:0; }
.pcix-timeline { margin:2rem 0; border-left:1px solid var(--green); padding-left:1.25rem; }
.pcix-timeline details { border-bottom:1px solid var(--border); padding:1rem 0; }
.pcix-timeline summary { cursor:pointer; min-height:44px; color:var(--white); }
.pcix-timeline summary span { display:block; font-size:.7rem; color:var(--green); margin:.4rem 0 0 1rem; }
.pcix-timeline p { margin:.75rem 0; }
.pcix-figure img { width:100%; height:auto; border-radius:4px; }
@media(max-width:480px) { .pcix-matrix { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .pcix-quadrant { transition:none; } }

/* Match the compact NAS article hero: proportions, type, image and breakpoint. */
.pcix-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center; padding-block:2rem; }
.pcix-hero > div, .pcix-hero-figure { min-width:0; }
.pcix-hero h1 { font-size:clamp(3rem,6vw,5rem); margin:1rem 0 1.5rem; }
.pcix-hero p:not(.page-label) { max-width:53ch; margin:1rem 0; }
.pcix-hero-figure img { width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--border); border-radius:var(--radius); }
.pcix-hero-figure figcaption { font-size:.65rem; text-align:center; margin-top:1.4rem; color:var(--gray); }
@media(max-width:600px) { .pcix-hero { grid-template-columns:minmax(0,1fr); gap:1rem; } .pcix-hero-figure { margin-top:1rem; } }