/* Neo-brutalist split: hard 2px rules, square edges, unblurred offset shadows,
   flat colour blocks — GoLab's register, denisantonov.com's palette. */

:root {
	--bg: #fbf7ff;
	--ink: #1c1725;
	--muted: #665f70;
	--panel: #ffffff;
	--panel-soft: #f0e8fb;
	--accent: #9b6bd3;
	--accent-strong: #5b347f;
	--blue: #4d6f9f;
	--coral: #b85f73;
	--gold: #9c6f2f;

	/* the left pane block */
	--block: #9b6bd3;
	--on-block: #ffffff;
	--block-line: rgb(255 255 255 / .35);

	/* primary button */
	--cta: #9b6bd3;
	--on-cta: #ffffff;

	--line: #1c1725;
	--shadow-col: #1c1725;

	--rule: 2px solid var(--line);
	--drop: 5px 5px 0 0 var(--shadow-col);
	--drop-sm: 3px 3px 0 0 var(--shadow-col);

	--font-display: "Rubik", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Geist Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Geist Mono Variable", ui-monospace, "SFMono-Regular", "Source Code Pro", Consolas, monospace;

	color-scheme: light;
}

:root[data-theme="dark"] {
	--bg: #181321;
	--ink: #f8f2ff;
	--muted: #c7bbd5;
	--panel: #241c30;
	--panel-soft: #30243f;
	--accent: #c8a0ff;
	--accent-strong: #ead9ff;
	--blue: #9bb8e8;
	--coral: #eba0b1;
	--gold: #dfbc78;

	/* A deep purple block rather than a slab of bright lavender, borders on
	   the palette's --line instead of near-white, and shadows that go darker
	   than the page rather than lighter. */
	--block: #2b2039;
	--on-block: #f8f2ff;
	--block-line: rgb(248 242 255 / .16);

	--cta: #c8a0ff;
	--on-cta: #181321;

	--line: #4c3a62;
	--shadow-col: #0e0a15;

	color-scheme: dark;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* ---------- the split ---------- */

.split {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100dvh;
}

@media (min-width: 62rem) {
	.split { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- left: the statement ---------- */

.pane-ident {
	position: relative;
	background: var(--block);
	color: var(--on-block);
	border-bottom: var(--rule);
	padding: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 6vw, 4rem);
	overflow: hidden;
}

@media (min-width: 62rem) {
	.pane-ident {
		border-bottom: 0;
		border-right: var(--rule);
		justify-content: space-between;
	}
}

/* Low-key toggle: no box, icons cross-fade in place. */
.theme-toggle {
	position: fixed;
	top: .6rem;
	right: .6rem;
	z-index: 20;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--on-block);
	cursor: pointer;
	transition: color .22s ease, transform .22s ease, background .22s ease;
}

.theme-toggle:hover {
	transform: rotate(8deg) scale(1.06);
	background: color-mix(in srgb, var(--on-block), transparent 88%);
}

.theme-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Above the breakpoint the button sits over the light pane, not the block. */
@media (min-width: 62rem) {
	.theme-toggle { color: var(--accent-strong); }
	.theme-toggle:hover {
		background: color-mix(in srgb, var(--accent), transparent 88%);
	}
}

.theme-icons {
	position: relative;
	display: block;
	width: 1.45rem;
	height: 1.45rem;
}

.theme-icons .icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform-origin: 50% 50%;
	transition: opacity .26s ease, transform .36s cubic-bezier(.2, .8, .2, 1);
}

/* Show the theme you would switch *to*. */
.theme-icons .icon-sun { opacity: 0; transform: rotate(90deg) scale(.55); }
.theme-icons .icon-moon { opacity: 1; transform: none; }

:root[data-theme="dark"] .theme-icons .icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-icons .icon-moon { opacity: 0; transform: rotate(-80deg) scale(.55); }

h1 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 7vw, 4.75rem);
	line-height: .9;
	letter-spacing: -.035em;
	margin: 0;
	max-width: 12ch;
}

h1 .rule-word {
	display: inline-block;
	border-bottom: 5px solid var(--on-block);
	line-height: .82;
}

/* numbered spec list — replaces the marquee, same job */
.spec {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--block-line);
}

