.pe-demo{--pe-accent: var(--nk-colors-accent-base, #059669);--pe-accent-strong: var(--nk-colors-accent-hover, #047857);--pe-accent-contrast: var(--nk-colors-accent-fg, #fff);--pe-accent-subtle: var(--nk-colors-accent-subtle, #ecfdf5);--pe-accent-inverted: var(--nk-colors-accent-inverted, #022c22);margin-block:1.5rem;padding:1.25rem;border:1px solid var(--nk-colors-border-base, #e5e5e5);border-radius:.5rem;background:var(--nk-colors-bg-panel, #fff);color:var(--nk-colors-fg-base, #1c1917)}.pe-demo :where(*){margin:0}.pe-demo :where(a){color:inherit;text-decoration:none}.pe-demo :where(a):before{content:none}.pe-demo.demo-external-link a{color:var(--pe-accent);font-weight:600}.pe-demo.demo-external-link a[target=_blank]:after{content:"";display:inline-block;width:.875em;height:.875em;margin-left:.25em;vertical-align:-.0625em;background-color:var(--pe-accent);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");mask-size:cover;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");-webkit-mask-size:cover}.pe-demo.demo-underline a{position:relative;display:inline-block;color:var(--pe-accent)}.pe-demo.demo-underline a:before{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;border-radius:2px;background-color:var(--pe-accent);transition:width .2s ease-in-out}.pe-demo.demo-underline a:hover:before{width:100%}.pe-demo.demo-weight-shift nav{display:flex;gap:1.5rem;font-size:1.05rem}.pe-demo.demo-weight-shift a{display:inline-flex;flex-direction:column;color:var(--pe-accent);font-weight:400}.pe-demo.demo-weight-shift a:after{content:attr(data-text) / "";height:0;font-weight:700;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}.pe-demo.demo-weight-shift a:hover{font-weight:700}.pe-demo.demo-weight-shadow nav{display:flex;gap:1.5rem;font-size:1.05rem}.pe-demo.demo-weight-shadow a{color:var(--pe-accent);text-shadow:0 0 0 transparent;transition:text-shadow .15s ease}.pe-demo.demo-weight-shadow a:hover{text-shadow:.3px 0 currentColor,-.3px 0 currentColor,0 .3px currentColor,0 -.3px currentColor}.pe-demo.demo-marker ul{padding-left:1.5rem}.pe-demo.demo-marker li{padding-left:.25rem}.pe-demo.demo-marker li::marker{content:"▸ ";color:var(--pe-accent);font-weight:700}.pe-demo.demo-marker-fallback ul{list-style:none;padding-left:0}.pe-demo.demo-marker-fallback li{position:relative;padding-left:1.5rem}.pe-demo.demo-marker-fallback li:before{content:"▸";position:absolute;left:0;color:var(--pe-accent);font-weight:700}.pe-demo.demo-drop-cap p:first-letter{float:left;margin-block-start:.1em;margin-right:.2em;padding:.1em .15em;font-size:2.5em;font-weight:700;line-height:.85;color:var(--pe-accent-contrast);background:var(--pe-accent-inverted);box-shadow:.25rem .25rem var(--pe-accent);border-radius:.25rem}.pe-demo.demo-first-line p{overflow:hidden;resize:horizontal;min-width:14rem;max-width:100%}.pe-demo.demo-first-line p:first-line{font-variant:small-caps;letter-spacing:.03em;font-weight:600}.pe-demo.demo-blockquote blockquote{position:relative;padding:1em 1.25em .5em;border-left:4px solid var(--pe-accent);background:var(--pe-accent-subtle);font-style:italic}.pe-demo.demo-blockquote blockquote:before{content:"“" / "";position:absolute;left:.08em;top:-.08em;font-family:Georgia,Times New Roman,serif;font-size:4em;line-height:1;color:var(--pe-accent);opacity:.28}.pe-demo.demo-blockquote blockquote:after{content:"”" / "";position:absolute;right:.2em;bottom:.1em;font-family:Georgia,Times New Roman,serif;font-size:4em;line-height:1;color:var(--pe-accent);opacity:.28}.pe-demo.demo-blockquote footer{margin-top:.5em;font-style:normal;font-size:.9em;color:var(--nk-colors-fg-muted, #57534e);text-align:right}.pe-demo.demo-q q{quotes:"“" "”" "‘" "’";font-style:italic}.pe-demo.demo-q q:before,.pe-demo.demo-q q:after{color:var(--pe-accent);font-weight:700}.pe-demo.demo-image-overlay .promo-card{max-width:26rem}.pe-demo.demo-image-overlay .promo-media{position:relative;overflow:hidden;border-radius:10px}.pe-demo.demo-image-overlay .promo-media>img,.pe-demo.demo-image-overlay .promo-media>.photo{display:block;width:100%;height:13rem;object-fit:cover;transition:transform .4s ease;background:linear-gradient(135deg,#6d28d9,#2563eb)}.pe-demo.demo-image-overlay .promo-media:hover>img,.pe-demo.demo-image-overlay .promo-media:hover>.photo{transform:scale(1.05)}.pe-demo.demo-image-overlay .promo-media:after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(to top,#000000bf,#0000 60%);pointer-events:none}.pe-demo.demo-image-overlay .promo-media:before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:#0006;opacity:0;transition:opacity .4s ease;pointer-events:none}.pe-demo.demo-image-overlay .promo-media:hover:before{opacity:1}.pe-demo.demo-image-overlay .promo-overlay{position:absolute;right:1rem;bottom:.875rem;left:1rem;z-index:2;color:#fff}.pe-demo.demo-image-overlay .promo-overlay p{margin-top:.15rem;font-size:.9rem;opacity:.9}.pe-demo.demo-card-crossfade .card{position:relative;overflow:hidden;max-width:22rem;padding:1.5rem;border-radius:10px;color:#fff;background:linear-gradient(45deg,#ff758c,#ff7eb3);transition:transform .3s ease}.pe-demo.demo-card-crossfade .card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(45deg,#667eea,#764ba2);opacity:0;transition:opacity .5s ease-in-out}.pe-demo.demo-card-crossfade .card:hover:before{opacity:1}.pe-demo.demo-card-crossfade .card:hover{transform:translateY(-4px)}.pe-demo.demo-card-crossfade .card>*{position:relative;z-index:1}.pe-demo.demo-card-crossfade .card>*+*{margin-top:.5rem}.pe-demo.demo-hover-bridge{position:relative;z-index:0;padding-bottom:10rem}.pe-demo.demo-hover-bridge:hover,.pe-demo.demo-hover-bridge:focus-within{z-index:5}.pe-demo.demo-hover-bridge .bridge-cols{display:flex;flex-wrap:wrap;gap:2rem}.pe-demo.demo-hover-bridge nav{flex:1 1 12rem}.pe-demo.demo-hover-bridge .col-label{display:block;margin-bottom:.5rem;font-size:.8rem;font-weight:600;color:var(--nk-colors-fg-muted, #57534e)}.pe-demo.demo-hover-bridge nav>ul{display:flex;gap:.25rem;list-style:none;padding:0}.pe-demo.demo-hover-bridge nav>ul>li>a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:8px;font-weight:500;transition:background .15s ease}.pe-demo.demo-hover-bridge nav>ul>li>a:hover{background:var(--pe-accent-subtle)}.pe-demo.demo-hover-bridge .has-menu{position:relative}.pe-demo.demo-hover-bridge .has-menu>a:after{content:"";width:.4em;height:.4em;border:.14em solid currentColor;border-top:0;border-inline-start:0;transform:translateY(-.12em) rotate(45deg);transition:transform .18s ease}.pe-demo.demo-hover-bridge .has-menu:hover>a:after,.pe-demo.demo-hover-bridge .with-bridge .has-menu:focus-within>a:after{transform:translateY(.06em) rotate(-135deg)}.pe-demo.demo-hover-bridge .submenu{position:absolute;top:calc(100% + 12px);left:0;z-index:5;min-width:13rem;margin:0;padding:.4rem;list-style:none;border:1px solid var(--nk-colors-border-base, #e5e5e5);border-radius:14px;background:var(--nk-colors-bg-elevated, #fff);box-shadow:0 12px 28px #0000001f;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}.pe-demo.demo-hover-bridge .submenu a{display:block;padding:.55rem .7rem;border-radius:9px;font-weight:500;transition:background .15s ease}.pe-demo.demo-hover-bridge .submenu a:hover{background:var(--pe-accent-subtle)}.pe-demo.demo-hover-bridge .with-bridge .has-menu:before{content:"";position:absolute;top:100%;left:0;width:100%;height:12px}.pe-demo.demo-hover-bridge .has-menu:hover .submenu,.pe-demo.demo-hover-bridge .with-bridge .has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}.pe-demo.demo-placeholder label{display:block;margin-bottom:.5rem;font-weight:600}.pe-demo.demo-placeholder input{width:100%;max-width:22rem;height:40px;padding-inline:12px;border:2px solid #767676;border-radius:4px;background:#fff;color:#1a1a1a;font-size:1rem}.pe-demo.demo-placeholder input:focus-visible{border-color:var(--pe-accent);outline:none}.pe-demo.demo-placeholder input::placeholder{color:#767676}.pe-demo.demo-selection ::selection{background-color:color-mix(in srgb,var(--pe-accent) 25%,transparent)}.pe-demo.demo-required label{font-weight:600}.pe-demo.demo-required label.required:after{content:"*";margin-left:.25rem;color:#dc2626}.pe-demo.demo-required input{display:block;margin-top:.5rem;width:100%;max-width:22rem;height:40px;padding-inline:12px;border:2px solid #767676;border-radius:4px;background:#fff;color:#1a1a1a;font-size:1rem}.pe-demo.demo-required input:focus-visible{border-color:var(--pe-accent);outline:none}.pe-demo.demo-controls .control{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer}.pe-demo.demo-controls fieldset{margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--nk-colors-border-base, #e5e5e5);border-radius:.375rem}.pe-demo.demo-controls legend{padding-inline:.4rem;font-weight:600}.pe-demo.demo-controls input[type=checkbox],.pe-demo.demo-controls input[type=radio]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:1.15em;height:1.15em;border:2px solid var(--nk-colors-border-strong, #a8a29e);cursor:pointer}.pe-demo.demo-controls input[type=checkbox]{border-radius:4px}.pe-demo.demo-controls input[type=radio]{border-radius:50%}.pe-demo.demo-controls input[type=checkbox]:before,.pe-demo.demo-controls input[type=radio]:before{content:"";transform:scale(0);transition:transform .12s ease-in-out;background:var(--pe-accent)}.pe-demo.demo-controls input[type=checkbox]:before{width:.65em;height:.65em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}.pe-demo.demo-controls input[type=radio]:before{width:.6em;height:.6em;border-radius:50%}.pe-demo.demo-controls input:checked{border-color:var(--pe-accent)}.pe-demo.demo-controls input:checked:before{transform:scale(1)}.pe-demo.demo-controls input:focus-visible{outline:2px solid dodgerblue;outline-offset:2px}.pe-demo.demo-backdrop .open-dialog{padding:.5rem 1rem;border:none;border-radius:6px;background:var(--pe-accent);color:var(--pe-accent-contrast);font-size:1rem;cursor:pointer}.pe-demo.demo-backdrop dialog{margin:auto;max-width:24rem;padding:0;border:none;border-radius:10px;background:var(--nk-colors-bg-elevated, #fff);color:var(--nk-colors-fg-base, #1c1917);opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .2s ease,overlay .2s ease allow-discrete,display .2s ease allow-discrete}.pe-demo.demo-backdrop dialog[open]{opacity:1;transform:scale(1)}@starting-style{.pe-demo.demo-backdrop dialog[open]{opacity:0;transform:scale(.96)}}.pe-demo.demo-backdrop .dialog-body{padding:1.5rem}.pe-demo.demo-backdrop .dialog-body h4{margin-bottom:.5rem}.pe-demo.demo-backdrop .dialog-body p{color:var(--nk-colors-fg-muted, #57534e)}.pe-demo.demo-backdrop .dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}.pe-demo.demo-backdrop .dialog-actions button{padding:.4rem .9rem;border:1px solid var(--nk-colors-border-strong, #a8a29e);border-radius:6px;background:transparent;color:inherit;font-size:.95rem;cursor:pointer}.pe-demo.demo-backdrop .dialog-actions button.primary{border-color:transparent;background:var(--pe-accent);color:var(--pe-accent-contrast)}.pe-demo.demo-backdrop dialog::backdrop{background:#00000080;backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,overlay .2s ease allow-discrete,display .2s ease allow-discrete}.pe-demo.demo-backdrop dialog[open]::backdrop{opacity:1}@starting-style{.pe-demo.demo-backdrop dialog[open]::backdrop{opacity:0}}