:root{  --bg:#06070b;  --bg-2:#0b0c12;  --panel:#ffffff0b;  --panel-2:#fff1;  --border:#ffffff14;  --text:#f5f7fb;  --muted:#aab2c5;  --pink:#ff63c3;  --pink-2:#ff4da6;  --blue:#59d7ff;  --blue-2:#41bfff;  --shadow:0 24px 80px #0000006b;  --radius-xl:30px;  --radius-lg:24px;  --radius-md:18px;  --radius-sm:14px}*{  box-sizing:border-box}html,body,#root{  margin:0;  min-height:100%;  background:    radial-gradient(circle at top, #5c3aff1c, transparent 25%),     radial-gradient(circle at 20% 15%, #ff63c314, transparent 20%),     linear-gradient(180deg, #06070b 0%, #040509 100%);  color:var(--text);  font-family:Inter, Arial, sans-serif;  overflow-x:hidden}body{  -webkit-font-smoothing:antialiased;  text-rendering:optimizeLegibility}a{  color:inherit;  text-decoration:none}button,input,textarea,select{  font:inherit}img,video{  max-width:100%;  display:block}input,textarea,select{  outline:none}.app-shell{  min-height:100vh;  padding-bottom:110px}.screen-shell{  width:min(100%, 980px);  margin:0 auto;  padding:24px 16px 0}.screen-shell-reels{  width:100%;  max-width:none;  padding:0}.session-header{  position:sticky;  top:0;  z-index:40;  backdrop-filter:blur(22px);  background:#06070bc7;  border-bottom:1px solid #ffffff0d}.session-header-inner{  width:min(100%, 1100px);  margin:0 auto;  padding:14px 16px;  display:flex;  align-items:center;  justify-content:space-between;  gap:16px}.session-brand-wrap{  display:flex;  align-items:center;  gap:14px;  min-width:0}.session-brand-pill{  min-height:36px;  padding:0 14px;  border-radius:999px;  display:inline-flex;  align-items:center;  background:#ff63c31a;  border:1px solid #ff63c338;  color:#ffc4e7;  font-size:11px;  letter-spacing:.08em;  font-weight:800}.session-brand-copy h1{  margin:0;  font-size:22px;  letter-spacing:-.05em}.session-brand-copy p{  margin:4px 0 0;  color:var(--muted);  font-size:13px}.session-nav{  display:flex;  align-items:center;  gap:10px}.session-nav-btn{  width:48px;  height:48px;  border-radius:16px;  border:1px solid transparent;  display:grid;  place-items:center;  color:var(--text);  background:#ffffff08;  transition:.2s ease}.session-nav-btn:hover{  background:#ffffff0f}.session-nav-btn.active{  border-color:#ff63c347;  background:linear-gradient(    135deg,     rgba(255, 99, 195, .16),     rgba(89, 215, 255, .12)   );  box-shadow:0 0 0 1px #ff63c314}.session-avatar{  width:28px;  height:28px;  border-radius:999px;  object-fit:cover}.bottom-nav{  position:fixed;  left:50%;  bottom:16px;  transform:translateX(-50%);  width:min(94vw, 460px);  min-height:76px;  padding:10px 12px;  border-radius:28px;  background:#0f1016db;  border:1px solid #ffffff12;  backdrop-filter:blur(22px);  box-shadow:var(--shadow);  display:grid;  grid-template-columns:repeat(5, 1fr);  gap:10px;  z-index:80}.bottom-nav-item{  height:54px;  border-radius:18px;  display:grid;  place-items:center;  color:#ffffffd1;  transition:.2s ease}.bottom-nav-item.active{  color:#fff;  background:#ffffff0f}.bottom-nav-create{  background:radial-gradient(circle, #59d7ff2e, transparent 62%),     linear-gradient(135deg, #59d7ff1f, #ff63c329);  border:1px solid #59d7ff42;  box-shadow:    0 0 22px #59d7ff2e,     0 0 28px #ff63c31f;  color:#fff}.home-hero{  display:flex;  align-items:flex-end;  justify-content:space-between;  gap:18px;  padding:10px 0 18px}.hero-badge{  display:inline-flex;  align-items:center;  min-height:42px;  padding:0 16px;  border-radius:999px;  background:#ff63c31a;  border:1px solid #ff63c32e;  color:#ffc3e6;  font-size:12px;  font-weight:800;  letter-spacing:.08em}.home-hero-copy h1{  margin:16px 0 0;  font-size:clamp(54px, 10vw, 92px);  line-height:.95;  letter-spacing:-.07em}.home-hero-copy p{  margin:18px 0 0;  max-width:740px;  color:var(--muted);  font-size:clamp(18px, 4vw, 24px);  line-height:1.55}.hero-create-btn{  min-height:52px;  padding:0 18px;  border-radius:18px;  display:inline-flex;  align-items:center;  gap:10px;  color:#fff;  font-weight:700;  border:1px solid #59d7ff42;  background:linear-gradient(135deg, #59d7ff29, #ff63c32e);  white-space:nowrap}.story-tray-section{  margin-top:8px;  margin-bottom:18px}.story-tray-scroll{  display:flex;  gap:14px;  overflow-x:auto;  padding-bottom:4px;  scrollbar-width:none}.story-tray-scroll::-webkit-scrollbar{  display:none}.story-bubble-btn{  border:none;  background:transparent;  color:var(--text);  cursor:pointer;  min-width:74px;  display:grid;  justify-items:center;  gap:8px;  padding:0}.story-bubble-btn span{  font-size:12px;  color:var(--muted);  white-space:nowrap}.story-bubble-ring{  width:72px;  height:72px;  border-radius:999px;  padding:3px;  display:grid;  place-items:center;  background:#ffffff14}.story-bubble-ring.has-story{  background:linear-gradient(135deg, var(--blue), var(--pink))}.story-bubble-avatar,.story-bubble-fallback{  width:66px;  height:66px;  border-radius:999px}.story-bubble-avatar{  object-fit:cover}.story-bubble-fallback{  display:grid;  place-items:center;  background:#11131a;  color:#fff;  font-weight:800}.feed-stack{  display:grid;  gap:18px}.feed-card{  border-radius:28px;  padding:16px;  background:linear-gradient(180deg, #12131bf5, #0a0b12f5);  border:1px solid var(--border);  box-shadow:var(--shadow)}.feed-card-top{  display:flex;  align-items:center;  justify-content:space-between;  gap:14px;  margin-bottom:14px}.feed-author{  display:flex;  align-items:center;  gap:12px;  min-width:0}.feed-author-avatar{  width:48px;  height:48px;  border-radius:999px;  object-fit:cover}.feed-author-avatar.fallback{  display:grid;  place-items:center;  background:#ffffff14;  color:#fff;  font-weight:800}.feed-author-copy{  min-width:0}.feed-author-line{  display:flex;  align-items:center;  gap:6px}.feed-author-copy strong{  display:block;  font-size:15px}.feed-author-copy span{  color:var(--muted);  font-size:13px}.verified-check{  color:var(--blue)}.follow-chip,.reel-follow-chip{  min-height:42px;  padding:0 16px;  border-radius:999px;  border:1px solid #ff63c352;  background:#ff63c314;  color:#ffd3ed;  font-weight:700;  cursor:pointer}.feed-media-wrap{  overflow:hidden;  border-radius:22px;  background:#050608}.feed-media{  width:100%;  aspect-ratio:4 / 5;  object-fit:cover;  background:#000}.feed-text-only{  min-height:240px;  border-radius:22px;  padding:20px;  display:grid;  place-items:center;  text-align:center;  background:#ffffff08;  border:1px solid #ffffff0d}.feed-text-only p{  margin:0;  color:var(--text);  font-size:20px;  line-height:1.6}.feed-actions{  display:flex;  align-items:center;  gap:18px;  flex-wrap:wrap;  padding-top:14px}.feed-action-btn{  border:none;  background:transparent;  color:#fff;  display:inline-flex;  align-items:center;  gap:8px;  cursor:pointer;  padding:0}.feed-action-btn span{  color:var(--muted);  font-size:14px}.feed-caption{  margin-top:12px;  color:var(--muted);  line-height:1.6}.feed-caption strong{  color:#fff}.reels-shell{  height:calc(100vh - 110px);  overflow-y:auto;  scroll-snap-type:y mandatory;  background:#000}.reel-slide{  position:relative;  min-height:calc(100vh - 110px);  scroll-snap-align:start;  background:#000}.reel-video-full{  width:100%;  height:calc(100vh - 110px);  object-fit:cover;  background:#000}.reel-top-fade{  position:absolute;  inset:0 0 auto 0;  height:180px;  background:linear-gradient(180deg, #0000008a, transparent);  pointer-events:none}.reel-mute-btn{  position:absolute;  top:18px;  right:16px;  z-index:3;  width:50px;  height:50px;  border-radius:999px;  border:1px solid #ffffff29;  background:#00000057;  color:#fff;  display:grid;  place-items:center;  cursor:pointer}.reel-overlay{  position:absolute;  left:0;  right:0;  bottom:0;  padding:22px 16px 130px;  display:flex;  justify-content:space-between;  align-items:flex-end;  gap:14px;  background:linear-gradient(180deg, transparent, #000000d6)}.reel-copy{  flex:1;  min-width:0}.reel-user-row{  display:flex;  align-items:center;  gap:12px;  margin-bottom:14px}.reel-user-avatar{  width:48px;  height:48px;  border-radius:999px;  object-fit:cover}.reel-user-avatar.fallback{  display:grid;  place-items:center;  background:#ffffff14;  font-weight:800}.reel-user-copy{  min-width:0;  flex:1}.reel-user-line{  display:flex;  align-items:center;  gap:6px}.reel-user-copy strong{  display:block;  font-size:15px}.reel-user-copy span{  color:#ffffffc7;  font-size:13px}.reel-caption-text{  margin:0;  color:#fff;  line-height:1.6;  max-width:70ch}.reel-actions-col{  display:grid;  gap:14px;  justify-items:center}.reel-action-btn{  border:none;  background:transparent;  color:#fff;  display:grid;  justify-items:center;  gap:6px;  cursor:pointer;  padding:0}.reel-action-btn span{  font-size:12px;  color:#ffffffdb}.reels-empty{  min-height:calc(100vh - 110px);  display:grid;  place-items:center;  padding:24px}.reels-empty-card,.empty-state-card{  width:100%;  max-width:680px;  border-radius:28px;  padding:26px;  background:linear-gradient(180deg, #12131bf5, #0a0b12f5);  border:1px solid var(--border);  color:var(--muted);  box-shadow:var(--shadow)}.auth-page{  min-height:100vh;  display:grid;  place-items:center;  padding:24px 16px 110px}.auth-card{  width:min(100%, 720px);  border-radius:32px;  padding:28px;  background:linear-gradient(180deg, #12131bf5, #0a0b12f5);  border:1px solid var(--border);  box-shadow:var(--shadow)}.auth-logo{  display:inline-block;  font-size:30px;  font-weight:800;  letter-spacing:-.06em;  margin-bottom:18px}.auth-mode-switch{  display:flex;  gap:12px;  margin-bottom:20px}.auth-mode-btn{  min-height:50px;  padding:0 22px;  border-radius:18px;  border:1px solid var(--border);  background:#ffffff0a;  color:#fff;  cursor:pointer;  font-weight:700}.auth-mode-btn.active{  border-color:#ff63c342;  background:linear-gradient(135deg, #ff63c329, #59d7ff1f)}.auth-card h1{  margin:0;  font-size:clamp(40px, 7vw, 72px);  letter-spacing:-.06em}.auth-subtitle{  margin:18px 0 0;  color:var(--muted);  font-size:clamp(18px, 4vw, 22px);  line-height:1.55}.auth-form{  display:grid;  gap:14px;  margin-top:24px}.auth-form input,.auth-form textarea,.auth-form select{  width:100%;  min-height:58px;  border-radius:18px;  border:1px solid #ffffff14;  background:#ffffff0a;  color:#fff;  padding:16px 18px;  font-size:16px}.auth-button{  width:100%;  min-height:58px;  border-radius:999px;  border:1px solid #59d7ff47;  background:linear-gradient(135deg, var(--blue), var(--pink));  color:#fff;  font-size:20px;  font-weight:800;  cursor:pointer}.auth-message{  padding:14px 16px;  border-radius:16px;  font-size:14px}.auth-message.error{  background:#ff5a5a1f;  border:1px solid #ff5a5a33;  color:#ffd0d0}.auth-message.success{  background:#34d3991f;  border:1px solid #34d39933;  color:#d1fae5}.terms-check-row{  display:flex;  align-items:flex-start;  gap:10px;  color:var(--muted);  line-height:1.5}.terms-check-row a{  color:#ffd1eb}@media (width<=860px){.session-header-inner{display:none}.screen-shell{padding-top:18px}.home-hero,.feed-card-top{flex-direction:column;align-items:flex-start}.reel-overlay{align-items:flex-end;padding-bottom:132px}.reel-caption-text{max-width:100%}}@media (width<=640px){.home-hero-copy h1{font-size:74px}.feed-media{aspect-ratio:4/5.4}.auth-card{padding:22px}.auth-card h1{font-size:54px}.auth-mode-switch{grid-template-columns:1fr 1fr;display:grid}}