@import url('./tokens.css');
/* Documentation page modular styles */
body { font-family: 'Lato', system-ui, sans-serif; background: radial-gradient(circle at 28% 22%,#101319 0%,#08090b 62%,#050506 100%); color: var(--text,#f5f5f7); margin:0; min-height:100vh; }
/* Layered procedural background tokens */
:root {
	--grid-line: #1c222b;
	--grid-accent: #2c3440;
	--loop-database: #4db3ff;
	--loop-loop: #9d6bff;
	--loop-segment: #ffcc3d;
	--loop-craft: #4dff88;
	--loop-extract: #ff5d9c;
}
#doc-dataflow-bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
header.site { position:fixed; inset:0 0 auto 0; display:flex; justify-content:flex-end; padding:1rem; z-index:30; background:linear-gradient(180deg,rgba(10,10,12,.85),rgba(10,10,12,0)); backdrop-filter:blur(6px); }
header.site a { color: var(--accent,#89a7ff); font-weight:600; margin-left:1rem; text-decoration:none; }
header.site a:hover { text-decoration:underline; }
.sidebar { position:fixed; width:320px; left:-320px; top:0; bottom:0; background:#14161a; box-shadow:0 0 0 1px #202225,0 4px 24px -8px #000; overflow-y:auto; transition:left .45s cubic-bezier(.4,.14,.3,1); z-index:25; }
.sidebar.open { left:0; }
.sidebar header { font-size:1.1rem; padding:1rem; letter-spacing:1px; font-weight:700; text-align:center; color:#d9e2ff; background:#14161a; position:sticky; top:0; }
.sidebar a { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.15rem; color:#d0d6e4; font-size:.85rem; text-transform:uppercase; letter-spacing:.8px; border-left:4px solid transparent; text-decoration:none; transition:.3s; }
.sidebar a:hover { background:#1c1f24; color:#fff; }
.sidebar a.active { background:linear-gradient(90deg,#2d63ff33,#733dff33); color:#fff; border-left-color:#6c89ff; box-shadow:inset 0 0 0 1px #2e3652; }
main { position:relative; z-index:10; padding-top:4.5rem; display:flex; flex-direction:column; align-items:center; }
.command-section { display:none; width:min(100%,880px); padding:1.85rem 2.1rem 2.1rem; margin:1.1rem 0; border-radius:1.15rem; background:#131417; position:relative; box-shadow:0 0 0 1px #20232a,0 4px 14px -6px #000; }
.command-section::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(120deg,#3453ff,#7d34ff,#1fa2ff); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.5s; }
.command-section.active { display:block; animation:fadeIn .5s; }
.command-section.active::before { opacity:.9; filter:drop-shadow(0 0 6px #406dff90) drop-shadow(0 0 14px #7d34ff55); }
.command-section h2 { margin:0 0 1rem; font-size:1.85rem; font-weight:700; letter-spacing:.5px; background:linear-gradient(90deg,#9ab4ff,#efeefe); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Dynamic docs detail header */
#command-detail h1 { margin:0 0 .75rem; font-size:1.85rem; font-weight:700; letter-spacing:.3px; background:linear-gradient(90deg,#9ab4ff,#efeefe); -webkit-background-clip:text; background-clip:text; color:transparent; }
#command-detail { background:#131417; width:min(100%,880px); padding:1.85rem 2.1rem 2.1rem; margin:1.1rem 0; border-radius:1.15rem; box-shadow:0 0 0 1px #20232a,0 4px 14px -6px #000; position:relative; }
#command-detail::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(120deg,#3453ff,#7d34ff,#1fa2ff); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35; pointer-events:none; }
/* Dynamic detail paragraphs (Download + descriptions) */
#command-detail p, #command-detail .desc {
	font-size: .8rem;
	opacity: .83;
	margin: .15rem 0 .9rem;
	line-height: 1.45;
	color: #d0d6e4;
	letter-spacing: .2px;
}
#command-detail h1 + p { margin-top:.25rem; }
#command-detail p strong { color:#e2e7ef; }
.command-section pre, /* static documentation blocks */
.syntax-block,        /* dynamic docs explicit syntax blocks */
#command-detail pre,  /* dynamic docs detail panel generic pre */
.result-panel pre {   /* dynamic docs result/visualizer output */
	font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
	background:linear-gradient(145deg,#0c0d10,#111318);
	padding:1rem 1.25rem;
	border-radius:.75rem;
	overflow-x:auto;
	font-size:.9rem;
	line-height:1.45;
	box-shadow: inset 0 0 0 1px #20242b, 0 0 0 1px #1a1d23;
	position:relative;
	margin:.9rem 0; /* ensure consistent vertical rhythm */
}
.command-section pre code { font:inherit; color:#d6dbe1; }
.command-section pre code .kw { color:#7aa2ff; }
.command-section pre code .cmd { color:#8bffb8; }
.command-section pre code .sym { color:#e38fff; }
.command-section pre code .val { color:#ffe28b; }
.copy-btn { background:#2d63ff; color:#fff; border:none; padding:.55rem 1rem; border-radius:.55rem; font-weight:600; letter-spacing:.5px; cursor:pointer; box-shadow:0 2px 8px -2px #000; transition:.3s; }
.copy-btn:hover { background:#204bbf; }
/* Inline mini syntax code */
code.mini-syntax { background:#1b1e23; padding:.15rem .45rem .2rem; border-radius:.45rem; font-size:.75rem; font-family:ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; color:#9fc3ff; box-shadow:0 0 0 1px #242a33; }
.nav-buttons { display:flex; gap:1rem; width:min(100%,880px); margin:1.25rem 0 2rem; }
.nav-card { flex:1; text-align:center; padding:.9rem 1rem; background:#16181c; border-radius:.85rem; cursor:pointer; font-weight:600; letter-spacing:.5px; box-shadow:0 0 0 1px #22262d; transition:.3s; }
.nav-card:hover { background:#1f242a; box-shadow:0 0 0 1px #3453ff; }
#particles-js, #stars-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.toggle-btn { position:fixed; top:1rem; left:1rem; z-index:40; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#14161a; border:1px solid #252a33; color:#a9b6d8; cursor:pointer; box-shadow:0 4px 18px -6px #000; }
.toggle-btn:hover { color:#fff; }
footer.site { text-align:center; font-size:.7rem; opacity:.65; margin:3rem 0 1.5rem; }
/* Uniform code markers */
.syntax-marker { color:rgb(47,130,255); font-weight:600; }
.comment-marker { color:green; font-weight:600; }
/* Error output styling */
pre.out.error { color:#ff5d5d !important; border:1px solid #572a2a; box-shadow:0 0 0 1px #352222, inset 0 0 0 1px #352222; }
pre.out.error::before { content:"Error"; position:absolute; top:4px; right:10px; font-size:.6rem; letter-spacing:1px; background:#5a1f1f; padding:.2rem .4rem; border-radius:.4rem; text-transform:uppercase; color:#ffb6b6; }
/* Sidebar groups & search */
.sidebar .search-wrap { position:sticky; top:0; background:#14161a; padding:.5rem .75rem .75rem; border-bottom:1px solid #1f2227; z-index:5; }
.sidebar .search-wrap input { width:100%; background:#101215; border:1px solid #252a31; border-radius:.55rem; padding:.55rem .65rem; color:#d5dae2; font-size:.8rem; outline:none; }
.sidebar .search-wrap input:focus { border-color:#406dff; box-shadow:0 0 0 1px #406dff55; }
.group { border-top:1px solid #1f2227; }
.group-toggle { width:100%; background:#14161a; border:none; display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; font-size:.75rem; letter-spacing:.9px; font-weight:600; color:#95a2bd; cursor:pointer; text-transform:uppercase; transition:.3s; }
.group-toggle:hover { background:#1b1e23; color:#fff; }
.group-toggle .chevron { transition:transform .35s; }
.group.collapsed .group-toggle .chevron { transform:rotate(-90deg); }
.group-body { display:flex; flex-direction:column; }
.group.collapsed .group-body { display:none; }
.breadcrumb-bar { position:fixed; top:0; left:0; right:0; height:38px; display:flex; align-items:center; gap:.75rem; padding:0 1rem 0 4.75rem; font-size:.7rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; background:linear-gradient(180deg,rgba(14,16,20,.85),rgba(14,16,20,0)); backdrop-filter:blur(6px); z-index:28; pointer-events:none; }
.breadcrumb-bar span { color:#6c89ff; pointer-events:auto; }
.breadcrumb-bar .divider { opacity:.35; }
@media (max-width:980px){ .sidebar{width:260px; left:-260px;} .sidebar.open{left:0;} main{padding-left:0;} }
@media (max-width:640px){ .command-section{padding:1.25rem 1.15rem;} .nav-buttons{flex-direction:column;} }
@keyframes fadeIn { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }