/* Lassiter.eu — no downloaded fonts, no runtime styling dependency.
   Existing egg classes/IDs remain owned by their original markup and handlers. */
:root {
  color-scheme: dark;
  --ink: #f2f6fb;
  --muted: #b4c5d7;
  --base: #001933;
  --panel: #061f39;
  --panel-raised: #0b2945;
  --rule: #35516b;
  --acid: #c7ff4d;
  --link: #72e3ff;
  --on-acid: #102000;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
* { box-sizing: border-box; }
body.portfolio.portfolio, body.resume, body.dashboard, body.auth-page, body.gate-page, body.repo-embed {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
html:not(.dark) body.portfolio, html:not(.dark) body.resume {
  color-scheme: light;
  --ink: #102c45;
  --muted: #3b566d;
  --base: #eff5fa;
  --panel: #ffffff;
  --panel-raised: #e2edf5;
  --rule: #8299ac;
  --acid: #355900;
  --link: #005d7a;
  --on-acid: #ffffff;
}
a { color: var(--link); text-underline-offset: .25em; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { cursor: pointer; }
button, input, select { font: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--acid) !important;
  outline-offset: 5px;
}
::selection { background: #c7ff4d; color: #001933; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 2147483647; transform: translateY(-200%); padding: .75rem 1rem; background: var(--acid); color: var(--on-acid); font-weight: 800; }
.skip-link:focus { transform: none; }
.eyebrow { font: 700 .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--acid); margin-bottom: 1.3rem; }
.accent { color: var(--acid); }
.portfolio #pageWrap { position: relative; }
.portfolio .container { width: min(1180px, 100%); max-width: 1180px; }
.portfolio .vaporwave-bg { background: radial-gradient(ellipse at 85% 10%, #176090, transparent 60%); animation: none; opacity: .16; filter: none; }
.portfolio .vaporwave-glow { background: none; opacity: 0; }
.portfolio::before { display: none; }
body.portfolio .glass { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; border-radius: 4px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.portfolio nav { background: var(--base); border-bottom: 1px solid var(--rule); padding-block: 1rem; }
.portfolio nav > div { gap: 1rem; }
.portfolio #jlLogo { display: inline-grid; place-items: center; width: 42px; min-width: 42px; height: 42px; font: 900 1.1rem var(--mono); color: var(--base); background: var(--acid); border-radius: 2px; }
.nav-signature { margin-right: auto; font: 800 .8rem var(--mono); letter-spacing: .06em; white-space: nowrap; }
.portfolio .nav-links { gap: 1.4rem; }
.portfolio .nav-links a { color: var(--ink); font: 650 .8rem var(--mono); text-decoration: none; padding-block: .5rem; }
.portfolio .nav-links a:hover { color: var(--acid); text-decoration: underline; }
.portfolio #darkModeToggle { width: 40px; height: 40px; min-width: 40px; background: var(--panel-raised); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; }
.portfolio #themeIcon { color: var(--acid); }
.portfolio .hero { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: 4rem; text-align: left; }
.hero-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 2.5rem; }
.hero-meta .eyebrow { margin: 0; }
.signal-label { color: var(--muted); font: .72rem/1.6 var(--mono); }
.signal-label span { color: var(--acid); margin-right: .5rem; }
.portfolio .hero h1 { font-size: clamp(3.4rem, 8.7vw, 7rem); line-height: .98; letter-spacing: -.065em; margin-bottom: 2rem; }
.portfolio .hero h1 span { color: var(--acid); background: none; }
.portfolio .hero > p { margin-left: 0; max-width: 780px; color: var(--muted); }
.portfolio .hero > p:first-of-type { color: var(--ink); font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 600; line-height: 1.45; }
.portfolio .hero > .grid { margin-left: 0; max-width: 100%; }
.portfolio .hero > .grid > .glass { border-left: 3px solid var(--acid); padding: 1.25rem; }
.portfolio .hero > .flex { justify-content: flex-start; }
.portfolio [class*="text-slate-600"], .portfolio [class*="text-gray-400"], .portfolio [class*="text-gray-500"], .portfolio [class*="text-white/"] { color: var(--muted); }
.portfolio [class*="text-purple-"], .portfolio [class*="text-emerald-"], .portfolio [class*="text-blue-"], .portfolio [class*="text-pink-"] { color: var(--link); }
.portfolio h2, .portfolio h3 { color: var(--ink); letter-spacing: -.035em; line-height: 1.2; }
.portfolio h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); }
.portfolio .hero a, .portfolio .ops-section a, .portfolio #contact button, .portfolio #treeFiddyOverlay button {
  border: 1px solid var(--rule); background: var(--panel-raised); color: var(--ink); border-radius: 2px; box-shadow: none; font-weight: 750; text-decoration: none; min-height: 44px;
}
.portfolio .hero a:first-child, .portfolio .ops-section a:first-child { background: var(--acid); color: var(--on-acid); border-color: var(--acid); }
.portfolio .hero a:hover, .portfolio .ops-section a:hover, .portfolio #contact button:hover { outline: 1px solid var(--acid); outline-offset: 3px; transform: none; }
.portfolio .ops-section { padding-bottom: 4rem; margin-top: 0; }
.portfolio .ops-section > .glass { border-top: 3px solid var(--acid); padding: clamp(1.25rem, 3vw, 2.2rem); }
.portfolio .ops-section > .glass > .absolute { display: none; }
.portfolio .ops-section .grid > .glass { border: 1px solid var(--rule); background: var(--base); }
.portfolio .ops-section [class*="bg-white/"], .portfolio #contact [class*="bg-white/"] { background: var(--panel-raised); border-color: var(--rule); border-radius: 2px; }
.portfolio #statusBadge, .portfolio #statusModeChip { color: var(--ink); border-color: var(--rule); }
.portfolio #statusBar { background: var(--acid); }
.portfolio .work-section { padding-block: 3rem 4rem; border-top: 1px solid var(--rule); }
.portfolio .work-section > .flex { align-items: flex-start; flex-wrap: wrap; }
.portfolio .work-section h2 { white-space: normal; }
.portfolio .work-section .h-\[2px\] { display: none; }
.portfolio #ghFilterBar { row-gap: .6rem; }
.portfolio #ghFilterBar > a { color: var(--link) !important; }
.portfolio .gh-filter-btn { min-height: 36px; border-radius: 2px; border: 1px solid var(--rule); background: var(--panel); color: var(--muted); font-family: var(--mono); }
.portfolio .gh-filter-btn:hover, .portfolio .gh-filter-btn.active { color: var(--on-acid); background: var(--acid); border-color: var(--acid); }
.portfolio .gh-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 1.4rem; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.portfolio .gh-card:hover { border-color: var(--acid); transform: translateY(-2px); box-shadow: 4px 4px 0 var(--rule); }
.portfolio .gh-card-title { color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; }
.portfolio .gh-card:hover .gh-card-title { color: var(--acid); }
.portfolio .gh-card-desc { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.portfolio .gh-card-meta { border-color: var(--rule); }
.portfolio .gh-stars, .portfolio .gh-stars span { color: var(--muted); }
.portfolio .gh-badge { color: var(--link); background: var(--panel-raised); border: 1px solid var(--rule); border-radius: 2px; }
.portfolio .gh-ext-icon { opacity: 1; color: var(--link); }
.portfolio .gh-section-label { color: var(--muted); font-family: var(--mono); }
.portfolio .gh-section-label::after { background: var(--rule); }
.portfolio .gh-section-label i { color: var(--link); }
.portfolio .gh-skeleton { height: 150px; border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); animation: none; }
.no-js-note { border: 1px solid var(--rule); padding: 1rem; color: var(--muted); }
.portfolio #contact { padding-top: 1rem; padding-bottom: 5rem; }
.portfolio #contact > .glass { padding: clamp(1.5rem, 4vw, 3.5rem); }
.portfolio #contact .bg-gradient-to-tr { background: var(--acid); border-radius: 3px; transform: rotate(-6deg); }
.portfolio #contact .fa-shield-alt { color: var(--on-acid); }
.portfolio #emailLink { color: var(--link); text-decoration: underline; }
.portfolio #siteFooter { color: var(--muted); border-top: 1px solid var(--rule); font-size: .82rem; padding-bottom: 6rem; }
#currentYear[role="button"] { border-bottom: 1px dashed currentColor; border-radius: 2px; padding: .15rem .3rem; }
.portfolio #konamiDock { width: min(280px, calc(100vw - 24px)); }
.portfolio .konami-chip, .portfolio #konamiPanel { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; backdrop-filter: none; box-shadow: none; }
.portfolio .konami-chip > span, .portfolio .konami-hint { color: var(--muted); }
.portfolio .konami-btn { min-height: 44px; padding: .55rem; border-radius: 2px; color: var(--ink); background: var(--panel-raised); border-color: var(--rule); }
.portfolio .konami-btn:active { color: var(--on-acid); background: var(--acid); }
.portfolio #konamiToggleBtn { color: var(--ink); }
/* The archived gift's selectors are intentionally retained. */
#easterEgg { background: var(--acid); color: var(--on-acid); }
#easterEgg.dock-above-footer { position: absolute; }
#meme67Overlay, #treeFiddyOverlay { color: #f2f6fb; --ink: #f2f6fb; --muted: #b4c5d7; --base: #001933; --panel: #061f39; --panel-raised: #0b2945; --rule: #35516b; --acid: #c7ff4d; --on-acid: #102000; --link: #72e3ff; }
#meme67Overlay.hidden, #treeFiddyOverlay.hidden, #konamiPanel.hidden { display: none !important; }
#meme67Overlay .meme67-stage { padding: 1rem; }
#meme67Overlay .meme67-stage > div > div { gap: clamp(.5rem, 3vw, 3rem); }
#meme67Overlay .meme67-hand { font-size: clamp(2rem, 10vw, 7rem); }
#meme67Overlay .meme67-number { font-size: clamp(4rem, 22vw, 11rem); }
#meme67Overlay .meme67-stage .mx-4 { margin-inline: .25rem; }
.overlay-dismiss { position: absolute; right: 1rem; top: 1rem; z-index: 3; padding: .7rem 1rem; border: 1px solid #b4c5d7; background: #061f39; color: #f2f6fb; font: .8rem var(--mono); }
#treeFiddyOverlay { overflow-y: auto; background: #000c; }
#treeFiddyOverlay > .absolute:first-child { position: fixed; }
#treeFiddyOverlay > .absolute:nth-child(2) { position: relative; left: auto; top: auto; transform: none; margin: max(1.5rem, 8vh) auto; }
#treeFiddyOverlay img { max-height: 440px; }
#treeFiddyOverlay h3 span { background: none; color: var(--acid); }
#treeFiddyOverlay .glass { border-color: var(--rule); }
/* Shared visual language for the standalone pages; no metric/auth behavior changes. */
.resume .page { width: min(1000px, calc(100% - 32px)); }
.resume .glass, .dashboard .card, .dashboard .top, .auth-page .card, .gate-page .card {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); backdrop-filter: none; box-shadow: none;
}
.resume .glass { margin-bottom: 1.1rem; }
.resume header.glass, .auth-page .card, .gate-page .card { border-top: 3px solid var(--acid); }
.resume .name { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.045em; }
.resume .section h2 { color: var(--acid); font-family: var(--mono); opacity: 1; }
.resume .headline, .resume .muted, .resume .small, .resume .skill-list, .resume .job-meta, .resume .job-loc { color: var(--muted); }
.resume .pill { background: var(--panel-raised); border-color: var(--rule); color: var(--muted); border-radius: 2px; }
.resume .pill b { color: var(--ink); }
.resume .accent-line { background: var(--acid); opacity: 1; }
.resume .chip { color: var(--acid); background: var(--panel-raised); border-color: var(--rule); border-radius: 2px; font-family: var(--mono); }
.resume .vaporwave-bg { animation: none; background: none; }
.resume .rule { border-color: var(--rule); }
.resume .resume-nav { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font: .8rem/1.5 var(--mono); }
.dashboard .wrap { max-width: 1240px; }
.dashboard .badge { background: var(--acid); color: var(--on-acid); border-radius: 2px; box-shadow: none; font-family: var(--mono); }
.dashboard .ringCard { border-radius: 3px; background: var(--base); border-color: var(--rule); }
.dashboard .k, .dashboard .small, .dashboard .sub, .auth-page .k, .auth-page .sub, .gate-page .sub, .gate-page .muted { opacity: 1; color: var(--muted); }
.dashboard .btn, .dashboard .pill, .auth-page .btn, .gate-page button { color: var(--ink); background: var(--panel-raised); border: 1px solid var(--rule); border-radius: 2px; min-height: 40px; }
.auth-page .btn.primary { color: var(--on-acid); background: var(--acid); border-color: var(--acid); }
.auth-page input { border-color: var(--rule); border-radius: 2px; color: var(--ink); background: var(--base); }
.auth-page .card { padding: 2rem; }
.auth-page .title, .gate-page .title { letter-spacing: -.025em; }
.gate-page .bar > div, .dashboard .meter > div { background: var(--acid); }
.gate-page .pow-credit { border-radius: 3px; backdrop-filter: none; border-color: var(--rule); box-shadow: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portfolio #jlLogo:hover { text-shadow: -2px 0 #72e3ff, 2px 0 #001933; }
  .portfolio .hero h1 span:hover { text-shadow: 2px 0 var(--link); }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 9rem; }
  .portfolio nav { position: relative; padding-inline: 1.1rem; }
  .portfolio nav > div { flex-wrap: wrap; }
  .portfolio .nav-links { order: 3; width: 100%; gap: .75rem; justify-content: space-between; flex-wrap: wrap; }
  .portfolio .nav-links a { font-size: .75rem; }
  .portfolio .hero { padding-top: 2.5rem; }
  .hero-meta { margin-bottom: 2rem; }
  .portfolio .hero h1 span { display: block; }
  .portfolio .hero > .grid { margin-top: 2rem; }
  .portfolio .hero > .flex a { padding-inline: 1.2rem; flex: 1 1 160px; text-align: center; }
  .portfolio .work-section > .flex { flex-direction: column; }
  .portfolio #siteFooter { padding-bottom: 7rem; }
  .portfolio .ops-section .grid, .portfolio #contact .grid { min-width: 0; }
  .resume .job-head { grid-template-columns: 1fr; }
  .resume .job-loc { text-align: left; }
  .dashboard table { display: block; overflow-x: auto; }
}
@media (max-width: 380px) {
  .portfolio .container { padding-inline: 1rem; }
  .portfolio .nav-links { gap: .6rem; }
  .portfolio .hero h1 { font-size: 3.25rem; }
  #meme67Overlay .meme67-stage > div > div { gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.gh-server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.25rem; }
.gh-fallback-frame { display: block; width: 100%; height: 650px; border: 1px solid var(--rule); }
.repo-embed { padding: 1rem; }
.repo-embed .small { color: var(--muted); font: .75rem/1.6 var(--mono); }
.gh-server-grid .gh-card { display: block; min-width: 0; padding: 1.25rem; text-decoration: none; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; }
.gh-server-grid .gh-card:hover { border-color: var(--acid); }
.gh-server-grid .gh-card-title { margin: 0 0 .75rem; color: var(--ink); font: 750 1rem/1.5 var(--mono); overflow-wrap: anywhere; }
.gh-server-grid .gh-card-desc { color: var(--muted); font-size: .9rem; line-height: 1.7; overflow-wrap: anywhere; }
.gh-server-grid .gh-card-meta { color: var(--muted); font: .65rem/1.7 var(--mono); overflow-wrap: anywhere; }
.cache-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .75rem; }
.cache-stats > div { padding: .75rem; border: 1px solid var(--rule); min-width: 0; }
.cache-stats dt { color: var(--muted); font-size: .75rem; }
.cache-stats dd { margin: .4rem 0 0; font: .8rem/1.6 var(--mono); overflow-wrap: anywhere; }
/* Capability-aware status dashboard. Sources are visible, not tooltip-only. */
.snapshot-source { display: block; margin-top: .5rem; color: var(--muted); font: .65rem/1.6 var(--mono); overflow-wrap: anywhere; }
.dash-wrap { margin: 0 auto; padding: 1.25rem; }
.dash-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
.dash-top .brand { display: flex; align-items: center; gap: 1rem; }
.dash-top .badge { display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.dash-top h1 { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.dash-top .eyebrow, .dash-top .small { margin: .25rem 0; }
.dash-top .toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.dashboard .btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem .8rem; text-decoration: none; cursor: pointer; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.dash-grid > .card { min-width: 0; padding: 1.3rem; }
.dash-wide { grid-column: 1 / -1; }
.dash-grid h2 { margin: 0 0 1rem; font-size: 1rem; font-family: var(--mono); }
.dash-grid h3 { margin: 0; font-size: .9rem; }
.metric-value { margin: 1rem 0; font: 750 2.5rem/1.3 var(--mono); overflow-wrap: anywhere; }
.metric-value small { font-size: .8rem; color: var(--muted); }
.metric-small { font-size: 1.3rem; }
.widget-meta { display: flex; flex-direction: column; gap: .2rem; margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: .75rem; color: var(--muted); font: .65rem/1.7 var(--mono); overflow-wrap: anywhere; }
.unavailable { color: #ffd38a; font-size: .9rem; overflow-wrap: anywhere; }
.state-badge { display: inline-block; font: 700 .7rem/1.6 var(--mono); padding: .2rem .6rem; border: 1px solid var(--rule); color: var(--acid); }
.metrics-list { font-family: var(--mono); }
.metrics-list > div { display: flex; justify-content: space-between; gap: .5rem; }
.metrics-list dd { margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-grid article { min-width: 0; padding: 1rem; background: var(--base); border: 1px solid var(--rule); }
.demo-banner { border-left: 3px solid var(--acid) !important; }
.dashboard table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dashboard td, .dashboard th { padding: .6rem; text-align: left; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.dashboard caption { text-align: left; color: var(--muted); font-size: .75rem; padding-bottom: .5rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.dashboard pre { max-height: 500px; overflow: auto; padding: 1rem; background: var(--base); border: 1px solid var(--rule); font: .75rem/1.7 var(--mono); }
.action-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.action-form select { color: var(--ink); background: var(--base); border: 1px solid var(--rule); padding: .6rem; max-width: 100%; }
.dash-footer { margin-top: 2rem; color: var(--muted); font-size: .8rem; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dash-grid { grid-template-columns: 1fr; } .dash-wrap { padding: .75rem; } .dash-top .brand { align-items: flex-start; } .dash-grid h2 .state-badge { display: table; margin-top: .5rem; } }
@media print {
  body.resume { --ink: #111; --muted: #333; --panel: #fff; --panel-raised: #fff; --rule: #bbb; --acid: #111; --link: #111; background: #fff; color: #111; }
  .resume .resume-nav, .skip-link { display: none; }
  .resume .glass { break-inside: auto; box-shadow: none; }
  .resume .section h2 { color: #111; }
}