/* Reset and base styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.6;
	color: #1a1a1a;
	background: #f8fafc;
	min-height: 100vh;
	font-weight: 400;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px 24px;
}

/* Header */
header {
	text-align: center;
	margin-bottom: 3rem;
}

header h1 {
	color: #1a1a1a;
	margin-bottom: 0.5rem;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

header p {
	color: #64748b;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Header info section */
.header-info {
	margin-top: 2rem;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.description {
	color: #475569;
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
	font-weight: 400;
}

.quick-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.github-link,
.help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	cursor: pointer;
	letter-spacing: -0.01em;
}

.github-link {
	background: #1a1a1a;
	color: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.github-link:hover {
	background: #000000;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.help-toggle {
	background: #3b82f6;
	color: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.help-toggle:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.help-toggle:focus,
.github-link:focus {
	outline: 2px solid #007aff;
	outline-offset: 2px;
}

/* Help section */
.help-section {
	background: white;
	border-radius: 16px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	border: 1px solid #e2e8f0;
	animation: slideDown 0.3s ease-out;
}

.help-section.hidden {
	display: none;
}

.help-section h2 {
	color: #1a1a1a;
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	text-align: center;
	letter-spacing: -0.025em;
}

.help-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.help-step {
	background: #f8fafc;
	border-radius: 12px;
	padding: 1.5rem;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.help-step:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.help-step h3 {
	color: #3b82f6;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	letter-spacing: -0.015em;
}

.help-step p {
	color: #475569;
	line-height: 1.6;
	font-size: 0.875rem;
}

.example-section {
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), rgba(0, 122, 255, 0.02));
	border: 1px solid rgba(0, 122, 255, 0.1);
	border-radius: 16px;
	padding: 2rem;
}

.example-section h3 {
	color: #1d1d1f;
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	letter-spacing: -0.01em;
}

.example-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.example-list li {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.example-list li:hover {
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.example-list strong {
	color: #007aff;
	font-weight: 600;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Main layout */
.app-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	background: white;
	padding: 2rem;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	border: 1px solid #e2e8f0;
}

#main-content {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0;
	}
}

aside {
	max-width: 400px;
}

/* Code section */
.code-section {
	display: flex;
	flex-direction: column;
}

.code-section label {
	font-weight: 700;
	color: #1a1a1a;
	font-size: 1rem;
	letter-spacing: -0.015em;
	margin-bottom: 0.5rem;
	display: block;
}

/* Code editor container */
.code-editor-container {
	position: relative;
	border: 2px solid #e5e5e7;
	border-radius: 12px;
	background: #fafafa;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.code-editor-container:focus-within {
	border-color: #007aff;
	box-shadow:
		0 0 0 4px rgba(0, 122, 255, 0.1),
		0 4px 20px rgba(0, 122, 255, 0.15);
	background: #ffffff;
}

.code-editor-wrapper {
	position: relative;
	display: flex;
	min-height: 300px;
	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
	font-size: 14px;
	line-height: 1.6;
}

/* Line numbers */
.line-numbers {
	background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ea 100%);
	border-right: 1px solid #d1d1d6;
	color: #86868b;
	padding: 1.5rem 0.75rem 1.5rem 1rem;
	text-align: right;
	user-select: none;
	min-width: 50px;
	font-size: 13px;
	white-space: pre;
}

/* Code display (syntax highlighted) */
.code-display {
	flex: 1;
	padding: 1.5rem;
	white-space: pre-wrap;
	word-wrap: break-word;
	pointer-events: none;
	color: transparent;
	position: absolute;
	top: 0;
	left: 50px;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* Actual textarea (invisible but functional) */
#code-editor {
	flex: 1;
	background: #1e293b;
	border: 1px solid #334155;
	outline: none;
	font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
	font-size: 14px;
	line-height: 1.6;
	color: #e2e8f0;
	resize: none;
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 500px;
	border-radius: 12px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 16px;
}

#code-editor .CodeMirror {
	height: 540px;
}

#code-editor::placeholder {
	color: #86868b;
	font-style: italic;
}

/* Syntax highlighting classes */
.syntax-keyword {
	color: #af52de;
	font-weight: 600;
}

.syntax-string {
	color: #d12f1b;
}

.syntax-number {
	color: #272ad8;
}

