/* The original mock used local Helvetica. Self-hosted Geist retains its quiet
   grotesk character and renders consistently on iOS, Android, and desktop. */
@font-face{font-family:Geist;src:url('/fonts/geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:97%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
:root{--studio-font:Geist,'Geist Fallback',Arial,sans-serif;font-synthesis:none}
html,body,.site-header{font-family:var(--studio-font)}
button,input,select,textarea{font-family:inherit;font-synthesis:none}
/* SVG masks keep navigation marks independent of system emoji fonts. */
.ui-icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.13em;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;pointer-events:none}
.icon-arrow-up-right,.icon-arrow-right,.icon-arrow-down,.icon-arrow-left,.icon-arrow-up{--icon:url('/studio/icons/arrow.svg')}
.icon-arrow-right{rotate:45deg}.icon-arrow-down{rotate:135deg}.icon-arrow-left{rotate:225deg}.icon-arrow-up{rotate:-45deg}
.icon-close{--icon:url('/studio/icons/close.svg')}.icon-play{--icon:url('/studio/icons/play.svg')}.icon-pause{--icon:url('/studio/icons/pause.svg')}

/* The room changes; the navigation stays in the same place. */
.site-header{height:90px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:22px;font-family:var(--studio-font)}
.site-header .wordmark{font-size:25px;letter-spacing:-1.1px;white-space:nowrap;font-weight:400}
.site-header nav{display:flex;gap:27px;font-size:14px;max-width:none;justify-content:flex-start}
@media(max-width:700px){.site-header{height:110px;align-items:flex-start;padding:23px 22px;flex-direction:column;justify-content:flex-start;gap:22px}.site-header .wordmark{font-size:24px}.site-header nav{gap:23px;font-size:13px;flex-wrap:nowrap;max-width:none}}