@font-face{font-family:Manrope;src:url('/showcase/assets/manrope.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}@font-face{font-family:Eczar;src:url('/showcase/assets/eczar-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root{font-family:Manrope,system-ui,sans-serif;color:#ededec;background:#101114;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(940px,calc(100% - 64px));margin:42px auto}h1{margin:0 0 26px;font-size:20px;line-height:1.4;font-weight:650;letter-spacing:-.04em}h1 span{color:#8e9398;font-weight:400}.projects{display:grid;gap:12px}.project{--x:0px;--y:0px;position:relative;isolation:isolate;display:flex;align-items:center;height:150px;padding:24px 30px;overflow:hidden;border-radius:5px;background:#17191c;color:inherit;text-decoration:none}.project-copy{z-index:2;position:relative;pointer-events:none}h2{display:flex;align-items:center;gap:10px;margin:0;font-size:31px;line-height:1.2;font-weight:600;letter-spacing:-.06em}p{margin:8px 0 0;font-size:12px;line-height:1.5;color:#b0b0b0}.arrow{position:absolute;right:25px;top:26px;font-size:22px;z-index:4;transition:transform .2s}.project:hover>.arrow{transform:translate(3px,-3px)}.scene{transform:translate(var(--x),var(--y));transition:transform .4s ease-out;pointer-events:none}.project:focus-visible,.project-link:focus-visible,button:focus-visible{outline:2px solid #e0b382;outline-offset:4px}.featured{height:170px;background:#191816}.featured-label{display:block;margin-bottom:8px;font-size:10px;color:#d1ac7e}.inkly h2{font-size:36px}.inkly h2 .brand-dot{margin-left:-10px;color:#cf9a5e}.inkly-mark{width:35px;height:35px;fill:none;stroke:#e3d8ca;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.inkly-sheet{position:absolute;width:54%;right:7%;top:61px;background:#fff;padding:10px 12px;rotate:-2deg}.inkly-sheet img{display:block;width:100%;height:auto}.inkly-sheet>span{position:absolute;right:0;top:calc(100% + 12px);font-size:10px;color:#a69580}
.aha{background:#18304a;color:#f3f0e4}.natural-bg{position:absolute;inset:-10px;background:url('/first-demo/assets/aha/daylight-sky.png') 50% 54%/cover;filter:brightness(.48) saturate(.7);transform:translate(calc(var(--x) * -.3),calc(var(--y) * -.3));transition:transform .5s}.aha p{color:#e4e9ee}.aha h2{font-size:26px}.project-link{position:static;pointer-events:auto;text-decoration:none;color:inherit}.project-link::after{content:'';position:absolute;inset:0;z-index:2}.aha-discovery{position:absolute;right:13%;bottom:11px;width:230px;z-index:3;pointer-events:auto}.aha-discovery button{width:100%;display:block;padding:0;border:0;background:none;color:#f3f0e4;cursor:pointer;transition:transform .3s}.aha-discovery button:hover{transform:translateY(-5px)}.aha-discovery svg{width:100%;display:block}.aha-discovery p{position:absolute;right:-12px;bottom:42px;width:230px;padding:12px 14px;background:#102c45;color:#f3f0e4;font-size:12px;line-height:1.5;pointer-events:none}.aha-discovery p[hidden]{display:none}
.interform{background:#080c14}.interform-mark{width:38px;height:38px;transition:rotate .6s}.interform:hover .interform-mark{rotate:120deg}.interform-pieces{position:absolute;right:4%;top:-24px;width:50%;height:200px;object-fit:cover;object-position:50% 50%}.interform .project-copy{max-width:48%}.interform p{color:#aaaeb7}
.neem{background:#152445;color:#ece8d8}.neem-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 61%;filter:brightness(.6);transform:scale(1.05) translate(calc(var(--x) * -.3),calc(var(--y) * -.3));transition:transform .5s}.neem::after{content:'';position:absolute;inset:0;background:#101b3a42;z-index:0}.neem h2{font-family:Eczar,Georgia,serif;font-size:41px;font-weight:700;letter-spacing:-.04em;gap:10px}.neem-leaf{width:22px;height:34px;transition:rotate .4s}.neem:hover .neem-leaf{rotate:-15deg}.neem p{color:#ede9db}.neem-motto{position:absolute;right:15%;top:37px;z-index:1;font-family:Eczar,Georgia,serif;font-size:31px;font-weight:700;line-height:1.1;letter-spacing:-.04em}
.lusion{background:#1b1d23}.lusion h2{font-size:32px;font-weight:500}.lusion p{color:#c1c4cd}.lusion-star{display:block;width:25px;height:25px;margin-left:3px;transition:rotate .6s}.lusion-star svg{display:block;width:100%;height:100%}.lusion:hover .lusion-star{rotate:90deg}.formfield-scene{position:absolute;inset:-5px;overflow:hidden;z-index:-1}.formfield-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1b1d23 5%,#1b1d23ed 30%,#1b1d2333 65%)}.formfield-scene img{width:100%;height:100%;object-fit:cover;object-position:75% 47%;opacity:.85}.formfield-scene>span{position:absolute;right:12%;bottom:13px;z-index:1;font-size:16px;letter-spacing:-.04em;font-weight:700;color:#fff}.formfield-scene sup{font-size:8px}.formfield-scene small{display:block;font-size:9px;letter-spacing:0;font-weight:400;margin-top:1px}/* taste-skill-ignore: neutral charcoal scrim over the project artwork keeps labels readable. */
.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-200%);padding:10px 14px;background:#101114;color:#e0b382;z-index:9}.skip-link:focus{transform:none}.projects:focus{outline:none}
@media(max-width:700px){main{width:calc(100% - 32px);margin:28px auto}h1{margin-bottom:22px}.project{height:148px;padding:20px}.featured{height:166px}h2{font-size:27px}.arrow{right:17px;top:19px;font-size:20px}.inkly h2{font-size:30px}.inkly-mark{width:28px;height:28px}.inkly-sheet{right:7%;width:48%;top:75px;padding:10px 5px;overflow:hidden}.inkly-sheet img{width:390px;max-width:none}.inkly-sheet>span{display:none}.aha-discovery{width:145px;right:12%;bottom:12px}.aha h2{font-size:24px}.aha .project-copy{align-self:flex-start}.aha-discovery p{right:0;bottom:0;width:200px;background:#102c45f5}.interform-mark{width:28px;height:28px}.interform h2{font-size:25px;gap:6px}.interform-pieces{width:51%;right:-10%;top:12px;height:156px}.interform .project-copy{align-self:flex-start;margin-top:4px}.interform p{margin-left:34px}.neem h2{font-size:35px}.neem-motto{font-size:24px;right:12%;top:61px}.neem-background{object-position:68% 58%}.neem-leaf{width:19px;height:29px}.lusion h2{font-size:28px}.lusion .project-copy{align-self:flex-start;margin-top:4px}.lusion-star{width:22px;height:22px}.formfield-scene{inset:-5px -40% -5px 0;}.formfield-scene::after{background:linear-gradient(90deg,#1b1d23 4%,#1b1d23db 27%,#1b1d2300 60%)}.formfield-scene>span{right:36%;bottom:15px;font-size:14px}.formfield-scene small{font-size:8px}.lusion p{max-width:150px}}/* taste-skill-ignore: neutral charcoal scrim over the project artwork keeps labels readable. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.scene,.natural-bg,.neem-background{transform:none!important}.project:hover .interform-mark,.project:hover .neem-leaf,.project:hover .lusion-star{rotate:0deg}}