:root{--bg: #0f0f12;--card: #1a1a20;--text: #f3f3f7;--muted: #9a9aa8;--accent: #ff3355;--accent-gold: #ffcc00;--accent-cyan: #22d3ee;--border: #2a2a32;--radius: 1rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{min-height:100vh;width:100%}.hero{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;background:radial-gradient(circle at 50% 30%,#2a1a2e 0%,var(--bg) 60%)}.hero-logo{margin-bottom:1.5rem;font-weight:900;letter-spacing:-.03em}.brand-logo{font-weight:900;letter-spacing:-.03em;font-family:Inter,system-ui,sans-serif}.brand-bracket{color:var(--accent)}.hero h1{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;margin:0 0 1rem;line-height:1.05}.hero h1 span{color:var(--accent)}.hero-subtitle{display:block;width:100%;max-width:640px;font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:500;color:var(--text);margin:0 auto .75rem;line-height:1.35}.hero-lead{display:block;width:100%;max-width:640px;font-size:clamp(.95rem,2.2vw,1.15rem);color:var(--muted);margin:0 auto 2rem;line-height:1.55}.gender-label{margin:0 0 .75rem;color:var(--muted);font-size:.95rem}.gender-select{display:flex;gap:1rem;margin-bottom:1.5rem}.gender-btn{padding:1rem 2rem;font-size:1.25rem;border:2px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);cursor:pointer;transition:all .2s ease;min-width:140px}.gender-btn:hover,.gender-btn.active{border-color:var(--accent);background:#ff33551f}.btn-primary{padding:1rem 2.5rem;font-size:1.15rem;font-weight:700;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ff335559}.form-section{min-height:auto;display:flex;align-items:center;justify-content:center;padding:2rem 2rem 4rem}.form-card{width:100%;max-width:560px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}.form-card h2{margin-top:0;font-size:1.5rem}.step{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}label{font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:.5rem}input[type=range]{width:100%}input[type=number],select{padding:.75rem 1rem;border-radius:.75rem;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem}.row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.checkbox-row{flex-direction:row;align-items:center;gap:.75rem;cursor:pointer}.checkbox-row input{width:1.25rem;height:1.25rem;accent-color:var(--accent)}.big-value{font-size:clamp(3rem,10vw,6rem);font-weight:900;line-height:1;margin:1rem 0}.big-value.low{color:var(--accent)}.big-value.mid{color:var(--accent-gold)}.big-value.high{color:var(--accent-cyan)}.commentary{font-size:1.15rem;margin:1.5rem 0}.sources{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted)}.sources a{color:var(--accent-cyan);text-decoration:none}.sources a:hover{text-decoration:underline}.share-card{margin-top:2rem;padding:1.5rem;background:var(--bg);border-radius:var(--radius);text-align:center}.share-preview{width:320px;height:540px;margin:0 auto 1rem;background:linear-gradient(160deg,#1f1f26,#111116,#15151a);border-radius:1.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;border:1.5px solid rgba(255,255,255,.12);position:relative;overflow:hidden;box-shadow:0 20px 60px #00000073}.share-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 0%,rgba(255,51,85,.35),transparent 65%)}.share-preview:after{content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,51,85,.08) 80deg,transparent 180deg);animation:share-spin 12s linear infinite}@keyframes share-spin{to{transform:rotate(360deg)}}.share-preview .share-eyebrow{position:relative;font-size:.85rem;color:var(--muted);margin-bottom:.5rem;z-index:1}.share-preview h3{position:relative;margin:0 0 .5rem;font-size:1.4rem;font-weight:800;color:var(--text);z-index:1;letter-spacing:-.02em}.share-preview .share-percent{position:relative;font-size:4.5rem;font-weight:900;color:var(--accent);line-height:1;z-index:1}.share-preview .share-comment{position:relative;margin-top:1.25rem;font-size:1rem;color:var(--text);line-height:1.4;text-align:center;z-index:1;max-width:90%}.share-preview .share-comment strong{color:var(--accent-gold)}.share-preview .share-factor{position:relative;margin-top:.75rem;font-size:.85rem;color:var(--muted);text-align:center;z-index:1;max-width:90%}.share-preview .share-factor strong{color:var(--accent-cyan)}.share-preview .share-cta{position:relative;margin-top:1.5rem;font-size:.9rem;font-weight:700;color:var(--accent-gold);z-index:1}.share-preview .share-brand{position:absolute;bottom:1.25rem;font-weight:800;font-size:.95rem;color:var(--accent-gold);letter-spacing:.05em;z-index:1}.actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.btn-secondary{padding:.75rem 1.5rem;border-radius:.75rem;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-weight:600}.btn-secondary:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.loader{text-align:center;padding:2rem;color:var(--muted)}.error{color:var(--accent);padding:1rem;background:#ff33551a;border-radius:.75rem}.step-indicator{display:flex;justify-content:space-between;margin-bottom:1.5rem;padding:0 .5rem;gap:.5rem}.step-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;opacity:.5;position:relative}.step-dot:before{content:"";position:absolute;top:.85rem;left:-50%;width:100%;height:2px;background:var(--border);z-index:0}.step-dot:first-child:before{display:none}.step-dot.active,.step-dot.done{opacity:1}.step-number{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--border);color:var(--text);display:grid;place-items:center;font-size:.85rem;font-weight:700;z-index:1}.step-dot.active .step-number,.step-dot.done .step-number{background:var(--accent)}.step-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.step-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1rem}.age-range{margin-top:.75rem}.dual-range{position:relative;height:1.5rem;display:flex;align-items:center}.dual-range-track{position:absolute;left:0;right:0;height:6px;background:var(--border);border-radius:3px}.dual-range-fill{position:absolute;height:6px;background:var(--accent);border-radius:3px}.dual-range-thumb{position:absolute;top:50%;width:1.25rem;height:1.25rem;background:var(--text);border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);cursor:grab;z-index:2}.dual-range-thumb:active{cursor:grabbing;background:var(--accent)}.validation-hint{font-size:.85rem;color:var(--accent);margin-top:.25rem}.height-figure{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:.5rem}.figure-svg{height:140px;filter:drop-shadow(0 4px 12px rgba(255,51,85,.25));transition:height .2s ease}.height-scale{display:flex;justify-content:space-between;width:100%;max-width:160px;font-size:.75rem;color:var(--muted)}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0f12eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.loading-content{text-align:center}.spinner{width:3rem;height:3rem;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.loading-message{font-size:1.1rem;color:var(--text);min-height:3rem}.factor-ranking{margin-top:1.5rem;padding:1.25rem;background:linear-gradient(145deg,#1a1a20e6,#111115f2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #00000040}.factor-ranking h3{margin-top:0;margin-bottom:1rem;font-size:1.1rem;color:var(--accent-gold);letter-spacing:-.02em}.factor-ranking ol{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}.factor-ranking li{padding:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;line-height:1.6;transition:background .2s,border-color .2s}.factor-ranking li:hover{background:#ffffff0f;border-color:#ffffff1f}.factor-ranking li strong{color:var(--accent-cyan);font-weight:700}.factor-ranking li strong:last-child{color:var(--accent-gold)}.factor-impact{color:var(--accent);font-weight:700;white-space:nowrap}.mode-toggle{display:inline-flex;gap:.25rem;padding:.25rem;background:#ffffff0f;border:1px solid var(--border);border-radius:.75rem;margin-bottom:.5rem}.mode-btn{padding:.5rem .9rem;font-size:.85rem;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:.55rem;cursor:pointer;transition:all .2s ease}.mode-btn.active{color:#fff;background:var(--accent);box-shadow:0 4px 12px #ff537059}.mode-btn:hover:not(.active){color:var(--text);background:#ffffff0d}.mode-hint{font-size:.85rem;color:var(--muted);margin-top:0;margin-bottom:1rem}.age-comparison{margin-top:1.5rem;margin-bottom:1.5rem;padding:1.25rem;background:linear-gradient(145deg,#1a1a20e6,#111115f2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #00000040}.age-comparison h3{margin-top:0;margin-bottom:1rem;font-size:1.05rem;color:var(--accent-cyan);letter-spacing:-.02em}.age-bars{display:grid;gap:.75rem}.bar-row{display:grid;grid-template-columns:7rem 1fr 4.5rem;align-items:center;gap:.75rem;font-size:.85rem}.bar-label{color:var(--muted);text-align:right}.bar-track{height:.75rem;background:#ffffff14;border-radius:.5rem;overflow:hidden}.bar-fill{height:100%;border-radius:.5rem;transition:width .6s ease,opacity .3s ease}.bar-row.bar-muted .bar-label,.bar-row.bar-muted .bar-value{color:#ffffff59}.bar-fill-muted{opacity:.35}.bar-total{background:linear-gradient(90deg,var(--accent),#ff6688)}.bar-age{background:linear-gradient(90deg,var(--accent-cyan),#55eeff)}.bar-value{color:var(--text);font-weight:700;text-align:left}.age-comparison-note{margin-top:1rem;margin-bottom:0;font-size:.9rem;color:var(--muted);text-align:center}.age-comparison-note strong{color:var(--text)}.share-preview-age{background:linear-gradient(145deg,#1a1a24,#111118)}.share-preview-age:before{background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.35),transparent 65%)}.share-preview-age .share-percent,.share-preview-age .share-brand{color:var(--accent-cyan)}.history-section{margin-top:-2rem}.faq-section{margin-top:0}.faq-section h2{margin-top:0;margin-bottom:1.25rem;font-size:1.35rem}.faq-list{display:flex;flex-direction:column;gap:.75rem}.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease}.faq-item[open]{border-color:#ffffff26}.faq-question{padding:1rem 2.5rem 1rem 1.25rem;font-weight:600;color:var(--text);cursor:pointer;list-style:none;position:relative}.faq-question::-webkit-details-marker{display:none}.faq-question:after{content:"+";position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.25rem}.faq-item[open] .faq-question:after{content:"−"}.faq-answer{padding:0 1.25rem 1.25rem;margin:0;color:var(--muted);line-height:1.55}.history-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.history-item{width:100%;text-align:left;padding:.75rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:.75rem;color:var(--text);cursor:pointer;font-size:.95rem}.history-item:hover{border-color:var(--accent)}.template-select{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}.template-btn{padding:.5rem 1rem;border-radius:.5rem;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-weight:600;font-size:.85rem}.template-btn.active{border-color:var(--accent);color:var(--accent)}.share-preview-gold{background:linear-gradient(145deg,#2a251a,#1a1812)}.share-preview-gold:before{background:radial-gradient(circle at 50% 0%,rgba(255,204,0,.25),transparent 70%)}.share-preview-gold .share-percent,.share-preview-gold .share-brand{color:var(--accent-gold)}.share-preview-neon{background:linear-gradient(145deg,#0a1f1f,#051414)}.share-preview-neon:before{background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.3),transparent 70%)}.share-preview-neon .share-percent,.share-preview-neon .share-brand{color:var(--accent-cyan)}.share-factor{position:relative;margin-top:.75rem;font-size:.8rem;color:var(--muted);max-width:220px;text-align:center}.share-caption-box{margin-top:1rem;padding:1rem;background:var(--bg);border-radius:.75rem;text-align:left;overflow-wrap:anywhere;word-break:break-word;max-width:100%}.share-caption{margin:0;font-size:.85rem;color:var(--muted);white-space:pre-wrap;line-height:1.45}.share-link{color:var(--accent-cyan);text-decoration:underline}.share-link:hover{color:var(--accent)}.articles-nav-section{margin-top:0}.articles-nav{display:flex;flex-wrap:wrap;gap:.75rem}.article-nav-item{padding:.6rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:.75rem;color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.article-nav-item:hover{border-color:var(--accent);color:var(--accent)}.article-header{padding:1.25rem 2rem;display:flex;align-items:center;justify-content:flex-start}.article-home-link{background:transparent;border:none;color:var(--text);font-weight:900;font-size:1.25rem;cursor:pointer;padding:0;font-family:Inter,system-ui,sans-serif}.article-home-link:hover{color:var(--accent)}.article-hero{min-height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem 2rem;background:radial-gradient(circle at 50% 30%,#2a1a2e 0%,var(--bg) 60%)}.article-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;margin:0 0 1rem;max-width:800px;line-height:1.1}.article-hero-lead{font-size:clamp(1rem,2.2vw,1.25rem);color:var(--muted);max-width:680px;margin:0 auto;line-height:1.55}.article-card{padding:2rem}.article-block{margin-bottom:2rem}.article-block:last-of-type{margin-bottom:0}.article-block h2{margin-top:0;margin-bottom:.75rem;font-size:1.25rem;color:var(--accent-cyan)}.article-block p{margin:0;color:var(--muted);line-height:1.6}.article-cta{margin-top:2rem;padding:1.5rem;background:linear-gradient(145deg,#1a1a20e6,#111115f2);border:1px solid var(--border);border-radius:var(--radius);text-align:center}.article-cta h3{margin-top:0;margin-bottom:.5rem;font-size:1.2rem;color:var(--text)}.article-cta p{color:var(--muted);margin:0 0 1.25rem;line-height:1.5}@media (max-width: 600px){.form-card{padding:1.25rem}.share-preview{width:225px;height:400px;padding:1.25rem}.share-preview h3{font-size:1.15rem}.share-preview .share-percent{font-size:3.5rem}.share-preview .share-comment{font-size:.9rem}.share-preview .share-eyebrow{font-size:.75rem}.template-btn{padding:.45rem .75rem;font-size:.8rem}.article-hero{padding:3rem 1.25rem 1.5rem}.article-card{padding:1.5rem}.step-actions{justify-content:space-between}}.percentile-badge{margin:1rem 0 .5rem;padding:.5rem 1rem;background:#ff33551f;border:1px solid rgba(255,51,85,.3);border-radius:.75rem;color:var(--accent);font-size:.95rem;text-align:center;font-weight:600}.humor-quote{margin:.75rem 1rem;font-size:1rem;color:var(--accent-gold);font-style:italic;text-align:center;line-height:1.45}.what-if-panel{margin-top:1.5rem;padding:1.25rem;background:linear-gradient(145deg,#1a1a20e6,#111115f2);border:1px solid var(--border);border-radius:var(--radius)}.what-if-panel h3{margin-top:0;margin-bottom:1rem;font-size:1.1rem;color:var(--accent-cyan)}.what-if-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}.what-if-form label{font-size:.85rem}.what-if-form input,.what-if-form select{padding:.5rem .75rem;font-size:.9rem}.what-if-form .checkbox-row{flex-direction:row;align-items:center}.what-if-bars{margin-top:1rem}.what-if-diff{text-align:center;font-size:1rem;margin-bottom:.75rem}.what-if-diff .positive{color:var(--accent-cyan)}.what-if-diff .negative{color:var(--accent)}.lifestyle-step .step-hint{margin-bottom:1rem;font-size:.9rem;color:var(--text-muted);text-align:center}.lifestyle-options{display:flex;flex-direction:column;gap:.75rem}.lifestyle-checkbox{align-items:flex-start;padding:.75rem;border:1px solid var(--border);border-radius:.75rem;cursor:pointer;transition:border-color .2s,background .2s}.lifestyle-checkbox:hover{border-color:var(--accent-cyan);background:#4adeff0f}.lifestyle-checkbox input[type=checkbox]{margin-top:.15rem;margin-right:.75rem;flex-shrink:0;width:1.1rem;height:1.1rem}.lifestyle-summary{margin:.75rem 0 0;font-size:.95rem;color:var(--accent-cyan);text-align:center}