@layer base, layout, components, responsive;
@layer base {
:root{color-scheme:dark;--bg:#0c1117;--surface:#121a22;--line:#293541;--text:#edf2f6;--muted:#a6b3bf;--accent:#a879e8;--accent-solid:#7138b5;--accent-hover:#8245c7;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.7 var(--sans)}a{color:inherit;text-underline-offset:5px}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.13;letter-spacing:-.035em}h1{font-size:clamp(3.3rem,7.8vw,7rem);font-weight:550;margin-bottom:1.5rem}h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:550}h3{font-size:1.45rem;font-weight:600}p{color:var(--muted)}::selection{background:var(--accent);color:var(--bg)}img,svg{max-width:100%}section{scroll-margin-top:2rem}
}
@layer layout {
.wrap{max-width:1240px;margin:auto;padding-inline:3rem}.header{border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:96px;gap:2rem}.brand{font-weight:650;text-decoration:none;letter-spacing:-.03em;display:flex;align-items:center;gap:.8rem}.brand-mark{font:700 .85rem var(--mono);border:1px solid #79658f;padding:.42rem;color:var(--accent)}nav{display:flex;align-items:center;gap:2rem}nav a{font-size:.9rem;color:var(--muted);text-decoration:none}nav a:hover{color:var(--text)}.hero{padding-block:6rem 5rem;display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:center}.hero-copy{max-width:700px}.hero p{max-width:570px;font-size:1.1rem}.section{padding-block:4.7rem;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:2.5rem}.section-heading h2{margin:0}.projects{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.about{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem}.footer{border-top:1px solid var(--line);padding-block:2rem}.footer-inner{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.875rem}.project-hero{padding-block:4rem}.project-hero h1{font-size:clamp(3rem,7vw,5.5rem)}.project-hero .lead{max-width:760px;font-size:1.25rem}.project-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4rem;padding-bottom:5rem}.project-nav{position:sticky;top:2rem;align-self:start;display:grid;gap:.8rem;font-size:.875rem}.project-nav a{color:var(--muted);text-decoration:none}.project-body section{border-top:1px solid var(--line);padding-block:2.8rem 1rem}.project-body h2{font-size:2rem}.project-body ul{padding-left:1.3rem;color:var(--muted)}
}
@layer components {
.eyebrow{font: .78rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem}.roles{font-size:.85rem!important;line-height:1.9;color:var(--accent);max-width:600px!important}.button{display:inline-flex;align-items:center;gap:2rem;padding:.8rem 1.2rem;border:1px solid var(--accent-solid);background:var(--accent-solid);color:#ffffff;font-size:.9rem;font-weight:650;text-decoration:none}.button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.actions{display:flex;gap:1.7rem;align-items:center;margin-top:2rem}.text-link{font-size:.9rem}.architecture{border:1px solid var(--line);background:var(--surface);padding:1.5rem}.arch-title{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.5rem;font:.75rem var(--mono);letter-spacing:.05em;color:var(--muted)}.node{border:1px solid #514260;padding:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}.node strong{font-weight:550}.node small{color:var(--muted);font:.75rem var(--mono)}.connection{height:27px;margin-left:1.3rem;border-left:1px solid #9275ad;position:relative}.connection:after{content:'';position:absolute;bottom:0;left:-3px;width:5px;height:5px;background:var(--accent)}.architecture figcaption{margin-top:1.2rem;font-size:.8rem;color:var(--muted)}figure{margin:0}.intro-line{display:flex;gap:2rem;align-items:center;padding-block:1.5rem;border-top:1px solid var(--line);color:var(--muted);font:.78rem var(--mono)}.intro-line span:first-child{color:var(--accent)}.project-card{padding:2rem;background:var(--surface);border:1px solid var(--line);position:relative}.card-top{display:flex;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;font:.75rem var(--mono);color:var(--muted)}.card-top span:last-child{color:var(--accent)}.project-card h3{font-size:2rem;margin-bottom:.5rem}.project-card p{max-width:470px}.project-card .category{color:var(--accent);font-size:.875rem;margin-bottom:1rem}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}.tag{padding:.22rem .65rem;border:1px solid var(--line);font:.75rem/1.7 var(--mono);color:#b9c7d1}.card-link{display:inline-flex;gap:2rem;align-items:center;font-size:.875rem;text-decoration:none;border-bottom:1px solid #a286bd;padding-bottom:.3rem;margin-top:1rem}.card-link:hover{color:var(--accent)}.small-card{background:transparent}.small-card .card-top{margin-bottom:1.5rem}.small-card h3{font-size:1.45rem}.skill-group{border-top:2px solid #6c5485;padding-top:1.3rem}.skill-group h3{font-size:1.1rem;letter-spacing:-.02em}.skill-group ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:.9rem}.skill-group li{margin-block:.45rem}.about p{font-size:1.05rem}.future-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.future-link{border:1px solid var(--line);padding:.7rem 1rem;font-size:.875rem;color:var(--muted);text-decoration:none}.future-link:hover{border-color:var(--accent);color:var(--text)}.future-link span{font:.7rem var(--mono);margin-left:1rem;color:var(--accent)}.skip{position:absolute;left:1rem;top:-100px;background:var(--accent);color:var(--bg);padding:1rem;z-index:10}.skip:focus{top:1rem}.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:.45rem .8rem}.back{color:var(--muted);font-size:.875rem;display:inline-block;margin-bottom:3rem}.facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fact{padding:1.3rem;border:1px solid var(--line)}.fact h3{font-size:1.15rem}.fact p{margin-bottom:0}.flow{list-style:none;padding:0!important;display:grid;gap:0}.flow li{padding:.8rem 1rem;border:1px solid var(--line);color:var(--text)}.flow li+li{margin-top:1rem;position:relative}.flow li+li:before{content:'';position:absolute;height:1rem;top:-1rem;left:1.3rem;border-left:1px solid var(--accent)}.note{border-left:2px solid var(--accent);padding:.4rem 0 .4rem 1.2rem;font-size:.9rem}.timeline{list-style:none;padding:0!important;counter-reset:milestone}.timeline>li{border-left:1px solid #614b76;padding:0 0 2rem 2rem;position:relative}.timeline>li:before{content:'';position:absolute;width:7px;height:7px;left:-4px;top:7px;background:var(--accent)}.timeline h3{font-size:1.15rem;margin-bottom:.7rem}.timeline .period{font:.75rem var(--mono);color:var(--accent);margin-bottom:.7rem}.timeline p{margin-bottom:.5rem}.timeline details{font-size:.9rem;color:var(--muted)}summary{cursor:pointer;color:var(--accent)}.error{min-height:65vh;padding-block:6rem}.error h1{font-size:5rem}.muted{color:var(--muted)}
}
@layer responsive {
@media(max-width:1000px){.wrap{padding-inline:2rem}.hero{gap:2rem}.hero h1{font-size:5rem}.skills{grid-template-columns:1fr 1fr}.project-layout{gap:2rem;grid-template-columns:160px minmax(0,1fr)}.node{flex-direction:column;align-items:start;gap:.25rem}}
@media(max-width:760px){.wrap{padding-inline:1.4rem}.header-inner{min-height:80px;flex-wrap:wrap;gap:0;padding-block:1rem}.nav-toggle[aria-expanded]{display:block}nav{display:flex;width:100%;gap:1rem;flex-wrap:wrap;padding-top:1rem}body:has(.nav-toggle[aria-expanded]) #navigation{display:none}body:has(.nav-toggle[aria-expanded]) #navigation.is-open{display:flex}.hero{grid-template-columns:1fr;padding-block:3.5rem;gap:3rem}.hero h1{font-size:clamp(3.5rem,13vw,5rem)}.hero .architecture{max-width:none}.node{flex-direction:row;align-items:center}.projects,.about,.facts{grid-template-columns:1fr}.section{padding-block:3rem}.section-heading{align-items:start;flex-direction:column;gap:.6rem}.section-heading .eyebrow{margin:0}.project-card{padding:1.5rem}.card-top{margin-bottom:1.7rem}.about{gap:1rem}.project-layout{display:block}.project-nav{position:static;display:flex;flex-wrap:nowrap;overflow:auto;gap:1.2rem;padding-bottom:1.5rem}.project-nav a{white-space:nowrap}.project-hero{padding-block:2.5rem}.project-hero h1{overflow-wrap:anywhere}.footer-inner{flex-direction:column}.intro-line{flex-wrap:wrap;gap:.7rem 1.5rem}.actions{flex-wrap:wrap}.skills{gap:1.5rem}.skill-group ul{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
}
@layer components {
  .observability-card { grid-column: 1 / -1; }
  .observability-card p { max-width: 760px; }
  .dashboard-placeholder { padding: clamp(1.5rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); }
  .dashboard-placeholder h3 { font-size: clamp(1.5rem, 4vw, 2rem); }
  .dashboard-placeholder p:last-child { margin-bottom: 0; }
  .dashboard-embed { display: block; width: 100%; height: 760px; height: clamp(480px, 80vh, 900px); border: 1px solid var(--line); background: var(--surface); }
}
@layer components {
  .telemetry-capture { margin-block: 2rem; }
  .capture-frame { display: block; border: 1px solid var(--line); }
  .capture-frame img { display: block; width: 100%; height: auto; }
  .telemetry-capture figcaption { margin-top: .8rem; color: var(--muted); font-size: .9rem; }
  .telemetry-table-wrap { max-width: 100%; }
  .telemetry-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
  .telemetry-table caption { text-align: left; padding-bottom: 1rem; font-weight: 600; }
  .telemetry-table th, .telemetry-table td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .telemetry-table thead { color: var(--accent); }
  .telemetry-table tbody th { font-weight: 400; color: var(--muted); }
  .telemetry-table .metric-group th { padding-top: 1.2rem; color: var(--accent); font: 600 .8rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--surface); }
  .project-observability .project-hero .tag { border-color: #6c5485; background: rgba(113, 56, 181, .08); }
  .project-frostmourne .project-hero .tag { border-color: #5f4c73; background: rgba(113, 56, 181, .06); }
  .project-frostmourne #hardware .hardware-summary { max-width: 820px; margin-top: 1.5rem; }
  .project-citadel .project-hero .tag { border-color: #5f4c73; background: rgba(113, 56, 181, .06); }
  .project-citadel #current-state .fact { border-color: #514260; background: linear-gradient(135deg, rgba(113, 56, 181, .07), transparent 62%); }
  .project-citadel #current-state .fact h3 { color: var(--accent); }
  .project-citadel #architecture .flow li:nth-child(2), .project-citadel #architecture .flow li:nth-child(5) { border-color: #6c5485; background: rgba(113, 56, 181, .07); }
  .project-citadel #technologies li::marker { color: var(--accent); }
  @media (min-width: 1001px) { .project-windows-enterprise-lab #environment .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 761px) and (max-width: 1000px) { .project-windows-enterprise-lab #environment .facts { grid-template-columns: 1fr; } }
}
@layer components {
  /* Both dashboard grids are 1555 x 676 px. Crop only the uneven outer
     screenshot margins in the page; preserve the original evidence images. */
  .capture-frame { padding: .5rem; background: #111217; }
  .capture-crop { display: block; position: relative; overflow: hidden; aspect-ratio: 1555 / 676; }
  .capture-crop img { position: absolute; max-width: none; height: auto; top: -0.73964497%; }
  .capture-crop-active img { width: 100.57877814%; left: -0.25723473%; }
  .capture-crop-idle img { width: 100.45016077%; left: -0.32154341%; }
}