:root,[data-theme="light"]{
  --xs:clamp(.75rem,.7rem + .25vw,.875rem);--sm:clamp(.875rem,.8rem + .35vw,1rem);
  --base:clamp(1rem,.95rem + .25vw,1.125rem);--lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --hero:clamp(3rem,.5rem + 6vw,6.5rem);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;
  --bg:#f7f6f2;--sf:#f9f8f5;--sf2:#fbfbf9;--sfo:#f3f0ec;
  --dv:#dcd9d5;--bd:#d4d1ca;
  --tx:#28251d;--txm:#686560;--txf:#9b9993;--txi:#f9f8f4;
  --pr:#01696f;--prh:#0c4e54;--prhl:rgba(1,105,111,.10);
  --am:#b86a00;--amhl:rgba(184,106,0,.10);
  --pu:#6e3eb5;--puhl:rgba(110,62,181,.10);
  --sh1:0 1px 3px oklch(.2 .01 80/.07);--sh2:0 6px 24px oklch(.2 .01 80/.10);--sh3:0 24px 72px oklch(.2 .01 80/.16);
  --ease:cubic-bezier(.16,1,.3,1);--tt:180ms;
  --fd:'Zodiak',Georgia,serif;--fb:'Satoshi',Inter,sans-serif;
  --rr:.375rem;--rm:.5rem;--rl:.75rem;--rx:1rem;--rf:9999px;
}
[data-theme="dark"]{
  --bg:#111210;--sf:#161715;--sf2:#1b1c1a;--sfo:#1f2120;
  --dv:#29302c;--bd:#333a36;
  --tx:#eaece7;--txm:#a4a89f;--txf:#72766e;--txi:#0f100e;
  --pr:#62b8b0;--prh:#80cac3;--prhl:rgba(98,184,176,.12);
  --am:#e0a040;--amhl:rgba(224,160,64,.12);
  --pu:#a87ee0;--puhl:rgba(168,126,224,.12);
  --sh1:0 1px 3px rgba(0,0,0,.25);--sh2:0 6px 24px rgba(0,0,0,.32);--sh3:0 24px 72px rgba(0,0,0,.48);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;scroll-padding-top:76px}
body{min-height:100dvh;font:400 var(--base)/1.65 var(--fb);color:var(--tx);
  background:radial-gradient(ellipse 55% 35% at 0 0,color-mix(in oklab,var(--pr) 12%,transparent),transparent),
             radial-gradient(ellipse 38% 28% at 100% 12%,color-mix(in oklab,var(--pu) 9%,transparent),transparent),
             var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1}
p,li{text-wrap:pretty}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--pr);outline-offset:3px;border-radius:var(--rr)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c{width:min(calc(100% - 2rem),1100px);margin-inline:auto}
.w{width:min(calc(100% - 2rem),1280px);margin-inline:auto}
section{padding-block:clamp(var(--s16),9vw,var(--s24))}
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 84%,transparent);
     backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:68px}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:700;font-size:var(--sm)}
.lm{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
    background:linear-gradient(135deg,color-mix(in oklab,var(--pr) 20%,var(--sf)),var(--sfo));
    border:1px solid color-mix(in oklab,var(--pr) 26%,var(--bd));box-shadow:var(--sh1)}
.lm svg{width:20px;height:20px;color:var(--pr)}
.nl{display:flex;gap:var(--s5);list-style:none;padding:0;margin:0}
.nl a{font-size:var(--sm);color:var(--txm);transition:color var(--tt) var(--ease)}
.nl a:hover{color:var(--tx)}
.tg{width:40px;height:40px;border-radius:var(--rf);display:grid;place-items:center;
    border:1px solid color-mix(in oklab,var(--tx) 12%,transparent);color:var(--txm);
    transition:color var(--tt) var(--ease),background var(--tt) var(--ease)}
.tg:hover{color:var(--tx);background:color-mix(in oklab,var(--sf2) 90%,transparent)}
.ey{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);
    border-radius:var(--rf);font-size:var(--xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    background:var(--prhl);color:var(--pr)}
