@font-face{font-family:Newsreader;src:url('assets/Newsreader-Regular.ttf') format('truetype');font-display:swap}@font-face{font-family:Manrope;src:url('assets/Manrope-Regular.ttf') format('truetype');font-display:swap}
:root{--ivory:#F7F3EC;--cobalt:#2448E6;--brown:#332622;--poppy:#EE4A32;--stone:#D8C8C2;--ribbon:#2448E6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--ivory);color:var(--cobalt);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--cobalt);outline-offset:5px}.skip{position:absolute;left:16px;top:-80px;background:var(--cobalt);color:var(--ivory);padding:15px;z-index:100}.skip:focus{top:10px}.header{height:132px;margin:0 4.6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2448e638;position:relative;z-index:3}.wordmark{display:flex;align-items:baseline;letter-spacing:-.07em;font-family:Newsreader,Georgia,serif;font-size:68px;line-height:1}.wordmark small{font-size:18px;letter-spacing:-.05em;margin-left:4px}.launch-status,.nav-play,.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:600}.launch-status{display:flex;align-items:center;gap:10px;margin-left:-45px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--poppy);display:inline-block}.nav-play{letter-spacing:0;font-size:13px}.nav-play span{margin-left:28px;font-size:20px}.hero{position:relative;min-height:690px;padding:94px 4.6% 83px;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;overflow:hidden}.hero-copy{position:relative;z-index:2;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{margin:0 0 32px;display:flex;align-items:center;gap:10px}.dash{height:1px;width:25px;background:currentColor}h1,h2,p{font-weight:400}h1{font-family:Newsreader,Georgia,serif;font-size:clamp(75px,7.6vw,124px);line-height:.95;letter-spacing:-.049em;margin:0 0 30px}h1 em,h2 em{font-weight:400}h1 em{white-space:nowrap}.intro{font-size:14px;line-height:1.7;color:var(--brown);margin:0}.play-link{margin-top:36px;font-size:12px;display:inline-flex;gap:26px;align-items:center}.round-arrow{display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;height:40px;width:40px;font-size:19px;transition:background .2s,color .2s}.play-link:hover .round-arrow{background:var(--cobalt);color:var(--ivory)}.art{position:absolute;left:44%;right:-4%;top:-30px;bottom:-8px;isolation:isolate}.halo{position:absolute;inset:18% 15%;border:1px solid #d8c8c254;border-radius:50%;z-index:-1}.art canvas,.fallback{position:absolute;width:100%;height:100%;inset:0;display:block}.art canvas{opacity:0}.art.ready canvas{opacity:1}.art.ready .fallback{visibility:hidden}.art-caption{position:absolute;left:15%;top:79%;display:flex;align-items:center;gap:12px;font-size:10px;color:var(--brown);letter-spacing:.04em}.cross{font-size:27px;color:var(--cobalt)}.spin-button{position:absolute;right:18%;bottom:10%;border:0;background:none;color:var(--cobalt);font-size:11px;display:flex;align-items:center;gap:10px;min-height:44px}.spin-button>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #2448e680;border-radius:50%;font-size:18px}.seal{position:absolute;right:16%;top:8%;width:110px;fill:var(--brown);transform:rotate(16deg)}.seal text{font-family:Manrope,sans-serif;font-size:9px;letter-spacing:2px}.seal>path{stroke:var(--poppy);stroke-width:2;fill:none}.playground{margin:0 4.6%;padding:53px 0 57px;border-top:1px solid #2448e638;display:grid;grid-template-columns:1fr 1fr;gap:8%;scroll-margin-top:30px}.play-heading .eyebrow{margin-bottom:20px}.play-heading h2{font-family:Newsreader,Georgia,serif;font-size:45px;letter-spacing:-.025em;line-height:1.06;margin:0}.play-heading>p:last-child{font-size:12px;color:var(--brown);line-height:1.7;margin:20px 0 0}.controls{max-width:520px}.controls fieldset{padding:0;margin:0 0 24px;border:0}.controls legend{font-size:12px;padding:0;margin:0 0 13px}.controls legend>span{font-size:9px;margin-right:15px;opacity:.65}.swatches{display:flex;gap:19px}.swatch{border:0;background:none;display:flex;gap:5px;flex-direction:column;align-items:center;padding:5px 3px;min-width:50px}.swatch i{display:block;width:31px;height:31px;background:var(--swatch);border-radius:50%;border:5px solid var(--ivory);box-sizing:content-box;transition:transform .2s}.swatch[aria-pressed=true] i{outline:1px solid var(--swatch)}.swatch:hover i{transform:scale(1.08)}.swatch span{font-size:9px;color:var(--brown)}.patterns{display:flex;gap:8px;flex-wrap:wrap}.patterns button{min-height:44px;padding:0 22px;border:1px solid #2448e650;background:transparent;border-radius:40px;font-size:11px;transition:background .2s,color .2s}.patterns button[aria-pressed=true]{background:var(--cobalt);color:var(--ivory);border-color:var(--cobalt)}.motion-row{border-top:1px solid #2448e638;padding-top:14px;display:flex;justify-content:space-between}.motion-row button{background:none;border:0;font-size:11px;padding:8px 0;min-height:44px}.motion-icon{margin-right:8px}.motion-row button:last-child{color:var(--brown)}.motion-row button:last-child span{margin-left:10px;font-size:18px}.finale{position:relative;overflow:hidden;background:var(--cobalt);color:var(--ivory);padding:157px 4.6% 40px}.wave-border{position:absolute;top:0;left:0;width:100%;height:105px;fill:none;stroke:var(--ivory);stroke-width:2}.wave-border path+path{stroke:#ee4a32}.finale .eyebrow{margin-bottom:35px}.finale h2{font-family:Newsreader,Georgia,serif;font-size:clamp(70px,8.9vw,150px);line-height:.93;letter-spacing:-.035em;margin:0 0 75px}.finale h2 em{color:#e4ddcf}.finale-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f7f3ec55;padding-top:27px;font-size:10px;letter-spacing:.07em}.finale-bottom a{font-size:12px;letter-spacing:0;min-height:44px;display:flex;align-items:center;gap:40px}.finale a:focus-visible{outline-color:var(--ivory)}footer{display:flex;justify-content:space-between;padding:29px 4.6%;font-size:10px;color:var(--brown);gap:20px}footer a{min-height:25px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{padding:30px;text-align:center}.selected-flash{animation:flash .5s ease-out}@keyframes flash{50%{opacity:.3}}@media(min-width:1500px){.hero{min-height:800px}.art{left:43%;right:0}.header,.playground{margin-left:6%;margin-right:6%}.hero{padding-left:6%}}@media(max-width:950px){.hero{min-height:610px;padding-top:65px}.hero h1{font-size:80px}.art{left:40%;right:-12%}.seal{right:19%;top:11%;width:90px}.playground{gap:6%}.play-heading h2{font-size:36px}.patterns button{padding:0 17px}.swatches{gap:15px}}@media(max-width:650px){html{scroll-padding-top:15px}.header{height:100px;margin:0 6%}.wordmark{font-size:53px}.wordmark small{font-size:14px;margin-left:3px}.launch-status{font-size:8px;letter-spacing:.08em;margin-left:0;gap:7px}.nav-play{display:none}.hero{display:flex;align-items:flex-start;min-height:800px;padding:50px 6% 0;overflow:hidden}.hero h1{font-size:clamp(64px,14.4vw,89px);line-height:.98;margin-bottom:19px}.hero .eyebrow{font-size:9px;margin-bottom:28px;letter-spacing:.1em}.intro{font-size:12px}.play-link{margin-top:22px;font-size:11px;gap:18px}.round-arrow{height:34px;width:34px}.art{left:-14%;right:-14%;top:315px;bottom:-24px}.seal{width:89px;right:16%;top:8%}.art-caption{left:17%;top:auto;bottom:7%;font-size:9px}.spin-button{right:18%;bottom:6%;font-size:10px}.spin-button>span{width:28px;height:28px}.playground{margin:0 6%;padding:36px 0 41px;display:block}.play-heading .eyebrow{font-size:9px;margin-bottom:17px}.play-heading h2{font-size:39px}.play-heading>p:last-child{margin:15px 0 28px;font-size:12px}.controls{max-width:none}.controls fieldset{margin-bottom:24px}.swatches{gap:21px}.swatch{min-width:50px}.patterns button{padding:0 23px}.finale{padding:123px 6% 26px}.wave-border{height:80px;width:180%}.finale .eyebrow{font-size:8px;letter-spacing:.09em;margin-bottom:28px}.finale h2{font-size:clamp(53px,12vw,77px);margin-bottom:50px}.finale-bottom{font-size:8px;padding-top:18px}.finale-bottom a{font-size:10px;gap:18px}footer{padding:25px 6%;font-size:9px;flex-wrap:wrap}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.wordmark{width:250px}.wordmark img{display:block;width:100%;height:auto}.wordmark{padding:0 0 10px}.header .launch-status{margin-left:-90px}@media(max-width:650px){.wordmark{width:185px;padding-bottom:5px}.header .launch-status{margin-left:0}}
/* Espresso edition: same layout, warmer palette, four tactile forms. */
body{background:#332622;color:#F7F3EC}
.header,.playground{border-color:#f7f3ec38}
.wordmark{position:relative}.wordmark img{visibility:hidden}.wordmark::before{content:"";position:absolute;inset:0;background:#F7F3EC;-webkit-mask:url('assets/moire-wordmark.png') center/contain no-repeat;mask:url('assets/moire-wordmark.png') center/contain no-repeat}
.intro,.art-caption,.play-heading>p:last-child,.swatch span,.motion-row button:last-child,footer{color:#F7F3EC}
.halo{border-color:#EE4A32}.cross,.spin-button{color:#F7F3EC}.spin-button>span{border-color:#f7f3ec70}.seal{fill:#F7F3EC}.seal>path{stroke:#EE4A32}
.play-link:hover .round-arrow{background:#F7F3EC;color:#332622}
button:focus-visible,a:focus-visible{outline-color:#F3D444}.skip{background:#F7F3EC;color:#332622}
.swatch i{border-color:#332622;box-shadow:inset 0 0 0 1px #f7f3ec60}.swatch[aria-pressed=true] i{outline-color:#F7F3EC}
.patterns button,.shapes button{border:1px solid #f7f3ec70;background:transparent;color:#F7F3EC}
.patterns button[aria-pressed=true],.shapes button[aria-pressed=true]{background:#F7F3EC;color:#332622;border-color:#F7F3EC}
.motion-row{border-color:#f7f3ec38}.motion-row button:disabled{opacity:.6;cursor:default}
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shapes button{font-size:11px;padding:9px 8px;min-height:58px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,color .2s}.shapes button span{font-size:25px;line-height:1}
.finale{background:#332622;border-top:1px solid #f7f3ec38}.finale h2 em{color:#D8C8C2}.finale .wave-border path+path{stroke:#EE4A32}footer{border-top:1px solid #f7f3ec20}
@media(max-width:650px){.shapes{gap:7px}.shapes button{flex-direction:column;gap:5px;padding:12px 5px;min-height:70px}.swatches{gap:21px}}

.spin-button[hidden]{display:none}
/* Sparkle mood: twelve slow sparse points with soft surface glints. */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}.twinkle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:#F7F3EC;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.55;animation:soft-twinkle var(--duration) ease-in-out var(--delay) infinite}.twinkle.warm{background:#F3D444}.sparkle-off .sparkles{display:none}.motion-paused .twinkle,.motion-suspended .twinkle,.static-fallback .twinkle{animation-play-state:paused}
@keyframes soft-twinkle{0%,100%{opacity:.40;transform:scale(.86)}50%{opacity:.95;transform:scale(1)}}
.sparkle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:1px 0 14px}.sparkle-row button{display:flex;align-items:center;gap:10px;min-height:46px;background:transparent;color:#F7F3EC;border:1px solid #f7f3ec70;border-radius:30px;padding:6px 14px;font-size:11px}.sparkle-symbol{color:#F3D444;font-size:24px;line-height:1}.sparkle-state{margin-left:9px;padding:3px 7px;border-radius:15px;font-size:9px;background:#F7F3EC;color:#332622}.sparkle-row button[aria-pressed=false] .sparkle-state{background:transparent;color:#F7F3EC;box-shadow:inset 0 0 0 1px #f7f3ec70}.sparkle-description{font-size:10px;color:#D8C8C2}
@media(prefers-reduced-motion:reduce){.twinkle{animation:none;opacity:.55;transform:none}}
@media(max-width:380px){.sparkle-description{max-width:90px;line-height:1.5}}
@media(max-width:650px){.swatches{gap:clamp(8px,3vw,16px)}}
@media(max-width:650px){.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.swatch{min-width:0;padding:5px 0}}

/* Direct brand contact links, with comfortable touch targets. */
.footer-contact{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-left:auto;font-size:12px;line-height:1.5}.footer-contact a{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.footer-contact a:hover{color:#D8C8C2}
@media(max-width:650px){.footer-contact{order:3;flex-basis:100%;margin-left:0;gap:0 20px}}

/* Accented cobalt wordmark directly on the espresso background. */
.wordmark{width:250px;flex-shrink:0;padding:12px 16px 9px;background:transparent;border-radius:2px}.wordmark::before{content:"";inset:12px 16px 9px;background:#2448E6;-webkit-mask-image:url('assets/moire-wordmark-accent.png');mask-image:url('assets/moire-wordmark-accent.png')}
@media(max-width:650px){.wordmark{width:185px;padding:10px 13px 8px}.wordmark::before{inset:10px 13px 8px}}

/* A slow, contained float for the final Coming soon line. */
.coming-soon-motion{display:inline-block;animation:coming-soon-wave 3.4s ease-in-out infinite;transform-origin:center}
@keyframes coming-soon-wave{0%,100%{transform:translateY(.025em)}50%{transform:translateY(-.08em)}}
.finale.motion-paused .coming-soon-motion,.finale.motion-suspended .coming-soon-motion{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.coming-soon-motion{animation:none!important;transform:none}}

/* Fixed vector UI marks prevent platform emoji substitutions. */
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex:none}

/* Keep the complete sculpture inside narrow screens instead of clipping an oversized canvas. */
@media(max-width:950px){.art{right:0}}
@media(max-width:650px){.art{left:0;right:0;bottom:0}.art-caption{left:6%}.spin-button{right:6%}.halo{left:6%;right:6%}}

/* Caption and spin action share one row and identical text/icon alignment. */
.art-actions{position:absolute;left:15%;right:18%;bottom:10%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:11px;line-height:1.4;z-index:2}
.art-actions .art-caption,.art-actions .spin-button{position:static;inset:auto;display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0;font:inherit;letter-spacing:.04em;white-space:nowrap}
.art-actions .cross,.art-actions .spin-button>span{display:grid;place-items:center;flex:none;width:32px;height:32px;line-height:1}
.art-actions .cross .ui-icon{width:27px;height:27px}.art-actions .spin-button .ui-icon{width:18px;height:18px}.art-actions .ui-icon{display:block;vertical-align:initial}
@media(max-width:650px){.art-actions{left:6%;right:6%;bottom:6%;font-size:10px}.art-actions .cross,.art-actions .spin-button>span{width:28px;height:28px}.art-actions .cross .ui-icon{width:24px;height:24px}}
.art-actions .spin-button[hidden]{display:none}
@media(min-width:651px) and (max-width:950px){.art-actions{left:6%;right:6%}}