.home-hero {
  position: relative;
  height: 206px;
  overflow: hidden;
  border: 1px solid #324047;
  border-radius: 7px;
  background: linear-gradient(112deg, #121b20 0%, #0b1115 58%, #151a1d 100%);
  box-shadow: 0 18px 38px #0007;
  isolation: isolate;
}
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #080d10 0%, #080d10e8 43%, #080d1060 70%, #080d10a8 100%), linear-gradient(180deg, transparent 68%, #080d10 100%); }
.home-hero.has-image::before { background: linear-gradient(90deg, #080d10f5 0%, #080d10d9 46%, #080d1052 78%, #080d108f 100%), linear-gradient(180deg, transparent 60%, #080d10e8 100%); }
.home-hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .25; background-image: linear-gradient(#6bd8ce24 1px, transparent 1px), linear-gradient(90deg, #6bd8ce24 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000 100%); }
.home-hero-copy { position: relative; z-index: 2; width: 80%; padding: 28px 22px; }
.home-hero-copy > span { color: #72d8cf; font-size: 9px; font-weight: 750; letter-spacing: 0; }
.home-hero-copy h1 { max-width: 250px; margin: 10px 0 8px; color: #f4f5f1; font-size: 25px; line-height: 1.18; letter-spacing: 0; }
.home-hero-copy p { margin: 0; color: #a7b1b4; font-size: 11px; line-height: 1.5; }
.home-hero-copy > div { display: flex; align-items: center; gap: 6px; margin-top: 22px; color: #758387; font-size: 8px; letter-spacing: 0; }
.home-hero-copy > div b { color: #f0a47e; font-size: 13px; }
.home-hero-copy > div em { width: 1px; height: 12px; margin: 0 3px; background: #445257; }
.home-hero > button { position: absolute; right: 15px; bottom: 14px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e49a75; border-radius: 50%; background: #0b1115cc; }
.home-hero > button img { width: 17px; height: 17px; filter: invert(75%) sepia(27%) saturate(890%) hue-rotate(326deg); }
.hero-engine { position: absolute; top: 27px; right: 17px; z-index: 1; width: 122px; height: 122px; border: 1px solid #5fd0c54d; transform: rotate(45deg); }
.hero-engine::before, .hero-engine::after { content: ""; position: absolute; inset: 15px; border: 1px solid #ef9a714d; }
.hero-engine::after { inset: 34px; border-color: #65d6cb8a; background: #0c1719b8; }
.hero-engine span { position: absolute; width: 9px; height: 9px; border: 1px solid #65d6cb; background: #10191c; }
.hero-engine span:nth-child(1) { top: -5px; left: -5px; }.hero-engine span:nth-child(2) { top: -5px; right: -5px; }.hero-engine span:nth-child(3) { right: -5px; bottom: -5px; }
.hero-engine i { position: absolute; height: 1px; background: #e49a7599; transform-origin: left center; }
.hero-engine i:nth-of-type(1) { width: 34px; top: 24px; left: -22px; }.hero-engine i:nth-of-type(2) { width: 29px; right: -17px; bottom: 26px; }.hero-engine i:nth-of-type(3) { width: 40px; bottom: -13px; left: 16px; transform: rotate(90deg); }
.compute-scene { margin: 26px 0 0; }
.compute-scene-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.compute-scene-heading > div { display: grid; gap: 4px; }
.compute-scene-heading span { color: #6dd8ce; font-size: 8px; font-weight: 750; letter-spacing: 0; }
.compute-scene-heading h2 { margin: 0; font-size: 17px; font-weight: 700; }
.compute-scene-heading > small { position: relative; padding-left: 10px; color: #83c5a6; font-size: 9px; }
.compute-scene-heading > small::before { content: ""; position: absolute; top: 3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #72d7a8; box-shadow: 0 0 8px #72d7a8; }
.compute-fabric { position: relative; height: 214px; overflow: hidden; border: 1px solid #2c4246; border-radius: 7px 7px 0 0; background: radial-gradient(circle at 50% 55%, #153137 0%, #091317 44%, #070c10 76%), linear-gradient(#5dd5c912 1px, transparent 1px), linear-gradient(90deg, #5dd5c912 1px, transparent 1px); background-size: auto, 26px 26px, 26px 26px; isolation: isolate; }
.compute-fabric::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #081014b8 0%, transparent 22%, transparent 78%, #081014b8 100%), linear-gradient(180deg, #07101433 0%, transparent 48%, #071014a6 100%); }
.compute-fabric::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 3px, #8efff003 3px 4px); mix-blend-mode: screen; }
.compute-globe-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.globe-fallback { position: absolute; top: 50%; left: 50%; z-index: 1; width: 148px; height: 148px; border: 1px solid #6ee8dd6b; border-radius: 50%; background: radial-gradient(circle at 37% 32%, #5ce7dc2e 0 5%, transparent 27%), radial-gradient(circle at 55% 55%, #0f383f 0%, #09171b 62%, #081014 100%); box-shadow: inset -22px -12px 35px #0009, 0 0 34px #56dace21; transform: translate(-50%, -50%); transition: opacity .25s ease; }
.globe-fallback::before, .globe-fallback::after { content: ""; position: absolute; inset: 17px -15px; border: 1px solid #6de6dc47; border-radius: 50%; transform: rotate(14deg); }
.globe-fallback::after { inset: -9px 26px; border-color: #e49a7547; transform: rotate(67deg); }
.globe-fallback > i { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #78f2e7; box-shadow: 0 0 11px #78f2e7; }
.globe-fallback > i:nth-child(1) { transform: translate(-53px,-31px); }.globe-fallback > i:nth-child(2) { background: #efa077; box-shadow: 0 0 11px #efa077; transform: translate(46px,-10px); }.globe-fallback > i:nth-child(3) { transform: translate(18px,42px); }
.globe-fallback > span { position: absolute; top: 50%; left: 50%; width: 55px; height: 26px; border: solid #b5f5ee63; border-width: 1px 0; border-radius: 45%; transform: translate(-50%, -50%) rotate(-16deg); }
.globe-ready .globe-fallback { opacity: 0; }
.globe-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #7fe9df; font-size: 7px; letter-spacing: .08em; }
.globe-live, .globe-fps, .globe-route-count, .globe-flow, .globe-core-label { position: absolute; padding: 4px 6px; background: #071014a8; border: 1px solid #2a4b4f; }
.globe-live { top: 11px; left: 11px; color: #86f3e9; }
.globe-live::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: #72e5ab; box-shadow: 0 0 7px #72e5ab; vertical-align: 1px; }
.globe-fps { top: 11px; right: 11px; color: #81989c; }
.globe-core-label { top: 50%; left: 50%; min-width: 86px; color: #e2f7f3; text-align: center; transform: translate(-50%, -50%); }
.globe-flow { bottom: 28px; display: flex; align-items: center; gap: 5px; }
.globe-flow i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.globe-flow-production { left: 11px; color: #71e8dd; }.globe-flow-consumption { right: 11px; color: #eba078; }
.globe-route-count { right: 11px; bottom: 8px; border: 0; background: transparent; color: #788b90; }
.globe-static .globe-fps { display: none; }
.compute-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #2c3b40; border-top: 0; background: #0e1519; }
.compute-summary > * { display: grid; min-width: 0; gap: 5px; padding: 12px; border: 0; border-right: 1px solid #28353a; background: none; color: inherit; text-align: left; }
.compute-summary > *:last-child { border-right: 0; }
.compute-summary small { color: #7f8f94; font-size: 9px; }
.compute-summary strong { color: #f0f1ed; font-size: 18px; font-variant-numeric: tabular-nums; }
.compute-summary strong span { margin-left: 3px; color: #8a989c; font-size: 9px; font-weight: 500; }
.compute-summary strong.online { color: #73d8a8; font-size: 13px; }
.compute-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.compute-output { min-width: 0; padding: 11px; border: 1px solid #2b3a40; border-radius: 5px; background: #0c1418; }
.compute-output > span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #d7e8e8; font-size: 11px; }
.compute-output i { width: 4px; height: 4px; border-radius: 50%; background: #75e4dc; box-shadow: 0 0 6px #75e4dc80; }
.compute-output > span small { color: #829399; font-size: 9px; }
.compute-output > strong { display: block; margin-top: 7px; color: #8fe1d9; font-size: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.compute-output strong small { margin-left: 4px; color: #829399; font-size: 9px; font-weight: 400; }
.compute-no-products { grid-column: 1 / -1; margin: 5px 0; color: #849eaf; font-size: 11px; text-align: center; }
.avatar-option > span, .avatar { border-radius: 50%; }
.profile-card .avatar { width: 64px; height: 64px; flex: 0 0 64px; }
.avatar { border-color: #55cfc3; background: #0d1519; box-shadow: 0 0 0 3px #55cfc31f; }
@media (prefers-reduced-motion: reduce) { .globe-fallback { transition: none; } }
@media (max-width: 360px) { .home-hero { height: 194px; }.home-hero-copy { width: 84%; padding: 23px 18px; }.home-hero-copy h1 { font-size: 22px; }.hero-engine { right: 7px; width: 108px; height: 108px; }.quick-actions { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; }.quick-actions button { font-size: 10px; }.compute-fabric { height: 196px; }.compute-summary > * { padding: 10px 8px; }.globe-core-label { min-width: 74px; font-size: 6px; }.globe-flow { bottom: 25px; } }