.ey::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.ey.am{background:var(--amhl);color:var(--am)}
.ey.pu{background:var(--puhl);color:var(--pu)}
.tag{display:inline-block;padding:.3rem .75rem;border-radius:var(--rf);font-size:var(--xs);
     border:1px solid color-mix(in oklab,var(--tx) 12%,transparent);color:var(--txm);
     background:color-mix(in oklab,var(--sf2) 80%,transparent)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s6);
     border-radius:var(--rf);font-size:var(--sm);font-weight:700;
     transition:background var(--tt) var(--ease),color var(--tt) var(--ease),transform var(--tt) var(--ease),box-shadow var(--tt) var(--ease)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.bp{background:var(--pr);color:var(--txi);box-shadow:var(--sh2)}.bp:hover{background:var(--prh)}
.bg2{border:1px solid color-mix(in oklab,var(--tx) 14%,transparent);color:var(--tx)}
.bg2:hover{background:color-mix(in oklab,var(--sf2) 90%,transparent)}
.sh{margin-bottom:var(--s12)}
.sh h2{font-family:var(--fd);font-size:var(--2xl);letter-spacing:-.03em;margin-top:var(--s4)}
.sh p{margin-top:var(--s4);color:var(--txm);max-width:58ch}
.back{display:inline-flex;align-items:center;gap:var(--s2);color:var(--txm);font-size:var(--sm);
      margin-bottom:var(--s8);transition:color var(--tt) var(--ease)}
.back:hover{color:var(--tx)}
.ftr{padding:var(--s8) 0 var(--s12);border-top:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.ftr-r{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);color:var(--txf);font-size:var(--sm)}
.rv{opacity:0;animation:fu .6s var(--ease) both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.rv:nth-child(2){animation-delay:.08s}.rv:nth-child(3){animation-delay:.14s}
.rv:nth-child(4){animation-delay:.2s}.rv:nth-child(5){animation-delay:.26s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:640px){.nl{display:none}}

.hero{padding:var(--s8) 0 var(--s6)}
.hl{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--s12);align-items:center}
.h1{font-family:var(--fd);font-size:var(--hero);letter-spacing:-.04em;line-height:.93}
.h1 em{font-style:normal;color:var(--pr)}
.hero-p{margin-top:var(--s6);max-width:56ch;color:var(--txm)}
.ha{margin-top:var(--s8);display:flex;flex-wrap:wrap;gap:var(--s4)}
.hcg{display:grid;gap:var(--s4)}
.hc{padding:var(--s5) var(--s6);border-radius:22px;
    background:color-mix(in oklab,var(--sf) 88%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);box-shadow:var(--sh1);
    display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:start}
.hc-lbl{font-size:var(--xs);text-transform:uppercase;letter-spacing:.08em;color:var(--txf)}
.hc-val{font-size:var(--lg);font-weight:700;margin-top:var(--s1)}
.hc-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.bdg{font-size:var(--xs);padding:.25rem .65rem;border-radius:var(--rf);font-weight:700}
.bdg-t{background:var(--prhl);color:var(--pr)}.bdg-a{background:var(--amhl);color:var(--am)}.bdg-p{background:var(--puhl);color:var(--pu)}
.sh h2{font-family:var(--fd);font-size:var(--2xl);letter-spacing:-.03em;margin-top:var(--s4)}
.sh p{margin-top:var(--s4);color:var(--txm);max-width:58ch}
.sh{margin-bottom:var(--s12)}
.pjg{display:grid;gap:var(--s6)}
.pj{display:grid;grid-template-columns:1.1fr 0.9fr;overflow:hidden;border-radius:26px;
    background:color-mix(in oklab,var(--sf) 88%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);box-shadow:var(--sh1);
    transition:transform var(--tt) var(--ease),box-shadow var(--tt) var(--ease)}
.pj:hover{transform:translateY(-3px);box-shadow:var(--sh3)}
.pj.flip{grid-template-columns:0.9fr 1.1fr}
.pi{padding:clamp(var(--s6),4vw,var(--s10));display:grid;gap:var(--s5);align-content:start}
.pk{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pi h3{font-family:var(--fd);font-size:var(--xl);letter-spacing:-.02em}
.pi > p{color:var(--txm)}
.cl{display:grid;gap:var(--s3)}
.cl li{padding-left:var(--s5);position:relative;color:var(--txm);font-size:var(--sm)}
.cl li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--pr)}
.cl.am li::before{background:var(--am)}.cl.pu li::before{background:var(--pu)}
.cta{display:inline-flex;align-items:center;gap:var(--s2);color:var(--pr);font-size:var(--sm);font-weight:700;
     transition:gap var(--tt) var(--ease),opacity var(--tt) var(--ease)}
