/* V2 Modern Theme */
:root {
  --g3-blue:#009cff;
  --g3-bg-dark:#0d1117; /* github dark */
  --g3-bg-darker:#010409;
  --g3-bg-light:#ffffff;
  --g3-border:#30363d;
  --g3-radius-sm:.375rem;
  --g3-radius-lg:1.25rem;
  --g3-gradient:linear-gradient(135deg,var(--g3-blue),#5fb9ff 60%,#9ad6ff);
  --g3-font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;
  --g3-ease: cubic-bezier(.4,.08,.2,1);
  --g3-panel-bg: rgba(255,255,255,0.03);
  --g3-panel-border: rgba(255,255,255,0.08);
  --g3-panel-hover: rgba(0,156,255,0.08);
  --g3-glow: 0 0 0 1px rgba(255,255,255,.04),0 4px 18px -4px rgba(0,0,0,.6);
  --g3-shadow-focus: 0 0 0 2px rgba(0,156,255,.55),0 0 0 6px rgba(0,156,255,.15);
}
body, .app-shell { font-family:var(--g3-font-stack); }
.theme-dark { background:var(--g3-bg-darker); color:#c9d1d9; }
.theme-light { background:var(--g3-bg-light); color:#24292f; }
/* Ensure underlying canvas is never white during theme/class swaps */
html, body { background:#000; }
html.theme-light, .app-shell.theme-light { background:#fff; }
/* When parallax background is active, make shell background transparent so parallax shows */
.with-parallax.theme-dark { background:rgba(0,0,0,0); }
.with-parallax.theme-light { background:rgba(255,255,255,0); }
/* Elevate content above parallax base layer */
.with-parallax .content-layer { position:relative; z-index:1; }
/* Skip link (appears on focus only) */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem; z-index:1100; border-radius:.5rem; background:#fff; color:#000; box-shadow:0 2px 8px rgba(0,0,0,.35); text-decoration:none; }

a { color:var(--g3-blue); }
a:hover { text-decoration:underline; }
/* Make expand buttons match link color */
.tool-expand{ color:var(--g3-blue) !important; }
.tool-expand:hover, .tool-expand:focus{ color:#5fb9ff; text-decoration:underline; }
/* Respect focus-visible outlines for keyboard users */
:focus-visible { outline: 2px solid var(--g3-blue); outline-offset:2px; }
a:focus-visible { text-decoration: underline; }
/* Screen-reader-only utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.top-nav { background:rgba(13,17,23,.85); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); color:#fff; position:sticky; top:0; z-index:1020; transition:background .4s var(--g3-ease), box-shadow .4s var(--g3-ease); }
.top-nav.scrolled { background:rgba(13,17,23,.75); box-shadow:0 2px 8px -2px rgba(0,0,0,.65); }
.top-nav .logo { height:40px; width:auto; }
.top-nav .nav-link { color:#c9d1d9; font-size:.95rem; }
.top-nav .nav-link.active, .top-nav .nav-link:hover { color:#fff; }
.mobile-drawer { background:var(--g3-bg-dark); overflow:hidden; transition:max-height .35s ease; border-top:1px solid var(--g3-border); }
.mobile-drawer[aria-hidden="true"] { visibility:hidden; }
.mobile-drawer[aria-hidden="false"] { visibility:visible; }

.hero { padding-bottom:4rem; position:relative; }
.hero-fade-layer { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(1,4,9,.6), rgba(1,4,9,0) 55%, rgba(1,4,9,.85) 92%); opacity:.9; mix-blend-mode:normal; transition:opacity .6s var(--g3-ease); }
.hero.compact .hero-fade-layer { opacity:.3; }
.hero-image { max-width:320px; }
.gradient-text { background:var(--g3-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-glow:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(0,156,255,.35),transparent 70%); filter:blur(40px); z-index:-1; }

.section-heading .eyebrow { letter-spacing:.08em; color:var(--g3-blue); }

.surface, .feature-tile { position:relative; background:var(--g3-panel-bg); border:1px solid var(--g3-panel-border); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); border-radius:1rem; box-shadow:var(--g3-glow); transition:transform .35s var(--g3-ease), border-color .35s var(--g3-ease), background .35s var(--g3-ease), box-shadow .35s var(--g3-ease); overflow:hidden; }
/* Subtle gradient sheen retained for feature tiles via pseudo element so base styling matches .surface */
.feature-tile:before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,0)); pointer-events:none; opacity:.9; transition:opacity .35s var(--g3-ease); }
.surface:hover, .feature-tile:hover { transform:translateY(-6px); border-color:var(--g3-blue); background:var(--g3-panel-hover); box-shadow:0 4px 28px -6px rgba(0,156,255,.35); }
.feature-tile:hover:before { opacity:1; }
.surface:focus-within, .feature-tile:focus-within { box-shadow:var(--g3-shadow-focus); outline:none; }
.surface:active, .feature-tile:active { transform:translateY(-2px); }
.icon-wrap { font-size:1.5rem; color:var(--g3-blue); }

.site-footer { background:var(--g3-bg-dark); border-top:1px solid var(--g3-border); }
.site-footer a { color:#8b949e; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.logo-footer { height:48px; }

.main-content { min-height:calc(100vh - 170px); animation:fadeIn .6s var(--g3-ease); }

/* Glass buttons */
.btn-primary { background:var(--g3-blue); border-color:var(--g3-blue); box-shadow:0 4px 14px -4px rgba(0,156,255,.5); }
.btn-primary:hover { background:#33b5ff; border-color:#33b5ff; }
.btn-outline-secondary { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-color:var(--g3-panel-border); background:rgba(255,255,255,.05); }
.btn-outline-secondary:hover { background:rgba(255,255,255,.12); border-color:var(--g3-blue); color:#fff; }

/* Utility spacing wrappers for new surfaces */
.section-block { padding:3rem 0; }

/* Subtle fade in */
@keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }

/* Scroll reveal for panels (temporarily neutralized to ensure visibility) */
.reveal { opacity:1; transform:none; transition:opacity .8s var(--g3-ease), transform .8s var(--g3-ease); }
/* Removed JS-dependent hiding due to initialization timing with Blazor prerender causing hidden content.
html.js .reveal { opacity:0; transform:translateY(24px); }
html.js .reveal.revealed { opacity:1; transform:translateY(0); }
*/
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1 !important; transform:none !important; transition:none !important;} }

/* Accessible overlay for repo README */
.readme-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:1050; padding:1rem; }
.readme-dialog{ background:var(--g3-panel-bg); border:1px solid var(--g3-panel-border); border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.4); width:min(900px,100%); max-height:85vh; padding:1rem 1rem 1.25rem; }
.readme-dialog .readme{ color:inherit; }
/* Tools overlay: make all text white only in light mode for better contrast over dark backdrop */
.app-shell.theme-light .readme-overlay,
.app-shell.theme-light .readme-overlay * {
  color: #fff;
}
.readme-dialog .readme a{ color:var(--g3-blue); }
.readme-dialog .readme pre{ background:rgba(0,0,0,.5); padding:.75rem; border-radius:.5rem; overflow:auto; }
.readme-dialog .readme code{ background:rgba(0,0,0,.35); padding:.2rem .35rem; border-radius:.25rem; }
@media (max-width: 576px){ .readme-dialog{ width:100%; height:90vh; max-height:90vh; margin:0; } }

/* Hero shrinking headline */
.hero h1 { transition:letter-spacing .5s var(--g3-ease), filter .6s var(--g3-ease), transform .6s var(--g3-ease); }
.hero.compact h1 { letter-spacing:.5px; filter:brightness(.85); transform:translateY(-4px) scale(.97); }

/* Smooth scrollbars (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--g3-bg-darker); }
::-webkit-scrollbar-thumb { background:#222; border-radius:20px; border:2px solid var(--g3-bg-darker); }
::-webkit-scrollbar-thumb:hover { background:#2e2e2e; }

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .hero { padding-top:2rem; padding-bottom:2rem; }
  .hero-image { max-width:240px; }
}

.g3-video-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.g3-video-wrapper {
    position: relative;
    width: 100%;    
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#primary-g3-logo {
    z-index: 1;
    width: 40%;
}

.g3-vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}