.captcha {
	background-color:#f9f9f9;
	border:2px solid #d3d3d3;
	border-radius:5px;
	color:#4c4a4b;
	display:flex;
	justify-content:center;
	align-items:center;
}

@media screen and (max-width: 500px) {
	.captcha {
		flex-direction:column;
	}
	.text {
		margin:.5em!important;
		text-align:center;
	}
	.logo {
		align-self: center!important;
	}
	.spinner {
		margin:2em .5em .5em .5em!important;
	}
}

.text {
	font-size:1.75em;
	font-weight:500;
	margin-right:1em;
}
.spinner {
	position:relative;
	width:2em;
	height:2em;
	display:flex;
	margin:2em 1em;
	align-items:center;
	justify-content:center;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+.checkmark {
	display:inline-block;
	width:2em;
	height:2em;
	background-color:#fcfcfc;
	border:2.5px solid #c3c3c3;
	border-radius:3px;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor: pointer;
}
input[type="checkbox"]+.checkmark span {
	content:'';
	position:relative;/*
	position:absolute;
	border-bottom:3px solid;
	border-right:3px solid;
	border-color:#029f56;*/
	margin-top:-3px;
	transform:rotate(45deg);
	width:.75em;
	height:1.2em;
	opacity:0;
}
input[type="checkbox"]+.checkmark>span:after {
	content:'';
	position:absolute;
	display:block;
	height:3px;
	bottom:0;left:0;
	background-color:#029f56;
}
input[type="checkbox"]+.checkmark>span:before {
	content:'';
	position:absolute;
	display:block;
	width:3px;
	bottom:0;right:0;
	background-color:#029f56;
}
input[type="checkbox"]:checked+.checkmark { 
	animation:2s spin forwards;
}
input[type="checkbox"]:checked+.checkmark>span { 
	animation:1s fadein 1.9s forwards;
}
input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}
input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}
@keyframes fadein {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes bottomslide {
	0% {width:0;}
	100% {width:100%;}
}
@keyframes rightslide {
	0% {height:0;}
	100% {height:100%;}
}
.logo {
	display:flex;
	flex-direction:column;
	align-items:center;
	height:100%;
	align-self:flex-end;
	margin:0.5em 1em;
}
.logo img {
	height:2em;
	width:2em;
}
.logo p {
	color:#9d9ba7;
	margin:0;
	font-size:1em;
	font-weight:700;
	margin:.4em 0 .2em 0;
}
.logo small {
	color:#9d9ba7;
	margin:0;
	font-size:.8em;
}
@keyframes spin {
	10% {
		width:0;
		height:0;
		border-width:6px;
	}
	30% {
		width:0;
		height:0;
		border-radius:50%;
		border-width:1em;
		transform: rotate(0deg);
		border-color:rgb(199,218,245);
	}
	50% {
		width:2em;
		height:2em;
		border-radius:50%;
		border-width:4px;
		border-color:rgb(199,218,245);
		border-right-color:rgb(89,152,239);
	}
	70% {
		border-width:4px;
		border-color:rgb(199,218,245);
		border-right-color:rgb(89,152,239);
	}
	90% {
		border-width:4px;
	}
	100% {
		width:2em;
		height:2em;
		border-radius:50%;
		transform: rotate(720deg);
		border-color:transparent;
	}
}
::selection {
	background-color:transparent;
	color:teal;
}
::-moz-selection {
	background-color:transparent;
	color:teal;
}



/* ========================================
   Next-Gen CAPTCHAs - Academic Style CSS
   Inspired by VisGym (visgym.github.io)
   ======================================== */



:root {
    /* Primary Colors - Academic Dark Blue */
    --color-primary: #003262;
    --color-primary-light: #004a8f;
    --color-primary-dark: #001f3f;

    /* Accent Colors */
    --color-accent: #fdb515;
    --color-accent-light: #ffc843;

    /* Semantic Colors */
    --color-human: #10b981;
    --color-human-light: #34d399;
    --color-ai: #ef4444;
    --color-ai-light: #f87171;

    /* Neutrals */
    --color-bg: #ece8d9;
    --color-bg-alt: #fffdf6;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-border: #e2e8f0;

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 3rem; }
h2 { font-size: 2rem; margin-bottom: var(--spacing-lg); }
h3 { font-size: 1.25rem; }

p { margin-bottom: var(--spacing-md); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-light);
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.hero .title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.hero .subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    font-weight: 400;
}

.authors {
    margin-bottom: var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs) var(--spacing-md);
}

.author {
    font-weight: 500;
    font-size: 1.05rem;
}

.author sup {
    font-size: 0.7em;
}

.affiliations {
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs) var(--spacing-lg);
}

.affiliation {
    font-size: 0.85rem;
    opacity: 0.8;
}

.affiliation.note {
    font-style: italic;
    opacity: 0.7;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
    flex-wrap: wrap;
}

.stat-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    min-width: 180px;
    border: 1px solid rgba(255,255,255,0.2);
}

.stat-card.human {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--color-human);
}

.stat-card.ai {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--color-ai);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: var(--spacing-xs);
}

.stat-detail {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: var(--spacing-xs);
}

.stat-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gap-arrow {
    font-size: 0.875rem;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
}

/* Hero Links */
.hero-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

.btn-primary:hover {
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: 1.1rem;
}

/* ========================================
   Abstract Section
   ======================================== */
