[data-framework=preact],[data-chip=preact]{--fw: #a78bfa}[data-framework=react],[data-chip=react]{--fw: #38bdf8}[data-framework=vue],[data-chip=vue]{--fw: #34d399}[data-framework=svelte],[data-chip=svelte]{--fw: #fb923c}.hero-title{font-size:clamp(2.25rem,7vw,3.5rem);line-height:1.05;letter-spacing:-.02em}.hero-title span{display:block;background:linear-gradient(90deg,#a78bfa,#38bdf8,#34d399,#fb923c,#a78bfa);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite}@keyframes flow{to{background-position:200% center}}.strategies{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem;margin:1.5rem 0;padding:0}.strategies li{position:relative;display:grid;align-content:start;gap:.35rem;list-style:none;padding:1rem;border:1px solid var(--border);border-top:3px solid var(--fw);border-radius:.75rem;background:linear-gradient(160deg,color-mix(in srgb,var(--fw) 12%,transparent),transparent 60%);transition:transform .2s,box-shadow .2s}.strategies li:hover{transform:translateY(-3px);box-shadow:0 12px 28px -14px var(--fw)}.strategies-icon{font-size:1.5rem;line-height:1}.strategies code{justify-self:start;padding:.2rem .55rem;border:1px solid color-mix(in srgb,var(--fw) 55%,transparent);font-size:.95rem;font-weight:600;color:color-mix(in srgb,var(--fw) 55%,white);background:var(--bg)}.strategies-when{color:var(--heading);line-height:1.35}.strategies small{margin-top:.25rem;font-family:var(--mono);font-size:.7rem;color:var(--muted)}main p code,main li code{color:var(--heading);background:var(--secondary-bg)}.strategies li:last-child{--fw: var(--muted)}@media(max-width:36rem){.strategies{gap:.5rem}.strategies li{grid-template-columns:2rem 1fr;column-gap:.75rem;gap:.2rem .75rem;padding:.75rem;border-top-width:1px;border-left:3px solid var(--fw)}.strategies-icon{grid-row:span 3;align-self:center;text-align:center}}@media(prefers-reduced-motion:reduce){.strategies li{transition:none}}.panel{position:sticky;top:4.25rem;z-index:2;display:grid;gap:.5rem;padding:.75rem;border:1px solid var(--border);border-radius:.75rem;background:color-mix(in srgb,var(--code-bg) 85%,transparent);backdrop-filter:blur(10px);box-shadow:0 10px 30px -15px #000c}.panel-frameworks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0;padding:0}.panel-frameworks li{display:grid;grid-template-columns:auto 1fr;column-gap:.4rem;align-items:center;list-style:none;padding:.4rem .6rem;border:1px solid var(--border);border-radius:.5rem;opacity:.5;transition:opacity .4s,border-color .4s,box-shadow .4s}.panel-frameworks li[data-loaded]{opacity:1;border-color:var(--fw);box-shadow:0 0 18px -6px var(--fw)}.panel-dot{grid-row:span 2;width:.6rem;height:.6rem;border-radius:50%;background:var(--muted)}[data-loaded] .panel-dot{background:var(--fw);box-shadow:0 0 8px var(--fw)}.panel-frameworks strong{font-size:.85rem;color:var(--heading)}.panel-frameworks small{font-family:var(--mono);font-size:.7rem;color:var(--muted)}.panel-total{margin:0;font-family:var(--mono);font-size:.8rem}.panel-timeline{display:flex;gap:.4rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}.panel-timeline:empty{display:none}.panel-timeline li{flex:none;list-style:none;padding:.15rem .5rem;border-left:3px solid var(--fw);border-radius:var(--radius);background:var(--secondary-bg);font-size:.75rem;animation:pop .4s ease-out}.panel-timeline time{font-family:var(--mono);color:var(--fw)}.panel-timeline small{color:var(--muted)}@keyframes pop{0%{opacity:0;transform:translateY(-4px) scale(.9)}}.panel-timeline{mask-image:linear-gradient(90deg,black calc(100% - 2rem),transparent);padding-right:2rem}@media(max-width:36rem){.panel{padding:.5rem;gap:.4rem}.panel-frameworks{gap:.3rem}.panel-frameworks li{padding:.3rem .4rem}.panel-frameworks strong{font-size:.7rem}.panel-frameworks small{font-size:.6rem}.panel-total{display:none}}.conf{display:grid;gap:2rem;margin-top:2rem}.conf h3{margin-top:0}.conf-hero{position:relative;padding:2.5rem 1rem 1.5rem;border-radius:1rem;text-align:center;overflow:hidden;background:radial-gradient(60% 80% at 20% 0%,rgb(167 139 250 / .25),transparent 70%),radial-gradient(50% 70% at 85% 10%,rgb(56 189 248 / .2),transparent 70%),linear-gradient(var(--code-bg),var(--bg));border:1px solid var(--border)}.conf-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255 / .04) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .04) 1px,transparent 1px);background-size:2rem 2rem;mask-image:linear-gradient(black,transparent);pointer-events:none}.conf-hero>*{position:relative}.conf-hero h2{margin:0 0 1.25rem;font-size:clamp(3rem,12vw,5rem);font-weight:900;letter-spacing:-.04em;background:linear-gradient(180deg,var(--heading),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}.conf-kicker{margin:0;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}.conf-why{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}.conf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem}.island{--state: var(--muted);position:relative;padding:1rem;border:1px dashed color-mix(in srgb,var(--fw) 50%,transparent);border-radius:.75rem;text-align:left;background:color-mix(in srgb,var(--fw) 4%,transparent);transition:border-color .4s,box-shadow .6s}.island[data-state=static]{--fw: var(--muted)}.island[data-state=waiting],.island[data-state=loading]{--state: var(--warning-hover)}.island[data-state=loading]{background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--fw) 12%,transparent) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 1s linear infinite}.island[data-state=hydrated]{--state: var(--fw);border-style:solid;border-color:var(--fw);box-shadow:0 0 30px -12px var(--fw);animation:hydrated .9s ease-out}.island[data-state=failed]{--state: var(--error)}@keyframes shimmer{to{background-position:-200% 0}}@keyframes hydrated{0%{box-shadow:0 0 color-mix(in srgb,var(--fw) 70%,transparent)}60%{box-shadow:0 0 0 14px transparent}}@media(prefers-reduced-motion:reduce){.hero-title span,.island,.panel-timeline li{animation:none!important}}.island-badge{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .75rem;font-family:var(--mono);font-size:.75rem}.island-badge span{padding:.1rem .45rem;border-radius:var(--radius);background:var(--secondary-bg)}.island-framework{font-weight:700;color:var(--fw)}.island-status:before{content:"\25cf  "}.island-status{color:var(--state)}.countdown{display:flex;justify-content:center;gap:.75rem}.countdown-unit{display:grid;min-width:4rem;text-align:center}.countdown-unit strong{font-size:2rem;font-variant-numeric:tabular-nums;color:var(--heading)}.countdown-unit span{font-size:.75rem;color:var(--muted)}.schedule{width:100%;margin:0}.schedule td{vertical-align:top}.schedule time{font-family:var(--mono);color:var(--primary-hover)}.schedule strong,.schedule span{display:block}.schedule span{font-size:.85rem;color:var(--muted)}.tickets-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0}.tickets-row small{display:block;color:var(--muted)}.stepper{display:flex;align-items:center;gap:.5rem}.stepper button{width:2rem;height:2rem;margin:0;padding:0}.stepper output{min-width:1.25rem;text-align:center;font-variant-numeric:tabular-nums}.tickets-total{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--border);text-align:right}.rating p{margin:0}.rating-average strong{font-size:1.75rem;color:var(--heading)}.rating-stars{display:flex;gap:.25rem;margin:.5rem 0}.rating-stars button{flex:none;width:auto;margin:0;padding:0 .15rem;border:none;background:none;font-size:1.75rem;line-height:1;color:color-mix(in srgb,var(--muted) 45%,transparent);cursor:pointer;transition:color .15s,transform .15s}.rating-stars button:hover{transform:scale(1.15)}.rating-stars button.on{color:#fbbf24;text-shadow:0 0 12px rgb(251 191 36 / .5)}.rating-note{font-size:.85rem;color:var(--muted)}.questions ol{display:grid;gap:.5rem;margin:0 0 1rem;padding:0}.questions li{display:flex;align-items:center;gap:.75rem;list-style:none}.questions li button{min-width:3.5rem;margin:0;padding:.2rem .5rem;font-variant-numeric:tabular-nums}.questions em{color:var(--muted)}.questions form{margin:0;display:flex;align-items:center;gap:.5rem}.questions input{flex:1;min-width:0;margin:0}.questions form small{margin:0;min-width:2ch;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.questions form button{margin:0}
