.pns{--pns-bg: #f8fafc;--pns-panel: #fff;--pns-ink: #102033;--pns-muted: #667085;--pns-line: #d7dee8;--pns-blue: #0284c7;--pns-green: #16a34a;--pns-amber: #d97706;--pns-shadow: 0 24px 60px rgba(15, 23, 42, .16);width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);gap:1rem;padding:1rem;border:1px solid var(--pns-line);border-radius:8px;background:linear-gradient(135deg,rgba(2,132,199,.13),transparent 34%),linear-gradient(315deg,rgba(217,119,6,.16),transparent 28%),var(--pns-bg);box-shadow:var(--pns-shadow);color:var(--pns-ink)}.theme-dark .pns{--pns-bg: #101418;--pns-panel: #171c22;--pns-ink: #e5edf7;--pns-muted: #9aa8b8;--pns-line: #2c3540;--pns-blue: #38bdf8;--pns-green: #4ade80;--pns-amber: #fbbf24;--pns-shadow: 0 24px 60px rgba(0, 0, 0, .34)}.pns__scope{position:relative;min-height:23rem;overflow:hidden;border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(100,116,139,.16) 49px 50px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(100,116,139,.14) 39px 40px),#08111d}.pns__canvas{position:absolute;inset:0;width:100%;height:100%}.pns__readout{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;gap:.75rem;color:#dbeafe;font-size:.85rem}.pns__readout strong{color:#fef3c7;font-weight:700}.pns__play{position:absolute;left:50%;top:50%;width:5.25rem;height:5.25rem;display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:#ffffff1f;color:#fff;transform:translate(-50%,-50%);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.pns__play:hover{background:#fff3}.pns__play-icon,.pns__play-icon svg{width:2.25rem;height:2.25rem}.pns__desk{display:grid;gap:1rem}.pns__types,.pns__mix,.pns__timer{border:1px solid var(--pns-line);border-radius:8px;background:var(--pns-panel)}.pns__types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:.65rem}.pns__type{min-height:3rem;border:1px solid var(--pns-line);border-radius:8px;background:transparent;color:var(--pns-muted);font-weight:800;cursor:pointer}.pns__type[data-active=true]{border-color:var(--pns-blue);background:#0284c71f;color:var(--pns-blue)}.pns__mix{display:grid;gap:1rem;padding:1rem}.pns__fader{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;color:var(--pns-muted);font-size:.82rem;font-weight:800;text-transform:uppercase}.pns__fader output{color:var(--pns-ink);font-size:1rem}.pns__fader input{grid-column:1 / -1;width:100%;accent-color:var(--pns-green)}.pns__timer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;color:var(--pns-muted);font-size:.82rem;font-weight:800;text-transform:uppercase}.pns__timer-picker{position:relative;min-width:9rem}.pns__timer-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--pns-line);border-radius:8px;padding:.68rem .72rem .68rem .9rem;background:linear-gradient(135deg,rgba(56,189,248,.12),transparent 55%),var(--pns-bg);color:var(--pns-ink);font:inherit;font-size:.88rem;text-align:left;cursor:pointer;box-shadow:inset 0 1px #ffffff57}.pns__timer-trigger:hover,.pns__timer-trigger[aria-expanded=true]{border-color:var(--pns-blue)}.pns__timer-trigger:focus-visible{outline:3px solid rgba(56,189,248,.28);outline-offset:2px}.pns__timer-chevron{width:1.15rem;height:1.15rem;display:grid;place-items:center;color:var(--pns-blue);transition:transform .18s ease}.pns__timer-chevron svg{width:1.15rem;height:1.15rem}.pns__timer-trigger[aria-expanded=true] .pns__timer-chevron{transform:rotate(180deg)}.pns__timer-menu{position:absolute;z-index:20;top:calc(100% + .45rem);right:0;width:100%;display:grid;gap:.25rem;padding:.35rem;border:1px solid var(--pns-line);border-radius:8px;background:var(--pns-panel);box-shadow:0 18px 42px #0f172a33}.theme-dark .pns__timer-menu{box-shadow:0 18px 42px #00000075}.pns__timer-menu[hidden]{display:none}.pns__timer-menu button{min-height:2.45rem;border:0;border-radius:7px;padding:.55rem .7rem;background:transparent;color:var(--pns-muted);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}.pns__timer-menu button:hover,.pns__timer-menu button[aria-selected=true]{background:#0284c721;color:var(--pns-blue)}.theme-dark .pns__timer-menu button:hover,.theme-dark .pns__timer-menu button[aria-selected=true]{background:#38bdf826}@media(max-width:780px){.pns{grid-template-columns:1fr}.pns__scope{min-height:18rem}}@media(max-width:480px){.pns{padding:.75rem}.pns__types{grid-template-columns:1fr}.pns__readout{flex-direction:column}}