.page-phononic-band-gap-observatory .lab-hero h1{font-size:clamp(1.8rem,3.6vw,3rem)}
.ph-app{width:min(var(--max),calc(100% - 32px));margin:0 auto 2rem;display:grid;gap:16px;min-width:0}
.ph-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:16px;align-items:start}
.ph-app .panel-line{padding:20px;min-width:0}.ph-app h2{font-size:1.2rem;line-height:1.4;margin:.4rem 0 1rem}.ph-app p{color:#a0bbb7;font-size:.85rem;line-height:1.65}
.ph-app canvas{width:100%;height:auto;display:block;border:1px solid var(--line);touch-action:pan-y;cursor:crosshair;min-height:44px}.ph-app canvas[hidden]{display:none}
.ph-controls label{display:grid;gap:4px;margin:16px 0;font-size:.85rem}.ph-controls input{width:100%;accent-color:var(--cyan)}.ph-controls output{color:var(--cyan);float:right}
.ph-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.ph-actions button,.ph-actions a{flex:1 1 80px;min-height:44px;border:1px solid var(--line);background:rgba(120,246,231,.06);color:var(--text);padding:10px;font:700 .75rem monospace;cursor:pointer;text-align:center}
.ph-actions button[aria-pressed=true]{background:rgba(120,246,231,.19);border-color:var(--cyan);color:var(--cyan)}.ph-actions [hidden]{display:none}
.ph-app :is(button,a,input,canvas,summary):focus-visible{outline:2px solid var(--amber);outline-offset:3px}.ph-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0}.ph-metrics>div{padding:10px;border:1px solid var(--line);min-width:0}.ph-metrics dt{font-size:.73rem;color:var(--muted)}.ph-metrics dd{margin:7px 0 0;font:.86rem monospace;overflow-wrap:anywhere;color:var(--cyan)}
.ph-app pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.75rem/1.5 monospace;max-height:26rem;overflow:auto}.ph-app summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--cyan)}.ph-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ph-notes code{overflow-wrap:anywhere;white-space:normal}.ph-app li{margin:10px 0;color:#a0bbb7;font-size:.85rem;line-height:1.6}
@media(max-width:800px){.ph-layout,.ph-notes{grid-template-columns:1fr}.ph-app .panel-line{padding:14px}.ph-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ph-app{width:calc(100% - 22px)}.ph-app h2{font-size:1.05rem}.ph-app .panel-line{padding:12px}.ph-metrics dd{font-size:.78rem}}