:root {
	--bg: #f5f4f1;
	--surface: #ffffff;
	--ink: #1d1d1f;
	--muted: #5b5b5f;
	--line: rgba(0,0,0,.12);
	--accent: #3a5bd9;
}
:root[data-theme="dark"] {
	--bg: #19191c;
	--surface: #242428;
	--ink: #f0efec;
	--muted: #a8a7a3;
	--line: rgba(255,255,255,.14);
	--accent: #7d97ff;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
h1 { font-size: 1.9em; margin: 0 0 6px; }
.intro { color: var(--muted); margin: 0 0 24px; }
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.card {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px 18px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card .label { font-weight: 600; font-size: 1.02em; }
.card .host { color: var(--muted); font-size: .82em; margin-top: 2px; }
.card .desc { color: var(--muted); font-size: .88em; margin-top: 8px; }
.card .note {
	display: inline-block;
	margin-top: 8px;
	font-size: .76em;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	padding: 2px 8px;
	border-radius: 999px;
}

.theme-toggle{position:fixed;top:10px;right:10px;z-index:9999;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:16px/1 system-ui,sans-serif;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.18);opacity:.9}
.theme-toggle:hover,.theme-toggle:focus-visible{opacity:1}
@media print{.theme-toggle{display:none}}