@keyframes home-logo-in{0%{opacity:0;transform:translateY(10px) rotate(-6deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes home-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes home-spectrum{0%{transform:scaleX(.35);opacity:0}to{transform:scaleX(1);opacity:1}}body.demo-home{--penna-c-logo-paper: #edebe7;--penna-c-logo-ink: #0c1c25;--penna-c-logo-cyan: #0ac1e3;--penna-c-logo-blue: #008dee;--penna-c-logo-green: #16bf73;--penna-c-logo-yellow: #fec933;--penna-c-logo-orange: #fe9138;--penna-c-logo-red: #f33a3c;--penna-c-stroke: #0c1c25;--penna-c-brand-1: #008dee;--penna-c-brand-2: #0099e8;--penna-c-brand-3: #0ac1e3;--penna-c-brand-soft: rgba(0, 141, 238, .16);--penna-c-brand-on-bg: #ffffff;--penna-c-text-1: #0c1c25;--penna-c-text-2: rgba(12, 28, 37, .78);--penna-c-text-3: rgba(12, 28, 37, .56);--penna-c-bg: #fafaf8;--penna-c-bg-elevated: #ffffff;--penna-c-contrast-light: #fff;--penna-c-contrast-dark: #000;--penna-c-brand-mark: #0ac1e3;--penna-c-code-fg: #f33a3c;--penna-c-note: #008dee;--penna-c-note-mark: #fec933;--penna-c-note-on-bg: color-mix( in srgb, #008dee 20%, #fff );--penna-c-alert-note-text: #008dee;--penna-c-alert-note-bg: color-mix( in srgb, #008dee 10%, transparent );--penna-c-alert-note-border: color-mix( in srgb, #008dee 30%, transparent );--penna-c-tip: #16bf73;--penna-c-tip-mark: #fec933;--penna-c-tip-on-bg: color-mix( in srgb, #16bf73 20%, #fff );--penna-c-alert-tip-text: #16bf73;--penna-c-alert-tip-bg: color-mix( in srgb, #16bf73 10%, transparent );--penna-c-alert-tip-border: color-mix( in srgb, #16bf73 30%, transparent );--penna-c-warning: #fe9138;--penna-c-warning-mark: #fec933;--penna-c-warning-on-bg: color-mix( in srgb, #fe9138 20%, #fff );--penna-c-alert-warning-text: #fe9138;--penna-c-alert-warning-bg: color-mix( in srgb, #fe9138 10%, transparent );--penna-c-alert-warning-border: color-mix( in srgb, #fe9138 30%, transparent );--penna-c-caution: #f33a3c;--penna-c-caution-mark: #fe9138;--penna-c-caution-on-bg: color-mix( in srgb, #f33a3c 20%, #fff );--penna-c-alert-caution-text: #f33a3c;--penna-c-alert-caution-bg: color-mix( in srgb, #f33a3c 10%, transparent );--penna-c-alert-caution-border: color-mix( in srgb, #f33a3c 30%, transparent );--penna-c-danger: #f33a3c;--penna-c-danger-mark: #fe9138;--penna-c-danger-on-bg: color-mix( in srgb, #f33a3c 20%, #fff );--penna-c-alert-danger-text: #f33a3c;--penna-c-alert-danger-bg: color-mix( in srgb, #f33a3c 10%, transparent );--penna-c-alert-danger-border: color-mix( in srgb, #f33a3c 30%, transparent );--penna-c-important: #0ac1e3;--penna-c-important-mark: #008dee;--penna-c-important-on-bg: color-mix( in srgb, #0ac1e3 20%, #fff );--penna-c-alert-important-text: #0ac1e3;--penna-c-alert-important-bg: color-mix( in srgb, #0ac1e3 10%, transparent );--penna-c-alert-important-border: color-mix( in srgb, #0ac1e3 30%, transparent );--penna-c-image-card-info-fg: var(--penna-c-contrast-light);--penna-c-image-card-scrim: var(--penna-c-contrast-dark);--penna-c-image-card-info-bg: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 45%, transparent) 55%, color-mix(in srgb, var(--penna-c-image-card-scrim) 72%, transparent) 100% );--penna-c-image-card-info-bg-hover: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 55%, transparent) 35%, color-mix(in srgb, var(--penna-c-image-card-scrim) 82%, transparent) 100% );--penna-c-media-player-bg: var(--penna-c-bg);--penna-c-media-shade: var(--penna-c-bg);--penna-c-on-brand: var(--penna-c-contrast-light);--penna-c-code-block-header-bg: color-mix( in srgb, var(--penna-c-text-3) 6%, var(--penna-c-bg-elevated) );--penna-c-code-block-code-bg: color-mix( in srgb, var(--penna-c-text-3) 4%, var(--penna-c-bg) );--penna-c-code-block-shadow: 0 1px 2px color-mix(in srgb, var(--penna-c-text-3) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--penna-c-text-3) 6%, transparent);display:block;min-height:100vh;padding:2rem 1.25rem 3rem;background:radial-gradient(ellipse 80% 50% at 50% -10%,color-mix(in srgb,#0ac1e3 14%,transparent),transparent 55%),radial-gradient(ellipse 60% 40% at 100% 20%,color-mix(in srgb,#fec933 10%,transparent),transparent 50%),radial-gradient(ellipse 50% 35% at 0% 40%,color-mix(in srgb,#16bf73 8%,transparent),transparent 45%),#edebe7;color:#0c1c25;font-family:Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.wrap{max-width:920px;margin:0 auto}.hero{position:relative;margin-bottom:2.75rem;padding:2.75rem 1.5rem 2.25rem;text-align:center;border:2.5px solid #0c1c25;border-radius:20px;background:#fff;animation:home-rise .55s ease-out both}.hero-mark{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:1.15rem}.hero-logo{width:112px;height:112px;border-radius:24px;border:2.5px solid #0c1c25;background:#edebe7;animation:home-logo-in .7s cubic-bezier(.22,1,.36,1) both}.hero-spectrum{width:min(220px,55vw);height:6px;border-radius:3px;border:1.5px solid #0c1c25;background:linear-gradient(90deg,#16bf73,#fec933 22%,#fe9138 40%,#f33a3c 55%,#008dee 78%,#0ac1e3);transform-origin:center;animation:home-spectrum .65s .2s ease-out both}.hero-title{position:relative;z-index:1;margin:0 0 .55rem;font-size:clamp(1.75rem,4.5vw,2.35rem);font-weight:700;letter-spacing:-.03em;color:#0c1c25;animation:home-rise .55s .08s ease-out both}.hero-desc{position:relative;z-index:1;max-width:34rem;margin:0 auto 1.5rem;font-size:.95rem;line-height:1.65;color:color-mix(in srgb,#0c1c25 68%,transparent);animation:home-rise .55s .14s ease-out both}.hero-links{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin:0 0 1.35rem;animation:home-rise .55s .2s ease-out both}.hero-link{display:inline-flex;align-items:center;padding:.5rem 1rem;border:2px solid #0c1c25;border-radius:10px;background:#fff;color:#0c1c25;font-size:.8125rem;font-weight:600;text-decoration:none;transition:background .15s ease,color .15s ease,transform .15s ease}.hero-link:hover{background:color-mix(in srgb,#0ac1e3 18%,#ffffff);transform:translateY(-1px)}.hero-link--primary{background:#008dee;color:#fff;border-color:#0c1c25}.hero-link--primary:hover{background:color-mix(in srgb,#008dee 82%,#0c1c25);color:#fff}.hero-badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0;padding-top:1.15rem;border-top:2px dashed color-mix(in srgb,#0c1c25 18%,transparent);animation:home-rise .55s .26s ease-out both}.hero-badges a{line-height:0;opacity:.9;transition:opacity .15s ease}.hero-badges a:hover{opacity:1}.hero-badges img{height:20px}.section{margin-top:2.25rem;animation:home-rise .5s ease-out both}.section:nth-of-type(1){animation-delay:.08s}.section:nth-of-type(2){animation-delay:.16s}.section:nth-of-type(3){animation-delay:.24s}.section:nth-of-type(4){animation-delay:.32s}.section-title{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem;padding-bottom:.55rem;border-bottom:2.5px solid #0c1c25;font-size:1.05rem;font-weight:700;color:#0c1c25}.section-dot{width:10px;height:10px;flex-shrink:0;border-radius:3px;border:1.5px solid #0c1c25}.section-dot--syntax{background:#16bf73}.section-dot--test{background:#fec933}.section-dot--modules{background:#008dee}.section-dot--frameworks{background:#fe9138}.cards{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card{background:#fff;padding:1.25rem 1.35rem;border-radius:14px;text-decoration:none;color:inherit;border:2px solid #0c1c25;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.card:hover{transform:translateY(-3px);background:#fff;box-shadow:3px 3px #0c1c25}.card:focus-visible{outline:3px solid #0ac1e3;outline-offset:2px}.card-title{font-size:1.05rem;font-weight:700;margin-bottom:.4rem;color:#0c1c25}.card-desc{font-size:.8125rem;line-height:1.55;color:color-mix(in srgb,#0c1c25 62%,transparent)}.card.disabled{opacity:.55;cursor:not-allowed;filter:grayscale(1)}.card.disabled:hover{transform:none;box-shadow:none;background:#fff}@media(prefers-reduced-motion:reduce){.hero,.hero-logo,.hero-spectrum,.hero-title,.hero-desc,.hero-links,.hero-badges,.section{animation:none}.card,.hero-link{transition:none}}