/* Shared responsive ownership: flow content; contain foreground scenes; crop only backgrounds. */
:root{
  --layout-max:88rem;--layout-gutter:clamp(1rem,3vw,3rem);--layout-gap:clamp(1rem,3vw,3rem);
  --glass:rgba(7,13,17,.18);--glass-soft:rgba(7,13,17,.10);--glass-strong:rgba(7,13,17,.30);
  --surface:rgba(10,17,21,.20);--surface2:rgba(14,23,27,.26);
  --panel:rgba(10,17,21,.20);--panel2:rgba(14,23,27,.26);--panel3:rgba(20,30,34,.30);
  --bg2:rgba(10,17,21,.12);--inset:rgba(5,10,14,.22);--nav-menu-solid:#0b1216;
  --sound-panel-bg:rgba(11,18,22,.96);--sound-panel-border:rgba(173,209,215,.30)
}
:root[data-theme="light"]{
  --glass:rgba(247,249,245,.18);--glass-soft:rgba(247,249,245,.10);--glass-strong:rgba(247,249,245,.30);
  --surface:rgba(247,249,245,.20);--surface2:rgba(239,243,238,.26);
  --panel:rgba(247,249,245,.20);--panel2:rgba(239,243,238,.26);--panel3:rgba(231,237,232,.30);
  --bg2:rgba(247,249,245,.12);--inset:rgba(241,245,240,.22);--nav-menu-solid:#f7f9f5;
  --sound-panel-bg:rgba(247,249,245,.97);--sound-panel-border:rgba(58,102,79,.34)
}
html{min-width:0;max-width:100%;overflow-x:clip!important}
body{min-width:0;width:100%;max-width:100%;overflow-x:visible!important}
body.living-scenes{width:100%!important;max-width:100%!important;overflow-x:clip!important}
main,section,article,aside,form,fieldset,figure,nav,main div,header div{min-width:0;box-sizing:border-box}
main :is(h1,h2,h3,p,a,strong,label){overflow-wrap:break-word}
body .wrap,body.home-page .wrap{width:calc(100% - 2 * var(--layout-gutter));max-width:var(--layout-max);margin-inline:auto}
main img,main video,main iframe,main canvas{max-width:100%}
select,input,textarea{min-width:0;max-width:100%;box-sizing:border-box}
dialog{box-sizing:border-box;max-width:calc(100% - 2rem);max-height:calc(100dvh - 2rem);overflow:auto}
/* One generated header, including learning shells. Local learning sound/motion controls stay in main. */
body .site-global-header{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;position:sticky;top:0;width:100%;height:auto!important;min-height:0;padding:calc(.75rem + env(safe-area-inset-top)) max(var(--layout-gutter),env(safe-area-inset-right)) .75rem max(var(--layout-gutter),env(safe-area-inset-left));background:var(--glass)!important;backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:100}
.site-global-header .brand{display:flex!important;min-width:0;gap:.6rem;white-space:normal;line-height:1.3;letter-spacing:0}
.site-global-header .brand>strong{font-size:1.7rem;color:var(--accent);flex:none}
.site-global-header .brand>span{display:block!important;font-size:.9rem;line-height:1.3;white-space:normal}
.site-global-header .brand small{display:block!important;font-size:.68rem;line-height:1.4;white-space:normal}
body .site-global-header .global-controls{display:flex!important;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0;min-width:0}
body .site-global-header .global-controls>button,body .site-global-header .global-controls [data-scene-audio]{display:inline-flex!important;align-items:center;justify-content:center;gap:.4rem;min-width:44px!important;width:auto;height:44px!important;min-height:44px;padding:.4rem .65rem!important;margin:0!important;font:600 .8rem/1.1 system-ui!important;letter-spacing:0;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--glass)!important;color:var(--ink,var(--text))!important;box-sizing:border-box;transition:background .15s,border-color .15s;white-space:nowrap}
body .site-global-header .global-controls [data-theme-toggle]{width:6rem!important}
.site-global-header .global-controls svg{width:18px!important;height:18px!important;flex:none}
.site-global-header .global-controls span{display:inline!important;font:inherit!important}
.site-global-header kbd{font-size:.65rem;margin-left:.4rem}
body .site-global-header #primary-nav{display:none!important;position:absolute;inset:100% var(--layout-gutter) auto auto;width:min(26rem,calc(100% - 2 * var(--layout-gutter)));max-height:calc(100dvh - var(--header-height,120px) - 1rem);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:var(--nav-menu-solid)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 18px 44px rgba(0,0,0,.28);opacity:1!important}
body .site-global-header #primary-nav.open{display:flex!important}
.site-global-header #primary-nav a{width:100%;min-height:44px;padding:.6rem!important;white-space:normal}
body .site-global-header .scene-sound-panel{
  position:absolute;inset:calc(100% + .45rem) 0 auto auto;
  width:min(17rem,calc(100vw - 2rem));max-width:none;max-height:none;overflow:hidden;
  padding:.8rem;background:var(--sound-panel-bg)!important;background-image:none!important;color:var(--ink,var(--text));
  border:1px solid var(--sound-panel-border)!important;border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.05)!important;backdrop-filter:blur(14px) saturate(1.05)!important;z-index:150
}
.scene-sound-control{position:relative;display:inline-flex;align-items:center;flex:none}
.scene-sound-panel label{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .35rem;padding:0;
  font:700 .74rem/1.2 system-ui,sans-serif;color:var(--ink,var(--text))
}
.scene-sound-panel output{font-variant-numeric:tabular-nums;color:var(--ink,var(--text))}
.scene-sound-volume-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:.55rem;margin:0}
.scene-sound-volume-row>button,.scene-sound-mute{
  display:grid;place-items:center;min-width:34px;height:34px;padding:0 .55rem;
  border:1px solid var(--line)!important;border-radius:10px!important;
  background:var(--glass-strong)!important;color:var(--ink,var(--text))!important
}
.scene-sound-volume-row>button{width:34px;padding:0;font:800 1rem/1 system-ui}
.scene-sound-mute{width:100%;min-width:0;margin:.45rem 0 0;font:700 .74rem/1 system-ui}
body .site-global-header .scene-sound-panel .scene-sound-mute{
  width:100%!important;min-width:0!important;height:34px!important;min-height:34px!important;
  padding:0 .75rem!important;font:700 .74rem/1 system-ui!important
}
.scene-sound-panel input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;min-height:34px;
  margin:0;padding:0 2px;background:transparent!important;cursor:pointer;touch-action:none;accent-color:var(--accent)
}
.scene-sound-panel input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:color-mix(in srgb,var(--line) 76%,transparent)
}
.scene-sound-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;
  border:2px solid color-mix(in srgb,var(--ink,var(--text)) 52%,transparent);border-radius:50%;
  background:var(--accent);box-shadow:0 2px 7px rgba(0,0,0,.26)
}
.scene-sound-panel input[type=range]::-moz-range-track{
  height:8px;border:0;border-radius:999px;background:color-mix(in srgb,var(--line) 76%,transparent)
}
.scene-sound-panel input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border:2px solid color-mix(in srgb,var(--ink,var(--text)) 52%,transparent);
  border-radius:50%;background:var(--accent);box-shadow:0 2px 7px rgba(0,0,0,.26)
}
.scene-sound-panel input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:999px}
.scene-sound-panel [data-audio-status]{display:block;margin-top:.35rem;color:var(--muted);font:600 .66rem/1.25 system-ui}
.scene-sound-panel [data-audio-status][hidden]{display:none!important}
.learning-local-controls{display:none!important}
@media(max-width:42rem){
  body .site-global-header .global-controls{width:100%;justify-content:space-between;gap:.35rem}
  body .site-global-header .global-controls>button,body .site-global-header .global-controls [data-scene-audio]{font-size:.75rem!important;padding:.4rem!important}
  body .site-global-header .global-controls [data-theme-toggle]{width:5rem!important}
  .site-global-header kbd{display:none}
  .site-global-header .scene-sound-control{position:static}
  body .site-global-header .scene-sound-panel{left:50%;right:auto;transform:translateX(-50%);width:min(17rem,calc(100vw - 2rem))}
  .scene-sound-volume-row{grid-template-columns:32px minmax(0,1fr) 32px}
  .scene-sound-volume-row>button{width:32px;min-width:32px;height:32px}
}
/* Profile is flow layout. The illustration alone is a cover background. Neither theme owns geometry. */
.home-page .hero{gap:var(--layout-gap);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.about-imagery{position:relative;isolation:isolate;display:block;width:100%;max-width:38rem;margin:0 auto;padding:0;overflow:visible;container-type:inline-size}
.portrait-stage{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:clamp(30rem,48vw,38rem);padding:clamp(7rem,12vw,10rem) clamp(1rem,3vw,2rem) 0;border-radius:16px;overflow:hidden}
.portrait-stage .systems-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.30;z-index:-1}
.portrait-photo{position:relative;width:min(85%,22rem);margin:0;padding:0;border:0;transform:none;pointer-events:none}
.portrait-photo img{display:block;width:100%;height:auto;aspect-ratio:300/268;object-fit:contain;object-position:50% 50%;transform:none;filter:drop-shadow(0 12px 18px #0005)}
.portrait-card{position:relative;display:block;width:calc(100% - clamp(1rem,4vw,2.5rem));margin:-1px auto 0;padding:clamp(.8rem,3cqi,1.5rem);border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:14px;background:var(--glass)!important;-webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);text-align:left;z-index:2}
.portrait-card-copy{min-width:0}.portrait-name{display:block;font-size:1.15rem;margin-bottom:.75rem}
.credential-row{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.75rem;margin-top:.75rem;align-items:start}
.credential-logo{display:grid;place-items:center;background:#fff;border-radius:6px;padding:.35rem;width:4rem;min-width:0;height:2.6rem}
.credential-logo img{width:100%;height:100%;object-fit:contain}
.credential-text{font-size:.85rem;line-height:1.55;color:var(--ink,var(--text))}.credential-text span{display:block}
@container(max-width:22rem){.credential-row{grid-template-columns:1fr;gap:.4rem}}
.education-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--layout-gap)}
.education-cards article{container-type:inline-size;min-width:0;padding:clamp(1rem,3vw,1.5rem);background:var(--glass)!important}
.education-cards .school-top{flex-wrap:wrap}.education-cards li{font-size:1rem}
.resume-education{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--layout-gap)}
.resume-education article{min-width:0;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--line);border-radius:14px;background:var(--glass)}
@media(max-width:64rem){.home-page .hero{grid-template-columns:minmax(0,1fr)}.home-page .hero>.about-imagery{grid-row:1}.home-page .hero-note{flex-wrap:wrap}}
/* Logical scene dimensions include all foreground paint. Only .solar-scene scales. */
body .vnext-cosmos{min-width:0;max-width:100%;overflow:visible!important}
body .vnext-cosmos .vnext-cosmos-scene{position:relative;width:100%;height:auto!important;min-height:0!important;aspect-ratio:800/560;overflow:visible!important;background:transparent!important}
body .vnext-cosmos .solar-scene{position:absolute;left:0;top:0;width:800px;height:560px;max-width:none;transform-origin:0 0}
body .vnext-cosmos .vnext-cosmos-canvas{position:absolute;inset:0;width:800px!important;height:560px!important;max-width:none!important}
body .vnext-cosmos .vnext-cosmos-worlds{position:absolute;inset:0}
body .vnext-cosmos .vnext-cosmos-core{position:absolute;left:50%;top:45%;width:66px;height:66px}
body .vnext-cosmos .vnext-world{position:absolute;left:0;top:0;width:110px!important;height:112px;min-height:112px!important;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
body .vnext-cosmos .vnext-world strong{display:block!important;font-size:16px!important;line-height:1.2;letter-spacing:0;max-width:110px;white-space:normal}
.solar-navigation{position:relative;padding:clamp(1.25rem,4vw,3rem) 0;border:0!important;border-radius:0;background:transparent!important;backdrop-filter:none!important;overflow:visible}
.solar-navigation>h2{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.solar-navigation svg{display:block;width:100%;height:auto;max-width:52rem;margin:auto;overflow:visible}
.ai-build-solar svg{max-width:60rem}
.approved-orbit{fill:none;stroke:rgba(130,184,196,.24);stroke-width:1.1}
.approved-sun{filter:drop-shadow(0 0 10px rgba(255,177,88,.82)) drop-shadow(0 0 28px rgba(240,119,47,.46))}
.approved-sun-glow{fill:rgba(245,157,69,.10);pointer-events:none}
.approved-planet-body{stroke:rgba(255,255,255,.50);stroke-width:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.46)) drop-shadow(0 0 7px rgba(128,210,225,.22))}
.approved-ring{fill:none;stroke:rgba(222,230,226,.60);stroke-width:2.4;opacity:.78;pointer-events:none}
.approved-label{fill:#f8fbfc!important;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px!important;font-weight:800;letter-spacing:-.01em;text-anchor:middle;paint-order:stroke;stroke:rgba(3,9,13,.94);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.ai-build-solar .approved-label{fill:#f8fbfc!important;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px!important;font-weight:800;letter-spacing:-.01em;text-anchor:middle;paint-order:stroke;stroke:rgba(3,9,13,.94);stroke-width:4px;stroke-linejoin:round;pointer-events:none}


.approved-planet-link{cursor:pointer;outline:none}
.approved-hit{fill:transparent;stroke:transparent;pointer-events:all}
.approved-planet-link:focus-visible .approved-planet-body,.approved-planet-link:hover .approved-planet-body{stroke:var(--accent)!important;stroke-width:3!important;filter:brightness(1.14) drop-shadow(0 0 9px rgba(255,184,114,.70))}
.approved-depth-back .approved-planet-link{pointer-events:auto}
.approved-depth-front .approved-planet-link{pointer-events:auto}
@media(max-width:42rem){.approved-label{font-size:13px!important}.ai-build-solar .approved-ai-label{font-size:10px!important}}

.solar-descriptor{max-width:52rem;margin:clamp(.5rem,2vw,1.25rem) auto 0;padding:clamp(.75rem,2vw,1rem) 0 0;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:transparent!important}
.ai-build-solar .solar-descriptor{max-width:60rem}
.solar-descriptor-meta{margin:0 0 .55rem;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.solar-descriptor-title{position:static!important;width:auto!important;height:auto!important;margin:0 0 .55rem!important;clip:auto!important;overflow:visible!important;white-space:normal!important;font-size:clamp(1.45rem,3vw,2rem)!important}
.solar-descriptor-copy{max-width:68ch;margin:0 0 .8rem;color:var(--ink,var(--text));font-size:clamp(.95rem,2vw,1.08rem);line-height:1.65}
.solar-descriptor-link{display:inline-block;min-height:44px;padding:.65rem 0;color:var(--accent);font-weight:800;text-decoration-thickness:1px;text-underline-offset:4px}
.approved-planet-link.selected .approved-planet-body{stroke:var(--accent)!important;stroke-width:3!important;filter:brightness(1.16) drop-shadow(0 0 10px rgba(255,184,114,.76))}
.ai-development-intro{max-width:52rem;margin:clamp(2rem,5vw,4rem) auto 0;padding-top:clamp(1rem,3vw,2rem);border-top:1px solid var(--line)}
.ai-build-detail{max-width:58rem!important;padding-block:clamp(2rem,5vw,5rem)}
.ai-build-detail>.eyebrow{margin-bottom:.8rem}
.ai-build-detail .hero-intro{max-width:60ch}
.ai-detail-back{margin:1.4rem 0 2rem}
.ai-detail-back a,.ai-related-link a{color:var(--accent);font-weight:800}
.ai-build-detail>section{padding:clamp(1.25rem,3vw,2rem) 0;border-top:1px solid var(--line);background:transparent!important}
.ai-build-detail>section h2{margin:0 0 .6rem}
.ai-build-detail>section p{max-width:68ch;margin:0;line-height:1.7}

/* Rich dedicated AI pages and functional labs. */
.ai-build-detail{max-width:64rem!important;padding-block:clamp(2rem,5vw,5rem)}
.ai-build-detail>.hero-intro{max-width:62ch;font-size:clamp(1.05rem,2vw,1.28rem)}
.ai-build-detail>section{padding:clamp(1.4rem,3vw,2.4rem) 0;border-top:1px solid var(--line);background:transparent!important}
.ai-build-detail>section h2{margin:0 0 .8rem}
.ai-build-detail>section :is(p,li){line-height:1.72}
.ai-build-detail>section ul,.ai-build-detail>section ol{display:grid;gap:.65rem;padding-left:1.4rem}
.ai-source-list a{overflow-wrap:anywhere}
.ai-build-sequence{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.ai-build-sequence a{min-height:44px;display:flex;align-items:center;color:var(--accent);font-weight:800}
.ai-build-sequence a:last-child{justify-content:flex-end;text-align:right}
.ai-lab-head{margin-bottom:1rem}.ai-lab-head h2{margin-bottom:.45rem!important}
.ai-lab-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.8rem 1rem;align-items:end}
.ai-lab-controls label{display:grid;gap:.35rem;font-weight:700}
.ai-lab-controls label:has(input[type=checkbox]){grid-template-columns:auto 1fr;align-items:center;justify-content:start}
.ai-lab-controls input:not([type=checkbox]),.ai-lab-controls select{width:100%;min-height:44px;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--glass);color:var(--ink,var(--text));font:inherit}
.ai-lab-controls input[type=range]{padding:0}
.ai-lab-output{min-height:5.5rem;margin-top:1rem;padding:1rem 0;border-top:1px dashed var(--line)}
.ai-lab-output strong{font-size:1.1rem}.ai-lab-output p{margin:.55rem 0 0}
.ai-lab-bars{display:grid;gap:.55rem}.ai-lab-bars>div{display:grid;grid-template-columns:minmax(5rem,auto) 1fr 4.5rem;gap:.6rem;align-items:center}
.ai-lab-bars i{height:.7rem;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p),color-mix(in srgb,var(--line) 70%,transparent) var(--p))}
.ai-lab-bars output{text-align:right;font-variant-numeric:tabular-nums}
/* Native hidden state must survive the learning button/grid presentation rules. */
body[data-library-page] [hidden]{display:none!important}
body[data-library-page] .filters,body[data-library-page] .filters>label{min-width:0;max-width:100%}
body[data-library-page] .filters select{min-width:0;max-width:100%}
@media(max-width:520px){body[data-library-page] .filters{grid-template-columns:minmax(0,1fr)}body[data-library-page] .filters>label{flex-wrap:wrap}}
@media(max-width:38rem){.ai-build-sequence{grid-template-columns:1fr}.ai-build-sequence a,.ai-build-sequence a:last-child{justify-content:flex-start;text-align:left}.ai-lab-bars>div{grid-template-columns:1fr}.ai-lab-bars output{text-align:left}}

