@font-face { font-family: Onest; src: url('/static/fonts/onest-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Onest; src: url('/static/fonts/onest-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Onest; src: url('/static/fonts/onest-700.ttf') format('truetype'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Unbounded; src: url('/static/fonts/unbounded-600.ttf') format('truetype'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono-400.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root { color-scheme: dark; --paper: #080a0a; --white: #121616; --ink: #ededed; --muted: #a3adaa; --subtle: #7d8985; --line: #252e2c; --soft: #171d1b; --teal: #80d6cb; --teal-soft: #182c28; --yellow-soft: #292616; --shadow: 0 28px 74px #0009; font-family: Onest, sans-serif; }
body { background: var(--paper); line-height: 1.5; }
html:has(body.public-body) { overflow-x: clip; }
body.public-body { overflow-x: clip; }
h1, h2 { font-family: Unbounded, Onest, sans-serif; font-weight: 600; }
button, input, select { touch-action: manipulation; }
:focus-visible { outline-color: #80d6cb; }
.brand { font-family: Unbounded, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.7px; padding: 0; }
.brand-light { color: #a3adaa; }
.brand-mark i { background: #80d6cb; }
.brand-mark i { transform: translateY(0); transform-origin: center; animation: brand-mark-flow 3.8s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; }
.brand-mark i:nth-child(2) { animation-delay: -1.15s; }
.brand-mark i:nth-child(3) { animation-delay: -2.3s; }
@keyframes brand-mark-flow { 0% { transform: translateY(2px); opacity: .48; } 100% { transform: translateY(-2px); opacity: 1; } }
.eyebrow, .section-kicker, .mono-label, .signal-number, .route-caption { font-family: 'JetBrains Mono', monospace; }
.button { min-height: 42px; border-radius: 6px; font-size: 13px; padding: 10px 17px; }
.button-dark, .button-mint { background: #80d6cb; color: #061412; border: 1px solid #80d6cb; }
.button-dark:hover, .button-mint:hover { background: #a0e8de; box-shadow: 3px 3px 0 #3f7c75; transform: translate(-1px, -1px); }
.button-outline, .button-outline-light { border-color: #34433f; color: #ededed; background: transparent; }
.button-outline:hover:not(:disabled), .button-outline-light:hover { background: #192420; border-color: #80d6cb; }
.button-large { min-height: 52px; padding: 14px 24px; font-size: 15px; }

/* Public page */
.public-home { width: min(1252px, 100%); max-width: none; padding: 0 36px; background: transparent; }
.public-header { min-height: 96px; gap: 28px; border-color: var(--line); }
.public-header nav { gap: 30px; }
.public-header nav a, .public-login { color: #adb8b4; font-size: 13px; }
.public-header .public-actions { gap: 23px; }
.public-header .button { min-height: 40px; }
.public-hero { min-height: 650px; padding: 85px 0 90px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 50px; border-color: var(--line); }
.public-hero-copy { position: relative; z-index: 1; }
.public-hero .eyebrow { font-size: 10px; color: #80d6cb; font-weight: 400; letter-spacing: .12em; margin-bottom: 30px; }
.eyebrow-pulse, .availability-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #80d6cb; flex: 0 0 auto; }
.public-hero h1 { font-size: clamp(35px, 3.7vw, 51px); line-height: 1.3; letter-spacing: -1.7px; margin-bottom: 26px; }
.public-hero h1 span { color: #80d6cb; }
.public-hero .intro-copy { color: #a3adaa; max-width: 480px; font-size: 16px; line-height: 1.8; }
.public-hero-copy > .public-actions { margin-top: 34px; gap: 22px; flex-wrap: wrap; }
.public-availability { margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #7f918a; }
.public-route-visual { position: relative; min-width: 0; min-height: 390px; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 78px 1.15fr; gap: 14px; isolation: isolate; }
.route-orbit { position: absolute; width: 320px; height: 320px; border: 1px solid #1d2d28; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -2; }
.orbit-two { width: 420px; height: 420px; border-style: dashed; opacity: .5; }
.route-client, .route-destinations span { border: 1px solid #35463f; background: #111816; color: #d8e5df; border-radius: 6px; font-size: 11px; padding: 15px 12px; box-shadow: 3px 3px 0 #1d332a; }
.route-client { min-height: 72px; gap: 5px; z-index: 1; }
.mono-label { color: #728d80; font-size: 8px; letter-spacing: 1.5px; }
.route-hub { width: 78px; height: 88px; border-radius: 8px; background: #80d6cb; border: 1px solid #80d6cb; color: #061412; box-shadow: 5px 5px 0 #31594e; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.route-hub > span { font-family: Unbounded, sans-serif; font-size: 24px; }
.route-hub small { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 2px; }
.route-destinations { gap: 22px; }
.route-destinations span { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 12px 9px; }
.route-destinations b { color: #80d6cb; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 400; }
.route-lines { left: 25%; right: 10%; gap: 70px; z-index: -1; }
.route-lines i { background: #466d5b; }
.route-lines i:first-child { transform: rotate(-25deg); }
.route-lines i:nth-child(2) { transform: none; }
.route-lines i:last-child { transform: rotate(25deg); }
.route-caption { position: absolute; bottom: 10px; right: 0; left: 0; text-align: center; color: #566b60; letter-spacing: 1.3px; font-size: 8px; }
.route-caption span { color: #80d6cb; margin: 0 22px; }
.public-signal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px 0 0; scroll-margin-top: 30px; }
.public-signal-row > div { padding: 26px; background: #111615; border: 1px solid #293830; border-radius: 8px; }
.signal-number { display: block; margin-bottom: 22px; font-size: 9px; letter-spacing: .8px; color: #80d6cb; }
.public-signal-row strong { display: block; font-size: 18px; color: #ededed; font-weight: 600; }
.public-signal-row p { margin: 10px 0 0; color: #93a29a; font-size: 13px; line-height: 1.75; }
.public-models { padding-top: 100px; scroll-margin-top: 28px; }
.public-models .section-heading { margin-bottom: 26px; align-items: flex-end; }
.public-models .section-kicker, .public-bottom-note .section-kicker { color: #80d6cb; font-size: 10px; margin-bottom: 15px; font-weight: 400; }
.public-models h2 { font-size: 28px; }
.public-models .step-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9eb2a7; border: 1px solid #2c3d34; border-radius: 4px; padding: 6px 10px; }
.public-models .table-scroll { max-height: 485px; border: 1px solid #293830; border-radius: 8px; background: #101513; scrollbar-color: #355247 #101513; }
.public-models th { height: 52px; background: #17201c; color: #90a699; font-size: 11px; padding: 12px 20px; }
.public-models td { height: 75px; border-top: 1px solid #24322b; color: #a6b8ad; font-size: 12px; padding: 14px 20px; }
.public-models td strong { color: #e2ebe6; font-size: 13px; }
.public-models .model-subtitle { color: #6f8879; font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-top: 5px; }
.public-models tbody tr:hover { background: #151f19; }
.public-models .table-note { color: #7d9386; font-size: 11px; margin-top: 16px; }
.public-bottom-note { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 214px; overflow: hidden; padding: 43px 46px; margin: 85px 0; background: linear-gradient(112deg, #12271f 0%, #10201b 54%, #0c1715 100%); border: 1px solid #3d6b57; border-radius: 14px; box-shadow: 0 22px 65px rgb(0 0 0 / 26%), 6px 6px 0 #172f25; }
.public-bottom-note::before { content: ""; position: absolute; width: 390px; height: 390px; right: 12%; top: -225px; border: 1px solid rgb(128 214 203 / 24%); border-radius: 50%; box-shadow: 0 0 0 34px rgb(128 214 203 / 3%), 0 0 0 68px rgb(128 214 203 / 2%); pointer-events: none; }
.public-bottom-note::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #80d6cb; box-shadow: 0 0 30px 5px rgb(128 214 203 / 35%); }
.developer-cta-copy, .developer-cta-action { position: relative; z-index: 1; }
.public-bottom-note h2 { max-width: 650px; font-size: 27px; line-height: 1.45; }
.public-bottom-note h2 em { color: #80d6cb; font-style: normal; }
.developer-cta-copy p { max-width: 520px; margin: 14px 0 0; color: #8eaaa0; font-size: 13px; line-height: 1.7; }
.developer-cta-action { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.cta-route-mark { display: flex; align-items: center; gap: 5px; height: 37px; }
.cta-route-mark i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #80d6cb; box-shadow: 0 0 16px rgb(128 214 203 / 65%); }
.cta-route-mark i:nth-child(1) { width: 44px; height: 1px; border-radius: 0; box-shadow: none; opacity: .35; }
.cta-route-mark i:nth-child(2) { width: 26px; height: 1px; border-radius: 0; box-shadow: none; opacity: .6; }
.public-footer { margin-top: 0; padding: 25px 0 32px; color: #789082; font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.public-footer b { color: #80d6cb; padding-left: 15px; font-weight: 400; }

/* Dashboard and authentication share the same dark materials and fonts. */
.sidebar { background: #0e1210; border-right-color: var(--line); }
.main-content { max-width: 1700px; }
.sidebar .brand { font-size: 16px; }
.topbar { min-height: 70px; height: auto; gap: 16px; }
.top-actions #auth-action { color: #ededed; border-color: #3d5148; }
.breadcrumb strong, .step-copy strong, td strong, .key-meta strong, .empty-keys strong, .empty-usage h2, .usage-summary strong, .reward-stats strong, .reward-row code { color: #d8e4dd; }
.intro-copy, .step-copy > span, .calc-copy, .reward-description, .dialog-hint, .empty-keys > span:not(.empty-key-symbol), .muted-copy, .table-note { color: #8eaaa0; }
.page-intro { min-height: 210px; }
.page-intro h1 { font-size: 32px; line-height: 1.45; }
.intro-copy { font-size: 13px; }
.section-kicker { color: #7ea995; font-size: 9px; }
.balance-panel, .usage-panel, .calculator { background: #121a16; border-color: #2b3c32; border-radius: 8px; box-shadow: 3px 3px 0 #20362a; }
.balance-value, .balance-value span, .calc-result strong { color: #b8e9d8; font-family: Onest, sans-serif; }
.balance-foot, .dialog-actions, td, .chart-grid i { border-color: #293a30; }
.balance-foot strong { color: #b4c9bb; }
.text-action, .page-footer a { color: #80d6cb; font-size: 12px; }
.balance-foot, .muted-copy, .step-copy strong, .key-meta strong, .reward-description, .reward-stats { font-size: 12px; }
.step-copy > span, .step-count, .key-meta small { font-size: 11px; }
.demo-notice, .notice-error { background: #20291e; border-color: #3b4a2d; }
.demo-notice p, .demo-notice strong { color: #b3bf9c; font-size: 12px; }
.notice-icon { background: #34422b; color: #b9cf9a; }
.mode-pill { background: #292616; border-color: #4a4326; color: #cfbc78; }
.key-symbol, .dialog-icon, .success-icon, .empty-key-symbol, .calc-tag, .key-demo:not(.revoked-label) { background: #1b3226; color: #80d6cb; border-color: #395a46; }
.period-select, .copy-button { background: #142019; border-color: #304d39; color: #aac7b5; }
.key-dialog { background: #121a16; border-color: #3a5745; border-radius: 10px; padding: 30px; width: min(460px, calc(100vw - 32px)); }
.key-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
.key-dialog h2 { font-size: 21px; line-height: 1.6; }
.key-dialog .dialog-actions .button { font-size: 13px; min-height: 42px; }
.field-label, .calc-controls label { color: #adc7b8; font-size: 12px; }
.text-input, .calc-controls input, .calc-controls select { background: #0b120e; border-color: #354f3e; color: #e0ede5; font-size: 16px; height: 46px; border-radius: 6px; }
.key-dialog input[required] { margin-bottom: 16px; }
.secret-field, .api-guide pre { background: #0b120e; border-color: #304b39; color: #aedac0; }
.secret-field code { color: #80d6cb; font-family: 'JetBrains Mono', monospace; }
.usage-summary { background: #121a16; }
.toast { background: #20392b; color: #d3efdf; border-color: #4c735b; font-size: 13px; max-width: calc(100vw - 40px); }
.faq-section summary { color: #c1d6c9; font-size: 13px; }
.faq-section details p { color: #91ab9c; font-size: 12px; }
.table-scroll th { color: #89a492; }
.table-scroll td { color: #a5bcad; }
.key-meta { min-width: 0; overflow-wrap: anywhere; }
.key-meta small { font-family: 'JetBrains Mono', monospace; }

@media (max-width: 1050px) {
  .public-home { padding: 0 28px; }
  .public-header nav { display: none; }
  .public-hero { gap: 22px; }
  .public-hero h1 { font-size: 35px; }
  .public-route-visual { grid-template-columns: 1fr 64px 1fr; gap: 9px; }
  .route-hub { width: 64px; }
  .route-destinations span { font-size: 9px; padding: 9px 6px; }
  .orbit-two { width: 330px; height: 330px; }
}
@media (max-width: 760px) {
  .public-home { padding: 0 20px; }
  .public-header { min-height: 80px; gap: 12px; }
  .public-header .brand { font-size: 14px; }
  .public-header .button { font-size: 11px; padding: 9px 11px; }
  .public-header .public-actions { gap: 14px; }
  .public-header .public-login { font-size: 12px; }
  .public-hero { min-height: auto; grid-template-columns: 1fr; gap: 50px; padding: 65px 0 44px; }
  .public-hero h1 { font-size: clamp(28px, 6.2vw, 44px); letter-spacing: -1px; }
  .public-hero .intro-copy { max-width: 560px; font-size: 15px; }
  .public-hero-copy > .public-actions { flex-direction: row; align-items: center; }
  .public-route-visual { width: min(100%, 450px); margin: 0 auto; min-height: 320px; padding: 0; grid-template-columns: 1fr 70px 1.15fr; border: 0; gap: 15px; }
  .route-hub { width: 70px; }
  .route-destinations span { font-size: 10px; padding: 12px 8px; }
  .route-client { font-size: 10px; }
  .route-orbit { width: 240px; height: 240px; }
  .orbit-two { width: 300px; height: 300px; }
  .public-signal-row { grid-template-columns: 1fr; gap: 12px; padding-top: 30px; }
  .public-signal-row > div { padding: 23px; }
  .signal-number { margin-bottom: 13px; }
  .public-models { padding-top: 65px; }
  .public-models h2 { font-size: 21px; }
  .public-models .section-heading { gap: 15px; align-items: start; }
  .public-models .step-count { font-size: 9px; white-space: nowrap; }
  .public-models .table-scroll { margin-right: 0; padding-right: 0; }
  .public-bottom-note { flex-direction: column; align-items: flex-start; padding: 32px 27px; margin: 55px 0; }
  .public-bottom-note h2 { font-size: 20px; }
  .developer-cta-copy p { font-size: 12px; }
  .developer-cta-action { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .public-bottom-note::before { right: -170px; top: -155px; }
  .public-footer { font-size: 8px; gap: 16px; }
  .sidebar { background: #0e1210; }
  .topbar { min-height: 64px; }
  .breadcrumb > span:first-child, .crumb-slash { display: none; }
  .page-intro h1 { font-size: 24px; }
  .page-intro { min-height: 190px; }
  .key-dialog { padding: 24px; }
}
/* Level Router uses a full-width command header; the route field carries the visual identity. */
@media (min-width: 1101px) {
  .public-home { width: min(1320px, 100%); margin: 0 auto; padding: 0 54px; }
  .public-header { position: relative; min-height: 88px; padding: 0; flex-direction: row; align-items: center; justify-content: space-between; background: transparent; border-right: 0; border-bottom: 1px solid #252e2c; z-index: 3; }
  .public-header .brand { font-size: 16px; gap: 9px; }
  .public-header nav { display: flex; flex-direction: row; align-items: center; gap: 25px; margin: 0 auto 0 56px; padding: 0; }
  .public-header nav a { padding: 7px 0; color: #aab8b0; }
  .public-header nav a:hover { color: #80d6cb; }
  .public-header .public-actions { flex-direction: row; align-items: center; gap: 17px; margin: 0; }
  .public-header .public-login { text-align: left; border: 0; border-radius: 0; padding: 0; }
  .public-hero { min-height: 660px; padding-top: 88px; padding-bottom: 75px; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .public-hero h1 { font-size: clamp(36px, 3.6vw, 59px); line-height: 1.16; }
  .public-hero .intro-copy { font-size: 15px; }
  .public-signal-row { padding-top: 40px; }
}
.public-nav-label { display: none; }
.network-shader, .shader-vignette { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.network-shader { z-index: 0; background: radial-gradient(ellipse at 50% 42%, #0d3a28 0, transparent 48%), radial-gradient(ellipse at 82% 26%, #102b46 0, transparent 45%), radial-gradient(ellipse at 23% 71%, #522d13 0, transparent 42%), #080a0a; opacity: .86; mix-blend-mode: screen; }
.shader-vignette { z-index: 0; overflow: hidden; background: radial-gradient(ellipse at var(--pointer-x, 50%) var(--pointer-y, 38%), rgb(40 128 81 / 0.22), transparent 40%), radial-gradient(ellipse at 50% 42%, rgb(8 10 10 / 0.06), transparent 46%), radial-gradient(ellipse at center, transparent 34%, rgb(8 10 10 / 0.5) 100%); }
.shader-vignette::before, .shader-vignette::after { content: ""; position: absolute; width: min(56vw, 760px); aspect-ratio: 1; border-radius: 50%; filter: blur(84px); opacity: .34; pointer-events: none; will-change: transform; }
.shader-vignette::before { left: 24%; top: 12%; background: radial-gradient(circle, rgb(30 132 91 / .8), rgb(26 85 68 / .26) 42%, transparent 70%); animation: cloud-drift-a 30s ease-in-out infinite alternate; }
.shader-vignette::after { left: 58%; top: 28%; width: min(38vw, 520px); background: radial-gradient(circle, rgb(43 91 141 / .62), rgb(32 64 96 / .2) 46%, transparent 72%); animation: cloud-drift-b 36s ease-in-out infinite alternate; }
@keyframes cloud-drift-a { from { transform: translate3d(-5%, -3%, 0) scale(.96); } to { transform: translate3d(6%, 7%, 0) scale(1.08); } }
@keyframes cloud-drift-b { from { transform: translate3d(4%, 3%, 0) scale(1.04); } to { transform: translate3d(-8%, -5%, 0) scale(.94); } }
.shader-fallback { opacity: .72; mix-blend-mode: normal; }
.public-home { position: relative; z-index: 1; }
.public-models .table-scroll { max-width: 100%; overflow-x: auto; }
.public-hero { position: relative; }
.public-hero::after { content: ""; position: absolute; inset: 0 -54px; pointer-events: none; border-bottom: 1px solid rgb(44 65 56 / 70%); background: linear-gradient(90deg, rgb(8 10 10 / 0.7), transparent 55%, rgb(8 10 10 / 0.35)); z-index: -1; }
.public-nav-label { display: none; }
.routing-panel { min-width: 0; align-self: center; background: rgb(8 17 14 / 82%); border: 1px solid #2b5144; border-radius: 12px; box-shadow: 0 18px 70px rgb(0 0 0 / 45%), 7px 7px 0 #16362c; backdrop-filter: blur(8px); }
.routing-panel-top, .routing-panel-bottom { display: flex; align-items: center; gap: 18px; padding: 15px 17px; font: 9px 'JetBrains Mono', monospace; color: #829a8e; letter-spacing: .4px; }
.routing-panel-top { justify-content: space-between; border-bottom: 1px solid #224138; }
.live-dot, .routing-health i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #80d6cb; box-shadow: 0 0 14px #80d6cb; margin-right: 7px; }
.routing-live { color: #80d6cb; }
.routing-map { position: relative; min-height: 390px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgb(33 109 88 / 20%), transparent 25%), linear-gradient(135deg, rgb(15 43 34 / 38%), transparent 48%); }
.routing-map::before, .routing-map::after { content: ""; position: absolute; inset: 12% 7%; border: 1px solid rgb(78 147 117 / 22%); transform: skewY(-12deg) rotate(-2deg); border-radius: 50%; }
.routing-map::after { inset: 25% 14%; transform: skewY(12deg) rotate(18deg); border-style: dashed; opacity: .55; }
.map-coordinate { position: absolute; z-index: 2; color: #547968; font: 8px 'JetBrains Mono', monospace; letter-spacing: 1px; }
.coordinate-one { top: 20px; left: 20px; }.coordinate-two { right: 20px; bottom: 20px; color: #80d6cb; }
.route-node { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; border: 1px solid #477766; background: rgb(9 25 20 / 94%); box-shadow: 3px 3px 0 #1c4a3b; border-radius: 5px; padding: 10px 12px; color: #c6ded2; font: 10px 'JetBrains Mono', monospace; }
.route-node small { color: #80d6cb; font-size: 8px; letter-spacing: 1px; }.route-node b { font-weight: 400; font-size: 9px; }
.route-source { left: 8%; top: 43%; }.route-core { left: 50%; top: 39%; width: 84px; height: 84px; align-items: center; justify-content: center; transform: translate(-50%, -50%); background: #80d6cb; color: #071612; border-color: #9be9dd; box-shadow: 5px 5px 0 #225847; }
.route-core span { font: 24px Unbounded, sans-serif; }.route-core small { color: #173d32; }
.route-model { right: 7%; }.model-a { top: 18%; }.model-b { top: 42%; }.model-c { top: 66%; }
.route-beam { position: absolute; z-index: 1; height: 1px; transform-origin: left center; background: linear-gradient(90deg, transparent, #74d4b8, transparent); box-shadow: 0 0 8px #74d4b8; opacity: .7; }
.beam-one { left: 23%; top: 49%; width: 27%; transform: rotate(-10deg); }.beam-two { left: 53%; top: 43%; width: 38%; transform: rotate(-25deg); }.beam-three { left: 53%; top: 50%; width: 38%; transform: rotate(18deg); }
.routing-panel-bottom { justify-content: space-between; border-top: 1px solid #224138; }.routing-panel-bottom small { display: block; margin-bottom: 5px; color: #527563; font-size: 8px; }.routing-health { color: #80d6cb; }
@media (max-width: 760px) {
  .routing-panel { width: 100%; }
  .routing-map { min-height: 320px; }
  .routing-panel-bottom { gap: 10px; font-size: 8px; padding: 13px 12px; }
  .routing-panel-bottom span:nth-child(2) { display: none; }
  .route-node { padding: 8px 9px; }
  .route-core { width: 72px; height: 72px; }
  .public-hero::after { inset: 0 -20px; }
  .shader-vignette::before { width: 92vw; left: -15%; top: 8%; filter: blur(58px); }
  .shader-vignette::after { width: 76vw; left: 46%; top: 22%; filter: blur(54px); }
}
@media (max-width: 370px) {
  .public-home { padding: 0 16px; }
  .public-header .brand { font-size: 12px; gap: 5px; }
  .public-header .brand-mark { width: 19px; }
  .public-header .public-actions { gap: 10px; }
  .public-header .button { font-size: 10px; padding: 7px; }
  .public-header .button span { display: none; }
  .public-hero h1 { font-size: 27px; }
  .routing-map { min-height: 280px; }
  .route-model b { font-size: 8px; }
  .public-models .section-heading { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .network-shader { opacity: .58; }
  .shader-vignette::before, .shader-vignette::after { animation: none; }
  .brand-mark i { animation: none; }
}