/* ===== ModelProxy site design system — tokens, base, shared components ===== */ /* One theme. Every token is defined once, here; nothing below reopens `:root` */ /* for a second palette, and no media query or attribute changes a colour. */ :root{ color-scheme:dark; --bg:#0b0b0d; --surface:#141417; --surface-2:#1b1b20; --ink:#f2f2f0; --ink-hover:#c9c9d2; --muted:#a6a6ae; --faint:#8d8d97; --line:#2a2a30; --line-strong:#3b3b43; --hover:#1e1e23; --field:#141417; --accent:#ff6a3d; --accent-quiet:#ff8a63; --select:#5c2513; --ok:#5cd68f; --ok-bg:#0f2419; --danger:#ff9a8f; --danger-bg:#2a1512; --mark-filter:none; --btn-ink-fg:#0b0b0d; --btn-ink-hover:#dcdcd8; --dark:#141417; --dark-line:#2c2c33; --dark-muted:#a6a6ae; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --max:1240px; --lp-font-sans:var(--font-geist-sans, var(--font-sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)); --lp-font-mono:var(--font-geist-mono, var(--font-mono, "Geist Mono", "SFMono-Regular", Consolas, monospace)); --lp-background-100:#000000; --lp-background-200:#000000; --lp-gray-100:#1a1a1a; --lp-gray-200:#1f1f1f; --lp-gray-300:#292929; --lp-gray-400:#2e2e2e; --lp-gray-500:#454545; --lp-gray-600:#878787; --lp-gray-700:#8f8f8f; --lp-gray-800:#7d7d7d; --lp-gray-900:#a0a0a0; --lp-gray-1000:#ededed; --lp-gray-alpha-100:rgba(255,255,255,.07); --lp-gray-alpha-200:rgba(255,255,255,.09); --lp-gray-alpha-300:rgba(255,255,255,.13); --lp-gray-alpha-400:rgba(255,255,255,.14); --lp-gray-alpha-500:rgba(255,255,255,.24); --lp-gray-alpha-600:rgba(255,255,255,.51); --lp-gray-alpha-700:rgba(255,255,255,.54); --lp-gray-alpha-800:rgba(255,255,255,.47); --lp-gray-alpha-900:rgba(255,255,255,.61); --lp-gray-alpha-1000:rgba(255,255,255,.92); --lp-blue-100:#06193a; --lp-blue-400:#003674; --lp-blue-700:#006efe; --lp-blue-900:#47a8ff; --lp-blue-1000:#eaf6ff; --lp-green-900:#00ca50; --lp-amber-900:#ff9300; --lp-red-700:#f13242; --lp-chart-1:var(--lp-gray-1000); --lp-chart-2:var(--lp-gray-900); --lp-chart-3:var(--lp-gray-800); --lp-surface-primary:var(--lp-background-100); --lp-surface-secondary:var(--lp-background-200); --lp-surface-contrast:#171717; --lp-text-primary:var(--lp-gray-1000); --lp-text-secondary:var(--lp-gray-900); --lp-text-on-contrast:#ededed; --lp-text-on-contrast-secondary:#a4a4a4; --lp-border-subtle:var(--lp-gray-alpha-300); --lp-border-default:var(--lp-gray-alpha-400); --lp-border-strong:var(--lp-gray-alpha-700); --lp-border-on-contrast:rgba(255,255,255,.24); --lp-color-info:var(--lp-blue-700); --lp-color-success:var(--lp-green-900); --lp-color-warning:var(--lp-amber-900); --lp-color-error:var(--lp-red-700); --lp-focus:var(--lp-blue-900); --lp-space-1:4px; --lp-space-2:8px; --lp-space-3:12px; --lp-space-4:16px; --lp-space-5:20px; --lp-space-6:24px; --lp-space-8:32px; --lp-space-10:40px; --lp-space-12:48px; --lp-space-16:64px; --lp-radius-small:6px; --lp-radius:8px; --lp-type-display:3rem; --lp-type-page-title:2.5rem; --lp-type-title:2rem; --lp-type-section:1.5rem; --lp-type-subsection:1.25rem; --lp-type-lede:1.125rem; --lp-type-body:1rem; --lp-type-compact:0.875rem; --lp-type-label:0.8125rem; --lp-type-metadata:0.8125rem; --lp-weight-regular:400; --lp-weight-heading:450; --lp-weight-medium:500; --lp-weight-semibold:600; --lp-leading-body:24px; --lp-leading-compact:20px; --lp-leading-caption:18px; --lp-leading-display:56px; --lp-leading-page-title:48px; --lp-leading-title:40px; --lp-leading-section:32px; --lp-leading-subsection:26px; --lp-leading-lede:28px; --lp-flow-tight:var(--lp-space-2); --lp-flow-copy:var(--lp-space-4); --lp-flow-group:var(--lp-space-8); --lp-flow-section:var(--lp-space-16); --lp-reading-width:68ch; --lp-display-measure:20ch; --lp-title-measure:24ch; --lp-compact-title-measure:30ch; --lp-content-width:1200px; --lp-chart-min-width:640px; --lp-control-height:36px; --lp-control-height-touch:44px; --lp-guide:#1f1f1f; --lp-cross:#878787; } /* --- base --- */ /* These are element defaults, and every component on every page overrides them already. They sit in a layer so that the landing's own foundation — which is deliberately written at zero specificity, the way the design it reproduces writes it — can override them too. Without the layer a bare `button` or `a` selector here silently outranks a `:where()` rule there, and the landing renders with this file's type instead of its own. */ @layer base{ *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:0;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} img{max-width:100%} code,kbd,samp{font-family:var(--mono);font-size:.92em} ::selection{background:var(--select)} :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} } .mp-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .mp-nowrap{white-space:nowrap} .mp-num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* --- buttons --- */ .mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;text-align:center} .mp-btn:hover{background:var(--hover)} .mp-btn.is-primary{background:var(--ink);border-color:var(--ink);color:var(--btn-ink-fg)} .mp-btn.is-primary:hover{background:var(--btn-ink-hover);border-color:var(--btn-ink-hover)} .mp-btn.is-ghost{background:transparent;border-color:transparent;font-weight:500;color:var(--muted)} .mp-btn.is-ghost:hover{background:var(--hover);color:var(--ink)} .mp-btn.is-danger{background:transparent;border-color:var(--line-strong);color:var(--danger);font-weight:500} .mp-btn.is-danger:hover{background:var(--danger-bg);border-color:var(--danger)} .mp-btn.is-block{width:100%} .mp-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500} .mp-link:hover{color:var(--accent-quiet)} /* --- portal shell --- */ .mp-top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)} .mp-top-inner{max-width:var(--max);margin:0 auto;min-height:64px;padding:10px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .mp-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink);flex:none} .mp-brand img{filter:var(--mark-filter)} .mp-top-actions{display:flex;align-items:center;gap:10px;flex:none} .mp-top-email{color:var(--muted);font-size:14px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mp-top form{margin:0} /* Grows to absorb the free space so the actions sit at the right edge on one row; once the header wraps, every row starts at the same container inset instead of the actions being pushed inwards by an auto margin. */ /* `min-width:0` is load-bearing, not tidying. A flex item's default `min-width:auto` makes its *content's* intrinsic width the floor, so a scroll container inside a flex row cannot shrink below the width of everything in it — the `overflow-x:auto` here was inert. With four navigation items the row happened to fit a 360px screen anyway; adding a fifth («Пополнить») pushed the whole document to 414px wide. Both engines agreed, and no string assertion could see it. */ .mp-nav{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mp-nav::-webkit-scrollbar{display:none} .mp-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap} .mp-nav a:hover{background:var(--hover);color:var(--ink)} .mp-nav a[aria-current="page"]{background:var(--hover);color:var(--ink);font-weight:600} .mp-main{max-width:var(--max);margin:0 auto;padding:32px 24px 72px} .mp-section[hidden]{display:none} .mp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px} .mp-h1{font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0} .mp-h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px} .mp-sub{color:var(--muted);font-size:15px;margin:6px 0 0} /* --- cards and stats --- */ .mp-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px} .mp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .mp-stat dt{font-size:14px;font-weight:500;color:var(--muted);margin:0} .mp-stat dd{margin:10px 0 0} .mp-amount{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.1;display:block} .mp-amount-alt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px;color:var(--muted);display:block;margin-top:6px} .mp-stat-note{display:block;margin-top:12px;font-size:14px;color:var(--faint)} .mp-quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} /* --- money pairs in tables --- */ .mp-money{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono);font-variant-numeric:tabular-nums} .mp-money-alt{color:var(--muted);font-size:13px} /* --- forms --- */ .mp-form{display:grid;gap:16px} .mp-field{display:grid;gap:6px} .mp-field>span{font-size:14px;font-weight:500;color:var(--muted)} .mp-input{background:var(--field);border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);font-size:16px;min-height:44px;padding:0 12px;width:100%} .mp-input:focus{border-color:var(--ink)} .mp-hint{font-size:13px;color:var(--faint)} .mp-inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px} .mp-inline-form .mp-input{max-width:280px} /* --- notices --- */ .mp-notice{display:grid;gap:10px;border:1px solid var(--line);border-left-width:3px;border-radius:12px;padding:16px 18px;margin:0 0 20px;background:var(--surface);font-size:15px} .mp-notice strong{font-weight:600} .mp-notice.is-error{border-left-color:var(--danger);background:var(--danger-bg);color:var(--ink)} .mp-notice.is-ok{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ink)} .mp-notice.is-flash{border-left-color:var(--accent)} .mp-notice-icon{font-weight:700;margin-right:6px} .mp-secret{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .mp-secret code{flex:1 1 260px;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;overflow-wrap:anywhere} /* --- segmented control --- */ .mp-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px} .mp-seg a,.mp-seg button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap} .mp-seg a:hover,.mp-seg button:hover{color:var(--ink)} .mp-seg a[aria-current],.mp-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} /* --- tables --- */ .mp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)} .mp-table{width:100%;border-collapse:collapse;font-size:15px} .mp-table th,.mp-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap} .mp-table thead th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);background:var(--surface-2)} .mp-table tbody tr:last-child th,.mp-table tbody tr:last-child td{border-bottom:0} .mp-table .mp-right{text-align:right} .mp-table tfoot th,.mp-table tfoot td{padding:14px 16px;border-top:1px solid var(--line-strong);font-weight:600;background:var(--surface-2)} .mp-table-caption{font-size:14px;color:var(--muted);margin:0 0 10px} .mp-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line-strong);color:var(--muted)} .mp-tag.is-active{color:var(--ok);border-color:var(--ok)} .mp-tag.is-revoked{color:var(--faint)} tr.is-revoked td:not(.mp-actions){opacity:.62} /* --- usage charts (server-rendered SVG, themed through the tokens) --- */ .mp-charts{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:20px;margin:0 0 28px} .mp-chart{margin:0;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px} .mp-chart figcaption{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 14px} .mp-chart-days{display:block;width:100%;height:120px} .mp-chart-bar{fill:var(--accent-quiet)} .mp-chart-axis{display:flex;justify-content:space-between;margin:10px 0 0;font-size:12px;color:var(--faint);font-family:var(--mono)} .mp-chart-shares{list-style:none;margin:0;padding:0;display:grid;gap:10px} .mp-chart-shares li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px} .mp-chart-share-name{font-size:13px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mp-chart-share-value{font-size:13px;color:var(--muted);text-align:right} .mp-chart-track{grid-column:1/-1;display:block;width:100%;height:8px;background:var(--surface-2);border-radius:4px} /* --- unavailable-rate note and empty state --- */ .mp-fx{margin:14px 0 0;font-size:13px;color:var(--faint)} .mp-empty{border:1px dashed var(--line-strong);border-radius:14px;padding:40px 24px;text-align:center;color:var(--muted)} .mp-empty h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--ink)} .mp-empty p{margin:0} /* --- auth --- */ .mp-auth{min-height:100svh;display:grid;grid-template-rows:auto 1fr;gap:0} .mp-auth-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max);width:100%;margin:0 auto;padding:18px 24px} .mp-auth-body{display:grid;place-items:center;padding:24px 20px 64px} .mp-auth-card{width:100%;max-width:420px} .mp-auth-card h1{font-size:26px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px} .mp-auth-lead{color:var(--muted);font-size:15px;margin:0 0 22px} .mp-auth-alt{margin:20px 0 0;font-size:15px;color:var(--muted);text-align:center} .mp-auth-meta{display:flex;justify-content:flex-end;margin:-6px 0 0} .mp-auth-meta a{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .mp-auth-meta a:hover{color:var(--ink)} /* --- docs --- */ .mp-docs{max-width:var(--max);margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px} .mp-docs-index{align-self:start} .mp-docs-index h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 0 10px} /* One document now carries the API reference, the agent guides and the price list; a flat index of seventeen entries stops being scannable, so it is chunked by family. */ .mp-docs-index-group+.mp-docs-index-group{margin-top:14px} .mp-docs-index-group h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 0 6px} .mp-docs-index ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px} .mp-docs-index a{display:block;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--muted)} .mp-docs-index a:hover{background:var(--hover);color:var(--ink)} .mp-docs-body{min-width:0} .mp-docs-body h1{font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 12px} .mp-docs-lead{font-size:18px;color:var(--muted);margin:0 0 8px;max-width:46em} .mp-docs-section{padding-top:40px;scroll-margin-top:88px} .mp-docs-section h2{font-size:23px;font-weight:700;letter-spacing:-.015em;margin:0 0 12px} .mp-docs-section h3{font-size:16px;font-weight:600;margin:24px 0 8px} .mp-docs-section p,.mp-docs-section li{color:var(--muted);max-width:46em} .mp-docs-section p{margin:0 0 14px} .mp-docs-section ul,.mp-docs-section ol{margin:0 0 14px;padding-left:20px} .mp-docs-section li{margin:0 0 6px} .mp-docs-section strong{color:var(--ink);font-weight:600} .mp-note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--surface);padding:16px 18px;margin:0 0 16px} .mp-note p{margin:0 0 10px;color:var(--muted)} .mp-note p:last-child{margin:0} .mp-snippet{background:var(--dark);border-radius:12px;overflow:hidden;margin:0 0 16px} .mp-snippet{min-width:0} /* The label is a config-file path (`~/.config/kilo/kilo.jsonc`), which is one unbreakable word. Without a shrinkable flex item it sets a floor the header cannot go below and the snippet overflows its own box on a phone. */ .mp-snippet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--dark-line);min-width:0} .mp-snippet-head>span{font-family:var(--mono);font-size:13px;color:var(--dark-muted);min-width:0;overflow-wrap:anywhere} .mp-snippet-head [data-copy]{flex:none} .mp-snippet-head [data-copy]{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;background:transparent;border:1px solid var(--dark-line);border-radius:8px;color:#e8e8e8;font-size:13px;font-weight:500;cursor:pointer} .mp-snippet-head [data-copy]:hover{background:var(--dark-line)} .mp-snippet pre{margin:0;overflow-x:auto;padding:18px 20px;line-height:1.7;font-size:14px;font-family:var(--mono);color:#e8e8e8} .mp-kv{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 16px} .mp-kv th,.mp-kv td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} .mp-kv th{font-weight:600;white-space:nowrap;width:1%} .mp-kv td{color:var(--muted)} /* Long identifiers and URLs are unbreakable words: without this a key-value row sets a min-width the table cannot go below and the whole document scrolls. */ .mp-kv code{overflow-wrap:anywhere} .mp-docs-table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 16px} .mp-docs-table th,.mp-docs-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} .mp-docs-table td{color:var(--muted)} .mp-docs-table code{overflow-wrap:anywhere} /* The consolidated model table groups its rows by provider. The group row is a heading inside the table, not data, so it carries the section's weight and no cell borders of its own. */ .mp-group-row th{background:var(--hover);color:var(--ink);font-size:13px;letter-spacing:.02em;text-transform:uppercase;padding-top:14px} /* The two published anchors are aliases inside the consolidated section. They need the section's own offset, or a browser lands them under the sticky header the section itself clears. */ .mp-anchor-alias{display:block;scroll-margin-top:88px} .mp-badge{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)} .mp-badge-ok{border-color:var(--accent);color:var(--ink)} /* Identifier + copy control. The cell is the tap target: a 15px icon alone is below the 44px minimum on a phone, and the identifier next to it is what the reader is aiming at anyway. */ .mp-id{display:flex;align-items:center;gap:8px;min-height:44px} .mp-id code{overflow-wrap:anywhere} .mp-copy-id{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer} .mp-copy-id:hover{background:var(--hover);color:var(--ink)} .mp-copy-id:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mp-copy-id.is-copied{border-color:var(--accent);color:var(--ink)} .mp-copy-id .check-icon{display:none} .mp-copy-id.is-copied .check-icon{display:block} .mp-copy-id.is-copied .copy-icon{display:none} /* Wide tables scroll inside their own box rather than pushing the document. */ .mp-table-scroll{overflow-x:auto;margin:0 0 16px} .mp-table-scroll>table{margin:0} /* --- site footer (shared, compact) --- */ .mp-foot{border-top:1px solid var(--line);color:var(--muted)} .mp-foot-inner{max-width:var(--max);margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:14px} .mp-foot-inner nav{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto} .mp-foot a:hover{color:var(--ink)} /* --- responsive --- */ @media(min-width:1024px){ .mp-docs{grid-template-columns:220px minmax(0,1fr);gap:48px} .mp-docs-index{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow-y:auto} .mp-docs-index ol{flex-direction:column;flex-wrap:nowrap;gap:2px} } @media(max-width:720px){ .mp-top-inner{padding:10px 16px;gap:10px} /* The header's action cluster — currency, e-mail, docs, logout — is 398px of content on its own. It wraps onto its own line rather than setting the document's width; `min-width:0` lets it, for the same reason as `.mp-nav`. */ .mp-top-actions{flex-wrap:wrap;flex:1 1 auto;min-width:0} /* The address is the one piece of header text that can be arbitrarily long. */ .mp-top-email{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .mp-top-email{display:none} .mp-main{padding:24px 16px 64px} .mp-stats{grid-template-columns:minmax(0,1fr)} .mp-charts{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:22px} .mp-chart{padding:14px} .mp-chart-days{height:96px} .mp-docs{padding:24px 16px 64px} /* Key/value rows stack on a phone: a two-column table cannot shrink below its widest identifier, which pushed the whole document sideways. */ .mp-kv,.mp-kv tbody,.mp-kv tr,.mp-kv th,.mp-kv td{display:block;width:auto} .mp-kv tr{border-bottom:1px solid var(--line);padding:10px 0} .mp-kv th,.mp-kv td{border-bottom:0;padding:2px 0;white-space:normal} /* Four columns of prose cannot fit a phone, so each row becomes a stacked block. That already drops the table's semantics, so the now-meaningless header row is removed rather than left clipped to a 1px box. */ .mp-docs-table,.mp-docs-table tbody,.mp-docs-table tr,.mp-docs-table th,.mp-docs-table td{display:block;width:auto} .mp-docs-table thead{display:none} .mp-docs-table tr{border-bottom:1px solid var(--line);padding:10px 0} .mp-docs-table th,.mp-docs-table td{border-bottom:0;padding:2px 0} /* Stacking hides the header row, which would leave a price standing on its own with nothing to say what it measures. Each price cell carries its own label for exactly this layout. */ .mp-models-table td[data-label]::before{content:attr(data-label) ": ";color:var(--ink)} .mp-group-row th{padding:10px 0 2px} /* A thumb needs the full 44px; on a pointer device the icon can stay compact. */ .mp-copy-id{width:44px;height:44px} /* Stacked rows have no columns left to scroll, so the wrapper stops being one. */ .mp-table-scroll{overflow-x:visible} /* `.mp-table td` is `nowrap`, which is right for a column of figures and wrong for a sentence. Once the rows stack there is no column and no scroller, so a cell that refuses to wrap widens the document itself — measured at 360 and 390 px the moment a history row started explaining why the credited amount differed from the requested one. Notes wrap; the figures beside them still do not. */ .mp-table .mp-topup-note{white-space:normal;overflow-wrap:anywhere} .mp-auth-top{padding:14px 16px} .mp-auth-body{padding:16px 16px 56px} .mp-table-wrap{border:0;background:transparent;overflow-x:visible} .mp-table{font-size:15px} .mp-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mp-table,.mp-table tbody,.mp-table tfoot,.mp-table tr,.mp-table td,.mp-table th{display:block;width:100%} .mp-table tbody tr,.mp-table tfoot tr{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px} .mp-table td,.mp-table th,.mp-table tfoot td,.mp-table tfoot th{border:0;border-bottom:0;padding:7px 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:right;white-space:normal} .mp-table td::before,.mp-table tfoot td::before{content:attr(data-label);color:var(--muted);font-size:13px;font-weight:500;text-align:left;flex:none} .mp-table td:empty{display:none} .mp-table .mp-money{align-items:flex-end} .mp-foot-inner{padding:20px 16px} .mp-foot-inner nav{margin-left:0;gap:12px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ===== landing ===================================================== The landing reproduces the supplied prototype 1:1 (change `redesign-landing-from-prototype`, design D17). Everything between the two port markers below is the prototype's own stylesheet, carried across by `scripts/port-prototype-css.py` — do not hand-edit it; edit the prototype or the converter and re-run python3 scripts/port-prototype-css.py \ --apply backend/static/app.css The palette lives in the three `:root` blocks above, where the theme toggle, the first-paint bootstrap and `browser-tests/test_contrast.py` read it. ==================================================================== */ /* Self-hosted Geist and Geist Mono. Two files per family, disjoint ranges; built by `scripts/build-font-subsets.py` from the upstream OFL variable fonts, licence in `fonts/LICENSE.txt`. No request leaves the origin. */ @font-face{font-family:"Geist";src:url(/static/fonts/geist-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+2300-23FF,U+25A0-25FF,U+2600-27BF,U+FEFF,U+FFFD} @font-face{font-family:"Geist";src:url(/static/fonts/geist-cyrillic.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0400-052F,U+1C80-1C8A,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:"Geist Mono";src:url(/static/fonts/geist-mono-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+2300-23FF,U+25A0-25FF,U+2600-27BF,U+FEFF,U+FFFD} @font-face{font-family:"Geist Mono";src:url(/static/fonts/geist-mono-cyrillic.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0400-052F,U+1C80-1C8A,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} /* ===== landing: ported from the prototype by scripts/port-prototype-css.py ===== */ /* --------------------------------------------------------------------------- Vercel report foundation (vercel-brand.css), reconstructed rule for rule from https://vercel.com/geist/vercel-brand.css. Scoped with :where(.lp-report). --------------------------------------------------------------------------- */ :where(.lp-report) { box-sizing: border-box; margin: 0; min-height: 100%; min-height: 100dvh; background: var(--lp-background-100); color: var(--lp-gray-1000); font-family: var(--lp-font-sans); font-size: 16px; font-weight: var(--lp-weight-regular); line-height: var(--lp-leading-body); font-kerning: normal; font-optical-sizing: auto; font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @media (prefers-contrast: more) { :where(.lp-report) { --lp-border-subtle: var(--lp-border-default); } } :where(.lp-report) *, :where(.lp-report) *::before, :where(.lp-report) *::after { box-sizing: border-box; } :where(.lp-report) ::selection { background: var(--lp-blue-700); color: var(--lp-background-100); } :where(.lp-report) :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 3px; } :where(.lp-report) :where(a) { color: inherit; text-decoration-color: var(--lp-gray-600); text-decoration-thickness: 1px; text-underline-offset: 3px; } :where(.lp-report) a:hover { text-decoration-color: currentColor; } :where(.lp-report) :where(h1, h2, h3, h4) { color: var(--lp-gray-1000); font-weight: var(--lp-weight-heading); text-wrap: balance; margin: 0; } :where(.lp-report) h1, :where(.lp-report) .lp-title { max-width: var(--lp-title-measure); margin-block-end: var(--lp-space-4); font-size: var(--lp-type-page-title); line-height: var(--lp-leading-page-title); letter-spacing: -0.06em; } :where(.lp-report) .lp-display { max-width: var(--lp-display-measure); font-size: var(--lp-type-display); line-height: var(--lp-leading-display); letter-spacing: -0.06em; } :where(.lp-report) h2, :where(.lp-report) .lp-heading-24 { margin-block-end: var(--lp-space-4); font-size: var(--lp-type-section); line-height: var(--lp-leading-section); letter-spacing: -0.04em; } :where(.lp-report) h3, :where(.lp-report) .lp-heading-20 { margin-block-end: var(--lp-space-3); font-size: var(--lp-type-subsection); line-height: var(--lp-leading-subsection); letter-spacing: -0.02em; } :where(.lp-report) h4, :where(.lp-report) .lp-heading-16 { margin-block-end: var(--lp-space-2); font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.02em; } :where(.lp-report) p { margin: 0 0 var(--lp-space-4); line-height: var(--lp-leading-body); text-wrap: pretty; } :where(.lp-report) :where(ul, ol) { margin: 0 0 var(--lp-space-4); padding-inline-start: 1.25rem; } :where(.lp-report) li { line-height: var(--lp-leading-body); } :where(.lp-report) :where(p, li, dd, blockquote, figcaption, .lp-summary, .lp-lede) strong { color: var(--lp-gray-1000); font-weight: var(--lp-weight-medium); } :where(.lp-report) figure { margin: 0 0 var(--lp-space-8); } :where(.lp-report) figcaption, :where(.lp-report) .lp-caption { margin-block-start: var(--lp-space-3); color: var(--lp-text-secondary); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); } :where(.lp-report) :where(img, svg, video, canvas) { display: block; max-width: 100%; height: auto; } :where(.lp-report) .lp-shell { width: min(calc(100% - 48px), var(--lp-content-width)); margin-inline: auto; padding-block: clamp(40px, 7vw, 80px); container-name: lp-shell; container-type: inline-size; } :where(.lp-report) .lp-visually-hidden, :where(.lp-report) .lp-skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :where(.lp-report) .lp-skip-link:focus { position: fixed; inset-inline-start: var(--lp-space-4); inset-block-start: var(--lp-space-4); z-index: 100; width: auto; height: auto; margin: 0; padding: var(--lp-space-2) var(--lp-space-3); clip: auto; background: var(--lp-gray-1000); color: var(--lp-background-100); border-radius: var(--lp-radius-small); } :where(.lp-report) .lp-header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-space-6); row-gap: 0; padding-block-end: clamp(32px, 5vw, 56px); } :where(.lp-report) .lp-header > * { grid-column: 1 / -1; min-width: 0; margin-block: 0; } :where(.lp-report) .lp-masthead { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--lp-space-3) var(--lp-space-6); align-items: first baseline; } :where(.lp-report) .lp-identity { display: flex; min-width: max-content; align-items: center; gap: var(--lp-space-2); color: var(--lp-text-primary); font-size: var(--lp-type-compact); font-weight: var(--lp-weight-medium); line-height: var(--lp-leading-compact); white-space: nowrap; } :where(.lp-report) .lp-document-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: first baseline; justify-content: flex-end; gap: var(--lp-space-1) var(--lp-space-4); color: var(--lp-text-secondary); font-size: var(--lp-type-label); line-height: var(--lp-leading-compact); } :where(.lp-report) .lp-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-space-6); padding-block: 0; } :where(.lp-report) .lp-section > * { grid-column: 1 / -1; min-width: 0; margin-block: 0; } :where(.lp-report) .lp-section > :where(h2, h3, h4, p, ul, ol, dl, blockquote, .lp-reading) { grid-column: 1 / span 7; } :where(.lp-report) .lp-section > * + * { margin-block-start: var(--lp-flow-copy); } :where(.lp-report) .lp-section > :where(figure, pre, .lp-band, .lp-table-wrap, .lp-chart, .lp-calculator, .lp-stat-strip, .lp-comparison, .lp-result-group) { margin-block-start: var(--lp-flow-group); } :where(.lp-report) .lp-section + .lp-section { margin-block-start: clamp(48px, 5vw, 64px); } :where(.lp-report) .lp-opening + .lp-section { margin-block-start: clamp(48px, 5vw, 64px); } :where(.lp-report) .lp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lp-space-6); } :where(.lp-report) .lp-grid > * { grid-column: 1 / -1; min-width: 0; } :where(.lp-report) .lp-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lp-space-6); align-items: start; } :where(.lp-report) .lp-split > * { min-width: 0; } :where(.lp-report) .lp-reading { max-width: var(--lp-reading-width); } :where(.lp-report) :where(.lp-reading, .lp-flow) > * { margin-block: 0; } :where(.lp-report) :where(.lp-reading, .lp-flow) > * + * { margin-block-start: var(--lp-flow-copy); } :where(.lp-report) :where(.lp-reading, .lp-flow) > h3 + :where(p, ul, ol, dl, blockquote) { margin-block-start: var(--lp-space-3); } :where(.lp-report) :where(.lp-reading, .lp-flow) > h4 + :where(p, ul, ol, dl, blockquote) { margin-block-start: var(--lp-flow-tight); } :where(.lp-report) .lp-stack { display: grid; gap: var(--lp-flow-copy); } :where(.lp-report) .lp-stack[data-gap="tight"] { gap: var(--lp-flow-tight); } :where(.lp-report) .lp-stack[data-gap="group"] { gap: var(--lp-flow-group); } :where(.lp-report) .lp-stack > * { min-width: 0; margin-block: 0; } :where(.lp-report) .lp-span-4 { grid-column: span 4; } :where(.lp-report) .lp-span-5 { grid-column: span 5; } :where(.lp-report) .lp-span-6 { grid-column: span 6; } :where(.lp-report) .lp-span-7 { grid-column: span 7; } :where(.lp-report) .lp-span-8 { grid-column: span 8; } :where(.lp-report) .lp-span-12 { grid-column: 1 / -1; } :where(.lp-report) .lp-context, :where(.lp-report) .lp-label { color: var(--lp-text-secondary); font-size: 0.8125rem; font-weight: var(--lp-weight-regular); line-height: 1.2308; } :where(.lp-report) .lp-meta { color: var(--lp-text-secondary); font-family: var(--lp-font-sans); font-size: var(--lp-type-metadata); font-weight: var(--lp-weight-regular); font-variant-numeric: tabular-nums; line-height: var(--lp-leading-caption); } :where(.lp-report) .lp-note { border: 0; padding-block: var(--lp-space-3); color: var(--lp-text-secondary); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); } :where(.lp-report) .lp-lede, :where(.lp-report) .lp-summary { max-width: var(--lp-reading-width); color: var(--lp-gray-900); font-size: var(--lp-type-lede); line-height: var(--lp-leading-lede); } :where(.lp-report) .lp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-space-3); } :where(.lp-report) .lp-mono { font-family: var(--lp-font-mono); } :where(.lp-report) .lp-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; } :where(.lp-report) :where(th, td)[data-align="numeric"], :where(.lp-report) :where(th, td).lp-numeric { white-space: nowrap; overflow-wrap: normal; text-align: right; } :where(.lp-report) :where(button, .lp-button) { display: inline-flex; width: fit-content; max-width: 100%; min-height: var(--lp-control-height); align-items: center; justify-content: center; gap: var(--lp-space-2); border: 1px solid var(--lp-border-default); border-radius: var(--lp-radius-small); background: var(--lp-background-100); color: var(--lp-gray-1000); padding: 7px var(--lp-space-4); font: var(--lp-weight-medium) 0.875rem/var(--lp-leading-compact) var(--lp-font-sans); text-align: center; text-decoration: none; overflow-wrap: break-word; word-break: normal; white-space: normal; cursor: pointer; touch-action: manipulation; transition: background-color 150ms ease, border-color 150ms ease; } :where(.lp-report) :where(button, .lp-button):hover { border-color: var(--lp-border-default); background: var(--lp-gray-alpha-200); } :where(.lp-report) :where(button, .lp-button)[data-variant="primary"] { border-color: var(--lp-gray-1000); background: var(--lp-gray-1000); color: var(--lp-background-100); } :where(.lp-report) :where(button, .lp-button)[data-variant="primary"]:hover { border-color: var(--lp-gray-900); background: var(--lp-gray-900); } :where(.lp-report) :where(button, .lp-button)[data-variant="tertiary"] { border-color: transparent; background: transparent; } :where(.lp-report) :where(button, .lp-button)[data-variant="tertiary"]:hover { border-color: var(--lp-gray-alpha-200); background: var(--lp-gray-alpha-200); } :where(.lp-report) :where(button, .lp-button):active { background: var(--lp-gray-alpha-300); } :where(.lp-report) :where(button, .lp-button)[data-variant="primary"]:active { border-color: var(--lp-gray-800); background: var(--lp-gray-800); } :where(.lp-report) table { width: 100%; border-collapse: collapse; caption-side: top; font-size: 0.875rem; line-height: var(--lp-leading-compact); font-variant-numeric: tabular-nums; margin: 0; } :where(.lp-report) caption { padding: 0 0 var(--lp-space-3); color: var(--lp-text-secondary); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); text-align: left; } :where(.lp-report) :where(th, td) { border-bottom: 1px solid var(--lp-border-subtle); padding: 10px var(--lp-space-3); text-align: left; vertical-align: baseline; } :where(.lp-report) :where(th, td):first-child { padding-inline-start: 0; } :where(.lp-report) :where(th, td):last-child { padding-inline-end: 0; } :where(.lp-report) thead th { border-bottom-color: var(--lp-border-default); background: transparent; color: var(--lp-gray-900); font-weight: var(--lp-weight-medium); hyphens: none; overflow-wrap: normal; vertical-align: bottom; word-break: normal; } :where(.lp-report) tbody th { background: transparent; color: var(--lp-text-primary); font-weight: var(--lp-weight-medium); } :where(.lp-report) tbody tr:last-child > :where(th, td) { border-bottom-color: var(--lp-border-default); } :where(.lp-report) .lp-table-wrap { position: relative; display: block; align-self: stretch; justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 0; container-type: inline-size; } :where(.lp-report) :where(.lp-section, .lp-grid) > .lp-table-wrap { grid-column: 1 / -1; inline-size: 100%; } :where(.lp-report) .lp-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--lp-space-8); border: 0; background: transparent; } :where(.lp-report) .lp-stat { display: grid; align-content: start; gap: var(--lp-space-2); min-width: 0; background: transparent; padding: 0; } :where(.lp-report) .lp-stat > * { margin-block: 0; } :where(.lp-report) .lp-stat-label { color: var(--lp-text-secondary); font-size: var(--lp-type-compact); font-weight: var(--lp-weight-regular); line-height: var(--lp-leading-compact); } :where(.lp-report) .lp-stat-value { color: var(--lp-text-primary); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--lp-weight-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1.15; } :where(.lp-report) .lp-stat-detail { color: var(--lp-text-secondary); font-size: var(--lp-type-metadata); font-weight: var(--lp-weight-regular); line-height: var(--lp-leading-caption); } :where(.lp-report) .lp-bar-comparison { min-inline-size: 0; max-inline-size: 100%; } :where(.lp-report) .lp-bar-list { display: grid; gap: var(--lp-space-5); margin: 0; padding: 0; list-style: none; } :where(.lp-report) .lp-bar { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: var(--lp-space-2) var(--lp-space-4); min-inline-size: 0; } :where(.lp-report) :is(.lp-bar-label, .lp-bar-value) { min-inline-size: 0; color: var(--lp-text-primary); font-family: var(--lp-font-sans); font-size: var(--lp-type-compact); font-weight: var(--lp-weight-medium); line-height: var(--lp-leading-compact); } :where(.lp-report) .lp-bar-value { justify-self: end; font-variant-numeric: tabular-nums; text-align: end; } :where(.lp-report) .lp-bar-track { display: block; grid-column: 1 / -1; inline-size: 100%; block-size: 8px; overflow: hidden; border-radius: 2px; background: var(--lp-surface-secondary); } :where(.lp-report) .lp-bar-fill { display: block; inline-size: 0; max-inline-size: 100%; block-size: 100%; background: var(--lp-text-primary); } :where(.lp-report) .lp-bar[data-role="reference"] .lp-bar-fill { background: var(--lp-text-secondary); } :where(.lp-report) .lp-chart { min-width: 0; overflow: visible; } :where(.lp-report) .lp-chart-viewport { position: relative; min-width: 0; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; } :where(.lp-report) .lp-chart-header { display: grid; gap: var(--lp-space-1); margin-block-end: var(--lp-space-4); } :where(.lp-report) .lp-chart-header > * { max-width: var(--lp-reading-width); margin-block: 0; } :where(.lp-report) .lp-chart :where(svg) { width: 100%; max-width: 100%; } :where(.lp-report) .lp-chart text { fill: var(--lp-text-secondary); font-family: var(--lp-font-sans); font-size: 12px; } :where(.lp-report) .lp-chart text.lp-mono { font-family: var(--lp-font-mono); } :where(.lp-report) .lp-chart :is(.lp-chart-direct-label, .lp-chart-value) { fill: var(--lp-text-primary); font-size: 14px; font-weight: var(--lp-weight-medium); font-variant-numeric: tabular-nums; } :where(.lp-report) .lp-chart .lp-chart-annotation { fill: var(--lp-text-primary); font-size: 12px; } :where(.lp-report) .lp-chart .lp-chart-annotation-line { fill: none; stroke: var(--lp-border-strong); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; } :where(.lp-report) .lp-chart-gridline { fill: none; stroke: var(--lp-border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; } :where(.lp-report) .lp-chart-axis { fill: none; stroke: var(--lp-border-default); stroke-width: 1; vector-effect: non-scaling-stroke; } :where(.lp-report) .lp-series-stroke { fill: none; stroke: var(--lp-series-color, var(--lp-chart-1)); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; } :where(.lp-report) .lp-series-fill { fill: var(--lp-series-color, var(--lp-chart-1)); } :where(.lp-report) .lp-series-1 { --lp-series-color: var(--lp-chart-1); } :where(.lp-report) .lp-series-2 { --lp-series-color: var(--lp-chart-2); } :where(.lp-report) .lp-series-3 { --lp-series-color: var(--lp-chart-3); } :where(.lp-report) :where(code, kbd) { border: 1px solid var(--lp-border-subtle); border-radius: 4px; background: var(--lp-background-200); padding: 0.1em 0.3em; font-family: var(--lp-font-mono); font-size: 0.875em; overflow-wrap: anywhere; } :where(.lp-report) pre { margin: 0; overflow: auto; border: 1px solid var(--lp-border-subtle); border-radius: var(--lp-radius); background: var(--lp-background-200); padding: var(--lp-space-4); font-family: var(--lp-font-mono); font-size: 0.8125rem; line-height: 1.55; } :where(.lp-report) pre code { border: 0; background: transparent; padding: 0; font-size: inherit; } :where(.lp-report) .lp-band { display: grid; gap: var(--lp-space-4); border: 0; background: transparent; padding: 0; } :where(.lp-report) .lp-band > * { min-width: 0; margin-block: 0; } :where(.lp-report) .lp-band[data-tone="contrast"] { --lp-text-primary: var(--lp-text-on-contrast); --lp-text-secondary: var(--lp-text-on-contrast-secondary); --lp-border-subtle: var(--lp-border-on-contrast); --lp-border-default: var(--lp-border-on-contrast); --lp-border-strong: var(--lp-text-on-contrast); border-color: var(--lp-border-on-contrast); background: var(--lp-surface-contrast); color: var(--lp-text-on-contrast); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); } :where(.lp-report) .lp-band[data-tone="contrast"] :where(h1, h2, h3, h4, .lp-title, .lp-heading-24, .lp-heading-20, .lp-heading-16, .lp-lede, .lp-stat-value, .lp-identity, strong) { color: var(--lp-text-on-contrast); } :where(.lp-report) .lp-band[data-tone="contrast"] :where(.lp-context, .lp-label, .lp-meta, .lp-helper, .lp-lede, figcaption) { color: var(--lp-text-on-contrast-secondary); } :where(.lp-report) .lp-band[data-tone="contrast"] :where(button, .lp-button) { border-color: var(--lp-border-on-contrast); background: transparent; color: var(--lp-text-on-contrast); } :where(.lp-report) .lp-band[data-tone="contrast"] :where(button, .lp-button)[data-variant="primary"] { border-color: var(--lp-text-on-contrast); background: var(--lp-text-on-contrast); color: var(--lp-surface-contrast); } :where(.lp-report) .lp-calculator { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-6); border: 0; border-radius: 0; padding: 0; } :where(.lp-report) :where(.lp-calculator-inputs, .lp-calculator-output) { display: grid; min-width: 0; align-content: start; gap: var(--lp-space-6); } :where(.lp-report) .lp-calculator-output > :where(h2, h3, h4, p) { margin-block: 0; } :where(.lp-report) .lp-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-2); } :where(.lp-report) label { display: block; margin-block-end: 0; color: var(--lp-text-primary); font-size: var(--lp-type-label); font-weight: var(--lp-weight-medium); line-height: var(--lp-leading-compact); } :where(.lp-report) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { width: 100%; min-height: var(--lp-control-height); border: 1px solid var(--lp-border-default); border-radius: var(--lp-radius-small); background: var(--lp-background-100); color: var(--lp-gray-1000); padding: var(--lp-space-2) var(--lp-space-3); font: var(--lp-weight-regular) 0.875rem/1.4 var(--lp-font-sans); transition: border-color 150ms ease; } :where(.lp-report) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover { border-color: var(--lp-border-strong); } :where(.lp-report) select { background-position: right var(--lp-space-3) center; background-repeat: no-repeat; background-size: 12px; padding-inline-end: 32px; -webkit-appearance: none; appearance: none; } :where(.lp-report) .lp-helper, :where(.lp-report) .lp-error { margin: 0; color: var(--lp-text-secondary); font-size: var(--lp-type-label); line-height: var(--lp-leading-caption); } :where(.lp-report) .lp-error { color: var(--lp-color-error); } :where(.lp-report) .lp-control-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--lp-space-4); } :where(.lp-report) .lp-result-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--lp-space-8); } :where(.lp-report) .lp-result { display: grid; align-content: start; gap: var(--lp-space-3); border: 1px solid var(--lp-border-subtle); border-radius: var(--lp-radius); background: var(--lp-surface-primary); padding: var(--lp-space-6); } :where(.lp-report) .lp-result > * { margin: 0; } :where(.lp-report) .lp-result-label { color: var(--lp-text-secondary); font-size: var(--lp-type-compact); font-weight: var(--lp-weight-regular); line-height: var(--lp-leading-compact); } :where(.lp-report) .lp-result-value { color: var(--lp-text-primary); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--lp-weight-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1.15; } :where(.lp-report) .lp-result-detail { color: var(--lp-text-secondary); font-size: var(--lp-type-metadata); font-weight: var(--lp-weight-regular); line-height: var(--lp-leading-caption); } :where(.lp-report) .lp-footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-space-6); padding-block: clamp(32px, 5vw, 56px); border-block-start: 1px solid var(--lp-border-subtle); } :where(.lp-report) .lp-footer > * { grid-column: 1 / -1; min-width: 0; margin-block: 0; } @media (prefers-reduced-motion: reduce) { :where(.lp-report) * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- Page-owned CSS (ModelProxy). lp-custom-* / lp-viz-* only; public tokens only. Patterns taken from vercel.com sources: GridSystem (1px guides gray-400 light / gray-200 dark, crosses gray-600 21px), shadow-border cards on background-200, 150ms ease-in-out control transitions, hover-expand lists (200ms ease-out), drawPath stroke animation cubic-bezier(.33,.01,.63,1.01), text scramble (hold 2600ms, scramble 700ms), pill CTA buttons. --------------------------------------------------------------------------- */ :root:has(body.landing) { background: var(--lp-background-100); } /* The sticky header's height is declared once, here, and subtracted from the phone hero, so the bar and the hero that has to sit under it cannot drift apart: the 64px bar plus the 1px hairline it is separated by. */ body.landing { margin: 0; background: var(--lp-background-100); --lp-nav-bar-height: 64px; --lp-nav-height: calc(var(--lp-nav-bar-height) + 1px); } .lp-report { min-height: 100dvh; --shadow-border: 0 0 0 1px var(--lp-gray-alpha-400); } .lp-report .lp-shell { padding-block: 0; } .lp-report .lp-section > * + * { margin-block-start: var(--lp-flow-copy); } /* Brand mark: three routes merging into one, drawn with vercel.com's drawPath animation */ .lp-custom-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .lp-custom-logo { display: block; flex: none; color: var(--lp-text-primary); overflow: visible; } /* The dash belongs to the draw, not to the mark. A dash exactly as long as the path followed by a gap exactly as long as it has only two outcomes — the whole mark or nothing — and resting on it put three resolutions between the mark and its pixels at every repaint: the `pathLength` scaling, the dash phase, and an engine holding a finished animation's fill state on a `backdrop-filter` layer. So the dash lives in the keyframes and the animation fills backwards only: the draw's end drops the mark back to this plain undashed stroke, which is also what it wears when the draw never runs. */ .lp-custom-logo path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; stroke-dashoffset: 0; } .lp-custom-logo.is-on path { animation: lp-custom-draw 750ms cubic-bezier(.33,.01,.63,1.01) backwards; animation-delay: var(--d, 0ms); } @keyframes lp-custom-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .lp-custom-logo path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; } } /* Navigation */ .lp-custom-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--lp-background-100) 80%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--lp-gray-alpha-400); } .lp-custom-nav-inner { width: min(calc(100% - 48px), var(--lp-content-width)); margin-inline: auto; height: var(--lp-nav-bar-height); display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-6); } .lp-custom-nav .lp-identity { font-size: var(--lp-type-body); font-weight: var(--lp-weight-semibold); letter-spacing: -0.02em; } .lp-custom-nav .lp-identity a { text-decoration: none; } .lp-custom-nav-links { display: flex; align-items: center; gap: var(--lp-space-5); margin: 0; padding: 0; list-style: none; } .lp-custom-nav-links a { color: var(--lp-gray-900); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); text-decoration: none; transition: color 150ms ease-in-out; } .lp-custom-nav-links a:hover { color: var(--lp-gray-1000); } .lp-custom-nav-actions { display: flex; align-items: center; gap: var(--lp-space-2); } .lp-custom-nav-actions .lp-button { min-height: 32px; padding: 5px var(--lp-space-3); } @media (max-width: 900px) { .lp-custom-nav-links { display: none; } } /* Mobile navigation, after vercel.com: 44px hamburger that turns into an X, full-screen panel under the header */ .lp-custom-burger { display: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--lp-text-primary); margin-right: -10px; } .lp-custom-burger:hover { background: transparent; } .lp-custom-burger .lp-custom-burger-close { display: none; } .lp-custom-burger[aria-expanded="true"] .lp-custom-burger-open { display: none; } .lp-custom-burger[aria-expanded="true"] .lp-custom-burger-close { display: block; } .lp-custom-menu { position: fixed; inset: 64px 0 0 0; z-index: 19; background: var(--lp-background-100); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 200ms ease-out, visibility 200ms; } .lp-custom-menu[data-open] { visibility: visible; opacity: 1; } .lp-custom-menu-inner { display: flex; flex-direction: column; padding: var(--lp-space-6); } .lp-custom-menu-link { display: flex; align-items: center; min-height: 44px; padding: 0 var(--lp-space-3); margin: 0 calc(-1 * var(--lp-space-3)); border-radius: var(--lp-radius-small); font-size: 22px; color: var(--lp-gray-900); text-decoration: none; transition: color 150ms ease-in-out, background-color 150ms ease-in-out; } .lp-custom-menu-link:hover { color: var(--lp-gray-1000); background: var(--lp-gray-alpha-100); text-decoration: none; } .lp-custom-menu-hr { border: 0; border-top: 1px solid var(--lp-gray-alpha-400); margin: var(--lp-space-6) 0 var(--lp-space-5); } .lp-custom-menu .lp-button { width: 100%; max-width: none; margin-top: var(--lp-space-3); } @media (max-width: 900px) { .lp-custom-burger { display: inline-flex; } .lp-custom-nav-actions .lp-button[data-variant="tertiary"] { display: none; } .lp-custom-nav-actions .lp-button[data-variant="primary"] { min-height: 32px; } } @media (max-width: 560px) { /* Hero after vercel.com mobile: graphic first, centered copy, full-width pill buttons */ .lp-custom-hero-inner { row-gap: var(--lp-space-5); padding: 28px 0 32px; } .lp-custom-bill { order: -1; } .lp-custom-hero-claim { text-align: center; justify-self: center; max-width: 444px; } .lp-custom-hero .lp-display { margin-inline: auto; } .lp-custom-hero .lp-lede { margin-inline: auto; } .lp-custom-hero .lp-cluster, .lp-custom-cta .lp-cluster { flex-direction: column; align-items: stretch; width: 100%; } .lp-custom-hero .lp-custom-pill, .lp-custom-cta .lp-custom-pill { width: 100%; max-width: none; } .lp-custom-cross { display: none; } .lp-custom-nav-actions .lp-button[data-variant="primary"] { display: none; } } /* Pill CTA buttons (vercel.com hero: shape rounded, size large) */ .lp-custom-pill { border-radius: 999px !important; min-height: 44px; padding: 9px 18px; font-size: var(--lp-type-body); transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out; } /* Hero */ .lp-custom-hero { position: relative; background: #000000; color: #ededed; overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(255,255,255,.14); } .lp-custom-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .lp-custom-hero-inner { position: relative; z-index: 1; width: min(calc(100% - 48px), var(--lp-content-width)); margin: 0 auto; padding: clamp(56px, 8vw, 96px) 0; min-height: 560px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-space-6); row-gap: var(--lp-space-10); align-items: center; align-content: center; } .lp-custom-hero-inner > * { min-width: 0; } .lp-custom-hero-claim { grid-column: span 6; } .lp-custom-hero .lp-display { color: #ededed; max-width: 24ch; margin-bottom: var(--lp-space-5); } .lp-custom-hero .lp-lede { color: #a4a4a4; } .lp-custom-hero .lp-cluster { margin-top: var(--lp-space-6); } .lp-custom-hero .lp-button { border-color: rgba(255,255,255,.14); background: #000000; color: #ededed; } .lp-custom-hero .lp-button:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.09); } .lp-custom-hero .lp-button[data-variant="primary"] { border-color: #ededed; background: #ededed; color: #000000; } .lp-custom-hero .lp-button[data-variant="primary"]:hover { border-color: #cecece; background: #cecece; } .lp-custom-bill { grid-column: 7 / span 6; display: grid; gap: var(--lp-space-2); font-variant-numeric: tabular-nums; } .lp-custom-bill > * { margin: 0; min-width: 0; } .lp-custom-bill-title { display: flex; justify-content: space-between; gap: var(--lp-space-4); font-size: var(--lp-type-compact); color: #a4a4a4; line-height: var(--lp-leading-compact); margin-bottom: var(--lp-space-3); font-family: var(--lp-font-mono); } .lp-custom-bill-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 8.5rem; column-gap: var(--lp-space-4); align-items: center; } .lp-custom-bill-name { font-size: var(--lp-type-compact); color: #a4a4a4; white-space: nowrap; } .lp-custom-strip { display: block; height: 34px; } .lp-custom-bill-sum { font-size: var(--lp-type-subsection); font-weight: var(--lp-weight-heading); letter-spacing: -0.02em; text-align: right; white-space: nowrap; color: #a4a4a4; } .lp-custom-bill-row[data-row="save"] { margin-top: var(--lp-space-3); padding-top: var(--lp-space-3); border-top: 1px solid rgba(255,255,255,.14); } .lp-custom-bill-row[data-row="save"] .lp-custom-bill-name { color: #ededed; font-weight: var(--lp-weight-medium); } .lp-custom-bill-row[data-row="save"] .lp-custom-bill-sum { color: #00ca52; font-size: var(--lp-type-title); letter-spacing: -0.04em; } .lp-custom-bill-row[data-row="save"] .lp-custom-strip { height: 44px; } /* Two-tone headings, after vercel.com: first sentence gray-1000, the rest gray-900 */ .lp-custom-dim { color: var(--lp-gray-900); } .lp-custom-hero .lp-custom-dim { color: #a0a0a0; } /* Mobile hero visual: a ring of LEDs rendered like vercel.com's hero, drawn on the hero canvas */ .lp-custom-tri { display: none; } @media (max-width: 560px) { .lp-custom-bill { display: none !important; } .lp-custom-tri { display: block; grid-column: 1 / -1; order: -1; width: 100%; aspect-ratio: 16 / 9; touch-action: pan-y; } } /* Cards (vercel.com: rounded-md, shadow-border, bg-background-200) */ .lp-custom-card { position: relative; border-radius: var(--lp-radius); box-shadow: var(--shadow-border); background: var(--lp-background-200); overflow: hidden; } /* Route diagram */ .lp-custom-route { display: grid; grid-template-columns: minmax(0, 5fr) 72px minmax(0, 5fr) 72px minmax(0, 4fr); align-items: center; column-gap: 0; } .lp-custom-route > * { min-width: 0; } .lp-custom-node { padding: var(--lp-space-5); display: grid; gap: var(--lp-space-3); } .lp-custom-node > * { margin: 0; } .lp-custom-node-title { font-size: var(--lp-type-compact); font-weight: var(--lp-weight-medium); color: var(--lp-text-primary); display: flex; justify-content: space-between; gap: var(--lp-space-3); align-items: baseline; } .lp-custom-node-title .lp-meta { font-family: var(--lp-font-mono); } .lp-custom-term { font-family: var(--lp-font-mono); font-size: 12px; line-height: 18px; color: var(--lp-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 0; border: 0; background: transparent; } .lp-custom-term .lp-custom-mut { color: var(--lp-text-secondary); } .lp-custom-term .lp-custom-ok { color: var(--lp-color-success); } .lp-custom-node-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--lp-space-1); font-size: var(--lp-type-label); color: var(--lp-text-secondary); line-height: var(--lp-leading-caption); } .lp-custom-node-list li { line-height: var(--lp-leading-caption); } .lp-custom-node[data-node="mp"] { box-shadow: 0 0 0 1px var(--lp-gray-alpha-700); } .lp-custom-link { display: block; width: 100%; height: 100%; overflow: visible; } .lp-custom-link path { fill: none; vector-effect: non-scaling-stroke; } .lp-custom-link .lp-viz-guide { stroke: var(--lp-gray-alpha-500); stroke-width: 1; stroke-dasharray: 3 4; } .lp-custom-link .lp-viz-draw { stroke: var(--lp-text-primary); stroke-width: 1.5; opacity: 0; transition: opacity 300ms ease-out; } .lp-custom-link .lp-viz-draw[data-on] { opacity: 1; } .lp-custom-link .lp-viz-dot { fill: var(--lp-text-primary); } .lp-custom-link .lp-viz-dot[data-back] { fill: var(--lp-text-secondary); } .lp-custom-providers { list-style: none; margin: 0; padding: 0; display: grid; } .lp-custom-provider { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-3); padding: 0 var(--lp-space-4); height: 64px; border-radius: var(--lp-radius); font-size: var(--lp-type-compact); color: var(--lp-text-secondary); cursor: default; transition: background-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out; } .lp-custom-provider .lp-meta { transition: color 200ms ease-out; } .lp-custom-provider[data-on] { color: var(--lp-text-primary); background: var(--lp-gray-alpha-100); box-shadow: inset 0 0 0 1px var(--lp-gray-alpha-500); } .lp-custom-provider[data-on] .lp-meta { color: var(--lp-text-primary); } .lp-custom-route[data-mobile] { grid-template-columns: 1fr; row-gap: var(--lp-space-3); } .lp-custom-route[data-mobile] .lp-custom-link { display: none; } .lp-custom-route[data-mobile] .lp-custom-providers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-space-2); } .lp-custom-route[data-mobile] .lp-custom-provider { height: auto; padding: var(--lp-space-3); flex-direction: column; align-items: flex-start; gap: 2px; box-shadow: var(--shadow-border); } /* Grid system */ .lp-custom-gridsys { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border: 1px solid var(--lp-guide); } .lp-custom-gridsys[data-cols="2"] { --cols: 2; } .lp-custom-gridsys[data-cols="3"] { --cols: 3; } .lp-custom-gridsys[data-cols="4"] { --cols: 4; } .lp-custom-cell { position: relative; min-width: 0; padding: var(--lp-space-6); border-right: 1px solid var(--lp-guide); border-bottom: 1px solid var(--lp-guide); transition: background-color 150ms ease-in-out; } .lp-custom-cell[data-hover]:hover { background: var(--lp-gray-alpha-100); } .lp-custom-cell > * { margin: 0; } .lp-custom-cell > * + * { margin-top: var(--lp-space-2); } .lp-custom-cross { position: absolute; width: 21px; height: 21px; pointer-events: none; color: var(--lp-cross); z-index: 2; } .lp-custom-cross::before, .lp-custom-cross::after { content: ""; position: absolute; background: currentColor; } .lp-custom-cross::before { left: 10px; top: 0; width: 1px; height: 21px; } .lp-custom-cross::after { top: 10px; left: 0; width: 21px; height: 1px; } .lp-custom-cross[data-at="tl"] { left: -11px; top: -11px; } .lp-custom-cross[data-at="tr"] { right: -11px; top: -11px; } .lp-custom-cross[data-at="bl"] { left: -11px; bottom: -11px; } .lp-custom-cross[data-at="br"] { right: -11px; bottom: -11px; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-last-child(-n+4) { border-bottom: 0; } .lp-custom-gridsys[data-cols="2"] .lp-custom-cell:nth-last-child(-n+2) { border-bottom: 0; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-child(4n) { border-right: 0; } .lp-custom-gridsys[data-cols="2"] .lp-custom-cell:nth-child(2n) { border-right: 0; } .lp-custom-tools { grid-column: 1 / -1 !important; } .lp-custom-tool { font-size: var(--lp-type-compact); color: var(--lp-text-primary); display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--lp-space-4) var(--lp-space-6); } .lp-custom-cell pre { border: 0; border-radius: 0; background: transparent; padding: 0; } .lp-custom-cell[data-code] { background: var(--lp-background-200); } .lp-custom-cell .lp-label { margin-bottom: var(--lp-space-3); } /* Code card with tabs, diff-style highlight of the lines that change */ .lp-custom-code { display: grid; } .lp-custom-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-4); padding: 0 var(--lp-space-3) 0 var(--lp-space-2); border-bottom: 1px solid var(--lp-border-subtle); } .lp-custom-code-head .lp-custom-tabs { border-bottom: 0; overflow-x: auto; scrollbar-width: none; } .lp-custom-code-head .lp-custom-tabs::-webkit-scrollbar { display: none; } .lp-custom-code-head .lp-custom-tab { min-height: 44px; white-space: nowrap; } .lp-custom-code-head .lp-custom-tab-ink { bottom: 0; } .lp-custom-code-tools { display: flex; align-items: center; gap: var(--lp-space-3); flex: none; } .lp-custom-code-note { font-size: var(--lp-type-label); color: var(--lp-text-secondary); white-space: nowrap; } .lp-custom-copy { min-height: 28px; padding: 3px var(--lp-space-2); gap: 6px; font-size: var(--lp-type-label); color: var(--lp-text-secondary); border-color: transparent; background: transparent; } .lp-custom-copy:hover { color: var(--lp-text-primary); } .lp-custom-code-body { margin: 0; border: 0; border-radius: 0; background: transparent; padding: var(--lp-space-4) 0 var(--lp-space-5); font-size: 13px; line-height: 22px; overflow-x: auto; } .lp-custom-code-body code { display: block; min-width: max-content; } .lp-custom-line { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding-right: var(--lp-space-5); white-space: pre; color: var(--lp-text-primary); } .lp-custom-line::before { content: attr(data-n); color: var(--lp-text-secondary); opacity: 0.6; text-align: right; padding-right: var(--lp-space-4); user-select: none; font-variant-numeric: tabular-nums; } .lp-custom-line[data-changed] { background: var(--lp-blue-100); box-shadow: inset 2px 0 0 var(--lp-blue-700); } .lp-custom-line[data-changed]::before { color: var(--lp-blue-900); opacity: 1; } .lp-custom-line-text { white-space: pre; } .lp-custom-line .lp-custom-mut { color: var(--lp-text-secondary); } .lp-custom-line .lp-custom-str { color: var(--lp-blue-900); } .lp-custom-code[data-switching] .lp-custom-code-body code { animation: lp-custom-code-in 220ms ease-out; } @keyframes lp-custom-code-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .lp-custom-code-note { display: none; } .lp-custom-line { grid-template-columns: 2.5rem minmax(0, 1fr); } } /* Agents grid: click a cell to expand its setup */ .lp-custom-tool { padding: 0; } .lp-custom-tool-btn { width: 100%; max-width: none; min-height: 72px; justify-content: flex-start; gap: var(--lp-space-2); padding: 0 var(--lp-space-5); border: 0; border-radius: 0; background: transparent; color: var(--lp-gray-900); font-size: var(--lp-type-compact); font-weight: var(--lp-weight-medium); text-align: left; transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out, color 300ms ease-out; } .lp-custom-tool-name { flex: 1; min-width: 0; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms ease-in-out; } .lp-custom-tool-cta { font-weight: var(--lp-weight-regular); color: var(--lp-text-secondary); opacity: 0; transform: translateX(4px); transition: opacity 300ms ease-out, transform 300ms ease-out; white-space: nowrap; } .lp-custom-chev { flex: none; color: var(--lp-gray-600); transition: color 150ms ease-in-out, transform 200ms ease-out; } .lp-custom-tool-btn:hover { background: var(--lp-gray-alpha-100); color: var(--lp-gray-1000); } .lp-custom-tool-btn:hover .lp-custom-tool-name { text-decoration-color: var(--lp-gray-500); } .lp-custom-tool-btn:hover .lp-custom-tool-cta, .lp-custom-tool-btn[aria-expanded="true"] .lp-custom-tool-cta { opacity: 1; transform: none; } .lp-custom-tool-btn:hover .lp-custom-chev { color: var(--lp-gray-1000); } .lp-custom-tool-btn[aria-expanded="true"] { background: var(--lp-gray-alpha-100); box-shadow: inset 0 0 0 1px var(--lp-gray-alpha-500); color: var(--lp-gray-1000); } .lp-custom-tool-btn[aria-expanded="true"] .lp-custom-chev { color: var(--lp-gray-1000); transform: rotate(90deg); } @media (hover: none) { .lp-custom-tool-cta { opacity: 1; transform: none; } } .lp-custom-tool-btn:focus-visible { outline-offset: -3px; } .lp-custom-tool-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease-out; margin-top: 0 !important; } .lp-custom-tool-panel[data-open] { grid-template-rows: 1fr; } .lp-custom-tool-panel > div { overflow: hidden; } .lp-custom-tool-card { margin-top: var(--lp-space-3); display: grid; gap: var(--lp-space-4); padding: var(--lp-space-5) var(--lp-space-6) var(--lp-space-6); opacity: 0; transform: translateY(-4px); transition: opacity 300ms ease-out, transform 300ms ease-out; } .lp-custom-tool-panel[data-open] .lp-custom-tool-card { opacity: 1; transform: none; } .lp-custom-tool-head { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-4); } .lp-custom-tool-title { margin: 0; font-size: var(--lp-type-subsection); font-weight: var(--lp-weight-heading); letter-spacing: -0.02em; } .lp-custom-tool-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--lp-space-6); align-items: start; } .lp-custom-steps { margin: 0; padding: 0 0 0 1.25rem; display: grid; gap: var(--lp-space-2); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); color: var(--lp-text-primary); } .lp-custom-steps li { line-height: var(--lp-leading-compact); } .lp-custom-steps li::marker { color: var(--lp-text-secondary); font-variant-numeric: tabular-nums; } .lp-custom-tool-code { margin: 0; background: var(--lp-background-100); border: 1px solid var(--lp-border-subtle); border-radius: var(--lp-radius-small); padding: var(--lp-space-4); font-size: 12.5px; line-height: 20px; white-space: pre; overflow-x: auto; } .lp-custom-tool-code .lp-custom-str { color: var(--lp-blue-900); } .lp-custom-tool-code .lp-custom-mut { color: var(--lp-text-secondary); } .lp-custom-tool-note { margin: 0; font-size: var(--lp-type-label); color: var(--lp-text-secondary); line-height: var(--lp-leading-caption); } @media (max-width: 900px) { .lp-custom-tool-body { grid-template-columns: 1fr; } } /* Calculator with model catalogue */ .lp-custom-calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lp-space-6); row-gap: var(--lp-space-6); align-items: start; } .lp-custom-calc > * { min-width: 0; } .lp-custom-models { grid-column: span 7; } .lp-custom-tabs { display: flex; gap: var(--lp-space-1); border-bottom: 1px solid var(--lp-border-subtle); position: relative; } .lp-custom-tab { border: 0; background: transparent; min-height: 40px; padding: 0 var(--lp-space-3); border-radius: 0; color: var(--lp-text-secondary); font-weight: var(--lp-weight-medium); transition: color 150ms ease-in-out, background-color 150ms ease-in-out; } .lp-custom-tab:hover { background: transparent; color: var(--lp-text-primary); } .lp-custom-tab[aria-selected="true"] { color: var(--lp-text-primary); } .lp-custom-tab .lp-meta { margin-left: var(--lp-space-2); } .lp-custom-tab-ink { position: absolute; bottom: -1px; height: 2px; background: var(--lp-text-primary); left: 0; width: 0; transition: left 200ms cubic-bezier(.33,.01,.63,1.01), width 200ms cubic-bezier(.33,.01,.63,1.01); } .lp-custom-model-head, .lp-custom-model { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 6rem 6rem; column-gap: var(--lp-space-4); align-items: center; } .lp-custom-model-head { padding: var(--lp-space-3) var(--lp-space-3) var(--lp-space-2); color: var(--lp-text-secondary); font-size: var(--lp-type-label); } .lp-custom-model-head > .lp-numeric { color: var(--lp-text-secondary); } .lp-custom-model-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .lp-custom-model { min-height: 44px; padding: 0 var(--lp-space-3); border-radius: var(--lp-radius-small); font-size: var(--lp-type-compact); color: var(--lp-text-primary); cursor: pointer; transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out; font-variant-numeric: tabular-nums; } .lp-custom-model[hidden] { display: none; } .lp-custom-model:hover { background: var(--lp-gray-alpha-100); } .lp-custom-model[aria-selected="true"] { background: var(--lp-gray-alpha-100); box-shadow: inset 0 0 0 1px var(--lp-gray-alpha-500); } .lp-custom-model .lp-numeric { color: var(--lp-text-secondary); } .lp-custom-model[aria-selected="true"] .lp-numeric { color: var(--lp-text-primary); } .lp-custom-model-name { display: grid; gap: 5px; padding: var(--lp-space-2) 0; } .lp-custom-model-bar { display: block; height: 3px; width: var(--w); max-width: 100%; border-radius: 2px; background: var(--lp-gray-alpha-500); transition: background-color 150ms ease-in-out; transform-origin: left center; } .lp-custom-model[aria-selected="true"] .lp-custom-model-bar { background: var(--lp-text-primary); } .lp-custom-model-save { color: var(--lp-color-success) !important; } .lp-custom-panel { grid-column: 8 / span 5; position: sticky; top: 88px; padding: var(--lp-space-6); display: grid; gap: var(--lp-space-5); } .lp-custom-panel > * { margin: 0; } .lp-custom-panel-model { font-size: var(--lp-type-label); color: var(--lp-text-secondary); font-family: var(--lp-font-mono); } .lp-custom-panel .lp-field input { background: var(--lp-background-100); } .lp-custom-panel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-space-4); } .lp-custom-panel-fields > :last-child { grid-column: 1 / -1; } .lp-custom-results { display: grid; gap: var(--lp-space-4); padding-top: var(--lp-space-4); border-top: 1px solid var(--lp-border-subtle); } .lp-custom-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--lp-space-3); } .lp-custom-result-label { font-size: var(--lp-type-compact); color: var(--lp-text-secondary); } .lp-custom-result-value { font-size: var(--lp-type-section); font-weight: var(--lp-weight-heading); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; } .lp-custom-result[data-primary] .lp-custom-result-value { font-size: var(--lp-type-title); line-height: 1.15; } .lp-custom-result-detail { grid-column: 1 / -1; font-size: var(--lp-type-label); color: var(--lp-text-secondary); line-height: var(--lp-leading-caption); } .lp-custom-vs { display: grid; gap: var(--lp-space-2); padding-top: var(--lp-space-4); border-top: 1px solid var(--lp-border-subtle); font-size: var(--lp-type-compact); } .lp-custom-vs-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--lp-space-3); color: var(--lp-text-secondary); font-variant-numeric: tabular-nums; } .lp-custom-vs-row[data-primary] { color: var(--lp-text-primary); } .lp-custom-vs-track { height: 8px; border-radius: 2px; background: var(--lp-gray-alpha-200); overflow: hidden; } .lp-custom-vs-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--lp-text-secondary); border-radius: 2px; transition: width 400ms cubic-bezier(.33,.01,.63,1.01); } .lp-custom-vs-row[data-primary] .lp-custom-vs-fill { background: var(--lp-color-success); } .lp-custom-vs-note { font-size: var(--lp-type-compact); color: var(--lp-text-primary); line-height: var(--lp-leading-compact); padding-top: var(--lp-space-1); } .lp-custom-vs-note strong { font-weight: var(--lp-weight-medium); color: var(--lp-color-success); } /* FAQ: hover/click-expand list (vercel.com capabilities nav) */ .lp-custom-faq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lp-space-8); border-top: 1px solid var(--lp-border-subtle); } .lp-custom-faq > li { border-bottom: 1px solid var(--lp-border-subtle); } .lp-custom-faq-btn { width: 100%; max-width: none; display: block; text-align: left; border: 0; border-radius: 0; background: transparent; padding: var(--lp-space-4) 0; min-height: 0; font: inherit; font-weight: var(--lp-weight-medium); font-size: var(--lp-type-body); color: var(--lp-text-secondary); transition: color 300ms ease-out; cursor: pointer; } .lp-custom-faq-btn:hover, .lp-custom-faq > li[data-open] .lp-custom-faq-btn { background: transparent; color: var(--lp-text-primary); } .lp-custom-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease-out; } .lp-custom-faq > li[data-open] .lp-custom-faq-body { grid-template-rows: 1fr; } .lp-custom-faq-body > div { overflow: hidden; } .lp-custom-faq-body p { margin: 0; padding: 0 0 var(--lp-space-4); color: var(--lp-text-secondary); font-size: var(--lp-type-compact); line-height: var(--lp-leading-compact); opacity: 0; transition: opacity 300ms ease-out; } .lp-custom-faq > li[data-open] .lp-custom-faq-body p { opacity: 1; transition-duration: 500ms; } /* CTA */ .lp-custom-cta { text-align: center; display: grid; justify-items: center; gap: var(--lp-space-4); padding-top: var(--lp-space-8); } .lp-custom-cta .lp-display { max-width: 20ch; margin: 0; } .lp-custom-cta .lp-lede { margin: 0; } .lp-custom-cta .lp-cluster { justify-content: center; margin-top: var(--lp-space-2); } .lp-custom-glowwrap { position: relative; width: min(100%, 640px); margin-top: var(--lp-space-6); isolation: isolate; } .lp-custom-terminal { position: relative; z-index: 1; padding: var(--lp-space-5) var(--lp-space-6); border-radius: var(--lp-radius); background: #0a0a0a; box-shadow: 0 0 0 1px rgba(255,255,255,.14); font-family: var(--lp-font-mono); font-size: 13px; line-height: 20px; color: #ededed; text-align: left; min-height: 148px; } .lp-custom-terminal .lp-custom-mut { color: #a4a4a4; } .lp-custom-terminal .lp-custom-ok { color: #00ca52; } /* Spectral glow escaping from the card's edge, after vercel.com's Passport card */ .lp-custom-spectrum { position: absolute; right: -12px; top: 50%; height: 80%; width: 48px; transform: translateY(-50%); z-index: 0; pointer-events: none; opacity: 0.75; transition: opacity 1000ms ease-out; } .lp-custom-glowwrap:hover .lp-custom-spectrum { opacity: 1; } .lp-custom-spectrum-bar { position: absolute; inset: 0; background: linear-gradient(to top, #00E5FF 0%, #9500FF 25%, #FF1744 50%, #FFD000 75%, #00FF95 100%); filter: blur(20px); } .lp-custom-spectrum-ellipse { position: absolute; inset: 0 auto 0 -12px; width: 100%; pointer-events: none; } .lp-custom-spectrum-surface { height: 100%; width: 100%; transform-origin: center; border-radius: 100%; background: linear-gradient(to right, #FFDC30 0%, #38A2FF 100%); mix-blend-mode: color-burn; filter: blur(20px); animation: lp-custom-glow-x 1.2s ease-in-out infinite alternate; } @keyframes lp-custom-glow-x { from { transform: scaleX(1); } to { transform: scaleX(1.5); } } @media (prefers-reduced-motion: reduce) { .lp-custom-spectrum-surface { animation: none; } } .lp-custom-terminal p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .lp-custom-terminal p + p { margin-top: 2px; } .lp-custom-terminal .lp-custom-mut { color: var(--lp-text-secondary); } .lp-custom-terminal .lp-custom-ok { color: var(--lp-color-success); } .lp-custom-terminal p[data-active] [data-typed]:not([data-done])::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--lp-blue-700); border-radius: 1px; animation: lp-custom-blink 1s steps(2) infinite; } .lp-custom-terminal p[data-pending] { opacity: 0; } .lp-custom-terminal p[data-show] { opacity: 1; transition: opacity 300ms ease-out; } .lp-custom-cta .lp-cluster { margin-top: var(--lp-space-6); } @keyframes lp-custom-blink { to { opacity: 0; } } /* Footer */ .lp-custom-footer-inner { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lp-space-6); flex-wrap: wrap; } /* Responsive */ @media (max-width: 1100px) { .lp-custom-model-head, .lp-custom-model { grid-template-columns: minmax(0, 1fr) 5rem 5rem 5rem; } } @media (max-width: 900px) { .lp-custom-hero-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 48px 0; min-height: 0; } .lp-custom-hero-claim, .lp-custom-bill { grid-column: span 6; } .lp-custom-hero .lp-display { font-size: var(--lp-type-page-title); line-height: var(--lp-leading-page-title); } .lp-custom-models, .lp-custom-panel { grid-column: 1 / -1; position: static; } .lp-custom-gridsys[data-cols="4"] { --cols: 2; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-child(4n) { border-right: 1px solid var(--lp-guide); } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-child(2n) { border-right: 0; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--lp-guide); } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-last-child(-n+2) { border-bottom: 0; } .lp-custom-gridsys[data-cols="2"] { --cols: 1; } .lp-custom-gridsys[data-cols="2"] .lp-custom-cell { border-right: 0; border-bottom: 1px solid var(--lp-guide); } .lp-custom-gridsys[data-cols="2"] .lp-custom-cell:last-child { border-bottom: 0; } .lp-custom-faq { grid-template-columns: 1fr; } .lp-custom-cta-cards { grid-template-columns: 1fr; } .lp-report .lp-section > :where(h2, h3, h4, p, ul, ol, dl, blockquote, .lp-reading) { grid-column: 1 / -1; } } @media (max-width: 560px) { /* The hero owns the first viewport and no more of it. `svh` is the height the visitor actually has while the browser's chrome is out — `lvh` is the chrome-*retracted* height, which left a header's worth of empty hero between the fold and «Цены» — and the sticky header stands above the hero, so its height comes off. The safe-area inset is padding, laid inside that height rather than added to it, so the hero's bottom edge still lands on the fold. `vh` is the fallback for an engine without the small unit. */ .lp-custom-hero { min-height: calc(100vh - var(--lp-nav-height)); min-height: calc(100svh - var(--lp-nav-height)); padding-bottom: env(safe-area-inset-bottom, 0px); } /* And the inner takes that whole height, so the grid's own `align-content: center` centres the graphic, the claim and the actions in the viewport the hero owns. Left at its 560px minimum it sat against the top and left the rest as one empty band under the actions — the same void, moved. */ .lp-custom-hero-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: calc(100vh - var(--lp-nav-height)); min-height: calc(100svh - var(--lp-nav-height)); } .lp-custom-hero-claim, .lp-custom-bill { grid-column: span 4; } .lp-custom-hero .lp-display { font-size: 30px; line-height: 36px; margin-bottom: var(--lp-space-3); } .lp-custom-hero .lp-lede { font-size: var(--lp-type-body); line-height: var(--lp-leading-body); } .lp-custom-hero .lp-cluster { margin-top: var(--lp-space-4); gap: var(--lp-space-2); } /* Compact bill: the two paid rows as plain lines, only the money that stays gets the LED strip */ .lp-custom-bill { gap: var(--lp-space-1); padding-bottom: var(--lp-space-6); } .lp-custom-bill-title { margin-bottom: var(--lp-space-2); font-size: var(--lp-type-label); } .lp-custom-bill-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; min-height: 32px; } .lp-custom-bill-name { grid-row: 1; grid-column: 1; font-size: var(--lp-type-compact); } .lp-custom-bill-sum { grid-row: 1; grid-column: 2; font-size: var(--lp-type-body); } .lp-custom-bill-row[data-row="or"] .lp-custom-strip, .lp-custom-bill-row[data-row="mp"] .lp-custom-strip { display: none; } .lp-custom-bill-row[data-row="save"] { margin-top: var(--lp-space-2); padding-top: var(--lp-space-3); } .lp-custom-bill-row[data-row="save"] .lp-custom-bill-sum { font-size: var(--lp-type-section); } .lp-custom-bill-row[data-row="save"] .lp-custom-strip { display: block; grid-row: 2; grid-column: 1 / -1; height: 28px; margin-top: var(--lp-space-1); } .lp-custom-model-head, .lp-custom-model { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; } .lp-custom-model-head > :nth-child(2), .lp-custom-model > :nth-child(2) { display: none; } .lp-custom-panel-fields { grid-template-columns: 1fr; } .lp-custom-gridsys[data-cols="4"] { --cols: 1; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell { border-right: 0 !important; border-bottom: 1px solid var(--lp-guide) !important; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:last-child { border-bottom: 0 !important; } .lp-custom-nav-actions .lp-button[data-variant="tertiary"] { display: none; } .lp-custom-route[data-mobile] .lp-custom-providers { grid-template-columns: 1fr; } .lp-custom-cta .lp-display { font-size: var(--lp-type-title); line-height: var(--lp-leading-title); } } /* Mobile: drop the diagram and the calculator panel, keep the price list; tighten the agents grid */ @media (max-width: 560px) { #route-section { display: none; } #calc { margin-block-start: var(--lp-space-12); } .lp-custom-panel { display: none; } .lp-custom-model-list { pointer-events: none; } .lp-custom-model { min-height: 40px; } .lp-custom-model[aria-selected="true"] { background: transparent; box-shadow: none; } .lp-custom-model[aria-selected="true"] .lp-custom-model-bar { background: var(--lp-gray-alpha-500); } .lp-custom-model[aria-selected="true"] .lp-numeric { color: var(--lp-text-secondary); } .lp-custom-gridsys[data-cols="4"] { --cols: 2; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell { border-right: 1px solid var(--lp-guide) !important; border-bottom: 1px solid var(--lp-guide) !important; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-child(2n) { border-right: 0 !important; } .lp-custom-gridsys[data-cols="4"] .lp-custom-cell:nth-last-child(-n+2) { border-bottom: 0 !important; } .lp-custom-tool-btn { min-height: 52px; padding: 0 var(--lp-space-4); } .lp-custom-tool-cta { display: none; } .lp-custom-tool-body { gap: var(--lp-space-4); } .lp-custom-tool-card { padding: var(--lp-space-4); } .lp-custom-code-body { font-size: 12px; } .lp-report .lp-section + .lp-section { margin-block-start: var(--lp-space-12); } } @media (prefers-reduced-motion: reduce) { .lp-custom-terminal p[data-active] [data-typed]:not([data-done])::after { animation: none; } } /* ===== landing: end of the ported block ===== */ /* ===== landing additions =========================================== The prototype carries its layout offsets as inline `style=` attributes and its one-off state as inline scripts; the page is served under `style-src 'self'; script-src 'self'`, so each of those becomes a class here with the prototype's own value. The rest of this block is the four surfaces the prototype has no equivalent of, because it has no data: the hero's model switcher, the strips the server renders so the card is complete without the canvas, the pricing list's provider grouping, and the footer's columns. Each is built from the prototype's own components. ==================================================================== */ /* The prototype's inline offsets, verbatim. */ .lp-route-section{margin-top:clamp(48px, 6vw, 80px)} .lp-route-diagram{margin-top:var(--lp-space-8)} .lp-code-card{margin-top:var(--lp-space-8)} .lp-tools-grid{list-style:none;padding:0;margin:var(--lp-space-8) 0 0} .lp-report .lp-custom-calc{margin-top:var(--lp-space-4)} .lp-report .lp-custom-faq{margin-top:var(--lp-space-4)} /* Air under the last call to action. The prototype's CTA sits inside a section whose bottom padding the footer shell removes; with the footer's divider directly under the buttons the block reads as cramped, so the space is put back where the two meet. */ .lp-custom-cta{padding-bottom:clamp(48px, 6vw, 88px)} .lp-shell-footer{padding-top:0} .lp-nowrap{white-space:nowrap} .lp-report [hidden]{display:none !important} /* The brand mark's three routes draw in sequence; the prototype sets each path's delay inline. */ .lp-custom-logo path:nth-child(1){animation-delay:130ms} .lp-custom-logo path:nth-child(2){animation-delay:190ms} .lp-custom-logo path:nth-child(3){animation-delay:270ms} /* Hero: the prototype's card states the model, the counter and three rows. The only rule the port adds is for the state where nothing is published, which the prototype has no equivalent for. */ .lp-bill-note{margin-top:var(--lp-space-2);font-size:var(--lp-type-label);line-height:var(--lp-leading-caption);color:#8f8f8f} .lp-bill-empty .lp-custom-bill-title{display:block} /* The strips the server draws so the card is complete before the canvas runs. Once the canvas has its first frame it draws the same LEDs, so the markup copy steps aside rather than doubling them. */ .lp-custom-strip>svg{display:block;width:100%;height:34px;overflow:visible} .lp-custom-strip[data-strip="or"] circle{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.25;r:3.4} .lp-custom-strip[data-strip="mp"] circle{fill:rgba(255,255,255,.75)} .lp-custom-strip[data-strip="save"] circle{fill:#00ca52} .lp-custom-hero[data-canvas="on"] .lp-custom-strip>svg{display:none} /* Pricing list: one group per provider, so every row is in the document and only the script hides the ones a tab is not showing. */ /* The prototype gives each price bar its own width with an inline `style="--w: 42%"`. The page is served under `style-src 'self'`, so the width travels as an attribute on a rect inside the bar: same drawing, one length per model, no inline style — and no `var(--w)` that resolves to nothing and lets every bar run the full width of the column. */ .lp-report .lp-custom-model-bar{width:100%;background:transparent} .lp-custom-model-bar-fill{fill:var(--lp-gray-alpha-500);transition:fill 150ms ease-in-out} .lp-custom-model[aria-selected="true"] .lp-custom-model-bar-fill{fill:var(--lp-text-primary)} .lp-models{display:grid} .lp-model-group{display:grid;gap:var(--lp-space-2);min-width:0} .lp-model-group+.lp-model-group{margin-top:var(--lp-space-5)} .lp-report .lp-group-heading{margin:0;font-size:var(--lp-type-label);font-weight:var(--lp-weight-medium);color:var(--lp-text-secondary);letter-spacing:0} :root.js .lp-group-heading{display:none} .lp-report .lp-custom-model-list:focus-visible{outline:2px solid var(--lp-focus);outline-offset:3px} .lp-custom-model-bar{overflow:hidden} .lp-route-unavailable{margin:0;font-size:var(--lp-type-compact);color:var(--lp-text-secondary)} .lp-report .lp-arrow-link{color:var(--lp-text-primary);font-weight:var(--lp-weight-medium);text-decoration-line:none;white-space:nowrap} .lp-report .lp-arrow-link:hover{text-decoration-line:underline} .lp-tool-body-prose{grid-template-columns:minmax(0,1fr)} /* FAQ: the prototype's two-column hairline list, built on a native disclosure so it opens without script and the policy suites can slice it. Chrome 131+ animates the panel through `::details-content`; older engines snap, which is what a disclosure does anyway. */ .lp-report .lp-custom-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--lp-space-8);border-top:1px solid var(--lp-border-subtle)} .lp-custom-faq>details{border-bottom:1px solid var(--lp-border-subtle);min-width:0} .lp-custom-faq>details>summary{list-style:none;display:block;width:100%;padding:var(--lp-space-4) 0;font-size:var(--lp-type-body);font-weight:var(--lp-weight-medium);color:var(--lp-text-secondary);cursor:pointer;transition:color 300ms ease-out} .lp-custom-faq>details>summary::-webkit-details-marker{display:none} .lp-custom-faq>details>summary:hover,.lp-custom-faq>details[open]>summary{color:var(--lp-text-primary)} .lp-custom-faq>details>summary:focus-visible{outline:2px solid var(--lp-focus);outline-offset:-3px} /* The prototype keys the open state on its own `li[data-open]`; a native disclosure states it as `[open]`, so the two rules it drives are re-pointed at that. The values are the prototype's. */ .lp-custom-faq>details[open] .lp-custom-faq-body{grid-template-rows:1fr} .lp-custom-faq>details[open] .lp-custom-faq-body p{opacity:1;transition-duration:500ms} @media (max-width: 900px){.lp-report .lp-custom-faq{grid-template-columns:1fr}} /* Footer: the prototype's hairline rule and brand row, carrying the column set and the legal line this site's footer owes its readers. */ .lp-custom-footer-inner{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--lp-space-8) var(--lp-space-6);align-items:start} .lp-footer-brand-col{display:grid;gap:var(--lp-space-2);align-content:start} .lp-document-meta{margin:0;color:var(--lp-text-secondary);font-size:var(--lp-type-label);line-height:var(--lp-leading-caption)} .lp-footer-col{display:grid;gap:var(--lp-space-2);align-content:start} .lp-report .lp-footer-col h3{margin:0 0 var(--lp-space-1);font-size:var(--lp-type-label);font-weight:var(--lp-weight-medium);color:var(--lp-text-primary);letter-spacing:0} .lp-report .lp-footer-col a{color:var(--lp-text-secondary);font-size:var(--lp-type-compact);line-height:var(--lp-leading-compact);text-decoration-line:none} .lp-report .lp-footer-col a:hover{color:var(--lp-text-primary);text-decoration-line:underline} .lp-footer-legal{margin:var(--lp-space-8) 0 0;color:var(--lp-text-secondary);font-size:var(--lp-type-label);line-height:var(--lp-leading-caption)} @media (max-width: 900px){.lp-custom-footer-inner{grid-template-columns:1fr 1fr}} @media (max-width: 560px){.lp-custom-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lp-space-6) var(--lp-space-4)}.lp-footer-brand-col{grid-column:1 / -1}.lp-report .lp-footer-col a{display:flex;align-items:center;min-height:44px}} /* The sticky nav states its scroll position with the shadow the prototype reserves for a lifted surface, rather than by moving. */ .lp-custom-nav.is-scrolled{box-shadow:0 1px 0 0 var(--lp-gray-alpha-400)} /* ===== the five interactions a phone reported ======================== Each rule below removes one reported fault. None of them changes a colour, a type size or a position the prototype comparison measures: the panes keep the sizes they already declare, the terminal keeps the box it already has when it is finished, and the pricing action keeps its label and its height. ==================================================================== */ /* 1. A phone engine may inflate a text block whose lines overflow its width, which is how the cURL and Go panes came out larger than Python and JavaScript on a phone while every desktop reading agreed. The code surfaces refuse that; the sizes they declare are the sizes they keep. */ .lp-custom-code-body,.lp-custom-tool-code,.lp-custom-terminal{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 2. The copy control states both outcomes. The icon swap is the half a visitor sees — until now both icons were painted at once, so the tick meant nothing — and the label is the half that is announced, which is why on a phone it is taken out of sight rather than out of the box. */ .lp-custom-copy .check-icon{display:none} .lp-custom-copy[data-copy-state="copied"] .check-icon{display:block} .lp-custom-copy[data-copy-state="copied"] .copy-icon{display:none} .lp-custom-copy[data-copy-state="copied"]{color:var(--lp-color-success)} .lp-custom-copy[data-copy-state="failed"]{color:var(--lp-color-error)} @media (max-width: 560px){ .lp-custom-copy .copy-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } /* 4. The terminal reserves the finished transcript from its first frame. Each typed line stacks a hidden copy of its whole command under the live one in the same grid cell, so the cell is already as tall as the line will be when it is complete — at any width, however often it wraps, and across the reset that starts a replay. The ghost's trailing space is the caret's, so a part-typed line and its caret can never wrap where the complete line does not. */ .lp-custom-terminal-line{display:grid} .lp-custom-terminal-line>*{grid-area:1 / 1} .lp-custom-terminal-ghost{visibility:hidden} .lp-custom-terminal-ghost::after{content:"";display:inline-block;width:9px} /* 5. The hero's pricing action carries the three served providers as marks masked out of the site's own logo files and painted in the pill's text colour, so they follow its normal and hover states, need no second copy of the asset, and add no text to the action's name. */ .lp-custom-pill-marks{display:inline-flex;align-items:center;gap:6px;flex:none} .lp-custom-pill-mark{display:block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain} /* `openai.svg` carries 180.5 units of transparent padding per side inside a 716 viewBox, so the shared `contain` above fits the padding too and lands the glyph at 49.5% of the box while the other two marks fill theirs. 180% of the 16px area scales the mask so the visible knot reads at ~14.3px: optical parity, deliberately just under the other two because a closed circular form reads larger than an airy burst at equal height. One value keeps height auto and the viewBox is square, so nothing is distorted. The asset is shared with the provider rows (app.js LOGO_SOURCES) and is not touched. */ .lp-custom-pill-mark[data-mark="openai"]{-webkit-mask-image:url(/static/logos/openai.svg);mask-image:url(/static/logos/openai.svg);-webkit-mask-size:180%;mask-size:180%} .lp-custom-pill-mark[data-mark="claude"]{-webkit-mask-image:url(/static/logos/claude.svg);mask-image:url(/static/logos/claude.svg)} .lp-custom-pill-mark[data-mark="zai"]{-webkit-mask-image:url(/static/logos/zai.svg);mask-image:url(/static/logos/zai.svg)} /* Currency control. One segmented pill, in the header of the landing, the documentation and the portal. The choice is site-wide, so the control sits with the other header actions rather than inside the prices it converts, and nothing follows it: the converted figures are its only visible effect. The portal's is a form, so its buttons are submit buttons; the public pages' are ordinary buttons a script drives. The shapes are identical because the control is the same control. There is no visible label — the group carries `aria-label="Валюта"`. */ .lp-currency,.mp-currency{display:inline-flex;align-items:center;gap:2px;flex:none;margin:0;padding:2px; border:1px solid var(--line-strong);border-radius:999px;background:transparent} .lp-currency-option,.mp-currency button{display:inline-flex;align-items:center;justify-content:center; font:inherit;font-size:13px;line-height:1;min-height:26px;padding:0 10px;border:0;border-radius:999px; background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap} .mp-currency button{min-height:30px} .lp-currency-option[aria-pressed="true"],.mp-currency button[aria-pressed="true"]{ background:var(--hover);color:var(--ink);font-weight:600} .lp-currency-option:disabled,.mp-currency button:disabled{opacity:.45;cursor:not-allowed} /* Phones: a touch target, on both headers. The landing's own breakpoint is 900px (where its links collapse into the menu) and the portal's is 720px (where its header starts wrapping), so each grows at its own. Both budgets at 360px are tight, and both were measured rather than assumed. The control's own padding is what gives the width back — the design's stated fallback, and the only lever neither header's other contracts hold. `.lp-custom-nav-inner`'s gap is pinned to the prototype by `test_prototype_fidelity`, so it stays at 24px whatever it costs here. Landing at 360px: a 24px inset, a 121.8px brand and two pinned 24px column gaps leave 156px before the toggle's −10px optical margin pushes the last 10px past the edge. Measured after: 151px used, document 355px. Docs and portal at 360px: 328px between the 16px insets, against a 181.5px «Личный кабинет». Measured after: 322px used. */ @media (max-width: 900px){ .lp-custom-nav-actions{gap:var(--lp-space-1)} .lp-currency-option{min-height:44px;padding:0 var(--lp-space-1)} } @media (max-width: 720px){ .mp-currency button{min-height:44px;padding:0 6px} } /* «Пополнить». The QR box has a floor rather than a percentage width: below about 160 CSS px a phone camera starts failing to resolve the code, and a misread receiver address is unrecoverable money. `max-width:100%` keeps that floor from becoming a source of horizontal page scroll on a 360 px screen — the box shrinks its padding, never its code. */ .mp-topup{display:grid;gap:16px} .mp-topup-state{margin:0;font-weight:600} .mp-topup-instruction{margin:0;font-size:16px;line-height:1.5} .mp-topup-note{margin:0;font-size:14px;color:var(--muted)} .mp-topup-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start} .mp-topup-qr{flex:0 0 auto} .mp-qr{display:block;width:min(200px,100%);min-width:160px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff} .mp-qr svg{display:block;width:100%;height:auto} .mp-topup-fields{flex:1 1 260px;min-width:0;margin:0;display:grid;gap:6px} .mp-topup-fields dt{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .mp-topup-fields dd{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} /* The address and the amount are selected and copied by hand when the clipboard is unavailable, so they wrap rather than overflow and stay selectable text. */ .mp-topup-value{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-all;font-size:15px;padding:6px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)} .mp-topup-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .mp-topup-actions form{margin:0} .mp-topup-find{border-top:1px solid var(--line);padding-top:12px} .mp-topup-find summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center} .mp-topup-form{display:grid;gap:8px;max-width:420px} .mp-topup-form label{font-size:14px;font-weight:600} .mp-topup-form input{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:16px;width:100%;box-sizing:border-box} .mp-topup-form button{justify-self:start} /* Every interactive element in the section clears the 44 px touch target the responsive spec requires, copy controls included. */ .mp-topup .mp-copy{min-height:44px} /* A 64-character transaction id cannot be allowed to set a table column's width: on a 360 px screen that alone would push the document past the viewport. */ .mp-topup-txid code,code.mp-topup-txid{display:inline-block;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} @media (max-width: 520px){ .mp-topup-grid{gap:14px} .mp-topup-actions .mp-btn,.mp-topup-actions button{width:100%;justify-content:center} .mp-topup-actions form{width:100%} }