Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296@import "tailwindcss";@import "fumadocs-ui/css/lib/default-colors.css";@import "fumadocs-ui/css/preset.css";@import "@happyview/design-system/globals.css";@import "@happyview/design-system/vaporwave.css";
@source "../../node_modules/fumadocs-ui/dist/**/*.js";@source "../../node_modules/fumadocs-ui/css/**/*.css";
html { overflow-x: hidden;}
/* --- Layout --- */
@media (min-width: 768px) { * { --fd-sidebar-width: 300px !important; }}
#nd-docs-layout { --fd-layout-width: 100%;}
#nd-page > .prose { isolation: isolate;}
#nd-page > .prose :is(h2, h3, h4),#nd-page > .prose :is(h2, h3, h4) > a,.prose :is(h2, h3, h4),.prose :is(h2, h3, h4) > a { color: rgb(var(--color-magenta)) !important;}
/* --- Docs mobile sidebar trigger --- The DocsLayout sub-header (#nd-subnav, md:hidden) contains the sidebar drawer toggle. Strip the bar chrome and float the button below the nav. */
#nd-subnav { position: fixed; top: auto; bottom: 1rem; right: 1rem; left: auto; width: auto; height: auto; border: 1px solid rgb(var(--color-border)); border-radius: 10px; background: rgb(var(--color-surface)); padding: 0; z-index: 35; box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);}
#nd-subnav > :not(button) { display: none;}
#nd-subnav > button { padding: 0.625rem;}
/* --- Sidebar --- */
@media (min-width: 768px) { #nd-sidebar > :first-child button[aria-label="Collapse Sidebar"] { display: none; }}
/* --- Sidebar section labels --- */
#nd-sidebar p { color: rgb(var(--color-magenta)); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em;}
/* --- Sidebar links --- */
@keyframes sidebar-gradient { to { background-position: 200% center; }}
#nd-sidebar a,#nd-sidebar button:not([aria-label]) { white-space: nowrap; color: rgb(var(--color-fg)); transition: color 0.2s, text-shadow 0.2s, transform 0.2s, box-shadow 0.2s, border-radius 0.2s;}
/* Open folder sections */#nd-sidebar div[data-state="open"]:not([class]) { background: rgb(var(--color-bg)); border-radius: 12px; padding: 4px; margin: 2px 0;}
/* Active — animated gradient pill */#nd-sidebar [data-active="true"] { color: rgb(var(--color-bg)) !important; border-radius: 9999px !important; background-image: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)), rgb(var(--color-aqua))) !important; background-size: 200% 100% !important; background-color: transparent !important; animation: sidebar-gradient 6s linear infinite; text-shadow: none;}
/* Active inside expandable sections — partial radius */#nd-sidebar div[data-state="open"]:not([class]) [data-active="true"] { border-radius: 8px !important;}
#nd-sidebar [data-active="true"]::before { display: none !important;}
/* Hover */#nd-sidebar a:not([data-active="true"]):hover,#nd-sidebar button:not([aria-label]):hover { color: rgb(var(--color-aqua)) !important; border-radius: 9999px !important; background-color: rgb(var(--color-bg)) !important; text-shadow: none;}
#nd-sidebar div[data-state="open"]:not([class]) a:not([data-active="true"]):hover,#nd-sidebar div[data-state="open"]:not([class]) button:not([aria-label]):hover { background-color: rgb(var(--color-surface)) !important; border-radius: 8px !important;}
/* --- Nav bar --- */
#nd-nav { height: auto;}
#nd-nav > div { background: rgb(var(--color-surface)) !important; border-color: rgb(var(--color-border));}
#nd-nav > div > * { max-width: none !important; margin: 0 !important;}
#nd-nav nav { height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem;}
/* Nav links (exclude logo) */#nd-nav nav ul a,#nd-nav nav > div a { color: rgb(var(--color-fg)); padding-left: 1rem; padding-right: 1rem; border-radius: 9999px; transition: color 0.2s, background-color 0.2s;}
#nd-nav nav ul a:hover,#nd-nav nav > div a:hover { color: rgb(var(--color-aqua)) !important; background-color: rgb(var(--color-bg)) !important; border-radius: 9999px;}
#nd-nav nav ul a[data-active="true"] { color: rgb(var(--color-aqua)) !important; background: rgb(var(--color-bg)) !important; border-radius: 9999px;}
#nd-nav [data-search-full] { color: rgb(var(--color-fg-muted)); border-color: rgb(var(--color-border)); background: rgb(var(--color-bg)) !important;}
#nd-nav [data-search-full]:hover { border-color: rgb(var(--color-aqua)); color: rgb(var(--color-aqua)); background: rgb(var(--color-bg)) !important;}
#nd-nav [data-search] { color: rgb(var(--color-fg-muted));}
#nd-nav [data-search]:hover { color: rgb(var(--color-aqua)) !important; background: rgb(var(--color-bg)) !important;}
/* --- Blog layout --- */
#nd-home-layout { background: transparent; max-width: 100%; overflow-x: clip;}
#nd-home-layout > * { min-width: 0; width: 100%;}
#nd-home-layout article > canvas { margin-bottom: -40vh;}
/* --- Blog card hover --- */
.group:hover { border-color: rgb(var(--color-aqua)) !important; box-shadow: 0 0 20px rgb(var(--color-aqua) / 0.15);}
.group:hover h2 { color: rgb(var(--color-aqua)) !important;}
/* Reduced motion */html[data-reduced-motion="true"] #nd-sidebar [data-active="true"],html[data-reduced-motion="true"] #nd-nav nav a[data-active="true"] { animation: none;}
@media (prefers-reduced-motion: reduce) { #nd-sidebar [data-active="true"], #nd-nav nav a[data-active="true"] { animation: none; }}
/* --- Prev/Next navigation cards --- */
a[rel="prev"],a[rel="next"] { border-color: rgb(var(--color-border)); transition: border-color 0.2s, box-shadow 0.2s;}
a[rel="prev"]:hover,a[rel="next"]:hover { border-color: rgb(var(--color-aqua) / 0.4); box-shadow: 0 0 16px rgb(var(--color-aqua) / 0.06);}
/* --- Callout glow --- Fumadocs callout containers set --callout-color inline. This adds a neon glow matching the callout accent. */
/* --- Code block background --- Fumadocs figure uses bg-fd-card (surface), override to use code-bg token. */
figure.shiki { background: rgb(var(--color-code-bg)) !important;}
[style*="--callout-color"] { box-shadow: 0 0 20px color-mix(in srgb, var(--callout-color) 5%, transparent), inset 0 0 16px color-mix(in srgb, var(--callout-color) 2%, transparent); border-color: color-mix(in srgb, var(--callout-color) 20%, transparent);}
/* --- Toast --- */
@keyframes toast-in-out { 0% { transform: translateY(100%); opacity: 0; } 12% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; }}
@media (prefers-reduced-motion: reduce) { @keyframes toast-in-out { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }}