/* Developer mode: hide advanced controls by default */
.dev-only { display: none !important; }
body.dev-mode .dev-only { display: inline-block !important; }
body.dev-mode .pane.right.dev-only { display: flex !important; }
body:not(.dev-mode) main { grid-template-columns: 1fr !important; }

/* Show right pane when executor (turtle/robot) is active, even in non-dev mode */
body:not(.dev-mode) .pane.right.executor-active {
  display: flex !important;
}
/* Restore two-column layout when executor is active */
body:not(.dev-mode) main:has(.pane.right.executor-active) {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
/* Hide output mode toggle (text/executor radio buttons) in non-dev mode */
body:not(.dev-mode) .output-mode {
  display: none !important;
}

html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; color: #e6e6e6; background: #1e1e1e; }
html { overflow: hidden; }
/* Ensure borders/padding are included in width calculations for editors */
textarea, pre.scroll, .CodeMirror { box-sizing: border-box; }
/* Layout: prevent page-level scroll; only panes scroll */
body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #252526; border-bottom: 1px solid #333; position: relative; z-index: 100; }
header h1 { font-size: 16px; margin: 0; }
.header-left { display: flex; align-items: center; gap: 8px; }
button.project-toggle { display: inline-flex; align-items: center; gap: 6px; background: #333; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 4px 10px; cursor: pointer; min-height: 32px; font-size: 13px; }
button.project-toggle:hover { background: #3a3a3a; }
.project-toggle-icon { font-size: 14px; line-height: 1; }
.project-toggle-label { font-size: 12px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-anchor, #output-anchor { display: none; }
.toolbar { display: flex; gap: 6px; margin-left: 12px; overflow: visible; }
.toolbar button { background: #333; color: #ddd; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; padding: 0; font-size: 14px; line-height: 28px; text-align: center; cursor: pointer; }
.toolbar button:hover { background: #3a3a3a; }
.toolbar button { position: relative; }
/* CSS pseudo-element tooltips removed in favor of JS-driven .q-tooltip */
.controls { display: flex; gap: 8px; align-items: center; }
.controls label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; user-select: none; }
.controls label input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }
main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; padding: 8px; box-sizing: border-box; flex: 1 1 auto; min-height: 0; overflow: auto; }
.pane { display: flex; flex-direction: column; border: 1px solid #333; border-radius: 4px; overflow: hidden; min-height: 0; min-width: 0; max-width: 100%; }
.pane-title { background: #2d2d2d; padding: 6px 8px; border-bottom: 1px solid #333; font-size: 12px; color: #ccc; }
textarea#code { flex: 1; background: #1e1e1e; color: #e6e6e6; border: none; resize: none; padding: 8px; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; overflow: auto; }
/* CodeMirror theme adjustments to match dark UI */
.CodeMirror { flex: 1; height: 320px; background: #1e1e1e; color: #e6e6e6; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; border: none; max-width: 100%; min-width: 0; }
.CodeMirror-gutters { background: #2d2d2d; border-right: 1px solid #333; }
.CodeMirror-linenumber { color: #9e9e9e; }
#status.status { padding: 4px 8px; font-size: 11px; background: #2d2d2d; border-top: 1px solid #333; color: #bbb; }
pre.scroll { flex: 1; margin: 0; padding: 8px; background: #1b1b1b; overflow: auto; font-size: 12px; min-width: 0; }
section.io { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; flex: 0 0 auto; }
section.io .pane-title { border-radius: 4px 4px 0 0; }
.io-toolbar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #bbb; }
.io-toolbar label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; color: #888; }
.io-toolbar select { min-width: 140px; }
.io-toolbar-separator { width: 1px; height: 18px; background: #333; margin: 0 4px; }
.io-pane-container { border: 1px solid #333; border-radius: 4px; background: #1b1b1b; min-height: 160px; height: clamp(180px, 24vh, 280px); max-height: 280px; flex: 0 0 auto; overflow: hidden; display: flex; flex-direction: column; }
.io-pane { display: none; height: 100%; flex: 1 1 auto; min-height: 0; }
.io-pane.active { display: flex; flex-direction: column; min-height: 0; }
.io-pane pre.scroll { flex: 1 1 auto; min-height: 0; max-height: 100%; }
.io-pane textarea { flex: 1 1 auto; width: 100%; height: 100%; background: #1e1e1e; color: #e6e6e6; border: none; border-top: 1px solid #2a2a2a; padding: 8px; resize: none; font-family: ui-monospace, monospace; font-size: 12px; box-sizing: border-box; }
.io-file-pane { padding: 8px; gap: 8px; }
.io-file-pane textarea { border: 1px solid #444; border-radius: 4px; }
.io-files { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.io-files .io-pane { flex: 1 1 auto; }
.io-file-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.io-file-name { flex: 1 1 auto; background: #1e1e1e; color: #e6e6e6; border: 1px solid #444; border-radius: 4px; padding: 4px 6px; font-size: 12px; }
.io-file-text { flex: 1 1 auto; min-height: 0; }
button, select { background: #0e639c; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
select { background: #333; border: 1px solid #555; }
button:hover { filter: brightness(1.1); }
button.io-icon,
.io-icon { background: #333; color: #ddd; border: 1px solid #555; padding: 0; width: 28px; height: 28px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 26px; }
button.io-icon:hover,
.io-icon:hover { filter: none; background: #3a3a3a; }
button.io-icon.danger,
.io-icon.danger { border-color: #7c3a3a; color: #ff8a80; }
body.projects-open { overflow: hidden; }
.projects-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 2500; }
body.projects-open .projects-backdrop { opacity: 1; pointer-events: auto; }
.projects-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; background: #1b1b1b; border-right: 1px solid #333; box-shadow: 8px 0 24px rgba(0,0,0,0.45); transform: translateX(-110%); transition: transform .2s ease; z-index: 2600; display: flex; flex-direction: column; }
body.projects-open .projects-drawer { transform: translateX(0); }
.projects-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #333; background: #202020; }
.projects-title { font-size: 14px; font-weight: 600; }
.projects-header-actions { display: flex; gap: 6px; }
.project-drawer-btn { background: #333; color: #ddd; border: 1px solid #555; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; }
.project-drawer-btn:hover { background: #3a3a3a; }
.projects-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.project-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.project-row:hover { background: #232323; }
.project-row.active { background: #2d2d2d; border-color: #3c3c3c; }
.project-row-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.project-name { font-size: 13px; font-weight: 600; color: #f3f3f3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-meta { font-size: 11px; color: #9a9a9a; }
.project-actions { display: flex; gap: 4px; flex-shrink: 0; }
button.project-action { background: #333; color: #ddd; border: 1px solid #555; width: 26px; height: 26px; border-radius: 4px; font-size: 12px; line-height: 1; padding: 0; }
button.project-action:hover { background: #3a3a3a; }
button.project-action.danger { border-color: #7c3a3a; color: #ff8a80; }
pre.error { color: #ff8a80; white-space: pre-wrap; }
footer { padding: 6px 12px; border-top: 1px solid #333; color: #bbb; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
footer .cookies-note { opacity: 0.9; }
/* Кнопки слева, текст по центру, шестеренка справа */
footer > small:nth-child(4) { margin-left: auto; }
footer > small:last-child { margin-left: auto; }
footer a { color: #7ec8e3; text-decoration: none; }
footer a:hover { text-decoration: underline; color: #9ed8f3; }
.bug-icon { font-size: 1.6em; line-height: 1; display: inline-block; }
footer .beta { color: #ffa726; opacity: 0.95; }
footer .version { opacity: 0.9; }
.bug-button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.bug-button:focus { outline: 1px solid #666; outline-offset: 2px; }
.dev-mode-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-size: 1.3em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; }
.dev-mode-toggle:hover { opacity: 0.7; transform: scale(1.1); }
.dev-mode-toggle:focus { outline: 1px solid #666; outline-offset: 2px; }
body.dev-mode .dev-mode-toggle { opacity: 1; filter: brightness(1.3); }

/* JS-driven tooltip */
.q-tooltip { position: fixed; background: #2d2d2d; color: #eee; padding: 6px 8px; border-radius: 4px; font-size: 12px; white-space: pre; border: 1px solid #555; box-shadow: 0 6px 16px rgba(0,0,0,0.5); z-index: 4000; pointer-events: none; max-width: 60vw; }

/* I/O keyword highlighting */
.cm-io-keyword {
  background: rgba(100, 181, 246, 0.1);
  border-radius: 2px;
  padding: 0 2px;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(100, 181, 246, 0.5);
  text-underline-offset: 2px;
}
.cm-io-keyword:hover {
  background: rgba(100, 181, 246, 0.2);
  text-decoration-color: rgba(100, 181, 246, 0.8);
}

/* File operation keyword highlighting */
.cm-file-keyword {
  background: rgba(156, 204, 101, 0.1);
  border-radius: 2px;
  padding: 0 2px;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(156, 204, 101, 0.5);
  text-underline-offset: 2px;
}
.cm-file-keyword:hover {
  background: rgba(156, 204, 101, 0.2);
  text-decoration-color: rgba(156, 204, 101, 0.8);
}

/* Toast notification */
.q-toast {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translate(-50%, -12px);
	background: #2e7d32; /* green */
	color: #fff;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.6);
	z-index: 5000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.q-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Fullscreen overlay for outputs */
.fs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 6000; display: none; }
.fs-overlay.show { display: flex; align-items: stretch; justify-content: center; }
.fs-panel { background: #121212; border: 1px solid #444; border-radius: 6px; width: 96vw; height: 92vh; margin: auto; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(0,0,0,0.6); }
.fs-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1f1f1f; border-bottom: 1px solid #333; font-size: 13px; color: #ddd; }
.fs-body { flex: 1; overflow: hidden; padding: 10px 12px; background: #151515; display: flex; flex-direction: column; min-height: 0; }
.fs-panel { min-height: 0; }
.fs-body > pre,
.fs-body > textarea { flex: 1 1 auto; width: 100%; height: 100%; margin: 0; overflow: auto; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height: 1.3; min-height: 0; }
.fs-body > pre { flex: 1 1 auto; width: 100%; height: 100%; margin: 0; overflow: auto; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height: 1.3; min-height: 0; }
.fs-body > textarea { background: #1e1e1e; color: #e6e6e6; border: 1px solid #333; border-radius: 4px; padding: 8px; caret-color: #e6e6e6; box-sizing: border-box; }
.fs-body > pre { background: #1b1b1b; color: #e6e6e6; box-sizing: border-box; }
.fs-body .CodeMirror { height: 100% !important; width: 100% !important; }
.fs-body #output,
.fs-body #stdout,
.fs-body #stdin { height: 100% !important; max-height: none !important; }
.fs-close { background: #333; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 4px 8px; cursor: pointer; }

/* View selector slot above output (mobile) */
.view-slot { display: none; padding: 6px 8px; background: #222; border-bottom: 1px solid #333; }
.view-slot select { background: #333; border: 1px solid #555; }

/* Responsive adjustments */
@media (max-width: 900px) {
	button.project-toggle { padding: 4px 6px; width: 36px; justify-content: center; }
	.project-toggle-label { display: none; }
	.projects-drawer { width: min(320px, 90vw); }
	/* Show view selector slot above output on mobile */
	.view-slot { display: block; }
	/* Hide header title on mobile */
	header h1 { display: none; }
	/* Allow page scroll on mobile */
	html { overflow: auto; height: auto; }
	body { overflow: auto; height: auto; }

	/* Safe single-column layout on mobile */
	main { display: block; overflow: visible; }
	main > * { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px 0; }

	/* Keep natural DOM order; footer follows content */

		/* (grid no longer applies due to display: contents) */

		/* Input/Output section stacked vertically and flexible */
		section.io { padding: 8px; }
		.io-toolbar { flex-wrap: wrap; }
		.io-pane-container { min-height: 220px; height: auto; max-height: none; flex: 1 1 auto; }
		.io-pane textarea { height: auto; min-height: 180px; }

	/* Editor height relative to viewport */
			.CodeMirror { height: 50vh; }
			.pane.left { min-height: 52vh; }
			.pane.right { min-height: 24vh; }
			pre.scroll { max-height: 28vh; }

	/* Wrap controls/buttons in header */
	.controls { flex-wrap: wrap; row-gap: 6px; }
	.toolbar { flex-wrap: wrap; gap: 6px; }
		/* Hide snippet toolbar on mobile to reduce clutter */
		.toolbar { display: none !important; }

	/* Make args input flexible to line width */
	.controls input#args { flex: 1 1 180px; min-width: 140px; }

	/* Footer can wrap and stays after content */
	footer { flex-wrap: wrap; gap: 8px; position: static; }
	footer .cookies-note { margin-left: 0; width: 100%; order: 3; }
}

@media (max-width: 600px) {
	/* Larger tap targets for toolbar buttons */
	.toolbar button { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
	header h1 { font-size: 14px; }
	.pane-title { font-size: 11px; }
	#status.status { font-size: 10px; }
	.CodeMirror { height: 50vh; }
}

/* Onboarding Tour */
.tour-overlay {
	position: fixed;
	inset: 0;
	z-index: 8000;
	cursor: pointer;
	/* No darkening - just captures clicks */
}

.tour-highlight {
	position: fixed;
	z-index: 8001;
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba(14, 99, 156, 0.9), 0 0 24px 8px rgba(14, 99, 156, 0.6), 0 0 48px 16px rgba(14, 99, 156, 0.3);
	background: rgba(14, 99, 156, 0.12);
	pointer-events: none;
	transition: all 0.3s ease;
}

.tour-tooltip {
	position: fixed;
	z-index: 8002;
	background: #2d2d2d;
	border: 1px solid #555;
	border-radius: 8px;
	padding: 16px;
	max-width: 320px;
	min-width: 260px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	color: #eee;
	font-size: 13px;
	line-height: 1.5;
}

.tour-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8px;
}

.tour-text {
	color: #ccc;
	margin-bottom: 14px;
}

.tour-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tour-progress {
	font-size: 12px;
	color: #888;
}

.tour-buttons {
	display: flex;
	gap: 8px;
}

.tour-skip {
	background: transparent;
	color: #aaa;
	border: 1px solid #555;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
}

.tour-skip:hover {
	background: #333;
	color: #ddd;
}

.tour-next {
	background: #0e639c;
	color: #fff;
	border: none;
	padding: 6px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
}

.tour-next:hover {
	background: #1177bb;
}

/* Tour tooltip arrow */
.tour-tooltip::before {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	background: #2d2d2d;
	border: 1px solid #555;
	transform: rotate(45deg);
}

.tour-bottom::before {
	top: -7px;
	left: 50%;
	margin-left: -6px;
	border-right: none;
	border-bottom: none;
}

.tour-top::before {
	bottom: -7px;
	left: 50%;
	margin-left: -6px;
	border-left: none;
	border-top: none;
}

.tour-left::before {
	right: -7px;
	top: 50%;
	margin-top: -6px;
	border-left: none;
	border-bottom: none;
}

.tour-right::before {
	left: -7px;
	top: 50%;
	margin-top: -6px;
	border-right: none;
	border-top: none;
}

/* Help button in footer to restart tour */
.tour-restart-btn {
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	padding: 2px 6px;
	font-size: 14px;
	border-radius: 4px;
}

.tour-restart-btn:hover {
	background: #333;
	color: #ddd;
}

/* Documentation link in footer */
.docs-link-btn {
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	padding: 2px 6px;
	font-size: 14px;
	border-radius: 4px;
}
.docs-link-btn:hover {
	background: #333;
	color: #ddd;
}

/* Help button in header */
.btn-help {
	background: #333;
	color: #ddd;
	border: 1px solid #555;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 14px;
	cursor: pointer;
	margin-left: 6px;
}
.btn-help:hover {
	background: #3a3a3a;
}

/* Documentation/Help Drawer - no backdrop, doesn't block interaction */
.docs-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50vw;
	background: #1b1b1b;
	border-left: 1px solid #333;
	box-shadow: -8px 0 24px rgba(0,0,0,0.45);
	transform: translateX(110%);
	transition: transform .2s ease;
	z-index: 2800;
	display: flex;
	flex-direction: column;
}
@media (max-width: 768px) {
	.docs-drawer {
		width: 100vw;
		border-left: none;
	}
}
.docs-drawer.open {
	transform: translateX(0);
}
.docs-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-bottom: 1px solid #333;
	background: #202020;
	gap: 8px;
}
.docs-title {
	font-size: 14px;
	font-weight: 600;
	flex: 1;
	text-align: center;
}
.docs-nav-btn {
	background: #333;
	color: #ddd;
	border: 1px solid #555;
	border-radius: 4px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.docs-nav-btn:hover:not(:disabled) { background: #3a3a3a; }
.docs-nav-btn:disabled { opacity: 0.4; cursor: default; }
.docs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid #333;
	background: #1e1e1e;
}
.docs-nav-link {
	padding: 6px 10px;
	font-size: 12px;
	color: #aaa;
	text-decoration: none;
	border-radius: 4px;
	background: #2a2a2a;
	border: 1px solid #3a3a3a;
	transition: background .15s, color .15s;
}
.docs-nav-link:hover {
	background: #333;
	color: #fff;
}
.docs-nav-link.active {
	background: #0e639c;
	color: #fff;
	border-color: #0e639c;
}
.docs-content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #ddd;
}
.docs-content h1 { font-size: 22px; margin: 0 0 16px; color: #fff; border-bottom: 1px solid #444; padding-bottom: 8px; }
.docs-content h2 { font-size: 18px; margin: 24px 0 12px; color: #fff; }
.docs-content h3 { font-size: 15px; margin: 20px 0 10px; color: #eee; }
.docs-content p { margin: 0 0 12px; }
.docs-content ul, .docs-content ol { margin: 0 0 12px; padding-left: 24px; }
.docs-content li { margin-bottom: 4px; }
.docs-content code {
	background: #2d2d2d;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 13px;
	color: #e6db74;
}
.docs-content pre {
	background: #1e1e1e;
	border: 1px solid #333;
	border-radius: 6px;
	padding: 12px;
	overflow-x: auto;
	margin: 0 0 16px;
}
.docs-content pre code {
	background: none;
	padding: 0;
	font-size: 13px;
	color: #ddd;
}
.docs-content a {
	color: #6cb6ff;
	text-decoration: none;
}
.docs-content a:hover {
	text-decoration: underline;
}
.docs-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 13px;
}
.docs-content th, .docs-content td {
	border: 1px solid #444;
	padding: 8px 10px;
	text-align: left;
}
.docs-content th {
	background: #2a2a2a;
	color: #fff;
}
.docs-content blockquote {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #252525;
	border-left: 4px solid #0e639c;
	color: #ccc;
}
.docs-content blockquote p:last-child { margin-bottom: 0; }
.docs-content hr {
	border: none;
	border-top: 1px solid #444;
	margin: 24px 0;
}
.docs-loading {
	text-align: center;
	padding: 40px;
	color: #888;
}
.docs-error {
	text-align: center;
	padding: 40px;
	color: #ff8a80;
}

/* Animated arrow hint pointing to Run button */
.run-hint-arrow {
	position: fixed;
	color: #ff4444;
	font-size: 32px;
	font-weight: bold;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1000;
	animation: bounce-hint 1s ease-in-out infinite;
	text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}
.run-hint-arrow.show {
	opacity: 1;
}
@keyframes bounce-hint {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}