:root{
			--bg: #535353; /* Backest background */
			--wrapper: #C6C6C6; /* wrapper / lanes */
			--text-area: #EFEFEF; /* detail panel & event labels */
			--muted: #989898; /* muted text for light panels */
			--accent: #00e; /* keep accent if needed */
			--track-height: 420px;
			--connector-len: 90px;
			--bar-height: 16px;
			--timeline-bar-height: 10px;
			--timeline-bottom: 0px;
		}
		
				@font-face{font-family:Homestuck;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/Regular.woff2)format("woff2")}
		@font-face{font-family:Sylladex;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/sylladex-font.otf.woff2)format("woff2")}

		html,body{height:100%;}
		body {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			background: var(--bg);
			color: #000; /* default text color on light panels will be black where panels are light */
			font-family: Verdana;
			margin: 0;
			padding: 0;
		}
		.page { display: none; }

		/* Keep the viewport and layout behavior unchanged (positions rely on these) */
		.viewport {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			overflow-x: auto;
			overflow-y: hidden;
			box-sizing: border-box;
			/* enable pointer drag handling (touch-action set dynamically by JS when appropriate) */
			cursor: grab;
			padding: 18px 0px 0 36px;
			flex: 0 0 auto;
			min-height: 0;
		}

		/* vertical guides for specific anniversary dates */
		.april-line { position: absolute; top: 0; height: 100vh; width: 1px; background: rgba(239,239,239,0.2); z-index: 2; pointer-events: none; }
		.june-line { position: absolute; top: 0; height: 100vh; width: 1px; background: rgba(239,239,239,0.12); z-index: 2; pointer-events: none; }
		.october-line { position: absolute; top: 0; height: 100vh; width: 1px; background: rgba(239,239,239,0.12); z-index: 2; pointer-events: none; }
		.viewport.dragging { cursor: grabbing; user-select: none; }

		/* The timeline track will sit on the wrapper color so lanes visually read like the original site */
	.timeline-track { border-top: 7px solid #EFEFEF; border-left: 7px solid #EFEFEF; position: relative; height: var(--track-height); width: var(--track-width); min-width: var(--track-width); box-sizing: border-box; margin: 0; background: var(--wrapper); }

		/* Timeline ruler: keep subtle but compatible with wrapper */
		.timeline-line { position: absolute; left: 0; bottom: 0; height: calc(var(--timeline-bottom) + var(--timeline-bar-height)); width: var(--track-width); background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); border-top: 1px solid rgba(0,0,0,0.08); z-index: 2; }

		.month-tick{ position: absolute; bottom: calc(var(--timeline-bottom) + (var(--timeline-bar-height) / 2)); width: 1px; height: 8px; background: rgba(0,0,0,0.24); transform: translateX(-50%); z-index: 25; }
		.month-tick.major { height: 20px; background: #6D6D6D; }

		/* year markers: keep as-is visually but ensure readability on wrapper */
		.marker-label { position: absolute; bottom: calc(var(--timeline-bottom) + var(--timeline-bar-height) + 16px); transform: translateX(-50%); font-size: 10px; color: #535353; white-space: nowrap; z-index: 30;     font-family: "arial";font-weight: bold;}

		/* Keep comic segment layout and label styles intact (do not override label/bar colours) */
		.segment { position: absolute; left: 0; bottom: var(--timeline-bottom); height: var(--timeline-bar-height); border-radius: 4px; opacity: 1; z-index: 12; border: 1px solid rgba(0,0,0,0.12); }

		.comic-seg { position: absolute; left: 0; overflow: visible; z-index: 4; transition: width 220ms ease, transform 200ms ease; border-radius: 0px; }

		.comic-seg-label { display: inline-flex; align-items: center; padding: 0 10px; height: 22px; font-size: 13px; font-weight: 800; /* label color comes from server data */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; width: 100%; box-sizing: border-box; }

		.comic-seg-text { padding-right: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

		.comic-seg-icons { display: inline-flex; gap: 3px; align-items: center; margin-left: 8px; opacity: 0; transform: translateX(6px) scale(.98); transition: opacity 160ms ease, transform 160ms ease; }
		.comic-seg-icon { width: 16px; height: 16px; object-fit: cover; image-rendering:pixelated;}
		.comic-seg:hover .comic-seg-icons { opacity: 1; transform: translateX(0) scale(1); }
		.comic-seg:hover { z-index: 6; }

		/* Event icons (left of the H3 title) */
		.event { position: absolute; left: 0; display: inline-flex; align-items: center; max-width: 320px; box-sizing: border-box; background: var(--text-area); border-bottom: 2px solid #6D6D6D; padding: 7px 9px; color: #000; z-index: 7; gap:3px; }
		.event.has-icons { padding: 5px; padding-right: 9px; }
		.event-icons { flex: 0 0 auto; display:inline-flex; align-items:center; }
		.event-body { display:flex; flex-direction:column; }
		.event-body h3 { margin: 0 0 6px 0; font-size: 12px; }
		.event-body p { margin: 0; display:none; }
		.event-icons { display:inline-flex; align-items:center; gap:3px; margin-right:0px; }
		.event-icon { width:22px; height:22px; object-fit:none; flex:0 0 22px; }

		/* Preserve row/ lane labels color so server-provided labelColor still applies visually */
		.comic-row-label { position: absolute; left: 12px; font-size: 12px; font-weight: 700; color: inherit; z-index: 8; pointer-events: none; color: #989898; }
			/* Make the hiatuses label clickable to toggle heatmap */
			.comic-row-label[data-row="hiatuses"] { cursor: pointer; pointer-events: auto; }
			.comic-row-label.heatmap-active { color: #222222; font-weight: 900; }
			/* Add a chevron prefix and animate a trailing spacer so the label appears to flip between ">" and "> " every 900ms
			   Only apply when the label is NOT the active heatmap label. */
			.comic-row-label[data-row="hiatuses"]:not(.heatmap-active)::before {
				content: ">";
				display: inline-block;
				margin-right: 6px;
				color: inherit;
				font-weight: 900;
				animation: hiatusChevronBlink 1800ms steps(1,end) infinite;
				left: 0px !important;
			}
			.comic-row-label[data-row="hiatuses"], .heatmap-active::before {
				content: ">";
				display: inline-block;
				margin-right: 6px;
				font-weight: 900;
				left: 0px !important;
			}
			.comic-row-label[data-row="hiatuses"] { 			left: -1px !important; }
			.comic-row-label[data-row="hiatuses"]:hover { 			text-decoration: underline; }
			.comic-row-label[data-row="hiatuses"]:not(.heatmap-active)::after {
				/* invisible block used to simulate a trailing space that fades in/out */
				content: " ";
				display: inline-block;
				width: 8px;
				opacity: 1;
				animation: hiatusChevronBlink 1800ms steps(1,end) infinite;
			}
			@keyframes hiatusChevronBlink {
				0% { opacity: 1; }
				49.99% { opacity: 1; }
				50% { opacity: 0; }
				100% { opacity: 0; }
			}
		.lane { position: absolute; left: 0; width: var(--track-width); z-index: 1; opacity: 1; }
		.lane-label { position: absolute; left: 10px; font-size: 13px; font-weight: 400; color: inherit; z-index: 9; pointer-events: none; }

			.connector { position: absolute; left: 0; width: 1px; background: #6D6D6D; transform: none; z-index: 6; bottom: calc(var(--timeline-bottom) + var(--timeline-bar-height)); height: calc(var(--connector-len) + 2px); }

		/* Events: use the light text-area color for panels and dark text for readability
		   Layout: icon (left) + event-body (title/desc) on the right */
		.event { position: absolute; left: 0; display: inline-flex; align-items: center; max-width: 320px; box-sizing: border-box; background: var(--text-area); border-bottom: 3px solid #6D6D6D; padding: 7px 9px; color: #000; z-index: 7; gap:5px; }
		.event-body { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
		.event-body h3, .event h3 { margin: 0; font-size: 12px; color: #000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Verdana; }
		.event-body p { margin:0; font-size: 13px; color: #3b3b3b; display: none; font-weight: normal;}
		.event h3 .lato { display: none; margin-left: 8px; font-size: 13px; color: var(--muted); vertical-align: middle; font-family: 'Verdana', sans-serif; font-weight: bold; }
		.event:hover h3 .lato { display: inline-block; }
		.event:hover p { display: block; margin-top: 8px; }
		.event:hover { transform: translateY(-2px); transition: transform 180ms ease; z-index: 99999; }
		@media (max-width:700px){ .event{ max-width: 160px; } }

		/* Detail panel: image on the left, centered body, menu on the right
		   - All content vertically centered
		   - dp-body is absolutely centered horizontally/vertically within the panel on desktop
		   - Mobile falls back to stacked layout (no absolute positioning) */
		/* Detail panel is shrink-to-fit and centered on the page.
		   Layout (desktop): dp-image | dp-body | dp-menu (no gaps, touching)
		   dp-body is centered within the page because the whole panel is centered */
		.detail-panel { position: relative; flex: 1; width: fit-content; max-width: calc(100%); margin: 0 auto; padding: 0; margin-bottom: 15px; display: flex; box-sizing: border-box; color: #000; gap: 0; align-items: stretch; justify-content: center; min-height: 180px; }
		/* center fixed-width inner container so prev/next spacing is stable */
		.detail-panel .dp-center { display: flex; align-items: stretch; box-sizing: border-box; }
		/* New: previous / next containers flank the main content on desktop */
		.dp-prev, .dp-next { flex: 0 0 56px; display:flex; align-items:center; justify-content:center; padding: 8px; box-sizing: border-box; z-index: 8; pointer-events: auto; }
		/* Prev/Next as plain text (no chrome) */
		.dp-prev button, .dp-next button { background: none; border: none; padding: 0; margin: 0 10px; cursor: pointer; font-family: Verdana, sans-serif; font-size: 18px; color: var(--wrapper); z-index: 9; font-size: xxx-large;     text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191;}
		.dp-prev button:hover, .dp-next button:hover { text-decoration: underline; }
		.dp-image { flex: 0 0 400px; width: 400px; height: auto; overflow: hidden; display:flex; align-items:flex-start; justify-content:flex-start; z-index: 1; max-height: 100%;}
		.dp-image img{ width:100%; height:auto; display:block; border-bottom: 7px solid #C6C6C6; max-height: calc(415px - 7px); background-color:var(--text-area);object-fit:cover;}
		.dp-body-wrap { flex: 0 0 auto; position: relative; display:block; }
		/* normal static flow: dp-body sits between image and menu and the whole .detail-panel is centered */
		/* The center container will be fixed at 1160px; dp-body fills remaining space between image and menu */
		.dp-body { position: static; transform: none; z-index: 2; box-sizing: border-box; padding: 12px 16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:top; flex: 1 1 auto; width: calc(1160px - 400px - 120px); max-width: none; text-align: left; background: var(--text-area); border-bottom: 7px solid #C6C6C6; height: 100%; }
		.dp-menu { flex: 0 0 120px; display:flex; flex-direction:column; gap:0; align-items:center; justify-content:flex-start; align-self: flex-start; padding-top: 12px; z-index: 1;     background: var(--text-area);
	    height: calc(100% - 19px); border-bottom: 7px solid #C6C6C6;}
		.dp-menu button { background: transparent; border: none; color: var(--muted); text-align: center; padding: 8px 10px 10px 0px; width:100%; cursor: pointer; font-family: Verdana; font-size: 14px; }
		.dp-menu button.active { color: #000; font-weight: 700; }
		.dp-menu button.active:before {content: "> ";}
		/* removed duplicate dp-body rule to avoid conflicts */
		.dp-body .dp-date { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-family: 'Courier New';}
			/* event icons shown beside the detail-panel date */
				.dp-evt-icons { display: inline-flex; gap: 8px; align-items: center;}
				.dp-evt-icons img { width: auto; height: 20px; object-fit: cover; cursor: pointer; opacity: 0.5; border-radius: 2px; border: 1px solid transparent; }
				.dp-evt-icons img:hover { opacity: 1; }
				.dp-evt-icons img.active { background: var(--wrapper); opacity: 1;}

				/* Wrapper for icons that provides a ::before hover prefix using the data-hover attribute.
				   The prefix only appears for non-active icons. */
				.dp-evt-icons .icon-wrap { position: relative; display: inline-block; vertical-align: middle; }
				/* Overlay prefix that floats over previous content without affecting layout */
				.dp-evt-icons .icon-wrap::before {
					content: attr(data-hover);
					position: absolute;
					right: calc(100% + 8px);
					top: 50%;
					transform: translateY(-50%);
					white-space: nowrap;
					opacity: 0;
					pointer-events: none;
					transition: opacity 140ms ease, transform 140ms ease;
					color: var(--muted);
					font-size: 14px;
					z-index: 9999;
					background: rgba(255,255,255,0.95);
					padding: 2px 6px;
					border-radius: 3px;
					box-shadow: 0 1px 2px rgba(0,0,0,0.12);
				}
				.dp-evt-icons .icon-wrap:hover::before { opacity: 1; transform: translateY(-50%); }
				/* Wrapper active state prevents the hover prefix from showing */
				.dp-evt-icons .icon-wrap.active::before { display: none !important; }
		.dp-body h2 { margin: 0 0 8px; color: #000; font-size: 22px; font-family: 'Homestuck'; font-weight:normal; text-transform: uppercase;}
			.dp-body .big-desc { color: #111; font-size: 14px; line-height: 1.375; }
			/* push links to the bottom of the body */
			/* push links to the bottom of the dp-body column */
			.dp-links { margin-top: auto; display:flex; flex-direction:column; gap:6px; }
			.dp-links a { color: var(--accent); text-decoration: underline; font-size: 16px; font-family: Verdana; }
			.dp-links a:before { content: "> "; color: #000; display: inline-block; margin-right: 6px; }

			/* Phrase styling helpers inserted by JS replacePhrases()
			   - .green-sun highlights the historic Green Sun phrase
			   - .inline-le styles the small LE image inserted inside text
			   - .sbahj gives a distinctive look for SBaHJ references
			*/
			.green-sun { color: #138823; font-weight: 800; background: rgba(19,136,35,0.06); padding: 0 4px; border-radius: 3px; }
			.inline-le { width: 10px; height: 10px; vertical-align: center; display: inline-block; margin: 0 2px;}
			.felt { color: #2ed73a; font-weight: bold; font-family: Courier;}
			.scratch { color: #fff; font-weight: bold;font-family: Courier;}
			.snowman { color: #000; font-weight: bold;font-family: Courier;}
			.dirk { color: #f2a400; font-family: Courier; font-weight: bold;}
			.suckers { color: #fff;
	    padding-top: 2px;
	    padding-bottom: 2px;
	    background-color: #3367D1; font-family: Courier; font-weight:bold;}
			.inline-green-sun { width: auto; height: 14px; vertical-align: center; display: inline-block; margin: 0 2px; }
			.sbahj { font-family: "Comic Sans MS", "Comic Sans", cursive; font-weight: 700; }
			/* faint bold Comic Sans label used for the "IT KEEPS HAPPENING.. ." easter egg */
			.keeps-happening { font-family: "Comic Sans MS", "Comic Sans", cursive; font-weight: 800; opacity: 0.07; font-size: 13px; color: rgba(0,0,0,0.75); position: absolute; white-space: nowrap; pointer-events: none; z-index: 1200; font-size:20px;}

			/* Heatmap row: small weekly bars showing update density */
			.heatmap-row { position: absolute; left: 0; width: var(--track-width); height: 18px; pointer-events: none; z-index: 110; }
			.heatmap-bar { position: absolute; bottom: 0; height: 100%; }
			/* legacy fan box removed visually; fan reaction will be one of the menu items */
			.dp-fan { display:none; }
			.dp-controls {width: 400px;}

			/* Search bar inside detail panel (above prev/next) */
			.dp-search-wrap { width: 100%; max-width: 400px; }
			#trendSelect {
			   font-family: Verdana, sans-serif; font-size: 14px; background-color: var(--text-area);     border: solid 3px #c6c6c6; outline: solid 5px #919191;
			}
			#trendViewMode {
			   font-family: Verdana, sans-serif; font-size: 14px; background-color: var(--text-area);     border: solid 3px #c6c6c6; outline: solid 5px #919191;
			}
			#eventSearch { width: 100%; box-sizing: border-box; padding: 8px 10px;font-family: Verdana, sans-serif; font-size: 14px; background-color: var(--text-area);     border: solid 3px #c6c6c6; outline: solid 5px #919191;}
			#eventSearch:focus { border: solid 3px #434343; outline: solid 5px #c6c6c6 }
			.search-suggestions { display: none; width: 100%; max-height: 220px; overflow-y: auto; background: var(--text-area); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 6px; padding: 6px; z-index: 2000; }
			.search-suggestion { padding: 6px 8px; cursor: pointer; display:flex; gap:8px; align-items:center; border-radius: 4px; }
			.search-suggestion:hover, .search-suggestion[aria-selected="true"] { background: rgba(0,0,0,0.04); }
			.search-suggestion .sugg-title { font-weight:700; font-size:13px; color:#000; }
			.search-suggestion .sugg-desc { font-size:12px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
			.search-suggestion img { width:22px; height:22px; object-fit:cover; border-radius:3px; }

			/* Image credit overlay inside detail panel image area */
			.dp-image { position: relative; }
			.dp-image .img-credit {
				position: absolute;
				left: 8px;
				bottom: 8px;
				background: rgba(0,0,0,0.55);
				color: #fff;
				padding: 4px 8px;
				border-radius: 4px;
				font-size: 12px;
				line-height: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: calc(100% - 16px);
				pointer-events: none;
				z-index: 9999;
			}

			/* Inner wrapper around the actual <img> so overlays can be positioned relative to the image bounds */
			/* On desktop, let .img-inner size to the image (no forced 100% height) so overlays attach to the image bounds */
			.dp-image .img-inner { position: relative; display: block; width: 100%; overflow: hidden; }
			.dp-image .img-inner img { display: block; width: 100%; height: auto; }

			@media (max-width:900px){
				/* Mobile: stack menu and content vertically and disable absolute centering */
				.detail-panel { flex-direction: row; align-items: stretch; padding: 10px; justify-content:top; background: var(--text-area);}
				.detail-panel .dp-center { width: 100%; flex-direction: column; }
				.dp-menu { flex-direction: row; overflow-x: auto; gap: 6px; height:30px; border-bottom:none; border-top: 7px solid #C6C6C6;}
				.dp-menu button { flex: 0 0 auto; width: auto; }
				.dp-image{ position: relative; width: 100%; height: 160px; max-width: none; margin-bottom: 8px; align-self: stretch; flex: 0 0 auto;}
				.dp-image .img-inner { height: 100%; }
				.dp-body { position: static; transform: none; left: auto; top: auto; width: 740px; max-width: 100%; margin: 0; border-bottom: none;}
				.dp-body-wrap { position: static; }
				.dp-fan{ border-left:none; border-top:1px solid rgba(0,0,0,0.06); display:block; }
				/* make viewport fill the mobile screen and provide larger padding for thumb reach */
				.viewport { height: 100%; }
				/* Hide the non-mobile static detail panel on small screens; mobile overlay will be used instead */
				#detailPanel { display: none !important; }

				/* When using the mobile overlay, make the body area fill available space and push links to the bottom */
				.detail-panel.mobile-overlay .mobile-content { overflow: hidden; }
				.detail-panel.mobile-overlay .dp-body-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
				.detail-panel.mobile-overlay .dp-body { display: flex; flex-direction: column; min-height: 0; }
				.detail-panel.mobile-overlay .dp-links { margin-top: auto; }
			}