/* The graphite gallery uses HomeLab foundations with its own glass surfaces. */
.homelab-theme.dark {
  --home-canvas: #10141b;
  --home-raised: #202630;
  --home-ink: #f5f5f7;
  --home-secondary: #c1c8d5;
  --home-muted: #aeb8c9;
  --home-focus: #b5d5ff;
  --home-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Avenir Next", "Avenir", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --bio-edge: #d7e2ff2b;
  --bio-accent: #b5d5ff;
  --bio-ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
  scrollbar-color: #657087 #10141b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 24px; }
body { margin: 0; min-width: 280px; position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 2% 0%, #4f6e9a8c, transparent 58%), radial-gradient(ellipse at 100% 74%, #8a798054, transparent 57%), #111722; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/grain.png') repeat; opacity: .09; }
.ambience { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient-orbit { position: absolute; width: 145vw; height: 110vh; border: 1px solid #a3c1e426; border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { top: 11vh; left: -42vw; }
.orbit-two { width: 138vw; height: 105vh; top: -34vh; left: 18vw; border-color: #bacce51c; transform: rotate(35deg); }
::selection { background: var(--bio-accent); color: #10141b; }
a, button { -webkit-tap-highlight-color: #b5d5ff22; touch-action: manipulation; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--home-focus); outline-offset: 5px; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
.page { width: min(100%, 1184px); margin-inline: auto; padding: 22px 18px 0; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.profile { display: flex; align-items: center; min-width: 0; }
.avatar { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 15px; flex: none; box-shadow: inset 0 1px #ffffff24; }
.identity { min-width: 0; }
.hero-intro { margin-bottom: 25px; }
.hero-intro h1 { font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; font-kerning: normal; }
.hero-intro p { max-width: 42ch; margin-top: 12px; color: var(--home-secondary); font-size: 15px; line-height: 1.6; }
.hero-intro p + p { margin-top: 4px; }
.hero-intro strong { color: var(--home-ink); font-weight: 600; }
.hero-intro p a { color: var(--bio-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.hero-intro p a:hover { color: var(--home-ink); }
.utility-nav { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 6px; }
.utility-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--home-secondary); font-size: 13px; }
.utility-nav a { background: #e5edff07; }
.utility-nav svg { width: 16px; height: 16px; }
.card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--bio-edge); border-radius: 22px; background: linear-gradient(145deg, #ffffff08, #ffffff00 56%), #1b222dc9; box-shadow: inset 0 1px #ffffff0c, 0 12px 36px #05091018; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); transition: border-color 220ms var(--bio-ease), background-color 220ms var(--bio-ease); }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, #ffffff07, transparent 37%); opacity: .7; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: #202630; }
}
@media (prefers-reduced-transparency: reduce) {
  .card { background: #202630; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
a.card:not(.demo-card) { display: block; }
.card-body { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; gap: 16px; }
.card-copy { min-width: 0; }
.card h2, .card h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; overflow-wrap: anywhere; text-wrap: balance; }
.card p { color: var(--home-secondary); font-size: 14px; line-height: 1.5; }
.card-copy p { margin-top: 7px; }
.destination { display: grid; place-items: center; width: 32px; height: 44px; flex: none; color: var(--home-ink); }
.arrow { width: 23px; height: 23px; transition: transform 220ms var(--bio-ease); }
.featured { margin-bottom: 14px; background-color: #2a3342ce; }
.featured .card-body { min-height: 74px; }
.featured h2 { font-size: 24px; }

.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.demo-card { display: flex; flex-direction: column; padding: 20px 19px 10px; }
.demo-header h2 { font-size: 23px; }
.demo-header p { margin-top: 5px; }
.demo-visual { display: block; position: relative; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 13px; background: none; color: inherit; text-align: inherit; }
.demo-stage { min-width: 0; margin-top: 15px; }
.demo-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 4px; min-height: 44px; }
.project-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; line-height: 1.4; }
.project-link .arrow { width: 17px; height: 17px; }
.card .demo-status { min-height: 20px; margin-top: 8px; font-size: 13px; line-height: 1.5; }
.card .route-note, .card .demo-fallback { margin-top: 5px; font-size: 12px; line-height: 1.5; }
.card-image { overflow: hidden; aspect-ratio: 1200 / 630; background: #151b25; }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article h2, .article h3 { font-size: 21px; }
.article .card-body { align-items: flex-start; padding: 18px 19px; }
.article p { font-size: 13px; }
.article .destination { margin-top: -8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lights-card .demo-status, .tunlease-card .demo-status { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.clock-stage { padding: 2px 0; }
.clock-time { display: block; width: 100%; max-width: 360px; margin: 0 auto; padding: 4px 0; }
.clock-time svg { display: block; width: 100%; height: auto; max-height: 112px; }
.segment { fill: #d2e1ff08; transition: fill 800ms var(--bio-ease), opacity 800ms var(--bio-ease); }
.segment[data-lit=true], .clock-colon { fill: #faf3db; }
.orbit-stage > svg, .route-stage > svg, .trash-stage > svg { width: 100%; height: auto; overflow: visible; }
.orbit-stage > svg { max-height: 82px; }
.route-stage > svg { max-height: 98px; }
.trash-stage > svg { max-height: 70px; }
.service-node rect, .route-source, .route-endpoint rect { fill: #d1e0ff08; stroke: #a8b9d24d; stroke-width: 1.2; transition: fill 650ms var(--bio-ease), stroke 650ms var(--bio-ease); }
.service-node text, .route-label, .route-endpoint text { fill: #e8edf6; font-size: 18px; font-family: var(--home-font); }
.route-label { font-family: ui-monospace, monospace; }
.service-node[data-active=true] rect { fill: #9fbcff25; stroke: #b5ccff; }
.service-node[data-active=true] text { fill: #f7faff; }
.dependency, .route-path { stroke: #a1b4d340; fill: none; stroke-width: 1.5; transition: stroke 650ms var(--bio-ease), opacity 650ms var(--bio-ease); }
.dependency[data-active=true] { stroke: #b5ccff; stroke-width: 2; }
[data-destination=cloud] .route-path[data-route=cloud], [data-destination=local] .route-path[data-route=local] { stroke: #b5ccff; stroke-width: 2; }
[data-destination=cloud] [data-endpoint=cloud] rect, [data-destination=local] [data-endpoint=local] rect { fill: #9fbcff1c; stroke: #b5ccff; }
.request-packet { fill: #e8f1ff; opacity: 0; }
.route-road { stroke: #a8bdd14d; stroke-width: 1.4; }
.route-stop { fill: #29313e; stroke: #c3d1e0a0; stroke-width: 1.5; transition: fill 400ms, stroke 400ms; }
.route-stop[data-passed=true] { fill: #eed08a; stroke: #eed08a; }
.truck-position { transform-box: view-box; }
.truck-body { fill: #e8bf63; stroke: #f3d58f; stroke-width: 1; }
.truck-window { fill: #344259; }
.truck-detail { fill: none; stroke: #a78b4c; stroke-width: 2; }
.truck-wheel { fill: #202937; stroke: #a7b5c9; stroke-width: 2; }
.trash-card[data-step="2"] .demo-status, .trash-card[data-step="3"] .demo-status { color: #f7dba4; }
.lights-stage { position: relative; padding: 10px 8px 3px; }
.tv-aura { position: absolute; display: block; width: 100%; height: 150px; top: -2px; left: 0; border-radius: 50%; pointer-events: none; }
.tv-aura-ocean { background: radial-gradient(ellipse, #86b3ef66, #6584be30 44%, transparent 72%); opacity: 1; }
.tv-aura-sunset { background: radial-gradient(ellipse, #efb28e70, #ad6e7e30 44%, transparent 72%); opacity: 0; }

.tv-set { display: block; position: relative; width: 82%; max-width: 220px; margin: 0 auto; }
.tv-screen { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 5px solid #10151d; border-radius: 4px; overflow: hidden; background: #7f9fd3; box-shadow: 0 4px 18px #050b162e; }
.tv-landscape { display: block; width: 100%; height: 100%; }
.tv-sun { fill: #f1e7c6; }
.tv-horizon { fill: #527eb1; }
.tv-foreground { fill: #315680; }
.tv-stand { display: block; width: 40%; height: 9px; margin: 0 auto; border-bottom: 3px solid #10151d; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); background: #10151d; }
[data-scene=sunset] .tv-aura-ocean { opacity: 0; }
[data-scene=sunset] .tv-aura-sunset { opacity: 1; }
[data-scene=sunset] .tv-screen { background: #d29b9e; }
[data-scene=sunset] .tv-sun { fill: #ffddb0; }
[data-scene=sunset] .tv-horizon { fill: #a47e9e; }
[data-scene=sunset] .tv-foreground { fill: #745e87; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #d1def01c; margin-top: 26px; padding: 18px 0 30px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--home-secondary); }
.footer svg { width: 18px; height: 18px; }
.back-top { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--home-secondary); border-radius: 50%; }
.back-top .arrow { transform: rotate(-90deg); }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 10; min-height: 44px; padding: 12px 18px; border-radius: 10px; background: var(--bio-accent); color: #111722; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
[data-motion=paused] *, html[data-motion-paused=true] .demo-card * { animation-play-state: paused !important; }
html[data-motion-paused=true] .demo-card * { transition: none !important; }
@media (hover: hover) and (pointer: fine) {
  a.card:hover { border-color: #e1ecff5c; background-color: #2b3543d6; }
  a.card:hover .arrow, .project-link:hover .arrow { transform: translateX(3px); }
  .project-link:hover, .footer a:hover, .utility-nav a:hover { color: #fff; }
  .project-link:hover { text-decoration: underline; }
}
@media (min-width: 640px) {
  .page { padding: 32px 30px 0; }
  .site-header { margin-bottom: 29px; }
  .avatar { width: 56px; height: 56px; border-radius: 16px; }
  .hero-intro { margin-bottom: 30px; }
  .hero-intro h1 { font-size: 49px; }
  .hero-intro p { font-size: 16px; }
  .featured .card-body { padding-inline: 24px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .clock-card, .trash-card, .lights-card { grid-column: 1 / -1; }
  .demo-card { padding: 23px 24px 12px; }
  .clock-time svg { max-height: 125px; }
  .lights-stage { max-width: 360px; width: 100%; margin-inline: auto; }
  .article .card-image { margin: 6px 6px 0; border-radius: 16px; }
}
@media (min-width: 1024px) {
  .page { padding: 38px 40px 0; }
  .site-header { margin-bottom: 28px; }
  .avatar { width: 58px; height: 58px; }
  .hero-intro { margin-bottom: 32px; }
  .hero-intro h1 { font-size: 56px; }
  .hero-intro p { max-width: 76ch; margin-top: 13px; font-size: 17px; }
  .featured { margin-bottom: 20px; }
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .clock-card { grid-column: span 5; }
  .orbit-card { grid-column: span 7; }
  .tunlease-card { grid-column: span 5; }
  .lights-card { grid-column: span 7; }
  .trash-card { grid-column: span 6; }
  .article { grid-column: span 3; }
  .demo-card { padding: 24px 25px 12px; }
  .demo-header h2 { font-size: 25px; }
  .demo-visual { margin-top: 2px; }
  .demo-stage { margin-top: 16px; }
  .clock-time { max-width: 330px; }
  .clock-time svg { max-height: 128px; }
  .orbit-stage > svg { max-height: 90px; }
  .route-stage > svg { max-height: 108px; }
  .trash-stage > svg { max-height: 80px; }
  .lights-stage { max-width: 300px; margin-top: 12px; }
  .tv-set { max-width: 230px; }
  .demo-footer { padding-top: 6px; }
  .article h2, .article h3 { font-size: 20px; }
  .article .card-body { padding: 16px 18px; }
  .article .destination { display: none; }
  .footer { margin-top: 30px; padding-bottom: 35px; }
}
@media (max-width: 639px) {
  .clock-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 18px 8px; }
  .clock-card .demo-header, .clock-card .clock-stage { grid-column: 1 / -1; }
  .clock-card .clock-stage { margin-top: 8px; padding: 0; }
  .clock-card .clock-time { max-width: 180px; padding: 2px 0; }
  .clock-card .clock-time svg { max-height: 72px; }
  .clock-card .demo-footer { grid-column: 1 / -1; margin: 0; padding: 0; }

  a.card.article { display: grid; grid-template-columns: 106px minmax(0, 1fr); min-height: 124px; }
  .article .card-image { aspect-ratio: auto; min-height: 100%; }
  .article .card-image img { height: 100%; object-fit: cover; }
  .article .card-body { display: block; padding: 15px 14px; }
  .article h2, .article h3 { font-size: 18px; line-height: 1.3; }
  .article .card-copy p { font-size: 13px; line-height: 1.45; }
  .article .destination { display: none; }
}
@media (max-width: 359px) {
  .page { padding-inline: 14px; padding-top: 18px; }
  .site-header { margin-bottom: 22px; }
  .avatar { width: 48px; height: 48px; border-radius: 14px; }
  .hero-intro { margin-bottom: 23px; }
  .hero-intro h1 { font-size: 34px; }
  .hero-intro p { margin-top: 10px; }
  .demo-card { padding: 19px 17px 9px; }
  .demo-header h2, .card h2, .card h3 { font-size: 22px; }
  .featured h2 { font-size: 24px; }
  .card-body { padding-inline: 18px; }
  a.card.article { grid-template-columns: 92px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Product marks and colors come from the public Orbit and Tunlease sites. */
.demo-header h2:has(.brand-mark) { display: flex; align-items: center; gap: 10px; }
.brand-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; }
.orbit-card { background-color: #0d141edb; }
.orbit-stage > svg { max-height: 160px; }
.brand-orbit { fill: none; stroke: #8ec5ff55; stroke-width: 1; }
.orbit-cross { stroke: #8ec5ff2b; }
.orbit-core { fill: #142337; stroke: #8ec5ff44; }
.orbit-card .service-node rect { fill: #101c29; stroke: #8ec5ff45; }
.orbit-card .service-node text { font-size: 16px; }
.service-light { fill: #5c6a7a; }
.orbit-card .service-node[data-active=true] rect { fill: #18332c; stroke: #7ee787b3; }
.service-node[data-active=true] .service-light { fill: #7ee787; }
.orbit-card .dependency[data-active=true] { stroke: #7ee787; }
.tunlease-card .route-stage { padding: 8px; background: #f3f1e8; border-radius: 14px; }
.tunlease-card .route-stage > svg { max-height: 124px; }
.tunlease-card .route-source, .tunlease-card .route-endpoint rect { fill: #fffdf6; stroke: #a1b7b3; }
.tunlease-card .route-label, .tunlease-card .route-endpoint text { fill: #0b1715; font-size: 16px; }
.tunlease-card .route-path { stroke: #8caaa4; }
.tunlease-card[data-destination=cloud] [data-endpoint=cloud] rect,
.tunlease-card[data-destination=local] [data-endpoint=local] rect { fill: #d4f4ed; stroke: #176b87; }
.tunlease-card[data-destination=cloud] [data-route=cloud],
.tunlease-card[data-destination=local] [data-route=local] { stroke: #176b87; stroke-width: 2; }
.tunlease-card .request-packet { fill: #176b87; }
@media (max-width: 639px) {
  .orbit-stage > svg { max-height: 126px; }
  .tunlease-card .route-stage > svg { max-height: 112px; }
}

.blog-card .card-body { position: relative; min-height: 116px; padding-block: 14px; gap: 16px; }
.blog-copy { min-width: 0; margin-right: auto; }
.blog-description { margin-top: 8px; }
@media (max-width: 639px) { .blog-description { display: none; } .blog-card .card-body { gap: 12px; } }
.blog-object { flex: none; width: 112px; height: 84px; perspective: 500px; }
.notebook { position: relative; width: 90px; height: 72px; margin: 5px auto; transform: rotate(-9deg) rotateY(-18deg) rotateX(14deg); transform-style: preserve-3d; }
.book-cover { position: absolute; inset: -3px -5px -5px -5px; border: 1px solid #9eafc273; border-radius: 5px 10px 10px 5px; background: #586b83; box-shadow: 6px 9px 12px #080e1a4d; }
.book-pages { position: absolute; inset: 0; border-radius: 3px 7px 7px 3px; background: #c8cbd0; border-bottom: 4px double #8f969f; transform: translateZ(2px); }
.book-leaf { position: absolute; inset: 0 0 4px; display: block; padding: 18px 13px 0 20px; background: #efede6; border-radius: 2px 6px 6px 2px; transform-origin: 4px 50%; transform: translateZ(4px); backface-visibility: hidden; animation: book-turn 8s ease-in-out infinite paused; }
.book-leaf i { display: block; height: 2px; margin-bottom: 8px; background: #8c99a6; opacity: .6; }
.book-leaf i:last-child { width: 65%; }
.book-spine { position: absolute; inset: -2px auto -4px -5px; width: 9px; border-radius: 4px 0 0 4px; background: #394b62; border-right: 1px solid #879bb04d; transform: translateZ(5px); }
.book-ribbon { position: absolute; right: 16px; top: -1px; width: 8px; height: 24px; background: #93b8d8; clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); transform: translateZ(6px); }
.blog-card[data-motion=running] .book-leaf { animation-play-state: running; }
@keyframes book-turn { 0%, 72%, 100% { transform: translateZ(4px) rotateY(0); } 84% { transform: translateZ(4px) rotateY(-48deg); } }
@media (max-width: 359px) { .blog-object { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .book-leaf { animation: none; } }