/* Two products, with formats matched to each experience. */
.product-heading{text-align:center;max-width:740px;margin:0 auto 48px}.product-heading h2{font:500 48px/1.2 var(--font-sans);letter-spacing:-1.8px}.product-heading>p:last-child{max-width:640px;margin:20px auto 0;color:#778071;font-size:14px;line-height:1.9}.product-heading .brand-kicker{margin-bottom:18px}.feature-index{display:block;font:9px/1.6 var(--font-mono);letter-spacing:1.3px;color:#7a8974}.product-chapter h3{font:500 32px/1.3 var(--font-sans);letter-spacing:-.8px}
.workspace-feature{padding:34px 34px 0;border:1px solid #dfe5d9;border-radius:15px;background:#edf1e7;scroll-margin-top:30px}.workspace-intro{display:grid;grid-template-columns:1fr 1.6fr auto;gap:36px;align-items:center;padding:0 6px 30px}.workspace-intro h3{margin-top:8px}.workspace-intro p{color:#77836e;font-size:12px;line-height:1.9;max-width:440px}.workspace-intro .quiet-link{white-space:nowrap;font-size:11px}
.live-demo{position:relative;min-width:0;overflow:hidden;border:1px solid #dce2d4;border-radius:9px;background:#fff;box-shadow:0 14px 40px #25392210;color:#34412f}.live-toolbar{height:43px;display:flex;align-items:center;gap:15px;padding:0 15px;background:#f9faf6;border-bottom:1px solid #e2e7dc}.live-identity{font:10px/1.4 var(--font-mono);letter-spacing:.5px}.live-state{font-size:9px;color:#85917c;display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}.live-state:before{content:"";width:5px;height:5px;border-radius:50%;background:#bbc3b3}.live-demo[data-state=ready] .live-state:before{background:#74a37b;box-shadow:0 0 0 3px #74a37b13}.live-expand{border:0;border-left:1px solid #dce2d4;background:none;color:inherit;display:flex;align-items:center;gap:7px;font-size:10px;padding:0 0 0 13px;min-height:32px}.live-expand>span:first-child{font-size:19px;line-height:1}.live-viewport{position:relative;height:660px;isolation:isolate;background:#e6ebe3}.live-viewport iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;opacity:0}.live-poster{width:100%;height:100%;object-fit:cover;object-position:top}.live-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:30px;text-align:center;background:#eef1e3c9;backdrop-filter:blur(7px);font-size:12px;z-index:2}.live-loading button{border:1px solid #98a78b;background:#fffdfa;border-radius:20px;padding:7px 18px;color:#34412f}.live-spinner{width:23px;height:23px;border:2px solid #87947840;border-top-color:#71845e;border-radius:50%;animation:live-spin .9s linear infinite}.live-demo[data-state=ready] iframe,.live-demo[data-state=paused] iframe{opacity:1}.live-demo[data-state=ready] .live-loading,.live-demo[data-state=paused] .live-loading,.live-demo[data-state=ready] .live-poster,.live-demo[data-state=paused] .live-poster{visibility:hidden}.live-demo[data-state=failed] .live-spinner{display:none}.live-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 15px;font-size:10px;border-top:1px solid #e2e7dc;background:#fbfcf8}.live-language{font:8px/1.5 var(--font-mono);letter-spacing:.7px;opacity:.5}.live-footer a:hover{text-decoration:underline;text-underline-offset:3px}.live-noscript{display:block;padding:12px;text-align:center}.workspace-feature>.live-demo{border-radius:9px 9px 0 0;border-bottom:0}
.scenario-feature{max-width:1040px;display:grid;grid-template-columns:1fr 420px;gap:90px;margin:92px auto 45px;align-items:center;scroll-margin-top:30px}.scenario-copy h3{margin-top:14px}.scenario-lede{font:400 31px/1.5 var(--font-sans);letter-spacing:-.8px;margin:23px 0;color:#4d5d48}.scenario-copy>p:not(.feature-index):not(.scenario-lede):not(.scenario-extension){font-size:13px;line-height:2;color:#839079;max-width:390px}.scenario-steps{list-style:none;padding:0;margin:28px 0;font-size:12px;color:#607154}.scenario-steps li{display:flex;align-items:center;gap:17px;padding:10px 0;border-bottom:1px solid #e2e7dc}.scenario-steps span{font:9px var(--font-mono);color:#a0ad92}.scenario-extension{font-size:11px;line-height:1.9;color:#8d9983}.scenario-extension strong{display:block;color:#6b7d5f;font-weight:500;margin-bottom:7px}.live-portrait{border-radius:22px;box-shadow:0 22px 60px #34432313}.live-portrait .live-viewport{height:700px}.live-portrait .live-toolbar{height:47px}.live-portrait .live-identity{font-size:11px}.live-portrait .live-footer{padding:12px 16px}
.play-chapter{border-top:1px solid #e2e7dc;margin-top:70px;padding-top:90px}.play-chapter .product-heading{margin-bottom:55px}.island-feature{background:#e8efea;border-radius:15px;padding:36px 35px 0;scroll-margin-top:30px}.island-intro{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:28px}.island-intro h3{margin-top:9px}.island-intro p{max-width:330px;color:#7c8d80;font-size:12px;line-height:1.9}.feature-detail{font:8px var(--font-mono);letter-spacing:1px;color:#8c9d91;white-space:nowrap}.live-island{border-bottom:0;border-radius:9px 9px 0 0}.live-island .live-viewport{height:620px}
.cinema-feature{margin-top:66px;position:relative;padding:42px 32px 32px;border-radius:16px;background:#172e34;color:#ddebe2;scroll-margin-top:30px}.cinema-intro{display:grid;grid-template-columns:1fr auto;gap:10px 30px;padding:0 12px 30px}.cinema-intro .feature-index{grid-column:1/-1;color:#8da49d}.cinema-intro h3{font-size:39px;letter-spacing:3px;font-weight:400}.cinema-intro p{font-size:12px;line-height:1.8;max-width:300px;align-self:center;color:#91aaa0}.live-cinema{border-color:#526d6645;box-shadow:none}.live-cinema .live-viewport{height:590px}.live-cinema .live-toolbar,.live-cinema .live-footer{background:#e9eeea}
.studio-feature{margin-top:66px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;background:#f1ede6;border:1px solid #e9e2d8;border-radius:15px;padding:38px 28px 38px 40px;align-items:center;scroll-margin-top:30px}.studio-intro .feature-index{color:#a68e76;font-size:8px}.studio-intro h3{font-size:33px;margin:22px 0 18px;max-width:160px}.studio-intro p{font-size:12px;line-height:2;color:#9a8f81;max-width:190px}.material-swatches{display:flex;gap:7px;margin:32px 0 16px}.material-swatches i{display:block;width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#f8e9de,#ad74645c 55%,#9f6d5a96);box-shadow:inset -2px -2px 4px #7b564318,0 2px 4px #5c392a10}.material-swatches i:nth-child(2){background:radial-gradient(circle at 32% 25%,#e4ebd5,#9db09a 65%,#8b9d7f)}.material-swatches i:nth-child(3){background:radial-gradient(circle at 32% 25%,#efe6e0,#c4a5a0 65%,#a48385)}.material-swatches i:nth-child(4){background:radial-gradient(circle at 32% 25%,#e9e3d8,#bfae87 65%,#ae9c72)}.material-swatches i:nth-child(5){background:radial-gradient(circle at 32% 25%,#f9f7f0,#e4e0d0 65%,#c6c0ad)}.studio-note{font:7px var(--font-mono);letter-spacing:1px;color:#b1a594}.live-studio .live-viewport{height:760px;background:#f5f6f7}
.cosmos-feature{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:center;gap:40px;margin-top:66px;border-radius:15px;background:#0d131f;padding:30px 40px 30px 30px;color:#dee7ed;overflow:hidden;scroll-margin-top:30px}.cosmos-intro{position:relative;padding-left:12px}.cosmos-intro .feature-index{color:#6d8492;font-size:8px}.cosmos-intro h3{font-size:43px;font-weight:400;letter-spacing:-1.6px;line-height:1.25;margin:24px 0}.cosmos-intro p{font-size:12px;line-height:2;color:#81929e;max-width:220px}.live-cosmos{border-color:#3a4652;box-shadow:none}.live-cosmos .live-toolbar,.live-cosmos .live-footer{background:#18212d;border-color:#32414e;color:#becbd3}.live-cosmos .live-expand{border-color:#3b4a56}.live-cosmos .live-state{color:#81949e}.live-cosmos .live-viewport{height:640px;background:#080b13}.cosmos-orbits{position:relative;width:200px;height:130px;margin-top:42px;opacity:.65;transform:rotate(-23deg)}.cosmos-orbits i{position:absolute;border:1px solid #58707d50;border-radius:50%;inset:10px 0}.cosmos-orbits i:nth-child(2){inset:26px 25px}.cosmos-orbits i:nth-child(3){inset:43px 53px}.cosmos-orbits b{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;background:#a1c2b8;box-shadow:0 0 23px #9dcebd66}.cosmos-orbits:after{content:"";width:6px;height:6px;border-radius:50%;position:absolute;top:24px;left:40px;background:#a7a5d2}
.live-demo:fullscreen,.live-demo.is-expanded{width:100%;height:100%;max-width:none;border:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none;transform:none!important}.live-demo:fullscreen .live-viewport,.live-demo.is-expanded .live-viewport{height:auto;flex:1;min-height:0}.live-demo.is-expanded{position:fixed;inset:0;z-index:1000;height:100dvh;background:#fff}.live-demo:fullscreen .live-toolbar,.live-demo.is-expanded .live-toolbar{flex:none;height:48px}.live-demo:fullscreen .live-footer,.live-demo.is-expanded .live-footer{flex:none}.demo-expanded{overflow:hidden}.live-demo:focus-within{outline:1px solid #9dad90;outline-offset:3px}
@keyframes live-spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.workspace-intro{grid-template-columns:1fr 1.5fr;gap:16px 30px}.workspace-intro .quiet-link{grid-column:2;justify-self:start}.workspace-feature{padding:28px 24px 0}.scenario-feature{gap:40px;grid-template-columns:1fr 390px}.island-intro{gap:22px}.feature-detail{display:none}.studio-feature{grid-template-columns:170px minmax(0,1fr);gap:22px;padding:28px 22px}.studio-intro h3{font-size:29px}.cosmos-feature{grid-template-columns:minmax(0,1fr) 200px;gap:25px;padding:24px}.cosmos-intro h3{font-size:36px}.cosmos-orbits{width:160px}}
@media(max-width:780px){.product-heading{margin-bottom:30px}.product-heading h2{font-size:34px;letter-spacing:-1px}.product-heading>p:last-child{font-size:12px;line-height:2;margin-top:16px}.workspace-feature{padding:24px 12px 0;border-radius:12px}.workspace-intro{padding:0 8px 24px;gap:16px;grid-template-columns:1fr}.workspace-intro p{font-size:12px}.workspace-intro .quiet-link{grid-column:1}.product-chapter h3{font-size:27px}.live-toolbar{padding:0 10px;gap:9px;height:42px}.live-identity{font-size:9px;letter-spacing:0}.live-state{font-size:8px;gap:4px}.live-expand{font-size:9px;padding-left:9px;gap:4px;min-height:36px}.live-footer{padding:10px 12px;font-size:10px}.live-viewport{height:640px}.scenario-feature{grid-template-columns:1fr;gap:30px;margin:58px auto 34px}.scenario-copy{padding:0 8px}.scenario-lede{font-size:28px;margin:18px 0}.scenario-lede br{display:none}.scenario-copy>p:not(.feature-index):not(.scenario-lede):not(.scenario-extension){max-width:540px;font-size:12px}.scenario-steps{display:flex;gap:15px;font-size:10px;flex-wrap:wrap}.scenario-steps li{gap:8px;border:0}.scenario-extension{max-width:500px}.live-portrait{max-width:420px;width:100%;margin:auto}.live-portrait .live-viewport{height:680px}.play-chapter{padding-top:60px;margin-top:45px}.play-chapter .product-heading{margin-bottom:35px}.island-feature{padding:24px 12px 0}.island-intro{display:block;padding:0 8px;margin-bottom:23px}.island-intro p{margin-top:16px;max-width:500px}.live-island .live-viewport{height:620px}.cinema-feature{margin-top:38px;padding:27px 12px 13px}.cinema-intro{display:block;padding:0 8px 24px}.cinema-intro h3{font-size:30px;margin-top:15px}.cinema-intro p{margin-top:12px;max-width:500px}.live-cinema .live-viewport{height:590px}.studio-feature{margin-top:38px;display:block;padding:26px 12px 12px}.studio-intro{position:relative;padding:0 8px 22px}.studio-intro h3{max-width:none;margin:13px 0}.studio-intro p{max-width:360px}.material-swatches{margin:18px 0 0;gap:6px}.material-swatches i{width:20px;height:20px}.studio-note{display:none}.live-studio .live-viewport{height:760px}.cosmos-feature{margin-top:38px;display:flex;flex-direction:column-reverse;gap:22px;padding:26px 12px 12px}.cosmos-intro{padding:0 8px;width:100%}.cosmos-intro h3{font-size:31px;margin:13px 0}.cosmos-intro h3 br{display:none}.cosmos-intro p{max-width:500px}.cosmos-orbits{display:none}.live-cosmos{width:100%}.live-cosmos .live-viewport{height:640px}.feature-index{font-size:8px}}
@media(max-width:390px){.live-state{font-size:7px}.live-toolbar{gap:6px;padding:0 8px}.live-identity{font-size:8px}.live-expand{padding-left:6px}.workspace-feature,.island-feature,.cinema-feature,.studio-feature,.cosmos-feature{padding-left:7px;padding-right:7px}.live-viewport{height:630px}.product-heading h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){.live-spinner{animation:none}}
/* The brand hero introduces both products, rather than making one system the brand. */
.sunrise-scene.brand-scene{display:flex;align-items:flex-start;justify-content:center;gap:0;padding:40px 30px 0;min-height:390px;background:radial-gradient(ellipse at 30% 70%,#e4ebdf,#f0eee6 70%)}.scene-preview{position:relative;display:block;width:62%;border:1px solid #d9e1d2;border-radius:10px 10px 0 0;background:#f6f8f1;overflow:hidden;box-shadow:0 15px 45px #283e2a12;transition:transform .3s}.scene-preview:hover{transform:translateY(-5px)}.scene-preview>span{display:block;text-align:left;padding:12px 17px;font:9px var(--font-mono);letter-spacing:.4px;color:#718068}.sunrise-scene .scene-preview img{margin:0;width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;object-position:top;mix-blend-mode:normal;border:0;border-top:1px solid #e0e6d8;border-radius:0;box-shadow:none}.scene-preview.scene-play{width:50%;margin:60px 0 0 -12%;z-index:2;background:#e9f1ec;border-color:#cfddd3}.scene-play>span{color:#748f7e}
@media(max-width:780px){.sunrise-scene.brand-scene{padding:20px 12px 0;min-height:0;align-items:flex-end;overflow:hidden}.scene-preview{width:65%}.scene-preview.scene-play{width:55%;margin:45px 0 0 -15%}.scene-preview>span{font-size:7px;padding:10px}.sunrise-scene .scene-preview img{aspect-ratio:1.25}}