:root{
  --bg:#020814;
  --panel:#06111f;
  --panel-deep:#020713;
  --text:#fff7e8;
  --muted:#d7e9f8;
  --gold:#f6ca70;
  --gold-soft:rgba(246,202,112,.58);
  --blue:#57caff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{margin:0;padding:0;background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 0%,rgba(44,132,255,.18),transparent 34rem),
    linear-gradient(180deg,#020814 0%,#06111f 52%,#020713 100%);
}
.app{
    width:100%;
    max-width:900px;
    margin:auto;
    min-height:100vh;
    overflow:hidden;
    background:linear-gradient(180deg,#06111f,#020713);
}

.aurora-hero{
    position:relative;
}

.hero-banner{
    display:block;
    width:100%;
    height:auto;
}

.topbar{
    position:absolute;
    inset:0 0 auto 0;
    height:88px;
    display:grid;
    grid-template-columns:56px 1fr 56px;
    align-items:center;
    z-index:10;
}

.brand{
    display:flex;
    justify-content:center;
}

.brand img{
    width:min(82vw,620px);
    height:auto;
}

.round-btn{
  width:clamp(44px,11vw,56px);
  height:clamp(44px,11vw,56px);
  border-radius:50%;
  border:1px solid rgba(246,202,112,.62);
  background:radial-gradient(circle at 30% 20%,rgba(87,202,255,.23),rgba(2,9,18,.54));
  color:#ffe7b2;
  font-size:clamp(24px,7vw,32px);
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 0 24px rgba(87,202,255,.18),inset 0 0 18px rgba(0,0,0,.38);
}
.search-btn{font-size:clamp(28px,7.5vw,36px)}

.hero-media{position:relative;z-index:1;width:100%;line-height:0}
.hero-banner{
  display:block;
  width:100%;
  height:clamp(270px,66vw,470px);
  object-fit:cover;
  object-position:center top;
  filter:saturate(1.06) contrast(1.04);
}

.hero-shade{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.hero-shade-top{top:0;height:110px;background:linear-gradient(180deg,rgba(1,6,14,.42),transparent)}
.hero-shade-bottom{bottom:-1px;height:38%;background:linear-gradient(180deg,transparent 0%,rgba(4,14,27,.46) 48%,#06111f 100%)}

.content{
  position:relative;
  z-index:5;
  width:100%;
  padding:0 clamp(10px,3.4vw,26px) 36px;
  margin-top:clamp(-74px,-11vw,-40px);
}

.aurora-panel{
  position:relative;
  width:100%;
  padding:clamp(18px,4vw,30px) clamp(10px,3.2vw,24px) clamp(18px,4vw,30px);
  border:1px solid var(--gold-soft);
  border-radius:clamp(22px,5vw,34px);
  background:
    radial-gradient(circle at 50% 0%,rgba(87,202,255,.18),transparent 38%),
    linear-gradient(180deg,#071b2e 0%,#030b15 100%);
  box-shadow:0 22px 48px rgba(0,0,0,.48),inset 0 0 40px rgba(87,202,255,.07);
  overflow:hidden;
}
.aurora-panel:before{
  content:"";
  position:absolute;
  inset:clamp(7px,2vw,12px);
  border:1px solid rgba(246,202,112,.25);
  border-radius:clamp(16px,4vw,24px);
  pointer-events:none;
}

.corner{position:absolute;width:34px;height:34px;z-index:3;pointer-events:none}
.corner:before,.corner:after{content:"";position:absolute;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 10px rgba(246,202,112,.34)}
.corner:before{width:34px;height:1px}.corner:after{width:1px;height:34px}
.corner-tl{top:12px;left:12px}.corner-tr{top:12px;right:12px;transform:scaleX(-1)}
.corner-bl{bottom:12px;left:12px;transform:scaleY(-1)}.corner-br{bottom:12px;right:12px;transform:scale(-1)}

.guide-title{
  position:relative;
  z-index:2;
  margin:0 auto clamp(18px,4.2vw,30px);
  min-height:clamp(58px,14vw,100px);
  display:flex;
  justify-content:center;
  align-items:center;
}
.guide-title img{
  display:block;
  width:min(64vw,390px);
  max-height:112px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(87,202,255,.22));
}

.guide-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,3vw,20px);
}
.guide-card{
  min-width:0;
  min-height:clamp(138px,39vw,188px);
  padding:clamp(12px,3.2vw,18px) clamp(8px,2.8vw,16px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--gold-soft);
  border-radius:clamp(18px,4.6vw,26px);
  background:radial-gradient(circle at 28% 12%,rgba(87,202,255,.24),transparent 46%),linear-gradient(135deg,#0d2d4d 0%,#06111f 100%);
  box-shadow:inset 0 0 26px rgba(87,202,255,.10),0 10px 22px rgba(0,0,0,.28);
  overflow:hidden;
  transition:transform .16s ease,filter .16s ease;
}
.guide-card:active,.guide-card.is-pressed{transform:scale(.98);filter:brightness(1.08)}
.guide-card img{width:clamp(48px,15vw,78px);height:clamp(48px,15vw,78px);object-fit:contain;filter:drop-shadow(0 0 13px rgba(87,202,255,.42));flex:0 0 auto}
.guide-card strong{display:block;max-width:100%;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,7vw,36px);line-height:1;color:#ffe7a8;white-space:nowrap;text-shadow:0 2px 0 #120803,0 0 10px rgba(246,202,112,.22)}
.guide-card span{display:block;max-width:100%;color:var(--muted);font-size:clamp(13px,4vw,18px);line-height:1.18;overflow-wrap:normal}

@media (max-width:360px){
  .topbar{height:68px;grid-template-columns:44px minmax(0,1fr) 44px;padding-left:10px;padding-right:10px}
  .round-btn{width:42px;height:42px;font-size:24px}
  .brand img{width:66vw;height:50px}
  .hero-banner{height:260px;object-position:center top}
  .content{padding-left:8px;padding-right:8px;margin-top:-42px}
  .aurora-panel{padding-left:9px;padding-right:9px}
  .guide-grid{gap:8px}
  .guide-card{min-height:132px;padding-left:6px;padding-right:6px}
  .guide-card strong{font-size:21px}
  .guide-card span{font-size:13px}
}

@media (min-width:700px){
  .content{margin-top:-90px}
  .guide-grid{gap:22px}
}