(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');
@tailwind base;@tailwind components;@tailwind utilities;
:root { --bg-primary: #18181b; --bg-secondary: #1e1e22; --bg-tertiary: #27272a; --bg-card: #1e1e22; --bg-elevated: #27272a; --bg-hover: #2e2e33; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #71717a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --accent: #3b82f6; --accent-hover: #2563eb; --accent-subtle: rgba(59, 130, 246, 0.12); --success: #34d399; --warning: #fbbf24; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);}
.light { --bg-primary: #fafafa; --bg-secondary: #ffffff; --bg-tertiary: #f4f4f5; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-hover: #f4f4f5; --text-primary: #18181b; --text-secondary: #71717a; --text-tertiary: #a1a1aa; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --accent: #2563eb; --accent-hover: #1d4ed8; --accent-subtle: rgba(37, 99, 235, 0.08); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);}
body { background: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; padding: 0; max-width: 100%; min-height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html.popup body { width: 400px; height: 540px; min-height: 540px;}
* { box-sizing: border-box;}
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', system-ui, sans-serif; letter-spacing: -0.02em;}
::-webkit-scrollbar { width: 5px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 10px;}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary);}
button,a,input,textarea { transition: all 0.15s ease;}
input:focus,textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);}
button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }}
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }}
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }}
@keyframes pulse { 0%, 100% { opacity: 1; }
50% { opacity: 0.5; }}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; }}
.animate-fadeIn { animation: fadeIn 0.2s ease forwards;}
.animate-slideUp { animation: slideUp 0.25s ease forwards;}
.animate-slideDown { animation: slideDown 0.2s ease forwards;}
.animate-scaleIn { animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
.animate-pulse { animation: pulse 1.5s ease-in-out infinite;}
.glass { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);}
.skeleton { background: linear-gradient( 90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px;}