.homelab-header{flex-direction:column;gap:1.5rem;max-width:1050px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex}.header-top-nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.back-link{color:#00d4aa;align-items:center;gap:.4rem;padding:.3rem 0;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.back-link:before{content:"";background:linear-gradient(90deg,#00d4aa,#0ff);border-radius:1px;width:0;height:1.5px;transition:width .25s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-2px;left:0}.back-link:hover{color:#0ff;transform:translate(-4px)}.back-link:hover:before{width:100%}.back-link i{transition:transform .2s}.back-link:hover i{transform:translate(-3px)}.header-main-content{grid-template-columns:1.2fr 1fr;align-items:center;gap:2rem;display:grid}.header-titles{text-align:left;flex-direction:column;gap:.5rem;display:flex}.page-title{font-family:var(--font-heading);color:#e0f2f1;letter-spacing:-.02em;margin:0;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;line-height:1.1}.page-subtitle{color:#7aa;margin:0;font-size:1.05rem;font-weight:400;line-height:1.6}.intro-cards{grid-template-columns:repeat(2,1fr);gap:.85rem;display:grid}.intro-card{color:#7aa;text-align:left;background:#00d4aa0a;border:1px solid #00d4aa26;border-radius:.75rem;align-items:center;gap:.75rem;padding:.9rem 1rem;transition:all .2s;display:flex}.intro-card:hover{background:#00d4aa14;border-color:#00d4aa59;transform:translateY(-2px)}.intro-card-icon{background:#00d4aa1a;border:1px solid #00d4aa40;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.intro-card-icon i{color:#00d4aa;font-size:.9rem}.intro-card-content{flex-direction:column;gap:.1rem;display:flex}.intro-card-title{color:#e0f2f1;letter-spacing:.01em;font-size:.85rem;font-weight:600}.intro-card-text{color:#7aa;font-size:.8rem;line-height:1.3}.intro-highlight{color:#e0f2f1;text-align:left;background:linear-gradient(135deg,#00d4aa14,#00ffff0f);border:1px solid #00d4aa40;border-radius:.85rem;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;font-size:.9rem;line-height:1.5;display:flex;position:relative;overflow:hidden}.intro-highlight:before{content:"";pointer-events:none;background:radial-gradient(circle at 0 0,#00d4aa1a,#0000 45%),radial-gradient(circle at 100% 100%,#00ffff0f,#0000 45%);position:absolute;inset:0}.intro-highlight-icon{z-index:1;background:linear-gradient(135deg,#00d4aa33,#00ffff26);border:1px solid #00d4aa59;border-radius:.65rem;flex-shrink:0;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex;position:relative}.intro-highlight-icon i{background:linear-gradient(135deg,#00d4aa,#0ff);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px #00d4aa80);background-clip:text;font-size:1.1rem}.intro-highlight-content{z-index:1;flex-direction:column;flex:1;gap:.35rem;display:flex;position:relative}.intro-highlight-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.intro-highlight-title{color:#e0f2f1;font-size:1rem;font-weight:700}.intro-highlight-link{color:#00d4aa;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;text-decoration:none;display:inline-flex}.intro-highlight-link:hover{text-decoration:underline}.intro-highlight-text{color:#7aa;margin:0;font-size:.9rem;line-height:1.5}.intro-highlight-text a{color:#00d4aa;font-weight:500;text-decoration:none}.intro-highlight-text a:hover{text-decoration:underline}.header-note{color:#8a7f72;justify-content:center;align-items:center;gap:.4rem;margin:0;font-size:.78rem;font-style:italic;display:flex}[data-theme=light] .page-title{color:#0f172a}[data-theme=light] .page-subtitle{color:#334155}[data-theme=light] .intro-card{color:#334155;background:#0891b20f;border-color:#0891b233}[data-theme=light] .intro-card:hover{background:#0891b21a;border-color:#0891b266}[data-theme=light] .intro-card-icon{background:#0891b21a;border-color:#0891b240}[data-theme=light] .intro-card-icon i{color:#0891b2}[data-theme=light] .intro-card-title{color:#0f172a}[data-theme=light] .intro-card-text{color:#475569}[data-theme=light] .intro-highlight{color:#0f172a;background:linear-gradient(135deg,#0891b214,#0e74900f);border-color:#0891b240}[data-theme=light] .intro-highlight:before{background:radial-gradient(circle at 0 0,#0891b214,#0000 45%),radial-gradient(circle at 100% 100%,#0e74900f,#0000 45%)}[data-theme=light] .intro-highlight-icon{background:linear-gradient(135deg,#0891b233,#0e749026);border-color:#0891b259}[data-theme=light] .intro-highlight-icon i{background:linear-gradient(135deg,#0891b2,#0e7490);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px #0891b266);background-clip:text}[data-theme=light] .intro-highlight-title{color:#0f172a}[data-theme=light] .intro-highlight-link{color:#0891b2}[data-theme=light] .intro-highlight-text{color:#334155}[data-theme=light] .intro-highlight-text a,[data-theme=light] .back-link{color:#0891b2}[data-theme=light] .back-link:before{background:linear-gradient(90deg,#0891b2,#0e7490)}[data-theme=light] .back-link:hover{color:#0e7490}[data-theme=light] .header-note{color:#8a7f72}@media (width<=900px){.header-main-content{grid-template-columns:1fr;gap:1.5rem}.intro-cards{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.intro-cards{grid-template-columns:1fr}.intro-highlight{flex-direction:column;align-items:flex-start;gap:.75rem}.intro-highlight-icon{width:2rem;height:2rem}.intro-highlight-icon i{font-size:1rem}.intro-card-title{font-size:.8rem}.intro-card-text{font-size:.75rem}.intro-highlight-text{font-size:.85rem}.intro-highlight-title{font-size:.95rem}}@media (width<=480px){.homelab-header{gap:1rem;margin-bottom:1.5rem}.header-main-content{gap:1rem}.intro-cards{gap:.6rem}.intro-card{gap:.6rem;padding:.7rem .85rem}.intro-highlight{gap:.6rem;padding:.85rem 1rem}.page-title{font-size:clamp(1.75rem,6vw,2.5rem)}.page-subtitle{font-size:.95rem}.intro-highlight-text{font-size:.8rem}}.status-item{font-family:var(--font-heading);letter-spacing:.05em;text-transform:uppercase;color:#7aa;background:#00d4aa14;border:1px solid #00d4aa33;border-radius:9999px;align-items:center;gap:.35rem;padding:.2rem .6rem;font-size:.7rem;font-weight:600;line-height:1.4;transition:all .3s;display:inline-flex}.status-dot{background:var(--color-text-muted);border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:all .3s}.status-name{color:#7aa;transition:color .25s}.status-value{color:var(--color-text);font-weight:700;transition:color .3s}.status-item.is-up .status-dot{background-color:#2ecc71;box-shadow:0 0 6px #2ecc7166}.status-item.is-up .status-value{color:#2ecc71}.status-item.is-down .status-dot{background-color:#e74c3c;box-shadow:0 0 6px #e74c3c66}.status-item.is-down .status-value{color:#e74c3c}.status-item.is-partial .status-dot{background-color:#f39c12;box-shadow:0 0 6px #f39c1266}.status-item.is-partial .status-value{color:#f39c12}.status-item.is-unknown .status-dot{background-color:#95a5a6;box-shadow:0 0 4px #95a5a64d}.status-item.is-unknown .status-value{color:#95a5a6}.status-item.is-error .status-dot{background-color:#e74c3c;box-shadow:0 0 6px #e74c3c66}.status-item.is-error .status-value{color:#e74c3c}[data-theme=light] .status-item{color:#475569;background:#0891b214;border-color:#0891b233}[data-theme=light] .status-name{color:#475569}[data-theme=light] .status-value{color:var(--color-text)}[data-theme=light] .status-item.is-up .status-dot{background-color:#27ae60;box-shadow:0 0 4px #27ae6059}[data-theme=light] .status-item.is-up .status-value{color:#27ae60}[data-theme=light] .status-item.is-down .status-dot{background-color:#dc2626;box-shadow:0 0 4px #dc262659}[data-theme=light] .status-item.is-down .status-value{color:#dc2626}[data-theme=light] .status-item.is-partial .status-dot{background-color:#d97706;box-shadow:0 0 4px #d9770659}[data-theme=light] .status-item.is-partial .status-value{color:#d97706}[data-theme=light] .status-item.is-unknown .status-dot{background-color:#b8a88a;box-shadow:0 0 4px #94a3b840}[data-theme=light] .status-item.is-unknown .status-value{color:#b8a88a}[data-theme=light] .status-item.is-error .status-dot{background-color:#dc2626;box-shadow:0 0 4px #dc262659}[data-theme=light] .status-item.is-error .status-value{color:#dc2626}@media (width<=640px){.status-item{padding:.15rem .5rem;font-size:.65rem}}.homelab-page{min-height:100vh;color:var(--color-text);padding:calc(var(--nav-height) + 5rem) 2rem 5rem;animation:.8s ease-out fadeInUp;position:relative;overflow:hidden}@media (width<=768px){.homelab-page{padding-top:calc(var(--nav-height) + 1.5rem)}}@media (width<=480px){.homelab-page{padding-top:calc(var(--nav-height) + 1rem)}}.h-page-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.h-network{opacity:.7;width:100%;height:100%;position:absolute;inset:0}.h-network-nodes circle{opacity:.6}.h-network-pulses circle{opacity:0}.h-particles{position:absolute;inset:0}.h-particle{opacity:0;background:#00d4aa;border-radius:50%;width:3px;height:3px;animation:8s ease-in-out infinite particleFloat;position:absolute;box-shadow:0 0 8px #00d4aa,0 0 16px #00d4aa66}@keyframes particleFloat{0%,to{opacity:0;transform:translateY(0)scale(.5)}20%{opacity:.8}50%{opacity:.4;transform:translateY(-120px)scale(1)}80%{opacity:.6}}.homelab-page>:not(.h-page-bg){z-index:1;position:relative}.h-page-diagram{width:100%;max-width:1100px;margin:0 auto}@media (width<=768px){.h-page-diagram{max-width:100%}}[data-theme=light] .h-grid{background-image:linear-gradient(#0891b21f 1px,#0000 1px),linear-gradient(90deg,#0891b21f 1px,#0000 1px)}[data-theme=light] .h-network{opacity:.9}[data-theme=light] .h-network-lines{stroke:#0891b2;stroke-opacity:.25}[data-theme=light] .h-network-nodes circle{fill:#0891b2;opacity:.75}[data-theme=light] .h-particle{background:#0891b2;box-shadow:0 0 8px #0891b299,0 0 16px #0891b240}[data-theme=light] .h-glow{opacity:.18}[data-theme=light] .h-glow-1{background:#0891b2}[data-theme=light] .h-glow-2{background:#2563eb}[data-theme=light] .loader-text{color:#0891b2}[data-theme=light] .loader-spinner{border-top-color:#0891b2}.diagram-loader{z-index:10;backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;background:#0a0f14;border-radius:8px;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:absolute;inset:0}.diagram-loader.is-visible{opacity:1;visibility:visible;pointer-events:auto}.loader-content{flex-direction:column;align-items:center;gap:1rem;display:flex}.loader-spinner{border:3px solid #00d4aa33;border-top-color:#00d4aa;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.loader-text{color:#00d4aa;margin:0;font-size:.875rem;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}#diagram-container{contain:layout paint style;background:#0a0f1466;border:1px solid #00d4aa26;border-radius:8px;width:100%;min-height:600px;position:relative;overflow:hidden}.pan-wrapper{cursor:grab;touch-action:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.pan-wrapper:active{cursor:grabbing}#diagram-svg{pointer-events:none;user-select:none;-webkit-user-drag:none;border:none;width:100%;max-width:100%;height:auto;min-height:600px;overflow:hidden}.zoom-controls{z-index:999;pointer-events:auto;backdrop-filter:blur(8px);background:#0a0f14cc;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:.5rem;padding:.5rem;display:flex;position:absolute;bottom:1rem;right:1rem}.zoom-controls button{color:#fff;cursor:pointer;pointer-events:auto;background:#ffffff1a;border:none;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;transition:background .2s;display:flex}.zoom-controls button:hover{background:#00d4aa4d}[data-theme=light] .zoom-controls button{color:#0891b2;background:#0000000d}[data-theme=light] .zoom-controls button:hover{background:#0891b233}.homelab-page.is-dragging .h-particle,.homelab-page.is-dragging .h-network-pulses circle{animation-play-state:paused!important}.homelab-page.is-dragging .h-glow,.homelab-page.is-dragging .h-network{transition:opacity .2s;opacity:0!important}.homelab-page.is-dragging #diagram-svg{image-rendering:optimizeSpeed}.homelab-page:not(.is-dragging) #diagram-svg{image-rendering:auto;transition:opacity .3s,image-rendering 0s .3s}@media (width<=768px){#diagram-container,#diagram-svg{min-height:400px}}@media (width<=480px){#diagram-container,#diagram-svg{min-height:320px}}
