@font-face { font-family: "VT323 Homelab"; src: url('/fonts/VT323-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
.homelab-page .brand-name, .homelab-page .footer-brand .brand-name { font-family: "VT323 Homelab", var(--mono); }
.homelab-page main { overflow-wrap: break-word; }
.hs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 23px; color: #9eb5a6; font: 11px/1.8 var(--mono); }
.hs-breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; text-decoration-color: #4c7057; }
.hs-intro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: center; padding: 43px 0 58px; }
.hs-kicker { margin: 0 0 23px; color: #a8c3b1; font: 11px/1.8 var(--mono); letter-spacing: .065em; }
.hs-kicker > span { padding-right: 14px; margin-right: 14px; border-right: 1px solid #4a6855; }
.homelab-page h1 { font-size: clamp(44px, 5vw, 68px); line-height: 1.09; margin: 0 0 25px; letter-spacing: -.055em; }
.homelab-page h1 em { display: inline; }
.hs-lede { max-width: 630px; color: #bdcec3; font-size: 18px; line-height: 1.8; margin: 0; }
.hs-intro-links { display: flex; flex-wrap: wrap; gap: 8px 29px; margin-top: 22px; }
.hs-text-link { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: #c0d7c8; font: 12px/1.8 var(--mono); text-decoration-color: #567860; }
.hs-text-link:hover { color: #e3f2e8; text-decoration-color: #a7cdb4; }
.hs-stack { padding-left: 28px; border-left: 1px solid #527a5e; }
.hs-stack-heading { display: flex; gap: 12px; align-items: center; color: #a5c7b0; font: 10px/1.8 var(--mono); letter-spacing: .04em; }
.hs-stack-heading > span { font: 24px/1 "VT323 Homelab", var(--mono); }
.hs-stack dl { margin: 25px 0 0; }
.hs-stack dl > div { padding: 16px 0; border-top: 1px solid var(--line); }
.hs-stack dt { color: #9ab4a3; font: 11px/1.6 var(--mono); margin-bottom: 6px; }
.hs-stack dd { color: #d8e6dd; font: 400 18px/1.5 var(--mono); letter-spacing: -.025em; margin: 0; }
.hs-stack dd span { display: block; color: #a9c0b1; font: 14px/1.7 "Segoe UI", sans-serif; margin-top: 4px; }
.hs-stack > p { margin: 14px 0 0; color: #9db6a6; font: 11px/1.8 var(--mono); }
.hs-section { padding-top: 48px; scroll-margin-top: 28px; }
.hs-section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: end; }
.homelab-page h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.3; }
.hs-section-heading > p, .hs-section-note { color: #b5cbbc; font-size: 16px; line-height: 1.85; margin: 0; }
.hs-section-note { max-width: 350px; margin-top: 23px; }
.hs-architecture { margin: 30px 0 0; padding: 26px 30px; border: 1px solid #42654d; border-radius: 4px; background: linear-gradient(135deg, #16261b, #0e1912 75%); }
.hs-diagram-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: #c0d8c8; font: 11px/1.8 var(--mono); letter-spacing: .04em; }
.hs-diagram-heading > span + span { color: #9ab5a4; letter-spacing: 0; }
.hs-public-path { display: grid; grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr); align-items: center; max-width: 740px; margin: 30px auto 0; }
.hs-public-node { padding: 19px 22px; border: 1px solid #50755b; border-radius: 3px; background: #14241a; }
.hs-node-label { display: block; color: #a5c1af; font: 10px/1.8 var(--mono); letter-spacing: .04em; }
.hs-public-node h3 { font: 400 20px/1.5 var(--mono); letter-spacing: -.025em; color: #deece3; margin: 7px 0 5px; }
.hs-public-node p { color: #b5cbbd; font-size: 14px; line-height: 1.7; margin: 0; }
.hs-horizontal-link { color: #b6d1bf; font: 10px/1.8 var(--mono); text-align: center; padding-bottom: 16px; }
.hs-horizontal-link i { display: block; height: 1px; background: #84a58f; position: relative; margin-top: 8px; }
.hs-horizontal-link i::after { content: ""; position: absolute; right: 1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid #a2c2ad; border-right: 1px solid #a2c2ad; transform: rotate(45deg); }
.hs-tunnel-link { display: flex; justify-content: center; align-items: center; gap: 19px; padding-block: 20px; color: #bad4c3; }
.hs-tunnel-link > span { font: 32px/1 var(--mono); }
.hs-tunnel-link p { color: #c4dccc; font: 11px/1.9 var(--mono); margin: 0; }
.hs-tunnel-link p span { color: #9fbaa8; }
.hs-guest { padding: 25px; border: 1px solid #476c52; border-radius: 3px; background: #0d1811; }
.hs-guest-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.hs-guest-heading h3 { margin: 6px 0 0; color: #d7e9de; font: 400 21px/1.5 var(--mono); letter-spacing: -.035em; }
.hs-platform { padding: 7px 10px; border: 1px solid #365340; color: #a5c5b0; font: 10px/1.8 var(--mono); }
.hs-connector { max-width: 490px; margin: 28px auto 0; padding: 17px 21px; text-align: center; background: #1b3022; border: 1px solid #628c6d; border-radius: 3px; position: relative; }
.hs-connector strong { display: block; font: 400 17px/1.6 var(--mono); color: #d7eadd; margin: 6px 0; }
.hs-connector > span:last-child { color: #b3cdbd; font-size: 14px; line-height: 1.7; }
.hs-connector::after { content: ""; position: absolute; width: 1px; height: 25px; background: #7d9e87; left: 50%; bottom: -26px; }
.hs-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 50px; position: relative; }
.hs-branches::before { content: ""; position: absolute; top: -25px; left: calc(25% - 7.5px); right: calc(25% - 7.5px); height: 1px; background: #7d9e87; }
.hs-branch { position: relative; min-width: 0; }
.hs-branch::before { content: ""; position: absolute; top: -25px; left: 50%; width: 1px; height: 17px; background: #7d9e87; }
.hs-route-label { display: block; text-align: center; margin-bottom: 12px; color: #a6c1b0; font: 10px/1.8 var(--mono); letter-spacing: .05em; }
.hs-service { border: 1px solid #53745d; border-radius: 3px; background: #16261b; }
.hs-service summary { display: flex; flex-direction: column; padding: 20px; min-height: 188px; list-style: none; cursor: pointer; border-radius: 2px; }
.hs-service summary::-webkit-details-marker { display: none; }
.hs-service summary::marker { content: ''; }
.hs-service summary:hover, .hs-service[open] summary { background: #1c3224; }
.hs-service summary:focus-visible { outline: 2px solid #b7d7c1; outline-offset: 4px; }
.hs-service summary > strong { color: #d9eade; font: 400 20px/1.5 var(--mono); letter-spacing: -.035em; margin: 9px 0 7px; }
.hs-service-description { color: #b6cdbd; font-size: 14px; line-height: 1.7; }
.hs-inspect { display: flex; justify-content: space-between; gap: 12px; color: #b4d3bf; font: 11px/1.8 var(--mono); padding-top: 20px; margin-top: auto; }
.hs-inspect > span { font-size: 19px; line-height: 1; }
.hs-service[open] .hs-inspect > span { transform: rotate(45deg); }
.hs-service-detail { border-top: 1px solid #3a5945; padding: 18px 20px; }
.hs-service-detail p { color: #b8cebf; font-size: 15px; line-height: 1.8; margin: 0 0 13px; }
.hs-service-detail p:last-child { margin-bottom: 0; }
.hs-dependencies { border-left: 1px solid #52765c; margin: 20px 0 0 14px; padding: 0 0 0 18px; }
.hs-dependencies p { margin: 13px 0 0; }
.hs-dependencies strong { display: block; color: #c9e0d1; font: 400 12px/1.8 var(--mono); }
.hs-dependencies p > span { display: block; color: #a9c3b2; font-size: 14px; line-height: 1.8; margin-top: 4px; }
.hs-cross-route { display: flex; gap: 14px; align-items: baseline; color: #a9c4b3; font-size: 13px; line-height: 1.9; border-top: 1px solid #304b38; padding-top: 19px; margin: 23px 0 0; }
.hs-cross-route > span:first-child { color: #adcfb9; font: 23px/1 var(--mono); }
.hs-cross-route strong { color: #c1dacb; font-weight: 500; }
.hs-foundation { display: flex; gap: 15px; align-items: center; padding: 17px 0 0; }
.hs-foundation > span { font-size: 26px; color: #9cbea8; }
.hs-foundation p { margin: 0; color: #a9c2b1; font-size: 13px; line-height: 1.8; }
.hs-foundation strong { color: #c4dccd; font-weight: 500; }
.hs-architecture figcaption { color: #9eb7a6; font-size: 13px; line-height: 1.85; margin-top: 19px; max-width: 950px; }
.hs-decisions { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; padding-top: 65px; }
.hs-decision-list article { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 18px; padding: 23px 0; border-top: 1px solid var(--line); }
.hs-decision-list article:first-child { padding-top: 0; border-top: 0; }
.hs-index { color: #99b9a4; font: 11px/1.9 var(--mono); padding-top: 3px; }
.hs-decision-list h3 { color: #d0e4d7; font: 400 17px/1.6 var(--mono); letter-spacing: -.025em; margin: 0 0 10px; }
.hs-decision-list p { color: #b1c6b8; font-size: 16px; line-height: 1.85; margin: 0; }
.hs-release-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 33px 0 0; }
.hs-release-flow li { border-top: 1px solid #668a71; padding-top: 17px; }
.hs-step-number { color: #a6c9b2; font: 36px/1 "VT323 Homelab", var(--mono); }
.hs-release-flow h3 { color: #d2e7d9; font: 400 16px/1.6 var(--mono); margin: 13px 0 11px; letter-spacing: -.025em; }
.hs-release-flow p { color: #b0c6b7; font-size: 15px; line-height: 1.85; margin: 0; }
.hs-recovery { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; border-block: 1px solid #3b5b45; padding: 39px 0; margin-top: 66px; scroll-margin-top: 28px; }
.hs-recovery-evidence > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.hs-recovery-evidence > div:first-child { padding-top: 0; }
.hs-recovery-evidence > div:last-child { padding-bottom: 0; border-bottom: 0; }
.hs-evidence-label { color: #b5d5c0; font: 11px/1.8 var(--mono); letter-spacing: .04em; }
.hs-recovery-evidence p { color: #b3cabb; font-size: 16px; line-height: 1.85; margin: 9px 0 0; }
.hs-unfinished .hs-evidence-label { color: #cbbfa2; }
.hs-related { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; padding-top: 45px; }
.hs-related-links a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 7px 16px; padding: 17px 0; border-bottom: 1px solid #344f3d; text-decoration: none; }
.hs-related-links a:first-child { padding-top: 0; }
.hs-related-links a > span:first-child { color: #9fb9a8; font: 10px/1.7 var(--mono); }
.hs-related-links strong { color: #cce2d4; font: 400 15px/1.8 var(--mono); grid-column: 1; }
.hs-related-links a > span:last-child { color: #a8cbb5; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.hs-related-links a:hover strong { color: #f0faf3; text-decoration: underline; text-underline-offset: 5px; }
.homelab-page footer { margin-top: 55px; }
@media (max-width: 1100px) {
  .hs-intro { gap: 40px; grid-template-columns: minmax(0, 1fr) 290px; }
  .hs-section-heading, .hs-decisions, .hs-recovery, .hs-related { gap: 40px; }
  .hs-architecture { padding: 24px; }
  .hs-guest { padding: 22px; }
  .hs-service summary > strong { font-size: 18px; }
  .hs-release-flow { gap: 22px; }
}
@media (max-width: 800px) {
  .hs-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 35px 0 20px; }
  .hs-stack { max-width: 100%; padding-left: 20px; }
  .hs-stack dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
  .hs-stack dd { font-size: 16px; }
  .hs-stack > p { margin-top: 5px; }
  .hs-section-heading, .hs-decisions, .hs-recovery, .hs-related { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .hs-section-note { max-width: 620px; }
  .hs-public-path { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .hs-public-node { padding: 17px; }
  .hs-architecture { padding: 22px; }
  .hs-guest { padding: 20px; }
  .hs-branches { gap: 22px; }
  .hs-branches::before { left: calc(25% - 5.5px); right: calc(25% - 5.5px); }
  .hs-service summary { padding: 17px; min-height: 218px; }
  .hs-service-detail { padding: 17px; }
  .hs-release-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .hs-recovery { margin-top: 50px; }
  .hs-related { gap: 28px; }
}
@media (max-width: 600px) {
  .hs-stack dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hs-stack dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .hs-stack dt { margin: 0; }
  .hs-diagram-heading { flex-direction: column; gap: 4px; }
  .hs-public-path { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  .hs-public-node { padding: 18px; }
  .hs-horizontal-link { position: relative; width: 100%; height: 53px; padding: 0; }
  .hs-horizontal-link > span { position: absolute; left: calc(50% + 13px); top: 17px; }
  .hs-horizontal-link i { width: 1px; height: 53px; margin: 0 auto; }
  .hs-horizontal-link i::after { top: auto; bottom: 1px; right: -3px; transform: rotate(135deg); }
  .hs-tunnel-link { gap: 13px; }
  .hs-tunnel-link p { font-size: 11px; }
  .hs-guest { padding: 18px; }
  .hs-guest-heading h3 { font-size: 19px; }
  .hs-connector { margin-top: 22px; text-align: left; padding: 16px; }
  .hs-connector::after, .hs-branches::before, .hs-branch::before { display: none; }
  .hs-branches { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 28px; }
  .hs-route-label { text-align: left; font-size: 11px; padding-top: 17px; border-top: 1px solid #47664f; }
  .hs-route-label::before { content: '↓ '; color: #b8d8c2; padding-right: 5px; }
  .hs-service summary { min-height: 185px; padding: 18px; }
  .hs-service summary > strong { font-size: 19px; }
  .hs-node-label { font-size: 11px; }
  .hs-service-description, .hs-dependencies p > span, .hs-connector > span:last-child, .hs-public-node p { font-size: 15px; }
  .hs-dependencies strong { font-size: 12px; }
  .hs-dependencies { margin-left: 8px; padding-left: 14px; }
  .hs-architecture figcaption, .hs-cross-route, .hs-foundation p { font-size: 14px; }
  .hs-foundation { align-items: start; }
}
@media (max-width: 480px) {
  .hs-breadcrumb { font-size: 11px; gap: 8px; padding-top: 18px; }
  .hs-intro { padding-top: 28px; }
  .homelab-page h1 { font-size: clamp(43px, 11vw, 53px); }
  .hs-lede { font-size: 17px; }
  .hs-intro-links { gap: 4px 20px; }
  .hs-kicker { font-size: 10px; margin-bottom: 18px; }
  .hs-stack { padding-left: 16px; }
  .hs-stack dl > div { grid-template-columns: 87px minmax(0, 1fr); gap: 10px; }
  .hs-stack dd { font-size: 16px; }
  .hs-stack-heading { font-size: 10px; }
  .hs-architecture { padding: 18px 12px; margin-top: 25px; }
  .hs-diagram-heading { padding-inline: 5px; }
  .hs-guest { padding: 15px 12px; }
  .hs-service summary { padding: 16px; }
  .hs-service-detail { padding: 16px; }
  .hs-platform { font-size: 10px; padding-inline: 8px; }
  .hs-connector strong { font-size: 16px; }
  .hs-cross-route { gap: 8px; }
  .hs-decision-list article { grid-template-columns: 16px minmax(0, 1fr); gap: 12px; }
  .hs-section { padding-top: 42px; }
  .hs-decisions { padding-top: 48px; }
  .hs-release-flow { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .hs-release-flow li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 7px 16px; }
  .hs-step-number { grid-row: 1 / 3; }
  .hs-release-flow h3 { margin: 0; }
  .hs-release-flow p { grid-column: 2; font-size: 16px; }
  .hs-related-links strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .hs-architecture, .hs-guest, .hs-connector, .hs-service, .hs-public-node, .hs-service summary:hover, .hs-service[open] summary { background: Canvas; }
  .hs-horizontal-link i, .hs-connector::after, .hs-branches::before, .hs-branch::before { background: CanvasText; }
  .hs-horizontal-link i::after { border-color: CanvasText; }
}