.spec li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .7rem 0;
	border-bottom: 2px solid var(--block-line);
	font-family: var(--font-mono);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.spec b {
	font-weight: 700;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* ---------- logotype ---------- */

.mark {
	display: flex;
	align-items: baseline;
	gap: clamp(.75rem, 2vw, 1.25rem);
	flex-wrap: wrap;
}

.mark-code {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4rem, 13vw, 8.5rem);
	line-height: .78;
	letter-spacing: -.055em;
	color: transparent;
	-webkit-text-stroke: 3px var(--on-block);
	user-select: none;
}

.mark-host {
	font-family: var(--font-mono);
	font-size: clamp(.75rem, 1.6vw, .9375rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--on-block);
	text-decoration: none;
	border-bottom: 2px solid var(--block-line);
	padding-bottom: .2rem;
}

.mark-host:hover { border-bottom-color: var(--on-block); }

/* ---------- right: the working surface ---------- */

.pane-work {
	position: relative;
	padding: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 62rem) {
	.pane-work { justify-content: center; }
}

.work-label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--muted);
}

.colophon {
	margin: 1rem 0 0;
	font-family: var(--font-mono);
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--muted);
}

.colophon a {
	color: var(--accent-strong);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
}

.colophon a:hover { color: var(--ink); }

@media (min-width: 62rem) {
	.colophon {
		position: absolute;
		left: clamp(1.5rem, 4vw, 3rem);
		bottom: clamp(1.5rem, 4vw, 3rem);
		margin: 0;
	}
}

/* ---------- press-in button ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: var(--rule);
	border-radius: 0;
	padding: .9rem 1.6rem;
	background: var(--panel);
	color: var(--ink);
	box-shadow: var(--drop-sm);
	cursor: pointer;
	transition: box-shadow .12s ease, transform .12s ease;
}

.btn:hover {
	box-shadow: 0 0 0 0 var(--shadow-col);
	transform: translate(3px, 3px);
}

.btn-primary {
	background: var(--cta);
	color: var(--on-cta);
}

.btn-sm {
	padding: .45rem .85rem;
	font-size: .625rem;
	letter-spacing: .14em;
	box-shadow: 2px 2px 0 0 var(--shadow-col);
}

.btn-sm:hover { transform: translate(2px, 2px); }

.btn:focus-visible,
input:focus-visible {
	outline: 3px solid var(--accent-strong);
	outline-offset: 3px;
}

/* ---------- form ---------- */

.shorten {
	background: var(--panel);
	border: var(--rule);
	box-shadow: var(--drop);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.field-label {
	display: block;
	font-family: var(--font-mono);
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--muted);
	margin: 0 0 .75rem;
}

.field-stack {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

input[type="text"] {
	width: 100%;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 1.0625rem;
	color: var(--ink);
	background: var(--bg);
	border: var(--rule);
	border-radius: 0;
	padding: .9rem 1rem;
}

input::placeholder { color: var(--muted); }

.btn[disabled] {
	opacity: .55;
	cursor: progress;
	transform: none;
	box-shadow: var(--drop-sm);
}

/* ---------- result ---------- */

.result {
	border: var(--rule);
	box-shadow: var(--drop);
	background: var(--panel);
}

.result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .9rem;
	border-bottom: var(--rule);
	background: var(--panel-soft);
}

.result-label {
	font-family: var(--font-mono);
	font-size: .625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
}

.result-body { padding: clamp(1rem, 3vw, 1.5rem); }

.short-link {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: clamp(1.125rem, 3.2vw, 1.625rem);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
	border-bottom: var(--rule);
}

.short-link:hover { color: var(--accent-strong); }

.target {
	margin: .85rem 0 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .1em;
	overflow-wrap: anywhere;
}

.error {
	margin: 0;
	padding: 1rem 1.25rem;
	border: var(--rule);
	box-shadow: var(--drop);
	background: var(--coral);
	color: var(--on-cta);
	font-family: var(--font-mono);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
}


@media (prefers-reduced-motion: reduce) {
	.btn:hover { transform: none; box-shadow: var(--drop-sm); }
	.theme-toggle:hover { transform: none; }
	.theme-icons .icon { transition: opacity .1s ease; transform: none !important; }
}