@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
	--header-bg: #1a1b26;
	--header-overlay: rgba(26,27,38,0.95);
	--accent-primary: #7aa2f7;
	--accent-secondary: #bb9af7;
	--text-primary: #c0caf5;
	--text-secondary: #a9b1d6;
	--surface-dark: #24283b;
	--space-6: 1.5rem;
	--space-16: 4rem;
	--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;
	--background: 220 30% 98%;
	--foreground: 222 47% 11%;
	--card: 0 0% 100%;
	--card-foreground: 222 47% 11%;
	--popover: 0 0% 100%;
	--popover-foreground: 222 47% 11%;
	--primary: 224 76% 48%;
	--primary-light: 224 84% 95%;
	--primary-dark: 224 76% 38%;
	--secondary: 262 83% 58%;
	--secondary-light: 262 84% 95%;
	--secondary-dark: 262 83% 48%;
	--accent: 199 89% 48%;
	--accent-foreground: 0 0% 100%;
	--accent-light: 199 84% 95%;
	--accent-dark: 199 89% 38%;
	--success: 142 72% 29%;
	--warning: 38 92% 50%;
	--destructive: 0 84% 60%;
	--muted: 220 16% 90%;
	--muted-foreground: 222 20% 40%;
	--border: 220 13% 91%;
	--input: 220 16% 98%;
	--ring: 224 76% 48%;
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;
	--radius-full: 9999px;
	--radius: 1.25rem;
	--header-bg: hsl(220 15% 96%);
	--header-text: hsl(220 15% 20%);
	--primary-hue: 224;
	--primary-saturation: 76%;
	--primary-lightness: 48%;
	--background-hsl: 220 15% 96%;
	--primary-hsl: var(--primary-hue) var(--primary-saturation) var(--primary-lightness);
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: var(--leading-normal);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: linear-gradient(to bottom, hsl(var(--background)) 0, hsla(var(--background), 0) 100%);
	color: hsl(var(--foreground));
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}

img, svg {
	max-width: 100%;
	height: auto;
}

#container, body, html {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

code, pre, textarea {
	font-family: monospace;
}

.transition-all, .transition-colors, .transition-opacity, .transition-transform {
	transition-timing-function: cubic-bezier(0.4,0,0.2,1);
	transition-duration: 150ms;
}

.tooltip:after, .tooltip:before {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
}

h2, h3 {
	font-weight: 600;
}

h2 {
	font-size: 2rem;
	color: hsl(var(--accent));
	line-height: 1.2;
}

h3 {
	font-size: 1.5rem;
	color: hsl(var(--foreground));
	line-height: 1.3;
}

.btn-primary, .btn-secondary:hover {
	color: hsl(var(--primary-foreground));
}

.btn-modern, h3 {
	letter-spacing: -.01em;
}

.btn, .btn-modern, .btn-primary, .btn-secondary, .tag {
	font-weight: 500;
}

textarea {
	resize: vertical;
	min-height: 6rem;
	resize: vertical;
}

input:focus, textarea:focus {
	background: #fff;
	box-shadow: 0 0 0 4px rgba(0,113,227,.15), inset 0 0 0 1px rgba(0,113,227,.5);
	outline: 0;
}

code, pre {
	font-size: .875rem;
	background: #f3f4f6;
	border-radius: .25rem;
	padding: .25rem .5rem;
}

.btn, .btn-modern, .btn-primary, .btn-secondary, .input, select, textarea {
	font-size: var(--text-base);
	transition: .2s cubic-bezier(.4,0,.2,1);
}

pre {
	padding: 1rem;
	overflow-x: auto;
}

.loading-spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: .8s linear infinite spin;
	margin-left: .5rem;
}

.transition-all {
	transition-property: all;
	transition: .3s cubic-bezier(.4,0,.2,1);
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}

.transition-opacity {
	transition-property: opacity;
}