.cta:hover{gap:var(--s3);opacity:.75}
.cta.am{color:var(--am)}.cta.pu{color:var(--pu)}
.pv{min-height:360px;padding:var(--s6);display:grid;align-items:end;overflow:hidden;
    background:linear-gradient(150deg,color-mix(in oklab,var(--pr) 13%,transparent),transparent),var(--sfo)}
.pv.am{background:linear-gradient(150deg,color-mix(in oklab,var(--am) 13%,transparent),transparent),var(--sfo)}
.pv.pu{background:linear-gradient(150deg,color-mix(in oklab,var(--pu) 13%,transparent),transparent),var(--sfo)}
.pv img {
    object-fit: cover;
    object-position: center center; /* default */
}
.mk{display:grid;gap:var(--s3)}
.mb{height:32px;border-radius:9px;background:color-mix(in oklab,var(--sf2) 80%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 8%,transparent);
    display:flex;align-items:center;padding:0 var(--s3);gap:var(--s2)}
.md{width:7px;height:7px;border-radius:50%;background:var(--pr);flex-shrink:0}
.md.am{background:var(--am)}.md.pu{background:var(--pu)}
.ml{font-size:var(--xs);color:var(--txf);flex:1}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.mc{aspect-ratio:1.1;border-radius:12px;background:color-mix(in oklab,var(--sf2) 70%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 8%,transparent);
    display:grid;place-items:center;color:var(--txf);font-size:var(--xs);text-align:center;padding:var(--s2)}
.mc.ac{border-color:color-mix(in oklab,var(--pr) 40%,transparent);color:var(--pr)}
.mc.ac.am{border-color:color-mix(in oklab,var(--am) 40%,transparent);color:var(--am)}
.mc.ac.pu{border-color:color-mix(in oklab,var(--pu) 40%,transparent);color:var(--pu)}
.mp{height:4px;border-radius:99px;background:color-mix(in oklab,var(--tx) 10%,transparent);overflow:hidden}
.mf{height:100%;border-radius:99px;background:var(--pr);width:65%}
.mf.am{background:var(--am);width:80%}.mf.pu{background:var(--pu);width:45%}
.mc-cap{font-size:var(--xs);color:var(--txf)}
.skg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.sk{padding:var(--s6);border-radius:22px;background:color-mix(in oklab,var(--sf) 88%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);box-shadow:var(--sh1)}
.ski{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--prhl);color:var(--pr)}
.ski.am{background:var(--amhl);color:var(--am)}.ski.pu{background:var(--puhl);color:var(--pu)}
.sk h3{font-size:var(--base);font-weight:700;margin-top:var(--s3)}
.sk p{margin-top:var(--s2);font-size:var(--sm);color:var(--txm)}
.acg{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--s6)}
.ac2{padding:clamp(var(--s6),4vw,var(--s10));border-radius:24px;background:color-mix(in oklab,var(--sf) 88%,transparent);
     border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);box-shadow:var(--sh1)}
.ac2 h2{font-family:var(--fd);font-size:var(--xl);letter-spacing:-.02em;margin-top:var(--s4)}
.ac2 > p{color:var(--txm);margin-top:var(--s4)}
.sts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.st2{padding:var(--s4);border-radius:16px;background:color-mix(in oklab,var(--sf2) 88%,transparent);
     border:1px solid color-mix(in oklab,var(--tx) 8%,transparent)}
.st2 strong{display:block;font-size:var(--lg)}.st2 span{display:block;font-size:var(--xs);color:var(--txf);text-transform:uppercase;letter-spacing:.07em;margin-top:var(--s1)}
.ctl{display:grid;gap:var(--s3);margin-top:var(--s6)}
.ctk{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
     padding:0 var(--s5);border-radius:16px;background:color-mix(in oklab,var(--sf2) 88%,transparent);
     border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);
     transition:transform var(--tt) var(--ease),box-shadow var(--tt) var(--ease),border-color var(--tt) var(--ease)}
