/* Pexel Workforce OS — shared frontend chrome (Day 12 extraction).
   Loaded before each page's own inline <style> block, so any page that
   needs a different value for one of these rules simply keeps its own
   local override in <style> — the cascade means the local rule always
   wins. See LOGBOOK.md "Day 12" entry for how this was extracted safely
   across ~56 pages that had independently drifted from a shared original. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'DM Sans',sans-serif}

@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes orbA{0%,100%{transform:translate(0,0)}40%{transform:translate(40px,-30px)}75%{transform:translate(-20px,20px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}35%{transform:translate(-35px,25px)}70%{transform:translate(25px,-18px)}}
@keyframes orbC{0%,100%{transform:translate(0,0)}45%{transform:translate(20px,35px)}80%{transform:translate(-30px,-20px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.15}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.bg{position:fixed;inset:0;background:linear-gradient(135deg,#07070f,#0e0820,#070f14,#100710,#07070f);background-size:400% 400%;animation:gradShift 14s ease infinite;z-index:0}
.grain{position:fixed;inset:0;opacity:0.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");pointer-events:none;z-index:1}
.orb1{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,#7c5cfc50 0%,#5c3fcc30 35%,transparent 70%);top:-200px;right:-100px;z-index:1;pointer-events:none;animation:orbA 11s ease-in-out infinite}
.orb2{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#1dbe8040 0%,#0d8a5528 35%,transparent 70%);bottom:-150px;left:-80px;z-index:1;pointer-events:none;animation:orbB 15s ease-in-out infinite}
.orb3{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,#e05c3038 0%,#a0341825 35%,transparent 70%);top:30%;left:35%;z-index:1;pointer-events:none;animation:orbC 19s ease-in-out infinite}

.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:10px}
.content::-webkit-scrollbar{width:3px}
.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}