:root{--pq-ink:#19263b;--pq-muted:#5c6b80;--pq-blue:#1958ad;--pq-border:#dce4ef;--pq-bg:#f5f7fb}
body{background:var(--pq-bg);color:var(--pq-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.pq-shell{max-width:1180px;margin:0 auto;padding:0 24px}
.pq-nav{background:#fff;border-bottom:1px solid var(--pq-border)}
.pq-nav-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pq-brand{font-weight:800;font-size:1.25rem;color:#1e3862;text-decoration:none;white-space:nowrap}
.pq-nav nav{display:flex;flex-wrap:wrap;gap:24px}.pq-nav nav a{font-size:.92rem;font-weight:650;color:#34465f;text-decoration:none}.pq-nav a:hover{text-decoration:underline}
.pq-hero{background:linear-gradient(125deg,#101d38,#183c70 60%,#265e87);color:#fff;padding:65px 0 58px}
.pq-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800;margin:0 0 12px;color:#7dbeee}.pq-hero h1{font-size:clamp(2.3rem,5vw,4.1rem);letter-spacing:-.045em;line-height:1.07;margin:0}.pq-lede{max-width:740px;font-size:1.12rem;line-height:1.7;color:#d8e8f9;margin:18px 0 22px}.pq-hero-stats{display:flex;flex-wrap:wrap;gap:10px}.pq-hero-stats span{border:1px solid #ffffff40;border-radius:999px;padding:7px 12px;font-size:.83rem;color:#e6f2ff}.pq-hero-stats strong{color:white}
.pq-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding-top:36px;padding-bottom:70px}.pq-sidebar{align-self:start;position:sticky;top:22px;display:grid;gap:16px}.pq-panel,.pq-note{background:#fff;border:1px solid var(--pq-border);border-radius:14px;padding:18px;box-shadow:0 2px 9px #1c33590a}.pq-panel label{display:block;font-size:.85rem;font-weight:750;margin-bottom:8px}.pq-panel input{width:100%;border:1px solid #bcc9d9;border-radius:8px;padding:10px;font:inherit;box-sizing:border-box;background:#fff;color:var(--pq-ink)}.pq-panel input:focus{outline:2px solid #78a9ef;outline-offset:1px}.pq-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.pq-filter{font:inherit;font-size:.76rem;border:1px solid var(--pq-border);border-radius:999px;padding:6px 9px;background:#fff;color:#3d5270;cursor:pointer}.pq-filter[aria-pressed="true"]{color:#fff;background:var(--pq-blue);border-color:var(--pq-blue)}.pq-count{font-size:.8rem;color:var(--pq-muted);margin:13px 0 0}.pq-help h2{font-size:1rem;margin:0 0 10px}.pq-help ol{padding-left:20px;margin:0;display:grid;gap:8px;font-size:.84rem;line-height:1.5}.pq-help p{font-size:.78rem;line-height:1.5;color:var(--pq-muted);margin:14px 0 0}.pq-help code{font-size:.76rem}
.pq-section-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:18px}.pq-section-heading .pq-eyebrow{color:#467daa}.pq-section-heading h2{margin:0;font-size:1.7rem;letter-spacing:-.03em}.pq-section-heading>a{color:var(--pq-blue);font-weight:650;text-decoration:none;font-size:.87rem;white-space:nowrap}.pq-section-heading>a:hover{text-decoration:underline}.pq-recipes{display:grid;gap:14px}.pq-card{border:1px solid var(--pq-border);border-radius:15px;background:#fff;box-shadow:0 2px 12px #1c33590c;overflow:hidden}.pq-card[hidden]{display:none}.pq-card-head{padding:20px 22px}.pq-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.pq-kicker{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#527caa;font-weight:800}.pq-card h3{font-size:1.22rem;margin:6px 0 7px;color:var(--pq-ink)}.pq-card p{font-size:.88rem;line-height:1.55;color:var(--pq-muted);margin:0}.pq-card details{border-top:1px solid var(--pq-border)}.pq-card summary{cursor:pointer;padding:11px 22px;color:var(--pq-blue);font-weight:750;font-size:.85rem;list-style:none}.pq-card summary::-webkit-details-marker{display:none}.pq-card summary:after{content:" ↓"}.pq-card details[open] summary:after{content:" ↑"}.pq-card-body{padding:4px 22px 22px}.pq-card-body h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:19px 0 8px;color:#536880}.pq-code-wrap{position:relative;background:#12213a;border-radius:10px;overflow:hidden}.pq-code-wrap pre{margin:0;padding:19px 17px;overflow-x:auto;color:#eaf4ff;font-size:.78rem;line-height:1.65;tab-size:2}.pq-code-wrap button{position:absolute;top:9px;right:9px;border:1px solid #ffffff50;border-radius:6px;background:#304c72;color:white;padding:5px 10px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}.pq-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.pq-sample{border:1px solid var(--pq-border);border-radius:9px;overflow:hidden}.pq-sample-head{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px 10px;background:#f4f7fc;font-weight:750;font-size:.77rem}.pq-sample-head button{border:0;background:none;color:var(--pq-blue);font:inherit;font-size:.75rem;cursor:pointer;text-decoration:underline}.pq-sample pre{margin:0;padding:10px;overflow:auto;white-space:pre;font-size:.74rem;line-height:1.55;color:#35435b}.pq-tip{font-size:.8rem!important;margin-top:15px!important;color:#39506b!important}.pq-note{margin-top:26px}.pq-note strong{font-size:.94rem}.pq-note p{margin:6px 0 0;font-size:.83rem;line-height:1.6;color:var(--pq-muted)}.pq-empty{padding:38px;text-align:center;background:#fff;border:1px dashed var(--pq-border);border-radius:12px;color:var(--pq-muted)}.pq-footer{border-top:1px solid var(--pq-border);background:#fff;padding:20px 0;font-size:.8rem;color:var(--pq-muted)}.pq-footer .pq-shell{display:flex;justify-content:space-between;gap:12px}.pq-footer a{color:var(--pq-blue)}
@media(max-width:800px){.pq-layout{grid-template-columns:1fr}.pq-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.pq-hero{padding:48px 0}}
@media(max-width:600px){.pq-shell{padding:0 16px}.pq-nav-inner{align-items:flex-start;flex-direction:column;padding-top:13px;padding-bottom:13px;gap:9px}.pq-nav nav{gap:13px}.pq-nav nav a{font-size:.8rem}.pq-sidebar{grid-template-columns:1fr}.pq-samples{grid-template-columns:1fr}.pq-card-head,.pq-card summary{padding-left:16px;padding-right:16px}.pq-card-body{padding-left:16px;padding-right:16px}.pq-section-heading{align-items:start;flex-direction:column}}