.abstract {
    background: var(--color-bg-alt);
    padding: var(--spacing-3xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.abstract h2 {
    color: var(--color-primary);
}

.abstract p {
    max-width: 900px;
    font-size: 1.1rem;
    color: var(--color-text);
}

/* ========================================
   Section Common Styles
   ======================================== */
section {
    padding: var(--spacing-3xl) 0;
}

section h2 {
    color: var(--color-primary);
    text-align: center;
}

.section-desc {
    text-align: center;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto var(--spacing-2xl);
}

/* ========================================
   Results Section
   ======================================== */
.results {
    background: var(--color-bg);
}

.results-chart {
    margin: var(--spacing-2xl) 0;
}

.bar-chart {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-lg);
    height: 300px;
    padding: var(--spacing-xl);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 80px;
    height: calc(var(--height) * 2.5);
    min-height: 40px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
    transition: transform 0.2s;
}

.bar:hover {
    transform: scaleY(1.02);
}

.human-bar {
    background: linear-gradient(180deg, var(--color-human-light) 0%, var(--color-human) 100%);
}

.ai-bar {
    background: linear-gradient(180deg, var(--color-ai-light) 0%, var(--color-ai) 100%);
}

.bar-value {
    position: absolute;
    top: -30px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
}

.bar-label {
    position: absolute;
    bottom: -45px;
    font-size: 0.7rem;
    color: var(--color-text-light);
    text-align: center;
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cost Insights */
.cost-insight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.insight-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-accent);
}

.insight-icon {
    font-size: 2rem;
}

.insight-title {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.insight-desc {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* ========================================
   Categories Section
   ======================================== */
.categories {
    background: var(--color-bg-alt);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.category-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: all 0.2s;
}

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

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.category-tag {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.category-card[data-category="G1"] .category-tag { background: #3b82f6; }
.category-card[data-category="G2"] .category-tag { background: #8b5cf6; }
.category-card[data-category="G3"] .category-tag { background: #ec4899; }
.category-card[data-category="G4"] .category-tag { background: #f59e0b; }
.category-card[data-category="G5"] .category-tag { background: #10b981; }

.category-card h3 {
    color: var(--color-text);
}

.category-card p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.category-examples {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* ========================================
   Gallery Section
   ======================================== */
.gallery {
    background: var(--color-bg);
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.captcha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.captcha-card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all 0.3s;
}

.captcha-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.captcha-card.hidden {
    display: none;
}

.captcha-preview {
    position: relative;
    background: #fff;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.captcha-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.captcha-info {
    padding: var(--spacing-md);
    background: #dfd3c3;
}

.captcha-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.captcha-desc {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.captcha-tags {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.captcha-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-light);
}

.captcha-tag.gap-tag {
    background: var(--color-primary);
    color: white;
}

/* ========================================
   Demo Section
   ======================================== */
.demo {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    text-align: center;
}

.demo h2 {
    color: white;
}

.demo .section-desc {
    color: rgba(255,255,255,0.8);
}

.demo-cta {
    margin-top: var(--spacing-xl);
}

.demo-note {
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    opacity: 0.7;
}

/* ========================================
   Detailed Results Table
   ======================================== */
.detailed-results {
    background: var(--color-bg-alt);
}

.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.results-table th,
.results-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.results-table th {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.results-table th:first-child {
    text-align: left;
}

.results-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.results-table tbody tr:hover {
    background: var(--color-bg);
}

.results-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.02);
}

/* Cell coloring based on value */
.cell-high { background: rgba(16, 185, 129, 0.2); color: var(--color-human); font-weight: 600; }
.cell-medium { background: rgba(251, 181, 21, 0.2); color: #b45309; }
.cell-low { background: rgba(239, 68, 68, 0.1); color: var(--color-ai); }
.cell-zero { color: var(--color-text-light); }

/* ========================================
   Citation Section
   ======================================== */
.citation {
    background: var(--color-bg);
}

.citation-box {
    position: relative;
    background: var(--color-primary-dark);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.citation-box pre {
    margin: 0;
    overflow-x: auto;
}

.citation-box code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.85rem;
    color: #a5d6ff;
    white-space: pre-wrap;
}

.copy-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background: var(--color-primary-dark);
    color: white;
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.footer p {
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.footer-note {
    opacity: 0.7;
    font-size: 0.8rem;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    .hero .title {
        font-size: 2.5rem;
    }

    .hero .subtitle {
        font-size: 1rem;
    }

    .hero-stats {
        flex-direction: column;
    }

    .stat-vs {
        transform: rotate(90deg);
    }

    .bar-chart {
        flex-wrap: wrap;
        height: auto;
        gap: var(--spacing-md);
    }

    .bar {
        width: 60px;
    }

    .bar-label {
        font-size: 0.6rem;
        width: 70px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .captcha-grid {
        grid-template-columns: 1fr;
    }

    .gallery-filters {
        gap: var(--spacing-xs);
    }

    .filter-btn {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.captcha-card {
    animation: fadeIn 0.5s ease-out;
}

/* Stagger animation for cards */
.captcha-card:nth-child(1) { animation-delay: 0.05s; }
.captcha-card:nth-child(2) { animation-delay: 0.1s; }
.captcha-card:nth-child(3) { animation-delay: 0.15s; }
.captcha-card:nth-child(4) { animation-delay: 0.2s; }
.captcha-card:nth-child(5) { animation-delay: 0.25s; }
.captcha-card:nth-child(6) { animation-delay: 0.3s; }