.transition-transform {
	transition-property: transform;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.focus-visible:focus {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.focus-visible:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

::selection {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.card, .card-modern, .result-card, .stat-card {
	background: hsla(var(--card) / .6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--radius-lg);
	border: 1px solid hsla(var(--border) / .5);
	padding: var(--space-6);
	transition: .3s cubic-bezier(.4,0,.2,1);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03), inset 0 0 0 1px rgba(255,255,255,.1);
}

.card-modern:hover, .result-card:hover, .stat-card:hover, .tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px -8px rgba(60,60,120,.12), 0 8px 24px -4px rgba(60,60,120,.08), inset 0 0 0 1px rgba(255,255,255,.15);
	border-color: hsla(var(--primary) / .2);
}

.btn, .btn-modern, .btn-primary, .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-weight: 600;
	line-height: var(--leading-snug);
	border-radius: var(--radius-lg);
	border: 1px solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.btn-primary {
	background: linear-gradient(135deg, hsl(var(--primary)) 0, hsl(var(--primary-dark)) 100%);
	box-shadow: 0 4px 12px -2px hsla(var(--primary) / .3), inset 0 0 0 1px hsla(var(--primary-foreground) / .1);
	background: var(--accent-primary);
	border-radius: .75rem;
	padding: .75rem 1.5rem;
	font-weight: 600;
	transition: background .2s;
	background: hsl(var(--primary));
	color: #fff;
	border: none;
}

.btn-primary:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, hsl(var(--primary-dark)) 0, hsl(var(--primary)) 100%);
	box-shadow: 0 8px 16px -4px hsla(var(--primary) / .5), inset 0 0 0 1px hsla(var(--primary-foreground) / .2);
	background: var(--accent-secondary);
	background: hsl(var(--accent));
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px -2px hsla(var(--primary) / .3), inset 0 0 0 1px hsla(var(--primary-foreground) / .1);
}

.btn-primary:focus-visible {
	outline: 2px solid hsl(var(--primary));
	outline-offset: 2px;
}

.btn-secondary {
	background: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
	background: hsl(var(--secondary));
	color: #fff;
	border: none;
}

.btn-secondary:hover {
	background: hsl(var(--primary));
}

.input, select, textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	line-height: var(--leading-normal);
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
}

.input, select {
	height: 2.75rem;
}

.input:hover, select:hover, textarea:hover {
	border-color: hsl(var(--border) / .8);
	background: hsl(var(--background) / .8);
}

.input:focus, select:focus, textarea:focus {
	outline: 0;
	border-color: hsl(var(--primary));
	background: hsl(var(--background));
	box-shadow: 0 0 0 3px hsl(var(--primary) / .15), inset 0 0 0 1px hsl(var(--primary) / .2);
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right .5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
}

.checkbox, .radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.checkbox input[type=checkbox], .radio input[type=radio] {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid hsl(var(--border));
	background-color: hsl(var(--background));
	transition: .2s cubic-bezier(.4,0,.2,1);
}

.checkbox input[type=checkbox] {
	border-radius: var(--radius-sm);
}

.radio input[type=radio] {
	border-radius: 50%;
}

.checkbox input[type=checkbox]:checked, .radio input[type=radio]:checked {
	background-color: hsl(var(--primary));
	border-color: hsl(var(--primary));
}

.checkbox input[type=checkbox]:checked::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: .75rem;
	height: .75rem;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.container, .container-custom {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.tag, .tooltip:before {
	padding: .375rem .75rem;
	font-size: .875rem;
}

.shadow-elegant {
	box-shadow: 0 2px 4px rgba(0,0,0,.02), 0 4px 8px rgba(0,0,0,.02), 0 8px 16px rgba(0,0,0,.02), inset 0 0 0 1px rgba(255,255,255,.1);
}

.shadow-card {
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03), inset 0 0 0 1px rgba(255,255,255,.1);
}

