*,::before,::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#07070d;--panel:#ffffff08;--card:#ffffff0a;--card-hover:#ffffff12;--line:#ffffff1a;--line-soft:#ffffff12;--text:#fff;--text-soft:#e2e8f0;--muted:#94a3b8;--faint:#64748b;--ig-grad:linear-gradient(90deg,#fbbf24,#ec4899,#d946ef);--ig-ring:conic-gradient(from 180deg at 50% 50%,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);--radius-card:26px;font-size:16px}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.bg-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(130px);animation:floatBlob 16s ease-in-out infinite alternate}
.blob-1{width:30rem;height:30rem;top:-12rem;left:-10rem;background:#d946ef40}
.blob-2{width:26rem;height:26rem;top:25%;right:-8rem;background:#0ea5e933;animation-delay:-5s}
.blob-3{width:28rem;height:28rem;bottom:-10rem;left:33%;background:#e11d4833;animation-delay:-9s}
.dots{position:absolute;inset:0;background-image:radial-gradient(#ffffff0e 1px,transparent 1px);background-size:26px 26px}
.bg-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,transparent 60%,var(--bg) 100%)}
@keyframes floatBlob {
0%{transform:translate(0,0) scale(1)}
50%{transform:translate(60px,40px) scale(1.12)}
100%{transform:translate(-40px,70px) scale(0.95)}
}
.shell{position:relative;z-index:1;width:100%;max-width:72rem;margin:0 auto;padding:2.5rem 1rem 3rem}
@media (min-width: 640px) {
.shell{padding:3.5rem 1.5rem 4rem}
}
.hero{max-width:42rem;margin:0 auto;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;backdrop-filter:blur(10px);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft)}
.pulse-dot{position:relative;display:inline-block;width:8px;height:8px}
.pulse-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#ec4899;animation:ping 1.4s cubic-bezier(0,0,0.2,1) infinite}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#fbbf24,#ec4899,#d946ef)}
@keyframes ping {
75%,100%{transform:scale(2.4);opacity:0}
}
.hero h1{margin-top:1.5rem;font-size:clamp(2.2rem,6vw,3.25rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.grad-text{background:linear-gradient(90deg,#fcd34d,#ec4899,#d946ef);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p{margin:1rem auto 0;max-width:36rem;font-size:15px;line-height:1.7;color:var(--muted)}
.hero-chips{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.hero-chips span{padding:.38rem .8rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;font-size:12px;font-weight:600;color:var(--muted)}
.panel{margin-top:3rem;border:1px solid var(--line);border-radius:32px;background:var(--panel);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:.75rem;box-shadow:0 40px 120px -40px #d946ef59}
@media (min-width: 640px) {
.panel{padding:1rem}
}
.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .75rem .75rem}
@media (min-width: 640px) {
.panel-bar{padding:.5rem 1rem .75rem}
}
.window-dots{display:flex;gap:6px}
.window-dots span{width:10px;height:10px;border-radius:50%}
.window-dots span:nth-child(1){background:#f43f5ecc}
.window-dots span:nth-child(2){background:#fbbf24cc}
.window-dots span:nth-child(3){background:#34d399cc}
.panel-title{display:flex;align-items:center;gap:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.panel-title .icon{color:#e879f9}
.panel-count{padding:.28rem .75rem;border:1px solid #f472b633;border-radius:999px;background:#ec489914;font-size:11px;font-weight:700;color:#f9a8d4;white-space:nowrap}
.panel-sep{display:none;width:1px;height:16px;background:var(--line)}
@media (min-width: 640px) {
.panel-sep{display:inline-block}
}
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width: 768px) {
.grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1200px) {
.grid{grid-template-columns:repeat(3,1fr)}
}
.card--sky{--ac:56 189 248;--cover-grad:linear-gradient(135deg,#0ea5e9,#2563eb,#1e3a8a);--ac-soft:#7dd3fc;--glow:0 28px 90px -28px #38bdf88c}
.card--rose{--ac:251 113 133;--cover-grad:linear-gradient(135deg,#f43f5e,#dc2626,#ea580c);--ac-soft:#fda4af;--glow:0 28px 90px -28px #fb718580}
.card--emerald{--ac:52 211 153;--cover-grad:linear-gradient(135deg,#34d399,#16a34a,#0f766e);--ac-soft:#6ee7b7;--glow:0 28px 90px -28px #34d39980}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.5s,border-color 0.5s,background .5s}
.card:hover{transform:translateY(-8px);background:var(--card-hover);border-color:rgb(var(--ac) / 0.4);box-shadow:var(--glow)}
.card-cover{position:relative;height:128px;overflow:hidden}
.card-cover::before{content:"";position:absolute;inset:0;background:var(--cover-grad)}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);opacity:.35;filter:blur(2px) grayscale(10%);mix-blend-mode:luminosity;transition:transform .7s ease}
.card:hover .cover-img{transform:scale(1.25)}
.card-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0b0b12ff 0%,#0b0b1233 55%,transparent 100%)}
.order-badge{position:absolute;top:16px;left:16px;z-index:1;min-width:28px;padding:.15rem .4rem;border:1px solid #ffffff26;border-radius:8px;background:#00000059;backdrop-filter:blur(6px);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-align:center;color:#ffffffe6}
.ig-pill{position:absolute;top:16px;right:16px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:.25rem .65rem;border:1px solid #ffffff26;border-radius:999px;background:#00000059;backdrop-filter:blur(6px);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffffffe6}
.ig-pill .icon{color:#f0abfc}
.card-body{flex:1;display:flex;flex-direction:column;padding:0 1.25rem .9rem;position:relative;z-index:99}
.card-topline{display:flex;align-items:flex-end;justify-content:space-between;margin:-36px 0 .75rem}
.avatar-ring{display:block;padding:3px;border-radius:50%;background:var(--ig-ring);transition:transform .5s cubic-bezier(0.22,1,0.36,1)}
.card:hover .avatar-ring{transform:scale(1.05)}
.avatar-ring img{width:70px;height:70px;border:4px solid #101018;border-radius:50%;object-fit:cover}
.follow-btn{display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;border-radius:999px;background:var(--ig-grad);font-size:13px;font-weight:700;color:#fff;box-shadow:0 10px 24px -10px #ec489980;transition:filter 0.3s,box-shadow 0.3s,transform .15s}
.follow-btn:hover{filter:brightness(1.1);box-shadow:0 14px 34px -10px #ec4899b3}
.follow-btn:active{transform:scale(0.95)}
.card-name{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.card-name .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-verified{flex:0 0 auto;width:18px;height:18px}
.card-user{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:14px;font-weight:600;color:#cbd5e1;transition:color .3s}
.card-user .at{color:var(--faint)}
.card-user .handle{transition:color .3s}
.card-user .icon{color:var(--faint);transition:transform 0.3s,color .3s}
.card-user:hover{color:#fff}
.card-user:hover .handle{color:#f0abfc}
.card-user:hover .icon{transform:translate(2px,-2px);color:#f0abfc}
.card-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.75rem}
.chip{padding:.25rem .65rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;font-size:11px;font-weight:500;color:var(--muted)}
.chip--accent{border-color:rgb(var(--ac) / 0.3);background:rgb(var(--ac) / 0.1);color:var(--ac-soft);font-weight:600}
.card-desc{margin-top:.75rem;font-size:13px;line-height:1.65;color:var(--muted)}
.divider-label{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.divider-label::before,.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}
.card-feed{border-top:1px solid var(--line);padding:.75rem}
.feed-head{display:flex;align-items:center;justify-content:space-between;padding:0 .5rem .65rem}
.feed-head .title{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feed-head .title .icon{color:#e879f9}
.live-badge{display:inline-flex;align-items:center;gap:6px;padding:.25rem .65rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;font-size:10px;font-weight:600;color:#6ee7b7}
.live-badge .pulse-dot::before{background:#34d399}
.live-badge .pulse-dot::after{background:#34d399}
.feed-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0d0d15}
.feed-frame iframe{display:block;width:100%;height:540px;border:0;background:#fff}
.feed-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:#0d0d15;transition:opacity .4s ease}
.feed-loading.done{opacity:0;pointer-events:none}
.feed-loading .ig-logo{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:var(--ig-grad);box-shadow:0 12px 28px -10px #ec489966;animation:softPulse 1.6s ease-in-out infinite}
.feed-loading .ig-logo .icon{color:#fff}
.feed-loading span{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--muted)}
@keyframes softPulse {
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(0.92);opacity:.75}
}
.feed-open{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem 1rem;border-top:1px solid var(--line);background:#0006;font-size:12px;color:var(--muted);transition:background .3s}
.feed-open:hover{background:#0009}
.feed-open .txt{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.feed-open .txt .icon{flex:0 0 auto;color:#e879f9}
.feed-open .txt b{color:#cbd5e1;font-weight:600}
.feed-open .icon-ext{flex:0 0 auto;color:var(--faint)}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--line);background:#0003;font-size:12px;transition:background .3s}
.card-footer:hover{background:#00000059}
.card-footer .url{display:flex;align-items:center;gap:6px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.card-footer .dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:rgb(var(--ac))}
.card-footer .host{color:var(--faint)}
.card-footer .path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#e2e8f0}
.card-footer .icon-ext{flex:0 0 auto;color:var(--faint);transition:transform 0.3s,color .3s}
.card:hover .card-footer .icon-ext{transform:translate(2px,-2px);color:#f0abfc}
.linklist{max-width:48rem;margin:2.5rem auto 0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:#ffffff08;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.linklist-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
@media (min-width: 640px) {
.linklist-head{padding-left:1.5rem;padding-right:1.5rem}
}
.linklist-title{display:flex;align-items:center;gap:.65rem}
.linklist-title .ig-badge{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:12px;background:var(--ig-grad);box-shadow:0 8px 20px -8px #ec489980}
.linklist-title .ig-badge .icon{color:#fff}
.linklist-title h3{font-size:14px;font-weight:700;color:var(--text)}
.linklist-title p{font-size:11px;color:var(--faint)}
.linklist-count{padding:.25rem .75rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.linklist ul{list-style:none}
.linklist li + li{border-top:1px solid var(--line-soft)}
.linklist a{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;transition:background .3s}
@media (min-width: 640px) {
.linklist a{padding-left:1.5rem;padding-right:1.5rem}
}
.linklist a:hover{background:#ffffff0d}
.row-avatar{flex:0 0 auto;padding:2.5px;border-radius:50%;background:var(--ig-ring)}
.row-avatar img{width:48px;height:48px;border:2px solid #0d0d15;border-radius:50%;object-fit:cover}
.row-info{flex:1;min-width:0}
.row-name{display:flex;align-items:center;gap:.5rem}
.row-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--text)}
.row-name .chip{display:none;flex:0 0 auto}
@media (min-width: 640px) {
.row-name .chip{display:inline-block}
}
.row-meta{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--faint)}
.row-meta .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.row-meta .sep{margin:0 6px;color:#334155e6}
.row-arrow{flex:0 0 auto;display:flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:#ffffff0d;color:var(--muted);transition:all .3s}
.row-arrow .icon{transition:transform .3s}
.linklist a:hover .row-arrow{background:var(--ig-grad);border-color:transparent;color:#fff}
.linklist a:hover .row-arrow .icon{transform:translate(2px,-2px)}
.site-footer{max-width:48rem;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--faint)}
.site-footer .brand{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.site-footer .brand .ig-badge{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:7px;background:var(--ig-grad)}
.site-footer .brand .ig-badge .icon{color:#fff}
.icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em}
.icon--lg{width:14px;height:14px}
.icon--xl{width:20px;height:20px}
.reveal{opacity:0;transform:translateY(24px) scale(0.99)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(0.22,1,0.36,1),transform .8s cubic-bezier(0.22,1,0.36,1)}
.grid .card:nth-child(1){transition-delay:.12s}
.grid .card:nth-child(2){transition-delay:.24s}
.grid .card:nth-child(3){transition-delay:.36s}
@media (prefers-reduced-motion: reduce) {
.blob,.pulse-dot::before,.feed-loading .ig-logo{animation:none}
.reveal{opacity:1;transform:none;transition:none}
}