/* Pearl, chrome and soft spectrum — drawn from the updated CYLUNE portfolio. */
:root{--paper:#fafbf2;--ink:#263b32;--muted:#5d706c;--line:#bdcbc9;--sage:#e4ece5;--red:#bb1539;--metal:#59737b;--pearl:#edf2ed;--chrome:linear-gradient(176deg,#faffff 4%,#a4bec3 17%,#f8fff9 31%,#49646e 48%,#e5f0ee 53%,#748b91 68%,#fcfff6 83%,#4c636a 96%)}
body{background:var(--paper)}
main{overflow-x:clip}
::selection{background:#d8e5e9;color:#203c35}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #a61a44;outline-offset:5px}
.site-header{height:86px;background:rgba(250,251,242,.72);border-bottom:1px solid #9dafb84d;backdrop-filter:blur(16px)}
.site-header .wordmark{font-size:44px;letter-spacing:-2.5px}
.site-header nav{gap:34px;margin-left:0}
.site-header nav a{font-size:12px}
.header-note{font-size:9px;letter-spacing:1.8px}
.red-star{color:var(--red)}
.intro-hero{isolation:isolate;max-width:1480px;grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:0 7%;padding:58px 5% 0;align-items:center}
.intro-hero::before{content:"";position:absolute;z-index:-3;top:-87px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at 52% 43%,#fffff5 0%,#fffff4a8 24%,transparent 58%),linear-gradient(126deg,transparent 10%,#b9dbe17d 15%,#dccbed7d 18%,#f1d3d57d 21%,#f5efb890 24%,#c7e4cb8c 28%,transparent 35%),linear-gradient(24deg,transparent 31%,#c4e3dc63 35%,#fff3bb78 39%,#f2d0e675 43%,#c4d8ed73 46%,transparent 53%),linear-gradient(116deg,#dce6d7,#fcfcea 50%,#d2e0de)}
.intro-hero::after{content:"";position:absolute;inset:10% -2% 12%;z-index:-2;border:1px solid #ffffffc2;border-radius:50%;transform:rotate(-11deg);pointer-events:none}
.intro-copy{padding:8px 0 28px;position:relative;z-index:1}
.intro-copy>.eyebrow{font-size:10px;letter-spacing:2.3px;color:#3d554c}
.hello-note{font-size:25px;color:var(--ink);margin:29px 0 18px;transform:rotate(-5deg)}
.hello-note>span{color:var(--red);font-family:Georgia,serif;font-size:22px;text-shadow:0 1px 0 #fff,1px 2px 2px #750f3442;transform:rotate(12deg)}
.intro-copy h1,.section-heading h2,.contact-section h2{background-image:var(--chrome);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:.35px #506b7155;filter:drop-shadow(1px 2px 0 #fff9) drop-shadow(0 4px 3px #4a62681c)}
.intro-copy h1{font-size:clamp(84px,8.45vw,128px);line-height:.84;letter-spacing:-4.8px;font-weight:500;margin:0 0 22px;max-width:100%}
.intro-copy h1 em{font-weight:500}
.intro-star{color:#9bb1b7;text-shadow:1px 1px 0 white,-1px -1px 0 #71888d;font-size:48px;right:-1%;top:0;-webkit-text-stroke:0}
.hero-swish{position:absolute;width:112%;height:170px;left:-7%;top:104px;pointer-events:none;z-index:-1;overflow:visible;opacity:.64}
.intro-name{margin:25px 0 15px;font-size:25px;letter-spacing:3px}
.intro-name span{color:#536b60;border-color:#91aaa3}
.intro-statement{font-size:13px;color:#4e655c;line-height:2}
.intro-tags{gap:16px;margin:19px 0}
.intro-tags span+span:before{color:var(--red);margin-right:16px}
.intro-cta,.pearl-button{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:46px;border:1px solid #a7b9bf;border-radius:999px;padding:11px 25px;font-size:13px;color:#253c40;background:linear-gradient(180deg,#ffffff 0%,#eee9f6 35%,#ffffff 49%,#dcebed 83%,#bfcfd4 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 1px #9fb6bf50,0 3px 7px #60787c21;transition:transform .2s,box-shadow .2s}
.intro-cta:hover,.pearl-button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 6px 14px #60787c30}
.intro-cta>span{font-size:22px}.intro-cta:hover>span{transform:translate(2px,2px)}
.intro-feature{border:1px solid #a8bcc157;border-radius:16px;padding:12px;gap:18px;margin-top:27px;background:linear-gradient(135deg,#ffffffa1,#eff4e97a);box-shadow:inset 0 1px 0 #fff9;max-width:540px;backdrop-filter:blur(7px)}
.intro-feature-image{border-radius:9px;aspect-ratio:1.6}
.intro-feature-copy small{font-size:8px;letter-spacing:1.5px}.intro-feature-copy strong{font-size:16px}.intro-feature-copy em{font-size:10px}.intro-feature-copy{gap:7px}
.hero-avatar{isolation:isolate;position:relative;max-width:510px;min-height:0;border:1px solid #a7bac0;border-radius:47% 47% 30px 30px;padding:40px 20px 13px;background:radial-gradient(ellipse at 50% 40%,#fffef4 14%,#e7eeec 54%,#d0e0de 100%);box-shadow:inset 2px 2px 0 #ffffffec,inset -2px -2px 0 #a4bbc582,0 12px 40px #688a7e1c;overflow:visible}
.hero-avatar::before{content:"";position:absolute;inset:7px;border:1px solid #ffffffc7;border-radius:inherit;pointer-events:none;z-index:-1}
.hero-avatar::after{content:"✦";position:absolute;top:17%;right:-24px;color:#a4bac1;font-family:Georgia,serif;font-size:62px;line-height:1;text-shadow:1px 2px 0 white,-1px -1px 0 #617b87;pointer-events:none}
.hero-avatar .avatar-label{gap:7px;max-width:270px;min-height:40px}
.hero-avatar .avatar-label>span:first-child{font-size:9px;letter-spacing:1.4px}
.hero-avatar .avatar-label i{background:#b8133c;box-shadow:0 0 0 3px #ffffffa6}
.hero-avatar #avatar-status{font-size:11px;color:#3f5a50}
.hero-avatar #avatar-stage{height:370px;margin-top:8px}
.hero-avatar #avatar-stage canvas{background:transparent!important}
.hero-avatar .avatar-caption{min-height:32px}
.hero-avatar .avatar-tip{font-size:11px;color:#4b6359}
.hero-avatar .avatar-controls{gap:7px;margin-top:8px}
.hero-avatar .avatar-controls button{min-height:44px;padding:10px 4px;border-color:#a8bac0;background:linear-gradient(#fffffff0 0%,#eef3e9db 47%,#d5e2e2d4 100%);box-shadow:inset 0 1px 0 white,0 2px 4px #68857a14;color:#344e46;font-size:12px}
.hero-avatar .avatar-controls button.active{background:linear-gradient(#607c7a,#304c48);color:white;border-color:#536d69;box-shadow:inset 0 1px 0 #99b4b1,0 3px 6px #42635b22}
.hero-avatar .avatar-controls button:hover:not(.active){background:linear-gradient(#fff,#e1eeee)}
.hero-avatar .avatar-secondary{margin-top:3px;min-height:40px}.hero-avatar .tiny-action{font-size:11px;color:#4a615a;min-height:44px}
.intro-footer{position:relative;z-index:1;border-color:#8caaa65e;font-size:9px;letter-spacing:1.3px;padding:24px 0;margin-top:26px}
.pearl-spark{position:absolute;font-family:Georgia,serif;font-size:26px;color:#b2c7cc;text-shadow:1px 1px white,-1px -1px #77939d;pointer-events:none;z-index:-1}.pearl-spark.one{top:12%;left:45%}.pearl-spark.two{bottom:15%;left:-1%;font-size:39px}
.play-section{position:relative;isolation:isolate;max-width:1440px;margin:0 auto;padding:85px 5.5% 100px;scroll-margin-top:40px}
.play-section::before{content:"";position:absolute;inset:20px -3vw 0;z-index:-1;border-radius:50% 50% 8% 8%/14% 14% 8% 8%;background:radial-gradient(ellipse at 20% 35%,#e3d9ef66,transparent 47%),radial-gradient(ellipse at 80% 70%,#c7e6dd7d,transparent 55%),#eef1e766}
.play-section .section-heading{margin-bottom:32px}.play-section .section-heading h2{font-size:clamp(60px,7vw,94px)}
.play-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:20px}.play-intro h3{font-weight:500;font-size:22px;letter-spacing:1px;margin:0 0 10px}.play-intro p{font-size:12px;line-height:1.9;color:var(--muted);margin:0;max-width:600px}.play-tags{display:flex;gap:8px;flex-shrink:0}.play-tags span{font-size:10px;white-space:nowrap;border:1px solid #b4c7c1;padding:7px 12px;border-radius:50px;background:#ffffff90}
.game-shell{position:relative;overflow:hidden;border:1px solid #9eafb2;border-radius:24px;box-shadow:inset 0 1px 0 white,0 16px 45px #526b681b;background:#f5f8ef}
.game-window-bar{display:flex;align-items:center;gap:15px;min-height:48px;padding:9px 20px;border-bottom:1px solid #b2c3c0;background:linear-gradient(#fefffa,#dce7e3);color:#435c52;font-size:10px;letter-spacing:1px}
.window-dots{display:flex;gap:6px}.window-dots i{display:block;width:7px;height:7px;border:1px solid #a1b0ac;border-radius:50%;background:#ffffffb0}.window-dots i:first-child{background:#bf2247;border-color:#a31537}.game-window-bar>span:nth-child(2){flex:1}.game-window-bar .game-live{color:#48765e;letter-spacing:1.3px;font-size:9px}
.game-cover{min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;padding:40px 20px;background:radial-gradient(ellipse at 50% 30%,#fffdf1 0%,transparent 65%),linear-gradient(135deg,#ecf2d8,#d7eae2 55%,#eee2ee)}
.game-cover-inner{position:relative;z-index:1}.game-cover small{font-size:10px;letter-spacing:2.2px;color:#657c6c}.game-cover h4{font-family:var(--serif);font-size:clamp(54px,7vw,94px);line-height:1;font-weight:500;letter-spacing:-2.5px;margin:15px 0;color:#365b4a}.game-cover p{font-size:12px;line-height:1.8;margin:0 0 24px;color:#5e7264}.game-cover .pearl-button{min-width:170px;gap:23px}.game-cover .game-orbit{position:absolute;width:78%;height:64%;top:18%;left:11%;border:1px solid #ffffffe8;border-radius:50%;transform:rotate(-14deg);pointer-events:none}
.game-deco{position:absolute;display:block;font-size:40px;filter:drop-shadow(0 7px 6px #7a998b30);pointer-events:none}.game-deco.d1{top:25%;left:13%;transform:rotate(-16deg)}.game-deco.d2{right:15%;bottom:20%;transform:rotate(13deg);font-size:48px}.game-deco.d3{right:24%;top:14%;font-size:28px}
.game-frame{display:block;width:100%;height:780px;border:0;background:#f4f7e8}.game-frame[hidden],.game-cover[hidden],.game-toolbar[hidden]{display:none!important}
.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:52px;padding:8px 20px;border-top:1px solid #b7c8c0;background:#edf3e9;font-size:11px;color:#4d6558}.game-toolbar p{margin:0;line-height:1.8}.game-toolbar>div{display:flex;gap:8px}.game-toolbar button,.game-toolbar a{background:#fcfff8;border:1px solid #b4c4bb;border-radius:20px;min-height:40px;padding:8px 14px;font-size:11px;white-space:nowrap}.game-toolbar button:hover,.game-toolbar a:hover{background:#dae9e0}
.game-shell:fullscreen{border-radius:0;background:#f5f8ef;display:flex;flex-direction:column;height:100dvh;width:100vw}.game-shell:fullscreen #game-mount{flex:1;min-height:0;display:flex}.game-shell:fullscreen .game-frame{flex:1;min-height:0;height:100%}.game-shell:fullscreen .game-window-bar,.game-shell:fullscreen .game-toolbar{flex-shrink:0}
.play-footnote{font-size:11px;line-height:1.8;color:var(--muted);margin:16px 4px 0}
@media(min-width:1600px){.intro-hero{padding-top:68px}.hero-avatar #avatar-stage{height:410px}}
@media(max-width:1100px) and (min-width:901px){.intro-hero{gap:0 5%;padding-top:40px;grid-template-columns:1.12fr .9fr}.intro-copy h1{font-size:8.4vw;letter-spacing:-3px}.intro-star{font-size:34px}.hero-avatar{padding:32px 13px 12px}.hero-avatar #avatar-stage{height:330px}.hero-avatar::after{right:-16px;font-size:45px}.intro-feature-copy strong{font-size:14px}.intro-feature-copy em{font-size:9px}.intro-feature{gap:13px}.site-header nav{gap:25px}}
@media(max-width:900px){.intro-hero{display:grid;grid-template-columns:1fr 1fr;gap:0 4%;padding:40px 4.5% 0}.intro-copy{order:0;padding-bottom:20px}.intro-copy h1{font-size:clamp(56px,9vw,82px);letter-spacing:-3px}.hello-note{font-size:21px;margin-top:23px}.intro-name{font-size:22px}.intro-name span{font-size:10px;margin-left:8px;padding-left:8px;letter-spacing:1px}.intro-statement{font-size:12px}.intro-feature{grid-template-columns:1fr;max-width:280px;margin-top:20px;padding:9px}.intro-feature-image{aspect-ratio:2.5}.intro-feature-copy{gap:5px;padding:3px 5px}.intro-feature-copy em{display:none}.intro-feature-copy strong{font-size:14px}.intro-feature-copy .feature-link{font-size:10px}.hero-avatar{order:1;margin:0;max-width:400px;padding:30px 12px 10px}.hero-avatar #avatar-stage{height:320px}.hero-avatar #avatar-status{font-size:10px}.hero-avatar .avatar-tip{font-size:10px}.hero-avatar .avatar-controls{gap:4px}.hero-avatar .avatar-controls button{font-size:11px;gap:3px}.hero-avatar .avatar-controls button>span{font-size:14px}.hero-avatar::after{right:-14px;font-size:44px}.intro-footer{grid-column:1/-1;order:2;font-size:8px;margin-top:22px;letter-spacing:.8px}.hero-swish{top:90px;height:120px}.play-intro{align-items:start}.play-tags{flex-direction:column}.game-cover{min-height:390px}.game-deco.d1{left:9%}.game-deco.d2{right:9%}}
@media(max-width:600px){.site-header{height:70px;padding:0 5%}.site-header .wordmark{font-size:35px;letter-spacing:-2px}.site-header nav{gap:15px}.site-header nav a{font-size:11px}.site-header nav a span{display:none}.intro-hero{display:flex;flex-direction:column;padding:27px 6% 0;gap:0;overflow:hidden}.intro-hero::before{top:-70px}.intro-hero::after{inset:17% -55% 20%;transform:rotate(-18deg)}.intro-copy{order:0;width:100%;padding:0 0 29px}.intro-copy>.eyebrow{font-size:9px;letter-spacing:1.4px}.hello-note{font-size:23px;margin:25px 0 19px}.intro-copy h1{font-size:clamp(67px,18.6vw,108px);letter-spacing:-3px;line-height:.83;margin-bottom:25px}.intro-star{font-size:37px;right:4%;top:3px}.hero-swish{top:92px;left:-3%;width:105%;height:115px}.intro-name{font-size:24px;margin:20px 0 14px}.intro-name span{font-size:11px;margin-left:12px;padding-left:12px}.intro-statement{font-size:12px;line-height:1.9}.intro-tags{font-size:11px;margin:17px 0}.intro-cta{font-size:12px;min-height:46px;padding:11px 24px}.intro-feature{display:none}.hero-avatar{order:1;width:100%;max-width:410px;padding:35px 14px 10px;border-radius:47% 47% 24px 24px}.hero-avatar #avatar-stage{height:300px}.hero-avatar #avatar-status{font-size:11px}.hero-avatar .avatar-tip{font-size:11px}.hero-avatar .avatar-controls{gap:6px}.hero-avatar .avatar-controls button{font-size:12px;gap:4px}.hero-avatar .avatar-controls button>span{font-size:16px}.hero-avatar::after{right:0;top:12%;font-size:44px}.hero-avatar .tiny-action{font-size:12px}.intro-footer{width:100%;font-size:8px;margin-top:15px;padding:21px 0;letter-spacing:.2px}.pearl-spark.one{top:6%;left:auto;right:3%}.pearl-spark.two{display:none}.play-section{padding:65px 6% 70px}.play-section::before{border-radius:40% 40% 0 0/7% 7% 0 0;inset:10px 0 0}.play-section .section-heading{margin-bottom:25px}.play-section .section-heading h2{font-size:60px}.play-intro{display:block}.play-intro h3{font-size:20px}.play-intro p{font-size:12px}.play-tags{flex-direction:row;margin-top:14px}.play-tags span{font-size:9px;padding:6px 10px}.game-shell{border-radius:18px}.game-window-bar{padding:9px 13px;gap:10px;font-size:8px;letter-spacing:.5px}.game-window-bar .game-live{font-size:8px}.window-dots{gap:4px}.window-dots i{width:6px;height:6px}.game-cover{min-height:340px;padding:35px 12px}.game-cover h4{font-size:57px;letter-spacing:-2px}.game-cover small{font-size:9px}.game-cover p{font-size:11px}.game-deco.d1{top:15%;left:10%;font-size:28px}.game-deco.d2{right:9%;bottom:14%;font-size:31px}.game-deco.d3{right:12%;top:17%;font-size:21px}.game-cover .game-orbit{width:94%;left:3%;height:72%;top:14%}.game-frame{height:760px}.game-toolbar{padding:8px 12px;flex-wrap:wrap;gap:5px}.game-toolbar p{font-size:10px}.game-toolbar>div{margin-left:auto}.game-toolbar button,.game-toolbar a{font-size:10px;min-height:44px;padding:9px 12px}.play-footnote{font-size:10px}.game-shell:fullscreen .game-toolbar p{display:none}}
@media(max-width:360px){.site-header nav{gap:11px}.site-header .wordmark{font-size:32px}.site-header nav a{font-size:10px}.intro-copy h1{font-size:65px}.intro-star{font-size:28px;right:0}.hello-note{font-size:20px}.hero-avatar #avatar-stage{height:260px}.hero-avatar{padding-left:11px;padding-right:11px}.hero-avatar .avatar-controls{gap:4px}.hero-avatar .avatar-controls button{font-size:11px}.hero-avatar .avatar-controls button>span{font-size:14px}.game-cover h4{font-size:49px}.game-frame{height:720px}}
.game-deco:is(img){width:95px;height:95px;object-fit:contain}.game-deco.d2:is(img){width:110px;height:110px}
@media(max-width:600px){.game-deco:is(img){width:57px;height:57px}.game-deco.d2:is(img){width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){.intro-cta,.pearl-button{transition:none}.intro-cta:hover,.pearl-button:hover{transform:none}}
