:root {
	--s-bg: #0d0d0d;
	--s-text: #e8e4d9;
	--s-dim: #8a8578;
	--s-accent: #b33000;
	--s-rule: rgba(42, 42, 38, 0.3);
}

/* ── NOISE OVERLAY ── */
.s-body::before {
	content: '';
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	z-index: 9000;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 128px;
}

/* ── CURSOR ── */
.s-cursor { position: fixed; width: 6px; height: 6px; background: var(--s-pink); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); mix-blend-mode: screen; transition: width 0.3s ease, height 0.3s ease; }
.s-cursor-ring { position: fixed; width: 32px; height: 32px; border: 1px solid rgba(179,48,0,0.25); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease, border-color 0.4s ease; }
.s-trail { position: fixed; width: 3px; height: 3px; background: rgba(179,48,0,0.12); border-radius: 50%; pointer-events: none; z-index: 99997; transform: translate(-50%, -50%); transition: opacity 0.9s ease; }
.s-pulse { position: fixed; border-radius: 50%; pointer-events: none; z-index: 99996; transform: translate(-50%, -50%) scale(0); opacity: 0; }

/* ── SCROLLBAR ── */
.s-body ::-webkit-scrollbar { width: 4px; }
.s-body ::-webkit-scrollbar-track { background: transparent; }
.s-body ::-webkit-scrollbar-thumb { background: #2a2a26; border-radius: 2px; }
.s-body ::-webkit-scrollbar-thumb:hover { background: var(--s-pink); }
.s-body { scrollbar-width: thin; scrollbar-color: #2a2a26 transparent; }

/* ── SPACE HEADER ── */
.s-header {
	position: relative; width: 100%; height: 100vh;
	overflow: hidden; background: var(--s-bg);
}

.s-canvas {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; z-index: 1;
}

/* ── WORDMARK ── */
.s-wordmark {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(4rem, 9vw, 7rem);
	font-weight: 400; letter-spacing: 0.08em;
	color: var(--s-text);
	opacity: 0;
	animation: s-arrive 2s ease 0.3s forwards;
	z-index: 20; white-space: nowrap;
	text-align: center; line-height: 1.1;
	pointer-events: none;
}

.s-wordmark.s-small {
	font-size: 1rem;
	top: 1.4rem; left: 1.5rem;
	transform: translate(0, 0);
	letter-spacing: 0.15em;
	color: var(--s-accent);
	opacity: 0.7 !important;
	animation: none;
}

/* ── ENTER BUTTON ── */
.s-enter-btn {
	position: absolute;
	top: calc(50% + clamp(5rem, 10vw, 8rem));
	left: 50%; transform: translateX(-50%);
	font-family: 'Courier New', monospace;
	font-size: 0.82rem; letter-spacing: 0.28em;
	color: var(--s-mauve);
	background: rgba(13,10,15,0.85);
	border: 1px solid rgba(179,48,0,0.5);
	padding: 0.6rem 1.8rem; z-index: 30;
	opacity: 0;
	animation: s-arrive 1.5s ease 3s forwards;
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
	white-space: nowrap; -webkit-tap-highlight-color: transparent;
}

.s-enter-btn:hover {
	color: var(--s-pink);
	border-color: rgba(179,48,0,0.7);
	background: rgba(179,48,0,0.06);
}

.s-enter-btn.s-hidden { display: none; }

/* ── TERMINAL ── */
.s-terminal {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0.92);
	width: 68vw; max-width: 820px; height: 70vh;
	min-width: 360px; min-height: 320px;
	background: #0d0d0d;
	border: 1px solid rgba(179,48,0,0.3);
	border-radius: 8px;
	box-shadow: 0 0 60px rgba(0,0,0,0.85), 0 2px 40px rgba(0,0,0,0.6), 0 0 1px rgba(179,48,0,0.35);
	z-index: 50; display: flex; flex-direction: column;
	opacity: 0; pointer-events: none;
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
	font-family: 'Courier New', monospace; overflow: hidden;
}

.s-terminal.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }

.s-term-titlebar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.55rem 1rem;
	border-bottom: 1px solid rgba(179,48,0,0.15);
	background: #0d0d0d; flex-shrink: 0; user-select: none;
}

.s-term-titlebar-left { display: flex; align-items: center; gap: 0.5rem; }

