.ph-demo{max-width:1040px;margin:35px auto 60px;padding:0 24px;color:#182c48}.ph-demo .ph-nav{display:flex;justify-content:space-between;font-size:16px;margin-bottom:28px}.ph-demo h1{font-size:clamp(28px,4vw,42px);margin:8px 0 14px}.ph-demo header>p:last-child{font-size:19px;max-width:850px}.ph-demo .ph-eyebrow{color:#008ba2;font-size:14px;font-weight:700;margin:0}.ph-controls{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px;margin:24px 0 16px;font-size:16px}.ph-controls button{border:0;border-radius:6px;background:#087e96;color:#fff;padding:11px 17px;font:inherit;cursor:pointer}.ph-controls button.ph-secondary{background:#eaf0f5;color:#182c48}.ph-controls label{display:flex;align-items:center;gap:9px;margin:0}.ph-controls label[for=ph-gain]{display:grid;grid-template-columns:auto auto;gap:3px 12px}.ph-controls input[type=range]{grid-column:1/-1;width:220px;accent-color:#087e96}.ph-controls output{font-variant-numeric:tabular-nums;font-weight:700}.ph-stage{border:1px solid #c9d9e5;border-radius:12px;overflow:hidden;background:#f5f9fc}#ph-canvas{display:block;width:100%;height:clamp(300px,46vh,460px);touch-action:none;cursor:grab}#ph-canvas.ph-active{cursor:none}.ph-demo :focus-visible{outline:3px solid #008ba2;outline-offset:4px}.ph-status{font-size:16px;font-weight:600;min-height:26px;margin:12px 0 4px}.ph-help,.ph-demo details{font-size:16px;line-height:1.6}.ph-demo details{border-top:1px solid #d7e1e9;padding-top:14px;margin-top:22px}.ph-demo summary{cursor:pointer;font-weight:600}@media(max-width:600px){.ph-demo{padding:0 16px}.ph-controls{gap:16px}.ph-controls label[for=ph-gain]{order:3}}