Something went wrong. Try again.
grain.social is a photo sharing platform built on atproto. grain.social
appview atproto photography
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}
/* Theme tokens. The dark palette is the default; `data-theme="light"` on <html> swaps it. The inline script in app.html sets that attribute before first paint (resolving "system" against prefers-color-scheme), so there is no flash. */:root { --shell-max: 1180px; --col-left: 245px; --col-center: minmax(0, 600px); --font-display: "Syne", sans-serif; --font-body: "Plus Jakarta Sans", -apple-system, sans-serif;}
/* `.theme-dark` re-applies the dark tokens to an always-dark surface (e.g. the fullscreen story viewer) regardless of the active theme. */:root,:root[data-theme="dark"],.theme-dark { color-scheme: dark; --bg-root: #080b12; --bg-surface: #0f1419; --bg-elevated: #161d27; --bg-image: #161d27; --bg-hover: #1c2633; --bg-blur: rgba(8, 11, 18, 0.85); --border: #1e293b; --border-light: #2a3a4e; --grain: #85a1ff; --grain-btn: rgb(74, 93, 249); --grain-btn-dim: rgb(60, 78, 220); --grain-dim: #6b8bef; --grain-glow: rgba(133, 161, 255, 0.15); --on-grain: #080b12; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #7c8ba1; --text-faint: #64748b; --danger: #f87171; --danger-bg: #1c1117; /* Favourites. Set once, not per theme: the heart is the same red in light and dark, as it is on iOS and Android. */ --heart: #ff4066;}
:root[data-theme="light"] { color-scheme: light; --bg-root: #ffffff; --bg-surface: #f6f7fa; --bg-elevated: #ffffff; --bg-image: #e2e6ef; --bg-hover: #f0f2f7; --bg-blur: rgba(255, 255, 255, 0.85); --border: #e2e6ef; --border-light: #ccd3e0; --grain: #3b4ddb; --grain-btn: rgb(74, 93, 249); --grain-btn-dim: rgb(60, 78, 220); --grain-dim: #7b8bf5; --grain-glow: rgba(74, 93, 249, 0.1); --on-grain: #ffffff; --text-primary: #0d1424; --text-secondary: #4a5568; --text-muted: #5f6a79; --text-faint: #6b7688; --danger: #dc2626; --danger-bg: #fef2f2;}
html { background: var(--bg-root); color: var(--text-primary); overflow-x: hidden;}
html:not(.fonts-loaded) body { opacity: 0;}html.fonts-loaded body { opacity: 1; transition: opacity 0.1s;}
body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; min-height: 100vh; overscroll-behavior: none;}
a { color: inherit; text-decoration: none;}
@media (max-width: 600px) { html, body { overflow: hidden; position: fixed; inset: 0; min-height: 0; }}
@keyframes spin { to { transform: rotate(360deg); }}
@keyframes fadeIn { from { opacity: 0; }}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; }}