/* =====================================================================
   Bliss XP — Luna theme stylesheet
   Authentic Windows XP "Luna (Blue)" tribute, hand-tuned in CSS.
   ===================================================================== */

:root {
	/* Luna palette — sampled from the original XP theme */
	--xp-blue-1:        #245edb; /* taskbar dark */
	--xp-blue-2:        #3a6ee8; /* taskbar mid */
	--xp-blue-3:        #245edc;
	--xp-blue-deep:     #0831d9;
	--xp-blue-bottom:   #0a23b3; /* taskbar bottom edge */
	--xp-titlebar-1:    #0058e6;
	--xp-titlebar-2:    #3a93ff;
	--xp-titlebar-edge: #001ea0;

	--xp-green-1:       #3c873a; /* start dark */
	--xp-green-2:       #5eac56; /* start mid */
	--xp-green-3:       #82c878;
	--xp-green-4:       #3a8a36;
	--xp-green-glow:    #6ec466;
	--xp-green-edge:    #1d5519;

	--xp-orange-1:      #f1941e;
	--xp-orange-2:      #ee8e1a;

	--xp-tray-1:        #1290d4; /* tray light */
	--xp-tray-2:        #0c64c5; /* tray dark */

	--xp-cream:         #ece9d8; /* dialog face */
	--xp-cream-2:       #f1efe2;
	--xp-shadow-line:   #716f64;

	--xp-text:          #000;
	--xp-text-soft:     #1f1f1f;
	--xp-link:          #0033cc;
	--xp-link-visited:  #551a8b;

	--xp-window-radius: 8px 8px 0 0;

	/* Tahoma is XP's default UI font; Trebuchet MS for title bars. */
	--xp-ui:    "Tahoma", "Geneva", "Verdana", sans-serif;
	--xp-title: "Trebuchet MS", "Tahoma", sans-serif;
	--xp-mono:  "Lucida Console", "Courier New", monospace;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; }

body.xp-desktop {
	font-family: var(--xp-ui);
	font-size: 11px;
	color: var(--xp-text);
	min-height: 100vh;
	overflow: hidden; /* desktop never scrolls; windows do */
	background: #5b8cc4;
	-webkit-font-smoothing: antialiased;
	cursor: default;
}

a { color: var(--xp-link); }
a:visited { color: var(--xp-link-visited); }

img { max-width: 100%; height: auto; display: block; }

button { font-family: var(--xp-ui); }

.xp-skip-link {
	position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.xp-skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; background: #fff; padding: 4px 8px; z-index: 10000; }

/* =====================================================================
   Desktop layer (the iconic Bliss wallpaper)
   ===================================================================== */
.xp-desktop-layer {
	position: fixed;
	inset: 0 0 30px 0; /* 30px taskbar */
	background: url('../images/bliss.jpg') center/cover no-repeat #5b8cc4;
	overflow: hidden;
}

/* Dragged into the desktop, the windows live here */
.xp-windows-layer {
	position: absolute;
	inset: 0;
}

/* =====================================================================
   Desktop icons (left-column)
   ===================================================================== */
.xp-desktop-icons {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 88px;
	margin: 0; padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
	z-index: 1;
}
.xp-desktop-icon {
	text-align: center;
	cursor: default;
	user-select: none;
}
.xp-desktop-icon a {
	color: #fff;
	text-decoration: none;
	display: block;
}
.xp-deskicon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 4px;
	background: center/contain no-repeat;
	filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
	image-rendering: -webkit-optimize-contrast;
}
.xp-deskicon__label {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	line-height: 1.15;
	padding: 1px 3px;
	text-shadow: 1px 1px 0 #000, 1px 1px 1px rgba(0,0,0,0.6);
	max-width: 84px;
	word-wrap: break-word;
}
.xp-desktop-icon:focus-within .xp-deskicon__label,
.xp-desktop-icon:hover .xp-deskicon__label {
	background: rgba(11, 97, 211, 0.55);
	outline: 1px dotted rgba(255,255,255,0.7);
}

/* Recycle Bin pinned to bottom-right of the *desktop*, not the icon column.
   Using position: fixed escapes the 88px-wide .xp-desktop-icons container
   (which is itself position:absolute) so the bin lands in the real corner.
   30px = taskbar height, +14px breathing room. */
.xp-desktop-icon--bin {
	position: fixed;
	right: 16px;
	bottom: 44px;
	width: 88px;
	z-index: 2;
}
html.admin-bar .xp-desktop-icon--bin { bottom: 44px; } /* admin bar is at top, no effect on bottom */

