.ha-open-source {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 138px) 6.5% clamp(78px, 8vw, 120px);
    color: #f2efe9;
    background: radial-gradient(ellipse at 82% 8%, rgba(244,46,61,.1), transparent 35%), #08080b;
    isolation: isolate;
}
.ha-open-source::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,46,61,.68), transparent); }
.ha-gh-wrap { position: relative; z-index: 2; width: min(100%, 1500px); margin: auto; }
.ha-os-intro { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); align-items: center; gap: clamp(28px, 5vw, 86px); }
.ha-os-intro h2 { margin: 0; color: #f5f0ec; font: 700 clamp(43px, 4.65vw, 78px)/.98 'Syne', sans-serif; letter-spacing: -.075em; }
.ha-os-intro h2 span { color: #f42e3d; }
.ha-os-graph { position: relative; min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: #0d1117; box-shadow: 0 20px 70px rgba(0,0,0,.25); transform: perspective(1100px) rotate(1deg); transform-style: preserve-3d; will-change: transform; cursor: crosshair; transition: border-color .35s, box-shadow .35s; }
.ha-os-graph::after { content: ''; position: absolute; inset: -7px; border: 1px solid rgba(244,46,61,.16); border-radius: 12px; pointer-events: none; }
.ha-os-graph img { display: block; width: 100%; height: auto; }
.ha-os-graph:hover, .ha-os-graph:focus-visible { border-color: rgba(244,46,61,.65); box-shadow: 0 25px 85px rgba(244,46,61,.12), 0 20px 70px rgba(0,0,0,.38); outline: none; }
@media (min-width: 951px) { .ha-os-graph { margin-right: 72px; } }
.ha-os-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(50px, 5.5vw, 90px); }
.ha-os-project { position: relative; overflow: hidden; isolation: isolate; transform-style: preserve-3d; will-change: transform; display: flex; align-items: center; min-width: 0; min-height: 132px; padding: 22px; gap: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; color: #f2efe9; background: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%), rgba(244,46,61,.12), transparent 75%), rgba(255,255,255,.025); text-decoration: none; transition: border-color .3s, background .3s, box-shadow .3s; }
.ha-os-project:hover, .ha-os-project:focus-visible { border-color: rgba(244,46,61,.78); box-shadow: 0 18px 55px rgba(244,46,61,.11), inset 0 0 28px rgba(244,46,61,.04); outline: none; }
.ha-os-project > span, .ha-os-project > b { position: relative; z-index: 2; }
.ha-os-project > span:nth-child(2) { display: grid; min-width: 0; gap: 5px; }
.ha-os-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f5f0ec; font: 650 clamp(20px, 1.7vw, 27px)/1.1 'Syne', sans-serif; letter-spacing: -.035em; }
.ha-os-project small { color: #a9a1a3; font: 600 11px/1.2 'Poppins', sans-serif; letter-spacing: .05em; }
.ha-os-project b { margin-left: auto; align-self: flex-start; color: #f42e3d; font: 400 20px/1 'Syne', sans-serif; transition: transform .3s, color .3s; }
.ha-os-project:hover b, .ha-os-project:focus-visible b { transform: translate(4px,-4px); color: #fff; }
.ha-os-logo { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; }
.ha-os-microsoft { grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 8px; }
.ha-os-microsoft i { width: 100%; height: 100%; background: #f25022; }
.ha-os-microsoft i:nth-child(2) { background: #7fba00; }
.ha-os-microsoft i:nth-child(3) { background: #00a4ef; }
.ha-os-microsoft i:nth-child(4) { background: #ffb900; }
.ha-os-huggingface { border-radius: 50%; background: #ffd21e; font-size: 32px; line-height: 1; }
.ha-os-browser { position: relative; border: 2px solid #d9d2d2; border-radius: 9px; grid-template-columns: repeat(3, 4px); align-content: start; gap: 4px; padding-top: 9px; }
.ha-os-browser::after { content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: #d9d2d2; }
.ha-os-browser i { width: 4px; height: 4px; border-radius: 50%; background: #f42e3d; }
.ha-os-webui { border: 2px solid #f42e3d; border-radius: 12px; color: #f42e3d; font-size: 38px; line-height: 1; }
.ha-os-project[hidden] { display: none; }
.ha-os-project-extra { grid-column: 1 / 2; }
.ha-os-more { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 185px; margin: 30px 0 0 auto; padding: 15px 0; border: 0; border-bottom: 1px solid #f42e3d; color: #f4f0ec; background: transparent; cursor: pointer; font: 700 12px/1 'Syne', sans-serif; letter-spacing: .12em; transition: color .25s, gap .25s; }
.ha-os-more:hover, .ha-os-more:focus-visible { color: #f42e3d; gap: 55px; }
.ha-os-more-label { display: inline-block; }
.ha-os-more-icon { position: relative; display: block; width: 18px; height: 18px; color: #f42e3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ha-os-more-icon::before, .ha-os-more-icon::after { content: ''; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: currentColor; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ha-os-more-icon::after { transform: rotate(90deg); }
.ha-os-more[aria-expanded="true"] .ha-os-more-icon { transform: rotate(180deg); }
.ha-os-more[aria-expanded="true"] .ha-os-more-icon::after { transform: rotate(0); opacity: 0; }
.ha-os-particles { position: absolute; z-index: 1; inset: -150px 0 auto; height: 420px; overflow: visible; pointer-events: none; }
.ha-os-particles i { position: absolute; top: 0; left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; opacity: 0; background: #f42e3d; box-shadow: 0 0 14px 2px rgba(244,46,61,.55); }
.ha-os-particles i:nth-child(1) { --x: 8%; --size: 3px; }
.ha-os-particles i:nth-child(2) { --x: 15%; --size: 2px; }
.ha-os-particles i:nth-child(3) { --x: 23%; --size: 4px; }
.ha-os-particles i:nth-child(4) { --x: 31%; --size: 2px; }
.ha-os-particles i:nth-child(5) { --x: 38%; --size: 3px; }
.ha-os-particles i:nth-child(6) { --x: 47%; --size: 2px; }
.ha-os-particles i:nth-child(7) { --x: 55%; --size: 3px; }
.ha-os-particles i:nth-child(8) { --x: 62%; --size: 2px; }
.ha-os-particles i:nth-child(9) { --x: 70%; --size: 4px; }
.ha-os-particles i:nth-child(10) { --x: 78%; --size: 2px; }
.ha-os-particles i:nth-child(11) { --x: 87%; --size: 3px; }
.ha-os-particles i:nth-child(12) { --x: 94%; --size: 2px; }
@media (max-width: 950px) { .ha-os-intro { grid-template-columns: 1fr; } .ha-os-graph { width: min(100%, 700px); } .ha-os-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ha-open-source { padding: 74px 6% 76px; } .ha-os-intro h2 { font-size: clamp(44px, 10.5vw, 65px); } .ha-os-graph { padding: 6px; transform: none; } .ha-os-projects { grid-template-columns: 1fr; gap: 10px; margin-top: 44px; } .ha-os-project { min-height: 96px; padding: 16px; } .ha-os-logo { flex-basis: 40px; width: 40px; height: 40px; } .ha-os-huggingface { font-size: 27px; } .ha-os-browser { padding-top: 7px; } .ha-os-browser::after { top: 15px; } .ha-os-webui { font-size: 32px; } .ha-os-project-extra { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .ha-os-project, .ha-os-more { transition: none; } }

.ha-os-interaction-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ha-os-project .ha-os-interaction-canvas { -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 62%); mask-image: linear-gradient(90deg, transparent 12%, #000 62%); }

/* Logo-only Easter eggs retain the project card as a normal external link. */
.ha-os-project-with-egg { overflow: visible; }
.ha-os-project-with-egg .ha-os-project-link { position: absolute; z-index: 2; inset: 0; }
.ha-os-project-with-egg > span:not(.ha-os-egg-panel) { display: grid; min-width: 0; gap: 5px; pointer-events: none; }
.ha-os-project-with-egg > b { pointer-events: none; }
.ha-os-project-with-egg .ha-os-egg-trigger { position: relative; z-index: 7; flex-shrink: 0; border: 0; color: inherit; cursor: pointer; transition: transform .22s ease, filter .22s ease; }
.ha-os-project-with-egg .ha-os-egg-trigger:hover, .ha-os-project-with-egg .ha-os-egg-trigger:focus-visible { transform: scale(1.12); filter: drop-shadow(0 0 11px rgba(244,46,61,.6)); outline: none; }
.ha-os-project-with-egg .ha-os-egg-trigger:focus-visible { box-shadow: 0 0 0 2px #f42e3d; }
.ha-os-project-with-egg .ha-os-egg-panel { position: absolute; z-index: 8; top: calc(100% + 8px); left: 0; display: flex; align-items: center; box-sizing: border-box; width: min(330px, 100%); padding: 15px 17px; overflow: hidden; pointer-events: none; background: rgba(5,5,8,.96); box-shadow: 0 18px 42px rgba(0,0,0,.42); color: #f5f0ec; opacity: 0; }
.ha-os-project-with-egg .ha-os-egg-panel[hidden] { display: none; }
.ha-os-project-with-egg .ha-os-egg-panel::before, .ha-os-project-with-egg .ha-os-egg-panel::after { content: ''; position: absolute; z-index: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #f42e3d 36%, rgba(244,46,61,.3), transparent); opacity: 0; box-shadow: 0 0 12px rgba(244,46,61,.55); }
.ha-os-project-with-egg .ha-os-egg-panel::before { top: 25%; }
.ha-os-project-with-egg .ha-os-egg-panel::after { top: 72%; }
.ha-os-project-with-egg .ha-os-egg-copy { position: relative; z-index: 1; display: block; font: 500 13px/1.5 'Syne',sans-serif; }
.ha-os-project-with-egg .ha-os-egg-panel.is-visible { animation: ha-os-egg-in .36s steps(1,end) both; }
.ha-os-project-with-egg .ha-os-egg-panel.is-visible .ha-os-egg-copy { animation: ha-os-egg-copy-in .36s steps(1,end) both; }
.ha-os-project-with-egg .ha-os-egg-panel.is-visible::before, .ha-os-project-with-egg .ha-os-egg-panel.is-visible::after { animation: ha-os-egg-scan .36s steps(1,end) both; }
.ha-os-project-with-egg .ha-os-egg-panel.is-exiting { animation: ha-os-egg-out .28s steps(1,end) both; }
@keyframes ha-os-egg-in { 0%,15% { opacity: 0; clip-path: inset(0 0 100% 0); } 16%,34% { opacity: .8; clip-path: inset(58% 0 17% 0); } 35%,48% { opacity: .4; clip-path: inset(9% 0 58% 0); } 49%,100% { opacity: 1; clip-path: inset(0); } }
@keyframes ha-os-egg-copy-in { 0%,34% { opacity: 0; transform: translateX(var(--egg-jitter,7px)); } 35%,49% { opacity: 1; transform: translateX(-5px); text-shadow: 3px 0 #f42e3d; } 50%,65% { opacity: .45; transform: translateX(3px); } 66%,100% { opacity: 1; transform: none; text-shadow: none; } }
@keyframes ha-os-egg-scan { 0%,15% { opacity: 0; transform: translateY(-18px); } 16%,48% { opacity: 1; transform: translateY(14px); } 49%,78% { opacity: .4; transform: translateY(-7px); } 79%,100% { opacity: 0; transform: translateY(8px); } }
@keyframes ha-os-egg-out { 0%,30% { opacity: 1; clip-path: inset(0); } 31%,55% { opacity: .55; clip-path: inset(32% 0 40% 0); } 56%,100% { opacity: 0; clip-path: inset(0 0 100% 0); } }
@media (max-width: 620px) { .ha-os-project-with-egg .ha-os-egg-panel { padding: 14px 15px; } }
@media (prefers-reduced-motion: reduce) { .ha-os-project-with-egg .ha-os-egg-panel, .ha-os-project-with-egg .ha-os-egg-copy, .ha-os-project-with-egg .ha-os-egg-panel::before, .ha-os-project-with-egg .ha-os-egg-panel::after { animation: none !important; } .ha-os-project-with-egg .ha-os-egg-panel.is-visible { opacity: 1; clip-path: none; } .ha-os-project-with-egg .ha-os-egg-panel.is-exiting { opacity: 0; } }