html,body { margin:0; min-width:0; width:100%; background:#030405; }
.career-screen { min-height:650px; background:#030405; }
#career-planet-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-2; pointer-events:none; }
.career-ambient { background:linear-gradient(0deg,#01020399,transparent 37%,transparent 80%,#01020344); }
.career-planet-controls { position:absolute; right:4%; top:139px; z-index:6; }
.career-planet-controls button { color:#ecf2f8; background:#0a0c10aa; border:1px solid #c2cbd644; border-radius:99px; font:inherit; font-size:11px; padding:8px 14px; cursor:pointer; }
.career-orbit-dragging { cursor:grabbing!important; user-select:none; }
@media(max-width:800px){ .career-heading h2 { display:block; font-size:27px; } .career-heading h2 span { display:block; margin-top:9px; font-size:10px; } .career-caption { left:12%; right:12%; } .career-footer-note{display:none} .career-footer{gap:8px} .career-pagination{gap:8px} .career-progress li{width:18px} .career-planet-controls{top:143px} }
@media(max-width:450px){ .career-caption{bottom:82px;left:6%;right:6%} .career-brand{font-size:16px} .career-chapter{font-size:9px} .career-back{font-size:9px} }
@media(prefers-reduced-motion:reduce){#career-planet-canvas{transition:none}}

/* Match the reference's lower, wide card belt without moving resume content. */
.career-arrow{top:calc(57.5% + 3px)}
.career-caption{bottom:67px}
.career-fallback{top:57.5%;width:min(40vw,calc(100svh * .77));aspect-ratio:16/9}
@media(max-width:800px){.career-fallback{width:min(72vw,calc(100svh * .77))}.career-caption{bottom:82px}}

/* Static/WebGL fallback also keeps a visible silver edge. */
.career-fallback{border:1px solid #d8e3f0c9;box-shadow:0 0 8px #bacce945,0 0 22px #d7e1ee20,inset 0 0 8px #dce9fc26}

/* Reference title: a single centered, luminous heading above the card belt.
   Static shadows avoid rerasterizing a large animated blur every frame. */
.career-heading{top:16.5%;left:4%;right:4%;display:block;text-align:center}
.career-heading h2{display:block;margin:0;color:#fff;font-size:clamp(50px,min(8.4vw,12svh),128px);font-weight:850;line-height:1.08;letter-spacing:.14em;padding-left:.14em;text-shadow:0 0 2px #fff,0 0 16px #d9e8ff9c,0 0 42px #bacce955}
.career-heading h2 span{display:block;margin:14px 0 0;font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.13em;color:#cbd3df;text-shadow:0 0 10px #b9cbec44}
.career-heading>p{display:none}
.career-planet-controls{top:94px}
@media(max-width:800px){.career-heading{top:18%}.career-heading h2{font-size:clamp(46px,8.4vw,68px)}.career-heading h2 span{margin-top:13px;font-size:10px}.career-planet-controls{top:94px}}
@media(max-width:450px){.career-heading{top:21%}.career-heading h2{font-size:46px;letter-spacing:.1em}.career-heading h2 span{max-width:90vw;margin:12px auto 0;font-size:9px}}

.career-universe-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.career-space-controls{position:absolute;right:4%;top:85px;z-index:6;display:flex;align-items:center;gap:5px;padding:4px;border:1px solid #c2cbd644;border-radius:30px;background:#0a0c10d9}
.career-space-controls button{border:0;border-radius:22px;background:transparent;color:#9faaba;font:inherit;font-size:11px;padding:8px 12px;cursor:pointer}
.career-space-controls button[aria-pressed="true"]{background:#e5eaf2;color:#10141b}
.career-space-controls #career-space-switch{font-size:21px;line-height:1;padding:2px 7px;color:#eff4ff}
.career-space-controls button:disabled{opacity:.5;cursor:wait}
.career-planet-controls{left:4%;right:auto;top:94px}
.career-screen[data-space-target="original"] .career-heading{top:87px;text-align:left;right:36%;pointer-events:none}
.career-screen[data-space-target="original"] .career-heading h2{font-size:clamp(26px,2.2vw,40px);font-weight:650;letter-spacing:.07em;padding:0;text-shadow:none;line-height:1.2}
.career-screen[data-space-target="original"] .career-heading h2 span{margin:10px 0 0;letter-spacing:.05em;color:#a8b5c6;text-shadow:none;font-size:11px}
.career-screen[data-space-target="original"] .career-planet-controls{top:144px}
.career-screen[data-space-target="original"] .career-arrow{top:calc(50% + 23px)}
.career-screen[data-space-target="original"] .career-fallback{top:50%;aspect-ratio:1.6;border:0;box-shadow:none}
@media(min-width:1000px){.career-screen[data-space-target="original"] .career-heading h2{display:flex;align-items:baseline;gap:22px}.career-screen[data-space-target="original"] .career-heading h2 span{display:inline;margin:0}}
@media(max-width:450px){.career-space-controls{top:84px}.career-space-controls button{padding:7px 9px;font-size:10px}.career-screen[data-space-target="original"] .career-heading{top:145px;right:4%}.career-screen[data-space-target="original"] .career-planet-controls{top:94px}}

/* Every visual position follows the same phase as the WebGL surface. No
   target-state layout jump before the reveal starts. */
.career-dual-site .career-screen .career-heading{inset:0;display:block;text-align:left;pointer-events:none}
.career-dual-site .career-screen .career-heading h2{position:static;display:block;margin:0;padding:0;font-size:inherit;letter-spacing:normal;line-height:1;}
.career-dual-site .career-screen .career-heading h2 .career-heading-word{position:absolute;display:block;white-space:nowrap;margin:0;padding:0;left:calc(4% + var(--career-space-phase,0)*46%);top:var(--career-title-top,87px);transform:translateX(calc(var(--career-space-phase,0)*-50%));font-size:var(--career-title-size,26px);font-weight:calc(650 + var(--career-space-phase,0)*200);line-height:1.08;letter-spacing:calc(.07em + var(--career-space-phase,0)*.07em);color:#fff;text-shadow:0 0 2px rgb(255 255 255 / calc(var(--career-space-phase,0)*1)),0 0 16px rgb(217 232 255 / calc(var(--career-space-phase,0)*.61)),0 0 42px rgb(186 204 233 / calc(var(--career-space-phase,0)*.33))}
.career-dual-site .career-screen .career-heading h2 .career-heading-subtitle{position:absolute;display:block;white-space:nowrap;max-width:none;margin:0;padding:0;left:var(--career-subtitle-left,4%);top:var(--career-subtitle-top,128px);transform:translateX(calc(var(--career-space-phase,0)*-50%));font-size:11px;font-weight:400;line-height:1.5;letter-spacing:calc(.05em + var(--career-space-phase,0)*.08em);color:#c0cad7;text-shadow:none}
.career-dual-site .career-screen .career-arrow{top:var(--career-arrow-top,calc(50% + 23px))}
.career-dual-site .career-screen .career-planet-controls{top:var(--career-pause-top,144px)}
.career-space-controls button{transition:background-color .25s,color .25s}
@media(max-width:450px){.career-dual-site .career-screen .career-heading h2 .career-heading-subtitle{font-size:9px}}