.glass {
	background: hsla(var(--background) / .8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid hsla(var(--border) / .3);
}

.glass-hover:hover {
	background: hsla(var(--background) / .9);
	border-color: hsla(var(--primary) / .2);
}

.hover-lift {
	transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.shadow-float {
	box-shadow: 0 4px 12px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);
}

.animate-fadeIn {
	animation: .4s cubic-bezier(.4,0,.2,1) forwards fadeIn;
}

.animate-slideUp {
	animation: .6s cubic-bezier(.34,1.56,.64,1) forwards slideUp;
}

.animate-glow {
	animation: 4s ease-in-out infinite glow;
}

.opacity-0 {
	opacity: 0;
}

.animate-shimmer {
	background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
	background-size: 1000px 100%;
	animation: 2s infinite shimmer;
}

.animate-fade-in {
	animation: .6s ease-out fadeIn;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip:before {
	content: attr(data-tooltip);
	border-radius: .5rem;
	color: #fff;
	background: #1d1d1f;
	transition: .2s;
	white-space: nowrap;
	margin-bottom: 5px;
}

.btn-modern, .tag:hover {
	color: var(--primary-foreground);
}

.tooltip:after {
	content: '';
	border: 4px solid transparent;
	border-top-color: #1d1d1f;
	transition: .2s;
	margin-bottom: 3px;
}

.tooltip:hover:after, .tooltip:hover:before {
	opacity: 1;
	visibility: visible;
}

.results-grid {
	grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
	display: grid;
	gap: 1rem;
}

.tool-card {
	background: rgba(255,255,255,.9) !important;
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.5) inset;
	transition: .3s;
	min-height: 12rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tool-card:hover {
	background: rgba(255,255,255,.95) !important;
	transform: translateY(-2px);
	box-shadow: 0 20px 48px -8px rgba(60,60,120,.25), 0 0 0 1px rgba(255,255,255,.6) inset;
}

.tag {
	display: inline-flex;
	align-items: center;
	border-radius: 8px;
	background: var(--input);
	transition: .2s;
}

.tag:hover {
	background: var(--primary);
}

.stat-value {
	font-size: 2rem;
	font-weight: 600;
	color: var(--primary);
}

.stat-label {
	font-size: .875rem;
	color: var(--muted);
	font-weight: 500;
}

.text-muted {
	color: #4b5563;
}

.text-muted-dark {
	color: #374151;
}

.text-primary {
	color: var(--text-primary);
}

.text-secondary {
	color: var(--text-secondary);
}

.katex-display {
	margin: 1rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: center;
}

.katex {
	font-size: 1.1em;
	white-space: normal;
}

.katex-error {
	color: #e53e3e;
	font-size: .9em;
	padding: .5rem;
	background: #fff5f5;
	border-radius: .5rem;
}

.katex-display>.katex {
	white-space: nowrap;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding: .5rem 0;
}

.gap-2 {
	gap: .5rem;
}

.gap-4 {
	gap: 1rem;
}

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

.bg-grid-pattern {
	background-image: linear-gradient(to right, hsla(var(--primary) / .1) 1px, transparent 1px), linear-gradient(to bottom, hsla(var(--primary) / .1) 1px, transparent 1px);
	background-size: 24px 24px;
}

.main-header-title {
	font-size: clamp(2rem,7vw,3.5rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.02em;
}

.main-header-desc {
	max-width: 90vw;
	font-size: clamp(1rem,4vw,1.25rem);
	margin-left: auto;
	margin-right: auto;
}

.glass-badge, .header-badge {
	display: inline-flex;
	backdrop-filter: blur(8px);
}

.header-badge {
	align-items: center;
	background: var(--surface-dark);
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
	animation: .8s ease-out 50ms forwards slide-up;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2,0.5rem);
	border-radius: var(--radius-lg,0.5rem);
	padding: var(--space-1,0.25rem) var(--space-3,0.75rem);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	background-color: var(--surface-muted, hsl(210,84%,32%));
	color: var(--text-white, hsl(0,0%,88%));
	border: 1px solid var(--border, hsl(213,15%,12%));
}

.glass-badge, .glass-title {
	background: hsla(var(--card) / .3);
	box-shadow: 0 2px 8px hsla(var(--shadow) / .1);
}

.glass-badge {
	align-items: center;
	gap: .75rem;
	padding: .5rem 1.25rem;
	border-radius: 9999px;
	border: 1px solid hsla(var(--border) / .3);
	-webkit-backdrop-filter: blur(8px);
	color: hsl(var(--foreground));
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .025em;
	margin-bottom: 2rem;
	transform-origin: center;
	animation: .5s cubic-bezier(.21,1.02,.73,1) forwards badge-appear;
}

.glass-title {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid hsla(var(--border) / .3);
	border-radius: .75rem;
}

.bg-gradient-title {
	background: linear-gradient(90deg, hsl(var(--primary)) 0, hsl(var(--secondary)) 50%, hsl(var(--primary)) 100%);
	background-size: 200% 100%;
	animation: 8s linear infinite shimmer;
}

.header-badge i {
	color: var(--accent-primary);
	color: #7aa2f7;
}

.animate-bounce-gentle {
	animation: 2s ease-in-out infinite bounce-gentle;
}

.animate-float {
	animation: 6s ease-in-out infinite float;
}

.animate-sparkle {
	animation: 2s ease-in-out infinite sparkle;
}

.animate-pulse-slow {
	animation: 8s ease-in-out infinite pulse-slow;
}

.animate-slide-up, .header-title {
	animation: .8s ease-out forwards slide-up;
}

.header-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--header-grid-color, var(--border)) 1px, transparent 1px), linear-gradient(90deg, var(--header-grid-color, var(--border)) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center;
	opacity: var(--header-grid-opacity,0.07);
	mask-image: linear-gradient(to bottom,black 70%,transparent 100%);
	pointer-events: none;
	z-index: -1;
}