.syntax-comment {
	color: #707070;
	font-style: italic;
}

.syntax-function {
	color: #4b21b0;
}

.syntax-operator {
	color: #1d1d1f;
}

.syntax-property {
	color: #0e4b99;
}

.syntax-variable {
	color: #1d1d1f;
}

.syntax-punctuation {
	color: #1d1d1f;
}

.syntax-method {
	color: #4b21b0;
}

.syntax-boolean {
	color: #af52de;
}

.syntax-null {
	color: #af52de;
}

.syntax-undefined {
	color: #af52de;
}

/* Error state styling */
#code-editor.has-errors {
	border-color: #ff3b30;
	box-shadow:
		0 0 0 4px rgba(255, 59, 48, 0.1),
		0 4px 20px rgba(255, 59, 48, 0.15);
	background: #fff5f5;
}

.code-editor-container.has-errors {
	border-color: #ff3b30;
	box-shadow:
		0 0 0 4px rgba(255, 59, 48, 0.1),
		0 4px 20px rgba(255, 59, 48, 0.15);
	background: #fff5f5;
}

/* Error display */
.error-panel {
	margin-top: 1rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
	border: 1px solid rgba(255, 59, 48, 0.2);
	border-radius: 12px;
	color: #d70015;
	font-size: 14px;
	line-height: 1.5;
	backdrop-filter: blur(10px);
}

.error-panel.hidden {
	display: none;
}

/* Error item styling */
.error-item {
	margin-bottom: 1rem;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.8);
	border-left: 4px solid #ff3b30;
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.error-item:last-child {
	margin-bottom: 0;
}

/* Error type badges */
.error-type {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 6px;
	margin-right: 0.75rem;
	letter-spacing: 0.5px;
}

.error-type-syntax {
	background: linear-gradient(135deg, #ff3b30, #d70015);
	color: white;
}

.error-type-reference {
	background: linear-gradient(135deg, #ff9500, #ff6b00);
	color: white;
}

.error-type-type {
	background: linear-gradient(135deg, #8e4b00, #5d2f00);
	color: white;
}

.error-type-general {
	background: linear-gradient(135deg, #86868b, #6d6d70);
	color: white;
}

.error-type-comment {
	background: linear-gradient(135deg, #ffcc00, #ff9f00);
	color: white;
}

/* Error message */
.error-message {
	font-weight: 500;
	color: #1d1d1f;
}

/* Error location info */
.error-location {
	display: block;
	font-size: 0.875rem;
	color: #86868b;
	margin-top: 0.5rem;
	font-family: 'SF Mono', monospace;
}

/* Error context code */
.error-context {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: rgba(248, 249, 250, 0.8);
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.error-context code {
	font-family: 'SF Mono', monospace;
	font-size: 0.875rem;
	color: #1d1d1f;
	background: none;
	padding: 0;
}

/* Name section */
.name-section {
	display: flex;
	flex-direction: column;
}

.name-section label {
	font-weight: 700;
	color: #1a1a1a;
	font-size: 1rem;
	letter-spacing: -0.015em;
	margin-bottom: 0.5rem;
	display: block;
}

#bookmarklet-name {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	background: white;
	color: #1a1a1a;
	width: 100%;
}

#bookmarklet-name:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	background: white;
}

#bookmarklet-name::placeholder {
	color: #9ca3af;
}

/* Libraries section */
.libraries-section {
	display: flex;
	flex-direction: column;
}

.libraries-section label {
	font-weight: 700;
	color: #1a1a1a;
	font-size: 1rem;
	letter-spacing: -0.015em;
	margin-bottom: 0.5rem;
	display: block;
}

.controls-section {

	input,
	textarea {
		margin-bottom: 1rem;
	}
}

#bookmarklet-libraries {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 400;
	font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
	transition: all 0.2s ease;
	background: white;
	color: #1a1a1a;
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
	width: 100%;
}

#bookmarklet-libraries:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	background: white;
}

#bookmarklet-libraries::placeholder {
	color: #9ca3af;
	font-family: inherit;
}

