*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0F0F12;--surface:#1A1A1F;--surface2:#242429;--border:#2E2E35;
--text:#E8E8ED;--text-muted:#9898A8;--accent:#6C3AED;--accent-light:#EDE9FE;
--success:#10B981;--radius:12px;--radius-sm:8px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
.container{max-width:960px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.site-header{border-bottom:1px solid var(--border);padding:16px 0;background:var(--surface);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;font-size:1.1rem}
.logo em{font-style:normal;color:var(--accent)}
.site-nav{display:flex;gap:24px}
.site-nav a{color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .2s}
.site-nav a:hover{color:var(--text)}

.hero{padding:60px 0 40px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;background:linear-gradient(135deg,var(--text) 0%,var(--accent-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.hero-sub{font-size:1.15rem;color:var(--text-muted);max-width:560px;margin:0 auto}

.compare-setup{padding:40px 0}
.album-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start}
.vs-badge{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--accent);border-radius:50%;font-weight:800;font-size:.85rem;margin-top:28px}
.album-field label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem}
.album-field input[type=text],.album-field input[type=number],.detail-grid input{
width:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;transition:border-color .2s}
.album-field input:focus,.detail-grid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,58,237,.2)}
.suggestions{position:relative;margin-top:4px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);max-height:200px;overflow-y:auto;z-index:10;display:none}
.suggestion-item{padding:10px 16px;cursor:pointer;font-size:.9rem;transition:background .15s}
.suggestion-item:hover,.suggestion-item[aria-selected=true]{background:var(--accent)}
.album-details{margin-top:12px;padding:16px;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-grid .span-2{grid-column:1/-1}
.detail-label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}

.presets-section{margin-top:32px}
.presets-section h2{font-size:1.1rem;margin-bottom:12px;color:var(--text-muted)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.preset-btn{padding:8px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:.85rem;cursor:pointer;transition:all .2s}
.preset-btn:hover{background:var(--accent);border-color:var(--accent)}

.scoring{padding:40px 0}
.scoring h2{font-size:1.5rem;margin-bottom:8px}
.section-note{color:var(--text-muted);margin-bottom:24px;font-size:.95rem}
.score-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.score-header,.score-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:14px 20px;align-items:center}
.score-header{background:var(--surface2);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.score-row{border-top:1px solid var(--border)}
.score-total{background:var(--surface2);font-weight:700;font-size:1.1rem}
.cat-name{font-weight:600}
.score-control{display:flex;align-items:center;gap:10px}
.score-control input[type=range]{flex:1;-webkit-appearance:none;height:6px;background:var(--border);border-radius:3px;outline:none}
.score-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}
.score-control output{font-weight:700;min-width:24px;text-align:center;color:var(--accent-light)}

.actions{display:flex;gap:12px;margin-top:24px}
.btn-primary{padding:14px 32px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-secondary{padding:14px 32px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}
.btn-secondary:hover{background:var(--border)}

.results{padding:40px 0}
.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px}
.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.result-header h2{font-size:1.4rem}
.result-actions{display:flex;gap:8px}
.btn-icon{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;cursor:pointer;transition:background .2s}
.btn-icon:hover{background:var(--border)}
.verdict{text-align:center;padding:24px;background:linear-gradient(135deg,rgba(108,58,237,.15),rgba(108,58,237,.05));border-radius:var(--radius-sm);margin-bottom:24px;font-size:1.25rem;font-weight:700}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.result-album{background:var(--surface2);border-radius:var(--radius-sm);padding:20px}
.result-album h3{font-size:1.1rem;margin-bottom:4px}
.result-album .album-artist{color:var(--text-muted);font-size:.9rem;margin-bottom:12px}
.result-album .album-meta{font-size:.85rem;color:var(--text-muted);margin-bottom:8px}
.result-album .album-scores{margin-top:12px}
.result-album .score-line{display:flex;justify-content:space-between;font-size:.9rem;padding:4px 0;border-bottom:1px solid var(--border)}
.result-breakdown{background:var(--surface2);border-radius:var(--radius-sm);padding:20px}
.result-breakdown h3{font-size:1rem;margin-bottom:12px}
.breakdown-item{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;border-bottom:1px solid var(--border)}
.breakdown-winner{color:var(--success);font-weight:600}

.how-it-works,.common-debates,.tips{padding:60px 0}
.how-it-works h2,.common-debates h2,.tips h2{font-size:1.5rem;margin-bottom:32px;text-align:center}
.steps-grid,.debate-types,.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.step,.debate-card,.tip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.step-num{width:36px;height:36px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;margin-bottom:16px}
.step h3,.debate-card h3,.tip h3{font-size:1.05rem;margin-bottom:8px}
.step p,.debate-card p,.tip p{color:var(--text-muted);font-size:.9rem;line-height:1.6}

.site-footer{border-top:1px solid var(--border);padding:32px 0;margin-top:40px}
.footer-links{display:flex;gap:24px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.footer-links a{color:var(--text-muted);text-decoration:none;font-size:.85rem}
.footer-links a:hover{color:var(--text)}
.footer-note{text-align:center;color:var(--text-muted);font-size:.8rem}

@media(max-width:768px){
.album-inputs{grid-template-columns:1fr}
.vs-badge{margin:0 auto}
.score-header,.score-row{grid-template-columns:1fr;gap:8px;text-align:center}
.score-header span:first-child{display:none}
.result-grid{grid-template-columns:1fr}
.result-header{flex-direction:column;align-items:flex-start}
}
@media print{
.site-header,.site-footer,.scoring,.actions,.result-actions,.hero,.how-it-works,.common-debates,.tips,.presets-section,.compare-setup{display:none!important}
.results{display:block!important}
.result-card{border:none;padding:0}
body{background:#fff;color:#000}
}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}