*{box-sizing:border-box}.key-page{margin:0;background:#f7f4ff;color:#28144c;font-family:Arial,sans-serif}.key-page a{color:inherit;text-decoration:none}.key-page button{font:inherit;cursor:pointer}.key-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 6%;background:#6348ea;color:white}.key-header img{width:110px;height:auto}.key-header a,.key-header button{font-size:14px}.key-header button{border:1px solid #ffffff77;border-radius:30px;padding:12px 16px;background:transparent;color:white}.key-hero{padding:55px 6% 0;background:radial-gradient(ellipse at 80% 35%,#9878ff,#6348ea 60%);color:white;overflow:hidden}.key-eyebrow{font-size:14px;letter-spacing:2px;line-height:1.5}.key-page h1{font-size:clamp(60px,10vw,155px);letter-spacing:-5px;line-height:.95;margin:35px 0}.key-page em{font-family:Georgia,serif;font-weight:400;color:#d7ff83}.key-hero-intro{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:35px}.key-page p{font-size:18px;line-height:1.65}.key-page .key-eyebrow{font-size:14px}.key-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:22px 28px;border-radius:60px;background:#d7ff83;color:#28144c!important;font-size:18px;font-weight:600;min-width:250px;transition:transform .3s,box-shadow .3s}.key-cta:hover{transform:translateY(-5px);box-shadow:0 12px 35px #d7ff8370}.key-cta span{font-size:30px}.key-group{margin:0;position:relative}.key-group img{display:block;width:100%;height:auto;border-radius:32px 32px 0 0}.key-group figcaption{position:relative;font-size:12px;color:#eee5ff;padding:12px 0;text-align:right}.key-case-section,.key-directions,.key-outro{padding:85px 6%}.key-section-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:7%;align-items:center}.key-page h2{font-size:clamp(36px,5vw,72px);line-height:1.08;font-weight:500;letter-spacing:-2px;margin:24px 0 35px}.key-case-section em,.key-directions em{color:#6348ea}.key-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.key-work-grid article{border-top:2px solid #aa91ef;padding-top:25px}.key-work-grid article>span{font-size:14px;color:#7658aa}.key-page h3{font-size:26px;font-weight:500;margin:24px 0 10px}.key-directions{background:#e9e0ff}.key-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px}.key-course-grid article{padding:28px;border-radius:24px;background:#fff;min-height:270px;transition:transform .4s,box-shadow .4s;overflow:hidden}.key-course-grid article:hover{transform:translateY(-8px) rotateX(3deg);box-shadow:0 20px 35px #52319830}.course-code{display:block;font-size:clamp(35px,5vw,68px);font-weight:800;letter-spacing:-3px;color:#6348ea}.key-course-grid .course-3d{background:#6348ea;color:white}.course-3d .course-code{color:#d7ff83;text-shadow:1px 1px #7d6c40,2px 2px #7d6c40,3px 3px #7d6c40,4px 4px #7d6c40}.key-course-grid .course-ai{background:#d7ff83}.key-course-grid .course-motion{background:#30205a;color:white}.course-motion .course-code{color:#cdb6ff}.key-page .key-source{font-size:14px;margin-top:25px}.key-source a{text-decoration:underline}.key-outro{background:#6348ea;color:white}.key-outro .key-cta{max-width:480px}.key-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px 6%;background:#4c33bb;color:white}.key-footer p{font-size:13px}.key-page a:focus-visible,.key-page button:focus-visible{outline:3px solid #ed7c32;outline-offset:5px}.key-portal{grid-column:1/-1;display:block;position:relative;background:radial-gradient(ellipse at 70% 50%,#9971fa,#6348ea 65%);color:white;isolation:isolate}.key-portal .key-portal-face{display:grid;grid-template-columns:1fr 1.35fr;gap:26px;padding:32px;align-items:center}.key-portal .project-kicker,.key-portal .project-bottom{grid-column:1/-1;position:relative;z-index:2}.key-portal .key-brand{border:0;padding:0}.key-portal .project-name{font-size:clamp(35px,5vw,70px);margin:25px 0}.key-portal-image{display:block;width:100%;height:auto;border-radius:24px;transform:perspective(1000px) rotateY(-7deg);transition:transform .65s,box-shadow .65s}.key-portal:hover .key-portal-image,.key-portal:focus-visible .key-portal-image{transform:perspective(1000px) rotateY(0) translateY(-8px);box-shadow:0 22px 45px #23005760}.key-portal .portal-cta{display:inline-flex;align-items:center;gap:25px;padding:16px 22px;border-radius:40px;background:#d7ff83;color:#28144c;font-size:16px;font-weight:600}.key-portal .portal-cta span{transition:transform .4s}.key-portal:hover .portal-cta span{transform:translate(5px,-5px)}.key-portal:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff22 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}.key-portal:hover:before{animation:key-sheen 1.3s ease-out}.key-portal .key-art-note{font-size:12px;opacity:.8;margin:10px 0 0}.key-reveal{animation:key-arrive .9s ease-out both}@keyframes key-sheen{to{transform:translateX(110%)}}@keyframes key-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:800px){.key-course-grid{grid-template-columns:1fr 1fr}.key-section-heading{grid-template-columns:1fr}.key-portal .key-portal-face{grid-template-columns:1fr}.key-portal-image{transform:none}.key-portal .project-name{font-size:44px}}@media(max-width:550px){.key-header{flex-wrap:wrap}.key-header img{width:80px}.key-page h1{letter-spacing:-3px}.key-hero-intro{display:block}.key-hero-intro .key-cta{margin:25px 0}.key-work-grid,.key-course-grid{grid-template-columns:1fr}.key-case-section,.key-directions,.key-outro{padding:55px 6%}.key-footer{display:block}.key-portal .key-portal-face{padding:24px}.key-group img{border-radius:18px 18px 0 0}.key-group figcaption{text-align:left}.key-course-grid article{min-height:230px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.key-portal *, .key-page *{animation:none!important;transition:none!important}.key-portal-image,.key-course-grid article:hover,.key-cta:hover{transform:none!important}}html[data-motion=paused] .key-page *{animation:none!important;transition:none!important}html[data-motion=paused] .key-course-grid article:hover{transform:none}
