*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--accent:#6ee7b7;--accent2:#34d399;--accent-dim:rgba(110,231,183,.15);--danger:#f87171;--border:#334155;--radius:12px;--radius-sm:8px;--shadow:0 4px 24px rgba(0,0,0,.3);--font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Header */
.site-header{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:1.1rem;text-decoration:none!important}
.logo svg{flex-shrink:0}
.main-nav{display:flex;gap:4px}
.main-nav a{color:var(--text2);padding:6px 14px;border-radius:var(--radius-sm);font-size:.9rem;transition:background .2s,color .2s}
.main-nav a:hover{background:var(--bg3);color:var(--text);text-decoration:none}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;padding:4px 8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s;text-decoration:none!important}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--bg3);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-sm{padding:6px 14px;font-size:.85rem}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:rgba(248,113,113,.1)}

/* Hero */
.hero-section{max-width:1200px;margin:0 auto;padding:60px 24px 40px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.hero-content h1{font-size:2.6rem;font-weight:800;line-height:1.15;margin-bottom:16px;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.1rem;color:var(--text2);margin-bottom:24px;max-width:560px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;gap:16px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.stat-number{display:block;font-size:2rem;font-weight:800;color:var(--accent)}
.stat-label{font-size:.8rem;color:var(--text3)}

/* Sections */
section{max-width:1200px;margin:0 auto;padding:48px 24px}
.section-header{margin-bottom:32px}
.section-header h2{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.section-header p{color:var(--text2);max-width:600px}

/* Calculator */
.calculator-section{background:var(--bg2);margin:0;padding:48px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.calculator-section .section-header,.calculator-section .calc-layout{max-width:1200px;margin-left:auto;margin-right:auto}
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.calc-inputs{display:flex;flex-direction:column;gap:20px}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group label{font-size:.85rem;font-weight:600;color:var(--text2)}
.input-group input,.input-group select{padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;outline:none;transition:border .2s}
.input-group input:focus,.input-group select:focus{border-color:var(--accent)}
.input-hint{font-size:.78rem;color:var(--text3)}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:var(--bg3);border-radius:3px;outline:none;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}
.range-output{font-size:.85rem;font-weight:600;color:var(--accent)}
.preset-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.preset-label{font-size:.8rem;color:var(--text3)}

/* Results */
.calc-results{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:20px;position:sticky;top:72px}
.result-main{text-align:center;padding:16px 0}
.result-number{display:block;font-size:3rem;font-weight:800;color:var(--accent);line-height:1}
.result-label{font-size:.9rem;color:var(--text3)}
.result-breakdown{display:flex;flex-direction:column;gap:8px}
.breakdown-row{display:flex;justify-content:space-between;font-size:.9rem;padding:6px 0;border-bottom:1px solid var(--border)}
.breakdown-row span:first-child{color:var(--text2)}
.breakdown-row span:last-child{font-weight:600}
.grid-visual{text-align:center}
#grid-canvas{width:100%;max-width:400px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border)}
.grid-caption{display:block;font-size:.8rem;color:var(--text3);margin-top:8px}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}
.saved-history{border-top:1px solid var(--border);padding-top:16px}
.saved-history h3{font-size:.9rem;margin-bottom:8px;color:var(--text2)}
.saved-history ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.saved-history li{font-size:.85rem;padding:8px 12px;background:var(--bg2);border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center}
.saved-history li button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.8rem}

/* Reverse Calculator */
.reverse-section{border-bottom:1px solid var(--border)}
.reverse-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.reverse-inputs{display:flex;flex-direction:column;gap:20px}
.reverse-results{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:20px}
.space-needed{text-align:center}
.space-number{display:block;font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1}
.space-label{font-size:.85rem;color:var(--text3)}
.space-comparisons p{font-size:.95rem;color:var(--text2);margin-bottom:6px}
.space-comparisons strong{color:var(--text)}
.claim-verdict{background:var(--accent-dim);border-radius:var(--radius-sm);padding:16px;display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text2)}
.verdict-icon{font-size:1.2rem}

