body{--project-accent:#ffd928;--project-surface:#111711;background:linear-gradient(180deg,color-mix(in srgb,var(--project-accent) 5%,var(--paper)) 0,var(--paper) 34rem)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:#fff;color:#111;text-decoration:none;font-weight:800}.skip:focus{top:16px}
.hero{position:relative;isolation:isolate}.hero:before{content:"";position:absolute;z-index:-1;right:4%;top:8%;width:min(42vw,560px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--project-accent) 16%,transparent);filter:blur(90px);opacity:.72;pointer-events:none}
.eyebrow,.story article span,.capability>span{color:color-mix(in srgb,var(--project-accent) 78%,#574a00)}
.primary{background:var(--project-accent);border-color:var(--project-accent);color:#101410;box-shadow:0 12px 35px color-mix(in srgb,var(--project-accent) 23%,transparent)}
.showcase .browser{border:1px solid color-mix(in srgb,var(--project-accent) 26%,transparent);background:color-mix(in srgb,var(--project-surface) 92%,#000)}
.showcase .browser>img{aspect-ratio:16/10}
.dark{background:var(--project-surface)}.dark .capability{background:var(--project-surface)}.dark .eyebrow,.dark .capability>span{color:var(--project-accent)}
.capability{transition:transform .25s ease,background-color .25s ease}.capability:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--project-surface) 92%,var(--project-accent))}
.device{margin:0;box-shadow:0 24px 65px rgba(10,18,10,.17);border:1px solid color-mix(in srgb,var(--project-accent) 20%,#333)}.device figcaption{display:block;padding:3px 6px 10px}.device.desktop img{aspect-ratio:16/10}.device.phone img{aspect-ratio:390/844}
.implementation{background:color-mix(in srgb,var(--project-accent) 5%,#fff);border-block:1px solid var(--line)}.implementation-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,100px);align-items:start}.implementation dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.implementation dl div{background:var(--paper);padding:24px}.implementation dt{font-weight:900;margin-bottom:8px}.implementation dd{margin:0;color:var(--muted);font-size:.92rem}
.cta{background:var(--project-surface);box-shadow:0 28px 90px color-mix(in srgb,var(--project-surface) 20%,transparent)}
.btn:focus-visible,a:focus-visible{outline-color:color-mix(in srgb,var(--project-accent) 68%,#fff)}
@supports not (color:color-mix(in srgb,#000,#fff)){.primary{background:#ffd928}.dark,.cta{background:#111711}}
@media(max-width:850px){.implementation-grid{grid-template-columns:1fr}}
@media(max-width:620px){h1{font-size:clamp(2.8rem,15vw,4.2rem)}.hero-facts{margin-top:14px}.implementation dl{grid-template-columns:1fr}.devices{grid-template-columns:minmax(0,1fr) minmax(105px,.45fr)}}