.ctk:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:color-mix(in oklab,var(--pr) 30%,transparent)}
.ctk small{display:block;font-size:var(--xs);color:var(--txf);text-transform:uppercase;letter-spacing:.07em}
.ctk .val{display:block;font-size:var(--sm);color:var(--tx);margin-top:2px}
.arr{color:var(--txf)}
@media(max-width:960px){.hl,.acg{grid-template-columns:1fr}.pj,.pj.flip{grid-template-columns:1fr}.pv{min-height:220px;order:-1}.skg{grid-template-columns:1fr 1fr}.sts{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.skg,.sts{grid-template-columns:1fr}.mg{grid-template-columns:1fr 1fr}}

.bi{display:flex;flex-direction:column;gap:0;border-radius:14px;overflow:hidden;
    border:1px solid color-mix(in oklab,var(--am) 30%,var(--bd));
    background:color-mix(in oklab,var(--sf) 92%,transparent);font-size:var(--xs);
    box-shadow:var(--sh2)}
.bi-hdr{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
        background:color-mix(in oklab,var(--am) 10%,var(--sfo));
        border-bottom:1px solid color-mix(in oklab,var(--am) 22%,var(--bd))}
.bi-dot{width:8px;height:8px;border-radius:50%;background:var(--am);flex-shrink:0}
.bi-title{font-size:var(--xs);font-weight:700;color:var(--am);letter-spacing:.04em}
.bi-rows{display:grid}
.bi-row{display:grid;grid-template-columns:62px 1fr 1fr;gap:var(--s2);align-items:center;
        padding:var(--s2) var(--s4);
        border-bottom:1px solid color-mix(in oklab,var(--tx) 6%,transparent)}
.bi-row:last-child{border-bottom:0}
.bi-row.bi-act{background:color-mix(in oklab,var(--am) 7%,transparent)}
.bi-type{display:inline-block;padding:.15rem .4rem;border-radius:4px;font-size:10px;
         font-weight:700;letter-spacing:.04em;text-align:center}
.bi-obj{background:color-mix(in oklab,var(--pr) 18%,transparent);color:var(--pr)}
.bi-int{background:color-mix(in oklab,var(--pu) 18%,transparent);color:var(--pu)}
.bi-bool{background:color-mix(in oklab,#c0392b 18%,transparent);color:#e05a4a}
.bi-str{background:color-mix(in oklab,var(--am) 18%,transparent);color:var(--am)}
.bi-key{color:var(--txm);font-size:var(--xs)}
.bi-val{color:var(--tx);font-size:var(--xs);font-family:'Courier New',monospace;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-true{color:#6dbf7a}
.bi-foot{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
         background:color-mix(in oklab,var(--am) 10%,var(--sfo));
         border-top:1px solid color-mix(in oklab,var(--am) 22%,var(--bd));
         color:var(--am);font-size:var(--xs);font-weight:700}
.bi-ping{width:7px;height:7px;border-radius:50%;background:var(--am);flex-shrink:0;
         animation:ping 1.4s ease-in-out infinite}
@keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.fl-card{width:100%;border-radius:16px;overflow:hidden;
         border:1px solid color-mix(in oklab,var(--pu) 30%,var(--bd));
         background:color-mix(in oklab,var(--sf) 92%,transparent);
         box-shadow:var(--sh2)}
.fl-hdr{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
        background:color-mix(in oklab,var(--pu) 10%,var(--sfo));
        border-bottom:1px solid color-mix(in oklab,var(--pu) 22%,var(--bd))}
.fl-dot{width:8px;height:8px;border-radius:50%;background:var(--pu);flex-shrink:0}
.fl-title{font-size:var(--xs);font-weight:700;color:var(--pu);letter-spacing:.04em}
.fl-list{display:grid;gap:0}
.fl-list li{display:flex;gap:var(--s3);align-items:start;padding:var(--s4);
            border-bottom:1px solid color-mix(in oklab,var(--tx) 6%,transparent);
            transition:background var(--tt) var(--ease)}
.fl-list li:last-child{border-bottom:0}
.fl-list li:hover{background:color-mix(in oklab,var(--pu) 6%,transparent)}
.fl-icon{font-size:1.1rem;flex-shrink:0;width:28px;text-align:center;padding-top:1px}
.fl-list strong{display:block;font-size:var(--sm);font-weight:700;color:var(--tx)}
.fl-list span{display:block;font-size:var(--xs);color:var(--txm);margin-top:2px;max-width:100%}

.title-link{color:inherit;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--tt) var(--ease),opacity var(--tt) var(--ease)}
.title-link:hover{background-size:100% 2px;opacity:.8}


/* ── Project page styles ── */

:root,[data-theme="light"]{
  --xs:clamp(.75rem,.7rem + .25vw,.875rem);--sm:clamp(.875rem,.8rem + .35vw,1rem);
  --base:clamp(1rem,.95rem + .25vw,1.125rem);--lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --hero:clamp(3rem,.5rem + 6vw,6.5rem);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;
  --bg:#f7f6f2;--sf:#f9f8f5;--sf2:#fbfbf9;--sfo:#f3f0ec;--dv:#dcd9d5;--bd:#d4d1ca;
  --tx:#28251d;--txm:#686560;--txf:#9b9993;--txi:#f9f8f4;
  --pr:#01696f;--prh:#0c4e54;--prhl:rgba(1,105,111,.10);
  --am:#b86a00;--amhl:rgba(184,106,0,.10);
  --pu:#6e3eb5;--puhl:rgba(110,62,181,.10);
  --sh1:0 1px 3px oklch(.2 .01 80/.07);--sh2:0 6px 24px oklch(.2 .01 80/.10);--sh3:0 24px 72px oklch(.2 .01 80/.16);
  --ease:cubic-bezier(.16,1,.3,1);--tt:180ms;
  --fd:'Zodiak',Georgia,serif;--fb:'Satoshi',Inter,sans-serif;
  --rr:.375rem;--rm:.5rem;--rl:.75rem;--rx:1rem;--rf:9999px;
}
[data-theme="dark"]{
  --bg:#111210;--sf:#161715;--sf2:#1b1c1a;--sfo:#1f2120;--dv:#29302c;--bd:#333a36;
  --tx:#eaece7;--txm:#a4a89f;--txf:#72766e;--txi:#0f100e;
  --pr:#62b8b0;--prh:#80cac3;--prhl:rgba(98,184,176,.12);
  --am:#e0a040;--amhl:rgba(224,160,64,.12);
  --pu:#a87ee0;--puhl:rgba(168,126,224,.12);
  --sh1:0 1px 3px rgba(0,0,0,.25);--sh2:0 6px 24px rgba(0,0,0,.32);--sh3:0 24px 72px rgba(0,0,0,.48);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;scroll-padding-top:76px}
body{min-height:100dvh;font:400 var(--base)/1.65 var(--fb);color:var(--tx);
  background:radial-gradient(ellipse 55% 35% at 0 0,color-mix(in oklab,var(--pr) 12%,transparent),transparent),
             radial-gradient(ellipse 38% 28% at 100% 12%,color-mix(in oklab,var(--pu) 9%,transparent),transparent),
             var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1}p,li{text-wrap:pretty}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--pr);outline-offset:3px;border-radius:var(--rr)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c{width:min(calc(100% - 2rem),1100px);margin-inline:auto}
.w{width:min(calc(100% - 2rem),1280px);margin-inline:auto}
section{padding-block:clamp(var(--s16),9vw,var(--s24))}
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 84%,transparent);
     backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:68px}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:700;font-size:var(--sm)}