/* SVG icons baked into CSS via data URIs (no external assets) */
.xp-deskicon--mycomputer { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='m' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23e8e8e8'/><stop offset='1' stop-color='%23a0a0a0'/></linearGradient><linearGradient id='s' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%2369aaff'/><stop offset='1' stop-color='%23083da9'/></linearGradient></defs><rect x='3' y='4' width='26' height='18' rx='1.5' fill='url(%23m)' stroke='%23404040'/><rect x='5' y='6' width='22' height='14' fill='url(%23s)'/><path d='M2 23h28l-2 4H4z' fill='%23cccccc' stroke='%23404040'/><rect x='12' y='28' width='8' height='1.5' fill='%23808080'/></svg>"); }
.xp-deskicon--docs { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='f' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffd97a'/><stop offset='1' stop-color='%23dd9a1a'/></linearGradient></defs><path d='M3 9 L3 25 Q3 27 5 27 L27 27 Q29 27 29 25 L29 12 Q29 10 27 10 L15 10 L13 8 L5 8 Q3 8 3 9z' fill='url(%23f)' stroke='%237a4f00'/><rect x='10' y='14' width='15' height='2' fill='%23fff' opacity='.5'/></svg>"); }
.xp-deskicon--ie { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='e' cx='.5' cy='.4' r='.6'><stop offset='0' stop-color='%23ffe34f'/><stop offset='.5' stop-color='%23f0a82c'/><stop offset='1' stop-color='%23a85b00'/></radialGradient></defs><circle cx='16' cy='16' r='13' fill='url(%23e)' stroke='%23744000'/><path d='M5 16 Q16 4 27 16 Q16 28 5 16z' fill='none' stroke='%23000' stroke-width='2'/><text x='16' y='22' font-family='Trebuchet MS' font-size='18' font-weight='bold' text-anchor='middle' fill='%231d4cd6'>e</text></svg>"); }
.xp-deskicon--bin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='b' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23dfe6ff'/><stop offset='1' stop-color='%237b95dc'/></linearGradient></defs><rect x='5' y='9' width='22' height='3' rx='1' fill='%23a8b5e0' stroke='%23344a85'/><path d='M7 12 L9 27 Q9 29 11 29 L21 29 Q23 29 23 27 L25 12z' fill='url(%23b)' stroke='%23344a85'/><path d='M12 14 L13 26 M16 14 L16 26 M20 14 L19 26' stroke='%23344a85' fill='none' stroke-width='1.2'/><circle cx='24' cy='10' r='5' fill='%2300a64a' stroke='%23004f23'/><path d='M21 10 a3 3 0 1 0 5-2' stroke='%23fff' stroke-width='1.5' fill='none'/><path d='M26 7 l1-2 -3 .5z' fill='%23fff'/></svg>"); }

/* =====================================================================
   Window — the XP Luna chrome
   ===================================================================== */
.xp-window {
	position: absolute;
	min-width: 280px;
	max-width: calc(100% - 24px);
	max-height: calc(100% - 18px);
	background: var(--xp-cream);
	border: 1px solid var(--xp-blue-deep);
	border-radius: var(--xp-window-radius);
	box-shadow:
		0 0 0 1px #003ec3 inset,
		0 18px 40px rgba(0,0,0,0.45),
		0 4px 10px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	padding: 0 3px 3px;
	overflow: hidden;
	transition: opacity .12s ease, transform .12s ease;
}
.xp-window.is-minimized {
	opacity: 0;
	transform: translateY(40px) scale(.94);
	pointer-events: none;
}
.xp-window.is-maximized {
	left: 0 !important; top: 0 !important;
	width: 100% !important; height: calc(100% - 0px) !important;
	border-radius: 0;
	max-width: 100%; max-height: 100%;
}

/* Title bar — the unmistakable blue gradient */
.xp-window__titlebar {
	flex: 0 0 auto;
	height: 28px;
	margin: 0 -3px 0; /* extends to window edge */
	padding: 0 5px 0 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-family: var(--xp-title);
	font-weight: bold;
	font-size: 13px;
	text-shadow: 1px 1px 0 rgba(0,0,30,0.7);
	border-radius: var(--xp-window-radius);
	background:
		linear-gradient(
			to bottom,
			#0058e6 0%,
			#3593ff 8%,
			#288eff 40%,
			#107eea 88%,
			#0058e6 94%,
			#0050d4 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.45),
		inset 0 -1px 0 rgba(0,0,0,0.25);
	cursor: grab;
	user-select: none;
}
.xp-window__titlebar:active { cursor: grabbing; }

.xp-window:not(.is-active) .xp-window__titlebar {
	background:
		linear-gradient(
			to bottom,
			#7a96df 0%,
			#9eb6ea 50%,
			#7691d2 95%,
			#5d7fc4 100%
		);
	color: #ddd;
	text-shadow: 1px 1px 0 rgba(0,0,40,0.4);
}

.xp-window__title {
	display: flex; align-items: center; gap: 6px;
	min-width: 0;
}
.xp-window__title-text {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Title bar buttons */
.xp-window__buttons { display: flex; gap: 1px; }
.xp-titlebtn {
	width: 22px; height: 22px;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 3px;
	color: #fff;
	font: bold 13px/14px var(--xp-ui);
	cursor: pointer;
	padding: 0;
	display: grid;
	place-items: center;
	background:
		linear-gradient(to bottom, #4495f6 0%, #1f6cdc 50%, #1156c2 51%, #1f6cdc 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3);
	transition: filter .08s;
}
.xp-titlebtn:hover { filter: brightness(1.18) saturate(1.1); }
.xp-titlebtn:active { filter: brightness(.85); }
.xp-titlebtn--close {
	background: linear-gradient(to bottom, #ee6f5b 0%, #c81f0a 50%, #a31507 51%, #d12a14 100%);
}
.xp-titlebtn--close:hover { filter: brightness(1.15); }
.xp-titlebtn--min span,
.xp-titlebtn--max span {
	display: block;
	width: 8px; height: 8px;
	border: 0;
}
.xp-titlebtn--min span { border-bottom: 2px solid #fff; margin-top: 4px; }
.xp-titlebtn--max span { border: 2px solid #fff; border-top-width: 3px; }
.xp-titlebtn--close span { font: bold 14px/14px var(--xp-ui); display: block; }

/* Menu bar */
.xp-window__menubar {
	flex: 0 0 auto;
	background: var(--xp-cream);
	border-bottom: 1px solid #aca899;
	font-size: 11px;
	color: #000;
	padding: 3px 6px;
	display: flex;
	gap: 14px;
}
.xp-window__menubar span {
	cursor: default;
	padding: 1px 4px;
}
.xp-window__menubar span:first-letter { text-decoration: underline; }
.xp-window__menubar span:hover { background: var(--xp-titlebar-1); color: #fff; }

/* Body */
.xp-window__body {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid #aca899;
	margin-top: 0;
	padding: 14px 16px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.55;
	color: #1a1a1a;
}
.xp-window__body p { margin: 0 0 1em; }
.xp-window__body h1, .xp-window__body h2, .xp-window__body h3 { font-family: var(--xp-title); }
.xp-window__body h1 { font-size: 22px; margin: 0 0 .4em; color: #003399; }
.xp-window__body h2 { font-size: 17px; margin: 1.2em 0 .4em; color: #003399; }
.xp-window__body h3 { font-size: 13px; margin: 1em 0 .35em; color: #003399; }
.xp-window__body code { font-family: var(--xp-mono); background: #f6f6f0; border: 1px solid #d8d6c4; padding: 1px 4px; border-radius: 2px; }
.xp-window__body blockquote { border-left: 3px solid var(--xp-titlebar-1); margin: 0 0 1em; padding: 4px 12px; background: #f6f8ff; }

/* Address bar */
.xp-window__address {
	background: var(--xp-cream);
	border-bottom: 1px solid #aca899;
	padding: 4px 8px 6px;
	display: flex; align-items: center; gap: 8px;
	font-size: 11px;
}
.xp-window__address > label { color: #444; }
.xp-address-bar {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid #7f9db9;
	height: 21px;
	display: flex; align-items: center;
	padding: 0 6px;
	gap: 6px;
	min-width: 0;
}
.xp-address-bar__url { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222; }
.xp-address-bar__go { color: #555; padding-left: 8px; border-left: 1px solid #ccc; }

/* Status bar */
.xp-window__statusbar {
	flex: 0 0 auto;
	background: var(--xp-cream);
	border-top: 1px solid #fff;
	box-shadow: 0 -1px 0 #aca899;
	font-size: 11px;
	padding: 2px 0 0;
	display: flex;
}
.xp-status-cell {
	border-right: 1px solid #aca899;
	border-left: 1px solid #fff;
	padding: 2px 8px;
}
.xp-status-cell--grow { flex: 1 1 auto; border-left: 0; }

/* =====================================================================
   In-window content styles (posts, welcome, etc.)
   ===================================================================== */
.xp-post { display: grid; gap: 10px; }
.xp-post__thumb img { border: 1px solid #aca899; padding: 2px; background: #fff; box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #d4d0c8 inset; }
.xp-post__title { font-family: var(--xp-title); font-size: 22px; line-height: 1.15; margin: 0; color: #003399; }
.xp-post__title a { color: inherit; text-decoration: none; }
.xp-post__title a:hover { text-decoration: underline; color: #0033ee; }
.xp-post__meta { font-size: 11px; color: #555; margin: 0; }
.xp-post__excerpt { font-size: 12px; }
.xp-post__more { display: flex; gap: 6px; margin: 4px 0 0; }

.xp-button {
	font-family: var(--xp-ui);
	font-size: 11px;
	color: #000;
	background: linear-gradient(to bottom, #f7f7ee 0%, #e2dfcd 50%, #cdc9b3 51%, #e6e2cd 100%);
	border: 1px solid #003c74;
	border-radius: 3px;
	padding: 3px 14px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.1);
	transition: filter .08s;
}
.xp-button:hover { filter: brightness(1.05); border-color: #1656c0; }
.xp-button:active { filter: brightness(.92); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.xp-button--secondary { background: linear-gradient(to bottom, #fefefa 0%, #ece9d8 100%); }

.xp-input {
	font-family: var(--xp-ui);
	font-size: 11px;
	background: #fff;
	border: 1px solid #7f9db9;
	padding: 2px 6px;
	height: 22px;
}
.xp-input:focus { outline: 1px solid var(--xp-titlebar-1); outline-offset: -2px; }

/* Welcome window (front page hero) */
.xp-welcome { color: #1a1a1a; }
.xp-welcome__hero {
	display: flex; align-items: center; gap: 18px;
	padding: 6px 4px 14px;
}
.xp-welcome__heroText { flex: 1; }
.xp-welcome__greet { margin: 0; font-size: 14px; color: #c47b00; font-style: italic; }
.xp-welcome__title {
	font-family: var(--xp-title);
	font-size: 36px;
	line-height: 1;
	margin: 4px 0 6px;
	color: #003399;
	text-shadow: 1px 1px 0 #fff;
}
.xp-welcome__sub { margin: 0; font-size: 13px; color: #444; }
.xp-welcome__flag {
	width: 70px; height: 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
	transform: perspective(120px) rotateY(-12deg);
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,.15));
}
.xp-welcome__flag span { display: block; border-radius: 4px; }
.xp-welcome__flag span:nth-child(1) { background: linear-gradient(135deg, #ff6868, #b80000); }
.xp-welcome__flag span:nth-child(2) { background: linear-gradient(135deg, #6dde6d, #1c8b1f); }
.xp-welcome__flag span:nth-child(3) { background: linear-gradient(135deg, #6da5ff, #0d3ec1); }
.xp-welcome__flag span:nth-child(4) { background: linear-gradient(135deg, #ffd768, #c98b00); }

.xp-welcome__rule {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, #aca899, transparent);
	margin: 0 0 14px;
}
.xp-welcome__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.xp-welcome__col h3 {
	margin: 0 0 6px;
	font-family: var(--xp-title);
	font-size: 13px;
	color: #003399;
	border-bottom: 1px dotted #aca899;
	padding-bottom: 3px;
}
.xp-link-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.xp-link-list li { padding: 1px 0; }
.xp-link-list a { text-decoration: none; color: var(--xp-link); }
.xp-link-list a:hover { text-decoration: underline; }
.xp-link-list em { color: #888; font-style: normal; }
.xp-bullet { color: #c47b00; font-weight: bold; margin-right: 4px; }
.xp-welcome__hint { margin-top: 14px; font-size: 11px; color: #888; font-style: italic; }

/* Front page eyebrow */
.xp-front-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	color: #c47b00;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-style: italic;
}
.xp-front-eyebrow strong { color: #003399; font-weight: bold; font-style: normal; }
.xp-post__thumb--full {
	margin: 0 0 14px;
}
.xp-post__thumb--full img {
	width: 100%;
	border: 1px solid #aca899;
	padding: 3px;
	background: #fff;
	box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #d4d0c8;
}

/* Single post body */
.xp-single__title { font-family: var(--xp-title); font-size: 28px; color: #003399; margin: 0 0 4px; }
.xp-single__meta { font-size: 11px; color: #666; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dotted #ccc; }
.xp-single__content { font-size: 13px; line-height: 1.6; }
.xp-single__content > * + * { margin-top: 1em; }
.xp-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 12px; border-top: 1px dotted #ccc; font-size: 12px; }

/* Search/archive results */
.xp-results { list-style: none; margin: 0; padding: 0; }
.xp-result { padding: 8px 0; border-bottom: 1px dotted #ccc; }
.xp-result__title { font-size: 14px; font-weight: bold; color: var(--xp-link); }
.xp-result__meta { font-size: 11px; color: #777; margin: 2px 0; }
.xp-result__excerpt { font-size: 12px; margin: 0; }

.xp-bsod {
	font-family: var(--xp-mono);
	background: #0a23b3;
	color: #fff;
	padding: 16px;
	font-size: 13px;
	line-height: 1.5;
}
.xp-bsod a { color: #ffd54a; }
.xp-bsod__hint { animation: xp-blink 1s steps(2,end) infinite; }
@keyframes xp-blink { 50% { opacity: 0; } }

/* =====================================================================
   Taskbar
   ===================================================================== */
.xp-taskbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 30px;
	z-index: 100;
	display: flex;
	align-items: stretch;
	font-size: 11px;
	color: #fff;
	background:
		linear-gradient(
			to bottom,
			#245edc 0%,
			#3a6ee8 9%,
			#245edb 18%,
			#1941a5 90%,
			#0a23b3 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.4),
		inset 0 -1px 0 rgba(0,0,0,0.4);
	user-select: none;
}

/* The taskbar's signature thin orange-yellow top edge highlight */
.xp-taskbar::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(to bottom, #f1bb52, #de8a1e 60%, transparent);
	opacity: .55;
	pointer-events: none;
}

/* ----- Start button (the iconic curved green pill) ----- */
.xp-startbtn {
	position: relative;
	height: 30px;
	min-width: 100px;
	border: 0;
	margin: 0;
	padding: 0 22px 2px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-family: var(--xp-title);
	font-style: italic;
	font-weight: bold;
	font-size: 18px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	cursor: pointer;
	background:
		radial-gradient(ellipse 80% 100% at 30% 30%, #95d18d 0%, #5cae54 35%, #3c8a3a 70%, #266a24 100%);
	border-top-right-radius: 24px;
	border-bottom-right-radius: 22px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.6),
		inset -1px -2px 6px rgba(0,40,0,0.4),
		inset 0 -2px 0 rgba(0,0,0,0.25),
		1px 0 0 rgba(0,0,0,0.4);
	transition: filter .08s;
}
.xp-startbtn:hover { filter: brightness(1.07) saturate(1.05); }
.xp-startbtn[aria-expanded="true"],
.xp-startbtn:active {
	background:
		radial-gradient(ellipse 80% 100% at 30% 30%, #65a85e 0%, #3d8538 50%, #1f5c1c 100%);
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.5),
		inset 0 -1px 0 rgba(255,255,255,0.15);
}
.xp-startbtn__label {
	letter-spacing: .3px;
	padding-right: 4px;
}
.xp-startbtn__flag {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1.5px;
	width: 18px; height: 16px;
	transform: perspective(40px) rotateY(-22deg);
	filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.xp-flag-cell {
	border-radius: 1.5px;
	box-shadow: inset 0 .5px 0 rgba(255,255,255,.5);
}
.xp-flag-cell--r { background: linear-gradient(135deg,#ff7a7a,#b80000); }
.xp-flag-cell--g { background: linear-gradient(135deg,#7be872,#1c8b1f); }
.xp-flag-cell--b { background: linear-gradient(135deg,#76aaff,#0d3ec1); }
.xp-flag-cell--y { background: linear-gradient(135deg,#ffe17a,#c98b00); }

/* ----- Quick Launch ----- */
.xp-quicklaunch {
	display: flex;
	align-items: center;
	padding: 0 6px;
	border-left: 1px solid rgba(0,0,0,0.35);
	border-right: 1px solid rgba(0,0,0,0.35);
	box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(255,255,255,0.2);
	gap: 2px;
}
.xp-ql-icon {
	width: 20px; height: 20px;
	display: block;
	background: center/16px 16px no-repeat;
	border-radius: 2px;
}
.xp-ql-icon:hover { background-color: rgba(255,255,255,0.18); outline: 1px solid rgba(255,255,255,0.35); }
.xp-ql-icon--showdesk { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='2' width='12' height='9' fill='%23bcd' stroke='%23244'/><rect x='3' y='12' width='10' height='1' fill='%23244'/><path d='M8 4 L11 7 L9 7 L9 10 L7 10 L7 7 L5 7z' fill='%23062b8a'/></svg>"); }
.xp-ql-icon--ie { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-family='Trebuchet MS' font-size='10' font-weight='bold' text-anchor='middle' fill='%23062b8a'>e</text></svg>"); }
.xp-ql-icon--media { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ff8a3a' stroke='%237a3a00'/><polygon points='6,4.5 12,8 6,11.5' fill='%23fff'/></svg>"); }

/* ----- Open windows (tasks) ----- */
.xp-tasks {
	flex: 1 1 auto;
	display: flex;
	gap: 3px;
	align-items: center;
	padding: 2px 4px;
	overflow: hidden;
	min-width: 0;
}
.xp-task {
	flex: 0 1 168px;
	min-width: 90px;
	height: 22px;
	background: linear-gradient(to bottom, #5797ee 0%, #2566c8 50%, #1a52b1 100%);
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25);
	overflow: hidden;
	font-family: var(--xp-ui);
}
.xp-task__title {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	flex: 1 1 auto;
}
.xp-task.is-active {
	background: linear-gradient(to bottom, #1c4ea1 0%, #0d3a8c 50%, #082c75 100%);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.xp-task:hover { filter: brightness(1.07); }

/* ----- System tray ----- */
.xp-tray {
	background:
		linear-gradient(
			to bottom,
			#1290d4 0%,
			#0c64c5 30%,
			#0a4fb2 100%
		);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px 0 14px;
	color: #fff;
	font-size: 11px;
	height: 30px;
	position: relative;
	box-shadow: inset 1px 0 0 rgba(0,0,0,0.35), inset 2px 0 0 rgba(255,255,255,0.25);
}
.xp-tray__notch {
	position: absolute;
	left: 0; top: 50%;
	width: 8px; height: 12px;
	transform: translateY(-50%);
	background:
		linear-gradient(to right, transparent 50%, rgba(0,0,0,0.2) 50%) 0 0/2px 2px,
		linear-gradient(to bottom, transparent 50%, rgba(255,255,255,0.4) 50%) 0 0/2px 2px;
	opacity: .8;
}
.xp-tray-icon {
	width: 16px; height: 16px;
	display: inline-block;
	background: center/contain no-repeat;
	filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4));
}
.xp-tray-icon--shield { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 L14 3 L14 8 Q14 13 8 15 Q2 13 2 8 L2 3z' fill='%23d62a2a' stroke='%237a0000'/><path d='M8 1 L14 3 L14 8 Q14 13 8 15z' fill='%23ffd400' stroke='%237a5600'/><circle cx='8' cy='8' r='2.5' fill='%23fff' stroke='%23000' stroke-width='.6'/><rect x='7.4' y='6.5' width='1.2' height='3' fill='%23000'/></svg>"); }
.xp-tray-icon--volume { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6 L6 6 L9 3 L9 13 L6 10 L3 10z' fill='%23eaeaea' stroke='%23000'/><path d='M11 5 Q13 8 11 11 M12.5 3.5 Q15.5 8 12.5 12.5' stroke='%2300d4ff' fill='none' stroke-width='1.2'/></svg>"); }
.xp-tray-icon--network { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='6' width='5' height='4' fill='%23dadada' stroke='%23000'/><rect x='9' y='6' width='5' height='4' fill='%23dadada' stroke='%23000'/><path d='M7 8 L9 8' stroke='%23000'/><circle cx='4.5' cy='8' r='.7' fill='%2300dd00'/><circle cx='11.5' cy='8' r='.7' fill='%2300dd00'/></svg>"); }
.xp-tray-icon--messenger { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%2363c130' stroke='%231f5e00'/><path d='M5 6.5 Q8 4 11 6.5 L11 9 Q8 11.5 5 9z' fill='%23fff'/><circle cx='6.5' cy='8' r='.8' fill='%231f5e00'/><circle cx='9.5' cy='8' r='.8' fill='%231f5e00'/></svg>"); }

.xp-clock {
	min-width: 64px;
	text-align: center;
	font-size: 11px;
	color: #fff;
	margin-left: 4px;
	cursor: default;
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Start Menu
   ===================================================================== */
.xp-startmenu {
	position: fixed;
	left: 0;
	bottom: 30px;
	width: 380px;
	max-width: 96vw;
	z-index: 200;
	background: var(--xp-cream);
	border: 1px solid #003fa1;
	border-bottom: 0;
	border-top-right-radius: 8px;
	box-shadow: 0 0 16px rgba(0,0,0,.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-size: 12px;
	color: #000;
	transform-origin: bottom left;
	animation: xp-sm-in .14s ease-out;
}
.xp-startmenu[hidden] { display: none; }
@keyframes xp-sm-in {
	from { transform: scaleY(.5) translateY(40%); opacity: .2; }
	to   { transform: scaleY(1) translateY(0); opacity: 1; }
}

/* Header bar */
.xp-startmenu__header {
	height: 56px;
	background:
		linear-gradient(to bottom, #2868de 0%, #1e54c4 60%, #173f9c 100%);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	border-top-right-radius: 8px;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.xp-startmenu__avatar {
	width: 42px; height: 42px;
	border-radius: 4px;
	background:
		radial-gradient(circle at 50% 35%, #fff 0%, #ffd9a8 30%, #f0a060 60%, transparent 65%),
		linear-gradient(135deg,#9ec0ff,#3b6dcf);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #003fa1, 1px 1px 0 1px rgba(0,0,0,.3);
}
.xp-startmenu__user {
	font-family: var(--xp-title);
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}

/* Two columns */
.xp-startmenu__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background:
		linear-gradient(to right, #fff 50%, #d3e5fa 50%);
}
.xp-startmenu__col {
	padding: 8px 6px;
	min-height: 240px;
}
.xp-startmenu__col--left { background: #fff; }
.xp-startmenu__col--right { background: #d3e5fa; }

.xp-smitem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	color: #000;
	text-decoration: none;
	font-size: 12px;
}
.xp-smitem:hover {
	background: linear-gradient(to bottom, #2664de, #0a3fa9);
	color: #fff;
}
.xp-smitem .xp-icon { flex: 0 0 24px; height: 24px; width: 24px; }
.xp-smitem__label { display: flex; flex-direction: column; min-width: 0; }
.xp-smitem__label small { color: #666; font-size: 10px; }
.xp-smitem:hover .xp-smitem__label small { color: #cfd9ee; }

.xp-smdiv {
	border: 0;
	height: 1px;
	margin: 6px 8px;
	background: linear-gradient(to right, transparent, #c8c4b6, transparent);
}

.xp-smmenu { list-style: none; margin: 0; padding: 0; }
.xp-smmenu li { margin: 0; position: relative; }
.xp-smli > .xp-smitem { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 3px; color: #000; text-decoration: none; font-size: 12px; position: relative; }
.xp-smli > .xp-smitem:hover,
.xp-smli:hover > .xp-smitem,
.xp-smli:focus-within > .xp-smitem {
	background: linear-gradient(to bottom, #2664de, #0a3fa9);
	color: #fff;
}
.xp-smli__arrow {
	margin-left: auto;
	font-size: 10px;
	color: #555;
	padding-left: 8px;
}
.xp-smli:hover > .xp-smitem .xp-smli__arrow,
.xp-smli:focus-within > .xp-smitem .xp-smli__arrow { color: #fff; }

/* Submenu flyout — opens to the right of the parent item */
.xp-submenu {
	list-style: none;
	margin: 0; padding: 4px;
	position: absolute;
	left: 100%;
	top: -4px;
	min-width: 200px;
	background: var(--xp-cream);
	border: 1px solid #003fa1;
	box-shadow: 4px 4px 14px rgba(0,0,0,.35);
	z-index: 5;
	display: none;
}
.xp-smli--has-children:hover > .xp-submenu,
.xp-smli--has-children:focus-within > .xp-submenu { display: block; }
.xp-submenu .xp-smli > .xp-smitem { padding: 4px 8px; }

.xp-smhint {
	font-size: 11px;
	color: #666;
	padding: 8px 10px 4px;
	margin: 0;
	font-style: italic;
}
.xp-smhint a { color: var(--xp-link); }

/* Footer of start menu */
.xp-startmenu__footer {
	background:
		linear-gradient(to bottom, #2868de 0%, #1c50bd 60%, #163b95 100%);
	color: #fff;
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	padding: 6px 12px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.xp-smfooter-btn {
	background: transparent;
	border: 0;
	color: #fff;
	font: 12px var(--xp-ui);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 3px;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	text-decoration: none;
}
.xp-smfooter-btn:hover { background: rgba(255,255,255,.18); }
.xp-smfooter-btn .xp-icon { width: 22px; height: 22px; }

/* =====================================================================
   Inline icons (within menus / titlebars / tasks)
   ===================================================================== */
.xp-icon {
	display: inline-block;
	width: 16px; height: 16px;
	background: center/contain no-repeat;
	flex-shrink: 0;
	image-rendering: -webkit-optimize-contrast;
}
.xp-icon--ie         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-family='Trebuchet MS' font-size='10' font-weight='bold' text-anchor='middle' fill='%23062b8a'>e</text></svg>"); }
.xp-icon--document   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1 L10 1 L13 4 L13 15 L3 15z' fill='%23fff' stroke='%23000'/><path d='M10 1 L10 4 L13 4z' fill='%23ddd' stroke='%23000'/><path d='M5 7h6M5 9h6M5 11h4' stroke='%23888'/></svg>"); }
.xp-icon--mycomputer { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='2' width='14' height='9' fill='%23d8d8d8' stroke='%23404040'/><rect x='2' y='3' width='12' height='7' fill='%231e6cd6'/><path d='M0 12 L16 12 L15 14 L1 14z' fill='%23bbb' stroke='%23404040'/></svg>"); }
.xp-icon--docs       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 Q1 14 2 14 L14 14 Q15 14 15 13 L15 6 Q15 5 14 5 L8 5 L7 4 L2 4 Q1 4 1 4z' fill='%23ffcb53' stroke='%237a4f00'/></svg>"); }
.xp-icon--search     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4' fill='none' stroke='%23000' stroke-width='1.5'/><line x1='10' y1='10' x2='14' y2='14' stroke='%23000' stroke-width='2'/></svg>"); }
.xp-icon--cp         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='%23eee' stroke='%23000'/><circle cx='8' cy='8' r='2' fill='%231e6cd6' stroke='%23000'/><path d='M8 2 L8 4 M8 12 L8 14 M2 8 L4 8 M12 8 L14 8' stroke='%23000' stroke-width='1.2'/></svg>"); }
.xp-icon--help       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-size='11' font-weight='bold' text-anchor='middle' fill='%23062b8a' font-family='Trebuchet MS'>?</text></svg>"); }
.xp-icon--logoff     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='9' height='10' fill='%23bcd' stroke='%23244'/><path d='M11 8 L15 8 M13 6 L15 8 L13 10' stroke='%23000' stroke-width='1.4' fill='none'/></svg>"); }
.xp-icon--shutdown   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='9' r='5.5' fill='none' stroke='%23c10000' stroke-width='1.6'/><path d='M8 2 L8 8' stroke='%23c10000' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.xp-icon--warn       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='8,1 15,14 1,14' fill='%23ffd23a' stroke='%23744000'/><rect x='7.3' y='5' width='1.4' height='5' fill='%23000'/><rect x='7.3' y='11' width='1.4' height='1.4' fill='%23000'/></svg>"); }
/* Netscape 6 title-bar icon — dark indigo square with white "N" wedge */
.xp-icon--netscape   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='1' width='14' height='14' fill='%231b154b' stroke='%23000'/><path d='M3 13 L3 3 L5.5 3 L10 10 L10 3 L13 3 L13 13 L10.5 13 L6 6 L6 13 z' fill='%23ffffff'/></svg>"); }

/* =====================================================================
   Comments
   ===================================================================== */
.xp-comments { margin-top: 28px; padding-top: 14px; border-top: 1px dotted #ccc; }
.xp-comments__title { font-family: var(--xp-title); font-size: 16px; color: #003399; margin: 0 0 10px; }
.xp-commentlist { list-style: none; padding: 0; margin: 0 0 16px; }
.xp-commentlist .comment, .xp-commentlist li { padding: 8px 10px; background: #f6f8ff; border: 1px solid #d6dcec; margin-bottom: 8px; border-radius: 3px; }
.xp-commentlist .children { list-style: none; padding-left: 18px; margin-top: 8px; }
.xp-commentform { display: grid; gap: 8px; }
.xp-commentform input[type="text"], .xp-commentform input[type="email"], .xp-commentform input[type="url"], .xp-commentform textarea { font-family: var(--xp-ui); font-size: 12px; padding: 4px 6px; border: 1px solid #7f9db9; background: #fff; }
.xp-commentform textarea { min-height: 90px; }

/* =====================================================================
   Pagination
   ===================================================================== */
.xp-pagination, .nav-links {
	display: flex; gap: 4px; flex-wrap: wrap; margin-top: 14px;
}
.xp-pagination a, .xp-pagination span,
.nav-links a, .nav-links span {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid #003c74;
	background: linear-gradient(to bottom, #f7f7ee, #cdc9b3);
	color: #000;
	text-decoration: none;
	font-size: 11px;
	border-radius: 3px;
}
.xp-pagination .current,
.nav-links .current {
	background: linear-gradient(to bottom, #5797ee, #1c4ea1);
	color: #fff;
}

/* =====================================================================
   Responsive — phones get a stacked, scrolling layout while
   keeping the taskbar pinned and styled.
   ===================================================================== */
@media (max-width: 820px) {
	body.xp-desktop { overflow: auto; }
	.xp-desktop-layer {
		position: relative;
		inset: auto;
		min-height: calc(100vh - 30px);
	}
	.xp-windows-layer {
		position: relative;
		display: grid;
		gap: 12px;
		padding: 12px 10px 50px;
	}
	.xp-window {
		position: relative !important;
		left: auto !important; top: auto !important;
		width: 100% !important;
		max-width: 100%;
		max-height: none;
	}
	.xp-window__body { max-height: 70vh; }
	.xp-desktop-icons {
		display: flex;
		position: relative;
		top: auto; left: auto;
		flex-wrap: wrap;
		gap: 12px;
		width: 100%;
		justify-content: flex-start;
		padding: 10px;
	}
	.xp-desktop-icon--bin {
		position: relative; right: auto; bottom: auto;
	}
	.xp-welcome__cols { grid-template-columns: 1fr; }
	.xp-welcome__title { font-size: 26px; }
	.xp-startmenu { width: 92vw; }
	.xp-quicklaunch { display: none; }
	.xp-startbtn { font-size: 16px; min-width: 80px; padding-right: 18px; }
	.xp-task { flex-basis: 110px; }
}

@media (max-width: 480px) {
	.xp-tray-icon--messenger,
	.xp-tray-icon--network { display: none; }
}

/* =====================================================================
   Tiny UX details
   ===================================================================== */
::selection { background: #316ac5; color: #fff; }

/* The custom "arrow" cursor that XP shipped with — uses a tiny SVG */
body.xp-desktop {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'><path d='M2 2 L2 22 L7 18 L10 25 L13 24 L10 17 L17 17z' fill='white' stroke='black' stroke-width='1.3' stroke-linejoin='miter'/></svg>") 1 1, default;
}
.xp-window__titlebar { cursor: grab; }
.xp-button, .xp-titlebtn, .xp-startbtn, .xp-task, .xp-smitem, .xp-smfooter-btn, .xp-deskicon, a {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><path d='M5 2 v9 l3 -1 v3 h2 v-3 l3 1 v-9z M5 14 h11 v3 h-11z' fill='white' stroke='black' stroke-width='1.2'/></svg>") 8 2, pointer;
}

/* =====================================================================
   Netscape Communicator 4.7 skin
   When a window has the `xp-window--netscape` modifier, the inside of the
   window is dressed up like Netscape Communicator 4.7 (circa late 2000):
   beige menubar, embossed icon+label toolbar, the yellow Bookmarks tab + a
   "Location:" field, a personal toolbar, and a status bar with the spinning
   comet "N" on the right.
   ===================================================================== */
/* Netscape 6 chrome — pale cream/silver, glassy orb nav buttons.
   Period-correct as of late 2001. */
.xp-window--netscape .xp-window__body {
	padding: 0;
	background: #ece9d8;            /* XP cream — Netscape 6 uses the host theme bg */
	font-family: "Times New Roman", "Times", serif;
	color: #000;
	/* Override the default body's `overflow: auto` so the chrome doesn't
	   scroll along with the page. The .ns-viewport inside becomes the sole
	   scroll container, just like a real browser frame. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow flex child to shrink */
}
.xp-window--netscape .xp-window__statusbar { display: none; }
.xp-window--netscape .xp-window__menubar { display: none; } /* using our own */

.ns-chrome {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0; /* critical: lets the inner .ns-viewport actually scroll */
	background: #ece9d8;
}

/* ----- Menubar ----- */
.ns-menubar {
	display: flex;
	gap: 1px;
	padding: 1px 4px 2px;
	background: linear-gradient(to bottom, #faf9f3 0%, #ede9d8 100%);
	border-bottom: 1px solid #aca899;
	font: 11px "Tahoma", "MS Sans Serif", sans-serif;
	flex-shrink: 0; /* stays anchored when viewport scrolls */
}
.ns-menubar__item {
	padding: 3px 8px;
	color: #000;
	cursor: default;
	user-select: none;
}
.ns-menubar__item:hover {
	background: #316ac5;
	color: #fff;
}
.ns-menubar__item u { text-decoration: underline; }
.ns-menubar__item--right { margin-left: auto; }

/* ----- Main toolbar: glassy orb nav buttons + location field + Search button ----- */
.ns-toolbar {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 4px 6px 4px 8px;
	background:
		linear-gradient(to bottom, #f5f3e7 0%, #ddd9c5 100%);
	border-bottom: 1px solid #aca899;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
	position: relative;
	min-height: 44px;
	flex-shrink: 0; /* stays anchored when viewport scrolls */
}

/* The glassy 32×32 round-rect nav buttons */
.ns-tbtn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #6e7a8c;
	width: 36px;
	height: 32px;
	border-radius: 16px / 14px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 18%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(to bottom, #e9ecf3 0%, #c3cbd7 45%, #9aa6b8 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.7),
		inset 0 -2px 3px rgba(0,0,0,0.18),
		1px 1px 1px rgba(0,0,0,0.25);
	display: inline-grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	color: #000;
	text-decoration: none;
	transition: filter .08s;
}
.ns-tbtn:hover {
	filter: brightness(1.08) saturate(1.05);
}
.ns-tbtn:active {
	background:
		radial-gradient(ellipse 80% 60% at 50% 80%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(to bottom, #9aa6b8 0%, #c3cbd7 55%, #e9ecf3 100%);
	box-shadow:
		inset 0 2px 3px rgba(0,0,0,0.3),
		inset 0 -1px 0 rgba(255,255,255,0.4);
}
.ns-tbtn[disabled],
.ns-tbtn.is-disabled { opacity: .45; cursor: default; }
.ns-tbtn__lbl { display: none; } /* Netscape 6 nav buttons are icon-only */
.ns-tbtn__ico {
	width: 18px;
	height: 18px;
	display: block;
	background: center/contain no-repeat;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}

/* Glyph icons inside orbs — dark teal/green/red, drop-shadowed for embossment */
.ns-tbtn__ico--back     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><polygon points='2,9 10,2 10,6 16,6 16,12 10,12 10,16' fill='%23254d2c' stroke='%23000' stroke-width='.8' stroke-linejoin='miter'/></svg>"); }
.ns-tbtn__ico--fwd      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><polygon points='16,9 8,2 8,6 2,6 2,12 8,12 8,16' fill='%23254d2c' stroke='%23000' stroke-width='.8' stroke-linejoin='miter'/></svg>"); }
.ns-tbtn__ico--reload   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M3 9 A6 6 0 1 1 9 15' fill='none' stroke='%23254d2c' stroke-width='2.2' stroke-linecap='butt'/><polygon points='1,4 7,4 4,10' fill='%23254d2c'/></svg>"); }
.ns-tbtn__ico--stop     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4 4 L14 14 M14 4 L4 14' stroke='%23a31515' stroke-width='3' stroke-linecap='round'/></svg>"); }

/* The bookmark/globe icon nested in the URL field's left */
.ns-locbar {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 4px;
	height: 24px;
	background: #fff;
	border: 1px solid #8c8c8c;
	border-radius: 2px;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,.15);
	padding: 0 0 0 2px;
}
.ns-locbar__tab {
	display: inline-grid;
	place-items: center;
	width: 18px; height: 20px;
	flex-shrink: 0;
	cursor: pointer;
	user-select: none;
}
.ns-bookmark-icon {
	width: 16px; height: 16px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23c9d8ee' stroke='%23254d77' stroke-width='1'/><ellipse cx='8' cy='8' rx='2.5' ry='6.5' fill='none' stroke='%23254d77' stroke-width='.8'/><path d='M2 8 H14 M3 5 H13 M3 11 H13' stroke='%23254d77' stroke-width='.6' fill='none'/></svg>") center/contain no-repeat;
}
.ns-locbar__label { display: none; } /* Netscape 6 dropped the "Location:" label */
.ns-locbar__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 22px;
	padding: 2px 22px 2px 6px;
	background: transparent;
	border: 0;
	font: 12px "Tahoma", "MS Sans Serif", sans-serif;
	color: #000;
}
.ns-locbar__field:focus { outline: 0; }
.ns-locbar__dropdown {
	width: 16px; height: 22px;
	margin-left: -22px;
	margin-right: 2px;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	color: #555;
	font-size: 9px;
	border-left: 1px solid #d4d0c8;
	user-select: none;
	flex-shrink: 0;
}
.ns-locbar__dropdown::before { content: "▼"; }

/* The Search button — pill with magnifier + "Search" + dropdown */
.ns-searchbtn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 6px 0 8px;
	border: 1px solid #6e7a8c;
	border-radius: 12px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 18%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(to bottom, #e9ecf3 0%, #c3cbd7 45%, #9aa6b8 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.7),
		inset 0 -2px 3px rgba(0,0,0,0.18),
		1px 1px 1px rgba(0,0,0,0.25);
	font: 11px "Tahoma", "MS Sans Serif", sans-serif;
	color: #000;
	cursor: pointer;
	text-decoration: none;
}
.ns-searchbtn:hover { filter: brightness(1.08); }
.ns-searchbtn__ico {
	width: 14px; height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='6' cy='6' r='4' fill='none' stroke='%23254d2c' stroke-width='1.6'/><line x1='9' y1='9' x2='12.5' y2='12.5' stroke='%23254d2c' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.ns-searchbtn__caret {
	margin-left: 4px;
	font-size: 8px;
	color: #333;
	border-left: 1px solid rgba(0,0,0,.25);
	padding-left: 4px;
}

/* Right side of toolbar: tiny print icon + the N badge */
.ns-toolbar__right {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	flex-shrink: 0;
}
.ns-toolbar__print {
	width: 28px; height: 22px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'><rect x='8' y='2' width='12' height='6' fill='%23eee' stroke='%23404040'/><rect x='3' y='8' width='22' height='8' fill='%23c8c8c8' stroke='%23404040'/><rect x='8' y='13' width='12' height='6' fill='%23fff' stroke='%23404040'/><circle cx='22' cy='11' r='1' fill='%2300aa00'/><circle cx='19' cy='11' r='1' fill='%23999'/></svg>") center/contain no-repeat;
	cursor: pointer;
}
.ns-toolbar__logo {
	position: relative;
	margin-left: 4px;
	width: 26px; height: 26px;
	background: linear-gradient(to bottom, #4f4382 0%, #1b154b 100%);
	border: 1px solid #0d0828;
	border-radius: 2px;
	display: inline-grid;
	place-items: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	flex-shrink: 0;
}
.ns-logo-n {
	color: #fff;
	font: bold 14px "Trebuchet MS", "Tahoma", sans-serif;
	letter-spacing: -.5px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
.ns-logo-orbit { display: none; } /* No comet in Netscape 6 */

/* Toolbar separator pip between nav cluster and URL field */
.ns-tbsep {
	width: 1px;
	height: 26px;
	background: linear-gradient(to bottom, transparent, #8c8c8c 30% 70%, transparent);
	margin: 0 4px;
	flex-shrink: 0;
}

/* ----- Personal toolbar (bookmark buttons row) ----- */
.ns-personal-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	padding: 1px 4px 2px;
	background: linear-gradient(to bottom, #faf9f3 0%, #ddd9c5 100%);
	border-bottom: 1px solid #aca899;
	font: 11px "Tahoma", "MS Sans Serif", sans-serif;
	flex-shrink: 0; /* stays anchored when viewport scrolls */
}
.ns-pt-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px 2px 6px;
	color: #000;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 2px;
}
.ns-pt-link:hover {
	border-color: #316ac5;
	background: #c8d8f0;
}
.ns-pt-folder {
	width: 14px; height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 Q1 14 2 14 L14 14 Q15 14 15 13 L15 6 Q15 5 14 5 L8 5 L7 4 L2 4 Q1 4 1 4z' fill='%23ffcb53' stroke='%237a4f00'/></svg>") center/contain no-repeat;
	flex-shrink: 0;
}
/* Period-accurate icon variants on the bookmarks bar */
.ns-pt-folder--home      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='8,2 14,8 12,8 12,14 9,14 9,11 7,11 7,14 4,14 4,8 2,8' fill='%23b86c2e' stroke='%23502800' stroke-width='.8' stroke-linejoin='miter'/><polygon points='5,5 5,3 7,3 7,4' fill='%23502800'/></svg>"); }
.ns-pt-folder--mynet     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='4' width='12' height='10' fill='%231b154b' stroke='%23000'/><text x='8' y='12' font-family='Trebuchet MS' font-size='8' font-weight='bold' text-anchor='middle' fill='%23ffd23a'>M</text></svg>"); }
.ns-pt-folder--search    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4' fill='none' stroke='%23254d2c' stroke-width='1.4'/><line x1='10' y1='10' x2='14' y2='14' stroke='%23254d2c' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.ns-pt-folder--shop      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 5 L13 5 L12 13 L4 13z' fill='%23d97a3a' stroke='%23653a00' stroke-width='.8'/><path d='M6 5 V3 a2 2 0 0 1 4 0 V5' fill='none' stroke='%23653a00' stroke-width='.8'/></svg>"); }
.ns-pt-folder--bookmarks { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 2 H13 V14 L8 11 L3 14z' fill='%23a8d4ff' stroke='%23254d77' stroke-width='1' stroke-linejoin='miter'/></svg>"); }
.ns-pt-folder--phone     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 4 Q3 2 5 2 L6 5 L4 6 Q5 9 7 10 L8 8 L11 9 Q11 11 9 11 Q5 11 3 7 Z' fill='%23254d77' stroke='%23000' stroke-width='.6'/></svg>"); }

/* ----- Viewport (the actual page area, white) -----
   This is the ONE scrolling region. Everything above it (menubar, toolbar,
   personal toolbar) and below it (status bar) stays anchored — just like a
   real browser. The flexbox `min-height: 0` is the bit that lets a flex
   child shrink below its content size and actually become scrollable. */
.ns-viewport {
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
	padding: 18px 22px 28px;
	border-top: 1px solid #fff;
	font-family: "Times New Roman", "Times", serif;
	color: #000;
	font-size: 16px;
	line-height: 1.5;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.ns-feed-header { margin: 0 0 18px; }
.ns-feed-title {
	margin: 0 0 4px;
	font-family: "Times New Roman", "Times", serif;
	font-size: 30px;
	font-weight: bold;
	color: #000080;             /* Netscape link-blue heading */
	letter-spacing: -.5px;
}
.ns-feed-tag {
	margin: 0 0 8px;
	font-style: italic;
	color: #333;
	font-size: 14px;
}
.ns-rule {
	border: 0;
	height: 2px;
	background: linear-gradient(to right, #aca899, #6d6a5d, #aca899);
	margin: 0;
}

.ns-feed {
	list-style: none;
	counter-reset: nsfeed;
	margin: 0; padding: 0;
}
.ns-feed__item {
	counter-increment: nsfeed;
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom: 1px dashed #808080;
}
.ns-feed__item:last-child { border-bottom: 0; }
.ns-feed__title {
	font-family: "Times New Roman", "Times", serif;
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 4px;
	line-height: 1.2;
}
.ns-feed__title a {
	color: #0000ee;             /* the classic unvisited link blue */
	text-decoration: underline;
}
.ns-feed__title a:visited { color: #551a8b; }
.ns-feed__title a:hover   { color: #ee0000; }
.ns-feed__title::before {
	content: counter(nsfeed) ". ";
	color: #808080;
	font-weight: normal;
}
.ns-feed__meta {
	margin: 0 0 8px;
	font-size: 12px;
	color: #444;
	font-style: italic;
}
.ns-feed__meta a { color: #0000ee; }
.ns-feed__excerpt p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.55;
}
.ns-feed__more {
	margin: 8px 0 0;
}
.ns-readmore {
	color: #0000ee;
	text-decoration: underline;
	font-weight: bold;
	font-family: "Times New Roman", "Times", serif;
	font-size: 15px;
}
.ns-readmore:visited { color: #551a8b; }
.ns-readmore:hover   { color: #ee0000; }

.ns-feed-pager {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #aca899;
}

/* ----- Generic content styling inside .ns-viewport -----
   Any post/page/search/archive template's content gets rendered inside the
   Netscape viewport, so it needs to inherit the period-correct typography
   (Times body, blue links) without re-declaring everything per-element. */
.ns-viewport h1, .ns-viewport h2, .ns-viewport h3,
.ns-viewport h4, .ns-viewport h5, .ns-viewport h6 {
	font-family: "Times New Roman", "Times", serif;
	color: #000080;
	margin: 1.1em 0 .35em;
	line-height: 1.2;
}
.ns-viewport h1 { font-size: 26px; }
.ns-viewport h2 { font-size: 21px; }
.ns-viewport h3 { font-size: 17px; }
.ns-viewport p,
.ns-viewport li,
.ns-viewport blockquote,
.ns-viewport dl {
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 .9em;
}
.ns-viewport a {
	color: #0000ee;
	text-decoration: underline;
}
.ns-viewport a:visited { color: #551a8b; }
.ns-viewport a:hover   { color: #ee0000; }
.ns-viewport img { max-width: 100%; height: auto; }
.ns-viewport blockquote {
	margin: 1em 0;
	padding: 6px 14px;
	border-left: 3px solid #aca899;
	background: #f5f3e7;
	font-style: italic;
}
.ns-viewport pre, .ns-viewport code {
	font-family: "Courier New", monospace;
	font-size: 13px;
}
.ns-viewport pre {
	background: #ece9d8;
	border: 1px solid #aca899;
	padding: 8px 10px;
	overflow: auto;
}
.ns-viewport hr {
	border: 0;
	height: 2px;
	background: linear-gradient(to right, #aca899, #6d6a5d, #aca899);
	margin: 18px 0;
}

/* Single post & page styling overrides — the global .xp-single rules use the
   XP cream palette; inside Netscape we want the cleaner serif-on-white look. */
.ns-viewport .xp-single,
.ns-viewport .xp-single--page,
.ns-viewport .xp-archive,
.ns-viewport .xp-search { background: transparent; padding: 0; }
.ns-viewport .xp-single__title {
	font-family: "Times New Roman", "Times", serif;
	font-size: 28px;
	font-weight: bold;
	color: #000080;
	margin: 0 0 6px;
	letter-spacing: -.3px;
}
.ns-viewport .xp-single__meta,
.ns-viewport .xp-result__meta,
.ns-viewport .xp-archive__desc {
	font-size: 12px;
	color: #555;
	font-style: italic;
	margin: 0 0 14px;
}
.ns-viewport .xp-single__content { font-size: 15px; line-height: 1.6; }
.ns-viewport .xp-single__footer { margin-top: 18px; padding-top: 10px; border-top: 1px dashed #aca899; font-size: 12px; color: #555; }
.ns-viewport .xp-post__thumb,
.ns-viewport .xp-post__thumb--full { margin: 0 0 14px; }
.ns-viewport .xp-post__thumb img,
.ns-viewport .xp-post__thumb--full img {
	border: 1px solid #aca899;
	padding: 3px;
	background: #fff;
}

/* Archive / search results list — match the .ns-feed look but lighter */
.ns-viewport .xp-results { list-style: none; margin: 0; padding: 0; }
.ns-viewport .xp-result {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px dashed #aca899;
}
.ns-viewport .xp-result:last-child { border-bottom: 0; }
.ns-viewport .xp-result__title {
	font-family: "Times New Roman", "Times", serif;
	font-size: 19px;
	font-weight: bold;
	color: #0000ee;
	text-decoration: underline;
}
.ns-viewport .xp-result__title:visited { color: #551a8b; }
.ns-viewport .xp-result__excerpt { font-size: 14px; margin: 6px 0 0; }

/* Page navigation between posts */
.ns-viewport .xp-postnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid #aca899;
	font-size: 13px;
}
.ns-viewport .xp-postnav a { color: #0000ee; text-decoration: underline; }
.ns-viewport .xp-postnav a:visited { color: #551a8b; }

/* Pagination (numbered pager) */
.ns-viewport .xp-pagination,
.ns-viewport .nav-links {
	margin: 18px 0 0;
	padding-top: 12px;
	border-top: 1px solid #aca899;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 13px;
}
.ns-viewport .xp-pagination a,
.ns-viewport .nav-links a,
.ns-viewport .xp-pagination .page-numbers,
.ns-viewport .nav-links .page-numbers {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #aca899;
	background: #ece9d8;
	color: #0000ee;
	text-decoration: none;
}
.ns-viewport .xp-pagination .current,
.ns-viewport .nav-links .current {
	background: #316ac5;
	color: #fff;
	border-color: #003fa1;
}

/* Comments block — still readable inside Netscape skin */
.ns-viewport .xp-comments {
	margin-top: 26px;
	padding-top: 14px;
	border-top: 1px solid #aca899;
}
.ns-viewport .xp-comments__title {
	font-family: "Times New Roman", "Times", serif;
	font-size: 18px;
	color: #000080;
	margin: 0 0 10px;
}

/* Search form inside the BSOD content */
.ns-viewport .xp-bsod { padding: 14px 0; }
.ns-viewport .xp-bsod ol { padding-left: 22px; }
.ns-viewport .xp-bsod__hint { font-family: "Courier New", monospace; color: #555; font-size: 13px; }

/* ----- Status bar: thin Netscape 6 style with three sunken cells ----- */
.ns-statusbar {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 1px;
	background: #ece9d8;
	border-top: 1px solid #fff;
	box-shadow: inset 0 1px 0 #aca899;
	font: 11px "Tahoma", "MS Sans Serif", sans-serif;
	height: 20px;
	flex-shrink: 0; /* stays anchored when viewport scrolls */
}
.ns-statusbar__lock {
	width: 18px; height: 18px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='7' fill='%23d4d0c8' stroke='%23000'/><path d='M5 7 V5 a3 3 0 0 1 6 0 V7' fill='none' stroke='%23000' stroke-width='1.4'/><circle cx='8' cy='10.5' r='1' fill='%23000'/></svg>") center/contain no-repeat;
	border: 1px solid;
	border-color: #aca899 #fff #fff #aca899;
	padding: 0;
}
.ns-statusbar__msg {
	flex: 1 1 auto;
	border: 1px solid;
	border-color: #aca899 #fff #fff #aca899;
	padding: 1px 6px;
	background: #ece9d8;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ns-statusbar__progress {
	width: 100px;
	border: 1px solid;
	border-color: #aca899 #fff #fff #aca899;
	background: #ece9d8;
	padding: 0;
	margin: 0;
}
.ns-statusbar__progress > span {
	display: block;
	height: 100%;
	width: 100%;
}
.ns-statusbar__comet {
	display: inline-grid;
	place-items: center;
	width: 22px;
	border: 1px solid;
	border-color: #aca899 #fff #fff #aca899;
	color: #fff;
	font: bold 12px "Trebuchet MS", "Tahoma", sans-serif;
	background: linear-gradient(to bottom, #4f4382 0%, #1b154b 100%);
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}

/* Netscape 6 used the OS title-bar chrome unmodified — restore XP blue */
.xp-window--netscape .xp-window__titlebar { /* no overrides; inherits XP blue */ }

/* Give the Netscape window a sensible default size so the scroll behavior
   feels like a real browser pane: ~85% of the desktop layer, never larger
   than the available room (the parent's max-height already clips us). */
.xp-window--netscape {
	height: calc(100vh - 80px); /* viewport minus taskbar (30) + breathing room (50) */
	max-height: calc(100% - 18px);
}
@media (max-width: 768px) {
	/* On the responsive layout the window flows in normal document order;
	   give it an explicit height so the chrome stays put. */
	.xp-window--netscape { height: auto; max-height: none; }
	.xp-window--netscape .xp-window__body { max-height: 70vh; }
}

/* Responsive */
@media (max-width: 760px) {
	.ns-tbtn { width: 30px; height: 28px; }
	.ns-tbtn__ico { width: 16px; height: 16px; }
	.ns-searchbtn { padding: 0 6px; }
	.ns-feed-title { font-size: 24px; }
	.ns-feed__title { font-size: 18px; }
	.ns-viewport { padding: 14px 14px 22px; }
}
@media (max-width: 540px) {
	.ns-personal-toolbar { display: none; }
	.ns-toolbar__print { display: none; }
	.ns-searchbtn__caret { display: none; }
}
@media (max-width: 420px) {
	.ns-searchbtn span:not(.ns-searchbtn__ico):not(.ns-searchbtn__caret) { display: none; }
}

/* =====================================================================
   Taskbar / Tray HARDENED OVERRIDES
   These appear last on purpose: they defeat WordPress theme inheritance,
   block-editor reset CSS, and any plugin that injects global font/color rules.
   Base64 SVGs avoid any URL-encoding-mangle risk from security plugins.
   ===================================================================== */
.xp-taskbar,
.xp-taskbar * {
	box-sizing: border-box;
}
.xp-taskbar {
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px;
	line-height: 1 !important;
	color: #fff !important;
	font-family: "Tahoma", "Geneva", "Verdana", sans-serif !important;
	font-size: 11px !important;
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	overflow: visible !important;
	visibility: visible !important;
}
.xp-taskbar > * {
	flex-shrink: 0;
	overflow: visible;
}
.xp-taskbar .xp-startbtn {
	display: inline-flex !important;
	align-items: center !important;
	color: #fff !important;
	font-family: "Trebuchet MS", "Tahoma", sans-serif !important;
	font-size: 18px !important;
	font-style: italic !important;
	font-weight: bold !important;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
	line-height: 1 !important;
	height: 30px !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.xp-taskbar .xp-startbtn__label {
	color: #fff !important;
	display: inline-block !important;
	visibility: visible !important;
}
.xp-taskbar .xp-startbtn__flag {
	display: grid !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.xp-taskbar .xp-tasks {
	flex: 1 1 auto !important;
	display: flex !important;
	min-width: 0 !important;
}
.xp-taskbar .xp-tray {
	display: inline-flex !important;
	align-items: center !important;
	height: 30px !important;
	color: #fff !important;
	flex-shrink: 0 !important;
	visibility: visible !important;
}
.xp-taskbar .xp-tray-icon {
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	visibility: visible !important;
	opacity: 1 !important;
	flex-shrink: 0;
}
.xp-taskbar .xp-clock {
	display: inline-block !important;
	color: #fff !important;
	font-family: "Tahoma", "Geneva", "Verdana", sans-serif !important;
	font-size: 11px !important;
	line-height: 1 !important;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	min-width: 64px !important;
	text-align: center !important;
	visibility: visible !important;
}

/* Base64-encoded tray and quicklaunch icons — safe from URL mangling */
.xp-taskbar .xp-tray-icon--shield {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTggMSBMMTQgMyBMMTQgOCBRMTQgMTMgOCAxNSBRMiAxMyAyIDggTDIgM3onIGZpbGw9JyNkNjJhMmEnIHN0cm9rZT0nIzdhMDAwMCcvPjxwYXRoIGQ9J004IDEgTDE0IDMgTDE0IDggUTE0IDEzIDggMTV6JyBmaWxsPScjZmZkNDAwJyBzdHJva2U9JyM3YTU2MDAnLz48Y2lyY2xlIGN4PSc4JyBjeT0nOCcgcj0nMi41JyBmaWxsPScjZmZmJyBzdHJva2U9JyMwMDAnIHN0cm9rZS13aWR0aD0nLjYnLz48cmVjdCB4PSc3LjQnIHk9JzYuNScgd2lkdGg9JzEuMicgaGVpZ2h0PSczJyBmaWxsPScjMDAwJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-tray-icon--volume {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTMgNiBMNiA2IEw5IDMgTDkgMTMgTDYgMTAgTDMgMTB6JyBmaWxsPScjZWFlYWVhJyBzdHJva2U9JyMwMDAnLz48cGF0aCBkPSdNMTEgNSBRMTMgOCAxMSAxMSBNMTIuNSAzLjUgUTE1LjUgOCAxMi41IDEyLjUnIHN0cm9rZT0nIzAwZDRmZicgZmlsbD0nbm9uZScgc3Ryb2tlLXdpZHRoPScxLjInLz48L3N2Zz4=") !important;
}
.xp-taskbar .xp-tray-icon--network {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHJlY3QgeD0nMicgeT0nNicgd2lkdGg9JzUnIGhlaWdodD0nNCcgZmlsbD0nI2RhZGFkYScgc3Ryb2tlPScjMDAwJy8+PHJlY3QgeD0nOScgeT0nNicgd2lkdGg9JzUnIGhlaWdodD0nNCcgZmlsbD0nI2RhZGFkYScgc3Ryb2tlPScjMDAwJy8+PHBhdGggZD0nTTcgOCBMOSA4JyBzdHJva2U9JyMwMDAnLz48Y2lyY2xlIGN4PSc0LjUnIGN5PSc4JyByPScuNycgZmlsbD0nIzAwZGQwMCcvPjxjaXJjbGUgY3g9JzExLjUnIGN5PSc4JyByPScuNycgZmlsbD0nIzAwZGQwMCcvPjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-tray-icon--messenger {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzcnIGZpbGw9JyM2M2MxMzAnIHN0cm9rZT0nIzFmNWUwMCcvPjxwYXRoIGQ9J001IDYuNSBROCA0IDExIDYuNSBMMTEgOSBROCAxMS41IDUgOXonIGZpbGw9JyNmZmYnLz48Y2lyY2xlIGN4PSc2LjUnIGN5PSc4JyByPScuOCcgZmlsbD0nIzFmNWUwMCcvPjxjaXJjbGUgY3g9JzkuNScgY3k9JzgnIHI9Jy44JyBmaWxsPScjMWY1ZTAwJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-ql-icon--showdesk {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzknIGZpbGw9JyNiY2QnIHN0cm9rZT0nIzI0NCcvPjxyZWN0IHg9JzMnIHk9JzEyJyB3aWR0aD0nMTAnIGhlaWdodD0nMScgZmlsbD0nIzI0NCcvPjxwYXRoIGQ9J004IDQgTDExIDcgTDkgNyBMOSAxMCBMNyAxMCBMNyA3IEw1IDd6JyBmaWxsPScjMDYyYjhhJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-ql-icon--ie {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzYuNScgZmlsbD0nI2ZmZDIzYScgc3Ryb2tlPScjNzQ0MDAwJy8+PHRleHQgeD0nOCcgeT0nMTInIGZvbnQtZmFtaWx5PSdUcmVidWNoZXQgTVMnIGZvbnQtc2l6ZT0nMTAnIGZvbnQtd2VpZ2h0PSdib2xkJyB0ZXh0LWFuY2hvcj0nbWlkZGxlJyBmaWxsPScjMDYyYjhhJz5lPC90ZXh0Pjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-ql-icon--media {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzYuNScgZmlsbD0nI2ZmOGEzYScgc3Ryb2tlPScjN2EzYTAwJy8+PHBvbHlnb24gcG9pbnRzPSc2LDQuNSAxMiw4IDYsMTEuNScgZmlsbD0nI2ZmZicvPjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-ql-icon {
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	visibility: visible !important;
}

/* WordPress admin bar pushes <html> down 32px — make sure the desktop layer
   still fills the rest of the viewport, and the taskbar stays pinned at the
   true bottom of the viewport (it's already fixed, so this is just safety). */
html.admin-bar .xp-desktop-layer { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	html.admin-bar .xp-desktop-layer { min-height: calc(100vh - 46px); }
}