.header-content {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	padding: var(--space-16,4rem) var(--space-6,1.5rem);
	background-color: hsla(var(--surface-bg-raw,0 0% 100%) / 0.5);
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl,1rem);
	box-shadow: var(--shadow-lg);
	max-width: 80rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6,1.5rem);
	text-align: center;
}

.header-title {
	font-size: clamp(2.25rem,5vw,3.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--text-primary);
	color: var(--primary);
}

.header-description {
	max-width: 45rem;
	margin: 0 auto;
	font-size: clamp(1rem,2vw,1.125rem);
	color: var(--text-muted);
	line-height: 1.6;
}

.button-group .btn, .tab-button {
	font-weight: 600;
	padding: .75rem 1.5rem;
}

.tab-button {
	font-size: 1.05rem;
	border-radius: .75rem .75rem 0 0;
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
	border: 1px solid hsl(var(--border));
	border-bottom: none;
	box-shadow: 0 2px 8px rgba(60,60,120,.04);
	transition: background .2s, color .2s, box-shadow .2s;
	margin-bottom: -1px;
}

.tab-button.active {
	background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)) 90%);
	color: #fff;
	border-color: hsl(var(--primary));
	box-shadow: 0 4px 16px -4px hsl(var(--primary) / .15);
	z-index: 2;
}

.tab-button:focus {
	outline: 2px solid hsl(var(--primary));
	outline-offset: 2px;
}

.editor-container {
	background: hsl(var(--card));
	border-radius: 1.25rem;
	box-shadow: 0 8px 32px -8px rgba(60,60,120,.1);
	border: 1px solid hsl(var(--border));
	overflow: hidden;
	margin-bottom: 2rem;
}

.editor-pane {
	background: hsl(var(--background));
	border-right: 1px solid hsl(var(--border));
}

.preview-pane {
	background: #fff;
	border-left: 1px solid hsl(var(--border));
}

#preview-frame {
	background: #fff;
	border-radius: 0 1.25rem 1.25rem 0;
}

.button-group .btn {
	font-size: 1rem;
	border-radius: .75rem;
	box-shadow: 0 2px 8px rgba(60,60,120,.08);
}

.library-menu {
	background: hsl(var(--popover));
	color: hsl(var(--popover-foreground));
	border-radius: 1rem;
	box-shadow: 0 8px 32px -8px rgba(60,60,120,.12);
	border: 1px solid hsl(var(--border));
	padding: 1.25rem;
	min-width: 320px;
	z-index: 100;
}

.library-item {
	border-radius: .5rem;
	padding: .75rem 1rem;
	transition: background .2s;
}

.library-item:hover {
	background: hsl(var(--muted));
}

.console-container {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	border-radius: .75rem;
	box-shadow: 0 2px 8px rgba(60,60,120,.08);
	border: 1px solid hsl(var(--border));
	font-family: 'Fira Mono', Consolas, Monaco, monospace;
	font-size: 1rem;
	padding: 1rem;
	margin-top: 1.5rem;
	min-height: 120px;
	max-height: 240px;
	overflow-y: auto;
}

.console-line.error {
	color: hsl(var(--destructive));
}

.console-line.warn {
	color: hsl(var(--warning));
}

.console-line.info {
	color: hsl(var(--primary));
}

.auto-reload-toggle .toggle-label {
	color: hsl(var(--muted-foreground));
	font-weight: 500;
	font-size: 1rem;
}