/* Output section */
.output-section h2 {
	color: #1a1a1a;
	margin-bottom: 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.output-display {
	padding: 1.5rem;
	border: 2px dashed #d1d5db;
	border-radius: 12px;
	min-height: 120px;
	transition: all 0.2s ease;
	position: relative;
	background: #f8fafc;
	overflow: hidden;
}

.output-display * {
	-webkit-user-drag: auto;
}

.output-display .bookmarklet-link {
	-webkit-user-drag: element !important;
	-khtml-user-drag: element !important;
	-moz-user-drag: element !important;
	-o-user-drag: element !important;
	user-drag: element !important;
}

.output-display.has-content {
	border-color: #10b981;
	background: #f0fdf4;
	border-style: solid;
}

.output-display.has-error {
	border-color: #ef4444;
	background: #fef2f2;
	border-style: solid;
}

.output-display.generation-success {
	transform: scale(1.01);
	box-shadow:
		0 8px 32px rgba(48, 209, 88, 0.2),
		0 2px 8px rgba(48, 209, 88, 0.1);
}

/* Placeholder state */
.placeholder-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #86868b;
	min-height: 100px;
}

.placeholder-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	opacity: 0.7;
}

.placeholder-message h3 {
	margin-bottom: 0.5rem;
	color: #515154;
	font-weight: 600;
	font-size: 1.1rem;
}

.placeholder-message p {
	font-style: italic;
	font-size: 0.95rem;
	color: #86868b;
}

/* Bookmarklet container */
.bookmarklet-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bookmarklet-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
}

.bookmarklet-title {
	color: #1d1d1f;
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
	word-break: break-word;
	letter-spacing: -0.01em;
}

.bookmarklet-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.libraries-info {
	overflow: hidden;
}

/* Length information */
.length-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: 500;
	backdrop-filter: blur(10px);
}

.length-info.length-good {
	background: linear-gradient(135deg, rgba(48, 209, 88, 0.1), rgba(48, 209, 88, 0.05));
	color: #1f7a1f;
	border: 1px solid rgba(48, 209, 88, 0.2);
}

.length-info.length-warning {
	background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(255, 204, 0, 0.05));
	color: #996600;
	border: 1px solid rgba(255, 204, 0, 0.2);
}

.length-info.length-long {
	background: linear-gradient(135deg, rgba(255, 149, 0, 0.1), rgba(255, 149, 0, 0.05));
	color: #cc5500;
	border: 1px solid rgba(255, 149, 0, 0.2);
}

.length-info.length-error {
	background: linear-gradient(135deg, rgba(255, 59, 48, 0.1), rgba(255, 59, 48, 0.05));
	color: #d70015;
	border: 1px solid rgba(255, 59, 48, 0.2);
}

.length-icon {
	font-size: 1rem;
}

.length-text {
	white-space: nowrap;
	font-weight: 600;
}

/* Bookmarklet link container */
.bookmarklet-link-container {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
}

.bookmarklet-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	cursor: move;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	-webkit-user-drag: element;
	-khtml-user-drag: element;
	-moz-user-drag: element;
	-o-user-drag: element;
	user-drag: element;
	position: relative;
	overflow: hidden;
	z-index: 20;
	letter-spacing: -0.015em;
}

.bookmarklet-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s ease;
}

.bookmarklet-link:hover::before {
	left: 100%;
}

.bookmarklet-link:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.bookmarklet-link:active {
	transform: translateY(0);
	box-shadow:
		0 4px 20px rgba(0, 122, 255, 0.3),
		0 2px 8px rgba(0, 122, 255, 0.2);
}

.bookmarklet-link.dragging {
	opacity: 0.9;
	transform: rotate(2deg) scale(1.05);
	box-shadow:
		0 12px 40px rgba(0, 122, 255, 0.5),
		0 4px 15px rgba(0, 122, 255, 0.3);
	border: 2px solid rgba(48, 209, 88, 0.5);
}

/* Drag feedback overlay */
.drag-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(48, 209, 88, 0.95), rgba(30, 175, 75, 0.95));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	z-index: 10;
	animation: dragPulse 0.8s ease-in-out infinite alternate;
	backdrop-filter: blur(10px);
}

.drag-message {
	text-align: center;
	color: white;
}

.drag-icon {
	font-size: 2.5rem;
	margin-bottom: 0.75rem;
	animation: dragBounce 1s ease-in-out infinite alternate;
}