/* Sitewide glass contract: tile surfaces must reveal the scene behind them. */
:is(.home-project,.education-cards article,.resume-education article,.project-card,.destination-card,.domain-card,.lesson-card,.path-card,.practice-card,.mastery-card,.atlas-card,.principle-grid article,.contact){
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  backdrop-filter:blur(12px) saturate(1.08);
}
.quantum-stage-label,.quantum-controls,#bell-result{background:transparent!important}
@media(max-width:42rem){
  .portrait-stage{min-height:29rem;padding-top:8.5rem}
  .portrait-stage .systems-photo{object-position:50% 40%}
  .portrait-photo{width:min(84%,22rem)}
  .portrait-card{width:calc(100% - 2rem)}
}

/* Light-mode quantum glass remains readable while still showing the scene behind it. */
:root[data-theme="light"] .quantum-stage{color:#f6fdff!important}
:root[data-theme="light"] .quantum-stage :is(.quantum-stage-label,.quantum-controls label,.bell-bars>div,.bell-bars output,#bell-result){color:#f6fdff!important;text-shadow:none!important}
:root[data-theme="light"] .quantum-stage .quantum-controls select{color:#f6fdff!important;background:rgba(8,28,38,.62)!important;border-color:rgba(130,220,234,.56)!important}
:root[data-theme="light"] .quantum-stage .quantum-stage-label button{color:#f6fdff!important;background:rgba(8,28,38,.38)!important;border-color:rgba(130,220,234,.48)!important}

/* Unified About page: one continuous profile, not a dashboard of tiles. */
.about-unified-page main{display:block}
.about-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(16rem,.7fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(3rem,7vw,7rem);border-bottom:1px solid var(--line)}
.about-hero h1{max-width:12ch;margin-bottom:1.2rem}
.about-lede{max-width:66ch;color:var(--ink,var(--text));font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.55}
.about-hero-copy>p:not(.eyebrow):not(.about-lede){max-width:70ch}
.about-profile-photo{margin:0;align-self:center}
.about-profile-photo img{display:block;width:min(100%,24rem);height:auto;margin-inline:auto;object-fit:contain;object-position:center;border:1px solid var(--line);border-radius:16px;filter:none}
.about-profile-photo figcaption{margin-top:.65rem;text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.about-facts{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin:1.4rem 0;color:var(--muted);font-size:.86rem}
.about-facts span+span::before{content:"•";margin-right:1rem;color:var(--accent)}
.about-local-nav{display:flex;flex-wrap:wrap;gap:.3rem .7rem;padding-block:1.15rem;border-bottom:1px solid var(--line);font-size:.9rem}
.about-local-nav a{color:var(--ink,var(--text));text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:4px}
.about-local-nav span{color:var(--muted)}
.about-flow-section{padding-block:clamp(3.5rem,7vw,7rem);border-bottom:1px solid var(--line);background:transparent!important}
.about-flow-section>h2{max-width:22ch}
.about-flow-section .section-intro{max-width:68ch;font-size:1.08rem}
.about-prose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.5rem);margin-top:2rem}
.about-prose p{margin:0;line-height:1.8}
.about-capabilities{margin-top:2rem;border-top:1px solid var(--line)}
.about-capabilities details{border-bottom:1px solid var(--line);background:transparent!important}
.about-capabilities summary{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1rem;align-items:center;min-height:64px;padding:1rem 0;cursor:pointer;list-style:none}
.about-capabilities summary::-webkit-details-marker{display:none}
.about-capabilities summary>span:first-child{color:var(--accent);font-size:.78rem;letter-spacing:.12em}
.about-capabilities summary>span:last-child{font-size:1.25rem;color:var(--accent);transition:transform .18s}
.about-capabilities details[open] summary>span:last-child{transform:rotate(45deg)}
.about-capabilities details>p{max-width:72ch;padding:0 0 1.35rem 4rem;margin:0;line-height:1.75}
.career-timeline{margin-top:2rem;border-top:1px solid var(--line)}
.career-timeline details{border-bottom:1px solid var(--line);background:transparent!important}
.career-timeline summary{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:1rem;align-items:start;padding:1.25rem 0;cursor:pointer;list-style:none}
.career-timeline summary::-webkit-details-marker{display:none}
.career-years{color:var(--accent);font-size:.82rem;letter-spacing:.08em}
.career-timeline summary strong{display:block;font-size:1.05rem}
.career-timeline summary small{display:block;margin-top:.25rem;color:var(--muted);font-size:.84rem}
.career-timeline details>div{max-width:76ch;padding:0 0 1.5rem 8rem}
.career-timeline details>div p{line-height:1.75}
.career-timeline details>div ul{display:grid;gap:.6rem;color:var(--muted)}
.about-contact-list{margin:2rem 0 0;border-top:1px solid var(--line)}
.about-contact-list>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.about-contact-list dt{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.about-contact-list dd{margin:0;overflow-wrap:anywhere}
.about-contact-list a,.direction-links a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.credential-lines{margin-top:2rem}
.credential-lines p{padding:.75rem 0;margin:0;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);line-height:1.7}
.education-lines{margin-top:2rem;border-top:1px solid var(--line)}
.education-line{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.5rem;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--line);background:transparent!important}
.education-line img{display:block;width:6rem;height:auto;background:#fff;padding:.45rem;border-radius:7px}
.education-line h3{margin:0 0 .4rem}
.education-line p{margin:.2rem 0}
.mit-wordmark{display:flex;align-items:center;justify-content:center;width:6rem;height:3.5rem;border-radius:7px;background:#fff;color:#111;font:800 1.45rem/1 system-ui;letter-spacing:-.08em;border-left:.45rem solid #a31f34}
.foundation-glyph{display:grid;place-items:center;width:4rem;height:4rem;font-size:2rem;color:var(--accent)}
.direction-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.about-principles{counter-reset:principle;display:grid;gap:0;margin:2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.about-principles li{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(0,1.3fr);gap:2rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.about-principles span{color:var(--muted)}
.about-contact-section{padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line);background:transparent!important}
.about-contact-section>p{max-width:62ch}
@media(max-width:58rem){.about-hero{grid-template-columns:1fr}.about-profile-photo{grid-row:1}.about-profile-photo img{max-width:22rem}.about-prose{grid-template-columns:1fr}.career-timeline details>div{padding-left:0}.about-principles li{grid-template-columns:1fr;gap:.4rem}}
@media(max-width:38rem){.about-hero{padding-top:2rem}.about-facts{display:grid;gap:.35rem}.about-facts span+span::before{content:"";margin:0}.career-timeline summary{grid-template-columns:1fr auto}.career-timeline summary .career-years{grid-column:1/-1}.education-line{grid-template-columns:1fr}.about-contact-list>div{grid-template-columns:1fr;gap:.2rem}.about-capabilities details>p{padding-left:0}}

/* About is one continuous reading page; render every section so anchor jumps and full-page previews never show intrinsic-size placeholders. */
.about-unified-page main>section{content-visibility:visible!important;contain-intrinsic-size:auto!important}

/* Shared shell glass contract. Values are declared once at the top of this module. */

/* Full-width bands never hide the scene. */
:is(.signal-strip,.feature-band,.quantum-section,.discover,.atlas,.stat-band,.depth-system,.section.alt){
  background:transparent!important;
}

/* Tile/card/panel surfaces. */
:is(
  .system-visual,[role="tabpanel"],.project-card,.home-project,.education-cards article,
  .resume-education article,.destination-card,.constellation-panel,.domain-card,
  .search-box,.lesson-card,.path-card,.atlas-card,.principle-grid article,
  .sidebar-card,.rail-card,.misconception,.interactive,.visual-stage,.diagram-node,.metric,
  .quiz-options button,.practice-card,.mastery-card,.depth-coverage,.depth-ladder button,
  .depth-planner,.depth-integrity,.research-bridge,.vnext-path-intro,.vnext-path-check,
  #cap-selector a,#cap-detail,.cap-example,.cap-check,.science-console,.science-stage,
  .science-output,.science-node-grid button,.science-probes button,.science-paths span,
  .lab-workspace .lab-grid,#lab .lab-grid,.lab-workspace form,#lab form,.app-panel,
  .agent-metric,#agent-tasks li,#agent-ledger,.vnext-system,.vnext-quantum,
  .vnext-quantum-floor,.portrait-card,.contact
){
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
}

/* Controls that previously appeared as solid blocks. */
:is(
  .search-stage,.filters select,.check-label,.depth-controls select,.depth-context select,
  .vnext-path-intro input[type="search"],.vnext-path-intro select,
  .science-form input[type="number"],.science-form select,
  .science-node-grid button,.science-probes button,
  .ai-lab-controls input:not([type="checkbox"]),.ai-lab-controls select,
  .lab-workspace input,.lab-workspace select,.lab-workspace textarea,
  #lab input,#lab select,#lab textarea
){
  background:var(--glass-strong)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.06);
  backdrop-filter:blur(8px) saturate(1.06);
}

/* Keep hover/selected states visible without becoming opaque. */
:is(.project-card,.home-project,.domain-card,.lesson-card,.path-card,.atlas-card,.depth-ladder button):hover{
  background:var(--glass-strong)!important;
}
.depth-ladder button.active{
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 15%,transparent),var(--glass-strong))!important;
}

/* Existing scene-specific rules had several high-opacity light-mode surfaces. */
:root[data-theme="light"] body.living-scenes :is(
  .project-card,.home-project,.education-cards article,.domain-card,.stats>div,
  .verification-inner,.constellation-panel,.lesson-card,.path-card,.atlas-card
){
  background:var(--glass)!important;
}

/* Dialogs use strong glass. The hamburger menu is intentionally opaque. */
dialog{
  background:var(--glass-strong)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
}

/* Universal tile geometry — every card/panel/tile uses the same rounded language. */
:root{--tile-radius:14px;--tile-radius-small:10px}

:is(
  .system-visual,[role="tabpanel"],.project-card,.home-project,.education-cards article,
  .resume-education article,.destination-card,.constellation-panel,.domain-card,
  .search-box,.lesson-card,.path-card,.atlas-card,.principle-grid article,
  .sidebar-card,.rail-card,.misconception,.interactive,.visual-stage,.diagram-node,.metric,
  .quiz-options button,.practice-card,.mastery-card,.depth-coverage,.depth-ladder button,
  .depth-planner,.depth-integrity,.research-bridge,.vnext-path-intro,.vnext-path-check,
  #cap-selector a,#cap-detail,.cap-example,.cap-check,.science-console,.science-stage,
  .science-output,.science-node-grid button,.science-probes button,.science-paths span,
  .lab-workspace .lab-grid,#lab .lab-grid,.lab-workspace form,#lab form,.app-panel,
  .agent-metric,#agent-tasks li,#agent-ledger,.vnext-system,.vnext-quantum,
  .vnext-quantum-floor,.portrait-card,.contact,.quantum-stage,
  body.living-scenes[data-library-page="home"] .stats>div,
  body.living-scenes[data-library-page="home"] .verification-inner
){
  border-radius:var(--tile-radius)!important;
}

/* Nested controls stay rounded, but slightly tighter than their parent tile. */
:is(
  .search-stage,.filters select,.check-label,.depth-controls select,.depth-context select,
  .vnext-path-intro input[type="search"],.vnext-path-intro select,
  .science-form input[type="number"],.science-form select,
  .ai-lab-controls input:not([type="checkbox"]),.ai-lab-controls select,
  .lab-workspace input,.lab-workspace select,.lab-workspace textarea,
  #lab input,#lab select,#lab textarea,.button,.tools button,.icon-button
){
  border-radius:var(--tile-radius-small)!important;
}

/* Grouped layouts keep rounded outer corners instead of square grid edges. */
.domain-grid,.lesson-grid,.principle-grid,.depth-ladder,.research-grid{
  border-radius:var(--tile-radius)!important;
  overflow:hidden;
}

/* Universal viewport containment — no card, panel, lab, or grid may extend past
   the available screen width on phones or in-app browsers. */
html{max-width:100%;overflow-x:clip!important}
body:not(.living-scenes){max-width:100%;overflow-x:clip!important}
/* Native rails are hidden; shared UI renders a thumb only, with no opaque track. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html,body{scrollbar-color:transparent transparent!important;scrollbar-gutter:auto!important}
html::-webkit-scrollbar,body::-webkit-scrollbar{
  -webkit-appearance:none!important;display:none!important;width:0!important;height:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important
}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece,body::-webkit-scrollbar-track-piece,
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-button,body::-webkit-scrollbar-button,
html::-webkit-scrollbar-corner,body::-webkit-scrollbar-corner{
  -webkit-appearance:none!important;display:none!important;background:transparent!important;
  border:0!important;box-shadow:none!important
}
:root[data-theme="light"]::-webkit-scrollbar-track,
:root[data-theme="light"]::-webkit-scrollbar-track-piece,
:root[data-theme="light"] body::-webkit-scrollbar-track,
:root[data-theme="light"] body::-webkit-scrollbar-track-piece{
  background:transparent!important;background-color:transparent!important;box-shadow:none!important;opacity:0!important
}
:root{--page-scroll-thumb:rgba(244,165,117,.48);--page-scroll-thumb-active:rgba(244,165,117,.72)}
:root[data-theme="light"]{--page-scroll-thumb:#000;--page-scroll-thumb-active:#000}
.site-page-scroll{
  position:fixed;top:max(10px,env(safe-area-inset-top));right:0;
  bottom:max(10px,env(safe-area-inset-bottom));width:0!important;z-index:145;
  overflow:visible!important;background:none!important;background-color:transparent!important;background-image:none!important;
  border:0!important;outline:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none;contain:layout style
}
.site-page-scroll::before,.site-page-scroll::after{content:none!important;display:none!important;background:none!important}
/* iOS/WebKit can reserve a scrollable root gutter even when its scrollbar is hidden.
   The living scene must still paint through the complete physical viewport. */
body.living-scenes .scene-backdrop{left:0!important;right:0!important;width:auto!important;max-width:none!important}
/* Day mode: WebKit can reserve roughly 12px of root scroll gutter outside its
   layout viewport. Paint the fixed scene slightly past that edge without changing
   page layout or the custom thumb geometry. */
:root[data-theme="light"] body.living-scenes .scene-backdrop{right:-16px!important;width:auto!important}
.site-page-scroll[hidden]{display:none!important}
.site-page-scroll-thumb{
  position:absolute;top:0;right:4px;width:4px;min-height:44px;max-height:72px;border-radius:999px;
  background:var(--page-scroll-thumb)!important;border:0!important;box-shadow:none!important;opacity:.9;
  pointer-events:auto;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:width .14s ease,background .14s ease,opacity .14s ease
}
.site-page-scroll-thumb:hover,.site-page-scroll-thumb:focus-visible,.site-page-scroll-thumb.is-dragging{
  width:6px;background:var(--page-scroll-thumb-active)!important;opacity:1;outline:none
}

:is(
  main,main>section,.wrap,.shell,.cap-wrap,.lesson-shell,.lesson-article,
  .destination-grid,.project-grid,.home-projects,.education-cards,.resume-education,
  .domain-grid,.lesson-grid,.path-grid,.atlas-grid,.principle-grid,.research-grid,
  .metric-grid,.agent-metrics,.science-console,.science-console-grid,.science-stage,
  .lab-grid,.lab-workspace,.app-panel,.depth-system,.depth-planner,.depth-coverage,
  .depth-ladder,.research-bridge,.vnext-path-intro,.vnext-system,.vnext-quantum,
  .solar-navigation,.solar-descriptor
){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box;
}

:is(
  .system-visual,[role="tabpanel"],.project-card,.home-project,.education-cards article,
  .resume-education article,.destination-card,.constellation-panel,.domain-card,
  .search-box,.lesson-card,.path-card,.atlas-card,.principle-grid article,
  .sidebar-card,.rail-card,.misconception,.interactive,.visual-stage,.diagram-node,.metric,
  .quiz-options button,.practice-card,.mastery-card,.depth-coverage,.depth-ladder button,
  .depth-planner,.depth-integrity,.research-bridge,.vnext-path-intro,.vnext-path-check,
  #cap-selector a,#cap-detail,.cap-example,.cap-check,.science-console,.science-stage,
  .science-output,.science-node-grid button,.science-probes button,.science-paths span,
  .lab-workspace .lab-grid,#lab .lab-grid,.lab-workspace form,#lab form,.app-panel,
  .agent-metric,#agent-tasks li,#agent-ledger,.vnext-system,.vnext-quantum,
  .vnext-quantum-floor,.portrait-card,.contact,.quantum-stage
){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere;
}

:is(
  .destination-grid,.project-grid,.home-projects,.education-cards,.resume-education,
  .domain-grid,.lesson-grid,.path-grid,.atlas-grid,.principle-grid,.research-grid,
  .metric-grid,.agent-metrics,.science-node-grid,.science-check-list,.science-pods,
  .depth-ladder,.depth-controls,.research-grid
)>*{min-width:0!important;max-width:100%!important}

/* Scroll only the content that genuinely needs horizontal room, never the page. */
:is(.table-scroll,pre,.code-sample,.responsive-table){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
img,video,canvas,svg,iframe{max-width:100%}

/* Several older learning/science components had desktop-width assumptions. */
@media(max-width:700px){
  /* Preserve each component's existing alignment. The homepage contact tile
     owns its mobile inset in portfolio-home.css. */
  #game-list .project-grid{row-gap:clamp(1rem,4vw,1.4rem)!important}
  #game-list + #engine-path{margin-top:clamp(2rem,8vw,3rem)!important}

  .science-console{width:100%!important;margin-inline:0!important}
  .vnext-path-intro{width:100%!important;margin-inline:0!important}
  .depth-heading,.depth-planner,.depth-context,.science-console-grid,.science-stage,
  .lab-grid,.agent-metrics{grid-template-columns:minmax(0,1fr)!important}
  .destination-grid,.project-grid,.home-projects,.education-cards,.resume-education,
  .domain-grid,.lesson-grid,.path-grid,.atlas-grid,.principle-grid,.research-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .depth-ladder{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .about-contact-list>div,.education-line{min-width:0}
}

@media(max-width:390px){
  .depth-ladder,.stats{grid-template-columns:minmax(0,1fr)!important}
  .site-global-header,.site-global-header *{min-width:0}
}

/* Scene-visibility contract v2 — opaque legacy shells may not sit behind glass.
   The moving/static scene must remain visibly present through all UI surfaces. */
html{background:#06121c}
body.living-scenes{
  background:transparent!important;
}

/* Page-sized and section-sized legacy shells must not paint an opaque layer
   underneath otherwise-translucent cards. */
body.living-scenes :is(
  main,.home-page,.lesson-view,.curriculum,.glossary,.labs,.practice,.connections,
  .evidence-guide,.verification-strip,.resume-strip,.discover,.atlas,.stat-band,
  .feature-band,.quantum-section,.depth-system,.section.alt,.project-detail,.cap-wrap
){
  background:transparent!important;
  background-image:none!important;
}

/* Legacy learning/library cards and interactive panels that were still opaque. */
:is(
  .curriculum-layout,.curriculum-tabs,.search-extras>div,.extra-links button,
  .graph-panel,.graph-detail,.glossary-search,.glossary-letters button,.glossary-card,
  .narration-rate select,.lb-client,.lb-core,.lb-backends button,.binary-bits span,
  .logic-stage button,.logic-gate,.latency-ladder button,.queue-stage>div span,
  .rbac-roles button,.recall-options button,.flashcard,.lab-card,.lab-visual,
  .evidence-steps article,.verification-box,.route-row.head,.route-result,
  .kube-service,.kube-pod,.reconcile-summary>div,.cache-set,.mpi-rank,.state-vector,
  .prob-bars i,.btree-node,.zt-flow>div,.lesson-page-tabs,.lesson-page-tabs button,
  .lesson-dashboard article,.hands-on-card,.practice-prompt,.lab-filter-tools select,
  .switch-hosts button,.scheduler-nodes>div,.claim-ledger,.mastery-domain,.mastery-card,
  .mastery-bar,.mastery-list button,.evidence-lab .lab-checks label,.lab-notes textarea,
  .evidence-reveal,.workflow-grid article,.teachback label,.workflow-claim,
  .learning-mode-bar,.learning-mode-bar select,.essential-question,.lesson-route article,
  .starter-card,.analogy-card,.technical-scope,.teach-prompt,.claim-focus,
  .vocab-grid details,.vocab-empty,.reasoning-steps li,.connection-columns article,
  .concept-visual,.concept-center-node,.concept-node,.visual-detail,.video-curator,
  .video-pin-row input,.video-missing,.watch-prompts article,.lab-blueprint,
  .memory-ladder article,.teachback-studio,.teachback-studio textarea,.review-planner,
  .source-reading-guide article,.probabilities,.vnext-school,.vnext-project-nav,
  .nav-games-menu,.direction-image span
){
  background:var(--glass)!important;
  background-image:none!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.05)!important;
  backdrop-filter:blur(5px) saturate(1.05)!important;
}

/* Slightly stronger glass only where text/control contrast genuinely needs it. */
:is(
  .curriculum-tabs,.lesson-page-tabs,.search-stage,.vnext-project-nav,.cap-header,
  .glossary-search,.learning-mode-bar,.nav-games-menu
){
  background:var(--glass-strong)!important;
}

/* Capstone pages carried their own fully opaque theme. */
:is(#cap-selector a,#cap-detail,.cap-example,.cap-check){
  background:var(--glass)!important;
  background-image:none!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.05)!important;
  backdrop-filter:blur(5px) saturate(1.05)!important;
}

/* Preserve accent meaning without turning selected tiles opaque. */
:is(
  #cap-selector a[aria-current="page"],.glossary-letters button.active,
  .lesson-page-tabs button.active,.curriculum-tabs button.active,
  .lb-backends button.selected,.cache-set.selected,.btree-node.active,
  .scheduler-nodes>div.chosen
){
  background:color-mix(in srgb,var(--accent) 16%,var(--glass-strong))!important;
}

/* Glass should show detail, not smear the scene into a flat color. */
:is(
  .project-card,.home-project,.education-cards article,.destination-card,.domain-card,
  .lesson-card,.path-card,.atlas-card,.practice-card,.mastery-card,.portrait-card,
  .system-visual,.constellation-panel,.depth-planner,.research-bridge,.science-console,
  .science-output,.app-panel,.cap-check,.cap-example,.curriculum-layout,.graph-panel,
  .graph-detail,.glossary-card,.lab-card,.verification-box,.lesson-dashboard article,
  .hands-on-card,.teachback-studio,.review-planner
){
  -webkit-backdrop-filter:blur(4px) saturate(1.04)!important;
  backdrop-filter:blur(4px) saturate(1.04)!important;
}

/* Logo holders are UI glass; the actual marks and artwork retain their color. */
:root[data-theme] body.living-scenes :is(.credential-logo,.mit-wordmark,.foundation-mark){
  background:var(--glass-strong)!important;
}
:root[data-theme] body.living-scenes :is(.credential-logo-mit,.mit-wordmark){color:var(--ink,var(--text))}
:root[data-theme] body.living-scenes .foundation-mark{color:var(--blue)}
body.living-scenes .vnext-qubit-frame{background:transparent}