@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #28233b;
  --paper: #fff7e9;
  --muted: #777184;
  --purple: #6e4ee6;
  --pink: #fa806b;
  --yellow: #f8dc63;
  --mint: #b8e5c7;
  --line: #e9dfd0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 'DM Sans', sans-serif; }
a { color: inherit; }

.topbar, footer { width: min(1200px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.topbar { height: auto; min-height: 96px; padding: 18px 0; border: 0; }
.brand { display: flex; align-items: center; gap: 15px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.15; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing: .16em; }
.brand-mark { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 42% 58% 51% 49%; background: var(--yellow); color: var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 700 13px 'DM Mono', monospace; letter-spacing: -.08em; transform: rotate(-11deg); }
.brand-mark>svg { position: absolute; top: -9px; right: -8px; width: 21px; height: 21px; overflow: visible; color: var(--purple); fill: currentColor; }
.top-link { display: flex; align-items: center; gap: 10px; padding: 8px 9px 8px 13px; border: 1px dashed #b5a8d2; border-radius: 4px 16px 4px 16px; background: #fffaf1; color: var(--ink); font: 9px 'DM Mono', monospace; letter-spacing: .07em; text-decoration: none; transform: rotate(2deg); transition: transform .2s, background .2s; }
.top-link:hover { background: var(--yellow); transform: rotate(0); }
.top-link b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: var(--ink); }
.top-link b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The opening is a color panel and a playful idea board, not a standard text banner. */
.hero { position: relative; isolation: isolate; width: 100%; margin: 0; padding: 58px max(32px, calc((100% - 1200px) / 2)) 64px; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(38px, 5vw, 68px); align-items: center; overflow: hidden; background: #302746; color: var(--paper); }
.hero:before { position: absolute; z-index: -1; top: -210px; left: 35%; width: 410px; height: 410px; border: 1px solid #ffffff16; border-radius: 50%; content: ''; }
.hero:after { position: absolute; z-index: -1; right: 6%; bottom: -240px; width: 430px; height: 430px; border: 1px solid #ffffff16; border-radius: 50%; content: ''; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .11em; text-transform: uppercase; }
.hero .eyebrow { color: #d2c9e0; }
.eyebrow i { display: inline-block; width: 19px; height: 3px; margin: 0 9px 3px 0; background: var(--pink); vertical-align: middle; transform: rotate(-8deg); }
.hero h1 { position: relative; display: inline-block; margin: 0; color: var(--paper); font: 700 clamp(40px, 4.8vw, 62px)/1.02 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: -.075em; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.headline-star { position: absolute; top: 0; right: -30px; width: 24px; height: 24px; color: var(--pink); fill: currentColor; transform: rotate(12deg); }
.lede { max-width: 370px; margin: 21px 0 22px; color: #ded8e8; font-size: 14px; line-height: 1.85; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 12px 15px; background: var(--pink); color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s; }
.button:hover { background: var(--yellow); transform: translateY(-3px) rotate(-1deg); }
.button span { display: inline-flex; align-items: center; color: var(--ink); }
.button span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.location { margin: 27px 0 0; padding-left: 11px; border-left: 2px solid var(--mint); color: #bcb4c9; font: 8px 'DM Mono', monospace; letter-spacing: .05em; }

/* Collage: paper notes and cutout shapes sit on a bright work surface. */
.playground { position: relative; z-index: 1; min-height: 500px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background-color: var(--mint); background-image: radial-gradient(#283b3033 .8px, transparent .8px); background-size: 16px 16px; box-shadow: 9px 10px 0 #171323; transform: rotate(1deg); }
.playground:before { position: absolute; z-index: -1; top: 13%; left: 22%; width: 330px; height: 330px; border-radius: 44% 56% 58% 42%; background: var(--yellow); content: ''; transform: rotate(-15deg); }
.playground:after { position: absolute; z-index: -1; right: -55px; bottom: -55px; width: 190px; height: 190px; border-radius: 50%; background: var(--pink); content: ''; }
.play-tag { position: relative; z-index: 2; color: #506451; font: 8px 'DM Mono', monospace; letter-spacing: .12em; }
.tag-top { align-self: flex-start; }
.tag-bottom { align-self: flex-end; }
.shape { position: absolute; }
.shape-sun { top: 38px; right: 43px; width: 54px; height: 54px; color: var(--purple); fill: currentColor; transform: rotate(14deg); }
.shape-blob { bottom: 39px; left: 7%; width: 100px; height: 125px; border-radius: 52% 48% 29% 71%; background: var(--purple); transform: rotate(27deg); }
.shape-spark { right: 9%; bottom: 74px; width: 38px; height: 38px; color: #fff; fill: currentColor; transform: rotate(16deg); }
.note { position: absolute; z-index: 3; padding: 10px 13px; background: #fff; color: var(--ink); box-shadow: 3px 4px 0 #28233b22; font: 700 9px/1.25 'DM Mono', monospace; }
.note-one { top: 26%; left: 6%; transform: rotate(-9deg); }
.note-two { top: 42%; right: 5%; background: var(--pink); transform: rotate(8deg); }
.tiny-card { position: absolute; z-index: 2; top: 24%; right: 18%; left: 22%; height: 54%; padding: 19px 21px; display: flex; flex-direction: column; justify-content: space-between; background: #fff9f0; box-shadow: 9px 12px 0 #28233b22; transform: rotate(-4deg); }
.tiny-card>span { color: var(--purple); font: 9px 'DM Mono', monospace; letter-spacing: .12em; }
.tiny-card>b { font: 700 clamp(16px, 2vw, 24px)/1.2 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.tiny-card b i { display: inline-flex; width: 16px; height: 16px; vertical-align: middle; }
.tiny-card b i svg,.product-doodle svg,.product-cta i svg,.browser-foot span:last-child svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Short studio statement, set apart from the dark opening panel. */
.intro { position: relative; padding: 66px max(32px, calc((100% - 980px) / 2)) 72px; overflow: hidden; background: var(--pink); color: var(--ink); }
.intro:after { position: absolute; right: 7%; bottom: -130px; width: 260px; height: 260px; border: 1px solid #28233b28; border-radius: 50%; content: ''; }
.intro .eyebrow { color: #5f3c60; }
.intro h2 { position: relative; z-index: 1; max-width: 850px; margin: 0; font: 600 clamp(30px, 4vw, 46px)/1.15 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: -.05em; }
.intro h2 em { color: #fff6da; font-style: normal; }
.scribble { position: absolute; right: 13%; bottom: 25px; width: 40px; height: 40px; fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(10deg); }

/* The products read as a small gallery, with their own visual identities. */
.things { width: 100%; margin: 0; padding: 75px max(32px, calc((100% - 1080px) / 2)) 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #eee9ff; }
.section-heading { grid-column: 1 / -1; margin-bottom: 7px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading .eyebrow { color: var(--purple); }
.section-heading h2 { margin: 0; font: 700 clamp(34px, 4.5vw, 52px)/1 'Space Grotesk', sans-serif; letter-spacing: -.065em; }
.section-heading h2 span { display: block; margin-top: 8px; color: var(--muted); font: 400 11px 'DM Mono', monospace; letter-spacing: 0; }
.section-heading>p { max-width: 270px; margin: 0 0 3px; color: #6a6474; font-size: 11px; }
.product-card { min-width: 0; display: flex; flex-direction: column; background: #fffdf8; color: var(--ink); text-decoration: none; box-shadow: 4px 5px 0 #28233b18; transition: transform .22s, box-shadow .22s; }
.product-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 8px 10px 0 #28233b20; }
.product-art { position: relative; min-height: 260px; display: grid; place-items: center; overflow: hidden; background: #c9bafa; }
.product-art:before { position: absolute; top: -75px; left: 5%; width: 260px; height: 260px; border-radius: 50%; background: var(--yellow); content: ''; }
.product-art:after { position: absolute; right: -33px; bottom: -39px; width: 150px; height: 150px; border-radius: 50%; background: var(--pink); content: ''; }
.product-sticker { position: absolute; z-index: 3; top: 17px; left: 17px; padding: 8px 10px; background: var(--ink); color: white; font: 8px/1.3 'DM Mono', monospace; letter-spacing: .08em; transform: rotate(-5deg); }
.browser-card { position: relative; z-index: 1; width: 70%; background: #fffdf8; box-shadow: 8px 10px 0 #28233b24; transform: rotate(3deg); }
.browser-head { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #e9e3d8; }
.browser-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.browser-head i:nth-child(2) { background: var(--yellow); }
.browser-head i:nth-child(3) { background: var(--mint); }
.browser-head span { margin-left: auto; color: var(--muted); font: 6px 'DM Mono', monospace; }
.browser-body { position: relative; min-height: 150px; padding: 20px; display: flex; align-items: center; }
.browser-body>b { font: 700 clamp(24px, 3vw, 36px)/.95 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.browser-body em { color: var(--purple); font-style: normal; }
.browser-sun { position: absolute; top: 18px; right: 13%; width: 44px; height: 44px; color: var(--pink); fill: currentColor; }
.browser-foot { padding: 8px 11px; display: flex; justify-content: space-between; border-top: 1px solid #e9e3d8; color: var(--muted); font: 7px 'DM Mono', monospace; }
.browser-foot span:last-child { width: 16px; height: 16px; color: var(--purple); }
.product-doodle { position: absolute; z-index: 3; right: 6%; bottom: 13%; color: var(--ink); font: italic 12px/1.1 'DM Mono', monospace; transform: rotate(-8deg); }
.product-doodle svg { width: 14px; height: 14px; vertical-align: middle; }
.product-info { min-height: 210px; padding: 24px; display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
.product-info .eyebrow { margin-bottom: 10px; color: var(--purple); font-size: 9px; }
.product-info h3 { margin: 0; font: 700 clamp(27px, 3vw, 36px)/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.product-info>div>p:last-child { max-width: 390px; margin: 12px 0 20px; color: #6a6474; font-size: 11px; line-height: 1.75; }
.product-cta { padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.product-cta>span { color: var(--muted); font: 9px 'DM Mono', monospace; }
.product-cta b { font-size: 10px; }
.product-cta i { width: 14px; height: 14px; display: inline-flex; padding: 0; color: var(--purple); vertical-align: middle; }
.lastlight-card { margin-top: 0; }
.lastlight-art { background: #1c2041; }
.lastlight-art:before { top: -100px; right: 10%; left: auto; width: 310px; height: 310px; background: #444a86; opacity: .75; }
.lastlight-art:after { right: 10%; bottom: 4%; width: 120px; height: 120px; background: #f4d477; filter: blur(1px); box-shadow: 0 0 55px 23px #f4d47766; }
.night-star { position: absolute; z-index: 2; color: #fff4c5; fill: currentColor; }
.star-a { top: 23%; right: 24%; width: 22px; height: 22px; }
.star-b { top: 22%; left: 30%; width: 36px; height: 36px; }
.star-c { bottom: 27%; left: 16%; width: 21px; height: 21px; }
.light-orb { position: absolute; z-index: 1; right: 18%; bottom: 25%; width: 17px; height: 17px; border-radius: 50%; background: #fffbd9; box-shadow: 0 0 22px 11px #fff5bd99; }
.light-beam { position: absolute; z-index: 1; right: 16%; bottom: 24%; width: 130px; height: 205px; background: linear-gradient(0deg, #f8e8a455, transparent 82%); clip-path: polygon(46% 0, 55% 0, 100% 100%, 0 100%); transform: rotate(17deg); transform-origin: bottom; }
.night-title { position: relative; z-index: 2; margin-left: -30%; color: #fff6d7; font: 700 clamp(34px, 4vw, 48px)/.79 'Space Grotesk', sans-serif; letter-spacing: -.07em; text-shadow: 0 3px 20px #10132b; }
.lastlight-doodle { color: #fff5c9; }
.lastlight-doodle svg { fill: currentColor; stroke: none; }
.lastlight-card .product-info em { color: #6150c7; font-style: normal; font-weight: 700; }
.coming-soon { position: relative; grid-column: 1 / -1; min-height: 65px; margin-top: 1px; padding: 13px 17px; display: flex; align-items: center; gap: 14px; border: 1px dashed #b8accd; color: #6a6474; font-size: 10px; }
.coming-soon p { margin: 0; }
.coming-soon p b { color: var(--ink); }
.coming-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font: 700 15px 'Space Grotesk'; }
.coming-spark { width: 22px; height: 22px; margin-left: auto; color: var(--pink); fill: currentColor; }

footer { min-height: 100px; gap: 20px; flex-wrap: wrap; }
footer>span { color: var(--muted); font-size: 9px; }

@media (max-width: 760px) {
  .topbar, footer { width: calc(100% - 40px); }
  .topbar { min-height: 76px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand small { font-size: 7px; letter-spacing: .1em; }
  .top-link { gap: 7px; padding: 5px 6px 5px 8px; font-size: 7px; letter-spacing: .02em; }
  .top-link b { width: 23px; height: 23px; }
  .hero { padding: 40px 20px 48px; grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: clamp(42px, 10vw, 58px); }
  .headline-star { top: -2px; right: -22px; width: 20px; height: 20px; }
  .hero .lede { max-width: 500px; }
  .playground { min-height: 370px; padding: 17px; }
  .tiny-card { top: 24%; right: 16%; left: 20%; height: 54%; padding: 15px; }
  .note-two { right: 3%; }
  .intro { padding: 52px 22px 60px; }
  .intro h2 { font-size: clamp(29px, 7vw, 40px); }
  .scribble { right: 8%; bottom: 13px; width: 30px; height: 30px; }
  .things { padding: 58px 20px 64px; grid-template-columns: 1fr; gap: 16px; }
  .section-heading { display: block; }
  .section-heading>p { max-width: 380px; margin-top: 12px; }
  .product-art { min-height: 250px; }
  .product-info { min-height: 205px; padding: 22px; }
  .product-cta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .coming-soon { padding: 12px; }
  footer { padding: 20px 0; justify-content: flex-start; }
  footer>span { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
footer .brand-mark>svg{color:var(--pink)}
/* Recompose the opening as artwork with its copy centered on a paper panel. */
.hero{position:relative;display:grid;grid-template-columns:1fr;place-items:center;min-height:680px;padding:52px 24px;overflow:hidden;background:#302746}.hero:before,.hero:after{display:none}.playground{position:absolute;z-index:0;inset:0;min-height:0;padding:28px max(24px,calc((100% - 1200px)/2));background-color:var(--mint);background-image:radial-gradient(#283b3033 .8px,transparent .8px),radial-gradient(circle at 15% 24%,var(--pink) 0 105px,transparent 107px),radial-gradient(circle at 86% 24%,var(--yellow) 0 125px,transparent 127px),radial-gradient(circle at 88% 88%,var(--purple) 0 170px,transparent 172px);background-size:18px 18px,auto,auto,auto;box-shadow:none;transform:none}.playground:before{z-index:0;top:auto;left:41%;bottom:-220px;width:420px;height:420px;border:1px solid #30274630;border-radius:50%;background:transparent}.playground:after{z-index:0;right:auto;bottom:auto;top:9%;left:52%;width:120px;height:120px;border:1px dashed #30274666;background:transparent}.hero-copy{z-index:3;width:min(100%,660px);margin:auto;padding:38px 45px 32px;border:1px solid #fff;border-radius:3px 14px 4px 10px;background:#fffaf1f2;color:var(--ink);box-shadow:12px 14px 0 #20193366; text-align:center;transform:rotate(-1deg)}.hero-copy .eyebrow{color:#756b88}.hero-copy .eyebrow i{background:var(--purple)}.hero h1{font-size:clamp(48px,6vw,68px);line-height:.98;color:var(--ink)}.hero h1 em{color:var(--purple)}.headline-star{right:-29px;top:0;width:23px;height:23px;color:var(--pink)}.hero .lede{max-width:495px;margin:18px auto 20px;color:#645e70;font-size:14px}.hero .button{background:var(--purple);color:#fff}.hero .button:hover{background:var(--ink)}.hero .button span{color:var(--yellow)}.hero .location{display:table;margin:21px auto 0;padding:7px 11px 0;border-top:1px solid #ddd4e6;border-left:0;color:#777184;font-size:8px}.play-tag{z-index:2;color:#302746}.shape-sun{z-index:2;top:9%;right:13%;width:57px;height:57px}.shape-blob{z-index:2;bottom:9%;left:10%;width:100px;height:125px}.shape-spark{z-index:2;right:11%;bottom:13%}.note-one{left:8%;top:34%}.note-two{right:7%;top:52%}.tiny-card{z-index:1;top:17%;right:auto;left:15%;width:270px;height:205px;padding:18px}.tag-bottom{position:absolute;right:max(24px,calc((100% - 1200px)/2));bottom:22px}.tag-top{position:absolute;top:23px;left:max(24px,calc((100% - 1200px)/2))}@media(max-width:760px){.hero{min-height:650px;padding:32px 18px}.playground{padding:18px}.hero-copy{width:min(100%,560px);padding:30px 21px 25px}.hero h1{font-size:clamp(46px,12vw,60px)}.headline-star{right:-20px;width:19px;height:19px}.hero .lede{font-size:13px}.playground:before{left:25%;bottom:-190px;width:330px;height:330px}.playground:after{top:6%;left:47%;width:82px;height:82px}.shape-sun{top:12%;right:7%;width:42px;height:42px}.shape-blob{bottom:10%;left:7%;width:68px;height:90px}.shape-spark{right:7%;bottom:12%;width:31px;height:31px}.note-one{left:4%;top:27%;padding:8px}.note-two{right:3%;top:57%;padding:8px}.tiny-card{top:17%;left:5%;width:200px;height:150px;padding:12px}.tiny-card>b{font-size:15px}.tag-top{top:14px;left:15px}.tag-bottom{right:15px;bottom:13px;font-size:7px}}