@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url('../fonts/PretendardVariable.woff2') format('woff2-variations')}
@font-face{font-family:'Space Grotesk';font-weight:300 700;font-style:normal;font-display:swap;src:url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype')}

:root{--bg:#0B0C0A;--surface:#181A17;--surface-2:#20231E;--line:#2A2D27;--text:#F2F3EF;--muted:#7C8079;--accent:#CBFB45;--accent-soft:rgba(203,251,69,.14);--nav-height:64px}
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--bg)}
body{margin:0;color:var(--text);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.feed::-webkit-scrollbar,.scr::-webkit-scrollbar{display:none}
.feed,.scr{-ms-overflow-style:none;scrollbar-width:none;overscroll-behavior:contain}
.metric-number,.coin-value,.view-count{font-family:'Space Grotesk','Pretendard Variable',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.phone-screen [style*='font-size:30px'][style*='font-weight:800'],.phone-screen [style*='font-size:26px'][style*='font-weight:800'],.phone-screen [style*='font-size:16px'][style*='font-weight:800']{font-family:'Space Grotesk','Pretendard Variable',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

@keyframes floatUp{0%{transform:translateY(0) scale(.7);opacity:0}12%{opacity:1}100%{transform:translateY(-300px) translateX(var(--dx,0)) scale(1.25);opacity:0}}
@keyframes toastIn{0%{transform:translate(-50%,10px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
@keyframes sheetUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}

.bottom-nav{height:var(--nav-height)!important;min-height:var(--nav-height);padding:0 8px 8px!important;transform:translate3d(0,0,0);backface-visibility:hidden;contain:layout paint;will-change:transform}
.bottom-nav__button{width:56px;height:48px;min-width:56px;min-height:48px;justify-content:center;flex:none;line-height:1;transform:translate3d(0,0,0);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bottom-nav__button:active{transform:translate3d(0,0,0)!important}
.bottom-nav__icon{display:flex;width:23px;height:23px;align-items:center;justify-content:center;color:inherit}
.bottom-nav__icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav__label{font-size:10px;color:inherit;font-weight:700;letter-spacing:-.02em}
.bottom-nav__dot{position:absolute;top:3px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:1.5px solid var(--bg)}
.feed-slide{height:100%!important;min-height:100%;max-height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.creator-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-repeat:no-repeat;display:block;filter:saturate(.78) contrast(1.05) brightness(.78)}
.creator-media--hero{object-position:50% 22%;filter:saturate(.7) contrast(1.08) brightness(.72)}
.creator-media--short{object-position:50% 34%;filter:saturate(.72) contrast(1.08) brightness(.72);transform:scale(1.01)}
.creator-media--card{object-position:50% 28%}
.creator-media--banner{object-position:50% 27%;filter:saturate(.68) contrast(1.08) brightness(.68)}
.creator-card-shade,.popular-card__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,12,10,.88),rgba(11,12,10,.06) 72%)}
.creator-thumb{display:block;width:88px;height:108px;border-radius:14px;object-fit:cover;object-position:50% 20%;filter:saturate(.72) contrast(1.05) brightness(.82)}
.creator-thumb--middle{object-position:50% 42%}.creator-thumb--lower{object-position:50% 66%}
.popular-card{position:relative;height:150px;border-radius:14px;background:var(--surface);overflow:hidden;border:none;cursor:pointer;padding:0}
.popular-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.72) contrast(1.06) brightness(.82)}
.popular-card--middle img{object-position:50% 38%}.popular-card--lower img{object-position:50% 58%}.popular-card--right img{object-position:58% 72%}
.popular-card__rank{position:absolute;top:7px;left:7px;background:var(--accent);color:var(--bg);font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px}
.popular-card__views{position:absolute;bottom:7px;left:8px;color:#fff;font-size:11px;font-weight:600}
.fan-short{height:82px;border-radius:9px;background:var(--surface);overflow:hidden;border:none;cursor:pointer;padding:0}
.fan-short img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:saturate(.72) contrast(1.06) brightness(.78)}
.fan-short--lower img{object-position:50% 68%}
.fan-short--locked{position:relative}
.fan-short--locked img{filter:saturate(.52) contrast(1.08) brightness(.36)}
.fan-short--locked span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:9px;font-weight:800;background:rgba(0,0,0,.18)}
.live-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.66) contrast(1.08) brightness(.7)}

.rail-brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);font:700 30px/1 'Space Grotesk',sans-serif;letter-spacing:-.045em;text-decoration:none}
.rail-brand__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--bg);font-size:23px}

@media (min-width:721px){
  .app-shell{justify-content:center;min-height:100vh;padding:24px!important}
  .control-rail,.phone-shell{top:24px!important}
  /* The fixed app canvas is 800px tall plus 12px of frame padding on each end. */
  .phone-shell{zoom:min(1,calc((100dvh - 48px) / 824px))}
}

@media (max-width:720px){
  html,body{width:100%;height:100%;min-height:0;background:var(--bg);overflow:hidden;overscroll-behavior:none}
  .app-shell{display:block!important;width:100%;height:100vh;height:100svh;min-height:0!important;padding:0!important;overflow:hidden}
  .control-rail{display:none!important}
  .phone-shell{position:relative!important;top:auto!important;width:100%!important;max-width:none!important;height:100vh;height:100svh;margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
  .phone-screen{width:100%!important;height:100vh!important;height:100svh!important;min-height:0!important;max-height:none!important;border-radius:0!important;overflow:hidden!important}
  .bottom-nav{height:calc(var(--nav-height) + env(safe-area-inset-bottom))!important;min-height:calc(var(--nav-height) + env(safe-area-inset-bottom));padding-bottom:max(8px,env(safe-area-inset-bottom))!important;position:absolute!important;inset:auto 0 0 0!important}
  .phone-screen [style*='bottom:64px']{bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))!important}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}