.lm{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
    background:linear-gradient(135deg,color-mix(in oklab,var(--pr) 20%,var(--sf)),var(--sfo));
    border:1px solid color-mix(in oklab,var(--pr) 26%,var(--bd));box-shadow:var(--sh1)}
.lm svg{width:20px;height:20px;color:var(--pr)}
.nl{display:flex;gap:var(--s5);list-style:none;padding:0;margin:0}
.nl a{font-size:var(--sm);color:var(--txm);transition:color var(--tt) var(--ease)}
.nl a:hover{color:var(--tx)}
.tg{width:40px;height:40px;border-radius:var(--rf);display:grid;place-items:center;
    border:1px solid color-mix(in oklab,var(--tx) 12%,transparent);color:var(--txm);
    transition:color var(--tt) var(--ease),background var(--tt) var(--ease)}
.tg:hover{color:var(--tx);background:color-mix(in oklab,var(--sf2) 90%,transparent)}
.ey{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);
    border-radius:var(--rf);font-size:var(--xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    background:var(--prhl);color:var(--pr)}
.ey::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.ey.am{background:var(--amhl);color:var(--am)}.ey.pu{background:var(--puhl);color:var(--pu)}
.tag{display:inline-block;padding:.3rem .75rem;border-radius:var(--rf);font-size:var(--xs);
     border:1px solid color-mix(in oklab,var(--tx) 12%,transparent);color:var(--txm);
     background:color-mix(in oklab,var(--sf2) 80%,transparent)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s6);
     border-radius:var(--rf);font-size:var(--sm);font-weight:700;
     transition:background var(--tt) var(--ease),color var(--tt) var(--ease),transform var(--tt) var(--ease),box-shadow var(--tt) var(--ease)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.bp{background:var(--pr);color:var(--txi);box-shadow:var(--sh2)}.bp:hover{background:var(--prh)}
