.pk{--pk-bg:#0b0e1c;--pk-surface:#12162b;--pk-surface-2:#181d38;--pk-line:rgba(142,162,255,.16);--pk-line-strong:rgba(142,162,255,.32);--pk-text:#eef0ff;--pk-muted:#aab2d8;--pk-accent:#8ea2ff;--pk-purple:#6900c7;--pk-purple-2:#7c3aed;--pk-green:#38e08a;--pk-radius:16px;--pk-focus:0 0 0 3px #0b0e1c,0 0 0 5px #8ea2ff;display:block;background:var(--pk-bg);color:var(--pk-text);font-variant-numeric:tabular-nums}
.pk a{color:var(--pk-accent)}
.pk a:hover,.pk a:focus{color:#c3ceff;text-decoration:none}
.pk :focus-visible{outline:none;box-shadow:var(--pk-focus);border-radius:10px}
.pk h1,.pk h2,.pk h3{color:#fff;letter-spacing:-.02em}
.pk-hero{position:relative;overflow:hidden;padding:84px 0 72px;background:radial-gradient(ellipse 55% 70% at 85% 40%,rgba(79,124,247,.26),transparent 65%),radial-gradient(ellipse 40% 60% at 5% 0%,rgba(105,0,199,.28),transparent 60%),linear-gradient(180deg,#0c1022 0%,#0b0e1c 100%)}
.pk-hero::before{content:'';position:absolute;inset:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(30deg,rgba(142,162,255,.6) 0 1px,transparent 1px 64px),repeating-linear-gradient(-30deg,rgba(142,162,255,.6) 0 1px,transparent 1px 64px);-webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 80% 50%,#000 10%,transparent 70%)}
.pk-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.pk-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(56,224,138,.1);border:1px solid rgba(56,224,138,.34);color:#b9f5d4;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.pk-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;line-height:1.08;margin:0 0 18px}
.pk-accent{background:linear-gradient(120deg,#d9e0ff,#8ea2ff 45%,#a46bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-lead{font-size:1.12rem;line-height:1.6;color:var(--pk-muted);max-width:560px;margin:0 0 30px}
.pk-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.pk-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.pk .pk-btn:hover,.pk .pk-btn:focus,.pk .pk-btn:active{text-decoration:none}
.pk .pk-btn-primary{background:linear-gradient(120deg,#6900c7,#4f7cf7);color:#fff;box-shadow:0 10px 28px -10px rgba(105,0,199,.7)}
.pk .pk-btn-primary:hover,.pk .pk-btn-primary:focus{color:#fff;transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(105,0,199,.85)}
.pk .pk-btn-primary:focus-visible{box-shadow:var(--pk-focus)}
.pk .pk-btn-primary:active{transform:translateY(0)}
.pk .pk-btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--pk-line-strong);color:var(--pk-text)}
.pk .pk-btn-ghost:hover,.pk .pk-btn-ghost:focus{color:#fff;border-color:var(--pk-accent);background:rgba(142,162,255,.08)}
.pk-btn-meta{font-weight:600;font-size:.82rem;color:var(--pk-muted)}
.pk-hero-meta{font-size:.9rem;color:var(--pk-muted);margin:0 0 6px}
.pk-hero-langs{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.9rem;color:var(--pk-muted);margin:0}
.pk-hero-langs a{font-weight:600}
.pk-hero-langs a span{color:var(--pk-muted);font-weight:500}
.pk-hero-stack{position:relative;height:440px}
.pk-hero-stack img{position:absolute;display:block;height:auto;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(142,162,255,.2)}
.pk-stack-tall{width:34%;right:3%;top:0;transform:rotate(4deg)}
.pk-stack-square{width:40%;left:5%;top:3%;transform:rotate(-5deg)}
.pk-stack-wide{width:76%;left:0;bottom:0;z-index:2}
.pk-subnav{position:sticky;top:0;z-index:20;background:rgba(11,14,28,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--pk-line);border-bottom:1px solid var(--pk-line)}
.pk-subnav .container{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.pk-subnav .container::-webkit-scrollbar{display:none}
.pk .pk-subnav a{flex:none;padding:8px 14px;border-radius:999px;color:var(--pk-muted);font-weight:600;font-size:.92rem;white-space:nowrap}
.pk .pk-subnav a:hover,.pk .pk-subnav a:focus{color:#fff;background:rgba(142,162,255,.1)}
.pk-section{padding:80px 0;scroll-margin-top:60px}
.pk-section-alt{background:linear-gradient(180deg,rgba(142,162,255,.035),rgba(142,162,255,.015))}
.pk-head{max-width:680px;margin:0 0 36px}
.pk-head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:0 0 10px}
.pk-head p{color:var(--pk-muted);font-size:1.05rem;line-height:1.6;margin:0}
.pk-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pk-logo-card{display:flex;flex-direction:column;background:var(--pk-surface);border:1px solid var(--pk-line);border-radius:var(--pk-radius);overflow:hidden}
.pk-logo-stage{display:flex;align-items:center;justify-content:center;height:180px;padding:24px;border-bottom:1px solid var(--pk-line)}
.pk-logo-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pk-stage-dark{background:radial-gradient(circle at 50% 40%,rgba(79,124,247,.18),transparent 65%),#0e1120}
.pk-stage-light{background:#f5f6fb}
.pk-stage-avatar img{border-radius:22%;max-height:132px}
.pk-logo-body{display:flex;flex-direction:column;flex:1;padding:20px}
.pk-logo-body h3{font-size:1.08rem;font-weight:700;margin:0 0 6px}
.pk-logo-body p{font-size:.92rem;line-height:1.55;color:var(--pk-muted);margin:0 0 16px}
.pk-files{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pk .pk-files a{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--pk-line);color:var(--pk-text);font-size:.9rem;transition:border-color .15s ease,background-color .15s ease}
.pk .pk-files a:hover,.pk .pk-files a:focus{border-color:var(--pk-accent);background:rgba(142,162,255,.08);color:#fff}
.pk-files i{color:var(--pk-accent);font-size:.8rem}
.pk-file-dims{font-weight:700;white-space:nowrap}
.pk-file-meta{margin-left:auto;color:var(--pk-muted);font-size:.8rem;white-space:nowrap}
.pk-controls{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-end;margin-bottom:28px}
.pk-control{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%}
.pk-control-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pk-muted)}
.pk-tabs{display:flex;flex-wrap:wrap;gap:6px}
.pk-tab{appearance:none;cursor:pointer;min-height:42px;padding:9px 16px;border-radius:999px;border:1px solid var(--pk-line-strong);background:transparent;color:var(--pk-text);font:inherit;font-weight:600;font-size:.93rem;line-height:1.2;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.pk-tab:hover{border-color:var(--pk-accent);background:rgba(142,162,255,.08)}
.pk-tab[aria-selected=true]{background:#fff;border-color:#fff;color:#14142a}
.pk-tab:focus-visible{box-shadow:var(--pk-focus)}
.pk-tabs-seg{gap:0;padding:4px;border-radius:999px;border:1px solid var(--pk-line-strong)}
.pk-tabs-seg .pk-tab{border-color:transparent;min-width:52px;justify-content:center}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.pk-banner{display:flex;flex-direction:column;background:var(--pk-surface);border:1px solid var(--pk-line);border-radius:var(--pk-radius);overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.pk-banner[hidden]{display:none}
.pk-banner:hover{border-color:var(--pk-line-strong)}
.pk-banner-stage{display:flex;align-items:center;justify-content:center;height:210px;padding:16px;background:repeating-conic-gradient(#121630 0 25%,#0f1328 0 50%) 0 0/20px 20px}
.pk-banner-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 10px 26px -12px rgba(0,0,0,.8)}
.pk-banner-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--pk-line)}
.pk-banner-size{font-size:1rem;font-weight:700;margin:0 0 2px;white-space:nowrap}
.pk-banner-use{font-size:.84rem;color:var(--pk-muted);margin:0;line-height:1.4}
.pk .pk-dl{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;background:rgba(142,162,255,.12);border:1px solid var(--pk-line-strong);color:#fff;font-weight:700;font-size:.84rem;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease}
.pk .pk-dl:hover,.pk .pk-dl:focus{background:var(--pk-purple);border-color:var(--pk-purple);color:#fff}
.pk-empty{display:flex;gap:10px;align-items:center;padding:22px;border-radius:var(--pk-radius);border:1px dashed var(--pk-line-strong);color:var(--pk-muted);margin:0}
.pk-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pk-swatch{appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:0 0 16px;border-radius:var(--pk-radius);border:1px solid var(--pk-line);background:var(--pk-surface);color:var(--pk-text);font:inherit;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.pk-swatch:hover{border-color:var(--pk-line-strong);transform:translateY(-2px)}
.pk-swatch:focus-visible{box-shadow:var(--pk-focus)}
.pk-swatch-chip{display:block;width:100%;height:96px;margin-bottom:12px;border-bottom:1px solid var(--pk-line)}
.pk-chip-6900c7{background:#6900c7}
.pk-chip-4f7cf7{background:#4f7cf7}
.pk-chip-8ea2ff{background:#8ea2ff}
.pk-chip-38e08a{background:#38e08a}
.pk-chip-0e1120{background:#0e1120;box-shadow:inset 0 0 0 1px var(--pk-line-strong)}
.pk-swatch-name,.pk-swatch-hex,.pk-swatch-use{padding:0 16px}
.pk-swatch-name{font-weight:700;font-size:.98rem}
.pk-swatch-hex{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--pk-accent);letter-spacing:.03em}
.pk-swatch-hex i{font-size:.8rem;opacity:.8}
.pk-swatch-use{font-size:.84rem;color:var(--pk-muted)}
.pk-swatch.is-copied .pk-swatch-hex{color:var(--pk-green)}
.pk-snippets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pk-snippet{display:flex;flex-direction:column;margin:0;padding:22px;border-radius:var(--pk-radius);background:var(--pk-surface);border:1px solid var(--pk-line)}
.pk-snippet figcaption{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pk-accent);margin-bottom:12px}
.pk-snippet blockquote{margin:0 0 14px;padding:0;font-size:1rem;line-height:1.6;color:var(--pk-text)}
.pk-snippet-note{font-size:.84rem;color:var(--pk-muted);margin:0 0 14px}
.pk-copy{appearance:none;cursor:pointer;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:10px;border:1px solid var(--pk-line-strong);background:transparent;color:var(--pk-text);font:inherit;font-weight:700;font-size:.88rem;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.pk-copy:hover{border-color:var(--pk-accent);background:rgba(142,162,255,.08)}
.pk-copy:focus-visible{box-shadow:var(--pk-focus)}
.pk-copy.is-copied{border-color:var(--pk-green);color:var(--pk-green)}
.pk-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pk-rules-col{padding:24px;border-radius:var(--pk-radius);background:var(--pk-surface);border:1px solid var(--pk-line)}
.pk-rules-col h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;font-weight:700;margin:0 0 14px}
.pk-rules-col h3 i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;font-size:.85rem}
.pk-rules-do h3 i{background:rgba(56,224,138,.16);color:var(--pk-green)}
.pk-rules-dont h3 i{background:rgba(255,107,129,.16);color:#ff8fa0}
.pk-rules ul{list-style:none;margin:0;padding:0}
.pk-rules li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--pk-line);color:var(--pk-muted);line-height:1.5}
.pk-rules li:last-child{border-bottom:0}
.pk-rules li::before{content:'';position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%}
.pk-rules-do li::before{background:var(--pk-green)}
.pk-rules-dont li::before{background:#ff8fa0}
.pk-rules li strong{color:#fff}
.pk-cta{padding:0 0 88px}
.pk-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px;border-radius:22px;background:radial-gradient(ellipse 60% 120% at 100% 0%,rgba(79,124,247,.3),transparent 60%),linear-gradient(120deg,#1a1240,#121a3c);border:1px solid var(--pk-line-strong)}
.pk-cta h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;margin:0 0 8px}
.pk-cta p{color:var(--pk-muted);margin:0;line-height:1.6;max-width:560px}
.pk-cta-actions{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pk .pk-cta-note{font-size:.9rem;max-width:none}
.pk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (max-width:1199px){.pk-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991px){.pk-hero-grid{grid-template-columns:1fr;gap:40px}.pk-hero-stack{height:360px;max-width:560px}.pk-snippets{grid-template-columns:1fr}.pk-cta-inner{flex-direction:column;align-items:flex-start}.pk-cta-actions{align-items:flex-start}}
@media (max-width:767px){.pk-hero{padding:56px 0 48px}.pk-section{padding:56px 0}.pk-rules{grid-template-columns:1fr}.pk-hero-stack{height:280px}.pk-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-cta-inner{padding:28px 22px}}
@media (max-width:575px){.pk-logos{grid-template-columns:1fr}.pk-hero-stack{display:none}.pk-hero-actions .pk-btn{width:100%;justify-content:center}.pk-grid{grid-template-columns:1fr}.pk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-right:-16px;padding-right:16px}.pk-tabs::-webkit-scrollbar{display:none}.pk-tab{flex:none}.pk-tabs-seg{margin-right:0;padding-right:4px}}
@media (prefers-reduced-motion:reduce){.pk *{transition:none!important}.pk-swatch:hover{transform:none}}