/* Rev 04 night shift. Link after styles.css. Enabled by night-shift.js through . */ :root[data-night-shift="true"]{ --paper:#16211e; --white:#1c2925; --ink:#edf0e6; --soft:#c2c9be; --line:#53635c; --rust:#e16a47; --rust-text:#ff9a73; --rust-strong:#923721; --moss:#8ca69a; --steel:#91a5aa; color-scheme:dark; } :root[data-night-shift="true"] body{background:#090f0e;color:var(--ink)} :root[data-night-shift="true"] .canvas{background:radial-gradient(70% 45% at 82% 0,#20372e 0,transparent 70%)} :root[data-night-shift="true"] .study{color:#b9c1b6} :root[data-night-shift="true"] .rev{background:var(--rust-strong)} :root[data-night-shift="true"] .site{border-color:#53635c;background:var(--paper);box-shadow:0 24px 70px #00000073} :root[data-night-shift="true"] .nav,:root[data-night-shift="true"] .footer{border-color:#53635c;background:#17231f} :root[data-night-shift="true"] .links a,:root[data-night-shift="true"] .brand,:root[data-night-shift="true"] .footer b{color:var(--ink)} :root[data-night-shift="true"] .links .ico,:root[data-night-shift="true"] .links .cvl{border-color:#78877e} :root[data-night-shift="true"] .maphead,:root[data-night-shift="true"] .key,:root[data-night-shift="true"] .stats,:root[data-night-shift="true"] .focus{border-color:#53635c} :root[data-night-shift="true"] .key{background:#1b2924} :root[data-night-shift="true"] .stats{background:#17231f} :root[data-night-shift="true"] .stat{border-color:#4d5c55} :root[data-night-shift="true"] .stat:hover{background:#263832} :root[data-night-shift="true"] .stat.on{background:#24332e} :root[data-night-shift="true"] .focus{background:#1c2925} :root[data-night-shift="true"] .unit{border-color:#6b7b72;background:#23332d;color:#cfd8cd} /* The drawings remain drawings: muted paper, linework retained, isolated work lights. */ :root[data-night-shift="true"] .mapwrap{position:relative;border-color:#56665d;background:#101a17} :root[data-night-shift="true"] .mapwrap svg{filter:brightness(.84) contrast(1.1) saturate(.82)} :root[data-night-shift="true"] .mapwrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 11% 28% at 72% 36%,#ef835338 0,transparent 58%),radial-gradient(ellipse 8% 24% at 51% 37%,#ffd96b25 0,transparent 62%),linear-gradient(180deg,#07100c22 0,#07100c55 100%);mix-blend-mode:screen} :root[data-night-shift="true"] .mapwrap::before{content:"";position:absolute;z-index:1;right:27.5%;top:18%;width:8px;height:8px;border-radius:50%;background:#ff9a58;box-shadow:0 0 9px 4px #e15b328c,0 0 32px 11px #e15b3230;pointer-events:none} :root[data-night-shift="true"] .experience{background:#17231f;border-color:#53635c} :root[data-night-shift="true"] .experience-list{border-color:#53635c;background:#1c2925} :root[data-night-shift="true"] .experience-list li,:root[data-night-shift="true"] .experience-list li:nth-child(odd){border-color:#43524b} :root[data-night-shift="true"] .experience-list article::before{color:#33433c} :root[data-night-shift="true"] .sheet{background:var(--paper);border-color:#53635c} :root[data-night-shift="true"] .cap,:root[data-night-shift="true"] .pipes,:root[data-night-shift="true"] .stamps,:root[data-night-shift="true"] .caprow>div{border-color:#53635c} :root[data-night-shift="true"] .cap li,:root[data-night-shift="true"] .hl li{border-color:#41514a} :root[data-night-shift="true"] .stamp,:root[data-night-shift="true"] .xp-chips span,:root[data-night-shift="true"] .lab-project-tags span{border-color:#728178;background:#24342e;color:#e6e9df} :root[data-night-shift="true"] .lab-project,:root[data-night-shift="true"] .lab-principles,:root[data-night-shift="true"] .xp-figs,:root[data-night-shift="true"] .xp-nav button{border-color:#607068;background:#1c2925} :root[data-night-shift="true"] .lab-project-head,:root[data-night-shift="true"] .lab-more,:root[data-night-shift="true"] .lab-detail,:root[data-night-shift="true"] .xp-figs div,:root[data-night-shift="true"] .xp-route li{border-color:#46564e} :root[data-night-shift="true"] .lab-diagram,:root[data-night-shift="true"] .xp-art{background-color:#101a17;background-image:linear-gradient(#788d801c 1px,transparent 1px),linear-gradient(90deg,#788d801c 1px,transparent 1px)} :root[data-night-shift="true"] .lab-ai-note{background:#26332e;border-color:#e16a47} :root[data-night-shift="true"] .xp{border-color:#53635c;background:var(--paper);box-shadow:-24px 0 60px #0000008c} :root[data-night-shift="true"] .xp-head{background:#17231f;border-color:#53635c} :root[data-night-shift="true"] .xp-role{border-color:#46564e} :root[data-night-shift="true"] .xp-role.hl{background:#2a3028} :root[data-night-shift="true"] .xp-x{border-color:#849187;color:var(--ink)} :root[data-night-shift="true"] .career-year-selector{border-color:#63736a;border-top-color:var(--rust-text);background:linear-gradient(90deg,#1d2b26 0%,#15221e 100%);box-shadow:inset 0 1px #d8e3d212} :root[data-night-shift="true"] .career-year-step,:root[data-night-shift="true"] .career-year-output{border-color:#77877d;background:#24332e;color:var(--ink)} :root[data-night-shift="true"] .career-year-ticks{border-color:#596a61} :root[data-night-shift="true"] .career-year-ticks button{border-color:#46574e;color:var(--soft)} :root[data-night-shift="true"] .career-year-result{border-color:#607168;color:var(--soft)} :root[data-night-shift="true"] .stats .stat.year-active{background:#263832;box-shadow:inset 0 3px var(--rust-text)} :root[data-night-shift="true"] .maptools{border-color:#53635c;color:var(--soft)} :root[data-night-shift="true"] .map-inspect,:root[data-night-shift="true"] .map-inspector-close{border-color:#77877d;background:#23332d;color:var(--ink)} :root[data-night-shift="true"] .map-inspector-backdrop{background:#050b09d9} :root[data-night-shift="true"] .map-inspector-panel{border-color:#65756c;background:#17231f;box-shadow:0 28px 90px #000000b8} :root[data-night-shift="true"] .map-inspector-head{border-color:#53635c;background:#1c2925} :root[data-night-shift="true"] .map-inspector-note{border-color:#53635c;color:var(--soft)} :root[data-night-shift="true"] .map-inspector-stage{background:#101a17;scrollbar-color:#8ba098 #15221e} :root[data-night-shift="true"] .map-inspector-stage .iso{filter:brightness(.84) contrast(1.1) saturate(.82)} :root[data-night-shift="true"] .lab-demo{background-color:#101a17;background-image:linear-gradient(#788d801c 1px,transparent 1px),linear-gradient(90deg,#788d801c 1px,transparent 1px)} /* Keep prose and controls legible where the day sheet uses fixed ink colours. */ :root[data-night-shift="true"] .cap ul, :root[data-night-shift="true"] .hl ol, :root[data-night-shift="true"] .sites p{color:var(--soft)} :root[data-night-shift="true"] .cap .chips li, :root[data-night-shift="true"] .chips li, :root[data-night-shift="true"] .ttags span{border-color:#718078;background:#273830;color:var(--ink)} /* The pipe sections stay on drawing paper, with ink matched to that paper. */ :root[data-night-shift="true"] .pipes{color:#202b29} :root[data-night-shift="true"] .pipes figcaption, :root[data-night-shift="true"] .pipe-legend b{color:#202b29} :root[data-night-shift="true"] .pipes small, :root[data-night-shift="true"] .pipe-legend small{color:#46544c} :root[data-night-shift="true"] .pipes .capno{border-color:#923721;color:#923721} :root[data-night-shift="true"] .stamp:hover, :root[data-night-shift="true"] .stamp:focus-visible, :root[data-night-shift="true"] .stamp-detail{background:#2b3932;color:var(--ink)} :root[data-night-shift="true"] .lhead{background:#293a32} :root[data-night-shift="true"] .lhead span{color:var(--rust-text)} :root[data-night-shift="true"] .lab-more summary{color:var(--ink)} :root[data-night-shift="true"] .lab-detail p, :root[data-night-shift="true"] .lab-detail ul, :root[data-night-shift="true"] .lab-ai-note p{color:var(--soft)} :root[data-night-shift="true"] .lab-diagram svg text{fill:var(--soft)} :root[data-night-shift="true"] .diagram-caption{background:#24352e;color:var(--soft)} :root[data-night-shift="true"] .xp-art-note{border-color:#53635c;background:#24352e;color:var(--soft)} /* Narrow-screen project selector and field-system disclosure. */ :root[data-night-shift="true"] .mselector, :root[data-night-shift="true"] .mcard, :root[data-night-shift="true"] .mobile-field-systems{border-color:#607068;background:#1c2925} :root[data-night-shift="true"] .mselector button[aria-pressed="true"], :root[data-night-shift="true"] .mstat{background:#293a32;color:var(--ink)} :root[data-night-shift="true"] .mselector button span, :root[data-night-shift="true"] .mhead p{color:var(--soft)} :root[data-night-shift="true"] .mxp, :root[data-night-shift="true"] .mobile-field-systems>summary{background:#1c2925;color:var(--ink)} :root[data-night-shift="true"] .links>.navl:focus-visible{background:#293a32} .night-shift-toggle{display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:5px 8px;border:1px solid #72756d;background:transparent;color:inherit;font:var(--t-label)/1.1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .night-shift-toggle::before{content:"";width:7px;height:7px;border:1px solid currentColor;border-radius:50%;box-shadow:inset -2px 0 0 currentColor;opacity:.85} .night-shift-toggle:hover{border-color:var(--rust-text);color:var(--rust-text)} .night-shift-toggle:focus-visible{outline:2px solid var(--rust);outline-offset:2px} :root[data-night-shift="true"] .night-shift-toggle{border-color:#9ca99e;color:#f3f0e8;background:#22312b} :root[data-night-shift="true"] .night-shift-toggle::before{color:#ffbf6a;box-shadow:0 0 8px #ff8b4d99,inset -2px 0 0 #ffbf6a} @media (max-width:620px){ .nav:has(.night-shift-toggle){height:auto;min-height:0;flex-wrap:wrap;gap:0;padding:9px 12px 10px} .nav:has(.night-shift-toggle) .brand{flex:1 1 auto} .nav:has(.night-shift-toggle) .links{width:auto;flex:0 0 auto} .night-shift-toggle{flex:0 0 100%;justify-content:center;min-height:38px;margin-top:9px;padding:8px 10px;font-size:11px;letter-spacing:.06em} :root[data-night-shift="true"] .mapwrap::before{right:27%;top:18%;width:6px;height:6px} } /* Toggle sweep (night-shift.js, view-transition browsers only). */ :root.ns-sweep::view-transition-old(root),:root.ns-sweep::view-transition-new(root){animation:none;mix-blend-mode:normal} :root.ns-sweep::view-transition-new(root){animation:ns-sweep .8s cubic-bezier(.6,0,.2,1)} @keyframes ns-sweep{from{clip-path:circle(0 at var(--ns-x,90%) var(--ns-y,24px))}to{clip-path:circle(160vmax at var(--ns-x,90%) var(--ns-y,24px))}} @media (prefers-reduced-motion:reduce){ :root[data-night-shift="true"] .mapwrap::before{box-shadow:0 0 7px 2px #e15b328c} }