:root{--bg: #08080b;--bg-card: #0c0c14;--bg-card-alt: #0f0f1a;--border: #1a1a2e;--text: #ffffff;--muted: #6b7280;--label: #4b5563;--cyan: #00e5ff;--blue: #2979ff;--amber: #ffd740;--gradient-top: linear-gradient(to right, #ff6d00, #e040fb, #7c4dff, #2979ff, #00e5ff);--radius-card: 10px;--radius-btn: 8px;--radius-small: 6px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Syne,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:3px;background:var(--bg-card);z-index:1000;border-bottom:1px solid var(--border)}#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,#ff6d00,#e040fb,#7c4dff);z-index:2000;transition:width .05s linear}#app-header{position:sticky;top:3px;background:var(--bg);padding:16px 32px;display:flex;align-items:center;gap:24px;z-index:900;border-bottom:1px solid var(--border)}#app-header .logo{margin-right:auto}main{max-width:900px;margin:0 auto;padding:60px 32px 80px}section{margin-bottom:80px}.section-label{display:flex;align-items:center;gap:12px;color:var(--cyan);font-family:DM Mono,monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}.label-line{flex:1;height:1px;background:var(--border)}h1{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(40px,8vw,64px);text-transform:uppercase;line-height:1;margin-bottom:16px}h2{font-family:Syne,sans-serif;font-weight:700;font-size:28px;text-transform:uppercase;margin-bottom:8px}.subtitle{font-family:DM Sans,sans-serif;font-weight:300;font-size:14px;color:var(--muted);margin-bottom:32px;line-height:1.6}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 20px;position:relative}.card--active{background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,linear-gradient(135deg,#ff6d00,#e040fb,#7c4dff) border-box;border:1.5px solid transparent}.card__label{font-family:DM Mono,monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--label);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}.card__value{font-family:JetBrains Mono,monospace;font-size:15px;color:var(--text)}.input-field{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 16px;color:var(--text);font-family:JetBrains Mono,monospace;font-size:14px;outline:none;caret-color:var(--cyan);transition:border-color var(--transition)}.input-field:focus{border-color:var(--blue)}.input-field::placeholder{color:#3b3b55}.input-wrapper{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 16px;transition:border-color var(--transition)}.input-wrapper:focus-within{border-color:var(--blue)}.input-wrapper input{background:transparent;border:none;outline:none;color:var(--text);font-family:JetBrains Mono,monospace;font-size:14px;width:100%;caret-color:var(--cyan)}.input-wrapper .input-icon{color:var(--label);font-size:14px;flex-shrink:0}.btn-primary{width:100%;padding:15px 24px;background:var(--blue);border:none;border-radius:var(--radius-btn);color:#fff;font-family:Syne,sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity var(--transition)}.btn-primary:hover{opacity:.88}.btn-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-small);padding:5px 10px;color:var(--muted);font-family:DM Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color var(--transition),border-color var(--transition)}.btn-ghost:hover{color:var(--cyan);border-color:var(--cyan)}.toggle-group{display:flex;align-items:center;gap:6px}.toggle-btn{padding:6px 16px;border-radius:var(--radius-small);font-family:DM Mono,monospace;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);transition:background var(--transition),color var(--transition),border-color var(--transition)}.toggle-btn--active{background:var(--amber);color:var(--bg);border-color:var(--amber)}.model-selector{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 16px;color:var(--text);font-family:DM Mono,monospace;font-size:13px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;transition:border-color var(--transition)}.model-selector:focus{border-color:var(--cyan)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:24px}.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px}.metric-card__label{font-family:DM Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--label);margin-bottom:12px}.metric-card__value{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:24px;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;width:100%}.metric-card__value--md{font-size:20px}.metric-card__value--sm{font-size:16px}.metric-card__value--xs{font-size:13px}.custom-select{position:relative;font-family:Space Grotesk,sans-serif;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-select__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-small);color:var(--text);transition:border-color var(--transition)}.custom-select__trigger:hover{border-color:var(--label)}.custom-select__trigger:after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-top:-4px}.custom-select.open .custom-select__trigger{border-color:var(--cyan)}.custom-select.open .custom-select__options{display:block}.custom-select__options{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card-alt);border:1px solid var(--border);border-radius:var(--radius-small);z-index:1000;min-width:140px;box-shadow:0 10px 30px #00000080}.custom-select__option{padding:10px 16px;color:var(--muted);transition:background var(--transition),color var(--transition)}.custom-select__option:hover{background:var(--bg-card);color:var(--text)}.custom-select__option--active{color:var(--cyan);background:#00e5ff0d}.ad-space{display:flex;align-items:center;justify-content:center;background:#0f0f1a80;border:1px dashed var(--border);color:var(--label);font-family:DM Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:40px auto;border-radius:var(--radius-small);overflow:hidden}.ad-leaderboard{width:100%;max-width:728px;height:90px}.ad-rectangle{width:100%;max-width:300px;height:250px}@media (max-width: 768px){.ad-leaderboard{max-width:320px;height:50px}}.metric-card__sub{font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500;color:var(--cyan);margin-top:4px}.metric-card__unit{font-family:DM Mono,monospace;font-size:11px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.08em}.scenario-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}.params-panel{display:flex;flex-direction:column;gap:16px}.param-group{display:flex;flex-direction:column;gap:6px}.param-label{font-family:DM Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--label)}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;transition:border-color var(--transition)}.pricing-card--selected{border-color:var(--cyan)}.pricing-card__header{display:flex;align-items:center;gap:8px;margin-bottom:16px}.pricing-card__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.pricing-card__dot--gemini{background:var(--cyan)}.pricing-card__dot--openai{background:var(--blue)}.pricing-card__name{font-family:Syne,sans-serif;font-weight:700;font-size:15px;color:var(--text)}.pricing-card__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border)}.pricing-card__row-label{font-family:DM Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.pricing-card__row-value{font-family:Space Grotesk,sans-serif;font-weight:500;font-size:14px;color:var(--text)}.pricing-card__row-value--output{color:var(--cyan)}.currency-select{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-small);padding:6px 10px;color:var(--text);font-family:DM Mono,monospace;font-size:12px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color var(--transition)}.currency-select:focus{border-color:var(--cyan)}.exchange-rate-display{font-family:Space Grotesk,sans-serif;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}.exchange-rate-display .rate-value{color:var(--text);font-weight:500}.exchange-rate-display .rate-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.value-empty{color:var(--label);font-family:DM Mono,monospace}.info-note{background:#00e5ff0d;border:1px solid rgba(0,229,255,.15);border-radius:var(--radius-small);padding:12px 16px;font-family:DM Mono,monospace;font-size:11px;color:var(--muted);margin-top:16px;line-height:1.6}#app-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-top:1px solid var(--border);font-family:DM Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#3b3b55}#app-footer a{color:#3b3b55;text-decoration:none}#app-footer a:hover{color:var(--muted)}.footer-links{display:flex;gap:24px}@media (max-width: 768px){.scenario-layout,.pricing-grid{grid-template-columns:1fr}h1{font-size:40px}main{padding:40px 20px 60px}#app-header{padding:12px 20px;flex-wrap:wrap;justify-content:space-between}}