/* All interactive tools stay on the landing page. */
.pc-inline-demo { --pc-demo-wash: radial-gradient(ellipse at 15% 65%,#8357733b,transparent 58%),radial-gradient(ellipse at 82% 5%,#38777540,transparent 60%); box-sizing: border-box; padding: 0; border: 1px solid #546874; border-radius: 14px; background: var(--pc-demo-wash),#0c141d; color: #e5edf3; width: min(1232px,calc(100% - 48px)); max-width: none; max-height: calc(100svh - 40px); overflow: hidden; box-shadow: 0 40px 140px #000b; }
.pc-inline-demo { margin: auto; inset: 0; }
.pc-inline-demo[open] { display: flex; flex-direction: column; }
.pc-inline-demo::backdrop { background: #02060deb; backdrop-filter: blur(12px); }
.pc-inline-demo::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--rainbow-grad); }
.pc-inline-demo-header { padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 0 0 auto; border-bottom: 1px solid #41515f; }
.pc-inline-demo-header h2 { font: 500 16px/1.4 Inter,sans-serif; margin: 0; }
.pc-inline-demo-header p { font: 11px/1.5 Inter,sans-serif; color: #a9bdc8; margin: 3px 0 0; }
.pc-inline-demo-actions { display: flex; align-items: center; gap: 20px; }
.pc-inline-demo-back { color: #b8d6cc; font: 11px/1.3 Inter,sans-serif; background: #1c3035; border: 1px solid #526e72; border-radius: 4px; padding: 8px; cursor: pointer; }
.pc-inline-demo-back[hidden] { display: none !important; }
.pc-demo-languages { display: flex; gap: 4px; }
.pc-demo-languages button { border: 1px solid #455e6b; border-radius: 4px; background: #192730; color: #b8c7d0; padding: 7px 8px; font: 11px/1.2 Inter,sans-serif; cursor: pointer; }
.pc-demo-languages button[aria-pressed=true] { background: #a8cebf; border-color: #a8cebf; color: #112823; }
.pc-inline-demo-close { width: 36px; height: 36px; display: grid; place-items: center; color: #e1edf1; border: 1px solid #546874; border-radius: 6px; background: #1a2a34; cursor: pointer; padding: 0; }
.pc-inline-demo button:focus-visible { outline: 2px solid #b6dfd0; outline-offset: 3px; }
.pc-inline-demo-content { overflow-y: auto; min-height: 0; overscroll-behavior: contain; padding: 22px; scrollbar-color: #65808a #14222c; }
.pc-inline-demo-content > [hidden] { display: none !important; }
.pc-inline-demo[data-demo=app] { width: min(1232px,calc(100% - 48px),calc((100svh - 146px)*1.47368421 + 24px)); }
.pc-inline-demo[data-demo=app] .pc-inline-demo-content { padding: 12px; overflow: hidden; }
.pc-inline-app-frame { display: block; width: 100%; height: auto; aspect-ratio: 1120 / 760; border: 0; background: #091824; border-radius: 6px; }
html.pc-demo-open { overflow: hidden; scrollbar-gutter: stable; }
.pc-tool-launch { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; font: 500 12px/1.4 Inter,sans-serif; border: 1px solid #6d8d87; border-radius: 5px; padding: 11px 13px; background: #27403f; color: #d1eee4; cursor: pointer; }
.pc-tool-launch:hover { background: #34514c; }
.pc-tool-launch:focus-visible,.pc-audio-example-play:focus-visible { outline: 2px solid #b6dfd0; outline-offset: 4px; }
.pc-audio-example-play { position: absolute; inset: auto 20px 14px; z-index: 2; width: max-content; max-width: calc(100% - 40px); display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #253c41; border: 1px solid #7da499; border-radius: 6px; color: #d2f1e3; font: 500 12px/1.4 Inter,sans-serif; cursor: pointer; }
.pc-audio-play-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; }
.pc-audio-visual[data-playing=true] .pc-waveform i { animation: pc-audio-bars 800ms ease-in-out infinite alternate; }
.pc-audio-visual[data-playing=true] .pc-waveform i:nth-child(2n) { animation-delay: -350ms; }
.pc-audio-visual[data-playing=true] .pc-waveform i:nth-child(3n) { animation-delay: -600ms; }
@keyframes pc-audio-bars { to { transform: scaleY(.4); } }
:root[data-motion=paused] .pc-audio-visual .pc-waveform i { animation: none; }
@media (max-width:760px) { .pc-inline-demo { width: calc(100% - 20px); max-height: calc(100svh - 20px); border-radius: 10px; } .pc-inline-demo[data-demo=app] { width: min(calc(100% - 20px),calc((100svh - 142px)*1.47368421 + 16px)); } .pc-inline-demo-header { padding: 12px; gap: 10px; } .pc-inline-demo-header h2 { font-size: 13px; } .pc-inline-demo-header p { font-size: 10px; } .pc-inline-demo-actions { gap: 8px; } .pc-inline-demo-close { width: 32px; height: 32px; } .pc-inline-demo-content { padding: 14px; } .pc-inline-demo[data-demo=app] .pc-inline-demo-content { padding: 8px; } .pc-demo-languages button { font-size: 10px; padding: 7px 6px; } }
@media (prefers-reduced-motion:reduce) { .pc-audio-visual[data-playing=true] .pc-waveform i { animation: none; } }
@media (max-width:480px) { .pc-inline-demo-header { flex-wrap: wrap; align-items: start; } .pc-inline-demo-actions { margin-left: auto; } .pc-inline-demo-back { font-size: 10px; } }