/*
 * hexdump.eu: a single amber phosphor terminal (think P3 amber on a DEC VT).
 * One colour, one monospace face, glow and scanlines. Everything is real text.
 * System fonts only; no external requests.
 */

:root {
	color-scheme: dark;
	--tube: #140c03;      /* unlit phosphor */
	--amber: #ffb000;     /* P3 amber, 10.6:1 on --tube */
	--hot: #ffd98a;       /* overdriven beam, 14.3:1 */
	--dim: #c48a2c;       /* 6.5:1 */
	--faint: #a8782a;     /* 5.0:1 */
	--glow: 0 0 1px rgba(255, 176, 0, .6), 0 0 6px rgba(255, 150, 0, .35);
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--tube); }

body {
	margin: 0;
	background: var(--tube);
	color: var(--amber);
	font: 16px/1.5 var(--mono);
	text-shadow: var(--glow);
	-webkit-font-smoothing: antialiased;
}

/* Scanlines + curved-glass vignette, laid over everything. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	background:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
		radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

.screen {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	animation: flicker 7s infinite;
}

main {
	flex: 1;
	width: 100%;
	max-width: 62rem;
	margin: 0 auto;
	padding: var(--gutter) var(--gutter) 2rem;
}

p { margin: 0; }

/* Shell lines */
.cmd { color: var(--hot); }
.ps1 { color: var(--dim); }
.idle { margin-top: 2.5rem; }

.cursor {
	display: inline-block;
	width: .6em;
	height: 1.1em;
	vertical-align: -.2em;
	background: var(--amber);
	box-shadow: 0 0 8px rgba(255, 150, 0, .5);
	animation: blink 1.06s steps(1) infinite;
}

/* The dump itself. Wide (78 columns): it scrolls inside its own box on small screens. */
.dump-wrap {
	overflow-x: auto;
	margin: .5rem 0 0;
	scrollbar-color: var(--faint) transparent;
}

.dump {
	margin: 0;
	font: inherit;
	font-size: clamp(12px, 1.9vw, 16px);
	line-height: 1.6;
	color: var(--amber);
}

.dump .off { color: var(--faint); }
.dump .asc { color: var(--hot); }

/* The name, with each character's byte printed under it like a hex editor column. */
.name {
	--pitch: .25em;
	font-size: clamp(2rem, 10vw, 6.5rem);
	margin: clamp(2.5rem, 8vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
	overflow: hidden;
}

.name h1 {
	margin: 0;
	font: 700 1em/1 var(--mono);
	letter-spacing: var(--pitch);
	color: var(--hot);
	text-shadow: 0 0 2px rgba(255, 200, 80, .8), 0 0 18px rgba(255, 140, 0, .45), 0 0 48px rgba(255, 120, 0, .2);
}

.bytes {
	display: grid;
	grid-template-columns: repeat(10, 1ch);
	column-gap: var(--pitch);
	margin-top: .12em;
	font-family: var(--mono);
	border-top: 1px solid var(--faint);
	width: max-content;
	max-width: 100%;
	padding-top: .1em;
}

.bytes span {
	font-size: clamp(11px, .2em, 20px);
	color: var(--dim);
	line-height: 1.4;
	text-align: center;
}

.motd {
	max-width: 40ch;
	font-size: clamp(1rem, 2.4vw, 1.25rem);
	line-height: 1.6;
}

/* Easter egg (only shown when JS runs) */
.poke { margin-top: 3rem; }

.poke label {
	display: block;
	color: var(--dim);
	margin-bottom: .25rem;
}

.poke-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .6ch;
	color: var(--hot);
}

.poke-cmd { color: var(--dim); }

.poke input {
	flex: 1 1 12ch;
	min-width: 0;
	max-width: 32ch;
	font: inherit;
	color: var(--hot);
	text-shadow: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px dashed var(--faint);
	padding: 0 .25ch;
	border-radius: 0;
	caret-color: var(--amber);
}

.poke input::placeholder { color: var(--faint); opacity: 1; }

.poke input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--amber); }
.poke input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* VT-style status line in reverse video */
.status {
	display: flex;
	align-items: center;
	gap: 1.5ch;
	padding: .3rem var(--gutter);
	background: var(--amber);
	color: var(--tube);
	text-shadow: none;
	box-shadow: 0 0 14px rgba(255, 150, 0, .35);
	font-size: .875rem;
	white-space: nowrap;
}

.status .len { margin-left: auto; }

@media (max-width: 359px) {
	.status .len { display: none; }
}

.tape {
	flex: none;
	width: 3em;
	height: .9em;
	background: repeating-linear-gradient(-45deg, var(--tube) 0 .3em, transparent .3em .6em);
}

/* One orchestrated moment: the dump arrives like a 9600 baud line, then the name warms up. */
@media (prefers-reduced-motion: no-preference) {
	.dump .ln {
		display: inline-block;
		animation: type .5s steps(40) both;
	}
	.dump .ln:nth-child(1) { animation-delay: .35s; }
	.dump .ln:nth-child(2) { animation-delay: .85s; }
	.dump .ln:nth-child(3) { animation-delay: 1.35s; }
	.dump .ln:nth-child(4) { animation-delay: 1.85s; }
	.dump .ln:nth-child(5) { animation-delay: 2.35s; animation-duration: .1s; }

	.name, .motd { animation: warm .9s ease-out 2.55s both; }
	.motd { animation-delay: 2.8s; }
}

@media (prefers-reduced-motion: reduce) {
	.screen, .cursor { animation: none; }
}

@keyframes type {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes warm {
	0% { opacity: 0; filter: brightness(2.2) blur(2px); }
	12% { opacity: 1; }
	100% { opacity: 1; filter: none; }
}

@keyframes blink { 50% { opacity: 0; } }

@keyframes flicker {
	0%, 100% { opacity: 1; }
	47% { opacity: 1; }
	48% { opacity: .96; }
	49% { opacity: 1; }
	83% { opacity: .98; }
	84% { opacity: 1; }
}