:root {
	--rp-base: #191724;
	--rp-surface: #1f1d2e;
	--rp-overlay: #26233a;
	--rp-muted: #6e6a86;
	--rp-subtle: #908caa;
	--rp-text: #e0def4;
	--rp-love: #eb6f92;
	--rp-gold: #f6c177;
	--rp-rose: #ebbcba;
	--rp-pine: #31748f;
	--rp-foam: #9ccfd8;
	--rp-iris: #c4a7e7;
	--rp-highlight-low: #21202e;
	--rp-highlight-med: #403d52;
	--rp-highlight-high: #524f67;
	--accent: var(--rp-rose);
	--accent-hover: #f0cac8;
	--panel-bg: linear-gradient(180deg, rgba(31, 29, 46, 0.98), rgba(31, 29, 46, 0.92));
	--floating-bg: rgba(38, 35, 58, 0.94);
	--focus-ring: 0 0 0 4px rgba(235, 188, 186, 0.14);
	--radius-md: 8px;
	--shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.3);
	--chrome-top-space: 78px;
	--mono: 'Fira Code', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	--ui: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-height: 100%;
	margin: 0;
}

body {
	height: 100vh;
	background: var(--rp-base);
	color: var(--rp-text);
	font-family: var(--ui);
	font-size: 16px;
	line-height: 1.5;
	overflow: hidden;
}

button,
input,
textarea {
	font: inherit;
}

button {
	border: 0;
}

[hidden] {
	display: none !important;
}

.auth-shell {
	width: min(100%, 680px);
	min-height: 100vh;
	margin: 0 auto;
	padding: 32px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: clamp(28px, 5vw, 44px);
	background: var(--panel-bg);
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.brand-stack {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}

.brand-mark {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
}

.brand-kicker {
	margin: 0 0 4px;
	color: var(--rp-subtle);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	color: var(--rp-text);
	font-size: clamp(2rem, 7vw, 3.2rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0;
}

.auth-form {
	display: grid;
	gap: 14px;
}

.field-group {
	display: grid;
	gap: 8px;
}

label {
	color: var(--rp-text);
	font-size: 0.92rem;
	font-weight: 700;
}

input,
textarea {
	outline: none;
}

input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	background: var(--rp-highlight-low);
	color: var(--rp-text);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}

input::placeholder,
.editor-textarea::placeholder {
	color: var(--rp-muted);
}

input:focus {
	border-color: var(--accent);
	background: var(--rp-overlay);
	box-shadow: var(--focus-ring);
}

.button {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rp-base);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		transform 160ms ease,
		background-color 160ms ease,
		opacity 160ms ease;
}

.button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.button:disabled {
	cursor: not-allowed;
	opacity: 0.72;
}

.button-primary {
	background: var(--accent);
}

.button-primary:hover:not(:disabled) {
	background: var(--accent-hover);
}

.message {
	min-height: 24px;
	margin: 0;
	font-size: 0.92rem;
}

.message-error {
	color: var(--rp-love);
}

.workspace {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: var(--rp-base);
	overflow: hidden;
}

.editor-view,
.viewer-view {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.editor-view {
	padding: var(--chrome-top-space) 18px 18px;
}

.editor-textarea {
	width: 100%;
	height: 100%;
	padding: 0 64px 0 0;
	resize: none;
	border: 0;
	background: transparent;
	color: var(--rp-text);
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.62;
	letter-spacing: 0;
	caret-color: var(--accent);
}

.code-frame {
	width: 100%;
	height: 100%;
	padding: var(--chrome-top-space) 18px 18px 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0;
	overflow: auto;
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.62;
}

.line-numbers,
.code-pre {
	min-height: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	white-space: pre;
}

.line-numbers {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 50px;
	padding: 0 14px 0 18px;
	background: linear-gradient(90deg, var(--rp-base) 78%, rgba(25, 23, 36, 0));
	color: var(--rp-muted);
	text-align: right;
	user-select: none;
}

.code-pre {
	min-width: 0;
	padding-right: 96px;
	color: var(--rp-text);
}

.code-output {
	font: inherit;
	white-space: pre-wrap;
	word-break: break-word;
}

.markdown-frame {
	width: 100%;
	height: 100%;
	padding: var(--chrome-top-space) 128px 88px 48px;
	overflow: auto;
	color: var(--rp-text);
	font-family: var(--ui);
	font-size: 16px;
	line-height: 1.72;
}

.markdown-frame > * {
	max-width: 920px;
}

.markdown-frame h1,
.markdown-frame h2,
.markdown-frame h3,
.markdown-frame h4 {
	margin: 1.35em 0 0.55em;
	color: var(--rp-text);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.18;
}

.markdown-frame h1:first-child,
.markdown-frame h2:first-child,
.markdown-frame h3:first-child {
	margin-top: 0;
}

.markdown-frame h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
}

