/* The MiXiN website: a 2009 product site (a centred 960px page, a glossy tab bar, a big hero
   with a screenshot, three columns and a news box) in MiXiN Messenger's own look. The colours,
   fonts and corners are the MiXiN theme's (../messenger/public/style.css), so the site and the
   messenger read as one thing; the moth's four colours are the signature. Light and dark follow
   the visitor's system. No scripts, no external resources, no images but the moth. */

:root {
	--font: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--display: "Trebuchet MS", ui-rounded, "Nunito", "Ubuntu", system-ui, sans-serif;

	/* The moth. */
	--moth-blue: #1f7ae0;
	--moth-orange: #f7a21b;
	--moth-green: #45b03b;
	--moth-red: #e8332a;
	--stripe: linear-gradient(90deg, var(--moth-blue) 0 25%, var(--moth-orange) 25% 50%, var(--moth-green) 50% 75%, var(--moth-red) 75%);

	--page-bg:
		radial-gradient(circle at 8% 100%, rgba(69, 176, 59, .16), transparent 34%),
		radial-gradient(circle at 96% 92%, rgba(247, 162, 27, .2), transparent 38%),
		linear-gradient(165deg, #b3d3f4, #dceafa 42%, #f5f8fc 75%, #fbf6ec);
	--text: #1d2b3c;
	--muted: #6b7a8c;
	--link: #1668c9;
	--win-bg: #fff;
	--win-border: #c6d6e8;
	--win-radius: 14px;
	--win-shadow: 0 8px 24px rgba(28, 62, 110, .13), 0 1px 2px rgba(28, 62, 110, .08);
	--pill: 999px;
	--title-bg: linear-gradient(#f6faff, #e9f2fc);
	--title-fg: #17406f;
	--head-bg: linear-gradient(#e6f0fb, #f6f9fd 75%, #fff);
	--hover-bg: #eaf3fd;
	--hover-border: #c5dcf5;
	--group-fg: #4f73a0;
	--button-bg: linear-gradient(#fff, #edf2f8);
	--button-border: #bccbdd;
	--button-fg: #1d2b3c;
	--primary-bg: linear-gradient(#3f95ee, #1f7ae0);
	--primary-border: #1867c0;
	--primary-fg: #fff;
	--st-online: var(--moth-green);
	--st-busy: var(--moth-red);
	--st-away: var(--moth-orange);
	--st-offline: #a9b3bf;
	--tile-bg: #fff;
	--foot-bg: #fbfcfe;
	--banner-bg: #fff6d6;
	--banner-border: #e8c35a;

	/* The site's own: the 2009 gloss (a hard highlight across the top half), the tab bar, the hero. */
	--gloss: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 50%);
	--nav-bg: linear-gradient(#4a9cf0, #1f7ae0 50%, #1867c0 50%, #1c72d4);
	--nav-fg: #fff;
	--nav-border: #155aa8;
	--nav-active-bg: linear-gradient(#fff, #eef5fd);
	--nav-active-fg: #17406f;
	--hero-bg:
		radial-gradient(ellipse at 85% 0%, rgba(255, 255, 255, .9), transparent 55%),
		linear-gradient(#d4e7fb, #f2f8fe 70%, #fff);
	--hero-fg: #17406f;
	--go-bg: linear-gradient(#6cc862, #45b03b 50%, #3a9c31 50%, #43ac39);
	--go-border: #2f8a27;
	--card-head-bg: linear-gradient(#f6faff, #e6f0fb);
	color-scheme: light dark;
}

/* Dark: MiXiN's night sky, with the same glows. */
@media (prefers-color-scheme: dark) {
	:root {
		--page-bg:
			radial-gradient(circle at 8% 100%, rgba(69, 176, 59, .14), transparent 34%),
			radial-gradient(circle at 96% 92%, rgba(247, 162, 27, .13), transparent 38%),
			linear-gradient(165deg, #0b1a2e, #10213a 42%, #121b29 75%, #1b1812);
		--text: #e2eaf4;
		--muted: #8fa0b5;
		--link: #6db1ff;
		--win-bg: #151f2c;
		--win-border: #2a3b52;
		--win-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
		--title-bg: linear-gradient(#1c2a3d, #172334);
		--title-fg: #cfe3fb;
		--head-bg: linear-gradient(#1a2b42, #172232 75%, #151f2c);
		--hover-bg: #1d3150;
		--hover-border: #2d4b75;
		--group-fg: #8db6e6;
		--button-bg: linear-gradient(#25344a, #1c2839);
		--button-border: #3a4e68;
		--button-fg: #e2eaf4;
		--primary-border: #4b9cf0;
		--st-offline: #6c7888;
		--tile-bg: #1f2d40;
		--foot-bg: #121b27;
		--banner-bg: #3a3112;
		--banner-border: #8a7322;
		--gloss: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, 0) 50%);
		--nav-bg: linear-gradient(#1f5fae, #184c8f 50%, #12407a 50%, #164889);
		--nav-border: #0d2f5a;
		--nav-active-bg: linear-gradient(#22344c, #151f2c);
		--nav-active-fg: #cfe3fb;
		--hero-bg:
			radial-gradient(ellipse at 85% 0%, rgba(77, 155, 255, .22), transparent 55%),
			linear-gradient(#16273e, #151f2c 70%);
		--hero-fg: #cfe3fb;
		--go-border: #5cc451;
		--card-head-bg: linear-gradient(#1c2a3d, #172334);
	}
}

* { box-sizing: border-box; }
html { background: #dceafa; }
@media (prefers-color-scheme: dark) { html { background: #10213a; } }
body { margin: 0; min-height: 100vh; background: var(--page-bg) fixed; color: var(--text); font: 13px/1.5 var(--font); }
a { color: var(--link); }
a:hover { text-decoration: none; }
h1, h2, h3 { font-family: var(--display); color: var(--title-fg); line-height: 1.2; }
h1 { font-size: 30px; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 26px 0 8px; }
h3 { font-size: 15px; margin: 0 0 4px; }
p { margin: 0 0 10px; }
code { font: 12px ui-monospace, Consolas, "DejaVu Sans Mono", monospace; background: var(--hover-bg); border: 1px solid var(--hover-border); border-radius: 4px; padding: 0 4px; }

/* --- The page: 960px, centred, like everything in 2009 ---------------------------------- */
.page { width: 960px; max-width: 100%; margin: 0 auto; padding: 0 16px 24px; }

/* The masthead: the moth and the wordmark on the sky, "sign in" at the right. */
.masthead { display: flex; align-items: center; gap: 12px; padding: 22px 6px 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--title-fg); }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(28, 62, 110, .25)); }
.wordmark { font: 700 30px/1 var(--display); letter-spacing: -.5px; }
/* The I's in the moth's colours, like the old MSN wordmark. */
.wordmark .i1 { color: var(--moth-blue); }
.wordmark .i2 { color: var(--moth-orange); }
.wordmark small { display: block; margin-top: 5px; font: italic 400 13px/1.2 var(--display); color: var(--muted); letter-spacing: .01em; }

/* Top right: who's signed in, as Messenger shows you (your picture in a frame, your name), or Sign in. */
.signed { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.signed .who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); text-align: right; }
.signed .who b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.3 var(--display); color: var(--title-fg); }
.signed .who small { display: block; color: var(--muted); font-size: 11.5px; }
.signed .who:hover b { text-decoration: underline; }
.signed .tile img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.tile.off { border-color: var(--st-offline); }
/* Small pills, not the page's big buttons: the corner is a status, not a call to action. */
.signed .btn { padding: 3px 12px; font-size: 12px; box-shadow: none; }
.signed .who + .btn { color: var(--muted); }

/* The tab bar: glossy blue, the page you're on a white tab joined to the content below. */
.nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 5px 6px 0; list-style: none; background: var(--gloss), var(--nav-bg); border: 1px solid var(--nav-border); border-bottom: none; border-radius: 10px 10px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.nav a { display: block; padding: 7px 16px 8px; color: var(--nav-fg); font: 700 13px/1 var(--display); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); border-radius: 7px 7px 0 0; }
.nav a:hover { background: rgba(255, 255, 255, .16); }
.nav a[aria-current] { background: var(--nav-active-bg); color: var(--nav-active-fg); text-shadow: none; }
.nav .right { margin-left: auto; }

/* The content sits in one big card under the tabs, the moth's stripe along its top. */
.content { background: var(--win-bg); border: 1px solid var(--win-border); border-top: none; border-radius: 0 0 var(--win-radius) var(--win-radius); box-shadow: var(--win-shadow); overflow: hidden; }
.stripe { height: 4px; background: var(--stripe); }
.inner { padding: 22px 26px 26px; }

/* --- Home: the hero ------------------------------------------------------------------- */
.hero { display: flex; align-items: center; gap: 26px; padding: 30px 30px 26px; background: var(--hero-bg); border-bottom: 1px solid var(--win-border); }
.hero-text { flex: 1; min-width: 0; color: var(--hero-fg); }
.hero h1 { font-size: 34px; }
.hero h1 em { font-style: normal; color: var(--moth-blue); }
.hero .lead { font-size: 15px; color: var(--text); max-width: 420px; }
.hero .small { color: var(--muted); font-size: 11.5px; margin-top: 8px; }
.badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: var(--pill); background: var(--gloss), linear-gradient(#ffb941, #f7a21b); border: 1px solid #d68608; color: #fff; font: 700 10px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* The big glossy buttons. */
.btn { display: inline-block; padding: 7px 18px; border: 1px solid var(--button-border); border-radius: var(--pill); background: var(--button-bg); color: var(--button-fg); font: 700 13px/1.3 var(--display); text-decoration: none; box-shadow: 0 1px 2px rgba(28, 62, 110, .12); }
.btn:hover { border-color: var(--moth-blue); }
.btn.big { padding: 11px 28px 12px; font-size: 17px; }
.btn.go { background: var(--gloss), var(--go-bg); border-color: var(--go-border); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); box-shadow: 0 2px 6px rgba(47, 138, 39, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.primary { background: var(--gloss), var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.btn.go:hover, .btn.primary:hover { filter: brightness(1.07); }
.btn small { display: block; font: 400 11px/1.2 var(--font); opacity: .9; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

/* The "screenshot": MiXiN Messenger's windows, drawn in HTML, with a 2009 reflection. */
.shot { position: relative; flex: none; width: 420px; height: 330px; }
.shot .window { position: absolute; display: flex; flex-direction: column; background: var(--win-bg); border: 1px solid var(--win-border); border-radius: 12px; box-shadow: var(--win-shadow); overflow: hidden; font-size: 11.5px; -webkit-box-reflect: below 4px linear-gradient(transparent 78%, rgba(255, 255, 255, .22)); }
.shot .list { left: 0; top: 0; width: 220px; height: 310px; }
.shot .chat { right: 0; top: 52px; width: 240px; height: 262px; }
.titlebar { display: flex; align-items: center; gap: 6px; padding: 7px 10px 6px; background: var(--stripe) top / 100% 3px no-repeat, var(--title-bg); color: var(--title-fg); font: 700 12px/1.2 var(--display); flex: none; }
.titlebar img { width: 16px; height: 16px; }
.me { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--head-bg); }
.me b { display: block; font: 700 13px/1.3 var(--display); color: var(--title-fg); }
.me i { color: var(--muted); }
.tile { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 3px solid var(--st-online); background: var(--tile-bg); padding: 2px; box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(28, 62, 110, .18); }
.tile span { display: block; width: 100%; height: 100%; border-radius: 6px; }
.tile.small { width: 30px; height: 30px; border-width: 2px; border-radius: 9px; padding: 1px; }
.tile.away { border-color: var(--st-away); }
/* Stand-in pictures: soft blobs of colour, no photos. */
.pic-a { background: radial-gradient(circle at 50% 38%, #ffd9a8 0 24%, transparent 25%), radial-gradient(circle at 50% 100%, #f7a21b 0 46%, transparent 47%), linear-gradient(#cfe6ff, #9cc8f5); }
.pic-b { background: radial-gradient(circle at 50% 38%, #f3c9a0 0 24%, transparent 25%), radial-gradient(circle at 50% 100%, #45b03b 0 46%, transparent 47%), linear-gradient(#fff2cf, #ffd88a); }
.group { padding: 6px 10px 2px; color: var(--group-fg); font: 700 9.5px/1.4 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.row { display: flex; align-items: center; gap: 6px; margin: 0 5px; padding: 2px 6px 2px 14px; border: 1px solid transparent; border-radius: 8px; white-space: nowrap; overflow: hidden; }
.row.hover { background: var(--hover-bg); border-color: var(--hover-border); }
.row .psm { color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.row .net { margin-left: auto; flex: none; font-size: 8.5px; color: var(--muted); border: 1px solid var(--win-border); border-radius: var(--pill); padding: 0 4px; }
.row.off { color: var(--muted); }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--st-online); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5); }
.dot.away { background: var(--st-away); }
.dot.busy { background: var(--st-busy); }
.dot.off { background: var(--st-offline); }
.chat .talk { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.says { color: var(--group-fg); font: 600 10.5px/1.3 var(--display); }
.chat .nudge { align-self: center; color: var(--muted); font-size: 10.5px; border-top: 1px solid var(--win-border); border-bottom: 1px solid var(--win-border); padding: 1px 10px; }
.chat .typing { color: var(--muted); font-style: italic; font-size: 10.5px; }
.chat .box { margin: 0 8px 8px; padding: 5px 8px; border: 1px solid var(--button-border); border-radius: 8px; color: var(--muted); }

/* --- Columns, cards and lists ------------------------------------------------------- */
.columns { display: flex; gap: 18px; }
.columns > * { flex: 1; min-width: 0; }
.feature { display: flex; gap: 12px; }
.feature p { color: var(--text); }
.icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gloss), var(--c, var(--moth-blue)); box-shadow: 0 2px 5px rgba(28, 62, 110, .2), inset 0 1px 0 rgba(255, 255, 255, .4); }
.icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c-orange { --c: var(--moth-orange); }
.c-green { --c: var(--moth-green); }
.c-red { --c: var(--moth-red); }

/* A box with a glossy header, for the sidebar and the network cards. */
.box { border: 1px solid var(--win-border); border-radius: 10px; overflow: hidden; background: var(--win-bg); }
.box > h3 { margin: 0; padding: 7px 12px; background: var(--card-head-bg); border-bottom: 1px solid var(--win-border); font-size: 13px; }
.box > .body { padding: 10px 12px; }
.box + .box { margin-top: 14px; }

.split { display: flex; gap: 22px; align-items: flex-start; }
.columns + .split { margin-top: 24px; }
.columns + .split h2:first-child { margin-top: 0; }
.split > .main { flex: 1; min-width: 0; }
.split > aside { flex: none; width: 260px; }

.news { margin: 0; padding: 0; list-style: none; }
.news li { padding: 6px 0; border-bottom: 1px dotted var(--win-border); }
.news li:last-child { border-bottom: none; }
.news time { display: block; color: var(--muted); font-size: 11px; }

ul.ticks { margin: 0 0 10px; padding: 0; list-style: none; }
ul.ticks li { position: relative; padding: 2px 0 2px 22px; }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px; border: solid var(--moth-green); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
ul.later li::before { border: none; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--st-offline); transform: none; }

.welcome { padding: 12px 16px; margin-bottom: 18px; background: var(--banner-bg); border: 1px solid var(--banner-border); border-radius: 10px; }

/* Network cards: the network's name, its MSNP, and where to make an account. */
.networks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.networks .box + .box { margin-top: 0; }
.networks .meta { color: var(--muted); font-size: 11.5px; }
.chip { display: inline-block; font-size: 10.5px; color: var(--group-fg); border: 1px solid var(--win-border); border-radius: var(--pill); padding: 0 7px; margin-right: 4px; background: var(--hover-bg); }

/* Themes, as small swatches of their windows. */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 4px; }
.theme { border: 1px solid var(--win-border); border-radius: 10px; overflow: hidden; font-size: 11.5px; }
.theme .sw { height: 54px; }
.theme p { margin: 0; padding: 5px 9px; }
.t-mixin .sw { background: var(--stripe) top / 100% 4px no-repeat, linear-gradient(165deg, #b3d3f4, #dceafa 50%, #fbf6ec); }
.t-alpha .sw { background: linear-gradient(#c9dcef, #e8f0f8 60%, #f4f8fc); }
.t-98 .sw { background: linear-gradient(90deg, #000080, #1084d0) top / 100% 16px no-repeat, #008080; }
.t-xp .sw { background: linear-gradient(#0997ff, #0053ee 40%, #0050ee) top / 100% 16px no-repeat, linear-gradient(#5a8cd8, #3c81f3 60%, #4c9a3a 60%); }
.t-7 .sw { background: linear-gradient(rgba(255, 255, 255, .6), rgba(160, 200, 230, .5)) top / 100% 16px no-repeat, linear-gradient(160deg, #1b5b8f, #3fa0d8 60%, #1b5b8f); }
.t-aero .sw { background: radial-gradient(circle at 30% 120%, #7be07a, transparent 55%), linear-gradient(#5bc6f5, #c7efff 70%); }

/* Steps, numbered in the moth's colours. */
ol.steps { margin: 6px 0 14px; padding: 0; list-style: none; counter-reset: step; }
ol.steps li { position: relative; padding: 4px 0 10px 40px; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--gloss), var(--moth-blue); color: #fff; font: 700 14px/28px var(--display); text-align: center; }
ol.steps li:nth-child(2)::before { background: var(--gloss), var(--moth-orange); }
ol.steps li:nth-child(3)::before { background: var(--gloss), var(--moth-green); }
ol.steps li:nth-child(4)::before { background: var(--gloss), var(--moth-red); }

/* --- Your account (id.): forms, tables, your card ------------------------------------- */
.inner.narrow { max-width: 480px; margin: 0 auto; }
button.btn { cursor: pointer; }
.btn.danger { background: var(--gloss), linear-gradient(#f0605a, var(--moth-red)); border-color: #b9221b; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.form { margin: 0 0 12px; }
.form .actions { margin-top: 12px; }
.field { display: block; margin: 0 0 12px; font-weight: 600; color: var(--title-fg); }
.field input:not([type="file"]) { display: block; width: 100%; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--button-border); border-radius: 8px; background: var(--win-bg); color: var(--text); font: 14px var(--font); }
.field input:focus { outline: 2px solid var(--moth-blue); outline-offset: -1px; border-color: var(--moth-blue); }
.field input[type="file"] { display: block; margin-top: 6px; max-width: 100%; font: 12px var(--font); color: var(--text); }
.field small { display: block; margin-top: 3px; font-weight: 400; color: var(--muted); }
.error { padding: 8px 12px; border: 1px solid #e8a19c; border-radius: 8px; background: #fdeceb; color: #8c1d17; }
.notice { padding: 8px 12px; border: 1px solid var(--banner-border); border-radius: 8px; background: var(--banner-bg); }
.hint, .switch { color: var(--muted); }
.me-card { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.me-card b { display: block; font: 700 22px/1.25 var(--display); color: var(--title-fg); }
.me-card i { display: block; color: var(--muted); }
.me-card small { display: block; color: var(--muted); }
.tile.big { width: 76px; height: 76px; border-radius: 16px; border-width: 4px; padding: 3px; }
.tile.big img, .tile.big span { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.picture { text-align: center; }
.picture .tile { display: inline-block; }
ul.links { margin: 0; padding: 0; list-style: none; }
ul.links li { padding: 3px 0; }
.table-wrap { overflow-x: auto; margin: 0 0 12px; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; padding: 6px 8px; color: var(--group-fg); font: 700 10.5px/1.4 var(--display); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--win-border); }
table.list td { padding: 6px 8px; border-bottom: 1px dotted var(--win-border); vertical-align: middle; }
table.list form { margin: 0; text-align: right; }
table.list .btn { padding: 3px 12px; font-size: 12px; }
@media (prefers-color-scheme: dark) {
	.error { border-color: #8a2d28; background: #3a1715; color: #ffb3ad; }
	.field input:not([type="file"]) { background: #101924; }
}

/* --- Footer ------------------------------------------------------------------------- */
.footer { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 6px 0; color: var(--muted); font-size: 11px; }
.footer a { color: var(--muted); }
.footer .legal { flex-basis: 100%; }

/* --- Narrow screens: one column, the screenshot under the words --------------------- */
@media (max-width: 820px) {
	.hero { flex-direction: column; align-items: stretch; padding: 22px 18px; }
	.shot { align-self: center; width: 100%; max-width: 420px; }
	.shot .chat { width: 54%; }
	.shot .list { width: 52%; }
	.columns, .split { flex-direction: column; }
	.split > aside { width: auto; }
	.wordmark small, .signed .who > span:first-child { display: none; }
	.wordmark { font-size: 26px; }
	.masthead { gap: 8px; padding-left: 0; padding-right: 0; }
	.signed { gap: 6px; flex: none; }
	.signed .tile { width: 32px; height: 32px; border-width: 2px; border-radius: 9px; padding: 1px; }
	.brand img { width: 38px; height: 38px; }
	.inner { padding: 18px 16px 20px; }
	.networks { grid-template-columns: 1fr; }
	.themes { grid-template-columns: repeat(2, 1fr); }
	.nav a { padding: 7px 11px 8px; }
}