:root {
	--bg: #f4f4f5;
	--bar: #ffffff;
	--fg: #18181b;
	--muted: #71717a;
	--line: #e4e4e7;
	--accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0a0a0a;
		--bar: #171717;
		--fg: #fafafa;
		--muted: #a1a1aa;
		--line: #262626;
		--accent: #60a5fa;
	}
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 44px;
	padding: 0 16px;
	background: var(--bar);
	border-bottom: 1px solid var(--line);
	flex: none;
}
.brand { font-weight: 600; white-space: nowrap; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
	height: 100%;
	padding: 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab:focus-visible, .newtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.newtab {
	margin-left: auto;
	padding: 4px 8px;
	color: var(--muted);
	text-decoration: none;
	font-size: 16px;
}
.newtab:hover { color: var(--fg); }

main { flex: 1; position: relative; min-height: 0; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.frame[hidden] { display: none; }

@media (max-width: 480px) {
	.brand { display: none; }
}