.otp-input{--otp-gap: .5rem;--otp-group-gap: .875rem;--otp-slot-size: 2.75rem;--otp-font-size: 1.25rem;--otp-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--otp-border-radius: .5rem;--otp-border-width: 1px;--otp-border-color: #d1d5db;--otp-border-color-focus: #3b82f6;--otp-background: #ffffff;--otp-text-color: #111827;--otp-placeholder-color: #9ca3af;--otp-error-color: #ef4444;--otp-disabled-opacity: .5;--otp-focus-ring: 0 0 0 3px rgba(59, 130, 246, .3);--otp-transition: border-color .15s ease, box-shadow .15s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:100%;container-type:inline-size}.otp-input__fields{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--otp-group-gap);width:100%;max-width:100%}.otp-input__fields[data-separated=true]{gap:var(--otp-gap)}.otp-input__group{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--otp-gap)}.otp-input__separator{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 .125rem;min-width:.75rem;font-size:calc(var(--otp-font-size) * .95);font-weight:300;line-height:1;letter-spacing:.02em;color:var(--otp-text-color);opacity:.45;-webkit-user-select:none;user-select:none}.otp-input__slot{flex:0 0 var(--otp-slot-size);width:var(--otp-slot-size);height:var(--otp-slot-size);min-width:var(--otp-slot-size);max-width:var(--otp-slot-size);padding:0;font-size:var(--otp-font-size);font-family:var(--otp-font-family);font-weight:600;font-variant-numeric:tabular-nums;text-align:center;color:var(--otp-text-color);background:var(--otp-background);border:var(--otp-border-width) solid var(--otp-border-color);border-radius:var(--otp-border-radius);outline:none;transition:var(--otp-transition);box-sizing:border-box;overflow:hidden;touch-action:manipulation}.otp-input__slot:focus{border-color:var(--otp-border-color-focus);box-shadow:var(--otp-focus-ring);z-index:1}.otp-input__slot:focus-visible{border-color:var(--otp-border-color-focus);box-shadow:var(--otp-focus-ring)}.otp-input__slot[data-filled=true]{border-color:var(--otp-border-color-focus)}.otp-input__slot:disabled{opacity:var(--otp-disabled-opacity);cursor:not-allowed}.otp-input--error .otp-input__slot,.otp-input__slot[data-error=true]{border-color:var(--otp-error-color)}.otp-input--error .otp-input__slot:focus{box-shadow:0 0 0 3px #ef44444d}.otp-input--disabled{pointer-events:none}.otp-input__autofill-capture{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}.otp-input__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.otp-input__fields[data-length="7"]{--otp-slot-size: 2.35rem;--otp-font-size: 1.125rem;--otp-gap: .4375rem;--otp-group-gap: .75rem}.otp-input__fields[data-length="8"]{--otp-slot-size: 2.125rem;--otp-font-size: 1.0625rem;--otp-gap: .375rem;--otp-group-gap: .6875rem}@container (max-width: 360px){.otp-input{--otp-slot-size: 2.25rem;--otp-font-size: 1.125rem;--otp-gap: .375rem;--otp-group-gap: .625rem}.otp-input__fields[data-length="7"]{--otp-slot-size: 2rem;--otp-font-size: 1rem}.otp-input__fields[data-length="8"]{--otp-slot-size: 1.875rem;--otp-font-size: .9375rem}}@container (max-width: 280px){.otp-input__fields[data-length="8"]{--otp-slot-size: 1.75rem;--otp-font-size: .875rem;--otp-gap: .3125rem;--otp-group-gap: .5rem}}[dir=rtl] .otp-input__fields,[dir=rtl] .otp-input__group{direction:rtl}@media(prefers-reduced-motion:reduce){.otp-input__slot{transition:none}}@media(prefers-color-scheme:dark){.otp-input{--otp-border-color: #374151;--otp-border-color-focus: #60a5fa;--otp-background: #1f2937;--otp-text-color: #f9fafb;--otp-focus-ring: 0 0 0 3px rgba(96, 165, 250, .3)}}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}.pg-app{display:grid;grid-template-columns:minmax(280px,340px) 1fr;min-height:100vh}.pg-sidebar{background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column;max-height:100vh;position:sticky;top:0}.pg-sidebar__header{padding:1.25rem 1rem 1rem;border-bottom:1px solid #334155}.pg-logo{font-size:1.125rem;font-weight:700;color:#f8fafc;letter-spacing:-.02em}.pg-sidebar__tagline{margin:.25rem 0 0;font-size:.8125rem;color:#94a3b8}.pg-sidebar__scroll{overflow-y:auto;flex:1;padding:.5rem 0 1.5rem}.pg-section{padding:.75rem 1rem;border-bottom:1px solid #334155}.pg-section__title{margin:0 0 .75rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.pg-section__body{display:flex;flex-direction:column;gap:.625rem}.pg-row{display:flex;flex-direction:column;gap:.35rem;font-size:.8125rem}.pg-row__label{color:#cbd5e1;display:flex;flex-direction:column;gap:.125rem}.pg-row__hint{font-size:.6875rem;color:#64748b;font-weight:400}.pg-row__control{display:flex;align-items:center;gap:.5rem}.pg-row input[type=text],.pg-row select{width:100%;padding:.4rem .5rem;border:1px solid #475569;border-radius:.375rem;background:#0f172a;color:#f1f5f9;font-size:.8125rem}.pg-row input[type=range]{flex:1;accent-color:#6366f1}.pg-badge{min-width:1.5rem;text-align:center;font-weight:600;color:#a5b4fc}.pg-segment{display:flex;gap:.25rem;background:#0f172a;padding:.25rem;border-radius:.5rem}.pg-segment button{flex:1;padding:.4rem .5rem;border:none;border-radius:.375rem;background:transparent;color:#94a3b8;font-size:.75rem;cursor:pointer;text-transform:capitalize}.pg-segment button.active{background:#6366f1;color:#fff}.pg-toggles{display:flex;flex-direction:column;gap:.5rem}.pg-toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#cbd5e1}.pg-toggle{width:2.5rem;height:1.375rem;border-radius:999px;border:none;background:#475569;cursor:pointer;padding:2px;transition:background .15s}.pg-toggle--on{background:#6366f1}.pg-toggle__thumb{display:block;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;transition:transform .15s}.pg-toggle--on .pg-toggle__thumb{transform:translate(1.125rem)}.pg-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.pg-actions button{padding:.5rem .75rem;border:1px solid #475569;border-radius:.375rem;background:#334155;color:#f1f5f9;font-size:.8125rem;cursor:pointer}.pg-actions button:hover{background:#475569}.pg-actions--ghost{grid-column:1 / -1;background:transparent!important;color:#94a3b8!important}.pg-main{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(145deg,#1e1b4b,#0f172a,#134e4a)}.pg-preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem}.pg-device{width:min(100%,38rem);min-height:28rem;background:#fff;border-radius:2rem;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d;overflow:hidden;color:#0f172a;transition:box-shadow .3s}.pg-device--success{box-shadow:0 0 0 3px #22c55e,0 25px 50px -12px #00000080}.pg-device--error{box-shadow:0 0 0 3px #ef4444,0 25px 50px -12px #00000080}.pg-device__bar{display:flex;justify-content:space-between;padding:.75rem 1.25rem .5rem;font-size:.75rem;font-weight:600;color:#64748b}.pg-device__icons{letter-spacing:.1em;font-size:.625rem}.pg-device__body{padding:2rem 2.75rem 2.5rem;text-align:center}.pg-device__icon{font-size:2.5rem;margin-bottom:.75rem}.pg-device__title{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;color:#0f172a}.pg-device__subtitle{margin:0 0 1.75rem;font-size:.875rem;color:#64748b;line-height:1.5}.pg-device__otp{display:flex;justify-content:center;align-items:center;margin-bottom:1.25rem;min-height:4.75rem;width:100%;overflow-x:auto;overflow-y:visible;padding:.5rem 1rem}.pg-device__otp .otp-input,.pg-device__otp .pg-themed-otp,.pg-device__otp .pg-custom-otp{width:100%;max-width:100%}.pg-device__otp .otp-input__fields{justify-content:center}.pg-device__otp .otp-input__fields[data-length="3"],.pg-device__otp .otp-input__fields[data-length="4"],.pg-device__otp .otp-input__fields[data-length="5"],.pg-device__otp .otp-input__fields[data-length="6"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-length="3"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-length="4"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-length="5"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-length="6"]{--otp-slot-size: 3rem;--otp-gap: .625rem;--otp-group-gap: .875rem;--otp-font-size: 1.375rem}.pg-device__feedback{margin:0 0 1rem;font-size:.875rem;font-weight:500}.pg-device__feedback--success{color:#16a34a}.pg-device__feedback--error{color:#dc2626}.pg-device__link{background:none;border:none;color:#6366f1;font-size:.875rem;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.pg-device__link:disabled{opacity:.4;cursor:not-allowed}.pg-verifying{display:block;text-align:center;font-size:.875rem;color:#6366f1;margin-top:.5rem}.pg-custom-otp{display:flex;flex-direction:column;align-items:center;width:100%}.pg-custom-otp .otp-input__fields{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--otp-group-gap, .75rem);width:100%}.pg-custom-otp .otp-input__group{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--otp-gap, .5rem)}.pg-custom-otp .otp-input__separator{flex:0 0 auto;padding:0 .125rem;font-size:calc(var(--otp-font-size, 1.25rem) * .95);font-weight:300;line-height:1;color:var(--otp-text-color, #0f172a);opacity:.45;-webkit-user-select:none;user-select:none}.pg-custom-slot{flex:0 0 var(--otp-slot-size, 2.75rem);width:var(--otp-slot-size, 2.75rem);height:var(--otp-slot-size, 2.75rem);min-width:var(--otp-slot-size, 2.75rem);max-width:var(--otp-slot-size, 2.75rem);padding:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;border:2px solid;outline:none;box-sizing:border-box;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}.pg-custom-slot:focus{transform:scale(1.05);box-shadow:0 4px 12px #6366f133}.pg-custom-slot--error{animation:pg-shake .35s ease}.pg-custom-slot--disabled{opacity:.5}.pg-headless-slot{flex:0 0 var(--otp-slot-size, 2.5rem);width:var(--otp-slot-size, 2.5rem);height:var(--otp-slot-size, 2.5rem);min-width:var(--otp-slot-size, 2.5rem);padding:0;font-size:var(--otp-font-size, 1.5rem);font-weight:700;font-variant-numeric:tabular-nums;text-align:center;border:none;border-bottom:3px solid #cbd5e1;background:transparent;box-sizing:border-box;overflow:hidden;outline:none}.pg-device__otp .otp-input__fields[data-separated=true]{gap:var(--otp-gap, .625rem)}.pg-device__otp .otp-input__fields[data-separated=true][data-length="3"],.pg-device__otp .otp-input__fields[data-separated=true][data-length="4"],.pg-device__otp .otp-input__fields[data-separated=true][data-length="5"],.pg-device__otp .otp-input__fields[data-separated=true][data-length="6"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="3"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="4"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="5"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="6"]{--otp-slot-size: 3rem;--otp-gap: .625rem;--otp-font-size: 1.375rem}.pg-device__otp .otp-input__fields[data-separated=true][data-length="7"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="7"]{--otp-slot-size: 2.625rem;--otp-gap: .5rem;--otp-font-size: 1.1875rem}.pg-device__otp .otp-input__fields[data-separated=true][data-length="8"],.pg-device__otp .pg-custom-otp .otp-input__fields[data-separated=true][data-length="8"]{--otp-slot-size: 2.375rem;--otp-gap: .4375rem;--otp-font-size: 1.125rem}.pg-headless-slot:focus{border-bottom-color:#6366f1}@keyframes pg-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.pg-panel{background:#1e293b;border-top:1px solid #334155;max-height:14rem;display:flex;flex-direction:column}.pg-panel__header{display:flex;align-items:center;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid #334155}.pg-panel__header h3{margin:0;font-size:.8125rem;font-weight:600;color:#94a3b8}.pg-panel__tab{padding:.25rem .625rem;border:1px solid #475569;border-radius:.25rem;background:#0f172a;color:#cbd5e1;font-size:.75rem;cursor:pointer}.pg-events{padding:.75rem 1rem;overflow-y:auto;flex:1;font-size:.8125rem}.pg-events__row{display:flex;gap:.75rem;margin-bottom:.375rem}.pg-events__key{color:#64748b;min-width:3.5rem}.pg-events code{color:#a5b4fc;font-family:ui-monospace,monospace}.pg-events__log{margin:.75rem 0 0;padding:0;list-style:none;border-top:1px solid #334155;padding-top:.5rem}.pg-events__log li{padding:.25rem 0;color:#94a3b8;font-family:ui-monospace,monospace;font-size:.75rem}.pg-events__empty{color:#64748b;font-style:italic}.pg-code{padding:.75rem 1rem;overflow:auto;flex:1;position:relative}.pg-code pre{margin:0;font-size:.75rem;line-height:1.5;color:#cbd5e1;font-family:ui-monospace,monospace}.pg-code__copy{position:absolute;top:.75rem;right:1rem;padding:.25rem .625rem;border:1px solid #475569;border-radius:.25rem;background:#334155;color:#e2e8f0;font-size:.6875rem;cursor:pointer}@media(max-width:900px){.pg-app{grid-template-columns:1fr}.pg-sidebar{max-height:none;position:relative}.pg-sidebar__scroll{max-height:50vh}}@media(max-width:480px){.pg-device{border-radius:1.25rem}.pg-device__body{padding:1rem}}