.markdown-frame h2 {
	font-size: 1.6rem;
}

.markdown-frame h3 {
	font-size: 1.25rem;
}

.markdown-frame p,
.markdown-frame ul,
.markdown-frame ol,
.markdown-frame blockquote,
.markdown-frame table,
.markdown-frame pre {
	margin: 0 0 1.1rem;
}

.markdown-frame a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.markdown-frame ul,
.markdown-frame ol {
	padding-left: 1.45rem;
}

.markdown-frame li + li {
	margin-top: 0.25rem;
}

.markdown-frame blockquote {
	padding: 0.1rem 0 0.1rem 1rem;
	border-left: 3px solid var(--accent);
	color: var(--rp-subtle);
}

.markdown-frame code {
	font-family: var(--mono);
	font-size: 0.92em;
}

.markdown-frame :not(pre) > code {
	padding: 0.12rem 0.34rem;
	border: 1px solid var(--rp-highlight-med);
	border-radius: 6px;
	background: var(--rp-highlight-low);
	color: var(--rp-foam);
}

.markdown-code {
	max-width: min(100%, 1120px);
	padding: 14px 16px;
	overflow: auto;
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	background: var(--rp-highlight-low);
	color: var(--rp-text);
}

.markdown-code code {
	white-space: pre;
}

.markdown-frame table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.markdown-frame th,
.markdown-frame td {
	padding: 9px 11px;
	border: 1px solid var(--rp-highlight-med);
	text-align: left;
}

.markdown-frame th {
	background: var(--rp-overlay);
	color: var(--accent);
}

.markdown-frame hr {
	margin: 1.8rem 0;
	border: 0;
	border-top: 1px solid var(--rp-highlight-med);
}

.toolbar {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 10;
	padding: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--floating-bg);
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(12px);
	user-select: none;
}

.tool-button {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--rp-subtle);
	cursor: pointer;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		transform 150ms ease;
}

.tool-button:hover:not(:disabled) {
	background: var(--rp-highlight-med);
	color: var(--rp-text);
	transform: translateY(-1px);
}

.tool-button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.tool-button:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.tool-button svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.github-link svg {
	fill: currentColor;
	stroke: none;
}

.auth-github-link {
	position: absolute;
	top: 16px;
	right: 16px;
}

.tool-danger:hover:not(:disabled) {
	background: rgba(235, 111, 146, 0.12);
	color: var(--rp-love);
}

.meta-strip {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 8;
	max-width: min(520px, calc(100vw - 24px));
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--floating-bg);
	border: 1px solid var(--rp-highlight-med);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	color: var(--rp-subtle);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
	backdrop-filter: blur(12px);
	user-select: none;
}

.meta-strip span {
	flex: 0 0 auto;
}

#id-meta {
	max-width: 220px;
	overflow: hidden;
	color: var(--rp-text);
	text-overflow: ellipsis;
}

#language-meta {
	color: var(--accent);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 20;
	max-width: min(420px, calc(100vw - 32px));
	padding: 10px 13px;
	background: var(--rp-overlay);
	border: 1px solid var(--accent);
	border-radius: var(--radius-md);
	color: var(--rp-text);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
	color: var(--rp-iris);
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
	color: var(--rp-foam);
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
	color: var(--rp-muted);
}

.hljs-number,
.hljs-regexp,
.hljs-link,
.hljs-symbol,
.hljs-bullet {
	color: var(--rp-gold);
}

.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-title.class_ {
	color: var(--rp-rose);
}

.hljs-operator,
.hljs-punctuation {
	color: var(--rp-subtle);
}

@media (max-width: 680px) {
	.auth-shell {
		padding: 18px 14px;
		align-items: stretch;
	}

	.auth-panel {
		padding: 24px;
		align-self: center;
	}

	.brand-stack {
		align-items: flex-start;
		margin-bottom: 28px;
	}

	.editor-view {
		padding: 64px 14px 14px;
	}

	.editor-textarea {
		padding-right: 0;
		font-size: 13px;
	}

	.code-frame {
		padding-top: 66px;
		font-size: 13px;
	}

	.markdown-frame {
		padding: 66px 18px 88px;
		font-size: 15px;
	}

	.code-pre {
		padding-right: 16px;
	}

	.toolbar {
		left: 8px;
		right: 8px;
		top: 8px;
		justify-content: flex-end;
		overflow-x: auto;
	}

	.tool-button {
		width: 34px;
		height: 34px;
		flex: 0 0 auto;
	}

	.meta-strip {
		left: 8px;
		right: 8px;
		bottom: 8px;
		justify-content: flex-end;
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}