html,body{height:100%}
body{overflow:hidden}
.app{width:min(1280px,calc(100vw - 48px));min-height:calc(100vh - 48px);margin:24px auto;padding:32px 48px;position:relative;display:flex;flex-direction:column}
.main{--hero-top:12vh;width:min(720px,100%);margin:var(--hero-top) auto auto;padding:16px 0 126px;text-align:center;animation:rise .5s ease both}
.brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:16px}
.brand-logo{width:80px;height:80px;padding:4px;margin-left:3px;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
h1{margin:0;font-size:clamp(34px,4.6vw,52px);line-height:1.18;letter-spacing:5px;font-weight:700}
h1 .accent{background:linear-gradient(95deg,var(--blue) 10%,#69a5f5 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.subtitle{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 36px;color:var(--ink-2);font-size:14px;letter-spacing:1px}
.subtitle::before,.subtitle::after{content:"";flex:none;width:28px;height:1px;background:linear-gradient(90deg,transparent,#b9c7dc)}
.subtitle::after{background:linear-gradient(90deg,#b9c7dc,transparent)}
.search-wrap{width:min(720px,100%);margin:0 auto}
.footer{position:absolute;left:48px;right:48px;bottom:14px;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:32px;color:#76839a;font-size:12px;letter-spacing:.3px;white-space:nowrap}
@media(max-height:700px){body{overflow:auto}.main{--hero-top:24px}.brand-logo{width:64px;height:64px}}