/*
 * Customer experience layer. Deliberately opt-in: management pages retain
 * their existing presentation, and native core tokens keep their own meaning.
 * No web fonts or animation dependencies; content never waits for animation.
 */
html[data-front-experience] {
  --fx-fast: 140ms;
  --fx-state: 220ms;
  --fx-ease: cubic-bezier(.2,.75,.25,1);
  --fx-focus: #2854cf;
}
html[data-front-experience=station],
html[data-front-experience=station] .customer-front {
  color-scheme: light;
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface2: #edf2fa;
  --ink: #172841;
  --muted: #4c5f79;
  --border: #ced9e9;
  --accent: #2854cf;
  --accent-soft: #eaf0ff;
  --good: #13694b;
  --good-bg: #e6f5ed;
  --warn: #85500b;
  --warn-bg: #fff3db;
  --bad: #b42e49;
  --fx-focus: #2854cf;
  --fx-accent-hover: #1d43b0;
  --fx-on-accent: #ffffff;
  --fx-line: #8496b0;
  --fx-panel-shadow: 0 2px 4px #1b36520a,0 12px 32px #1b365208;
  --fx-raised-shadow: 0 6px 12px #1b36520c,0 16px 36px #1b365211;
  --radius: 18px;
}
html[data-front-experience=station][data-theme=dark],
html[data-front-experience=station][data-theme=dark] .customer-front,
html[data-front-experience=station][data-theme=dark] .customer-front:has(.source-overview) {
  color-scheme: dark;
  --bg: #0d1728;
  --surface: #152238;
  --surface2: #1c2e49;
  --ink: #eef4ff;
  --muted: #b5c6df;
  --border: #384e6c;
  --accent: #acc4ff;
  --accent-soft: #253c66;
  --good: #91dfba;
  --good-bg: #183e33;
  --warn: #f7cd8a;
  --warn-bg: #40321f;
  --bad: #ffb1c1;
  --fx-focus: #acc4ff;
  --fx-accent-hover: #c5d5ff;
  --fx-on-accent: #142647;
  --fx-line: #768dae;
  --fx-panel-shadow: 0 2px 4px #0002,0 14px 32px #0002;
  --fx-raised-shadow: 0 8px 18px #0003,0 18px 40px #0003;
}
html[data-front-experience=station] body {
  font-family: Inter,"Segoe UI Variable","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}
html[data-front-experience=station] ::selection {background:var(--accent-soft);color:var(--ink)}
html[data-front-experience=station] :is(h1,h2,h3) {color:var(--ink);letter-spacing:-.025em;text-wrap:balance}
html[data-front-experience=station] h2 {font-size:clamp(24px,2vw,30px);line-height:1.35}
html[data-front-experience=station] h3 {font-size:19px;line-height:1.45}
html[data-front-experience=station] :is(p,li) {line-height:1.8}
html[data-front-experience=station] :is(small,.tiny,.small,.license,.hero-note) {font-size:14px;line-height:1.7;color:var(--muted)}
html[data-front-experience=station] :is(.field>span,.check,.notice) {font-size:15px;line-height:1.75}
html[data-front-experience=station] :is(.field>span,label) {font-weight:550}
html[data-front-experience=station] :is(code,pre,.mono) {font-size:15px;line-height:1.8}
html[data-front-experience=station] :is(.source-money,.usage-fee,.metric b,.wallet-summary strong) {font-variant-numeric:tabular-nums}

/* Header and navigation: same destinations, stronger location and hit areas. */
html[data-front-experience=station] .topbar {
  min-height:84px;height:auto;padding-block:16px;gap:20px;
}
html[data-front-experience=station] .topbar .brand {font-size:21px;letter-spacing:-.04em}
html[data-front-experience=station] .topbar .logo {width:38px;height:38px;border-radius:12px}
html[data-front-experience=station] .topbar .nav {gap:8px;min-width:0}
html[data-front-experience=station] .nav>a:not(.btn) {
  display:inline-flex;align-items:center;min-height:44px;padding:8px 11px;
  border-radius:10px;font-size:15px;font-weight:550;color:var(--muted);
}
html[data-front-experience=station] .nav>a[aria-current=page]:not(.btn) {color:var(--accent);background:var(--accent-soft);font-weight:700}
html[data-front-experience=station] :is(.chrome-button,.theme-btn,.locale-picker>summary) {width:44px;min-height:44px;border-radius:12px}
html[data-front-experience=station] :is(.public-menu>div,.locale-menu) {padding:10px;min-width:210px;box-shadow:var(--fx-raised-shadow)}
html[data-front-experience=station] .public-menu>div>a {font-size:16px;border-radius:8px}
html[data-front-experience=station] .footer {padding-block:36px;gap:32px}
html[data-front-experience=station] .footer-links {gap:12px 22px}
html[data-front-experience=station] .footer-links a {font-size:15px;min-height:32px;display:inline-flex;align-items:center}

/* Buttons, fields and feedback share one predictable interaction rhythm. */
html[data-front-experience=station] :is(button,.btn,input,select,textarea,summary) {
  transition:color var(--fx-fast),background-color var(--fx-state),border-color var(--fx-fast),
    box-shadow var(--fx-state),transform var(--fx-fast) var(--fx-ease);
}
html[data-front-experience=station] :is(button,.btn) {
  min-height:46px;border-radius:12px;font-size:16px;line-height:1.5;
  padding:10px 18px;font-weight:600;touch-action:manipulation;
}
html[data-front-experience=station] :is(.primary,.btn.primary) {
  color:var(--fx-on-accent);background:var(--accent);border-color:var(--accent);
  box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 20%,transparent);
}
html[data-front-experience=station] :is(.primary,.btn.primary):hover:not(:disabled):not([aria-disabled=true]) {
  color:var(--fx-on-accent);background:var(--fx-accent-hover);border-color:var(--fx-accent-hover);
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 26%,transparent);
}
html[data-front-experience=station] :is(button,.btn):active:not(:disabled):not([aria-disabled=true]) {transform:translateY(1px) scale(.985)}
html[data-front-experience=station] :is(button:disabled,.btn[aria-disabled=true]) {
  opacity:1;cursor:not-allowed;box-shadow:none;transform:none;
  color:var(--muted);background:var(--surface2);border-color:var(--border);
}
html[data-front-experience=station] :is(input,select,textarea):not(:where([type=checkbox],[type=radio],[type=file],[type=range],[type=color])) {
  min-height:48px;border-radius:11px;border:1px solid var(--fx-line);
  padding:11px 14px;font-size:17px;line-height:1.5;color:var(--ink);background:var(--surface);
}
html[data-front-experience=station] :is(input,textarea)::placeholder {color:var(--muted);opacity:1}
html[data-front-experience=station] :is(input,select,textarea):focus-visible {
  border-color:var(--fx-focus);outline:2px solid var(--fx-focus);outline-offset:2px;
  box-shadow:0 0 0 5px var(--accent-soft);
}
html[data-front-experience=station] :is(a,button,summary,[tabindex]):focus-visible {
  outline:3px solid var(--fx-focus);outline-offset:3px;
}
html[data-front-experience=station] :is(a,button,input,select,textarea,summary) {scroll-margin-block:100px 24px}
html[data-front-experience=station] input:is([type=checkbox],[type=radio]) {width:20px;height:20px;accent-color:var(--accent)}
html[data-front-experience=station] .check {gap:10px;padding-block:6px}
html[data-front-experience=station] :is(.error,.notice) {border-radius:12px;overflow-wrap:anywhere}
html[data-front-experience=station] .notice {padding:16px 20px}
html[data-front-experience=station] #toast {font-size:16px;line-height:1.65;padding:16px 20px;border-radius:14px;box-shadow:var(--fx-raised-shadow)}
html[data-front-experience=station] #toast.show {animation:fx-feedback-in var(--fx-state) var(--fx-ease)}
html[data-front-experience=station] dialog {border:1px solid var(--border);border-radius:22px;box-shadow:0 24px 80px #08193040}
html[data-front-experience=station] dialog::backdrop {background:#07182c70;backdrop-filter:blur(3px)}
html[data-front-experience=station] dialog[open] {animation:fx-dialog-in 260ms var(--fx-ease)}
html[data-front-experience=station] :is(.dialog-head,.notification-heading) h2 {font-size:24px}
html[data-front-experience=station] :is(.dialog-body,.notification-list) {font-size:16px;line-height:1.8}
html[data-front-experience=station] .station-tooltip {font-size:14px;line-height:1.7}
html[data-front-experience=station] :is(.customer-front,.model-explorer,.rankings-page) summary {font-size:15px;line-height:1.7}
html[data-front-experience=station] details[open]>:is(div,section,article) {animation:fx-disclosure-in 180ms var(--fx-ease)}

/* Public pages, documentation, search, pricing and rankings. */
html[data-front-experience=station] .page {max-width:1280px}
html[data-front-experience=station] .hero {gap:clamp(32px,5vw,72px);padding:84px 0 68px}
html[data-front-experience=station] .hero h1 {font-size:clamp(40px,4.7vw,66px);line-height:1.16;letter-spacing:-.045em}
html[data-front-experience=station] .hero p {font-size:19px;line-height:1.85;max-width:36em}
html[data-front-experience=station] .hero .btn {min-height:52px;padding-inline:24px}
html[data-front-experience=station] :is(.card,.panel,.mx-card) {border-color:var(--border);box-shadow:var(--fx-panel-shadow);border-radius:18px}
html[data-front-experience=station] .card {padding:28px}
html[data-front-experience=station] :is(.card p,.section-title p,.mx-description,.explore-hero p) {font-size:16px;line-height:1.8}
html[data-front-experience=station] :is(.panel-head,.panel>header) {padding:22px 24px;font-size:19px}
html[data-front-experience=station] :is(.panel-head h2,.panel>header h2) {font-size:21px;margin:0}
html[data-front-experience=station] .panel-body {padding:24px}
html[data-front-experience=station] .page-title {padding-block:42px 30px}
html[data-front-experience=station] .page-title h1 {font-size:clamp(32px,3.7vw,48px)}
html[data-front-experience=station] .page-title p {font-size:18px}
html[data-front-experience=station] .prose {font-size:17px;line-height:1.9}
html[data-front-experience=station] .prose :is(p,li) {font-size:17px;line-height:1.9}
html[data-front-experience=station] .prose h2 {font-size:26px;margin-top:32px;scroll-margin-top:100px}
html[data-front-experience=station] :is(.statstrip span,.explore-hero-links,.mx-filter-note,.mx-result-heading,.mx-footnote) {font-size:15px}
html[data-front-experience=station] .statstrip b {font-size:28px}
html[data-front-experience=station] .explore-hero {padding:38px 28px;background:linear-gradient(125deg,var(--accent-soft),var(--surface) 65%);border-radius:24px}
html[data-front-experience=station] .explore-hero h2 {font-size:34px}
html[data-front-experience=station] :is(.mx-filters .field>span,.mx-toolbar label,.mx-tags span,.mx-spec,.mx-card-actions,.rk-model-value small) {font-size:14px}
html[data-front-experience=station] :is(.mx-card,.mx-card-actions,.mx-price) a {font-size:14px}
html[data-front-experience=station] .rankings-page .rk-method p {font-size:15px;line-height:1.8}
html[data-front-experience=station] :is(.mx-card h3,.mx-card h2) {font-size:21px}
html[data-front-experience=station] .mx-price strong {font-size:24px}
html[data-front-experience=station] :is(.status-pill,.model-badge,.mx-tags,.rk-model-value b) {font-size:14px;line-height:1.6}
html[data-front-experience=station] :is(.segmented,.workspace-sections) {gap:6px}
html[data-front-experience=station] .channel-card-heading p {font-size:15px;line-height:1.8}

/* Customer shell: comfortable, coherent hierarchy without moving any entry. */
html[data-front-experience=station] .customer-front>.topbar {min-height:80px;height:auto;padding:14px 28px}
html[data-front-experience=station] .customer-front .customer-layout {grid-template-columns:236px minmax(0,1fr);min-height:calc(100dvh - 80px)}
html[data-front-experience=station] .customer-front .customer-sidebar {
  padding:28px 16px;background:var(--surface);border-right:1px solid var(--border);
}
html[data-front-experience=station] .customer-sidebar-title {font-size:18px;font-weight:750;line-height:1.5;padding:0 12px}
html[data-front-experience=station] .customer-sidebar-title small {font-size:14px;margin-top:7px}
html[data-front-experience=station] .customer-nav-group {margin-top:24px}
html[data-front-experience=station] .customer-nav-group h2 {font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em;padding-inline:14px}
html[data-front-experience=station] .customer-sidebar .customer-nav-links a {
  display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 14px;
  border:1px solid transparent;border-radius:12px;font-size:16px;font-weight:550;
  line-height:1.5;color:var(--muted);transition:background-color var(--fx-state),color var(--fx-fast),border-color var(--fx-state);
}
html[data-front-experience=station] .customer-sidebar .customer-nav-links a.selected {
  background:var(--accent-soft);color:var(--accent);font-weight:700;border-color:color-mix(in srgb,var(--accent) 24%,var(--border));
  border-radius:12px;box-shadow:inset 3px 0 var(--accent);
}
html[data-front-experience=station] .fx-nav-icon {width:20px;height:20px;flex:none;opacity:.9}
html[data-front-experience=station] .customer-front .customer-main {max-width:none;padding:34px clamp(22px,3vw,48px) 52px}
html[data-front-experience=station] .customer-front .customer-page-heading {margin-bottom:28px;gap:20px;align-items:flex-end}
html[data-front-experience=station] .customer-front .customer-page-heading h1 {font-size:clamp(28px,2.5vw,36px);line-height:1.3;letter-spacing:-.025em;margin-top:8px}
html[data-front-experience=station] :is(.customer-breadcrumb,.customer-account) {font-size:14px;line-height:1.6;color:var(--muted)}
html[data-front-experience=station] .customer-account {padding-bottom:4px}
html[data-front-experience=station] .customer-guide {padding:20px 24px}
html[data-front-experience=station] .customer-guide summary {font-size:16px}
html[data-front-experience=station] .customer-guide summary>span {font-size:14px}
html[data-front-experience=station] .customer-shortcut {padding:20px;border-radius:14px;font-size:16px}
html[data-front-experience=station] .customer-shortcut strong {font-size:17px}
html[data-front-experience=station] .customer-shortcut small {font-size:14px}

/* Account dashboard keeps actual figures and existing source layout. */
html[data-front-experience=station] .source-overview {gap:22px}
html[data-front-experience=station] :is(.source-overview>*,.source-announcement-item) {animation:none}
html[data-front-experience=station] .source-overview :is(p,small,.source-period,.source-label,.source-chart-empty) {font-size:14px;line-height:1.7;color:var(--muted)}
html[data-front-experience=station] .source-card-heading {padding:20px 24px}
html[data-front-experience=station] .source-card-heading h2 {font-size:19px}
html[data-front-experience=station] .source-overview .source-card-heading h3 {font-size:18px}
html[data-front-experience=station] .source-card-heading>a {font-size:14px}
html[data-front-experience=station] .source-row-actions :is(button,a) {width:40px;height:40px;min-height:40px;padding:10px}
html[data-front-experience=station] .source-usage-content {padding:26px 24px 20px}
html[data-front-experience=station] .source-stat {padding:0 20px}
html[data-front-experience=station] .source-stat strong {font-size:clamp(24px,2.2vw,32px);line-height:1.4;letter-spacing:-.025em}
html[data-front-experience=station] .source-balance {padding:24px}
html[data-front-experience=station] .source-balance>strong {font-size:36px}
html[data-front-experience=station] :is(.source-api-copy strong,.source-guide-copy strong) {font-size:16px;color:var(--ink)}
html[data-front-experience=station] .source-api-copy>div {font-size:14px}
html[data-front-experience=station] :is(.source-api-list,.source-announcement-list,.source-faq-list) {padding-inline:24px}
html[data-front-experience=station] :is(.source-api-row,.source-announcement-list li,.source-faq-list details) {padding-block:16px}
html[data-front-experience=station] :is(.source-faq-list summary,.source-announcement-list h3) {font-size:16px}
html[data-front-experience=station] .source-guide-actions a {font-size:15px}
html[data-front-experience=station] .source-overview :is(.source-announcement-body,.source-announcement-body p,.source-faq details p,time,.source-balance-details b) {font-size:14px;line-height:1.8}

/* Consumption: preserve exact fees, purple emphasis, filters and columns. */
html[data-front-experience=station] .customer-usage {
  --cu-ink:var(--ink);--cu-muted:var(--muted);--cu-border:var(--border);
}
html[data-front-experience=station] .customer-front .customer-usage :is(td,button,.usage-fee.usage-detail-trigger) {font-size:15px;line-height:1.65}
html[data-front-experience=station] .customer-front .customer-usage :is(th,small,time,label,summary,legend,.usage-statistics b,.usage-date-range>span,.usage-type,.usage-stream,.usage-token-count,.model-badge) {font-size:14px;line-height:1.65}
html[data-front-experience=station] .customer-usage .panel-head h2 {font-size:21px;color:var(--ink)}
html[data-front-experience=station] .customer-front .customer-usage .field :is(input,select) {height:46px;min-height:46px;font-size:16px}
html[data-front-experience=station] .customer-usage :is(th,td) {padding-block:15px}
html[data-front-experience=station] .customer-usage :is(.usage-statistics>span,.model-badge) {padding:5px 10px}
html[data-front-experience=station] .customer-usage .usage-statistics {gap:10px}
html[data-front-experience=station] .customer-usage table {min-width:1280px}
html[data-front-experience=station] .customer-usage th>button {padding:8px 0;white-space:nowrap;border-radius:6px;min-height:44px;font-weight:650}
html[data-front-experience=station] .customer-usage [data-customer-column=model] {min-width:160px}
html[data-front-experience=station] .customer-usage .model-badge {white-space:nowrap;border-radius:9px;padding:5px 9px}
html[data-front-experience=station] .customer-usage .usage-date-range {border:1px solid var(--fx-line);border-radius:12px;padding:0 8px;background:var(--surface)}
html[data-front-experience=station] .customer-usage .usage-date-range input {border:0;background:transparent;padding:8px 2px}
html[data-front-experience=station] .customer-usage :is(.usage-advanced,.customer-view-options)>summary {min-height:46px;padding:10px 12px;border-radius:11px}
html[data-front-experience=station] .customer-usage .usage-advanced>.form-grid {top:calc(100% + 8px)}
html[data-front-experience=station] .customer-usage .customer-view-popover {top:56px}
html[data-front-experience=station] .customer-usage .usage-statistics>span {font-size:14px}
html[data-front-experience=station] .customer-usage .usage-stream {color:var(--muted)}
html[data-front-experience=station] .customer-usage .usage-statistics b {font-weight:700}
html[data-front-experience=station] table {font-size:15px;line-height:1.7}
html[data-front-experience=station] th {font-size:14px;font-weight:650;color:var(--muted)}
html[data-front-experience=station] td small {font-size:14px}

/* Conversation and creation controls remain operable while content streams. */
html[data-front-experience=station] .pg-workspace {height:calc(100dvh - 225px);min-height:530px;max-width:1180px;gap:20px}
html[data-front-experience=station] .pg-status {font-size:14px}
html[data-front-experience=station] .pg-welcome h2 {font-size:32px}
html[data-front-experience=station] .pg-welcome p {font-size:17px}
html[data-front-experience=station] .pg-prompts {gap:12px}
html[data-front-experience=station] .pg-prompts button {padding:14px 20px;border-radius:14px;min-height:52px;text-align:left}
html[data-front-experience=station] .pg-composer {padding:16px;border-radius:22px;box-shadow:var(--fx-panel-shadow)}
html[data-front-experience=station] .pg-composer:focus-within {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--fx-panel-shadow)}
html[data-front-experience=station] .pg-composer>textarea {border:0;min-height:110px;padding:12px;font-size:17px;background:transparent}
html[data-front-experience=station] :is(.pg-model select,.pg-key select) {font-size:15px;min-height:44px;padding:8px 10px}
html[data-front-experience=station] .pg-model {max-width:none;flex:1 1 200px}
html[data-front-experience=station] .pg-key {max-width:30%;flex:1 1 160px}
html[data-front-experience=station] .pg-composer-tools>button {min-height:46px;font-size:15px}
html[data-front-experience=station] .pg-parameters {position:relative}
html[data-front-experience=station] .pg-parameters>summary {min-height:46px;padding:10px 14px;font-size:15px}
html[data-front-experience=station] .pg-parameter-panel {
  bottom:calc(100% + 12px);left:0;width:min(380px,calc(100vw - 64px));
  max-height:min(60dvh,540px);box-shadow:var(--fx-raised-shadow);
}
html[data-front-experience=station] .pg-message {padding:18px 22px;border-radius:18px;line-height:1.85}
html[data-front-experience=station] :is(.pg-message-body,.pg-output,.pg-message pre) {font-size:17px;line-height:1.85}
html[data-front-experience=station] :is(.pg-message-meta,.pg-message b,.pg-mode-hint,.pg-select-label) {font-size:14px}

/* Login/register retain their copy and authentication semantics. */
html[data-front-experience=station] .auth-layout {max-width:1180px;gap:clamp(32px,6vw,88px);padding-block:48px}
html[data-front-experience=station] .auth-story {padding:36px}
html[data-front-experience=station] .auth-story h2 {font-size:clamp(38px,4vw,56px);line-height:1.25;letter-spacing:-.045em}
html[data-front-experience=station] .auth-lead {font-size:18px;line-height:1.9}
html[data-front-experience=station] .auth-eyebrow {color:var(--accent)}
html[data-front-experience=station] :is(.auth-eyebrow,.auth-benefits span,.auth-switch) {font-size:15px;line-height:1.8}
html[data-front-experience=station] .auth-benefits b {font-size:17px}
html[data-front-experience=station] .auth-title {font-size:32px}
html[data-front-experience=station] .auth-methods .btn {font-size:15px;min-height:48px;padding-inline:12px}
html[data-front-experience=station] .auth-page .field {gap:9px}
html[data-front-experience=station] .auth-page .form-grid {gap:20px}
html[data-front-experience=station] body.auth-page :is(.tiny,.auth-consent,.auth-consent a) {font-size:14px;line-height:1.8}
html[data-front-experience=station] .auth-orbit {animation:none}
html[data-front-experience=station] .auth-orbit>span {animation:none}
html[data-front-experience=station] #customer-disclosure [data-policy-document] {font-size:16px;line-height:1.9}
html[data-front-experience=station] #official-content :is(.official-brand small,.official-brand>a:last-child,.overall p,.components>div>span:last-child,.pagination,footer) {font-size:14px;line-height:1.7}
html[data-front-experience=station] #official-content .overall {background:var(--good-bg)}
html[data-front-experience=station] #official-content .overall.attention {background:var(--warn-bg)}
html[data-front-experience=station] :is(#official-content,#incident-dialog) button {background:var(--surface);color:var(--ink);border-color:var(--border)}
html[data-front-experience=station] #official-content .tabs [aria-current=page] {background:var(--accent);color:var(--fx-on-accent)}
html[data-front-experience=station] #official-content .notice {background:var(--warn-bg);color:var(--warn)}
html[data-front-experience=station] #official-content .incident {background:var(--surface);border-color:var(--border)}
html[data-front-experience=station] #official-content .ok {color:var(--good)}
html[data-front-experience=station] #official-content .components {background:var(--surface)}
html[data-front-experience=station] #incident-dialog {background:var(--surface);color:var(--ink)}
html[data-front-experience=station] #incident-dialog :is(time,.incident-body p) {font-size:16px}

/* Native customer keys/profile/security: use foreground, never surface tokens. */
html[data-front-experience=embedded] body {font-size:17px;line-height:1.7}
html[data-front-experience=embedded] :is(.text-xs,[data-slot=table-head],small) {font-size:14px;line-height:1.65}
html[data-front-experience=embedded] :is(.text-sm,[data-slot=table-cell],[data-slot=label]) {font-size:15px;line-height:1.65}
html[data-front-experience=embedded] :is([data-slot=input],[data-slot=textarea],[data-slot=select-trigger]) {font-size:17px;min-height:46px}
html[data-front-experience=embedded] :is([data-slot=button],[data-slot=dialog-close]) {font-size:15px;min-height:44px;min-width:44px;border-radius:10px}
html[data-front-experience=embedded] [data-slot=table-cell] {padding-block:14px}
html[data-front-experience=embedded] :is([data-slot=dialog-title],[data-slot=sheet-title]) {font-size:24px;line-height:1.4}
html[data-front-experience=embedded] :is([data-slot=dialog-content],[data-slot=sheet-content]) {border-radius:20px}
html[data-front-experience=embedded] :is([data-slot=button],[data-slot=input],[data-slot=select-trigger]) {
  transition:background-color var(--fx-state),border-color var(--fx-fast),box-shadow var(--fx-state),transform var(--fx-fast);
}
html[data-front-experience=embedded] :is(a,button,input,textarea,[role=combobox]):focus-visible {outline:3px solid var(--ring,#2854cf);outline-offset:3px}
html[data-front-experience=embedded] button:active:not(:disabled) {transform:translateY(1px)}

/* Hover is an enhancement. Keyboard focus and touch have equivalent feedback. */
@media (hover:hover) and (pointer:fine) {
  html[data-front-experience=station] .nav>a:not(.btn):hover,
  html[data-front-experience=station] .customer-sidebar .customer-nav-links a:hover {background:var(--accent-soft);color:var(--accent);text-decoration:none}
  html[data-front-experience=station] :is(.feature-link,.customer-shortcut,.mx-card) {transition:border-color var(--fx-state),box-shadow var(--fx-state),transform var(--fx-state) var(--fx-ease)}
  html[data-front-experience=station] :is(.feature-link,.customer-shortcut,.mx-card):hover {border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:var(--fx-raised-shadow);transform:translateY(-3px)}
  html[data-front-experience=station] :is(button,.btn):not(.primary):not(:disabled):not([aria-disabled=true]):hover {border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
  html[data-front-experience=station] :is(input,select,textarea):not(:disabled):hover {border-color:var(--accent)}
}
@keyframes fx-dialog-in {from{opacity:.65;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fx-feedback-in {from{opacity:.7;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fx-disclosure-in {from{opacity:.7}to{opacity:1}}

@media (max-width:1200px) {
  html[data-front-experience=station] .topbar .nav {gap:3px}
  html[data-front-experience=station] .nav>a:not(.btn) {font-size:14px;padding-inline:7px}
  html[data-front-experience=station] .customer-front .customer-layout {grid-template-columns:216px minmax(0,1fr)}
  html[data-front-experience=station] .customer-front .customer-main {padding-inline:24px}
  html[data-front-experience=station] .customer-page-heading {flex-wrap:wrap}
  html[data-front-experience=station] .customer-usage .usage-filter-primary {gap:10px}
}
@media (max-width:1100px) {
  html[data-front-experience=station] .customer-usage .usage-filter-primary {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-front-experience=station] .customer-usage .usage-date-range {grid-column:1/-1;flex-wrap:nowrap}
  html[data-front-experience=station] .customer-usage .usage-date-range .field {flex-basis:0}
  html[data-front-experience=station] .customer-usage .usage-date-range>span {display:block}
  html[data-front-experience=station] .customer-usage .customer-filter-bottom {align-items:flex-start;flex-wrap:wrap}
  html[data-front-experience=station] .customer-usage .usage-filter-actions {margin-left:auto;flex-wrap:wrap}
}
@media (max-width:760px) {
  html[data-front-experience=station] body {font-size:16px}
  html[data-front-experience=station] :is(.topbar,.customer-front>.topbar) {padding:12px 16px;min-height:72px;gap:12px}
  html[data-front-experience=station] .topbar .brand {font-size:19px}
  html[data-front-experience=station] .topbar .logo {width:34px;height:34px}
  html[data-front-experience=station] .topbar .nav {gap:5px}
  html[data-front-experience=station] .topbar :is(.btn,.theme-btn,.chrome-button) {min-height:44px}
  html[data-front-experience=station] .topbar .identity-link {font-size:14px;padding:8px 10px}
  html[data-front-experience=station] .page {padding-inline:20px}
  html[data-front-experience=station] .hero {padding:44px 0 36px;gap:30px}
  html[data-front-experience=station] .hero h1 {font-size:42px}
  html[data-front-experience=station] .hero p {font-size:18px}
  html[data-front-experience=station] :is(.card,.panel-body) {padding:20px}
  html[data-front-experience=station] .page-title {padding-block:30px 24px}
  html[data-front-experience=station] .customer-front .customer-layout {display:block}
  html[data-front-experience=station] .customer-front .customer-sidebar {padding:10px 14px;border-right:0;border-bottom:1px solid var(--border)}
  html[data-front-experience=station] .customer-nav-group {margin:0}
  html[data-front-experience=station] .customer-sidebar .customer-nav-links a {min-height:46px;padding:10px 12px;font-size:15px;gap:8px;white-space:nowrap}
  html[data-front-experience=station] .customer-front .customer-main {padding:24px 16px 36px}
  html[data-front-experience=station] .customer-front .customer-page-heading {margin-bottom:24px;gap:12px;align-items:flex-start}
  html[data-front-experience=station] .customer-front .customer-page-heading h1 {font-size:28px}
  html[data-front-experience=station] .customer-account {font-size:13px}
  html[data-front-experience=station] .source-usage-content,
  html[data-front-experience=station] .source-balance {padding:20px}
  html[data-front-experience=station] .source-stat {padding:0 0 16px}
  html[data-front-experience=station] :is(.source-api-list,.source-announcement-list,.source-faq-list) {padding-inline:18px}
  html[data-front-experience=station] .source-card-heading {padding:18px}
  html[data-front-experience=station] .source-api-copy strong {font-size:15px}
  html[data-front-experience=station] .customer-front .customer-usage .field :is(input,select) {font-size:16px;padding-inline:10px}
  html[data-front-experience=station] .customer-usage :is(th,td) {padding-block:13px}
  html[data-front-experience=station] .customer-front .customer-usage :is(td,button,.usage-fee.usage-detail-trigger) {font-size:14px}
  html[data-front-experience=station] .explore-hero {padding:28px 18px}
  html[data-front-experience=station] .explore-hero h2 {font-size:28px}
  html[data-front-experience=station] .mx-filters {gap:16px}
  html[data-front-experience=station] .pg-workspace {min-height:550px;height:auto;gap:18px}
  html[data-front-experience=station] .pg-welcome h2 {font-size:28px}
  html[data-front-experience=station] .pg-prompts {grid-template-columns:1fr}
  html[data-front-experience=station] .pg-composer {padding:12px}
  html[data-front-experience=station] .pg-composer-tools {gap:10px}
  html[data-front-experience=station] .pg-model {max-width:none;flex:1 1 100%;margin-left:0}
  html[data-front-experience=station] .pg-key {max-width:none;flex:1 1 100%}
  html[data-front-experience=station] :is(.pg-model select,.pg-key select) {width:100%;font-size:16px}
  html[data-front-experience=station] .auth-layout {padding:24px 16px;gap:24px}
  html[data-front-experience=station] .auth-story {padding:24px}
  html[data-front-experience=station] .auth-story h2 {font-size:38px}
  html[data-front-experience=station] .auth-title {font-size:28px}
  html[data-front-experience=station] .auth-methods {flex-wrap:wrap}
  html[data-front-experience=station] .auth-methods .btn {flex:1 1 150px}
  html[data-front-experience=station] .footer {padding-inline:20px}
}
@media (prefers-reduced-motion:reduce) {
  html[data-front-experience] *,html[data-front-experience] *::before,html[data-front-experience] *::after {
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
  html[data-front-experience] :is(button,.btn,.feature-link,.customer-shortcut,.mx-card):is(:hover,:active) {transform:none!important}
}