:root{--navy: #070b13;--navy-mid: #0b1424;--navy-light: #142038;--navy-card: #101827;--orange: #f6a623;--orange-bright: #fbbf24;--orange-glow: #f59e0b;--blue-accent: #2490d6;--blue-light: #7dd3fc;--blue-deep: #1a6fb5;--text-primary: #e2e8f0;--text-muted: #94a3b8;--border: rgba(246, 166, 35, .2);--border-blue: rgba(36, 144, 214, .22)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:radial-gradient(circle at 50% -20%,rgba(36,144,214,.24),transparent 36rem),linear-gradient(180deg,#07111f,#070b13 46%,#050812);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,#070b1314,#070b13b8),radial-gradient(circle at 15% 18%,rgba(246,166,35,.1),transparent 22rem),radial-gradient(circle at 85% 8%,rgba(125,211,252,.09),transparent 24rem);background-repeat:no-repeat;background-size:cover;pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}.scan-line{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(125,211,252,.28),transparent);animation:scan 4s linear infinite;pointer-events:none;z-index:999}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .4s ease forwards}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:32px;height:32px;border:3px solid rgba(249,115,22,.2);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}@keyframes pulse-orange{0%,to{box-shadow:0 0 #f9731666}50%{box-shadow:0 0 0 8px #f9731600}}.site-header{background:#070b13eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.site-header .inner{max-width:1152px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand img{height:42px;width:42px;object-fit:contain}.brand-title{font-size:18px;line-height:1.1;font-family:Space Grotesk,sans-serif;font-weight:700;letter-spacing:.5px}.brand-title .macro{color:var(--blue-accent)}.brand-title .atoms{color:var(--orange)}.brand-sub{font-family:Share Tech Mono,monospace;font-size:9px;letter-spacing:2px;color:var(--orange);opacity:.8;text-transform:uppercase}.step-dot{width:10px;height:10px;border-radius:50%;background:#94a3b84d;transition:all .3s ease}.step-dot.active{background:var(--orange);box-shadow:0 0 8px var(--orange)}.step-dot.done{background:var(--blue-accent)}.progress-track{background:#94a3b81a;height:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--blue-accent));transition:width .4s ease}.card{background:linear-gradient(180deg,#101827f0,#0a1220f0);border:1px solid var(--border-blue);border-radius:8px;transition:all .2s ease}.card:hover{border-color:#f973164d}.card.p-5{padding:20px}.card.p-6{padding:24px}.card.p-8{padding:32px}.quiz-option{background:#101827e0;border:1px solid rgba(59,143,212,.2);border-radius:8px;padding:14px 18px;overflow:hidden;cursor:pointer;transition:all .2s ease;text-align:left;width:100%;color:var(--text-primary);font-family:Inter,sans-serif}.quiz-option:hover{border-color:var(--orange);background:#f9731614;transform:translate(4px)}.quiz-option.selected{border-color:var(--orange);background:#f973161f;box-shadow:0 0 12px #f9731626}.quiz-option .option-row{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1}.quiz-option .option-check{color:var(--orange);visibility:hidden;margin-top:2px}.quiz-option.selected .option-check{visibility:visible}.quiz-option .option-label{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:18px}.quiz-option .option-desc{color:var(--text-muted);font-size:14px;margin-top:2px}.quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.quiz-grid.option-count-4,.quiz-grid.question-aesthetic{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-grid .quiz-option{min-height:190px;padding:0}.option-image{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-bottom:1px solid rgba(125,211,252,.16);filter:saturate(1.08) contrast(1.02)}.quiz-grid .option-row{padding:14px 16px 16px}.comp-card{background:linear-gradient(180deg,#101827f0,#08101df0);border:1px solid var(--border-blue);border-radius:8px;padding:14px;cursor:pointer;transition:all .2s ease}.comp-card:hover{border-color:#f9731666;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.comp-card.selected{border-color:var(--orange);background:#f9731614;box-shadow:0 0 16px #f9731633}.btn-primary{background:linear-gradient(135deg,var(--orange),#f59e0b);color:#09111f;border:none;border-radius:8px;padding:12px 28px;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:16px;letter-spacing:1px;cursor:pointer;transition:all .2s ease;text-transform:uppercase}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px #f6a6233d}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:transparent;color:var(--text-muted);border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:10px 20px;font-family:Inter,sans-serif;font-size:14px;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{border-color:var(--orange);color:var(--orange)}.badge{font-size:10px;padding:2px 8px;border-radius:4px;font-family:Share Tech Mono,monospace;text-transform:uppercase;letter-spacing:.5px;display:inline-block}.badge-used{background:#f9731626;color:var(--orange-bright);border:1px solid rgba(249,115,22,.3)}.badge-new{background:#3b8fd426;color:var(--blue-light);border:1px solid rgba(59,143,212,.3)}.badge-recommended{background:#22c55e1a;color:#4ade80;border:1px solid rgba(34,197,94,.25)}.badge-live{background:#2490d624;color:var(--blue-light);border:1px solid rgba(125,211,252,.3)}.badge-curated{background:#94a3b81a;color:#cbd5e1;border:1px solid rgba(148,163,184,.18)}.atomic-hero{max-width:960px;margin:0 auto}.feature-card{text-align:left}.feature-index{color:var(--blue-light);font-family:Share Tech Mono,monospace;font-size:12px;margin-bottom:10px}.pricing-source-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.source-title{color:var(--text-primary);font-family:Space Grotesk,sans-serif;font-size:17px;font-weight:700}.stock-note,.estimate-note{color:var(--text-muted);font-family:Share Tech Mono,monospace;font-size:10px;margin-top:3px}.estimate-note{line-height:1.55;margin-top:8px}.price-display{font-family:Share Tech Mono,monospace;color:var(--orange);font-size:18px;font-weight:700}.total-price{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:28px;color:var(--orange);text-shadow:0 0 20px rgba(249,115,22,.4)}.category-label{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}.section-title{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);color:var(--text-primary);letter-spacing:0}.hero-tag{font-family:Share Tech Mono,monospace;font-size:11px;letter-spacing:3px;color:var(--orange);text-transform:uppercase;opacity:.85}.auto-next-note{align-self:center;color:var(--text-muted);font-family:Share Tech Mono,monospace;font-size:12px}.glow-line{height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.5;margin:24px 0}.rec-highlight{background:linear-gradient(135deg,#f973160f,#3b8fd40a);border:1px solid rgba(249,115,22,.25);border-radius:10px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}.rec-highlight .rec-label{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:15px;color:var(--orange);margin-bottom:4px}.section-tab{padding:8px 16px;border-radius:6px;font-family:Space Grotesk,sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;cursor:pointer;transition:all .2s ease;color:var(--text-muted);border:1px solid transparent;background:transparent}.section-tab:hover{color:var(--text-primary)}.section-tab.active{background:#f973161a;border-color:var(--orange);color:var(--orange)}.summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.08);gap:12px}.summary-row:last-child{border-bottom:none}.total-bar{background:linear-gradient(135deg,#f973161a,#3b8fd40d);border-top:1px solid var(--border);position:sticky;bottom:0;z-index:99;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.total-bar .inner{max-width:1152px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.modal-overlay{position:fixed;inset:0;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.modal-box{background:var(--navy-card);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:24px}.input{background:#0a0e1acc;border:1px solid rgba(59,143,212,.25);border-radius:8px;padding:12px 14px;color:var(--text-primary);font-size:14px;outline:none;font-family:Inter,sans-serif;width:100%;transition:border-color .2s ease}.input:focus{border-color:var(--orange)}.input.mono{font-family:Share Tech Mono,monospace;font-size:13px}textarea.input{resize:vertical;min-height:80px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--navy)}::-webkit-scrollbar-thumb{background:#f973164d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#f9731680}.container{max-width:1152px;margin:0 auto;padding:0 16px}.main-content{flex:1;padding:32px 16px 128px;max-width:1152px;margin:0 auto;width:100%}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.grid{display:grid}.grid-features{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;max-width:640px;margin:0 auto}.grid-components{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.text-center{text-align:center}.text-right{text-align:right}.flex-wrap{flex-wrap:wrap}.hidden{display:none!important}@media (max-width: 768px){.quiz-grid.option-count-4,.quiz-grid.question-aesthetic,.pricing-source-grid{grid-template-columns:1fr}.total-price{font-size:22px}.main-content{padding:24px 12px 128px}}