.demo-hero{padding-bottom:8px}.demo-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.demo-guide{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--pl-radius-md);border:1.5px solid var(--pl-line);background:var(--pl-surface);color:var(--pl-text);text-decoration:none;line-height:1.3}.demo-guide:hover{border-color:var(--pl-line-strong)}.demo-guide:focus-visible{outline:none;box-shadow:var(--pl-focus-ring)}.demo-guide .numeral{background:var(--pl-surface-2);box-shadow:none;color:var(--pl-text)}.demo-guide[aria-current=true]{border-color:var(--pl-marigold-400);box-shadow:inset 0 0 0 1px var(--pl-marigold-400)}.demo-guide[aria-current=true] .numeral{background:var(--pl-marigold-400);color:var(--pl-on-brand)}.demo-guide b{display:block;font-size:var(--pl-fs-lg)}.demo-guide__sub{display:block;margin-top:2px;color:var(--pl-text-muted);font-size:var(--pl-fs-sm)}.demo-modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}.demo-modes__label{font-weight:var(--pl-fw-bold);color:var(--pl-text-muted);margin-inline-end:4px;font-size:var(--pl-fs-sm)}.demo-modes a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:var(--pl-radius-pill);border:1px solid var(--pl-line-strong);background:var(--pl-surface);color:var(--pl-text);font-weight:var(--pl-fw-bold);font-size:var(--pl-fs-sm);text-decoration:none}.demo-modes a:hover{background:var(--pl-surface-2)}.demo-modes a[aria-current=true]{background:var(--pl-ink);color:var(--pl-paper);border-color:var(--pl-ink)}.demo-modes a:focus-visible{outline:none;box-shadow:var(--pl-focus-ring)}.demo-frame{margin-top:20px;border:1px solid var(--pl-line);border-radius:var(--pl-radius-lg);overflow:hidden;background:var(--pl-surface);box-shadow:var(--pl-shadow-e3)}.demo-frame__bar{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 8px 4px 14px;background:var(--pl-surface-2);border-bottom:1px solid var(--pl-line)}.demo-frame__name{flex:1;min-width:0;font-family:var(--pl-font-mono);font-size:13px;color:var(--pl-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-frame__open{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;font-weight:var(--pl-fw-bold);font-size:var(--pl-fs-sm);border-radius:var(--pl-radius-xs)}.demo-frame__open .ico{width:16px;height:16px}.demo-frame iframe{display:block;width:100%;height:min(84vh,920px);min-height:520px;border:0;background:var(--pl-paper)}.browser__dots{display:flex;gap:6px}.browser__dots i{width:10px;height:10px;border-radius:50%;background:var(--pl-line-strong)}.browser__dots i:first-child{background:var(--pl-coral-500)}.browser__dots i:nth-child(2){background:var(--pl-marigold-400)}.demo-tips{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.demo-tips h2{font-size:1.6rem}.demo-cta{padding:24px;border-radius:var(--pl-radius-md);background:var(--pl-surface-2);border:1px solid var(--pl-line)}.demo-cta p{margin:10px 0 18px;color:var(--pl-text-muted)}.checks{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px}.checks li{position:relative;padding-inline-start:30px}.checks li:before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:12px;border-radius:4px;background:var(--pl-marigold-400)}@media(max-width:760px){.demo-pick,.demo-tips{grid-template-columns:minmax(0,1fr)}.demo-frame iframe{height:78vh;min-height:460px}.demo-frame{border-radius:var(--pl-radius-md);margin-inline:calc(-1 * var(--site-gutter) / 2)}}