.s-term-dot { width: 10px; height: 10px; border-radius: 50%; }
.s-term-dot-close { background: #b33000; }
.s-term-dot-min { background: #2a2a26; }
.s-term-dot-max { background: #2a2a26; }

.s-term-title-label { font-size: 0.72rem; letter-spacing: 0.18em; color: #8a8578; margin-left: 0.4rem; }
.s-term-breadcrumb { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--s-dim); }

.s-term-content {
	flex: 1; overflow-y: auto; overflow-x: hidden;
	padding: 1.2rem 1.4rem 0.5rem;
	scrollbar-width: thin; scrollbar-color: #2a2a26 transparent;
}

.s-term-boot { }
.s-term-listing { display: none; }
.s-term-post { display: none; }
.s-term-post.active { display: block; }

.s-term-line { color: var(--s-dim); font-size: 0.9rem; line-height: 1.9; margin: 0; }
.s-term-line-bright { color: #e8e4d9; }
.s-term-line-pink { color: var(--s-pink); }

.s-term-item {
	display: flex; align-items: baseline; gap: 1rem;
	padding: 0.28rem 0.5rem; border-radius: 3px;
	transition: background 0.15s ease; margin-bottom: 0.1rem;
}
.s-term-item:hover, .s-term-item.selected { background: rgba(179,48,0,0.12); }
.s-term-item.selected { background: rgba(179,48,0,0.14); outline: 1px solid rgba(179,48,0,0.3); }

.s-term-item-marker { color: var(--s-pink); font-size: 0.85rem; flex-shrink: 0; width: 0.8rem; }
.s-term-item-title { color: var(--s-text); font-size: 0.95rem; flex: 1; letter-spacing: 0.03em; }
.s-term-item-tag { color: var(--s-dim); font-size: 0.78rem; letter-spacing: 0.1em; flex-shrink: 0; }
.s-term-item-date { color: #8a8578; font-size: 0.75rem; flex-shrink: 0; }

.s-term-section {
	color: var(--s-mauve); font-size: 0.72rem; letter-spacing: 0.22em;
	margin: 1.2rem 0 0.5rem 0.5rem; text-transform: uppercase;
}
.s-term-section:first-child { margin-top: 0; }

.s-term-back {
	color: var(--s-dim); font-size: 0.82rem; letter-spacing: 0.14em;
	margin-bottom: 1.2rem; display: inline-block;
	transition: color 0.2s ease;
}
.s-term-back:hover { color: var(--s-pink); }

.s-term-post-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.4rem; font-weight: 400;
	color: var(--s-text); margin: 0 0 0.4rem; line-height: 1.35;
}

.s-term-post-meta {
	color: var(--s-dim); font-size: 0.78rem; letter-spacing: 0.12em; margin-bottom: 1.4rem;
}

.s-term-post-body { color: #e8e4d9; font-size: 0.92rem; line-height: 1.9; font-family: 'Courier New', monospace; }
.s-term-post-body p { margin: 0 0 1rem; }
.s-term-post-body h2, .s-term-post-body h3 { font-family: Georgia, serif; color: var(--s-text); font-weight: 400; margin: 1.4rem 0 0.6rem; }
.s-term-post-body a { color: var(--s-pink); }
.s-term-post-body blockquote { border-left: 2px solid #2a2a26; padding-left: 1rem; margin: 1rem 0; color: #8a8578; }

.s-term-loading { color: var(--s-dim); font-size: 0.88rem; letter-spacing: 0.12em; }
.s-term-error { color: var(--s-pink); font-size: 0.88rem; }

.s-term-prompt-bar {
	display: flex; align-items: center;
	padding: 0.6rem 1.4rem;
	border-top: 1px solid rgba(179,48,0,0.15);
	background: #0d0d0d; flex-shrink: 0;
}

.s-term-prompt-label {
	color: var(--s-pink); font-size: 0.88rem; letter-spacing: 0.06em;
	margin-right: 0.5rem; white-space: nowrap; user-select: none;
}

.s-term-input {
	background: transparent; border: none; outline: none;
	color: var(--s-text); font-family: 'Courier New', monospace;
	font-size: 0.88rem; flex: 1; caret-color: var(--s-pink); min-width: 0;
}

@keyframes s-arrive { to { opacity: 0.55; } }
@keyframes s-pulse-out { 0%{transform:translate(-50%,-50%) scale(0);opacity:0.3} 100%{transform:translate(-50%,-50%) scale(5);opacity:0} }

/* ── STARGAZING PLAYER ── */
.stargazing-grid {
	display: grid; grid-template-columns: 1fr;
	gap: var(--s-5); margin-top: var(--s-6);
}

.stargazing-card {
	background: #0d0d0d;
	border: 1px solid var(--s-rule);
	padding: var(--s-5);
	display: flex; flex-direction: column; gap: var(--s-4);
}

.stargazing-card-title {
	font-family: var(--f-display);
	font-size: 1.3rem !important;
	margin: 0 0 var(--s-2) !important;
}

.stargazing-card-desc {
	font-size: 0.95rem;
	color: var(--s-dim);
	margin: 0;
}

.stargazing-card-duration {
	font-family: var(--f-body);
	font-size: var(--t-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--s-pink);
}

.stargazing-player {
	width: 100%;
	margin-top: var(--s-2);
}

.stargazing-player--large {
	margin: var(--s-5) 0;
}

.stargazing-player-wrap {
	margin: var(--s-6) 0;
}

.stargazing-duration {
	font-family: var(--f-body);
	font-size: var(--t-meta);
	color: var(--s-dim);
	margin: var(--s-2) 0 0;
}

.stargazing-single .lede {
	color: var(--s-mauve);
}

audio.stargazing-player::-webkit-media-controls-panel {
	background: #1a1620;
}

audio.stargazing-player::-webkit-media-controls-current-time-display,
audio.stargazing-player::-webkit-media-controls-time-remaining-display {
	color: var(--s-text);
}

@media (max-width: 880px) {
	.s-terminal {
		width: 92vw; height: 80vh;
		min-width: 0; min-height: 0;
	}
	.s-term-item {
		flex-wrap: wrap;
		gap: 0.2rem 0.8rem;
	}
	.s-term-item-date { width: 100%; padding-left: 1.3rem; }
}