.drag-text {
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

@keyframes dragPulse {
	from {
		opacity: 0.9;
	}

	to {
		opacity: 1;
	}
}

@keyframes dragBounce {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-8px);
	}
}

/* Instructions */
.bookmarklet-instructions {
	background: linear-gradient(135deg, rgba(248, 249, 250, 0.8), rgba(241, 243, 244, 0.8));
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	padding: 1.5rem;
	font-size: 0.95rem;
	backdrop-filter: blur(10px);
}

.bookmarklet-instructions p {
	margin: 0 0 0.75rem 0;
	color: #1d1d1f;
	font-weight: 600;
}

.bookmarklet-instructions ul {
	margin: 0;
	padding-left: 1.5rem;
	color: #515154;
}

.bookmarklet-instructions li {
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

/* Warning display */
.bookmarklet-warning {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(255, 204, 0, 0.05));
	border: 1px solid rgba(255, 204, 0, 0.2);
	border-radius: 12px;
	padding: 1.5rem;
	margin-top: 1rem;
	backdrop-filter: blur(10px);
}

.warning-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.warning-message {
	color: #996600;
	font-size: 0.95rem;
	line-height: 1.5;
	font-weight: 500;
}

/* Error state */
.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #d70015;
	min-height: 100px;
	gap: 1rem;
}

.error-icon {
	font-size: 2.5rem;
	opacity: 0.8;
}

.error-message h3 {
	margin: 0 0 0.75rem 0;
	color: #1d1d1f;
	font-size: 1.2rem;
	font-weight: 600;
}

.error-message p {
	margin: 0;
	color: #86868b;
	font-size: 0.95rem;
}

/* Responsive design */
@media (min-width: 768px) {
	.app-layout {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 2.5rem;
	}

	.code-section {
		grid-row: 1 / 4;
	}

	.name-section {
		grid-column: 2;
		grid-row: 1;
	}

	.libraries-section {
		grid-column: 2;
		grid-row: 2;
	}

	.output-section {
		grid-column: 2;
		grid-row: 3;
	}
}

@media (max-width: 767px) {
	.container {
		padding: 20px 15px;
	}

	.app-layout {
		padding: 2rem;
		gap: 2rem;
	}

	header h1 {
		font-size: 2.5rem;
	}

	.description {
		font-size: 1rem;
	}

	.quick-links {
		flex-direction: column;
		align-items: center;
	}

	.github-link,
	.help-toggle {
		width: 100%;
		max-width: 280px;
		justify-content: center;
	}

	.help-section {
		padding: 2rem;
	}

	.help-section h2 {
		font-size: 1.6rem;
	}

	.help-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.help-step {
		padding: 1.5rem;
	}

	.example-section {
		padding: 1.5rem;
	}

	.example-list {
		grid-template-columns: 1fr;
	}

	#code-editor {
		min-height: 200px;
		font-size: 16px;
	}

	#bookmarklet-name {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 15px 10px;
	}

	.app-layout {
		padding: 1.5rem;
		gap: 1.5rem;
		border-radius: 16px;
	}

	header {
		margin-bottom: 2rem;
	}

	header h1 {
		font-size: 2rem;
	}

	header p {
		font-size: 1.1rem;
	}
}

