.site-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	width: 100%;
	margin: 0 auto;
	align-items: center;
	gap: 5px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
}
.site-header .brand {
	grid-row: 1;
	text-decoration: none;
	white-space: normal;
	font-size: 16px;
	letter-spacing: -0.6px;
}
.site-header .brand-line {
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.site-header .workspace-name {
	font-size: 11px;
}
.workspace-menu { position: relative; flex: 0 0 auto; z-index: 200; align-self: center; }
.workspace-menu summary { display: grid; place-items: center; width: 32px; height: 32px; cursor: pointer; list-style: none; font-size: 15px; user-select: none; }
.workspace-menu summary::-webkit-details-marker { display: none; }
.workspace-menu summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.workspace-menu[open] summary { color: var(--bg); background: var(--fg); }
.workspace-menu nav { position: absolute; top: calc(100% + 8px); left: 0; width: min(248px, calc(100vw - 32px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 6px; background: var(--bg); border: 1px solid var(--line); box-shadow: 5px 5px 0 color-mix(in srgb, var(--fg), transparent 80%); display: grid; gap: 2px; }
.workspace-menu nav a { display: block; padding: 11px 12px; text-decoration: none; font-size: 12px; user-select: none; }
.workspace-menu nav a:hover, .workspace-menu nav a[aria-current='page'] { background: color-mix(in srgb, var(--fg), transparent 94%); }
.site-header .header-actions {
	grid-row: 1;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.rig-link {
	font-size: 11px;
	white-space: nowrap;
	text-underline-offset: 4px;
}
.header-actions button {
	min-height: 30px;
}
.theme-button {
	display: grid;
	place-items: center;
	min-width: 30px;
	padding: 0;
	width: 30px;
}

.site-header { box-sizing: border-box; position: relative; z-index: 100; font-family: Plex, "Courier New", monospace; color: var(--fg, #fff); background: var(--bg, #000); }
.site-header a { color: inherit; }
.site-header .brand { display: block; margin: 0; padding: 0; }
.workspace-menu nav .workspace-subpage { padding-left: 28px; font-size: 11px; }
@media (max-width: 760px) {
 .site-header { padding: 8px 10px; }
 .site-header .brand-line { gap: 8px; }
 .site-header .workspace-name { max-width: 110px; }
 .site-header .brand { font-size: 14px; }
 .site-header .header-actions { margin: 0; gap: 4px; }
}

:root[data-surface='rig'] { --bg: #000; --fg: #fff; --line: #fff; --active: #03e7f3; background: var(--bg); color: var(--fg); }
:root[data-surface='rig'] body { max-width: none; margin: 0; padding: 0; }
:root[data-surface='rig'] body > :not(.site-header):not(script) { max-width: 1440px; margin-inline: auto; padding-inline: 24px; }
:root[data-surface='rig'] .site-header { font-family: LabMono, Plex, 'Courier New', monospace; }
:root[data-surface='rig'] .preview { align-self: start; }
@media (min-width: 721px) {
 :root[data-surface='rig'] .preview { position: sticky; top: 16px; }
}
@media (max-width: 760px) {
 :root[data-surface='rig'] body > :not(.site-header):not(script) { padding-inline: 12px; }
}