@font-face{font-family:Lato;src:url(assets/lato-regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(assets/lato-bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(assets/lato-italic.ttf) format('truetype');font-weight:400;font-style:italic;font-display:swap}
*{box-sizing:border-box}
html{color-scheme:light dark;--background:#fff;--text:#242520;--muted:#ccccc9;--fade:rgba(115,115,115,.13)}
html,body{margin:0;min-height:100%;background:var(--background);color:var(--text);font-family:Lato,sans-serif}
.page{--page-padding:64px;position:relative;isolation:isolate;overflow:hidden;min-height:max(778px,100svh);padding:0 var(--page-padding);display:flex;flex-direction:column}
.page:before{content:"";position:absolute;z-index:-1;bottom:0;left:0;right:0;height:542px;background:linear-gradient(to bottom,transparent,var(--fade));pointer-events:none}
.content{width:100%;max-width:1360px;margin:0 auto}
.header{padding:40px 0 28px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;font-size:26px;line-height:32px;letter-spacing:-.52px;white-space:nowrap}
.wordmark img{display:block;flex:none}
.wordmark-name{font-weight:700}
.hero{min-height:581px;padding-top:80px;padding-bottom:89px;display:flex;flex-direction:column;align-items:flex-start;gap:48px}
.intro{margin:0;width:528px;max-width:100%;font-size:18px;line-height:28px;font-weight:400}
.pronunciation{color:var(--muted)}
h1{margin:0;width:100%;font-size:84px;line-height:90px;letter-spacing:-1.68px;font-weight:400}
.second-line{display:inline-flex;gap:18px}
h1 em{font-weight:400;letter-spacing:-0.02em}
.action{display:flex;align-items:flex-end;width:100%}
.soon{border:0;border-radius:40px;padding:16px 24px;display:inline-flex;align-items:center;gap:8px;color:#fff;background:#be4b12;font:400 16px/20px Lato,sans-serif;animation:spectrum 10s linear infinite;cursor:default;white-space:nowrap}
.soon:focus-visible,.wordmark:focus-visible{outline:2px solid var(--text);outline-offset:5px}
@keyframes spectrum{0%,100%{background:#be4b12}12.5%{background:#806800}25%{background:#508000}37.5%{background:#00805d}50%{background:#007d88}62.5%{background:#4655bd}75%{background:#853bb0}87.5%{background:#b32968}95%{background:#b52e35}}
.name-art{position:relative;width:calc(100% + 2 * var(--page-padding));aspect-ratio:1444 / 100;flex:none;margin-top:auto;margin-left:calc(-1 * var(--page-padding));margin-bottom:-3px;overflow:hidden}
.name-part{position:absolute;display:block;max-width:none}
.part-1{width:37.276316%;left:.09%;top:18.56%}
.part-2{width:5.235256%;left:37.92%;top:19.71%}
.part-3{width:40.649446%;left:42.71%;top:19.81%}
.part-4{width:5.155734%;left:84.17%;top:18.17%}
.part-5{width:5.235256%;left:89.69%;top:19.81%}
.part-6{width:5.235256%;left:94.55%;top:19.71%}
.bottom-space{display:none}
@media(min-width:1600px){.hero{min-height:581px}}
@media(max-width:1100px){.page{--page-padding:40px}h1{font-size:clamp(48px,6vw,76px);line-height:1.08}.hero{height:auto;min-height:560px;padding-bottom:100px}}
@media(max-width:600px){.page{--page-padding:24px}.header{padding:28px 0 20px}.wordmark{font-size:24px}.hero{padding-top:64px;gap:36px;min-height:560px;padding-bottom:100px}.intro{font-size:16px;line-height:26px}.pronunciation{display:inline}h1{font-size:clamp(40px,10.2vw,60px);line-height:1.1;letter-spacing:-1px}.second-line{gap:12px}h1 em{letter-spacing:-0.02em}.bottom-space{height:48px}}
@media(prefers-reduced-motion:reduce){.soon{animation:none}}
@media(prefers-color-scheme:dark){
  html{--background:#242520;--text:#f5f5f0;--muted:#888982;--fade:rgba(255,255,255,.08)}
  .wordmark img{filter:invert(1)}
  .name-part{filter:brightness(.19)}
}
