/* Synthezer Docs — Shared Styles */
* { text-transform: uppercase; }
html { font-family: 'Inter', system-ui, sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Utilities */
.hover-invert { transition: all 0.15s ease-out; }
.hover-invert:hover { background-color: #fff; color: #000; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
section[id] { scroll-margin-top: 5rem; }

/* Link reset — real specificity to override browser UA blue/purple defaults */
/* Safari uses :-webkit-any-link (color:-webkit-link) which must be explicitly overridden */
a, a:link, a:visited, a:hover, a:focus, a:active, a:-webkit-any-link { color: inherit; text-decoration: none; }

/* Sidebar */
.sidebar-link, .sidebar-link:link, .sidebar-link:visited, .sidebar-link:-webkit-any-link { color: #888; }
.sidebar-link:hover { color: #fff; }
.sidebar-link.active, .sidebar-link.active:link, .sidebar-link.active:visited { color: #fff; border-left-color: #fff; }
.sidebar-chevron .chevron { transition: transform 0.2s ease; }
.sidebar-submenu a, .sidebar-submenu a:link, .sidebar-submenu a:visited, .sidebar-submenu a:-webkit-any-link { color: #888 !important; }
.sidebar-submenu a:hover { color: #fff !important; }
.sidebar-submenu a.spy-active, .sidebar-submenu a.spy-active:link, .sidebar-submenu a.spy-active:visited { color: #fff !important; font-weight: 500; }

/* Docs content overrides */
.docs-content, .docs-content * { text-transform: none; }
.docs-content h1, .docs-content h2, .docs-content h3 { text-transform: uppercase; }
.docs-content a:not(.sidebar-link), .docs-content a:not(.sidebar-link):link, .docs-content a:not(.sidebar-link):visited { color: #888; text-decoration: underline; text-underline-offset: 3px; }
.docs-content a:not(.sidebar-link):hover { color: #fff; }

/* Code */
.docs-content code { background: #1a1a1a; padding: 2px 6px; font-size: 0.875rem; font-family: 'JetBrains Mono', monospace; }
.docs-content pre { background: #111; border: 1px solid rgba(255,255,255,0.1); padding: 1rem; overflow-x: auto; margin: 1rem 0; position: relative; }
.docs-content pre code { background: none; padding: 0; }
.docs-content .hljs { background: #111 !important; padding: 0 !important; }

/* Copy button */
.copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 0.75rem; background: #333; color: #ccc; border: 1px solid #555; cursor: pointer; text-transform: uppercase; font-family: 'Inter', sans-serif; transition: all 0.15s; }
.copy-btn:hover { background: #555; color: #fff; }
.copy-btn.copied { background: #22c55e; color: #000; border-color: #22c55e; }

/* Mobile sidebar */
.mobile-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 40; }
.mobile-sidebar-overlay.open { display: block; }
.mobile-sidebar { transform: translateX(-100%); transition: transform 0.2s ease-out; position: fixed; top: 4rem; left: 0; bottom: 0; width: 280px; z-index: 41; background: #000; border-right: 1px solid rgba(255,255,255,0.1); overflow-y: auto; }
.mobile-sidebar.open { transform: translateX(0); }