@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--bg: #0a0a0a;--bg-elevated: #141414;--bg-hover: #1a1a1a;--text: #e8e8e8;--text-muted: #888;--text-dim: #555;--accent: #E63946;--accent-dim: #a82832;--border: #222;--border-light: #333;--font-mono: "IBM Plex Mono", monospace;--font-sans: "IBM Plex Sans", sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 2rem;--space-xl: 4rem;--space-2xl: 8rem;--max-width: 1200px;--comic-max-width: 900px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-mono);font-size:.875rem;line-height:1.6;color:var(--text);background:var(--bg);min-height:100vh}h1,h2,h3{font-family:var(--font-sans);font-weight:600;line-height:1.2;letter-spacing:-.02em}h1{font-size:2rem}h2{font-size:1.25rem;color:var(--text-muted)}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.site-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--space-md) 0}.site-header .container{display:flex;justify-content:space-between;align-items:center}.site-logo{display:flex;align-items:baseline;gap:var(--space-sm)}.site-logo .name{font-family:var(--font-sans);font-size:1.125rem;font-weight:600;letter-spacing:-.02em}.site-logo .version{font-size:.75rem;color:var(--text-dim)}.site-nav{display:flex;gap:var(--space-lg)}.site-nav a{font-size:.8125rem;color:var(--text-muted);transition:color .15s}.site-nav a:hover,.site-nav a.active{color:var(--text)}main{padding:var(--space-xl) 0}.comic-hero{max-width:var(--comic-max-width);margin:0 auto var(--space-xl)}.comic-frame{display:block;background:#fff;border:1px solid var(--border-light);overflow:hidden}.comic-frame svg,.comic-frame img{display:block;width:100%;height:auto}@media (max-width: 640px){.comic-hero .comic-frame{max-width:400px;margin:0 auto}}.comic-meta{margin-top:var(--space-lg);display:grid;grid-template-columns:1fr auto;gap:var(--space-lg);align-items:start}.comic-info h1{font-size:1.5rem;margin-bottom:var(--space-xs)}.comic-info .topic{color:var(--text-muted);font-size:1rem}.comic-version{text-align:right}.comic-version .id{font-size:1.25rem;font-weight:600;color:var(--accent);font-family:var(--font-mono)}.comic-version .date{font-size:.75rem;color:var(--text-dim);margin-top:var(--space-xs)}.experiment-data{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--bg-elevated);border:1px solid var(--border)}.experiment-data h3{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:var(--space-md)}.experiment-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-sm) 0;border-bottom:1px solid var(--border)}.experiment-row:last-child{border-bottom:none}.experiment-label{color:var(--text-muted)}.experiment-value{font-weight:500}.experiment-value.winner{color:var(--accent)}.learning{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border);font-style:italic;color:var(--text-muted)}.learning:before{content:"→ ";color:var(--accent)}.vote-bar{display:flex;height:4px;background:var(--border);margin-top:var(--space-sm);overflow:hidden}.vote-bar .a{background:var(--text-muted)}.vote-bar .b{background:var(--accent)}.comic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}.comic-card{display:block;background:var(--bg-elevated);border:1px solid var(--border);transition:border-color .15s,transform .15s}.comic-card:hover{border-color:var(--border-light);transform:translateY(-2px)}.comic-card .comic-frame{border:none;border-bottom:1px solid var(--border)}.comic-card-meta{padding:var(--space-md)}.comic-card-meta .id{font-weight:600;color:var(--accent)}.comic-card-meta .topic{color:var(--text-muted);font-size:.8125rem;margin-top:var(--space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comic-card-meta .tested{font-size:.75rem;color:var(--text-dim);margin-top:var(--space-sm)}.comic-card-meta .winner{color:var(--accent)}.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border)}.section-header h2{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.section-header a{font-size:.75rem;color:var(--text-muted)}.recent-section{margin-top:var(--space-2xl)}.about-content{max-width:640px}.about-content h1{margin-bottom:var(--space-lg)}.about-content p{margin-bottom:var(--space-md);color:var(--text-muted);font-family:var(--font-sans);font-size:1rem;line-height:1.7}.about-content p strong{color:var(--text);font-weight:500}.about-section{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--border)}.about-section h2{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:var(--space-md)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md);margin-top:var(--space-md)}.style-item{padding:var(--space-md);background:var(--bg-elevated);border:1px solid var(--border)}.style-item .label{font-size:.75rem;color:var(--text-dim);margin-bottom:var(--space-xs)}.style-item .value{font-weight:500}.archive-header{margin-bottom:var(--space-xl)}.archive-header h1{margin-bottom:var(--space-xs)}.archive-header .stats{color:var(--text-dim);font-size:.875rem}.filters{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap}.filter-btn{padding:var(--space-xs) var(--space-md);background:transparent;border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .15s}.filter-btn:hover{border-color:var(--border-light);color:var(--text)}.filter-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}.site-footer{margin-top:var(--space-2xl);padding:var(--space-lg) 0;border-top:1px solid var(--border)}.site-footer .container{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text-dim)}.site-footer a{color:var(--text-muted)}.comic-nav{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border)}.comic-nav a{color:var(--text-muted);font-size:.875rem}.comic-nav a:hover{color:var(--accent)}@media (max-width: 640px){:root{--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 4rem}.site-header .container{flex-direction:column;gap:var(--space-md)}.comic-meta{grid-template-columns:1fr}.comic-version{text-align:left}.comic-grid{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.comic-hero,.comic-card{animation:fadeIn .4s ease-out}.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}.hidden{display:none!important}