@keyframes spin {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(1turn);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		opacity: .2;
	}

	50% {
		opacity: .5;
		opacity: .4;
	}

	0% {
		opacity: .5;
		transform: scale(.95);
	}

	100% {
		opacity: .8;
		transform: scale(1.05);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media print {
	.no-print {
		display: none !important;
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
		transform: translateY(0) rotate(0);
		transform: translate(0,0) rotate(0);
	}

	50% {
		transform: translateY(-8px);
	}

	25% {
		transform: translateY(-8px) rotate(1deg);
		transform: translate(-1rem,-1rem) rotate(-2deg);
	}

	75% {
		transform: translateY(4px) rotate(-1deg);
		transform: translate(1rem,1rem) rotate(2deg);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(.98);
	}

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

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(.98);
	}

	60% {
		transform: translateY(-2px) scale(1.01);
	}

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

@keyframes glow {
	0%, 100% {
		opacity: .5;
		filter: blur(20px);
	}

	50% {
		opacity: 1;
		filter: blur(16px);
	}
}

@keyframes slideLeft {
	from {
		transform: translateX(1rem);
		opacity: 0;
	}

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

@keyframes slideRight {
	from {
		transform: translateX(-1rem);
		opacity: 0;
	}

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

@keyframes scale {
	from {
		transform: scale(.95);
		opacity: 0;
	}

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

@media (min-width:768px) {
	body {
		font-size: 14px;
	}

	.main-header-title, h1 {
		font-size: 1.8rem;
	}

	.container-custom {
		padding: 0 2rem;
	}

	.results-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
		gap: 1.5rem;
	}

	.card {
		padding: 1.5rem;
	}
}

@media (max-width:768px) {
	.container, .container-custom {
		padding-left: .75rem;
		padding-right: .75rem;
	}

	.main-header-title, h1 {
		font-size: clamp(1.5rem,6vw,2.25rem);
	}

	.container {
		padding: 0 .75rem;
	}

	.main-header-title {
		font-size: 1.5rem;
	}

	.main-header-desc {
		font-size: 1rem;
	}

	.header-banner {
		padding: 4rem 1rem;
	}

	.glass-badge, .glass-title {
		padding: .375rem 1rem;
	}

	.header-accent {
		width: 8rem;
		height: 8rem;
	}

	.header-accent-primary, .header-accent-secondary {
		width: 15rem;
		height: 15rem;
	}

	.glass-badge {
		font-size: .75rem;
		margin-bottom: 1.5rem;
	}

	.header-title {
		font-size: clamp(1.5rem,4vw,2.25rem);
	}

	.header-description {
		font-size: clamp(.875rem,1.5vw,1rem);
	}
}

@media (max-width:1024px) {
	.container, .container-custom {
		max-width: 100vw;
		padding-left: .75rem;
		padding-right: .75rem;
	}

	.main-header-title {
		font-size: 2.25rem;
	}
}

@media screen and (max-width:640px) {
	:root {
		--container-padding: 1rem;
	}

	h1 {
		font-size: clamp(1.5rem,6vw,2.25rem);
	}

	.btn {
		padding: .5rem 1rem;
		font-size: .875rem;
	}

	.container, .container-custom {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.tool-card {
		min-height: 9rem;
		padding: 1rem;
	}
}

@media screen and (max-width:480px) {
	.container {
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
	}

	header {
		padding: 4rem var(--container-padding);
	}
}

@supports(padding:max(0px)) {
	.pb-safe {
		padding-bottom: max(env(safe-area-inset-bottom), 1rem);
	}
}

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

@layer base {
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		font-feature-settings: "rlig" 1, "calt" 1;
	}
}

@layer components {
	.container-custom {
		@apply container mx-auto px-4 max-w-7xl;
	}
}

@media (max-width:640px) {
	.main-header-logo {
		height: 3.5rem;
		width: 3.5rem;
	}
}

@media (pointer:coarse) {
	.btn, a, button {
		min-height: 44px;
		min-width: 44px;
	}

	input, select, textarea {
		font-size: 16px;
	}
}

@keyframes bounce-gentle {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(10px);
	}
}

@keyframes sparkle {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .8;
		transform: scale(1.1);
	}
}

@keyframes pulse-slow {
	0%, 100% {
		opacity: .2;
	}

	50% {
		opacity: .3;
	}
}

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

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

@keyframes grid-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}

	100% {
		background-position: 1000px 0;
	}

	to {
		background-position: -200% 0;
	}
}

@keyframes badge-appear {
	0% {
		opacity: 0;
		transform: scale(.9) translateY(10px);
	}

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

@media (max-width:900px) {
	.editor-container {
		flex-direction: column;
	}

	.editor-pane, .preview-pane {
		min-width: 0;
		max-width: 100%;
		border-radius: 0;
	}

	#preview-frame {
		border-radius: 0 0 1.25rem 1.25rem;
	}
}

@media (max-width:600px) {
	.controls-bottom, .controls-wrapper {
		flex-direction: column;
		gap: 1rem;
	}

	.button-group, .tab-group {
		width: 100%;
		justify-content: center;
	}
}