:root{--navy:#052650;--blue:#0878f9;--ink:#162b42;--muted:#617186;--line:#dce4ed;--paper:#f6f8fb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif;background:var(--paper)}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}header{height:105px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(6%,calc((100% - 1280px)/2));gap:24px}.logo{width:260px;display:block}.logo img{width:100%;height:auto;display:block}header>span{font-size:.72rem;letter-spacing:.16em;color:var(--muted);font-weight:700}.intro{position:relative;max-width:1440px;margin:auto;padding:72px 6% 64px}.eyebrow{font-size:.75rem;letter-spacing:.15em;font-weight:700;color:var(--blue);margin-bottom:20px}h1{font-size:clamp(2.8rem,5.5vw,5.5rem);font-weight:700;letter-spacing:-.055em;line-height:1.06;margin:0;max-width:980px}h1 em{font-style:normal;color:var(--blue)}.intro p{color:var(--muted);font-size:1.1rem;margin:25px 0 28px}.explore{display:inline-flex;align-items:center;gap:38px;padding:13px 20px;background:var(--navy);color:white;font-size:.875rem;font-weight:600;border-radius:5px}.explore:hover{background:var(--blue)}.intro-index{position:absolute;right:6%;bottom:67px;font-size:.7rem;letter-spacing:.16em;color:var(--muted);writing-mode:vertical-rl}.collection{max-width:1440px;margin:auto;padding:0 6% 75px}.collection-heading{border-top:1px solid var(--line);padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.collection-heading h2{font-size:1.5rem;letter-spacing:-.035em;margin:0}.collection-heading>span{font-size:.7rem;letter-spacing:.12em;color:var(--muted)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:58px 32px}.preview{display:block;position:relative;overflow:hidden;aspect-ratio:1.5;background:#e2e7ee;border:1px solid var(--line);border-radius:8px;isolation:isolate;container-type:inline-size}.preview iframe{width:1440px;height:960px;position:absolute;top:0;left:0;border:0;transform:scale(.4);transform-origin:top left;pointer-events:none}.preview-action{position:absolute;right:18px;bottom:18px;background:white;box-shadow:0 2px 20px #00182c26;color:var(--navy);padding:8px 14px;border-radius:4px;font-size:.8rem;font-weight:700;transition:background .2s,color .2s}.preview:hover .preview-action{background:var(--blue);color:white}.project-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.category{font-size:.68rem;letter-spacing:.13em;font-weight:700;color:var(--muted)}h3{font-size:1.55rem;letter-spacing:-.04em;line-height:1.2;margin:7px 0 0}.open-demo{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}.open-demo:hover{background:var(--navy);color:white}.project>p{font-size:.93rem;color:var(--muted);margin:13px 0;max-width:56ch}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{border:1px solid var(--line);border-radius:20px;font-size:.72rem;padding:3px 10px;color:#435a71}footer{padding:25px 6%;border-top:1px solid var(--line);background:white;display:flex;justify-content:space-between;align-items:center;gap:25px}footer img{width:180px;height:auto}footer p{font-size:.75rem;color:var(--muted)}footer a{font-size:.75rem;white-space:nowrap}.skip{position:fixed;top:-100px;left:15px;padding:10px;background:white;z-index:100}.skip:focus{top:10px}@supports(width:1cqw){.preview iframe{transform:scale(calc(100cqw / 1440px))}}@media(max-width:740px){header{height:88px;padding:0 6%}.logo{width:190px}header>span{font-size:.58rem;max-width:85px}.intro{padding:48px 6% 42px}.eyebrow{font-size:.65rem}.intro p{font-size:1rem;max-width:30ch}.intro-index{display:none}.grid{grid-template-columns:1fr;gap:38px}.collection-heading h2{font-size:1.3rem}.collection-heading>span{font-size:.63rem}.collection{padding-bottom:45px}.preview-action{right:12px;bottom:12px;font-size:.72rem}.project-heading{margin-top:16px}h3{font-size:1.45rem}footer{flex-wrap:wrap;gap:8px}footer p{width:100%;order:3}footer img{width:150px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.preview-action{transition:none}}