*{box-sizing:border-box}html,body,#root{color:#fff;background:#08070a;height:100svh;margin:0;font-family:Archivo,system-ui,-apple-system,sans-serif}:root{--ink:#08070a;--accent:oklch(82% .16 72);--accent-bright:oklch(86% .16 78);--paper:#f2f1ee;--text-panel:#15131a;--motion:.34s cubic-bezier(.2, .8, .2, 1)}.app{background:var(--ink);height:100%}.feed{scroll-snap-type:y mandatory;scrollbar-width:none;height:100svh;overflow-y:scroll}.feed::-webkit-scrollbar{display:none}.card{scroll-snap-align:start;background:var(--ink);height:100svh;position:relative;overflow:hidden}.card-media{position:absolute;inset:0}.card-bg{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.card-video{object-fit:cover;background:#000;border:none;width:100%;height:100%;position:absolute;inset:0}.mute-toggle{position:absolute;inset:0}.card-media-scrim{pointer-events:none;background:linear-gradient(#08070a00 0%,#08070aeb 66%,#08070a 92%);position:absolute;inset:36% 0 0}.post-screenshot{background:linear-gradient(160deg, oklch(30% .06 62) 0%, var(--ink) 58%);justify-content:center;align-items:flex-start;padding:96px 26px 0;display:flex;position:absolute;inset:0}.post-screenshot-card{background:var(--text-panel);border:1px solid #ffffff17;border-radius:14px;flex-direction:column;gap:12px;width:100%;padding:16px 16px 14px;display:flex}.post-screenshot-header{align-items:center;gap:10px;display:flex}.post-screenshot-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-family:Archivo,sans-serif;font-size:15px;font-weight:600;display:flex}.post-screenshot-author{color:#fff;font-family:Archivo,sans-serif;font-size:13px;font-weight:600}.post-screenshot-text{color:#ffffffed;text-wrap:pretty;-webkit-line-clamp:10;-webkit-box-orient:vertical;margin:0;font-family:Archivo,sans-serif;font-size:15.5px;font-weight:400;line-height:1.5;display:-webkit-box;overflow:hidden}.post-screenshot-stats{color:#ffffff8c;border-top:1px solid #ffffff12;gap:18px;padding-top:11px;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:400;display:flex}.card-content{padding:calc(60px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(68px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));pointer-events:none;flex-direction:column;justify-content:flex-end;gap:20px;display:flex;position:absolute;inset:0}.card-content a,.card-content .score-block,.card-content .sound-state{pointer-events:auto}.card-rank-row{align-items:flex-end;gap:4px;display:flex}.card-rank-num{letter-spacing:-.04em;color:var(--accent);font-family:Archivo,sans-serif;font-size:76px;font-weight:900;line-height:.82}.card-rank-label{letter-spacing:.16em;text-transform:uppercase;color:#ffffff9e;padding-bottom:10px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:600;line-height:1.5}.card-title-main{letter-spacing:-.035em;color:#fff;text-wrap:pretty;font-family:Archivo,sans-serif;font-size:44px;font-weight:900;line-height:1.03;text-decoration:none;display:block}.card-title-main.long{font-size:30px}.card-source-row{align-items:center;gap:10px;display:flex}.platform-chip{background:#ffffff1a;border-radius:2px;align-items:center;gap:7px;padding:6px 11px 6px 8px;display:flex}.platform-chip-glyph{background:var(--accent);flex-shrink:0;width:11px;height:11px}.platform-chip-glyph.youtube{border-radius:2px}.platform-chip-glyph.tiktok{border-radius:99px}.platform-chip-glyph.reddit{clip-path:polygon(50% 0,100% 100%,0 100%)}.platform-chip-glyph.bluesky{clip-path:polygon(0 30%,100% 0,100% 70%,0 100%)}.platform-chip-label{letter-spacing:.15em;text-transform:uppercase;color:#fff;font-family:IBM Plex Mono,monospace;font-size:9.5px;font-weight:600}.card-source-author{color:#ffffffa8;font-family:Archivo,sans-serif;font-size:12px;font-weight:400}.score-block{border-left:2px solid var(--accent);cursor:pointer;padding-left:12px}.score-headline{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.score-value{letter-spacing:-.02em;color:#fff;font-family:Archivo,sans-serif;font-size:22px;font-weight:900}.score-caption{letter-spacing:.15em;text-transform:uppercase;color:var(--accent-bright);font-family:IBM Plex Mono,monospace;font-size:9.5px;font-weight:600}.score-bar-track{background:#ffffff24;border-radius:2px;height:3px;margin:9px 0 7px;overflow:hidden}.score-bar-fill{background:var(--accent);border-radius:2px;height:100%}.score-subline{color:#ffffff9e;font-family:IBM Plex Mono,monospace;font-size:10.5px;font-weight:400}.score-explanation{color:#ffffffd1;border-top:1px solid #ffffff1f;margin-top:8px;padding-top:8px;font-family:IBM Plex Mono,monospace;font-size:10.5px;font-weight:400;line-height:1.6}.card-action-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.card-action-link{letter-spacing:.15em;text-transform:uppercase;color:#fff;border-bottom:2px solid var(--accent);padding-bottom:4px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:600;text-decoration:none}.sound-state{letter-spacing:.15em;text-transform:uppercase;color:#ffffffd1;background:0 0;border:none;padding:0;font-family:IBM Plex Mono,monospace;font-size:9.5px;font-weight:600}.sound-state.on{color:var(--accent-bright)}.menu-button{top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));z-index:21;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:none;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;display:flex;position:fixed}.menu-button span{background:#fff;border-radius:2px;width:18px;height:2px}.sidebar-backdrop{z-index:19;opacity:0;pointer-events:none;background:0 0;transition:opacity .25s,background-color .25s;position:fixed;inset:0}.sidebar-backdrop.visible{opacity:1;pointer-events:auto;background:#00000080}.sidebar{z-index:20;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:min(280px,82vw);transition:transform var(--motion);padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:#08070af7;border-right:1px solid #ffffff17;flex-direction:column;gap:4px;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-header{color:#fff;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:Archivo,sans-serif;font-size:1rem;font-weight:650;display:flex}.sidebar-close{color:#ffffffb3;background:0 0;border:none;padding:4px;font-size:1.1rem;line-height:1}.category-list{flex-direction:column;flex:1;gap:2px;display:flex;overflow-y:auto}.category-option{text-align:left;color:#ffffffd1;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:10px 8px;font-family:Archivo,sans-serif;font-size:.9rem;font-weight:500;display:flex}.category-option.active{color:#fff;background:#ffffff1a;font-weight:650}.category-option-dot{background:var(--accent);opacity:0;border-radius:50%;flex-shrink:0;width:8px;height:8px}.category-option.active .category-option-dot{opacity:1}.bottom-nav{z-index:10;padding-top:10px;padding-bottom:env(safe-area-inset-bottom);pointer-events:none;background:linear-gradient(#08070a00,#08070a 30%);position:fixed;bottom:0;left:0;right:0}.bottom-nav>*{pointer-events:auto}.period-rail{margin:0 calc(18px + env(safe-area-inset-left)) 0 calc(18px + env(safe-area-inset-right));background:#ffffff14;border-radius:999px;padding:4px;display:flex}.period-segment{color:#ffffffa8;background:0 0;border:none;border-radius:999px;flex:1;justify-content:center;align-items:center;min-height:44px;font-family:Archivo,sans-serif;font-size:12px;font-weight:600;display:flex}.period-segment.active{background:var(--paper);color:var(--ink)}@media (width<=360px){.period-segment{font-size:11px}}.end-card{padding:24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));flex-direction:column;justify-content:center;gap:16px;display:flex}.end-title{letter-spacing:-.04em;color:#fff;font-family:Archivo,sans-serif;font-size:54px;font-weight:900;line-height:.95}.end-body{color:#ffffff80;max-width:320px;font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:400;line-height:1.6}.status{color:#fff9;text-align:center;z-index:10;flex-direction:column;align-items:center;gap:14px;font-family:IBM Plex Mono,monospace;font-size:11px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.ripple-spinner{width:56px;height:56px;position:relative}.ripple-spinner .ring{border:3px solid #0000;border-radius:50%;animation:1.1s cubic-bezier(.2,.8,.2,1) infinite ripple-pulse;position:absolute;inset:0}.ripple-spinner .ring.outer{border-color:#ffffff24;animation-delay:.18s}.ripple-spinner .ring.inner{border-color:#ffffff4d;inset:14px}.ripple-spinner .dot{background:var(--accent);border-radius:50%;position:absolute;inset:22px}@keyframes ripple-pulse{0%{opacity:0;transform:scale(.4)}50%{opacity:1}to{opacity:0;transform:scale(1)}}