/* Venues */
.venues-section{background:var(--bg2);margin:0;padding:48px 24px;border-bottom:1px solid var(--border)}
.venues-section>*{max-width:1200px;margin-left:auto;margin-right:auto}
.venue-search{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.venue-search input{flex:1;min-width:200px;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;outline:none}
.venue-search input:focus{border-color:var(--accent)}
.venue-search select{padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem}
.venue-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.venue-table{width:100%;border-collapse:collapse;font-size:.9rem}
.venue-table th{background:var(--bg);padding:12px 16px;text-align:left;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap}
.venue-table td{padding:10px 16px;border-bottom:1px solid var(--border);color:var(--text)}
.venue-table tr:hover td{background:var(--bg3)}
.venue-table .num{text-align:right;font-variant-numeric:tabular-nums}
.venue-note{font-size:.8rem;color:var(--text3);margin-top:12px}

/* Method */
.method-section{border-bottom:1px solid var(--border)}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.method-step{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.step-num{width:36px;height:36px;background:var(--accent);color:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;margin-bottom:14px}
.method-step h3{font-size:1.05rem;margin-bottom:8px}
.method-step p{font-size:.9rem;color:var(--text2)}
.density-reference h3{font-size:1.1rem;margin-bottom:16px}
.density-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.density-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.density-swatch{width:100%;height:8px;border-radius:4px;margin-bottom:12px}
.density-card strong{display:block;margin-bottom:6px;font-size:.95rem}
.density-card p{font-size:.85rem;color:var(--text2)}

/* Mistakes */
.mistakes-section{background:var(--bg2);margin:0;padding:48px 24px;border-bottom:1px solid var(--border)}
.mistakes-section>*{max-width:1200px;margin-left:auto;margin-right:auto}
.mistakes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mistake-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.mistake-card h3{font-size:1rem;margin-bottom:8px}
.mistake-card p{font-size:.88rem;color:var(--text2)}

/* FAQ */
.faq-section{border-bottom:1px solid var(--border)}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-list dt{font-weight:700;font-size:1rem;padding:16px 0 4px;border-top:1px solid var(--border)}
.faq-list dt:first-of-type{border-top:none}
.faq-list dd{color:var(--text2);font-size:.93rem;padding-bottom:16px}

/* Cheat Sheet */
.cheatsheet-section{background:var(--bg2);margin:0;padding:48px 24px;border-bottom:1px solid var(--border)}
.cheatsheet-section>*{max-width:1200px;margin-left:auto;margin-right:auto}
.cheatsheet{background:var(--bg);border:2px dashed var(--border);border-radius:var(--radius);padding:32px;margin-bottom:20px}
.cheatsheet h3{font-size:1.2rem;margin-bottom:16px;text-align:center}
.cheat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.cheat-item{background:var(--bg2);padding:12px 16px;border-radius:var(--radius-sm);font-size:.9rem}
.cheat-densities{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.cheat-densities div{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text2)}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex-shrink:0}
.cheat-footer{text-align:center;font-size:.8rem;color:var(--text3)}

/* Footer */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:32px 24px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:var(--text2);font-size:.9rem}
.footer-note{font-size:.85rem;color:var(--text3)}
.footer-updated{font-size:.78rem;color:var(--text3)}

/* Responsive */
@media(max-width:900px){
  .hero-section{grid-template-columns:1fr;padding-top:40px}
  .hero-stat{flex-direction:row;flex-wrap:wrap}
  .stat-card{flex:1;min-width:140px}
  .calc-layout{grid-template-columns:1fr}
  .calc-results{position:static}
  .reverse-layout{grid-template-columns:1fr}
  .method-grid{grid-template-columns:repeat(2,1fr)}
  .density-cards{grid-template-columns:repeat(2,1fr)}
  .mistakes-grid{grid-template-columns:repeat(2,1fr)}
  .cheat-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .header-inner{padding:0 16px}
  .main-nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--bg2);flex-direction:column;padding:12px;border-bottom:1px solid var(--border)}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .hero-content h1{font-size:1.8rem}
  .input-row{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .density-cards{grid-template-columns:1fr}
  .mistakes-grid{grid-template-columns:1fr}
  section{padding:32px 16px}
  .calculator-section,.venues-section,.mistakes-section,.cheatsheet-section{padding:32px 16px}
}

/* Print */
@media print{
  .site-header,.site-footer,.result-actions,.preset-buttons,.venue-search,.nav-toggle,.hero-actions,.hero-stat{display:none!important}
  body{background:#fff;color:#000}
  .cheatsheet{border:2px solid #000}
  .calc-results,.reverse-results{border:1px solid #ccc}
  *{color:#000!important}
}

/* Focus styles */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Selection */
::selection{background:var(--accent);color:var(--bg)}



/* 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;
}