/* Focus management and accessibility */
*:focus {
	outline: 2px solid #007aff;
	outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus,
a:focus {
	outline: 2px solid #007aff;
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.app-layout {
		border: 2px solid #000;
		background: #fff;
	}

	#code-editor,
	#bookmarklet-name {
		border: 2px solid #000;
		background: #fff;
	}

	.bookmarklet-link {
		border: 2px solid #000;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	body {
		color: #f2f2f7;
		background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
	}

	header h1 {
		color: #f2f2f7;
	}

	header p {
		color: #98989d;
	}

	.app-layout {
		background: rgba(28, 28, 30, 0.9);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.code-section label,
	.name-section label,
	.output-section h2 {
		color: #f2f2f7;
	}

	#code-editor {
		background: #1c1c1e;
		color: #f2f2f7;
		border-color: #48484a;
	}

	#code-editor:focus {
		background: #2c2c2e;
		border-color: #0a84ff;
		box-shadow:
			0 0 0 4px rgba(10, 132, 255, 0.2),
			0 4px 20px rgba(10, 132, 255, 0.25);
	}

	#bookmarklet-name {
		background: #1c1c1e;
		color: #f2f2f7;
		border-color: #48484a;
	}

	#bookmarklet-name:focus {
		background: #2c2c2e;
		border-color: #0a84ff;
		box-shadow:
			0 0 0 4px rgba(10, 132, 255, 0.2),
			0 4px 20px rgba(10, 132, 255, 0.25);
	}

	.output-display {
		background: rgba(44, 44, 46, 0.5);
		border-color: #48484a;
	}

	.bookmarklet-link {
		background: linear-gradient(135deg, #0a84ff, #007aff);
	}

	/* Dark mode code editor */
	.code-editor-container {
		background: #1c1c1e;
		border-color: #48484a;
	}

	.code-editor-container:focus-within {
		background: #2c2c2e;
		border-color: #0a84ff;
		box-shadow:
			0 0 0 4px rgba(10, 132, 255, 0.2),
			0 4px 20px rgba(10, 132, 255, 0.25);
	}

	.line-numbers {
		background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
		border-right: 1px solid #48484a;
		color: #98989d;
	}

	#code-editor {
		color: #f2f2f7;
	}

	#code-editor::placeholder {
		color: #98989d;
	}

	/* Dark mode syntax highlighting */
	.syntax-keyword {
		color: #ff7ab2;
	}

	.syntax-string {
		color: #fc6a5d;
	}

	.syntax-number {
		color: #d0bf69;
	}

	.syntax-comment {
		color: #6c7986;
	}

	.syntax-function {
		color: #67b7a4;
	}

	.syntax-property {
		color: #6bdfff;
	}

	.syntax-method {
		color: #67b7a4;
	}

	.syntax-boolean,
	.syntax-null,
	.syntax-undefined {
		color: #ff7ab2;
	}
}

/* Utility classes */
.hidden {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
	position: absolute;
	top: -50px;
	left: 6px;
	background: #007aff;
	color: white;
	padding: 8px 12px;
	text-decoration: none;
	border-radius: 8px;
	z-index: 1000;
	font-weight: 600;
}

.skip-link:focus {
	top: 6px;
}

/* Modal styles */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: modalFadeIn 0.3s ease-out;
}

.modal.show {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 16px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.3),
		0 8px 32px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	max-width: 90vw;
	max-height: 90vh;
	width: 800px;
	display: flex;
	flex-direction: column;
	animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-header h3 {
	margin: 0;
	color: #1d1d1f;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.modal-close {
	background: none;
	border: none;
	font-size: 2rem;
	color: #86868b;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 8px;
	transition: all 0.2s ease;
	line-height: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-close:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #1d1d1f;
}

.modal-close:focus {
	outline: 2px solid #007aff;
	outline-offset: 2px;
}

.modal-body {
	padding: 2rem;
	overflow: auto;
	flex: 1;
}

.modal-body pre {
	margin: 0;
	background: #f8f9fa;
	border: 1px solid #e5e5e7;
	border-radius: 12px;
	padding: 1.5rem;
	overflow-x: auto;
	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
	font-size: 14px;
	line-height: 1.6;
	color: #1d1d1f;
	white-space: pre-wrap;
	word-break: break-all;
}

.modal-body code {
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Modal animations */
@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Dark mode modal styles */
@media (prefers-color-scheme: dark) {
	.modal {
		background-color: rgba(0, 0, 0, 0.7);
	}

	.modal-content {
		background: rgba(28, 28, 30, 0.95);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.modal-header {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.modal-header h3 {
		color: #f2f2f7;
	}

	.modal-close {
		color: #98989d;
	}

	.modal-close:hover {
		background: rgba(255, 255, 255, 0.1);
		color: #f2f2f7;
	}

	.modal-body pre {
		background: #1c1c1e;
		border: 1px solid #48484a;
		color: #f2f2f7;
	}
}

/* Responsive modal */
@media (max-width: 768px) {
	.modal-content {
		width: 95vw;
		max-height: 85vh;
	}

	.modal-header {
		padding: 1rem 1.5rem;
	}

	.modal-header h3 {
		font-size: 1.2rem;
	}

	.modal-body {
		padding: 1.5rem;
	}

	.modal-body pre {
		font-size: 13px;
		padding: 1rem;
	}
}