/* v24: one uninterrupted scene and truly translucent content surfaces.
   All scene paint belongs to the FIXED main viewport, not to individual chapters.
   This avoids the abrupt vertical color seam as chapters change. */
:root,:root[data-theme="dark"] {
  --scene-v24: radial-gradient(ellipse 80% 90% at 68% 3%, rgba(36,55,78,.77) 0%, rgba(22,33,49,.3) 52%, transparent 83%),linear-gradient(155deg,#0d1420 0%,#101927 52%,#0a0e15 100%);
  --glass-v24:rgba(37,59,77,.28);
  --glass-v24-strong:rgba(42,68,87,.35);
  --glass-v24-faint:rgba(43,68,85,.19);
  --glass-v24-border:rgba(181,216,225,.19);
  --glass-v24-shadow:0 16px 42px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.045);
}
:root[data-theme="light"] {
  --scene-v24: radial-gradient(ellipse 80% 90% at 68% 3%,rgba(191,223,231,.64) 0%,rgba(227,242,245,.2) 60%,transparent 83%),linear-gradient(155deg,#f3f8fa,#e9f1f5 55%,#e3edf3);
  --glass-v24:rgba(255,255,255,.32);
  --glass-v24-strong:rgba(255,255,255,.47);
  --glass-v24-faint:rgba(255,255,255,.23);
  --glass-v24-border:rgba(65,104,119,.2);
  --glass-v24-shadow:0 14px 42px rgba(36,76,91,.075),inset 0 1px rgba(255,255,255,.42);
}
/* The same fixed background persists as chapters fade. */
html,body {background:#0d1420!important;}
:root[data-theme="light"] html,:root[data-theme="light"] body{background:#eef5f7!important;}
main#main {background:var(--scene-v24) !important;background-color:transparent!important;}
main#main > section[id],
main#main > section[id].deck-active,
main#main > section[id].deck-past,
main#main > section#experience.journey-section,
main#main > section#experience.journey-section.deck-active,
#experience .journey-sticky,
#experience .journey-viewport,
#skills .talent-forest,
#home.hero-v14 {
 background:transparent!important;background-color:transparent!important;
}
/* Old per-chapter pseudo backgrounds were creating visible blocks and cuts. */
#home.hero-v14::before, #experience .journey-ambient {background:none!important;opacity:0!important;}
/* Keep the header compatible with the scene instead of opaque flat blue. */
.site-header {background:rgba(13,23,33,.54)!important;backdrop-filter:blur(18px) saturate(115%)!important;-webkit-backdrop-filter:blur(18px) saturate(115%)!important;}
:root[data-theme="light"] .site-header{background:rgba(246,250,250,.58)!important;}
/* Every raised content surface uses identical flat translucent fill: no gradient cutoffs. */
#home .v22-portrait,
#about .section-body,
#experience .journey-card,
#skills .talent-tree,
#skills .talent-inspector,
#credentials .v21-gallery,
#credentials .education-compact-item,
#credentials .education-compact,
#contact .contact-links .btn-secondary {
 background:var(--glass-v24)!important;
 background-image:none!important;
 background-color:var(--glass-v24)!important;
 border:1px solid var(--glass-v24-border)!important;
 box-shadow:var(--glass-v24-shadow)!important;
 -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
 backdrop-filter:blur(16px) saturate(125%)!important;
 border-radius:12px;
}
/* Remove nested opaque slabs that would still cover the glass in Experience. */
#experience .journey-card-main,
#experience .journey-card-top,
#experience .journey-tags,
#skills .talent-tree-head,
#credentials .v21-gallery-stage,
#credentials .v21-gallery-canvas,
#credentials .v21-gallery-top,
#credentials .v21-gallery-bottom {
 background:transparent!important;background-image:none!important;
 box-shadow:none!important;
}
#skills .talent-node,#skills .talent-node-root,#skills .talent-category,
#credentials .v21-gallery-nav,#credentials .v21-gallery-dots button {
 background:var(--glass-v24-strong)!important;
 background-image:none!important;
 border-color:var(--glass-v24-border)!important;
 -webkit-backdrop-filter:blur(7px)!important;backdrop-filter:blur(7px)!important;
}
#skills .talent-node:hover,#skills .talent-node.is-selected{border-color:var(--accent)!important;background:var(--glass-v24-strong)!important;}
#experience .journey-tags span,#about .inline-notes span,
#credentials .education-compact-item {
 background:var(--glass-v24-faint)!important;
 border-color:var(--glass-v24-border)!important;
}
/* Small but real spacing between letters and the panel edges. */
main#main #about .section-grid > .section-body {padding:12px 14px!important;box-sizing:border-box!important;}
#skills .talent-tree{padding:clamp(12px,1.45vw,20px)!important;}
#skills .talent-inspector{padding:10px 12px!important;}
#credentials .v21-gallery{padding:clamp(12px,1.2vw,18px)!important;}
#credentials .education-compact-item{padding:10px 12px!important;}
#experience .journey-card{padding:clamp(18px,2.4vh,28px) clamp(22px,2.5vw,36px)!important;}
#experience .journey-card-main{padding-left:4px!important;padding-right:6px!important;}
#home .v22-portrait{padding:3px!important;box-sizing:border-box!important;}
/* Make controls blend with the same surface style. */
.deck-controls {background:var(--glass-v24)!important;border-color:var(--glass-v24-border)!important;backdrop-filter:blur(12px)!important;}
@media(max-width:760px){
 main#main #about .section-grid > .section-body{padding:10px 12px!important;}
 #skills .talent-tree{padding:12px!important;}
 #experience .journey-card{padding:16px!important;}
}
@supports not (backdrop-filter:blur(1px)) {
 #about .section-body,#experience .journey-card,#skills .talent-tree,#credentials .v21-gallery,#home .v22-portrait{background:var(--glass-v24-strong)!important;}
}