.bg2{border:1px solid color-mix(in oklab,var(--tx) 14%,transparent);color:var(--tx)}
.bg2:hover{background:color-mix(in oklab,var(--sf2) 90%,transparent)}
.back{display:inline-flex;align-items:center;gap:var(--s2);color:var(--txm);font-size:var(--sm);
      margin-bottom:var(--s8);transition:color var(--tt) var(--ease)}
.back:hover{color:var(--tx)}
.ftr{padding:var(--s8) 0 var(--s12);border-top:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.ftr-r{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);color:var(--txf);font-size:var(--sm)}
.rv{opacity:0;animation:fu .6s var(--ease) both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.rv:nth-child(2){animation-delay:.08s}.rv:nth-child(3){animation-delay:.14s}
.rv:nth-child(4){animation-delay:.2s}.rv:nth-child(5){animation-delay:.26s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:640px){.nl{display:none}}
.ph{padding:clamp(var(--s12),8vw,var(--s20)) 0 var(--s12)}
.ph h1{font-family:var(--fd);font-size:var(--2xl);letter-spacing:-.03em;margin:var(--s4) 0 var(--s5)}
.ph p{color:var(--txm);max-width:60ch;margin-bottom:var(--s6)}
.mr{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.cs{padding-block:var(--s12)}.hr{border:0;border-top:1px solid color-mix(in oklab,var(--tx) 9%,transparent);margin:0}
.cs h2{font-family:var(--fd);font-size:var(--xl);letter-spacing:-.02em;margin-bottom:var(--s5)}
.cs p{color:var(--txm);margin-bottom:var(--s4);max-width:72ch}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.pc{padding:var(--s6);border-radius:22px;background:color-mix(in oklab,var(--sf2) 88%,transparent);
    border:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.pc h4{font-size:var(--sm);font-weight:700;margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.07em;color:var(--txf)}
.pc p{color:var(--txm);font-size:var(--sm);margin:0}
.pc.sol-t{border-color:color-mix(in oklab,var(--pr) 30%,transparent);background:color-mix(in oklab,var(--prhl) 50%,var(--sf2))}
.pc.sol-a{border-color:color-mix(in oklab,var(--am) 30%,transparent);background:color-mix(in oklab,var(--amhl) 50%,var(--sf2))}
.pc.sol-p{border-color:color-mix(in oklab,var(--pu) 30%,transparent);background:color-mix(in oklab,var(--puhl) 50%,var(--sf2))}
.dl{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s6)}
.dl li{padding:var(--s4) var(--s5) var(--s4) var(--s6);border-radius:16px;
       background:color-mix(in oklab,var(--sf2) 88%,transparent);
       border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);
       color:var(--txm);font-size:var(--sm);border-left:3px solid var(--pr)}
.dl li strong{display:block;color:var(--tx);margin-bottom:var(--s2);font-size:var(--base)}
.dl.am li{border-left-color:var(--am)}.dl.pu li{border-left-color:var(--pu)}
.code{background:color-mix(in oklab,var(--sfo) 92%,transparent);
      border:1px solid color-mix(in oklab,var(--tx) 10%,transparent);
      border-radius:var(--rl);padding:var(--s5) var(--s6);
      font-family:'Courier New',monospace;font-size:var(--xs);line-height:1.85;
      color:var(--txm);overflow-x:auto;white-space:pre;margin-top:var(--s5)}
.kw{color:var(--pr)}.cm{color:var(--txf);font-style:italic}.str{color:var(--am)}.fn{color:var(--pu)}
.sh{margin-bottom:var(--s8)}.sh h2{font-family:var(--fd);font-size:var(--xl);letter-spacing:-.02em;margin-top:var(--s3)}
.sh p{color:var(--txm);margin-top:var(--s3);max-width:68ch}
@media(max-width:720px){.pg{grid-template-columns:1fr}}

.hr{border:0;border-top:1px solid color-mix(in oklab,var(--tx) 9%,transparent);margin:0}
.cs{padding-block:var(--s12)}.sh{margin-bottom:var(--s8)}
.sh h2{font-family:var(--fd);font-size:var(--xl);letter-spacing:-.02em;margin-top:var(--s3)}
.ph{padding:clamp(var(--s12),8vw,var(--s20)) 0 var(--s12)}
.ph h1{font-family:var(--fd);font-size:var(--2xl);letter-spacing:-.03em;margin:var(--s4) 0 var(--s5)}
.ph p{color:var(--txm);max-width:60ch;margin-bottom:var(--s6)}
.mr{display:flex;flex-wrap:wrap;gap:var(--s3)}
details{border-radius:18px;overflow:hidden;
        border:1px solid color-mix(in oklab,var(--tx) 9%,transparent);
        background:color-mix(in oklab,var(--sf) 88%,transparent);
        box-shadow:var(--sh1);margin-bottom:var(--s5)}
details[open]{box-shadow:var(--sh2)}
summary{list-style:none;padding:var(--s5) var(--s6);cursor:pointer;
        display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
        transition:background var(--tt) var(--ease)}
summary:hover{background:color-mix(in oklab,var(--sf2) 80%,transparent)}
summary::-webkit-details-marker{display:none}
.sum-l{display:flex;align-items:center;gap:var(--s4)}
.sum-badge{font-size:var(--xs);font-weight:700;padding:.25rem .65rem;border-radius:var(--rf);background:var(--prhl);color:var(--pr)}
.sum-badge.am{background:var(--amhl);color:var(--am)}
.sum-title{font-family:var(--fd);font-size:var(--lg);letter-spacing:-.02em}
.sum-arrow{color:var(--txf);transition:transform var(--tt) var(--ease);flex-shrink:0}
details[open] .sum-arrow{transform:rotate(180deg)}
.det-body{padding:0 var(--s6) var(--s6);display:grid;gap:var(--s5)}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.pc{padding:var(--s6);border-radius:16px;background:color-mix(in oklab,var(--sf2) 88%,transparent);border:1px solid color-mix(in oklab,var(--tx) 9%,transparent)}
.pc h4{font-size:var(--xs);font-weight:700;margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.07em;color:var(--txf)}
.pc p{color:var(--txm);font-size:var(--sm);margin:0}
.pc.sol-a{border-color:color-mix(in oklab,var(--am) 30%,transparent);background:color-mix(in oklab,var(--amhl) 50%,var(--sf2))}
.code-lbl{font-size:var(--xs);color:var(--txf);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s3);display:block;margin-top:var(--s5)}
.bp-wrap{width:100%;aspect-ratio:16/9;border-radius:var(--rl);overflow:hidden;
         border:1px solid color-mix(in oklab,var(--tx) 10%,transparent);margin-top:var(--s3)}
