/* Left-aligned introduction, open sky and the character on the right. */
.home-page{--home-edge:clamp(28px,7vw,140px)}
.home-page .site-header{padding:32px var(--home-edge)}
.home-page .home-main{min-height:calc(100svh - 80px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;justify-items:start;column-gap:48px;row-gap:30px;padding:clamp(132px,17svh,184px) var(--home-edge) 42px}
.home-page .hero{grid-column:1;min-width:0;width:100%;max-width:630px;margin:0;padding:0;text-align:left}
.home-page .hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:23px;font-size:10px;letter-spacing:.22em}
.home-page .hero .eyebrow::before{content:"";width:27px;height:1px;background:#c8c8c8;flex-shrink:0}
.home-page .hero .eyebrow span{padding:0;color:#64646b}
.home-page .steel{font-size:clamp(76px,8vw,124px);letter-spacing:.035em;line-height:1.05}
.home-page .hero-description{max-width:370px;margin:23px 0 0;font-size:18px;line-height:1.7;text-wrap:pretty;color:#b9bbc1}
.home-page .actions{justify-content:flex-start;align-items:stretch;gap:12px;margin-top:30px}
.home-page .actions .button{justify-content:space-between;min-height:54px;padding:0 21px;border-radius:13px;gap:27px;font-size:14px;font-weight:500;letter-spacing:0}
.home-page .button-primary{min-width:196px;background:linear-gradient(135deg,#eceef1,#b6bac3);color:#13161c;border-color:#ffffff80;box-shadow:inset 0 1px 0 #fff,0 8px 25px #0005}
.home-page .button-secondary{min-width:155px;background:#15171c80;border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff0a,0 8px 25px #0003}
.button-arrow{flex-shrink:0;opacity:.75;transition:transform .3s,opacity .3s}
@media(hover:hover){.home-page .button-primary:hover{background:linear-gradient(135deg,#fff,#c6cbd5);box-shadow:inset 0 1px 0 #fff,0 13px 35px #0006}.home-page .actions .button:hover .button-arrow{transform:translateX(3px);opacity:1}}
.home-page .music-player{grid-column:1;position:relative;left:auto;right:auto;bottom:auto;width:min(360px,100%);margin:0;border-radius:19px;background:linear-gradient(135deg,#ffffff08,transparent 65%),#0a0c10c2}
.home-page #music-playlist{position:static;max-height:230px;margin-top:12px;box-shadow:none;background:#ffffff03}
.home-page #music-playlist[hidden]{margin-top:0}
.home-page .sky-vignette{background:linear-gradient(90deg,#00000042,transparent 68%),radial-gradient(ellipse at 69% 66%,transparent 14%,#00000022 64%,#0000008c 120%)}
.home-page .foreground{left:73%;width:max(calc(150vw + 64px),1400px)}
.home-page .site-footer{position:relative;left:auto;right:auto;bottom:auto;min-height:80px;margin:0 var(--home-edge);gap:24px}
.home-page .footer-label{font-size:10px;letter-spacing:.14em}
.home-page .motion-toggle{font-size:11px}
.interface-toggle{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:10;display:none;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff2b;border-radius:50%;background:#101319b3;color:#d9dce3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff0a,0 5px 20px #0005;transition:opacity .4s,background .25s,transform .25s}
.interface-toggle:active{transform:scale(.94)}
.interface-show-icon{display:none}
.interface-toggle[aria-pressed="true"]{background:#151b29b3;border-color:#ffffff42}
.interface-toggle[aria-pressed="true"] .interface-hide-icon{display:none}
.interface-toggle[aria-pressed="true"] .interface-show-icon{display:block}
.home-page .site-header,.home-page .hero,.home-page .music-player,.home-page .site-footer{transition:opacity .55s ease,filter .55s ease,transform .55s cubic-bezier(.22,.7,.22,1)}
.interface-hidden .site-header,.interface-hidden .hero,.interface-hidden .music-player,.interface-hidden .site-footer{opacity:0;filter:blur(5px);transform:translateY(7px);pointer-events:none}
.is-loading .interface-toggle{opacity:0;pointer-events:none}

@media(max-width:1000px){
  .home-page .home-main{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:25px}
  .home-page .steel{font-size:clamp(72px,9.5vw,94px)}
  .home-page .hero-description{font-size:16px;max-width:320px}
  .home-page .actions .button{min-width:0;padding:0 18px;gap:19px}
  .home-page .foreground{left:77%;width:max(160vw,1400px)}
}

@media(max-width:700px){
  .home-page{--home-edge:25px}
  .home-page .site-header{padding:23px var(--home-edge)}
  .home-page .home-main{grid-template-columns:minmax(0,1fr);min-height:calc(100svh - 78px);padding:124px var(--home-edge) 88px;row-gap:28px;align-content:start}
  .home-page .hero{max-width:420px}
  .home-page .hero .eyebrow{font-size:9px;gap:10px;letter-spacing:.19em;margin-bottom:21px}
  .home-page .hero .eyebrow::before{width:22px}
  .home-page .steel{font-size:clamp(58px,18.5vw,90px);letter-spacing:.025em}
  .home-page .hero-description{margin:19px 0 0;max-width:265px;font-size:15px;line-height:1.65}
  .home-page .actions{flex-direction:column;align-items:flex-start;gap:11px;margin-top:25px}
  .home-page .actions .button{width:min(232px,100%);min-height:50px;padding:0 18px;font-size:14px}
  .home-page .music-player{width:min(328px,100%);padding:16px 17px 12px}
  .home-page .foreground{left:78%;width:max(180vw,1060px)}
  .home-page .site-footer{min-height:78px;padding-right:62px;gap:12px}
  .home-page .footer-label{max-width:185px;font-size:9px;letter-spacing:.1em}
  .home-page .footer-divider{padding:0 4px}
  .home-page .motion-toggle{flex-shrink:0;padding:10px}
}

@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){.interface-toggle{display:grid}}

@media(max-width:360px){
  .home-page{--home-edge:22px}
  .home-page .home-main{padding-top:113px;padding-bottom:74px;row-gap:25px}
  .home-page .hero .eyebrow{font-size:8px;gap:9px;letter-spacing:.15em}
  .home-page .hero-description{font-size:14px;max-width:240px}
  .home-page .footer-label{max-width:150px}
}

@media(max-height:500px) and (min-width:701px){
  .home-page .home-main{padding-top:118px;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);column-gap:36px;min-height:calc(100svh - 64px)}
  .home-page .hero .eyebrow{margin-bottom:16px}
  .home-page .steel{font-size:66px}
  .home-page .hero-description{font-size:14px;margin-top:17px}
  .home-page .actions{margin-top:23px}
  .home-page .actions .button{min-height:48px;padding:0 15px;gap:14px;font-size:12px}
  .home-page .music-player{grid-column:2;grid-row:1;align-self:start;width:100%;margin-top:8px}
  .home-page .site-footer{min-height:64px}
}

@media(prefers-reduced-motion:reduce){.home-page .site-header,.home-page .hero,.home-page .music-player,.home-page .site-footer,.interface-toggle,.button-arrow{transition:none}}