@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#fffcf4;--ink:#1c1a16;--ink2:#5f5a50;--pill:#ece8de;--panel:#efe8dc;--line:#e6e0d3;--hv:#f2b705;--on-hv:#1a1400;--wms:#E85521;--blue:#e9f1ff;--lav:#f0edfd;--sun:#fff3c4;--ph:#efe8dc;--c1:var(--blue);--c2:#fff;--c3:var(--lav)}
body.theme-wms{--ph:var(--wms);--c1:#ffe9df;--c2:#fff;--c3:#ffe9df;--hv:var(--wms)}
body.theme-hk{--ph:#f6efc9;--c1:#fff6d6;--c3:var(--blue)}
body.theme-ms{--ph:#dfe7f3}
body.theme-hw{--ph:#efe8dc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em;max-width:66ch}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid var(--hv);outline-offset:3px}
img,video{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.center{text-align:center}.center p{margin-left:auto;margin-right:auto}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:center;padding:1rem 1rem .6rem;background:linear-gradient(var(--bg) 55%,rgba(255,252,244,0))}
.nav nav{display:flex;gap:.25rem;background:var(--pill);padding:.3rem;border-radius:999px;box-shadow:0 2px 10px rgba(28,26,22,.06)}
.nav a{padding:.45rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink2);transition:background .2s,color .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(28,26,22,.1)}
.btns{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0 0}
.center .btns,.hero .btns{justify-content:center}
.btn{display:inline-block;padding:.75rem 1.4rem;font-weight:600;text-decoration:none;border:2px solid var(--ink);border-radius:999px;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn.main{background:var(--ink);color:var(--bg)}
.btn:hover{background:var(--hv);border-color:var(--ink);color:var(--on-hv);transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.hero{position:relative;text-align:center;padding:4.5rem 0 2rem}
.hero h1{font-size:clamp(2.6rem,7.2vw,5.4rem);font-weight:600;letter-spacing:-.035em;margin:0 auto .4em}
.ico{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;object-fit:cover;vertical-align:-.14em;margin:0 .08em;background:#cfd5d6}
.hero .lede{font-size:1.25rem;margin:0 auto .5em;max-width:34rem}
.hero .sub{color:var(--ink2);margin:0 auto;max-width:34rem}
.chip{position:absolute;padding:.4rem .95rem;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid var(--ink);animation:bob 5s ease-in-out infinite}
.chip.a{left:13%;top:1.6rem;background:var(--blue);transform:rotate(-8deg)}
.chip.b{right:6%;top:11.2rem;background:var(--sun);transform:rotate(7deg);animation-delay:-2s}
@keyframes bob{50%{translate:0 -9px}}
.marq{overflow:hidden;padding:1.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq ul{display:flex;gap:1rem;width:max-content;margin:0;padding:0;list-style:none;animation:scroll 32s linear infinite}
.marq li{padding:.55rem 1.3rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;white-space:nowrap}
.marq:hover ul{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.facts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.5rem 0 0}
.fact{border-radius:20px;padding:1.3rem 1.4rem;transition:transform .3s}
.fact:hover{transform:translateY(-4px)}
.fact b{display:block;font-size:1.05rem;margin-bottom:.2rem}
.fact:nth-child(1){background:var(--sun)}.fact:nth-child(2){background:var(--blue)}.fact:nth-child(3){background:var(--lav)}
section{padding:3.5rem 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.5rem;margin-top:1.5rem}
.pj{display:block;text-decoration:none;color:inherit}
.pj.wide{grid-column:1/-1}
.thumb{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:var(--bgc,#e6e0d3);display:grid;place-items:center;transition:transform .35s,box-shadow .35s}
.pj.wide .thumb{aspect-ratio:21/9}
.pj:hover .thumb,.pj:focus-visible .thumb{transform:translateY(-6px);box-shadow:0 18px 36px rgba(28,26,22,.15)}
.thumb>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pj:hover .thumb>img{transform:scale(1.04)}
.thumb.wms{--bgc:var(--wms);color:var(--ink);padding:1.5rem;place-items:center start}
.tile{padding:clamp(.4rem,2vw,1.6rem);max-width:46rem}
.tile .big{font-size:clamp(1.7rem,4.4vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:.8rem 0 1rem}
.pilltag{display:inline-block;background:#fff;color:var(--ink);font-weight:700;font-size:.9rem;padding:.2rem .8rem;border-radius:999px}
.chips2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips2 li{background:rgba(255,255,255,.85);border-radius:999px;padding:.3rem .85rem;font-weight:600;font-size:.95rem;transition:transform .3s}
.pj:hover .chips2 li{transform:translateY(-3px)}
.thumb.frame{--bgc:#f6efc9}
.browser{width:70%;background:#fff;border-radius:14px;box-shadow:0 22px 44px rgba(28,26,22,.18);overflow:hidden;transition:transform .5s}
.pj:hover .browser{transform:scale(1.04)}
.browser i{display:block;height:1.6rem;background:#f1ede4;position:relative}
.browser i::before{content:"";position:absolute;left:.7rem;top:.5rem;width:.6rem;height:.6rem;border-radius:50%;background:#e8604a;box-shadow:1rem 0 #f2b705,2rem 0 #5ac26a}
.pj .thumb .browser img{width:100%;height:auto;object-fit:contain}
.cap{padding:.9rem .3rem 0}
.cap small{display:block;color:var(--ink2);font-size:.9rem}
.cap b{font-size:1.15rem}
.casehead{padding:.6rem 0 0}
.chpanel{background:var(--ph);border-radius:28px;padding:clamp(1.6rem,4vw,3.2rem)}
.chpanel h1{font-weight:800;max-width:20ch;letter-spacing:-.03em}
.chpanel .lede{font-size:1.2rem;color:var(--ink);opacity:.85}
.back{display:inline-block;margin-bottom:1.2rem;font-weight:600}
.tag{display:inline-block;background:#fff;color:var(--ink);font-weight:700;font-size:.9rem;padding:.2rem .85rem;border-radius:999px;margin-bottom:.9rem}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.facts div{background:rgba(255,255,255,.75);border-radius:16px;padding:.6rem 1rem}
.facts dt{font-size:.85rem;color:var(--ink2)}
.facts dd{margin:0;font-weight:700}
.sec{padding:3rem 0}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.pcard{border-radius:20px;padding:1.5rem;transition:transform .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(28,26,22,.1)}
.pcard:nth-child(3n+1){background:var(--c1)}.pcard:nth-child(3n+2){background:var(--c2);border:1px solid var(--line)}.pcard:nth-child(3n){background:var(--c3)}
.pcard p{margin:0}
.gal{display:grid;gap:1rem;margin:1.8rem 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gal figure{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.gal figure:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(28,26,22,.14)}
.gal img{width:100%;flex:1 1 auto;min-height:0;max-height:420px;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.04)}
.gal img.fit{object-fit:contain;background:#fff;padding:.5rem}
.gal figcaption{flex:none;padding:.7rem 1rem;font-size:.92rem;color:var(--ink2);border-top:1px solid var(--line)}
.vid{margin:1.8rem 0;border-radius:24px;overflow:hidden;background:#7d868b}
.vid video{width:100%}
.vid figcaption{background:#fff;padding:.7rem 1rem;font-size:.92rem;color:var(--ink2)}
.hw{padding:2.5rem 0;border-top:1px solid var(--line)}
.hw:first-of-type{border-top:0;padding-top:0}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;margin-top:1.2rem}
.pair div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem}
.pair b{display:block}
.next{padding:1rem 0 3rem}
.next .wrap>div{background:var(--panel);border-radius:22px;padding:1.6rem 2rem}
.next p{margin:0}
.next a{font-size:1.3rem;font-weight:800}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.about img{border-radius:24px;width:100%;aspect-ratio:1;object-fit:cover}
.bring{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1rem;margin-top:1.5rem}
.bring div{border-radius:22px;padding:1.5rem;transition:transform .3s}
.bring div:hover{transform:translateY(-4px)}
.bring div:nth-child(1){background:var(--blue)}.bring div:nth-child(2){background:#fff;border:1px solid var(--line)}.bring div:nth-child(3){background:var(--lav)}.bring div:nth-child(4){background:var(--sun)}
.bring p{margin:0}
.pills{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pills li{border:1.5px solid var(--ink);border-radius:999px;padding:.45rem 1.1rem;font-weight:600;transition:background .2s,transform .2s}
.pills li:hover{background:var(--hv);color:var(--on-hv);transform:translateY(-2px)}
.edu{list-style:none;margin:1rem 0 0;padding:0}
.edu li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--line)}
.edu span{color:var(--ink2)}
.tl{list-style:none;margin:1rem 0 0;padding:0}
.tl li{display:grid;grid-template-columns:180px 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.tl .when{color:var(--ink2);font-weight:600}
.tl h3{margin-bottom:.15em}.tl p{margin:0}
footer{background:var(--panel);padding:3rem 0 3.5rem;margin-top:3rem}
.fgrid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:2rem}
.fgrid h3{font-size:.95rem;color:var(--ink2);margin-bottom:.6rem}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:.35rem}
.fgrid p{margin:0 0 .5rem}
.fname{font-weight:800;font-size:1.2rem}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}
@media(max-width:900px){.chip{display:none}}
@media(max-width:780px){.grid{grid-template-columns:1fr}.pj.wide .thumb{aspect-ratio:16/10}.fgrid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.tl li{grid-template-columns:1fr;gap:.2rem}.browser{width:82%}.hero{padding-top:3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none}.marq ul{flex-wrap:wrap;width:auto;justify-content:center}.marq li[aria-hidden]{display:none}.marq{-webkit-mask-image:none;mask-image:none}}