.bp-wrap iframe{width:100%;height:100%;border:0;display:block}
.vid-wrap{width:100%;aspect-ratio:16/9;border-radius:var(--rl);overflow:hidden;
          border:1px solid color-mix(in oklab,var(--tx) 10%,transparent);margin-top:var(--s3);background:#000}
.vid-wrap video{width:100%;height:100%;display:block;object-fit:cover}
.img-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s3)}
.img-grid img{width:100%;border-radius:var(--rl);object-fit:cover;aspect-ratio:16/9;
              border:1px solid color-mix(in oklab,var(--tx) 10%,transparent)}
.bp-imgs{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s3)}
.bp-imgs img{width:100%;border-radius:var(--rl);border:1px solid color-mix(in oklab,var(--tx) 10%,transparent)}
.sec-lbl{font-size:var(--xs);color:var(--txf);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s3);display:block;margin-top:var(--s5)}
@media(max-width:720px){.pg{grid-template-columns:1fr}.img-grid{grid-template-columns:1fr}}

.cl a{color:inherit;text-decoration:none;transition:color var(--tt) var(--ease)}
.cl a:hover{color:var(--pr)}

.tag.pr { background: var(--prhl); color: var(--pr); border-color: color-mix(in oklab, var(--pr) 25%, transparent); }
.tag.am { background: var(--amhl); color: var(--am); border-color: color-mix(in oklab, var(--am) 25%, transparent); }
.tag.pu { background: var(--puhl); color: var(--pu); border-color: color-mix(in oklab, var(--pu) 25%, transparent); }