:root { --paper:#f1f1ed; --ink:#080808; --muted:#949494; --line:#d3d3ce; --card:#e5e5e0; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; } button,input,textarea { font:inherit; } button { cursor:pointer; } .noise { position:fixed; inset:0; z-index:-1; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .app-shell { min-height:100vh; display:grid; grid-template-columns:244px 1fr; }
.sidebar { border-right:1px solid var(--line); padding:30px 18px 24px; display:flex; flex-direction:column; position:fixed; height:100vh; width:244px; background:rgba(241,241,237,.83); backdrop-filter:blur(16px); z-index:5; } .brand { color:var(--ink); text-decoration:none; font-family:"DM Mono","JetBrains Mono"; display:flex; gap:5px; align-items:center; letter-spacing:3px; margin:0 12px 54px; } .brand span { background:#090909; color:white; width:31px; height:31px; display:grid; place-items:center; font-size:17px; font-weight:bold; } .brand b { font-size:15px; }
.nav { display:grid; gap:5px; } .nav-item { border:0; background:transparent; text-align:left; padding:12px; border-radius:4px; display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; transition:.2s; } .nav-item svg { width:20px; height:20px; flex:none; display:block; } .nav-item i { font-family:"DM Mono","JetBrains Mono"; font-style:normal; width:17px; font-size:22px; line-height:1; } .nav-item:hover { background:#dddeda; } .nav-item.active { background:#e3e3df; box-shadow:inset 3px 0 #111; } .nav-item em { margin-left:auto; font-style:normal; font:11px "DM Mono","JetBrains Mono"; background:#111; color:#fff; padding:3px 6px; border-radius:99px; }.create-button,.publish { margin-top:30px; border:0; background:#111; color:#fff; padding:14px; font-weight:800; border-radius:3px; transition:transform .2s,background .2s; } .create-button span { font:24px "DM Mono","JetBrains Mono"; vertical-align:-2px; margin-right:8px; } .create-button:hover,.publish:hover { transform:translateY(-2px); background:#333; }.side-foot { margin-top:auto; display:grid; gap:7px; color:#777; font:10px "DM Mono","JetBrains Mono"; text-transform:uppercase; }
.content { grid-column:2; min-width:0; }.topbar { height:84px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,100px); position:sticky; top:0; z-index:3; background:rgba(241,241,237,.8); backdrop-filter:blur(16px); }.feed-switch { display:flex; gap:25px; }.switch { border:0; background:none; padding:9px 0; color:#888; font-size:13px; font-weight:800; position:relative; }.switch.active { color:#111; }.switch.active:after { content:""; height:2px; background:#111; position:absolute; left:0; right:0; bottom:0; }.search { border-bottom:1px solid #999; width:min(290px,34vw); display:flex; gap:8px; align-items:center; padding:8px 0; color:#777; }.search svg { width:16px; height:16px; flex:none; display:block; }.search input { border:0; outline:0; background:transparent; width:100%; font-size:12px; }.profile-dot { border:0; color:#fff; background:#222; width:32px; height:32px; border-radius:50%; font-weight:bold; }
.view { display:none; }.view.active { display:block; animation:arrive .35s ease both; } @keyframes arrive { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }.feed { max-width:760px; margin:0 auto; padding:34px 24px 70px; display:grid; gap:30px; }.post { display:grid; grid-template-columns:48px minmax(0,1fr); gap:13px; }.avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#171717; color:#fff; font-size:13px; font-weight:800; position:relative; }.avatar:after { content:""; position:absolute; width:10px; height:10px; background:#f1f1ed; border:2px solid #171717; border-radius:50%; right:0; bottom:0; }.post-main { min-width:0; }.post-head { display:flex; align-items:center; gap:8px; padding:2px 0 12px; font-size:12px; }.post-head b { font-size:13px; }.post-head span { color:#888; }.follow { margin-left:auto; background:transparent; border:1px solid #999; padding:5px 10px; font-size:10px; font-weight:800; border-radius:2px; }.follow.following { background:#111;color:white;border-color:#111; }.media { height:clamp(380px,57vw,590px); background:#222; overflow:hidden; position:relative; isolation:isolate; }.media:before { content:""; position:absolute; inset:0; background:var(--bg); transition:transform .7s; }.post:hover .media:before { transform:scale(1.05); }.media:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.52),transparent 45%); }.media > span { position:absolute; z-index:1; bottom:20px; left:20px; color:white; font:11px "DM Mono","JetBrains Mono"; letter-spacing:1px; }.duration { left:auto!important; right:18px; padding:4px 6px; background:rgba(0,0,0,.55); }.play { border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.2); color:#fff; position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); font-size:17px; opacity:0; transition:.25s; }.post:hover .play { opacity:1; }.post-copy { font-size:13px; margin:11px 0 9px; line-height:1.55; }.post-copy b { font-weight:800; }.actions { border-top:1px solid var(--line); padding-top:10px; display:flex; gap:5px; }.action { border:0; padding:7px 10px; background:transparent; color:#666; font:11px "DM Mono","JetBrains Mono"; display:flex; gap:5px; align-items:center; }.action:hover,.action.liked,.action.saved { color:#111; background:#dfdfdb; }.action.liked i { color:#e22; }.action i { font-size:17px; font-style:normal; }
.view-heading,.inbox-panel,.profile-panel,.empty-view { max-width:960px; margin:0 auto; padding:64px 40px; }.view-heading p,.inbox-panel>p,.empty-view>p,.modal-card>p,.comments-card>p { font:11px "DM Mono","JetBrains Mono"; letter-spacing:2px; color:#777; margin:0 0 8px; }.view h1 { margin:0; font-size:40px; letter-spacing:0; }.trend-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:32px; }.trend { border:1px solid var(--line); padding:19px; min-height:150px; background:var(--card); display:flex; flex-direction:column; justify-content:space-between; text-align:left; }.trend:nth-child(2n) { background:#181818;color:#fff; }.trend small { font:10px "DM Mono","JetBrains Mono"; }.trend b { font-size:20px; }.empty-view { text-align:center; padding-top:160px; }.empty-view span { display:block; color:#777; margin:18px auto; max-width:360px; font-size:13px; }.inbox-panel { max-width:680px; }.notice { display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }.notice b { display:block; font-size:13px; }.notice span { font-size:12px;color:#777; }.profile-cover { height:175px; background:linear-gradient(115deg,#191919 0%,#777 48%,#111 49%,#d6d6d1 100%); filter:grayscale(1); }.profile-info { position:relative; padding:0 26px 25px; border-bottom:1px solid var(--line); }.avatar.large { width:94px; height:94px; margin-top:-47px; border:4px solid var(--paper); font-size:30px; }.avatar.large:after { display:none; }.outline { position:absolute; right:26px; top:20px; border:1px solid #888; background:transparent; padding:8px 12px; font-size:11px; font-weight:800; }.profile-info h1 { font-size:22px; margin:14px 0 4px; }.profile-info p { font-size:13px; margin:0; }.stats { display:flex; gap:21px; margin-top:17px; font-size:12px; }.stats b { font-weight:400; }.stats span { font-weight:800; }.profile-tabs { border-bottom:1px solid var(--line); display:flex; gap:24px; padding:0 26px; }.profile-tabs button { border:0; background:transparent; padding:13px 2px; font:11px "DM Mono","JetBrains Mono"; }.profile-tabs .active { border-bottom:2px solid #111; }.profile-posts { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:18px 0; }.mini-post { aspect-ratio:1/1.3; background:var(--bg); position:relative; }.mini-post:after { content:attr(data-likes); position:absolute; left:10px; bottom:8px; color:white; font:11px "DM Mono","JetBrains Mono"; }
dialog { border:0; padding:0; background:transparent; color:#111; max-width:none; } dialog::backdrop { background:rgba(0,0,0,.52); backdrop-filter:blur(4px); }.modal-card,.comments-card { width:min(480px,calc(100vw - 32px)); background:#efefeb; padding:34px; position:relative; border:1px solid #aaa; }.modal-card h2,.comments-card h2 { margin:0 0 24px; font-size:25px; }.icon-close { position:absolute; right:14px; top:11px; border:0; background:transparent; font-size:25px; }.dropzone { display:grid; place-items:center; text-align:center; min-height:150px; border:1px dashed #888; margin-bottom:18px; cursor:pointer; }.dropzone input { display:none; }.dropzone span { font:26px "DM Mono","JetBrains Mono"; }.dropzone b { font-size:12px; margin-top:5px; }.dropzone small { font-size:10px; color:#777; }.modal-card label:not(.dropzone) { font-size:11px; font-weight:800; display:grid; gap:6px; }.modal-card textarea { resize:vertical; min-height:72px; padding:9px; border:1px solid #aaa; background:#f7f7f4; outline:none; font-size:12px; }.tag-row { display:flex; gap:6px; margin:12px 0; }.tag { border:1px solid #aaa; background:transparent; border-radius:99px; padding:5px 8px; font:10px "DM Mono","JetBrains Mono"; }.publish { width:100%; margin-top:8px; }.comments-list { max-height:330px; overflow:auto; }.comment { padding:12px 0; border-bottom:1px solid #d2d2ce; font-size:12px; }.comment b { margin-right:6px; }.comment-input { display:flex; gap:6px; border-top:1px solid #bbb; padding-top:13px; margin-top:12px; }.comment-input input { flex:1; border:1px solid #aaa; padding:9px; background:transparent; outline:none; font-size:12px; }.comment-input button { border:0; background:#111; color:white; width:36px; font-size:18px; }.comments-card { width:min(440px,calc(100vw - 32px)); } #toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:#111; color:white; padding:10px 15px; font-size:11px; opacity:0; transition:.25s; pointer-events:none; z-index:10; } #toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { width:100%; height:62px; bottom:0; top:auto; padding:5px 8px; flex-direction:row; border-top:1px solid var(--line); border-right:0; align-items:center; z-index:8; }.brand,.create-button,.side-foot { display:none; }.nav { grid-template-columns:repeat(5,1fr); width:100%; gap:2px; }.nav-item { padding:5px 2px; display:grid; place-items:center; gap:1px; font-size:9px; }.nav-item svg { width:19px; height:19px; }.nav-item i { font-size:18px; }.nav-item em { display:none; }.nav-item.active { box-shadow:inset 0 -2px var(--accent,#111); }.content { display:block; padding-bottom:62px; }.topbar { height:62px; padding:0 16px; }.search { width:130px; }.search input { font-size:10px; }.feed-switch { gap:13px; }.switch { font-size:10px; }.feed { padding:19px 11px 35px; gap:25px; }.post { grid-template-columns:37px minmax(0,1fr); gap:8px; }.avatar { width:35px; height:35px; font-size:10px; }.media { height:calc(100vw - 57px); }.view-heading,.inbox-panel,.profile-panel,.empty-view { padding:38px 18px; }.view h1 { font-size:30px; }.trend-grid { grid-template-columns:1fr 1fr; }.profile-cover { height:120px; }.profile-info { padding:0 12px 20px; }.outline { right:12px; }.profile-tabs { padding:0 12px; }.profile-posts { margin:0 -18px; }.stats { gap:10px; font-size:10px; }.post-copy { font-size:12px; } }

/* Live studio and glass treatment */
body:before { content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(120deg,rgba(255,255,255,.66),transparent 42%),repeating-linear-gradient(90deg,transparent 0 74px,rgba(0,0,0,.025) 75px 76px); }
.sidebar,.topbar { background:rgba(241,241,237,.58); border-color:rgba(40,40,40,.16); box-shadow:0 8px 32px rgba(30,30,30,.03); }.nav-item:hover { background:rgba(255,255,255,.42); }.live-nav em { background:#e22; letter-spacing:.5px; font-size:9px; }.live-studio { max-width:1080px; margin:0 auto; padding:44px clamp(20px,5vw,64px) 80px; }.live-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }.live-heading p { margin:0 0 7px; color:#777; font:11px "DM Mono","JetBrains Mono"; letter-spacing:2px; }.live-heading h1 { margin:0; font-size:40px; }.live-status { display:grid; grid-template-columns:auto auto; gap:4px 7px; align-items:center; font:10px "DM Mono","JetBrains Mono"; }.live-status>span { width:8px; height:8px; border-radius:50%; background:#929292; }.live-status small { grid-column:2; color:#777; }.live-status.on>span { background:#e22; box-shadow:0 0 0 5px rgba(230,34,34,.12); animation:pulse 1.3s infinite; }.live-status.on b { color:#d11; } @keyframes pulse { 50% { transform:scale(.72); opacity:.6; } }
.stage { position:relative; padding:12px; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.27); box-shadow:0 25px 70px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.8); backdrop-filter:blur(18px); }.stage-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:10px; height:min(58vw,570px); min-height:370px; }.multi-stage { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); }.stream-frame { position:relative; overflow:hidden; background:#161616; color:white; min-height:0; }.stream-frame:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.12) 31% 32%,transparent 33%),radial-gradient(circle at 65% 32%,#bcbcb8 0 1%,#484848 2% 17%,#131313 40%); }.stream-frame.guest:before { background:var(--guest-bg,linear-gradient(45deg,#0e0e0e 0 28%,#727272 29% 30%,#171717 31% 65%,#d9d9d5 66%)); }.stream-frame video { position:absolute; z-index:2; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }.stream-fallback,.guest-art { position:absolute; inset:0; z-index:1; display:grid; place-content:center; justify-items:center; gap:8px; font-size:12px; }.stream-fallback b,.guest-art b { width:78px; height:78px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-items:center; font-size:31px; background:rgba(0,0,0,.34); }.guest-art small { margin-top:8px; font:10px "DM Mono","JetBrains Mono"; color:#ddd; }.speaker-tag { position:absolute; z-index:4; top:12px; left:12px; background:rgba(0,0,0,.42); backdrop-filter:blur(10px); padding:6px 7px; font:9px "DM Mono","JetBrains Mono"; letter-spacing:1px; }.live-overlay { position:absolute; z-index:5; left:26px; bottom:26px; color:#fff; display:grid; gap:4px; text-shadow:0 2px 10px #000; }.live-overlay b { font-size:21px; }.live-overlay small { font:10px "DM Mono","JetBrains Mono"; }.live-pill { font:10px "DM Mono","JetBrains Mono"; letter-spacing:1px; color:#fff; }.live-pill:first-letter { color:#ff3232; }.heart-burst { position:absolute; z-index:6; bottom:28px; right:26px; pointer-events:none; }.float-heart { position:absolute; bottom:0; right:0; color:#fff; font-size:22px; text-shadow:0 1px 8px #000; animation:floatHeart 1.7s ease-out forwards; } @keyframes floatHeart { to { transform:translate(var(--x),-150px) rotate(25deg); opacity:0; } }
.live-bottom { display:grid; grid-template-columns:1fr auto; gap:14px; margin-top:12px; }.live-chat { background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.65); backdrop-filter:blur(18px); padding:12px; }.chat-list { height:70px; overflow:auto; font-size:11px; }.chat-list p { margin:0 0 5px; }.chat-list b { margin-right:5px; }.live-chat-input { display:flex; gap:6px; border-top:1px solid rgba(0,0,0,.14); padding-top:9px; }.live-chat-input input { min-width:0; flex:1; border:0; background:transparent; outline:0; font-size:11px; }.live-chat-input button { border:0; background:#171717; color:#fff; width:30px; }.live-actions { display:flex; gap:7px; align-items:stretch; }.live-control,.invite-guest,.start-live { border:1px solid rgba(20,20,20,.22); background:rgba(255,255,255,.38); backdrop-filter:blur(15px); min-width:50px; padding:8px 10px; font-size:15px; }.live-control span { display:block; font-size:8px; margin-top:2px; }.live-control.off { color:#aaa; background:rgba(0,0,0,.15); }.invite-guest,.start-live { font-size:11px; font-weight:800; }.invite-guest { max-width:124px; }.start-live { background:#111; color:#fff; border-color:#111; }.start-live.end { background:#d51d1d; border-color:#d51d1d; }
@media (max-width:760px) { .nav { grid-template-columns:repeat(6,1fr); }.live-studio { padding:26px 12px; }.live-heading h1 { font-size:29px; }.stage { padding:6px; }.stage-grid { height:75vw; min-height:280px; gap:5px; }.multi-stage { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); }.stream-fallback b,.guest-art b { width:48px; height:48px; font-size:20px; }.guest-art small { display:none; }.live-bottom { grid-template-columns:1fr; }.live-actions { display:grid; grid-template-columns:repeat(3,1fr); }.live-control { min-height:49px; }.invite-guest,.start-live { max-width:none; }.live-chat { order:2; }.live-overlay { left:16px; bottom:16px; }.live-overlay b { font-size:16px; } }