.examples .section-head h2,.abilities .section-head h2{max-width:15ch}.example-controls,.example-tabs,.device-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.example-controls{justify-content:space-between;margin-bottom:20px}.example-controls button{font:inherit;padding:10px 16px;border:1px solid #b7b8ae;border-radius:6px;background:transparent;cursor:pointer}.example-controls button[aria-pressed=true]{background:#121827;color:white;border-color:#121827}.device-controls a{margin-left:12px;text-decoration:underline;text-underline-offset:4px;font-size:13px}.example-window{background:#e5e6df;border:1px solid #b7b8ae;border-radius:12px;overflow:hidden}.example-address{padding:13px 20px;border-bottom:1px solid #b7b8ae;font-size:12px;color:#454b54}#example-viewport{height:650px;position:relative;margin:0 auto;overflow:hidden;background:#fff;transition:width .35s cubic-bezier(.16,1,.3,1);width:100%}#example-frame{border:0;display:block;width:100%;height:100%;background:#fff}#example-viewport.mobile{width:390px;max-width:100%;box-shadow:0 12px 35px -22px #1a273c66}.abilities-layout{display:grid;grid-template-columns:1fr 1fr;gap:55px}.abilities-list{border-top:1px solid #b7b8ae}.ability{display:block;width:100%;padding:24px 0;text-align:left;background:transparent;border:0;border-bottom:1px solid #b7b8ae;cursor:pointer;color:#121827;transition:padding-left .2s}.ability strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.025em}.ability span{display:block;margin-top:6px;color:#4b5563;font-size:14px}.ability[aria-pressed=true]{padding-left:18px;background:#e8eccd}.ability-playground{position:relative;overflow:hidden;align-self:start;background:#121827;color:#fff;padding:42px;min-height:450px;border-radius:12px}.ability-playground h3{font-size:32px;max-width:16ch}.ability-playground p{color:#c3cddd}.ability-playground button{background:#d5e337;color:#152015;padding:12px 20px;border:0;border-radius:6px;margin-top:28px;cursor:pointer;transition:transform .16s,background .2s}.ability-playground #ability-tools button{background:transparent;color:#edf0f8;border:1px solid #657188;margin:12px 6px 0 0;font-size:12px;padding:8px 12px}.ability-playground #ability-tools button[aria-pressed=true]{background:#edf0f8;color:#152015}.ability-playground a{display:inline-block;color:#d5e337;margin-top:22px;text-decoration:underline}#ability-feedback{font-size:13px;min-height:42px;margin-top:22px}.ability-playground .replay{animation:tap-soft .45s cubic-bezier(.16,1,.3,1)}.ability-playground .replay.quick{animation-duration:.16s}.ability-playground .replay.elastic{animation:tap-elastic .5s ease-out}.ability-playground.cursor-ring-demo{cursor:none}.ability-playground.cursor-ring-demo button{cursor:none}#pointer-preview{display:none;position:absolute;width:26px;height:26px;border:1px solid #d5e337;border-radius:50%;pointer-events:none;z-index:10;transform:translate(-50%,-50%)}.cursor-ring-demo #pointer-preview{display:block}.ability-playground[data-cursor=crosshair],.ability-playground[data-cursor=crosshair] button{cursor:crosshair}.ability-playground[data-cursor=text],.ability-playground[data-cursor=text] button{cursor:text}@keyframes tap-soft{0%{transform:scale(1)}35%{transform:scale(.94)}100%{transform:scale(1)}}@keyframes tap-elastic{0%{transform:scale(1)}35%{transform:scale(.88)}65%{transform:scale(1.06)}100%{transform:scale(1)}}@media(max-width:760px){.abilities-layout{grid-template-columns:1fr;gap:26px}.ability-playground{padding:28px;min-height:380px}.example-controls{gap:16px}.example-tabs{width:100%}.example-tabs button{flex:1;padding:10px 8px;font-size:12px}.device-controls{width:100%}.device-controls a{margin-left:auto}#example-viewport{height:590px}.example-address{font-size:11px}.section-head h2{font-size:clamp(2.3rem,8vw,4rem)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.hero-project{display:block;background:#e7e4da;border-radius:3px;overflow:hidden;color:#1d302c}.hero-project>img{display:block;width:100%;height:430px;object-fit:cover;transition:transform .65s cubic-bezier(.16,1,.3,1)}.hero-project:hover>img{transform:scale(1.025)}.hero-project>span{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px}.hero-project strong{font-size:30px;letter-spacing:-.035em}.hero-project>span>span{font-size:11px;text-align:right}@media(max-width:760px){.hero-project>img{height:330px}}