:root{
	--bg:#f7f7f8;
	--card:#ffffff;
	--text:#111111;
	--muted:#666666;
	--link:#0b5cff;
	--shadow: 0 6px 24px rgba(16,24,40,0.08);
}

@media (prefers-color-scheme: dark){
	:root{
		--bg:#0b0b0d;
		--card:#0f1720;
		--text:#e6eef8;
		--muted:#9aa4b2;
		--link:#7aa6ff;
		--shadow: 0 6px 24px rgba(0,0,0,0.6);
	}
}

[data-theme="dark"]{
	--bg:#0b0b0d;
	--card:#0f1720;
	--text:#e6eef8;
	--muted:#9aa4b2;
	--link:#7aa6ff;
	--shadow: 0 6px 24px rgba(0,0,0,0.6);
}

/* explicit light theme to override prefers-color-scheme when chosen */
[data-theme="light"]{
	--bg:#f7f7f8;
	--card:#ffffff;
	--text:#111111;
	--muted:#666666;
	--link:#0b5cff;
	--shadow: 0 6px 24px rgba(16,24,40,0.08);
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0;background:var(--bg);color:var(--text)}
main#app{max-width:760px;margin:40px auto;padding:20px;background:var(--card);border-radius:8px;box-shadow:var(--shadow);position:relative}
h1{font-size:1.4rem;margin:0 0 16px}
.content{line-height:1.7;color:var(--text)}
.content p{margin:0 0 1em}
.nav, #bottom-nav, #top-nav{margin:18px 0;display:flex;gap:12px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
ul{padding-left:1.2rem}

/* theme toggle */
.theme-toggle-container{position:absolute;top:12px;right:12px}
.theme-toggle-container{position:absolute;top:12px;right:12px}

.theme-segment{display:flex;background:transparent;border-radius:999px;overflow:hidden;border:1px solid rgba(0,0,0,0.06)}
.theme-btn{background:transparent;border:0;padding:6px 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--muted);font-size:13px}
.theme-btn svg{display:block;vertical-align:middle;stroke:currentColor}
.theme-btn:hover{color:var(--text);background:rgba(0,0,0,0.03)}
.theme-btn[aria-pressed="true"]{color:var(--text);background:rgba(0,0,0,0.06)}

/* dark adjustments for hover/active backgrounds */
:root:not([data-theme="dark"]) .theme-btn:hover{background:rgba(11,92,255,0.04)}
:root:not([data-theme="dark"]) .theme-btn[aria-pressed="true"]{background:rgba(11,92,255,0.08)}
[data-theme="dark"] .theme-segment{border-color:rgba(255,255,255,0.06)}
[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,0.03)}
[data-theme="dark"] .theme-btn[aria-pressed="true"]{background:rgba(255,255,255,0.06)}

/* smooth theme transition */
*{transition:color 180ms ease,background-color 180ms ease}